From d4e0149d63270cce3d77e5cc4a9661c5d8a3b9db Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Tue, 15 Mar 2022 18:54:04 +0700 Subject: [PATCH] feat(2248): add checkbox terms with cookies --- src/config/clients/facr.tsx | 2 +- src/config/clients/instat.tsx | 2 +- src/config/lexics/userAccount.tsx | 1 + .../components/Registration/hooks.tsx | 14 ++++++++++++- .../components/Registration/index.tsx | 16 +++++++++++++- .../components/Registration/styled.tsx | 6 ++++++ src/features/AuthServiceApp/config/lexics.tsx | 3 +++ .../components/PersonalInfoForm/index.tsx | 21 +++++++++++++------ .../components/PersonalInfoForm/styled.tsx | 6 ++++++ 9 files changed, 61 insertions(+), 10 deletions(-) diff --git a/src/config/clients/facr.tsx b/src/config/clients/facr.tsx index bc3d76ab..9ce80f1d 100644 --- a/src/config/clients/facr.tsx +++ b/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, diff --git a/src/config/clients/instat.tsx b/src/config/clients/instat.tsx index ff981eb2..5208d5bc 100644 --- a/src/config/clients/instat.tsx +++ b/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);', diff --git a/src/config/lexics/userAccount.tsx b/src/config/lexics/userAccount.tsx index 37df1a87..bc404e42 100644 --- a/src/config/lexics/userAccount.tsx +++ b/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, diff --git a/src/features/AuthServiceApp/components/Registration/hooks.tsx b/src/features/AuthServiceApp/components/Registration/hooks.tsx index ec8df873..14fe765f 100644 --- a/src/features/AuthServiceApp/components/Registration/hooks.tsx +++ b/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, diff --git a/src/features/AuthServiceApp/components/Registration/index.tsx b/src/features/AuthServiceApp/components/Registration/index.tsx index 27dccc0d..15a6594c 100644 --- a/src/features/AuthServiceApp/components/Registration/index.tsx +++ b/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={( + )} + /> + + diff --git a/src/features/AuthServiceApp/components/Registration/styled.tsx b/src/features/AuthServiceApp/components/Registration/styled.tsx index 87a5d153..560660c3 100644 --- a/src/features/AuthServiceApp/components/Registration/styled.tsx +++ b/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` diff --git a/src/features/AuthServiceApp/config/lexics.tsx b/src/features/AuthServiceApp/config/lexics.tsx index f4456fc4..7e4fcaae 100644 --- a/src/features/AuthServiceApp/config/lexics.tsx +++ b/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, diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index cc49ba7f..646c73ef 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/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) => { )} - - - + + + + + + + + ) } diff --git a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx index bdda810c..645ccf3a 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx +++ b/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 +`