Merge pull request #13 from BEDOLAGA-DEV/dev

Dev

src/components/PromoDiscountBadge.tsx

@@ -16,7 +16,7 @@ const ClockIcon = () => (
   </svg>
 )
 
-const formatTimeLeft = (expiresAt: string): string => {
+const formatTimeLeft = (expiresAt: string, t: (key: string) => string): string => {
   const now = new Date()
   const expires = new Date(expiresAt)
   const diffMs = expires.getTime() - now.getTime()
@@ -28,12 +28,12 @@ const formatTimeLeft = (expiresAt: string): string => {
 
   if (hours > 24) {
     const days = Math.floor(hours / 24)
-    return `${days}д`
+    return `${days}${t('promo.time.days')}`
   }
   if (hours > 0) {
-    return `${hours}ч ${minutes}м`
+    return `${hours}${t('promo.time.hours')} ${minutes}${t('promo.time.minutes')}`
   }
-  return `${minutes}м`
+  return `${minutes}${t('promo.time.minutes')}`
 }
 
 export default function PromoDiscountBadge() {
@@ -65,7 +65,7 @@ export default function PromoDiscountBadge() {
     return null
   }
 
-  const timeLeft = activeDiscount.expires_at ? formatTimeLeft(activeDiscount.expires_at) : null
+  const timeLeft = activeDiscount.expires_at ? formatTimeLeft(activeDiscount.expires_at, t) : null
 
   const handleClick = () => {
     setIsOpen(!isOpen)
@@ -96,9 +96,16 @@ export default function PromoDiscountBadge() {
         <span className="absolute -top-1 -right-1 w-2 h-2 bg-success-400 rounded-full animate-pulse" />
       </button>
 
-      {/* Dropdown */}
+      {/* Dropdown - mobile: fixed centered, desktop: absolute right */}
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-72 bg-dark-800 rounded-xl shadow-xl border border-dark-700/50 z-50 animate-fade-in overflow-hidden">
+        <>
+          {/* Mobile backdrop */}
+          <div
+            className="fixed inset-0 bg-black/30 z-40 sm:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+
+          <div className="fixed left-4 right-4 top-20 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:mt-2 sm:w-72 bg-dark-800 rounded-xl shadow-xl border border-dark-700/50 z-50 animate-fade-in overflow-hidden">
             {/* Header */}
             <div className="bg-gradient-to-r from-success-500/20 to-accent-500/20 p-4 border-b border-dark-700/50">
               <div className="flex items-center gap-3">
@@ -107,7 +114,7 @@ export default function PromoDiscountBadge() {
                 </div>
                 <div>
                   <div className="font-semibold text-dark-100">
-                  {t('promo.discountActive', 'Discount active!')}
+                    {t('promo.discountActive')}
                   </div>
                   <div className="text-2xl font-bold text-success-400">
                     -{activeDiscount.discount_percent}%
@@ -119,21 +126,14 @@ export default function PromoDiscountBadge() {
             {/* Content */}
             <div className="p-4 space-y-3">
               <p className="text-sm text-dark-300">
-              {t('promo.discountDescription', 'Your personal discount is applied to subscription purchases')}
+                {t('promo.discountDescription')}
               </p>
 
               {/* Time remaining */}
               {timeLeft && (
                 <div className="flex items-center gap-2 text-sm text-dark-400 bg-dark-900/50 px-3 py-2 rounded-lg">
                   <ClockIcon />
-                <span>{t('promo.expiresIn', 'Expires in')}: <span className="text-warning-400 font-medium">{timeLeft}</span></span>
+                  <span>{t('promo.expiresIn')}: <span className="text-warning-400 font-medium">{timeLeft}</span></span>
-              </div>
-            )}
-
-            {/* Source info */}
-            {activeDiscount.source && (
-              <div className="text-xs text-dark-500">
-                {t('promo.source', 'Source')}: {activeDiscount.source}
                 </div>
               )}
 
@@ -142,10 +142,11 @@ export default function PromoDiscountBadge() {
                 onClick={handleGoToSubscription}
                 className="w-full btn-primary py-2.5 text-sm font-medium"
               >
-              {t('promo.useNow', 'Use discount now')}
+                {t('promo.useNow')}
               </button>
             </div>
           </div>
+        </>
       )}
     </div>
   )

src/locales/en.json

@@ -319,7 +319,7 @@
     "copyLink": "Copy Link",
     "copied": "Copied!",
     "shareButton": "Share",
-		"shareMessage": "Join me on {{botName}} and earn up to {{percent}}% cashback!",
+    "shareMessage": "Join me on  and earn up to {{percent}}% cashback!",
     "shareHint": "Share this link with friends. When they sign up and make a purchase, you'll earn {{percent}}% commission!",
     "stats": {
       "totalReferrals": "Total Referrals",
@@ -985,5 +985,19 @@
         "description": "Use these buttons for quick access to main features: top up balance, extend subscription, and invite friends."
       }
     }
+  },
+  "promo": {
+    "activeDiscount": "Active discount",
+    "discountActive": "Discount active!",
+    "discountDescription": "Your personal discount is applied to subscription purchases",
+    "expiresIn": "Expires in",
+    "source": "Source",
+    "useNow": "Use discount now",
+    "discountApplied": "Discount applied",
+    "time": {
+      "days": "d",
+      "hours": "h",
+      "minutes": "m"
+    }
   }
 }

src/locales/fa.json

@@ -220,7 +220,7 @@
     "copyLink": "کپی لینک",
     "copied": "کپی شد!",
     "shareButton": "اشتراک‌گذاری",
-		"shareMessage": "از طریق لینک من به {{botName}} بپیوند و تا {{percent}}٪ پاداش بگیر!",
+    "shareMessage": "از طریق لینک من به Cabinet بپیوند و تا {{percent}}٪ پاداش بگیر!",
     "shareHint": "این لینک را با دوستان به اشتراک بگذارید. وقتی ثبت نام کنند و خرید کنند، {{percent}}% کمیسیون دریافت می‌کنید!",
     "stats": {
       "totalReferrals": "کل معرفی‌ها",
@@ -762,5 +762,19 @@
         "description": "از این دکمه‌ها برای دسترسی سریع به امکانات اصلی استفاده کنید: شارژ موجودی، تمدید اشتراک و دعوت دوستان."
       }
     }
+  },
+  "promo": {
+    "activeDiscount": "تخفیف فعال",
+    "discountActive": "تخفیف فعال است!",
+    "discountDescription": "تخفیف شخصی شما برای خرید اشتراک اعمال می‌شود",
+    "expiresIn": "منقضی می‌شود در",
+    "source": "منبع",
+    "useNow": "همین الان استفاده کن",
+    "discountApplied": "تخفیف اعمال شد",
+    "time": {
+      "days": "روز",
+      "hours": "ساعت",
+      "minutes": "دقیقه"
+    }
   }
 }

