@appcorp/stellar-solutions-invoice-module 0.1.8 → 0.1.10

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

@@ -22,7 +22,9 @@ export declare enum INVOICE_ACTION_TYPES {
     SET_DRAWER = "SET_DRAWER",
     SET_COUNT = "SET_COUNT",
     SET_FORM = "SET_FORM",
-    SET_DISABLE_SAVE_BUTTON = "SET_DISABLE_SAVE_BUTTON"
+    SET_DISABLE_SAVE_BUTTON = "SET_DISABLE_SAVE_BUTTON",
+    SET_TOTAL_DISCOUNT = "SET_TOTAL_DISCOUNT",
+    SET_TOTAL_TAX = "SET_TOTAL_TAX"
 }
 export type InvoiceUpdateFieldAction = {
     type: INVOICE_ACTION_TYPES.SET_INPUT_FIELD;
@@ -93,23 +95,33 @@ export type InvoiceToggleLoadingAction = {
 };
 export type InvoiceAddItemServiceAction = {
     type: INVOICE_ACTION_TYPES.ADD_ITEM_SERVICE;
-    payload: Service;
+    payload: {
+        services: Service[];
+    };
 };
 export type InvoiceAddItemProductAction = {
     type: INVOICE_ACTION_TYPES.ADD_ITEM_PRODUCT;
-    payload: Product[];
+    payload: {
+        products: Product[];
+    };
 };
 export type InvoiceDeleteItemProductAction = {
     type: INVOICE_ACTION_TYPES.DELETE_ITEM_PRODUCT;
-    payload: number;
+    payload: {
+        products: Product[];
+    };
 };
 export type InvoiceDeleteItemServiceAction = {
     type: INVOICE_ACTION_TYPES.DELETE_ITEM_SERVICE;
-    payload: number;
+    payload: {
+        services: Service[];
+    };
 };
 export type InvoiceSetDiscountUnitAction = {
     type: INVOICE_ACTION_TYPES.SET_DISCOUNT_UNIT;
-    payload: string;
+    payload: {
+        discountUnit: string;
+    };
 };
 export type InvoiceSetCustomerDataAction = {
     type: INVOICE_ACTION_TYPES.SET_CUSTOMER_DATA;
@@ -131,4 +143,16 @@ export type InvoiceSetFormAction = {
         form: InvoiceTypeBE;
     };
 };
-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;
+export type InvoiceSetTotalDiscountAction = {
+    type: INVOICE_ACTION_TYPES.SET_TOTAL_DISCOUNT;
+    payload: {
+        totalDiscount: string;
+    };
+};
+export type InvoiceSetTotalTaxAction = {
+    type: INVOICE_ACTION_TYPES.SET_TOTAL_TAX;
+    payload: {
+        totalTax: 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 | InvoiceSetTotalDiscountAction | InvoiceSetTotalTaxAction;

package/base-modules/invoice/actions.js

@@ -26,4 +26,6 @@ var INVOICE_ACTION_TYPES;
     INVOICE_ACTION_TYPES["SET_COUNT"] = "SET_COUNT";
     INVOICE_ACTION_TYPES["SET_FORM"] = "SET_FORM";
     INVOICE_ACTION_TYPES["SET_DISABLE_SAVE_BUTTON"] = "SET_DISABLE_SAVE_BUTTON";
+    INVOICE_ACTION_TYPES["SET_TOTAL_DISCOUNT"] = "SET_TOTAL_DISCOUNT";
+    INVOICE_ACTION_TYPES["SET_TOTAL_TAX"] = "SET_TOTAL_TAX";
 })(INVOICE_ACTION_TYPES || (exports.INVOICE_ACTION_TYPES = INVOICE_ACTION_TYPES = {}));

package/base-modules/invoice/add-service-product-section.js

@@ -5,17 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddServiceProductSection = void 0;
 var react_1 = __importDefault(require("react"));
-// import { useInvoiceStateContext } from './context';
+var context_1 = require("./context");
 var AddServiceProductSection = function () {
-    // const { handleAddItemService, handleAddItemProduct } = useInvoiceStateContext();
+    var _a = (0, context_1.useInvoiceStateContext)(), handleAddItemService = _a.handleAddItemService, handleAddItemProduct = _a.handleAddItemProduct;
     return (react_1.default.createElement("div", { className: "rounded-md border border-dashed border-gray-900 py-[15px] dark:border-white" },
         react_1.default.createElement("div", { className: "flex items-center justify-center gap-2" },
             react_1.default.createElement("div", { className: "flex gap-2" },
                 react_1.default.createElement("p", null, "Add a")),
-            react_1.default.createElement("button", { type: "button", className: "flex w-fit items-center gap-[10px]" },
-                react_1.default.createElement("p", { className: "cursor-pointer hover:underline" }, "Service")),
+            react_1.default.createElement("button", { className: "flex w-fit items-center gap-4", onClick: handleAddItemService, type: "button" },
+                react_1.default.createElement("p", { className: "cursor-pointer hover:underline font-bold" }, "Service")),
             react_1.default.createElement("div", { className: "" }, "or"),
-            react_1.default.createElement("button", { type: "button", className: "flex w-fit items-center gap-[10px]" },
-                react_1.default.createElement("p", { className: "cursor-pointer hover:underline" }, "Product")))));
+            react_1.default.createElement("button", { className: "flex w-fit items-center gap-4", onClick: handleAddItemProduct, type: "button" },
+                react_1.default.createElement("p", { className: "cursor-pointer hover:underline font-bold" }, "Product")))));
 };
 exports.AddServiceProductSection = AddServiceProductSection;

