@infosoftas/s4-orders-js-sdk 0.0.1-alpha2c.3 → 0.0.1-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@infosoftas/s4-orders-js-sdk",
-    "version": "0.0.1-alpha2c.3",
+    "version": "0.0.1-beta1",
     "scripts": {
         "build": "rimraf lib && webpack --env mode=production",
         "release": "release-it"

package/src/App.tsx

@@ -40,6 +40,7 @@ const App: FC<ConfigType> = ({
     paymentMethodsOptions,
     invoiceAddressSelection,
     availablePaymentMethods = [],
+    allowedPaymentMethods,
     language = 'en-US',
     merchantAgreementUrl = '',
     settings = {
@@ -49,10 +50,15 @@ const App: FC<ConfigType> = ({
         submitButtonText: 'Start',
         backButtonText: 'Back',
         verifyButtonText: 'Verify',
-        organizationNumberLabel: 'CVR',
+        organizationNumberLabel: 'Organization Number',
         paymentMethodLabel: '',
         glnLabel: 'GLN',
+        cvrLabel: 'CVR',
         orderDefaultValues: undefined,
+        errorReqMsg: '',
+        errorInvalidEmailMsg: '',
+        errorInvalidPhoneMsg: '',
+        paymentMethodNotAllowedMsg: '',
     },
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -283,10 +289,11 @@ const App: FC<ConfigType> = ({
                                 callback={handleInvoiceForm}
                                 backButtonText={settings?.backButtonText}
                                 verifyButtonText={settings?.verifyButtonText}
-                                organizationNumberLabel={
-                                    settings?.organizationNumberLabel
-                                }
+                                organizationNumberLabel={settings?.cvrLabel}
                                 glnLabel={settings?.glnLabel}
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
                             />
                         )}
                         {formType === FormTypeEnum.EHF && (
@@ -298,6 +305,9 @@ const App: FC<ConfigType> = ({
                                 organizationNumberLabel={
                                     settings?.organizationNumberLabel
                                 }
+                                organizationNumber={
+                                    orderFormValues?.organizationNumber
+                                }
                             />
                         )}
                         {formType !== FormTypeEnum.OIO &&
@@ -311,12 +321,18 @@ const App: FC<ConfigType> = ({
                                     identityProviderId={identityProviderId}
                                     organizationId={organizationId}
                                     paymentMethods={availablePaymentMethods}
+                                    allowedPaymentMethods={
+                                        allowedPaymentMethods
+                                    }
                                     submitButtonText={
                                         settings?.submitButtonText
                                     }
                                     paymentMethodLabel={
                                         settings?.paymentMethodLabel
                                     }
+                                    paymentMethodNotAllowedMsg={
+                                        settings?.paymentMethodNotAllowedMsg
+                                    }
                                     errorReqMsg={settings?.errorReqMsg}
                                     errorInvalidEmailMsg={
                                         settings?.errorInvalidEmailMsg

package/src/components/EHFForm/EHFForm.tsx

@@ -18,6 +18,7 @@ type Props = {
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
+    organizationNumber?: string;
     className?: string;
 };
 
@@ -35,6 +36,7 @@ const EHFForm: FC<Props> = ({
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
+    organizationNumber = '',
     className = '',
 }) => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -44,6 +46,7 @@ const EHFForm: FC<Props> = ({
     const methods = useForm<EHFFormInputsType>({
         defaultValues: {
             ...initialData,
+            organizationNumber,
         },
     });
 

package/src/components/OIOForm/OIOForm.tsx

@@ -18,6 +18,7 @@ type Props = {
     backButtonText?: string;
     verifyButtonText?: string;
     organizationNumberLabel?: string;
+    organizationNumber?: string;
     glnLabel?: string;
     className?: string;
 };
@@ -38,6 +39,7 @@ const EHFForm: FC<Props> = ({
     backButtonText = '',
     verifyButtonText = '',
     organizationNumberLabel = '',
+    organizationNumber = '',
     glnLabel = '',
     className = '',
 }) => {
@@ -48,6 +50,7 @@ const EHFForm: FC<Props> = ({
     const methods = useForm<OIOFormInputsType>({
         defaultValues: {
             ...initialData,
+            cvr: organizationNumber,
         },
     });
 

package/src/components/OrderForm/OrderForm.tsx

@@ -1,10 +1,14 @@
-import { FC, ChangeEvent, Suspense, useState } from 'react';
+import { FC, ChangeEvent, Suspense, useState, useMemo } from 'react';
 import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
 
 import { createSubscriber, mapSubscriberToUser } from '../../api/SubscribeApi';
 import { orderStart } from '../../api/OrdersApi';
 import { PaymentMethodEnum } from '../../enums/general';
-import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../../constants/index';
+import {
+    WRONG_MSG,
+    PAYMENT_METHOD_DEFAULT,
+    INVOICE_ALLOWED_PAYMENT_METHODS,
+} from '../../constants/index';
 import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import ToggleField from '../FormFields/ToggleFiled';
@@ -44,8 +48,10 @@ type Props = {
     paymentMethodsOptions?: PaymentMethodOptionsType;
     defaultValues?: OrderFormInputsType;
     paymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    allowedPaymentMethods?: PaymentMethodEnum[];
     submitButtonText?: string;
     paymentMethodLabel?: string;
+    paymentMethodNotAllowedMsg?: string;
     errorReqMsg?: string;
     errorInvalidEmailMsg?: string;
     errorInvalidPhoneMsg?: string;
@@ -53,6 +59,7 @@ type Props = {
         enabled?: boolean;
         label?: string;
         fields?: OrderFormFiledType[];
+        paymentMethods?: PaymentMethodEnum[];
     };
 };
 
@@ -84,9 +91,11 @@ const OrderForm: FC<Props> = ({
     language,
     merchantAgreementUrl,
     paymentMethods = [],
+    allowedPaymentMethods,
     invoiceAddressSelection,
     submitButtonText = 'Start',
     paymentMethodLabel = 'Select Payment Method',
+    paymentMethodNotAllowedMsg = 'This payment method not allowed!',
     errorReqMsg = '',
     errorInvalidEmailMsg = '',
     errorInvalidPhoneMsg = '',
@@ -111,6 +120,10 @@ const OrderForm: FC<Props> = ({
     const invoiceOrderFields =
         invoiceAddressSelection?.fields || orderInvoiceContactFields;
 
+    const invoicePaymentMethods =
+        invoiceAddressSelection?.paymentMethods ||
+        INVOICE_ALLOWED_PAYMENT_METHODS;
+
     const {
         register,
         handleSubmit,
@@ -120,6 +133,7 @@ const OrderForm: FC<Props> = ({
     } = methods;
 
     const invoiceAddressToggle = watch('invoiceAddressSelection');
+    const paymentMethodInput = watch('paymentMethod');
 
     const onSubmit: SubmitHandler<OrderFormInputsType> = async (
         data
@@ -221,8 +235,29 @@ const OrderForm: FC<Props> = ({
             paymentMethodsOptions?.[e.target.value as PaymentMethodEnum]
                 ?.orderFormFields ?? DEFAULT_ORDER_FORM_FIELDS;
         setOrderFields(orderFieldsLocal);
+        if (
+            !invoicePaymentMethods.includes(e.target.value as PaymentMethodEnum)
+        ) {
+            setValue('invoiceAddressSelection', false);
+        }
     };
 
+    const allowPaymentMethod = useMemo(() => {
+        if (!allowedPaymentMethods || allowedPaymentMethods?.length === 0) {
+            return true;
+        }
+
+        if (
+            allowedPaymentMethods.includes(
+                paymentMethodInput as PaymentMethodEnum
+            )
+        ) {
+            return true;
+        }
+
+        return false;
+    }, [allowedPaymentMethods, paymentMethodInput]);
+
     return (
         <FormProvider {...methods}>
             <form
@@ -263,7 +298,7 @@ const OrderForm: FC<Props> = ({
                         )}
                     </div>
                 )}
-                {orderFields?.length > 0 && (
+                {orderFields?.length > 0 && allowPaymentMethod && (
                     <Suspense fallback={null}>
                         {orderFields.map((field) => {
                             const Component = formFieldsMapper[field.name];
@@ -284,42 +319,63 @@ const OrderForm: FC<Props> = ({
                         })}
                     </Suspense>
                 )}
-                {invoiceAddressSelection?.enabled && (
-                    <ToggleField
-                        name="invoiceAddressSelection"
-                        label={
-                            invoiceAddressSelection?.label ?? 'Invoice Address'
-                        }
-                    />
-                )}
-                {invoiceAddressToggle && invoiceOrderFields?.length > 0 && (
-                    <Suspense fallback={null}>
-                        {invoiceOrderFields.map((field) => {
-                            const Component = formFieldsMapper[field.name];
+                {invoiceAddressSelection?.enabled &&
+                    allowPaymentMethod &&
+                    invoicePaymentMethods.includes(
+                        paymentMethodInput as PaymentMethodEnum
+                    ) && (
+                        <ToggleField
+                            name="invoiceAddressSelection"
+                            label={
+                                invoiceAddressSelection?.label ??
+                                'Invoice Address'
+                            }
+                        />
+                    )}
+                {invoiceAddressToggle &&
+                    invoiceOrderFields?.length > 0 &&
+                    allowPaymentMethod && (
+                        <Suspense fallback={null}>
+                            {invoiceOrderFields.map((field) => {
+                                const Component = formFieldsMapper[field.name];
 
-                            return Component ? (
-                                <Component
-                                    key={field.name}
-                                    name={field.name}
-                                    label={field.label}
-                                    required={field.required || false}
-                                    readOnly={field.readOnly || false}
-                                    errors={errors}
-                                    errorReqMsg={errorReqMsg}
-                                    errorInvalidEmailMsg={errorInvalidEmailMsg}
-                                    errorInvalidPhoneMsg={errorInvalidPhoneMsg}
-                                />
-                            ) : null;
-                        })}
-                    </Suspense>
+                                return Component ? (
+                                    <Component
+                                        key={field.name}
+                                        name={field.name}
+                                        label={field.label}
+                                        required={field.required || false}
+                                        readOnly={field.readOnly || false}
+                                        errors={errors}
+                                        errorReqMsg={errorReqMsg}
+                                        errorInvalidEmailMsg={
+                                            errorInvalidEmailMsg
+                                        }
+                                        errorInvalidPhoneMsg={
+                                            errorInvalidPhoneMsg
+                                        }
+                                    />
+                                ) : null;
+                            })}
+                        </Suspense>
+                    )}
+                {allowPaymentMethod && (
+                    <Button
+                        type="submit"
+                        loading={loading}
+                        buttonText={submitButtonText}
+                    />
                 )}
-                <Button
-                    type="submit"
-                    loading={loading}
-                    buttonText={submitButtonText}
+                <Alert
+                    className="mt-2"
+                    msg={
+                        allowPaymentMethod
+                            ? apiErrorMsg
+                            : paymentMethodNotAllowedMsg
+                    }
                 />
-                <Alert className="mt-2" msg={apiErrorMsg} />
                 {errorsMsg?.length > 0 &&
+                    allowPaymentMethod &&
                     errorsMsg.map((i) => <Alert className="mt-2" msg={i} />)}
             </form>
         </FormProvider>

package/src/constants/index.ts

@@ -6,3 +6,8 @@ export const WRONG_MSG = 'Something went wrong!';
 
 export const PAYMENT_METHOD_DEFAULT: PaymentMethodEnum =
     PaymentMethodEnum.Vipps;
+
+export const INVOICE_ALLOWED_PAYMENT_METHODS = [
+    PaymentMethodEnum.Email,
+    PaymentMethodEnum.Invoice,
+];

package/src/types/general.ts

@@ -36,6 +36,7 @@ export type ConfigType = {
     redirectUrl?: string;
     showIframe?: boolean;
     availablePaymentMethods?: { label: string; value: PaymentMethodEnum }[];
+    allowedPaymentMethods?: PaymentMethodEnum[];
     paymentMethodsOptions?: PaymentMethodOptionsType;
     language?: string;
     merchantAgreementUrl?: string;
@@ -51,12 +52,14 @@ export type ConfigType = {
         backButtonText?: string;
         verifyButtonText?: string;
         organizationNumberLabel?: string;
+        cvrLabel?: string;
         glnLabel?: string;
         orderDefaultValues?: OrderFormInputsType;
         paymentMethodLabel?: string;
         errorReqMsg?: string;
         errorInvalidEmailMsg?: string;
         errorInvalidPhoneMsg?: string;
+        paymentMethodNotAllowedMsg?: string;
     };
 };
 

package/src/types/order.ts

@@ -10,6 +10,7 @@ export type OrderFormInputsType = {
     address?: string;
     zip?: string;
     careOf?: string;
+    organizationNumber?: string;
     invoiceAddressSelection?: boolean;
     orderReference?: string;
     invoiceName?: string;