feat(#2230): add auto renewal for sub

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,

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>
         ),
       )

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;
+`