package/base-modules/invoice/calculate-total.d.ts

@@ -0,0 +1,5 @@
+export declare const calculateTotal: (subtotal: string, tax: string, discountUnit: string, discount: string) => {
+    totalTaxValue: string;
+    totalDiscountValue: number;
+    total: string;
+};

package/base-modules/invoice/calculate-total.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTotal = void 0;
+var calculateTotal = function (subtotal, tax, discountUnit, discount) {
+    var subtotalValue = parseFloat(subtotal || '0');
+    var taxValue = ((subtotalValue * parseFloat(tax)) / 100).toFixed(2);
+    var discountType = discountUnit;
+    var discountValue = parseFloat(discount || '0');
+    var discountedAmount = discountType === 'percentage-value'
+        ? (subtotalValue * discountValue) / 100
+        : discountValue;
+    var totalTaxValue = taxValue;
+    var totalDiscountValue = discountedAmount;
+    var total = (subtotalValue +
+        parseFloat(taxValue) -
+        discountedAmount).toFixed(2);
+    return {
+        totalTaxValue: totalTaxValue,
+        totalDiscountValue: totalDiscountValue,
+        total: total,
+    };
+};
+exports.calculateTotal = calculateTotal;

package/base-modules/invoice/constants.js

@@ -30,7 +30,6 @@ exports.toastErrors = {
 exports.staticCompanySection = (_a = {},
     _a[form_schema_1.VISTA_FORM_ELEMENTS.TEXT_INPUT_V1] = [
         {
-            disabled: true,
             enabled: true,
             error: '',
             handleOnChange: function () { return void 0; },
@@ -38,6 +37,7 @@ exports.staticCompanySection = (_a = {},
             label: 'Ref',
             order: 6,
             placeholder: '',
+            readOnly: true,
             required: true,
             type: 'text',
             value: '',
@@ -132,7 +132,7 @@ exports.staticPricingSection = (_b = {},
             error: '',
             handleOnChange: function () { return void 0; },
             id: 'subTotal',
-            label: '',
+            label: 'Sub Total',
             order: 1,
             placeholder: '0.00',
             required: false,
@@ -144,7 +144,7 @@ exports.staticPricingSection = (_b = {},
             error: '',
             handleOnChange: function () { return void 0; },
             id: 'discount',
-            label: '',
+            label: 'Discount',
             order: 3,
             placeholder: '0.00',
             required: false,
@@ -152,40 +152,40 @@ exports.staticPricingSection = (_b = {},
             value: '',
         },
         {
-            disabled: true,
             enabled: true,
             error: '',
             handleOnChange: function () { return void 0; },
-            id: 'totaldiscount',
-            label: '',
+            id: 'totalDiscount',
+            label: 'After Discount',
             order: 4,
-            placeholder: '',
+            placeholder: '0.00',
+            readOnly: true,
             required: false,
             type: 'text',
             value: '',
         },
         {
-            disabled: true,
             enabled: true,
             error: '',
             handleOnChange: function () { return void 0; },
-            id: 'totaltax',
-            label: '',
+            id: 'totalTax',
+            label: 'After Tax',
             order: 6,
-            placeholder: '',
+            placeholder: '0.00',
+            readOnly: true,
             required: false,
             type: 'text',
             value: '',
         },
         {
-            disabled: true,
             enabled: true,
             error: '',
             handleOnChange: function () { return void 0; },
             id: 'total',
-            label: '',
+            label: 'Total',
             order: 7,
-            placeholder: 'Total',
+            placeholder: '0.00',
+            readOnly: true,
             required: false,
             type: 'text',
             value: '',
@@ -391,6 +391,7 @@ exports.staticProductSection = (_d = {},
     ],
     _d);
 exports.INVOICE_API_ROUTES = {
+    // INVOICES: process.env.NODE_ENV === 'production' ? '/api/quotes-invoices' : 'https://stellar-solutions-pattern.vercel.app/api/quotes-invoices',
     INVOICES: '/api/quotes-invoices',
     INVOICE: '/api/quote-invoice',
     INVOICE_BY_ID: '/api/quote-invoice/quote-invoice-by-id',

package/base-modules/invoice/context.js

@@ -105,6 +105,7 @@ 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 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;
@@ -237,6 +238,58 @@ var useInvoiceState = function () {
         state.currentPage,
         state.pageLimit,
     ]);
+    (0, react_1.useEffect)(function () {
+        var _a = (0, calculate_total_1.calculateTotal)(state.subTotal, state.taxValue, state.discountUnit, state.discount), totalTaxValue = _a.totalTaxValue, total = _a.total, totalDiscountValue = _a.totalDiscountValue;
+        // setTotalTax(totalTaxValue);
+        // setTotalDiscount(totalDiscountValue);
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_INPUT_FIELD,
+            payload: {
+                key: 'total',
+                value: total,
+            },
+        });
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_TOTAL_TAX,
+            payload: { totalTax: totalTaxValue },
+        });
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_TOTAL_DISCOUNT,
+            payload: { totalDiscount: String(totalDiscountValue) },
+        });
+    }, [
+        state.discountUnit,
+        state.discount,
+        state.subTotal,
+        state.taxValue,
+    ]);
+    var handleAddItemService = function () {
+        var newItem = {
+            mode: 'Create',
+            name: '',
+            description: '',
+            quantity: '1',
+            price: '',
+            rowTotal: '',
+        };
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.ADD_ITEM_SERVICE,
+            payload: { services: __spreadArray(__spreadArray([], state.services, true), [newItem], false) },
+        });
+    };
+    var handleAddItemProduct = function () {
+        var newItem = {
+            mode: 'Create',
+            productId: '',
+            quantity: 1,
+            price: '',
+            rowTotal: '',
+        };
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.ADD_ITEM_PRODUCT,
+            payload: { products: __spreadArray(__spreadArray([], state.products, true), [newItem], false) },
+        });
+    };
     var handleCreate = function (text) {
         if (text === 'company') {
             dispatch({
@@ -436,6 +489,23 @@ var useInvoiceState = function () {
             payload: { key: 'products', value: updatedItems },
         });
     }, [state.services, state.products, products]);
+    var handlePriceTypeChange = function (k, v) {
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_DISCOUNT_UNIT,
+            payload: { discountUnit: v },
+        });
+        // if (e.target.value === 'Percentage(%)') {
+        //   invoiceDispatch({
+        //     type: INVOICE_ACTION_TYPES.SET_DISCOUNT_UNIT,
+        //     payload: '%',
+        //   });
+        // } else {
+        //   invoiceDispatch({
+        //     type: INVOICE_ACTION_TYPES.SET_DISCOUNT_UNIT,
+        //     payload: '',
+        //   });
+        // }
+    };
     // const handleSelectInputChange = useCallback(async (key: string, value: string) => {
     //   const response = await fetch(INVOICE_CATEGORY_API_ROUTES.INVOICE_CATEGORIES, {
     //     method: API_METHODS.POST,
