@infosoftas/s4-orders-js-sdk 0.0.1-alpha1

package/src/hooks/useMessageEvent.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useCallback } from 'react';
+
+import { MessageEventTypeEnum } from 'Enums/general';
+import { CompleteOrderParamsType, OrderInfoType } from 'Types/order';
+import useQueryParams from './useQueryParams';
+
+const useMessageEvent = (
+    messageCallback: (data: CompleteOrderParamsType) => Promise<void>,
+    handleMessageEvent: (type: MessageEventTypeEnum) => void,
+    showIframe: boolean,
+    orderInfo: OrderInfoType | null
+) => {
+    const queryParams = useQueryParams();
+
+    const handleMessage = useCallback(
+        async (event: MessageEvent) => {
+            // Vipps handler
+            if (event.data.type === MessageEventTypeEnum.VIPPS_COMPLETE) {
+                await messageCallback({
+                    orderId: event.data.orderId || '',
+                    agreementId: event.data.agreementId || '',
+                    orderInfo: orderInfo || null,
+                });
+            }
+
+            // SwedbankPay handler
+            if (event.data.type === MessageEventTypeEnum.COMPLETE) {
+                await messageCallback({
+                    orderId: event.data.orderId || '',
+                    agreementId: event.data.agreementId || '',
+                    orderInfo: orderInfo || null,
+                });
+            }
+            if (event.data.type === MessageEventTypeEnum.CANCEL) {
+                handleMessageEvent(event.data.type);
+            }
+        },
+        [orderInfo]
+    );
+
+    useEffect(() => {
+        window.addEventListener('message', handleMessage, false);
+
+        return () => {
+            window.removeEventListener('message', handleMessage, false);
+        };
+    }, [handleMessage]);
+
+    // Vipps
+    useEffect(() => {
+        if (
+            queryParams.get('orderId') &&
+            queryParams.get('agreementId') &&
+            top &&
+            window !== top
+        ) {
+            top?.postMessage(
+                {
+                    type: MessageEventTypeEnum.VIPPS_COMPLETE,
+                    orderId: queryParams.get('orderId'),
+                    agreementId: queryParams.get('agreementId'),
+                },
+                top?.location?.origin || '*'
+            );
+        }
+    }, [queryParams.get('orderId'), queryParams.get('agreementId')]);
+
+    //Vipps
+    useEffect(() => {
+        if (
+            queryParams.get('orderId') &&
+            queryParams.get('agreementId')
+            // !showIframe
+        ) {
+            messageCallback({
+                orderId: queryParams.get('orderId') || '',
+                agreementId: queryParams.get('agreementId') || '',
+                orderInfo: orderInfo || null,
+            });
+        }
+    }, [
+        queryParams.get('orderId'),
+        queryParams.get('agreementId'),
+        // showIframe,
+    ]);
+
+    // SwedbankPay
+    useEffect(() => {
+        if (
+            queryParams.get('action') &&
+            queryParams.get('S4OrderId') &&
+            queryParams.get('TransactionId') &&
+            top &&
+            window !== top
+        ) {
+            top?.postMessage(
+                {
+                    type: queryParams.get('action'),
+                    orderId: queryParams.get('S4OrderId'),
+                    agreementId: queryParams.get('TransactionId'),
+                },
+                top?.location?.origin || '*'
+            );
+        }
+    }, [
+        queryParams.get('S4OrderId'),
+        queryParams.get('TransactionId'),
+        queryParams.get('action'),
+    ]);
+
+    // SwedbankPay
+    useEffect(() => {
+        if (
+            queryParams.get('S4OrderId') &&
+            queryParams.get('TransactionId') &&
+            queryParams.get('action') === MessageEventTypeEnum.COMPLETE &&
+            !showIframe
+        ) {
+            messageCallback({
+                orderId: queryParams.get('S4OrderId') || '',
+                agreementId: queryParams.get('TransactionId') || '',
+                orderInfo: orderInfo || null,
+            });
+        }
+
+        if (
+            queryParams.get('action') === MessageEventTypeEnum.CANCEL &&
+            !showIframe
+        ) {
+            handleMessageEvent(
+                queryParams.get('action') as MessageEventTypeEnum
+            );
+        }
+    }, [
+        queryParams.get('action'),
+        queryParams.get('S4OrderId'),
+        queryParams.get('TransactionId'),
+        showIframe,
+    ]);
+};
+
+export default useMessageEvent;

