@infosoftas/s4-orders-js-sdk 0.0.1-alpha2b → 0.0.1-alpha2c.1

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/package.json

@@ -1,42 +1,44 @@
-{
-    "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha2b",
-    "scripts": {
-        "build": "rimraf lib && 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"
-    },
-    "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",
-        "copy-webpack-plugin": "^12.0.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",
-        "rimraf": "^6.0.1"
-    },
-    "publishConfig": {
-        "access": "restricted"
-    }
-}
+{
+  "name": "@infosoftas/s4-orders-js-sdk",
+  "version": "0.0.1-alpha2c.1",
+  "scripts": {
+    "build": "rimraf lib && webpack --env mode=production",
+    "release": "release-it"
+  },
+  "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"
+  },
+  "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",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "dotenv-webpack": "^8.1.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "release-it": "^17.10.0",
+    "rimraf": "^6.0.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": "public"
+  }
+}

package/src/components/OIOForm/OIOForm.tsx

@@ -106,14 +106,14 @@ const EHFForm: FC<Props> = ({
                     label={organizationNumberLabel}
                     required={!gln}
                     readOnly={false}
-                    errors={errors}
+                    errors={!gln ? errors : undefined}
                 />
                 <InputField
                     name="gln"
                     label={glnLabel}
                     required={!cvr}
                     readOnly={false}
-                    errors={errors}
+                    errors={!cvr ? errors : undefined}
                 />
                 <div className="d-flex justify-center flex-wrap gap-2">
                     <Button