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

package/.prettierignore

@@ -0,0 +1 @@
+node_modules

package/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "endOfLine": "auto"
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@infosoftas/s4-orders-js-sdk",
+    "version" : "0.0.1-alpha1",
+    "scripts": {
+        "build": "rimraf dist && webpack --env mode=production"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app"
+        ]
+    },
+    "dependencies": {
+        "prop-types": "^15.8.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.0",
+        "rimraf": "^6.0.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.24.3",
+        "@babel/preset-env": "^7.18.10",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.24.7",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
+        "babel-loader": "^8.3.0",
+        "css-loader": "^7.1.2",
+        "dotenv-webpack": "^8.1.0",
+        "mini-css-extract-plugin": "^2.9.1",
+        "sass": "^1.79.2",
+        "sass-loader": "^16.0.1",
+        "style-loader": "^4.0.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.6.2",
+        "webpack": "^5.95.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "publishConfig": {
+        "access": "restricted"
+    }
+}

package/src/App.scss

@@ -0,0 +1,24 @@
+@import 'Assets/styles/variables.scss';
+@import 'Assets/styles/general.scss';
+
+.sdk-order-container {
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    .sdk-iframe-wrapper {
+        display       : flex;
+        flex-direction: column;
+        align-items   : center;
+    }
+
+    iframe {
+        max-width    : 640px;
+        border       : none;
+        background   : transparent;
+        border-radius: $border-radius * 2;
+    }
+}

package/src/App.tsx

