@infosoftas/s4-orders-js-sdk 0.1.13-0 → 0.1.14

package/README.md

@@ -133,7 +133,11 @@ type ConfigType = {
         errorValidationBlockingOffersMsg?: string;
         paymentMethodNotAllowedMsg?: string;
         invoiceLookupNotFoundText?: string;
-        termsAndConditionsText?: string;
+        orderDenialOfferBaseText?: string;
+        orderDenialOfferWithFallbackText?: string;
+        orderDenialAmountText?: string;
+        fetchDenialFallbackOffer?: (organizationId: string) => Promise<OrderDenialFallbackOfferType | undefined>;
+        termsAndConditionsText?: string | ReactNode;
     };
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.1.13-0",
+    "version": "0.1.14",
     "scripts": {
         "build": "rimraf lib && webpack --mode production",
         "release": "release-it"
@@ -27,13 +27,13 @@
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.2",
         "mini-css-extract-plugin": "^2.9.4",
-        "release-it": "^19.0.6",
+        "release-it": "^20.0.0",
         "rimraf": "^6.1.2",
         "sass": "^1.94.2",
         "sass-loader": "^16.0.6",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.4",
-        "typescript": "^5.9.3",
+        "typescript": "^6.0.2",
         "webpack": "^5.105.2",
         "webpack-cli": "^6.0.1"
     },

package/src/App.tsx

