Merge pull request #136 from BEDOLAGA-DEV/dev

Update Subscription.tsx
2026-07-28 09:33:46 +00:00 · 2026-02-04 02:11:29 +03:00
parent ac1b9db462 7f5c0c83b3
commit c0f828d7a3
4 changed files with 352 additions and 86 deletions
--- a/src/api/promo.ts
+++ b/src/api/promo.ts
@@ -35,6 +35,10 @@ export interface ClaimOfferResponse {
  expires_at: string | null;
 }

+export interface DeactivateDiscountResponse {
+  success: boolean;
+}
+
 export interface LoyaltyTierInfo {
  id: number;
  name: string;
@@ -94,4 +98,10 @@ export const promoApi = {
    const response = await apiClient.delete<{ message: string }>('/cabinet/promo/active-discount');
    return response.data;
  },
+
+  // Deactivate current active promo discount
+  deactivateDiscount: async (): Promise<DeactivateDiscountResponse> => {
+    const response = await apiClient.post<DeactivateDiscountResponse>('/cabinet/promo/deactivate');
+    return response.data;
+  },
 };
--- a/src/components/PromoDiscountBadge.tsx
+++ b/src/components/PromoDiscountBadge.tsx
@@ -1,6 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { promoApi } from '../api/promo';

@@ -30,6 +31,32 @@ const ClockIcon = () => (
  </svg>
 );

+const XCircleIcon = () => (
+  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    />
+  </svg>
+);
+
+const WarningIcon = () => (
+  <svg
+    className="h-12 w-12"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={1.5}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+    />
+  </svg>
+);
+
 const formatTimeLeft = (expiresAt: string, t: (key: string) => string): string => {
  const now = new Date();
  // Ensure UTC parsing - if no timezone specified, assume UTC
@@ -57,10 +84,133 @@ const formatTimeLeft = (expiresAt: string, t: (key: string) => string): string =
  return `${minutes}${t('promo.time.minutes')}`;
 };

