@salesgenterp/ui-components 0.4.551 → 0.4.552

package/dist/index.js

@@ -2835,7 +2835,301 @@ var InfoContainer = styled__default.div(_templateObject$9 || (_templateObject$9
   return props.fontColor;
 });
 
-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 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, _templateObject20;
 var totalIcons = [{
   name: '',
   icon: /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, null)
@@ -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,30 @@ 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({
+    selectDates = _useState4[0],
+    setSelectDates = _useState4[1];
+  var _useState5 = React.useState(getRandomString()),
+    triggerTableData = _useState5[0],
+    setTriggerTableData = _useState5[1];
+  var _useState6 = React.useState({
       open: false,
       url: ''
     }),
-    invoiceModal = _useState5[0],
-    setInvoiceModal = _useState5[1];
-  var _useState6 = React.useState({
+    invoiceModal = _useState6[0],
+    setInvoiceModal = _useState6[1];
+  var _useState7 = React.useState({
       open: false
     }),
-    isPaymentModal = _useState6[0],
-    setIsPaymentModal = _useState6[1];
-  var _useState7 = React.useState(0),
-    value = _useState7[0],
-    setValue = _useState7[1];
+    isPaymentModal = _useState7[0],
+    setIsPaymentModal = _useState7[1];
+  var _useState8 = React.useState({
+      open: false
+    }),
+    isExcessPaymentModal = _useState8[0],
+    setIsExcessPaymentModal = _useState8[1];
+  var _useState9 = React.useState(0),
+    value = _useState9[0],
+    setValue = _useState9[1];
   React.useEffect(function () {
     if (hideSalesOrderTab) {
       setValue(1);
@@ -3149,7 +3455,7 @@ var Dashboard = function Dashboard(_ref) {
         Promise.reject(e);
       }
     })();
-  }, []);
+  }, [refetchDashboardData]);
   React.useEffect(function () {
     try {
       try {
@@ -3202,6 +3508,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 +3549,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 +3570,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,
@@ -3558,10 +3905,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 +3920,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,19 +3938,19 @@ 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 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) {
+var TableContainer = styled__default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
+var InvoiceDialog = styled__default(material.Dialog)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var TabsContainer = styled__default(material.Tabs)(_templateObject20 || (_templateObject20 = _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) {
   return props.primaryColor;
@@ -4933,7 +5285,7 @@ var getDropzoneRejectionError = function getDropzoneRejectionError(fileRejection
   return (error === null || error === void 0 ? void 0 : error.message) || 'Invalid file';
 };
 
-var _templateObject$k, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
+var _templateObject$k, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 var DEFAULT_PRIMARY_COLOR = "#437c0f";
 var Container = styled__default.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-height: 80vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f6f6f6;\n  padding: 2rem 1rem;\n"])));
 var Card = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  width: min(100%, 720px);\n  background: #fff;\n  border: 1px solid #cac8c8;\n  border-radius: 8px;\n  padding: 1.5rem;\n"])));
@@ -4973,7 +5325,7 @@ var DropzoneBtn = styled__default.span(_templateObject16$1 || (_templateObject16
 var DropzoneText = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.875rem;\n  color: #666;\n"])));
 var DropzoneError = styled__default.p(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem 0 0;\n  font-size: 0.8rem;\n  color: #c62828;\n"])));
 var SelectedFileRow = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.6rem 0.75rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  background: #fafafa;\n"])));
-var SelectedFileInfo = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n"])));
+var SelectedFileInfo = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  min-width: 0;\n  flex: 1;\n"])));
 var SelectedFileName = styled__default.span(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  font-size: 0.875rem;\n  color: #333;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 var ClearFileBtn = styled__default.button(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: none;\n  color: #c62828;\n  font-size: 1.1rem;\n  cursor: pointer;\n  flex-shrink: 0;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])));
 var UploadedFiles = styled__default.ul(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  li {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 0.875rem;\n    color: #555;\n    padding: 0.65rem 0.75rem;\n    background: #fff;\n    border: 1px solid #eee;\n    border-radius: 4px;\n  }\n"])));
@@ -5289,20 +5641,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 +5704,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 +5738,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 +5913,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 +6131,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,
@@ -7911,7 +8175,7 @@ var TotalAfterDiscount = function TotalAfterDiscount(_ref2) {
   }, renderMoney(totalAmount)) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("b", null, renderMoney(total))));
 };
 
-var _templateObject$v, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59;
+var _templateObject$v, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59;
 var DEFAULT_PRIMARY_COLOR$1 = '#437C0F';
 var formatCurrency = function formatCurrency(amount) {
   return Number(amount).toLocaleString('en-US', {
@@ -8521,7 +8785,7 @@ var HeaderIconWrap = styled__default.div(_templateObject19$2 || (_templateObject
   var $accentColor = _ref21.$accentColor;
   return $accentColor + "cc";
 });
-var HeaderCopy = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  z-index: 1;\n"])));
+var HeaderCopy = styled__default.div(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  z-index: 1;\n"])));
 var Eyebrow = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref22) {
   var $accentColor = _ref22.$accentColor;
   return $accentColor;