From c29cf3497fee63afe2455a16c449c482e0b8cba6 Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Mon, 15 Apr 2024 13:28:11 +0200
Subject: [PATCH] OWA-72: Add social login buttons to signup screen (#496)

---
 .../RegistrationForm.test.tsx                 | 21 +++++++++++++++++--
 .../RegistrationForm/RegistrationForm.tsx     |  7 ++++++-
 .../RegistrationForm.test.tsx.snap            | 21 ++++++++++++++++++-
 .../AccountModal/forms/Registration.tsx       |  4 ++++
 4 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 30e894e3d..2bc21f757 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/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();
   });
 });
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/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 709bd50c3..7065bc1c9 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/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"
     >
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}
     />
   );
 };