@infosoftas/s4-orders-js-sdk 0.0.1-alpha1e → 0.0.1-alpha2a

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha1e",
+    "version": "0.0.1-alpha2a",
     "scripts": {
         "build": "rimraf lib && webpack --env mode=production"
     },

package/src/App.tsx

@@ -27,6 +27,7 @@ const App: FC<ConfigType> = ({
     redirectUrl,
     showIframe,
     paymentMethodsOptions,
+    invoiceAddressSelection,
     availablePaymentMethods = [],
     language = 'en-US',
     merchantAgreementUrl = '',
@@ -186,7 +187,23 @@ const App: FC<ConfigType> = ({
                 top?.location?.origin || '*'
             );
         }
-        if (url) {
+        if (
+            data?.paymentMethod === PaymentMethodEnum.Email ||
+            data?.paymentMethod === PaymentMethodEnum.Invoice
+        ) {
+            if (window === top) {
+                setIsConfirmed(true);
+                setLoading(false);
+                top.postMessage(
+                    {
+                        type: MessageEventTypeEnum.ORDER_FLOW_COMPLETE,
+                        isCompleted: true,
+                        orderInfo: data || null,
+                    },
+                    top?.location?.origin || '*'
+                );
+            }
+        } else if (url) {
             if (
                 showIframe &&
                 data?.paymentMethod === PaymentMethodEnum.SwedbankPay
@@ -240,6 +257,7 @@ const App: FC<ConfigType> = ({
                         paymentMethodsOptions={paymentMethodsOptions}
                         language={language}
                         merchantAgreementUrl={merchantAgreementUrl}
+                        invoiceAddressSelection={invoiceAddressSelection}
                     />
                 )}
                 {showIframe && <MainIframe iframeSrc={iframeSrc} />}

package/src/api/OrdersApi.ts

@@ -1,3 +1,4 @@
+import { CreateSubscriberRequestType } from '../types/api';
 import { AgreementsType } from '../types/order';
 import fetcher from '../utils/fetcher';
 
@@ -8,6 +9,8 @@ type RequestOrderStartType = {
         templateSubscriptionPlanId?: string;
     };
     paymentAgreement: AgreementsType;
+    invoiceContact?: CreateSubscriberRequestType;
+    orderReference?: string;
 };
 
 type OrderResponseType = {

package/src/api/SubscribeApi.ts

@@ -1,14 +1,5 @@
 import fetcher from '../utils/fetcher';
-
-type CreateSubscriberRequestType = {
-    name?: string;
-    email?: string;
-    phone?: string;
-    country?: string;
-    city?: string;
-    addressLines?: string[];
-    zip?: string;
-};
+import { CreateSubscriberRequestType } from '../types/api';
 
 type CreateSubscriberResponseType = {
     id: string;

package/src/assets/styles/forms.scss

@@ -102,4 +102,63 @@
             }
         }
     }
+}
+
+.sdk-on-off-label {
+    margin-right: 0.5rem;
+}
+
+.sdk-on-off {
+    position: relative;
+    display : inline-block;
+    width   : 60px;
+    height  : 28px;
+
+    input {
+        opacity: 0;
+        width  : 0;
+        height : 0;
+    }
+
+    input:checked+.slider:before {
+        -webkit-transform: translateX(32px);
+        -ms-transform    : translateX(32px);
+        transform        : translateX(32px);
+    }
+
+    input:checked+.slider {
+        background-color: $primary-color;
+    }
+
+    .slider {
+        position          : absolute;
+        cursor            : pointer;
+        top               : 0;
+        left              : 0;
+        right             : 0;
+        bottom            : 0;
+        background-color  : $input-border-disabled-color;
+        -webkit-transition: .4s;
+        transition        : .4s;
+
+        &:before {
+            position          : absolute;
+            content           : "";
+            height            : 24px;
+            width             : 24px;
+            left              : 2px;
+            bottom            : 2px;
+            background-color  : white;
+            -webkit-transition: .4s;
+            transition        : .4s;
+        }
+
+        &.round {
+            border-radius: 28px;
+
+            &:before {
+                border-radius: 50%;
+            }
+        }
+    }
 }

package/src/assets/styles/general.scss

@@ -9,6 +9,10 @@
     justify-content: center;
 }
 
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
 .align-center {
     align-items: center;
 }

package/src/components/FormFields/AddressField.tsx

@@ -10,13 +10,14 @@ type Props = {
     label?: string;
     errorReqMsg?: string;
     errors?: {
-        address?: {
+        [key: string]: {
             message?: string;
         };
     };
 };
 
 const AddressField: FC<Props> = ({
+    name = 'address',
     required = false,
     readOnly = false,
     label = 'Address',
@@ -33,17 +34,15 @@ const AddressField: FC<Props> = ({
                 placeholder=" "
                 readOnly={readOnly}
                 className={`input-control ${readOnly ? 'read-only' : ''}`}
-                {...register('address', {
+                {...register(name, {
                     required: required ? errorReqMsg : false,
                 })}
             />
             <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
-            {errors && errors.address && (
-                <div className="text-error caption">
-                    {errors.address.message}
-                </div>
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
             )}
         </div>
     );

package/src/components/FormFields/EmailField.tsx

@@ -11,13 +11,14 @@ type Props = {
     errorReqMsg?: string;
     errorInvalidEmailMsg?: string;
     errors?: {
-        email?: {
+        [key: string]: {
             message?: string;
         };
     };
 };
 
 const EmailField: FC<Props> = ({
+    name = 'email',
     required = false,
     readOnly = false,
     label = 'Email',
@@ -36,7 +37,7 @@ const EmailField: FC<Props> = ({
                 className={`input-control ${readOnly ? 'read-only' : ''}`}
                 readOnly={readOnly}
                 type="email"
-                {...register('email', {
+                {...register(name, {
                     required: required ? errorReqMsg : false,
                     pattern: {
                         value: /^[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]+)*@[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]{2,20})+$/i,
@@ -47,8 +48,8 @@ const EmailField: FC<Props> = ({
             <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
-            {errors && errors.email && (
-                <div className="text-error caption">{errors.email.message}</div>
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
             )}
         </div>
     );

package/src/components/FormFields/FormFields.helper.ts

@@ -8,6 +8,19 @@ export const FIELD_TYPES = {
     CITY: 'city',
     ADDRESS: 'address',
     ZIP: 'zip',
+    CARE_OF: 'careOf',
+    ORGANIZATION_NUMBER: 'organizationNumber',
+    BUYER_REFERENCE: 'buyerReference',
+    ORDER_REFERENCE: 'orderReference',
+    INVOICE_NAME: 'invoiceName',
+    INVOICE_ADDRESS: 'invoiceAddress',
+    INVOICE_CITY: 'invoiceCity',
+    INVOICE_ZIP: 'invoiceZip',
+    INVOICE_COUNTRY: 'invoiceCountry',
+    INVOICE_PHONE: 'invoicePhoneNumber',
+    INVOICE_EMAIL: 'invoiceEmail',
+    INVOICE_CARE_OF: 'invoiceCareOf',
+    INVOICE_BUYER_REFERENCE: 'invoiceBuyerReference',
 };
 
 export const DEFAULT_ORDER_FORM_FIELDS: OrderFormFiledType[] = [

package/src/components/FormFields/FormFieldsMapper.ts

@@ -14,6 +14,19 @@ const formFieldsMapper = {
     [FIELD_TYPES.COUNTRY]: InputField,
     [FIELD_TYPES.CITY]: InputField,
     [FIELD_TYPES.ZIP]: InputField,
+    [FIELD_TYPES.CARE_OF]: InputField,
+    [FIELD_TYPES.ORGANIZATION_NUMBER]: InputField,
+    [FIELD_TYPES.BUYER_REFERENCE]: InputField,
+    [FIELD_TYPES.ORDER_REFERENCE]: InputField,
+    [FIELD_TYPES.INVOICE_PHONE]: PhoneField,
+    [FIELD_TYPES.INVOICE_NAME]: NameField,
+    [FIELD_TYPES.INVOICE_EMAIL]: EmailField,
+    [FIELD_TYPES.INVOICE_ADDRESS]: AddressField,
+    [FIELD_TYPES.INVOICE_COUNTRY]: InputField,
+    [FIELD_TYPES.INVOICE_CITY]: InputField,
+    [FIELD_TYPES.INVOICE_ZIP]: InputField,
+    [FIELD_TYPES.INVOICE_CARE_OF]: InputField,
+    [FIELD_TYPES.INVOICE_BUYER_REFERENCE]: InputField,
 };
 
 export default formFieldsMapper;

package/src/components/FormFields/NameField.tsx

@@ -10,13 +10,14 @@ type Props = {
     label?: string;
     errorReqMsg?: string;
     errors?: {
-        name?: {
+        [key: string]: {
             message?: string;
         };
     };
 };
 
 const NameField: FC<Props> = ({
+    name = 'name',
     required = false,
     readOnly = false,
     label = 'Name',
@@ -33,15 +34,15 @@ const NameField: FC<Props> = ({
                 placeholder=" "
                 readOnly={readOnly}
                 className={`input-control ${readOnly ? 'read-only' : ''}`}
-                {...register('name', {
+                {...register(name, {
                     required: required ? errorReqMsg : false,
                 })}
             />
             <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
-            {errors && errors.name && (
-                <div className="text-error caption">{errors.name.message}</div>
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
             )}
         </div>
     );

package/src/components/FormFields/PhoneField.tsx

@@ -11,13 +11,14 @@ type Props = {
     errorReqMsg?: string;
     errorInvalidPhoneMsg?: string;
     errors?: {
-        phoneNumber?: {
+        [key: string]: {
             message?: string;
         };
     };
 };
 
 const PhoneFiled: FC<Props> = ({
+    name = 'phoneNumber',
     required = false,
     readOnly = false,
     label = 'Phone number',
@@ -36,7 +37,7 @@ const PhoneFiled: FC<Props> = ({
                 placeholder=" "
                 readOnly={readOnly}
                 type="tel"
-                {...register('phoneNumber', {
+                {...register(name, {
                     required: required ? errorReqMsg : false,
                     pattern: {
                         value: /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]{6,14}$/g,
@@ -47,10 +48,8 @@ const PhoneFiled: FC<Props> = ({
             <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
-            {errors && errors.phoneNumber && (
-                <div className="text-error caption">
-                    {errors.phoneNumber.message}
-                </div>
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
             )}
         </div>
     );

package/src/components/FormFields/ToggleFiled.tsx

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { uuidv4 } from '../../utils/helper';
+
+type Props = {
+    name: string;
+    required?: boolean;
+    readOnly?: boolean;
+    label?: string;
+    errorReqMsg?: string;
+    errors?: {
+        [key: string]: {
+            message?: string;
+        };
+    };
+};
+
+const ToggleField: FC<Props> = ({
+    name,
+    required = false,
+    readOnly = false,
+    label = '',
+    errorReqMsg = 'This field is required!',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    const id = uuidv4();
+    return (
+        <div className="field-wrapper">
+            <div className="d-flex align-center flex-wrap">
+                <label className="sdk-on-off-label" htmlFor={id}>
+                    {label} {required && <span className="text-error">*</span>}
+                </label>
+                <label
+                    className="sdk-on-off"
+                    data-testid={`sdk-${name}-field-id`}
+                >
+                    <input
+                        id={id}
+                        type="checkbox"
+                        readOnly={readOnly}
+                        className={`${readOnly ? 'read-only' : ''}`}
+                        {...register(name, {
+                            required: required ? errorReqMsg : false,
+                        })}
+                    />
+                    <span className="slider round"></span>
+                </label>
+            </div>
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
+            )}
+        </div>
+    );
+};
+
+export default ToggleField;

package/src/components/OrderForm/OrderForm.tsx

@@ -7,6 +7,7 @@ import { PaymentMethodEnum } from '../../enums/general';
 import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../../constants/index';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
+import ToggleField from '../FormFields/ToggleFiled';
 import formFieldsMapper from '../FormFields/FormFieldsMapper';
 import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 import { OrderFormInputsType, OrderInfoType } from '../../types/order';
@@ -15,7 +16,12 @@ import {
     OrderFormFiledType,
     ErrorsMsg,
 } from '../../types/general';
-import { prepareAgreementModel } from '../../utils/order.helper';
+import {
+    orderInvoiceContactFields,
+    prepareAgreementModel,
+    prepareContactModel,
+    prepareInvoiceModel,
+} from '../../utils/order.helper';
 import {
     prepareErrorMessage,
     prepareErrorsArrayMessage,
@@ -42,9 +48,15 @@ type Props = {
     errorReqMsg?: string;
     errorInvalidEmailMsg?: string;
     errorInvalidPhoneMsg?: string;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFiledType[];
+    };
 };
 
 const initialData = {
+    invoiceAddressSelection: false,
     name: '',
     email: '',
     phoneNumber: '',
@@ -53,6 +65,7 @@ const initialData = {
     address: '',
     zip: '',
     paymentMethod: PAYMENT_METHOD_DEFAULT,
+    orderReference: '',
 };
 
 const OrderForm: FC<Props> = ({
@@ -69,6 +82,7 @@ const OrderForm: FC<Props> = ({
     language,
     merchantAgreementUrl,
     paymentMethods = [],
+    invoiceAddressSelection,
     buttonText = 'Start',
     paymentMethodLabel = 'Select Payment Method',
     errorReqMsg = '',
@@ -79,24 +93,32 @@ const OrderForm: FC<Props> = ({
     const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
     const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
-        paymentMethodsOptions?.[PAYMENT_METHOD_DEFAULT]?.orderFormFields ??
-            DEFAULT_ORDER_FORM_FIELDS
+        paymentMethodsOptions?.[
+            defaultValues?.paymentMethod || PAYMENT_METHOD_DEFAULT
+        ]?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS
     );
 
     const methods = useForm<OrderFormInputsType>({
         defaultValues: {
             ...initialData,
             ...(defaultValues ?? {}),
+            paymentMethod:
+                defaultValues?.paymentMethod || PAYMENT_METHOD_DEFAULT,
         },
     });
+    const invoiceOrderFields =
+        invoiceAddressSelection?.fields || orderInvoiceContactFields;
 
     const {
         register,
         handleSubmit,
         setValue,
+        watch,
         formState: { errors },
     } = methods;
 
+    const invoiceAddressToggle = watch('invoiceAddressSelection');
+
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
         data
     ): Promise<void> => {
@@ -106,35 +128,10 @@ const OrderForm: FC<Props> = ({
         setLoading(true);
         try {
             let id: string | undefined = subscriberId;
+            const contactModel = prepareContactModel({ data, orderFields });
             if (!subscriberId) {
                 const response = await createSubscriber({
-                    name: orderFields.find((i) => i.name === 'name')
-                        ? data.name?.trim() || undefined
-                        : undefined,
-                    email: orderFields.find((i) => i.name === 'email')
-                        ? data.email?.trim() || undefined
-                        : undefined,
-                    phone: orderFields.find((i) => i.name === 'phoneNumber')
-                        ? data.phoneNumber?.trim() || undefined
-                        : undefined,
-                    country: orderFields.find((i) => i.name === 'country')
-                        ? data.country?.trim() || undefined
-                        : undefined,
-                    city: orderFields.find((i) => i.name === 'city')
-                        ? data.city?.trim() || undefined
-                        : undefined,
-                    addressLines: orderFields.find((i) => i.name === 'address')
-                        ? data.address?.trim()
-                            ? data.address
-                                  ?.trim()
-                                  .replace(/\r\n/g, '\n')
-                                  .split('\n')
-                                  .filter((line) => line)
-                            : undefined
-                        : undefined,
-                    zip: orderFields.find((i) => i.name === 'zip')
-                        ? data.zip?.trim() || undefined
-                        : undefined,
+                    ...contactModel,
                 });
                 id = response.id;
 
@@ -177,6 +174,13 @@ const OrderForm: FC<Props> = ({
                         templateSubscriptionPlanId: templatePackageId,
                     },
                     paymentAgreement: { ...agreements },
+                    invoiceContact: invoiceAddressToggle
+                        ? prepareInvoiceModel({
+                              data,
+                              orderFields: invoiceOrderFields,
+                          })
+                        : undefined,
+                    orderReference: data.orderReference || undefined,
                 });
                 callback(responseOrder.terminalRedirectUrl, {
                     orderId: responseOrder.id,
@@ -275,6 +279,35 @@ 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];
+
+                            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>
+                )}
                 <Button
                     type="submit"
                     loading={loading}

package/src/enums/api.ts

@@ -1,4 +1,5 @@
 export enum HttpStatusCode {
     UNAUTHORIZED = 401,
     FORBIDDEN = 403,
+    LIMIT = 429,
 }

package/src/enums/general.ts

@@ -2,6 +2,10 @@ export enum PaymentMethodEnum {
     Vipps = 'Vipps',
     MobilePay = 'MobilePay',
     SwedbankPay = 'SwedbankPay',
+    Invoice = 'Invoice',
+    Email = 'Email',
+    EHF = 'EHF',
+    OIO = 'OIO',
 }
 
 export enum MessageEventTypeEnum {

package/src/types/api.ts

@@ -10,3 +10,15 @@ export interface ApiResponseType<T> {
     query: string;
     url: string;
 }
+
+export type CreateSubscriberRequestType = {
+    name?: string;
+    email?: string;
+    phone?: string;
+    country?: string;
+    city?: string;
+    addressLines?: string[];
+    zip?: string;
+    careOf?: string;
+    buyerReference?: string;
+};

package/src/types/general.ts

@@ -38,6 +38,11 @@ export type ConfigType = {
     paymentMethodsOptions?: PaymentMethodOptionsType;
     language?: string;
     merchantAgreementUrl?: string;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFiledType[];
+    };
     settings?: {
         successText?: string;
         failureText?: string;

package/src/types/order.ts

@@ -9,6 +9,18 @@ export type OrderFormInputsType = {
     city?: string;
     address?: string;
     zip?: string;
+    careOf?: string;
+    invoiceAddressSelection?: boolean;
+    orderReference?: string;
+    invoiceName?: string;
+    invoiceEmail?: string;
+    invoicePhoneNumber?: string;
+    invoiceCountry?: string;
+    invoiceCity?: string;
+    invoiceAddress?: string;
+    invoiceZip?: string;
+    invoiceCareOf?: string;
+    invoiceBuyerReference?: string;
 };
 
 export type VippsMobilePay = {

package/src/utils/fetcher.ts

@@ -68,6 +68,10 @@ async function fetcher<ResponseType, BodyType = void>(
                         reject({ message: 'Not Authorized user!' });
                     } else if (response.status === HttpStatusCode.FORBIDDEN) {
                         reject({ message: 'Something Wrong with permission!' });
+                    } else if (response.status === HttpStatusCode.LIMIT) {
+                        reject({
+                            message: 'System busy please try again shortly!',
+                        });
                     } else {
                         if (response.ok) {
                             response

package/src/utils/order.helper.ts

@@ -1,5 +1,7 @@
 import { MessageEventTypeEnum, PaymentMethodEnum } from '../enums/general';
-import { AgreementsType } from '../types/order';
+import { AgreementsType, OrderFormInputsType } from '../types/order';
+import { OrderFormFiledType } from '../types/general';
+import { FIELD_TYPES } from '../components/FormFields/FormFields.helper';
 
 type AgreementModelType = {
     paymentMethod: PaymentMethodEnum;
@@ -55,14 +57,167 @@ export const prepareAgreementModel = ({
         return model;
     }
 
-    return {
-        ...model,
-        vippsMobilePay: {
+    if (
+        paymentMethod === PaymentMethodEnum.Vipps ||
+        paymentMethod === PaymentMethodEnum.MobilePay
+    ) {
+        model.vippsMobilePay = {
             generateSubscriberContact,
             merchantAgreementUrl,
             accountId,
             phoneNumber,
             merchantRedirectUrl: redirectUrl || window.location.href,
-        },
+        };
+
+        return model;
+    }
+
+    return model;
+};
+
+type ContactModelType = {
+    data: OrderFormInputsType;
+    orderFields: OrderFormFiledType[];
+};
+
+export const prepareContactModel = ({
+    data,
+    orderFields,
+}: ContactModelType) => {
+    const model = {
+        name: orderFields.find((i) => i.name === 'name')
+            ? data.name?.trim() || undefined
+            : undefined,
+        email: orderFields.find((i) => i.name === 'email')
+            ? data.email?.trim() || undefined
+            : undefined,
+        phone: orderFields.find((i) => i.name === 'phoneNumber')
+            ? data.phoneNumber?.trim() || undefined
+            : undefined,
+        country: orderFields.find((i) => i.name === 'country')
+            ? data.country?.trim() || undefined
+            : undefined,
+        city: orderFields.find((i) => i.name === 'city')
+            ? data.city?.trim() || undefined
+            : undefined,
+        addressLines: orderFields.find((i) => i.name === 'address')
+            ? data.address?.trim()
+                ? data.address
+                      ?.trim()
+                      .replace(/\r\n/g, '\n')
+                      .split('\n')
+                      .filter((line) => line)
+                : undefined
+            : undefined,
+        zip: orderFields.find((i) => i.name === 'zip')
+            ? data.zip?.trim() || undefined
+            : undefined,
+        careOf: orderFields.find((i) => i.name === 'careOf')
+            ? data.careOf?.trim() || undefined
+            : undefined,
     };
+
+    return model;
 };
+
+export const prepareInvoiceModel = ({
+    data,
+    orderFields,
+}: ContactModelType) => {
+    const model = {
+        name: orderFields.find((i) => i.name === 'invoiceName')
+            ? data.invoiceName?.trim() || undefined
+            : undefined,
+        email: orderFields.find((i) => i.name === 'invoiceEmail')
+            ? data.invoiceEmail?.trim() || undefined
+            : undefined,
+        phone: orderFields.find((i) => i.name === 'invoicePhoneNumber')
+            ? data.invoicePhoneNumber?.trim() || undefined
+            : undefined,
+        country: orderFields.find((i) => i.name === 'invoiceCountry')
+            ? data.invoiceCountry?.trim() || undefined
+            : undefined,
+        city: orderFields.find((i) => i.name === 'invoiceCity')
+            ? data.invoiceCity?.trim() || undefined
+            : undefined,
+        addressLines: orderFields.find((i) => i.name === 'invoiceAddress')
+            ? data.invoiceAddress?.trim()
+                ? data.invoiceAddress
+                      ?.trim()
+                      .replace(/\r\n/g, '\n')
+                      .split('\n')
+                      .filter((line) => line)
+                : undefined
+            : undefined,
+        zip: orderFields.find((i) => i.name === 'invoiceZip')
+            ? data.invoiceZip?.trim() || undefined
+            : undefined,
+        careOf: orderFields.find((i) => i.name === 'invoiceCareOf')
+            ? data.invoiceCareOf?.trim() || undefined
+            : undefined,
+        buyerReference: orderFields.find(
+            (i) => i.name === 'invoiceBuyerReference'
+        )
+            ? data.invoiceBuyerReference?.trim() || undefined
+            : undefined,
+    };
+
+    return model;
+};
+
+export const orderInvoiceContactFields = [
+    {
+        name: FIELD_TYPES.INVOICE_NAME,
+        label: 'Name',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_EMAIL,
+        label: 'Email',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_PHONE,
+        label: 'Phone',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_COUNTRY,
+        label: 'Country',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_CITY,
+        label: 'City',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_ADDRESS,
+        label: 'Address',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_ZIP,
+        label: 'Zip',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_CARE_OF,
+        label: 'Contact Person',
+        required: false,
+        readOnly: false,
+    },
+    {
+        name: FIELD_TYPES.INVOICE_BUYER_REFERENCE,
+        label: 'Buyer Reference',
+        required: false,
+        readOnly: false,
+    },
+];