fix(#2448): added phrase about unsubscribe into user personal info

src/components/InfoIcon/InfoIcon.tsx

@@ -0,0 +1,5 @@
+import { Icon } from 'features/Icon'
+
+export const InfoIcon = () => (
+  <Icon refIcon='Info' />
+)

src/config/lexics/userAccount.tsx

@@ -35,6 +35,7 @@ export const userAccountLexics = {
   subscriptions: 13016,
   subscriptions_active: 15061,
   subscriptions_removed: 15062,
+  unsubscribe_prompt: 18198,
   user_account: 12928,
   ...navigations,
   ...publicLexics,

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

@@ -0,0 +1,32 @@
+import { InfoIcon } from 'components/InfoIcon/InfoIcon'
+import styled, { css } from 'styled-components'
+import { T9n } from 'features/T9n'
+import { isMobileDevice } from 'config/userAgent'
+
+const Wrapper = styled.div`
+  display: flex;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  max-width: 340px;
+  margin-top: 50px;
+
+  ${isMobileDevice
+    ? css`
+    margin-top: 25px;
+    font-size: 12px;
+  `
+    : ''}
+`
+
+const WrapperIcon = styled.div`
+  margin-right: 10px;
+`
+
+export const UnsubscribePrompt = () => (
+  <Wrapper>
+    <WrapperIcon>
+      <InfoIcon />
+    </WrapperIcon>
+    <T9n t='unsubscribe_prompt' />
+  </Wrapper>
+)

src/features/UserAccount/index.tsx

@@ -16,6 +16,7 @@ import { PageSubscriptions } from './components/PageSubscriptions'
 import { PagePaymentsHistory } from './components/PagePaymentsHistory'
 import { ScoreSwitch } from './components/ScoreSwitch'
 import { LogoutButton } from './components/LogoutButton'
+import { UnsubscribePrompt } from './components/UnsubscribePrompt'
 import {
   Aside,
   Body,
@@ -53,6 +54,7 @@ const UserAccount = () => {
             </StyledLink>
 
             <ScoreSwitch />
+            <UnsubscribePrompt />
           </Navigations>
           <LogoutButton />
         </Aside>

src/libs/index.ts

@@ -9,3 +9,4 @@ export { Volleyball } from './objects/Volleyball'
 export { Star } from './objects/Star'
 export { Dollar } from './objects/Dollar'
 export { Close } from './objects/Close'
+export { Info } from './objects/Info'

src/libs/objects/Info.tsx

@@ -0,0 +1,14 @@
+export const Info = () => (
+  <svg
+    width='17'
+    height='17'
+    viewBox='0 0 17 17'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M8.5 1.0625C4.39277 1.0625 1.0625 4.39277 1.0625 8.5C1.0625 12.6072 4.39277 15.9375 8.5 15.9375C12.6072 15.9375 15.9375 12.6072 15.9375 8.5C15.9375 4.39277 12.6072 1.0625 8.5 1.0625ZM9.03125 12.0859C9.03125 12.159 8.97148 12.2188 8.89844 12.2188H8.10156C8.02852 12.2188 7.96875 12.159 7.96875 12.0859V7.57031C7.96875 7.49727 8.02852 7.4375 8.10156 7.4375H8.89844C8.97148 7.4375 9.03125 7.49727 9.03125 7.57031V12.0859ZM8.5 6.375C8.29147 6.37074 8.09292 6.28492 7.94695 6.13594C7.80098 5.98696 7.71923 5.7867 7.71923 5.57812C7.71923 5.36955 7.80098 5.16929 7.94695 5.02031C8.09292 4.87133 8.29147 4.78551 8.5 4.78125C8.70853 4.78551 8.90708 4.87133 9.05305 5.02031C9.19902 5.16929 9.28077 5.36955 9.28077 5.57812C9.28077 5.7867 9.19902 5.98696 9.05305 6.13594C8.90708 6.28492 8.70853 6.37074 8.5 6.375Z'
+      fill='white'
+    />
+  </svg>
+)