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

package/src/components/Button/button.scss

@@ -0,0 +1,48 @@
+@use "sass:color";
+
+@import 'Assets/styles/variables.scss';
+
+.sdk-btn {
+    appearance         : button;
+    -webkit-appearance : button;
+    display            : inline-block;
+    padding            : 6px 12px;
+    margin-bottom      : 0;
+    border             : 1px solid $input-border-color;
+    border-radius      : $border-radius;
+    white-space        : nowrap;
+    vertical-align     : middle;
+    font-size          : $sm-font-size;
+    line-height        : 1.42857143;
+    font-weight        : 400;
+    text-align         : center;
+    background-image   : none;
+    background-color   : $white;
+    color              : $text-color;
+    cursor             : pointer;
+    -webkit-user-select: none;
+    -moz-user-select   : none;
+    -ms-user-select    : none;
+    user-select        : none;
+    -ms-touch-action   : manipulation;
+    touch-action       : manipulation;
+
+    &.loading,
+    &.disabled,
+    &:disabled {
+        opacity       : 0.75;
+        pointer-events: none;
+    }
+
+    &.primary-btn {
+        color           : $white;
+        background-color: $primary-color;
+        border-color    : color.scale($primary-color, $lightness: -20%);
+
+        &:hover,
+        &:focus {
+            background-color: color.scale($primary-color, $lightness: -10%);
+            border-color    : color.scale($primary-color, $lightness: -30%);
+        }
+    }
+}

package/src/components/FormFields/EmailField.tsx

