From 0cb065ad5e4238fba14622ecfb43fc529f83ca1b Mon Sep 17 00:00:00 2001
From: mirovladimitrovski <vladimir.dimitrovski@jwplayer.com>
Date: Fri, 12 Apr 2024 11:37:19 +0200
Subject: [PATCH] fix: add social login buttons to signup screen

---
 .../components/RegistrationForm/RegistrationForm.test.tsx  | 1 +
 .../src/components/RegistrationForm/RegistrationForm.tsx   | 7 ++++++-
 .../src/containers/AccountModal/forms/Registration.tsx     | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 30e894e3d..8aabfb019 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -19,6 +19,7 @@ describe('<RegistrationForm>', () => {
         consentValues={{}}
         loading={false}
         onConsentChange={vi.fn()}
+        socialLoginURLs={{ facebook: 'https://facebook.com', google: 'https://google.com' }}
       />,
     );
 
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 1f56b636d..85c6d943f 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -5,6 +5,7 @@ import DOMPurify from 'dompurify';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
@@ -20,6 +21,7 @@ import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
+import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -36,6 +38,7 @@ type Props = {
   submitting: boolean;
   validationError?: boolean;
   publisherConsents: CustomFormField[] | null;
+  socialLoginURLs: SocialLoginURLs | null;
 };
 
 const RegistrationForm: React.FC<Props> = ({
@@ -51,6 +54,7 @@ const RegistrationForm: React.FC<Props> = ({
   consentValues,
   onConsentChange,
   consentErrors,
+  socialLoginURLs,
 }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -80,7 +84,6 @@ const RegistrationForm: React.FC<Props> = ({
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
-      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <div ref={ref}>
         {errors.form ? (
           <FormFeedback variant="error" visible={!validationError}>
@@ -88,6 +91,8 @@ const RegistrationForm: React.FC<Props> = ({
           </FormFeedback>
         ) : null}
       </div>
+      <SocialButtonsList socialLoginURLs={socialLoginURLs} />
+      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <TextField
         value={values.email}
         onChange={onChange}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 42e34dc77..a79cbe5b5 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -6,6 +6,7 @@ import type { RegistrationFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
+import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
@@ -54,6 +55,8 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
+  const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
+
   const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
@@ -95,6 +98,7 @@ const Registration = () => {
       consentValues={consentValues}
       publisherConsents={publisherConsents}
       loading={loading || publisherConsentsLoading}
+      socialLoginURLs={socialLoginURLs}
     />
   );
 };