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

package/package.json

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

package/src/App.tsx

@@ -40,6 +40,7 @@ const App: FC<ConfigType> = ({
     paymentMethodsOptions,
     invoiceAddressSelection,
     availablePaymentMethods = [],
+    allowedPaymentMethods,
     language = 'en-US',
     merchantAgreementUrl = '',
     settings = {
@@ -49,10 +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);
@@ -249,11 +255,19 @@ const App: FC<ConfigType> = ({
         setFormType(FormTypeEnum.ORDER);
     };
 
-    const handleInvoiceForm = async () => {
+    const updateFormData = (data: OrderFormInputsType) => {
+        setOrderFormValues(data);
+        setFormType(data.paymentMethod as unknown as FormTypeEnum);
+    };
+
+    const handleInvoiceForm = async (
+        _: string | null,
+        data?: OrderInfoType | null
+    ) => {
         await messageCallback({
-            orderId: orderId || '',
+            orderId: data?.orderId || orderId || '',
             agreementId: '',
-            orderInfo: orderInfo || null,
+            orderInfo: data || orderInfo || null,
         });
     };
 
@@ -283,10 +297,25 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
-                                organizationNumberLabel={
-                                    settings?.organizationNumberLabel
-                                }
+                                organizationNumberLabel={settings?.cvrLabel}
                                 glnLabel={settings?.glnLabel}
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
+                                orderValues={orderFormValues}
+                                templatePackageId={templatePackageId}
+                                subscriberId={subscriberId}
+                                userId={userId}
+                                identityProviderId={identityProviderId}
+                                organizationId={organizationId}
+                                redirectUrl={redirectUrl}
+                                showIframe={showIframe}
+                                paymentMethodsOptions={paymentMethodsOptions}
+                                language={language}
+                                merchantAgreementUrl={merchantAgreementUrl}
+                                invoiceAddressSelection={
+                                    invoiceAddressSelection
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -298,12 +327,30 @@ const App: FC<ConfigType> = ({
                                 organizationNumberLabel={
                                     settings?.organizationNumberLabel
                                 }
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
+                                orderValues={orderFormValues}
+                                templatePackageId={templatePackageId}
+                                subscriberId={subscriberId}
+                                userId={userId}
+                                identityProviderId={identityProviderId}
+                                organizationId={organizationId}
+                                redirectUrl={redirectUrl}
+                                showIframe={showIframe}
+                                paymentMethodsOptions={paymentMethodsOptions}
+                                language={language}
+                                merchantAgreementUrl={merchantAgreementUrl}
+                                invoiceAddressSelection={
+                                    invoiceAddressSelection
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
                             formType !== FormTypeEnum.EHF && (
                                 <OrderForm
                                     callback={handleForm}
+                                    updateFormData={updateFormData}
                                     submitStartCallback={submitStartCallback}
                                     templatePackageId={templatePackageId}
                                     subscriberId={subscriberId}
@@ -311,12 +358,18 @@ const App: FC<ConfigType> = ({
                                     identityProviderId={identityProviderId}
                                     organizationId={organizationId}
                                     paymentMethods={availablePaymentMethods}
+                                    allowedPaymentMethods={
+                                        allowedPaymentMethods
+                                    }
                                     submitButtonText={
                                         settings?.submitButtonText
                                     }
                                     paymentMethodLabel={
                                         settings?.paymentMethodLabel
                                     }
+                                    paymentMethodNotAllowedMsg={
+                                        settings?.paymentMethodNotAllowedMsg
+                                    }
                                     errorReqMsg={settings?.errorReqMsg}
                                     errorInvalidEmailMsg={
                                         settings?.errorInvalidEmailMsg

package/src/components/EHFForm/EHFForm.tsx

@@ -1,24 +1,46 @@
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
-import { invoiceLookup } from '../../api/InvoiceApi';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import InputField from '../FormFields/InputField';
+import { PaymentMethodEnum } from '../../enums/general';
 import {
-    prepareErrorMessage,
-    prepareErrorsArrayMessage,
-} from '../../utils/helper';
-import { InvoiceLookupNetworkEnum } from '../../enums/general';
-import { ErrorsMsg } from '../../types/general';
+    OrderFormFiledType,
+    PaymentMethodOptionsType,
+} from '../../types/general';
+import { OrderFormInputsType, OrderInfoType } from '../../types/order';
+import { orderInvoiceContactFields } from '../../utils/order.helper';
+import useOrderForm from '../../hooks/useOrderForm';
+import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 
 type Props = {
-    callback: (value: string) => void;
+    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
+    submitStartCallback?: (id: string) => void;
+    className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
-    className?: string;
+    organizationNumber?: string;
+    glnLabel?: string;
+    templatePackageId: string;
+    subscriberId?: string;
+    userId?: string;
+    identityProviderId?: string;
+    organizationId: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    language: string;
+    merchantAgreementUrl: string;
+    orderValues?: OrderFormInputsType;
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFiledType[];
+        paymentMethods?: PaymentMethodEnum[];
+    };
 };
 
 type EHFFormInputsType = {
@@ -32,18 +54,29 @@ const initialData = {
 const EHFForm: FC<Props> = ({
     callback,
     onBack,
+    submitStartCallback,
+    className = '',
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
-    className = '',
+    organizationNumber = '',
+    templatePackageId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    organizationId,
+    redirectUrl,
+    showIframe,
+    language,
+    merchantAgreementUrl,
+    orderValues,
+    paymentMethodsOptions,
+    invoiceAddressSelection,
 }) => {
-    const [loading, setLoading] = useState<boolean>(false);
-    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
-    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
-
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
             ...initialData,
+            organizationNumber,
         },
     });
 
@@ -52,32 +85,38 @@ const EHFForm: FC<Props> = ({
         formState: { errors },
     } = methods;
 
+    const invoiceOrderFields =
+        invoiceAddressSelection?.fields || orderInvoiceContactFields;
+
+    const orderFields =
+        paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
+            ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
+
+    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+        callback,
+        submitStartCallback,
+        organizationId,
+        subscriberId,
+        userId,
+        identityProviderId,
+        orderFields,
+        redirectUrl,
+        showIframe,
+        language,
+        merchantAgreementUrl,
+        paymentMethodsOptions,
+        templatePackageId,
+        invoiceAddressToggle: orderValues?.invoiceAddressSelection,
+        invoiceOrderFields,
+    });
+
     const onSubmit: SubmitHandler<EHFFormInputsType> = async (
         data
     ): Promise<void> => {
-        setApiErrorMsg('');
-        setErrorsMsg([]);
-        setLoading(true);
-        try {
-            await invoiceLookup({
-                network: InvoiceLookupNetworkEnum.EHF,
-                value: data.organizationNumber,
-            });
-            callback(data.organizationNumber);
-        } catch (error) {
-            setApiErrorMsg(prepareErrorMessage(error as Error));
-            setErrorsMsg(
-                prepareErrorsArrayMessage(
-                    (
-                        error as {
-                            errors: ErrorsMsg;
-                        }
-                    )?.errors
-                )
-            );
-        } finally {
-            setLoading(false);
-        }
+        orderSubmit({
+            ...orderValues,
+            organizationNumber: data.organizationNumber,
+        });
     };
 
     const handleBack = () => {

package/src/components/FormFields/AddressField.tsx

@@ -27,7 +27,7 @@ const AddressField: FC<Props> = ({
     const { register } = useFormContext();
     const id = uuidv4();
     return (
-        <div className="field-wrapper" data-testid="sdk-address-field-id">
+        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
             <textarea
                 id={id}
                 autoComplete="address"

package/src/components/FormFields/EmailField.tsx

@@ -29,7 +29,7 @@ const EmailField: FC<Props> = ({
     const { register } = useFormContext();
     const id = uuidv4();
     return (
-        <div className="field-wrapper" data-testid="sdk-email-field-id">
+        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
             <input
                 id={id}
                 autoComplete="email"

package/src/components/FormFields/NameField.tsx

@@ -27,7 +27,7 @@ const NameField: FC<Props> = ({
     const { register } = useFormContext();
     const id = uuidv4();
     return (
-        <div className="field-wrapper" data-testid="sdk-name-field-id">
+        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
             <input
                 id={id}
                 autoComplete="name"

package/src/components/FormFields/PhoneField.tsx

@@ -29,7 +29,7 @@ const PhoneFiled: FC<Props> = ({
     const { register } = useFormContext();
     const id = uuidv4();
     return (
-        <div className="field-wrapper" data-testid="sdk-phone-field-id">
+        <div className="field-wrapper" data-testid={`sdk-${name}-field-id`}>
             <input
                 id={id}
                 autoComplete="tel"

package/src/components/OIOForm/OIOForm.tsx

@@ -1,25 +1,47 @@
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
-import { invoiceLookup } from '../../api/InvoiceApi';
 import Alert from '../Alert/Alert';
 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 {
-    prepareErrorMessage,
-    prepareErrorsArrayMessage,
-} from '../../utils/helper';
-import { InvoiceLookupNetworkEnum } from '../../enums/general';
-import { ErrorsMsg } from '../../types/general';
+    OrderFormFiledType,
+    PaymentMethodOptionsType,
+} from '../../types/general';
+import useOrderForm from '../../hooks/useOrderForm';
+import { orderInvoiceContactFields } from '../../utils/order.helper';
+import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 
 type Props = {
-    callback: (value: string) => void;
+    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
+    submitStartCallback?: (id: string) => void;
+    className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
+    organizationNumber?: string;
     glnLabel?: string;
-    className?: string;
+    templatePackageId: string;
+    subscriberId?: string;
+    userId?: string;
+    identityProviderId?: string;
+    organizationId: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    language: string;
+    merchantAgreementUrl: string;
+    orderValues?: OrderFormInputsType;
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFiledType[];
+        paymentMethods?: PaymentMethodEnum[];
+    };
 };
 
 type OIOFormInputsType = {
@@ -35,19 +57,30 @@ const initialData = {
 const EHFForm: FC<Props> = ({
     callback,
     onBack,
+    submitStartCallback,
+    className = '',
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
+    organizationNumber = '',
     glnLabel = '',
-    className = '',
+    templatePackageId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    organizationId,
+    redirectUrl,
+    showIframe,
+    language,
+    merchantAgreementUrl,
+    orderValues,
+    paymentMethodsOptions,
+    invoiceAddressSelection,
 }) => {
-    const [loading, setLoading] = useState<boolean>(false);
-    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
-    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
-
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
             ...initialData,
+            cvr: organizationNumber,
         },
     });
 
@@ -60,34 +93,35 @@ const EHFForm: FC<Props> = ({
     const cvr = watch('cvr');
     const gln = watch('gln');
 
+    const invoiceOrderFields =
+        invoiceAddressSelection?.fields || orderInvoiceContactFields;
+
+    const orderFields =
+        paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
+            ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
+
+    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+        callback,
+        submitStartCallback,
+        organizationId,
+        subscriberId,
+        userId,
+        identityProviderId,
+        orderFields,
+        redirectUrl,
+        showIframe,
+        language,
+        merchantAgreementUrl,
+        paymentMethodsOptions,
+        templatePackageId,
+        invoiceAddressToggle: orderValues?.invoiceAddressSelection,
+        invoiceOrderFields,
+    });
+
     const onSubmit: SubmitHandler<OIOFormInputsType> = async (
         data
     ): Promise<void> => {
-        setApiErrorMsg('');
-        setErrorsMsg([]);
-        setLoading(true);
-        try {
-            await invoiceLookup({
-                network: data.gln
-                    ? InvoiceLookupNetworkEnum.OIO_GLN
-                    : InvoiceLookupNetworkEnum.OIO_Danish_CVR,
-                value: data.gln || data.cvr,
-            });
-            callback(data.gln || data.cvr);
-        } catch (error) {
-            setApiErrorMsg(prepareErrorMessage(error as Error));
-            setErrorsMsg(
-                prepareErrorsArrayMessage(
-                    (
-                        error as {
-                            errors: ErrorsMsg;
-                        }
-                    )?.errors
-                )
-            );
-        } finally {
-            setLoading(false);
-        }
+        orderSubmit({ ...orderValues, gln: data.gln, cvr: data.cvr });
     };
 
     const handleBack = () => {

package/src/components/OrderForm/OrderForm.tsx

@@ -1,10 +1,11 @@
-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 {
+    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';
@@ -14,23 +15,15 @@ import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 import {
     PaymentMethodOptionsType,
     OrderFormFiledType,
-    ErrorsMsg,
 } from '../../types/general';
-import {
-    orderInvoiceContactFields,
-    prepareAgreementModel,
-    prepareContactModel,
-    prepareInvoiceModel,
-} from '../../utils/order.helper';
-import {
-    prepareErrorMessage,
-    prepareErrorsArrayMessage,
-} from '../../utils/helper';
+import { orderInvoiceContactFields } from '../../utils/order.helper';
+import useOrderForm from '../../hooks/useOrderForm';
 
 import './orderForm.scss';
 
 type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
+    updateFormData: (data: OrderFormInputsType) => void;
     submitStartCallback?: (id: string) => void;
     templatePackageId: string;
     subscriberId?: string;
@@ -44,8 +37,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;
@@ -53,6 +48,7 @@ type Props = {
         enabled?: boolean;
         label?: string;
         fields?: OrderFormFiledType[];
+        paymentMethods?: PaymentMethodEnum[];
     };
 };
 
@@ -71,6 +67,7 @@ const initialData = {
 
 const OrderForm: FC<Props> = ({
     callback,
+    updateFormData,
     submitStartCallback,
     templatePackageId,
     subscriberId,
@@ -84,16 +81,15 @@ const OrderForm: FC<Props> = ({
     language,
     merchantAgreementUrl,
     paymentMethods = [],
+    allowedPaymentMethods,
     invoiceAddressSelection,
     submitButtonText = 'Start',
     paymentMethodLabel = 'Select Payment Method',
+    paymentMethodNotAllowedMsg = 'This payment method not allowed!',
     errorReqMsg = '',
     errorInvalidEmailMsg = '',
     errorInvalidPhoneMsg = '',
 }) => {
-    const [loading, setLoading] = useState<boolean>(false);
-    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
-    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
         paymentMethodsOptions?.[
             defaultValues?.paymentMethod || PAYMENT_METHOD_DEFAULT
@@ -111,6 +107,10 @@ const OrderForm: FC<Props> = ({
     const invoiceOrderFields =
         invoiceAddressSelection?.fields || orderInvoiceContactFields;
 
+    const invoicePaymentMethods =
+        invoiceAddressSelection?.paymentMethods ||
+        INVOICE_ALLOWED_PAYMENT_METHODS;
+
     const {
         register,
         handleSubmit,
@@ -120,99 +120,37 @@ const OrderForm: FC<Props> = ({
     } = methods;
 
     const invoiceAddressToggle = watch('invoiceAddressSelection');
+    const paymentMethodInput = watch('paymentMethod');
+
+    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+        callback,
+        submitStartCallback,
+        organizationId,
+        subscriberId,
+        userId,
+        identityProviderId,
+        orderFields,
+        redirectUrl,
+        showIframe,
+        language,
+        merchantAgreementUrl,
+        paymentMethodsOptions,
+        templatePackageId,
+        invoiceAddressToggle,
+        invoiceOrderFields,
+    });
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
         data
     ): Promise<void> => {
-        setApiErrorMsg('');
-        setErrorsMsg([]);
-
-        setLoading(true);
-        try {
-            let id: string | undefined = subscriberId;
-            const contactModel = prepareContactModel({ data, orderFields });
-            if (!subscriberId) {
-                const response = await createSubscriber({
-                    ...contactModel,
-                });
-                id = response.id;
-
-                if (userId && identityProviderId) {
-                    await mapSubscriberToUser(id, {
-                        userId: userId,
-                        identityProviderId: identityProviderId,
-                    });
-                }
-            }
-
-            submitStartCallback?.(id as string);
-
-            if (id) {
-                const paymentMethod =
-                    data.paymentMethod || PAYMENT_METHOD_DEFAULT;
-
-                const agreements = prepareAgreementModel({
-                    paymentMethod,
-                    redirectUrl,
-                    showIframe,
-                    phoneNumber: orderFields.find(
-                        (i) => i.name === 'phoneNumber'
-                    )
-                        ? data.phoneNumber?.trim() || undefined
-                        : undefined,
-                    language,
-                    merchantAgreementUrl,
-                    generateSubscriberContact:
-                        paymentMethodsOptions?.[
-                            data.paymentMethod as PaymentMethodEnum
-                        ]?.generateSubscriberContact || false,
-                    accountId:
-                        paymentMethodsOptions?.[
-                            data.paymentMethod as PaymentMethodEnum
-                        ]?.accountId,
-                });
-                const responseOrder = await orderStart({
-                    subscriberId: id,
-                    subscriptionPlan: {
-                        organizationId,
-                        templateSubscriptionPlanId: templatePackageId,
-                    },
-                    paymentAgreement: { ...agreements },
-                    invoiceContact: invoiceAddressToggle
-                        ? prepareInvoiceModel({
-                              data,
-                              orderFields: invoiceOrderFields,
-                          })
-                        : undefined,
-                    orderReference: data.orderReference || undefined,
-                });
-                callback(responseOrder.terminalRedirectUrl, {
-                    ...(data || {}),
-                    orderId: responseOrder.id,
-                    subscriberId: id,
-                    paymentMethod: paymentMethod,
-                });
-                return;
-            }
-            callback(null);
-            setApiErrorMsg(WRONG_MSG);
-            setErrorsMsg([]);
-        } catch (error) {
-            console.error(error);
-            setApiErrorMsg(prepareErrorMessage(error as Error));
-            setErrorsMsg(
-                prepareErrorsArrayMessage(
-                    (
-                        error as {
-                            errors: ErrorsMsg;
-                        }
-                    )?.errors
-                )
-            );
-            callback(null);
-        } finally {
-            setLoading(false);
+        if (
+            paymentMethodInput === PaymentMethodEnum.EHF ||
+            paymentMethodInput === PaymentMethodEnum.OIO
+        ) {
+            updateFormData(data);
+            return;
         }
+        await orderSubmit(data);
     };
 
     const handlePaymentChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -221,8 +159,39 @@ 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]);
+
+    const showInvoiceFields =
+        invoiceAddressToggle &&
+        invoiceOrderFields?.length > 0 &&
+        allowPaymentMethod;
+
+    const showInvoiceToggle =
+        invoiceAddressSelection?.enabled &&
+        allowPaymentMethod &&
+        invoicePaymentMethods.includes(paymentMethodInput as PaymentMethodEnum);
+
     return (
         <FormProvider {...methods}>
             <form
@@ -263,7 +232,7 @@ const OrderForm: FC<Props> = ({
                         )}
                     </div>
                 )}
-                {orderFields?.length > 0 && (
+                {orderFields?.length > 0 && allowPaymentMethod && (
                     <Suspense fallback={null}>
                         {orderFields.map((field) => {
                             const Component = formFieldsMapper[field.name];
@@ -284,7 +253,7 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
-                {invoiceAddressSelection?.enabled && (
+                {showInvoiceToggle && (
                     <ToggleField
                         name="invoiceAddressSelection"
                         label={
@@ -292,7 +261,7 @@ const OrderForm: FC<Props> = ({
                         }
                     />
                 )}
-                {invoiceAddressToggle && invoiceOrderFields?.length > 0 && (
+                {showInvoiceFields && (
                     <Suspense fallback={null}>
                         {invoiceOrderFields.map((field) => {
                             const Component = formFieldsMapper[field.name];
@@ -313,13 +282,23 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
-                <Button
-                    type="submit"
-                    loading={loading}
-                    buttonText={submitButtonText}
+                {allowPaymentMethod && (
+                    <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/hooks/useOrderForm.tsx

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+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 { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
+import { OrderFormInputsType, OrderInfoType } from '../types/order';
+import {
+    ErrorsMsg,
+    OrderFormFiledType,
+    PaymentMethodOptionsType,
+} from '../types/general';
+import {
+    prepareAgreementModel,
+    prepareContactModel,
+    prepareInvoiceModel,
+} from '../utils/order.helper';
+import {
+    prepareErrorMessage,
+    prepareErrorsArrayMessage,
+} from '../utils/helper';
+
+type Props = {
+    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
+    submitStartCallback?: (id: string) => void;
+    templatePackageId: string;
+    subscriberId?: string;
+    userId?: string;
+    identityProviderId?: string;
+    organizationId: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    language: string;
+    merchantAgreementUrl: string;
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    orderFields: OrderFormFiledType[];
+    invoiceAddressToggle?: boolean;
+    invoiceOrderFields: OrderFormFiledType[];
+};
+
+const useOrderForm = ({
+    callback,
+    submitStartCallback,
+    organizationId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    orderFields,
+    redirectUrl,
+    showIframe,
+    language,
+    merchantAgreementUrl,
+    paymentMethodsOptions,
+    templatePackageId,
+    invoiceAddressToggle,
+    invoiceOrderFields,
+}: Props) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
+    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
+
+    const orderSubmit: SubmitHandler<OrderFormInputsType> = async (
+        data
+    ): Promise<void> => {
+        setApiErrorMsg('');
+        setErrorsMsg([]);
+        setLoading(true);
+        try {
+            let id: string | undefined = subscriberId;
+            const contactModel = prepareContactModel({ data, orderFields });
+            if (!subscriberId) {
+                const response = await createSubscriber({
+                    ...contactModel,
+                    gln: data?.gln,
+                    organizationNumber:
+                        data.paymentMethod === PaymentMethodEnum.OIO
+                            ? data?.cvr
+                            : data.organizationNumber || undefined,
+                });
+                id = response.id;
+
+                if (userId && identityProviderId) {
+                    await mapSubscriberToUser(id, {
+                        userId: userId,
+                        identityProviderId: identityProviderId,
+                    });
+                }
+            }
+
+            submitStartCallback?.(id as string);
+
+            if (id) {
+                const paymentMethod =
+                    data.paymentMethod || PAYMENT_METHOD_DEFAULT;
+
+                const agreements = prepareAgreementModel({
+                    paymentMethod,
+                    redirectUrl,
+                    showIframe,
+                    phoneNumber: orderFields.find(
+                        (i) => i.name === 'phoneNumber'
+                    )
+                        ? data.phoneNumber?.trim() || undefined
+                        : undefined,
+                    language,
+                    merchantAgreementUrl,
+                    generateSubscriberContact:
+                        paymentMethodsOptions?.[
+                            data.paymentMethod as PaymentMethodEnum
+                        ]?.generateSubscriberContact || false,
+                    accountId:
+                        paymentMethodsOptions?.[
+                            data.paymentMethod as PaymentMethodEnum
+                        ]?.accountId,
+                });
+                const responseOrder = await orderStart({
+                    subscriberId: id,
+                    subscriptionPlan: {
+                        organizationId,
+                        templateSubscriptionPlanId: templatePackageId,
+                    },
+                    paymentAgreement: { ...agreements },
+                    invoiceContact: invoiceAddressToggle
+                        ? prepareInvoiceModel({
+                              data,
+                              orderFields: invoiceOrderFields,
+                          })
+                        : 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,
+                    subscriberId: id,
+                    paymentMethod: paymentMethod,
+                });
+                return;
+            }
+            callback(null);
+            setApiErrorMsg(WRONG_MSG);
+            setErrorsMsg([]);
+        } catch (error) {
+            console.error(error);
+            setApiErrorMsg(prepareErrorMessage(error as Error));
+            setErrorsMsg(
+                prepareErrorsArrayMessage(
+                    (
+                        error as {
+                            errors: ErrorsMsg;
+                        }
+                    )?.errors
+                )
+            );
+            callback(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return {
+        orderSubmit,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+    };
+};
+
+export default useOrderForm;

package/src/types/api.ts

@@ -21,4 +21,6 @@ export type CreateSubscriberRequestType = {
     zip?: string;
     careOf?: string;
     buyerReference?: string;
+    gln?: string;
+    organizationNumber?: string;
 };

package/src/types/general.ts

@@ -36,6 +36,7 @@ export type ConfigType = {
     redirectUrl?: string;
     showIframe?: boolean;
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    allowedPaymentMethods?: PaymentMethodEnum[];
     paymentMethodsOptions?: PaymentMethodOptionsType;
     language?: string;
     merchantAgreementUrl?: string;
@@ -51,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;
@@ -21,6 +22,8 @@ export type OrderFormInputsType = {
     invoiceZip?: string;
     invoiceCareOf?: string;
     invoiceBuyerReference?: string;
+    gln?: string;
+    cvr?: string;
 };
 
 export type VippsMobilePay = {