@infosoftas/s4-orders-js-sdk 0.0.1-beta1.0 → 0.0.1-beta1.2

package/README.md

@@ -49,6 +49,7 @@ type PaymentMethodOptionsType = {
         generateSubscriberContact?: boolean;
         accountId?: string;
         orderFormFields?: OrderFormFiledType[] | never[];
+        paymentInvoiceFields?: OrderFormFiledType[] | never[] | null;
     };
 }
 
@@ -66,6 +67,7 @@ type OrderFormInputsType = {
 type ConfigType = {
     domElementId: string;
     moduleTitle?: string;
+    submitStartCallback?: (subscriberId: string) => void;
     apiKey: string;
     apiUrl: string;
     templatePackageId: string;
@@ -130,6 +132,7 @@ enum OrderModuleFiledNameEnum {
 }
 
 export const prepareConfig = ({
+    submitStartCallback,
     apiKey,
     apiUrl,
     userId,
@@ -147,6 +150,7 @@ export const prepareConfig = ({
 }: Props) => {
 
     const config = {
+        submitStartCallback,
         moduleTitle: '',
         domElementId: ORDER_PLACE_ID,
         redirectUrl: window.location.href,
@@ -214,6 +218,14 @@ export const prepareConfig = ({
                         readOnly: false,
                     },
                 ],
+                paymentInvoiceFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.invoiceEmail,
+                        label: 'Email',
+                        required: true,
+                        readOnly: false,
+                    },
+            ],
             },
             EHF: {
                 orderFormFields: [
@@ -252,12 +264,14 @@ export const prepareConfig = ({
             submitButtonText: 'Continue',
             backButtonText: 'Back',
             verifyButtonText: 'Verify',
-            organizationNumberLabel: 'CVR',
+            organizationNumberLabel: 'Organization Number',
             glnLabel: 'GLN/EAN',
+            cvrLabel: 'CVR',
             paymentMethodLabel: 'Select Payment Method',
             errorReqMsg: 'This field is required!',
             errorInvalidEmailMsg: 'Invalid email address!',
             errorInvalidPhoneMsg: 'Invalid phone number!',
+            paymentMethodNotAllowedMsg: 'This payment method not allowed!',
             successText: 'Success message',
             failureText: 'Failed message',
             orderDefaultValues: {
@@ -277,15 +291,32 @@ export const prepareConfig = ({
 };
 
 
-import { FC, useEffect, useRef } from 'react';
+import { FC, useEffect, useRef, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { orderComponent } from '@infosoftas/s4-orders-js-sdk/src/index';
 
 import { prepareConfig } from 'Utils/moduleConfig';
+import { encodeJwt } from 'Utils/helper';
 
 const ORDER_PLACE_ID = 'sdk-order';
 
-const OrderPlace: FC = ({userEmail, userId, name, city, country, postalCode, streetAddress}) => {
+const OrderPlace: FC = ({journey, userEmail, sub, emails, userId, name, city, country, postalCode, streetAddress}) => {
     const moduleMount = useRef(false);
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const submitStartCallback = useCallback(
+        (subscriberId: string) => {
+            const hashTokenValue = {
+                extension_SubscriberId: subscriberId,
+                emails: emails,
+                sub: sub,
+            };
+
+            searchParams?.set('hashToken', encodeJwt(hashTokenValue) as string);
+            setSearchParams(searchParams);
+        },
+        [emails, sub, searchParams, setSearchParams]
+    );
 
     useEffect(() => {
         if (!moduleMount.current && idTokenClaims) {
@@ -305,11 +336,13 @@ const OrderPlace: FC = ({userEmail, userId, name, city, country, postalCode, str
                 country: country,
                 postalCode: postalCode,
                 streetAddress: streetAddress,
+                journey: journey,
+                submitStartCallback: submitStartCallback,
             });
             orderComponent?.remove();
             orderComponent?.init(config);
         }
-    }, [userEmail, userId, name, city, country, postalCode, streetAddress]);
+    }, [userEmail, userId, name, city, country, postalCode, streetAddress, journey, submitStartCallback]);
 
     return (
         <div
@@ -339,4 +372,4 @@ export default OrderPlace;
 | availablePaymentMethods | [] | available payment methods |
 | language | 'en-US' | language |
 | merchantAgreementUrl | '' | vipps and MobilePay property |
-| settings | {successText: 'Order successful completed!',failureText: 'Something went wrong!',submitButtonText: 'Start',backButtonText: 'Back',verifyButtonText: 'Verify',organizationNumberLabel: 'CVR',glnLabel: 'GLN',paymentMethodLabel:'Select Payment Method',} | label and text properties |
+| settings | {successText: 'Order successful completed!',failureText: 'Something went wrong!',submitButtonText: 'Start',backButtonText: 'Back',verifyButtonText: 'Verify',organizationNumberLabel: 'CVR',glnLabel: 'GLN',paymentMethodLabel:'Select Payment Method', orderDefaultValues: 'Default order form values' } | label and text properties |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-beta1.0",
+    "version": "0.0.1-beta1.2",
     "scripts": {
         "build": "rimraf lib && webpack --env mode=production",
         "release": "release-it"

package/src/App.tsx

@@ -65,6 +65,9 @@ const App: FC<ConfigType> = ({
     const [showOrderForm, setShowOrderForm] = useState<boolean>(true);
     const [iframeSrc, setIframeSrc] = useState<string | null>(null);
     const [orderId, setOrderId] = useState<string | null>(null);
+    const [subscriberSdkId, setSubscriberSdkId] = useState<string | undefined>(
+        subscriberId || undefined
+    );
     const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
     const [isFailed, setIsFailed] = useState<boolean>(false);
     const [failedMsg, setFailedMsg] = useState<string>('');
@@ -271,6 +274,11 @@ const App: FC<ConfigType> = ({
         });
     };
 
+    const onSubmitStart = (id: string) => {
+        setSubscriberSdkId(id);
+        submitStartCallback?.(id);
+    };
+
     if (window !== top) {
         return null;
     }
@@ -304,7 +312,7 @@ const App: FC<ConfigType> = ({
                                 }
                                 orderValues={orderFormValues}
                                 templatePackageId={templatePackageId}
-                                subscriberId={subscriberId}
+                                subscriberId={subscriberSdkId}
                                 userId={userId}
                                 identityProviderId={identityProviderId}
                                 organizationId={organizationId}
@@ -332,7 +340,7 @@ const App: FC<ConfigType> = ({
                                 }
                                 orderValues={orderFormValues}
                                 templatePackageId={templatePackageId}
-                                subscriberId={subscriberId}
+                                subscriberId={subscriberSdkId}
                                 userId={userId}
                                 identityProviderId={identityProviderId}
                                 organizationId={organizationId}
@@ -351,9 +359,9 @@ const App: FC<ConfigType> = ({
                                 <OrderForm
                                     callback={handleForm}
                                     updateFormData={updateFormData}
-                                    submitStartCallback={submitStartCallback}
+                                    submitStartCallback={onSubmitStart}
                                     templatePackageId={templatePackageId}
-                                    subscriberId={subscriberId}
+                                    subscriberId={subscriberSdkId}
                                     userId={userId}
                                     identityProviderId={identityProviderId}
                                     organizationId={organizationId}

package/src/components/OrderForm/OrderForm.tsx

@@ -104,12 +104,6 @@ const OrderForm: FC<Props> = ({
                 defaultValues?.paymentMethod || PAYMENT_METHOD_DEFAULT,
         },
     });
-    const invoiceOrderFields =
-        invoiceAddressSelection?.fields || orderInvoiceContactFields;
-
-    const invoicePaymentMethods =
-        invoiceAddressSelection?.paymentMethods ||
-        INVOICE_ALLOWED_PAYMENT_METHODS;
 
     const {
         register,
@@ -122,6 +116,16 @@ const OrderForm: FC<Props> = ({
     const invoiceAddressToggle = watch('invoiceAddressSelection');
     const paymentMethodInput = watch('paymentMethod');
 
+    const invoiceOrderFields =
+        paymentMethodsOptions?.[paymentMethodInput || PAYMENT_METHOD_DEFAULT]
+            ?.paymentInvoiceFields ||
+        invoiceAddressSelection?.fields ||
+        orderInvoiceContactFields;
+
+    const invoicePaymentMethods =
+        invoiceAddressSelection?.paymentMethods ||
+        INVOICE_ALLOWED_PAYMENT_METHODS;
+
     const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
         callback,
         submitStartCallback,

package/src/hooks/useOrderForm.tsx

@@ -69,6 +69,21 @@ const useOrderForm = ({
         setLoading(true);
         try {
             let id: string | undefined = subscriberId;
+            if (data.paymentMethod === PaymentMethodEnum.OIO) {
+                await invoiceLookup({
+                    network: data.gln
+                        ? InvoiceLookupNetworkEnum.OIO_GLN
+                        : InvoiceLookupNetworkEnum.OIO_Danish_CVR,
+                    value: data.gln || data.cvr || '',
+                });
+            }
+            if (data.paymentMethod === PaymentMethodEnum.EHF) {
+                await invoiceLookup({
+                    network: InvoiceLookupNetworkEnum.EHF,
+                    value: data.organizationNumber || '',
+                });
+            }
+
             const contactModel = prepareContactModel({ data, orderFields });
             if (!subscriberId) {
                 const response = await createSubscriber({
@@ -130,20 +145,7 @@ const useOrderForm = ({
                         : undefined,
                     orderReference: data.orderReference || undefined,
                 });
-                if (data.paymentMethod === PaymentMethodEnum.OIO) {
-                    await invoiceLookup({
-                        network: data.gln
-                            ? InvoiceLookupNetworkEnum.OIO_GLN
-                            : InvoiceLookupNetworkEnum.OIO_Danish_CVR,
-                        value: data.gln || data.cvr || '',
-                    });
-                }
-                if (data.paymentMethod === PaymentMethodEnum.EHF) {
-                    await invoiceLookup({
-                        network: InvoiceLookupNetworkEnum.EHF,
-                        value: data.organizationNumber || '',
-                    });
-                }
+
                 callback(responseOrder.terminalRedirectUrl, {
                     ...(data || {}),
                     orderId: responseOrder.id,

package/src/types/general.ts

@@ -19,6 +19,7 @@ export type PaymentMethodOptionsType = {
         generateSubscriberContact?: boolean;
         accountId?: string;
         orderFormFields: OrderFormFiledType[];
+        paymentInvoiceFields?: OrderFormFiledType[] | never[] | null;
     };
 };