package/src/hooks/useQueryParams.ts

@@ -0,0 +1,5 @@
+function useQueryParams(): URLSearchParams {
+    return new URLSearchParams(location.search);
+}
+
+export default useQueryParams;

package/src/index.tsx

@@ -0,0 +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 App from './App';
+
+let root: Root;
+
+export const orderComponent = {
+    init: function (config: ConfigType) {
+        const domNode = document.getElementById(config.domElementId);
+        root = createRoot(domNode || document.createElement('div'));
+        const reactElement = createElement(App, config);
+        root.render(reactElement);
+    },
+    remove: function () {
+        (root as Root)?.unmount();
+    },
+    createSubscriber,
+    mapSubscriberToUser,
+};

package/src/types/api.ts

@@ -0,0 +1,12 @@
+import { HttpStatusCode } from 'Enums/api';
+
+export interface ApiResponseType<T> {
+    status: HttpStatusCode;
+    text: string;
+    error: string;
+    code: HttpStatusCode;
+    timestamp: string;
+    data: T;
+    query: string;
+    url: string;
+}

package/src/types/general.ts

@@ -0,0 +1,50 @@
+import { PaymentMethodEnum } from 'Enums/general';
+import { OrderFormInputsType } from './order';
+
+declare global {
+    interface Window {
+        sdkOrderCallback: () => void;
+    }
+}
+
+export type OrderFormFiledType = {
+    name: string;
+    required?: boolean;
+    readOnly?: boolean;
+    label?: string;
+};
+
+export type PaymentMethodOptionsType = {
+    [key in PaymentMethodEnum]: {
+        generateSubscriberContact?: boolean;
+        accountId?: string;
+        orderFormFields: OrderFormFiledType[];
+    };
+};
+
+export type ConfigType = {
+    domElementId: string;
+    moduleTitle?: string;
+    templatePackageId: string;
+    subscriberId: string;
+    userId: string;
+    identityProviderId: string;
+    organizationId: string;
+    apiKey?: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    language?: string;
+    merchantAgreementUrl?: string;
+    settings?: {
+        successText?: string;
+        failureText?: string;
+        buttonText?: string;
+        orderDefaultValues?: OrderFormInputsType;
+        paymentMethodLabel?: string;
+        errorReqMsg?: string;
+        errorInvalidEmailMsg?: string;
+        errorInvalidPhoneMsg?: string;
+    };
+};

package/src/types/order.ts

@@ -0,0 +1,41 @@
+import { PaymentMethodEnum } from 'Enums/general';
+
+export type OrderFormInputsType = {
+    name?: string;
+    email?: string;
+    phoneNumber?: string;
+    paymentMethod?: PaymentMethodEnum;
+};
+
+export type VippsMobilePay = {
+    phoneNumber?: string;
+    merchantRedirectUrl: string;
+    merchantAgreementUrl: string;
+    generateSubscriberContact?: boolean;
+    accountId?: string;
+};
+
+export type SwedbankPay = {
+    accountId?: string;
+    completeUrl: string;
+    cancelUrl: string;
+    language?: string;
+};
+
+export type AgreementsType = {
+    paymentProvider: PaymentMethodEnum;
+    vippsMobilePay?: VippsMobilePay;
+    swedbankPay?: SwedbankPay;
+};
+
+export type OrderInfoType = {
+    subscriberId: string;
+    paymentMethod: string;
+    orderId: string;
+};
+
+export type CompleteOrderParamsType = {
+    orderId: string;
+    agreementId: string;
+    orderInfo: OrderInfoType | null;
+};

