Merge pull request #136 from BEDOLAGA-DEV/dev

Update Subscription.tsx

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;
+  },
 };

src/components/PromoDiscountBadge.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
-import { useQuery } from '@tanstack/react-query';
+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,7 +276,13 @@ export default function PromoDiscountBadge() {
     navigate('/subscription');
   };
 
+  const handleDeactivateClick = () => {
+    setDeactivateError(null);
+    setShowConfirmModal(true);
+  };
+
   return (
+    <>
       <div className="relative" ref={dropdownRef}>
         {/* Badge button */}
         <button
@@ -150,6 +335,13 @@ export default function PromoDiscountBadge() {
                   </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}
@@ -157,10 +349,30 @@ export default function PromoDiscountBadge() {
                 >
                   {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>
+
+      {/* Deactivation Confirmation Modal */}
+      <DeactivateConfirmModal
+        isOpen={showConfirmModal}
+        discountPercent={activeDiscount.discount_percent}
+        isDeactivating={deactivateMutation.isPending}
+        onConfirm={handleConfirmDeactivate}
+        onCancel={handleCloseConfirmModal}
+      />
+    </>
   );
 }

src/locales/zh.json

@@ -1927,6 +1927,15 @@
       "test": "测试",
       "activating": "激活中...",
       "activate": "激活"
+    },
+    "deactivate": {
+      "button": "取消优惠码",
+      "confirmTitle": "取消优惠码？",
+      "confirmDescription": "您确定要取消 {{percent}}% 的折扣吗？取消后您可以激活其他优惠码。",
+      "warning": "已取消的优惠码无法重新使用。折扣将立即失效。",
+      "confirm": "取消折扣",
+      "deactivating": "取消中...",
+      "error": "取消优惠码失败，请稍后重试。"
     }
   },
   "telegramRedirect": {

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">
+                          const trafficDisplayDiscount = hasExistingDiscount
-                            -{promoTraffic.percent}%
+                            ? 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="text-lg font-semibold text-dark-100">
-                        <div className="flex items-center justify-center gap-2">
+                                {option.label}
-                          <span className="text-accent-400">{formatPrice(promoTraffic.price)}</span>
+                              </div>
-                          {promoTraffic.original && (
+                              <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(promoTraffic.original)}
+                                      {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">
+                            const serverDisplayDiscount = hasExistingDiscount
-                              -{promoServer.percent}%
+                              ? 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 && (
+                                {(() => {
+                                  const serverOriginal = hasExistingDiscount
+                                    ? server.original_price_kopeks
+                                    : promoServer.original;
+                                  return serverOriginal && serverOriginal > promoServer.price ? (
                                     <span className="text-xs text-dark-500 line-through">
-                                    {formatPrice(promoServer.original)}
+                                      {formatPrice(serverOriginal)}
                                     </span>
-                                )}
+                                  ) : null;
+                                })()}
                               </div>
                             </div>
                           </div>