feat(#2248): add check for confirm agreements

src/config/lexics/indexLexics.tsx

@@ -36,6 +36,11 @@ const matchPopupLexics = {
   watching_now: 16041,
 }
 
+const confirmPopup = {
+  consent: 15431,
+  i_agree: 15430,
+  updated_terms: 15429,
+}
 const buyMatchPopupLexics = {
   add: 15075,
   adding_card: 15074,
@@ -144,6 +149,7 @@ export const indexLexics = {
   watch_from_last_pause: 13022,
   watch_now: 13020,
 
+  ...confirmPopup,
   ...preferencesPopupLexics,
   ...proceduresLexics,
   ...matchPopupLexics,

src/config/procedures.tsx

@@ -15,6 +15,7 @@ export const PROCEDURES = {
   get_tournament_list: 'get_tournament_list',
   get_tournament_matches: 'get_tournament_matches',
   get_tournaments: 'get_tournaments',
+  get_user_agreemens: 'get_user_agreemens',
   get_user_favorites: 'get_user_favorites',
   get_user_info: 'get_user_info',
   get_user_match_second: 'get_user_match_second',
@@ -35,4 +36,5 @@ export const PROCEDURES = {
   save_user_page: 'save_user_page',
   save_user_preferences: 'save_user_preferences',
   save_user_subscription: 'save_user_subscription',
+  set_user_agreements: 'set_user_agreements',
 }

src/features/AuthServiceApp/components/Login/hooks.tsx

@@ -25,13 +25,6 @@ export const useLoginForm = () => {
   const [authError, setAuthError] = useState('')
   const [isFetching, setIsFetching] = 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)
 
@@ -57,9 +50,6 @@ export const useLoginForm = () => {
     setIsRecoveryPopupOpen(true)
   }
 
-  const closeConfirmPopup = () => {
-    setIsConfirmPopupOpen(false)
-  }
   const submitForm = () => formRef.current?.submit()
 
   const handleError = (error: string) => {
@@ -95,20 +85,14 @@ export const useLoginForm = () => {
     setAuthError('')
   }, [email, password])
 
-  useEffect(() => {
-    countVisits()
-  }, [])
-
   return {
     authError,
     client_id,
-    closeConfirmPopup,
     email,
     formError,
     formRef,
     handleModalOpen,
     handleSubmit,
-    isConfirmPopupOpen,
     isFetching,
     isRecoveryPopupOpen,
     isSubmitDisabled,
@@ -122,7 +106,6 @@ export const useLoginForm = () => {
     response_mode,
     response_type,
     scope,
-    setIsConfirmPopupOpen,
     setIsRecoveryPopupOpen,
     url,
   }

src/features/AuthServiceApp/components/Login/index.tsx

@@ -1,7 +1,6 @@
 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'
@@ -29,13 +28,11 @@ const Login = () => {
   const {
     authError,
     client_id,
-    closeConfirmPopup,
     email,
     formError,
     formRef,
     handleModalOpen,
     handleSubmit,
-    isConfirmPopupOpen,
     isFetching,
     isRecoveryPopupOpen,
     isSubmitDisabled,
@@ -118,7 +115,7 @@ const Login = () => {
             </LanguageSelectWrapper>
           </Container>
         </Form>
-        <RecoveryPopup isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
+        <RecoveryPopup isModalOpen={isRecoveryPopupOpen} setIsModalOpen={setIsRecoveryPopupOpen} />
       </CenterBlock>
       <CompanyInfo textAlign='center' width='450px' />
     </Wrapper>

src/features/AuthServiceApp/components/Registration/hooks.tsx

@@ -1,6 +1,7 @@
 import { SyntheticEvent, useState } from 'react'
 import { useHistory } from 'react-router'
 
+import { setAgreements } from 'requests/getAgreements'
 import { useAuthFields } from 'features/AuthServiceApp/hooks/useAuthFields'
 
 import { registerCheck } from '../../requests/register'
@@ -46,6 +47,7 @@ export const useRegistrationForm = () => {
       setAuthError('')
       setIsFetching(false)
       setIsModalOpen(true)
+      setAgreements(email)
     } catch (err) {
       setAuthError(String(err))
       setIsFetching(false)

src/features/HomePage/hooks.tsx

@@ -1,7 +1,13 @@
-import { useCallback } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
 import format from 'date-fns/format'
 
 import { getHomeMatches } from 'requests/getMatches'
+import { useAuthStore } from 'features/AuthStore'
+import { getAgreements, setAgreements } from 'requests/getAgreements'
 
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
@@ -20,7 +26,24 @@ const getTimezoneOffset = (date: Date) => {
 const getDate = (date: Date) => format(date, 'yyyy-MM-dd')
 
 export const useHomePage = () => {
+  const { user } = useAuthStore()
   const { selectedDate } = useHeaderFiltersStore()
+  const [isShowConfirmPopup, setIsShowConfirmPopup] = useState(false)
+
+  const handleCloseConfirmPopup = useCallback(async () => {
+    await setAgreements(user?.profile?.email || '')
+    setIsShowConfirmPopup(false)
+  }, [setIsShowConfirmPopup, user])
+
+  useEffect(() => {
+    (async () => {
+      const agreement = await getAgreements(user?.profile?.email || '')
+      if (!agreement?.is_agreement_privacy_policy && !agreement?.is_agreement_terms_conditions) {
+        setIsShowConfirmPopup(true)
+      }
+    })()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const fetchMatches = useCallback(
     (limit: number, offset: number) => getHomeMatches({
@@ -33,5 +56,7 @@ export const useHomePage = () => {
   )
   return {
     fetchMatches,
+    handleCloseConfirmPopup,
+    isShowConfirmPopup,
   }
 }

src/features/HomePage/index.tsx

@@ -3,6 +3,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { usePageLogger } from 'hooks/usePageLogger'
 
+import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
 import { Matches } from 'features/Matches'
 import {
   HeaderFiltersStore,
@@ -22,7 +23,11 @@ import { HeaderFilters } from './components/HeaderFilters'
 
 const Home = () => {
   usePageLogger(PAGES.home)
-  const { fetchMatches } = useHomePage()
+  const {
+    fetchMatches,
+    handleCloseConfirmPopup,
+    isShowConfirmPopup,
+  } = useHomePage()
   return (
     <PageWrapper>
       {isMobileDevice ? <HeaderMobile /> : <Header />}
@@ -31,6 +36,10 @@ const Home = () => {
         <Content>
           {isMobileDevice ? null : <HeaderFilters />}
           <Matches fetch={fetchMatches} />
+          <ConfirmPopup
+            isModalOpen={isShowConfirmPopup}
+            handleModalClose={handleCloseConfirmPopup}
+          />
         </Content>
       </Main>
     </PageWrapper>

src/requests/getAgreements.tsx

@@ -0,0 +1,59 @@
+import { DATA_URL, PROCEDURES } from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES
+
+export type AgreementsType = {
+  agreement_id: number,
+  email: string,
+  ip_adress: null,
+  is_agreement_privacy_policy: boolean,
+  is_agreement_terms_conditions: boolean,
+  status: number,
+  ts_agreement: null,
+  user_id: number,
+}
+
+export type SetAgreementsType = {
+  _p_status: 1,
+}
+
+export type SetAgreementsTypeError = {
+  _p_status: 2,
+  error: string,
+}
+
+export const getAgreements = async (_p_email: string): Promise<AgreementsType> => {
+  const config = {
+    body: {
+      params: {
+        _p_email,
+      },
+      proc: proc.get_user_agreemens,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}
+
+export const setAgreements = async (_p_email: string): Promise<SetAgreementsType
+| SetAgreementsTypeError> => {
+  const config = {
+    body: {
+      params: {
+        _p_email,
+        _p_is_agreement_privacy_policy: true,
+        _p_is_agreement_terms_conditions: true,
+      },
+      proc: proc.set_user_agreements,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}