@@ -548,7 +618,7 @@ var useInvoiceState = function () {
         return elements;
     }, [state, handleChange, companies]);
     var dynamicPricingFormElements = (0, react_1.useMemo)(function () {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         var elements = __assign({}, constants_1.staticPricingSection);
         var textElements = (_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 (textElements) {
@@ -559,59 +629,102 @@ var useInvoiceState = function () {
             textElements[1].error = (_c = state.errors) === null || _c === void 0 ? void 0 : _c.discount;
             textElements[1].handleOnChange = handleChange;
             textElements[2].value = state.totalDiscount ? String(state.totalDiscount) : '0';
-            textElements[2].label = 'Total Discounted Price';
             textElements[3].value = isNaN(Number(state.totalTax)) ? '0' : state.totalTax;
-            textElements[3].label = 'After Tax';
             textElements[4].value = isNaN(Number(state.total))
                 ? '0'
                 : String(state.total);
             textElements[4].error = (_d = state.errors) === null || _d === void 0 ? void 0 : _d.total;
             textElements[4].handleOnChange = handleChange;
         }
+        var comboboxElements = (_e = elements[form_schema_1.VISTA_FORM_ELEMENTS.COMBOBOX_V1]) === null || _e === void 0 ? void 0 : _e.sort(function (a, b) { return a.order - b.order; });
+        if (comboboxElements) {
+            comboboxElements[0].selectedItem = { taxName: state.taxValue };
+            comboboxElements[0].listItems = [];
+        }
+        var radioElements = (_f = elements[form_schema_1.VISTA_FORM_ELEMENTS.RADIO_V1]) === null || _f === void 0 ? void 0 : _f.sort(function (a, b) { return a.order - b.order; });
+        if (radioElements) {
+            radioElements[0].selectedValue = state.discountUnit;
+            radioElements[0].handleOnChange = handlePriceTypeChange;
+        }
         return elements;
     }, [handleChange, state]);
+    var handleDeleteServiceRow = function (i) {
+        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) },
+            });
+        }
+    };
+    var handleDeleteProductRow = function (i) {
+        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) },
+            });
+        }
+    };
     var dynamicServiceFormElements = (0, react_1.useMemo)(function () {
-        var _a, _b;
         var elements = __assign({}, constants_1.staticServiceSection);
-        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.services) === null || _b === void 0 ? void 0 : _b.forEach(function (service, i) {
-                textInputElements[0].value = state.services[0].name;
+        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[i].error = state.errors[id];
-                textInputElements[1].value = state.services[0].description;
+                textInputElements[1].value = state.services[i].description;
                 textInputElements[1].handleOnChange = function (k, v) { return handleItemChangeServices({
                     index: i,
                     key: k,
                     value: v,
                 }); };
-                // textInputElements[i].error = state.errors[id];
-                textInputElements[2].value = state.services[0].quantity;
+                textInputElements[2].value = state.services[i].quantity;
                 textInputElements[2].handleOnChange = function (k, v) { return handleItemChangeServices({
                     index: i,
                     key: k,
                     value: v,
                 }); };
-                // textInputElements[i].error = state.errors[id];
-                textInputElements[3].value = state.services[0].price;
+                textInputElements[3].value = state.services[i].price;
                 textInputElements[3].handleOnChange = function (k, v) { return handleItemChangeServices({
                     index: i,
                     key: k,
                     value: v,
                 }); };
-                // textInputElements[i].error = state.errors[id];
-                textInputElements[4].value = state.services[0].rowTotal;
-                // textInputElements[i].error = state.errors[id];
-            });
-        }
-        return elements;
+                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;
+        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) {
@@ -640,6 +753,20 @@ var useInvoiceState = function () {
                 };
             });
         }