package/src/utils/fetcher.ts

@@ -0,0 +1,89 @@
+import { HttpStatusCode } from 'Enums/api';
+import { ApiResponseType } from 'Types/api';
+import { BASE_API } from 'Constants/index';
+
+export type Method =
+    | 'GET'
+    | 'POST'
+    | 'PUT'
+    | 'DELETE'
+    | 'HEAD'
+    | 'OPTIONS'
+    | 'PATCH';
+
+type Fetcher<T> = {
+    url: string;
+    params?: Record<string, string | string[]>;
+    method?: Method;
+    headers?: HeadersInit;
+    body?: T;
+};
+
+function createHeader<T>(options: Fetcher<T>): Fetcher<T> {
+    const accessToken = localStorage.getItem('authTokenKey') || '';
+
+    const headers = new Headers({
+        accept: 'application/json',
+        ...(accessToken && {
+            Authorization: `Bearer ${accessToken}`,
+        }),
+        ...options.headers,
+    });
+
+    if (!(options.body instanceof FormData)) {
+        headers.append('Content-Type', 'application/json');
+    }
+
+    return { method: 'GET', ...options, headers };
+}
+
+async function fetcher<ResponseType, BodyType = void>(
+    options: Fetcher<BodyType>
+): Promise<ApiResponseType<ResponseType> | ResponseType> {
+    const { url, method, headers, body, params } = createHeader(options);
+
+    const endpoint = new URL(`${BASE_API}${url}`);
+
+    if (params) {
+        Object.entries(params).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach((v) => endpoint.searchParams.append(key, v));
+                return;
+            }
+            endpoint.searchParams.append(key, value);
+        });
+    }
+
+    return new Promise<ApiResponseType<ResponseType> | ResponseType>(
+        (resolve, reject) => {
+            return fetch(endpoint.toString(), {
+                method,
+                headers,
+                body: body instanceof FormData ? body : JSON.stringify(body),
+            })
+                .then(async (response) => {
+                    if (response.status === HttpStatusCode.UNAUTHORIZED) {
+                        localStorage.removeItem('authTokenKey');
+                        reject({ message: 'Not Authorized user!' });
+                    } else if (response.status === HttpStatusCode.FORBIDDEN) {
+                        reject({ message: 'Something Wrong with permission!' });
+                    } else {
+                        const data = await response?.json();
+                        if (response.ok) {
+                            resolve(data);
+                        } else {
+                            const message =
+                                data.message || data.details || data.title;
+                            reject({ ...data, message });
+                        }
+                    }
+                })
+                .catch((error) => {
+                    console.log(error, 'error');
+                    reject(error?.response);
+                });
+        }
+    );
+}
+
+export default fetcher;

package/src/utils/helper.ts

@@ -0,0 +1,18 @@
+import { WRONG_MSG } from 'Constants/index';
+
+export const prepareErrorMessage = (error: Error, defaultMsg?: string) => {
+    if (typeof error === 'string') {
+        try {
+            const parsedError = JSON.parse(error);
+            return (parsedError as { message: string }).message;
+        } catch (e) {
+            return error;
+        }
+    } else {
+        return (
+            ((error as { message: string })?.message as string) ||
+            defaultMsg ||
+            WRONG_MSG
+        );
+    }
+};

package/src/utils/order.helper.ts

