From 0f1ba52bbe2ed0f8aa409029719afd2ca3d72eed Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <ad933@mail.ru>
Date: Fri, 18 Mar 2022 22:04:55 +0700
Subject: [PATCH] feat(#2248): add popup for confirm cookies

---
 .../components/ConfirmPopup/index.tsx         | 49 +++++++++++++++++++
 .../components/ConfirmPopup/styled.tsx        | 30 ++++++++++++
 .../AuthServiceApp/components/Login/hooks.tsx | 28 +++++++++--
 .../AuthServiceApp/components/Login/index.tsx |  7 ++-
 .../components/Registration/styled.tsx        |  1 +
 src/features/AuthServiceApp/config/lexics.tsx |  3 ++
 6 files changed, 112 insertions(+), 6 deletions(-)
 create mode 100644 src/features/AuthServiceApp/components/ConfirmPopup/index.tsx
 create mode 100644 src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx

diff --git a/src/features/AuthServiceApp/components/ConfirmPopup/index.tsx b/src/features/AuthServiceApp/components/ConfirmPopup/index.tsx
new file mode 100644
index 00000000..33fb1c6f
--- /dev/null
+++ b/src/features/AuthServiceApp/components/ConfirmPopup/index.tsx
@@ -0,0 +1,49 @@
+import { T9n } from 'features/T9n'
+
+import {
+  ScBody,
+  Modal,
+  ScApplyButton,
+  ScHeaderTitle,
+  ScText,
+} from './styled'
+
+import {
+  Header,
+  Wrapper,
+  Footer,
+} from '../RegisterPopup/styled'
+
+type Props = {
+  handleModalClose: () => void,
+  isModalOpen: boolean,
+}
+
+export const ConfirmPopup = (props: Props) => {
+  const {
+    handleModalClose,
+    isModalOpen,
+  } = props
+
+  return (
+    <Modal isOpen={isModalOpen} withCloseButton={false}>
+      <Wrapper>
+        <Header>
+          <ScHeaderTitle>
+            <T9n t='consent' />
+          </ScHeaderTitle>
+        </Header>
+        <ScBody>
+          <ScText>
+            <T9n t='updated_terms' />
+          </ScText>
+        </ScBody>
+        <Footer>
+          <ScApplyButton onClick={() => handleModalClose()}>
+            <T9n t='i_agree' />
+          </ScApplyButton>
+        </Footer>
+      </Wrapper>
+    </Modal>
+  )
+}
diff --git a/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx
new file mode 100644
index 00000000..7d6cab2b
--- /dev/null
+++ b/src/features/AuthServiceApp/components/ConfirmPopup/styled.tsx
@@ -0,0 +1,30 @@
+import styled from 'styled-components/macro'
+import { ModalWindow } from 'features/Modal/styled'
+import {
+  ApplyButton,
+  Body,
+  Modal as BaseModal,
+  HeaderTitle,
+} from 'features/AuthServiceApp/components/RegisterPopup/styled'
+
+export const Modal = styled(BaseModal)`
+  ${ModalWindow} {
+    min-height: 220px;
+  }
+`
+
+export const ScHeaderTitle = styled(HeaderTitle)`
+  text-align: center;
+`
+
+export const ScBody = styled(Body)`
+  padding: 25px 16px 0 16px;
+`
+
+export const ScText = styled.span`
+  text-align: center;
+`
+
+export const ScApplyButton = styled(ApplyButton)`
+  margin: 0;
+`
diff --git a/src/features/AuthServiceApp/components/Login/hooks.tsx b/src/features/AuthServiceApp/components/Login/hooks.tsx
index b2ba8a09..454928bd 100644
--- a/src/features/AuthServiceApp/components/Login/hooks.tsx
+++ b/src/features/AuthServiceApp/components/Login/hooks.tsx
@@ -24,7 +24,14 @@ export const useLoginForm = () => {
   } = useParamsUrl()
   const [authError, setAuthError] = useState('')
   const [isFetching, setIsFetching] = useState(false)
-  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isRecoveryPopupOpen, setIsRecoveryPopupOpen] = useState(false)
+  const [isConfirmPopupOpen, setIsConfirmPopupOpen] = useState(false)
+
+  const countVisits = () => {
+    if (!localStorage.getItem('countVisits')) {
+      setIsConfirmPopupOpen(true)
+    }
+  }
 
   const formRef = useRef<HTMLFormElement>(null)
 
