@infosoftas/s4-orders-js-sdk 0.1.9 → 0.1.11

package/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.release-it.json

@@ -1,10 +1,10 @@
 {
-  "$schema": "https://unpkg.com/release-it/schema/release-it.json",
-  "git": {
-    "changelog" : "",
-    "requireBranch": "release/*"
-  },
-  "github": {
-    "release": true
-  }
+    "$schema": "https://unpkg.com/release-it/schema/release-it.json",
+    "git": {
+        "changelog": "",
+        "requireBranch": "release/*"
+    },
+    "github": {
+        "release": true
+    }
 }

package/README.md

@@ -75,6 +75,7 @@ type ConfigType = {
     moduleTitle?: string;
     submitStartCallback?: (subscriberId: string) => void;
     userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    setContactCallback?: (contactInfo: contactRequestType) => void;
     apiKey: string;
     apiUrl: string;
     templatePackageId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.1.9",
+    "version": "0.1.11",
     "scripts": {
         "build": "rimraf lib && webpack --mode production",
         "release": "release-it"
@@ -24,7 +24,7 @@
         "@types/react": "^19.2.6",
         "@types/react-dom": "^19.2.3",
         "babel-loader": "^10.0.0",
-        "copy-webpack-plugin": "^13.0.1",
+        "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.2",
         "mini-css-extract-plugin": "^2.9.4",
         "release-it": "^19.0.6",
@@ -34,7 +34,7 @@
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.4",
         "typescript": "^5.9.3",
-        "webpack": "^5.103.0",
+        "webpack": "^5.105.2",
         "webpack-cli": "^6.0.1"
     },
     "publishConfig": {

package/src/App.scss

@@ -2,7 +2,6 @@
 @import './assets/styles/general.scss';
 
 .sdk-order-container {
-
     *,
     *::before,
     *::after {
@@ -10,15 +9,15 @@
     }
 
     .sdk-iframe-wrapper {
-        display       : flex;
+        display: flex;
         flex-direction: column;
-        align-items   : center;
+        align-items: center;
     }
 
     iframe {
-        max-width    : 640px;
-        border       : none;
-        background   : transparent;
+        max-width: 640px;
+        border: none;
+        background: transparent;
         border-radius: $border-radius * 2;
     }
-}
+}

package/src/App.tsx

@@ -62,8 +62,10 @@ const App: FC<ConfigType> = ({
         errorInvalidEmailMsg: '',
         errorInvalidPhoneMsg: '',
         errorValidationTitleMsg: 'One or more validation errors occurred.',
-        errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
-        errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
+        errorValidationDenialOrderBlockingMsg:
+            'The order/subscription will not be created because the subscriber has a denial order blocking all.',
+        errorValidationBlockingOffersMsg:
+            'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
         paymentMethodNotAllowedMsg: '',
         invoiceLookupNotFoundText:
             'There was no recipient found for the given information',
@@ -110,8 +112,15 @@ const App: FC<ConfigType> = ({
         try {
             // There is no way to detect the difference between "cancelled" and "accepted" payment for Vipps via UI
             // Completing an order for cancelled payment is fine. The backend handles it correctly.
-
-            await orderComplete(orderId || data.orderId || '');
+            await orderComplete(
+                orderId || data.orderId || '',
+                userId && identityProviderId
+                    ? {
+                          userId,
+                          identityProviderId,
+                      }
+                    : undefined
+            );
             setIsConfirmed(true);
             setLoading(false);
             if (window === top) {
@@ -151,7 +160,9 @@ const App: FC<ConfigType> = ({
             setLoading(false);
             setShowOrderForm(true);
             setFormType(FormTypeEnum.ORDER);
-            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
+            userActionCallback?.(UserActionEnum.SELECT_FORM, {
+                form: FormTypeEnum.ORDER,
+            });
         }
     };
 
@@ -245,10 +256,14 @@ const App: FC<ConfigType> = ({
             });
         } else if (data?.paymentMethod === PaymentMethodEnum.EHF) {
             setFormType(FormTypeEnum.EHF);
-            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.EHF });
+            userActionCallback?.(UserActionEnum.SELECT_FORM, {
+                form: FormTypeEnum.EHF,
+            });
         } else if (data?.paymentMethod === PaymentMethodEnum.OIO) {
             setFormType(FormTypeEnum.OIO);
-            userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.OIO });
+            userActionCallback?.(UserActionEnum.SELECT_FORM, {
+                form: FormTypeEnum.OIO,
+            });
         } else if (url) {
             if (
                 showIframe &&
@@ -270,13 +285,17 @@ const App: FC<ConfigType> = ({
 
     const handleInvoiceBack = () => {
         setFormType(FormTypeEnum.ORDER);
-        userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
+        userActionCallback?.(UserActionEnum.SELECT_FORM, {
+            form: FormTypeEnum.ORDER,
+        });
     };
 
     const updateFormData = (data: OrderFormInputsType) => {
         setOrderFormValues(data);
         setFormType(data.paymentMethod as unknown as FormTypeEnum);
-        userActionCallback?.(UserActionEnum.SELECT_FORM, { form: data.paymentMethod });
+        userActionCallback?.(UserActionEnum.SELECT_FORM, {
+            form: data.paymentMethod,
+        });
     };
 
     const handleInvoiceForm = async (
@@ -345,9 +364,15 @@ const App: FC<ConfigType> = ({
                                 }
                                 userActionCallback={userActionCallback}
                                 setContactCallback={setContactCallback}
-                                errorValidationTitleMsg={settings?.errorValidationTitleMsg}
-                                errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
-                                errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
+                                errorValidationTitleMsg={
+                                    settings?.errorValidationTitleMsg
+                                }
+                                errorValidationDenialOrderBlockingMsg={
+                                    settings?.errorValidationDenialOrderBlockingMsg
+                                }
+                                errorValidationBlockingOffersMsg={
+                                    settings?.errorValidationBlockingOffersMsg
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -381,13 +406,20 @@ const App: FC<ConfigType> = ({
                                 }
                                 userActionCallback={userActionCallback}
                                 setContactCallback={setContactCallback}
-                                errorValidationTitleMsg={settings?.errorValidationTitleMsg}
-                                errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
-                                errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
+                                errorValidationTitleMsg={
+                                    settings?.errorValidationTitleMsg
+                                }
+                                errorValidationDenialOrderBlockingMsg={
+                                    settings?.errorValidationDenialOrderBlockingMsg
+                                }
+                                errorValidationBlockingOffersMsg={
+                                    settings?.errorValidationBlockingOffersMsg
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
-                            formType !== FormTypeEnum.EHF && templatePackageId && (
+                            formType !== FormTypeEnum.EHF &&
+                            templatePackageId && (
                                 <OrderForm
                                     callback={handleForm}
                                     updateFormData={updateFormData}
@@ -430,9 +462,15 @@ const App: FC<ConfigType> = ({
                                     }
                                     userActionCallback={userActionCallback}
                                     setContactCallback={setContactCallback}
-                                    errorValidationTitleMsg={settings?.errorValidationTitleMsg}
-                                    errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
-                                    errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
+                                    errorValidationTitleMsg={
+                                        settings?.errorValidationTitleMsg
+                                    }
+                                    errorValidationDenialOrderBlockingMsg={
+                                        settings?.errorValidationDenialOrderBlockingMsg
+                                    }
+                                    errorValidationBlockingOffersMsg={
+                                        settings?.errorValidationBlockingOffersMsg
+                                    }
                                 />
                             )}
                     </>

package/src/api/InvoiceApi.ts

@@ -17,8 +17,7 @@ export const invoiceLookup = (
         method: 'POST',
         url: '/invoicelookup',
         headers: {
-            'S4-ORDERS-API-KEY':
-                sessionStorage.getItem('sdk_api_key') || '',
+            'S4-ORDERS-API-KEY': sessionStorage.getItem('sdk_api_key') || '',
         },
         body,
     }) as Promise<InvoiceLookupResponseType>;

package/src/api/OrdersApi.ts

@@ -13,6 +13,11 @@ type RequestOrderStartType = {
     orderReference?: string;
 };
 
+type OrderCompleteRequestType = {
+    userId: string;
+    identityProviderId: string;
+};
+
 type OrderResponseType = {
     terminalRedirectUrl: string;
     id: string;
@@ -25,21 +30,22 @@ export const orderStart = (
         method: 'POST',
         url: '/order',
         headers: {
-            'S4-ORDERS-API-KEY':
-                sessionStorage.getItem('sdk_api_key') || '',
+            'S4-ORDERS-API-KEY': sessionStorage.getItem('sdk_api_key') || '',
         },
         body,
     }) as Promise<OrderResponseType>;
 
-export const orderComplete = (id: string): Promise<OrderResponseType> =>
-    fetcher<OrderResponseType, null>({
+export const orderComplete = (
+    id: string,
+    body?: OrderCompleteRequestType
+): Promise<OrderResponseType> =>
+    fetcher<OrderResponseType, OrderCompleteRequestType | null>({
         method: 'POST',
         url: `/order/${id}/complete`,
         headers: {
-            'S4-ORDERS-API-KEY':
-                sessionStorage.getItem('sdk_api_key') || '',
+            'S4-ORDERS-API-KEY': sessionStorage.getItem('sdk_api_key') || '',
         },
-        body: null,
+        body: body || null,
     }) as Promise<OrderResponseType>;
 
 export const orderDelete = (id: string): Promise<OrderResponseType> =>
@@ -47,8 +53,7 @@ export const orderDelete = (id: string): Promise<OrderResponseType> =>
         method: 'DELETE',
         url: `/order/${id}`,
         headers: {
-            'S4-ORDERS-API-KEY':
-                sessionStorage.getItem('sdk_api_key') || '',
+            'S4-ORDERS-API-KEY': sessionStorage.getItem('sdk_api_key') || '',
         },
         body: null,
     }) as Promise<OrderResponseType>;

package/src/api/SubscribeApi.ts

@@ -5,15 +5,6 @@ type CreateSubscriberResponseType = {
     id: string;
 };
 
-type MapSubscriberToUserRequestType = {
-    identityProviderId: string;
-    userId: string;
-};
-
-type MapSubscriberToUserResponseType = {
-    id: string;
-};
-
 export const createSubscriber = (
     body: CreateSubscriberRequestType
 ): Promise<CreateSubscriberResponseType> =>
@@ -21,22 +12,7 @@ export const createSubscriber = (
         method: 'POST',
         url: '/subscriber',
         headers: {
-            'S4-ORDERS-API-KEY':
-                sessionStorage.getItem('sdk_api_key') || '',
+            'S4-ORDERS-API-KEY': sessionStorage.getItem('sdk_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') || '',
-        },
-        body,
-    }) as Promise<MapSubscriberToUserResponseType>;

package/src/assets/styles/forms.scss

@@ -1,24 +1,24 @@
 @import './variables.scss';
 
 .field-label {
-    display      : block;
+    display: block;
     margin-bottom: 0.375em;
-    font-weight  : 500;
-    text-align   : left;
+    font-weight: 500;
+    text-align: left;
 }
 
 .field-wrapper {
-    display       : flex;
+    display: flex;
     flex-direction: column;
-    width         : 100%;
-    margin-bottom : 20px;
+    width: 100%;
+    margin-bottom: 20px;
 
     label {
-        display      : block;
-        order        : 1;
+        display: block;
+        order: 1;
         margin-bottom: 0.375em;
-        font-weight  : 500;
-        text-align   : left;
+        font-weight: 500;
+        text-align: left;
     }
 
     .caption {
@@ -31,13 +31,13 @@
 }
 
 .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;
+    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],
@@ -45,9 +45,9 @@
     &:read-only,
     .disabled,
     .red-only {
-        border-color    : $input-border-disabled-color;
+        border-color: $input-border-disabled-color;
         background-color: $input-border-disabled-bg-color;
-        cursor          : not-allowed;
+        cursor: not-allowed;
     }
 
     &:focus {
@@ -57,18 +57,18 @@
 
 .radio-button-control {
     label {
-        display      : flex;
+        display: flex;
         margin-bottom: 0.375em;
-        font-weight  : 500;
-        position     : relative;
-        overflow     : hidden;
-        cursor       : pointer;
+        font-weight: 500;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
 
         input {
             position: absolute;
-            left    : -9999px;
+            left: -9999px;
 
-            &:checked+span.value-block {
+            &:checked + span.value-block {
                 background-color: mix($white, $primary-color, 84%);
 
                 &:before {
@@ -78,27 +78,27 @@
         }
 
         span.value-block {
-            display      : flex;
-            align-items  : center;
-            padding      : 0.375em 0.75em 0.375em 0.375em;
+            display: flex;
+            align-items: center;
+            padding: 0.375em 0.75em 0.375em 0.375em;
             border-radius: 20px;
-            transition   : 0.25s ease;
+            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%;
+                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;
+                box-shadow: inset 0 0 0 0.125em $primary-color;
+                transition: 0.25s ease;
             }
         }
     }
@@ -110,47 +110,47 @@
 
 .sdk-on-off {
     position: relative;
-    display : inline-block;
-    width   : 60px;
-    height  : 28px;
+    display: inline-block;
+    width: 60px;
+    height: 28px;
 
     input {
         opacity: 0;
-        width  : 0;
-        height : 0;
+        width: 0;
+        height: 0;
     }
 
-    input:checked+.slider:before {
+    input:checked + .slider:before {
         -webkit-transform: translateX(32px);
-        -ms-transform    : translateX(32px);
-        transform        : translateX(32px);
+        -ms-transform: translateX(32px);
+        transform: translateX(32px);
     }
 
-    input:checked+.slider {
+    input:checked + .slider {
         background-color: $primary-color;
     }
 
     .slider {
-        position          : absolute;
-        cursor            : pointer;
-        top               : 0;
-        left              : 0;
-        right             : 0;
-        bottom            : 0;
-        background-color  : $input-border-disabled-color;
-        -webkit-transition: .4s;
-        transition        : .4s;
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: $input-border-disabled-color;
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
 
         &:before {
-            position          : absolute;
-            content           : "";
-            height            : 24px;
-            width             : 24px;
-            left              : 2px;
-            bottom            : 2px;
-            background-color  : white;
-            -webkit-transition: .4s;
-            transition        : .4s;
+            position: absolute;
+            content: '';
+            height: 24px;
+            width: 24px;
+            left: 2px;
+            bottom: 2px;
+            background-color: white;
+            -webkit-transition: 0.4s;
+            transition: 0.4s;
         }
 
         &.round {
@@ -161,4 +161,4 @@
             }
         }
     }
-}
+}

package/src/assets/styles/general.scss

@@ -18,7 +18,7 @@
 }
 
 .gap-2 {
-    gap: 0.5rem
+    gap: 0.5rem;
 }
 
 .mt-2 {
@@ -34,7 +34,7 @@
 }
 
 .text-success {
-    color: $success-color !important
+    color: $success-color !important;
 }
 
 .text-center {
@@ -43,4 +43,4 @@
 
 .caption {
     font-size: $xs-font-size;
-}
+}

package/src/assets/styles/variables.scss

@@ -1,29 +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;
+$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;
+$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.scss

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

package/src/components/Button/button.scss

@@ -1,48 +1,48 @@
-@use "sass:color";
+@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;
+    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;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
 
     &.loading,
     &.disabled,
     &:disabled {
-        opacity       : 0.75;
+        opacity: 0.75;
         pointer-events: none;
     }
 
     &.primary-btn {
-        color           : $white;
+        color: $white;
         background-color: $primary-color;
-        border-color    : color.scale($primary-color, $lightness: -20%);
+        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%);
+            border-color: color.scale($primary-color, $lightness: -30%);
         }
     }
-}
+}

package/src/components/EHFForm/EHFForm.tsx

@@ -19,7 +19,10 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
     submitStartCallback?: (id: string) => void;
-    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
     className?: string;
     backButtonText?: string;
@@ -45,9 +48,9 @@ type Props = {
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
-    errorValidationTitleMsg?: string,
-    errorValidationDenialOrderBlockingMsg?: string,
-    errorValidationBlockingOffersMsg?: string,
+    errorValidationTitleMsg?: string;
+    errorValidationDenialOrderBlockingMsg?: string;
+    errorValidationBlockingOffersMsg?: string;
 };
 
 type EHFFormInputsType = {
@@ -84,7 +87,7 @@ const EHFForm: FC<Props> = ({
     invoiceLookupNotFoundText,
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
-    errorValidationBlockingOffersMsg
+    errorValidationBlockingOffersMsg,
 }) => {
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
@@ -126,7 +129,7 @@ const EHFForm: FC<Props> = ({
         invoiceLookupNotFoundText,
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
-        errorValidationBlockingOffersMsg
+        errorValidationBlockingOffersMsg,
     });
 
     const onSubmit: SubmitHandler<EHFFormInputsType> = async (

package/src/components/FormFields/AddressField.tsx

@@ -40,12 +40,14 @@ const AddressField: FC<Props> = ({
                 {...register(name, {
                     required: required ? errorReqMsg : false,
                 })}
-                {...(required ? {
-                    onBlur: () => {
-                        const newValue = value?.trim() || '';
-                        setValue(name, newValue);
-                    },
-                } : '')}
+                {...(required
+                    ? {
+                          onBlur: () => {
+                              const newValue = value?.trim() || '';
+                              setValue(name, newValue);
+                          },
+                      }
+                    : '')}
             />
             <label className="label-control" htmlFor={id}>
                 {label} {required && <span className="text-error">*</span>}

package/src/components/FormFields/ToggleFiled.tsx

@@ -24,7 +24,7 @@ const ToggleField: FC<Props> = ({
     label = '',
     errorReqMsg = 'This field is required!',
     errors,
-    toggleCallback
+    toggleCallback,
 }) => {
     const { register } = useFormContext();
     const id = uuidv4();
@@ -46,7 +46,9 @@ const ToggleField: FC<Props> = ({
                         {...register(name, {
                             required: required ? errorReqMsg : false,
                         })}
-                        onClick={(e) => toggleCallback?.(e.currentTarget.checked)}
+                        onClick={(e) =>
+                            toggleCallback?.(e.currentTarget.checked)
+                        }
                     />
                     <span className="slider round"></span>
                 </label>

package/src/components/Loader/loader.scss

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

package/src/components/OIOForm/OIOForm.tsx

@@ -20,7 +20,10 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     onBack: () => void;
     submitStartCallback?: (id: string) => void;
-    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
     className?: string;
     backButtonText?: string;
@@ -46,9 +49,9 @@ type Props = {
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
-    errorValidationTitleMsg?: string,
-    errorValidationDenialOrderBlockingMsg?: string,
-    errorValidationBlockingOffersMsg?: string,
+    errorValidationTitleMsg?: string;
+    errorValidationDenialOrderBlockingMsg?: string;
+    errorValidationBlockingOffersMsg?: string;
 };
 
 type OIOFormInputsType = {
@@ -88,7 +91,7 @@ const EHFForm: FC<Props> = ({
     invoiceLookupNotFoundText,
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
-    errorValidationBlockingOffersMsg
+    errorValidationBlockingOffersMsg,
 }) => {
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
@@ -134,7 +137,7 @@ const EHFForm: FC<Props> = ({
         invoiceLookupNotFoundText,
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
-        errorValidationBlockingOffersMsg
+        errorValidationBlockingOffersMsg,
     });
 
     const onSubmit: SubmitHandler<OIOFormInputsType> = async (

package/src/components/OrderForm/OrderForm.tsx

@@ -1,4 +1,4 @@
-import { FC, ChangeEvent, Suspense, useState, useMemo } from 'react';
+import { FC, ChangeEvent, Suspense, useState, useMemo, useEffect } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
@@ -26,7 +26,10 @@ type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     updateFormData: (data: OrderFormInputsType) => void;
     submitStartCallback?: (id: string) => void;
-    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
     templatePackageId: string;
     subscriberId?: string;
@@ -53,9 +56,9 @@ type Props = {
         fields?: OrderFormFiledType[];
         paymentMethods?: PaymentMethodEnum[];
     };
-    errorValidationTitleMsg?: string,
-    errorValidationDenialOrderBlockingMsg?: string,
-    errorValidationBlockingOffersMsg?: string,
+    errorValidationTitleMsg?: string;
+    errorValidationDenialOrderBlockingMsg?: string;
+    errorValidationBlockingOffersMsg?: string;
 };
 
 const initialData = {
@@ -99,15 +102,14 @@ const OrderForm: FC<Props> = ({
     errorInvalidPhoneMsg = '',
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
-    errorValidationBlockingOffersMsg
+    errorValidationBlockingOffersMsg,
 }) => {
-
     if (!templatePackageId) {
-        console.error('"templatePackageId" should be set' );
+        console.error('"templatePackageId" should be set');
     }
 
     if (!organizationId) {
-        console.error('"organizationId" should be set' );
+        console.error('"organizationId" should be set');
     }
 
     if (!subscriberId) {
@@ -118,11 +120,11 @@ const OrderForm: FC<Props> = ({
     }
 
     if (!userId) {
-        console.error('"userId" should be set' );
+        console.error('"userId" should be set');
     }
 
     if (!identityProviderId) {
-        console.error('"identityProviderId" should be set' );
+        console.error('"identityProviderId" should be set');
     }
 
     const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
@@ -148,6 +150,12 @@ const OrderForm: FC<Props> = ({
         formState: { errors },
     } = methods;
 
+    useEffect(() => {
+        userActionCallback?.(UserActionEnum.SELECT_PAYMENT_METHOD, {
+            paymentMethod: methods.getValues('paymentMethod'),
+        });
+    }, []);
+
     const invoiceAddressToggle = watch('invoiceAddressSelection');
     const paymentMethodInput = watch('paymentMethod');
 
@@ -181,7 +189,7 @@ const OrderForm: FC<Props> = ({
         invoiceOrderFields,
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
-        errorValidationBlockingOffersMsg
+        errorValidationBlockingOffersMsg,
     });
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
@@ -209,7 +217,9 @@ const OrderForm: FC<Props> = ({
             setValue('invoiceAddressSelection', false);
         }
 
-        userActionCallback?.(UserActionEnum.SELECT_PAYMENT_METHOD, { paymentMethod: e.target.value });
+        userActionCallback?.(UserActionEnum.SELECT_PAYMENT_METHOD, {
+            paymentMethod: e.target.value,
+        });
     };
 
     const allowPaymentMethod = useMemo(() => {
@@ -305,7 +315,12 @@ const OrderForm: FC<Props> = ({
                         label={
                             invoiceAddressSelection?.label ?? 'Invoice Address'
                         }
-                        toggleCallback={e => userActionCallback?.(UserActionEnum.TOGGLE_INVOICE_ADDRESS, { value: e })}
+                        toggleCallback={(e) =>
+                            userActionCallback?.(
+                                UserActionEnum.TOGGLE_INVOICE_ADDRESS,
+                                { value: e }
+                            )
+                        }
                     />
                 )}
                 {showInvoiceFields && (

package/src/components/OrderForm/orderForm.scss

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

package/src/hooks/useOrderForm.tsx

@@ -1,10 +1,14 @@
 import { useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 
-import { createSubscriber, mapSubscriberToUser } from '../api/SubscribeApi';
+import { createSubscriber } from '../api/SubscribeApi';
 import { orderStart } from '../api/OrdersApi';
 import { invoiceLookup } from '../api/InvoiceApi';
-import { InvoiceLookupNetworkEnum, PaymentMethodEnum, UserActionEnum } from '../enums/general';
+import {
+    InvoiceLookupNetworkEnum,
+    PaymentMethodEnum,
+    UserActionEnum,
+} from '../enums/general';
 import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
 import { OrderFormInputsType, OrderInfoType } from '../types/order';
 import {
@@ -27,7 +31,10 @@ import {
 type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
     submitStartCallback?: (id: string) => void;
-    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
     templatePackageId: string;
     subscriberId?: string;
@@ -43,9 +50,9 @@ type Props = {
     invoiceAddressToggle?: boolean;
     invoiceOrderFields: OrderFormFiledType[];
     invoiceLookupNotFoundText?: string;
-    errorValidationTitleMsg?: string,
-    errorValidationDenialOrderBlockingMsg?: string,
-    errorValidationBlockingOffersMsg?: string
+    errorValidationTitleMsg?: string;
+    errorValidationDenialOrderBlockingMsg?: string;
+    errorValidationBlockingOffersMsg?: string;
 };
 
 const useOrderForm = ({
@@ -69,7 +76,7 @@ const useOrderForm = ({
     invoiceLookupNotFoundText,
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
-    errorValidationBlockingOffersMsg
+    errorValidationBlockingOffersMsg,
 }: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
@@ -100,15 +107,20 @@ const useOrderForm = ({
             }
 
             // TODO: "recievesInvoice" should be deleted in the future
-            const receivesInvoice = invoiceResponse?.receivesInvoice || invoiceResponse?.recievesInvoice;
+            const receivesInvoice =
+                invoiceResponse?.receivesInvoice ||
+                invoiceResponse?.recievesInvoice;
 
             if (invoiceResponse) {
-                userActionCallback?.(UserActionEnum.SEARCH_ORGANIZATION_NUMBER, {
-                    organizationNumber: data.organizationNumber,
-                    cvr: data.cvr,
-                    gln: data.gln,
-                    found: !!receivesInvoice
-                });
+                userActionCallback?.(
+                    UserActionEnum.SEARCH_ORGANIZATION_NUMBER,
+                    {
+                        organizationNumber: data.organizationNumber,
+                        cvr: data.cvr,
+                        gln: data.gln,
+                        found: !!receivesInvoice,
+                    }
+                );
             }
 
             if (invoiceResponse && !receivesInvoice) {
@@ -130,22 +142,12 @@ const useOrderForm = ({
                         data.paymentMethod === PaymentMethodEnum.OIO
                             ? data?.cvr
                             : data.organizationNumber || undefined,
+                    ...(userId &&
+                        identityProviderId && { userId, identityProviderId }),
                 });
                 id = response.id;
 
                 sessionStorage.setItem('subscriberId', id); // For avoiding attempt of creating subscriber again
-
-                if (userId && identityProviderId) {
-                    const mapResponse = await mapSubscriberToUser(id, {
-                        userId: userId,
-                        identityProviderId: identityProviderId,
-                    });
-
-                    if (!mapResponse.id) {
-                        setErrorsMsg([WRONG_MSG]);
-                        return;
-                    }
-                }
             }
 
             if (setContactCallback) {
@@ -206,15 +208,16 @@ const useOrderForm = ({
             setApiErrorMsg(WRONG_MSG);
             setErrorsMsg([]);
         } catch (error) {
-
             const translations = {
                 errorValidationTitleMsg,
                 errorValidationBlockingOffersMsg,
-                errorValidationDenialOrderBlockingMsg
+                errorValidationDenialOrderBlockingMsg,
             } as ErrorMessages;
 
             console.error(error);
-            setApiErrorMsg(prepareErrorMessage(error as Error, undefined, translations));
+            setApiErrorMsg(
+                prepareErrorMessage(error as Error, undefined, translations)
+            );
             setErrorsMsg(
                 prepareErrorsArrayMessage(
                     (

package/src/index.tsx

@@ -2,19 +2,18 @@ import { createRoot, Root } from 'react-dom/client';
 import { createElement } from 'react';
 
 import { ConfigType } from './types/general';
-import { createSubscriber, mapSubscriberToUser } from './api/SubscribeApi';
+import { createSubscriber } from './api/SubscribeApi';
 import App from './App';
 
 export const orderComponent = {
     root: null as Root | null,
     init: function (config: ConfigType) {
-
         if (!config.apiKey) {
-            console.error('"apiKey" should be set' );
+            console.error('"apiKey" should be set');
         }
-        
+
         if (!config.apiUrl) {
-            console.error('"apiUrl" should be set' );
+            console.error('"apiUrl" should be set');
         }
 
         const domNode = document.getElementById(config.domElementId);
@@ -28,5 +27,4 @@ export const orderComponent = {
         (orderComponent.root as Root)?.unmount();
     },
     createSubscriber,
-    mapSubscriberToUser,
 };

package/src/types/api.ts

@@ -23,4 +23,6 @@ export type CreateSubscriberRequestType = {
     buyerReference?: string;
     gln?: string;
     organizationNumber?: string;
+    identityProviderId?: string;
+    userId?: string;
 };

package/src/types/general.ts

@@ -36,7 +36,10 @@ export type ContactRequestType = {
 
 export type ConfigType = {
     submitStartCallback?: (subscriberId: string) => void;
-    userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
     domElementId: string;
     moduleTitle?: string;

package/src/utils/helper.ts

@@ -1,7 +1,11 @@
 import { WRONG_MSG } from '../constants/index';
 import { ErrorsMsg } from '../types/general';
 
-export const prepareErrorMessage = (error: Error, defaultMsg?: string, translations?: ErrorMessages) => {
+export const prepareErrorMessage = (
+    error: Error,
+    defaultMsg?: string,
+    translations?: ErrorMessages
+) => {
     if (typeof error === 'string') {
         try {
             const parsedError = JSON.parse(error);
@@ -10,12 +14,20 @@ export const prepareErrorMessage = (error: Error, defaultMsg?: string, translati
             return translateError(error, translations);
         }
     } else {
-        const serverErrorMsg = (error as { message: string })?.message as string;
-        return translateError(serverErrorMsg, translations) || defaultMsg || WRONG_MSG;
+        const serverErrorMsg = (error as { message: string })
+            ?.message as string;
+        return (
+            translateError(serverErrorMsg, translations) ||
+            defaultMsg ||
+            WRONG_MSG
+        );
     }
 };
 
-export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null, translations?: ErrorMessages) => {
+export const prepareErrorsArrayMessage = (
+    errors: ErrorsMsg | null,
+    translations?: ErrorMessages
+) => {
     const msg: string[] = [];
 
     if (errors) {
@@ -43,9 +55,9 @@ export function uuidv4() {
 }
 
 export type ErrorMessages = {
-    errorValidationTitleMsg: string,
-    errorValidationBlockingOffersMsg: string,
-    errorValidationDenialOrderBlockingMsg: string,
+    errorValidationTitleMsg: string;
+    errorValidationBlockingOffersMsg: string;
+    errorValidationDenialOrderBlockingMsg: string;
 };
 
 const translateError = (errorMsg: string, translations?: ErrorMessages) => {
@@ -53,8 +65,7 @@ const translateError = (errorMsg: string, translations?: ErrorMessages) => {
         return errorMsg;
     }
 
-    switch(errorMsg)
-    {
+    switch (errorMsg) {
         case 'One or more validation errors occurred.':
             return translations?.errorValidationTitleMsg;
         case 'The order/subscription will not be created because the subscriber has a denial order blocking offers.':
@@ -62,6 +73,6 @@ const translateError = (errorMsg: string, translations?: ErrorMessages) => {
         case 'The order/subscription will not be created because the subscriber has a denial order blocking all.':
             return translations?.errorValidationDenialOrderBlockingMsg;
         default:
-           return errorMsg; 
+            return errorMsg;
     }
-}
+};

package/src/utils/order.helper.ts

@@ -15,7 +15,17 @@ type AgreementModelType = {
 };
 
 const mapToSwedbankLanguage = (language: string) => {
-    const allowedLanguages = [ 'en-US', 'sv-SE', 'nb-NO', 'da-DK', 'fi-FI', 'en-GB', 'nn-NO', 'no-NO', 'se-NO' ];
+    const allowedLanguages = [
+        'en-US',
+        'sv-SE',
+        'nb-NO',
+        'da-DK',
+        'fi-FI',
+        'en-GB',
+        'nn-NO',
+        'no-NO',
+        'se-NO',
+    ];
     if (allowedLanguages.includes(language)) {
         return language;
     }