@@ -0,0 +1,184 @@
+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 ErrorBoundary from './ErrorBoundary';
+
+import './App.scss';
+
+const App: FC<ConfigType> = ({
+    moduleTitle,
+    apiKey,
+    templatePackageId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    organizationId,
+    redirectUrl,
+    showIframe,
+    paymentMethodsOptions,
+    availablePaymentMethods = [],
+    language = 'en-US',
+    merchantAgreementUrl = '',
+    settings = {
+        successText: 'Order successful completed!',
+        failureText: 'Something went wrong!',
+        buttonText: 'Start',
+    },
+}) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [showOrderForm, setShowOrderForm] = useState<boolean>(true);
+    const [iframeSrc, setIframeSrc] = useState<string | null>(null);
+    const [orderId, setOrderId] = useState<string | null>(null);
+    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+    const [isFailed, setIsFailed] = useState<boolean>(false);
+    const [failedMsg, setFailedMsg] = useState<string>('');
+    const [orderInfo, setOrderInfo] = useState<OrderInfoType | null>(null);
+
+    useEffect(() => {
+        if (apiKey) {
+            sessionStorage.setItem('sdk_api_key', apiKey);
+        }
+    }, [apiKey]);
+
+    const messageCallback = async (
+        data: CompleteOrderParamsType
+    ): Promise<void> => {
+        setLoading(true);
+        setIframeSrc(null);
+        setShowOrderForm(false);
+        setIsFailed(false);
+        try {
+            await orderComplete(orderId || data.orderId || '');
+            setIsConfirmed(true);
+            setLoading(false);
+            if (window === top) {
+                top.postMessage(
+                    {
+                        type: MessageEventTypeEnum.ORDER_FLOW_COMPLETE,
+                        isCompleted: true,
+                        orderInfo: orderInfo,
+                    },
+                    top?.location?.origin || '*'
+                );
+            }
+        } catch (error) {
+            console.log(error);
+            setFailedMsg(
+                prepareErrorMessage(error as Error, settings?.failureText)
+            );
+            setIsFailed(true);
+            setLoading(false);
+            setShowOrderForm(true);
+        }
+    };
+
+    const handleMessageEvent = (type: MessageEventTypeEnum) => {
+        if (type === MessageEventTypeEnum.CANCEL) {
+            setLoading(false);
+            setOrderId(null);
+            setOrderInfo(null);
+            setIframeSrc(null);
+            setIsConfirmed(false);
+            setIsFailed(false);
+            setShowOrderForm(true);
+        }
+    };
+
+    useMessageEvent(
+        messageCallback,
+        handleMessageEvent,
+        !!showIframe,
+        orderInfo
+    );
+
+    const handleForm = (url: string | null, data?: OrderInfoType | null) => {
+        setIsConfirmed(false);
+        setIsFailed(false);
+        setOrderId(data?.orderId || null);
+        setOrderInfo(data || null);
+        if (url) {
+            if (
+                showIframe &&
+                data?.paymentMethod === PaymentMethodEnum.SwedbankPay
+            ) {
+                setIframeSrc(url);
+                return;
+            }
+
+            window.location.href = url;
+            return;
+        }
+
+        setIframeSrc(null);
+    };
+
+    if (window !== top) {
+        return null;
+    }
+
+    return (
+        <ErrorBoundary>
+            <div
+                className={`sdk-order-container ${
+                    iframeSrc ? 'show-iframe' : ''
+                }`}
+                data-testid="sdk-order-module-id"
+            >
+                {moduleTitle && <h1 className="text-center">{moduleTitle}</h1>}
+                {loading && (
+                    <div className="d-flex justify-center">
+                        <Loader size="lg" dark={true} />
+                    </div>
+                )}
+                {!iframeSrc && showOrderForm && (
+                    <OrderForm
+                        callback={handleForm}
+                        templatePackageId={templatePackageId}
+                        subscriberId={subscriberId}
+                        userId={userId}
+                        identityProviderId={identityProviderId}
+                        organizationId={organizationId}
+                        paymentMethods={availablePaymentMethods}
+                        buttonText={settings?.buttonText}
+                        paymentMethodLabel={settings?.paymentMethodLabel}
+                        errorReqMsg={settings?.errorReqMsg}
+                        errorInvalidEmailMsg={settings?.errorInvalidEmailMsg}
+                        errorInvalidPhoneMsg={settings?.errorInvalidPhoneMsg}
+                        defaultValues={settings?.orderDefaultValues}
+                        redirectUrl={
+                            showIframe
+                                ? window.location.href.split('?')[0]
+                                : redirectUrl ||
+                                  window.location.href.split('?')[0]
+                        }
+                        paymentMethodsOptions={paymentMethodsOptions}
+                        language={language}
+                        merchantAgreementUrl={merchantAgreementUrl}
+                    />
+                )}
+                {showIframe && <MainIframe iframeSrc={iframeSrc} />}
+                {isConfirmed && (
+                    <Alert
+                        className="mt-2"
+                        type="success"
+                        msg={settings?.successText}
+                    />
+                )}
+
+                {isFailed && <Alert className="mt-2" msg={failedMsg} />}
+            </div>
+        </ErrorBoundary>
+    );
+};
+
+export default App;

package/src/ErrorBoundary.tsx

