fix: Leave the path intact and only remove token from hash after logi…

…n with social media (#499)
jwplayer · Apr 22, 2024 · 8abc55c · 8abc55c
1 parent fdd2681
commit 8abc55c
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 185 deletions.
diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -393,15 +393,18 @@ export default class JWPAccountService extends AccountService {
     return data;
   };
 
-  getCaptureStatus: GetCaptureStatus = async ({ customer }) => {
+  getCaptureStatus: GetCaptureStatus = async ({ customer: { firstName, lastName } }) => {
+    const firstNameTrimmed = firstName?.trim() || '';
+    const lastNameTrimmed = lastName?.trim() || '';
+
     return {
       isCaptureEnabled: true,
-      shouldCaptureBeDisplayed: true,
+      shouldCaptureBeDisplayed: !firstNameTrimmed || !lastNameTrimmed,
       settings: [
         {
           answer: {
-            firstName: customer.firstName || null,
-            lastName: customer.lastName || null,
+            firstName: firstNameTrimmed || null,
+            lastName: lastNameTrimmed || null,
           },
           enabled: true,
           key: 'firstNameLastName',

diff --git a/packages/hooks-react/src/useSocialLoginUrls.ts b/packages/hooks-react/src/useSocialLoginUrls.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
@@ -7,14 +8,20 @@ export type SocialLoginURLs = Record<string, string>;
 export default function useSocialLoginUrls(url: string) {
   const accountController = getModule(AccountController);
 
-  const urls = useQuery(['socialUrls'], () => accountController.getSocialLoginUrls(url), {
+  const { data, error } = useQuery(['socialUrls', url], () => accountController.getSocialLoginUrls(url), {
     enabled: accountController.getFeatures().hasSocialURLs,
     retry: false,
   });
 
-  if (urls.error || !urls.data) {
+  const urls = useMemo(() => {
+    if (!data) return null;
+
+    return data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  }, [data]);
+
+  if (error || !urls) {
     return null;
   }
 
-  return urls.data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  return urls;
 }
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx
@@ -5,7 +5,7 @@ import PersonalDetailsForm from './PersonalDetailsForm';
 const noop = () => {
   /**/
 };
-const values = {
+const initialValues = {
   firstName: 'Vince',
   lastName: 'Guy',
   birthDate: '27-Feb-1985',
@@ -86,12 +86,8 @@ describe('<PersonalDetailsForm>', () => {
   test('Renders without crashing', () => {
     const { container } = render(
       <PersonalDetailsForm
+        initialValues={initialValues}
         onSubmit={noop}
-        onChange={noop}
-        setValue={noop}
-        errors={{}}
-        values={values}
-        submitting={false}
         fields={fields}
         questions={questions}
         onQuestionChange={noop}
@@ -106,25 +102,8 @@ describe('<PersonalDetailsForm>', () => {
   test('Renders with errors', () => {
     const { container } = render(
       <PersonalDetailsForm
+        initialValues={initialValues}
         onSubmit={noop}
-        onChange={noop}
-        setValue={noop}
-        errors={{
-          firstName: 'this is wrong',
-          lastName: 'also this',
-          address: 'Do you know where you live',
-          address2: 'Come on',
-          city: 'stop it',
-          companyName: 'So much errors',
-          country: 'usa is an error',
-          birthDate: 'February 30th? Really?',
-          phoneNumber: 'Invalid',
-          state: 'Confusion',
-          postCode: 'Post Code should be 5 centimeters',
-          form: 'This is a form error',
-        }}
-        values={values}
-        submitting={false}
         fields={fields}
         questions={questions}
         onQuestionChange={noop}

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CleengCaptureField, CleengCaptureQuestionField, PersonalDetailsFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 
 import TextField from '../TextField/TextField';
 import Button from '../Button/Button';
@@ -16,36 +16,24 @@ import FormFeedback from '../FormFeedback/FormFeedback';
 import styles from './PersonalDetailsForm.module.scss';
 
 type Props = {
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
-  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
+  initialValues: PersonalDetailsFormData;
+  onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
   error?: string;
-  errors: FormErrors<PersonalDetailsFormData>;
-  validationError?: boolean;
-  values: PersonalDetailsFormData;
-  submitting: boolean;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
   onQuestionChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   questionValues: Record<string, string>;
   questionErrors: Record<string, string>;
 };
 
-const PersonalDetailsForm: React.FC<Props> = ({
-  onSubmit,
-  onChange,
-  setValue,
-  validationError,
-  values,
-  errors,
-  submitting,
-  fields,
-  questions,
-  onQuestionChange,
-  questionValues,
-  questionErrors,
-}: Props) => {
+const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields, questions, onQuestionChange, questionValues, questionErrors }: Props) => {
   const { t } = useTranslation('account');
+
+  const { setValue, handleSubmit, handleChange, values, errors, validationSchemaError, submitting } = useForm<PersonalDetailsFormData>({
+    initialValues,
+    onSubmit,
+  });
+
   const renderQuestion = ({ value, key, question, required, enabled }: CleengCaptureQuestionField) => {
     if (!enabled) {
       return null;
@@ -86,18 +74,18 @@ const PersonalDetailsForm: React.FC<Props> = ({
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid={testId('personal_details-form')} noValidate>
+    <form onSubmit={handleSubmit} data-testid={testId('personal_details-form')} noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
       {errors.form ? (
-        <FormFeedback variant="error" visible={!validationError}>
+        <FormFeedback variant="error" visible={!validationSchemaError}>
           {errors.form}
         </FormFeedback>
       ) : null}
       {fields.firstNameLastName?.enabled ? (
         <React.Fragment>
           <TextField
             value={values.firstName}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.fist_name')}
             placeholder={t('personal_details.fist_name')}
             error={!!errors.firstName}
@@ -108,7 +96,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.lastName}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.last_name')}
             placeholder={t('personal_details.last_name')}
             error={!!errors.lastName}
@@ -122,7 +110,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.companyName?.enabled ? (
         <TextField
           value={values.companyName}
-          onChange={onChange}
+          onChange={handleChange}
           label={t('personal_details.company_name')}
           placeholder={t('personal_details.company_name')}
           error={!!errors.companyName}
@@ -136,7 +124,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
         <React.Fragment>
           <TextField
             value={values.address}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.address')}
             placeholder={t('personal_details.address')}
             error={!!errors.address}
@@ -147,7 +135,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.address2}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.address2')}
             placeholder={t('personal_details.address2')}
             error={!!errors.address2}
@@ -157,7 +145,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.city}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.city')}
             placeholder={t('personal_details.city')}
             error={!!errors.city}
@@ -168,7 +156,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.state}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.state')}
             placeholder={t('personal_details.state')}
             error={!!errors.state}
@@ -179,7 +167,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.postCode}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.post_code')}
             placeholder={t('personal_details.post_code')}
             error={!!errors.postCode}
@@ -193,7 +181,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.phoneNumber?.enabled ? (
         <TextField
           value={values.phoneNumber}
-          onChange={onChange}
+          onChange={handleChange}
           label={t('personal_details.phone_number')}
           placeholder={t('personal_details.phone_number')}
           error={!!errors.phoneNumber}