@appcorp/stellar-solutions-invoice-module 0.1.26 → 0.1.27

package/base-modules/invoice/actions.d.ts

@@ -24,7 +24,8 @@ export declare enum INVOICE_ACTION_TYPES {
     SET_FORM = "SET_FORM",
     SET_DISABLE_SAVE_BUTTON = "SET_DISABLE_SAVE_BUTTON",
     SET_AFTER_DISCOUNT = "SET_AFTER_DISCOUNT",
-    SET_TAX = "SET_TAX"
+    SET_TAX = "SET_TAX",
+    SET_FORM_TO_RENDER = "SET_FORM_TO_RENDER"
 }
 export type InvoiceUpdateFieldAction = {
     type: INVOICE_ACTION_TYPES.SET_INPUT_FIELD;
@@ -155,4 +156,10 @@ export type InvoiceSetTaxAction = {
         tax: string;
     };
 };
-export type InvoiceActions = InvoiceAddItemProductAction | InvoiceAddItemServiceAction | InvoiceClearErrorAction | InvoiceDeleteItemProductAction | InvoiceDeleteItemServiceAction | InvoiceResetFormAction | InvoiceSetButtonDisableAction | InvoiceSetCurrentPageAction | InvoiceSetCustomerDataAction | InvoiceSetDiscountUnitAction | InvoiceSetErrorsAction | InvoiceSetFormLoadingAction | InvoiceSetInvoicesAction | InvoiceSetInvoiceFormAction | InvoiceSetIsInvoiceApiSuccessAction | InvoiceSetMaxPageLimitAction | InvoiceSetSearchQueryAction | InvoiceUpdateFieldAction | InvoiceToggleLoadingAction | InvoiceSetDrawerAction | InvoiceSetCountAction | InvoiceSetFormAction | InvoiceSetAfterDiscountAction | InvoiceSetTaxAction;
+export type InvoiceSetFormToRenderAction = {
+    type: INVOICE_ACTION_TYPES.SET_FORM_TO_RENDER;
+    payload: {
+        formToRender: string;
+    };
+};
+export type InvoiceActions = InvoiceAddItemProductAction | InvoiceAddItemServiceAction | InvoiceClearErrorAction | InvoiceDeleteItemProductAction | InvoiceDeleteItemServiceAction | InvoiceResetFormAction | InvoiceSetButtonDisableAction | InvoiceSetCurrentPageAction | InvoiceSetCustomerDataAction | InvoiceSetDiscountUnitAction | InvoiceSetErrorsAction | InvoiceSetFormLoadingAction | InvoiceSetInvoicesAction | InvoiceSetInvoiceFormAction | InvoiceSetIsInvoiceApiSuccessAction | InvoiceSetMaxPageLimitAction | InvoiceSetSearchQueryAction | InvoiceUpdateFieldAction | InvoiceToggleLoadingAction | InvoiceSetDrawerAction | InvoiceSetCountAction | InvoiceSetFormAction | InvoiceSetAfterDiscountAction | InvoiceSetTaxAction | InvoiceSetFormToRenderAction;

package/base-modules/invoice/actions.js

@@ -28,4 +28,5 @@ var INVOICE_ACTION_TYPES;
     INVOICE_ACTION_TYPES["SET_DISABLE_SAVE_BUTTON"] = "SET_DISABLE_SAVE_BUTTON";
     INVOICE_ACTION_TYPES["SET_AFTER_DISCOUNT"] = "SET_AFTER_DISCOUNT";
     INVOICE_ACTION_TYPES["SET_TAX"] = "SET_TAX";
+    INVOICE_ACTION_TYPES["SET_FORM_TO_RENDER"] = "SET_FORM_TO_RENDER";
 })(INVOICE_ACTION_TYPES || (exports.INVOICE_ACTION_TYPES = INVOICE_ACTION_TYPES = {}));

package/base-modules/invoice/constants.d.ts

@@ -12,6 +12,7 @@ export declare const toastErrors: {
     formSubmittedSuccess: string;
 };
 export declare const staticCompanySection: VistaFormElements;
+export declare const staticCustomerSection: VistaFormElements;
 export declare const staticPricingSection: VistaFormElements;
 export declare const staticServiceSection: VistaFormElements;
 export declare const staticProductSection: VistaFormElements;

package/base-modules/invoice/constants.js

@@ -2,9 +2,9 @@
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _a, _b, _c, _d;
+var _a, _b, _c, _d, _e;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.tableBodyCols = exports.INVOICE_API_ROUTES = exports.staticProductSection = exports.staticServiceSection = exports.staticPricingSection = exports.staticCompanySection = exports.toastErrors = exports.changeActionsMap = exports.handleSplitId = exports.pageLimit = void 0;
+exports.messages = exports.tableBodyCols = exports.INVOICE_API_ROUTES = exports.staticProductSection = exports.staticServiceSection = exports.staticPricingSection = exports.staticCustomerSection = exports.staticCompanySection = exports.toastErrors = exports.changeActionsMap = exports.handleSplitId = exports.pageLimit = void 0;
 var react_1 = __importDefault(require("react"));
 var util_functions_1 = require("@react-pakistan/util-functions");
 var form_schema_1 = require("@appcorp/app-corp-vista/utils/form-schema");
