@appcorp/stellar-solutions-invoice-module 0.1.55 → 0.1.56

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

@@ -57,6 +57,13 @@ export declare const validationErrors: {
     total: string;
     subTotal: string;
     taxRate: string;
+    customerPhone: string;
+    customerFirstName: string;
+    customerLastName: string;
+    customerAddress: string;
+    customerCity: string;
+    customerCountry: string;
+    customerEmail: string;
     services: {
         name: string;
         description: string;
@@ -67,5 +74,7 @@ export declare const validationErrors: {
     products: {
         id: string;
         quantity: string;
+        price: string;
+        total: string;
     };
 };

package/base-modules/invoice/constants.js

@@ -52,7 +52,7 @@ exports.staticCompanySection = (_a = {},
             error: '',
             handleOnChange: function () { return void 0; },
             id: 'expiryDate',
-            label: 'Expire Date',
+            label: 'Expiry Date',
             order: 3,
             placeholder: '',
             required: true,
@@ -203,7 +203,7 @@ exports.staticCustomerSection = (_b = {},
             enabled: true,
             handleInputOnChange: function () { return void 0; },
             handleOnBlur: function () { return void 0; },
-            handleOnChange: function () { },
+            handleOnChange: function () { return void 0; },
             label: 'Country',
             listItems: [],
             nodeQueryKey: 'countryQuery',
@@ -219,7 +219,7 @@ exports.staticCustomerSection = (_b = {},
             enabled: true,
             handleInputOnChange: function () { return void 0; },
             handleOnBlur: function () { return void 0; },
-            handleOnChange: function () { },
+            handleOnChange: function () { return void 0; },
             label: 'Currency',
             listItems: [],
             nodeQueryKey: '',
@@ -575,6 +575,13 @@ exports.validationErrors = {
     total: 'Please enter net total',
     subTotal: 'Please enter sub total',
     taxRate: 'Please enter tax value',
+    customerPhone: 'Please enter phone',
+    customerFirstName: 'Please enter first name',
+    customerLastName: 'Please enter last name',
+    customerAddress: 'Please enter address',
+    customerCity: 'Please enter city',
+    customerCountry: 'Please enter country',
+    customerEmail: 'Please enter email',
     services: {
         name: 'Item is required',
         description: 'Description is required',
@@ -585,5 +592,7 @@ exports.validationErrors = {
     products: {
         id: 'Please select a product',
         quantity: 'Please enter Quantity',
+        price: 'Price is required',
+        total: 'Total price is required',
     },
 };

package/base-modules/invoice/context.js

@@ -155,7 +155,7 @@ var useInvoiceState = function () {
         }
     };
     var updateParams = (0, react_1.useMemo)(function () {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return ({
             category: state.category,
             companyId: state.companyId,
@@ -164,18 +164,32 @@ var useInvoiceState = function () {
             date: state.date,
             discount: (_a = state === null || state === void 0 ? void 0 : state.discount) === null || _a === void 0 ? void 0 : _a.trim(),
             discountUnit: state.discountUnit,
+            drawer: state.drawer,
             expiryDate: state.expiryDate,
             id: state.id,
             invoiceStatus: state.invoiceStatus,
             mode: state.mode,
             note: state.note.trim(),
-            products: state.products,
+            productsList: state.productsList.filter(function (_a) {
+                var id = _a.id;
+                return id;
+            }),
             quoteStatus: state.quoteStatus,
             ref: state.ref,
-            services: state.services,
+            servicesList: state.servicesList.filter(function (_a) {
+                var name = _a.name;
+                return name;
+            }),
             subTotal: state.subTotal,
             taxRate: state.taxRate,
             total: state.total,
+            phone: (_b = state.customer) === null || _b === void 0 ? void 0 : _b.phone,
+            firstName: (_c = state.customer) === null || _c === void 0 ? void 0 : _c.firstName,
+            lastName: (_d = state.customer) === null || _d === void 0 ? void 0 : _d.lastName,
+            email: (_e = state.customer) === null || _e === void 0 ? void 0 : _e.email,
+            address: (_f = state.customer) === null || _f === void 0 ? void 0 : _f.address,
+            city: (_g = state.customer) === null || _g === void 0 ? void 0 : _g.city,
+            country: (_h = state.customer) === null || _h === void 0 ? void 0 : _h.country,
         });
     }, [state]);
     var updateCallback = function (_a) {
@@ -208,7 +222,7 @@ var useInvoiceState = function () {
         id: state.id,
     };
     var byIdCallback = function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h;
+        var _b, _c, _d, _e, _f;
         var data = _a.data, error = _a.error;
         if (error) {
             (0, generate_toast_1.generateToast)({
@@ -222,16 +236,16 @@ var useInvoiceState = function () {
                 return (__assign(__assign({}, item), { rowTotal: Number(item.quantity) * Number(item.price) }));
             });
             var updatedProducts = __spreadArray([], data.products, true).map(function (item) { return (__assign(__assign({}, item), { price: item.product.salePrice, id: item.productId, quantity: item.quantity, rowTotal: parseFloat(item.product.salePrice) * parseInt(item.quantity) })); });
-            var updatedData = __assign(__assign(__assign(__assign({}, data), { mode: 'Edit', companyId: ((_b = data === null || data === void 0 ? void 0 : data.company) === null || _b === void 0 ? void 0 : _b.id) || '', customerId: ((_c = data === null || data === void 0 ? void 0 : data.customer) === null || _c === void 0 ? void 0 : _c.id) || '' }), (((_d = data === null || data === void 0 ? void 0 : data.customer) === null || _d === void 0 ? void 0 : _d.id) && {
+            var updatedData = __assign(__assign(__assign(__assign({}, data), { mode: 'Edit', companyId: (data === null || data === void 0 ? void 0 : data.companyId) || '', customerId: (data === null || data === void 0 ? void 0 : data.customerId) || '' }), (((_b = data === null || data === void 0 ? void 0 : data.customer) === null || _b === void 0 ? void 0 : _b.id) && {
                 customer: __assign({}, data.customer),
-            })), { services: __spreadArray([], updatedServices, true).filter(function (item) { return item.name; }), products: __spreadArray([], updatedProducts, true).filter(function (item) { return item.id; }) });
-            if ((_e = updatedData === null || updatedData === void 0 ? void 0 : updatedData.company) === null || _e === void 0 ? void 0 : _e.name) {
+            })), { servicesList: __spreadArray([], updatedServices, true).filter(function (item) { return item.name; }), productsList: __spreadArray([], updatedProducts, true).filter(function (item) { return item.id; }), companiesList: [__assign({}, data.company)] });
+            if ((_c = updatedData === null || updatedData === void 0 ? void 0 : updatedData.company) === null || _c === void 0 ? void 0 : _c.name) {
                 dispatch({
                     type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                     payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER },
                 });
             }
-            if ((_f = updatedData === null || updatedData === void 0 ? void 0 : updatedData.customer) === null || _f === void 0 ? void 0 : _f.firstName) {
+            if ((_d = updatedData === null || updatedData === void 0 ? void 0 : updatedData.customer) === null || _d === void 0 ? void 0 : _d.firstName) {
                 dispatch({
                     type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                     payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_CUSTOMER_FORM_DRAWER },
@@ -241,13 +255,13 @@ var useInvoiceState = function () {
                 type: actions_1.INVOICE_ACTION_TYPES.SET_FORM,
                 payload: { form: updatedData },
             });
-            if ((_g = updatedData === null || updatedData === void 0 ? void 0 : updatedData.company) === null || _g === void 0 ? void 0 : _g.name) {
+            if ((_e = updatedData === null || updatedData === void 0 ? void 0 : updatedData.company) === null || _e === void 0 ? void 0 : _e.name) {
                 dispatch({
                     type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                     payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_COMPANY_FORM_DRAWER },
                 });
             }
-            if ((_h = updatedData === null || updatedData === void 0 ? void 0 : updatedData.customer) === null || _h === void 0 ? void 0 : _h.firstName) {
+            if ((_f = updatedData === null || updatedData === void 0 ? void 0 : updatedData.customer) === null || _f === void 0 ? void 0 : _f.firstName) {
                 dispatch({
                     type: actions_1.INVOICE_ACTION_TYPES.SET_DRAWER,
                     payload: { drawer: types_1.INVOICE_DRAWER.INVOICE_CUSTOMER_FORM_DRAWER },
@@ -492,13 +506,21 @@ var useInvoiceState = function () {
         });
     };
     var handleSubmit = (0, react_1.useCallback)(function () {
+        if (!state.servicesList[0].name && !state.productsList[0].id) {
+            console.log('inside', state.servicesList, state.productsList);
+            dispatch({
+                type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+                payload: { disableSaveButton: true },
+            });
+            return;
+        }
         dispatch({
             type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
             payload: { disableSaveButton: true },
         });
         (0, util_functions_1.validateForm)({
             params: __assign(__assign({}, updateParams), { currency: updateParams.currency || defaultCurrency.code, taxRate: updateParams.taxRate || defaultTax.taxRate }),
-            schema: validate_1.formValidation,
+            schema: validate_1.formValid,
             successCallback: function () {
                 updateFetchNow(undefined, {
                     body: JSON.stringify(__assign(__assign({}, updateParams), { products: state.productsList.filter(function (item) { return item.id; }), services: state.servicesList.filter(function (item) { return item.name; }), currency: updateParams.currency || defaultCurrency.code, taxRate: updateParams.taxRate || defaultTax.taxRate })),
@@ -576,6 +598,10 @@ var useInvoiceState = function () {
     var handleItemChangeServices = (0, react_1.useCallback)(function (_a) {
         var _b;
         var index = _a.index, key = _a.key, value = _a.value;
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disableSaveButton: false },
+        });
         var updatedItems = __spreadArray([], state.servicesList, true);
         updatedItems[index] = __assign(__assign({}, updatedItems[index]), (_b = {}, _b[key] = value, _b.mode = updatedItems[index].mode === 'Create' ? 'Create' : 'Edit', _b));
         var quantity = parseFloat(updatedItems[index].quantity) || 0;
@@ -597,6 +623,10 @@ var useInvoiceState = function () {
         var _b, _c, _d;
         var _e;
         var index = _a.index, key = _a.key, value = _a.value;
+        dispatch({
+            type: actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON,
+            payload: { disableSaveButton: false },
+        });
         var updatedItems = __spreadArray([], state.productsList, true);
         if (key === 'id' && typeof value === 'string') {
             var matchingProduct = (_e = state.getProducts) === null || _e === void 0 ? void 0 : _e.find(function (product) { return product.id === value; });
@@ -746,6 +776,7 @@ var useInvoiceState = function () {
             comboboxElements[0].handleOnChange = handleSelectChange;
             comboboxElements[0].handleInputOnChange = handleChange;
             comboboxElements[0].handleOnBlur = handleChange;
+            comboboxElements[0].error = state.errors.companyId;
             comboboxElements[1].selectedItem = { code: state.currency || (defaultCurrency === null || defaultCurrency === void 0 ? void 0 : defaultCurrency.code) };
             comboboxElements[1].listItems = currencies;
             comboboxElements[1].handleOnChange = handleSelectChange;
@@ -753,6 +784,7 @@ var useInvoiceState = function () {
         }
         return elements;
     }, [state, handleChange, currencies, defaultCurrency]);
+    console.log('state', state);
     var dynamicCustomerFormElements = (0, react_1.useMemo)(function () {
         var _a, _b, _c;
         var elements = __assign({}, constants_1.staticCustomerSection);
@@ -774,6 +806,7 @@ var useInvoiceState = function () {
             comboboxElements[0].handleOnChange = handleSelectChange;
             comboboxElements[0].handleInputOnChange = handleCustomerChange;
             comboboxElements[0].handleOnBlur = handleCustomerChange;
+            comboboxElements[0].error = state.errors.country;
             comboboxElements[1].selectedItem = { code: state.currency || (defaultCurrency === null || defaultCurrency === void 0 ? void 0 : defaultCurrency.code) };
             comboboxElements[1].listItems = currencies;
             comboboxElements[1].handleOnChange = handleSelectChange;

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

@@ -24,10 +24,10 @@ 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 ProductsSection = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), handleChange = _a.handleChange, handleDeleteServiceRow = _a.handleDeleteServiceRow, handleItemChangeProducts = _a.handleItemChangeProducts, productsList = _a.productsList, getProducts = _a.getProducts;
+    var _a = (0, context_1.useInvoiceStateContext)(), errors = _a.errors, getProducts = _a.getProducts, handleChange = _a.handleChange, handleDeleteServiceRow = _a.handleDeleteServiceRow, handleItemChangeProducts = _a.handleItemChangeProducts, productsList = _a.productsList;
     return (react_1.default.createElement("div", { className: "flex flex-col gap-4" },
         react_1.default.createElement(vista_vertical_divider_v4_1.VistaVerticalDividerV4, { label: "Products" }),
-        productsList.length > 0 && (productsList === null || productsList === void 0 ? void 0 : productsList.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' },
+        productsList.length > 0 && (productsList === null || productsList === void 0 ? void 0 : productsList.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-start justify-between gap-4' },
             react_1.default.createElement("div", { className: 'col-span-2' },
                 react_1.default.createElement(vista_combobox_v1_1.VistaComboboxV1, { handleOnChange: function (k, v) {
                         var val = __assign({}, v);
@@ -36,10 +36,11 @@ var ProductsSection = function () {
                             key: k,
                             value: val.id,
                         });
-                    }, handleOnBlur: handleChange, handleInputOnChange: handleChange, label: "Product", listItems: getProducts, nodeQueryKey: 'productQuery', nodeSelectKey: 'id', query: '', selectKey1: 'name', selectedItem: { id: productsList[index].id } })),
-            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(productsList[index].quantity), 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: 'price', label: 'Price', placeholder: '0.00', value: productsList[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: productsList[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 }))); }))));
+                    }, handleOnBlur: handleChange, handleInputOnChange: handleChange, label: "Product", listItems: getProducts, nodeQueryKey: 'productQuery', nodeSelectKey: 'id', query: '', selectKey1: 'name', selectedItem: { id: productsList[index].id }, error: errors["productsList-".concat(index, "-id")] })),
+            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(productsList[index].quantity), type: 'number', error: errors["productsList-".concat(index, "-quantity")] }),
+            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: productsList[index].price, type: 'number', error: errors["productsList-".concat(index, "-price")] }),
+            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: productsList[index].rowTotal, type: 'number', readOnly: true, error: errors["productsList-".concat(index, "-rowTotal")] }),
+            react_1.default.createElement("div", { className: 'h-full flex flex-col justify-center' },
+                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

@@ -55,9 +55,7 @@ exports.initialInvoiceState = {
     discount: '0',
     discountUnit: types_1.DISCOUNT_UNIT.FIXED_VALUE,
     drawer: null,
-    errors: {
-        phone: 'Phone number is not well formatted',
-    },
+    errors: {},
     expiryDate: (0, date_fns_1.addDays)(new Date(), 7).toISOString(),
     id: '',
     invoiceStatus: types_1.INVOICE_STATUS.UNPAID,
@@ -94,19 +92,19 @@ exports.initialInvoiceState = {
     },
     servicesList: [
         {
+            description: '',
             mode: 'Create',
             name: '',
-            description: '',
-            quantity: '1',
             price: '',
+            quantity: '1',
             rowTotal: '',
         },
     ],
     productsList: [
         {
+            id: '',
             mode: 'Create',
             price: '',
-            id: '',
             quantity: '1',
             rowTotal: '',
         },
@@ -124,7 +122,7 @@ function invoiceReducer(state, action) {
                 customer: __assign({}, exports.initialInvoiceState.customer),
             }))), (state.company && ({
                 company: __assign({}, exports.initialInvoiceState.company),
-            }))), { productsList: __assign({}, exports.initialInvoiceState.productsList), servicesList: __assign({}, exports.initialInvoiceState.servicesList), subTotal: exports.initialInvoiceState.subTotal, discount: exports.initialInvoiceState.discount, discountUnit: exports.initialInvoiceState.discountUnit, afterDiscount: exports.initialInvoiceState.afterDiscount, tax: exports.initialInvoiceState.tax, total: exports.initialInvoiceState.total, category: exports.initialInvoiceState.category, companyId: exports.initialInvoiceState.companyId, companyQuery: exports.initialInvoiceState.companyQuery, countryQuery: exports.initialInvoiceState.companyQuery, currency: exports.initialInvoiceState.currency, contactsList: exports.initialInvoiceState.contactsList, customerId: exports.initialInvoiceState.customerId, date: exports.initialInvoiceState.date, disableSaveButton: exports.initialInvoiceState.disableSaveButton, expiryDate: exports.initialInvoiceState.expiryDate, id: exports.initialInvoiceState.id, invoiceStatus: exports.initialInvoiceState.invoiceStatus, loading: exports.initialInvoiceState.loading, getProducts: exports.initialInvoiceState.getProducts, mode: exports.initialInvoiceState.mode, netTotal: exports.initialInvoiceState.netTotal, note: exports.initialInvoiceState.note, payments: exports.initialInvoiceState.payments, companiesList: exports.initialInvoiceState.companiesList, productQuery: exports.initialInvoiceState.productQuery, taxRate: exports.initialInvoiceState.taxRate, taxQuery: exports.initialInvoiceState.taxQuery, taxes: exports.initialInvoiceState.taxes });
+            }))), { productsList: __spreadArray([], exports.initialInvoiceState.productsList, true), servicesList: __spreadArray([], exports.initialInvoiceState.servicesList, true), subTotal: exports.initialInvoiceState.subTotal, discount: exports.initialInvoiceState.discount, discountUnit: exports.initialInvoiceState.discountUnit, afterDiscount: exports.initialInvoiceState.afterDiscount, tax: exports.initialInvoiceState.tax, total: exports.initialInvoiceState.total, category: exports.initialInvoiceState.category, companyId: exports.initialInvoiceState.companyId, companyQuery: exports.initialInvoiceState.companyQuery, countryQuery: exports.initialInvoiceState.companyQuery, currency: exports.initialInvoiceState.currency, contactsList: exports.initialInvoiceState.contactsList, customerId: exports.initialInvoiceState.customerId, date: exports.initialInvoiceState.date, disableSaveButton: exports.initialInvoiceState.disableSaveButton, expiryDate: exports.initialInvoiceState.expiryDate, id: exports.initialInvoiceState.id, invoiceStatus: exports.initialInvoiceState.invoiceStatus, loading: exports.initialInvoiceState.loading, getProducts: exports.initialInvoiceState.getProducts, mode: exports.initialInvoiceState.mode, netTotal: exports.initialInvoiceState.netTotal, note: exports.initialInvoiceState.note, payments: exports.initialInvoiceState.payments, companiesList: exports.initialInvoiceState.companiesList, productQuery: exports.initialInvoiceState.productQuery, taxRate: exports.initialInvoiceState.taxRate, taxQuery: exports.initialInvoiceState.taxQuery, taxes: exports.initialInvoiceState.taxes });
         case actions_1.INVOICE_ACTION_TYPES.SET_DISABLE_SAVE_BUTTON:
             return __assign(__assign({}, state), { disableSaveButton: action.payload.disableSaveButton });
         case actions_1.INVOICE_ACTION_TYPES.SET_CURRENT_PAGE:

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

@@ -12,15 +12,16 @@ var vista_button_type_1 = require("@appcorp/app-corp-vista/type/vista-button-typ
 var solid_1 = require("@heroicons/react/24/solid");
 var context_1 = require("./context");
 var ServicesSection = function () {
-    var _a = (0, context_1.useInvoiceStateContext)(), servicesList = _a.servicesList, handleItemChangeServices = _a.handleItemChangeServices, handleDeleteServiceRow = _a.handleDeleteServiceRow;
+    var _a = (0, context_1.useInvoiceStateContext)(), servicesList = _a.servicesList, errors = _a.errors, 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" }),
-        servicesList.length > 0 && (servicesList === null || servicesList === void 0 ? void 0 : servicesList.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: servicesList[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: servicesList[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: servicesList[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: servicesList[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: servicesList[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 }))); }))));
+        servicesList.length > 0 && (servicesList === null || servicesList === void 0 ? void 0 : servicesList.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-start 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: servicesList[index].name, type: 'text', error: errors["servicesList-".concat(index, "-name")] }),
+            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: servicesList[index].description, type: 'text', error: errors["servicesList-".concat(index, "-description")] }),
+            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: servicesList[index].quantity, type: 'number', error: errors["servicesList-".concat(index, "-quantity")] }),
+            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: servicesList[index].price, type: 'number', error: errors["servicesList-".concat(index, "-price")] }),
+            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: servicesList[index].rowTotal, type: 'number', readOnly: true, error: errors["servicesList-".concat(index, "-rowTotal")] }),
+            react_1.default.createElement("div", { className: 'h-full flex flex-col justify-center' },
+                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

@@ -112,7 +112,7 @@ export interface QuoteInvoiceTypeBE {
     invoiceStatus: INVOICE_STATUS;
     note: string;
     payments: PaymentTypeBE[];
-    products: QuoteInvoiceProduct[];
+    products: QuoteInvoiceProductTypeBE[];
     quoteStatus: QUOTE_STATUS;
     ref: string;
     services: ServiceTypeBE[];
@@ -121,7 +121,32 @@ export interface QuoteInvoiceTypeBE {
     total: string;
     updatedAt: string;
 }
-export interface QuoteInvoiceProduct {
+export interface QuoteInvoiceTypeFE {
+    category: QUOTE_INVOICE_CATEGORY;
+    company?: CompanyTypeBE;
+    companyId?: string;
+    createdAt: string;
+    currency: string;
+    customer?: CustomerTypeBE;
+    customerId?: string;
+    date: string;
+    discount?: string;
+    discountUnit: DISCOUNT_UNIT;
+    expiryDate: string;
+    id: string;
+    invoiceStatus: INVOICE_STATUS;
+    note: string;
+    payments: PaymentTypeBE[];
+    productsList: Product[];
+    quoteStatus: QUOTE_STATUS;
+    ref: string;
+    servicesList: Service[];
+    subTotal: string;
+    taxRate: string;
+    total: string;
+    updatedAt: string;
+}
+export interface QuoteInvoiceProductTypeBE {
     quoteInvoiceId: string;
     productId: string;
     product: ProductTypeBE;