+        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]);
     var headerActions = [
@@ -672,11 +799,11 @@ var useInvoiceState = function () {
     ];
     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, 
         // handleUploadImage,
-        headerActions: headerActions, listError: listError, listFetchNow: listFetchNow, listLoading: listLoading, rowActions: rowActions, searchOnChange: searchOnChange, updateError: updateError, updateLoading: updateLoading });
+        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: [], 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 }));
+    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) {
     var children = _a.children;
     var state = useInvoiceState();

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

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

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

@@ -1,41 +1,32 @@
-"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.renderProductsFormElements = void 0;
-var react_1 = __importDefault(require("react"));
-var form_schema_1 = require("@appcorp/app-corp-vista/utils/form-schema");
-var renderProductsFormElements = function (elementProps, row) {
-    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-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] 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), className: props.className },
-            react_1.default.createElement(Component, __assign({}, props, row))));
-    })));
-};
-exports.renderProductsFormElements = renderProductsFormElements;
+// /* eslint-disable */
+// import React from 'react';
+// import { vistaFormSchema } from '@appcorp/app-corp-vista/utils/form-schema';
+// import { VistaFormElements } from '@appcorp/app-corp-vista/type/vista-form-elements';
+// import { Product } from './types';
+// export const renderProductsFormElements = (
+//   elementProps: VistaFormElements,
+//   row: Product,
+// ) => {
+//   const elementsArray = Object.entries(vistaFormSchema)
+//     .flatMap(([key, config]) => {
+//       const Component = config;
+//       return (elementProps[key as keyof VistaFormElements] || [])
+//         ?.filter((props: any) => props.enabled)
+//         ?.map((props: any) => ({
+//           Component,
+//           key,
+//           order: props.order,
+//           props,
+//         }));
+//     })
+//     ?.sort((a, b) => a.order - b.order);
+//   return (
+//     <div className="grid grid-cols-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] gap-4">
+//       {elementsArray?.map(({ key, Component, props }, index) => (
+//         <div key={`${key}-${index}`} className={props.className}>
+//           <Component {...props} {...row} />
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

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