src/locales/ru.json

@@ -319,7 +319,7 @@
     "copyLink": "Копировать ссылку",
     "copied": "Скопировано!",
     "shareButton": "Поделиться",
-		"shareMessage": "Заходи в {{botName}} по моей ссылке и получай до {{percent}}% кешбэка!",
+    "shareMessage": "Заходи в Cabinet по моей ссылке и получай до {{percent}}% кешбэка!",
     "shareHint": "Поделитесь ссылкой с друзьями. Когда они зарегистрируются и оплатят, вы получите {{percent}}% комиссии!",
     "stats": {
       "totalReferrals": "Всего рефералов",
@@ -1143,5 +1143,19 @@
         "description": "Используйте эти кнопки для быстрого доступа к основным функциям: пополнению баланса, продлению подписки и приглашению друзей."
       }
     }
+  },
+  "promo": {
+    "activeDiscount": "Активная скидка",
+    "discountActive": "Скидка активна!",
+    "discountDescription": "Ваша персональная скидка применяется к покупке подписки",
+    "expiresIn": "Истекает через",
+    "source": "Источник",
+    "useNow": "Использовать сейчас",
+    "discountApplied": "Скидка применена",
+    "time": {
+      "days": "д",
+      "hours": "ч",
+      "minutes": "м"
+    }
   }
 }

src/locales/zh.json

@@ -220,7 +220,7 @@
     "copyLink": "复制链接",
     "copied": "已复制！",
     "shareButton": "分享",
-		"shareMessage": "通过我的链接加入 {{botName}}，获取高达 {{percent}}% 返现！",
+    "shareMessage": "通过我的链接加入 Cabinet，获取高达 {{percent}}% 返现！",
     "shareHint": "分享链接给朋友。当他们注册并付款后，您将获得 {{percent}}% 佣金！",
     "stats": {
       "totalReferrals": "总推荐数",
@@ -762,5 +762,19 @@
         "description": "使用这些按钮快速访问主要功能：充值余额、延长订阅和邀请好友。"
       }
     }
+  },
+  "promo": {
+    "activeDiscount": "活动折扣",
+    "discountActive": "折扣已激活！",
+    "discountDescription": "您的个人折扣适用于订阅购买",
+    "expiresIn": "到期时间",
+    "source": "来源",
+    "useNow": "立即使用",
+    "discountApplied": "折扣已应用",
+    "time": {
+      "days": "天",
+      "hours": "时",
+      "minutes": "分"
+    }
   }
 }

src/pages/Subscription.tsx

@@ -1598,7 +1598,7 @@ export default function Subscription() {
                         {promoPeriod.percent && (
                           <div className="flex items-center justify-center gap-2 mb-4 p-2 bg-orange-500/10 border border-orange-500/30 rounded-lg">
                             <span className="text-orange-400 text-sm font-medium">
-                              Скидка -{promoPeriod.percent}% применена
+                              {t('promo.discountApplied')} -{promoPeriod.percent}%
                             </span>
                           </div>
                         )}
@@ -1879,7 +1879,7 @@ export default function Subscription() {
                             <path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
                           </svg>
                           <span className="text-orange-400 text-sm font-medium">
-                            Скидка -{activeDiscount.discount_percent}% применена
+                            {t('promo.discountApplied')} -{activeDiscount.discount_percent}%
                           </span>
                         </div>
                       )}