From aff3c0b92d0ebf85d085eed73e6e3f71ec6627cf Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 16 Jan 2024 21:33:02 +0100
Subject: [PATCH] PremiumMainModal: Fix price for annual subscribe option
 (#4189)

---
 .../main/premium/PremiumMainModal.tsx         | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx
index 5dab18ed6..ec093b472 100644
--- a/src/components/main/premium/PremiumMainModal.tsx
+++ b/src/components/main/premium/PremiumMainModal.tsx
@@ -255,6 +255,19 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
     return Number(monthOption.amount);
   }, [promo]);
 
+  const subscribeButtonText = useMemo(() => {
+    if (!selectedSubscriptionOption) {
+      return undefined;
+    }
+    const { amount, months, currency } = selectedSubscriptionOption;
+    const perMonthPrice = Math.floor(amount / months);
+    return formatCurrency(
+      perMonthPrice,
+      currency,
+      lang.code,
+    );
+  }, [selectedSubscriptionOption, lang.code]);
+
   if (!promo || (fromUserStatusEmoji && !fromUserStatusSet)) return undefined;
 
   function getHeaderText() {
@@ -397,12 +410,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
             {!isPremium && selectedSubscriptionOption && (
               <div className={styles.footer}>
                 <Button className={styles.button} isShiny withPremiumGradient onClick={handleClick}>
-                  {lang('SubscribeToPremium',
-                    formatCurrency(
-                      selectedSubscriptionOption.amount,
-                      selectedSubscriptionOption.currency,
-                      lang.code,
-                    ))}
+                  {lang('SubscribeToPremium', subscribeButtonText)}
                 </Button>
               </div>
             )}