@infosoftas/s4-orders-js-sdk 0.1.12 → 0.1.13

package/README.md

@@ -39,17 +39,19 @@ enum PaymentMethodEnum {
     OIO = 'OIO',
 }
 
-type OrderFormFiledType = {
+type OrderFormFieldType = {
     name: string;
     required?: boolean;
+    readOnly?: boolean;
+    label?: string;
 };
 
 type PaymentMethodOptionsType = {
     [key in PaymentMethodEnum]: {
         generateSubscriberContact?: boolean;
         accountId?: string;
-        orderFormFields?: OrderFormFiledType[] | never[];
-        paymentInvoiceFields?: OrderFormFiledType[] | never[] | null;
+        orderFormFields: OrderFormFieldType[];
+        paymentInvoiceFields?: OrderFormFieldType[] | never[] | null;
     };
 }
 
@@ -75,9 +77,10 @@ type ConfigType = {
     moduleTitle?: string;
     submitStartCallback?: (subscriberId: string) => void;
     userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
-    setContactCallback?: (contactInfo: contactRequestType) => void;
-    apiKey: string;
-    apiUrl: string;
+    setContactCallback?: (contactInfo: ContactRequestType) => void;
+    cancelVippsCallback?: () => void;
+    apiKey?: string;
+    apiUrl?: string;
     templatePackageId: string;
     subscriberId: string;
     userId: string;
@@ -85,14 +88,31 @@ type ConfigType = {
     organizationId: string;
     redirectUrl?: string;
     showIframe?: boolean;
+    /**
+     * The full list of payment methods displayed in the UI, each with a display label and value.
+     * Controls what the user sees in the payment method selector.
+     * @example [{ label: 'Credit Card', value: 'SwedbankPay' }, { label: 'Invoice', value: 'Invoice' }]
+     */
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    /**
+     * Whitelist of payment methods the subscriber is permitted to use.
+     * If a method is in availablePaymentMethods but not here, it will be shown but blocked.
+     * @example ['SwedbankPay', 'Invoice']
+     */
+    allowedPaymentMethods?: PaymentMethodEnum[];
+    /**
+     * Per-payment-method form field configuration.
+     * Controls which input fields are shown in the order form for each payment method.
+     * Use accountId on SwedbankPay to set your Swedbank Pay account ID.
+     */
     paymentMethodsOptions?: PaymentMethodOptionsType;
+    requireTermsAcceptance?: boolean;
     language?: string;
     merchantAgreementUrl?: string;
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[] | never[];
+        fields?: OrderFormFieldType[];
     };
     settings?: {
         successText?: string;
@@ -101,6 +121,7 @@ type ConfigType = {
         backButtonText?: string;
         verifyButtonText?: string;
         organizationNumberLabel?: string;
+        cvrLabel?: string;
         glnLabel?: string;
         orderDefaultValues?: OrderFormInputsType;
         paymentMethodLabel?: string;
@@ -110,6 +131,9 @@ type ConfigType = {
         errorValidationTitleMsg?: string;
         errorValidationDenialOrderBlockingMsg?: string;
         errorValidationBlockingOffersMsg?: string;
+        paymentMethodNotAllowedMsg?: string;
+        invoiceLookupNotFoundText?: string;
+        termsAndConditionsText?: string;
     };
 }
 ```
@@ -388,8 +412,11 @@ export default OrderPlace;
 | redirectUrl           |                              window.location.href                              |               redirect url |
 | showIframe            |                                     false                                      | show credit card in iframe |
 | userActionCallback    |                                   undefined                                    | function for tracking user actions |
-| paymentMethodsOptions | orderFormFields: [{name: 'phone, required: false, readOnly: false, label: ''}] |        default form fields |
-| availablePaymentMethods | [] | available payment methods |
+| cancelVippsCallback   |                                   undefined                                    | callback invoked when a Vipps/MobilePay payment is cancelled |
+| paymentMethodsOptions | orderFormFields: [{name: 'phoneNumber', required: false, readOnly: false, label: ''}] |        default form fields |
+| availablePaymentMethods | [] | available payment methods to display |
+| allowedPaymentMethods | [] | list of payment methods the subscriber is allowed to use |
+| requireTermsAcceptance | false | when true, the user must accept terms and conditions before submitting |
 | 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', orderDefaultValues: 'Default order form values', paymentMethodNotAllowedMsg: 'This payment method not allowed!', invoiceLookupNotFoundText: 'There was no recipient found for the given information' } | label and text properties |
+| settings | {successText: 'Order completed successfully!', failureText: 'Something went wrong!', submitButtonText: 'Start', backButtonText: 'Back', verifyButtonText: 'Verify', organizationNumberLabel: 'Organization Number', cvrLabel: 'CVR', glnLabel: 'GLN', paymentMethodLabel: 'Select Payment Method', orderDefaultValues: 'Default order form values', errorReqMsg: '', errorInvalidEmailMsg: '', errorInvalidPhoneMsg: '', errorValidationTitleMsg: 'One or more validation errors occurred.', errorValidationDenialOrderBlockingMsg: '...', errorValidationBlockingOffersMsg: '...', paymentMethodNotAllowedMsg: 'This payment method not allowed!', invoiceLookupNotFoundText: 'There was no recipient found for the given information', termsAndConditionsText: '' } | label and text properties |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.1.12",
+    "version": "0.1.13",
     "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

@@ -45,6 +45,7 @@ const App: FC<ConfigType> = ({
     invoiceAddressSelection,
     availablePaymentMethods = [],
     allowedPaymentMethods,
+    requireTermsAcceptance,
     language = 'en-US',
     merchantAgreementUrl = '',
     settings = {
@@ -67,9 +68,17 @@ 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.',
+        orderDenialFallbackOffer: undefined,
         paymentMethodNotAllowedMsg: '',
         invoiceLookupNotFoundText:
             'There was no recipient found for the given information',
+        termsAndConditionsText: '',
     },
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -342,6 +351,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={
@@ -375,6 +390,18 @@ const App: FC<ConfigType> = ({
                                 errorValidationBlockingOffersMsg={
                                     settings?.errorValidationBlockingOffersMsg
                                 }
+                                orderDenialOfferBaseText={
+                                    settings?.orderDenialOfferBaseText
+                                }
+                                orderDenialOfferWithFallbackText={
+                                    settings?.orderDenialOfferWithFallbackText
+                                }
+                                orderDenialAmountText={
+                                    settings?.orderDenialAmountText
+                                }
+                                orderDenialFallbackOffer={
+                                    settings?.orderDenialFallbackOffer
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -383,6 +410,12 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
+                                orderDenialCloseButtonText={
+                                    settings?.orderDenialCloseButtonText
+                                }
+                                orderDenialContinueButtonText={
+                                    settings?.orderDenialContinueButtonText
+                                }
                                 organizationNumberLabel={
                                     settings?.organizationNumberLabel
                                 }
@@ -417,6 +450,18 @@ const App: FC<ConfigType> = ({
                                 errorValidationBlockingOffersMsg={
                                     settings?.errorValidationBlockingOffersMsg
                                 }
+                                orderDenialOfferBaseText={
+                                    settings?.orderDenialOfferBaseText
+                                }
+                                orderDenialOfferWithFallbackText={
+                                    settings?.orderDenialOfferWithFallbackText
+                                }
+                                orderDenialAmountText={
+                                    settings?.orderDenialAmountText
+                                }
+                                orderDenialFallbackOffer={
+                                    settings?.orderDenialFallbackOffer
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
@@ -438,6 +483,12 @@ const App: FC<ConfigType> = ({
                                     submitButtonText={
                                         settings?.submitButtonText
                                     }
+                                    orderDenialCloseButtonText={
+                                        settings?.orderDenialCloseButtonText
+                                    }
+                                    orderDenialContinueButtonText={
+                                        settings?.orderDenialContinueButtonText
+                                    }
                                     paymentMethodLabel={
                                         settings?.paymentMethodLabel
                                     }
@@ -473,6 +524,24 @@ const App: FC<ConfigType> = ({
                                     errorValidationBlockingOffersMsg={
                                         settings?.errorValidationBlockingOffersMsg
                                     }
+                                    orderDenialOfferBaseText={
+                                        settings?.orderDenialOfferBaseText
+                                    }
+                                    orderDenialOfferWithFallbackText={
+                                        settings?.orderDenialOfferWithFallbackText
+                                    }
+                                    orderDenialAmountText={
+                                        settings?.orderDenialAmountText
+                                    }
+                                    orderDenialFallbackOffer={
+                                        settings?.orderDenialFallbackOffer
+                                    }
+                                    termsAndConditionsText={
+                                        settings?.termsAndConditionsText
+                                    }
+                                    requireTermsAcceptance={
+                                        requireTermsAcceptance
+                                    }
                                 />
                             )}
                     </>
@@ -489,7 +558,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 {
-    OrderFormFiledType,
+    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;
@@ -44,13 +48,17 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    orderDenialFallbackOffer?: OrderDenialFallbackOfferType;
 };
 
 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,
+    orderDenialFallbackOffer,
 }) => {
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
@@ -108,7 +122,16 @@ 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,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -130,6 +153,10 @@ const EHFForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        orderDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<EHFFormInputsType> = async (
@@ -178,7 +205,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/FormFields/FormFields.helper.ts

@@ -1,4 +1,4 @@
-import { OrderFormFiledType } from '../../types/general';
+import { OrderFormFieldType } from '../../types/general';
 
 export const FIELD_TYPES = {
     PHONE: 'phoneNumber',
@@ -21,9 +21,10 @@ export const FIELD_TYPES = {
     INVOICE_EMAIL: 'invoiceEmail',
     INVOICE_CARE_OF: 'invoiceCareOf',
     INVOICE_BUYER_REFERENCE: 'invoiceBuyerReference',
+    TERMS_CHECKBOX: 'termsCheckbox',
 };
 
-export const DEFAULT_ORDER_FORM_FIELDS: OrderFormFiledType[] = [
+export const DEFAULT_ORDER_FORM_FIELDS: OrderFormFieldType[] = [
     {
         name: FIELD_TYPES.PHONE,
         required: false,

package/src/components/FormFields/FormFieldsMapper.ts

@@ -3,6 +3,7 @@ import PhoneField from './PhoneField';
 import NameField from './NameField';
 import AddressField from './AddressField';
 import InputField from './InputField';
+import TermsCheckbox from './TermsCheckbox';
 
 import { FIELD_TYPES } from './FormFields.helper';
 
@@ -27,6 +28,7 @@ const formFieldsMapper = {
     [FIELD_TYPES.INVOICE_ZIP]: InputField,
     [FIELD_TYPES.INVOICE_CARE_OF]: InputField,
     [FIELD_TYPES.INVOICE_BUYER_REFERENCE]: InputField,
+    [FIELD_TYPES.TERMS_CHECKBOX]: TermsCheckbox,
 };
 
 export default formFieldsMapper;

package/src/components/FormFields/TermsCheckbox.tsx

@@ -0,0 +1,58 @@
+import { FC, ReactNode } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { uuidv4 } from '../../utils/helper';
+
+type Props = {
+    name: string;
+    required: boolean;
+    disabled?: boolean;
+    label?: string | ReactNode;
+    errorReqMsg?: string;
+    errors?: {
+        [key: string]: {
+            message?: string;
+        };
+    };
+};
+
+const TermsCheckbox: FC<Props> = ({
+    name,
+    required = true,
+    disabled = false,
+    label = 'I accept the terms and conditions',
+    errorReqMsg = 'You must accept the terms and conditions to proceed.',
+    errors,
+}) => {
+    const { register } = useFormContext();
+    const id = uuidv4();
+
+    return (
+        <div className="checkbox-wrapper" data-testid={`sdk-${name}-field-id`}>
+            <>
+                <input
+                    id={id}
+                    type="checkbox"
+                    disabled={disabled}
+                    className={`checkbox-control ${disabled ? 'disabled' : ''}`}
+                    {...register(name, {
+                        required: required ? errorReqMsg : false,
+                    })}
+                />
+                <label
+                    className="checkbox-label"
+                    htmlFor={id}
+                    style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+                >
+                    {label} {required && <span className="text-error">*</span>}
+                </label>
+            </>
+
+            {errors && errors[name] && (
+                <div className="text-error caption">{errors[name].message}</div>
+            )}
+        </div>
+    );
+};
+
+export default TermsCheckbox;

package/src/components/OIOForm/OIOForm.tsx

@@ -3,14 +3,16 @@ 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';
 
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
-    OrderFormFiledType,
+    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;
@@ -45,13 +49,17 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    orderDenialFallbackOffer?: OrderDenialFallbackOfferType;
 };
 
 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,
+    orderDenialFallbackOffer,
 }) => {
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
@@ -116,7 +130,16 @@ 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,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -138,6 +161,10 @@ const EHFForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        orderDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<OIOFormInputsType> = async (
@@ -189,10 +216,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,91 @@
+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">
+                    {message?.split('\\n').map((line, i, arr) => (
+                        <span key={i}>
+                            {line}
+                            {i < arr.length - 1 && <br />}
+                        </span>
+                    ))}
+                </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,19 +16,22 @@ 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';
 import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 import {
     PaymentMethodOptionsType,
-    OrderFormFiledType,
+    OrderFormFieldType,
     ContactRequestType,
+    OrderDenialFallbackOfferType,
 } from '../../types/general';
 import { orderInvoiceContactFields } from '../../utils/order.helper';
 import useOrderForm from '../../hooks/useOrderForm';
 
 import './orderForm.scss';
+import TermsCheckbox from '../FormFields/TermsCheckbox';
 
 type Props = {
     callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
@@ -45,6 +56,8 @@ type Props = {
     paymentMethods?: { label: string; value: PaymentMethodEnum }[];
     allowedPaymentMethods?: PaymentMethodEnum[];
     submitButtonText?: string;
+    orderDenialCloseButtonText?: string;
+    orderDenialContinueButtonText?: string;
     paymentMethodLabel?: string;
     paymentMethodNotAllowedMsg?: string;
     errorReqMsg?: string;
@@ -53,12 +66,18 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
+    requireTermsAcceptance?: boolean;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    orderDenialFallbackOffer?: OrderDenialFallbackOfferType;
+    termsAndConditionsText?: string | ReactNode;
 };
 
 const initialData = {
@@ -95,6 +114,8 @@ const OrderForm: FC<Props> = ({
     allowedPaymentMethods,
     invoiceAddressSelection,
     submitButtonText = 'Start',
+    orderDenialCloseButtonText = 'Close',
+    orderDenialContinueButtonText = 'Continue',
     paymentMethodLabel = 'Select Payment Method',
     paymentMethodNotAllowedMsg = 'This payment method not allowed!',
     errorReqMsg = '',
@@ -103,6 +124,12 @@ const OrderForm: FC<Props> = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    orderDenialFallbackOffer,
+    requireTermsAcceptance,
+    termsAndConditionsText,
 }) => {
     if (!templatePackageId) {
         console.error('"templatePackageId" should be set');
@@ -127,7 +154,7 @@ const OrderForm: FC<Props> = ({
         console.error('"identityProviderId" should be set');
     }
 
-    const [orderFields, setOrderFields] = useState<OrderFormFiledType[]>(
+    const [orderFields, setOrderFields] = useState<OrderFormFieldType[]>(
         paymentMethodsOptions?.[
             defaultValues?.paymentMethod || PAYMENT_METHOD_DEFAULT
         ]?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS
@@ -158,6 +185,7 @@ const OrderForm: FC<Props> = ({
 
     const invoiceAddressToggle = watch('invoiceAddressSelection');
     const paymentMethodInput = watch('paymentMethod');
+    const isTermsAccepted = watch('termsAccept', false);
 
     const invoiceOrderFields =
         paymentMethodsOptions?.[paymentMethodInput || PAYMENT_METHOD_DEFAULT]
@@ -169,7 +197,16 @@ const OrderForm: FC<Props> = ({
         invoiceAddressSelection?.paymentMethods ||
         INVOICE_ALLOWED_PAYMENT_METHODS;
 
-    const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
+    const {
+        orderSubmit,
+        continueWithFallbackOffer,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+        orderDenialType,
+        orderDenialMessage,
+        dismissOrderDenial,
+    } = useOrderForm({
         callback,
         submitStartCallback,
         userActionCallback,
@@ -190,6 +227,10 @@ const OrderForm: FC<Props> = ({
         errorValidationTitleMsg,
         errorValidationDenialOrderBlockingMsg,
         errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        orderDenialFallbackOffer,
     });
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
@@ -248,6 +289,10 @@ const OrderForm: FC<Props> = ({
         allowPaymentMethod &&
         invoicePaymentMethods.includes(paymentMethodInput as PaymentMethodEnum);
 
+    const isSubmitButtonDisabled = requireTermsAcceptance
+        ? !isTermsAccepted
+        : false;
+
     return (
         <FormProvider {...methods}>
             <form
@@ -344,11 +389,20 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
+                {requireTermsAcceptance && (
+                    <TermsCheckbox
+                        name="termsAccept"
+                        label={termsAndConditionsText}
+                        required
+                        errors={errors}
+                    />
+                )}
                 {allowPaymentMethod && (
                     <Button
                         type="submit"
                         loading={loading}
                         buttonText={submitButtonText}
+                        disable={isSubmitButtonDisabled}
                     />
                 )}
                 <Alert
@@ -361,7 +415,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';
@@ -13,7 +13,8 @@ import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
 import { OrderFormInputsType, OrderInfoType } from '../types/order';
 import {
     ErrorsMsg,
-    OrderFormFiledType,
+    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;
@@ -48,13 +47,59 @@ type Props = {
     language: string;
     merchantAgreementUrl: string;
     paymentMethodsOptions?: PaymentMethodOptionsType;
-    orderFields: OrderFormFiledType[];
+    orderFields: OrderFormFieldType[];
     invoiceAddressToggle?: boolean;
-    invoiceOrderFields: OrderFormFiledType[];
+    invoiceOrderFields: OrderFormFieldType[];
     invoiceLookupNotFoundText?: string;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    orderDenialFallbackOffer?: OrderDenialFallbackOfferType;
+};
+
+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 +124,56 @@ const useOrderForm = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    orderDenialFallbackOffer,
 }: 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 [submittedOrderData, setSubmittedOrderData] =
+        useState<OrderFormInputsType | null>(null);
+    const fallbackOfferTemplatePackageIdRef = useRef<string | null>(null);
+
+    const dismissOrderDenial = () => {
+        setOrderDenialType(null);
+    };
+
+    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;
@@ -152,8 +236,6 @@ const useOrderForm = ({
                 sessionStorage.setItem('subscriberId', id); // For avoiding attempt of creating subscriber again
             }
 
-            console.log('Dette er en ny testversjon av OSDK');
-
             if (setContactCallback) {
                 setContactCallback(contactModel);
             }
@@ -163,6 +245,10 @@ const useOrderForm = ({
             if (id) {
                 const paymentMethod =
                     data.paymentMethod || PAYMENT_METHOD_DEFAULT;
+                const selectedTemplateSubscriptionPlanId =
+                    fallbackOfferTemplatePackageIdRef.current ||
+                    templatePackageId;
+                fallbackOfferTemplatePackageIdRef.current = null;
 
                 const agreements = prepareAgreementModel({
                     paymentMethod,
@@ -188,7 +274,8 @@ const useOrderForm = ({
                     subscriberId: id,
                     subscriptionPlan: {
                         organizationId,
-                        templateSubscriptionPlanId: templatePackageId,
+                        templateSubscriptionPlanId:
+                            selectedTemplateSubscriptionPlanId,
                     },
                     paymentAgreement: { ...agreements },
                     invoiceContact: invoiceAddressToggle
@@ -218,6 +305,17 @@ const useOrderForm = ({
                 errorValidationDenialOrderBlockingMsg,
             } as ErrorMessages;
 
+            const detectedDenialType = getDenialErrorType(
+                error as DenialErrorType
+            );
+            if (detectedDenialType) {
+                setApiErrorMsg('');
+                setErrorsMsg([]);
+                setOrderDenialType(detectedDenialType);
+                callback(null);
+                return;
+            }
+
             console.error(error);
             setApiErrorMsg(
                 prepareErrorMessage(error as Error, undefined, translations)
@@ -238,11 +336,36 @@ 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(),
+        dismissOrderDenial,
     };
 };
 

package/src/types/general.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { PaymentMethodEnum, UserActionEnum } from '../enums/general';
 import { OrderFormInputsType } from './order';
 
@@ -7,7 +9,7 @@ declare global {
     }
 }
 
-export type OrderFormFiledType = {
+export type OrderFormFieldType = {
     name: string;
     required?: boolean;
     readOnly?: boolean;
@@ -18,8 +20,8 @@ export type PaymentMethodOptionsType = {
     [key in PaymentMethodEnum]: {
         generateSubscriberContact?: boolean;
         accountId?: string;
-        orderFormFields: OrderFormFiledType[];
-        paymentInvoiceFields?: OrderFormFiledType[] | never[] | null;
+        orderFormFields?: OrderFormFieldType[];
+        paymentInvoiceFields?: OrderFormFieldType[] | never[] | null;
     };
 };
 
@@ -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?: (
@@ -56,12 +65,13 @@ export type ConfigType = {
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
     allowedPaymentMethods?: PaymentMethodEnum[];
     paymentMethodsOptions?: PaymentMethodOptionsType;
+    requireTermsAcceptance?: boolean;
     language?: string;
     merchantAgreementUrl?: string;
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
     };
     settings?: {
         successText?: string;
@@ -69,6 +79,8 @@ export type ConfigType = {
         submitButtonText?: string;
         backButtonText?: string;
         verifyButtonText?: string;
+        orderDenialCloseButtonText?: string;
+        orderDenialContinueButtonText?: string;
         organizationNumberLabel?: string;
         cvrLabel?: string;
         glnLabel?: string;
@@ -82,6 +94,11 @@ export type ConfigType = {
         errorValidationTitleMsg?: string;
         errorValidationDenialOrderBlockingMsg?: string;
         errorValidationBlockingOffersMsg?: string;
+        orderDenialOfferBaseText?: string;
+        orderDenialOfferWithFallbackText?: string;
+        orderDenialAmountText?: string;
+        orderDenialFallbackOffer?: OrderDenialFallbackOfferType;
+        termsAndConditionsText?: string | ReactNode;
     };
 };
 

package/src/types/order.ts

@@ -24,6 +24,7 @@ export type OrderFormInputsType = {
     invoiceBuyerReference?: string;
     gln?: string;
     cvr?: string;
+    termsAccept?: boolean;
 };
 
 export type VippsMobilePay = {

package/src/utils/order.helper.ts

@@ -1,6 +1,6 @@
 import { MessageEventTypeEnum, PaymentMethodEnum } from '../enums/general';
 import { AgreementsType, OrderFormInputsType } from '../types/order';
-import { OrderFormFiledType } from '../types/general';
+import { OrderFormFieldType } from '../types/general';
 import { FIELD_TYPES } from '../components/FormFields/FormFields.helper';
 
 type AgreementModelType = {
@@ -105,7 +105,7 @@ export const prepareAgreementModel = ({
 
 type ContactModelType = {
     data: OrderFormInputsType;
-    orderFields: OrderFormFiledType[];
+    orderFields: OrderFormFieldType[];
 };
 
 export const prepareContactModel = ({

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"],