@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+    errorReqMsg?: string;
+    errorInvalidEmailMsg?: string;
+    errors?: {
+        email?: {
+            message?: string;
+        };
+    };
+};
+
+const EmailField: FC<Props> = ({
+    required = false,
+    readOnly = false,
+    label = 'Email',
+    errorReqMsg = 'This field is required!',
+    errorInvalidEmailMsg = 'Invalid email address!',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    return (
+        <div className="field-wrapper" data-testid="sdk-email-field-id">
+            <input
+                autoComplete="email"
+                placeholder=" "
+                className={`input-control ${readOnly ? 'read-only' : ''}`}
+                readOnly={readOnly}
+                type="email"
+                {...register('email', {
+                    required: required ? errorReqMsg : false,
+                    pattern: {
+                        value: /^[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]+)*@[-!#-'*+/-9=?^-~]+(?:\.[-!#-'*+/-9=?^-~]{2,20})+$/i,
+                        message: errorInvalidEmailMsg,
+                    },
+                })}
+            />
+            <label className="label-control">
+                {label} {required && <span className="text-error">*</span>}
+            </label>
+            {errors && errors.email && (
+                <div className="text-error caption">{errors.email.message}</div>
+            )}
+        </div>
+    );
+};
+
+export default EmailField;

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

@@ -0,0 +1,16 @@
+import { OrderFormFiledType } from 'Types/general';
+
+export const FIELD_TYPES = {
+    PHONE: 'phoneNumber',
+    EMAIL: 'email',
+    NAME: 'name',
+};
+
+export const DEFAULT_ORDER_FORM_FIELDS: OrderFormFiledType[] = [
+    {
+        name: FIELD_TYPES.PHONE,
+        required: false,
+        readOnly: false,
+        label: '',
+    },
+];

package/src/components/FormFields/FormFieldsMapper.ts

@@ -0,0 +1,13 @@
+import EmailField from 'Component/FormFields/EmailField';
+import PhoneField from 'Component/FormFields/PhoneField';
+import NameField from 'Component/FormFields/NameField';
+
+import { FIELD_TYPES } from './FormFields.helper';
+
+const formFieldsMapper = {
+    [FIELD_TYPES.PHONE]: PhoneField,
+    [FIELD_TYPES.NAME]: NameField,
+    [FIELD_TYPES.EMAIL]: EmailField,
+};
+
+export default formFieldsMapper;

package/src/components/FormFields/NameField.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+    errorReqMsg?: string;
+    errors?: {
+        name?: {
+            message?: string;
+        };
+    };
+};
+
+const NameField: FC<Props> = ({
+    required = false,
+    readOnly = false,
+    label = 'Name',
+    errorReqMsg = 'This field is required!',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    return (
+        <div className="field-wrapper" data-testid="sdk-name-field-id">
+            <input
+                autoComplete="name"
+                placeholder=" "
+                readOnly={readOnly}
+                className={`input-control ${readOnly ? 'read-only' : ''}`}
+                {...register('name', {
+                    required: required ? errorReqMsg : false,
+                })}
+            />
+            <label className="label-control">
+                {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/PhoneField.tsx

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+type Props = {
+    name: string;
+    required: boolean;
+    readOnly: boolean;
+    label?: string;
+    errorReqMsg?: string;
+    errorInvalidPhoneMsg?: string;
+    errors?: {
+        phoneNumber?: {
+            message?: string;
+        };
+    };
+};
+
+const PhoneFiled: FC<Props> = ({
+    required = false,
+    readOnly = false,
+    label = 'Phone number',
+    errorReqMsg = 'This field is required!',
+    errorInvalidPhoneMsg = 'Invalid phone address!',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    return (
+        <div className="field-wrapper" data-testid="sdk-phone-field-id">
+            <input
+                autoComplete="tel"
+                className={`input-control ${readOnly ? 'read-only' : ''}`}
+                placeholder=" "
+                readOnly={readOnly}
+                type="tel"
+                {...register('phoneNumber', {
+                    required: required ? errorReqMsg : false,
+                    pattern: {
+                        value: /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]{6,14}$/g,
+                        message: errorInvalidPhoneMsg,
+                    },
+                })}
+            />
+            <label className="label-control">
+                {label} {required && <span className="text-error">*</span>}
+            </label>
+            {errors && errors.phoneNumber && (
+                <div className="text-error caption">
+                    {errors.phoneNumber.message}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default PhoneFiled;

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+
+import './loader.scss';
+
+type Props = {
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    dark?: boolean;
+};
+
+const Loader: FC<Props> = ({ className = '', size = 'sm', dark = false }) => {
+    return (
+        <div
+            data-testid="sdk-loader-id"
+            className={`sdk-loader ${className} size-${size} ${
+                dark ? 'dark-color' : ''
+            }`}
+        ></div>
+    );
+};
+
+export default Loader;

package/src/components/Loader/loader.scss

@@ -0,0 +1,37 @@
+@import 'Assets/styles/variables.scss';
+
+.sdk-loader {
+    border       : 2px solid $light-gray;
+    border-top   : 2px solid transparent;
+    border-radius: 50%;
+    width        : 16px;
+    height       : 16px;
+    animation    : spin 2s linear infinite;
+
+    &.size-md {
+        border-width: 4px;
+        width       : 32px;
+        height      : 32px;
+    }
+
+    &.size-lg {
+        border-width: 8px;
+        width       : 64px;
+        height      : 64px;
+    }
+
+    &.dark-color {
+        border-color    : $dark-gray;
+        border-top-color: transparent;
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/MainIframe/MainIframe.tsx

@@ -0,0 +1,42 @@
+import { FC, useEffect, useState } from 'react';
+
+import useIframe from 'Hooks/useIframe';
+
+type Props = {
+    iframeSrc: string | null;
+};
+
+const MainIframe: FC<Props> = ({ iframeSrc }) => {
+    const [loading, setLoading] = useState(false);
+
+    const { frameRef, messageReceiver } = useIframe();
+
+    useEffect(() => {
+        if (frameRef && iframeSrc) {
+            setLoading(true);
+            frameRef?.current &&
+                (frameRef?.current as HTMLIFrameElement).addEventListener(
+                    'load',
+                    () => {
+                        setLoading(false);
+                    }
+                );
+            messageReceiver();
+        }
+    }, [frameRef, iframeSrc]);
+
+    return (
+        <div className="sdk-iframe-wrapper" data-testid="sdk-iframe-id">
+            {loading && <div>... Loading</div>}
+            {iframeSrc && (
+                <iframe
+                    ref={frameRef}
+                    src={iframeSrc}
+                    style={{ minHeight: '830px', width: '100%' }}
+                ></iframe>
+            )}
+        </div>
+    );
+};
+
+export default MainIframe;

package/src/components/OrderForm/OrderForm.tsx

@@ -0,0 +1,235 @@
+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 './orderForm.scss';
+
+type Props = {
+    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
+    templatePackageId: string;
+    subscriberId?: string;
+    userId?: string;
+    identityProviderId?: string;
+    organizationId: string;
+    redirectUrl: string;
+    language: string;
+    merchantAgreementUrl: string;
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    defaultValues?: OrderFormInputsType;
+    paymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    buttonText?: string;
+    paymentMethodLabel?: string;
+    errorReqMsg?: string;
+    errorInvalidEmailMsg?: string;
+    errorInvalidPhoneMsg?: string;
+};
+
+const initialData = {
+    name: '',
+    email: '',
+    phoneNumber: '',
+    paymentMethod: PAYMENT_METHOD_DEFAULT,
+};
+
+const OrderForm: FC<Props> = ({
+    callback,
+    templatePackageId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    organizationId,
+    redirectUrl,
+    paymentMethodsOptions,
+    defaultValues,
+    language,
+    merchantAgreementUrl,
+    paymentMethods = [],
+    buttonText = 'Start',
+    paymentMethodLabel = 'Select Payment Method',
+    errorReqMsg = '',
+    errorInvalidEmailMsg = '',
+    errorInvalidPhoneMsg = '',
+}) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
+    const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
+        paymentMethodsOptions?.[PAYMENT_METHOD_DEFAULT]?.orderFormFields ??
+            DEFAULT_ORDER_FORM_FIELDS
+    );
+
+    const methods = useForm<OrderFormInputsType>({
+        defaultValues: {
+            ...initialData,
+            ...(defaultValues ?? {}),
+        },
+    });
+
+    const {
+        register,
+        handleSubmit,
+        setValue,
+        formState: { errors },
+    } = methods;
+
+    const onSubmit: SubmitHandler<OrderFormInputsType> = async (
+        data
+    ): Promise<void> => {
+        setApiErrorMsg('');
+
+        setLoading(true);
+        try {
+            let id: string | undefined = subscriberId;
+            if (!subscriberId) {
+                const response = await createSubscriber({
+                    name: data.name,
+                    email: data.email,
+                    phone: data.phoneNumber,
+                });
+                id = response.id;
+
+                if (userId && identityProviderId) {
+                    await mapSubscriberToUser(id, {
+                        userId: userId,
+                        identityProviderId: identityProviderId,
+                    });
+                }
+            }
+
+            if (id) {
+                const paymentMethod =
+                    data.paymentMethod || PAYMENT_METHOD_DEFAULT;
+
+                const agreements = prepareAgreementModel({
+                    paymentMethod,
+                    redirectUrl,
+                    data,
+                    language,
+                    merchantAgreementUrl,
+                    generateSubscriberContact:
+                        paymentMethodsOptions?.[
+                            data.paymentMethod as PaymentMethodEnum
+                        ]?.generateSubscriberContact || false,
+                    accountId:
+                        paymentMethodsOptions?.[
+                            data.paymentMethod as PaymentMethodEnum
+                        ]?.accountId,
+                });
+                const responseOrder = await orderStart({
+                    subscriberId: id,
+                    subscriptionPlan: {
+                        organizationId,
+                        templateSubscriptionPlanId: templatePackageId,
+                    },
+                    paymentAgreement: { ...agreements },
+                });
+                callback(responseOrder.terminalRedirectUrl, {
+                    orderId: responseOrder.id,
+                    subscriberId: id,
+                    paymentMethod: paymentMethod,
+                });
+                return;
+            }
+            callback(null);
+            setApiErrorMsg(WRONG_MSG);
+        } catch (error) {
+            console.error(error);
+            setApiErrorMsg(prepareErrorMessage(error as Error));
+            callback(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePaymentChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setValue('paymentMethod', e.target.value as PaymentMethodEnum);
+        const orderFieldsLocal =
+            paymentMethodsOptions?.[e.target.value as PaymentMethodEnum]
+                ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
+        setOrderFields(orderFieldsLocal);
+    };
+
+    return (
+        <FormProvider {...methods}>
+            <form
+                className="sdk-order-form"
+                onSubmit={handleSubmit(onSubmit)}
+                data-testid="sdk-order-form-id"
+            >
+                {paymentMethods?.length > 0 && (
+                    <div className="field-wrapper radio-button-group">
+                        <div className="field-label">{paymentMethodLabel}</div>
+                        {paymentMethods.map((item) => (
+                            <div
+                                className="radio-button-control"
+                                key={item.value}
+                            >
+                                <label className="radio-badge">
+                                    <input
+                                        {...register('paymentMethod', {
+                                            required: true,
+                                        })}
+                                        onChange={handlePaymentChange}
+                                        type="radio"
+                                        value={item.value}
+                                    />
+                                    <span className="value-block">
+                                        <span className="prefix-icon"></span>
+                                        <span className="text-block">
+                                            {item.label}
+                                        </span>
+                                    </span>
+                                </label>
+                            </div>
+                        ))}
+                        {errors.paymentMethod && (
+                            <div className="text-error caption">
+                                {errors.paymentMethod.message}
+                            </div>
+                        )}
+                    </div>
+                )}
+                {orderFields?.length > 0 && (
+                    <Suspense fallback={null}>
+                        {orderFields.map((field) => {
+                            const Component = formFieldsMapper[field.name];
+
+                            return Component ? (
+                                <Component
+                                    key={field.name}
+                                    name={field.name}
+                                    label={field.label}
+                                    required={field.required || false}
+                                    readOnly={field.readOnly || false}
+                                    errors={errors}
+                                    errorReqMsg={errorReqMsg}
+                                    errorInvalidEmailMsg={errorInvalidEmailMsg}
+                                    errorInvalidPhoneMsg={errorInvalidPhoneMsg}
+                                />
+                            ) : null;
+                        })}
+                    </Suspense>
+                )}
+                <Button
+                    type="submit"
+                    loading={loading}
+                    buttonText={buttonText}
+                />
+                <Alert className="mt-2" msg={apiErrorMsg} />
+            </form>
+        </FormProvider>
+    );
+};
+
+export default OrderForm;

package/src/components/OrderForm/orderForm.scss

@@ -0,0 +1,10 @@
+@import 'Assets/styles/variables.scss';
+
+.sdk-order-form {
+    max-width     : 320px;
+    margin        : auto;
+    display       : flex;
+    flex-direction: column;
+    align-items   : center;
+    text-align    : left;
+}

package/src/constants/index.ts

@@ -0,0 +1,8 @@
+import { PaymentMethodEnum } from 'Enums/general';
+
+export const BASE_API = process.env.API_URL ?? '/';
+
+export const WRONG_MSG = 'Something went wrong!';
+
+export const PAYMENT_METHOD_DEFAULT: PaymentMethodEnum =
+    PaymentMethodEnum.Vipps;

package/src/enums/api.ts

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

package/src/enums/general.ts

@@ -0,0 +1,12 @@
+export enum PaymentMethodEnum {
+    Vipps = 'Vipps',
+    MobilePay = 'MobilePay',
+    SwedbankPay = 'SwedbankPay',
+}
+
+export enum MessageEventTypeEnum {
+    ORDER_FLOW_COMPLETE = 'orderFlowComplete',
+    VIPPS_COMPLETE = 'completeOrder',
+    CANCEL = 'cancel',
+    COMPLETE = 'complete',
+}

package/src/hooks/useIframe.tsx

@@ -0,0 +1,59 @@
+import { useRef } from 'react';
+
+let currentMessageReceiver: (event: Event) => void;
+
+const useIframe = () => {
+    const frameRef = useRef(null);
+
+    const messageReceiver = (
+        callback?: (type: string, value: string) => void
+    ) => {
+        if (currentMessageReceiver) {
+            window.removeEventListener('message', currentMessageReceiver);
+        }
+
+        currentMessageReceiver = (event: Event) => {
+            if (!frameRef.current) {
+                return;
+            }
+
+            const childWindow = (frameRef.current as HTMLIFrameElement)
+                .contentWindow;
+
+            if ((event as MessageEvent).source !== childWindow) {
+                return; // Skip message in this event listener
+            }
+
+            let { value, type } = (event as MessageEvent).data as unknown as {
+                value: string;
+                type: string;
+            };
+
+            if (callback) {
+                callback(type, value);
+            }
+        };
+
+        window.addEventListener('message', currentMessageReceiver, false);
+
+        return () => {
+            removeMessageReceiver();
+        };
+    };
+
+    const removeMessageReceiver = () => {
+        if (currentMessageReceiver) {
+            window.removeEventListener(
+                'addEventListener',
+                currentMessageReceiver
+            );
+        }
+    };
+
+    return {
+        frameRef,
+        messageReceiver,
+    };
+};
+
+export default useIframe;