@salesgenterp/ui-components 0.4.550 → 0.4.552

package/dist/index.modern.js

@@ -1,9 +1,9 @@
-import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$3, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card as Card$1, CardHeader, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Pagination, Tooltip, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$4 } from '@mui/material';
+import { Skeleton as Skeleton$1, CircularProgress, TextField, Button, IconButton, Stack, Typography, Grid, InputAdornment, Popover, TableHead, TableRow, TableSortLabel, Paper, TableContainer as TableContainer$4, Table, TableBody, TableCell, TablePagination, Dialog, DialogContent, DialogActions, DialogTitle as DialogTitle$1, RadioGroup, Radio, FormControlLabel, FormLabel, FormControl, FormHelperText, Select as Select$1, InputLabel, MenuItem, CardMedia, Divider, Tabs, Tooltip, Box, Tab, CardContent, ListItemIcon, ListItem, Collapse, List, ListItemText, Checkbox as Checkbox$1, Card as Card$1, CardHeader as CardHeader$1, CssBaseline, Toolbar, Drawer, useMediaQuery as useMediaQuery$1, Pagination, CardActionArea, Avatar as Avatar$1, alpha, Stepper, Step, StepLabel, StepContent, Container as Container$4 } from '@mui/material';
 import { styled as styled$1 } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import React__default, { useState, useEffect, forwardRef, createElement, useCallback, memo, Fragment as Fragment$1, useRef, useMemo } from 'react';
-import { MdVisibilityOff, MdVisibility, MdClose, MdMonetizationOn, MdOutlineStorefront, MdRemoveRedEye, MdOutlineFileDownload, MdPersonOutline, MdOutlineCall, MdMailOutline, MdExpandMore, MdExpandLess, MdStore, MdOutlineMenuOpen, MdMenu, MdDarkMode, MdOutlineDarkMode, MdDelete, MdCheckCircle, MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdOutlineNumbers, MdDateRange, MdOutlineWarehouse } from 'react-icons/md';
-import styled, { css, ThemeProvider } from 'styled-components';
+import React__default, { useState, useEffect, forwardRef, memo, createElement, useCallback, Fragment as Fragment$1, useRef, useMemo } from 'react';
+import { MdVisibilityOff, MdVisibility, MdClose, MdMonetizationOn, MdAdd, MdOutlineStorefront, MdRemoveRedEye, MdOutlineFileDownload, MdPersonOutline, MdOutlineCall, MdMailOutline, MdExpandMore, MdExpandLess, MdStore, MdOutlineMenuOpen, MdMenu, MdDarkMode, MdOutlineDarkMode, MdLocalOffer, MdDelete, MdCheckCircle, MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2, MdOutlineNumbers, MdDateRange, MdOutlineWarehouse } from 'react-icons/md';
+import styled, { css, ThemeProvider, keyframes } from 'styled-components';
 import { isEmpty, isString, toNumber, reduce, concat, omit, replace, template, isArray, some, toLower, isPlainObject, includes, values, cloneDeep, filter, sortBy, isObject, sumBy, get, isNumber, remove } from 'lodash';
 import axios from 'axios';
 import moment from 'moment';
@@ -12,7 +12,7 @@ import Cookies from 'js-cookie';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import { Controller, useForm } from 'react-hook-form';
-import { AiOutlinePlus, AiOutlineRise, AiOutlineShoppingCart, AiOutlineLeft, AiOutlineRight, AiOutlineMinus, AiOutlineDelete, AiOutlineHome, AiOutlineShop, AiOutlineCheckCircle, AiOutlineCheck, AiFillEyeInvisible, AiFillEye } from 'react-icons/ai';
+import { AiOutlinePlus, AiOutlineRise, AiOutlineShoppingCart, AiOutlineCreditCard, AiOutlineLeft, AiOutlineRight, AiOutlineMinus, AiOutlineDelete, AiOutlineHome, AiOutlineShop, AiOutlineCheckCircle, AiOutlineCheck, AiFillEyeInvisible, AiFillEye } from 'react-icons/ai';
 import { FaRegUser, FaFacebookF, FaInstagram, FaTwitter, FaLinkedinIn, FaYoutube, FaCalendarCheck, FaUserAlt, FaLock, FaTools } from 'react-icons/fa';
 import { GiCardboardBoxClosed } from 'react-icons/gi';
 import { GrStackOverflow, GrClose, GrRadialSelected } from 'react-icons/gr';
@@ -43,21 +43,22 @@ import Paper$1 from '@mui/material/Paper';
 import Table$1 from '@mui/material/Table';
 import TableBody$1 from '@mui/material/TableBody';
 import TableCell$1 from '@mui/material/TableCell';
-import TableContainer$4 from '@mui/material/TableContainer';
+import TableContainer$5 from '@mui/material/TableContainer';
 import TableHead$1 from '@mui/material/TableHead';
 import TableRow$1 from '@mui/material/TableRow';
 import { Virtuoso } from 'react-virtuoso';
 import Box$1 from '@mui/material/Box';
 import TableSortLabel$1 from '@mui/material/TableSortLabel';
-import { HiChevronUpDown } from 'react-icons/hi2';
+import { FiZap, FiCheck, FiCopy, FiShoppingCart, FiGift, FiArrowRight, FiPlusCircle, FiTag, FiPercent, FiLayers, FiTruck } from 'react-icons/fi';
+import { createPortal } from 'react-dom';
+import { HiSparkles, HiChevronUpDown } from 'react-icons/hi2';
+import { paramCase } from 'param-case';
 import InputBase from '@mui/material/InputBase';
 import { components } from 'react-select';
 import ReactAsyncSelect from 'react-select/async';
 import Snowfall from 'react-snowfall';
 import ReCAPTCHA from 'react-google-recaptcha';
-import { paramCase } from 'param-case';
 import { CgProfile } from 'react-icons/cg';
-import { FiTruck } from 'react-icons/fi';
 import { FaCheck, FaRegNoteSticky } from 'react-icons/fa6';
 import Image$3 from 'next/image';
 import debounce$1 from 'lodash/debounce';
@@ -2027,7 +2028,7 @@ var PaperContainer = styled(Paper)(_templateObject2$2 || (_templateObject2$2 = _
   return props.fontColor;
 });
 var HeaderContent = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n  padding: 0 1rem;\n  @media only screen and (max-width: 608px) {\n    padding: 0 0.5rem;\n  }\n"])));
-var TableStyledContainer = styled(TableContainer$3)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  border-radius: 14px 12px 0 0 !important;\n"])));
+var TableStyledContainer = styled(TableContainer$4)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  border-radius: 14px 12px 0 0 !important;\n"])));
 var TableStyled = styled(Table)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 0 1rem;\n  @media only screen and (max-width: 608px) {\n    padding: 0 0.5rem;\n  }\n"])));
 var TableBodyContainer = styled(TableBody)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
 var TableRowContainer = styled(TableRow)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n    td {\n      // border: none !important;\n    }\n  }\n"])));
@@ -2077,7 +2078,7 @@ function BootstrapDialogTitle(props) {
     onClose = props.onClose,
     fontColor = props.fontColor,
     other = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(DialogTitle, _extends({
+  return /*#__PURE__*/React__default.createElement(DialogTitle$1, _extends({
     sx: {
       m: 0,
       p: 2,
@@ -2830,7 +2831,301 @@ var InfoContainer = styled.div(_templateObject$9 || (_templateObject$9 = _tagged
   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 = 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);
+    }
+  };
+  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 = 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(Grid, {
+    container: true,
+    spacing: 2
+  }, /*#__PURE__*/React__default.createElement(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(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(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(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(DialogActions, {
+    sx: {
+      justifyContent: 'center',
+      px: 0,
+      pt: 2
+    }
+  }, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true,
+    spacing: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(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(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 = useForm({
+      defaultValues: {
+        paymentModeId: '',
+        excessAmount: '',
+        transactionId: '',
+        notes: ''
+      }
+    }),
+    handleSubmit = _useForm.handleSubmit,
+    control = _useForm.control,
+    reset = _useForm.reset;
+  var _useState = useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  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(Dialog, {
+    open: visible,
+    onClose: onClose,
+    fullWidth: true,
+    maxWidth: "sm"
+  }, /*#__PURE__*/React__default.createElement(DialogTitle$1, null, "Excess Payment"), /*#__PURE__*/React__default.createElement(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(AiOutlineShoppingCart, null)
@@ -2843,6 +3138,9 @@ var totalIcons = [{
 }, {
   name: 'Total Number Of Orders',
   icon: /*#__PURE__*/React__default.createElement(GiCardboardBoxClosed, null)
+}, {
+  name: 'Excess Payment',
+  icon: /*#__PURE__*/React__default.createElement(TbFileDollar, null)
 }];
 var Dashboard = function Dashboard(_ref) {
   var _customerData$custome, _selectDates$salesOrd, _selectDates$recentIn, _selectDates$salesOrd2, _selectDates$recentIn2, _customerData$custome2, _customerData$custome3, _customerData$custome4;
@@ -2873,14 +3171,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 = useState({}),
     customerData = _useState[0],
     setCustomerData = _useState[1];
   var _useState2 = useState({}),
     dashboardData = _useState2[0],
     setDashboardData = _useState2[1];
-  var _useState3 = useState({
+  var _useState3 = useState(),
+    refetchDashboardData = _useState3[0],
+    setRefetchDashboardData = _useState3[1];
+  var _useState4 = useState({
       recentInvoices: {
         startDate: null,
         endDate: null
@@ -2890,25 +3192,30 @@ var Dashboard = function Dashboard(_ref) {
         endDate: null
       }
     }),
-    selectDates = _useState3[0],
-    setSelectDates = _useState3[1];
-  var _useState4 = useState(getRandomString()),
-    triggerTableData = _useState4[0],
-    setTriggerTableData = _useState4[1];
-  var _useState5 = useState({
+    selectDates = _useState4[0],
+    setSelectDates = _useState4[1];
+  var _useState5 = useState(getRandomString()),
+    triggerTableData = _useState5[0],
+    setTriggerTableData = _useState5[1];
+  var _useState6 = useState({
       open: false,
       url: ''
     }),
-    invoiceModal = _useState5[0],
-    setInvoiceModal = _useState5[1];
-  var _useState6 = useState({
+    invoiceModal = _useState6[0],
+    setInvoiceModal = _useState6[1];
+  var _useState7 = useState({
+      open: false
+    }),
+    isPaymentModal = _useState7[0],
+    setIsPaymentModal = _useState7[1];
+  var _useState8 = useState({
       open: false
     }),
-    isPaymentModal = _useState6[0],
-    setIsPaymentModal = _useState6[1];
-  var _useState7 = useState(0),
-    value = _useState7[0],
-    setValue = _useState7[1];
+    isExcessPaymentModal = _useState8[0],
+    setIsExcessPaymentModal = _useState8[1];
+  var _useState9 = useState(0),
+    value = _useState9[0],
+    setValue = _useState9[1];
   useEffect(function () {
     if (hideSalesOrderTab) {
       setValue(1);
@@ -3144,7 +3451,7 @@ var Dashboard = function Dashboard(_ref) {
         Promise.reject(e);
       }
     })();
-  }, []);
+  }, [refetchDashboardData]);
   useEffect(function () {
     try {
       try {
@@ -3197,6 +3504,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(Grid, {
     container: true,
     columnSpacing: 4
@@ -3214,7 +3545,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(Grid, {
       item: true,
       xs: 12,
@@ -3234,7 +3566,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(MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(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(MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(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(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(MdAdd, null), /*#__PURE__*/React__default.createElement("span", null, "Add")))));
   }))), !hideBannerSection && /*#__PURE__*/React__default.createElement(BannerContainer, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     spacing: 3,
@@ -3553,10 +3901,12 @@ var SocialIconContainer = styled.a(_templateObject8$1 || (_templateObject8$1 = _
 });
 var ImageContainer = styled(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.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  margin: 2rem 0;\n"])));
-var TotalContainer = styled(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(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) {
@@ -3566,12 +3916,15 @@ var TotalContainer = styled(Stack)(_templateObject11$1 || (_templateObject11$1 =
 }, function (props) {
   return props.primaryColor;
 });
-var BannerContainer = styled(Stack)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose([""])));
-var CategoryContainer = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  padding: 1.8rem;\n  border-radius: 14px;\n"])), function (props) {
+var AddExcessPaymentButton = styled.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(Stack)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose([""])));
+var CategoryContainer = styled.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.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.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) {
@@ -3581,19 +3934,19 @@ var CategoryText = styled.div(_templateObject14 || (_templateObject14 = _taggedT
   var _props$theme4;
   return (_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.primaryColor;
 });
-var DiscoverContainer = styled.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.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(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(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.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
-var InvoiceDialog = styled(Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
-var TabsContainer = styled(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.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
+var InvoiceDialog = styled(Dialog)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var TabsContainer = styled(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;
@@ -3985,42 +4338,63 @@ var SideMenuItemComponentContainer = styled$1(SideMenuItemComponent)(function (_
   };
 });
 
-var sideMenuItems = [{
-  name: 'My Account',
-  Icon: RiAccountBoxLine,
-  items: [{
-    name: 'Dashboard',
-    path: 'dashboard',
-    link: '/',
-    Icon: RiHome7Line
-  }, {
-    name: 'My Profile',
-    path: 'myProfile',
-    link: '/',
-    Icon: TbUserCircle
-  }, {
-    name: 'Address List',
-    path: 'addressList',
-    link: '/',
-    Icon: TbBuildingStore
-  }, {
-    name: 'Statement',
-    path: 'statement',
-    link: '/',
-    Icon: RiFileTextLine
-  }, {
-    name: 'Change Password',
-    path: 'changePassword',
-    link: '/',
-    Icon: BiLockOpen
-  }]
-}];
+var sideMenuItems = function sideMenuItems(props) {
+  return [{
+    name: 'My Account',
+    Icon: RiAccountBoxLine,
+    items: [{
+      name: 'Dashboard',
+      path: 'dashboard',
+      link: '/',
+      Icon: RiHome7Line,
+      hide: (props === null || props === void 0 ? void 0 : props.hideDashboard) || false
+    }, {
+      name: 'My Profile',
+      path: 'myProfile',
+      link: '/',
+      Icon: TbUserCircle,
+      hide: (props === null || props === void 0 ? void 0 : props.hideMyProfile) || false
+    }, {
+      name: 'Address List',
+      path: 'addressList',
+      link: '/',
+      Icon: TbBuildingStore,
+      hide: (props === null || props === void 0 ? void 0 : props.hideAddressList) || false
+    }, {
+      name: 'Statement',
+      path: 'statement',
+      link: '/',
+      Icon: RiFileTextLine,
+      hide: (props === null || props === void 0 ? void 0 : props.hideStatement) || false
+    }, {
+      name: 'Upcoming ACH Payments',
+      path: 'upcomingACHPayments',
+      link: '/',
+      Icon: AiOutlineCreditCard,
+      hide: (props === null || props === void 0 ? void 0 : props.hideUpcomingACHPayments) || false
+    }, {
+      name: 'Change Password',
+      path: 'changePassword',
+      link: '/',
+      Icon: BiLockOpen,
+      hide: (props === null || props === void 0 ? void 0 : props.hideChangePassword) || false
+    }]
+  }];
+};
 var SideMenu = function SideMenu(props) {
   var _props$menuItems;
+  var menuItems = ((props === null || props === void 0 ? void 0 : (_props$menuItems = props.menuItems) === null || _props$menuItems === void 0 ? void 0 : _props$menuItems.length) > 0 ? props.menuItems : sideMenuItems(props)).map(function (section) {
+    var _section$items;
+    return _extends({}, section, {
+      items: (_section$items = section.items) === null || _section$items === void 0 ? void 0 : _section$items.filter(function (item) {
+        return !item.hide;
+      })
+    });
+  });
   return /*#__PURE__*/React__default.createElement(List, {
     component: "nav",
     disablePadding: true
-  }, ((props === null || props === void 0 ? void 0 : (_props$menuItems = props.menuItems) === null || _props$menuItems === void 0 ? void 0 : _props$menuItems.length) > 0 ? props === null || props === void 0 ? void 0 : props.menuItems : sideMenuItems).map(function (item, index) {
+  }, menuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(_SideMenuItem, _extends({}, item, {
       key: index,
       primaryColor: props.primaryColor,
@@ -4679,7 +5053,7 @@ var StoreDetails = function StoreDetails(_ref) {
       secondaryColor: secondaryColor,
       backgroundColor: backgroundColor,
       fontColor: fontColor
-    }, /*#__PURE__*/React__default.createElement(CardHeader, {
+    }, /*#__PURE__*/React__default.createElement(CardHeader$1, {
       title: /*#__PURE__*/React__default.createElement(Grid, {
         container: true,
         justifyContent: "space-between",
@@ -4907,7 +5281,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.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.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"])));
@@ -4947,7 +5321,7 @@ var DropzoneBtn = styled.span(_templateObject16$1 || (_templateObject16$1 = _tag
 var DropzoneText = styled.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.875rem;\n  color: #666;\n"])));
 var DropzoneError = styled.p(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem 0 0;\n  font-size: 0.8rem;\n  color: #c62828;\n"])));
 var SelectedFileRow = styled.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.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.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.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.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.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"])));
@@ -5263,7 +5637,70 @@ var getDocumentTypes = function getDocumentTypes(_ref3) {
   }
 };
 
-var _templateObject$l, _templateObject2$d, _templateObject3$9, _templateObject4$7;
+var _templateObject$l;
+var columns = [{
+  id: 'orderId',
+  label: 'Order Id',
+  minWidth: 120
+}, {
+  id: 'amount',
+  label: 'Amount',
+  minWidth: 120,
+  format: function format(value) {
+    return renderMoney(value);
+  }
+}, {
+  id: 'scheduleDate',
+  label: 'Schedule Date',
+  minWidth: 160,
+  format: function format(value) {
+    return getLocalTime({
+      time: value
+    });
+  }
+}, {
+  id: 'notes',
+  label: 'Notes',
+  minWidth: 180
+}, {
+  id: 'achAccountUUID',
+  label: 'ACH Account',
+  minWidth: 280
+}];
+var UpcomingACHPayments = function UpcomingACHPayments(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    backgroundColor = _ref.backgroundColor,
+    fontColor = _ref.fontColor;
+  return /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+    pagination: false,
+    scroll: {
+      x: 1000
+    },
+    tableId: "upcoming-ach-payments",
+    columns: columns,
+    asyncService: function asyncService() {
+      try {
+        return Promise.resolve(getUpcomingAchPayments({
+          apiEndPoint: apiEndPoint,
+          token: token
+        }));
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    primaryColor: primaryColor,
+    secondaryColor: secondaryColor,
+    backgroundColor: backgroundColor,
+    fontColor: fontColor
+  }));
+};
+var TableContainer$2 = styled.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", "hideAddAccessPaymentButton"];
 var AccountDetails = function AccountDetails(_ref) {
   var _storeData$map, _storeData$find, _storeData$;
   var apiEndPoint = _ref.apiEndPoint,
@@ -5296,7 +5733,10 @@ var AccountDetails = function AccountDetails(_ref) {
     _ref$hideSalesOrderTa = _ref.hideSalesOrderTab,
     hideSalesOrderTab = _ref$hideSalesOrderTa === void 0 ? false : _ref$hideSalesOrderTa,
     _ref$hideInvoiceTab = _ref.hideInvoiceTab,
-    hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _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,
       token: token
@@ -5469,7 +5909,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, {
@@ -5509,6 +5950,20 @@ var AccountDetails = function AccountDetails(_ref) {
             storeIdList: storeIdList,
             defaultStoreId: defaultStoreId
           });
+        case 'upcomingACHPayments':
+          if (props !== null && props !== void 0 && props.hideUpcomingAchPayments) {
+            return /*#__PURE__*/React__default.createElement(TypographyContainer$7, {
+              fontColor: colors.fontColor
+            }, "Empty");
+          }
+          return /*#__PURE__*/React__default.createElement(UpcomingACHPayments, {
+            apiEndPoint: apiEndPoint,
+            token: token,
+            primaryColor: colors.primaryColor,
+            secondaryColor: colors.secondaryColor,
+            backgroundColor: colors.backgroundColor,
+            fontColor: colors.fontColor
+          });
         case 'changePassword':
           return /*#__PURE__*/React__default.createElement(ChangePassword, {
             apiEndPoint: apiEndPoint,
@@ -5559,12 +6014,12 @@ var AccountDetails = function AccountDetails(_ref) {
     style: {
       padding: '0 3rem 1rem'
     }
-  }), /*#__PURE__*/React__default.createElement(SideMenu, {
+  }), /*#__PURE__*/React__default.createElement(SideMenu, _extends({
     primaryColor: colors.primaryColor,
     fontColor: colors.fontColor,
     tabValue: tabValue,
     onTabChange: onTabChange
-  })), /*#__PURE__*/React__default.createElement(Main, {
+  }, props))), /*#__PURE__*/React__default.createElement(Main, {
     open: open,
     backgroundColor: colors.backgroundColor,
     style: {
@@ -5621,7 +6076,7 @@ var AccountDetails = function AccountDetails(_ref) {
     skeleton: true
   }, apiEndPoint && token && renderListItemComponent(tabValue))))))));
 };
-var Root$4 = styled(Box)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  // background-image: url(", ");\n  // background-position: center;\n  // background-repeat: no-repeat;\n  // background-size: cover;\n  padding: 1.4rem;\n  background-color: ", ";\n"])), function (props) {
+var Root$4 = styled(Box)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  // background-image: url(", ");\n  // background-position: center;\n  // background-repeat: no-repeat;\n  // background-size: cover;\n  padding: 1.4rem;\n  background-color: ", ";\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundImage;
 }, function (props) {
@@ -5655,101 +6110,24 @@ var Main = styled$1('main', {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen
     }),
-    marginLeft: 0
-  }, {
-    background: backgroundColor,
-    borderRadius: 14,
-    height: 'auto',
-    overflow: 'auto'
-  });
-});
-var ContainerDrawer = styled(Drawer)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  // height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    padding: 1rem;\n    position: relative;\n    z-index: 1;\n    background: ", ";\n    border-radius: 14px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  }\n"])), function (props) {
-  return props.open && '2rem';
-}, function (props) {
-  return props.primaryColor || transparent;
-});
-var TypographyContainer$7 = styled(Typography)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
-  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 = 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);
-    }
-  };
-  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 = memo(AsyncDataLoad);
+    marginLeft: 0
+  }, {
+    background: backgroundColor,
+    borderRadius: 14,
+    height: 'auto',
+    overflow: 'auto'
+  });
+});
+var ContainerDrawer = styled(Drawer)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  // height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    padding: 1rem;\n    position: relative;\n    z-index: 1;\n    background: ", ";\n    border-radius: 14px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  }\n"])), function (props) {
+  return props.open && '2rem';
+}, function (props) {
+  return props.primaryColor || transparent;
+});
+var TypographyContainer$7 = styled(Typography)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+  return props.fontColor;
+});
 
-var _templateObject$m, _templateObject2$e, _templateObject3$a;
+var _templateObject$n, _templateObject2$e, _templateObject3$a;
 var BannerImages = function BannerImages(_ref) {
   var config = _ref.config,
     sliderImages = _ref.sliderImages,
@@ -5814,11 +6192,11 @@ var BannerImages = function BannerImages(_ref) {
     }))));
   })));
 };
-var Video = styled.video(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.02);\n  }\n"])));
+var Video = styled.video(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.02);\n  }\n"])));
 var Image = styled.img(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.02);\n  }\n"])));
 var BannerContainer$1 = styled.section(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  font-size: 0;\n"])));
 
-var _templateObject$n, _templateObject2$f, _templateObject3$b, _templateObject4$8;
+var _templateObject$o, _templateObject2$f, _templateObject3$b, _templateObject4$8;
 var LandingCarousel = function LandingCarousel(_ref) {
   var _config$spaceBetweenC, _config$colLg, _ref2, _ref3, _config$colSm, _ref4, _config$colMd, _config$colLg2;
   var config = _ref.config,
@@ -5900,7 +6278,7 @@ var LandingCarousel = function LandingCarousel(_ref) {
     })));
   })));
 };
-var Image$1 = styled.img(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
+var Image$1 = styled.img(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var Video$1 = styled.video(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var Root$5 = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n"])));
 var ReactSlick = styled(Slider)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .slick-track {\n    height: 100%;\n  }\n  .slick-slide {\n    height: 100%;\n    div:first-child {\n      height: 100%;\n    }\n  }\n  .slick-list {\n    height: 100%;\n    margin: 0 -", "px;\n  }\n  .slideItem {\n    height: 100%;\n    padding: 0 ", "px;\n    overflow: hidden;\n  }\n  line-height: 0;\n  .slick-dots {\n    bottom: 0;\n    li {\n      margin: 0;\n      button:before {\n        color: #ffffff !important;\n        font-size: 10px;\n      }\n    }\n  }\n  .slick-prev,\n  .slick-next {\n    color: #464646 !important;\n    z-index: 1;\n    width: 26px;\n    height: 26px;\n  }\n  .slick-prev {\n    left: 12px;\n  }\n  .slick-next {\n    right: 12px;\n  }\n"])), function (props) {
@@ -5909,7 +6287,7 @@ var ReactSlick = styled(Slider)(_templateObject4$8 || (_templateObject4$8 = _tag
   return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
 });
 
-var _templateObject$o, _templateObject2$g;
+var _templateObject$p, _templateObject2$g;
 var inDebounce;
 var JUSTIFY = {
   Left: {
@@ -6104,7 +6482,7 @@ var HomeBanner = function HomeBanner(_ref) {
     }, item === null || item === void 0 ? void 0 : item.component);
   }))))));
 };
-var Root$6 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
+var Root$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
 var MainContainer$1 = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose([""])));
 var SingleBanner = function SingleBanner(_ref3) {
   var config = _ref3.config,
@@ -6138,7 +6516,7 @@ var adjustResponsiveSpace = function adjustResponsiveSpace(_ref4) {
   return spaceValue;
 };
 
-var _templateObject$p, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$5;
+var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$5;
 var LandingCarousel$1 = function LandingCarousel(_ref) {
   var _brandData2;
   var brandList = _ref.brandList,
@@ -6264,7 +6642,7 @@ var LandingCarousel$1 = function LandingCarousel(_ref) {
     })));
   })));
 };