@@ -47,7 +54,11 @@ export const useLoginForm = () => {
   )
 
   const handleModalOpen = () => {
-    setIsModalOpen(true)
+    setIsRecoveryPopupOpen(true)
+  }
+
+  const closeConfirmPopup = () => {
+    setIsConfirmPopupOpen(false)
   }
   const submitForm = () => formRef.current?.submit()
 
@@ -72,6 +83,8 @@ export const useLoginForm = () => {
           scope,
         },
       })
+      const numberVisits = localStorage.getItem('countVisits') ?? 0
+      localStorage.setItem('countVisits', (Number(numberVisits) + 1).toString())
       submitForm()
     } catch (err) {
       handleError(String(err))
@@ -82,16 +95,22 @@ export const useLoginForm = () => {
     setAuthError('')
   }, [email, password])
 
+  useEffect(() => {
+    countVisits()
+  }, [])
+
   return {
     authError,
     client_id,
+    closeConfirmPopup,
     email,
     formError,
     formRef,
     handleModalOpen,
     handleSubmit,
+    isConfirmPopupOpen,
     isFetching,
-    isModalOpen,
+    isRecoveryPopupOpen,
     isSubmitDisabled,
     lang,
     onEmailBlur,
@@ -103,7 +122,8 @@ export const useLoginForm = () => {
     response_mode,
     response_type,
     scope,
-    setIsModalOpen,
+    setIsConfirmPopupOpen,
+    setIsRecoveryPopupOpen,
     url,
   }
 }
diff --git a/src/features/AuthServiceApp/components/Login/index.tsx b/src/features/AuthServiceApp/components/Login/index.tsx
index d9a70d8d..06383c09 100644
--- a/src/features/AuthServiceApp/components/Login/index.tsx
+++ b/src/features/AuthServiceApp/components/Login/index.tsx
@@ -1,6 +1,7 @@
 import { T9n } from 'features/T9n'
 import { ArrowLoader } from 'features/ArrowLoader'
 import { RecoveryPopup } from 'features/AuthServiceApp/components/RecoveryPopup'
+import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
 
 import { PAGES } from '../../config/pages'
 import { LanguageSelect } from '../LanguageSelect'
@@ -28,13 +29,15 @@ const Login = () => {
   const {
     authError,
     client_id,
+    closeConfirmPopup,
     email,
     formError,
     formRef,
     handleModalOpen,
     handleSubmit,
+    isConfirmPopupOpen,
     isFetching,
-    isModalOpen,
+    isRecoveryPopupOpen,
     isSubmitDisabled,
     lang,
     onEmailBlur,
@@ -46,7 +49,7 @@ const Login = () => {
     response_mode,
     response_type,
     scope,
-    setIsModalOpen,
+    setIsRecoveryPopupOpen,
     url,
   } = useLoginForm()
 
diff --git a/src/features/AuthServiceApp/components/Registration/styled.tsx b/src/features/AuthServiceApp/components/Registration/styled.tsx
index 560660c3..7ff07ebb 100644
--- a/src/features/AuthServiceApp/components/Registration/styled.tsx
+++ b/src/features/AuthServiceApp/components/Registration/styled.tsx
@@ -37,6 +37,7 @@ export const CheckboxWrapper = styled.div`
 `
 
 export const Label = styled.span`
+  width: 100%;
   font-weight: normal;
   font-size: 14px;
   line-height: 21px;
diff --git a/src/features/AuthServiceApp/config/lexics.tsx b/src/features/AuthServiceApp/config/lexics.tsx
index 7e4fcaae..127c8fb7 100644
--- a/src/features/AuthServiceApp/config/lexics.tsx
+++ b/src/features/AuthServiceApp/config/lexics.tsx
@@ -6,6 +6,7 @@ export const lexics = {
   check_password: 15842,
   confirm_2_hours: 15906,
   confirm_email: 15432,
+  consent: 15431,
   error_accept_cookies: 17268,
   error_email_already_in_use: 11156,
   error_empty_email: 2498,
@@ -27,6 +28,7 @@ export const lexics = {
   form_password: 751,
   go_back: 1907,
   i_accept: 15737,
+  i_agree: 15430,
   login: 13404,
   password_new: 15056,
   password_repeat: 15057,
@@ -45,4 +47,5 @@ export const lexics = {
   step_title_registration: 1306,
   terms_and_conditions: 15738,
   to_email: 15904,
+  updated_terms: 15429,
 }