@salesgenterp/ui-components 0.4.551 → 0.4.553

package/dist/index.js

@@ -2835,6 +2835,300 @@ var InfoContainer = styled__default.div(_templateObject$9 || (_templateObject$9
   return props.fontColor;
 });
 
+var AsyncDataLoad = function AsyncDataLoad(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    children = _ref.children,
+    onError = _ref.onError,
+    skeletonHeight = _ref.skeletonHeight,
+    loadingView = _ref.loadingView,
+    errorView = _ref.errorView,
+    asyncService = _ref.asyncService,
+    triggerChange = _ref.triggerChange,
+    apiConfig = _ref.apiConfig;
+  var _useState = React.useState({
+      status: 'loading',
+      data: {}
+    }),
+    apiState = _useState[0],
+    setApiState = _useState[1];
+  var getAPIData = function getAPIData() {
+    try {
+      var _temp3 = _catch(function () {
+        function _temp2() {
+          setApiState({
+            status: API_STATUSES.SUCCESS,
+            data: data
+          });
+        }
+        setApiState({
+          status: API_STATUSES.LOADING,
+          data: {}
+        });
+        var data;
+        var _temp = function () {
+          if (asyncService) {
+            return Promise.resolve(asyncService()).then(function (_asyncService) {
+              data = _asyncService;
+            });
+          } else {
+            return Promise.resolve(API(_extends({
+              apiEndPoint: apiEndPoint,
+              token: token,
+              hideErrorMessage: true
+            }, apiConfig))).then(function (_API) {
+              data = _API;
+            });
+          }
+        }();
+        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+      }, function (e) {
+        setApiState({
+          status: API_STATUSES.ERROR,
+          data: {}
+        });
+        if (onError) {
+          onError(e);
+        }
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React.useEffect(function () {
+    if (apiConfig || asyncService) {
+      (function () {
+        return getAPIData();
+      })();
+    }
+  }, [apiConfig, triggerChange]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, apiState.status === API_STATUSES.LOADING ? loadingView ? loadingView : /*#__PURE__*/React__default.createElement(Loader, {
+    skeleton: skeletonHeight,
+    height: skeletonHeight
+  }) : null, apiState.status === API_STATUSES.SUCCESS ? typeof children === 'function' ? children(apiState.data) : {
+    children: children
+  } : null, apiState.status === API_STATUSES.ERROR ? errorView ? errorView : 'NO DATA' : null);
+};
+var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
+
+var getUpcomingAchPayments = function getUpcomingAchPayments(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token;
+  try {
+    return Promise.resolve(API({
+      url: '/ecommerce/order/payment/upcoming-auto-ach',
+      apiEndPoint: apiEndPoint,
+      token: token
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var saveExcessPayment = function saveExcessPayment(_ref2) {
+  var apiEndPoint = _ref2.apiEndPoint,
+    token = _ref2.token,
+    payload = _ref2.payload;
+  try {
+    return Promise.resolve(API({
+      url: '/ecommerce/order/payment/excess',
+      apiEndPoint: apiEndPoint,
+      token: token,
+      method: 'POST',
+      body: payload
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+var ExcessPaymentForm = function ExcessPaymentForm(_ref) {
+  var paymentMethods = _ref.paymentMethods,
+    control = _ref.control,
+    styles = _ref.styles,
+    handleSubmit = _ref.handleSubmit,
+    onSubmit = _ref.onSubmit,
+    onClose = _ref.onClose,
+    loading = _ref.loading;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormSelect, {
+    label: "Payment Method",
+    name: "paymentModeId",
+    required: true,
+    control: control,
+    options: paymentMethods,
+    valueKey: "id",
+    labelKey: "name",
+    placeholder: "Select Payment Mode",
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Excess Amount",
+    name: "excessAmount",
+    type: "number",
+    required: true,
+    control: control,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Transaction Id",
+    name: "transactionId",
+    control: control,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Notes",
+    name: "notes",
+    control: control,
+    fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
+    multiline: true,
+    rows: 3
+  })))), /*#__PURE__*/React__default.createElement(material.DialogActions, {
+    sx: {
+      justifyContent: 'center',
+      px: 0,
+      pt: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(MuiButton, {
+    primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
+    sx: {
+      fontSize: '1.3rem'
+    },
+    onClick: handleSubmit(onSubmit),
+    loading: loading,
+    size: "small"
+  }, "Save")), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true
+  }, /*#__PURE__*/React__default.createElement(MuiButton, {
+    primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
+    sx: {
+      fontSize: '1.3rem'
+    },
+    onClick: onClose,
+    size: "small"
+  }, "Cancel")))));
+};
+var ExcessPaymentDialog = function ExcessPaymentDialog(_ref2) {
+  var visible = _ref2.visible,
+    onClose = _ref2.onClose,
+    defaultStoreId = _ref2.defaultStoreId,
+    apiEndPoint = _ref2.apiEndPoint,
+    token = _ref2.token,
+    styles = _ref2.styles,
+    onSave = _ref2.onSave,
+    customerData = _ref2.customerData;
+  var _useForm = reactHookForm.useForm({
+      defaultValues: {
+        paymentModeId: '',
+        excessAmount: '',
+        transactionId: '',
+        notes: ''
+      }
+    }),
+    handleSubmit = _useForm.handleSubmit,
+    control = _useForm.control,
+    reset = _useForm.reset;
+  var _useState = React.useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  React.useEffect(function () {
+    if (!visible) {
+      reset({
+        paymentModeId: '',
+        excessAmount: '',
+        transactionId: '',
+        notes: ''
+      });
+    }
+  }, [visible, reset]);
+  var onSubmit = function onSubmit(formData) {
+    try {
+      var _customerData$custome;
+      var payload = {
+        customerId: customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.id,
+        insertedTimestamp: getUTCTime({
+          time: new Date()
+        }),
+        paymentModeId: Number(formData === null || formData === void 0 ? void 0 : formData.paymentModeId),
+        excessAmount: Number(formData === null || formData === void 0 ? void 0 : formData.excessAmount),
+        storeId: defaultStoreId,
+        amount: Number(formData === null || formData === void 0 ? void 0 : formData.excessAmount),
+        transactionId: (formData === null || formData === void 0 ? void 0 : formData.transactionId) || null,
+        notes: (formData === null || formData === void 0 ? void 0 : formData.notes) || null
+      };
+      var _temp = _finallyRethrows(function () {
+        return _catch(function () {
+          setLoading(true);
+          return Promise.resolve(saveExcessPayment({
+            apiEndPoint: apiEndPoint,
+            token: token,
+            payload: payload
+          })).then(function (response) {
+            onSave && onSave(payload);
+          });
+        }, function () {});
+      }, function (_wasThrown, _result) {
+        setLoading(false);
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(material.Dialog, {
+    open: visible,
+    onClose: onClose,
+    fullWidth: true,
+    maxWidth: "sm"
+  }, /*#__PURE__*/React__default.createElement(material.DialogTitle, null, "Excess Payment"), /*#__PURE__*/React__default.createElement(material.DialogContent, null, /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
+    apiEndPoint: apiEndPoint,
+    token: token,
+    asyncService: function asyncService() {
+      try {
+        return Promise.resolve(getPaymentMethods({
+          apiEndPoint: apiEndPoint,
+          token: token
+        }));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    }
+  }, function (data) {
+    var paymentMethods = (data === null || data === void 0 ? void 0 : data.filter(function (item) {
+      return item === null || item === void 0 ? void 0 : item.ecommerce;
+    })) || [];
+    return /*#__PURE__*/React__default.createElement(ExcessPaymentForm, {
+      loading: loading,
+      paymentMethods: paymentMethods,
+      control: control,
+      styles: styles,
+      handleSubmit: handleSubmit,
+      onSubmit: onSubmit,
+      onClose: onClose
+    });
+  })));
+};
+
 var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 var totalIcons = [{
   name: '',
@@ -2848,6 +3142,9 @@ var totalIcons = [{
 }, {
   name: 'Total Number Of Orders',
   icon: /*#__PURE__*/React__default.createElement(gi.GiCardboardBoxClosed, null)
+}, {
+  name: 'Excess Payment',
+  icon: /*#__PURE__*/React__default.createElement(tb.TbFileDollar, null)
 }];
 var Dashboard = function Dashboard(_ref) {
   var _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
@@ -2878,14 +3175,18 @@ var Dashboard = function Dashboard(_ref) {
     showOnlyRecentOrder = _ref$showOnlyRecentOr === void 0 ? false : _ref$showOnlyRecentOr,
     hidePayActionButton = _ref.hidePayActionButton,
     hideInvoiceTab = _ref.hideInvoiceTab,
-    hideSalesOrderTab = _ref.hideSalesOrderTab;
+    hideSalesOrderTab = _ref.hideSalesOrderTab,
+    hideAddAccessPaymentButton = _ref.hideAddAccessPaymentButton;
   var _useState = React.useState({}),
     customerData = _useState[0],
     setCustomerData = _useState[1];
   var _useState2 = React.useState({}),
     dashboardData = _useState2[0],
     setDashboardData = _useState2[1];
-  var _useState3 = React.useState({
+  var _useState3 = React.useState(),
+    refetchDashboardData = _useState3[0],
+    setRefetchDashboardData = _useState3[1];
+  var _useState4 = React.useState({
       recentInvoices: {
         startDate: null,
         endDate: null
@@ -2895,25 +3196,24 @@ var Dashboard = function Dashboard(_ref) {
         endDate: null
       }
     }),
-    selectDates = _useState3[0],
-    setSelectDates = _useState3[1];
-  var _useState4 = React.useState(getRandomString()),
-    triggerTableData = _useState4[0],
-    setTriggerTableData = _useState4[1];
-  var _useState5 = React.useState({
-      open: false,
-      url: ''
-    }),
-    invoiceModal = _useState5[0],
-    setInvoiceModal = _useState5[1];
+    selectDates = _useState4[0],
+    setSelectDates = _useState4[1];
+  var _useState5 = React.useState(getRandomString()),
+    triggerTableData = _useState5[0],
+    setTriggerTableData = _useState5[1];
   var _useState6 = React.useState({
       open: false
     }),
     isPaymentModal = _useState6[0],
     setIsPaymentModal = _useState6[1];
-  var _useState7 = React.useState(0),
-    value = _useState7[0],
-    setValue = _useState7[1];
+  var _useState7 = React.useState({
+      open: false
+    }),
+    isExcessPaymentModal = _useState7[0],
+    setIsExcessPaymentModal = _useState7[1];
+  var _useState8 = React.useState(0),
+    value = _useState8[0],
+    setValue = _useState8[1];
   React.useEffect(function () {
     if (hideSalesOrderTab) {
       setValue(1);
@@ -2933,10 +3233,9 @@ var Dashboard = function Dashboard(_ref) {
     };
   }
   var openInvoiceData = function openInvoiceData(orderId) {
-    serviceApiEndPoint && setInvoiceModal({
-      open: true,
-      url: serviceApiEndPoint + "/" + (value === 0 ? 'salesOrder' : 'sales-order') + "/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList + "&isEcommerce=true"
-    });
+    if (serviceApiEndPoint) {
+      window.open(serviceApiEndPoint + "/" + (value === 0 ? 'salesOrder' : 'sales-order') + "/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList + "&isEcommerce=true", '_blank', 'noopener,noreferrer');
+    }
   };
   var onDateChange = function onDateChange(data) {
     var startDate = moment(data === null || data === void 0 ? void 0 : data.startDate).startOf('day');
@@ -3149,7 +3448,7 @@ var Dashboard = function Dashboard(_ref) {
         Promise.reject(e);
       }
     })();
-  }, []);
+  }, [refetchDashboardData]);
   React.useEffect(function () {
     try {
       try {
@@ -3202,6 +3501,30 @@ var Dashboard = function Dashboard(_ref) {
     orderId: isPaymentModal === null || isPaymentModal === void 0 ? void 0 : isPaymentModal.orderId,
     setTriggerTableData: setTriggerTableData,
     styles: styles
+  }), (isExcessPaymentModal === null || isExcessPaymentModal === void 0 ? void 0 : isExcessPaymentModal.open) && /*#__PURE__*/React__default.createElement(ExcessPaymentDialog, {
+    customerData: customerData,
+    apiEndPoint: apiEndPoint,
+    token: token,
+    defaultStoreId: defaultStoreId,
+    styles: styles,
+    onSave: function onSave(payload) {
+      try {
+        setRefetchDashboardData(getRandomString());
+        alert("Excess Payment $" + (payload === null || payload === void 0 ? void 0 : payload.excessAmount) + " added successfully");
+        setIsExcessPaymentModal({
+          open: false
+        });
+        return Promise.resolve();
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    visible: isExcessPaymentModal === null || isExcessPaymentModal === void 0 ? void 0 : isExcessPaymentModal.open,
+    onClose: function onClose() {
+      return setIsExcessPaymentModal({
+        open: false
+      });
+    }
   }), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     columnSpacing: 4
@@ -3219,7 +3542,8 @@ var Dashboard = function Dashboard(_ref) {
     spacing: 3
   }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
     var _data$name, _data$name2, _data$name3, _totalIcons$find;
-    var isAmount = (data === null || data === void 0 ? void 0 : (_data$name = data.name) === null || _data$name === void 0 ? void 0 : _data$name.indexOf('Amount')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name2 = data.name) === null || _data$name2 === void 0 ? void 0 : _data$name2.indexOf('Credit')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name3 = data.name) === null || _data$name3 === void 0 ? void 0 : _data$name3.indexOf('Price')) > 1;
+    var isAmount = (data === null || data === void 0 ? void 0 : (_data$name = data.name) === null || _data$name === void 0 ? void 0 : _data$name.indexOf('Amount')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name2 = data.name) === null || _data$name2 === void 0 ? void 0 : _data$name2.indexOf('Credit')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name3 = data.name) === null || _data$name3 === void 0 ? void 0 : _data$name3.indexOf('Price')) > 1 || (data === null || data === void 0 ? void 0 : data.name) === 'Excess Payment';
+    var isExcessPayment = (data === null || data === void 0 ? void 0 : data.name) === 'Excess Payment';
     return /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true,
       xs: 12,
@@ -3239,7 +3563,23 @@ var Dashboard = function Dashboard(_ref) {
       className: "icon-container"
     }, (totalIcons === null || totalIcons === void 0 ? void 0 : (_totalIcons$find = totalIcons.find(function (icons) {
       return (icons === null || icons === void 0 ? void 0 : icons.name) === (data === null || data === void 0 ? void 0 : data.name);
-    })) === null || _totalIcons$find === void 0 ? void 0 : _totalIcons$find.icon) || (isAmount ? /*#__PURE__*/React__default.createElement(md.MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(gr.GrStackOverflow, null))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value)))));
+    })) === null || _totalIcons$find === void 0 ? void 0 : _totalIcons$find.icon) || (isAmount ? /*#__PURE__*/React__default.createElement(md.MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(gr.GrStackOverflow, null))), /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value))), isExcessPayment && !hideAddAccessPaymentButton && /*#__PURE__*/React__default.createElement(material.Tooltip, {
+      title: "Add Excess Payment",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement(AddExcessPaymentButton, {
+      className: "add-excess-payment-btn",
+      primaryColor: primaryColor,
+      onClick: function onClick() {
+        return setIsExcessPaymentModal({
+          open: true
+        });
+      },
+      "aria-label": "Add excess payment"
+    }, /*#__PURE__*/React__default.createElement(md.MdAdd, null), /*#__PURE__*/React__default.createElement("span", null, "Add")))));
   }))), !hideBannerSection && /*#__PURE__*/React__default.createElement(BannerContainer, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 3,
@@ -3318,20 +3658,7 @@ var Dashboard = function Dashboard(_ref) {
     style: {
       marginTop: '1rem'
     }
-  })))))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(InvoiceDialog, {
-    onClose: function onClose() {
-      return setInvoiceModal({
-        open: false
-      });
-    },
-    "aria-labelledby": "customized-dialog-title",
-    open: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.open,
-    maxWidth: "lg"
-  }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
-    dividers: true
-  }, /*#__PURE__*/React__default.createElement("iframe", {
-    src: invoiceModal.url
-  }))), /*#__PURE__*/React__default.createElement(APITable, {
+  })))))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(APITable, {
     key: value,
     cacheFilters: true,
     extraFilterParams: value === 0 ? selectDates.recentInvoices : selectDates.salesOrders,
@@ -3558,10 +3885,12 @@ var SocialIconContainer = styled__default.a(_templateObject8$1 || (_templateObje
 });
 var ImageContainer = styled__default(material.CardMedia)(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  border-radius: 14px;\n  img {\n    max-width: 100%;\n  }\n"])));
 var TotalRoot = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  margin: 2rem 0;\n"])));
-var TotalContainer = styled__default(material.Stack)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  border-radius: 14px;\n  background-color: ", ";\n  padding: 1.8rem 1.4rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  :hover {\n    background-color: ", ";\n    p,\n    h3 {\n      color: #fff !important;\n    }\n    .icon-container {\n      background: #fff;\n    }\n  }\n  p {\n    font-size: 1rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 0rem;\n  }\n  h3 {\n    font-size: 1.7rem;\n    font-weight: 600;\n    color: ", ";\n  }\n  .icon-container {\n    background: ", ";\n    border-radius: 14px;\n    padding: 0.6rem;\n    display: flex;\n    margin: auto 0;\n    svg {\n      font-size: 2.6rem;\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var TotalContainer = styled__default(material.Stack)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  border-radius: 14px;\n  background-color: ", ";\n  padding: 1.8rem 1.4rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  align-items: center;\n  :hover {\n    background-color: ", ";\n    p,\n    h3 {\n      color: #fff !important;\n    }\n    .icon-container {\n      background: #fff;\n    }\n    .add-excess-payment-btn {\n      background: #fff;\n      color: ", ";\n    }\n  }\n  p {\n    font-size: 1rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 0rem;\n  }\n  h3 {\n    font-size: 1.7rem;\n    font-weight: 600;\n    color: ", ";\n  }\n  .icon-container {\n    background: ", ";\n    border-radius: 14px;\n    padding: 0.6rem;\n    display: flex;\n    margin: auto 0;\n    svg {\n      font-size: 2.6rem;\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.primaryColor;
+}, function (props) {
+  return props.primaryColor;
 }, function (props) {
   return props.fontColor;
 }, function (props) {
@@ -3571,12 +3900,15 @@ var TotalContainer = styled__default(material.Stack)(_templateObject11$1 || (_te
 }, function (props) {
   return props.primaryColor;
 });
-var BannerContainer = styled__default(material.Stack)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose([""])));
-var CategoryContainer = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 1.8rem;\n  border-radius: 14px;\n"])), function (props) {
+var AddExcessPaymentButton = styled__default.button(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  margin-left: auto;\n  border: none;\n  cursor: pointer;\n  border-radius: 999px;\n  padding: 0.45rem 0.9rem 0.45rem 0.55rem;\n  background: ", ";\n  color: #fff;\n  font-size: 0.85rem;\n  font-weight: 600;\n  line-height: 1;\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\n  transition: transform 0.15s ease, box-shadow 0.15s ease;\n\n  svg {\n    font-size: 1.35rem;\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n"])), function (props) {
+  return props.primaryColor;
+});
+var BannerContainer = styled__default(material.Stack)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose([""])));
+var CategoryContainer = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 1.8rem;\n  border-radius: 14px;\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.primaryColor;
 });
