Merge branch 'main' into feat/MSSDK-1993-google-recaptcha

src/appRedux/rootReducer.ts

@@ -41,7 +41,6 @@ const rootReducer = combineReducers({
   paymentDetails: paymentDetailsReducer,
   paymentMethods: paymentMethodsReducer,
   plan: planDetailsReducer,
-  // removed planDetails - to be checked if was needed
   popup: popupReducer,
   popupManager: popupManagerReducer,
   publisherConfig: publisherConfigReducer,

src/components/AdditionalProfileInfo/AdditionalProfileInfo.tsx

@@ -41,6 +41,7 @@ const AdditionalProfileInfo = ({
       const newData: CustomSetting[] = data.map((setting) => {
         return {
           ...setting,
+          answer: setting.answer ?? '',
           value: setting.answer ? setting.answer : '',
           values: setting.value
             ? setting.value.split(';').map((v) => v.trim())

src/components/AdditionalProfileInfo/AdditionalProfileInfo.types.ts

@@ -1,3 +1,5 @@
+import { CustomCaptureSetting } from 'types/Capture.types';
+
 export type CustomSetting = {
   answer?: string;
   key: string;
@@ -7,7 +9,7 @@ export type CustomSetting = {
 };
 
 export type AdditionalProfileInfoProps = {
-  data: CustomSetting[] | null;
+  data: CustomCaptureSetting[] | null;
   isLoading: boolean;
   updateCaptureOption: (option: { key: string; value: string }) => void;
 };

src/components/AddressDetails/AddressDetails.types.ts

@@ -1,18 +1,16 @@
+import { AddressCaptureSetting } from 'types/Capture.types';
+
 export type Address = {
-  address: string | null;
-  address2: string | null;
-  city: string | null;
-  state: string | null;
-  postCode: string | null;
+  address: string;
+  address2: string;
+  city: string;
+  country: string;
+  state: string;
+  postCode: string;
 };
 
 export type AddressDetailsProps = {
-  data: {
-    answer: Address;
-    enabled: boolean;
-    key: string;
-    required: boolean;
-  };
+  data: AddressCaptureSetting;
   isLoading?: boolean;
   updateCaptureOption: (params: { key: string; value: Address }) => void;
 };

src/components/Capture/Capture.tsx

@@ -4,7 +4,7 @@ import Header from 'components/Header';
 import Footer from 'components/Footer';
 import Loader from 'components/Loader';
 import getCaptureStatus from 'api/Customer/getCaptureStatus';
-import { CaptureProps, CaptureSetting } from './Capture.types';
+import { CaptureProps, CaptureSetting } from '../../types/Capture.types';
 import CaptureForm from './CaptureForm/CaptureForm';
 
 import {
@@ -15,25 +15,22 @@ import {
 
 const noop = () => null;
 
-const Capture = ({ settings = [], onSuccess = noop }: CaptureProps) => {
+const Capture = ({ onSuccess = noop }: CaptureProps) => {
   const { t } = useTranslation();
   const [captureSettings, setCaptureSettings] = useState<CaptureSetting[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (settings.length) {
-      setCaptureSettings(settings);
-      setIsLoading(false);
-    } else {
-      getCaptureStatus().then((resp) => {
-        if (resp.responseData.shouldCaptureBeDisplayed === true) {
-          setCaptureSettings(resp.responseData.settings);
-          setIsLoading(false);
-        } else {
-          onSuccess();
-        }
-      });
-    }
+    getCaptureStatus().then(({ responseData }) => {
+      const { shouldCaptureBeDisplayed, settings } = responseData;
+
+      if (shouldCaptureBeDisplayed) {
+        setCaptureSettings(settings);
+        setIsLoading(false);
+      } else {
+        onSuccess();
+      }
+    });
   }, []);
 
   return (
@@ -47,10 +44,7 @@ const Capture = ({ settings = [], onSuccess = noop }: CaptureProps) => {
             <CaptureTitle>
               {t('capture.confirm-registration', 'Confirm Registration')}
             </CaptureTitle>
-            <CaptureForm
-              settings={captureSettings || []}
-              onSuccess={onSuccess}
-            />
+            <CaptureForm settings={captureSettings} onSuccess={onSuccess} />
           </>
         )}
       </CaptureContentStyled>

src/components/Capture/CaptureForm/CaptureForm.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { updateCaptureAnswers } from 'api';
 import { validateEmailField } from 'util/validators';
 import { PHONE_NUMBER_REGEX } from 'util/regexConstants';
+import { isCustomSetting } from 'util/capture';
 import Input from 'components/Input';
 import EmailInput from 'components/EmailInput';
 import DateInput from 'components/DateInput';
@@ -12,27 +13,22 @@ import Button from 'components/Button';
 import Loader from 'components/Loader';
 import useInput from './useInput';
 import {
-  CaptureProps,
-  CaptureSetting,
+  CaptureFormProps,
   CustomCaptureSetting
-} from '../Capture.types';
+} from '../../../types/Capture.types';
 import {
   CaptureRowStyled,
   CaptureBoxStyled,
   CaptureQuestionStyled,
   CaptureError
 } from './CaptureFormStyled';
 
-const isCustomSetting = (
-  setting: CaptureSetting
-): setting is CustomCaptureSetting => setting.key.startsWith('custom_');
-
 type CustomSetting = CustomCaptureSetting & {
   values: Array<{ value: string; label: string }>;
   error?: string | null;
 };
 
-const CaptureForm = ({ settings, onSuccess }: CaptureProps) => {
+const CaptureForm = ({ settings, onSuccess }: CaptureFormProps) => {
   const { t } = useTranslation();
   const [processing, setProcessing] = useState(false);
   const [customSettings, setCustomSettings] = useState<CustomSetting[]>([]);
@@ -54,36 +50,54 @@ const CaptureForm = ({ settings, onSuccess }: CaptureProps) => {
   };
 
   useEffect(() => {
-    for (let i = 0; i < settings.length; i += 1) {
-      const item = settings[i];
-      if (item.key === 'firstNameLastName' && item.answer) {
-        firstName.setValue(item.answer.firstName);
-        lastName.setValue(item.answer.lastName);
+    settings.forEach((setting) => {
+      const { answer, key } = setting;
+
+      if (!answer) {
+        return;
       }
-      if (item.key === 'birthDate' && item.answer)
-        birthDate.setValue(item.answer);
-      if (item.key === 'companyName' && item.answer)
-        companyName.setValue(item.answer);
-      if (item.key === 'phoneNumber' && item.answer)
-        phoneNumber.setValue(item.answer);
-      if (item.key === 'address' && item.answer) {
-        address.setValue(item.answer.address);
-        address2.setValue(item.answer.address2);
-        city.setValue(item.answer.city);
-        state.setValue(item.answer.state);
-        postCode.setValue(item.answer.postCode);
+
+      switch (key) {
+        case 'firstNameLastName':
+          firstName.setValue(answer.firstName);
+          lastName.setValue(answer.lastName);
+          break;
+
+        case 'birthDate':
+          birthDate.setValue(answer);
+          break;
+
+        case 'companyName':
+          companyName.setValue(answer);
+          break;
+
+        case 'phoneNumber':
+          phoneNumber.setValue(answer);
+          break;
+
+        case 'address':
+          address.setValue(answer.address);
+          address2.setValue(answer.address2);
+          city.setValue(answer.city);
+          state.setValue(answer.state);
+          postCode.setValue(answer.postCode);
+          break;
+
+        default:
+          break;
       }
-    }
+    });
 
     const enabledCustomSettings: CustomSetting[] = settings.filter(
-      (item) => isCustomSetting(item) && item.enabled
+      (setting) => isCustomSetting(setting) && setting.enabled
     ) as CustomSetting[];
+
     const transformedSettings: CustomSetting[] = enabledCustomSettings.map(
-      (item) => ({
-        ...item,
-        value: item.answer ? item.answer : '',
-        values: isCustomSetting(item)
-          ? item.value.split(';').map((i) => {
+      (setting) => ({
+        ...setting,
+        value: setting.answer ? setting.answer : '',
+        values: isCustomSetting(setting)
+          ? setting.value.split(';').map((i) => {
               const value = i.trim();
               const label = value;
               return {

src/components/CouponInput/CouponInput.tsx

@@ -46,7 +46,7 @@ const CouponInput = ({
       setIsOpen(true);
     } else {
       eventDispatcher(MSSDK_REDEEM_BUTTON_CLICKED, { coupon: value, source });
-      await onSubmit(value);
+      onSubmit(value);
     }
   };