+// ------- Confirmation Modal -------
+
+interface DeactivateConfirmModalProps {
+  isOpen: boolean;
+  discountPercent: number;
+  isDeactivating: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+function DeactivateConfirmModal({
+  isOpen,
+  discountPercent,
+  isDeactivating,
+  onConfirm,
+  onCancel,
+}: DeactivateConfirmModalProps) {
+  const { t } = useTranslation();
+
+  // Escape key to close
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !isDeactivating) {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, isDeactivating, onCancel]);
+
+  // Scroll lock
+  useEffect(() => {
+    if (!isOpen) return;
+
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const modalContent = (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="deactivate-modal-title"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={isDeactivating ? undefined : onCancel}
+      />
+
+      {/* Modal */}
+      <div
+        className="relative mx-4 w-full max-w-sm overflow-hidden rounded-2xl border border-dark-700/50 bg-dark-900 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Warning header */}
+        <div className="flex flex-col items-center bg-gradient-to-br from-warning-500/20 to-red-500/20 px-6 pb-6 pt-8">
+          <div className="mb-3 text-warning-400">
+            <WarningIcon />
+          </div>
+          <h2 id="deactivate-modal-title" className="text-center text-lg font-bold text-dark-100">
+            {t('promo.deactivate.confirmTitle')}
+          </h2>
+          <p className="mt-2 text-center text-sm text-dark-300">
+            {t('promo.deactivate.confirmDescription', { percent: discountPercent })}
+          </p>
+        </div>
+
+        {/* Warning text */}
+        <div className="px-6 py-4">
+          <div className="rounded-lg border border-warning-500/20 bg-warning-500/10 px-4 py-3">
+            <p className="text-center text-sm text-warning-400">{t('promo.deactivate.warning')}</p>
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex gap-3 px-6 pb-6">
+          <button
+            onClick={onCancel}
+            disabled={isDeactivating}
+            className="flex-1 rounded-xl bg-dark-800 py-3 font-semibold text-dark-300 transition-colors hover:bg-dark-700 hover:text-dark-100 disabled:opacity-50"
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isDeactivating}
+            className="flex-1 rounded-xl bg-gradient-to-r from-red-500 to-red-600 py-3 font-semibold text-white shadow-lg shadow-red-500/25 transition-all hover:from-red-400 hover:to-red-500 active:from-red-600 active:to-red-700 disabled:opacity-50"
+          >
+            {isDeactivating ? (
+              <span className="flex items-center justify-center gap-2">
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                {t('promo.deactivate.deactivating')}
+              </span>
+            ) : (
+              t('promo.deactivate.confirm')
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (typeof document !== 'undefined') {
+    return createPortal(modalContent, document.body);
+  }
+  return modalContent;
+}
+
+// ------- Main Component -------
+
 export default function PromoDiscountBadge() {
  const { t } = useTranslation();
  const navigate = useNavigate();
+  const queryClient = useQueryClient();
  const [isOpen, setIsOpen] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [deactivateError, setDeactivateError] = useState<string | null>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const { data: activeDiscount } = useQuery({
@@ -70,6 +220,35 @@ export default function PromoDiscountBadge() {
    refetchInterval: 60000, // Refresh every minute
  });

+  const deactivateMutation = useMutation({
+    mutationFn: promoApi.deactivateDiscount,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['active-discount'] });
+      queryClient.invalidateQueries({ queryKey: ['promo-offers'] });
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+      queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
+      setShowConfirmModal(false);
+      setIsOpen(false);
+      setDeactivateError(null);
+    },
+    onError: (error: unknown) => {
+      const axiosErr = error as { response?: { data?: { detail?: string } } };
+      setDeactivateError(axiosErr.response?.data?.detail || t('promo.deactivate.error'));
+    },
+  });
+
+  const handleCloseConfirmModal = useCallback(() => {
+    if (!deactivateMutation.isPending) {
+      setShowConfirmModal(false);
+      setDeactivateError(null);
+    }
+  }, [deactivateMutation.isPending]);
+
+  const handleConfirmDeactivate = useCallback(() => {
+    setDeactivateError(null);
+    deactivateMutation.mutate();
+  }, [deactivateMutation]);
+
  // Close dropdown on click outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
@@ -97,70 +276,103 @@ export default function PromoDiscountBadge() {
    navigate('/subscription');
  };

+  const handleDeactivateClick = () => {
+    setDeactivateError(null);
+    setShowConfirmModal(true);
+  };
+
  return (
-    <div className="relative" ref={dropdownRef}>
-      {/* Badge button */}
-      <button
-        onClick={handleClick}
-        className="group relative flex items-center gap-1 rounded-lg bg-success-500/15 px-2.5 py-1.5 transition-all hover:bg-success-500/25"
-        title={t('promo.activeDiscount', 'Active discount')}
-      >
-        <span className="text-sm font-bold text-success-400">
-          -{activeDiscount.discount_percent}%
-        </span>
-      </button>
+    <>
+      <div className="relative" ref={dropdownRef}>
+        {/* Badge button */}
+        <button
+          onClick={handleClick}
+          className="group relative flex items-center gap-1 rounded-lg bg-success-500/15 px-2.5 py-1.5 transition-all hover:bg-success-500/25"
+          title={t('promo.activeDiscount', 'Active discount')}
+        >
+          <span className="text-sm font-bold text-success-400">
+            -{activeDiscount.discount_percent}%
+          </span>
+        </button>

-      {/* Dropdown - mobile: fixed centered, desktop: absolute right */}
-      {isOpen && (
-        <>
-          {/* Mobile backdrop */}
-          <div
-            className="fixed inset-0 z-40 bg-black/30 sm:hidden"
-            onClick={() => setIsOpen(false)}
-          />
+        {/* Dropdown - mobile: fixed centered, desktop: absolute right */}
+        {isOpen && (
+          <>
+            {/* Mobile backdrop */}
+            <div
+              className="fixed inset-0 z-40 bg-black/30 sm:hidden"
+              onClick={() => setIsOpen(false)}
+            />

-          <div className="fixed left-4 right-4 top-20 z-50 animate-fade-in overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:mt-2 sm:w-72">
-            {/* Header */}
-            <div className="border-b border-dark-700/50 bg-gradient-to-r from-success-500/20 to-accent-500/20 p-4">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-success-500/20 text-success-400">
-                  <SparklesIcon />
-                </div>
-                <div>
-                  <div className="font-semibold text-dark-100">{t('promo.discountActive')}</div>
-                  <div className="text-2xl font-bold text-success-400">
-                    -{activeDiscount.discount_percent}%
+            <div className="fixed left-4 right-4 top-20 z-50 animate-fade-in overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800 shadow-xl sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:mt-2 sm:w-72">
+              {/* Header */}
+              <div className="border-b border-dark-700/50 bg-gradient-to-r from-success-500/20 to-accent-500/20 p-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-success-500/20 text-success-400">
+                    <SparklesIcon />
+                  </div>
+                  <div>
+                    <div className="font-semibold text-dark-100">{t('promo.discountActive')}</div>
+                    <div className="text-2xl font-bold text-success-400">
+                      -{activeDiscount.discount_percent}%
+                    </div>
                  </div>
                </div>
              </div>
+
+              {/* Content */}
+              <div className="space-y-3 p-4">
+                <p className="text-sm text-dark-300">{t('promo.discountDescription')}</p>
+
+                {/* Time remaining */}
+                {timeLeft && (
+                  <div className="flex items-center gap-2 rounded-lg bg-dark-900/50 px-3 py-2 text-sm text-dark-400">
+                    <ClockIcon />
+                    <span>
+                      {t('promo.expiresIn')}:{' '}
+                      <span className="font-medium text-warning-400">{timeLeft}</span>
+                    </span>
+                  </div>
+                )}
+
+                {/* Deactivation error */}
+                {deactivateError && (
+                  <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-400">
+                    {deactivateError}
+                  </div>
+                )}
+
+                {/* CTA Button */}
+                <button
+                  onClick={handleGoToSubscription}
+                  className="btn-primary w-full py-2.5 text-sm font-medium"
+                >
+                  {t('promo.useNow')}
+                </button>
+
+                {/* Deactivate Button */}
+                <button
+                  onClick={handleDeactivateClick}
+                  className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-dark-600/50 bg-dark-900/50 py-2 text-sm text-dark-400 transition-colors hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400"
+                  aria-label={t('promo.deactivate.button')}
+                >
+                  <XCircleIcon />
+                  <span>{t('promo.deactivate.button')}</span>
+                </button>
+              </div>
            </div>
+          </>
+        )}
+      </div>

-            {/* Content */}
-            <div className="space-y-3 p-4">
-              <p className="text-sm text-dark-300">{t('promo.discountDescription')}</p>
-
-              {/* Time remaining */}
-              {timeLeft && (
-                <div className="flex items-center gap-2 rounded-lg bg-dark-900/50 px-3 py-2 text-sm text-dark-400">
-                  <ClockIcon />
-                  <span>
-                    {t('promo.expiresIn')}:{' '}
-                    <span className="font-medium text-warning-400">{timeLeft}</span>
-                  </span>
-                </div>
-              )}
-
-              {/* CTA Button */}
-              <button
-                onClick={handleGoToSubscription}
-                className="btn-primary w-full py-2.5 text-sm font-medium"
-              >
-                {t('promo.useNow')}
-              </button>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
+      {/* Deactivation Confirmation Modal */}
+      <DeactivateConfirmModal
+        isOpen={showConfirmModal}
+        discountPercent={activeDiscount.discount_percent}
+        isDeactivating={deactivateMutation.isPending}
+        onConfirm={handleConfirmDeactivate}
+        onCancel={handleCloseConfirmModal}
+      />
+    </>
  );
 }
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1927,6 +1927,15 @@
      "test": "测试",
      "activating": "激活中...",
      "activate": "激活"
+    },
+    "deactivate": {
+      "button": "取消优惠码",
+      "confirmTitle": "取消优惠码？",
+      "confirmDescription": "您确定要取消 {{percent}}% 的折扣吗？取消后您可以激活其他优惠码。",
+      "warning": "已取消的优惠码无法重新使用。折扣将立即失效。",
+      "confirm": "取消折扣",
+      "deactivating": "取消中...",
+      "error": "取消优惠码失败，请稍后重试。"
    }
  },
  "telegramRedirect": {
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -3139,7 +3139,7 @@ export default function Subscription() {
                      >
                        {displayDiscount && displayDiscount > 0 && (
                          <div
-                            className={`absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-xs font-medium text-white ${
+                            className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
                              hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
                            }`}
                          >
@@ -3147,7 +3147,7 @@ export default function Subscription() {
                          </div>
                        )}
                        <div className="text-lg font-semibold text-dark-100">{period.label}</div>
-                        <div className="flex items-center gap-2">
+                        <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
                          <span className="font-medium text-accent-400">
                            {formatPrice(promoPeriod.price)}
                          </span>
@@ -3186,20 +3186,41 @@ export default function Subscription() {
                            : ''
                        } ${!option.is_available ? 'cursor-not-allowed opacity-50' : ''}`}
                      >
-                        {promoTraffic.percent && (
-                          <div className="absolute -right-2 -top-2 rounded-full bg-orange-500 px-2 py-0.5 text-xs font-medium text-white">
-                            -{promoTraffic.percent}%
-                          </div>
-                        )}
-                        <div className="text-lg font-semibold text-dark-100">{option.label}</div>
-                        <div className="flex items-center justify-center gap-2">
-                          <span className="text-accent-400">{formatPrice(promoTraffic.price)}</span>
-                          {promoTraffic.original && (
-                            <span className="text-xs text-dark-500 line-through">
-                              {formatPrice(promoTraffic.original)}
-                            </span>
-                          )}
-                        </div>
+                        {(() => {
+                          const trafficDisplayDiscount = hasExistingDiscount
+                            ? option.discount_percent
+                            : promoTraffic.percent;
+                          const trafficDisplayOriginal = hasExistingDiscount
+                            ? option.original_price_kopeks
+                            : promoTraffic.original;
+                          return (
+                            <>
+                              {trafficDisplayDiscount && trafficDisplayDiscount > 0 && (
+                                <div
+                                  className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
+                                    hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
+                                  }`}
+                                >
+                                  -{trafficDisplayDiscount}%
+                                </div>
+                              )}
+                              <div className="text-lg font-semibold text-dark-100">
+                                {option.label}
+                              </div>
+                              <div className="mt-1 flex flex-wrap items-center justify-center gap-x-2 gap-y-1">
+                                <span className="text-accent-400">
+                                  {formatPrice(promoTraffic.price)}
+                                </span>
+                                {trafficDisplayOriginal &&
+                                  trafficDisplayOriginal > promoTraffic.price && (
+                                    <span className="text-xs text-dark-500 line-through">
+                                      {formatPrice(trafficDisplayOriginal)}
+                                    </span>
+                                  )}
+                              </div>
+                            </>
+                          );
+                        })()}
                      </button>
                    );
                  })}