@@ -0,0 +1,48 @@
+import { MessageEventTypeEnum, PaymentMethodEnum } from 'Enums/general';
+import { OrderFormInputsType, AgreementsType } from 'Types/order';
+
+type AgreementModelType = {
+    paymentMethod: PaymentMethodEnum;
+    redirectUrl: string;
+    data: OrderFormInputsType;
+    generateSubscriberContact: boolean;
+    language: string;
+    merchantAgreementUrl: string;
+    accountId?: string;
+};
+
+export const prepareAgreementModel = ({
+    paymentMethod,
+    redirectUrl,
+    data,
+    generateSubscriberContact,
+    language,
+    merchantAgreementUrl,
+    accountId,
+}: AgreementModelType): AgreementsType => {
+    const model: AgreementsType = {
+        paymentProvider: paymentMethod,
+    };
+
+    if (paymentMethod === PaymentMethodEnum.SwedbankPay) {
+        model.swedbankPay = {
+            cancelUrl: `${redirectUrl}?action=${MessageEventTypeEnum.CANCEL}`,
+            completeUrl: `${redirectUrl}?action=${MessageEventTypeEnum.COMPLETE}`,
+            language,
+            accountId,
+        };
+
+        return model;
+    }
+
+    return {
+        ...model,
+        vippsMobilePay: {
+            generateSubscriberContact,
+            merchantAgreementUrl,
+            accountId,
+            phoneNumber: data.phoneNumber,
+            merchantRedirectUrl: redirectUrl,
+        },
+    };
+};

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"]
+}

package/webpack.config.js

@@ -0,0 +1,103 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const Dotenv = require('dotenv-webpack');
+
+const envEnum = {
+    qa: 'qa',
+    dev: 'dev',
+    prod: 'production',
+};
+
+module.exports = (env) => {
+    const enableSourceMap = env.mode === 'dev' ? true : false;
+
+    return {
+        mode: env.mode,
+        target: 'web',
+        entry: './src/index.tsx',
+        devtool: enableSourceMap ? 'inline-source-map' : false,
+        experiments: {
+            outputModule: true,
+        },
+        resolve: {
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            alias: {
+                Src: path.resolve(__dirname, 'src'),
+                API: path.resolve(__dirname, 'src/api'),
+                Component: path.resolve(__dirname, 'src/components'),
+                Utils: path.resolve(__dirname, 'src/utils'),
+                Hooks: path.resolve(__dirname, 'src/hooks'),
+                Models: path.resolve(__dirname, 'src/models'),
+                Types: path.resolve(__dirname, 'src/types'),
+                Enums: path.resolve(__dirname, 'src/enums'),
+                Constants: path.resolve(__dirname, 'src/constants'),
+                Assets: path.resolve(__dirname, 'src/assets'),
+            },
+        },
+        output: {
+            filename: 'script.js',
+            path: path.resolve(__dirname, 'dist'),
+            publicPath: '/',
+            library: {
+                type: 'module',
+            },
+            clean: true,
+            asyncChunks: false,
+        },
+        plugins: [
+            new MiniCssExtractPlugin({
+                filename: 'css/style.css',
+            }),
+            new Dotenv({
+                path: `./.env.${
+                    env.mode === envEnum.prod ? 'prod' : env.mode || 'prod'
+                }`, // Path to .env file (this is the default)
+                safe: false, // load .env.example (defaults to "false" which does not use dotenv-safe)
+            }),
+        ],
+        module: {
+            rules: [
+                {
+                    test: /\.(js|jsx)$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: [
+                                '@babel/preset-env',
+                                '@babel/preset-react',
+                                '@babel/preset-typescript',
+                            ],
+                        },
+                    },
+                },
+                {
+                    test: /\.(ts|tsx)$/,
+                    exclude: /node_modules/,
+                    use: ['ts-loader'],
+                },
+                {
+                    test: /\.scss$/,
+                    use: [
+                        {
+                            loader: 'style-loader',
+                        },
+                        {
+                            loader: 'css-loader', // translates CSS into CommonJS
+                            options: { sourceMap: enableSourceMap },
+                        },
+                        {
+                            loader: 'sass-loader', // compiles Scss to CSS
+                            options: {
+                                sourceMap: enableSourceMap,
+                                sassOptions: {
+                                    javascriptEnabled: true,
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+    };
+};