-var Image$2 = styled.img(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  min-height: 100px;\n  max-width: 150px;\n  object-fit: contain;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
+var Image$2 = styled.img(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  min-height: 100px;\n  max-width: 150px;\n  object-fit: contain;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var Video$2 = styled.video(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  transition: all 0.5s;\n  height: 100%;\n  min-height: 100px;\n  max-width: 150px;\n  object-fit: cover;\n  object-position: center;\n  &:hover {\n    transform: scale(1.05);\n  }\n"])));
 var Root$7 = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  height: 100%;\n"])));
 var ReactSlick$1 = styled(Slider)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  .slick-track {\n    height: 100%;\n  }\n  .slick-slide {\n    height: 100%;\n    div:first-child {\n      height: 100%;\n    }\n  }\n  .slick-list {\n    height: 100%;\n    margin: 0 -", "px;\n  }\n\n  line-height: 0;\n  .slick-dots {\n    bottom: 0;\n    li {\n      margin: 0;\n      button:before {\n        color: #ffffff !important;\n        font-size: 10px;\n      }\n    }\n  }\n  .slick-prev,\n  .slick-next {\n    color: #464646 !important;\n    z-index: 1;\n    width: 26px;\n    height: 26px;\n  }\n  .slick-prev {\n    left: 12px;\n  }\n  .slick-next {\n    right: 12px;\n  }\n"])), function (props) {
@@ -6274,7 +6652,7 @@ var SliderItem = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedT
   return (props === null || props === void 0 ? void 0 : props.spaceBetweenCol) || 0;
 });
 
-var _templateObject$q, _templateObject2$i;
+var _templateObject$r, _templateObject2$i;
 var BrandList = function BrandList(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     _ref$colors = _ref.colors,
@@ -6336,10 +6714,10 @@ var BrandList = function BrandList(_ref) {
     autoplaySpeed: autoplaySpeed
   }))));
 };
-var Root$8 = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
+var Root$8 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
 var MainContainer$2 = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose([""])));
 
-var _templateObject$r, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3;
+var _templateObject$s, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3;
 var BrandStock = function BrandStock(_ref) {
   var _Object$keys, _Object$keys2, _data$brands;
   var storeData = _ref.storeData,
@@ -6494,13 +6872,13 @@ var BrandStock = function BrandStock(_ref) {
     }));
   })), (data === null || data === void 0 ? void 0 : data.returnPolicy) && /*#__PURE__*/React__default.createElement(ReturnPolicyContainer, null, /*#__PURE__*/React__default.createElement("h2", null, (data === null || data === void 0 ? void 0 : data.returnPolicyTitle) || 'Return Policy'), data === null || data === void 0 ? void 0 : data.returnPolicy))));
 };
-var Root$9 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n"])));
+var Root$9 = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n"])));
 var TitleContainer$1 = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  padding: 0 1rem;\n  display: flex;\n  justify-content: space-between;\n"])));
 var MainContainer$3 = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  max-width: 600px;\n  margin: auto;\n  .logo {\n    display: flex;\n  }\n  .logoImage {\n    max-width: min(400px, 100%);\n    max-height: 200px;\n    margin: auto;\n  }\n"])));
 var DetailsContainer = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  text-align: center;\n  p {\n    font-size: 16px;\n    font-weight: 500;\n  }\n  span {\n    font-size: 15px;\n  }\n  .lineContainer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0.5rem 0;\n    span {\n      margin-right: 6px;\n    }\n  }\n"])));
 var BrandContainer = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  .brandImage {\n    max-width: 100%;\n    margin: 1rem auto;\n  }\n"])));
 var ReturnPolicyContainer = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  h2 {\n    text-align: center;\n  }\n  margin: 1rem 0;\n  p {\n    font-size: 16px;\n  }\n"])));
-var TablePaperContainer = styled(TableContainer$4)(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n"])));
+var TablePaperContainer = styled(TableContainer$5)(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n"])));
 var TableRowContainer$1 = styled(TableRow$1)(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  && {\n    background: ", ";\n    &:last-child td,\n    &:last-child th {\n      border: 0;\n    }\n  }\n"])), function (props) {
   return !props.availableQuantity && '#cd2323';
 });
@@ -6508,8 +6886,8 @@ var TableCellContainer$1 = styled(TableCell$1)(_templateObject9$3 || (_templateO
   return props.availableQuantity ? props.stockCol && 'green' : '#ffffff';
 });
 
-var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4;
-var CartDrawerContainer = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  /* padding: 1em;\n  padding-top: 0rem; */\n  position: relative;\n  /* min-width: 100%; */\n  min-height: 100vh;\n  max-height: 100vh;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  /* border: 1px solid; */\n"])), function (props) {
+var _templateObject$t, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4;
+var CartDrawerContainer = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  /* padding: 1em;\n  padding-top: 0rem; */\n  position: relative;\n  /* min-width: 100%; */\n  min-height: 100vh;\n  max-height: 100vh;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  /* border: 1px solid; */\n"])), function (props) {
   return props.maxWidth || '650px';
 });
 var CartDrawerBar = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  box-sizing: border-box;\n  top: 0;\n  left: 0;\n  padding: 1em;\n  height: 4.6rem;\n  font-size: 1.6rem;\n  background-color: white;\n  font-weight: bold;\n  padding-left: 1rem;\n  z-index: 2;\n  h2 {\n    font-size: 1.5em;\n  }\n  .icon {\n    cursor: pointer;\n    font-size: 1em;\n  }\n  @media only screen and (max-width: 600px) {\n    font-size: 1rem;\n    height: 4rem;\n  }\n"])));
@@ -6617,8 +6995,8 @@ function useGridSize() {
   return layout;
 }
 
-var _templateObject$t, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$3;
-var CartPageSection = styled.section(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  border-radius: 20px;\n  max-width: 1600px;\n  width: min(1600px, 100%);\n  margin: auto;\n  @media screen and (max-width: 1200px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
+var _templateObject$u, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$3;
+var CartPageSection = styled.section(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  border-radius: 20px;\n  max-width: 1600px;\n  width: min(1600px, 100%);\n  margin: auto;\n  @media screen and (max-width: 1200px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
   return props.bg;
 }, function (props) {
   return props.bg || '#FAE8E5';
@@ -6652,7 +7030,7 @@ var CartTableCell = styled(TableCell)(_templateObject6$6 || (_templateObject6$6
 }, function (props) {
   return "" + props.color || 'inherit';
 });
-var CartTableContainer = styled(TableContainer$3)(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  padding-right: 1rem;\n\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n  }\n"])), function (props) {
+var CartTableContainer = styled(TableContainer$4)(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  padding-right: 1rem;\n\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n  }\n"])), function (props) {
   return 'rgba(102, 112, 128, 0.5)';
 }, function (props) {
   return props.color;
@@ -7793,41 +8171,973 @@ var TotalAfterDiscount = function TotalAfterDiscount(_ref2) {
   }, renderMoney(totalAmount)) : /*#__PURE__*/createElement(Fragment$1, null), /*#__PURE__*/createElement("b", null, renderMoney(total))));
 };
 
