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

package/.release-it.json

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

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha1b",
+    "version": "0.0.1-alpha1e",
     "scripts": {
-        "build": "rimraf dist && webpack --env mode=production"
+        "build": "rimraf lib && webpack --env mode=production"
     },
     "eslintConfig": {
         "extends": [
@@ -13,8 +13,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.53.0",
-        "rimraf": "^6.0.1"
+        "react-hook-form": "^7.53.0"
     },
     "devDependencies": {
         "@babel/core": "^7.24.3",
@@ -25,6 +24,7 @@
         "@types/react-dom": "^18.0.6",
         "babel-loader": "^8.3.0",
         "css-loader": "^7.1.2",
+        "copy-webpack-plugin": "^12.0.2",
         "dotenv-webpack": "^8.1.0",
         "mini-css-extract-plugin": "^2.9.1",
         "sass": "^1.79.2",
@@ -33,7 +33,8 @@
         "ts-loader": "^9.5.1",
         "typescript": "^5.6.2",
         "webpack": "^5.95.0",
-        "webpack-cli": "^5.1.4"
+        "webpack-cli": "^5.1.4",
+        "rimraf": "^6.0.1"
     },
     "publishConfig": {
         "access": "restricted"

package/src/App.scss

@@ -1,5 +1,5 @@
-@import 'Assets/styles/variables.scss';
-@import 'Assets/styles/general.scss';
+@import './assets/styles/variables.scss';
+@import './assets/styles/general.scss';
 
 .sdk-order-container {
 

package/src/App.tsx

@@ -1,15 +1,15 @@
 import { FC, useEffect, useState } from 'react';
 
-import { MessageEventTypeEnum, PaymentMethodEnum } from 'Enums/general';
-import useMessageEvent from 'Hooks/useMessageEvent';
-import OrderForm from 'Component/OrderForm/OrderForm';
-import Loader from 'Component/Loader/Loader';
-import MainIframe from 'Component/MainIframe/MainIframe';
-import Alert from 'Component/Alert/Alert';
-import { ConfigType } from 'Types/general';
-import { CompleteOrderParamsType, OrderInfoType } from 'Types/order';
-import { orderComplete } from 'API/OrdersApi';
-import { prepareErrorMessage } from 'Utils/helper';
+import { MessageEventTypeEnum, PaymentMethodEnum } from './enums/general';
+import useMessageEvent from './hooks/useMessageEvent';
+import OrderForm from './components/OrderForm/OrderForm';
+import Loader from './components/Loader/Loader';
+import MainIframe from './components/MainIframe/MainIframe';
+import Alert from './components/Alert/Alert';
+import { ConfigType, ErrorsMsg } from './types/general';
+import { CompleteOrderParamsType, OrderInfoType } from './types/order';
+import { orderComplete, orderDelete } from './api/OrdersApi';
+import { prepareErrorMessage, prepareErrorsArrayMessage } from './utils/helper';
 
 import ErrorBoundary from './ErrorBoundary';
 
@@ -18,6 +18,7 @@ import './App.scss';
 const App: FC<ConfigType> = ({
     moduleTitle,
     apiKey,
+    apiUrl,
     templatePackageId,
     subscriberId,
     userId,
@@ -42,6 +43,7 @@ const App: FC<ConfigType> = ({
     const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
     const [isFailed, setIsFailed] = useState<boolean>(false);
     const [failedMsg, setFailedMsg] = useState<string>('');
+    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderInfo, setOrderInfo] = useState<OrderInfoType | null>(null);
 
     useEffect(() => {
@@ -50,6 +52,12 @@ const App: FC<ConfigType> = ({
         }
     }, [apiKey]);
 
+    useEffect(() => {
+        if (apiUrl) {
+            sessionStorage.setItem('sdk_api_url', apiUrl);
+        }
+    }, [apiUrl]);
+
     const messageCallback = async (
         data: CompleteOrderParamsType
     ): Promise<void> => {
@@ -57,6 +65,8 @@ const App: FC<ConfigType> = ({
         setIframeSrc(null);
         setShowOrderForm(false);
         setIsFailed(false);
+        setFailedMsg('');
+        setErrorsMsg([]);
         try {
             await orderComplete(orderId || data.orderId || '');
             setIsConfirmed(true);
@@ -73,23 +83,83 @@ const App: FC<ConfigType> = ({
             }
         } catch (error) {
             console.log(error);
+            if (
+                (error as { status: number }).status === 409 &&
+                (data.paymentMethod === PaymentMethodEnum.Vipps ||
+                    data.paymentMethod === PaymentMethodEnum.MobilePay)
+            ) {
+                handleOrderDelete(orderId || data.orderId);
+                return;
+            }
+
             setFailedMsg(
                 prepareErrorMessage(error as Error, settings?.failureText)
             );
+            setErrorsMsg(
+                prepareErrorsArrayMessage(
+                    (
+                        error as {
+                            errors: ErrorsMsg;
+                        }
+                    )?.errors
+                )
+            );
             setIsFailed(true);
             setLoading(false);
             setShowOrderForm(true);
         }
     };
 
-    const handleMessageEvent = (type: MessageEventTypeEnum) => {
+    const handleOrderDelete = async (id: string) => {
+        try {
+            await orderDelete(id);
+            if (window === top) {
+                top.postMessage(
+                    {
+                        type: MessageEventTypeEnum.ORDER_FLOW_CANCEL,
+                        isCanceled: true,
+                        orderInfo: orderInfo,
+                    },
+                    top?.location?.origin || '*'
+                );
+            }
+            setIsFailed(false);
+        } catch (error) {
+            console.log(error);
+            setFailedMsg(
+                prepareErrorMessage(error as Error, settings?.failureText)
+            );
+            setErrorsMsg(
+                prepareErrorsArrayMessage(
+                    (
+                        error as {
+                            errors: ErrorsMsg;
+                        }
+                    )?.errors
+                )
+            );
+            setIsFailed(true);
+        }
+
+        setLoading(false);
+        setShowOrderForm(true);
+    };
+
+    const handleMessageEvent = async (type: MessageEventTypeEnum) => {
         if (type === MessageEventTypeEnum.CANCEL) {
+            try {
+                if (orderId) {
+                    await handleOrderDelete(orderId);
+                }
+            } catch (error) {
+                console.log(error);
+            }
+
             setLoading(false);
             setOrderId(null);
             setOrderInfo(null);
             setIframeSrc(null);
             setIsConfirmed(false);
-            setIsFailed(false);
             setShowOrderForm(true);
         }
     };
@@ -106,6 +176,16 @@ const App: FC<ConfigType> = ({
         setIsFailed(false);
         setOrderId(data?.orderId || null);
         setOrderInfo(data || null);
+        if (window === top) {
+            top.postMessage(
+                {
+                    type: MessageEventTypeEnum.ORDER_UPDATE_INFO,
+                    isUpdate: true,
+                    orderInfo: data || null,
+                },
+                top?.location?.origin || '*'
+            );
+        }
         if (url) {
             if (
                 showIframe &&
@@ -155,12 +235,8 @@ const App: FC<ConfigType> = ({
                         errorInvalidEmailMsg={settings?.errorInvalidEmailMsg}
                         errorInvalidPhoneMsg={settings?.errorInvalidPhoneMsg}
                         defaultValues={settings?.orderDefaultValues}
-                        redirectUrl={
-                            showIframe
-                                ? window.location.href.split('?')[0]
-                                : redirectUrl ||
-                                  window.location.href.split('?')[0]
-                        }
+                        redirectUrl={redirectUrl}
+                        showIframe={showIframe}
                         paymentMethodsOptions={paymentMethodsOptions}
                         language={language}
                         merchantAgreementUrl={merchantAgreementUrl}
@@ -176,6 +252,9 @@ const App: FC<ConfigType> = ({
                 )}
 
                 {isFailed && <Alert className="mt-2" msg={failedMsg} />}
+                {isFailed &&
+                    errorsMsg?.length > 0 &&
+                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
             </div>
         </ErrorBoundary>
     );

package/src/api/OrdersApi.ts

@@ -1,5 +1,5 @@
-import { AgreementsType } from 'Types/order';
-import fetcher from 'Utils/fetcher';
+import { AgreementsType } from '../types/order';
+import fetcher from '../utils/fetcher';
 
 type RequestOrderStartType = {
     subscriberId?: string;
@@ -42,3 +42,16 @@ export const orderComplete = (id: string): Promise<OrderResponseType> =>
         },
         body: null,
     }) as Promise<OrderResponseType>;
+
+export const orderDelete = (id: string): Promise<OrderResponseType> =>
+    fetcher<OrderResponseType, null>({
+        method: 'DELETE',
+        url: `/order/${id}`,
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body: null,
+    }) as Promise<OrderResponseType>;

package/src/api/SubscribeApi.ts

@@ -1,9 +1,13 @@
-import fetcher from 'Utils/fetcher';
+import fetcher from '../utils/fetcher';
 
 type CreateSubscriberRequestType = {
     name?: string;
     email?: string;
     phone?: string;
+    country?: string;
+    city?: string;
+    addressLines?: string[];
+    zip?: string;
 };
 
 type CreateSubscriberResponseType = {

package/src/assets/styles/forms.scss

@@ -1,4 +1,4 @@
-@import 'Assets/styles/variables.scss';
+@import './variables.scss';
 
 .field-label {
     display      : block;

package/src/assets/styles/general.scss

@@ -1,5 +1,5 @@
-@import 'Assets/styles/variables.scss';
-@import 'Assets/styles/forms.scss';
+@import './variables.scss';
+@import './forms.scss';
 
 .d-flex {
     display: flex;

package/src/components/Alert/alert.scss

@@ -1,4 +1,4 @@
-@import 'Assets/styles/variables.scss';
+@import '../../assets/styles/variables.scss';
 
 .sdk-alert {
     position     : relative;

package/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import { FC, MouseEvent } from 'react';
 
-import Loader from 'Component/Loader/Loader';
+import Loader from '../Loader/Loader';
 
 import './button.scss';
 

package/src/components/Button/button.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@import 'Assets/styles/variables.scss';
+@import '../../assets/styles/variables.scss';
 
 .sdk-btn {
     appearance         : button;

package/src/components/FormFields/AddressField.tsx

@@ -0,0 +1,52 @@
+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?: {
+        address?: {
+            message?: string;
+        };
+    };
+};
+
+const AddressField: FC<Props> = ({
+    required = false,
+    readOnly = false,
+    label = 'Address',
+    errorReqMsg = 'This field is required!',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    const id = uuidv4();
+    return (
+        <div className="field-wrapper" data-testid="sdk-address-field-id">
+            <textarea
+                id={id}
+                autoComplete="address"
+                placeholder=" "
+                readOnly={readOnly}
+                className={`input-control ${readOnly ? 'read-only' : ''}`}
+                {...register('address', {
+                    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>
+            )}
+        </div>
+    );
+};
+
+export default AddressField;

package/src/components/FormFields/EmailField.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { uuidv4 } from '../../utils/helper';
+
 type Props = {
     name: string;
     required: boolean;
@@ -24,9 +26,11 @@ const EmailField: FC<Props> = ({
     errors,
 }) => {
     const { register } = useFormContext();
+    const id = uuidv4();
     return (
         <div className="field-wrapper" data-testid="sdk-email-field-id">
             <input
+                id={id}
                 autoComplete="email"
                 placeholder=" "
                 className={`input-control ${readOnly ? 'read-only' : ''}`}
@@ -40,7 +44,7 @@ const EmailField: FC<Props> = ({
                     },
                 })}
             />
-            <label className="label-control">
+            <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
             {errors && errors.email && (

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

@@ -1,9 +1,13 @@
-import { OrderFormFiledType } from 'Types/general';
+import { OrderFormFiledType } from '../../types/general';
 
 export const FIELD_TYPES = {
     PHONE: 'phoneNumber',
     EMAIL: 'email',
     NAME: 'name',
+    COUNTRY: 'country',
+    CITY: 'city',
+    ADDRESS: 'address',
+    ZIP: 'zip',
 };
 
 export const DEFAULT_ORDER_FORM_FIELDS: OrderFormFiledType[] = [

package/src/components/FormFields/FormFieldsMapper.ts

@@ -1,6 +1,8 @@
-import EmailField from 'Component/FormFields/EmailField';
-import PhoneField from 'Component/FormFields/PhoneField';
-import NameField from 'Component/FormFields/NameField';
+import EmailField from './EmailField';
+import PhoneField from './PhoneField';
+import NameField from './NameField';
+import AddressField from './AddressField';
+import InputField from './InputField';
 
 import { FIELD_TYPES } from './FormFields.helper';
 
@@ -8,6 +10,10 @@ const formFieldsMapper = {
     [FIELD_TYPES.PHONE]: PhoneField,
     [FIELD_TYPES.NAME]: NameField,
     [FIELD_TYPES.EMAIL]: EmailField,
+    [FIELD_TYPES.ADDRESS]: AddressField,
+    [FIELD_TYPES.COUNTRY]: InputField,
+    [FIELD_TYPES.CITY]: InputField,
+    [FIELD_TYPES.ZIP]: InputField,
 };
 
 export default formFieldsMapper;

package/src/components/FormFields/InputField.tsx

@@ -0,0 +1,51 @@
+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 NameField: 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" data-testid={`sdk-${name}-field-id`}>
+            <input
+                id={id}
+                autoComplete={name}
+                placeholder=" "
+                readOnly={readOnly}
+                className={`input-control ${readOnly ? 'read-only' : ''}`}
+                {...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>
+            )}
+        </div>
+    );
+};
+
+export default NameField;

package/src/components/FormFields/NameField.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { uuidv4 } from '../../utils/helper';
+
 type Props = {
     name: string;
     required: boolean;
@@ -22,9 +24,11 @@ const NameField: FC<Props> = ({
     errors,
 }) => {
     const { register } = useFormContext();
+    const id = uuidv4();
     return (
         <div className="field-wrapper" data-testid="sdk-name-field-id">
             <input
+                id={id}
                 autoComplete="name"
                 placeholder=" "
                 readOnly={readOnly}
@@ -33,7 +37,7 @@ const NameField: FC<Props> = ({
                     required: required ? errorReqMsg : false,
                 })}
             />
-            <label className="label-control">
+            <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
             {errors && errors.name && (

package/src/components/FormFields/PhoneField.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 
+import { uuidv4 } from '../../utils/helper';
+
 type Props = {
     name: string;
     required: boolean;
@@ -24,9 +26,11 @@ const PhoneFiled: FC<Props> = ({
     errors,
 }) => {
     const { register } = useFormContext();
+    const id = uuidv4();
     return (
         <div className="field-wrapper" data-testid="sdk-phone-field-id">
             <input
+                id={id}
                 autoComplete="tel"
                 className={`input-control ${readOnly ? 'read-only' : ''}`}
                 placeholder=" "
@@ -40,7 +44,7 @@ const PhoneFiled: FC<Props> = ({
                     },
                 })}
             />
-            <label className="label-control">
+            <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}
             </label>
             {errors && errors.phoneNumber && (

package/src/components/Loader/loader.scss

@@ -1,4 +1,4 @@
-@import 'Assets/styles/variables.scss';
+@import '../../assets/styles/variables.scss';
 
 .sdk-loader {
     border       : 2px solid $light-gray;

package/src/components/MainIframe/MainIframe.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 
-import useIframe from 'Hooks/useIframe';
+import useIframe from '../../hooks/useIframe';
 
 type Props = {
     iframeSrc: string | null;

package/src/components/OrderForm/OrderForm.tsx

@@ -1,18 +1,25 @@
 import { FC, ChangeEvent, Suspense, useState } 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 Alert from 'Component/Alert/Alert';
-import Button from 'Component/Button/Button';
-import formFieldsMapper from 'Component/FormFields/FormFieldsMapper';
-import { DEFAULT_ORDER_FORM_FIELDS } from 'Component/FormFields/FormFields.helper';
-import { OrderFormInputsType, OrderInfoType } from 'Types/order';
-import { PaymentMethodOptionsType, OrderFormFiledType } from 'Types/general';
-import { prepareAgreementModel } from 'Utils/order.helper';
-import { prepareErrorMessage } from 'Utils/helper';
+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 Alert from '../Alert/Alert';
+import Button from '../Button/Button';
+import formFieldsMapper from '../FormFields/FormFieldsMapper';
+import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
+import { OrderFormInputsType, OrderInfoType } from '../../types/order';
+import {
+    PaymentMethodOptionsType,
+    OrderFormFiledType,
+    ErrorsMsg,
+} from '../../types/general';
+import { prepareAgreementModel } from '../../utils/order.helper';
+import {
+    prepareErrorMessage,
+    prepareErrorsArrayMessage,
+} from '../../utils/helper';
 
 import './orderForm.scss';
 
@@ -23,7 +30,8 @@ type Props = {
     userId?: string;
     identityProviderId?: string;
     organizationId: string;
-    redirectUrl: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
     language: string;
     merchantAgreementUrl: string;
     paymentMethodsOptions?: PaymentMethodOptionsType;
@@ -40,6 +48,10 @@ const initialData = {
     name: '',
     email: '',
     phoneNumber: '',
+    country: '',
+    city: '',
+    address: '',
+    zip: '',
     paymentMethod: PAYMENT_METHOD_DEFAULT,
 };
 
@@ -51,6 +63,7 @@ const OrderForm: FC<Props> = ({
     identityProviderId,
     organizationId,
     redirectUrl,
+    showIframe,
     paymentMethodsOptions,
     defaultValues,
     language,
@@ -64,6 +77,7 @@ const OrderForm: FC<Props> = ({
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
+    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
         paymentMethodsOptions?.[PAYMENT_METHOD_DEFAULT]?.orderFormFields ??
             DEFAULT_ORDER_FORM_FIELDS
@@ -87,15 +101,40 @@ const OrderForm: FC<Props> = ({
         data
     ): Promise<void> => {
         setApiErrorMsg('');
+        setErrorsMsg([]);
 
         setLoading(true);
         try {
             let id: string | undefined = subscriberId;
             if (!subscriberId) {
                 const response = await createSubscriber({
-                    name: data.name,
-                    email: data.email,
-                    phone: data.phoneNumber,
+                    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,
                 });
                 id = response.id;
 
@@ -114,7 +153,12 @@ const OrderForm: FC<Props> = ({
                 const agreements = prepareAgreementModel({
                     paymentMethod,
                     redirectUrl,
-                    data,
+                    showIframe,
+                    phoneNumber: orderFields.find(
+                        (i) => i.name === 'phoneNumber'
+                    )
+                        ? data.phoneNumber?.trim() || undefined
+                        : undefined,
                     language,
                     merchantAgreementUrl,
                     generateSubscriberContact:
@@ -143,9 +187,19 @@ const OrderForm: FC<Props> = ({
             }
             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);
@@ -227,6 +281,8 @@ const OrderForm: FC<Props> = ({
                     buttonText={buttonText}
                 />
                 <Alert className="mt-2" msg={apiErrorMsg} />
+                {errorsMsg?.length > 0 &&
+                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
             </form>
         </FormProvider>
     );

package/src/components/OrderForm/orderForm.scss

@@ -1,4 +1,4 @@
-@import 'Assets/styles/variables.scss';
+@import '../../assets/styles/variables.scss';
 
 .sdk-order-form {
     max-width     : 320px;

package/src/constants/index.ts

@@ -1,4 +1,4 @@
-import { PaymentMethodEnum } from 'Enums/general';
+import { PaymentMethodEnum } from '../enums/general';
 
 export const BASE_API = process.env.API_URL ?? '/';
 

package/src/enums/general.ts

@@ -6,6 +6,8 @@ export enum PaymentMethodEnum {
 
 export enum MessageEventTypeEnum {
     ORDER_FLOW_COMPLETE = 'orderFlowComplete',
+    ORDER_FLOW_CANCEL = 'orderFlowCancel',
+    ORDER_UPDATE_INFO = 'orderUpdateInfo',
     VIPPS_COMPLETE = 'completeOrder',
     CANCEL = 'cancel',
     COMPLETE = 'complete',

package/src/hooks/useMessageEvent.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useCallback } from 'react';
 
-import { MessageEventTypeEnum } from 'Enums/general';
-import { CompleteOrderParamsType, OrderInfoType } from 'Types/order';
+import { MessageEventTypeEnum, PaymentMethodEnum } from '../enums/general';
+import { CompleteOrderParamsType, OrderInfoType } from '../types/order';
 import useQueryParams from './useQueryParams';
 
 const useMessageEvent = (
@@ -76,6 +76,7 @@ const useMessageEvent = (
                 orderId: queryParams.get('orderId') || '',
                 agreementId: queryParams.get('agreementId') || '',
                 orderInfo: orderInfo || null,
+                paymentMethod: PaymentMethodEnum.Vipps,
             });
         }
     }, [

package/src/index.tsx

@@ -1,21 +1,22 @@
 import { createRoot, Root } from 'react-dom/client';
 import { createElement } from 'react';
 
-import { ConfigType } from 'Types/general';
-import { createSubscriber, mapSubscriberToUser } from 'API/SubscribeApi';
+import { ConfigType } from './types/general';
+import { createSubscriber, mapSubscriberToUser } from './api/SubscribeApi';
 import App from './App';
 
-let root: Root;
-
 export const orderComponent = {
+    root: null as Root | null,
     init: function (config: ConfigType) {
         const domNode = document.getElementById(config.domElementId);
-        root = createRoot(domNode || document.createElement('div'));
+        orderComponent.root = createRoot(
+            domNode || document.createElement('div')
+        );
         const reactElement = createElement(App, config);
-        root.render(reactElement);
+        orderComponent.root.render(reactElement);
     },
     remove: function () {
-        (root as Root)?.unmount();
+        (orderComponent.root as Root)?.unmount();
     },
     createSubscriber,
     mapSubscriberToUser,

package/src/types/api.ts

@@ -1,4 +1,4 @@
-import { HttpStatusCode } from 'Enums/api';
+import { HttpStatusCode } from '../enums/api';
 
 export interface ApiResponseType<T> {
     status: HttpStatusCode;

package/src/types/general.ts

@@ -1,4 +1,4 @@
-import { PaymentMethodEnum } from 'Enums/general';
+import { PaymentMethodEnum } from '../enums/general';
 import { OrderFormInputsType } from './order';
 
 declare global {
@@ -31,6 +31,7 @@ export type ConfigType = {
     identityProviderId: string;
     organizationId: string;
     apiKey?: string;
+    apiUrl?: string;
     redirectUrl?: string;
     showIframe?: boolean;
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
@@ -48,3 +49,7 @@ export type ConfigType = {
         errorInvalidPhoneMsg?: string;
     };
 };
+
+export type ErrorsMsg = {
+    [key: string]: string[];
+};

package/src/types/order.ts

@@ -1,10 +1,14 @@
-import { PaymentMethodEnum } from 'Enums/general';
+import { PaymentMethodEnum } from '../enums/general';
 
 export type OrderFormInputsType = {
     name?: string;
     email?: string;
     phoneNumber?: string;
     paymentMethod?: PaymentMethodEnum;
+    country?: string;
+    city?: string;
+    address?: string;
+    zip?: string;
 };
 
 export type VippsMobilePay = {
@@ -38,4 +42,5 @@ export type CompleteOrderParamsType = {
     orderId: string;
     agreementId: string;
     orderInfo: OrderInfoType | null;
+    paymentMethod?: PaymentMethodEnum | null;
 };

package/src/utils/fetcher.ts

@@ -1,6 +1,6 @@
-import { HttpStatusCode } from 'Enums/api';
-import { ApiResponseType } from 'Types/api';
-import { BASE_API } from 'Constants/index';
+import { HttpStatusCode } from '../enums/api';
+import { ApiResponseType } from '../types/api';
+import { BASE_API } from '../constants/index';
 
 export type Method =
     | 'GET'
@@ -42,7 +42,8 @@ async function fetcher<ResponseType, BodyType = void>(
 ): Promise<ApiResponseType<ResponseType> | ResponseType> {
     const { url, method, headers, body, params } = createHeader(options);
 
-    const endpoint = new URL(`${BASE_API}${url}`);
+    const apiUrl = sessionStorage.getItem('sdk_api_url');
+    const endpoint = new URL(`${apiUrl || BASE_API}${url}`);
 
     if (params) {
         Object.entries(params).forEach(([key, value]) => {
@@ -68,12 +69,15 @@ async function fetcher<ResponseType, BodyType = void>(
                     } else if (response.status === HttpStatusCode.FORBIDDEN) {
                         reject({ message: 'Something Wrong with permission!' });
                     } else {
-                        const data = await response?.json();
                         if (response.ok) {
-                            resolve(data);
+                            response
+                                .json()
+                                .then((data) => resolve(data))
+                                .catch(() => resolve(null as ResponseType));
                         } else {
+                            const data = await response?.json();
                             const message =
-                                data.message || data.details || data.title;
+                                data.details || data.message || data.title;
                             reject({ ...data, message });
                         }
                     }

package/src/utils/helper.ts

@@ -1,4 +1,5 @@
-import { WRONG_MSG } from 'Constants/index';
+import { WRONG_MSG } from '../constants/index';
+import { ErrorsMsg } from '../types/general';
 
 export const prepareErrorMessage = (error: Error, defaultMsg?: string) => {
     if (typeof error === 'string') {
@@ -16,3 +17,30 @@ export const prepareErrorMessage = (error: Error, defaultMsg?: string) => {
         );
     }
 };
+
+export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null) => {
+    const msg: string[] = [];
+
+    if (errors) {
+        Object.entries(errors).forEach(([_, values]) => {
+            if (values?.length > 0) {
+                values.forEach((i) => {
+                    msg.push(i);
+                });
+            }
+        });
+    }
+
+    return msg;
+};
+
+export function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+        /[xy]/g,
+        function (c) {
+            const r = (Math.random() * 16) | 0;
+            const v = c == 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        }
+    );
+}

package/src/utils/order.helper.ts

@@ -1,10 +1,11 @@
-import { MessageEventTypeEnum, PaymentMethodEnum } from 'Enums/general';
-import { OrderFormInputsType, AgreementsType } from 'Types/order';
+import { MessageEventTypeEnum, PaymentMethodEnum } from '../enums/general';
+import { AgreementsType } from '../types/order';
 
 type AgreementModelType = {
     paymentMethod: PaymentMethodEnum;
-    redirectUrl: string;
-    data: OrderFormInputsType;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    phoneNumber?: string;
     generateSubscriberContact: boolean;
     language: string;
     merchantAgreementUrl: string;
@@ -14,7 +15,8 @@ type AgreementModelType = {
 export const prepareAgreementModel = ({
     paymentMethod,
     redirectUrl,
-    data,
+    showIframe,
+    phoneNumber,
     generateSubscriberContact,
     language,
     merchantAgreementUrl,
@@ -23,11 +25,29 @@ export const prepareAgreementModel = ({
     const model: AgreementsType = {
         paymentProvider: paymentMethod,
     };
+    const existUrl = new URL(window.location.href);
+    const journey = existUrl.searchParams.get('journey');
+    const url = showIframe
+        ? window.location.href.split('?')[0]
+        : redirectUrl || window.location.href;
+    const cancelUrl = new URL(url);
+    cancelUrl.searchParams.append('action', `${MessageEventTypeEnum.CANCEL}`);
+    if (journey) {
+        cancelUrl.searchParams.append('journey', journey);
+    }
+    const confirmUrl = new URL(url);
+    confirmUrl.searchParams.append(
+        'action',
+        `${MessageEventTypeEnum.COMPLETE}`
+    );
+    if (journey) {
+        confirmUrl.searchParams.append('journey', journey);
+    }
 
     if (paymentMethod === PaymentMethodEnum.SwedbankPay) {
         model.swedbankPay = {
-            cancelUrl: `${redirectUrl}?action=${MessageEventTypeEnum.CANCEL}`,
-            completeUrl: `${redirectUrl}?action=${MessageEventTypeEnum.COMPLETE}`,
+            cancelUrl: `${cancelUrl}`,
+            completeUrl: `${confirmUrl}`,
             language,
             accountId,
         };
@@ -41,8 +61,8 @@ export const prepareAgreementModel = ({
             generateSubscriberContact,
             merchantAgreementUrl,
             accountId,
-            phoneNumber: data.phoneNumber,
-            merchantRedirectUrl: redirectUrl,
+            phoneNumber,
+            merchantRedirectUrl: redirectUrl || window.location.href,
         },
     };
 };

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "downlevelIteration": true,
+        "allowJs": true,
+        "checkJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": false,
+        "noEmit": false,
+        "noImplicitAny": true,
+        "jsx": "react-jsx",
+        "baseUrl": "src",
+        "sourceMap": true,
+        "inlineSources": true,
+        "sourceRoot": "/",
+        "paths": {
+            "*": ["*"],
+            "API": ["api"],
+            "API/*": ["api/*"],
+            "Component/*": ["components/*"],
+            "Utils/*": ["utils/*"],
+            "Hooks/*": ["hooks/*"],
+            "Models/*": ["models/*"],
+            "Types/*": ["types/*"],
+            "Enums/*": ["enums/*"],
+            "Constants/*": ["constants/*"],
+            "Assets/*": ["assets/*"]
+        }
+    },
+    "include": ["src"],
+    "exclude": ["node_modules"]
+}