-var CategoryText = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  h3 {\n    color: #fff;\n    font-size: 2rem;\n    font-weight: 700;\n    margin: 1rem 0;\n  }\n  p {\n    color: #fff;\n    font-size: 1.2rem;\n    text-transform: capitalize;\n  }\n  button {\n    padding: 0.5rem 2rem;\n    margin-top: 1rem;\n    background-color: ", ";\n    color: ", ";\n    border-radius: 14px;\n    font-size: 1.2rem;\n    font-weight: 600;\n    &:hover {\n      background-color: ", ";\n      color: #fff;\n    }\n  }\n"])), function (props) {
+var CategoryText = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  h3 {\n    color: #fff;\n    font-size: 2rem;\n    font-weight: 700;\n    margin: 1rem 0;\n  }\n  p {\n    color: #fff;\n    font-size: 1.2rem;\n    text-transform: capitalize;\n  }\n  button {\n    padding: 0.5rem 2rem;\n    margin-top: 1rem;\n    background-color: ", ";\n    color: ", ";\n    border-radius: 14px;\n    font-size: 1.2rem;\n    font-weight: 600;\n    &:hover {\n      background-color: ", ";\n      color: #fff;\n    }\n  }\n"])), function (props) {
   var _props$theme2;
   return (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.secondaryColor;
 }, function (props) {
@@ -3586,18 +3918,17 @@ var CategoryText = styled__default.div(_templateObject14 || (_templateObject14 =
   var _props$theme4;
   return (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.primaryColor;
 });
-var DiscoverContainer = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 1.8rem;\n  border-radius: 14px;\n  h3,\n  svg {\n    color: ", ";\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2rem;\n  }\n"])), function (props) {
+var DiscoverContainer = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 1.8rem;\n  border-radius: 14px;\n  h3,\n  svg {\n    color: ", ";\n    font-size: 2rem;\n    font-weight: 700;\n    line-height: 2rem;\n  }\n"])), function (props) {
   var _props$theme5, _props$theme6, _props$theme7;
   return (_props$theme5 = props.theme) !== null && _props$theme5 !== void 0 && _props$theme5.isNightMode ? (_props$theme6 = props.theme) === null || _props$theme6 === void 0 ? void 0 : _props$theme6.secondaryColor : "rgba(" + hexToRgbA((_props$theme7 = props.theme) === null || _props$theme7 === void 0 ? void 0 : _props$theme7.primaryColor) + ",0.1)";
 }, function (props) {
   var _props$theme8;
   return (_props$theme8 = props.theme) === null || _props$theme8 === void 0 ? void 0 : _props$theme8.fontColor;
 });
-var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  background-color: ", ";\n  color: #fff;\n  width: max-content;\n"])), function (props) {
+var StatusContainer = styled__default(material.Stack)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  background-color: ", ";\n  color: #fff;\n  width: max-content;\n"])), function (props) {
   return props.primaryColor;
 });
