@infosoftas/s4-orders-js-sdk 0.1.19 → 0.1.21-0

package/src/api/OrdersApi.ts

@@ -19,8 +19,8 @@ type OrderCompleteRequestType = {
 };
 
 type OrderResponseType = {
-    terminalRedirectUrl: string;
-    id: string;
+    terminalRedirectUrl: string | null;
+    id: string | null;
 };
 
 export const orderStart = (

package/src/components/Alert/Alert.tsx

@@ -1,22 +1,23 @@
-import { FC } from 'react';
-
-import './alert.scss';
-
-type Props = {
-    msg?: string;
-    type?: 'danger' | 'success';
-    className?: string;
-};
-
-const Alert: FC<Props> = ({ msg, type = 'danger', className = '' }) => {
-    return msg ? (
-        <div
-            className={`sdk-alert ${type} ${className}`}
-            data-testid="sdk-alert-id"
-        >
-            {msg}
-        </div>
-    ) : null;
-};
-
-export default Alert;
+import { FC } from 'react';
+
+import { Alert as UIAlert, AlertDescription } from '../ui/alert';
+
+type Props = {
+    msg?: string;
+    type?: 'danger' | 'success';
+    className?: string;
+};
+
+const Alert: FC<Props> = ({ msg, type = 'danger', className }) => {
+    return msg ? (
+        <UIAlert
+            variant={type === 'danger' ? 'destructive' : 'default'}
+            className={className}
+            data-testid="sdk-alert-id"
+        >
+            <AlertDescription>{msg}</AlertDescription>
+        </UIAlert>
+    ) : null;
+};
+
+export default Alert;

package/src/components/Button/Button.tsx

@@ -1,8 +1,7 @@
 import { FC, MouseEvent } from 'react';
 
-import Loader from '../Loader/Loader';
-
-import './button.scss';
+import { Button as UIButton } from '../ui/button';
+import { Spinner } from '../ui/spinner';
 
 type Props = {
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -11,6 +10,7 @@ type Props = {
     buttonText?: string;
     loading?: boolean;
     disable?: boolean;
+    className?: string;
 };
 
 const Button: FC<Props> = ({
@@ -20,24 +20,20 @@ const Button: FC<Props> = ({
     buttonText = 'Start',
     loading = false,
     disable = false,
-}) => {
-    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
-        onClick?.(e);
-    };
-
-    return (
-        <button
-            data-testid="sdk-button-id"
-            type={type}
-            disabled={loading || disable}
-            className={`sdk-btn ${btnType ? `${btnType}-btn` : ''} ${
-                loading ? 'loading' : ''
-            } ${disable ? 'disabled' : ''}`}
-            onClick={handleClick}
-        >
-            {loading ? <Loader className="btn-loader" /> : buttonText}
-        </button>
-    );
-};
+    className,
+}) => (
+    <UIButton
+        data-testid="sdk-button-id"
+        type={type}
+        variant={btnType === 'primary' ? 'default' : 'ghost'}
+        disabled={loading || disable}
+        aria-busy={loading || undefined}
+        className={className}
+        onClick={onClick}
+    >
+        {loading && <Spinner data-icon="inline-start" />}
+        {buttonText}
+    </UIButton>
+);
 
 export default Button;

package/src/components/EHFForm/EHFForm.tsx

@@ -1,235 +1,253 @@
-import { FC } from 'react';
-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';
-import useOrderForm from '../../hooks/useOrderForm';
-import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
-
-type Props = {
-    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
-    onBack: () => void;
-    submitStartCallback?: (id: string) => void;
-    userActionCallback?: (
-        action: UserActionEnum,
-        args: object | null | undefined
-    ) => void;
-    setContactCallback?: (contactInfo: ContactRequestType) => void;
-    className?: string;
-    backButtonText?: string;
-    verifyButtonText?: string;
-    orderDenialCloseButtonText?: string;
-    orderDenialContinueButtonText?: string;
-    organizationNumberLabel?: string;
-    organizationNumber?: string;
-    glnLabel?: string;
-    templatePackageId: string;
-    subscriberId?: string;
-    userId?: string;
-    identityProviderId?: string;
-    organizationId: string;
-    redirectUrl?: string;
-    showIframe?: boolean;
-    language: string;
-    merchantAgreementUrl: string;
-    orderValues?: OrderFormInputsType;
-    paymentMethodsOptions?: PaymentMethodOptionsType;
-    invoiceAddressSelection?: {
-        enabled?: boolean;
-        label?: string;
-        fields?: OrderFormFieldType[];
-        paymentMethods?: PaymentMethodEnum[];
-    };
-    invoiceLookupNotFoundText?: string;
-    errorValidationTitleMsg?: string;
-    errorValidationDenialOrderBlockingMsg?: string;
-    errorValidationBlockingOffersMsg?: string;
-    orderDenialOfferBaseText?: string;
-    orderDenialOfferWithFallbackText?: string;
-    orderDenialAmountText?: string;
-    fetchDenialFallbackOffer?: (organizationId: string) => Promise<OrderDenialFallbackOfferType | undefined>;
-};
-
-type EHFFormInputsType = {
-    organizationNumber: string;
-};
-
-const initialData = {
-    organizationNumber: '',
-};
-
-const EHFForm: FC<Props> = ({
-    callback,
-    onBack,
-    submitStartCallback,
-    userActionCallback,
-    setContactCallback,
-    className = '',
-    backButtonText = '',
-    verifyButtonText = '',
-    orderDenialCloseButtonText = 'Close',
-    orderDenialContinueButtonText = 'Continue',
-    organizationNumberLabel = '',
-    organizationNumber = '',
-    templatePackageId,
-    subscriberId,
-    userId,
-    identityProviderId,
-    organizationId,
-    redirectUrl,
-    showIframe,
-    language,
-    merchantAgreementUrl,
-    orderValues,
-    paymentMethodsOptions,
-    invoiceAddressSelection,
-    invoiceLookupNotFoundText,
-    errorValidationTitleMsg,
-    errorValidationDenialOrderBlockingMsg,
-    errorValidationBlockingOffersMsg,
-    orderDenialOfferBaseText,
-    orderDenialOfferWithFallbackText,
-    orderDenialAmountText,
-    fetchDenialFallbackOffer,
-}) => {
-    const methods = useForm<EHFFormInputsType>({
-        defaultValues: {
-            ...initialData,
-            organizationNumber,
-        },
-    });
-
-    const {
-        handleSubmit,
-        formState: { errors },
-    } = methods;
-
-    const invoiceOrderFields =
-        invoiceAddressSelection?.fields || orderInvoiceContactFields;
-
-    const orderFields =
-        paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
-            ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
-
-    const {
-        orderSubmit,
-        continueWithFallbackOffer,
-        loading,
-        apiErrorMsg,
-        errorsMsg,
-        orderDenialType,
-        orderDenialMessage,
-        orderDenialFallbackOffer,
-        dismissOrderDenial,
-    } = useOrderForm({
-        callback,
-        submitStartCallback,
-        userActionCallback,
-        setContactCallback,
-        organizationId,
-        subscriberId,
-        userId,
-        identityProviderId,
-        orderFields,
-        redirectUrl,
-        showIframe,
-        language,
-        merchantAgreementUrl,
-        paymentMethodsOptions,
-        templatePackageId,
-        invoiceAddressToggle: orderValues?.invoiceAddressSelection,
-        invoiceOrderFields,
-        invoiceLookupNotFoundText,
-        errorValidationTitleMsg,
-        errorValidationDenialOrderBlockingMsg,
-        errorValidationBlockingOffersMsg,
-        orderDenialOfferBaseText,
-        orderDenialOfferWithFallbackText,
-        orderDenialAmountText,
-        fetchDenialFallbackOffer,
-    });
-
-    const onSubmit: SubmitHandler<EHFFormInputsType> = async (
-        data
-    ): Promise<void> => {
-        orderSubmit({
-            ...orderValues,
-            organizationNumber: data.organizationNumber,
-        });
-    };
-
-    const handleBack = () => {
-        userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
-        onBack?.();
-    };
-
-    return (
-        <FormProvider {...methods}>
-            <form
-                className={`${className}`}
-                onSubmit={handleSubmit(onSubmit)}
-                data-testid="ehf-form-id"
-            >
-                <InputField
-                    name="organizationNumber"
-                    label={organizationNumberLabel}
-                    required
-                    readOnly={false}
-                    errors={errors}
-                />
-                <div className="d-flex justify-center flex-wrap gap-2">
-                    <Button
-                        type="button"
-                        btnType="default"
-                        disable={loading}
-                        buttonText={backButtonText}
-                        onClick={handleBack}
-                    />
-
-                    <Button
-                        type="submit"
-                        loading={loading}
-                        buttonText={verifyButtonText}
-                    />
-                </div>
-
-                {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
-                {errorsMsg?.length > 0 &&
-                    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>
-    );
-};
-
-export default EHFForm;
+import { FC, useMemo } from 'react';
+import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import z from 'zod';
+
+import Alert from '../Alert/Alert';
+import Button from '../Button/Button';
+import OrderDenialModal from '../OrderDenialModal/OrderDenialModal';
+import InputField from '../FormFields/InputField';
+import { FieldGroup } from '../ui/field';
+import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
+import {
+    OrderFormFieldType,
+    PaymentMethodSettingsType,
+    ContactRequestType,
+    OrderDenialFallbackOfferType,
+} from '../../types/general';
+import { OrderFormInputsType, OrderInfoType } from '../../types/order';
+import { orderInvoiceContactFields } from '../../utils/order.helper';
+import useOrderForm from '../../hooks/useOrderForm';
+import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
+
+type Props = {
+    callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
+    onBack: () => void;
+    submitStartCallback?: (id: string) => void;
+    userActionCallback?: (
+        action: UserActionEnum,
+        args: object | null | undefined
+    ) => void;
+    setContactCallback?: (contactInfo: ContactRequestType) => void;
+    className?: string;
+    backButtonText?: string;
+    verifyButtonText?: string;
+    orderDenialCloseButtonText?: string;
+    orderDenialContinueButtonText?: string;
+    organizationNumberLabel?: string;
+    organizationNumber?: string;
+    glnLabel?: string;
+    templatePackageId: string;
+    subscriberId?: string;
+    userId?: string;
+    identityProviderId?: string;
+    organizationId: string;
+    redirectUrl?: string;
+    showIframe?: boolean;
+    language: string;
+    merchantAgreementUrl: string;
+    orderValues?: OrderFormInputsType;
+    paymentMethodsOptions?: PaymentMethodSettingsType;
+    invoiceAddressSelection?: {
+        enabled?: boolean;
+        label?: string;
+        fields?: OrderFormFieldType[];
+        paymentMethods?: PaymentMethodEnum[];
+    };
+    invoiceLookupNotFoundText?: string;
+    errorReqMsg?: string;
+    errorValidationTitleMsg?: string;
+    errorValidationDenialOrderBlockingMsg?: string;
+    errorValidationBlockingOffersMsg?: string;
+    orderDenialOfferBaseText?: string;
+    orderDenialOfferWithFallbackText?: string;
+    orderDenialAmountText?: string;
+    fetchDenialFallbackOffer?: (
+        organizationId: string
+    ) => Promise<OrderDenialFallbackOfferType | undefined>;
+};
+
+const buildFormSchema = (errorReqMsg?: string) => {
+    const message = errorReqMsg || 'This field is required!';
+
+    return z.object({
+        organizationNumber: z.string().min(1, message).regex(/\S/, message),
+    });
+};
+
+type EHFFormInputsType = { organizationNumber: string };
+
+const initialData = {
+    organizationNumber: '',
+};
+
+const EHFForm: FC<Props> = ({
+    callback,
+    onBack,
+    submitStartCallback,
+    userActionCallback,
+    setContactCallback,
+    className = '',
+    backButtonText = '',
+    verifyButtonText = '',
+    orderDenialCloseButtonText = 'Close',
+    orderDenialContinueButtonText = 'Continue',
+    organizationNumberLabel = '',
+    organizationNumber = '',
+    templatePackageId,
+    subscriberId,
+    userId,
+    identityProviderId,
+    organizationId,
+    redirectUrl,
+    showIframe,
+    language,
+    merchantAgreementUrl,
+    orderValues,
+    paymentMethodsOptions,
+    invoiceAddressSelection,
+    invoiceLookupNotFoundText,
+    errorReqMsg,
+    errorValidationTitleMsg,
+    errorValidationDenialOrderBlockingMsg,
+    errorValidationBlockingOffersMsg,
+    orderDenialOfferBaseText,
+    orderDenialOfferWithFallbackText,
+    orderDenialAmountText,
+    fetchDenialFallbackOffer,
+}) => {
+    const formSchema = useMemo(
+        () => buildFormSchema(errorReqMsg),
+        [errorReqMsg]
+    );
+
+    const methods = useForm<EHFFormInputsType>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            ...initialData,
+            organizationNumber,
+        },
+    });
+
+    const { handleSubmit } = methods;
+
+    const invoiceOrderFields =
+        invoiceAddressSelection?.fields || orderInvoiceContactFields;
+
+    const orderFields =
+        paymentMethodsOptions?.[orderValues?.paymentMethod as PaymentMethodEnum]
+            ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
+
+    const {
+        orderSubmit,
+        continueWithFallbackOffer,
+        loading,
+        apiErrorMsg,
+        errorsMsg,
+        orderDenialType,
+        orderDenialMessage,
+        orderDenialFallbackOffer,
+        dismissOrderDenial,
+    } = useOrderForm({
+        callback,
+        submitStartCallback,
+        userActionCallback,
+        setContactCallback,
+        organizationId,
+        subscriberId,
+        userId,
+        identityProviderId,
+        orderFields,
+        redirectUrl,
+        showIframe,
+        language,
+        merchantAgreementUrl,
+        paymentMethodsOptions,
+        templatePackageId,
+        invoiceAddressToggle: orderValues?.invoiceAddressSelection,
+        invoiceOrderFields,
+        invoiceLookupNotFoundText,
+        errorValidationTitleMsg,
+        errorValidationDenialOrderBlockingMsg,
+        errorValidationBlockingOffersMsg,
+        orderDenialOfferBaseText,
+        orderDenialOfferWithFallbackText,
+        orderDenialAmountText,
+        fetchDenialFallbackOffer,
+    });
+
+    const onSubmit: SubmitHandler<EHFFormInputsType> = async (
+        data
+    ): Promise<void> => {
+        orderSubmit({
+            ...orderValues,
+            organizationNumber: data.organizationNumber,
+        });
+    };
+
+    const handleBack = () => {
+        userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
+        onBack?.();
+    };
+
+    return (
+        <FormProvider {...methods}>
+            <form
+                className={`${className}`}
+                noValidate
+                onSubmit={handleSubmit(onSubmit)}
+                data-testid="ehf-form-id"
+            >
+                <FieldGroup className="mb-5">
+                    <InputField
+                        name="organizationNumber"
+                        label={organizationNumberLabel}
+                        required
+                        readOnly={false}
+                    />
+                </FieldGroup>
+                <div className="flex justify-center flex-wrap gap-2">
+                    <Button
+                        type="button"
+                        btnType="default"
+                        disable={loading}
+                        buttonText={backButtonText}
+                        onClick={handleBack}
+                    />
+
+                    <Button
+                        type="submit"
+                        loading={loading}
+                        buttonText={verifyButtonText}
+                    />
+                </div>
+
+                {apiErrorMsg && <Alert className="mt-2" msg={apiErrorMsg} />}
+                {errorsMsg?.length > 0 &&
+                    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>
+    );
+};
+
+export default EHFForm;