@@ -68,6 +68,12 @@ const App: FC<ConfigType> = ({
             '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.',
+        orderDenialOfferBaseText:
+            'Hello again!\n\nLooks like you already tried this offer.',
+        orderDenialOfferWithFallbackText:
+            'Hello again!\n\nLooks like you already tried this offer, but we would like to keep you with us.\n\nTherefore we got a new great offer for you:',
+        orderDenialAmountText:
+            'We are sorry, but you do not meet the requirements for this offer. Please contact customer service for more information.',
         paymentMethodNotAllowedMsg: '',
         invoiceLookupNotFoundText:
             'There was no recipient found for the given information',
@@ -344,6 +350,12 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
+                                orderDenialCloseButtonText={
+                                    settings?.orderDenialCloseButtonText
+                                }
+                                orderDenialContinueButtonText={
+                                    settings?.orderDenialContinueButtonText
+                                }
                                 organizationNumberLabel={settings?.cvrLabel}
                                 glnLabel={settings?.glnLabel}
                                 organizationNumber={
@@ -377,6 +389,18 @@ const App: FC<ConfigType> = ({
                                 errorValidationBlockingOffersMsg={
                                     settings?.errorValidationBlockingOffersMsg
                                 }
+                                orderDenialOfferBaseText={
+                                    settings?.orderDenialOfferBaseText
+                                }
+                                orderDenialOfferWithFallbackText={
+                                    settings?.orderDenialOfferWithFallbackText
+                                }
+                                orderDenialAmountText={
+                                    settings?.orderDenialAmountText
+                                }
+                                fetchDenialFallbackOffer={
+                                    settings?.fetchDenialFallbackOffer
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -385,6 +409,12 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
+                                orderDenialCloseButtonText={
+                                    settings?.orderDenialCloseButtonText
+                                }
+                                orderDenialContinueButtonText={
+                                    settings?.orderDenialContinueButtonText
+                                }
                                 organizationNumberLabel={
                                     settings?.organizationNumberLabel
                                 }
@@ -419,6 +449,18 @@ const App: FC<ConfigType> = ({
                                 errorValidationBlockingOffersMsg={
                                     settings?.errorValidationBlockingOffersMsg
                                 }
+                                orderDenialOfferBaseText={
+                                    settings?.orderDenialOfferBaseText
+                                }
+                                orderDenialOfferWithFallbackText={
+                                    settings?.orderDenialOfferWithFallbackText
+                                }
+                                orderDenialAmountText={
+                                    settings?.orderDenialAmountText
+                                }
+                                fetchDenialFallbackOffer={
+                                    settings?.fetchDenialFallbackOffer
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
@@ -440,6 +482,12 @@ const App: FC<ConfigType> = ({
                                     submitButtonText={
                                         settings?.submitButtonText
                                     }
+                                    orderDenialCloseButtonText={
+                                        settings?.orderDenialCloseButtonText
+                                    }
+                                    orderDenialContinueButtonText={
+                                        settings?.orderDenialContinueButtonText
+                                    }
                                     paymentMethodLabel={
                                         settings?.paymentMethodLabel
                                     }
@@ -475,6 +523,18 @@ const App: FC<ConfigType> = ({
                                     errorValidationBlockingOffersMsg={
                                         settings?.errorValidationBlockingOffersMsg
                                     }
+                                    orderDenialOfferBaseText={
+                                        settings?.orderDenialOfferBaseText
+                                    }
+                                    orderDenialOfferWithFallbackText={
+                                        settings?.orderDenialOfferWithFallbackText
+                                    }
+                                    orderDenialAmountText={
+                                        settings?.orderDenialAmountText
+                                    }
+                                    fetchDenialFallbackOffer={
+                                        settings?.fetchDenialFallbackOffer
+                                    }
                                     termsAndConditionsText={
                                         settings?.termsAndConditionsText
                                     }
@@ -497,7 +557,9 @@ const App: FC<ConfigType> = ({
                 {isFailed && <Alert className="mt-2" msg={failedMsg} />}
                 {isFailed &&
                     errorsMsg?.length > 0 &&
-                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+                    errorsMsg.map((i, index) => (
+                        <Alert key={`${i}-${index}`} className="mt-2" msg={i} />
+                    ))}
             </div>
         </ErrorBoundary>
     );

package/src/components/EHFForm/EHFForm.tsx

@@ -3,12 +3,14 @@ import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
+import OrderDenialModal from '../OrderDenialModal/OrderDenialModal';
 import InputField from '../FormFields/InputField';
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
     OrderFormFieldType,
     PaymentMethodOptionsType,
     ContactRequestType,
+    OrderDenialFallbackOfferType,
 } from '../../types/general';
 import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 import { orderInvoiceContactFields } from '../../utils/order.helper';
@@ -27,6 +29,8 @@ type Props = {
     className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
+    orderDenialCloseButtonText?: string;
+    orderDenialContinueButtonText?: string;
     organizationNumberLabel?: string;
     organizationNumber?: string;
     glnLabel?: string;
@@ -51,6 +55,10 @@ type Props = {
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    fetchDenialFallbackOffer?: (organizationId: string) => Promise<OrderDenialFallbackOfferType | undefined>;
 };
 
 type EHFFormInputsType = {
@@ -70,6 +78,8 @@ const EHFForm: FC<Props> = ({
     className = '',
     backButtonText = '',
     verifyButtonText = '',
+    orderDenialCloseButtonText = 'Close',
+    orderDenialContinueButtonText = 'Continue',
     organizationNumberLabel = '',
     organizationNumber = '',
     templatePackageId,
@@ -88,6 +98,10 @@ const EHFForm: FC<Props> = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    fetchDenialFallbackOffer,
 }) => {
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
@@ -108,7 +122,17 @@ const EHFForm: FC<Props> = ({
         paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
             ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
 
-    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+    const {
+        orderSubmit,
+        continueWithFallbackOffer,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+        orderDenialType,
+        orderDenialMessage,
+        orderDenialFallbackOffer,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -130,6 +154,10 @@ const EHFForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        fetchDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<EHFFormInputsType> = async (
@@ -178,7 +206,27 @@ const EHFForm: FC<Props> = ({
 
                 {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
                 {errorsMsg?.length > 0 &&
-                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+                    errorsMsg.map((i, index) => (
+                        <Alert key={index} className="mt-2" msg={i} />
+                    ))}
+                <OrderDenialModal
+                    isOpen={!!orderDenialType}
+                    message={orderDenialMessage}
+                    closeButtonText={orderDenialCloseButtonText}
+                    continueButtonText={orderDenialContinueButtonText}
+                    canContinue={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                    }
+                    offer={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                            ? orderDenialFallbackOffer
+                            : undefined
+                    }
+                    onClose={dismissOrderDenial}
+                    onContinue={continueWithFallbackOffer}
+                />
             </form>
         </FormProvider>
     );

package/src/components/OIOForm/OIOForm.tsx

@@ -3,6 +3,7 @@ import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
+import OrderDenialModal from '../OrderDenialModal/OrderDenialModal';
 import InputField from '../FormFields/InputField';
 import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 
@@ -11,6 +12,7 @@ import {
     OrderFormFieldType,
     PaymentMethodOptionsType,
     ContactRequestType,
+    OrderDenialFallbackOfferType,
 } from '../../types/general';
 import useOrderForm from '../../hooks/useOrderForm';
 import { orderInvoiceContactFields } from '../../utils/order.helper';
@@ -28,6 +30,8 @@ type Props = {
     className?: string;
     backButtonText?: string;
     verifyButtonText?: string;
+    orderDenialCloseButtonText?: string;
+    orderDenialContinueButtonText?: string;
     organizationNumberLabel?: string;
     organizationNumber?: string;
     glnLabel?: string;
@@ -52,6 +56,10 @@ type Props = {
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    fetchDenialFallbackOffer?: (organizationId: string) => Promise<OrderDenialFallbackOfferType | undefined>;
 };
 
 type OIOFormInputsType = {
@@ -64,7 +72,7 @@ const initialData = {
     gln: '',
 };
 
-const EHFForm: FC<Props> = ({
+const OIOForm: FC<Props> = ({
     callback,
     onBack,
     submitStartCallback,
@@ -73,6 +81,8 @@ const EHFForm: FC<Props> = ({
     className = '',
     backButtonText = '',
     verifyButtonText = '',
+    orderDenialCloseButtonText = 'Close',
+    orderDenialContinueButtonText = 'Continue',
     organizationNumberLabel = '',
     organizationNumber = '',
     glnLabel = '',
@@ -92,6 +102,10 @@ const EHFForm: FC<Props> = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    fetchDenialFallbackOffer,
 }) => {
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
@@ -116,7 +130,17 @@ const EHFForm: FC<Props> = ({
         paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
             ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
 
-    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+    const {
+        orderSubmit,
+        continueWithFallbackOffer,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+        orderDenialType,
+        orderDenialMessage,
+        orderDenialFallbackOffer,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -138,6 +162,10 @@ const EHFForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        fetchDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<OIOFormInputsType> = async (
@@ -189,10 +217,30 @@ const EHFForm: FC<Props> = ({
                 </div>
                 {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
                 {errorsMsg?.length > 0 &&
-                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+                    errorsMsg.map((i, index) => (
+                        <Alert key={`${i}-${index}`} className="mt-2" msg={i} />
+                    ))}
+                <OrderDenialModal
+                    isOpen={!!orderDenialType}
+                    message={orderDenialMessage}
+                    closeButtonText={orderDenialCloseButtonText}
+                    continueButtonText={orderDenialContinueButtonText}
+                    canContinue={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                    }
+                    offer={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                            ? orderDenialFallbackOffer
+                            : undefined
+                    }
+                    onClose={dismissOrderDenial}
+                    onContinue={continueWithFallbackOffer}
+                />
             </form>
         </FormProvider>
     );
 };
 
-export default EHFForm;
+export default OIOForm;

package/src/components/OrderDenialModal/OrderDenialModal.tsx

@@ -0,0 +1,89 @@
+import { FC } from 'react';
+import { createPortal } from 'react-dom';
+
+import { OrderDenialFallbackOfferType } from '../../types/general';
+import Button from '../Button/Button';
+
+import './orderDenialModal.scss';
+
+type Props = {
+    isOpen: boolean;
+    message?: string;
+    offer?: OrderDenialFallbackOfferType;
+    canContinue?: boolean;
+    closeButtonText?: string;
+    continueButtonText?: string;
+    onContinue: () => void;
+    onClose: () => void;
+};
+
+const OrderDenialModal: FC<Props> = ({
+    isOpen,
+    message,
+    offer,
+    canContinue = true,
+    closeButtonText = 'Close',
+    continueButtonText = 'Continue',
+    onContinue,
+    onClose,
+}) => {
+    if (!isOpen || typeof document === 'undefined') {
+        return null;
+    }
+
+    return createPortal(
+        <div
+            className="sdk-order-denial-modal-overlay"
+            data-testid="sdk-order-denial-modal-overlay"
+        >
+            <div
+                className="sdk-order-denial-modal"
+                role="dialog"
+                aria-modal="true"
+                aria-label="Order denial modal"
+            >
+                <p
+                    className="sdk-order-denial-modal-text"
+                    style={{ whiteSpace: 'pre-line' }}
+                >
+                    {message?.replace(/\\n/g, '\n')}
+                </p>
+                {offer?.title && offer?.templatePackageId && (
+                    <div className="sdk-order-denial-offer-box">
+                        <h4 className="sdk-order-denial-offer-title">
+                            {offer.title}
+                        </h4>
+                        {offer.description && (
+                            <p className="sdk-order-denial-offer-description">
+                                {offer.description}
+                            </p>
+                        )}
+                        {offer.price && (
+                            <p className="sdk-order-denial-offer-meta">
+                                {offer.price}
+                            </p>
+                        )}
+                    </div>
+                )}
+                <div className="sdk-order-denial-modal-actions">
+                    <Button
+                        type="button"
+                        btnType="default"
+                        buttonText={closeButtonText}
+                        onClick={onClose}
+                    />
+                    {canContinue && (
+                        <Button
+                            type="button"
+                            buttonText={continueButtonText}
+                            onClick={onContinue}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};
+
+export default OrderDenialModal;

package/src/components/OrderDenialModal/orderDenialModal.scss

@@ -0,0 +1,42 @@
+.sdk-order-denial-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+}
+
+.sdk-order-denial-modal {
+    width: min(560px, 100%);
+    padding: 24px;
+}
+
+.sdk-order-denial-modal-text {
+    margin: 0;
+}
+
+.sdk-order-denial-offer-box {
+    margin-top: 16px;
+    padding: 14px;
+}
+
+.sdk-order-denial-offer-title {
+    margin: 0;
+}
+
+.sdk-order-denial-offer-description {
+    margin: 8px 0 0;
+}
+
+.sdk-order-denial-offer-meta {
+    margin: 8px 0 0;
+}
+
+.sdk-order-denial-modal-actions {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}

package/src/components/OrderForm/OrderForm.tsx

@@ -1,4 +1,12 @@
-import { FC, ChangeEvent, Suspense, useState, useMemo, useEffect } from 'react';
+import {
+    FC,
+    ChangeEvent,
+    ReactNode,
+    Suspense,
+    useState,
+    useMemo,
+    useEffect,
+} from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
@@ -8,6 +16,7 @@ import {
 } from '../../constants/index';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
+import OrderDenialModal from '../OrderDenialModal/OrderDenialModal';
 import ToggleField from '../FormFields/ToggleFiled';
 import formFieldsMapper from '../FormFields/FormFieldsMapper';
 import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
@@ -16,6 +25,7 @@ import {
     PaymentMethodOptionsType,
     OrderFormFieldType,
     ContactRequestType,
+    OrderDenialFallbackOfferType,
 } from '../../types/general';
 import { orderInvoiceContactFields } from '../../utils/order.helper';
 import useOrderForm from '../../hooks/useOrderForm';
@@ -46,6 +56,8 @@ type Props = {
     paymentMethods?: { label: string; value: PaymentMethodEnum }[];
     allowedPaymentMethods?: PaymentMethodEnum[];
     submitButtonText?: string;
+    orderDenialCloseButtonText?: string;
+    orderDenialContinueButtonText?: string;
     paymentMethodLabel?: string;
     paymentMethodNotAllowedMsg?: string;
     errorReqMsg?: string;
@@ -61,7 +73,13 @@ type Props = {
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
-    termsAndConditionsText?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    fetchDenialFallbackOffer?: (
+        organizationId: string
+    ) => Promise<OrderDenialFallbackOfferType | undefined>;
+    termsAndConditionsText?: string | ReactNode;
 };
 
 const initialData = {
@@ -98,6 +116,8 @@ const OrderForm: FC<Props> = ({
     allowedPaymentMethods,
     invoiceAddressSelection,
     submitButtonText = 'Start',
+    orderDenialCloseButtonText = 'Close',
+    orderDenialContinueButtonText = 'Continue',
     paymentMethodLabel = 'Select Payment Method',
     paymentMethodNotAllowedMsg = 'This payment method not allowed!',
     errorReqMsg = '',
@@ -106,6 +126,10 @@ const OrderForm: FC<Props> = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    fetchDenialFallbackOffer,
     requireTermsAcceptance,
     termsAndConditionsText,
 }) => {
@@ -175,7 +199,17 @@ const OrderForm: FC<Props> = ({
         invoiceAddressSelection?.paymentMethods ||
         INVOICE_ALLOWED_PAYMENT_METHODS;
 
-    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+    const {
+        orderSubmit,
+        continueWithFallbackOffer,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+        orderDenialType,
+        orderDenialMessage,
+        orderDenialFallbackOffer,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -196,6 +230,10 @@ const OrderForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        fetchDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
@@ -380,7 +418,27 @@ const OrderForm: FC<Props> = ({
                 />
                 {errorsMsg?.length > 0 &&
                     allowPaymentMethod &&
-                    errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
+                    errorsMsg.map((i, index) => (
+                        <Alert key={`${i}-${index}`} className="mt-2" msg={i} />
+                    ))}
+                <OrderDenialModal
+                    isOpen={!!orderDenialType}
+                    message={orderDenialMessage}
+                    closeButtonText={orderDenialCloseButtonText}
+                    continueButtonText={orderDenialContinueButtonText}
+                    canContinue={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                    }
+                    offer={
+                        orderDenialType === 'offer' &&
+                        !!orderDenialFallbackOffer?.templatePackageId
+                            ? orderDenialFallbackOffer
+                            : undefined
+                    }
+                    onClose={dismissOrderDenial}
+                    onContinue={continueWithFallbackOffer}
+                />
             </form>
         </FormProvider>
     );

package/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+    const content: { [className: string]: string };
+    export default content;
+}

package/src/enums/general.ts

@@ -32,6 +32,7 @@ export enum FormTypeEnum {
 export enum UserActionEnum {
     SELECT_FORM = 'selectForm',
     SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
+    SELECT_FALLBACK_OFFER = 'selectFallbackOffer',
     RETURN_TO_MAIN = 'returnToMain',
     TOGGLE_INVOICE_ADDRESS = 'toggleInvoiceAddress',
     SEARCH_ORGANIZATION_NUMBER = 'searchOrganizationNumber',

package/src/hooks/useOrderForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 
 import { createSubscriber } from '../api/SubscribeApi';
@@ -14,6 +14,7 @@ import { OrderFormInputsType, OrderInfoType } from '../types/order';
 import {
     ErrorsMsg,
     OrderFormFieldType,
+    OrderDenialFallbackOfferType,
     PaymentMethodOptionsType,
     ContactRequestType,
 } from '../types/general';
@@ -35,9 +36,7 @@ type Props = {
         action: UserActionEnum,
         args: object | null | undefined
     ) => void;
-    setContactCallback?: (
-        contactInfo: ContactRequestType
-    ) => void;
+    setContactCallback?: (contactInfo: ContactRequestType) => void;
     templatePackageId: string;
     subscriberId?: string;
     userId?: string;
@@ -55,6 +54,54 @@ type Props = {
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    fetchDenialFallbackOffer?: (
+        organizationId: string
+    ) => Promise<OrderDenialFallbackOfferType | undefined>;
+};
+
+type DenialErrorType = {
+    status?: number;
+    errors?: Record<string, string[] | undefined>;
+};
+
+const OFFER_DENIAL_BASE_TEXT =
+    'Hello again!\n\nLooks like you already tried this offer.';
+const OFFER_DENIAL_WITH_FALLBACK_TEXT =
+    'Hello again!\n\nLooks like you already tried this offer, but we would like to keep you with us.\n\nTherefore we got a new great offer for you:';
+
+const getDenialErrorType = (
+    error: DenialErrorType
+): 'offer' | 'amount' | null => {
+    if (error?.status !== 400 || !error?.errors) {
+        return null;
+    }
+
+    const normalizedEntries = Object.entries(error.errors).map(
+        ([key, value]) => [key.toLowerCase(), value] as const
+    );
+
+    const hasOffer = normalizedEntries.some(
+        ([key, value]) =>
+            key === 'offer' && Array.isArray(value) && value.length > 0
+    );
+
+    if (hasOffer) {
+        return 'offer';
+    }
+
+    const hasAmount = normalizedEntries.some(
+        ([key, value]) =>
+            key === 'amount' && Array.isArray(value) && value.length > 0
+    );
+
+    if (hasAmount) {
+        return 'amount';
+    }
+
+    return null;
 };
 
 const useOrderForm = ({
@@ -79,17 +126,60 @@ const useOrderForm = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    fetchDenialFallbackOffer,
 }: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
     const [errorsMsg, setErrorsMsg] = useState<string[]>([]);
+    const [orderDenialType, setOrderDenialType] = useState<
+        'offer' | 'amount' | null
+    >(null);
+    const [orderDenialFallbackOffer, setOrderDenialFallbackOffer] = useState<
+        OrderDenialFallbackOfferType | undefined
+    >();
+    const [submittedOrderData, setSubmittedOrderData] =
+        useState<OrderFormInputsType | null>(null);
+    const fallbackOfferTemplatePackageIdRef = useRef<string | null>(null);
+
+    const dismissOrderDenial = () => {
+        setOrderDenialType(null);
+        setOrderDenialFallbackOffer(undefined);
+    };
+
+    const getOrderDenialMessage = () => {
+        if (orderDenialType === 'offer') {
+            if (orderDenialFallbackOffer?.templatePackageId) {
+                return (
+                    orderDenialOfferWithFallbackText ||
+                    OFFER_DENIAL_WITH_FALLBACK_TEXT
+                );
+            }
+
+            return orderDenialOfferBaseText || OFFER_DENIAL_BASE_TEXT;
+        }
+
+        if (orderDenialType === 'amount') {
+            return (
+                orderDenialAmountText ||
+                errorValidationDenialOrderBlockingMsg ||
+                WRONG_MSG
+            );
+        }
+
+        return '';
+    };
 
     const orderSubmit: SubmitHandler<OrderFormInputsType> = async (
         data
     ): Promise<void> => {
         setApiErrorMsg('');
         setErrorsMsg([]);
+        setOrderDenialType(null);
         setLoading(true);
+        setSubmittedOrderData(data);
         try {
             let id: string | undefined = subscriberId;
             let invoiceResponse = null;
@@ -161,6 +251,10 @@ const useOrderForm = ({
             if (id) {
                 const paymentMethod =
                     data.paymentMethod || PAYMENT_METHOD_DEFAULT;
+                const selectedTemplateSubscriptionPlanId =
+                    fallbackOfferTemplatePackageIdRef.current ||
+                    templatePackageId;
+                fallbackOfferTemplatePackageIdRef.current = null;
 
                 const agreements = prepareAgreementModel({
                     paymentMethod,
@@ -186,7 +280,8 @@ const useOrderForm = ({
                     subscriberId: id,
                     subscriptionPlan: {
                         organizationId,
-                        templateSubscriptionPlanId: templatePackageId,
+                        templateSubscriptionPlanId:
+                            selectedTemplateSubscriptionPlanId,
                     },
                     paymentAgreement: { ...agreements },
                     invoiceContact: invoiceAddressToggle
@@ -216,6 +311,30 @@ const useOrderForm = ({
                 errorValidationDenialOrderBlockingMsg,
             } as ErrorMessages;
 
+            const detectedDenialType = getDenialErrorType(
+                error as DenialErrorType
+            );
+            if (detectedDenialType) {
+                setApiErrorMsg('');
+                setErrorsMsg([]);
+                setOrderDenialFallbackOffer(undefined);
+                setOrderDenialType(detectedDenialType);
+                callback(null);
+                if (
+                    detectedDenialType === 'offer' &&
+                    fetchDenialFallbackOffer
+                ) {
+                    void fetchDenialFallbackOffer(organizationId)
+                        .then((offer) => {
+                            setOrderDenialFallbackOffer(offer);
+                        })
+                        .catch(() => {
+                            setOrderDenialFallbackOffer(undefined);
+                        });
+                }
+                return;
+            }
+
             console.error(error);
             setApiErrorMsg(
                 prepareErrorMessage(error as Error, undefined, translations)
@@ -236,11 +355,37 @@ const useOrderForm = ({
         }
     };
 
+    const continueWithFallbackOffer = async () => {
+        if (orderDenialType !== 'offer' || !submittedOrderData) {
+            return;
+        }
+
+        const fallbackTemplatePackageId =
+            orderDenialFallbackOffer?.templatePackageId;
+
+        if (!fallbackTemplatePackageId) {
+            dismissOrderDenial();
+            return;
+        }
+
+        fallbackOfferTemplatePackageIdRef.current = fallbackTemplatePackageId;
+        userActionCallback?.(UserActionEnum.SELECT_FALLBACK_OFFER, {
+            templatePackageId: fallbackTemplatePackageId,
+        });
+        dismissOrderDenial();
+        await orderSubmit(submittedOrderData);
+    };
+
     return {
         orderSubmit,
+        continueWithFallbackOffer,
         loading,
         apiErrorMsg,
         errorsMsg,
+        orderDenialType,
+        orderDenialMessage: getOrderDenialMessage(),
+        orderDenialFallbackOffer,
+        dismissOrderDenial,
     };
 };
 

package/src/types/general.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { PaymentMethodEnum, UserActionEnum } from '../enums/general';
 import { OrderFormInputsType } from './order';
 
@@ -34,6 +36,13 @@ export type ContactRequestType = {
     careOf?: string;
 };
 
+export type OrderDenialFallbackOfferType = {
+    title?: string;
+    description?: string;
+    price?: string;
+    templatePackageId?: string;
+};
+
 export type ConfigType = {
     submitStartCallback?: (subscriberId: string) => void;
     userActionCallback?: (
@@ -70,6 +79,8 @@ export type ConfigType = {
         submitButtonText?: string;
         backButtonText?: string;
         verifyButtonText?: string;
+        orderDenialCloseButtonText?: string;
+        orderDenialContinueButtonText?: string;
         organizationNumberLabel?: string;
         cvrLabel?: string;
         glnLabel?: string;
@@ -83,7 +94,13 @@ export type ConfigType = {
         errorValidationTitleMsg?: string;
         errorValidationDenialOrderBlockingMsg?: string;
         errorValidationBlockingOffersMsg?: string;
-        termsAndConditionsText?: string;
+        orderDenialOfferBaseText?: string;
+        orderDenialOfferWithFallbackText?: string;
+        orderDenialAmountText?: string;
+        fetchDenialFallbackOffer?: (
+            organizationId: string
+        ) => Promise<OrderDenialFallbackOfferType | undefined>;
+        termsAndConditionsText?: string | ReactNode;
     };
 };
 

package/tsconfig.json

@@ -1,8 +1,7 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2020",
         "lib": ["dom", "dom.iterable", "esnext"],
-        "downlevelIteration": true,
         "allowJs": true,
         "checkJs": false,
         "skipLibCheck": true,
@@ -12,28 +11,26 @@
         "forceConsistentCasingInFileNames": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
-        "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": false,
         "noEmit": false,
         "noImplicitAny": true,
         "jsx": "react-jsx",
-        "baseUrl": "src",
         "sourceMap": true,
         "inlineSources": true,
         "sourceRoot": "/",
         "paths": {
-            "*": ["*"],
-            "API": ["api"],
-            "API/*": ["api/*"],
-            "Component/*": ["components/*"],
-            "Utils/*": ["utils/*"],
-            "Hooks/*": ["hooks/*"],
-            "Models/*": ["models/*"],
-            "Types/*": ["types/*"],
-            "Enums/*": ["enums/*"],
-            "Constants/*": ["constants/*"],
-            "Assets/*": ["assets/*"]
+            "*": ["./src/*"],
+            "API": ["./src/api"],
+            "API/*": ["./src/api/*"],
+            "Component/*": ["./src/components/*"],
+            "Utils/*": ["./src/utils/*"],
+            "Hooks/*": ["./src/hooks/*"],
+            "Models/*": ["./src/models/*"],
+            "Types/*": ["./src/types/*"],
+            "Enums/*": ["./src/enums/*"],
+            "Constants/*": ["./src/constants/*"],
+            "Assets/*": ["./src/assets/*"]
         }
     },
     "include": ["src"],