-var TableContainer = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
-var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var TableContainer = styled__default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
 var TabsContainer = styled__default(material.Tabs)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  button {\n    color: ", " !important;\n    font-size: 1.1rem;\n    font-weight: 600;\n  }\n  .Mui-selected {\n    color: ", " !important;\n  }\n  .MuiTabs-indicator {\n    background-color: ", " !important;\n  }\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
@@ -5289,20 +5620,6 @@ var getDocumentTypes = function getDocumentTypes(_ref3) {
   }
 };
 
-var getUpcomingAchPayments = function getUpcomingAchPayments(_ref) {
-  var apiEndPoint = _ref.apiEndPoint,
-    token = _ref.token;
-  try {
-    return Promise.resolve(API({
-      url: '/ecommerce/order/payment/upcoming-auto-ach',
-      apiEndPoint: apiEndPoint,
-      token: token
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var _templateObject$l;
 var columns = [{
   id: 'orderId',
@@ -5366,7 +5683,7 @@ var UpcomingACHPayments = function UpcomingACHPayments(_ref) {
 var TableContainer$2 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 14px;\n"])));
 
 var _templateObject$m, _templateObject2$d, _templateObject3$9, _templateObject4$7;
-var _excluded$5 = ["apiEndPoint", "serviceApiEndPoint", "token", "primaryColor", "secondaryColor", "backgroundColor", "fontColor", "darkMode", "onChangeColors", "path", "onChangePath", "maxWidth", "logoUrl", "sectionLeftImageSection", "exploreCategoryImage", "sectionRightImageSection", "discountImageSection", "disabledUpdateProfileFromDashboard", "hideTotalCardInDashboardSummary", "showOnlyRecentOrder", "hidePayActionButton", "hideSalesOrderTab", "hideInvoiceTab"];
+var _excluded$5 = ["apiEndPoint", "serviceApiEndPoint", "token", "primaryColor", "secondaryColor", "backgroundColor", "fontColor", "darkMode", "onChangeColors", "path", "onChangePath", "maxWidth", "logoUrl", "sectionLeftImageSection", "exploreCategoryImage", "sectionRightImageSection", "discountImageSection", "disabledUpdateProfileFromDashboard", "hideTotalCardInDashboardSummary", "showOnlyRecentOrder", "hidePayActionButton", "hideSalesOrderTab", "hideInvoiceTab", "hideAddAccessPaymentButton"];
 var AccountDetails = function AccountDetails(_ref) {
   var _storeData$map, _storeData$find, _storeData$;
   var apiEndPoint = _ref.apiEndPoint,
@@ -5400,6 +5717,8 @@ var AccountDetails = function AccountDetails(_ref) {
     hideSalesOrderTab = _ref$hideSalesOrderTa === void 0 ? false : _ref$hideSalesOrderTa,
     _ref$hideInvoiceTab = _ref.hideInvoiceTab,
     hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab,
+    _ref$hideAddAccessPay = _ref.hideAddAccessPaymentButton,
+    hideAddAccessPaymentButton = _ref$hideAddAccessPay === void 0 ? false : _ref$hideAddAccessPay,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var _useAllSystemFeatureV = useAllSystemFeatureValues({
       apiEndPoint: apiEndPoint,
@@ -5573,7 +5892,8 @@ var AccountDetails = function AccountDetails(_ref) {
             showOnlyRecentOrder: showOnlyRecentOrder,
             hidePayActionButton: hidePayActionButton,
             hideSalesOrderTab: hideSalesOrderTab,
-            hideInvoiceTab: hideInvoiceTab
+            hideInvoiceTab: hideInvoiceTab,
+            hideAddAccessPaymentButton: hideAddAccessPaymentButton
           });
         case 'myProfile':
           return /*#__PURE__*/React__default.createElement(MyProfile, {
@@ -5790,83 +6110,6 @@ var TypographyContainer$7 = styled__default(material.Typography)(_templateObject
   return props.fontColor;
 });
 
-var AsyncDataLoad = function AsyncDataLoad(_ref) {
-  var apiEndPoint = _ref.apiEndPoint,
-    token = _ref.token,
-    children = _ref.children,
-    onError = _ref.onError,
-    skeletonHeight = _ref.skeletonHeight,
-    loadingView = _ref.loadingView,
-    errorView = _ref.errorView,
-    asyncService = _ref.asyncService,
-    triggerChange = _ref.triggerChange,
-    apiConfig = _ref.apiConfig;
-  var _useState = React.useState({
-      status: 'loading',
-      data: {}
-    }),
-    apiState = _useState[0],
-    setApiState = _useState[1];
-  var getAPIData = function getAPIData() {
-    try {
-      var _temp3 = _catch(function () {
-        function _temp2() {
-          setApiState({
-            status: API_STATUSES.SUCCESS,
-            data: data
-          });
-        }
-        setApiState({
-          status: API_STATUSES.LOADING,
-          data: {}
-        });
-        var data;
-        var _temp = function () {
-          if (asyncService) {
-            return Promise.resolve(asyncService()).then(function (_asyncService) {
-              data = _asyncService;
-            });
-          } else {
-            return Promise.resolve(API(_extends({
-              apiEndPoint: apiEndPoint,
-              token: token,
-              hideErrorMessage: true
-            }, apiConfig))).then(function (_API) {
-              data = _API;
-            });
-          }
-        }();
-        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-      }, function (e) {
-        setApiState({
-          status: API_STATUSES.ERROR,
-          data: {}
-        });
-        if (onError) {
-          onError(e);
-        }
-      });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  React.useEffect(function () {
-    if (apiConfig || asyncService) {
-      (function () {
-        return getAPIData();
-      })();
-    }
-  }, [apiConfig, triggerChange]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, apiState.status === API_STATUSES.LOADING ? loadingView ? loadingView : /*#__PURE__*/React__default.createElement(Loader, {
-    skeleton: skeletonHeight,
-    height: skeletonHeight
-  }) : null, apiState.status === API_STATUSES.SUCCESS ? typeof children === 'function' ? children(apiState.data) : {
-    children: children
-  } : null, apiState.status === API_STATUSES.ERROR ? errorView ? errorView : 'NO DATA' : null);
-};
-var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
-
 var _templateObject$n, _templateObject2$e, _templateObject3$a;
 var BannerImages = function BannerImages(_ref) {
   var config = _ref.config,