@@ -7,11 +7,27 @@ exports.ProductsSection = 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 context_1 = require("./context");
-var products_form_elements_1 = require("./products-form-elements");
+var vista_text_input_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-text-input-v1");
+var vista_button_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-button-v1/vista-button-v1");
+var solid_1 = require("@heroicons/react/24/solid");
+var vista_button_type_1 = require("@appcorp/app-corp-vista/type/vista-button-type");
+var vista_combobox_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-combobox-v1/vista-combobox-v1");
+var context_2 = require("@appcorp/stellar-solutions-product-module/base-modules/product/context");
 var ProductsSection = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), dynamicProductFormElements = _a.dynamicProductFormElements, products = _a.products;
+    var _a = (0, context_1.useInvoiceStateContext)(), products = _a.products, handleItemChangeProducts = _a.handleItemChangeProducts, handleDeleteServiceRow = _a.handleDeleteServiceRow;
+    var productList = (0, context_2.useProductStateContext)().products;
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
         react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Products" }),
-        products.map(function (row, index) { return (react_1.default.createElement("div", { key: index }, (0, products_form_elements_1.renderProductsFormElements)(dynamicProductFormElements, row))); })));
+        products.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: 'grid grid-cols-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] items-end justify-between gap-4' },
+            react_1.default.createElement("div", { className: 'col-span-2' },
+                react_1.default.createElement(vista_combobox_v1_1.VistaComboboxV1, { handleInputOnChange: function (k, v) { return handleItemChangeProducts({
+                        index: index,
+                        key: k,
+                        value: v
+                    }); }, handleOnBlur: function () { return void 0; }, handleOnChange: function () { return void 0; }, label: "Product", listItems: productList, nodeQueryKey: '', nodeSelectKey: 'productId', query: '', selectKey1: 'name', selectedItem: { id: products[index].productId } })),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'quantity', label: 'Quantity', placeholder: '1', value: String(products[index].quantity), type: 'text' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'price', label: 'Price', placeholder: '0.00', value: products[index].price, type: 'number' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeProducts({ index: index, key: k, value: v }); }, id: 'rowTotal', label: 'Row Total', placeholder: '0.00', value: products[index].rowTotal, type: 'number', readOnly: true }),
+            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'flex justify-center items-end', handleOnClick: function () { return handleDeleteServiceRow(index); }, icon: react_1.default.createElement(solid_1.TrashIcon, { className: "size-6" }), variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON }))); })));
 };
 exports.ProductsSection = ProductsSection;

