fix(#2504): Change name of subs to lexic and some styles

src/features/UserAccount/components/CancelSubPopup/index.tsx

@@ -43,8 +43,8 @@ export const CancelSubPopup = (props: Props) => {
 
   const {
     access_to,
-    name,
+    lexic,
-    option_name,
+    option_sys_name,
   } = subscribe
 
   return (
@@ -69,12 +69,12 @@ export const CancelSubPopup = (props: Props) => {
                 <T9n t='if_you_cancel' />
               </Text>
               <ScCancelSub>
-                {option_name} — {name}
+                {option_sys_name && `${option_sys_name[0].toUpperCase()}${option_sys_name.slice(1, option_sys_name.length)}`} — <T9n t={lexic} />
               </ScCancelSub>
               <Text>
                 <T9n t='after_canceling' />
                 &nbsp;
-                {access_to && format(new Date(access_to), 'dd.MM.yyyy')}
+                <b>{access_to && format(new Date(access_to), 'dd.MM.yyyy')}</b>
               </Text>
               <Footer>
                 <ScStillCancelBtn

src/features/UserAccount/components/PageSubscriptions/hooks.tsx

@@ -3,9 +3,12 @@ import { useEffect, useState } from 'react'
 import { getUserSubscribes, Subscribe } from 'requests/getUserSubscribes'
 import { cancelSubscribe } from 'requests/cancelSubscribe'
 
+import { useLexicsStore } from 'features/LexicsStore'
 import { useAuthStore } from 'features/AuthStore'
 
 export const useUserSubscribes = () => {
+  const { addLexicsConfig } = useLexicsStore()
+
   const [selectedSubscribe, setSelectedSubscribe] = useState<Subscribe>({} as Subscribe)
   const [subscribes, setSubscribes] = useState<any>([])
   const [isCancelPopupOpen, setIsCancelPopupOpen] = useState(false)
@@ -40,6 +43,7 @@ export const useUserSubscribes = () => {
       const allSubscribes = (await (getUserSubscribes(user?.profile?.email || '')))
         .sort((a, b) => Date.parse(b.access_to) - Date.parse(a.access_to))
       setSubscribes(allSubscribes)
+      addLexicsConfig(allSubscribes.map(({ lexic }) => lexic))
       setIsFetching(false)
     })()
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/features/UserAccount/components/PageSubscriptions/index.tsx

@@ -65,8 +65,8 @@ export const PageSubscriptions = () => {
                 card,
                 is_active,
                 iso,
+                lexic,
                 name,
-                option_name,
                 price,
                 purchase_type,
                 sub_id,
@@ -78,15 +78,24 @@ export const PageSubscriptions = () => {
                 <ScSubscribe key={`${access_to}${name}`}>
                   <ScItem>
                     <T9n t='subscription_plan' className='payment_title' />
-                    <ScText className='payment_plan'>
+                    <ScText
-                      {option_name} — {name}
+                      isActive={is_active}
+                      className='payment_plan'
+                    >
+                      <T9n t={lexic} />
                     </ScText>
                   </ScItem>
                   <ScItemPaymentSum>
                     <ScItem>
                       <T9n t='sum' className='payment_title' />
-                      <ScText>
+                      <ScText isActive={is_active}>
-                        {iso} {price}
+                        {is_active && !hideCancel ? `${iso} ${price}` : '—'}
+                        {is_active && purchase_type === 'subscription' && !hideCancel ? (
+                          <>
+                            /
+                            <T9n t='month' className='payment_plan' />
+                          </>
+                        ) : ''}
                       </ScText>
                     </ScItem>
                     <ScItem>
@@ -98,14 +107,17 @@ export const PageSubscriptions = () => {
                         }
                         className='payment_title'
                       />
-                      <ScText>
+                      <ScText isActive={is_active}>
-                        {format(new Date(access_to), 'd MMM   yyyy')}
+                        {is_active && !hideCancel ? format(new Date(access_to), 'd MMM   yyyy') : '—'}
                       </ScText>
                     </ScItem>
                   </ScItemPaymentSum>
-                  <ScItem>
+                  <ScItem className='isActive'>
                     <T9n t='payment_method' className='payment_title' />
-                    <ScText className='payment_method'>
+                    <ScText
+                      isActive={is_active}
+                      className='payment_method'
+                    >
                       <ScCard>{card}</ScCard>
                       {/* <Icon
                     refIcon='Edit'

src/features/UserAccount/components/PageSubscriptions/styled.tsx

@@ -92,8 +92,8 @@ export const ScItem = styled.div`
   }
 `
 
-export const ScText = styled.span`
+export const ScText = styled.span<({ isActive?: boolean })>`
-  color: #FFFFFF;
+  color: ${({ isActive }) => (isActive ? '#FFFFFF' : 'rgba(255, 255, 255, 0.6)')};
   max-width: 560px;
   
   ${isMobileDevice

src/requests/getUserSubscribes.tsx

@@ -13,6 +13,9 @@ export type Subscribe = {
   is_access: boolean,
   is_active: boolean,
   iso: string,
+  lexic: number,
+  lexic1: number,
+  lexic2: number,
   name: string,
   option_name: string,
   option_sys_name: string,