feat(2248): add checkbox terms with cookies

src/config/clients/facr.tsx

@@ -25,7 +25,7 @@ export const facr: ClientConfig = {
   description: 'Live sports streaming platform. All matches playing under the auspices of Czech Republic FA. Access to full matches, various player playlists, and highlights. Free access in the Czech Republic. Available across all devices',
   disabledPreferences: false,
   name: ClientNames.Facr,
-  privacyLink: '/clients/facr/terms-and-conditions.html',
+  privacyLink: '/terms-and-conditions?client_id=facr-ott-web',
   requests: {
     [PROCEDURES.get_matches]: params,
     [PROCEDURES.get_team_matches]: params,

src/config/clients/instat.tsx

@@ -12,7 +12,7 @@ export const instat: ClientConfig = {
   description: 'Live sports streaming platform. Football, basketball, ice hockey and more. Access to various player playlists and game highlights. Multiple subscription options. Available across all devices.',
   disabledPreferences: true,
   name: ClientNames.Instat,
-  privacyLink: '/clients/instat/terms-and-conditions.html',
+  privacyLink: '/terms-and-conditions?client_id=ott-web',
   showSearch: true,
   styles: {
     background: 'background-image: url(/images/Checker.png);',

src/config/lexics/userAccount.tsx

@@ -36,6 +36,7 @@ export const userAccountLexics = {
   subscriptions: 13016,
   subscriptions_active: 15061,
   subscriptions_removed: 15062,
+  terms_and_conditions: 15738,
   user_account: 12928,
   ...navigations,
   ...publicLexics,

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

@@ -11,7 +11,8 @@ export const useRegistrationForm = () => {
   const history = useHistory()
   const urlParams = useParamsUrl()
   const [authError, setAuthError] = useState('')
-  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [termsAccepted, setTermsAccepted] = useState(true)
+  const [cookiesAccepted, setCookiesAccepted] = useState(true)
   const [isFetching, setIsFetching] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const {
@@ -28,6 +29,7 @@ export const useRegistrationForm = () => {
     !email
     || !password
     || !termsAccepted
+    || !cookiesAccepted
     || Boolean(formError)
     || isFetching
   )
@@ -59,8 +61,17 @@ export const useRegistrationForm = () => {
     setTermsAccepted(!termsAccepted)
   }
 
+  const onCookiesChange = () => {
+    setAuthError('')
+    setCookiesAccepted(!cookiesAccepted)
+    if (cookiesAccepted) {
+      setAuthError('error_accept_cookies')
+    }
+  }
+
   return {
     authError,
+    cookiesAccepted,
     email,
     formError,
     handleModalClose,
@@ -68,6 +79,7 @@ export const useRegistrationForm = () => {
     isFetching,
     isModalOpen,
     isSubmitDisabled,
+    onCookiesChange,
     onEmailBlur,
     onEmailChange,
     onPasswordBlur,

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

@@ -32,6 +32,7 @@ const Registration = () => {
   const history = useHistory()
   const {
     authError,
+    cookiesAccepted,
     email,
     formError,
     handleModalClose,
@@ -39,6 +40,7 @@ const Registration = () => {
     isFetching,
     isModalOpen,
     isSubmitDisabled,
+    onCookiesChange,
     onEmailBlur,
     onEmailChange,
     onPasswordBlur,
@@ -86,7 +88,19 @@ const Registration = () => {
             onChange={onTermsChange}
             label={(
               <Label>
-                <T9n t='i_accept' />
+                <T9n t='accept_privacy' />
+                <Link href={client.privacyLink} target='_blank'>
+                  <T9n t='terms_and_conditions' />
+                </Link>
+              </Label>
+            )}
+          />
+          <Checkbox
+            checked={cookiesAccepted}
+            onChange={onCookiesChange}
+            label={(
+              <Label>
+                <T9n t='accept_cookies' />
                 <Link href={client.privacyLink} target='_blank'>
                   <T9n t='terms_and_conditions' />
                 </Link>

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

@@ -26,8 +26,14 @@ export const ButtonOutline = styled(ButtonOutlineBase)`
 export const CheckboxWrapper = styled.div`
   width: 100%;
   display: flex;
+  flex-direction: column;
   margin-top: 4px;
   margin-bottom: 24px;
+  > * {
+      &:first-child {
+         margin-bottom: 20px;
+      }
+    }
 `
 
 export const Label = styled.span`

src/features/AuthServiceApp/config/lexics.tsx

@@ -1,9 +1,12 @@
 export const lexics = {
+  accept_cookies: 17203,
+  accept_privacy: 17202,
   change_password: 13442,
   check_email: 15907,
   check_password: 15842,
   confirm_2_hours: 15906,
   confirm_email: 15432,
+  error_accept_cookies: 17268,
   error_email_already_in_use: 11156,
   error_empty_email: 2498,
   error_empty_password: 2499,

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

@@ -16,6 +16,7 @@ import {
   Form,
   ButtonWrapper,
   PrivacyPolicyLink,
+  PrivacyWrapper,
 } from './styled'
 
 const labelWidth = 76
@@ -109,12 +110,20 @@ export const PersonalInfoForm = (props: Props) => {
         )}
         <Error t={readFormError(formError) || ''} />
       </ButtonWrapper>
-      <PrivacyPolicyLink
-        target='_blank'
-        href={client.privacyLink}
-      >
-        <T9n t='privacy_policy_and_statement' />
-      </PrivacyPolicyLink>
+      <PrivacyWrapper>
+        <PrivacyPolicyLink
+          target='_blank'
+          href={client.privacyLink}
+        >
+          <T9n t='terms_and_conditions' />
+        </PrivacyPolicyLink>
+        <PrivacyPolicyLink
+          target='_blank'
+          href={client.privacyLink}
+        >
+          <T9n t='privacy_policy_and_statement' />
+        </PrivacyPolicyLink>
+      </PrivacyWrapper>
     </Form>
   )
 }

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

@@ -67,3 +67,9 @@ export const PrivacyPolicyLink = styled.a`
   color: #FFFFFF;
   text-decoration: underline;
 `
+
+export const PrivacyWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem
+`