@infosoftas/s4-orders-js-sdk 0.1.2 → 0.1.3

package/README.md

@@ -64,10 +64,17 @@ type OrderFormInputsType = {
     zip?: string;
 };
 
+enum UserActionEnum {
+    SELECT_FORM = 'selectForm',
+    SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
+    RETURN_TO_MAIN = 'returnToMain',
+}
+
 type ConfigType = {
     domElementId: string;
     moduleTitle?: string;
     submitStartCallback?: (subscriberId: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     apiKey: string;
     apiUrl: string;
     templatePackageId: string;
@@ -99,6 +106,9 @@ type ConfigType = {
         errorReqMsg?: string;
         errorInvalidEmailMsg?: string;
         errorInvalidPhoneMsg?: string;
+        errorValidationTitleMsg?: string;
+        errorValidationDenialOrderBlockingMsg?: string;
+        errorValidationBlockingOffersMsg?: string;
     };
 }
 ```
@@ -151,6 +161,10 @@ export const prepareConfig = ({
 
     const config = {
         submitStartCallback,
+        userActionCallback: (action, args) => {
+          console.log(action);
+          console.table(args);
+        },
         moduleTitle: '',
         domElementId: ORDER_PLACE_ID,
         redirectUrl: window.location.href,
@@ -271,6 +285,9 @@ export const prepareConfig = ({
             errorReqMsg: 'This field is required!',
             errorInvalidEmailMsg: 'Invalid email address!',
             errorInvalidPhoneMsg: 'Invalid phone number!',
+            errorValidationTitleMsg: 'One or more validation errors occurred.',
+            errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
+            errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
             paymentMethodNotAllowedMsg: 'This payment method not allowed!',
             invoiceLookupNotFoundText: 'There was no recipient found for the given information',
             successText: 'Success message',
@@ -369,6 +386,7 @@ export default OrderPlace;
 | organizationId        |                                       ''                                       |            organization id |
 | redirectUrl           |                              window.location.href                              |               redirect url |
 | showIframe            |                                     false                                      | show credit card in iframe |
+| userActionCallback    |                                   undefined                                    | function for tracking user actions |
 | paymentMethodsOptions | orderFormFields: [{name: 'phone, required: false, readOnly: false, label: ''}] |        default form fields |
 | availablePaymentMethods | [] | available payment methods |
 | language | 'en-US' | language |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "scripts": {
         "build": "rimraf lib && webpack --mode production",
         "release": "release-it"
@@ -27,7 +27,7 @@
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "mini-css-extract-plugin": "^2.9.1",
-        "release-it": "^17.10.0",
+        "release-it": "^19.0.4",
         "rimraf": "^6.0.1",
         "sass": "^1.79.2",
         "sass-loader": "^16.0.1",

package/src/App.tsx

@@ -4,6 +4,7 @@ import {
     FormTypeEnum,
     MessageEventTypeEnum,
     PaymentMethodEnum,
+    UserActionEnum,
 } from './enums/general';
 import useMessageEvent from './hooks/useMessageEvent';
 import OrderForm from './components/OrderForm/OrderForm';
@@ -27,6 +28,7 @@ import './App.scss';
 
 const App: FC<ConfigType> = ({
     submitStartCallback,
+    userActionCallback,
     moduleTitle,
     apiKey,
     apiUrl,
@@ -58,6 +60,9 @@ const App: FC<ConfigType> = ({
         errorReqMsg: '',
         errorInvalidEmailMsg: '',
         errorInvalidPhoneMsg: '',
+        errorValidationTitleMsg: 'One or more validation errors occurred.',
+        errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
+        errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
         paymentMethodNotAllowedMsg: '',
         invoiceLookupNotFoundText:
             'There was no recipient found for the given information',
@@ -145,6 +150,7 @@ const App: FC<ConfigType> = ({
             setLoading(false);
             setShowOrderForm(true);
             setFormType(FormTypeEnum.ORDER);
+            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
         }
     };
 
@@ -238,8 +244,10 @@ const App: FC<ConfigType> = ({
             });
         } else if (data?.paymentMethod === PaymentMethodEnum.EHF) {
             setFormType(FormTypeEnum.EHF);
+            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.EHF });
         } else if (data?.paymentMethod === PaymentMethodEnum.OIO) {
             setFormType(FormTypeEnum.OIO);
+            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.OIO });
         } else if (url) {
             if (
                 showIframe &&
@@ -261,11 +269,13 @@ const App: FC<ConfigType> = ({
 
     const handleInvoiceBack = () => {
         setFormType(FormTypeEnum.ORDER);
+        userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
     };
 
     const updateFormData = (data: OrderFormInputsType) => {
         setOrderFormValues(data);
         setFormType(data.paymentMethod as unknown as FormTypeEnum);
+        userActionCallback?.(UserActionEnum.SELECT_FORM, { form: data.paymentMethod });
     };
 
     const handleInvoiceForm = async (
@@ -332,6 +342,10 @@ const App: FC<ConfigType> = ({
                                 invoiceLookupNotFoundText={
                                     settings?.invoiceLookupNotFoundText
                                 }
+                                userActionCallback={userActionCallback}
+                                errorValidationTitleMsg={settings?.errorValidationTitleMsg}
+                                errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
+                                errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -363,6 +377,10 @@ const App: FC<ConfigType> = ({
                                 invoiceLookupNotFoundText={
                                     settings?.invoiceLookupNotFoundText
                                 }
+                                userActionCallback={userActionCallback}
+                                errorValidationTitleMsg={settings?.errorValidationTitleMsg}
+                                errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
+                                errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
@@ -407,6 +425,10 @@ const App: FC<ConfigType> = ({
                                     invoiceAddressSelection={
                                         invoiceAddressSelection
                                     }
+                                    userActionCallback={userActionCallback}
+                                    errorValidationTitleMsg={settings?.errorValidationTitleMsg}
+                                    errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
+                                    errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
                                 />
                             )}
                     </>

package/src/components/EHFForm/EHFForm.tsx

@@ -4,7 +4,7 @@ import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import InputField from '../FormFields/InputField';
-import { PaymentMethodEnum } from '../../enums/general';
+import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     OrderFormFiledType,
     PaymentMethodOptionsType,
@@ -18,6 +18,7 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
     submitStartCallback?: (id: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
@@ -42,6 +43,9 @@ type Props = {
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
+    errorValidationTitleMsg?: string,
+    errorValidationDenialOrderBlockingMsg?: string,
+    errorValidationBlockingOffersMsg?: string,
 };
 
 type EHFFormInputsType = {
@@ -56,6 +60,7 @@ const EHFForm: FC<Props> = ({
     callback,
     onBack,
     submitStartCallback,
+    userActionCallback,
     className = '',
     backButtonText = '',
     verifyButtonText = '',
@@ -74,6 +79,9 @@ const EHFForm: FC<Props> = ({
     paymentMethodsOptions,
     invoiceAddressSelection,
     invoiceLookupNotFoundText,
+    errorValidationTitleMsg,
+    errorValidationDenialOrderBlockingMsg,
+    errorValidationBlockingOffersMsg
 }) => {
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
@@ -111,6 +119,9 @@ const EHFForm: FC<Props> = ({
         invoiceAddressToggle: orderValues?.invoiceAddressSelection,
         invoiceOrderFields,
         invoiceLookupNotFoundText,
+        errorValidationTitleMsg,
+        errorValidationDenialOrderBlockingMsg,
+        errorValidationBlockingOffersMsg
     });
 
     const onSubmit: SubmitHandler<EHFFormInputsType> = async (
@@ -123,6 +134,7 @@ const EHFForm: FC<Props> = ({
     };
 
     const handleBack = () => {
+        userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
         onBack?.();
     };
 

package/src/components/OIOForm/OIOForm.tsx

@@ -6,7 +6,7 @@ import Button from '../Button/Button';
 import InputField from '../FormFields/InputField';
 import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 
-import { PaymentMethodEnum } from '../../enums/general';
+import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     OrderFormFiledType,
     PaymentMethodOptionsType,
@@ -19,6 +19,7 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
     submitStartCallback?: (id: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
@@ -43,6 +44,9 @@ type Props = {
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
+    errorValidationTitleMsg?: string,
+    errorValidationDenialOrderBlockingMsg?: string,
+    errorValidationBlockingOffersMsg?: string,
 };
 
 type OIOFormInputsType = {
@@ -59,6 +63,7 @@ const EHFForm: FC<Props> = ({
     callback,
     onBack,
     submitStartCallback,
+    userActionCallback,
     className = '',
     backButtonText = '',
     verifyButtonText = '',
@@ -78,6 +83,9 @@ const EHFForm: FC<Props> = ({
     paymentMethodsOptions,
     invoiceAddressSelection,
     invoiceLookupNotFoundText,
+    errorValidationTitleMsg,
+    errorValidationDenialOrderBlockingMsg,
+    errorValidationBlockingOffersMsg
 }) => {
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
@@ -119,6 +127,9 @@ const EHFForm: FC<Props> = ({
         invoiceAddressToggle: orderValues?.invoiceAddressSelection,
         invoiceOrderFields,
         invoiceLookupNotFoundText,
+        errorValidationTitleMsg,
+        errorValidationDenialOrderBlockingMsg,
+        errorValidationBlockingOffersMsg
     });
 
     const onSubmit: SubmitHandler<OIOFormInputsType> = async (
@@ -128,6 +139,7 @@ const EHFForm: FC<Props> = ({
     };
 
     const handleBack = () => {
+        userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
         onBack?.();
     };
 

package/src/components/OrderForm/OrderForm.tsx

@@ -1,7 +1,7 @@
 import { FC, ChangeEvent, Suspense, useState, useMemo } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
-import { PaymentMethodEnum } from '../../enums/general';
+import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     PAYMENT_METHOD_DEFAULT,
     INVOICE_ALLOWED_PAYMENT_METHODS,
@@ -25,6 +25,7 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     updateFormData: (data: OrderFormInputsType) => void;
     submitStartCallback?: (id: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     templatePackageId: string;
     subscriberId?: string;
     userId?: string;
@@ -50,6 +51,9 @@ type Props = {
         fields?: OrderFormFiledType[];
         paymentMethods?: PaymentMethodEnum[];
     };
+    errorValidationTitleMsg?: string,
+    errorValidationDenialOrderBlockingMsg?: string,
+    errorValidationBlockingOffersMsg?: string,
 };
 
 const initialData = {
@@ -69,6 +73,7 @@ const OrderForm: FC<Props> = ({
     callback,
     updateFormData,
     submitStartCallback,
+    userActionCallback,
     templatePackageId,
     subscriberId,
     userId,
@@ -89,6 +94,9 @@ const OrderForm: FC<Props> = ({
     errorReqMsg = '',
     errorInvalidEmailMsg = '',
     errorInvalidPhoneMsg = '',
+    errorValidationTitleMsg,
+    errorValidationDenialOrderBlockingMsg,
+    errorValidationBlockingOffersMsg
 }) => {
 
     if (!templatePackageId) {
@@ -153,6 +161,7 @@ const OrderForm: FC<Props> = ({
     const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
         callback,
         submitStartCallback,
+        userActionCallback,
         organizationId,
         subscriberId,
         userId,
@@ -166,6 +175,9 @@ const OrderForm: FC<Props> = ({
         templatePackageId,
         invoiceAddressToggle,
         invoiceOrderFields,
+        errorValidationTitleMsg,
+        errorValidationDenialOrderBlockingMsg,
+        errorValidationBlockingOffersMsg
     });
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
@@ -192,6 +204,8 @@ const OrderForm: FC<Props> = ({
         ) {
             setValue('invoiceAddressSelection', false);
         }
+
+        userActionCallback?.(UserActionEnum.SELECT_PAYMENT_METHOD, { paymentMethod: e.target.value });
     };
 
     const allowPaymentMethod = useMemo(() => {

package/src/enums/general.ts

@@ -28,3 +28,9 @@ export enum FormTypeEnum {
     EHF = 'EHF',
     OIO = 'OIO',
 }
+
+export enum UserActionEnum {
+    SELECT_FORM = 'selectForm',
+    SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
+    RETURN_TO_MAIN = 'returnToMain',
+}

package/src/hooks/useOrderForm.tsx

@@ -4,7 +4,7 @@ import { SubmitHandler } from 'react-hook-form';
 import { createSubscriber, mapSubscriberToUser } from '../api/SubscribeApi';
 import { orderStart } from '../api/OrdersApi';
 import { invoiceLookup } from '../api/InvoiceApi';
-import { InvoiceLookupNetworkEnum, PaymentMethodEnum } from '../enums/general';
+import { InvoiceLookupNetworkEnum, PaymentMethodEnum, UserActionEnum } from '../enums/general';
 import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
 import { OrderFormInputsType, OrderInfoType } from '../types/order';
 import {
@@ -20,11 +20,13 @@ import {
 import {
     prepareErrorMessage,
     prepareErrorsArrayMessage,
+    ErrorMessages,
 } from '../utils/helper';
 
 type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     submitStartCallback?: (id: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     templatePackageId: string;
     subscriberId?: string;
     userId?: string;
@@ -39,11 +41,15 @@ type Props = {
     invoiceAddressToggle?: boolean;
     invoiceOrderFields: OrderFormFiledType[];
     invoiceLookupNotFoundText?: string;
+    errorValidationTitleMsg?: string,
+    errorValidationDenialOrderBlockingMsg?: string,
+    errorValidationBlockingOffersMsg?: string
 };
 
 const useOrderForm = ({
     callback,
     submitStartCallback,
+    userActionCallback,
     organizationId,
     subscriberId,
     userId,
@@ -58,6 +64,9 @@ const useOrderForm = ({
     invoiceAddressToggle,
     invoiceOrderFields,
     invoiceLookupNotFoundText,
+    errorValidationTitleMsg,
+    errorValidationDenialOrderBlockingMsg,
+    errorValidationBlockingOffersMsg
 }: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
@@ -112,10 +121,15 @@ const useOrderForm = ({
                 sessionStorage.setItem('subscriberId', id); // For avoiding attempt of creating subscriber again
 
                 if (userId && identityProviderId) {
-                    await mapSubscriberToUser(id, {
+                    const mapResponse = await mapSubscriberToUser(id, {
                         userId: userId,
                         identityProviderId: identityProviderId,
                     });
+
+                    if (!mapResponse.id) {
+                        setErrorsMsg([WRONG_MSG]);
+                        return;
+                    }
                 }
             }
 
@@ -173,15 +187,23 @@ const useOrderForm = ({
             setApiErrorMsg(WRONG_MSG);
             setErrorsMsg([]);
         } catch (error) {
+
+            const translations = {
+                errorValidationTitleMsg,
+                errorValidationBlockingOffersMsg,
+                errorValidationDenialOrderBlockingMsg
+            } as ErrorMessages;
+
             console.error(error);
-            setApiErrorMsg(prepareErrorMessage(error as Error));
+            setApiErrorMsg(prepareErrorMessage(error as Error, undefined, translations));
             setErrorsMsg(
                 prepareErrorsArrayMessage(
                     (
                         error as {
                             errors: ErrorsMsg;
                         }
-                    )?.errors
+                    )?.errors,
+                    translations
                 )
             );
             callback(null);

package/src/types/general.ts

@@ -1,4 +1,4 @@
-import { PaymentMethodEnum } from '../enums/general';
+import { PaymentMethodEnum, UserActionEnum } from '../enums/general';
 import { OrderFormInputsType } from './order';
 
 declare global {
@@ -25,6 +25,7 @@ export type PaymentMethodOptionsType = {
 
 export type ConfigType = {
     submitStartCallback?: (subscriberId: string) => void;
+    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
     domElementId: string;
     moduleTitle?: string;
     templatePackageId: string;
@@ -62,6 +63,9 @@ export type ConfigType = {
         errorInvalidPhoneMsg?: string;
         paymentMethodNotAllowedMsg?: string;
         invoiceLookupNotFoundText?: string;
+        errorValidationTitleMsg?: string;
+        errorValidationDenialOrderBlockingMsg?: string;
+        errorValidationBlockingOffersMsg?: string;
     };
 };
 

package/src/utils/helper.ts

@@ -1,31 +1,28 @@
 import { WRONG_MSG } from '../constants/index';
 import { ErrorsMsg } from '../types/general';
 
-export const prepareErrorMessage = (error: Error, defaultMsg?: string) => {
+export const prepareErrorMessage = (error: Error, defaultMsg?: string, translations?: ErrorMessages) => {
     if (typeof error === 'string') {
         try {
             const parsedError = JSON.parse(error);
             return (parsedError as { message: string }).message;
         } catch (e) {
-            return error;
+            return translateError(error, translations);
         }
     } else {
-        return (
-            ((error as { message: string })?.message as string) ||
-            defaultMsg ||
-            WRONG_MSG
-        );
+        const serverErrorMsg = (error as { message: string })?.message as string;
+        return translateError(serverErrorMsg, translations) || defaultMsg || WRONG_MSG;
     }
 };
 
-export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null) => {
+export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null, translations?: ErrorMessages) => {
     const msg: string[] = [];
 
     if (errors) {
         Object.entries(errors).forEach(([_, values]) => {
             if (values?.length > 0) {
                 values.forEach((i) => {
-                    msg.push(i);
+                    msg.push(translateError(i, translations));
                 });
             }
         });
@@ -44,3 +41,27 @@ export function uuidv4() {
         }
     );
 }
+
+export type ErrorMessages = {
+    errorValidationTitleMsg: string,
+    errorValidationBlockingOffersMsg: string,
+    errorValidationDenialOrderBlockingMsg: string,
+};
+
+const translateError = (errorMsg: string, translations?: ErrorMessages) => {
+    if (!translations) {
+        return errorMsg;
+    }
+
+    switch(errorMsg)
+    {
+        case 'One or more validation errors occurred.':
+            return translations?.errorValidationTitleMsg;
+        case 'The order/subscription will not be created because the subscriber has a denial order blocking offers.':
+            return translations?.errorValidationBlockingOffersMsg;
+        case 'The order/subscription will not be created because the subscriber has a denial order blocking all.':
+            return translations?.errorValidationDenialOrderBlockingMsg;
+        default:
+           return errorMsg; 
+    }
+}