fix: add social login buttons to signup screen (#496)

packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx

@@ -1,11 +1,25 @@
 import React from 'react';
 
-import { renderWithRouter } from '../../../test/utils';
+import { renderWithRouter, waitForWithFakeTimers } from '../../../test/utils';
 
 import RegistrationForm from './RegistrationForm';
 
+// The SocialButton component contains an SVG import that results in an absolute path on the current machine
+// This results in snapshot inconsistencies per machine
+vi.mock('../SocialButton/SocialButton.tsx', () => ({
+  default: (props: { href: string }) => {
+    return <a href={props.href}>Social Button</a>;
+  },
+}));
+
+const socialLoginURLs = {
+  twitter: 'https://staging-v2.inplayer.com/',
+  facebook: 'https://www.facebook.com/',
+  google: 'https://accounts.google.com/',
+};
+
 describe('<RegistrationForm>', () => {
-  test('renders and matches snapshot', () => {
+  test('renders and matches snapshot', async () => {
     const { container } = renderWithRouter(
       <RegistrationForm
         publisherConsents={null}
@@ -19,9 +33,12 @@ describe('<RegistrationForm>', () => {
         consentValues={{}}
         loading={false}
         onConsentChange={vi.fn()}
+        socialLoginURLs={socialLoginURLs}
       />,
     );
 
+    await waitForWithFakeTimers();
+
     expect(container).toMatchSnapshot();
   });
 });

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,14 +84,15 @@ 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}>
             {errors.form}
           </FormFeedback>
         ) : null}
       </div>
+      <SocialButtonsList socialLoginURLs={socialLoginURLs} />
+      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <TextField
         value={values.email}
         onChange={onChange}

packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap

@@ -6,12 +6,31 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
     data-testid="registration-form"
     novalidate=""
   >
+    <div />
+    <div
+      class="_socialButtonsListContainer_313d0d"
+    >
+      <a
+        href="https://staging-v2.inplayer.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://www.facebook.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://accounts.google.com/"
+      >
+        Social Button
+      </a>
+    </div>
     <h2
       class="_title_a472a0"
     >
       registration.sign_up
     </h2>
-    <div />
     <div
       class="_textField_e16c1b"
     >

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}
     />
   );
 };