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

package/lib/script.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha1b",
+    "version": "0.0.1-alpha1d",
     "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;