@@ -3240,11 +3261,20 @@ export default function Subscription() {
                                : 'cursor-not-allowed border-dark-800/30 bg-dark-900/30 opacity-50'
                          }`}
                        >
-                          {promoServer.percent && (
-                            <div className="absolute -right-2 -top-2 rounded-full bg-orange-500 px-2 py-0.5 text-xs font-medium text-white">
-                              -{promoServer.percent}%
-                            </div>
-                          )}
+                          {(() => {
+                            const serverDisplayDiscount = hasExistingDiscount
+                              ? server.discount_percent
+                              : promoServer.percent;
+                            return serverDisplayDiscount && serverDisplayDiscount > 0 ? (
+                              <div
+                                className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
+                                  hasExistingDiscount ? 'bg-success-500' : 'bg-orange-500'
+                                }`}
+                              >
+                                -{serverDisplayDiscount}%
+                              </div>
+                            ) : null;
+                          })()}
                          <div className="flex items-center gap-3">
                            <div
                              className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded border-2 ${
@@ -3257,16 +3287,21 @@ export default function Subscription() {
                            </div>
                            <div>
                              <div className="font-medium text-dark-100">{server.name}</div>
-                              <div className="flex items-center gap-2">
+                              <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                                <span className="text-sm text-accent-400">
                                  {formatPrice(promoServer.price)}
                                  {t('subscription.perMonth')}
                                </span>
-                                {promoServer.original && (
-                                  <span className="text-xs text-dark-500 line-through">
-                                    {formatPrice(promoServer.original)}
-                                  </span>
-                                )}
+                                {(() => {
+                                  const serverOriginal = hasExistingDiscount
+                                    ? server.original_price_kopeks
+                                    : promoServer.original;
+                                  return serverOriginal && serverOriginal > promoServer.price ? (
+                                    <span className="text-xs text-dark-500 line-through">
+                                      {formatPrice(serverOriginal)}
+                                    </span>
+                                  ) : null;
+                                })()}
                              </div>
                            </div>
                          </div>