package/base-modules/invoice/reducer.js

@@ -66,15 +66,15 @@ exports.initialInvoiceState = {
     ref: '',
     searchQuery: '',
     subTotal: '',
-    taxValue: '',
+    taxValue: '17',
     total: '',
     totalDiscount: '',
     totalTax: '',
     services: [
         {
             mode: 'Create',
-            name: '',
-            description: '',
+            name: 'n1',
+            description: '1',
             quantity: '1',
             price: '',
             rowTotal: '',
@@ -141,6 +141,20 @@ function invoiceReducer(state, action) {
         //     ...state,
         //     modal: action.payload.modal,
         //   };
+        case actions_1.INVOICE_ACTION_TYPES.SET_DISCOUNT_UNIT:
+            return __assign(__assign({}, state), { discountUnit: action.payload.discountUnit });
+        case actions_1.INVOICE_ACTION_TYPES.SET_TOTAL_DISCOUNT:
+            return __assign(__assign({}, state), { totalDiscount: action.payload.totalDiscount });
+        case actions_1.INVOICE_ACTION_TYPES.SET_TOTAL_TAX:
+            return __assign(__assign({}, state), { totalTax: action.payload.totalTax });
+        case actions_1.INVOICE_ACTION_TYPES.ADD_ITEM_SERVICE:
+            return __assign(__assign({}, state), { services: __spreadArray([], action.payload.services, true) });
+        case actions_1.INVOICE_ACTION_TYPES.ADD_ITEM_PRODUCT:
+            return __assign(__assign({}, state), { products: __spreadArray([], action.payload.products, true) });
+        case actions_1.INVOICE_ACTION_TYPES.DELETE_ITEM_SERVICE:
+            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) });
         default:
             return state;
     }

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

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

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

@@ -1,41 +1,38 @@
-"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.renderServicesFormElements = void 0;
-var react_1 = __importDefault(require("react"));
-var form_schema_1 = require("@appcorp/app-corp-vista/utils/form-schema");
-var renderServicesFormElements = function (elementProps, row) {
-    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-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] 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), className: props.className },
-            react_1.default.createElement(Component, __assign({}, props, row))));
-    })));
-};
-exports.renderServicesFormElements = renderServicesFormElements;
+// /* eslint-disable */
+// import React from 'react';
+// import { vistaFormSchema } from '@appcorp/app-corp-vista/utils/form-schema';
+// import { Service } from './types';
+// import { VistaFormElements } from '@appcorp/app-corp-vista/type/vista-form-elements';
+// export const renderServicesFormElements = (
+//   elementProps: VistaFormElements,
+//   row: Service,
+// ) => {
+//   const elementsArray = Object.entries(vistaFormSchema)
+//     .flatMap(([key, config]) => {
+//       const Component = config;
+//       return (elementProps[key as keyof VistaFormElements] || [])
+//         ?.filter((props: any) => props.enabled)
+//         ?.map((props: any) => ({
+//           Component,
+//           key,
+//           order: props.order,
+//           props,
+//         }));
+//     })
+//     ?.sort((a, b) => a.order - b.order);
+//   return (
+//     <div className="grid grid-cols-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] gap-4">
+//       {elementsArray?.map(({ key, Component, props }, index) => {
+//         // console.log('_>>', props);
+//         return (
+//         <div key={`${key}-${index}`} className={props.className}>
+//           <Component
+//             {...props}
+//             {...row}
+//             value={row[props.id as keyof Service]}
+//           />
+//         </div>
+//       )})}
+//     </div>
+//   );
+// };

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

