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,6 +55,7 @@ export const PackagesList = ({
                 />
               </Description>
             </InfoWrapper>
+            <ScPriceContainer>
               <Price
                 amount={subPackage.price}
                 currency={subPackage.currency}
@@ -62,6 +65,17 @@ export const PackagesList = ({
                     : `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;
+`