-var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7;
-var ProductImage = styled.img(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  min-height: 60px;\n  object-fit: contain;\n  @media only screen and (max-width: 600px) {\n    margin: 0.5em 0;\n    padding-right: 0.5em;\n  }\n"])));
-var ProductName = styled.h6(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  padding: 0;\n  line-height: 1.3em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  height: fit-content;\n  cursor: pointer;\n"])), function (props) {
+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', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+};
+var getUnitSaving = function getUnitSaving(coupon, productPrice) {
+  if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage && productPrice > 0) {
+    return productPrice * (coupon.offPercentage / 100);
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.offPercentageAmount) > 0) {
+    return coupon.offPercentageAmount;
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.offAmount) > 0 && !(coupon !== null && coupon !== void 0 && coupon.percentage)) {
+    return coupon.offAmount;
+  }
+  return null;
+};
+var formatCartCount = function formatCartCount(cartQuantity) {
+  return cartQuantity + " " + (cartQuantity === 1 ? 'quantity' : 'quantities') + " added in the cart";
+};
+var formatRemainingQuantity = function formatRemainingQuantity(remaining) {
+  return remaining + " more " + (remaining === 1 ? 'quantity' : 'quantities');
+};
+var isBuyXGetFreeProduct = function isBuyXGetFreeProduct(coupon) {
+  var _coupon$freeProducts;
+  return (coupon === null || coupon === void 0 ? void 0 : coupon.discountType) === 'BuyXGetFreeProduct' || (coupon === null || coupon === void 0 ? void 0 : (_coupon$freeProducts = coupon.freeProducts) === null || _coupon$freeProducts === void 0 ? void 0 : _coupon$freeProducts.length) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0;
+};
+var getBuyXGetFreeProductOffPercent = function getBuyXGetFreeProductOffPercent(coupon) {
+  var pct = Number(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage);
+  if (Number.isFinite(pct) && pct > 0) return pct;
+  return 100;
+};
+var isFullyFreeBuyXOffer = function isFullyFreeBuyXOffer(coupon) {
+  return getBuyXGetFreeProductOffPercent(coupon) >= 100;
+};
+var getBuyXGetFreeProductOfferLabel = function getBuyXGetFreeProductOfferLabel(coupon) {
+  var offPercent = getBuyXGetFreeProductOffPercent(coupon);
+  if (offPercent >= 100) return 'free';
+  return offPercent + "% off on these products";
+};
+var getFreeProductHref = function getFreeProductHref(product) {
+  return "/product-details/" + paramCase((product === null || product === void 0 ? void 0 : product.productAlias) || (product === null || product === void 0 ? void 0 : product.productName) || '') + "?id=" + (product === null || product === void 0 ? void 0 : product.productId);
+};
+var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quantityToBuy, quantityToGet, cartQuantity, offPercentage) {
+  if (offPercentage === void 0) {
+    offPercentage = 100;
+  }
+  var isFullyFree = offPercentage >= 100;
+  var buyTimes = quantityToBuy + " " + (quantityToBuy === 1 ? 'time' : 'times');
+  var benefitSummary = isFullyFree ? "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') : "Buy this product " + buyTimes + ", get " + offPercentage + "% off on these products";
+  var lines = [benefitSummary];
+  if (cartQuantity <= 0) {
+    return lines;
+  }
+  if (cartQuantity < quantityToBuy) {
+    var remaining = quantityToBuy - cartQuantity;
+    lines.push(formatCartCount(cartQuantity));
+    lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
+  } else {
+    lines.push(isFullyFree ? formatCartCount(cartQuantity) + " \xB7 Apply this coupon to claim your free product" : formatCartCount(cartQuantity) + " \xB7 Apply this coupon to claim " + offPercentage + "% off on these products");
+  }
+  return lines;
+};
+var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityToGet, cartQuantity) {
+  var totalNeeded = quantityToBuy + quantityToGet;
+  var lines = ["Buy " + quantityToBuy + ", get " + quantityToGet + " for free"];
+  if (cartQuantity <= 0) {
+    return lines;
+  }
+  if (cartQuantity < quantityToBuy) {
+    var remaining = quantityToBuy - cartQuantity;
+    lines.push(formatCartCount(cartQuantity));
+    lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
+  } else if (cartQuantity < totalNeeded) {
+    var _remaining = totalNeeded - cartQuantity;
+    lines.push(formatCartCount(cartQuantity));
+    lines.push("Add " + formatRemainingQuantity(_remaining) + " to apply this coupon");
+  } else {
+    var freeLabel = quantityToGet === 1 ? 'item' : 'items';
+    lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + quantityToGet + " " + freeLabel + " for free");
+  }
+  return lines;
+};
+var getCouponTypeIcon = function getCouponTypeIcon(coupon) {
+  if (isBuyXGetFreeProduct(coupon)) {
+    return isFullyFreeBuyXOffer(coupon) ? FiGift : FiPercent;
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return FiLayers;
+  if (coupon !== null && coupon !== void 0 && coupon.offPercentage) return FiPercent;
+  return FiTag;
+};
+var getDetailMeta = function getDetailMeta(line) {
+  if (line.includes('added in the cart') && line.includes('Apply')) {
+    return {
+      icon: HiSparkles,
+      tone: 'success'
+    };
+  }
+  if (line.includes('added in the cart')) {
+    return {
+      icon: FiShoppingCart,
+      tone: 'info'
+    };
+  }
+  if (line.startsWith('Add ')) {
+    return {
+      icon: FiPlusCircle,
+      tone: 'warning'
+    };
+  }
+  if (line.includes('Apply') || line.includes('claim')) {
+    return {
+      icon: HiSparkles,
+      tone: 'success'
+    };
+  }
+  return {
+    icon: FiTag,
+    tone: 'info'
+  };
+};
+var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+    _ref$productPrice = _ref.productPrice,
+    productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
+    _ref$cartQuantity = _ref.cartQuantity,
+    cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
+  if (isBuyXGetFreeProduct(coupon)) {
+    return getBuyXGetFreeProductMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity, getBuyXGetFreeProductOffPercent(coupon));
+  }
+  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
+  if (hasBuyXGetY) {
+    return getBuyXGetYMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity);
+  }
+  var unitSaving = getUnitSaving(coupon, productPrice);
+  if (!unitSaving) return null;
+  var lines = [];
+  if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
+    lines.push(coupon.offPercentage + "% off \xB7 Save $" + formatCurrency(unitSaving) + " per item");
+  } else {
+    lines.push("Save $" + formatCurrency(unitSaving) + " per item");
+  }
+  if (cartQuantity > 0) {
+    var totalSaving = unitSaving * cartQuantity;
+    lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get $" + formatCurrency(totalSaving) + " off");
+  }
+  return lines;
+};
+var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp2) {
+  var _ref2 = _temp2 === void 0 ? {} : _temp2,
+    _ref2$productPrice = _ref2.productPrice,
+    productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
+    _ref2$cartQuantity = _ref2.cartQuantity,
+    cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
+  if (!coupon) return null;
+  if (isBuyXGetFreeProduct(coupon)) {
+    var _quantityToBuy = coupon.quantityToBuy || 1;
+    var quantityToGet = coupon.quantityToGet || 1;
+    var buyTimes = _quantityToBuy + " " + (_quantityToBuy === 1 ? 'time' : 'times');
+    var offPercent = getBuyXGetFreeProductOffPercent(coupon);
+    if (offPercent >= 100) {
+      return "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
+    }
+    return "Buy this product " + buyTimes + ", get " + offPercent + "% off on some products. Click View All offers to know more";
+  }
+  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
+  if (hasBuyXGetY) {
+    var _getCouponBenefit;
+    return ((_getCouponBenefit = getCouponBenefit(coupon, {
+      productPrice: productPrice,
+      cartQuantity: cartQuantity
+    })) === null || _getCouponBenefit === void 0 ? void 0 : _getCouponBenefit[0]) || null;
+  }
+  var unitSaving = getUnitSaving(coupon, productPrice);
+  var quantityToBuy = coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy;
+  var hasBuyQuantityRequirement = quantityToBuy > 0 && !((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0);
+  if (hasBuyQuantityRequirement && coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
+    var qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
+    return "Buy " + quantityToBuy + " " + qtyLabel + ", get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
+  }
+  if (hasBuyQuantityRequirement && unitSaving) {
+    var _qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
+    return "Buy " + quantityToBuy + " " + _qtyLabel + ", save $" + formatCurrency(unitSaving) + " per item";
+  }
+  if (coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
+    return "get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
+  }
+  if (unitSaving) {
+    return "save $" + formatCurrency(unitSaving) + " per item";
+  }
+  return null;
+};
+var getSavingsBadge = function getSavingsBadge(coupon, productPrice) {
+  if (isBuyXGetFreeProduct(coupon)) {
+    if (!isFullyFreeBuyXOffer(coupon)) {
+      return {
+        variant: 'percent',
+        top: getBuyXGetFreeProductOffPercent(coupon) + "%",
+        bottom: 'OFF'
+      };
+    }
+    var qty = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) || 1;
+    return {
+      variant: 'gift',
+      top: qty > 1 ? qty + "\xD7" : 'FREE',
+      bottom: 'GIFT'
+    };
+  }
+  if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) {
+    return {
+      variant: 'bogo',
+      top: "+" + coupon.quantityToGet,
+      bottom: 'FREE'
+    };
+  }
+  if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
+    return {
+      variant: 'percent',
+      top: coupon.offPercentage + "%",
+      bottom: 'OFF'
+    };
+  }
+  var unitSaving = getUnitSaving(coupon, productPrice);
+  if (unitSaving) {
+    return {
+      variant: 'amount',
+      top: "$" + formatCurrency(unitSaving),
+      bottom: 'SAVE'
+    };
+  }
+  return {
+    variant: 'deal',
+    top: 'SAVE',
+    bottom: 'NOW'
+  };
+};
+var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
+  if (isBuyXGetFreeProduct(coupon)) {
+    var _target = coupon.quantityToBuy || 0;
+    if (!_target) return null;
+    var _current = Math.min(cartQuantity, _target);
+    var _percent = Math.min(100, _current / _target * 100);
+    var _remaining2 = Math.max(0, _target - cartQuantity);
+    var qualified = cartQuantity >= _target;
+    var offerLabel = getBuyXGetFreeProductOfferLabel(coupon);
+    var unlockLabel = isFullyFreeBuyXOffer(coupon) ? 'your FREE gift' : offerLabel;
+    return {
+      type: 'quantity',
+      current: _current,
+      target: _target,
+      percent: _percent,
+      qualified: qualified,
+      unitLabel: _target === 1 ? 'Item' : 'Items',
+      message: qualified ? "You're eligible — apply your code at checkout!" : _remaining2 === 1 ? "Only 1 more item to unlock " + unlockLabel + "!" : "Only " + _remaining2 + " more items to unlock " + unlockLabel + "!"
+    };
+  }
+  var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
+  if (!hasBuyXGetY) return null;
+  var quantityToBuy = coupon.quantityToBuy,
+    quantityToGet = coupon.quantityToGet;
+  var totalNeeded = quantityToBuy + quantityToGet;
+  if (cartQuantity >= totalNeeded) {
+    return {
+      type: 'buyxgety',
+      qualified: true,
+      quantityToBuy: quantityToBuy,
+      quantityToGet: quantityToGet,
+      message: "You're eligible — apply your code at checkout!"
+    };
+  }
+  if (cartQuantity >= quantityToBuy) {
+    var _current2 = cartQuantity;
+    var _target2 = totalNeeded;
+    var _percent2 = Math.min(100, _current2 / _target2 * 100);
+    var _remaining3 = totalNeeded - cartQuantity;
+    return {
+      type: 'quantity',
+      current: _current2,
+      target: _target2,
+      percent: _percent2,
+      qualified: false,
+      unitLabel: _target2 === 1 ? 'Item' : 'Items',
+      message: _remaining3 === 1 ? 'Only 1 more item to apply this coupon' : "Only " + _remaining3 + " more items to apply this coupon",
+      showTimeline: true,
+      quantityToBuy: quantityToBuy,
+      quantityToGet: quantityToGet
+    };
+  }
+  var current = Math.min(cartQuantity, quantityToBuy);
+  var target = quantityToBuy;
+  var percent = Math.min(100, current / target * 100);
+  var remaining = quantityToBuy - cartQuantity;
+  return {
+    type: 'quantity',
+    current: current,
+    target: target,
+    percent: percent,
+    qualified: false,
+    unitLabel: target === 1 ? 'Item' : 'Items',
+    message: remaining === 1 ? 'Only 1 more item to qualify' : "Only " + remaining + " more items to qualify",
+    showTimeline: true,
+    quantityToBuy: quantityToBuy,
+    quantityToGet: quantityToGet
+  };
+};
+var isProgressDetailLine = function isProgressDetailLine(line) {
+  return line === null || line === void 0 ? void 0 : line.startsWith('Add ');
+};
+var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
+  var open = _ref3.open,
+    onClose = _ref3.onClose,
+    productName = _ref3.productName,
+    _ref3$productDiscount = _ref3.productDiscounts,
+    productDiscounts = _ref3$productDiscount === void 0 ? [] : _ref3$productDiscount,
+    primaryColor = _ref3.primaryColor,
+    _ref3$cartQuantity = _ref3.cartQuantity,
+    cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity,
+    _ref3$productPrice = _ref3.productPrice,
+    productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice;
+  var _useState = useState(null),
+    copiedCode = _useState[0],
+    setCopiedCode = _useState[1];
+  var accentColor = primaryColor || DEFAULT_PRIMARY_COLOR$1;
+  var copyCouponCode = useCallback(function (code) {
+    try {
+      if (!code) return Promise.resolve();
+      var _temp3 = _catch(function () {
+        var _navigator, _navigator$clipboard;
+        return Promise.resolve((_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(code)).then(function () {
+          var _window;
+          setCopiedCode(code);
+          (_window = window) === null || _window === void 0 ? void 0 : _window.setTimeout(function () {
+            return setCopiedCode(null);
+          }, 1800);
+        });
+      }, function (error) {
+        console.error('Failed to copy coupon code', error);
+      });
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, []);
+  useEffect(function () {
+    if (!open) return;
+    var scrollLocks = [];
+    var lockElement = function lockElement(el) {
+      if (!el) return;
+      scrollLocks.push({
+        el: el,
+        overflow: el.style.overflow,
+        overscrollBehavior: el.style.overscrollBehavior
+      });
+      el.style.overflow = 'hidden';
+      el.style.overscrollBehavior = 'none';
+    };
+    lockElement(document.body);
+    lockElement(document.documentElement);
+    document.querySelectorAll('.scrollDiv, .MuiTableContainer-root').forEach(lockElement);
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      scrollLocks.forEach(function (_ref4) {
+        var el = _ref4.el,
+          overflow = _ref4.overflow,
+          overscrollBehavior = _ref4.overscrollBehavior;
+        el.style.overflow = overflow;
+        el.style.overscrollBehavior = overscrollBehavior;
+      });
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return createPortal(/*#__PURE__*/React__default.createElement(Overlay, {
+    onClick: onClose,
+    role: "presentation"
+  }, /*#__PURE__*/React__default.createElement(Panel, {
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "discount-suggestions-title",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(DialogHeader, null, /*#__PURE__*/React__default.createElement(DialogTitle, {
+    id: "discount-suggestions-title"
+  }, "Available Offers"), /*#__PURE__*/React__default.createElement(CloseButton, {
+    type: "button",
+    "aria-label": "close",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(MdClose, null))), /*#__PURE__*/React__default.createElement(ScrollableBody, null, !(productDiscounts !== null && productDiscounts !== void 0 && productDiscounts.length) ? /*#__PURE__*/React__default.createElement(EmptyState$1, null, "No product offers available.") : /*#__PURE__*/React__default.createElement(SavingsCenter, {
+    $accentColor: accentColor,
+    role: "region",
+    "aria-label": "Available offers and savings"
+  }, /*#__PURE__*/React__default.createElement(AmbientGlow, {
+    $accentColor: accentColor,
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default.createElement(Sparkle, {
+    $accentColor: accentColor,
+    $top: "12%",
+    $left: "6%",
+    $delay: "0s",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default.createElement(Sparkle, {
+    $accentColor: accentColor,
+    $top: "28%",
+    $left: "88%",
+    $delay: "1.2s",
+    $size: "sm",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default.createElement(Sparkle, {
+    $accentColor: accentColor,
+    $top: "72%",
+    $left: "4%",
+    $delay: "2.1s",
+    $size: "sm",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React__default.createElement(SectionHeader, {
+    $accentColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(HeaderIconWrap, {
+    $accentColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(MdLocalOffer, null)), /*#__PURE__*/React__default.createElement(HeaderCopy, null, /*#__PURE__*/React__default.createElement(Eyebrow, {
+    $accentColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(FiZap, null), "Savings Center"), /*#__PURE__*/React__default.createElement(SectionHeading, null, productName || 'Available Offers')), /*#__PURE__*/React__default.createElement(OfferCountBadge, {
+    $accentColor: accentColor
+  }, /*#__PURE__*/React__default.createElement(HiSparkles, null), /*#__PURE__*/React__default.createElement("strong", null, productDiscounts.length), /*#__PURE__*/React__default.createElement("span", null, productDiscounts.length === 1 ? 'Offer' : 'Offers'))), /*#__PURE__*/React__default.createElement(OfferStack, null, productDiscounts.map(function (coupon, index) {
+    var _coupon$discountId;
+    var benefit = getCouponBenefit(coupon, {
+      productPrice: productPrice,
+      cartQuantity: cartQuantity
+    });
+    var benefitSummary = (benefit === null || benefit === void 0 ? void 0 : benefit[0]) || null;
+    var benefitDetails = (benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [];
+    var statusDetails = benefitDetails.filter(function (line) {
+      return !isProgressDetailLine(line);
+    });
+    var hasSuccessStatus = statusDetails.some(function (line) {
+      var _getDetailMeta = getDetailMeta(line),
+        tone = _getDetailMeta.tone;
+      return tone === 'success';
+    });
+    var freeProducts = isBuyXGetFreeProduct(coupon) ? (coupon === null || coupon === void 0 ? void 0 : coupon.freeProducts) || [] : [];
+    var isFullyFreeOffer = isBuyXGetFreeProduct(coupon) ? isFullyFreeBuyXOffer(coupon) : false;
+    var TypeIcon = getCouponTypeIcon(coupon);
+    var isCopied = copiedCode === (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
+    var savingsBadge = getSavingsBadge(coupon, productPrice);
+    var progressInfo = getProgressInfo(coupon, cartQuantity);
+    var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
+    var showTimeline = hasBuyXGetY && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety');
+    return /*#__PURE__*/React__default.createElement(OfferCard, {
+      key: (_coupon$discountId = coupon === null || coupon === void 0 ? void 0 : coupon.discountId) != null ? _coupon$discountId : coupon === null || coupon === void 0 ? void 0 : coupon.couponCode,
+      $accentColor: accentColor,
+      $index: index
+    }, /*#__PURE__*/React__default.createElement(CardBody, null, /*#__PURE__*/React__default.createElement(CardHeader, null, /*#__PURE__*/React__default.createElement(SavingsBadge, {
+      $accentColor: accentColor,
+      $variant: savingsBadge.variant
+    }, /*#__PURE__*/React__default.createElement(BadgeTop, null, savingsBadge.top), /*#__PURE__*/React__default.createElement(BadgeBottom, null, savingsBadge.bottom)), /*#__PURE__*/React__default.createElement(CardHeaderCopy, null, /*#__PURE__*/React__default.createElement(CardMetaRow, null, /*#__PURE__*/React__default.createElement(TypePill, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(TypeIcon, null), /*#__PURE__*/React__default.createElement("span", null, isBuyXGetFreeProduct(coupon) ? isFullyFreeOffer ? 'Free Gift' : getBuyXGetFreeProductOffPercent(coupon) + "% Off" : hasBuyXGetY ? 'Buy & Get' : coupon !== null && coupon !== void 0 && coupon.offPercentage ? 'Percent Off' : 'Instant Save')), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && /*#__PURE__*/React__default.createElement(QualifiedPill, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(HiSparkles, null), "Ready")), /*#__PURE__*/React__default.createElement(TitleRow, null, /*#__PURE__*/React__default.createElement(OfferTitle, {
+      title: coupon === null || coupon === void 0 ? void 0 : coupon.discountName
+    }, coupon === null || coupon === void 0 ? void 0 : coupon.discountName), /*#__PURE__*/React__default.createElement(CodeRow, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(CodeValue, {
+      $accentColor: accentColor,
+      "aria-label": "Coupon code " + (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode)
+    }, coupon === null || coupon === void 0 ? void 0 : coupon.couponCode), /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: isCopied ? 'Copied!' : 'Copy code',
+      arrow: true,
+      placement: "top"
+    }, /*#__PURE__*/React__default.createElement(PrimaryCopyButton, {
+      type: "button",
+      $accentColor: accentColor,
+      $copied: isCopied,
+      "aria-label": "Copy coupon code " + (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode),
+      onClick: function onClick() {
+        return copyCouponCode(coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
+      }
+    }, isCopied ? /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+      }
+    }, /*#__PURE__*/React__default.createElement(FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+      }
+    }, /*#__PURE__*/React__default.createElement(FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Buy ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(TimelineArrow, {
+      $accentColor: accentColor
+    })), /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
+      $accentColor: accentColor,
+      $highlight: true
+    }, /*#__PURE__*/React__default.createElement(FiGift, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Get ", coupon.quantityToGet, " FREE"))), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'quantity' && !progressInfo.qualified && /*#__PURE__*/React__default.createElement(ProgressBlock, null, /*#__PURE__*/React__default.createElement(ProgressTrack, {
+      $accentColor: accentColor,
+      role: "progressbar",
+      "aria-valuenow": progressInfo.current,
+      "aria-valuemin": 0,
+      "aria-valuemax": progressInfo.target,
+      "aria-label": progressInfo.current + " of " + progressInfo.target + " items toward eligibility"
+    }, /*#__PURE__*/React__default.createElement(ProgressFill, {
+      $accentColor: accentColor,
+      $percent: progressInfo.percent
+    })), /*#__PURE__*/React__default.createElement(ProgressMeta, null, /*#__PURE__*/React__default.createElement(ProgressCount, null, /*#__PURE__*/React__default.createElement("strong", null, progressInfo.current), /*#__PURE__*/React__default.createElement("span", null, "/ ", progressInfo.target, ' ', progressInfo.unitLabel)), /*#__PURE__*/React__default.createElement(ProgressHint, null, progressInfo.message))), (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.qualified) && (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.message) && !hasSuccessStatus && /*#__PURE__*/React__default.createElement(SuccessBanner, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(HiSparkles, null), /*#__PURE__*/React__default.createElement("span", null, progressInfo.message)), statusDetails.length > 0 && /*#__PURE__*/React__default.createElement(StatusList, null, statusDetails.map(function (line, detailIndex) {
+      var _getDetailMeta2 = getDetailMeta(line),
+        DetailIcon = _getDetailMeta2.icon,
+        tone = _getDetailMeta2.tone;
+      return /*#__PURE__*/React__default.createElement(StatusItem, {
+        key: (coupon === null || coupon === void 0 ? void 0 : coupon.discountId) + "-" + detailIndex,
+        $accentColor: accentColor,
+        $tone: tone,
+        $chipIndex: detailIndex
+      }, /*#__PURE__*/React__default.createElement(DetailIcon, null), /*#__PURE__*/React__default.createElement("span", null, line));
+    })), freeProducts.length > 0 && /*#__PURE__*/React__default.createElement(GiftSection, null, isFullyFreeOffer && /*#__PURE__*/React__default.createElement(GiftSectionHeader, {
+      $accentColor: accentColor
+    }, /*#__PURE__*/React__default.createElement(FiGift, null), /*#__PURE__*/React__default.createElement("span", null, "Free gift options")), /*#__PURE__*/React__default.createElement(GiftList, null, freeProducts.map(function (product) {
+      var _product$productName;
+      return /*#__PURE__*/React__default.createElement(GiftLink, {
+        key: product === null || product === void 0 ? void 0 : product.productId,
+        href: getFreeProductHref(product),
+        $accentColor: accentColor
+      }, /*#__PURE__*/React__default.createElement("span", null, product === null || product === void 0 ? void 0 : (_product$productName = product.productName) === null || _product$productName === void 0 ? void 0 : _product$productName.trim()), /*#__PURE__*/React__default.createElement(FiArrowRight, null));
+    })))));
+  })))))), document.body);
+};
+var fadeSlideUp = keyframes(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  from {\n    opacity: 0;\n    transform: translateY(14px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var shimmer = keyframes(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n  0% {\n    background-position: -120% 0;\n  }\n  100% {\n    background-position: 220% 0;\n  }\n"])));
+var copyPop = keyframes(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  0% {\n    transform: scale(1);\n  }\n  45% {\n    transform: scale(1.06);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
+var chipIn = keyframes(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var progressGrow = keyframes(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  from {\n    width: 0;\n  }\n"])));
+var sparkleFloat = keyframes(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  0%, 100% {\n    opacity: 0.15;\n    transform: translateY(0) scale(1);\n  }\n  50% {\n    opacity: 0.55;\n    transform: translateY(-6px) scale(1.15);\n  }\n"])));
+var reducedMotion = css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  @media (prefers-reduced-motion: reduce) {\n    animation: none !important;\n    transition: none !important;\n  }\n"])));
+var Overlay = styled.div(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  inset: 0;\n  z-index: 1500;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem;\n  background-color: rgba(0, 0, 0, 0.1);\n"])));
+var Panel = styled.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 640px;\n  max-height: 85vh;\n  background: #fff;\n  border-radius: 0.75rem;\n  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),\n    0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);\n  overflow: hidden;\n"])));
+var DialogHeader = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 0 0 auto;\n  padding: 1rem 3rem 1rem 1rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n"])));
+var DialogTitle = styled.h2(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-size: 1.15rem;\n  font-weight: 800;\n  color: #12180d;\n  line-height: 1.3;\n  letter-spacing: -0.02em;\n"])));
+var CloseButton = styled.button(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n\n  svg {\n    font-size: 1.25rem;\n  }\n\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.04);\n  }\n\n  &:focus-visible {\n    outline: 2px solid #437c0f;\n    outline-offset: 1px;\n  }\n"])));
+var ScrollableBody = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n  padding: 0.85rem;\n"])));
+var EmptyState$1 = styled.p(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n  font-size: 0.9rem;\n  font-weight: 600;\n  color: #5a6354;\n"])));
+var SavingsCenter = styled.section(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  --accent: ", ";\n  position: relative;\n  width: 100%;\n  border-radius: 0.85rem;\n  border: 1px solid ", ";\n  background: linear-gradient(165deg, #ffffff 0%, #fafcf7 45%, #f6f9f2 100%);\n  overflow: hidden;\n  box-shadow: 0 1px 2px rgba(16, 22, 10, 0.04),\n    0 8px 24px ", ";\n  animation: ", " 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',\n    'Inter', Roboto, sans-serif;\n  ", "\n"])), function (_ref5) {
+  var $accentColor = _ref5.$accentColor;
+  return $accentColor;
+}, function (_ref6) {
+  var $accentColor = _ref6.$accentColor;
+  return $accentColor + "20";
+}, function (_ref7) {
+  var $accentColor = _ref7.$accentColor;
+  return $accentColor + "10";
+}, fadeSlideUp, reducedMotion);
+var AmbientGlow = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -40%;\n  right: -15%;\n  width: 55%;\n  height: 80%;\n  background: radial-gradient(\n    circle,\n    ", " 0%,\n    transparent 70%\n  );\n  pointer-events: none;\n"])), function (_ref8) {
+  var $accentColor = _ref8.$accentColor;
+  return $accentColor + "18";
+});
+var Sparkle = styled.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 50%;\n  background: ", ";\n  box-shadow: 0 0 12px ", ";\n  animation: ", " 4s ease-in-out infinite;\n  animation-delay: ", ";\n  pointer-events: none;\n  opacity: 0.3;\n\n  ", "\n"])), function (_ref9) {
+  var $top = _ref9.$top;
+  return $top;
+}, function (_ref10) {
+  var $left = _ref10.$left;
+  return $left;
+}, function (_ref11) {
+  var $size = _ref11.$size;
+  return $size === 'sm' ? '4px' : '6px';
+}, function (_ref12) {
+  var $size = _ref12.$size;
+  return $size === 'sm' ? '4px' : '6px';
+}, function (_ref13) {
+  var $accentColor = _ref13.$accentColor;
+  return $accentColor;
+}, function (_ref14) {
+  var $accentColor = _ref14.$accentColor;
+  return $accentColor + "80";
+}, sparkleFloat, function (_ref15) {
+  var $delay = _ref15.$delay;
+  return $delay;
+}, reducedMotion);
+var SectionHeader = styled.header(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  padding: 0.65rem 0.8rem;\n  background: linear-gradient(\n    135deg,\n    ", " 0%,\n    ", " 55%,\n    transparent 100%\n  );\n  border-bottom: 1px solid ", ";\n  position: relative;\n  overflow: hidden;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      105deg,\n      transparent 38%,\n      rgba(255, 255, 255, 0.45) 50%,\n      transparent 62%\n    );\n    background-size: 200% 100%;\n    animation: ", " 6s ease-in-out infinite;\n    pointer-events: none;\n  }\n\n  ", "\n"])), function (_ref16) {
+  var $accentColor = _ref16.$accentColor;
+  return $accentColor + "16";
+}, function (_ref17) {
+  var $accentColor = _ref17.$accentColor;
+  return $accentColor + "05";
+}, function (_ref18) {
+  var $accentColor = _ref18.$accentColor;
+  return $accentColor + "12";
+}, shimmer, reducedMotion);
+var HeaderIconWrap = styled.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  --icon-shadow: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  border-radius: 0.55rem;\n  flex-shrink: 0;\n  color: #fff;\n  background: linear-gradient(\n    145deg,\n    ", " 0%,\n    ", " 100%\n  );\n  box-shadow: 0 4px 12px var(--icon-shadow);\n  z-index: 1;\n\n  svg {\n    font-size: 1.05rem;\n  }\n"])), function (_ref19) {
+  var $accentColor = _ref19.$accentColor;
+  return $accentColor + "40";
+}, function (_ref20) {
+  var $accentColor = _ref20.$accentColor;
+  return $accentColor;
+}, function (_ref21) {
+  var $accentColor = _ref21.$accentColor;
+  return $accentColor + "cc";
+});
+var HeaderCopy = styled.div(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  z-index: 1;\n"])));
+var Eyebrow = styled.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;
+});
+var SectionHeading = styled.h3(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n  margin: 0.1rem 0 0;\n  font-size: 0.95rem;\n  font-weight: 800;\n  letter-spacing: -0.02em;\n  color: #12180d;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var OfferCountBadge = styled.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.28rem;\n  padding: 0.28rem 0.55rem;\n  border-radius: 999px;\n  background: rgba(18, 24, 13, 0.92);\n  color: #f8fff0;\n  font-size: 0.65rem;\n  font-weight: 600;\n  z-index: 1;\n\n  strong {\n    font-size: 0.82rem;\n    font-weight: 800;\n    line-height: 1;\n  }\n\n  svg {\n    font-size: 0.72rem;\n    color: ", ";\n  }\n"])), function (_ref23) {
+  var $accentColor = _ref23.$accentColor;
+  return $accentColor;
+});
+var OfferStack = styled.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.55rem;\n"])));
+var OfferCard = styled.article(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.7rem;\n  border: 1px solid ", ";\n  background: #fff;\n  box-shadow: 0 1px 4px rgba(16, 20, 12, 0.04);\n  opacity: 0;\n  animation: ", " 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  animation-delay: ", "s;\n  transition: box-shadow 0.2s ease, border-color 0.2s ease;\n  overflow: hidden;\n\n  &:hover {\n    border-color: ", ";\n    box-shadow: 0 4px 14px ", ";\n  }\n\n  &:focus-within {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref24) {
+  var $accentColor = _ref24.$accentColor;
+  return $accentColor + "20";
+}, fadeSlideUp, function (_ref25) {
+  var $index = _ref25.$index;
+  return 0.06 + $index * 0.04;
+}, function (_ref26) {
+  var $accentColor = _ref26.$accentColor;
+  return $accentColor + "45";
+}, function (_ref27) {
+  var $accentColor = _ref27.$accentColor;
+  return $accentColor + "12";
+}, function (_ref28) {
+  var $accentColor = _ref28.$accentColor;
+  return $accentColor + "50";
+}, reducedMotion);
+var CardBody = styled.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.35rem;\n  padding: 0.6rem 0.65rem;\n"])));
+var CardHeader = styled.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.55rem;\n"])));
+var CardHeaderCopy = styled.div(_templateObject28$1 || (_templateObject28$1 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n"])));
+var SavingsBadge = styled.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-width: 3.1rem;\n  padding: 0.3rem 0.35rem;\n  border-radius: 0.5rem;\n  flex-shrink: 0;\n  text-align: center;\n  color: #fff;\n  line-height: 1;\n  background: ", ";\n  box-shadow: 0 3px 10px ", ";\n"])), function (_ref29) {
+  var $accentColor = _ref29.$accentColor,
+    $variant = _ref29.$variant;
+  if ($variant === 'gift') {
+    return "linear-gradient(145deg, #e8a317 0%, #c47d0a 100%)";
+  }
+  if ($variant === 'bogo') {
+    return "linear-gradient(145deg, " + $accentColor + " 0%, #2d5f0a 100%)";
+  }
+  return "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "cc 100%)";
+}, function (_ref30) {
+  var $accentColor = _ref30.$accentColor;
+  return $accentColor + "28";
+});
+var BadgeTop = styled.span(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.82rem;\n  font-weight: 900;\n  letter-spacing: -0.02em;\n"])));
+var BadgeBottom = styled.span(_templateObject31$1 || (_templateObject31$1 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.1rem;\n  font-size: 0.52rem;\n  font-weight: 800;\n  letter-spacing: 0.08em;\n  opacity: 0.92;\n"])));
+var CardMetaRow = styled.div(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.28rem;\n"])));
+var TypePill = styled.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.22rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.65rem;\n  }\n"])), function (_ref31) {
+  var $accentColor = _ref31.$accentColor;
+  return $accentColor;
+}, function (_ref32) {
+  var $accentColor = _ref32.$accentColor;
+  return $accentColor + "10";
+}, function (_ref33) {
+  var $accentColor = _ref33.$accentColor;
+  return $accentColor + "22";
+});
+var QualifiedPill = styled.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.2rem;\n  padding: 0.12rem 0.4rem;\n  border-radius: 999px;\n  font-size: 0.6rem;\n  font-weight: 700;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    font-size: 0.62rem;\n  }\n"])), function (_ref34) {
+  var $accentColor = _ref34.$accentColor;
+  return $accentColor;
+}, function (_ref35) {
+  var $accentColor = _ref35.$accentColor;
+  return $accentColor + "12";
+}, function (_ref36) {
+  var $accentColor = _ref36.$accentColor;
+  return $accentColor + "30";
+});
+var TitleRow = styled.div(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.45rem;\n  min-width: 0;\n  flex-wrap: wrap;\n"])));
+var OfferTitle = styled.h4(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  flex: 1;\n  min-width: 0;\n  font-size: 0.88rem;\n  font-weight: 800;\n  letter-spacing: -0.015em;\n  color: #141a10;\n  line-height: 1.25;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var OfferDescription = styled.p(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-size: 0.74rem;\n  font-weight: 500;\n  color: #4a5540;\n  line-height: 1.35;\n"])));
+var BuyXTimeline = styled.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  padding: 0.4rem 0.55rem;\n  border-radius: 0.5rem;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_ref37) {
+  var $accentColor = _ref37.$accentColor;
+  return $accentColor + "07";
+}, function (_ref38) {
+  var $accentColor = _ref38.$accentColor;
+  return $accentColor + "14";
+});
+var TimelineStep = styled.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  min-width: 0;\n"])));
+var TimelineIcon = styled.div(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.45rem;\n  height: 1.45rem;\n  border-radius: 0.35rem;\n  color: ", ";\n  background: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref39) {
+  var $accentColor = _ref39.$accentColor,
+    $highlight = _ref39.$highlight;
+  return $highlight ? '#fff' : $accentColor;
+}, function (_ref40) {
+  var $accentColor = _ref40.$accentColor,
+    $highlight = _ref40.$highlight;
+  return $highlight ? $accentColor : $accentColor + "14";
+});
+var TimelineLabel = styled.span(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n  font-size: 0.65rem;\n  font-weight: 700;\n  color: #3a4334;\n  white-space: nowrap;\n"])));
+var TimelineTrack = styled.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  min-width: 2rem;\n  padding: 0 0.15rem;\n"])));
+var TimelineArrow = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 2px;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", ",\n    ", "\n  );\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: -1px;\n    top: 50%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: ", ";\n  }\n"])), function (_ref41) {
+  var $accentColor = _ref41.$accentColor;
+  return $accentColor + "44";
+}, function (_ref42) {
+  var $accentColor = _ref42.$accentColor;
+  return $accentColor;
+}, function (_ref43) {
+  var $accentColor = _ref43.$accentColor;
+  return $accentColor;
+});
+var ProgressBlock = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n"])));
+var ProgressTrack = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 0.35rem;\n  border-radius: 999px;\n  background: #e8ede3;\n  overflow: hidden;\n"])));
+var ProgressFill = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: ", "%;\n  border-radius: 999px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  animation: ", " 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;\n  transition: width 0.4s ease;\n\n  ", "\n"])), function (_ref44) {
+  var $percent = _ref44.$percent;
+  return $percent;
+}, function (_ref45) {
+  var $accentColor = _ref45.$accentColor;
+  return $accentColor + "cc";
+}, function (_ref46) {
+  var $accentColor = _ref46.$accentColor;
+  return $accentColor;
+}, progressGrow, reducedMotion);
+var ProgressMeta = styled.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.2rem 0.5rem;\n"])));
+var ProgressCount = styled.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteralLoose(["\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: #2f3829;\n\n  strong {\n    font-size: 0.78rem;\n    font-weight: 800;\n  }\n\n  span {\n    color: #6a7364;\n  }\n"])));
+var ProgressHint = styled.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteralLoose(["\n  font-size: 0.68rem;\n  font-weight: 600;\n  color: #7a5e12;\n  line-height: 1.3;\n"])));
+var SuccessBanner = styled.div(_templateObject50 || (_templateObject50 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.32rem 0.5rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  color: ", ";\n  background: ", ";\n  border: 1px solid ", ";\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.75rem;\n  }\n"])), function (_ref47) {
+  var $accentColor = _ref47.$accentColor;
+  return $accentColor;
+}, function (_ref48) {
+  var $accentColor = _ref48.$accentColor;
+  return $accentColor + "10";
+}, function (_ref49) {
+  var $accentColor = _ref49.$accentColor;
+  return $accentColor + "25";
+});
+var StatusList = styled.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n"])));
+var StatusItem = styled.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  gap: 0.3rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.45rem;\n  font-size: 0.7rem;\n  font-weight: 600;\n  line-height: 1.35;\n  opacity: 0;\n  animation: ", " 0.28s ease forwards;\n  animation-delay: ", "s;\n\n  background-color: ", ";\n\n  color: ", ";\n\n  border: 1px solid\n    ", ";\n\n  svg {\n    flex-shrink: 0;\n    margin-top: 0.1rem;\n    font-size: 0.82rem;\n  }\n\n  ", "\n"])), chipIn, function (_ref50) {
+  var $chipIndex = _ref50.$chipIndex;
+  return 0.1 + $chipIndex * 0.05;
+}, function (_ref51) {
+  var $accentColor = _ref51.$accentColor,
+    $tone = _ref51.$tone;
+  if ($tone === 'warning') return '#fff8eb';
+  if ($tone === 'success') return $accentColor + "10";
+  return '#f4f6f1';
+}, function (_ref52) {
+  var $accentColor = _ref52.$accentColor,
+    $tone = _ref52.$tone;
+  if ($tone === 'warning') return '#8a6400';
+  if ($tone === 'success') return $accentColor;
+  return '#45503c';
+}, function (_ref53) {
+  var $accentColor = _ref53.$accentColor,
+    $tone = _ref53.$tone;
+  if ($tone === 'warning') return '#f0d48a';
+  if ($tone === 'success') return $accentColor + "28";
+  return '#e0e5da';
+}, reducedMotion);
+var GiftSection = styled.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteralLoose(["\n  padding-top: 0.35rem;\n  border-top: 1px solid #eef1e9;\n"])));
+var GiftSectionHeader = styled.div(_templateObject54 || (_templateObject54 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.28rem;\n  margin-bottom: 0.3rem;\n  font-size: 0.62rem;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: ", ";\n\n  svg {\n    font-size: 0.72rem;\n  }\n"])), function (_ref54) {
+  var $accentColor = _ref54.$accentColor;
+  return $accentColor;
+});
+var GiftList = styled.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.22rem;\n"])));
+var GiftLink = styled.a(_templateObject56 || (_templateObject56 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.35rem;\n  padding: 0.32rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1px solid ", ";\n  background: #fafcf8;\n  color: #2a3325;\n  font-size: 0.72rem;\n  font-weight: 600;\n  line-height: 1.3;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color 0.18s ease, border-color 0.18s ease;\n\n  span {\n    flex: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  svg {\n    flex-shrink: 0;\n    font-size: 0.72rem;\n    color: ", ";\n    transition: transform 0.18s ease;\n  }\n\n  &:hover {\n    border-color: ", ";\n    background: ", ";\n\n    svg {\n      transform: translateX(2px);\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n\n  ", "\n"])), function (_ref55) {
+  var $accentColor = _ref55.$accentColor;
+  return $accentColor + "1e";
+}, function (_ref56) {
+  var $accentColor = _ref56.$accentColor;
+  return $accentColor;
+}, function (_ref57) {
+  var $accentColor = _ref57.$accentColor;
+  return $accentColor;
+}, function (_ref58) {
+  var $accentColor = _ref58.$accentColor;
+  return $accentColor + "08";
+}, function (_ref59) {
+  var $accentColor = _ref59.$accentColor;
+  return $accentColor;
+}, reducedMotion);
+var CodeRow = styled.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 0.3rem;\n  flex-shrink: 0;\n"])));
+var CodeValue = styled.code(_templateObject58 || (_templateObject58 = _taggedTemplateLiteralLoose(["\n  min-width: 0;\n  max-width: 8.5rem;\n  padding: 0.28rem 0.45rem;\n  border-radius: 0.4rem;\n  border: 1.5px dashed ", ";\n  background: #fff;\n  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;\n  font-size: 0.68rem;\n  font-weight: 800;\n  letter-spacing: 0.04em;\n  color: #141a10;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (_ref60) {
+  var $accentColor = _ref60.$accentColor;
+  return $accentColor;
+});
+var PrimaryCopyButton = styled.button(_templateObject59 || (_templateObject59 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.22rem;\n  flex-shrink: 0;\n  height: 1.7rem;\n  padding: 0 0.55rem;\n  border: none;\n  border-radius: 0.4rem;\n  font-size: 0.68rem;\n  font-weight: 800;\n  color: #fff;\n  cursor: pointer;\n  background: ", ";\n  box-shadow: 0 2px 8px ", ";\n  transition: transform 0.15s ease, background 0.2s ease;\n  animation: ", " 0.35s ease;\n\n  svg {\n    font-size: 0.72rem;\n  }\n\n  &:hover {\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: scale(0.98);\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref61) {
+  var $accentColor = _ref61.$accentColor,
+    $copied = _ref61.$copied;
+  return $copied ? "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "dd 100%)" : 'linear-gradient(145deg, #1a2114 0%, #0f140c 100%)';
+}, function (_ref62) {
+  var $accentColor = _ref62.$accentColor;
+  return $accentColor + "28";
+}, function (_ref63) {
+  var $copied = _ref63.$copied;
+  return $copied ? copyPop : 'none';
+}, function (_ref64) {
+  var $accentColor = _ref64.$accentColor;
+  return $accentColor;
+}, reducedMotion);
+
+var _templateObject$w, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8;
+var DEFAULT_PRIMARY_COLOR$2 = '#437C0F';
+var DiscountSuggestionPreview = function DiscountSuggestionPreview(_ref) {
+  var coupon = _ref.coupon,
+    _ref$productPrice = _ref.productPrice,
+    productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
+    _ref$cartQuantity = _ref.cartQuantity,
+    cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity,
+    primaryColor = _ref.primaryColor,
+    loading = _ref.loading,
+    onViewOffers = _ref.onViewOffers,
+    _ref$viewOffersLabel = _ref.viewOffersLabel,
+    viewOffersLabel = _ref$viewOffersLabel === void 0 ? 'View All offers' : _ref$viewOffersLabel;
+  var _useState = useState(false),
+    copied = _useState[0],
+    setCopied = _useState[1];
+  var accentColor = primaryColor || DEFAULT_PRIMARY_COLOR$2;
+  var previewText = getSuggestionPreviewText(coupon, {
+    productPrice: productPrice,
+    cartQuantity: cartQuantity
+  });
+  var code = coupon === null || coupon === void 0 ? void 0 : coupon.couponCode;
+  var copyCouponCode = useCallback(function (event) {
+    try {
+      var _event$stopPropagatio;
+      event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
+      if (!code) return Promise.resolve();
+      var _temp = _catch(function () {
+        var _navigator, _navigator$clipboard;
+        return Promise.resolve((_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(code)).then(function () {
+          var _window;
+          setCopied(true);
+          (_window = window) === null || _window === void 0 ? void 0 : _window.setTimeout(function () {
+            return setCopied(false);
+          }, 1800);
+        });
+      }, function (error) {
+        console.error('Failed to copy coupon code', error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  }, [code]);
+  if (!code) return null;
+  var quotedCode = "\"" + code + "\"";
+  var fullTitle = previewText ? quotedCode + " " + previewText : quotedCode;
+  return /*#__PURE__*/React__default.createElement(SuggestionRow, {
+    onClick: function onClick(event) {
+      event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default.createElement(SuggestionText, {
+    $accentColor: accentColor,
+    title: fullTitle
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(CodeWrap, null, /*#__PURE__*/React__default.createElement(CodeValue$1, {
+    $accentColor: accentColor
+  }, quotedCode), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: copied ? 'Copied!' : 'Copy code',
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement(CopyBtn, {
+    type: "button",
+    $accentColor: accentColor,
+    $copied: copied,
+    "aria-label": "Copy coupon code " + code,
+    onClick: copyCouponCode
+  }, copied ? /*#__PURE__*/React__default.createElement(FiCheck, null) : /*#__PURE__*/React__default.createElement(FiCopy, null)))), previewText ? " " + previewText : '')), /*#__PURE__*/React__default.createElement(ViewOffersBtn, {
+    type: "button",
+    $accentColor: accentColor,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      if (loading) return;
+      onViewOffers === null || onViewOffers === void 0 ? void 0 : onViewOffers();
+    }
+  }, viewOffersLabel));
+};
+var SuggestionRow = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  margin-top: 0.35rem;\n  margin-bottom: 0.35rem;\n  max-width: 100%;\n"])));
+var SuggestionText = styled.p(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  flex: 1;\n  min-width: 0;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1.45;\n  color: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n"])), function (_ref2) {
+  var $accentColor = _ref2.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+});
+var CodeWrap = styled.span(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 0.2rem;\n  vertical-align: middle;\n  margin-right: 0.25rem;\n"])));
+var CodeValue$1 = styled.span(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  font-weight: 800;\n  letter-spacing: 0.02em;\n  color: ", ";\n"])), function (_ref3) {
+  var $accentColor = _ref3.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+});
+var CopyBtn = styled.button(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.15rem;\n  height: 1.15rem;\n  padding: 0;\n  border: 1px solid\n    ", ";\n  border-radius: 0.25rem;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  flex-shrink: 0;\n  vertical-align: middle;\n\n  svg {\n    font-size: 0.7rem;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: 1px;\n  }\n"])), function (_ref4) {
+  var $accentColor = _ref4.$accentColor,
+    $copied = _ref4.$copied;
+  return $copied ? $accentColor || DEFAULT_PRIMARY_COLOR$2 : ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "55";
+}, function (_ref5) {
+  var $accentColor = _ref5.$accentColor,
+    $copied = _ref5.$copied;
+  return $copied ? ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "18" : '#fff';
+}, function (_ref6) {
+  var $accentColor = _ref6.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+}, function (_ref7) {
+  var $accentColor = _ref7.$accentColor;
+  return ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "14";
+}, function (_ref8) {
+  var $accentColor = _ref8.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+});
+var ViewOffersBtn = styled.button(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n  margin: 0;\n  padding: 0.15rem 0.45rem;\n  border: 1px solid ", ";\n  border-radius: 0.3rem;\n  background: #fff;\n  color: ", ";\n  font-size: 0.68rem;\n  font-weight: 700;\n  line-height: 1.3;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_ref9) {
+  var $accentColor = _ref9.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+}, function (_ref10) {
+  var $accentColor = _ref10.$accentColor;
+  return $accentColor || DEFAULT_PRIMARY_COLOR$2;
+}, function (_ref11) {
+  var $accentColor = _ref11.$accentColor;
+  return $accentColor ? $accentColor + "12" : '#437C0F12';
+});
+
+var _templateObject$x, _templateObject2$o, _templateObject3$i, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$6;
+var ProductImage = styled.img(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  min-height: 60px;\n  object-fit: contain;\n  @media only screen and (max-width: 600px) {\n    margin: 0.5em 0;\n    padding-right: 0.5em;\n  }\n"])));
+var ProductName = styled.h6(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  padding: 0;\n  line-height: 1.3em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  height: fit-content;\n  cursor: pointer;\n"])), function (props) {
   return props.size || '1em';
 });
-var CartTableRow = styled(TableRow)(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: 0.3s;\n  background: white;\n  /* &:hover {\n    td:first-child,\n    td:last-child {\n      border-left-style: solid;\n      border-top-style: solid;\n      border-top-right-radius: 10px;\n    }\n  } */\n  .outOfStock {\n    font-size: 0.75em;\n    color: red;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  .price {\n    font-size: ", ";\n    font-weight: bold;\n    color: #323232;\n    /* font-size: 1.15em; */\n  }\n  .borderLeft {\n    height: 100%;\n    background: ", ";\n    transition: 0.2s;\n    width: 0px;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-top-left-radius: 10px;\n    display: none;\n    border-bottom-left-radius: 10px;\n  }\n  .cartCheckBox {\n    &.Mui-checked {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n  &:hover {\n    background: white !important;\n    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n    border-radius: 10px;\n    /* opacity: 1;\n    box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n    z-index: 2;\n    /* border-radius: 20px; */\n    .borderLeft {\n      width: 12px;\n      display: inline-block;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    .CartnoPaddingSm {\n      padding: 0 !important;\n    }\n    .price {\n      font-size: 0.8em;\n    }\n    margin: 0.5em 0;\n    .cartCheckBox {\n      .css-i4bv87-MuiSvgIcon-root {\n        font-size: 10px !important;\n      }\n    }\n  }\n"])), function (props) {
+var CartTableRow = styled(TableRow)(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: 0.3s;\n  background: white;\n  /* &:hover {\n    td:first-child,\n    td:last-child {\n      border-left-style: solid;\n      border-top-style: solid;\n      border-top-right-radius: 10px;\n    }\n  } */\n  .outOfStock {\n    font-size: 0.75em;\n    color: red;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  .price {\n    font-size: ", ";\n    font-weight: bold;\n    color: #323232;\n    /* font-size: 1.15em; */\n  }\n  .borderLeft {\n    height: 100%;\n    background: ", ";\n    transition: 0.2s;\n    width: 0px;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-top-left-radius: 10px;\n    display: none;\n    border-bottom-left-radius: 10px;\n  }\n  .cartCheckBox {\n    &.Mui-checked {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n  &:hover {\n    background: white !important;\n    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n    border-radius: 10px;\n    /* opacity: 1;\n    box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n    z-index: 2;\n    /* border-radius: 20px; */\n    .borderLeft {\n      width: 12px;\n      display: inline-block;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    .CartnoPaddingSm {\n      padding: 0 !important;\n    }\n    .price {\n      font-size: 0.8em;\n    }\n    margin: 0.5em 0;\n    .cartCheckBox {\n      .css-i4bv87-MuiSvgIcon-root {\n        font-size: 10px !important;\n      }\n    }\n  }\n"])), function (props) {
   return props.size || '1.19em';
 }, function (prop) {
   return prop.bg;
 }, function (prop) {
   return prop.bg;
 });
-var CartTableCell$1 = styled(TableCell)(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-size: 1em;\n  }\n"])));
-var QuantityBox = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  .icon {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    height: 100%;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n"])));
-var DeleteBtn = styled.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
-var CardRow = function CardRow(_ref) {
-  var _styles$price, _styles$Btn;
-  var row = _ref.row,
-    isItemSelected = _ref.isItemSelected,
-    handleClick = _ref.handleClick,
-    imgnotfoundUrl = _ref.imgnotfoundUrl,
-    handleIncrementDecrement = _ref.handleIncrementDecrement,
-    handleRemoveProduct = _ref.handleRemoveProduct,
-    loading = _ref.loading,
-    imgSize = _ref.imgSize,
-    styles = _ref.styles,
-    clickRedirect = _ref.clickRedirect,
-    allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice = _ref.doNotShowPrice;
+var CartTableCell$1 = styled(TableCell)(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-size: 1em;\n  }\n"])));
+var QuantityBox = styled.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  .icon {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    height: 100%;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n"])));
+var DeleteBtn = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
+var DiscountBtn = styled.div(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: ", ";\n  font-size: 0.85em;\n  transition: 0.4s;\n\n  &:hover {\n    background: ", ";\n    color: white;\n  }\n"])), function (_ref) {
+  var $accentColor = _ref.$accentColor;
+  return $accentColor || '#437C0F';
+}, function (_ref2) {
+  var $accentColor = _ref2.$accentColor;
+  return $accentColor || '#437C0F';
+});
+var ActionCell = styled.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n"])));
+var CardRow = function CardRow(_ref3) {
+  var _styles$Btn, _styles$price, _styles$Btn2;
+  var row = _ref3.row,
+    isItemSelected = _ref3.isItemSelected,
+    handleClick = _ref3.handleClick,
+    imgnotfoundUrl = _ref3.imgnotfoundUrl,
+    handleIncrementDecrement = _ref3.handleIncrementDecrement,
+    handleRemoveProduct = _ref3.handleRemoveProduct,
+    loading = _ref3.loading,
+    imgSize = _ref3.imgSize,
+    styles = _ref3.styles,
+    clickRedirect = _ref3.clickRedirect,
+    allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref3.allowToProcessInvoiceForOutOfStockProductsEcommerce,
+    doNotShowPrice = _ref3.doNotShowPrice,
+    discountSuggesstions = _ref3.discountSuggesstions,
+    showDiscountSuggestions = _ref3.showDiscountSuggestions;
   var imgnotfoundUrlcommon = noImgAvailable$1;
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   var timer = useRef();
   var _useState = useState(row === null || row === void 0 ? void 0 : row.quantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
+  var _useState2 = useState(false),
+    discountModalOpen = _useState2[0],
+    setDiscountModalOpen = _useState2[1];
+  var accentColor = (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background);
+  var productDiscounts = (discountSuggesstions === null || discountSuggesstions === void 0 ? void 0 : discountSuggesstions.filter(function (discount) {
+    return (discount === null || discount === void 0 ? void 0 : discount.productId) == (row === null || row === void 0 ? void 0 : row.productId);
+  })) || [];
+  var showDiscountButton = (productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts.length) > 0;
+  var firstSuggestion = productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts[0];
   useEffect(function () {
     setQuantity(row === null || row === void 0 ? void 0 : row.quantity);
   }, [row]);
@@ -7866,7 +9176,7 @@ var CardRow = function CardRow(_ref) {
     tabIndex: -1,
     key: row.ProductId,
     size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size,
-    bg: (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background)
+    bg: (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background)
   }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     padding: "checkbox",
     style: {
@@ -7902,6 +9212,15 @@ var CardRow = function CardRow(_ref) {
   }, row.productName), /*#__PURE__*/React__default.createElement(CouponDiscountName, {
     discountAmount: row === null || row === void 0 ? void 0 : row.couponDiscount,
     discountName: row === null || row === void 0 ? void 0 : row.couponCode
+  }), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
+    coupon: firstSuggestion,
+    productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
+    cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
+    primaryColor: accentColor,
+    loading: loading,
+    onViewOffers: function onViewOffers() {
+      return setDiscountModalOpen(true);
+    }
   }), !allowToProcessInvoiceForOutOfStockProductsEcommerce ? ((row === null || row === void 0 ? void 0 : row.quantity) > (row === null || row === void 0 ? void 0 : row.availableQuantity) || (row === null || row === void 0 ? void 0 : row.availableQuantity) <= 0) && /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: 'red',
@@ -7978,7 +9297,7 @@ var CardRow = function CardRow(_ref) {
     discountAmount: row === null || row === void 0 ? void 0 : row.couponDiscount
   }))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     alig: "center"
-  }, /*#__PURE__*/React__default.createElement(DeleteBtn, {
+  }, /*#__PURE__*/React__default.createElement(ActionCell, null, /*#__PURE__*/React__default.createElement(DeleteBtn, {
     onClick: function onClick(e) {
       e.stopPropagation();
       if (loading) return;
@@ -7990,7 +9309,17 @@ var CardRow = function CardRow(_ref) {
     style: {
       fontSize: 'inherit'
     }
-  }))));
+  }))), /*#__PURE__*/React__default.createElement(DiscountSuggestionsModal, {
+    open: discountModalOpen,
+    onClose: function onClose() {
+      return setDiscountModalOpen(false);
+    },
+    productName: row === null || row === void 0 ? void 0 : row.productName,
+    productDiscounts: productDiscounts,
+    primaryColor: accentColor,
+    cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
+    productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
+  })));
 };
 
 var DEFAULT_PAGE_SIZE = 50;
