From 588bf663759cc0a4e97b16afd8dfec245dc80af6 Mon Sep 17 00:00:00 2001
From: Rakov Roman <roman.rakov@instatsport.com>
Date: Tue, 24 May 2022 13:50:11 +0300
Subject: [PATCH] fix(#2448): added phrase about unsubscribe into user personal
 info

---
 src/components/InfoIcon/InfoIcon.tsx          |  5 +++
 src/config/lexics/userAccount.tsx             |  1 +
 .../components/UnsubscribePrompt/index.tsx    | 32 +++++++++++++++++++
 src/features/UserAccount/index.tsx            |  2 ++
 src/libs/index.ts                             |  1 +
 src/libs/objects/Info.tsx                     | 14 ++++++++
 6 files changed, 55 insertions(+)
 create mode 100644 src/components/InfoIcon/InfoIcon.tsx
 create mode 100644 src/features/UserAccount/components/UnsubscribePrompt/index.tsx
 create mode 100644 src/libs/objects/Info.tsx

diff --git a/src/components/InfoIcon/InfoIcon.tsx b/src/components/InfoIcon/InfoIcon.tsx
new file mode 100644
index 00000000..3433ad37
--- /dev/null
+++ b/src/components/InfoIcon/InfoIcon.tsx
@@ -0,0 +1,5 @@
+import { Icon } from 'features/Icon'
+
+export const InfoIcon = () => (
+  <Icon refIcon='Info' />
+)
diff --git a/src/config/lexics/userAccount.tsx b/src/config/lexics/userAccount.tsx
index 209248c6..e1705ffe 100644
--- a/src/config/lexics/userAccount.tsx
+++ b/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,
diff --git a/src/features/UserAccount/components/UnsubscribePrompt/index.tsx b/src/features/UserAccount/components/UnsubscribePrompt/index.tsx
new file mode 100644
index 00000000..8c0e4379
--- /dev/null
+++ b/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>
+)
diff --git a/src/features/UserAccount/index.tsx b/src/features/UserAccount/index.tsx
index 396df753..3b410596 100644
--- a/src/features/UserAccount/index.tsx
+++ b/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>
diff --git a/src/libs/index.ts b/src/libs/index.ts
index 98a6efb1..9dd1d574 100644
--- a/src/libs/index.ts
+++ b/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'
diff --git a/src/libs/objects/Info.tsx b/src/libs/objects/Info.tsx
new file mode 100644
index 00000000..3570f1b2
--- /dev/null
+++ b/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>
+)