@infosoftas/s4-orders-js-sdk 0.0.1-alpha2a → 0.0.1-alpha2c

package/README.md

@@ -1,3 +1,342 @@
 # INFO-Subscription JS/TS Order SDK
 
-Currently a work in progress
+This repository contains code for the Orders SDK usable to add orders for Tenants within INFO-Subscription.
+
+## Installation
+
+Install the package with:
+
+```sh
+npm install @infosoftas/s4-orders-js-sdk
+```
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+## Usage
+
+The package needs to be configured with configuration object:
+
+<!-- prettier-ignore -->
+```ts
+
+enum PaymentMethodEnum {
+    Vipps = 'Vipps',
+    MobilePay = 'MobilePay',
+    SwedbankPay = 'SwedbankPay',
+    Invoice = 'Invoice',
+    Email = 'Email',
+    EHF = 'EHF',
+    OIO = 'OIO',
+}
+
+type OrderFormFiledType = {
+    name: string;
+    required?: boolean;
+};
+
+type PaymentMethodOptionsType = {
+    [key in PaymentMethodEnum]: {
+        generateSubscriberContact?: boolean;
+        accountId?: string;
+        orderFormFields?: OrderFormFiledType[] | never[];
+    };
+}
+
+type OrderFormInputsType = {
+    name?: string;
+    email?: string;
+    phoneNumber?: string;
+    paymentMethod?: PaymentMethodEnum;
+    country?: string;
+    city?: string;
+    address?: string;
+    zip?: string;
+};
+
+type ConfigType = {
+    domElementId: string;
+    moduleTitle?: string;
+    apiKey: string;
+    apiUrl: string;
+    templatePackageId: string;
+    subscriberId: string;
+    userId: string;
+    identityProviderId: string;
+    organizationId: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    paymentMethodsOptions?: PaymentMethodOptionsType;
+    language?: string;
+    merchantAgreementUrl?: string;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFiledType[] | never[];
+    };
+    settings?: {
+        successText?: string;
+        failureText?: string;
+        submitButtonText?: string;
+        backButtonText?: string;
+        verifyButtonText?: string;
+        organizationNumberLabel?: string;
+        glnLabel?: string;
+        orderDefaultValues?: OrderFormInputsType;
+        paymentMethodLabel?: string;
+        errorReqMsg?: string;
+        errorInvalidEmailMsg?: string;
+        errorInvalidPhoneMsg?: string;
+    };
+}
+```
+
+Usage example OrderPlace react component:
+
+<!-- prettier-ignore -->
+```tsx
+
+enum OrderModuleFiledNameEnum {
+    name = 'name',
+    email = 'email',
+    phoneNumber = 'phoneNumber',
+    address = 'address',
+    country = 'country',
+    city = 'city',
+    zip = 'zip',
+    careOf = 'careOf',
+    organizationNumber = 'organizationNumber',
+    buyerReference = 'buyerReference',
+    orderReference = 'orderReference',
+    invoiceName = 'invoiceName',
+    invoiceAddress = 'invoiceAddress',
+    invoiceCity = 'invoiceCity',
+    invoiceZip = 'invoiceZip',
+    invoiceCountry = 'invoiceCountry',
+    invoicePhone = 'invoicePhoneNumber',
+    invoiceEmail = 'invoiceEmail',
+    invoiceCareOf = 'invoiceCareOf',
+    invoiceBuyerReference ='invoiceBuyerReference',
+}
+
+export const prepareConfig = ({
+    apiKey,
+    apiUrl,
+    userId,
+    subscriberId,
+    templatePackageId,
+    identityProviderId,
+    organizationId,
+    selfServiceUrl,
+    userEmail,
+    name,
+    city,
+    country,
+    postalCode,
+    streetAddress,
+}: Props) => {
+
+    const config = {
+        moduleTitle: '',
+        domElementId: ORDER_PLACE_ID,
+        redirectUrl: window.location.href,
+        merchantAgreementUrl: selfServiceUrl,
+        showIframe: true,
+        apiKey,
+        apiUrl,
+        userId,
+        subscriberId,
+        templatePackageId,
+        identityProviderId,
+        organizationId,
+        language: 'en-US',
+        availablePaymentMethods: [
+                { label: "Vipps", value: "Vipps" },
+                { label: "MobilePay", value: "MobilePay" },
+                { label: "Credit Card/Debit Card", value: "SwedbankPay" },
+                { label: 'Invoice', translateKey: 'Invoice', value: 'Invoice' },
+                { label: 'Email', translateKey: 'Email', value: 'Email' },
+                { label: 'EHF', translateKey: 'EHF', value: 'EHF' },
+                { label: 'OIO', translateKey: 'OIO', value: 'OIO' },
+        ],
+        paymentMethodsOptions: {
+            Vipps: {
+                generateSubscriberContact: true,
+                orderFormFields: [],
+            },
+            SwedbankPay: {
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.name,
+                        label: 'Name',
+                        required: false,
+                    },
+                    {
+                        name: OrderModuleFiledNameEnum.phoneNumber,
+                        label: 'Phone',
+                        readOnly: false,
+                        required: false,
+                    },
+                    {
+                        name: OrderModuleFiledNameEnum.email,
+                        label: 'Email',
+                        required: true,
+                        readOnly: !!userEmail,
+                    },
+                ],
+            },
+            Invoice: {
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.address,
+                        label: 'Address',
+                        required: false,
+                        readOnly: false,
+                    },
+                ],
+            },
+            Email: {
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.address,
+                        label: 'Address',
+                        required: false,
+                        readOnly: false,
+                    },
+                ],
+            },
+            EHF: {
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.address,
+                        label: 'Address',
+                        required: false,
+                        readOnly: false,
+                    },
+                ],
+            },
+            OIO: {
+                orderFormFields: [
+                    {
+                        name: OrderModuleFiledNameEnum.address,
+                        label: 'Address',
+                        required: false,
+                        readOnly: false,
+                    },
+                ],
+            },
+        },
+        invoiceAddressSelection: {
+            enabled: true,
+            label: 'Invoice Address',
+            fields: [
+                {
+                    name: OrderModuleFiledNameEnum.invoiceAddress,
+                    label: 'Address',
+                    required: false,
+                    readOnly: false,
+                },
+            ],
+        },
+        settings: {
+            submitButtonText: 'Continue',
+            backButtonText: 'Back',
+            verifyButtonText: 'Verify',
+            organizationNumberLabel: 'CVR',
+            glnLabel: 'GLN/EAN',
+            paymentMethodLabel: 'Select Payment Method',
+            errorReqMsg: 'This field is required!',
+            errorInvalidEmailMsg: 'Invalid email address!',
+            errorInvalidPhoneMsg: 'Invalid phone number!',
+            successText: 'Success message',
+            failureText: 'Failed message',
+            orderDefaultValues: {
+                name,
+                email: userEmail || '',
+                phoneNumber: '',
+                city,
+                country,
+                zip: postalCode,
+                address: streetAddress,
+                paymentMethod: undefined,
+            },
+        },
+    };
+
+    return config as ConfigType;
+};
+
+
+import { FC, useEffect, useRef } from 'react';
+import { orderComponent } from '@infosoftas/s4-orders-js-sdk/src/index';
+
+import { prepareConfig } from 'Utils/moduleConfig';
+
+const ORDER_PLACE_ID = 'sdk-order';
+
+const OrderPlace: FC = ({userEmail, userId, name, city, country, postalCode, streetAddress}) => {
+    const moduleMount = useRef(false);
+
+    useEffect(() => {
+        if (!moduleMount.current && idTokenClaims) {
+            moduleMount.current = true;
+            const config = prepareConfig({
+                apiKey: process.env.API_KEY || '',
+                apiUrl: process.env.ORDER_SDK_API_URL || '',
+                userId: userId || '',
+                subscriberId: userEmail || '',
+                identityProviderId: process.env.IDENTITY_PROVIDER_ID || '',
+                templatePackageId: process.env.TEMPLATE_PACKAGE_ID || '',
+                selfServiceUrl: process.env.SELF_SERVICE_URL || '',
+                organizationId: process.env.ORGANIZATION_ID || '',
+                userEmail: userEmail || '',
+                name: name,
+                city: city,
+                country: country,
+                postalCode: postalCode,
+                streetAddress: streetAddress,
+            });
+            orderComponent?.remove();
+            orderComponent?.init(config);
+        }
+    }, [userEmail, userId, name, city, country, postalCode, streetAddress]);
+
+    return (
+        <div
+            id={ORDER_PLACE_ID}
+            className="w-100 order-wrapper"
+            data-testid="order-place-id"
+        />
+    );
+};
+
+export default OrderPlace;
+```
+
+<!-- prettier-ignore -->
+| Option                |                                    Default                                     |                Description |
+| --------------------- | :----------------------------------------------------------------------------: | -------------------------: |
+| moduleTitle           |                                       ''                                       |               module title |
+| apiKey                |                                       ''                                       |              order api key |
+| apiUrl                |                                       ''                                       |              order api url |
+| templatePackageId     |                                       ''                                       |        template package id |
+| subscriberId          |                                       ''                                       |              subscriber id |
+| identityProviderId    |                                       ''                                       |       identity provider id |
+| organizationId        |                                       ''                                       |            organization id |
+| redirectUrl           |                              window.location.href                              |               redirect url |
+| showIframe            |                                     false                                      | show credit card in iframe |
+| paymentMethodsOptions | orderFormFields: [{name: 'phone, required: false, readOnly: false, label: ''}] |        default form fields |
+| availablePaymentMethods | [] | available payment methods |
+| language | 'en-US' | language |
+| merchantAgreementUrl | '' | vipps and MobilePay property |
+| settings | {successText: 'Order successful completed!',failureText: 'Something went wrong!',submitButtonText: 'Start',backButtonText: 'Back',verifyButtonText: 'Verify',organizationNumberLabel: 'CVR',glnLabel: 'GLN',paymentMethodLabel:'Select Payment Method',} | label and text properties |

package/__azurite_db_blob__.json

@@ -0,0 +1 @@
+{"filename":"C:\\Code\\repos\\s4-orders-js-sdk\\orders-module\\__azurite_db_blob__.json","collections":[{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$CONTAINERS_COLLECTION$","data":[{"accountName":"devstoreaccount1","name":"azure-webjobs-secrets","properties":{"etag":"\"0x241ECCC639EC420\"","lastModified":"2024-12-05T13:29:00.197Z","leaseStatus":"unlocked","leaseState":"available","hasImmutabilityPolicy":false,"hasLegalHold":false},"meta":{"revision":0,"created":1733405340199,"version":0},"$loki":1},{"accountName":"devstoreaccount1","name":"azure-webjobs-hosts","properties":{"etag":"\"0x21BCE1F25F7DC40\"","lastModified":"2024-12-05T13:29:06.224Z","leaseStatus":"unlocked","leaseState":"available","hasImmutabilityPolicy":false,"hasLegalHold":false},"meta":{"revision":0,"created":1733405346225,"version":0},"$loki":2}],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[1,0]},"name":{"name":"name","dirty":false,"values":[1,0]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$CONTAINERS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":2,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$BLOBS_COLLECTION$","data":[{"deleted":false,"accountName":"devstoreaccount1","containerName":"azure-webjobs-secrets","name":"esbbach1-505371708/host.json","properties":{"creationTime":"2024-12-05T13:29:00.786Z","lastModified":"2024-12-05T13:29:00.786Z","etag":"\"0x1F3C1FE0A326700\"","contentLength":632,"contentType":"application/octet-stream","contentMD5":{"type":"Buffer","data":[105,188,18,11,16,253,127,42,77,4,114,189,122,185,129,100]},"blobType":"BlockBlob","leaseStatus":"unlocked","leaseState":"available","serverEncrypted":true,"accessTier":"Hot","accessTierInferred":true,"accessTierChangeTime":"2024-12-05T13:29:00.786Z"},"snapshot":"","isCommitted":true,"persistency":{"id":"6814b4e2-aa0c-49d2-9ea5-e8893c0aa38d","offset":474,"count":632},"meta":{"revision":0,"created":1733405340791,"version":0},"$loki":2},{"deleted":false,"metadata":{"FunctionInstance":"000000000000000000000000ECDCC010"},"accountName":"devstoreaccount1","containerName":"azure-webjobs-hosts","name":"locks/esbbach1-505371708/host","properties":{"creationTime":"2024-12-05T13:29:27.810Z","lastModified":"2024-12-05T13:29:27.935Z","etag":"\"0x24F90CC989B1D40\"","contentLength":0,"contentType":"application/octet-stream","contentMD5":{"type":"Buffer","data":[212,29,140,217,143,0,178,4,233,128,9,152,236,248,66,126]},"blobType":"BlockBlob","leaseStatus":"locked","leaseState":"leased","serverEncrypted":true,"accessTier":"Hot","accessTierInferred":true,"accessTierChangeTime":"2024-12-05T13:29:27.810Z","leaseDuration":"fixed"},"snapshot":"","isCommitted":true,"persistency":{"id":"6814b4e2-aa0c-49d2-9ea5-e8893c0aa38d","offset":1106,"count":0},"meta":{"revision":9,"created":1733405367813,"version":0,"updated":1733405451971},"$loki":3,"leaseId":"000000000000000000000000ECDCC010","leaseExpireTime":"2024-12-05T13:31:06.970Z","leaseDurationSeconds":15}],"idIndex":[2,3],"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[1,0]},"containerName":{"name":"containerName","dirty":false,"values":[1,0]},"name":{"name":"name","dirty":false,"values":[0,1]},"snapshot":{"name":"snapshot","dirty":false,"values":[1,0]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$BLOBS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":3,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$BLOCKS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"containerName":{"name":"containerName","dirty":false,"values":[]},"blobName":{"name":"blobName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$BLOCKS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

package/__azurite_db_blob_extent__.json

@@ -0,0 +1 @@
+{"filename":"C:\\Code\\repos\\s4-orders-js-sdk\\orders-module\\__azurite_db_blob_extent__.json","collections":[{"name":"$EXTENTS_COLLECTION$","data":[{"id":"6814b4e2-aa0c-49d2-9ea5-e8893c0aa38d","locationId":"Default","path":"6814b4e2-aa0c-49d2-9ea5-e8893c0aa38d","size":1106,"lastModifiedInMS":1733405340529,"meta":{"revision":2,"created":1733405340529,"version":0,"updated":1733405367812},"$loki":1,"LastModifyInMS":1733405367812}],"idIndex":[1],"binaryIndices":{"id":{"name":"id","dirty":false,"values":[0]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$EXTENTS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":1,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

package/__azurite_db_queue__.json

@@ -0,0 +1 @@
+{"filename":"C:\\Code\\repos\\s4-orders-js-sdk\\orders-module\\__azurite_db_queue__.json","collections":[{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$QUEUES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$QUEUES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$MESSAGES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"queueName":{"name":"queueName","dirty":false,"values":[]},"messageId":{"name":"messageId","dirty":false,"values":[]},"visibleTime":{"name":"visibleTime","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$MESSAGES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

package/__azurite_db_queue_extent__.json

@@ -0,0 +1 @@
+{"filename":"C:\\Code\\repos\\s4-orders-js-sdk\\orders-module\\__azurite_db_queue_extent__.json","collections":[{"name":"$EXTENTS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"id":{"name":"id","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$EXTENTS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

package/__azurite_db_table__.json

@@ -0,0 +1 @@
+{"filename":"C:\\Code\\repos\\s4-orders-js-sdk\\orders-module\\__azurite_db_table__.json","collections":[{"name":"$TABLES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"account":{"name":"account","dirty":false,"values":[]},"table":{"name":"table","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$TABLES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}

package/__blobstorage__/6814b4e2-aa0c-49d2-9ea5-e8893c0aa38d

@@ -0,0 +1,43 @@
+{
+  "masterKey": {
+    "name": "master",
+    "value": "7wseiRzKpd7oQ1yO5r--CLVrm5sMbjHltVxtApzUCDoGAzFuC9p3Og==",
+    "encrypted": false
+  },
+  "functionKeys": [
+    {
+      "name": "default",
+      "value": "lvuTAIZSep4sDwZXlWqQklWBsEVhwCKbC3msSvs4C-TZAzFu_mt4Yg==",
+      "encrypted": false
+    }
+  ],
+  "systemKeys": [],
+  "hostName": "localhost:7161",
+  "instanceId": "000000000000000000000000ECDCC010",
+  "source": "runtime",
+  "decryptionKeyId": ""
+}{
+  "masterKey": {
+    "name": "master",
+    "value": "7wseiRzKpd7oQ1yO5r--CLVrm5sMbjHltVxtApzUCDoGAzFuC9p3Og==",
+    "encrypted": false
+  },
+  "functionKeys": [
+    {
+      "name": "default",
+      "value": "lvuTAIZSep4sDwZXlWqQklWBsEVhwCKbC3msSvs4C-TZAzFu_mt4Yg==",
+      "encrypted": false
+    }
+  ],
+  "systemKeys": [
+    {
+      "name": "eventgrid_extension",
+      "value": "daOhefCvoXVARuY2Ho-3bfGYK21hNkbpzVVio4deylC6AzFu4jvTMA==",
+      "encrypted": false
+    }
+  ],
+  "hostName": "localhost:7161",
+  "instanceId": "000000000000000000000000ECDCC010",
+  "source": "runtime",
+  "decryptionKeyId": ""
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha2a",
+    "version": "0.0.1-alpha2c",
     "scripts": {
         "build": "rimraf lib && webpack --env mode=production"
     },

package/src/App.tsx

@@ -1,8 +1,14 @@
 import { FC, useEffect, useState } from 'react';
 
-import { MessageEventTypeEnum, PaymentMethodEnum } from './enums/general';
+import {
+    FormTypeEnum,
+    MessageEventTypeEnum,
+    PaymentMethodEnum,
+} from './enums/general';
 import useMessageEvent from './hooks/useMessageEvent';
 import OrderForm from './components/OrderForm/OrderForm';
+import OIOForm from './components/OIOForm/OIOForm';
+import EHFForm from './components/EHFForm/EHFForm';
 import Loader from './components/Loader/Loader';
 import MainIframe from './components/MainIframe/MainIframe';
 import Alert from './components/Alert/Alert';
@@ -35,6 +41,11 @@ const App: FC<ConfigType> = ({
         successText: 'Order successful completed!',
         failureText: 'Something went wrong!',
         buttonText: 'Start',
+        submitButtonText: 'Start',
+        backButtonText: 'Back',
+        verifyButtonText: 'Verify',
+        organizationNumberLabel: 'CVR',
+        glnLabel: 'GLN',
     },
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -46,6 +57,7 @@ const App: FC<ConfigType> = ({
     const [failedMsg, setFailedMsg] = useState<string>('');
     const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
     const [orderInfo, setOrderInfo] = useState<OrderInfoType | null>(null);
+    const [formType, setFormType] = useState(FormTypeEnum.ORDER);
 
     useEffect(() => {
         if (apiKey) {
@@ -108,6 +120,7 @@ const App: FC<ConfigType> = ({
             setIsFailed(true);
             setLoading(false);
             setShowOrderForm(true);
+            setFormType(FormTypeEnum.ORDER);
         }
     };
 
@@ -191,18 +204,15 @@ const App: FC<ConfigType> = ({
             data?.paymentMethod === PaymentMethodEnum.Email ||
             data?.paymentMethod === PaymentMethodEnum.Invoice
         ) {
-            if (window === top) {
-                setIsConfirmed(true);
-                setLoading(false);
-                top.postMessage(
-                    {
-                        type: MessageEventTypeEnum.ORDER_FLOW_COMPLETE,
-                        isCompleted: true,
-                        orderInfo: data || null,
-                    },
-                    top?.location?.origin || '*'
-                );
-            }
+            messageCallback({
+                orderId: data.orderId || orderId || '',
+                agreementId: '',
+                orderInfo: data || orderInfo || null,
+            });
+        } else if (data?.paymentMethod === PaymentMethodEnum.EHF) {
+            setFormType(FormTypeEnum.EHF);
+        } else if (data?.paymentMethod === PaymentMethodEnum.OIO) {
+            setFormType(FormTypeEnum.OIO);
         } else if (url) {
             if (
                 showIframe &&
@@ -219,6 +229,18 @@ const App: FC<ConfigType> = ({
         setIframeSrc(null);
     };
 
+    const handleInvoiceBack = () => {
+        setFormType(FormTypeEnum.ORDER);
+    };
+
+    const handleInvoiceForm = async () => {
+        await messageCallback({
+            orderId: orderId || '',
+            agreementId: '',
+            orderInfo: orderInfo || null,
+        });
+    };
+
     if (window !== top) {
         return null;
     }
@@ -238,27 +260,67 @@ const App: FC<ConfigType> = ({
                     </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={redirectUrl}
-                        showIframe={showIframe}
-                        paymentMethodsOptions={paymentMethodsOptions}
-                        language={language}
-                        merchantAgreementUrl={merchantAgreementUrl}
-                        invoiceAddressSelection={invoiceAddressSelection}
-                    />
+                    <>
+                        {formType === FormTypeEnum.OIO && (
+                            <OIOForm
+                                onBack={handleInvoiceBack}
+                                callback={handleInvoiceForm}
+                                backButtonText={settings?.backButtonText}
+                                verifyButtonText={settings?.verifyButtonText}
+                                organizationNumberLabel={
+                                    settings?.organizationNumberLabel
+                                }
+                                glnLabel={settings?.glnLabel}
+                            />
+                        )}
+                        {formType === FormTypeEnum.EHF && (
+                            <EHFForm
+                                onBack={handleInvoiceBack}
+                                callback={handleInvoiceForm}
+                                backButtonText={settings?.backButtonText}
+                                verifyButtonText={settings?.verifyButtonText}
+                                organizationNumberLabel={
+                                    settings?.organizationNumberLabel
+                                }
+                            />
+                        )}
+                        {formType !== FormTypeEnum.OIO &&
+                            formType !== FormTypeEnum.EHF && (
+                                <OrderForm
+                                    callback={handleForm}
+                                    templatePackageId={templatePackageId}
+                                    subscriberId={subscriberId}
+                                    userId={userId}
+                                    identityProviderId={identityProviderId}
+                                    organizationId={organizationId}
+                                    paymentMethods={availablePaymentMethods}
+                                    submitButtonText={
+                                        settings?.submitButtonText
+                                    }
+                                    paymentMethodLabel={
+                                        settings?.paymentMethodLabel
+                                    }
+                                    errorReqMsg={settings?.errorReqMsg}
+                                    errorInvalidEmailMsg={
+                                        settings?.errorInvalidEmailMsg
+                                    }
+                                    errorInvalidPhoneMsg={
+                                        settings?.errorInvalidPhoneMsg
+                                    }
+                                    defaultValues={settings?.orderDefaultValues}
+                                    redirectUrl={redirectUrl}
+                                    showIframe={showIframe}
+                                    paymentMethodsOptions={
+                                        paymentMethodsOptions
+                                    }
+                                    language={language}
+                                    merchantAgreementUrl={merchantAgreementUrl}
+                                    invoiceAddressSelection={
+                                        invoiceAddressSelection
+                                    }
+                                />
+                            )}
+                    </>
                 )}
                 {showIframe && <MainIframe iframeSrc={iframeSrc} />}
                 {isConfirmed && (

package/src/api/InvoiceApi.ts

@@ -0,0 +1,25 @@
+import fetcher from '../utils/fetcher';
+
+type RequestInvoiceLookupType = {
+    network: string;
+    value: string;
+};
+
+type InvoiceLookupResponseType = {
+    recievesInvoice: boolean;
+};
+
+export const invoiceLookup = (
+    body: RequestInvoiceLookupType
+): Promise<InvoiceLookupResponseType> =>
+    fetcher<InvoiceLookupResponseType, RequestInvoiceLookupType>({
+        method: 'POST',
+        url: '/invoicelookup',
+        headers: {
+            'S4-ORDERS-API-KEY':
+                sessionStorage.getItem('sdk_api_key') ||
+                process.env.API_KEY ||
+                '',
+        },
+        body,
+    }) as Promise<InvoiceLookupResponseType>;

package/src/assets/styles/general.scss

@@ -17,6 +17,10 @@
     align-items: center;
 }
 
+.gap-2 {
+    gap: 0.5rem
+}
+
 .mt-2 {
     margin-top: 0.5rem;
 }

package/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import './button.scss';
 type Props = {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     type?: 'button' | 'submit' | 'reset';
-    btnType?: 'primary';
+    btnType?: 'primary' | 'default';
     buttonText?: string;
     loading?: boolean;
     disable?: boolean;

package/src/components/EHFForm/EHFForm.tsx

@@ -0,0 +1,125 @@
+import { FC, useState } from 'react';
+import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
+
+import { invoiceLookup } from '../../api/InvoiceApi';
+import Alert from '../Alert/Alert';
+import Button from '../Button/Button';
+import InputField from '../FormFields/InputField';
+import {
+    prepareErrorMessage,
+    prepareErrorsArrayMessage,
+} from '../../utils/helper';
+import { InvoiceLookupNetworkEnum } from '../../enums/general';
+import { ErrorsMsg } from '../../types/general';
+
+type Props = {
+    callback: (value: string) => void;
+    onBack: () => void;
+    backButtonText?: string;
+    verifyButtonText?: string;
+    organizationNumberLabel?: string;
+    className?: string;
+};
+
+type EHFFormInputsType = {
+    organizationNumber: string;
+};
+
+const initialData = {
+    organizationNumber: '',
+};
+
+const EHFForm: FC<Props> = ({
+    callback,
+    onBack,
+    backButtonText = '',
+    verifyButtonText = '',
+    organizationNumberLabel = '',
+    className = '',
+}) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
+    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
+
+    const methods = useForm<EHFFormInputsType>({
+        defaultValues: {
+            ...initialData,
+        },
+    });
+
+    const {
+        handleSubmit,
+        formState: { errors },
+    } = methods;
+
+    const onSubmit: SubmitHandler<EHFFormInputsType> = async (
+        data
+    ): Promise<void> => {
+        setApiErrorMsg('');
+        setErrorsMsg([]);
+        setLoading(true);
+        try {
+            await invoiceLookup({
+                network: InvoiceLookupNetworkEnum.EHF,
+                value: data.organizationNumber,
+            });
+            callback(data.organizationNumber);
+        } catch (error) {
+            setApiErrorMsg(prepareErrorMessage(error as Error));
+            setErrorsMsg(
+                prepareErrorsArrayMessage(
+                    (
+                        error as {
+                            errors: ErrorsMsg;
+                        }
+                    )?.errors
+                )
+            );
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleBack = () => {
+        onBack?.();
+    };
+
+    return (
+        <FormProvider {...methods}>
+            <form
+                className={`${className}`}
+                onSubmit={handleSubmit(onSubmit)}
+                data-testid="ehf-form-id"
+            >
+                <InputField
+                    name="organizationNumber"
+                    label={organizationNumberLabel}
+                    required
+                    readOnly={false}
+                    errors={errors}
+                />
+                <div className="d-flex justify-center flex-wrap gap-2">
+                    <Button
+                        type="button"
+                        btnType="default"
+                        disable={loading}
+                        buttonText={backButtonText}
+                        onClick={handleBack}
+                    />
+
+                    <Button
+                        type="submit"
+                        loading={loading}
+                        buttonText={verifyButtonText}
+                    />
+                </div>
+
+                {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
+                {errorsMsg?.length > 0 &&
+                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+            </form>
+        </FormProvider>
+    );
+};
+
+export default EHFForm;

package/src/components/OIOForm/OIOForm.tsx

@@ -0,0 +1,141 @@
+import { FC, useState } from 'react';
+import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
+
+import { invoiceLookup } from '../../api/InvoiceApi';
+import Alert from '../Alert/Alert';
+import Button from '../Button/Button';
+import InputField from '../FormFields/InputField';
+import {
+    prepareErrorMessage,
+    prepareErrorsArrayMessage,
+} from '../../utils/helper';
+import { InvoiceLookupNetworkEnum } from '../../enums/general';
+import { ErrorsMsg } from '../../types/general';
+
+type Props = {
+    callback: (value: string) => void;
+    onBack: () => void;
+    backButtonText?: string;
+    verifyButtonText?: string;
+    organizationNumberLabel?: string;
+    glnLabel?: string;
+    className?: string;
+};
+
+type OIOFormInputsType = {
+    cvr: string;
+    gln: string;
+};
+
+const initialData = {
+    cvr: '',
+    gln: '',
+};
+
+const EHFForm: FC<Props> = ({
+    callback,
+    onBack,
+    backButtonText = '',
+    verifyButtonText = '',
+    organizationNumberLabel = '',
+    glnLabel = '',
+    className = '',
+}) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
+    const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
+
+    const methods = useForm<OIOFormInputsType>({
+        defaultValues: {
+            ...initialData,
+        },
+    });
+
+    const {
+        handleSubmit,
+        watch,
+        formState: { errors },
+    } = methods;
+
+    const cvr = watch('cvr');
+    const gln = watch('gln');
+
+    const onSubmit: SubmitHandler<OIOFormInputsType> = async (
+        data
+    ): Promise<void> => {
+        setApiErrorMsg('');
+        setErrorsMsg([]);
+        setLoading(true);
+        try {
+            await invoiceLookup({
+                network: data.gln
+                    ? InvoiceLookupNetworkEnum.OIO_GLN
+                    : InvoiceLookupNetworkEnum.OIO_Danish_CVR,
+                value: data.gln || data.cvr,
+            });
+            callback(data.gln || data.cvr);
+        } catch (error) {
+            setApiErrorMsg(prepareErrorMessage(error as Error));
+            setErrorsMsg(
+                prepareErrorsArrayMessage(
+                    (
+                        error as {
+                            errors: ErrorsMsg;
+                        }
+                    )?.errors
+                )
+            );
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleBack = () => {
+        onBack?.();
+    };
+
+    return (
+        <FormProvider {...methods}>
+            <form
+                className={`${className}`}
+                onSubmit={handleSubmit(onSubmit)}
+                data-testid="oio-form-id"
+            >
+                <InputField
+                    name="cvr"
+                    label={organizationNumberLabel}
+                    required={!gln}
+                    readOnly={false}
+                    errors={!gln ? errors : undefined}
+                />
+                <InputField
+                    name="gln"
+                    label={glnLabel}
+                    required={!cvr}
+                    readOnly={false}
+                    errors={!cvr ? errors : undefined}
+                />
+                <div className="d-flex justify-center flex-wrap gap-2">
+                    <Button
+                        type="button"
+                        btnType="default"
+                        disable={loading}
+                        buttonText={backButtonText}
+                        onClick={handleBack}
+                    />
+
+                    <Button
+                        type="submit"
+                        loading={loading}
+                        buttonText={verifyButtonText}
+                    />
+                </div>
+                {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
+                {errorsMsg?.length > 0 &&
+                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+            </form>
+        </FormProvider>
+    );
+};
+
+export default EHFForm;

package/src/components/OrderForm/OrderForm.tsx

@@ -43,7 +43,7 @@ type Props = {
     paymentMethodsOptions?: PaymentMethodOptionsType;
     defaultValues?: OrderFormInputsType;
     paymentMethods?: { label: string; value: PaymentMethodEnum }[];
-    buttonText?: string;
+    submitButtonText?: string;
     paymentMethodLabel?: string;
     errorReqMsg?: string;
     errorInvalidEmailMsg?: string;
@@ -83,7 +83,7 @@ const OrderForm: FC<Props> = ({
     merchantAgreementUrl,
     paymentMethods = [],
     invoiceAddressSelection,
-    buttonText = 'Start',
+    submitButtonText = 'Start',
     paymentMethodLabel = 'Select Payment Method',
     errorReqMsg = '',
     errorInvalidEmailMsg = '',
@@ -311,7 +311,7 @@ const OrderForm: FC<Props> = ({
                 <Button
                     type="submit"
                     loading={loading}
-                    buttonText={buttonText}
+                    buttonText={submitButtonText}
                 />
                 <Alert className="mt-2" msg={apiErrorMsg} />
                 {errorsMsg?.length > 0 &&

package/src/enums/general.ts

@@ -16,3 +16,15 @@ export enum MessageEventTypeEnum {
     CANCEL = 'cancel',
     COMPLETE = 'complete',
 }
+
+export enum InvoiceLookupNetworkEnum {
+    EHF = '0192',
+    OIO_GLN = '0088',
+    OIO_Danish_CVR = '0096',
+}
+
+export enum FormTypeEnum {
+    ORDER = 'order',
+    EHF = 'EHF',
+    OIO = 'OIO',
+}

package/src/types/general.ts

@@ -46,7 +46,11 @@ export type ConfigType = {
     settings?: {
         successText?: string;
         failureText?: string;
-        buttonText?: string;
+        submitButtonText?: string;
+        backButtonText?: string;
+        verifyButtonText?: string;
+        organizationNumberLabel?: string;
+        glnLabel?: string;
         orderDefaultValues?: OrderFormInputsType;
         paymentMethodLabel?: string;
         errorReqMsg?: string;