@@ -8121,12 +9450,17 @@ function EnhancedTable(_ref2) {
     disabledSelectAllProductCheckbox = _ref2.disabledSelectAllProductCheckbox,
     clickRedirect = _ref2.clickRedirect,
     allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref2.allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice = _ref2.doNotShowPrice;
+    doNotShowPrice = _ref2.doNotShowPrice,
+    showDiscountSuggestions = _ref2.showDiscountSuggestions;
   var cartList = cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (li) {
     return _extends({}, li, {
       subtotal: li.standardPrice * li.quantity
     });
   });
+  var discountSuggesstions = useMemo(function () {
+    var _cartData$suggestions;
+    return (_cartData$suggestions = cartData === null || cartData === void 0 ? void 0 : cartData.suggestions) != null ? _cartData$suggestions : [];
+  }, [cartData === null || cartData === void 0 ? void 0 : cartData.suggestions]);
   var _React$useState = useState('asc'),
     order = _React$useState[0],
     setOrder = _React$useState[1];
@@ -8249,8 +9583,10 @@ function EnhancedTable(_ref2) {
     allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
     doNotShowPrice: doNotShowPrice
   }), /*#__PURE__*/createElement(TableBody$1, null, paginatedCartArray.map(function (row, index) {
+    var _row$productId;
     var isItemSelected = isSelected(row);
     return /*#__PURE__*/createElement(CardRow, {
+      key: (_row$productId = row === null || row === void 0 ? void 0 : row.productId) != null ? _row$productId : index,
       row: row,
       isItemSelected: isItemSelected,
       handleClick: handleClick,
@@ -8261,7 +9597,9 @@ function EnhancedTable(_ref2) {
       handleRemoveProduct: handleRemoveProduct,
       clickRedirect: clickRedirect,
       allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-      doNotShowPrice: doNotShowPrice
+      doNotShowPrice: doNotShowPrice,
+      discountSuggesstions: discountSuggesstions,
+      showDiscountSuggestions: showDiscountSuggestions
     });
   }))))), /*#__PURE__*/createElement("div", {
     style: {
@@ -8331,35 +9669,56 @@ function EnhancedTable(_ref2) {
   }))))));
 }
 
