From f9231cd90a055f31f0fdddfa0cc76c2078341ed3 Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <ad933@mail.ru>
Date: Thu, 10 Feb 2022 15:34:52 +0700
Subject: [PATCH] feat(#2230): add auto renewal for sub

---
 src/config/lexics/indexLexics.tsx             |  1 +
 .../components/PackagesList/index.tsx         | 30 ++++++++++++++-----
 .../components/PackagesList/styled.tsx        | 13 ++++++++
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx
index 41e1c26e..c7e04868 100644
--- a/src/config/lexics/indexLexics.tsx
+++ b/src/config/lexics/indexLexics.tsx
@@ -39,6 +39,7 @@ const matchPopupLexics = {
 const buyMatchPopupLexics = {
   add: 15075,
   adding_card: 15074,
+  auto_renewal: 16624,
   buy_for: 14095,
   buy_subscription: 13565,
   change_card: 13564,
diff --git a/src/features/BuyMatchPopup/components/PackagesList/index.tsx b/src/features/BuyMatchPopup/components/PackagesList/index.tsx
index d14accbd..bef24119 100644
--- a/src/features/BuyMatchPopup/components/PackagesList/index.tsx
+++ b/src/features/BuyMatchPopup/components/PackagesList/index.tsx
@@ -12,6 +12,8 @@ import {
   Item,
   List,
   Price,
+  ScAutoRenewal,
+  ScPriceContainer,
 } from './styled'
 
 type Props = {
@@ -53,15 +55,27 @@ export const PackagesList = ({
                 />
               </Description>
             </InfoWrapper>
-            <Price
-              amount={subPackage.price}
-              currency={subPackage.currency}
-              perPeriod={
-                subPackage.type !== SubscriptionType.Month
-                  ? null
-                  : `per_${subPackage.type}`
+            <ScPriceContainer>
+              <Price
+                amount={subPackage.price}
+                currency={subPackage.currency}
+                perPeriod={
+                  subPackage.type !== SubscriptionType.Month
+                    ? null
+                    : `per_${subPackage.type}`
+                }
+              />
+              {
+                subPackage.type === SubscriptionType.Month
+                && (
+                  <ScAutoRenewal>
+                    <T9n
+                      t='auto_renewal'
+                    />
+                  </ScAutoRenewal>
+                )
               }
-            />
+            </ScPriceContainer>
           </Item>
         ),
       )
diff --git a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
index 1a954c5c..b23c4faa 100644
--- a/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
+++ b/src/features/BuyMatchPopup/components/PackagesList/styled.tsx
@@ -208,3 +208,16 @@ export const Price = styled(BasePrice)`
     text-transform: capitalize;
   }
 `
+
+export const ScAutoRenewal = styled(PriceDetails)`
+  line-height: 21px;
+  font-size: 12px;
+  text-transform: none;
+  margin: 0;
+  color: ${({ theme: { colors } }) => colors.text70};
+`
+
+export const ScPriceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`