@@ -0,0 +1,41 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+    children?: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false,
+    };
+
+    public static getDerivedStateFromError(): State {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+
+    public render() {
+        if (this.state.hasError) {
+            return (
+                <div className="layout-wrapper">
+                    <h1>
+                        Something went wrong. Please reload the page and try
+                        again.
+                    </h1>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;

package/src/api/OrdersApi.ts

@@ -0,0 +1,44 @@
+import { AgreementsType } from 'Types/order';
+import fetcher from 'Utils/fetcher';
+
+type RequestOrderStartType = {
+    subscriberId?: string;
+    subscriptionPlan?: {
+        organizationId?: string;
+        templateSubscriptionPlanId?: string;
+    };
+    paymentAgreement: AgreementsType;
+};
+
+type OrderResponseType = {
+    terminalRedirectUrl: string;
+    id: string;
+};
+
+export const orderStart = (
+    body: RequestOrderStartType
+): Promise<OrderResponseType> =>
+    fetcher<OrderResponseType, RequestOrderStartType>({
+        method: 'POST',
+        url: '/order',
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body,
+    }) as Promise<OrderResponseType>;
+
+export const orderComplete = (id: string): Promise<OrderResponseType> =>
+    fetcher<OrderResponseType, null>({
+        method: 'POST',
+        url: `/order/${id}/complete`,
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body: null,
+    }) as Promise<OrderResponseType>;

package/src/api/SubscribeApi.ts

@@ -0,0 +1,51 @@
+import fetcher from 'Utils/fetcher';
+
+type CreateSubscriberRequestType = {
+    name?: string;
+    email?: string;
+    phone?: string;
+};
+
+type CreateSubscriberResponseType = {
+    id: string;
+};
+
+type MapSubscriberToUserRequestType = {
+    identityProviderId: string;
+    userId: string;
+};
+
+type MapSubscriberToUserResponseType = {
+    id: string;
+};
+
+export const createSubscriber = (
+    body: CreateSubscriberRequestType
+): Promise<CreateSubscriberResponseType> =>
+    fetcher<CreateSubscriberResponseType, CreateSubscriberRequestType>({
+        method: 'POST',
+        url: '/subscriber',
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body,
+    }) as Promise<CreateSubscriberResponseType>;
+
+export const mapSubscriberToUser = (
+    id: string,
+    body: MapSubscriberToUserRequestType
+): Promise<MapSubscriberToUserResponseType> =>
+    fetcher<MapSubscriberToUserResponseType, MapSubscriberToUserRequestType>({
+        method: 'POST',
+        url: `/subscriber/${id}/user`,
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body,
+    }) as Promise<MapSubscriberToUserResponseType>;

package/src/assets/styles/forms.scss

@@ -0,0 +1,105 @@
+@import 'Assets/styles/variables.scss';
+
+.field-label {
+    display      : block;
+    margin-bottom: 0.375em;
+    font-weight  : 500;
+    text-align   : left;
+}
+
+.field-wrapper {
+    display       : flex;
+    flex-direction: column;
+    width         : 100%;
+    margin-bottom : 20px;
+
+    label {
+        display      : block;
+        order        : 1;
+        margin-bottom: 0.375em;
+        font-weight  : 500;
+        text-align   : left;
+    }
+
+    .caption {
+        order: 3;
+    }
+
+    .input-control {
+        order: 2;
+    }
+}
+
+.input-control {
+    width           : 100%;
+    padding         : 0.25em 0.5em;
+    border          : 2px solid $input-border-color;
+    border-radius   : 4px;
+    font-size       : 16px;
+    font-size       : max(16px, 1em);
+    font-family     : inherit;
+    background-color: $white;
+
+    &[disabled],
+    &[readonly],
+    &:read-only,
+    .disabled,
+    .red-only {
+        border-color    : $input-border-disabled-color;
+        background-color: $input-border-disabled-bg-color;
+        cursor          : not-allowed;
+    }
+
+    &:focus {
+        border-color: hsl($input-focus-h, $input-focus-s, $input-focus-l);
+    }
+}
+
+.radio-button-control {
+    label {
+        display      : flex;
+        margin-bottom: 0.375em;
+        font-weight  : 500;
+        position     : relative;
+        overflow     : hidden;
+        cursor       : pointer;
+
+        input {
+            position: absolute;
+            left    : -9999px;
+
+            &:checked+span.value-block {
+                background-color: mix($white, $primary-color, 84%);
+
+                &:before {
+                    box-shadow: inset 0 0 0 0.4375em $primary-color;
+                }
+            }
+        }
+
+        span.value-block {
+            display      : flex;
+            align-items  : center;
+            padding      : 0.375em 0.75em 0.375em 0.375em;
+            border-radius: 20px;
+            transition   : 0.25s ease;
+
+            &:hover {
+                background-color: mix($white, $primary-color, 84%);
+            }
+
+            &:before {
+                content         : "";
+                display         : flex;
+                flex-shrink     : 0;
+                width           : 1.5em;
+                height          : 1.5em;
+                margin-right    : 0.375em;
+                border-radius   : 50%;
+                background-color: $white;
+                box-shadow      : inset 0 0 0 0.125em $primary-color;
+                transition      : 0.25s ease;
+            }
+        }
+    }
+}

package/src/assets/styles/general.scss

@@ -0,0 +1,38 @@
+@import 'Assets/styles/variables.scss';
+@import 'Assets/styles/forms.scss';
+
+.d-flex {
+    display: flex;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.mt-2 {
+    margin-top: 0.5rem;
+}
+
+.mb-2 {
+    margin-bottom: 0.5rem;
+}
+
+.text-error {
+    color: $error-color !important;
+}
+
+.text-success {
+    color: $success-color !important
+}
+
+.text-center {
+    text-align: center;
+}
+
+.caption {
+    font-size: $xs-font-size;
+}

package/src/assets/styles/variables.scss

@@ -0,0 +1,29 @@
+$white                         : #fff;
+$black                         : #000;
+$blue                          : #007bff;
+$green                         : #5fa757;
+$red                           : #c9252d;
+$grey                          : #6c757d;
+$light-gray                    : #f8f9fa;
+$dark-gray                     : #343a40;
+$error-color                   : $red;
+$success-test-color            : $green;
+$text-color                    : $dark-gray;
+$primary-color                 : $blue;
+$input-border-color            : $grey;
+$input-border-disabled-color   : #ccc;
+$input-border-disabled-bg-color: #eee;
+$success-color                 : #155724;
+$success-bg-color              : #d4edda;
+$success-border-color          : #c3e6cb;
+$danger-color                  : #721c24;
+$danger-bg-color               : #f8d7da;
+$danger-border-color           : #f5c6cb;
+$input-focus-h                 : 245;
+$input-focus-s                 : 100%;
+$input-focus-l                 : 42%;
+$font-size                     : 1rem;
+$sm-font-size                  : 0.875rem;
+$xs-font-size                  : 0.75rem;
+$border-radius                 : 4px;
+$size-bezel                    : 0.5rem;

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+import './alert.scss';
+
+type Props = {
+    msg?: string;
+    type?: 'danger' | 'success';
+    className?: string;
+};
+
+const Alert: FC<Props> = ({ msg, type = 'danger', className = '' }) => {
+    return msg ? (
+        <div
+            className={`sdk-alert ${type} ${className}`}
+            data-testid="sdk-alert-id"
+        >
+            {msg}
+        </div>
+    ) : null;
+};
+
+export default Alert;

package/src/components/Alert/alert.scss

@@ -0,0 +1,21 @@
+@import 'Assets/styles/variables.scss';
+
+.sdk-alert {
+    position     : relative;
+    padding      : .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border       : 1px solid transparent;
+    border-radius: .25rem;
+
+    &.danger {
+        color           : $danger-color;
+        background-color: $danger-bg-color;
+        border-color    : $danger-border-color;
+    }
+
+    &.success {
+        color           : $success-color;
+        background-color: $success-bg-color;
+        border-color    : $success-border-color;
+    }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,43 @@
+import { FC, MouseEvent } from 'react';
+
+import Loader from 'Component/Loader/Loader';
+
+import './button.scss';
+
+type Props = {
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    type?: 'button' | 'submit' | 'reset';
+    btnType?: 'primary';
+    buttonText?: string;
+    loading?: boolean;
+    disable?: boolean;
+};
+
+const Button: FC<Props> = ({
+    onClick,
+    type = 'button',
+    btnType = 'primary',
+    buttonText = 'Start',
+    loading = false,
+    disable = false,
+}) => {
+    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+        onClick?.(e);
+    };
+
+    return (
+        <button
+            data-testid="sdk-button-id"
+            type={type}
+            disabled={loading || disable}
+            className={`sdk-btn ${btnType ? `${btnType}-btn` : ''} ${
+                loading ? 'loading' : ''
+            } ${disable ? 'disabled' : ''}`}
+            onClick={handleClick}
+        >
+            {loading ? <Loader className="btn-loader" /> : buttonText}
+        </button>
+    );
+};
+
+export default Button;