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

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.11",
+    "version": "0.1.13-0",
     "scripts": {
         "build": "rimraf lib && webpack --mode production",
         "release": "release-it"

package/src/App.tsx

@@ -30,6 +30,7 @@ const App: FC<ConfigType> = ({
     submitStartCallback,
     userActionCallback,
     setContactCallback,
+    cancelVippsCallback,
     moduleTitle,
     apiKey,
     apiUrl,
@@ -44,6 +45,7 @@ const App: FC<ConfigType> = ({
     invoiceAddressSelection,
     availablePaymentMethods = [],
     allowedPaymentMethods,
+    requireTermsAcceptance,
     language = 'en-US',
     merchantAgreementUrl = '',
     settings = {
@@ -69,6 +71,7 @@ const App: FC<ConfigType> = ({
         paymentMethodNotAllowedMsg: '',
         invoiceLookupNotFoundText:
             'There was no recipient found for the given information',
+        termsAndConditionsText: '',
     },
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -140,6 +143,7 @@ const App: FC<ConfigType> = ({
                 (data.paymentMethod === PaymentMethodEnum.Vipps ||
                     data.paymentMethod === PaymentMethodEnum.MobilePay)
             ) {
+                cancelVippsCallback?.();
                 handleOrderDelete(orderId || data.orderId);
                 return;
             }
@@ -471,6 +475,12 @@ const App: FC<ConfigType> = ({
                                     errorValidationBlockingOffersMsg={
                                         settings?.errorValidationBlockingOffersMsg
                                     }
+                                    termsAndConditionsText={
+                                        settings?.termsAndConditionsText
+                                    }
+                                    requireTermsAcceptance={
+                                        requireTermsAcceptance
+                                    }
                                 />
                             )}
                     </>

package/src/components/EHFForm/EHFForm.tsx

@@ -6,7 +6,7 @@ import Button from '../Button/Button';
 import InputField from '../FormFields/InputField';
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
-    OrderFormFiledType,
+    OrderFormFieldType,
     PaymentMethodOptionsType,
     ContactRequestType,
 } from '../../types/general';
@@ -44,7 +44,7 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;

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

@@ -8,7 +8,7 @@ import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 
 import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
 import {
-    OrderFormFiledType,
+    OrderFormFieldType,
     PaymentMethodOptionsType,
     ContactRequestType,
 } from '../../types/general';
@@ -45,7 +45,7 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
     invoiceLookupNotFoundText?: string;

package/src/components/OrderForm/OrderForm.tsx

@@ -14,13 +14,14 @@ import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
 import { OrderFormInputsType, OrderInfoType } from '../../types/order';
 import {
     PaymentMethodOptionsType,
-    OrderFormFiledType,
+    OrderFormFieldType,
     ContactRequestType,
 } 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;
@@ -53,12 +54,14 @@ type Props = {
     invoiceAddressSelection?: {
         enabled?: boolean;
         label?: string;
-        fields?: OrderFormFiledType[];
+        fields?: OrderFormFieldType[];
         paymentMethods?: PaymentMethodEnum[];
     };
+    requireTermsAcceptance?: boolean;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;
     errorValidationBlockingOffersMsg?: string;
+    termsAndConditionsText?: string;
 };
 
 const initialData = {
@@ -103,6 +106,8 @@ const OrderForm: FC<Props> = ({
     errorValidationTitleMsg,
     errorValidationDenialOrderBlockingMsg,
     errorValidationBlockingOffersMsg,
+    requireTermsAcceptance,
+    termsAndConditionsText,
 }) => {
     if (!templatePackageId) {
         console.error('"templatePackageId" should be set');
@@ -127,7 +132,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 +163,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]
@@ -248,6 +254,10 @@ const OrderForm: FC<Props> = ({
         allowPaymentMethod &&
         invoicePaymentMethods.includes(paymentMethodInput as PaymentMethodEnum);
 
+    const isSubmitButtonDisabled = requireTermsAcceptance
+        ? !isTermsAccepted
+        : false;
+
     return (
         <FormProvider {...methods}>
             <form
@@ -344,11 +354,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

package/src/hooks/useOrderForm.tsx

@@ -13,7 +13,7 @@ import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
 import { OrderFormInputsType, OrderInfoType } from '../types/order';
 import {
     ErrorsMsg,
-    OrderFormFiledType,
+    OrderFormFieldType,
     PaymentMethodOptionsType,
     ContactRequestType,
 } from '../types/general';
@@ -35,7 +35,9 @@ type Props = {
         action: UserActionEnum,
         args: object | null | undefined
     ) => void;
-    setContactCallback?: (contactInfo: ContactRequestType) => void;
+    setContactCallback?: (
+        contactInfo: ContactRequestType
+    ) => void;
     templatePackageId: string;
     subscriberId?: string;
     userId?: string;
@@ -46,9 +48,9 @@ type Props = {
     language: string;
     merchantAgreementUrl: string;
     paymentMethodsOptions?: PaymentMethodOptionsType;
-    orderFields: OrderFormFiledType[];
+    orderFields: OrderFormFieldType[];
     invoiceAddressToggle?: boolean;
-    invoiceOrderFields: OrderFormFiledType[];
+    invoiceOrderFields: OrderFormFieldType[];
     invoiceLookupNotFoundText?: string;
     errorValidationTitleMsg?: string;
     errorValidationDenialOrderBlockingMsg?: string;

package/src/types/general.ts

@@ -7,7 +7,7 @@ declare global {
     }
 }
 
-export type OrderFormFiledType = {
+export type OrderFormFieldType = {
     name: string;
     required?: boolean;
     readOnly?: boolean;
@@ -18,8 +18,8 @@ export type PaymentMethodOptionsType = {
     [key in PaymentMethodEnum]: {
         generateSubscriberContact?: boolean;
         accountId?: string;
-        orderFormFields: OrderFormFiledType[];
-        paymentInvoiceFields?: OrderFormFiledType[] | never[] | null;
+        orderFormFields?: OrderFormFieldType[];
+        paymentInvoiceFields?: OrderFormFieldType[] | never[] | null;
     };
 };
 
@@ -41,6 +41,7 @@ export type ConfigType = {
         args: object | null | undefined
     ) => void;
     setContactCallback?: (contactInfo: ContactRequestType) => void;
+    cancelVippsCallback?: () => void;
     domElementId: string;
     moduleTitle?: string;
     templatePackageId: string;
@@ -55,12 +56,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;
@@ -81,6 +83,7 @@ export type ConfigType = {
         errorValidationTitleMsg?: string;
         errorValidationDenialOrderBlockingMsg?: string;
         errorValidationBlockingOffersMsg?: string;
+        termsAndConditionsText?: string;
     };
 };
 

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 = ({