@@ -125,8 +125,108 @@ exports.staticCompanySection = (_a = {},
         // },
     ],
     _a);
-exports.staticPricingSection = (_b = {},
+exports.staticCustomerSection = (_b = {},
     _b[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { return void 0; },
+            id: 'phone',
+            label: 'Phone',
+            order: 1,
+            placeholder: '03** - *****',
+            required: true,
+            type: 'text',
+            value: '',
+        },
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { return void 0; },
+            id: 'firstName',
+            label: 'First Name',
+            order: 3,
+            placeholder: 'John',
+            required: true,
+            type: 'text',
+            value: '',
+        },
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { },
+            id: 'lastName',
+            label: 'Last Name',
+            order: 4,
+            placeholder: 'Doe',
+            required: true,
+            type: 'text',
+            value: '',
+        },
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { },
+            id: 'email',
+            label: 'Email',
+            order: 2,
+            placeholder: 'xyz@company.com',
+            required: false,
+            type: 'text',
+            value: '',
+        },
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { },
+            id: 'city',
+            label: 'City',
+            order: 6,
+            placeholder: 'New York',
+            required: true,
+            type: 'text',
+            value: '',
+        },
+        {
+            disabled: false,
+            enabled: true,
+            error: '',
+            handleOnChange: function () { },
+            id: 'address',
+            label: 'Address',
+            order: 5,
+            placeholder: 'xyz street .....',
+            required: false,
+            type: 'text',
+            value: '',
+        },
+    ],
+    _b[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1] = [
+        {
+            enabled: true,
+            handleInputOnChange: function () { return void 0; },
+            handleOnBlur: function () { return void 0; },
+            handleOnChange: function () { },
+            label: 'Country',
+            listItems: [],
+            nodeQueryKey: 'countryQuery',
+            nodeSelectKey: 'country',
+            order: 7,
+            placeholder: '',
+            query: '',
+            required: true,
+            selectKey1: 'name',
+            selectedItem: { name: '' },
+        },
+    ],
+    _b);
+exports.staticPricingSection = (_c = {},
+    _c[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
         {
             disabled: true,
             enabled: true,
@@ -192,7 +292,7 @@ exports.staticPricingSection = (_b = {},
             value: '',
         },
     ],
-    _b[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1] = [
+    _c[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1] = [
         {
             enabled: true,
             handleInputOnChange: function () { return void 0; },
@@ -209,7 +309,7 @@ exports.staticPricingSection = (_b = {},
             selectedItem: { taxName: '' },
         },
     ],
-    _b[form_schema_1.VISTA_FORM_ELEMENTS.RADIO_V1] = [
+    _c[form_schema_1.VISTA_FORM_ELEMENTS.RADIO_V1] = [
         {
             description: 'Discount can either be applied as a fixed value or percentage value, select below to confirm.',
             enabled: true,
@@ -235,9 +335,9 @@ exports.staticPricingSection = (_b = {},
             ],
         },
     ],
-    _b);
-exports.staticServiceSection = (_c = {},
-    _c[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
+    _c);
+exports.staticServiceSection = (_d = {},
+    _d[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
         {
             className: '',
             disabled: false,
@@ -309,7 +409,7 @@ exports.staticServiceSection = (_c = {},
             value: '',
         },
     ],
-    _c[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1] = [
+    _d[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1] = [
         {
             className: 'flex justify-center items-end',
             enabled: true,
@@ -319,9 +419,9 @@ exports.staticServiceSection = (_c = {},
             variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON,
         },
     ],
-    _c);
-exports.staticProductSection = (_d = {},
-    _d[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1] = [
+    _d);
+exports.staticProductSection = (_e = {},
+    _e[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1] = [
         {
             // className: 'col-span-2',
             // selectKey2: '',
@@ -340,7 +440,7 @@ exports.staticProductSection = (_d = {},
             selectedItem: { name: '' },
         },
     ],
-    _d[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
+    _e[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
         {
             className: '',
             disabled: false,
@@ -384,7 +484,7 @@ exports.staticProductSection = (_d = {},
             value: '',
         },
     ],
-    _d[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1] = [
+    _e[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1] = [
         {
             className: 'flex justify-center items-end',
             enabled: true,
@@ -394,7 +494,7 @@ exports.staticProductSection = (_d = {},
             variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON,
         },
     ],
-    _d);
+    _e);
 exports.INVOICE_API_ROUTES = {
     INVOICES: '/api/quotes-invoices',
     INVOICE: '/api/quote-invoice',

package/base-modules/invoice/context.js

@@ -99,12 +99,14 @@ var actions_1 = require("./actions");
 var constants_1 = require("./constants");
 var reducer_1 = require("./reducer");
 var types_1 = require("./types");
+var validate_1 = require("./validate");
 var generate_toast_1 = require("@appcorp/app-corp-vista/utils/generate-toast");
 var calculate_subtotal_1 = require("./calculate-subtotal");
 var context_1 = require("@appcorp/stellar-solutions-product-module/base-modules/product/context");
 var context_2 = require("@appcorp/stellar-solutions-company-module/base-modules/company/context");
 var date_fns_1 = require("date-fns");
 var calculate_total_1 = require("./calculate-total");
+var util_functions_2 = require("@react-pakistan/util-functions");
 var useInvoiceState = function () {
     var _a = (0, react_1.useReducer)(reducer_1.invoiceReducer, reducer_1.initialInvoiceState), state = _a[0], dispatch = _a[1];
     var products = (0, context_1.useProductStateContext)().products;
@@ -306,12 +308,20 @@ var useInvoiceState = function () {
                 type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                 payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER },
             });
+            dispatch({
+                type: actions_1.INVOICE_ACTION_TYPES.SET_FORM_TO_RENDER,
+                payload: { formToRender: 'company' },
+            });
         }
         if (text === 'customer') {
             dispatch({
                 type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                 payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_CUSTOMER_FORM_DRAWER },
             });
+            dispatch({
+                type: actions_1.INVOICE_ACTION_TYPES.SET_FORM_TO_RENDER,
+                payload: { formToRender: 'customer' },
+            });
         }
     };
     var handleEdit = function (id) {
@@ -352,31 +362,29 @@ var useInvoiceState = function () {
     //   return urls;
     // }, [state.images]);
     var handleSubmit = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var validationResult, validationErrors_1;
         return __generator(this, function (_a) {
             dispatch({
                 type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
                 payload: { disableSaveButton: true },
             });
             try {
-                // const validationResult =
-                //   formValidation?.safeParse({
-                //     ...updatedParams,
-                //   });
-                // if (validationResult?.error) {
-                //   const validationErrors: Record<string, string> = {};
-                //   validationResult?.error.errors.forEach((err) => {
-                //     validationErrors[err.path[0]] = err.message;
-                //   });
-                //   dispatch({
-                //     type: INVOICE_ACTION_TYPES.SET_ERRORS,
-                //     payload: validationErrors,
-                //   });
-                // }
-                // if (validationResult?.success) {
-                updateFetchNow(undefined, {
-                    body: JSON.stringify(__assign({}, updatedParams)),
-                });
-                // }
+                validationResult = validate_1.formValidation === null || validate_1.formValidation === void 0 ? void 0 : validate_1.formValidation.safeParse(__assign({}, updatedParams));
+                if (validationResult === null || validationResult === void 0 ? void 0 : validationResult.error) {
+                    validationErrors_1 = {};
+                    validationResult === null || validationResult === void 0 ? void 0 : validationResult.error.errors.forEach(function (err) {
+                        validationErrors_1[err.path[0]] = err.message;
+                    });
+                    dispatch({
+                        type: actions_1.INVOICE_ACTION_TYPES.SET_ERRORS,
+                        payload: validationErrors_1,
+                    });
+                }
+                if (validationResult === null || validationResult === void 0 ? void 0 : validationResult.success) {
+                    updateFetchNow(undefined, {
+                        body: JSON.stringify(__assign({}, updatedParams)),
+                    });
+                }
             }
             catch (_b) {
                 (0, generate_toast_1.generateToast)({
@@ -492,7 +500,6 @@ var useInvoiceState = function () {
                 payload: { key: 'subTotal', value: subtotal },
             });
         }
-        console.log('updated', updatedItems);
         dispatch({
             type: actions_1.INVOICE_ACTION_TYPES.SET_INPUT_FIELD,
             payload: { key: 'products', value: updatedItems },
@@ -626,6 +633,41 @@ var useInvoiceState = function () {
         }
         return elements;
     }, [state, handleChange, companies]);
+    var dynamicCustomerFormElements = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        var elements = __assign({}, constants_1.staticCustomerSection);
+        var textInputElements = (_a = elements[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.order - b.order; });
+        if (textInputElements) {
+            textInputElements[0].value = state.phone;
+            textInputElements[0].handleOnChange = handleChange;
+            textInputElements[0].error = state.errors.phone;
+            textInputElements[1].value = state.email;
+            textInputElements[1].handleOnChange = handleChange;
+            textInputElements[1].error = state.errors.email;
+            textInputElements[2].value = state.firstName;
+            textInputElements[2].handleOnChange = handleChange;
+            textInputElements[2].error = state.errors.firstName;
+            textInputElements[3].value = state.lastName;
+            textInputElements[3].handleOnChange = handleChange;
+            textInputElements[3].error = state.errors.lastName;
+            textInputElements[4].value = state.address;
+            textInputElements[4].handleOnChange = handleChange;
+            textInputElements[4].error = state.errors.address;
+            textInputElements[5].value = state.city;
+            textInputElements[5].handleOnChange = handleChange;
+            textInputElements[5].error = state.errors.city;
+        }
+        var comboboxElements = (_b = elements[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1]) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return a.order - b.order; });
+        if (comboboxElements) {
+            comboboxElements[0].selectedItem = { id: state.country };
+            comboboxElements[0].listItems = util_functions_2.countriesTimeZones;
+            comboboxElements[0].query = state.countryQuery;
+            comboboxElements[0].handleOnChange = handleSelectChange;
+            comboboxElements[0].handleInputOnChange = handleChange;
+            comboboxElements[0].handleOnBlur = handleChange;
+        }
+        return elements;
+    }, [state, handleChange]);
     var dynamicPricingFormElements = (0, react_1.useMemo)(function () {
         var _a, _b, _c, _d, _e, _f;
         var elements = __assign({}, constants_1.staticPricingSection);
@@ -675,113 +717,113 @@ var useInvoiceState = function () {
             });
         }
     };
-    var dynamicServiceFormElements = (0, react_1.useMemo)(function () {
-        var elements = __assign({}, constants_1.staticServiceSection);
-        var servicesElements = state.services.map(function () { return (__assign({}, elements)); });
-        servicesElements === null || servicesElements === void 0 ? void 0 : servicesElements.map(function (element, i) {
-            var _a, _b;
-            var textInputElements = (_a = element[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.order - b.order; });
-            if (textInputElements) {
-                textInputElements[0].value = state.services[i].name;
-                textInputElements[0].handleOnChange = function (k, v) { return handleItemChangeServices({
-                    index: i,
-                    key: k,
-                    value: v,
-                }); };
-                textInputElements[1].value = state.services[i].description;
-                textInputElements[1].handleOnChange = function (k, v) { return handleItemChangeServices({
-                    index: i,
-                    key: k,
-                    value: v,
-                }); };
-                textInputElements[2].value = state.services[i].quantity;
-                textInputElements[2].handleOnChange = function (k, v) { return handleItemChangeServices({
-                    index: i,
-                    key: k,
-                    value: v,
-                }); };
-                textInputElements[3].value = state.services[i].price;
-                textInputElements[3].handleOnChange = function (k, v) { return handleItemChangeServices({
-                    index: i,
-                    key: k,
-                    value: v,
-                }); };
-                textInputElements[4].value = state.services[i].rowTotal;
-            }
-            // state.services?.forEach((service, i) => {
-            // textInputElements[i].error = state.errors[id];
-            // textInputElements[i].error = state.errors[id];
-            // textInputElements[i].error = state.errors[id];
-            // textInputElements[i].error = state.errors[id];
-            // textInputElements[i].error = state.errors[id];
-            var buttonElements = (_b = element[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1]) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return a.order - b.order; });
-            if (buttonElements) {
-                // state.services?.forEach((service, i) => {
-                buttonElements[0].handleOnClick = function () {
-                    if (state.services.length > 1) {
-                        var res = state.services.splice(i, 1);
-                        dispatch({
-                            type: actions_1.INVOICE_ACTION_TYPES.DELETE_ITEM_SERVICE,
-                            payload: { services: __spreadArray([], res, true) },
-                        });
-                    }
-                };
-                // });
-            }
-        });
-        // }
-        return servicesElements;
-    }, [state.services, handleItemChangeServices]);
-    var dynamicProductFormElements = (0, react_1.useMemo)(function () {
-        var _a, _b, _c, _d, _e, _f;
-        var elements = __assign({}, constants_1.staticProductSection);
-        var textInputElements = (_a = elements[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.order - b.order; });
-        if (textInputElements) {
-            (_b = state.products) === null || _b === void 0 ? void 0 : _b.forEach(function (product, i) {
-                textInputElements[0].value = String(product.quantity);
-                textInputElements[0].handleOnChange = function (k, v) { return handleItemChangeProducts({
-                    index: i,
-                    key: k,
-                    value: Number(v),
-                }); };
-                // textInputElements[i].error = state.errors[id];
-                textInputElements[2].value = product.rowTotal;
-            });
-        }
-        var comboboxElements = (_c = elements[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1]) === null || _c === void 0 ? void 0 : _c.sort(function (a, b) { return a.order - b.order; });
-        if (comboboxElements) {
-            (_d = state.products) === null || _d === void 0 ? void 0 : _d.forEach(function (product, i) {
-                comboboxElements[0].listItems = products;
-                comboboxElements[0].query = state.productQuery;
-                comboboxElements[0].handleInputOnChange = handleChange;
-                comboboxElements[0].handleOnBlur = handleChange;
-                comboboxElements[0].handleOnChange = function (k, v) {
-                    console.log('_>>>>>>>>>', k, v);
-                    var val = __assign({}, v);
-                    handleItemChangeProducts({
-                        index: i,
-                        key: k,
-                        value: val.id,
-                    });
-                };
-            });
-        }
-        var buttonElements = (_e = elements[form_schema_1.VISTA_FORM_ELEMENTS.BUTTON_V1]) === null || _e === void 0 ? void 0 : _e.sort(function (a, b) { return a.order - b.order; });
-        if (buttonElements) {
-            (_f = state.products) === null || _f === void 0 ? void 0 : _f.forEach(function (product, i) {
-                buttonElements[0].handleOnClick = function () {
-                    if (state.products.length > 1) {
-                        var res = state.products.splice(i, 1);
-                        dispatch({
-                            type: actions_1.INVOICE_ACTION_TYPES.DELETE_ITEM_PRODUCT,
-                            payload: { products: __spreadArray([], res, true) },
-                        });
-                    }
-                };
-            });
-        }
-        return elements;
-    }, [state, handleItemChangeProducts, products, handleChange]);
+    // const dynamicServiceFormElements: VistaFormElements[] = useMemo(() => {
+    //   const elements: VistaFormElements = { ...staticServiceSection };
+    //   const servicesElements = state.services.map(() => ({
+    //     ...elements,
+    //   }));
+    //   servicesElements?.map((element, i) => {
+    //     const textInputElements: VistaTextInputV1Props[] | undefined = element[VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]?.sort((a, b) => a.order - b.order);
+    //     if (textInputElements) {
+    //       textInputElements[0].value = state.services[i].name;
+    //       textInputElements[0].handleOnChange = (k, v) => handleItemChangeServices({
+    //         index: i,
+    //         key: k as keyof Service,
+    //         value: v,
+    //       });
+    //       textInputElements[1].value = state.services[i].description;
+    //       textInputElements[1].handleOnChange = (k, v) => handleItemChangeServices({
+    //         index: i,
+    //         key: k as keyof Service,
+    //         value: v,
+    //       });
+    //       textInputElements[2].value = state.services[i].quantity;
+    //       textInputElements[2].handleOnChange = (k, v) => handleItemChangeServices({
+    //         index: i,
+    //         key: k as keyof Service,
+    //         value: v,
+    //       });
+    //       textInputElements[3].value = state.services[i].price;
+    //       textInputElements[3].handleOnChange = (k, v) => handleItemChangeServices({
+    //         index: i,
+    //         key: k as keyof Service,
+    //         value: v,
+    //       });
+    //       textInputElements[4].value = state.services[i].rowTotal;
+    //     }
+    //     // state.services?.forEach((service, i) => {
+    //     // textInputElements[i].error = state.errors[id];
+    //     // textInputElements[i].error = state.errors[id];
+    //     // textInputElements[i].error = state.errors[id];
+    //     // textInputElements[i].error = state.errors[id];
+    //     // textInputElements[i].error = state.errors[id];
+    //     const buttonElements = element[VISTA_FORM_ELEMENTS.BUTTON_V1]?.sort((a, b) => a.order - b.order);
+    //     if (buttonElements) {
+    //       // state.services?.forEach((service, i) => {
+    //       buttonElements[0].handleOnClick = () => {
+    //         if (state.services.length > 1) {
+    //           const res = state.services.splice(i, 1);
+    //           dispatch({
+    //             type: INVOICE_ACTION_TYPES.DELETE_ITEM_SERVICE,
+    //             payload: { services: [...res] },
+    //           });
+    //         }
+    //       }
+    //       // });
+    //     }
+    //   });
+    //   // }
+    //   return servicesElements;
+    // }, [state.services, handleItemChangeServices]);
+    // const dynamicProductFormElements: VistaFormElements = useMemo(() => {
+    //   const elements: VistaFormElements = { ...staticProductSection };
+    //   const textInputElements: VistaTextInputV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]?.sort((a, b) => a.order - b.order);
+    //   if (textInputElements) {
+    //     state.products?.forEach((product, i) => {
+    //       textInputElements[0].value = String(product.quantity);
+    //       textInputElements[0].handleOnChange = (k, v) => handleItemChangeProducts({
+    //         index: i,
+    //         key: k as keyof Product,
+    //         value: Number(v),
+    //       });
+    //       // textInputElements[i].error = state.errors[id];
+    //       textInputElements[2].value = product.rowTotal;
+    //     });
+    //   }
+    //   const comboboxElements: VistaComboboxV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.COMBOBOX_V1]?.sort((a, b) => a.order - b.order);
+    //   if (comboboxElements) {
+    //     state.products?.forEach((product, i) => {
+    //       comboboxElements[0].listItems = products;
+    //       comboboxElements[0].query = state.productQuery;
+    //       comboboxElements[0].handleInputOnChange = handleChange;
+    //       comboboxElements[0].handleOnBlur = handleChange;
+    //       comboboxElements[0].handleOnChange = (k, v: object) => {
+    //         console.log('_>>>>>>>>>', k, v);
+    //         const val = { ...v } as { id: string };
+    //         handleItemChangeProducts({
+    //           index: i,
+    //           key: k as keyof Product,
+    //           value: val.id,
+    //         });
+    //       }
+    //     })
+    //   }
+    //   const buttonElements = elements[VISTA_FORM_ELEMENTS.BUTTON_V1]?.sort((a, b) => a.order - b.order);
+    //   if (buttonElements) {
+    //     state.products?.forEach((product, i) => {
+    //       buttonElements[0].handleOnClick = () => {
+    //         if (state.products.length > 1) {
+    //           const res = state.products.splice(i, 1);
+    //           dispatch({
+    //             type: INVOICE_ACTION_TYPES.DELETE_ITEM_PRODUCT,
+    //             payload: { products: [...res] },
+    //           });
+    //         }
+    //       }
+    //     });
+    //   }
+    //   return elements;
+    // }, [state, handleItemChangeProducts, products, handleChange]);
     var headerActions = [
         {
             enabled: true,
@@ -810,11 +852,17 @@ var useInvoiceState = function () {
             order: 2,
         },
     ];
-    return __assign(__assign({}, state), { byIdError: byIdError, byIdLoading: byIdLoading, clearSearch: clearSearch, closeDrawer: closeDrawer, deleteError: deleteError, deleteLoading: deleteLoading, dispatch: dispatch, dynamicCompanyFormElements: dynamicCompanyFormElements, dynamicPricingFormElements: dynamicPricingFormElements, dynamicProductFormElements: dynamicProductFormElements, dynamicServiceFormElements: dynamicServiceFormElements, handleChange: handleChange, handleNextClick: handleNextClick, handlePageLimit: handlePageLimit, handlePreviousClick: handlePreviousClick, handleSubmit: handleSubmit, 
+    return __assign(__assign({}, state), { byIdError: byIdError, byIdLoading: byIdLoading, clearSearch: clearSearch, closeDrawer: closeDrawer, deleteError: deleteError, deleteLoading: deleteLoading, dispatch: dispatch, dynamicCompanyFormElements: dynamicCompanyFormElements, dynamicPricingFormElements: dynamicPricingFormElements, 
+        // dynamicProductFormElements,
+        // dynamicServiceFormElements,
+        dynamicCustomerFormElements: dynamicCustomerFormElements, handleChange: handleChange, handleNextClick: handleNextClick, handlePageLimit: handlePageLimit, handlePreviousClick: handlePreviousClick, handleSubmit: handleSubmit, 
         // handleUploadImage,
         headerActions: headerActions, listError: listError, listFetchNow: listFetchNow, listLoading: listLoading, rowActions: rowActions, searchOnChange: searchOnChange, updateError: updateError, updateLoading: updateLoading, handleAddItemService: handleAddItemService, handleAddItemProduct: handleAddItemProduct, handleItemChangeServices: handleItemChangeServices, handleDeleteServiceRow: handleDeleteServiceRow, handleItemChangeProducts: handleItemChangeProducts, handleDeleteProductRow: handleDeleteProductRow });
 };
-exports.InvoiceStateContext = (0, react_1.createContext)(__assign(__assign({}, reducer_1.initialInvoiceState), { byIdError: undefined, byIdLoading: false, clearSearch: function () { return void 0; }, closeDrawer: function () { return void 0; }, deleteError: undefined, deleteLoading: false, dispatch: function () { return void 0; }, dynamicCompanyFormElements: {}, dynamicPricingFormElements: {}, dynamicProductFormElements: {}, dynamicServiceFormElements: [], handleChange: function () { return void 0; }, handleNextClick: function () { return void 0; }, handlePageLimit: function () { return void 0; }, handlePreviousClick: function () { return void 0; }, handleSubmit: function () { return void 0; }, 
+exports.InvoiceStateContext = (0, react_1.createContext)(__assign(__assign({}, reducer_1.initialInvoiceState), { byIdError: undefined, byIdLoading: false, clearSearch: function () { return void 0; }, closeDrawer: function () { return void 0; }, deleteError: undefined, deleteLoading: false, dispatch: function () { return void 0; }, dynamicCompanyFormElements: {}, dynamicPricingFormElements: {}, 
+    // dynamicProductFormElements: {},
+    // dynamicServiceFormElements: [],
+    dynamicCustomerFormElements: {}, handleChange: function () { return void 0; }, handleNextClick: function () { return void 0; }, handlePageLimit: function () { return void 0; }, handlePreviousClick: function () { return void 0; }, handleSubmit: function () { return void 0; }, 
     // handleUploadImage: () => void 0,
     headerActions: [], listError: undefined, listFetchNow: function () { return void 0; }, listLoading: false, rowActions: [], searchOnChange: function () { return void 0; }, updateError: undefined, updateLoading: false, handleAddItemService: function () { return void 0; }, handleAddItemProduct: function () { return void 0; }, handleItemChangeServices: function () { return void 0; }, handleDeleteServiceRow: function () { return void 0; }, handleItemChangeProducts: function () { return void 0; }, handleDeleteProductRow: function () { return void 0; } }));
 var InvoiceStateContextProvider = function (_a) {

package/base-modules/invoice/customer-form-elements.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { VistaFormElements } from '@appcorp/app-corp-vista/type/vista-form-elements';
+export declare const renderCustomerFormElements: (elementProps: VistaFormElements) => React.JSX.Element;

package/base-modules/invoice/customer-form-elements.js

@@ -0,0 +1,41 @@
+"use strict";
+/* eslint-disable */
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderCustomerFormElements = void 0;
+var react_1 = __importDefault(require("react"));
+var form_schema_1 = require("@appcorp/app-corp-vista/utils/form-schema");
+var renderCustomerFormElements = function (elementProps) {
+    var _a;
+    var elementsArray = (_a = Object.entries(form_schema_1.vistaFormSchema)
+        .flatMap(function (_a) {
+        var _b, _c;
+        var key = _a[0], config = _a[1];
+        var Component = config;
+        return (_c = (_b = (elementProps[key] || [])) === null || _b === void 0 ? void 0 : _b.filter(function (props) { return props.enabled; })) === null || _c === void 0 ? void 0 : _c.map(function (props) { return ({
+            Component: Component,
+            key: key,
+            order: props.order,
+            props: props,
+        }); });
+    })) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return a.order - b.order; });
+    return (react_1.default.createElement("div", { className: "grid grid-cols-4 gap-4" }, elementsArray === null || elementsArray === void 0 ? void 0 : elementsArray.map(function (_a, index) {
+        var key = _a.key, Component = _a.Component, props = _a.props;
+        return (react_1.default.createElement("div", { key: "".concat(key, "-").concat(index) },
+            react_1.default.createElement(Component, __assign({}, props))));
+    })));
+};
+exports.renderCustomerFormElements = renderCustomerFormElements;

package/base-modules/invoice/customer-form-section.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomerSection: () => React.JSX.Element;

package/base-modules/invoice/customer-form-section.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomerSection = void 0;
+var react_1 = __importDefault(require("react"));
+var vista_vertical_divider_v4_1 = require("@appcorp/app-corp-vista/molecules/vista-vertical-divider-v4");
+var customer_form_elements_1 = require("./customer-form-elements");
+var context_1 = require("./context");
+var CustomerSection = function () {
+    var dynamicCustomerFormElements = (0, context_1.useInvoiceStateContext)().dynamicCustomerFormElements;
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
+        react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Customer" }),
+        (0, customer_form_elements_1.renderCustomerFormElements)(dynamicCustomerFormElements)));
+};
+exports.CustomerSection = CustomerSection;

package/base-modules/invoice/form.js

@@ -5,62 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InvoiceForm = void 0;
 var react_1 = __importDefault(require("react"));
-// import { VistaUploadV1Props } from '@appcorp/app-corp-vista/type/vista-upload-type';
-// import { VistaTextInputV1Props } from '@appcorp/app-corp-vista/type/vista-text-input-type';
-// import { VistaTextAreaV1Props } from '@appcorp/app-corp-vista/type/vista-text-area-type';
-// import { VistaSelectV1Props } from '@appcorp/app-corp-vista/type/vista-select-type';
-// import { VistaFormElements } from '@appcorp/app-corp-vista/type/vista-form-elements';
-// import { VistaComboboxV1Props } from '@appcorp/app-corp-vista/type/vista-combobox-type';
-// import { VISTA_FORM_ELEMENTS } from '@appcorp/app-corp-vista/utils/form-schema';
-// import { useInvoiceStateContext } from './context';
-// import { renderProductFormElements } from './form-elements';
 var products_form_section_1 = require("./products-form-section");
 var pricing_form_section_1 = require("./pricing-form-section");
 var add_service_product_section_1 = require("./add-service-product-section");
 var services_form_section_1 = require("./services-form-section");
 var company_form_section_1 = require("./company-form-section");
+var context_1 = require("./context");
+var customer_form_section_1 = require("./customer-form-section");
 var InvoiceForm = function () {
-    // const updated = useMemo(() => {
-    //   const elements: VistaFormElements = { ...dynamicFormElements };
-    //   const textInputElements: VistaTextInputV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.TEXT_INPUT_V1]?.sort((a, b) => a.order - b.order);
-    //   if (textInputElements) {
-    //     textInputElements?.forEach(({ label }, i) => {
-    //       if (translationMap[label as string] === undefined) return label;
-    //       textInputElements[i].label = translationMap[label as string];
-    //     });
-    //   }
-    //   const textAreaElements: VistaTextAreaV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.TEXT_AREA_V1]?.sort((a, b) => a.order - b.order);
-    //   if (textAreaElements) {
-    //     textAreaElements?.forEach(({ label }, i) => {
-    //       if (translationMap[label as string] === undefined) return label;
-    //       textAreaElements[i].label = translationMap[label];
-    //     });
-    //   }
-    //   const selectElements: VistaSelectV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.SELECT_V1]?.sort((a, b) => a.order - b.order);
-    //   if (selectElements) {
-    //     selectElements?.forEach(({ label }, i) => {
-    //       if (translationMap[label as string] === undefined) return label;
-    //       selectElements[i].label = translationMap[label as string];
-    //     });
-    //   }
-    //   const comboboxElements: VistaComboboxV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.COMBOBOX_V1]?.sort((a, b) => a.order - b.order);
-    //   if (comboboxElements) {
-    //     comboboxElements?.forEach(({ label }, i) => {
-    //       if (translationMap[label as string] === undefined) return label;
-    //       comboboxElements[i].label = translationMap[label as string];
-    //     });
-    //   }
-    //   const uploadElements: VistaUploadV1Props[] | undefined = elements[VISTA_FORM_ELEMENTS.UPLOAD_V1]?.sort((a, b) => a.order - b.order);
-    //   if (uploadElements) {
-    //     uploadElements?.forEach(({ label }, i) => {
-    //       if (translationMap[label as string] === undefined) return label;
-    //       uploadElements[i].label = translationMap[label as string];
-    //     });
-    //   }
-    //   return elements;
-    // }, [dynamicFormElements, translationMap]);
+    var formToRender = (0, context_1.useInvoiceStateContext)().formToRender;
     return (react_1.default.createElement("div", { className: "flex flex-col gap-8" },
-        react_1.default.createElement(company_form_section_1.CompanySection, null),
+        formToRender === 'customer' && (react_1.default.createElement(customer_form_section_1.CustomerSection, null)),
+        formToRender === 'company' && (react_1.default.createElement(company_form_section_1.CompanySection, null)),
         react_1.default.createElement(services_form_section_1.ServicesSection, null),
         react_1.default.createElement(products_form_section_1.ProductsSection, null),
         react_1.default.createElement(add_service_product_section_1.AddServiceProductSection, null),

package/base-modules/invoice/reducer.js

@@ -30,11 +30,13 @@ exports.initialInvoiceState = {
     address: '',
     category: types_1.QUOTE_INVOICE.INVOICE,
     city: '',
+    formToRender: '',
     companyId: '',
     companyQuery: '',
     productQuery: '',
     count: 0,
     country: '',
+    countryQuery: '',
     currency: 'PKR',
     currentPage: 1,
     customerId: '',
@@ -150,6 +152,8 @@ function invoiceReducer(state, action) {
             return __assign(__assign({}, state), { services: __spreadArray([], action.payload.services, true) });
         case actions_1.INVOICE_ACTION_TYPES.DELETE_ITEM_PRODUCT:
             return __assign(__assign({}, state), { products: __spreadArray([], action.payload.products, true) });
+        case actions_1.INVOICE_ACTION_TYPES.SET_FORM_TO_RENDER:
+            return __assign(__assign({}, state), { formToRender: action.payload.formToRender });
         default:
             return state;
     }

package/base-modules/invoice/types.d.ts

@@ -1,9 +1,9 @@
 import { RowActionItem } from '@appcorp/app-corp-vista/type/vista-dropdown-menu-type';
 import { VistaTableHeaderActionItem } from '@appcorp/app-corp-vista/type/vista-table-type';
 import { VistaFormElements } from '@appcorp/app-corp-vista/type/vista-form-elements';
+import { CompanyTypeBE } from '@appcorp/stellar-solutions-company-module/base-modules/company/types';
 import { Dispatch } from 'react';
 import { InvoiceActions } from './actions';
-import { CompanyTypeBE } from '@appcorp/stellar-solutions-company-module/base-modules/company/types';
 export interface InvoiceContextType {
     byIdError?: Error;
     byIdLoading: boolean;
@@ -13,9 +13,8 @@ export interface InvoiceContextType {
     deleteLoading: boolean;
     dispatch: Dispatch<InvoiceActions>;
     dynamicCompanyFormElements: VistaFormElements;
+    dynamicCustomerFormElements: VistaFormElements;
     dynamicPricingFormElements: VistaFormElements;
-    dynamicProductFormElements: VistaFormElements;
-    dynamicServiceFormElements: VistaFormElements[];
     handleAddItemProduct: () => void;
     handleAddItemService: () => void;
     handleChange: (field: string, value: string | number | number[]) => void;
@@ -120,11 +119,12 @@ export interface InvoiceTypeBE {
 }
 export interface InvoiceState extends Omit<InvoiceTypeBE, 'createdAt' | 'updatedAt'> {
     address: string;
+    afterDiscount: string;
     city: string;
     companyQuery: string;
-    productQuery: string;
     count: number;
     country: string;
+    countryQuery: string;
     currentPage: number;
     disableSaveButton: boolean;
     drawer: null | INVOICE_DRAWER;
@@ -133,6 +133,7 @@ export interface InvoiceState extends Omit<InvoiceTypeBE, 'createdAt' | 'updated
         [key: string]: string;
     };
     firstName: string;
+    formToRender: string;
     invoices: InvoiceTypeBE[];
     lastName: string;
     loading: boolean;
@@ -141,9 +142,9 @@ export interface InvoiceState extends Omit<InvoiceTypeBE, 'createdAt' | 'updated
     netTotal: string;
     pageLimit: number;
     phone: string;
+    productQuery: string;
     products: Product[];
     searchQuery: string;
-    afterDiscount: string;
     tax: string;
 }
 export interface FetchInvoicesArgs {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/stellar-solutions-invoice-module",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",