-var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
-var CartPageCard = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  // width: min(97%, 485px);\n  width: 98%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 12px;\n  position: relative;\n"])));
-var CartPageImg = styled.img(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 60px;\n  max-height: 60px;\n  position: relative;\n  margin-right: 0.5em;\n"])), function (props) {
+var _templateObject$y, _templateObject2$p, _templateObject3$j, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$8;
+var CartPageCard = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  // width: min(97%, 485px);\n  width: 98%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 12px;\n  position: relative;\n"])));
+var CartPageImg = styled.img(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  max-width: 60px;\n  max-height: 60px;\n  position: relative;\n  margin-right: 0.5em;\n"])), function (props) {
   return props.width || 'auto';
 }, function (props) {
   return props.height || 'auto';
 });
-var NameAndQtBox = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
-var CartPageCardName = styled.div(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3em;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    font-weight: 600;\n    color: #323232;\n  }\n"])));
-var QtAndPriceBox = styled.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 1.1em;\n"])));
-var CartPageQtBox = styled.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  .icon {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    height: 100%;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n"])));
-var CloseBtn = styled.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n  &:hover {\n    color: #ffffff;\n    background: red;\n  }\n"])));
+var NameAndQtBox = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
+var CartPageCardName = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3em;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    font-weight: 600;\n    color: #323232;\n  }\n"])));
+var QtAndPriceBox = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  font-size: 1.1em;\n"])));
+var CartPageQtBox = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  .icon {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    height: 100%;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n"])));
+var CloseBtn = styled.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n  &:hover {\n    color: #ffffff;\n    background: red;\n  }\n"])));
 
-var CartPageProductCard = function CartPageProductCard(_ref) {
-  var item = _ref.item,
-    imgnotfoundUrl = _ref.imgnotfoundUrl,
-    handleIncrementDecrement = _ref.handleIncrementDecrement,
-    handleRemoveProduct = _ref.handleRemoveProduct,
-    loading = _ref.loading,
-    imgSize = _ref.imgSize,
-    clickRedirect = _ref.clickRedirect,
-    allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice = _ref.doNotShowPrice;
+var _templateObject$z;
+var DiscountBtn$1 = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 25px;\n  height: 25px;\n  background: #eef1f4;\n  color: ", ";\n  font-size: 12px;\n  position: absolute;\n  top: 1em;\n  right: 3.2em;\n\n  &:hover {\n    background: ", ";\n    color: white;\n  }\n"])), function (_ref) {
+  var $accentColor = _ref.$accentColor;
+  return $accentColor || '#437C0F';
+}, function (_ref2) {
+  var $accentColor = _ref2.$accentColor;
+  return $accentColor || '#437C0F';
+});
+var CartPageProductCard = function CartPageProductCard(_ref3) {
+  var _styles$Btn;
+  var item = _ref3.item,
+    imgnotfoundUrl = _ref3.imgnotfoundUrl,
+    handleIncrementDecrement = _ref3.handleIncrementDecrement,
+    handleRemoveProduct = _ref3.handleRemoveProduct,
+    loading = _ref3.loading,
+    imgSize = _ref3.imgSize,
+    styles = _ref3.styles,
+    clickRedirect = _ref3.clickRedirect,
+    allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref3.allowToProcessInvoiceForOutOfStockProductsEcommerce,
+    doNotShowPrice = _ref3.doNotShowPrice,
+    discountSuggesstions = _ref3.discountSuggesstions,
+    showDiscountSuggestions = _ref3.showDiscountSuggestions;
   var imgnotfoundUrlcommon = noImgAvailable$1;
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   var timer = useRef();
   var _useState = useState(item === null || item === void 0 ? void 0 : item.quantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
+  var _useState2 = useState(false),
+    discountModalOpen = _useState2[0],
+    setDiscountModalOpen = _useState2[1];
+  var accentColor = (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background);
+  var productDiscounts = (discountSuggesstions === null || discountSuggesstions === void 0 ? void 0 : discountSuggesstions.filter(function (discount) {
+    return (discount === null || discount === void 0 ? void 0 : discount.productId) == (item === null || item === void 0 ? void 0 : item.productId);
+  })) || [];
+  var showDiscountButton = (productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts.length) > 0;
+  var firstSuggestion = productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts[0];
   useEffect(function () {
     setQuantity(item === null || item === void 0 ? void 0 : item.quantity);
   }, [item]);
@@ -8388,6 +9747,10 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
       }
     }, 500);
   };
+  var openDiscountModal = function openDiscountModal() {
+    if (loading) return;
+    setDiscountModalOpen(true);
+  };
   return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
     src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
     alt: 'img',
@@ -8407,7 +9770,14 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
   })), !doNotShowPrice && /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(TotalAfterDiscount, {
     totalAmount: item === null || item === void 0 ? void 0 : item.standardPrice,
     discountAmount: item === null || item === void 0 ? void 0 : item.discountAmount
-  }))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
+  }))), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
+    coupon: firstSuggestion,
+    productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
+    cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
+    primaryColor: accentColor,
+    loading: loading,
+    onViewOffers: openDiscountModal
+  }), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
@@ -8457,7 +9827,17 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
       if (!sure) return;
       handleRemoveProduct(item);
     }
-  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, null)));
+  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, null)), /*#__PURE__*/React__default.createElement(DiscountSuggestionsModal, {
+    open: discountModalOpen,
+    onClose: function onClose() {
+      return setDiscountModalOpen(false);
+    },
+    productName: item === null || item === void 0 ? void 0 : item.productName,
+    productDiscounts: productDiscounts,
+    primaryColor: accentColor,
+    cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
+    productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
+  }));
 };
 
 var DEFAULT_PAGE_SIZE$1 = 50;
@@ -8473,7 +9853,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
     styles = _ref.styles,
     clickRedirect = _ref.clickRedirect,
     allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice = _ref.doNotShowPrice;
+    doNotShowPrice = _ref.doNotShowPrice,
+    showDiscountSuggestions = _ref.showDiscountSuggestions;
   var _useState = useState(1),
     page = _useState[0],
     setPage = _useState[1];
@@ -8501,6 +9882,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
     color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
     loading: true
   })), paginatedCartArray.map(function (item) {
+    var _cartData$suggestions;
     return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
       key: item === null || item === void 0 ? void 0 : item.productId,
       item: item,
@@ -8509,9 +9891,12 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
       handleIncrementDecrement: handleIncrementDecrement,
       handleRemoveProduct: handleRemoveProduct,
       imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize,
+      styles: styles,
       clickRedirect: clickRedirect,
       allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-      doNotShowPrice: doNotShowPrice
+      doNotShowPrice: doNotShowPrice,
+      discountSuggesstions: (_cartData$suggestions = cartData === null || cartData === void 0 ? void 0 : cartData.suggestions) != null ? _cartData$suggestions : [],
+      showDiscountSuggestions: showDiscountSuggestions
     });
   }))), sortedCartArray.length > 0 && /*#__PURE__*/React__default.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination, {
     count: totalPages,
@@ -8560,23 +9945,23 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
   })))));
 };
 
-var _templateObject$w, _templateObject2$o, _templateObject3$i, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5;
-var CartSummaryContainer = styled.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  width: 25rem;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: 2em;\n  align-items: center;\n  /* margin-top: 3em; */\n  p {\n    font-size: 1.189em;\n    font-weight: 600;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
+var _templateObject$A, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$7;
+var CartSummaryContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  width: 25rem;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: 2em;\n  align-items: center;\n  /* margin-top: 3em; */\n  p {\n    font-size: 1.189em;\n    font-weight: 600;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.background || '#667080';
 }, function (props) {
   return props.color || 'white';
 }, function (props) {
   return props.color || 'white';
 });
-var CartSummaryRow = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
+var CartSummaryRow = styled.div(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
   return props.justify || 'space-between';
 }, function (props) {
   return props.h5 || '1.31em';
 });
-var CartSummaryHr = styled.span(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
+var CartSummaryHr = styled.span(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
   return props.color || 'rgba(255, 255, 255, 0.5)';
 });
-var CartSummaryInputBox = styled.form(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  background-color: transparent;\n  width: 100%;\n  input {\n    width: 65%;\n    height: 2.5rem;\n    padding: 0.2rem 0.8rem;\n    font-size: 0.89rem;\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 35%;\n    height: 2.5rem;\n    line-height: 0.8rem;\n    background: ", ";\n    display: grid;\n    color: ", ";\n    place-items: center;\n    border: none;\n    border-radius: 0;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n      background: ", ";\n    }\n  }\n"])), function (props) {
+var CartSummaryInputBox = styled.form(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  background-color: transparent;\n  width: 100%;\n  input {\n    width: 65%;\n    height: 2.5rem;\n    padding: 0.2rem 0.8rem;\n    font-size: 0.89rem;\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 35%;\n    height: 2.5rem;\n    line-height: 0.8rem;\n    background: ", ";\n    display: grid;\n    color: ", ";\n    place-items: center;\n    border: none;\n    border-radius: 0;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n      background: ", ";\n    }\n  }\n"])), function (props) {
   return props.paddingBottom ? '0' : '0';
 }, function (props) {
   return props.background || '#bfc3ca';
@@ -8591,16 +9976,16 @@ var CartSummaryInputBox = styled.form(_templateObject4$f || (_templateObject4$f
 }, function (props) {
   return props.btn || '#393f48';
 });
-var DiscountCouponContainer = styled.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n  padding-top: 0.5rem;\n  width: 100%;\n  max-height: 200px;\n  overflow: auto;\n"])));
-var DiscountCouponCard = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.3rem;\n  button {\n    color: ", ";\n    font-size: 1rem;\n    padding: 0;\n    &:hover {\n      color: red;\n    }\n  }\n"])), function (props) {
+var DiscountCouponContainer = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  padding-top: 0.5rem;\n  width: 100%;\n  max-height: 200px;\n  overflow: auto;\n"])));
+var DiscountCouponCard = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.3rem;\n  button {\n    color: ", ";\n    font-size: 1rem;\n    padding: 0;\n    &:hover {\n      color: red;\n    }\n  }\n"])), function (props) {
   return props.btn || '#393f48';
 });
-var CartSummaryCheckoutBtn = styled.button(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 600;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-transform: uppercase;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.4em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 3em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
+var CartSummaryCheckoutBtn = styled.button(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 600;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-transform: uppercase;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.4em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 3em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
   return props.background || '#393f48';
 }, function (props) {
   return props.color || 'inherit';
 });
-var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline {\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline {\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
   return props.background || 'white';
 }, function (props) {
   return props.selected ? props.background : 'transparent';
@@ -8829,7 +10214,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
     styles = _ref.styles,
     onChangeDiscountCoupon = _ref.onChangeDiscountCoupon,
     _ref$doNotShowPrice = _ref.doNotShowPrice,
-    doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice;
+    doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice,
+    _ref$showDiscountSugg = _ref.showDiscountSuggestions,
+    showDiscountSuggestions = _ref$showDiscountSugg === void 0 ? false : _ref$showDiscountSugg;
   var _useAllSystemFeatureV = useAllSystemFeatureValues({
       apiEndPoint: apiEndPoint,
       token: token
@@ -8953,7 +10340,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
     handleRemoveProduct: handleRemoveProduct,
     clickRedirect: clickRedirect,
     allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice: doNotShowPrice
+    doNotShowPrice: doNotShowPrice,
+    showDiscountSuggestions: showDiscountSuggestions
   }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
     retail: retail,
     clickRedirect: clickRedirect,
@@ -8966,7 +10354,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
     handleRemoveAll: handleRemoveAll,
     disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox,
     allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    doNotShowPrice: doNotShowPrice
+    doNotShowPrice: doNotShowPrice,
+    showDiscountSuggestions: showDiscountSuggestions
   }), /*#__PURE__*/React__default.createElement(CartSummary, {
     apiEndPoint: apiEndPoint,
     token: token,
@@ -9007,12 +10396,12 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
   return quantityReturn;
 };
 
-var _templateObject$x, _templateObject2$p, _templateObject3$j;
-var CartDrawerProduct = styled.div(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 1rem;\n  user-select: none;\n  background: #f2f2f290;\n  border: 1px solid #f2f2f290;\n  padding: 0.5rem;\n  border-radius: 12px;\n  box-sizing: border-box;\n\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: contain;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    // width: 20%;\n    height: 95%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n      }\n    }\n  }\n  @media only screen and (max-width: 768px) {\n    .closeIcon {\n      font-size: 1rem;\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n    }\n  }\n"])), function (props) {
+var _templateObject$B, _templateObject2$r, _templateObject3$l;
+var CartDrawerProduct = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 1rem;\n  user-select: none;\n  background: #f2f2f290;\n  border: 1px solid #f2f2f290;\n  padding: 0.5rem;\n  border-radius: 12px;\n  box-sizing: border-box;\n\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: contain;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    // width: 20%;\n    height: 95%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n      }\n    }\n  }\n  @media only screen and (max-width: 768px) {\n    .closeIcon {\n      font-size: 1rem;\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n    }\n  }\n"])), function (props) {
   return props.color || 'grey';
 });
-var CartDrawerQtBox = styled.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));
-var CartDrawerLoader = styled.div(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 30%;\n  width: 100px;\n  height: 100px;\n  display: grid;\n  place-items: center;\n"])));
+var CartDrawerQtBox = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  height: 30px;\n  width: 86px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #323232;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n    input {\n      width: 40px;\n      height: 100%;\n      text-align: center;\n      border: none;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));
+var CartDrawerLoader = styled.div(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 30%;\n  width: 100px;\n  height: 100px;\n  display: grid;\n  place-items: center;\n"])));
 
 var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   var product = _ref.product,
@@ -9273,7 +10662,7 @@ var GTagManager = function GTagManager(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-var _templateObject$y, _templateObject2$q, _templateObject3$k, _templateObject4$g, _templateObject5$c, _templateObject6$a;
+var _templateObject$C, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e, _templateObject6$c;
 var OutOfStock = function OutOfStock(_ref) {
   var _product$body, _product$body$content, _product$body2, _product$body2$conten, _product$masterProduc, _product$header;
   var product = _ref.product,
@@ -9421,7 +10810,7 @@ var OutOfStock = function OutOfStock(_ref) {
       fontSize: '1.3rem',
       fontWeight: 600
     }
-  }, "Get notified when this item is in-stock"), (outofstockproducts === null || outofstockproducts === void 0 ? void 0 : outofstockproducts.length) > 0 && /*#__PURE__*/React__default.createElement(TableContainer$4, {
+  }, "Get notified when this item is in-stock"), (outofstockproducts === null || outofstockproducts === void 0 ? void 0 : outofstockproducts.length) > 0 && /*#__PURE__*/React__default.createElement(TableContainer$5, {
     style: {
       maxHeight: 400
     },
@@ -9504,13 +10893,13 @@ var OutOfStock = function OutOfStock(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement("span", null, subscribed ? 'Subscribed Successfully' : 'Subscribe')))))));
 };
-var VariantsContainer = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: 5px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    background-color: rgba(178, 169, 169, 1);\n    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n  }\n"])));
-var MainCheckbox = styled(Checkbox)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n  }\n"])), function (props) {
+var VariantsContainer = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: 5px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: 4px;\n    background-color: rgba(178, 169, 169, 1);\n    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n  }\n"])));
+var MainCheckbox = styled(Checkbox)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.primaryColor;
 });