@@ -6,12 +6,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServicesSection = 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 vista_text_input_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-text-input-v1");
+var vista_button_v1_1 = require("@appcorp/app-corp-vista/molecules/vista-button-v1/vista-button-v1");
+var vista_button_type_1 = require("@appcorp/app-corp-vista/type/vista-button-type");
+var solid_1 = require("@heroicons/react/24/solid");
 var context_1 = require("./context");
-var services_form_elements_1 = require("./services-form-elements");
 var ServicesSection = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), services = _a.services, dynamicServiceFormElements = _a.dynamicServiceFormElements;
+    var _a = (0, context_1.useInvoiceStateContext)(), services = _a.services, handleItemChangeServices = _a.handleItemChangeServices, handleDeleteServiceRow = _a.handleDeleteServiceRow;
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
         react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Services" }),
-        services.map(function (row, index) { return (react_1.default.createElement("div", { key: index }, (0, services_form_elements_1.renderServicesFormElements)(dynamicServiceFormElements, row))); })));
+        services.map(function (row, index) { return (react_1.default.createElement("div", { key: index, className: 'grid grid-cols-[17.5%_17.5%_17.5%_17.5%_17.5%_auto] items-end justify-between gap-4' },
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeServices({ index: index, key: k, value: v }); }, id: 'name', label: 'Service Name', placeholder: 'Service Name', value: services[index].name, type: 'text' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeServices({ index: index, key: k, value: v }); }, id: 'description', label: 'Service Description', placeholder: 'Service Description', value: services[index].description, type: 'text' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeServices({ index: index, key: k, value: v }); }, id: 'quantity', label: 'Quantity', placeholder: '1', value: services[index].quantity, type: 'number' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeServices({ index: index, key: k, value: v }); }, id: 'price', label: 'Price', placeholder: '0.00', value: services[index].price, type: 'number' }),
+            react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnChange: function (k, v) { return handleItemChangeServices({ index: index, key: k, value: v }); }, id: 'rowTotal', label: 'Row Total', placeholder: '0.00', value: services[index].rowTotal, type: 'number', readOnly: true }),
+            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'flex justify-center items-end', handleOnClick: function () { return handleDeleteServiceRow(index); }, icon: react_1.default.createElement(solid_1.TrashIcon, { className: "size-6" }), variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON }))); })));
 };
 exports.ServicesSection = ServicesSection;

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

@@ -15,8 +15,22 @@ export interface InvoiceContextType {
     dynamicCompanyFormElements: VistaFormElements;
     dynamicPricingFormElements: VistaFormElements;
     dynamicProductFormElements: VistaFormElements;
-    dynamicServiceFormElements: VistaFormElements;
+    dynamicServiceFormElements: VistaFormElements[];
+    handleAddItemProduct: () => void;
+    handleAddItemService: () => void;
     handleChange: (field: string, value: string | number | number[]) => void;
+    handleDeleteProductRow: (i: number) => void;
+    handleDeleteServiceRow: (i: number) => void;
+    handleItemChangeProducts: ({ index, key, value }: {
+        index: number;
+        key: keyof Product;
+        value: string | number;
+    }) => void;
+    handleItemChangeServices: ({ index, key, value }: {
+        index: number;
+        key: keyof Service;
+        value: string | number;
+    }) => void;
     handleNextClick: () => void;
     handlePageLimit: (node: string, value: object) => void;
     handlePreviousClick: () => void;

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

@@ -11,25 +11,25 @@ export declare const formValidation: z.ZodObject<{
     ref: z.ZodOptional<z.ZodString>;
     salePrice: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-    currency: string;
-    name: string;
     quantity: string;
+    name: string;
+    currency: string;
     buyPrice: string;
     productCategoryId: string;
     salePrice: string;
-    ref?: string | undefined;
     description?: string | undefined;
+    ref?: string | undefined;
     images?: string[] | undefined;
     product?: string | undefined;
 }, {
-    currency: string;
-    name: string;
     quantity: string;
+    name: string;
+    currency: string;
     buyPrice: string;
     productCategoryId: string;
     salePrice: string;
-    ref?: string | undefined;
     description?: string | undefined;
+    ref?: string | undefined;
     images?: string[] | undefined;
     product?: string | undefined;
 }>;

package/package.json

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