@infosoftas/s4-orders-js-sdk 0.0.1-alpha2c.1 → 0.0.1-beta1

package/.release-it.json

@@ -1,6 +1,9 @@
-{
-  "$schema": "https://unpkg.com/release-it/schema/release-it.json",
-  "github": {
-    "release": true
-  }
+{
+  "$schema": "https://unpkg.com/release-it/schema/release-it.json",
+  "git": {
+    "changelog" : ""
+  },
+  "github": {
+    "release": true
+  }
 }

package/package.json

@@ -1,44 +1,44 @@
-{
-  "name": "@infosoftas/s4-orders-js-sdk",
-  "version": "0.0.1-alpha2c.1",
-  "scripts": {
-    "build": "rimraf lib && webpack --env mode=production",
-    "release": "release-it"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "dependencies": {
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.24.7",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "babel-loader": "^8.3.0",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.2",
-    "dotenv-webpack": "^8.1.0",
-    "mini-css-extract-plugin": "^2.9.1",
-    "release-it": "^17.10.0",
-    "rimraf": "^6.0.1",
-    "sass": "^1.79.2",
-    "sass-loader": "^16.0.1",
-    "style-loader": "^4.0.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.6.2",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+    "name": "@infosoftas/s4-orders-js-sdk",
+    "version": "0.0.1-beta1",
+    "scripts": {
+        "build": "rimraf lib && webpack --env mode=production",
+        "release": "release-it"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app"
+        ]
+    },
+    "dependencies": {
+        "prop-types": "^15.8.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.24.3",
+        "@babel/preset-env": "^7.18.10",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.24.7",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
+        "babel-loader": "^8.3.0",
+        "copy-webpack-plugin": "^12.0.2",
+        "css-loader": "^7.1.2",
+        "dotenv-webpack": "^8.1.0",
+        "mini-css-extract-plugin": "^2.9.1",
+        "release-it": "^17.10.0",
+        "rimraf": "^6.0.1",
+        "sass": "^1.79.2",
+        "sass-loader": "^16.0.1",
+        "style-loader": "^4.0.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.6.2",
+        "webpack": "^5.95.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/App.tsx

@@ -13,7 +13,11 @@ import Loader from './components/Loader/Loader';
 import MainIframe from './components/MainIframe/MainIframe';
 import Alert from './components/Alert/Alert';
 import { ConfigType, ErrorsMsg } from './types/general';
-import { CompleteOrderParamsType, OrderInfoType } from './types/order';
+import {
+    CompleteOrderParamsType,
+    OrderInfoType,
+    OrderFormInputsType,
+} from './types/order';
 import { orderComplete, orderDelete } from './api/OrdersApi';
 import { prepareErrorMessage, prepareErrorsArrayMessage } from './utils/helper';
 
@@ -22,6 +26,7 @@ import ErrorBoundary from './ErrorBoundary';
 import './App.scss';
 
 const App: FC<ConfigType> = ({
+    submitStartCallback,
     moduleTitle,
     apiKey,
     apiUrl,
@@ -35,6 +40,7 @@ const App: FC<ConfigType> = ({
     paymentMethodsOptions,
     invoiceAddressSelection,
     availablePaymentMethods = [],
+    allowedPaymentMethods,
     language = 'en-US',
     merchantAgreementUrl = '',
     settings = {
@@ -44,8 +50,15 @@ const App: FC<ConfigType> = ({
         submitButtonText: 'Start',
         backButtonText: 'Back',
         verifyButtonText: 'Verify',
-        organizationNumberLabel: 'CVR',
+        organizationNumberLabel: 'Organization Number',
+        paymentMethodLabel: '',
         glnLabel: 'GLN',
+        cvrLabel: 'CVR',
+        orderDefaultValues: undefined,
+        errorReqMsg: '',
+        errorInvalidEmailMsg: '',
+        errorInvalidPhoneMsg: '',
+        paymentMethodNotAllowedMsg: '',
     },
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -58,6 +71,9 @@ const App: FC<ConfigType> = ({
     const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderInfo, setOrderInfo] = useState<OrderInfoType | null>(null);
     const [formType, setFormType] = useState(FormTypeEnum.ORDER);
+    const [orderFormValues, setOrderFormValues] = useState(
+        settings?.orderDefaultValues
+    );
 
     useEffect(() => {
         if (apiKey) {
@@ -190,6 +206,9 @@ const App: FC<ConfigType> = ({
         setIsFailed(false);
         setOrderId(data?.orderId || null);
         setOrderInfo(data || null);
+        if (data) {
+            setOrderFormValues(data as unknown as OrderFormInputsType);
+        }
         if (window === top) {
             top.postMessage(
                 {
@@ -222,7 +241,10 @@ const App: FC<ConfigType> = ({
                 return;
             }
 
-            window.location.href = url;
+            setTimeout(() => {
+                window.location.href = url;
+            }, 300);
+
             return;
         }
 
@@ -267,10 +289,11 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
-                                organizationNumberLabel={
-                                    settings?.organizationNumberLabel
-                                }
+                                organizationNumberLabel={settings?.cvrLabel}
                                 glnLabel={settings?.glnLabel}
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -282,24 +305,34 @@ const App: FC<ConfigType> = ({
                                 organizationNumberLabel={
                                     settings?.organizationNumberLabel
                                 }
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
                             formType !== FormTypeEnum.EHF && (
                                 <OrderForm
                                     callback={handleForm}
+                                    submitStartCallback={submitStartCallback}
                                     templatePackageId={templatePackageId}
                                     subscriberId={subscriberId}
                                     userId={userId}
                                     identityProviderId={identityProviderId}
                                     organizationId={organizationId}
                                     paymentMethods={availablePaymentMethods}
+                                    allowedPaymentMethods={
+                                        allowedPaymentMethods
+                                    }
                                     submitButtonText={
                                         settings?.submitButtonText
                                     }
                                     paymentMethodLabel={
                                         settings?.paymentMethodLabel
                                     }
+                                    paymentMethodNotAllowedMsg={
+                                        settings?.paymentMethodNotAllowedMsg
+                                    }
                                     errorReqMsg={settings?.errorReqMsg}
                                     errorInvalidEmailMsg={
                                         settings?.errorInvalidEmailMsg
@@ -307,7 +340,7 @@ const App: FC<ConfigType> = ({
                                     errorInvalidPhoneMsg={
                                         settings?.errorInvalidPhoneMsg
                                     }
-                                    defaultValues={settings?.orderDefaultValues}
+                                    defaultValues={orderFormValues}
                                     redirectUrl={redirectUrl}
                                     showIframe={showIframe}
                                     paymentMethodsOptions={

package/src/components/EHFForm/EHFForm.tsx

@@ -18,6 +18,7 @@ type Props = {
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
+    organizationNumber?: string;
     className?: string;
 };
 
@@ -35,6 +36,7 @@ const EHFForm: FC<Props> = ({
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
+    organizationNumber = '',
     className = '',
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -44,6 +46,7 @@ const EHFForm: FC<Props> = ({
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
             ...initialData,
+            organizationNumber,
         },
     });
 

package/src/components/OIOForm/OIOForm.tsx

@@ -18,6 +18,7 @@ type Props = {
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
+    organizationNumber?: string;
     glnLabel?: string;
     className?: string;
 };
@@ -38,6 +39,7 @@ const EHFForm: FC<Props> = ({
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
+    organizationNumber = '',
     glnLabel = '',
     className = '',
 }) => {
@@ -48,6 +50,7 @@ const EHFForm: FC<Props> = ({
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
             ...initialData,
+            cvr: organizationNumber,
         },
     });
 

package/src/components/OrderForm/OrderForm.tsx

@@ -1,10 +1,14 @@
-import { FC, ChangeEvent, Suspense, useState } from 'react';
+import { FC, ChangeEvent, Suspense, useState, useMemo } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import { createSubscriber, mapSubscriberToUser } from '../../api/SubscribeApi';
 import { orderStart } from '../../api/OrdersApi';
 import { PaymentMethodEnum } from '../../enums/general';
-import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../../constants/index';
+import {
+    WRONG_MSG,
+    PAYMENT_METHOD_DEFAULT,
+    INVOICE_ALLOWED_PAYMENT_METHODS,
+} from '../../constants/index';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import ToggleField from '../FormFields/ToggleFiled';
@@ -31,6 +35,7 @@ import './orderForm.scss';
 
 type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
+    submitStartCallback?: (id: string) => void;
     templatePackageId: string;
     subscriberId?: string;
     userId?: string;
@@ -43,8 +48,10 @@ type Props = {
     paymentMethodsOptions?: PaymentMethodOptionsType;
     defaultValues?: OrderFormInputsType;
     paymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    allowedPaymentMethods?: PaymentMethodEnum[];
     submitButtonText?: string;
     paymentMethodLabel?: string;
+    paymentMethodNotAllowedMsg?: string;
     errorReqMsg?: string;
     errorInvalidEmailMsg?: string;
     errorInvalidPhoneMsg?: string;
@@ -52,6 +59,7 @@ type Props = {
         enabled?: boolean;
         label?: string;
         fields?: OrderFormFiledType[];
+        paymentMethods?: PaymentMethodEnum[];
     };
 };
 
@@ -70,6 +78,7 @@ const initialData = {
 
 const OrderForm: FC<Props> = ({
     callback,
+    submitStartCallback,
     templatePackageId,
     subscriberId,
     userId,
@@ -82,9 +91,11 @@ const OrderForm: FC<Props> = ({
     language,
     merchantAgreementUrl,
     paymentMethods = [],
+    allowedPaymentMethods,
     invoiceAddressSelection,
     submitButtonText = 'Start',
     paymentMethodLabel = 'Select Payment Method',
+    paymentMethodNotAllowedMsg = 'This payment method not allowed!',
     errorReqMsg = '',
     errorInvalidEmailMsg = '',
     errorInvalidPhoneMsg = '',
@@ -109,6 +120,10 @@ const OrderForm: FC<Props> = ({
     const invoiceOrderFields =
         invoiceAddressSelection?.fields || orderInvoiceContactFields;
 
+    const invoicePaymentMethods =
+        invoiceAddressSelection?.paymentMethods ||
+        INVOICE_ALLOWED_PAYMENT_METHODS;
+
     const {
         register,
         handleSubmit,
@@ -118,6 +133,7 @@ const OrderForm: FC<Props> = ({
     } = methods;
 
     const invoiceAddressToggle = watch('invoiceAddressSelection');
+    const paymentMethodInput = watch('paymentMethod');
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
         data
@@ -143,6 +159,8 @@ const OrderForm: FC<Props> = ({
                 }
             }
 
+            submitStartCallback?.(id as string);
+
             if (id) {
                 const paymentMethod =
                     data.paymentMethod || PAYMENT_METHOD_DEFAULT;
@@ -183,6 +201,7 @@ const OrderForm: FC<Props> = ({
                     orderReference: data.orderReference || undefined,
                 });
                 callback(responseOrder.terminalRedirectUrl, {
+                    ...(data || {}),
                     orderId: responseOrder.id,
                     subscriberId: id,
                     paymentMethod: paymentMethod,
@@ -216,8 +235,29 @@ const OrderForm: FC<Props> = ({
             paymentMethodsOptions?.[e.target.value as PaymentMethodEnum]
                 ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
         setOrderFields(orderFieldsLocal);
+        if (
+            !invoicePaymentMethods.includes(e.target.value as PaymentMethodEnum)
+        ) {
+            setValue('invoiceAddressSelection', false);
+        }
     };
 
+    const allowPaymentMethod = useMemo(() => {
+        if (!allowedPaymentMethods || allowedPaymentMethods?.length === 0) {
+            return true;
+        }
+
+        if (
+            allowedPaymentMethods.includes(
+                paymentMethodInput as PaymentMethodEnum
+            )
+        ) {
+            return true;
+        }
+
+        return false;
+    }, [allowedPaymentMethods, paymentMethodInput]);
+
     return (
         <FormProvider {...methods}>
             <form
@@ -258,7 +298,7 @@ const OrderForm: FC<Props> = ({
                         )}
                     </div>
                 )}
-                {orderFields?.length > 0 && (
+                {orderFields?.length > 0 && allowPaymentMethod && (
                     <Suspense fallback={null}>
                         {orderFields.map((field) => {
                             const Component = formFieldsMapper[field.name];
@@ -279,42 +319,63 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
-                {invoiceAddressSelection?.enabled && (
-                    <ToggleField
-                        name="invoiceAddressSelection"
-                        label={
-                            invoiceAddressSelection?.label ?? 'Invoice Address'
-                        }
-                    />
-                )}
-                {invoiceAddressToggle && invoiceOrderFields?.length > 0 && (
-                    <Suspense fallback={null}>
-                        {invoiceOrderFields.map((field) => {
-                            const Component = formFieldsMapper[field.name];
+                {invoiceAddressSelection?.enabled &&
+                    allowPaymentMethod &&
+                    invoicePaymentMethods.includes(
+                        paymentMethodInput as PaymentMethodEnum
+                    ) && (
+                        <ToggleField
+                            name="invoiceAddressSelection"
+                            label={
+                                invoiceAddressSelection?.label ??
+                                'Invoice Address'
+                            }
+                        />
+                    )}
+                {invoiceAddressToggle &&
+                    invoiceOrderFields?.length > 0 &&
+                    allowPaymentMethod && (
+                        <Suspense fallback={null}>
+                            {invoiceOrderFields.map((field) => {
+                                const Component = formFieldsMapper[field.name];
 
-                            return Component ? (
-                                <Component
-                                    key={field.name}
-                                    name={field.name}
-                                    label={field.label}
-                                    required={field.required || false}
-                                    readOnly={field.readOnly || false}
-                                    errors={errors}
-                                    errorReqMsg={errorReqMsg}
-                                    errorInvalidEmailMsg={errorInvalidEmailMsg}
-                                    errorInvalidPhoneMsg={errorInvalidPhoneMsg}
-                                />
-                            ) : null;
-                        })}
-                    </Suspense>
+                                return Component ? (
+                                    <Component
+                                        key={field.name}
+                                        name={field.name}
+                                        label={field.label}
+                                        required={field.required || false}
+                                        readOnly={field.readOnly || false}
+                                        errors={errors}
+                                        errorReqMsg={errorReqMsg}
+                                        errorInvalidEmailMsg={
+                                            errorInvalidEmailMsg
+                                        }
+                                        errorInvalidPhoneMsg={
+                                            errorInvalidPhoneMsg
+                                        }
+                                    />
+                                ) : null;
+                            })}
+                        </Suspense>
+                    )}
+                {allowPaymentMethod && (
+                    <Button
+                        type="submit"
+                        loading={loading}
+                        buttonText={submitButtonText}
+                    />
                 )}
-                <Button
-                    type="submit"
-                    loading={loading}
-                    buttonText={submitButtonText}
+                <Alert
+                    className="mt-2"
+                    msg={
+                        allowPaymentMethod
+                            ? apiErrorMsg
+                            : paymentMethodNotAllowedMsg
+                    }
                 />
-                <Alert className="mt-2" msg={apiErrorMsg} />
                 {errorsMsg?.length > 0 &&
+                    allowPaymentMethod &&
                     errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
             </form>
         </FormProvider>

package/src/constants/index.ts

@@ -6,3 +6,8 @@ export const WRONG_MSG = 'Something went wrong!';
 
 export const PAYMENT_METHOD_DEFAULT: PaymentMethodEnum =
     PaymentMethodEnum.Vipps;
+
+export const INVOICE_ALLOWED_PAYMENT_METHODS = [
+    PaymentMethodEnum.Email,
+    PaymentMethodEnum.Invoice,
+];

package/src/types/general.ts

@@ -23,6 +23,7 @@ export type PaymentMethodOptionsType = {
 };
 
 export type ConfigType = {
+    submitStartCallback?: (subscriberId: string) => void;
     domElementId: string;
     moduleTitle?: string;
     templatePackageId: string;
@@ -35,6 +36,7 @@ export type ConfigType = {
     redirectUrl?: string;
     showIframe?: boolean;
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    allowedPaymentMethods?: PaymentMethodEnum[];
     paymentMethodsOptions?: PaymentMethodOptionsType;
     language?: string;
     merchantAgreementUrl?: string;
@@ -50,12 +52,14 @@ export type ConfigType = {
         backButtonText?: string;
         verifyButtonText?: string;
         organizationNumberLabel?: string;
+        cvrLabel?: string;
         glnLabel?: string;
         orderDefaultValues?: OrderFormInputsType;
         paymentMethodLabel?: string;
         errorReqMsg?: string;
         errorInvalidEmailMsg?: string;
         errorInvalidPhoneMsg?: string;
+        paymentMethodNotAllowedMsg?: string;
     };
 };
 

package/src/types/order.ts

@@ -10,6 +10,7 @@ export type OrderFormInputsType = {
     address?: string;
     zip?: string;
     careOf?: string;
+    organizationNumber?: string;
     invoiceAddressSelection?: boolean;
     orderReference?: string;
     invoiceName?: string;

package/src/utils/order.helper.ts

@@ -29,6 +29,7 @@ export const prepareAgreementModel = ({
     };
     const existUrl = new URL(window.location.href);
     const journey = existUrl.searchParams.get('journey');
+    const hashToken = existUrl.searchParams.get('hashToken');
     const url = showIframe
         ? window.location.href.split('?')[0]
         : redirectUrl || window.location.href;
@@ -37,6 +38,9 @@ export const prepareAgreementModel = ({
     if (journey) {
         cancelUrl.searchParams.append('journey', journey);
     }
+    if (hashToken) {
+        cancelUrl.searchParams.append('hashToken', hashToken);
+    }
     const confirmUrl = new URL(url);
     confirmUrl.searchParams.append(
         'action',
@@ -45,6 +49,9 @@ export const prepareAgreementModel = ({
     if (journey) {
         confirmUrl.searchParams.append('journey', journey);
     }
+    if (hashToken) {
+        confirmUrl.searchParams.append('hashToken', hashToken);
+    }
 
     if (paymentMethod === PaymentMethodEnum.SwedbankPay) {
         model.swedbankPay = {