-var EmailInput = styled(InputBase)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  border: 1px solid #a9a9a9;\n  padding: 3px 10px;\n  fontsize: 12px;\n  width: 100%;\n  border-radius: 3px;\n"])));
-var Root$a = styled.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid #d3d3d3;\n  border-radius: 3px;\n  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);\n  padding: 10px;\n"])));
-var ContainerDiv = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  font-size: 14px;\n  height: ", ";\n  margin: ", ";\n  width: 100%;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  color: #000000de;\n"])), function (props) {
+var EmailInput = styled(InputBase)(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  border: 1px solid #a9a9a9;\n  padding: 3px 10px;\n  fontsize: 12px;\n  width: 100%;\n  border-radius: 3px;\n"])));
+var Root$a = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid #d3d3d3;\n  border-radius: 3px;\n  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);\n  padding: 10px;\n"])));
+var ContainerDiv = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  font-size: 14px;\n  height: ", ";\n  margin: ", ";\n  width: 100%;\n  flex-direction: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  color: #000000de;\n"])), function (props) {
   return props.height ? props.height : 'auto';
 }, function (props) {
   return props.margin ? props.margin : '0.3rem 0';
@@ -9521,7 +10910,7 @@ var ContainerDiv = styled.div(_templateObject5$c || (_templateObject5$c = _tagge
 }, function (props) {
   return props.justifyContent ? props.justifyContent : 'default';
 });
-var StyledSubscribe = styled.button(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  background: ", ";\n  border-radius: 3px;\n  color: #fff;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  outline: none;\n  font-weight: 600;\n  cursor: ", ";\n  opacity: ", ";\n  width: ", ";\n  pointer-events: ", ";\n  span {\n    white-space: nowrap;\n    font-size: ", ";\n    margin-left: 10px;\n  }\n  &:hover {\n    opacity: ", ";\n  }\n  margin: 0px;\n  margin-left: 1%;\n  text-transform: uppercase;\n  pointer-events: ", ";\n  span {\n    margin: 0px 10px;\n  }\n"])), function (props) {
+var StyledSubscribe = styled.button(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  align-items: center;\n  background: ", ";\n  border-radius: 3px;\n  color: #fff;\n  display: flex;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  outline: none;\n  font-weight: 600;\n  cursor: ", ";\n  opacity: ", ";\n  width: ", ";\n  pointer-events: ", ";\n  span {\n    white-space: nowrap;\n    font-size: ", ";\n    margin-left: 10px;\n  }\n  &:hover {\n    opacity: ", ";\n  }\n  margin: 0px;\n  margin-left: 1%;\n  text-transform: uppercase;\n  pointer-events: ", ";\n  span {\n    margin: 0px 10px;\n  }\n"])), function (props) {
   return props.theme.primaryColor;
 }, function (props) {
   return props.padding ? props.padding : '5px 15px';
@@ -9541,12 +10930,12 @@ var StyledSubscribe = styled.button(_templateObject6$a || (_templateObject6$a =
   return props.Loading || props.subscribed ? 'none' : 'auto';
 });
 
-var _templateObject$z;
+var _templateObject$D;
 var NoData = function NoData(_ref) {
   _objectDestructuringEmpty(_ref);
   return /*#__PURE__*/React__default.createElement(CustomNoRowsOverlay, null);
 };
-var Container$1 = styled.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  & .ant-empty-img-1 {\n    fill: #aeb8c2;\n  }\n  & .ant-empty-img-2 {\n    fill: #f5f5f7;\n  }\n  & .ant-empty-img-3 {\n    fill: #dce0e6;\n  }\n  & .ant-empty-img-4 {\n    fill: #fff;\n  }\n  & ant-empty-img-5 {\n    fill-opacity: 0.8;\n    fill: #f5f5f5;\n  }\n"])));
+var Container$1 = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  & .ant-empty-img-1 {\n    fill: #aeb8c2;\n  }\n  & .ant-empty-img-2 {\n    fill: #f5f5f7;\n  }\n  & .ant-empty-img-3 {\n    fill: #dce0e6;\n  }\n  & .ant-empty-img-4 {\n    fill: #fff;\n  }\n  & ant-empty-img-5 {\n    fill-opacity: 0.8;\n    fill: #f5f5f5;\n  }\n"])));
 var CustomNoRowsOverlay = function CustomNoRowsOverlay(_ref2) {
   _objectDestructuringEmpty(_ref2);
   return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("svg", {
@@ -9656,7 +11045,7 @@ var SelectStyle = function SelectStyle(hasError) {
   };
 };
 
-var _excluded$5 = ["value", "onChange", "placeholder", "searchProductLable", "apiData", "selectedValueKey", "loadOptionsMethod", "onScanUpdate", "minSearchChar", "searchLabelRequired", "onUpdate", "autoFocus", "defaultOptions", "initialOptions", "addItemLabel", "onAddItem", "searchResultSize"];
+var _excluded$6 = ["value", "onChange", "placeholder", "searchProductLable", "apiData", "selectedValueKey", "loadOptionsMethod", "onScanUpdate", "minSearchChar", "searchLabelRequired", "onUpdate", "autoFocus", "defaultOptions", "initialOptions", "addItemLabel", "onAddItem", "searchResultSize"];
 var AsyncSelectField = function AsyncSelectField(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -9677,7 +11066,7 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
     addItemLabel = _ref.addItemLabel,
     onAddItem = _ref.onAddItem,
     searchResultSize = _ref.searchResultSize,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var DEFAULT_SEARCH_RESULT_SIZE = searchResultSize || 20;
   var labelKey = apiData.labelKey || 'name';
   var queryParam = apiData.queryParam || 'name';
@@ -10013,28 +11402,28 @@ var AsyncSelect = function AsyncSelect(_ref3) {
   return /*#__PURE__*/React__default.createElement(AsyncSelectField, props);
 };
 
-var _templateObject$A;
-var Container$2 = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose([""])));
+var _templateObject$E;
+var Container$2 = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose([""])));
 
-var _templateObject$B, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$d, _templateObject6$b;
-var ProductImage$1 = styled.img(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  min-width: 50px;\n  min-height: 50px;\n  object-fit: contain;\n  @media only screen and (max-width: 600px) {\n    margin: 0.5em 0;\n    padding-right: 0.5em;\n  }\n"])));
-var ProductName$1 = styled.h6(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  padding: 0;\n  line-height: 1.3em;\n  max-height: ", ";\n  height: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  height: fit-content;\n"])), function (props) {
+var _templateObject$F, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$d;
+var ProductImage$1 = styled.img(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: 50px;\n  min-height: 50px;\n  object-fit: contain;\n  @media only screen and (max-width: 600px) {\n    margin: 0.5em 0;\n    padding-right: 0.5em;\n  }\n"])));
+var ProductName$1 = styled.h6(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  padding: 0;\n  line-height: 1.3em;\n  max-height: ", ";\n  height: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  height: fit-content;\n"])), function (props) {
   return props.size || '1em';
 }, function (props) {
   return props.maxHeight ? props.maxHeight + "em" : '2.75em';
 }, function (props) {
   return props.maxHeight ? props.maxHeight + "em" : '2.80em';
 });
-var CartTableRow$1 = styled(TableRow)(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: 0.3s;\n  background: white;\n  /* &:hover {\n    td:first-child,\n    td:last-child {\n      border-left-style: solid;\n      border-top-style: solid;\n      border-top-right-radius: 10px;\n    }\n  } */\n  .outOfStock {\n    font-size: 0.75em;\n    color: red;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  .price {\n    font-size: ", ";\n    font-weight: bold;\n    color: #323232;\n    /* font-size: 1.15em; */\n  }\n  .borderLeft {\n    height: 100%;\n    background: ", ";\n    transition: 0.2s;\n    width: 0px;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-top-left-radius: 10px;\n    display: none;\n    border-bottom-left-radius: 10px;\n  }\n  .cartCheckBox {\n    &.Mui-checked {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n  &:hover {\n    background: white !important;\n    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n    border-radius: 10px;\n    /* opacity: 1;\n    box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n    z-index: 2;\n    /* border-radius: 20px; */\n    .borderLeft {\n      width: 12px;\n      display: inline-block;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    .CartnoPaddingSm {\n      padding: 0 !important;\n    }\n    .price {\n      font-size: 0.8em;\n    }\n    margin: 0.5em 0;\n    .cartCheckBox {\n      .css-i4bv87-MuiSvgIcon-root {\n        font-size: 10px !important;\n      }\n    }\n  }\n"])), function (props) {
+var CartTableRow$1 = styled(TableRow)(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: 0.3s;\n  background: white;\n  /* &:hover {\n    td:first-child,\n    td:last-child {\n      border-left-style: solid;\n      border-top-style: solid;\n      border-top-right-radius: 10px;\n    }\n  } */\n  .outOfStock {\n    font-size: 0.75em;\n    color: red;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  .price {\n    font-size: ", ";\n    font-weight: bold;\n    color: #323232;\n    /* font-size: 1.15em; */\n  }\n  .borderLeft {\n    height: 100%;\n    background: ", ";\n    transition: 0.2s;\n    width: 0px;\n    position: absolute;\n    left: 0;\n    top: 0;\n    border-top-left-radius: 10px;\n    display: none;\n    border-bottom-left-radius: 10px;\n  }\n  .cartCheckBox {\n    &.Mui-checked {\n      svg {\n        color: ", ";\n      }\n    }\n  }\n  &:hover {\n    background: white !important;\n    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n    border-radius: 10px;\n    /* opacity: 1;\n    box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n    z-index: 2;\n    /* border-radius: 20px; */\n    .borderLeft {\n      width: 12px;\n      display: inline-block;\n    }\n  }\n  @media only screen and (max-width: 600px) {\n    .CartnoPaddingSm {\n      padding: 0 !important;\n    }\n    .price {\n      font-size: 0.8em;\n    }\n    margin: 0.5em 0;\n    .cartCheckBox {\n      .css-i4bv87-MuiSvgIcon-root {\n        font-size: 10px !important;\n      }\n    }\n  }\n"])), function (props) {
   return props.size || '1.19em';
 }, function (prop) {
   return prop.bg;
 }, function (prop) {
   return prop.bg;
 });
-var CartTableCell$2 = styled(TableCell)(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-size: 1em;\n  }\n"])));
-var QuantityBox$1 = styled.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n  height: 1.7em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  div {\n    /* width:30px; */\n    min-height: 100%;\n    aspect-ratio: 1.15/1;\n    display: grid;\n    place-items: center;\n    font-size: 0.65em;\n    color: white;\n    background-color: #323232;\n    cursor: pointer;\n  }\n  .price {\n    background: transparent;\n    cursor: auto;\n    background: #ffffff;\n    border: 1px solid #ebebeb;\n    p {\n      color: #5e5c5c;\n      font-size: 0.685em;\n      font-weight: 500;\n    }\n  }\n  .add {\n    background-color: #ebebeb;\n    color: #323232;\n  }\n"])));
-var DeleteBtn$1 = styled.div(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
+var CartTableCell$2 = styled(TableCell)(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-size: 1em;\n  }\n"])));
+var QuantityBox$1 = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  height: 1.7em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  div {\n    /* width:30px; */\n    min-height: 100%;\n    aspect-ratio: 1.15/1;\n    display: grid;\n    place-items: center;\n    font-size: 0.65em;\n    color: white;\n    background-color: #323232;\n    cursor: pointer;\n  }\n  .price {\n    background: transparent;\n    cursor: auto;\n    background: #ffffff;\n    border: 1px solid #ebebeb;\n    p {\n      color: #5e5c5c;\n      font-size: 0.685em;\n      font-weight: 500;\n    }\n  }\n  .add {\n    background-color: #ebebeb;\n    color: #323232;\n  }\n"])));
+var DeleteBtn$1 = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
 var CardRow$1 = function CardRow(_ref) {
   var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
   var row = _ref.row,
@@ -10152,13 +11541,13 @@ var CardRow$1 = function CardRow(_ref) {
   }))));
 };
 
-var _templateObject$C, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e, _templateObject6$c, _templateObject7$8, _templateObject8$6, _templateObject9$5;
-var CartPageSection$1 = styled.section(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  border-radius: 28px;\n\n  @media screen and (max-width: 1200px) {\n    padding: 0 1em;\n  }\n  @media screen and (max-width: 600px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
+var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$8, _templateObject9$6;
+var CartPageSection$1 = styled.section(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  border-radius: 28px;\n\n  @media screen and (max-width: 1200px) {\n    padding: 0 1em;\n  }\n  @media screen and (max-width: 600px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
   return props.bg;
 }, function (props) {
   return props.bg || '#FAE8E5';
 });
-var CartPageContainer$1 = styled.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  border-radius: 28px 28px 28px 14px;\n  padding: 2em 2.5em;\n  padding-bottom: 3em;\n  border-radius: 28px;\n  opacity: ", ";\n  .scrollDiv {\n    width: 68%;\n    max-height: 630px;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: 10px;\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      border: 2px solid;\n    }\n    /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n  }\n  table {\n    border-collapse: separate;\n    border-spacing: 0 4px;\n    row-gap: 4px;\n  }\n\n  td {\n    /* border: solid 1px #000; */\n    border-style: none solid solid none;\n    /* padding: 10px; */\n    /* margin-bottom:5px; */\n  }\n\n  tr:first-child td:first-child {\n    border-top-left-radius: 10px;\n  }\n  tr td:last-child {\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  tr td:first-child {\n    border-bottom-left-radius: 10px;\n    border-top-left-radius: 10px;\n  }\n  tr td:last-child {\n    border-bottom-right-radius: 10px;\n  }\n\n  tr td {\n    border-top-style: solid;\n  }\n  tr td:first-child {\n    border-left-style: solid;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    flex-direction: column;\n    align-items: center;\n    padding: 0.5em;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
+var CartPageContainer$1 = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  max-width: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  border-radius: 28px 28px 28px 14px;\n  padding: 2em 2.5em;\n  padding-bottom: 3em;\n  border-radius: 28px;\n  opacity: ", ";\n  .scrollDiv {\n    width: 68%;\n    max-height: 630px;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: 10px;\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      border: 2px solid;\n    }\n    /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n  }\n  table {\n    border-collapse: separate;\n    border-spacing: 0 4px;\n    row-gap: 4px;\n  }\n\n  td {\n    /* border: solid 1px #000; */\n    border-style: none solid solid none;\n    /* padding: 10px; */\n    /* margin-bottom:5px; */\n  }\n\n  tr:first-child td:first-child {\n    border-top-left-radius: 10px;\n  }\n  tr td:last-child {\n    border-top-right-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  tr td:first-child {\n    border-bottom-left-radius: 10px;\n    border-top-left-radius: 10px;\n  }\n  tr td:last-child {\n    border-bottom-right-radius: 10px;\n  }\n\n  tr td {\n    border-top-style: solid;\n  }\n  tr td:first-child {\n    border-left-style: solid;\n  }\n\n  @media only screen and (max-width: 1200px) {\n    flex-direction: column;\n    align-items: center;\n    padding: 0.5em;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
   return props.maxWidth || '1600px';
 }, function (props) {
   return "min(" + (props.maxWidth || '1600px') + ",100%)";
@@ -10169,16 +11558,16 @@ var CartPageContainer$1 = styled.div(_templateObject2$s || (_templateObject2$s =
 }, function (props) {
   return props.color || '#BFC3CA';
 });
-var CardsBox$1 = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 900px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 600px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
+var CardsBox$1 = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 900px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 600px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
   return props.retail ? 'grid' : 'flex';
 });
-var CartHeading$1 = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* margin-bottom: 2em; */\n  margin-left: 2.3em;\n  margin-top: 2em;\n\n  color: ", ";\n  h1 {\n    font-weight: 600;\n    font-size: 2.0375em;\n    text-transform: capitalize;\n    color: ", ";\n    /* margin-bottom: 1em; */\n  }\n  p {\n    font-size: 0.875em;\n    color: inherit;\n    margin-top: 0.5em;\n  }\n"])), function (props) {
+var CartHeading$1 = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* margin-bottom: 2em; */\n  margin-left: 2.3em;\n  margin-top: 2em;\n\n  color: ", ";\n  h1 {\n    font-weight: 600;\n    font-size: 2.0375em;\n    text-transform: capitalize;\n    color: ", ";\n    /* margin-bottom: 1em; */\n  }\n  p {\n    font-size: 0.875em;\n    color: inherit;\n    margin-top: 0.5em;\n  }\n"])), function (props) {
   return props.color || 'black';
 }, function (props) {
   return props.h1 || 'inherit';
 });
-var Loader$2 = styled.div(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 40%;\n  left: 47%;\n  display: grid;\n  place-items: center;\n  z-index: 3;\n"])));
-var CartTableCell$3 = styled(TableCell)(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  && {\n    padding-bottom: 1em !important;\n    // border: none !important;\n    /* font-size: 0.75em; */\n    font-size: 1em;\n    color: rgba(98, 95, 95, 1);\n    // background: ", ";\n    color: ", ";\n  }\n  &.bg-transparent {\n    // background-color: transparent !important;\n    text-transform: uppercase;\n    span {\n      font-size: 0.75em;\n      font-weight: 600;\n    }\n    svg {\n      color: ", ";\n    }\n    .MuiTableSortLabel-root {\n      color: ", "!important;\n    }\n  }\n"])), function (props) {
+var Loader$2 = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 40%;\n  left: 47%;\n  display: grid;\n  place-items: center;\n  z-index: 3;\n"])));
+var CartTableCell$3 = styled(TableCell)(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  && {\n    padding-bottom: 1em !important;\n    // border: none !important;\n    /* font-size: 0.75em; */\n    font-size: 1em;\n    color: rgba(98, 95, 95, 1);\n    // background: ", ";\n    color: ", ";\n  }\n  &.bg-transparent {\n    // background-color: transparent !important;\n    text-transform: uppercase;\n    span {\n      font-size: 0.75em;\n      font-weight: 600;\n    }\n    svg {\n      color: ", ";\n    }\n    .MuiTableSortLabel-root {\n      color: ", "!important;\n    }\n  }\n"])), function (props) {
   return "" + props.bg;
 }, function (props) {
   return "" + props.color || 'inherit';
@@ -10187,17 +11576,17 @@ var CartTableCell$3 = styled(TableCell)(_templateObject6$c || (_templateObject6$
 }, function (props) {
   return "" + props.color || 'inherit';
 });
-var CartTableContainer$1 = styled(TableContainer$3)(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  padding-right: 1.5em;\n  overflow: inherit !important;\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n  }\n"])), function (props) {
+var CartTableContainer$1 = styled(TableContainer$4)(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  max-height: 580px;\n  padding-right: 1.5em;\n  overflow: inherit !important;\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n    width: 100%;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    border-radius: 16px;\n    margin: 5px 2px;\n    background: ", ";\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n  }\n"])), function (props) {
   return props.bg || '#fdccc480';
 }, function (props) {
   return props.color || 'red';
 });
-var CartButtonsRow$1 = styled.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 1.85em;\n  button {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    color: ", ";\n    padding: 0.5em 1em;\n    margin-left: 1em;\n    font-size: 0.85em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    transition: 0.4s;\n    font-size: 1rem;\n    font-weight: 600;\n    svg {\n      margin-right: 0.4rem;\n    }\n    &:hover {\n      transform: scale(0.95);\n    }\n  }\n"])), function (props) {
+var CartButtonsRow$1 = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-right: 1.85em;\n  button {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    color: ", ";\n    padding: 0.5em 1em;\n    margin-left: 1em;\n    font-size: 0.85em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    transition: 0.4s;\n    font-size: 1rem;\n    font-weight: 600;\n    svg {\n      margin-right: 0.4rem;\n    }\n    &:hover {\n      transform: scale(0.95);\n    }\n  }\n"])), function (props) {
   return props.bg || 'rgba(107, 106, 106, 1)';
 }, function (props) {
   return props.color || 'white';
 });
-var CartPageBox$1 = styled.div(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  @media only screen and (max-width: 768px) {\n    margin-right: 0;\n    .CartnoBelowSm {\n      display: none;\n    }\n  }\n"])));
+var CartPageBox$1 = styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  @media only screen and (max-width: 768px) {\n    margin-right: 0;\n    .CartnoBelowSm {\n      display: none;\n    }\n  }\n"])));
 
 var headCells$1 = [{
   id: 'image',
@@ -10602,7 +11991,7 @@ var SnowfallComponent = function SnowfallComponent(_ref) {
   }) : null;
 };
 
-var _templateObject$D, _templateObject2$t;
+var _templateObject$H, _templateObject2$v;
 var ContactUsForm = function ContactUsForm(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     serviceApiEndPoint = _ref.serviceApiEndPoint,
@@ -10727,15 +12116,15 @@ var ContactUsForm = function ContactUsForm(_ref) {
     }
   }, "Submit"))));
 };
-var TypographyContainer$8 = styled(Typography)(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem !important;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer$8 = styled(Typography)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem !important;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
-var RootContainer$3 = styled(Stack)(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 14px !important;\n  padding: 1.3rem;\n  margin-bottom: 1rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  p {\n    margin: 0 !important;\n  }\n"])), function (props) {
+var RootContainer$3 = styled(Stack)(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 14px !important;\n  padding: 1.3rem;\n  margin-bottom: 1rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  p {\n    margin: 0 !important;\n  }\n"])), function (props) {
   return props.secondaryColor;
 });
 
-var _templateObject$E;
-var StaticContainer = styled.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  .top-bar {\n    background-color: #f5f5f5;\n    padding: 1rem;\n    text-align: center;\n    font-size: 3.2rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", ";\n    @media only screen and (max-width: 769px) {\n      font-size: 1.5rem;\n    }\n  }\n  .route-bar {\n    text-transform: capitalize;\n    p {\n      padding: 0;\n      word-spacing: 5px;\n      display: flex;\n      align-items: center;\n      color: ", ";\n    }\n  }\n  .data-container {\n    margin: auto;\n  }\n  hr {\n    border-bottom: 2px solid #eceff8;\n    border-top: 0px;\n    margin: 1rem 0;\n  }\n  li {\n    margin-left: 1rem;\n  }\n  a {\n    color: ", ";\n  }\n  p {\n    font-size: 1.2rem;\n    margin: 1rem 0;\n    width: 100%;\n    color: ", ";\n  }\n"])), function (props) {
+var _templateObject$I;
+var StaticContainer = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  .top-bar {\n    background-color: #f5f5f5;\n    padding: 1rem;\n    text-align: center;\n    font-size: 3.2rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", ";\n    @media only screen and (max-width: 769px) {\n      font-size: 1.5rem;\n    }\n  }\n  .route-bar {\n    text-transform: capitalize;\n    p {\n      padding: 0;\n      word-spacing: 5px;\n      display: flex;\n      align-items: center;\n      color: ", ";\n    }\n  }\n  .data-container {\n    margin: auto;\n  }\n  hr {\n    border-bottom: 2px solid #eceff8;\n    border-top: 0px;\n    margin: 1rem 0;\n  }\n  li {\n    margin-left: 1rem;\n  }\n  a {\n    color: ", ";\n  }\n  p {\n    font-size: 1.2rem;\n    margin: 1rem 0;\n    width: 100%;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.fontColor || '#606060';
 }, function (props) {
   return props.theme.primaryColor;
@@ -10747,7 +12136,7 @@ var StaticContainer = styled.div(_templateObject$E || (_templateObject$E = _tagg
   return props.theme.fontColor || '#606060';
 });
 
-var _templateObject$F;
+var _templateObject$J;
 var APIStaticPage = function APIStaticPage(_ref) {
   var _ref$colors = _ref.colors,
     colors = _ref$colors === void 0 ? {
@@ -10935,10 +12324,10 @@ var APIStaticPage = function APIStaticPage(_ref) {
     }
   }, "Not found"))));
 };
-var Root$b = styled(Box)(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  img {\n    max-width: 100%;\n  }\n"])));
+var Root$b = styled(Box)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  img {\n    max-width: 100%;\n  }\n"])));
 
-var _templateObject$G;
-var StaticContainer$1 = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  .top-bar {\n    background-color: #f5f5f5;\n    padding: 1rem;\n    text-align: center;\n    font-size: 3.2rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", ";\n    @media only screen and (max-width: 769px) {\n      font-size: 1.5rem;\n    }\n  }\n  .route-bar {\n    text-transform: capitalize;\n    p {\n      padding: 0;\n      word-spacing: 5px;\n      display: flex;\n      align-items: center;\n      color: ", ";\n    }\n  }\n  .data-container {\n    margin: auto;\n  }\n  hr {\n    border-bottom: 2px solid #eceff8;\n    border-top: 0px;\n    margin: 1rem 0;\n  }\n  li {\n    margin-left: 1rem;\n  }\n  a {\n    color: ", ";\n  }\n  p {\n    margin: 1rem 0;\n    width: 100%;\n    color: ", ";\n  }\n"])), function (props) {
+var _templateObject$K;
+var StaticContainer$1 = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n  width: 100%;\n  color: ", ";\n  .top-bar {\n    background-color: #f5f5f5;\n    padding: 1rem;\n    text-align: center;\n    font-size: 3.2rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", ";\n    @media only screen and (max-width: 769px) {\n      font-size: 1.5rem;\n    }\n  }\n  .route-bar {\n    text-transform: capitalize;\n    p {\n      padding: 0;\n      word-spacing: 5px;\n      display: flex;\n      align-items: center;\n      color: ", ";\n    }\n  }\n  .data-container {\n    margin: auto;\n  }\n  hr {\n    border-bottom: 2px solid #eceff8;\n    border-top: 0px;\n    margin: 1rem 0;\n  }\n  li {\n    margin-left: 1rem;\n  }\n  a {\n    color: ", ";\n  }\n  p {\n    margin: 1rem 0;\n    width: 100%;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme.fontColor || '#606060';
 }, function (props) {
   return props.theme.primaryColor;
@@ -10950,7 +12339,7 @@ var StaticContainer$1 = styled.div(_templateObject$G || (_templateObject$G = _ta
   return props.theme.fontColor || '#606060';
 });
 
-var _templateObject$H;
+var _templateObject$L;
 var StaticPage = function StaticPage(_ref) {
   var _data$content;
   var _ref$colors = _ref.colors,
@@ -11018,9 +12407,9 @@ var StaticPage = function StaticPage(_ref) {
     referrerPolicy: "no-referrer-when-downgrade"
   })))));
 };
-var Root$c = styled(Box)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose([""])));
+var Root$c = styled(Box)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose([""])));
 
-var _templateObject$I;
+var _templateObject$M;
 var StaticPageList = function StaticPageList(_ref) {
   var _sortBy;
   var apiEndPoint = _ref.apiEndPoint,
@@ -11128,9 +12517,9 @@ var StaticPageList = function StaticPageList(_ref) {
     }
   }, "Not found")))));
 };
-var TitleContainer$2 = styled.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  padding: 1.2rem;\n  cursor: pointer;\n  color: #323232;\n  img {\n    max-width: 100%;\n  }\n  &:hover {\n    img {\n      transform: scale(1.01);\n    }\n  }\n"])));
+var TitleContainer$2 = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  padding: 1.2rem;\n  cursor: pointer;\n  color: #323232;\n  img {\n    max-width: 100%;\n  }\n  &:hover {\n    img {\n      transform: scale(1.01);\n    }\n  }\n"])));
 
-var _excluded$6 = ["userName", "children", "style"];
+var _excluded$7 = ["userName", "children", "style"];
 var colors$1 = ['#FFB900', '#D83B01', '#B50E0E', '#E81123', '#B4009E', '#5C2D91', '#0078D7', '#00B4FF', '#008272', '#107C10'];
 var getRandomColor = function getRandomColor(userName) {
   return colors$1[(userName === null || userName === void 0 ? void 0 : userName.length) % (colors$1 === null || colors$1 === void 0 ? void 0 : colors$1.length)];
@@ -11149,7 +12538,7 @@ var Avatar = function Avatar(_ref) {
   var userName = _ref.userName,
     children = _ref.children,
     style = _ref.style,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var backgroundColor = '#1f62ff';
   if (userName) {
     backgroundColor = getRandomColor(userName);
@@ -11164,7 +12553,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var _templateObject$J, _templateObject2$u;
+var _templateObject$N, _templateObject2$w;
 var SwitchUser = function SwitchUser(_ref) {
   var _customerData$filter, _customerData$filter$;
   var apiEndPoint = _ref.apiEndPoint,
@@ -11251,14 +12640,14 @@ var SwitchUser = function SwitchUser(_ref) {
     }, /*#__PURE__*/React__default.createElement(AiOutlineShop, null), /*#__PURE__*/React__default.createElement("span", null, (item === null || item === void 0 ? void 0 : item.dbaName) || (item === null || item === void 0 ? void 0 : item.company)))));
   }))));
 };
-var RootContainer$4 = styled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  margin: auto;\n  padding: 2.4rem;\n  max-width: 1920px;\n"])));
-var CustomerContainer = styled.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  transition: all 0.5s;\n  padding: 1.1rem;\n  border-radius: 1rem;\n  box-shadow: 2px 2px 6px 0px #00000020;\n  &:hover {\n    transform: scale(1.05);\n  }\n  .name {\n    color: ", ";\n    font-size: 2.5rem;\n    font-weight: 700;\n  }\n  .infoDetails {\n    font-size: 1.1rem;\n    color: #46464680;\n    margin: 1rem 0;\n    display: flex;\n    align-items: center;\n    svg {\n      color: ", ";\n      font-size: 1.5rem;\n      margin-right: 0.5rem;\n    }\n  }\n"])), function (props) {
+var RootContainer$4 = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  margin: auto;\n  padding: 2.4rem;\n  max-width: 1920px;\n"])));
+var CustomerContainer = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  transition: all 0.5s;\n  padding: 1.1rem;\n  border-radius: 1rem;\n  box-shadow: 2px 2px 6px 0px #00000020;\n  &:hover {\n    transform: scale(1.05);\n  }\n  .name {\n    color: ", ";\n    font-size: 2.5rem;\n    font-weight: 700;\n  }\n  .infoDetails {\n    font-size: 1.1rem;\n    color: #46464680;\n    margin: 1rem 0;\n    display: flex;\n    align-items: center;\n    svg {\n      color: ", ";\n      font-size: 1.5rem;\n      margin-right: 0.5rem;\n    }\n  }\n"])), function (props) {
   return props.theme.primaryColor || '#000000d9';
 }, function (props) {
   return props.theme.primaryColor || '#000000d9';
 });
 
-var _templateObject$K, _templateObject2$v;
+var _templateObject$O, _templateObject2$x;
 var ThankYou = function ThankYou(_ref) {
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? 0 : _ref$id,
@@ -11317,8 +12706,8 @@ var ThankYou = function ThankYou(_ref) {
     onClick: onContinue
   }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
 };
