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

package/package.json

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

package/src/App.tsx

@@ -255,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,
         });
     };
 
@@ -294,6 +302,20 @@ const App: FC<ConfigType> = ({
                                 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 && (
@@ -308,12 +330,27 @@ const App: FC<ConfigType> = ({
                                 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}

package/src/components/EHFForm/EHFForm.tsx

@@ -1,25 +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;
     organizationNumber?: string;
-    className?: 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 = {
@@ -33,16 +54,25 @@ const initialData = {
 const EHFForm: FC<Props> = ({
     callback,
     onBack,
+    submitStartCallback,
+    className = '',
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
     organizationNumber = '',
-    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<EHFFormInputsType>({
         defaultValues: {
             ...initialData,
@@ -55,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,26 +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 = {
@@ -36,17 +57,26 @@ 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,
@@ -63,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,11 +1,8 @@
 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,
     INVOICE_ALLOWED_PAYMENT_METHODS,
 } from '../../constants/index';
@@ -18,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;
@@ -78,6 +67,7 @@ const initialData = {
 
 const OrderForm: FC<Props> = ({
     callback,
+    updateFormData,
     submitStartCallback,
     templatePackageId,
     subscriberId,
@@ -100,9 +90,6 @@ const OrderForm: FC<Props> = ({
     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
@@ -135,98 +122,35 @@ const OrderForm: FC<Props> = ({
     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>) => {
@@ -258,6 +182,16 @@ const OrderForm: FC<Props> = ({
         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
@@ -319,46 +253,35 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
-                {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];
+                {showInvoiceToggle && (
+                    <ToggleField
+                        name="invoiceAddressSelection"
+                        label={
+                            invoiceAddressSelection?.label ?? 'Invoice Address'
+                        }
+                    />
+                )}
+                {showInvoiceFields && (
+                    <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"

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/order.ts

@@ -22,6 +22,8 @@ export type OrderFormInputsType = {
     invoiceZip?: string;
     invoiceCareOf?: string;
     invoiceBuyerReference?: string;
+    gln?: string;
+    cvr?: string;
 };
 
 export type VippsMobilePay = {