-var Root$d = styled(Box)(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose([""])));
-var StyledButton = styled.button(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  outline: none;\n  border: 1px solid;\n  border-color: ", ";\n  background: none;\n  border-radius: 14px;\n  padding: 10px 20px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.5s ease;\n  width: 200px;\n  color: ", ";\n  text-transform: uppercase;\n  &:hover {\n    cursor: pointer;\n    background: ", ";\n    color: #fff;\n  }\n"])), function (props) {
+var Root$d = styled(Box)(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
+var StyledButton = styled.button(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  outline: none;\n  border: 1px solid;\n  border-color: ", ";\n  background: none;\n  border-radius: 14px;\n  padding: 10px 20px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.5s ease;\n  width: 200px;\n  color: ", ";\n  text-transform: uppercase;\n  &:hover {\n    cursor: pointer;\n    background: ", ";\n    color: #fff;\n  }\n"])), function (props) {
   return props.theme.primaryColor;
 }, function (props) {
   return props.theme.primaryColor;
@@ -11342,7 +12731,7 @@ var DiscountSummaryModal = function DiscountSummaryModal(_ref) {
         backgroundColor: 'rgba(0, 0, 0, 0.1)'
       }
     }
-  }, /*#__PURE__*/React__default.createElement(DialogTitle, null, /*#__PURE__*/React__default.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(DialogTitle$1, null, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h4",
     fontWeight: "bold",
     align: "center",
@@ -11354,7 +12743,7 @@ var DiscountSummaryModal = function DiscountSummaryModal(_ref) {
     sx: {
       padding: 2
     }
-  }, /*#__PURE__*/React__default.createElement(TableContainer$3, {
+  }, /*#__PURE__*/React__default.createElement(TableContainer$4, {
     component: Box,
     sx: {
       border: '1px solid #e0e0e0',
@@ -11409,7 +12798,7 @@ var DiscountSummaryModal = function DiscountSummaryModal(_ref) {
     sx: {
       marginY: 3
     }
-  }), /*#__PURE__*/React__default.createElement(TableContainer$3, {
+  }), /*#__PURE__*/React__default.createElement(TableContainer$4, {
     component: Box,
     sx: {
       border: '1px solid #e0e0e0',
@@ -11472,38 +12861,38 @@ var DiscountSummaryModal = function DiscountSummaryModal(_ref) {
   }, "Okay"))));
 };
 
-var _templateObject$L, _templateObject2$w, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7;
-var CheckoutRootContainer = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 2rem;\n  background-color: ", ";\n  font-size: 16px;\n\n  div,\n  button,\n  span {\n    font-size: 16px;\n  }\n  @media only screen and (max-width: 1600px) {\n    padding: 3em 0.5em;\n  }\n  @media screen and (max-width: 900px) {\n    div,\n    button,\n    span {\n      font-size: 12px;\n    }\n    padding: 2rem 0.5rem;\n  }\n"])), function (props) {
+var _templateObject$P, _templateObject2$y, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$9;
+var CheckoutRootContainer = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 2rem;\n  background-color: ", ";\n  font-size: 16px;\n\n  div,\n  button,\n  span {\n    font-size: 16px;\n  }\n  @media only screen and (max-width: 1600px) {\n    padding: 3em 0.5em;\n  }\n  @media screen and (max-width: 900px) {\n    div,\n    button,\n    span {\n      font-size: 12px;\n    }\n    padding: 2rem 0.5rem;\n  }\n"])), function (props) {
   return props.bg;
 });
-var CheckoutPageContainer = styled.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0 auto;\n  padding: 2em;\n  padding-left: min(4.5em, 2.5vw);\n  color: rgba(50, 50, 50, 1);\n  /* max-height: 90vh; */\n  overflow: hidden;\n  /* background: gainsboro; */\n  border-radius: 28px;\n  /* background-color: #fff8f6; */\n  @media only screen and (max-width: 1200px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 768px) {\n    padding: 1em 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n  ////////////checkout and cart fonts\n  /////////////////\n  /* /////remove arrows from number input */\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  /* //////mui inputs */\n\n  .Mui-checked {\n    color: ", ";\n  }\n\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n    outline: none;\n  }\n\n  .MuiInputBase-root .MuiOutlinedInput-root,\n  .MuiInputBase-colorPrimary,\n  .MuiInputBase-fullWidth,\n  .MuiInputBase-formControl {\n    border-radius: 10px;\n  }\n  // /* /////stepper length */\n  .MuiStepConnector-line,\n  .MuiStepConnector-lineVertical {\n    min-height: 60px !important;\n  }\n\n  @media only screen and (max-width: 900px) {\n    .MuiStepConnector-line,\n    .MuiStepConnector-lineVertical {\n      min-height: 40px !important;\n    }\n  }\n"])), function (props) {
+var CheckoutPageContainer = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0 auto;\n  padding: 2em;\n  padding-left: min(4.5em, 2.5vw);\n  color: rgba(50, 50, 50, 1);\n  /* max-height: 90vh; */\n  overflow: hidden;\n  /* background: gainsboro; */\n  border-radius: 28px;\n  /* background-color: #fff8f6; */\n  @media only screen and (max-width: 1200px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 768px) {\n    padding: 1em 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n  ////////////checkout and cart fonts\n  /////////////////\n  /* /////remove arrows from number input */\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  /* //////mui inputs */\n\n  .Mui-checked {\n    color: ", ";\n  }\n\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n    outline: none;\n  }\n\n  .MuiInputBase-root .MuiOutlinedInput-root,\n  .MuiInputBase-colorPrimary,\n  .MuiInputBase-fullWidth,\n  .MuiInputBase-formControl {\n    border-radius: 10px;\n  }\n  // /* /////stepper length */\n  .MuiStepConnector-line,\n  .MuiStepConnector-lineVertical {\n    min-height: 60px !important;\n  }\n\n  @media only screen and (max-width: 900px) {\n    .MuiStepConnector-line,\n    .MuiStepConnector-lineVertical {\n      min-height: 40px !important;\n    }\n  }\n"])), function (props) {
   return props.maxWidth || '1605px';
 }, function (props) {
   return props.bg || '#fff8f6';
 }, function (props) {
   return props.primaryColor || 'rgba(50, 50, 50, 1)';
 });
-var Row = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var CheckoutMainWithHeader = styled(Stack)(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var CheckoutMain = styled.div(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 1008px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: 2em;\n  max-height: 65vh;\n  padding-right: 2em;\n  overflow-y: auto;\n  position: relative;\n  padding-top: 2em;\n  padding-bottom: 3em;\n  /* width */\n  ::-webkit-scrollbar {\n    width: 10px;\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 16px;\n  }\n  @media only screen and (max-width: 1200px) {\n    margin-bottom: 3em;\n    min-height: max-content;\n    max-height: max-content;\n    margin-right: 0;\n    overflow: visible;\n  }\n  @media only screen and (max-width: 768px) {\n    // max-width: 100vw;\n    padding-right: 0;\n    // width: 98vw;\n    // min-width: 90vw;\n    padding-top: 1em;\n  }\n  /* overflow: hidden; */\n"])), function (props) {
+var Row = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var CheckoutMainWithHeader = styled(Stack)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var CheckoutMain = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 1008px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: 2em;\n  max-height: 65vh;\n  padding-right: 2em;\n  overflow-y: auto;\n  position: relative;\n  padding-top: 2em;\n  padding-bottom: 3em;\n  /* width */\n  ::-webkit-scrollbar {\n    width: 10px;\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 16px;\n  }\n  @media only screen and (max-width: 1200px) {\n    margin-bottom: 3em;\n    min-height: max-content;\n    max-height: max-content;\n    margin-right: 0;\n    overflow: visible;\n  }\n  @media only screen and (max-width: 768px) {\n    // max-width: 100vw;\n    padding-right: 0;\n    // width: 98vw;\n    // min-width: 90vw;\n    padding-top: 1em;\n  }\n  /* overflow: hidden; */\n"])), function (props) {
   return props.bg || 'rgba(102,112,128,0.5)';
 }, function (props) {
   return props.bg || 'rgba(102,112,128,0.5)';
 }, function (props) {
   return props.color;
 });
-var CheckoutHeading = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  margin-left: 2.5em;\n  margin-bottom: 2em;\n  h5 {\n    font-size: 2.3em;\n    font-weight: 600;\n    text-transform: capitalize;\n  }\n  p {\n    font-size: 0.875em;\n    margin-top: 0.5em;\n  }\n  @media only screen and (max-width: 768px) {\n    margin-left: 0;\n    padding-left: 1em;\n  }\n"])));
-var CheckoutHeader = styled(Row)(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: auto;\n  justify-content: space-around;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  background-color: white;\n  z-index: 1;\n  justify-content: flex-start;\n  min-height: 4em;\n  max-height: 4em;\n  max-width: 60em;\n  background: #ffffff;\n  border-radius: 20px;\n  color: #7d7b7b;\n  padding: 0 2em;\n  margin: 0 2em 1em 1em;\n  .row {\n    display: flex;\n    color: inherit;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    margin-right: 2.4%;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p,\n    span {\n      font-size: 0.95em;\n      color: inherit;\n    }\n  }\n  .checked {\n    p,\n    span {\n      color: #323232;\n    }\n    .icon {\n      color: #249937;\n    }\n  }\n  @media only screen and (max-width: 1200px) {\n    margin-right: 0em;\n  }\n  @media only screen and (max-width: 768px) {\n    width: 100%;\n    padding: 2em 1em;\n    margin: 1.4em 0;\n    .row {\n      margin-right: 4.5%;\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
-var CheckoutStepIcon = styled.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  margin-left: 2px;\n  .circle {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    font-size: 5px;\n    display: grid;\n    place-items: center;\n    margin: auto;\n    padding: 0;\n  }\n  .ic {\n    font-size: 8px;\n  }\n"])));
+var CheckoutHeading = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  margin-left: 2.5em;\n  margin-bottom: 2em;\n  h5 {\n    font-size: 2.3em;\n    font-weight: 600;\n    text-transform: capitalize;\n  }\n  p {\n    font-size: 0.875em;\n    margin-top: 0.5em;\n  }\n  @media only screen and (max-width: 768px) {\n    margin-left: 0;\n    padding-left: 1em;\n  }\n"])));
+var CheckoutHeader = styled(Row)(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: auto;\n  justify-content: space-around;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  background-color: white;\n  z-index: 1;\n  justify-content: flex-start;\n  min-height: 4em;\n  max-height: 4em;\n  max-width: 60em;\n  background: #ffffff;\n  border-radius: 20px;\n  color: #7d7b7b;\n  padding: 0 2em;\n  margin: 0 2em 1em 1em;\n  .row {\n    display: flex;\n    color: inherit;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    margin-right: 2.4%;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p,\n    span {\n      font-size: 0.95em;\n      color: inherit;\n    }\n  }\n  .checked {\n    p,\n    span {\n      color: #323232;\n    }\n    .icon {\n      color: #249937;\n    }\n  }\n  @media only screen and (max-width: 1200px) {\n    margin-right: 0em;\n  }\n  @media only screen and (max-width: 768px) {\n    width: 100%;\n    padding: 2em 1em;\n    margin: 1.4em 0;\n    .row {\n      margin-right: 4.5%;\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
+var CheckoutStepIcon = styled.div(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  margin-left: 2px;\n  .circle {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    font-size: 5px;\n    display: grid;\n    place-items: center;\n    margin: auto;\n    padding: 0;\n  }\n  .ic {\n    font-size: 8px;\n  }\n"])));
 
-var _templateObject$M, _templateObject2$x, _templateObject3$o;
-var CheckoutSummaryContainer = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: max(1.5em, 30px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 25rem;\n  min-width: min(25rem, 95%);\n  font-size: 16px;\n  margin-top: 6.15em;\n  @media only screen and (max-width: 1200px) {\n    margin-top: 0;\n  }\n"])), function (props) {
+var _templateObject$Q, _templateObject2$z, _templateObject3$q;
+var CheckoutSummaryContainer = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: max(1.5em, 30px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 25rem;\n  min-width: min(25rem, 95%);\n  font-size: 16px;\n  margin-top: 6.15em;\n  @media only screen and (max-width: 1200px) {\n    margin-top: 0;\n  }\n"])), function (props) {
   return props.bg || 'rgba(255, 240, 236, 1)';
 }, function (props) {
   return props.color || ' rgba(50, 50, 50, 1)';
 });
-var TextRow = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 90%;\n  margin-bottom: 0.8rem;\n  padding-bottom: 0.8rem;\n  width: 90%;\n  border-bottom: 1px solid #f7f7f7;\n  .text {\n    font-size: 1.1em;\n    text-transform: capitalize;\n  }\n  .total {\n    font-size: 1.65em;\n    font-weight: 800;\n  }\n"])));
-var FilledInfo = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  margin-bottom: 2em;\n  .heading {\n    font-size: 1.25em;\n    font-weight: 800;\n    margin-bottom: 0.8em;\n  }\n\n  p {\n    font-size: 0.875em;\n    text-transform: capitalize;\n    max-width: 60%;\n  }\n  .bold {\n    font-weight: 700;\n    margin-bottom: 0.8em;\n    max-width: 300px;\n    width: fit-content;\n  }\n  .payment {\n    width: 70px;\n    height: 48px;\n    background: #ffffff;\n    border-radius: 15.875px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n  }\n  .blank {\n    opacity: 0;\n  }\n"])));
+var TextRow = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 90%;\n  margin-bottom: 0.8rem;\n  padding-bottom: 0.8rem;\n  width: 90%;\n  border-bottom: 1px solid #f7f7f7;\n  .text {\n    font-size: 1.1em;\n    text-transform: capitalize;\n  }\n  .total {\n    font-size: 1.65em;\n    font-weight: 800;\n  }\n"])));
+var FilledInfo = styled.div(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  margin-bottom: 2em;\n  .heading {\n    font-size: 1.25em;\n    font-weight: 800;\n    margin-bottom: 0.8em;\n  }\n\n  p {\n    font-size: 0.875em;\n    text-transform: capitalize;\n    max-width: 60%;\n  }\n  .bold {\n    font-weight: 700;\n    margin-bottom: 0.8em;\n    max-width: 300px;\n    width: fit-content;\n  }\n  .payment {\n    width: 70px;\n    height: 48px;\n    background: #ffffff;\n    border-radius: 15.875px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n  }\n  .blank {\n    opacity: 0;\n  }\n"])));
 
 var CheckoutSummary = function CheckoutSummary(_ref) {
   var billingInformation = _ref.billingInformation,
@@ -11575,14 +12964,14 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
   }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
 };
 
-var _templateObject$N, _templateObject2$y, _templateObject3$p, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$8, _templateObject9$6, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2;
-var StepContainer = styled.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 60em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  // @media screen and (max-width: 1200px) {\n  //   width: 80vw;\n  //   min-width: 0;\n  // }\n  @media screen and (max-width: 768px) {\n    // width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 600px) {\n    // width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
-var StepsContent = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: ", ";\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
+var _templateObject$R, _templateObject2$A, _templateObject3$r, _templateObject4$m, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$a, _templateObject9$7, _templateObject10$5, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$3;
+var StepContainer = styled.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 60em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  // @media screen and (max-width: 1200px) {\n  //   width: 80vw;\n  //   min-width: 0;\n  // }\n  @media screen and (max-width: 768px) {\n    // width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 600px) {\n    // width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
+var StepsContent = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: ", ";\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
   return 'transparent' + '!important';
 }, function (props) {
   return props.bg || 'red';
 });
-var StepsHeaderContainer = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  color: #323232;\n  /* padding: ", "; */\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #f6f6f6;\n  background: #ffffff;\n  border-radius: 20px;\n  // max-width: 900px;\n  min-height: 4.35em;\n  max-height: 4.35em;\n  padding: ", ";\n  h5 {\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: capitalize;\n    margin-left: 0.6em;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n    cursor: ", ";\n  }\n  .red {\n    font-weight: 600;\n    color: #fd0015;\n    font-size: inherit;\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 0.5em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
+var StepsHeaderContainer = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  color: #323232;\n  /* padding: ", "; */\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #f6f6f6;\n  background: #ffffff;\n  border-radius: 20px;\n  // max-width: 900px;\n  min-height: 4.35em;\n  max-height: 4.35em;\n  padding: ", ";\n  h5 {\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: capitalize;\n    margin-left: 0.6em;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n    cursor: ", ";\n  }\n  .red {\n    font-weight: 600;\n    color: #fd0015;\n    font-size: inherit;\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 0.5em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
   return props.single ? '1.8em 2em' : '1em 0';
 }, function (props) {
   return props.single ? '-1.56em' : '1em';
@@ -11595,11 +12984,11 @@ var StepsHeaderContainer = styled.div(_templateObject3$p || (_templateObject3$p
 }, function (props) {
   return props.username ? 'not-allowed' : 'pointer';
 });
-var TextFeildContainer = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  background: ", ";\n  border-radius: 10px;\n  && {\n    input {\n      font-size: 0.875em !important;\n      color: black;\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])), function (props) {
+var TextFeildContainer = styled.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  background: ", ";\n  border-radius: 10px;\n  && {\n    input {\n      font-size: 0.875em !important;\n      color: black;\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])), function (props) {
   var _props$theme, _props$theme$input;
   return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$input = _props$theme.input) === null || _props$theme$input === void 0 ? void 0 : _props$theme$input.bg) || 'transparent';
 });
-var CommonCheckoutBtn = styled.button(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: ", ";\n  height: ", ";\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+var CommonCheckoutBtn = styled.button(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: ", ";\n  height: ", ";\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
   return props.width || '8.05em';
 }, function (props) {
   return props.height || '2.25em';
@@ -11612,7 +13001,7 @@ var CommonCheckoutBtn = styled.button(_templateObject5$g || (_templateObject5$g
 });
 var Select = styled.div.attrs({
   className: 'checkout-input'
-})(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 54px;\n  border-radius: 10px;\n  background: ", ";\n  outline: none;\n  border: none;\n  padding: 0 1em;\n  cursor: pointer;\n  select {\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0.5em 0;\n    color: rgba(107, 106, 106, 0.6);\n    background: ", ";\n  }\n"])), function (props) {
+})(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 54px;\n  border-radius: 10px;\n  background: ", ";\n  outline: none;\n  border: none;\n  padding: 0 1em;\n  cursor: pointer;\n  select {\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0.5em 0;\n    color: rgba(107, 106, 106, 0.6);\n    background: ", ";\n  }\n"])), function (props) {
   var _props$theme2, _props$theme2$input;
   return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : (_props$theme2$input = _props$theme2.input) === null || _props$theme2$input === void 0 ? void 0 : _props$theme2$input.bg) || 'transparent';
 }, function (props) {
@@ -11620,12 +13009,12 @@ var Select = styled.div.attrs({
 });
 var SaveButton = styled.button.attrs({
   className: 'checkout-btn'
-})(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  font-size: 0.8125em;\n  text-transform: uppercase;\n  font-weight: 600;\n  border-radius: 7px;\n  padding: 0.55em 1em;\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 1em 0;\n  letter-spacing: 1px;\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+})(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  font-size: 0.8125em;\n  text-transform: uppercase;\n  font-weight: 600;\n  border-radius: 7px;\n  padding: 0.55em 1em;\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 1em 0;\n  letter-spacing: 1px;\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
   return props.color || '#FD0015';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 });
-var ButtonRowContainer = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  button {\n    width: 4.862em;\n    height: 1.96em;\n    border-radius: 0.43em;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    font-weight: 600;\n    letter-spacing: 1px;\n    color: white;\n    opacity: ", ";\n    background-color: ", ";\n    border: 2px solid\n      ", ";\n    cursor: ", ";\n  }\n  .back {\n    font-size: 0.875em;\n    font-weight: 500;\n    justify-content: flex-start;\n    margin-right: 0.2em;\n    color: #323232;\n    background: transparent;\n    border: none;\n    cursor: ", ";\n    font-size: 0.8em;\n    transition: 0.4s;\n    opacity: 1;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
+var ButtonRowContainer = styled.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  button {\n    width: 4.862em;\n    height: 1.96em;\n    border-radius: 0.43em;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    font-weight: 600;\n    letter-spacing: 1px;\n    color: white;\n    opacity: ", ";\n    background-color: ", ";\n    border: 2px solid\n      ", ";\n    cursor: ", ";\n  }\n  .back {\n    font-size: 0.875em;\n    font-weight: 500;\n    justify-content: flex-start;\n    margin-right: 0.2em;\n    color: #323232;\n    background: transparent;\n    border: none;\n    cursor: ", ";\n    font-size: 0.8em;\n    transition: 0.4s;\n    opacity: 1;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
   return props.disabledNext && '0.5';
 }, function (props) {
   return props.color || '#fd0015';
@@ -11636,7 +13025,7 @@ var ButtonRowContainer = styled.div(_templateObject8$8 || (_templateObject8$8 =
 }, function (props) {
   return props.disabledBack ? 'not-allowed' : 'pointer';
 });
-var CheckBoxRow = styled.div(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  margin-left: ", ";\n  p {\n    font-size: 0.85em;\n  }\n\n  button {\n    border: none;\n    border-radius: 4px;\n    padding: 0.8rem 3rem;\n    background: ", ";\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: ", ";\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 600;\n    font-size: 1.125em;\n  }\n  .red {\n    margin-left: 0.5em;\n    color: ", ";\n  }\n  .medium {\n    font-weight: 600;\n    font-size: 1em;\n  }\n  @media only screen and (max-width: 600px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n\n    .back {\n      &:hover {\n        padding: 0.8em 2em;\n      }\n      margin-left: 0;\n    }\n  }\n"])), function (props) {
+var CheckBoxRow = styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  margin-left: ", ";\n  p {\n    font-size: 0.85em;\n  }\n\n  button {\n    border: none;\n    border-radius: 4px;\n    padding: 0.8rem 3rem;\n    background: ", ";\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: ", ";\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 600;\n    font-size: 1.125em;\n  }\n  .red {\n    margin-left: 0.5em;\n    color: ", ";\n  }\n  .medium {\n    font-weight: 600;\n    font-size: 1em;\n  }\n  @media only screen and (max-width: 600px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n\n    .back {\n      &:hover {\n        padding: 0.8em 2em;\n      }\n      margin-left: 0;\n    }\n  }\n"])), function (props) {
   return props.padding;
 }, function (props) {
   return props.marginLeft;
@@ -11647,14 +13036,14 @@ var CheckBoxRow = styled.div(_templateObject9$6 || (_templateObject9$6 = _tagged
 }, function (prop) {
   return prop.colorText || 'red';
 });
-var CreditCardFextField = styled.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
+var CreditCardFextField = styled.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
   return prop.bgInput + '!important' || '';
 }, function (prop) {
   return prop.btnBg + '!important' || '';
 });
-var CardHeading = styled.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n  margin-bottom: 1rem;\n"])));
-var DeliveryOptionContainer = styled.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var DeliveryOption = styled.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 691px;\n  min-height: 40px;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition: 0.3s;\n  cursor: pointer;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: 5px;\n  &:last-child {\n    border-bottom: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    border: ", ";\n    border-radius: 5px;\n  }\n  p {\n    font-weight: 500;\n    color: black;\n    font-size: 0.95em;\n    text-transform: capitalize;\n  }\n  .circle {\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n    margin-right: 1em;\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    cursor: pointer;\n    .inner {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: linear-gradient(\n        326.37deg,\n        rgba(67, 58, 42, 0.9) -219.66%,\n        rgba(255, 255, 255, 0.9) 90.45%\n      );\n      box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n        inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n    }\n    .fill {\n      width: 6px;\n      height: 6px;\n      background: radial-gradient(\n            15.79% 15.79% at 36.84% 31.58%,\n            #ffffff 0%,\n            rgba(255, 255, 255, 0) 100%\n          )\n          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n        linear-gradient(\n          358.85deg,\n          rgba(157, 18, 30, 0.2) -19.81%,\n          rgba(12, 96, 157, 0) 64.74%\n        ),\n        radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n      background-blend-mode: normal, multiply, normal, normal;\n      box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n        0px 1px 1px rgba(253, 0, 21, 0.2);\n      border-radius: 50%;\n      background: ", ";\n    }\n  }\n  .amount {\n    margin-left: auto;\n    color: ", ";\n    font-weight: ", ";\n    font-size: 0.95em;\n  }\n"])), function (props) {
+var CardHeading = styled.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n  margin-bottom: 1rem;\n"])));
+var DeliveryOptionContainer = styled.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var DeliveryOption = styled.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 691px;\n  min-height: 40px;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition: 0.3s;\n  cursor: pointer;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: 5px;\n  &:last-child {\n    border-bottom: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    border: ", ";\n    border-radius: 5px;\n  }\n  p {\n    font-weight: 500;\n    color: black;\n    font-size: 0.95em;\n    text-transform: capitalize;\n  }\n  .circle {\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n    margin-right: 1em;\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    cursor: pointer;\n    .inner {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: linear-gradient(\n        326.37deg,\n        rgba(67, 58, 42, 0.9) -219.66%,\n        rgba(255, 255, 255, 0.9) 90.45%\n      );\n      box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n        inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n    }\n    .fill {\n      width: 6px;\n      height: 6px;\n      background: radial-gradient(\n            15.79% 15.79% at 36.84% 31.58%,\n            #ffffff 0%,\n            rgba(255, 255, 255, 0) 100%\n          )\n          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n        linear-gradient(\n          358.85deg,\n          rgba(157, 18, 30, 0.2) -19.81%,\n          rgba(12, 96, 157, 0) 64.74%\n        ),\n        radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n      background-blend-mode: normal, multiply, normal, normal;\n      box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n        0px 1px 1px rgba(253, 0, 21, 0.2);\n      border-radius: 50%;\n      background: ", ";\n    }\n  }\n  .amount {\n    margin-left: auto;\n    color: ", ";\n    font-weight: ", ";\n    font-size: 0.95em;\n  }\n"])), function (props) {
   return props.hovered ? props.bg : '';
 }, function (props) {
   return props.hovered ? "1px solid " + props.border : "1px solid" + props.bg;
@@ -11673,19 +13062,19 @@ var DeliveryOption = styled.div(_templateObject13$2 || (_templateObject13$2 = _t
 }, function (props) {
   return props.hovered ? '800' : '700';
 });
-var CreditCard = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n"])));
-var PaymentLi = styled.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 1.5em;\n  cursor: pointer;\n  .circle {\n    /* background: #323232; */\n    width: 16px;\n    height: 16px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    border: 1px solid #323232;\n    margin-right: 1em;\n  }\n  .innerCircle {\n    background: #323232;\n    border-radius: 50%;\n    width: 6px;\n    height: 6px;\n  }\n  p {\n    font-size: 1em;\n    color: black;\n    text-transform: capitalize;\n    font-weight: 500;\n  }\n"])));
-var StyledTableRow = styled(TableRow)(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n    }\n    .max {\n      min-width:  max-content;\n      word-break: break-word;\n      @media only screen and (max-width: 768px) {\n        min-width: 5rem;\n      }\n    }\n    .red {\n      color: ", "\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 600;\n    }\n    .sm {\n      font-weight: 500;\n    }\n    .bolder {\n      font-weight: 700;\n      font-size: 1em;\n    }\n    @media only screen and (max-width: 600px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 10px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n      .bolder {\n        font-size: 12px;\n      }\n    }\n  }\n"])), function (props) {
+var CreditCard = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n"])));
+var PaymentLi = styled.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 1.5em;\n  cursor: pointer;\n  .circle {\n    /* background: #323232; */\n    width: 16px;\n    height: 16px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    border: 1px solid #323232;\n    margin-right: 1em;\n  }\n  .innerCircle {\n    background: #323232;\n    border-radius: 50%;\n    width: 6px;\n    height: 6px;\n  }\n  p {\n    font-size: 1em;\n    color: black;\n    text-transform: capitalize;\n    font-weight: 500;\n  }\n"])));
+var StyledTableRow = styled(TableRow)(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n    }\n    .max {\n      min-width:  max-content;\n      word-break: break-word;\n      @media only screen and (max-width: 768px) {\n        min-width: 5rem;\n      }\n    }\n    .red {\n      color: ", "\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 600;\n    }\n    .sm {\n      font-weight: 500;\n    }\n    .bolder {\n      font-weight: 700;\n      font-size: 1em;\n    }\n    @media only screen and (max-width: 600px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 10px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n      .bolder {\n        font-size: 12px;\n      }\n    }\n  }\n"])), function (props) {
   return props.colored ? props.bg || "'rgba(255, 240, 236, 1)'" : 'white';
 }, function (props) {
   return props.bg || 'red';
 });
-var StyledTableCell = styled(TableCell)(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 768px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n    @media only screen and (min-width: 768px) {\n      display: ", ";\n    }\n  }\n"])), function (props) {
+var StyledTableCell = styled(TableCell)(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 768px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n    @media only screen and (min-width: 768px) {\n      display: ", ";\n    }\n  }\n"])), function (props) {
   return props.noSmall ? 'none' : '';
 }, function (props) {
   return props.noAboveSmall ? 'none' : '';
 });
-var BottomGrid = styled(Grid)(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 600;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: ", ";\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    border: 1px solid\n      ", ";\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 600;\n      color: ", ";\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), function (prop) {
+var BottomGrid = styled(Grid)(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 600;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: ", ";\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    border: 1px solid\n      ", ";\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 600;\n      color: ", ";\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), function (prop) {
   return prop.primaryColor || 'rgba(107, 106, 106, 1)';
 }, function (prop) {
   var _prop$bgTextArea;
@@ -13135,7 +14524,7 @@ var erSessionStorage = {
   }
 };
 
-var _templateObject$O, _templateObject2$z;
+var _templateObject$S, _templateObject2$B;
 var ConsentForm = function ConsentForm(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     token = _ref.token,
@@ -13301,7 +14690,7 @@ var InfoComponent = function InfoComponent(_ref2) {
     });
   }))));
 };
-var InfoContainer$1 = styled.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  h2 {\n    border-bottom: 1px solid #00000040;\n    margin-bottom: 0.8rem;\n  }\n  p {\n    font-size: 1.2rem;\n  }\n"])));
+var InfoContainer$1 = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  h2 {\n    border-bottom: 1px solid #00000040;\n    margin-bottom: 0.8rem;\n  }\n  p {\n    font-size: 1.2rem;\n  }\n"])));
 var InfoItem = function InfoItem(_ref3) {
   var name = _ref3.name,
     value = _ref3.value;
@@ -13314,7 +14703,7 @@ var InfoItem = function InfoItem(_ref3) {
     item: true
   }, /*#__PURE__*/React__default.createElement("p", null, value))));
 };
-var InfoItemContainer = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  background: #00000010;\n  padding: 0.5rem;\n"])));
+var InfoItemContainer = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  background: #00000010;\n  padding: 0.5rem;\n"])));
 
 var PaypalComponent = function PaypalComponent(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
@@ -13508,7 +14897,7 @@ var Step4 = function Step4(_ref) {
     icon: /*#__PURE__*/React__default.createElement(MdOutlineStickyNote2, {
       className: "icon"
     })
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(Table, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(TableContainer$4, null, /*#__PURE__*/React__default.createElement(Table, {
     "aria-label": "customized table",
     sx: {
       maxHeight: '600px'
@@ -14689,8 +16078,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref9) {
   }, props)));
 };
 
-var _templateObject$P, _templateObject2$A, _templateObject3$q;
-var columns = [{
+var _templateObject$T, _templateObject2$C, _templateObject3$s;
+var columns$1 = [{
   id: 'id',
   label: 'Id',
   isSearchable: 'true'
@@ -14753,7 +16142,7 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
   };
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer$3, {
     primaryColor: primaryColor
-  }, /*#__PURE__*/React__default.createElement("span", null, currentTimeText()), /*#__PURE__*/React__default.createElement("b", null, " ", name, "!")), /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+  }, /*#__PURE__*/React__default.createElement("span", null, currentTimeText()), /*#__PURE__*/React__default.createElement("b", null, " ", name, "!")), /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     extraFilterParams: queryParams,
     listUpdate: triggerTableData,
@@ -14762,7 +16151,7 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: columns,
+    columns: columns$1,
     apiData: {
       url: "/vendor/portal/purchaseOrder/list",
       apiEndPoint: API_BASE_URL,
@@ -14804,15 +16193,15 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
     setTriggerTableData: setTriggerTableData
   })));
 };
-var TableContainer$2 = styled.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
-var TypographyContainer$9 = styled(Typography)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TableContainer$3 = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  margin: 0.5rem;\n  border-radius: 14px;\n"])));
+var TypographyContainer$9 = styled(Typography)(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
-var TitleContainer$3 = styled.h4(_templateObject3$q || (_templateObject3$q = _taggedTemplateLiteralLoose(["\n  font-size: 2.7rem;\n  span {\n    color: '#000';\n    font-weight: 500;\n  }\n  b {\n    color: ", ";\n  }\n  @media only screen and (max-width: 608px) {\n    font-size: 2.2rem;\n  }\n"])), function (props) {
+var TitleContainer$3 = styled.h4(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  font-size: 2.7rem;\n  span {\n    color: '#000';\n    font-weight: 500;\n  }\n  b {\n    color: ", ";\n  }\n  @media only screen and (max-width: 608px) {\n    font-size: 2.2rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 });
 
-var columns$1 = [{
+var columns$2 = [{
   id: 'id',
   label: 'Id'
 }, {
@@ -15106,7 +16495,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
         fontSize: '1.2rem'
       }
     }, item === null || item === void 0 ? void 0 : item.value)))));
-  }))))))), /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+  }))))))), /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     extraFilterParams: queryParams,
     listUpdate: triggerTableData,
@@ -15115,7 +16504,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: columns$1,
+    columns: columns$2,
     apiData: {
       url: "/vendor/portal/purchaseOrder/" + (router === null || router === void 0 ? void 0 : (_router$query = router.query) === null || _router$query === void 0 ? void 0 : _router$query.id),
       apiEndPoint: API_BASE_URL,
@@ -15163,7 +16552,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 6
-  }, /*#__PURE__*/React__default.createElement(TableContainer$2, {
+  }, /*#__PURE__*/React__default.createElement(TableContainer$3, {
     style: {
       boxShadow: 'rgba(0,0,0,0.2) 0px 0px 8px 0px'
     }
@@ -15189,7 +16578,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
   }))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 6
-  }, /*#__PURE__*/React__default.createElement(TableContainer$2, {
+  }, /*#__PURE__*/React__default.createElement(TableContainer$3, {
     style: {
       boxShadow: 'rgba(0,0,0,0.2) 0px 0px 8px 0px'
     }
@@ -15215,7 +16604,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
   })))))));
 };
 
-var columns$2 = [{
+var columns$3 = [{
   id: 'name',
   label: 'Name',
   isSearchable: true
@@ -15306,7 +16695,7 @@ var VendorInventory = function VendorInventory(_ref) {
   var onChangeQueryParams = function onChangeQueryParams(data) {
     setTableParams(data);
   };
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
     extraFilterParams: queryParams,
     listUpdate: triggerTableData,
@@ -15316,7 +16705,7 @@ var VendorInventory = function VendorInventory(_ref) {
       x: 1000
     },
     tableId: "master-child-map",
-    columns: columns$2,
+    columns: columns$3,
     apiData: {
       apiEndPoint: API_BASE_URL,
       token: token,
@@ -15379,7 +16768,7 @@ var VendorInventory = function VendorInventory(_ref) {
   })));
 };
 
-var _templateObject$Q, _templateObject2$B, _templateObject3$r, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$9;
+var _templateObject$U, _templateObject2$D, _templateObject3$t, _templateObject4$n, _templateObject5$j, _templateObject6$h, _templateObject7$d, _templateObject8$b;
 var VendorLogin = function VendorLogin(_ref) {
   var primaryColor = _ref.primaryColor,
     API_BASE_URL = _ref.API_BASE_URL;
@@ -15485,16 +16874,16 @@ var VendorLogin = function VendorLogin(_ref) {
     color: "inherit"
   }) : 'sign in'))))));
 };
-var Container$3 = styled.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgb(255, 255, 255);\n  font-size: 16px !important;\n  padding: 1rem;\n  @media only screen and (max-width: 640px) {\n    font-size: 14px !important;\n  }\n"])));
-var StyledLogin = styled.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  height: 70%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 1em;\n  align-items: center;\n"])));
-var StyledCard = styled(Card$1)(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n  width: min(100%, 489px);\n  height: 100%;\n  max-height: 450px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #cac8c8;\n  flex-direction: column;\n  background: white;\n  // min-height: 500px;\n  h4 {\n    font-size: 1.5em;\n    margin-bottom: 1em;\n    margin-top: -2em;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  button {\n    text-transform: capitalize;\n    letter-spacing: 1px;\n    font-size: 1em;\n    font-weight: 500;\n  }\n"])));
-var H1 = styled(Typography)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  margin-top: 1rem;\n"])));
-var StyleInputBx = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 1px solid rgb(202, 200, 200);\n  // padding:.5em;\n  min-width: min(80vw, 360px);\n  // border-radius: 20px;\n  overflow: hidden;\n  margin: 0.6em 0;\n  // padding:.2em 0;\n  .icon {\n    border-right: 1px solid rgb(202, 200, 200);\n    height: 100%;\n    padding: 1em;\n    display: grid;\n    place-items: center;\n    width: 15%;\n    box-sizing: border-box;\n    color: grey;\n  }\n  input {\n    width: 85%;\n    height: 100%;\n    outline: none;\n    padding: 0 1em;\n    font-size: 1.1em;\n    border: none;\n    &:focus,\n    &:hover {\n      outline: none !important;\n    }\n  }\n"])));
-var ShowPassBtn = styled.span(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  padding-right: 0.4em;\n  display: grid;\n  place-items: center;\n  font-size: 25px;\n  color: grey;\n  cursor: pointer;\n"])));
-var ButtonContianer = styled.span(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 360px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  // @include flexRow(space-between);\n  margin-top: 1em;\n  @media only screen and (max-width: 640px) {\n    padding: 0 1em;\n  }\n"])));
-var StyledButton$1 = styled(Button)(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n  width: 100px;\n  height: 46px;\n  box-sizing: border-box;\n\n  span {\n    padding: 0.5em;\n  }\n  @media only screen and (max-width: 640px) {\n    height: 35px;\n  }\n"])));
+var Container$3 = styled.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: rgb(255, 255, 255);\n  font-size: 16px !important;\n  padding: 1rem;\n  @media only screen and (max-width: 640px) {\n    font-size: 14px !important;\n  }\n"])));
+var StyledLogin = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  height: 70%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 1em;\n  align-items: center;\n"])));
+var StyledCard = styled(Card$1)(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: min(100%, 489px);\n  height: 100%;\n  max-height: 450px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid #cac8c8;\n  flex-direction: column;\n  background: white;\n  // min-height: 500px;\n  h4 {\n    font-size: 1.5em;\n    margin-bottom: 1em;\n    margin-top: -2em;\n    text-transform: uppercase;\n    font-weight: 500;\n  }\n  button {\n    text-transform: capitalize;\n    letter-spacing: 1px;\n    font-size: 1em;\n    font-weight: 500;\n  }\n"])));
+var H1 = styled(Typography)(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  margin-top: 1rem;\n"])));
+var StyleInputBx = styled.div(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 1px solid rgb(202, 200, 200);\n  // padding:.5em;\n  min-width: min(80vw, 360px);\n  // border-radius: 20px;\n  overflow: hidden;\n  margin: 0.6em 0;\n  // padding:.2em 0;\n  .icon {\n    border-right: 1px solid rgb(202, 200, 200);\n    height: 100%;\n    padding: 1em;\n    display: grid;\n    place-items: center;\n    width: 15%;\n    box-sizing: border-box;\n    color: grey;\n  }\n  input {\n    width: 85%;\n    height: 100%;\n    outline: none;\n    padding: 0 1em;\n    font-size: 1.1em;\n    border: none;\n    &:focus,\n    &:hover {\n      outline: none !important;\n    }\n  }\n"])));
+var ShowPassBtn = styled.span(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n  padding-right: 0.4em;\n  display: grid;\n  place-items: center;\n  font-size: 25px;\n  color: grey;\n  cursor: pointer;\n"])));
+var ButtonContianer = styled.span(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 360px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  // @include flexRow(space-between);\n  margin-top: 1em;\n  @media only screen and (max-width: 640px) {\n    padding: 0 1em;\n  }\n"])));
+var StyledButton$1 = styled(Button)(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  width: 100px;\n  height: 46px;\n  box-sizing: border-box;\n\n  span {\n    padding: 0.5em;\n  }\n  @media only screen and (max-width: 640px) {\n    height: 35px;\n  }\n"])));
 
-var _templateObject$R, _templateObject2$C, _templateObject3$s, _templateObject4$m;
+var _templateObject$V, _templateObject2$E, _templateObject3$u, _templateObject4$o;
 var menuItems = [{
   name: 'My Account',
   Icon: RiAccountBoxLine,
@@ -15702,8 +17091,8 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
     height: 200
   }) : /*#__PURE__*/React__default.createElement(Fragment$1, null, API_BASE_URL && token && renderListItemComponent(tabValue)))))));
 };
-var Root$e = styled(Box)(_templateObject$R || (_templateObject$R = _taggedTemplateLiteralLoose(["\n  padding: 1.4rem;\n  background-color: #fff;\n  @media only screen and (max-width: 608px) {\n    padding: 0.5rem;\n  }\n"])));
-var MainContainer$4 = styled.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  margin: auto;\n  min-height: 100vh;\n  background-color: #fff;\n  max-width: ", ";\n  padding: 2rem;\n  border-radius: 14px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  @media only screen and (max-width: 608px) {\n    padding: 0.5rem;\n  }\n"])), function (props) {
+var Root$e = styled(Box)(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose(["\n  padding: 1.4rem;\n  background-color: #fff;\n  @media only screen and (max-width: 608px) {\n    padding: 0.5rem;\n  }\n"])));
+var MainContainer$4 = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  margin: auto;\n  min-height: 100vh;\n  background-color: #fff;\n  max-width: ", ";\n  padding: 2rem;\n  border-radius: 14px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  @media only screen and (max-width: 608px) {\n    padding: 0.5rem;\n  }\n"])), function (props) {
   return props.open ? '1800px' : '1600px';
 });
 var Main$1 = styled$1('main', {
@@ -15736,12 +17125,12 @@ var Main$1 = styled$1('main', {
     overflow: 'auto'
   });
 });
-var ContainerDrawer$1 = styled(Drawer)(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  // height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    padding: 1rem;\n    position: relative;\n    z-index: 1;\n    background: ", ";\n    border-radius: 14px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  }\n"])), function (props) {
+var ContainerDrawer$1 = styled(Drawer)(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  // height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    padding: 1rem;\n    position: relative;\n    z-index: 1;\n    background: ", ";\n    border-radius: 14px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  }\n"])), function (props) {
   return props.open && '2rem';
 }, function (props) {
   return props.primaryColor || transparent;
 });
-var TypographyContainer$a = styled(Typography)(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer$a = styled(Typography)(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
 
@@ -15846,7 +17235,7 @@ var getRestockedData = function getRestockedData(_ref3) {
   }
 };
 
-var _templateObject$S;
+var _templateObject$W;
 var NewArrival = function NewArrival(_ref) {
   var _newArrivalItems$cont;
   var apiEndPoint = _ref.apiEndPoint,
@@ -15997,7 +17386,7 @@ var DateCard = function DateCard(_ref2) {
     }
   }, item === null || item === void 0 ? void 0 : item.count));
 };
-var ProductsGrid = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n  grid-gap: 1.4rem;\n  padding: 2rem 0;\n  grid-row-gap: 22px;\n  margin-bottom: 4em;\n  @media only screen and (max-width: 1445px) {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n  @media only screen and (max-width: 1200px) {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n  @media only screen and (max-width: 580px) {\n    grid-template-columns: 1fr 1fr;\n    padding-top: 0rem;\n    /* width: 100vw; */\n    margin-top: 1em;\n    grid-gap: 1rem;\n  }\n"])));
+var ProductsGrid = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n  grid-gap: 1.4rem;\n  padding: 2rem 0;\n  grid-row-gap: 22px;\n  margin-bottom: 4em;\n  @media only screen and (max-width: 1445px) {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n  @media only screen and (max-width: 1200px) {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n  @media only screen and (max-width: 580px) {\n    grid-template-columns: 1fr 1fr;\n    padding-top: 0rem;\n    /* width: 100vw; */\n    margin-top: 1em;\n    grid-gap: 1rem;\n  }\n"])));
 
 var ReStockedItem = function ReStockedItem(_ref) {
   var _newArrivalItems$cont;
@@ -16107,7 +17496,7 @@ var ReStockedItem = function ReStockedItem(_ref) {
   })))))));
 };
 
-var _excluded$7 = ["children", "value", "index"];
+var _excluded$8 = ["children", "value", "index"];
 var NewArrivalPage = function NewArrivalPage(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     token = _ref.token,
@@ -16215,7 +17604,7 @@ function CustomTabPanel(props) {
   var children = props.children,
     value = props.value,
     index = props.index,
-    other = _objectWithoutPropertiesLoose(props, _excluded$7);
+    other = _objectWithoutPropertiesLoose(props, _excluded$8);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     role: "tabpanel",
     hidden: value !== index,
@@ -16357,21 +17746,21 @@ var moveToCart = function moveToCart(_ref3) {
   }
 };
 
-var _templateObject$T, _templateObject2$D, _templateObject3$t, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$a, _templateObject9$7, _templateObject10$5, _templateObject11$4;
-var EmptyStateText = styled.p(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  color: #4b4b4b;\n  margin: 16px 0;\n"])));
-var ProductCardWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #ffffff;\n  border: 1px solid #d3d3d3;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  gap: 10px;\n  cursor: pointer;\n"])));
-var TopBar = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n"])));
-var SearchWrapper = styled(Box)(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 24px;\n    max-width: 400px;\n    width: 100%;\n  }\n"])));
-var TotalItemsText = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  color: #4b4b4b;\n  margin-bottom: 24px;\n  white-space: nowrap;\n"])));
-var DeleteButton = styled.button(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background-color: #ffffff;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n  cursor: pointer;\n  color: #ff0000;\n"])));
-var PriceContainer = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
-var DiscountPriceRow = styled.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
-var ProductName$2 = styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: #000000;\n  text-align: center;\n  height: 40px;\n  overflow: hidden;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: pre-wrap;\n"])));
-var ProductActionButton = styled(Button)(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])), function (_ref) {
+var _templateObject$X, _templateObject2$F, _templateObject3$v, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$e, _templateObject8$c, _templateObject9$8, _templateObject10$6, _templateObject11$5;
+var EmptyStateText = styled.p(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  color: #4b4b4b;\n  margin: 16px 0;\n"])));
+var ProductCardWrapper = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #ffffff;\n  border: 1px solid #d3d3d3;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  gap: 10px;\n  cursor: pointer;\n"])));
+var TopBar = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n"])));
+var SearchWrapper = styled(Box)(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 24px;\n    max-width: 400px;\n    width: 100%;\n  }\n"])));
+var TotalItemsText = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  color: #4b4b4b;\n  margin-bottom: 24px;\n  white-space: nowrap;\n"])));
+var DeleteButton = styled.button(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background-color: #ffffff;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n  cursor: pointer;\n  color: #ff0000;\n"])));
+var PriceContainer = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+var DiscountPriceRow = styled.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
+var ProductName$2 = styled.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: #000000;\n  text-align: center;\n  height: 40px;\n  overflow: hidden;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: pre-wrap;\n"])));
+var ProductActionButton = styled(Button)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])), function (_ref) {
   var primaryColor = _ref.primaryColor;
   return primaryColor != null ? primaryColor : '#000000';
 });
-var OutOfStockButton = styled(Button)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  && {\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])));
+var OutOfStockButton = styled(Button)(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  && {\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])));
 
 var getProductImage = function getProductImage(imageUrl, fallbackUrl) {
   var url = imageUrl || fallbackUrl;