@salesgenterp/ui-components 0.4.550 → 0.4.551

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +1377 -252
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +1390 -265
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +3 -1
package/dist/index.js CHANGED
@@ -47,21 +47,22 @@ var Paper = _interopDefault(require('@mui/material/Paper'));
47
47
  var Table = _interopDefault(require('@mui/material/Table'));
48
48
  var TableBody = _interopDefault(require('@mui/material/TableBody'));
49
49
  var TableCell = _interopDefault(require('@mui/material/TableCell'));
50
- var TableContainer$3 = _interopDefault(require('@mui/material/TableContainer'));
50
+ var TableContainer$4 = _interopDefault(require('@mui/material/TableContainer'));
51
51
  var TableHead = _interopDefault(require('@mui/material/TableHead'));
52
52
  var TableRow = _interopDefault(require('@mui/material/TableRow'));
53
53
  var reactVirtuoso = require('react-virtuoso');
54
54
  var Box = _interopDefault(require('@mui/material/Box'));
55
55
  var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
56
+ var fi = require('react-icons/fi');
57
+ var reactDom = require('react-dom');
56
58
  var hi2 = require('react-icons/hi2');
59
+ var paramCase = require('param-case');
57
60
  var InputBase = _interopDefault(require('@mui/material/InputBase'));
58
61
  var reactSelect = require('react-select');
59
62
  var ReactAsyncSelect = _interopDefault(require('react-select/async'));
60
63
  var Snowfall = _interopDefault(require('react-snowfall'));
61
64
  var ReCAPTCHA = _interopDefault(require('react-google-recaptcha'));
62
- var paramCase = require('param-case');
63
65
  var cg = require('react-icons/cg');
64
- var fi = require('react-icons/fi');
65
66
  var fa6 = require('react-icons/fa6');
66
67
  var Image$3 = _interopDefault(require('next/image'));
67
68
  var debounce$1 = _interopDefault(require('lodash/debounce'));
@@ -3989,42 +3990,63 @@ var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(functi
3989
3990
  };
3990
3991
  });
3991
3992
 
3992
- var sideMenuItems = [{
3993
- name: 'My Account',
3994
- Icon: ri.RiAccountBoxLine,
3995
- items: [{
3996
- name: 'Dashboard',
3997
- path: 'dashboard',
3998
- link: '/',
3999
- Icon: ri.RiHome7Line
4000
- }, {
4001
- name: 'My Profile',
4002
- path: 'myProfile',
4003
- link: '/',
4004
- Icon: tb.TbUserCircle
4005
- }, {
4006
- name: 'Address List',
4007
- path: 'addressList',
4008
- link: '/',
4009
- Icon: tb.TbBuildingStore
4010
- }, {
4011
- name: 'Statement',
4012
- path: 'statement',
4013
- link: '/',
4014
- Icon: ri.RiFileTextLine
4015
- }, {
4016
- name: 'Change Password',
4017
- path: 'changePassword',
4018
- link: '/',
4019
- Icon: bi.BiLockOpen
4020
- }]
4021
- }];
3993
+ var sideMenuItems = function sideMenuItems(props) {
3994
+ return [{
3995
+ name: 'My Account',
3996
+ Icon: ri.RiAccountBoxLine,
3997
+ items: [{
3998
+ name: 'Dashboard',
3999
+ path: 'dashboard',
4000
+ link: '/',
4001
+ Icon: ri.RiHome7Line,
4002
+ hide: (props === null || props === void 0 ? void 0 : props.hideDashboard) || false
4003
+ }, {
4004
+ name: 'My Profile',
4005
+ path: 'myProfile',
4006
+ link: '/',
4007
+ Icon: tb.TbUserCircle,
4008
+ hide: (props === null || props === void 0 ? void 0 : props.hideMyProfile) || false
4009
+ }, {
4010
+ name: 'Address List',
4011
+ path: 'addressList',
4012
+ link: '/',
4013
+ Icon: tb.TbBuildingStore,
4014
+ hide: (props === null || props === void 0 ? void 0 : props.hideAddressList) || false
4015
+ }, {
4016
+ name: 'Statement',
4017
+ path: 'statement',
4018
+ link: '/',
4019
+ Icon: ri.RiFileTextLine,
4020
+ hide: (props === null || props === void 0 ? void 0 : props.hideStatement) || false
4021
+ }, {
4022
+ name: 'Upcoming ACH Payments',
4023
+ path: 'upcomingACHPayments',
4024
+ link: '/',
4025
+ Icon: ai.AiOutlineCreditCard,
4026
+ hide: (props === null || props === void 0 ? void 0 : props.hideUpcomingACHPayments) || false
4027
+ }, {
4028
+ name: 'Change Password',
4029
+ path: 'changePassword',
4030
+ link: '/',
4031
+ Icon: bi.BiLockOpen,
4032
+ hide: (props === null || props === void 0 ? void 0 : props.hideChangePassword) || false
4033
+ }]
4034
+ }];
4035
+ };
4022
4036
  var SideMenu = function SideMenu(props) {
4023
4037
  var _props$menuItems;
4038
+ 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) {
4039
+ var _section$items;
4040
+ return _extends({}, section, {
4041
+ items: (_section$items = section.items) === null || _section$items === void 0 ? void 0 : _section$items.filter(function (item) {
4042
+ return !item.hide;
4043
+ })
4044
+ });
4045
+ });
4024
4046
  return /*#__PURE__*/React__default.createElement(material.List, {
4025
4047
  component: "nav",
4026
4048
  disablePadding: true
4027
- }, ((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) {
4049
+ }, menuItems.map(function (item, index) {
4028
4050
  return /*#__PURE__*/React__default.createElement(_SideMenuItem, _extends({}, item, {
4029
4051
  key: index,
4030
4052
  primaryColor: props.primaryColor,
@@ -5267,7 +5289,84 @@ var getDocumentTypes = function getDocumentTypes(_ref3) {
5267
5289
  }
5268
5290
  };
5269
5291
 
5270
- var _templateObject$l, _templateObject2$d, _templateObject3$9, _templateObject4$7;
5292
+ var getUpcomingAchPayments = function getUpcomingAchPayments(_ref) {
5293
+ var apiEndPoint = _ref.apiEndPoint,
5294
+ token = _ref.token;
5295
+ try {
5296
+ return Promise.resolve(API({
5297
+ url: '/ecommerce/order/payment/upcoming-auto-ach',
5298
+ apiEndPoint: apiEndPoint,
5299
+ token: token
5300
+ }));
5301
+ } catch (e) {
5302
+ return Promise.reject(e);
5303
+ }
5304
+ };
5305
+
5306
+ var _templateObject$l;
5307
+ var columns = [{
5308
+ id: 'orderId',
5309
+ label: 'Order Id',
5310
+ minWidth: 120
5311
+ }, {
5312
+ id: 'amount',
5313
+ label: 'Amount',
5314
+ minWidth: 120,
5315
+ format: function format(value) {
5316
+ return renderMoney(value);
5317
+ }
5318
+ }, {
5319
+ id: 'scheduleDate',
5320
+ label: 'Schedule Date',
5321
+ minWidth: 160,
5322
+ format: function format(value) {
5323
+ return getLocalTime({
5324
+ time: value
5325
+ });
5326
+ }
5327
+ }, {
5328
+ id: 'notes',
5329
+ label: 'Notes',
5330
+ minWidth: 180
5331
+ }, {
5332
+ id: 'achAccountUUID',
5333
+ label: 'ACH Account',
5334
+ minWidth: 280
5335
+ }];
5336
+ var UpcomingACHPayments = function UpcomingACHPayments(_ref) {
5337
+ var apiEndPoint = _ref.apiEndPoint,
5338
+ token = _ref.token,
5339
+ primaryColor = _ref.primaryColor,
5340
+ secondaryColor = _ref.secondaryColor,
5341
+ backgroundColor = _ref.backgroundColor,
5342
+ fontColor = _ref.fontColor;
5343
+ return /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
5344
+ pagination: false,
5345
+ scroll: {
5346
+ x: 1000
5347
+ },
5348
+ tableId: "upcoming-ach-payments",
5349
+ columns: columns,
5350
+ asyncService: function asyncService() {
5351
+ try {
5352
+ return Promise.resolve(getUpcomingAchPayments({
5353
+ apiEndPoint: apiEndPoint,
5354
+ token: token
5355
+ }));
5356
+ } catch (e) {
5357
+ return Promise.reject(e);
5358
+ }
5359
+ },
5360
+ primaryColor: primaryColor,
5361
+ secondaryColor: secondaryColor,
5362
+ backgroundColor: backgroundColor,
5363
+ fontColor: fontColor
5364
+ }));
5365
+ };
5366
+ var TableContainer$2 = styled__default.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n margin: 1.2rem 0;\n border-radius: 14px;\n"])));
5367
+
5368
+ var _templateObject$m, _templateObject2$d, _templateObject3$9, _templateObject4$7;
5369
+ 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"];
5271
5370
  var AccountDetails = function AccountDetails(_ref) {
5272
5371
  var _storeData$map, _storeData$find, _storeData$;
5273
5372
  var apiEndPoint = _ref.apiEndPoint,
@@ -5300,7 +5399,8 @@ var AccountDetails = function AccountDetails(_ref) {
5300
5399
  _ref$hideSalesOrderTa = _ref.hideSalesOrderTab,
5301
5400
  hideSalesOrderTab = _ref$hideSalesOrderTa === void 0 ? false : _ref$hideSalesOrderTa,
5302
5401
  _ref$hideInvoiceTab = _ref.hideInvoiceTab,
5303
- hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab;
5402
+ hideInvoiceTab = _ref$hideInvoiceTab === void 0 ? false : _ref$hideInvoiceTab,
5403
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
5304
5404
  var _useAllSystemFeatureV = useAllSystemFeatureValues({
5305
5405
  apiEndPoint: apiEndPoint,
5306
5406
  token: token
@@ -5513,6 +5613,20 @@ var AccountDetails = function AccountDetails(_ref) {
5513
5613
  storeIdList: storeIdList,
5514
5614
  defaultStoreId: defaultStoreId
5515
5615
  });
5616
+ case 'upcomingACHPayments':
5617
+ if (props !== null && props !== void 0 && props.hideUpcomingAchPayments) {
5618
+ return /*#__PURE__*/React__default.createElement(TypographyContainer$7, {
5619
+ fontColor: colors.fontColor
5620
+ }, "Empty");
5621
+ }
5622
+ return /*#__PURE__*/React__default.createElement(UpcomingACHPayments, {
5623
+ apiEndPoint: apiEndPoint,
5624
+ token: token,
5625
+ primaryColor: colors.primaryColor,
5626
+ secondaryColor: colors.secondaryColor,
5627
+ backgroundColor: colors.backgroundColor,
5628
+ fontColor: colors.fontColor
5629
+ });
5516
5630
  case 'changePassword':
5517
5631
  return /*#__PURE__*/React__default.createElement(ChangePassword, {
5518
5632
  apiEndPoint: apiEndPoint,
@@ -5563,12 +5677,12 @@ var AccountDetails = function AccountDetails(_ref) {
5563
5677
  style: {
5564
5678
  padding: '0 3rem 1rem'
5565
5679
  }
5566
- }), /*#__PURE__*/React__default.createElement(SideMenu, {
5680
+ }), /*#__PURE__*/React__default.createElement(SideMenu, _extends({
5567
5681
  primaryColor: colors.primaryColor,
5568
5682
  fontColor: colors.fontColor,
5569
5683
  tabValue: tabValue,
5570
5684
  onTabChange: onTabChange
5571
- })), /*#__PURE__*/React__default.createElement(Main, {
5685
+ }, props))), /*#__PURE__*/React__default.createElement(Main, {
5572
5686
  open: open,
5573
5687
  backgroundColor: colors.backgroundColor,
5574
5688
  style: {
@@ -5625,7 +5739,7 @@ var AccountDetails = function AccountDetails(_ref) {
5625
5739
  skeleton: true
5626
5740
  }, apiEndPoint && token && renderListItemComponent(tabValue))))))));
5627
5741
  };
5628
- var Root$4 = styled__default(material.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) {
5742
+ var Root$4 = styled__default(material.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) {
5629
5743
  var _props$theme;
5630
5744
  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundImage;
5631
5745
  }, function (props) {
@@ -5753,7 +5867,7 @@ var AsyncDataLoad = function AsyncDataLoad(_ref) {
5753
5867
  };
5754
5868
  var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
5755
5869
 
5756
- var _templateObject$m, _templateObject2$e, _templateObject3$a;
5870
+ var _templateObject$n, _templateObject2$e, _templateObject3$a;
5757
5871
  var BannerImages = function BannerImages(_ref) {
5758
5872
  var config = _ref.config,
5759
5873
  sliderImages = _ref.sliderImages,
@@ -5818,11 +5932,11 @@ var BannerImages = function BannerImages(_ref) {
5818
5932
  }))));
5819
5933
  })));
5820
5934
  };
5821
- var Video = styled__default.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"])));
5935
+ var Video = styled__default.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"])));
5822
5936
  var Image = styled__default.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"])));
5823
5937
  var BannerContainer$1 = styled__default.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"])));
5824
5938
 
5825
- var _templateObject$n, _templateObject2$f, _templateObject3$b, _templateObject4$8;
5939
+ var _templateObject$o, _templateObject2$f, _templateObject3$b, _templateObject4$8;
5826
5940
  var LandingCarousel = function LandingCarousel(_ref) {
5827
5941
  var _config$spaceBetweenC, _config$colLg, _ref2, _ref3, _config$colSm, _ref4, _config$colMd, _config$colLg2;
5828
5942
  var config = _ref.config,
@@ -5904,7 +6018,7 @@ var LandingCarousel = function LandingCarousel(_ref) {
5904
6018
  })));
5905
6019
  })));
5906
6020
  };
5907
- var Image$1 = styled__default.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"])));
6021
+ var Image$1 = styled__default.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"])));
5908
6022
  var Video$1 = styled__default.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"])));
5909
6023
  var Root$5 = styled__default.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n height: 100%;\n"])));
5910
6024
  var ReactSlick = styled__default(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) {
@@ -5913,7 +6027,7 @@ var ReactSlick = styled__default(Slider)(_templateObject4$8 || (_templateObject4
5913
6027
  return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
5914
6028
  });
5915
6029
 
5916
- var _templateObject$o, _templateObject2$g;
6030
+ var _templateObject$p, _templateObject2$g;
5917
6031
  var inDebounce;
5918
6032
  var JUSTIFY = {
5919
6033
  Left: {
@@ -6108,7 +6222,7 @@ var HomeBanner = function HomeBanner(_ref) {
6108
6222
  }, item === null || item === void 0 ? void 0 : item.component);
6109
6223
  }))))));
6110
6224
  };
6111
- var Root$6 = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
6225
+ var Root$6 = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
6112
6226
  var MainContainer$1 = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose([""])));
6113
6227
  var SingleBanner = function SingleBanner(_ref3) {
6114
6228
  var config = _ref3.config,
@@ -6142,7 +6256,7 @@ var adjustResponsiveSpace = function adjustResponsiveSpace(_ref4) {
6142
6256
  return spaceValue;
6143
6257
  };
6144
6258
 
6145
- var _templateObject$p, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$5;
6259
+ var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$5;
6146
6260
  var LandingCarousel$1 = function LandingCarousel(_ref) {
6147
6261
  var _brandData2;
6148
6262
  var brandList = _ref.brandList,
@@ -6268,7 +6382,7 @@ var LandingCarousel$1 = function LandingCarousel(_ref) {
6268
6382
  })));
6269
6383
  })));
6270
6384
  };
6271
- var Image$2 = styled__default.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"])));
6385
+ var Image$2 = styled__default.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"])));
6272
6386
  var Video$2 = styled__default.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"])));
6273
6387
  var Root$7 = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n height: 100%;\n"])));
6274
6388
  var ReactSlick$1 = styled__default(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) {
@@ -6278,7 +6392,7 @@ var SliderItem = styled__default.div(_templateObject5$5 || (_templateObject5$5 =
6278
6392
  return (props === null || props === void 0 ? void 0 : props.spaceBetweenCol) || 0;
6279
6393
  });
6280
6394
 
6281
- var _templateObject$q, _templateObject2$i;
6395
+ var _templateObject$r, _templateObject2$i;
6282
6396
  var BrandList = function BrandList(_ref) {
6283
6397
  var apiEndPoint = _ref.apiEndPoint,
6284
6398
  _ref$colors = _ref.colors,
@@ -6340,10 +6454,10 @@ var BrandList = function BrandList(_ref) {
6340
6454
  autoplaySpeed: autoplaySpeed
6341
6455
  }))));
6342
6456
  };
6343
- var Root$8 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose([""])));
6457
+ var Root$8 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
6344
6458
  var MainContainer$2 = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose([""])));
6345
6459
 
6346
- var _templateObject$r, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3;
6460
+ var _templateObject$s, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$3;
6347
6461
  var BrandStock = function BrandStock(_ref) {
6348
6462
  var _Object$keys, _Object$keys2, _data$brands;
6349
6463
  var storeData = _ref.storeData,
@@ -6498,13 +6612,13 @@ var BrandStock = function BrandStock(_ref) {
6498
6612
  }));
6499
6613
  })), (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))));
6500
6614
  };
6501
- var Root$9 = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n"])));
6615
+ var Root$9 = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n"])));
6502
6616
  var TitleContainer$1 = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n"])));
6503
6617
  var MainContainer$3 = styled__default.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"])));
6504
6618
  var DetailsContainer = styled__default.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"])));
6505
6619
  var BrandContainer = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n .brandImage {\n max-width: 100%;\n margin: 1rem auto;\n }\n"])));
6506
6620
  var ReturnPolicyContainer = styled__default.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"])));
6507
- var TablePaperContainer = styled__default(TableContainer$3)(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n"])));
6621
+ var TablePaperContainer = styled__default(TableContainer$4)(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n"])));
6508
6622
  var TableRowContainer$1 = styled__default(TableRow)(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n && {\n background: ", ";\n &:last-child td,\n &:last-child th {\n border: 0;\n }\n }\n"])), function (props) {
6509
6623
  return !props.availableQuantity && '#cd2323';
6510
6624
  });
@@ -6512,8 +6626,8 @@ var TableCellContainer$1 = styled__default(TableCell)(_templateObject9$3 || (_te
6512
6626
  return props.availableQuantity ? props.stockCol && 'green' : '#ffffff';
6513
6627
  });
6514
6628
 
6515
- var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4;
6516
- var CartDrawerContainer = styled__default.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) {
6629
+ var _templateObject$t, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4;
6630
+ var CartDrawerContainer = styled__default.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) {
6517
6631
  return props.maxWidth || '650px';
6518
6632
  });
6519
6633
  var CartDrawerBar = styled__default.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"])));
@@ -6621,8 +6735,8 @@ function useGridSize() {
6621
6735
  return layout;
6622
6736
  }
6623
6737
 
6624
- var _templateObject$t, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$3;
6625
- var CartPageSection = styled__default.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) {
6738
+ var _templateObject$u, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$3;
6739
+ var CartPageSection = styled__default.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) {
6626
6740
  return props.bg;
6627
6741
  }, function (props) {
6628
6742
  return props.bg || '#FAE8E5';
@@ -7797,41 +7911,973 @@ var TotalAfterDiscount = function TotalAfterDiscount(_ref2) {
7797
7911
  }, renderMoney(totalAmount)) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement("b", null, renderMoney(total))));
7798
7912
  };
7799
7913
 
7800
- var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7;
7801
- var ProductImage = styled__default.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"])));
7802
- var ProductName = styled__default.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) {
7914
+ var _templateObject$v, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59;
7915
+ var DEFAULT_PRIMARY_COLOR$1 = '#437C0F';
7916
+ var formatCurrency = function formatCurrency(amount) {
7917
+ return Number(amount).toLocaleString('en-US', {
7918
+ minimumFractionDigits: 0,
7919
+ maximumFractionDigits: 2
7920
+ });
7921
+ };
7922
+ var getUnitSaving = function getUnitSaving(coupon, productPrice) {
7923
+ if (coupon !== null && coupon !== void 0 && coupon.percentage && coupon !== null && coupon !== void 0 && coupon.offPercentage && productPrice > 0) {
7924
+ return productPrice * (coupon.offPercentage / 100);
7925
+ }
7926
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.offPercentageAmount) > 0) {
7927
+ return coupon.offPercentageAmount;
7928
+ }
7929
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.offAmount) > 0 && !(coupon !== null && coupon !== void 0 && coupon.percentage)) {
7930
+ return coupon.offAmount;
7931
+ }
7932
+ return null;
7933
+ };
7934
+ var formatCartCount = function formatCartCount(cartQuantity) {
7935
+ return cartQuantity + " " + (cartQuantity === 1 ? 'quantity' : 'quantities') + " added in the cart";
7936
+ };
7937
+ var formatRemainingQuantity = function formatRemainingQuantity(remaining) {
7938
+ return remaining + " more " + (remaining === 1 ? 'quantity' : 'quantities');
7939
+ };
7940
+ var isBuyXGetFreeProduct = function isBuyXGetFreeProduct(coupon) {
7941
+ var _coupon$freeProducts;
7942
+ 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;
7943
+ };
7944
+ var getBuyXGetFreeProductOffPercent = function getBuyXGetFreeProductOffPercent(coupon) {
7945
+ var pct = Number(coupon === null || coupon === void 0 ? void 0 : coupon.offPercentage);
7946
+ if (Number.isFinite(pct) && pct > 0) return pct;
7947
+ return 100;
7948
+ };
7949
+ var isFullyFreeBuyXOffer = function isFullyFreeBuyXOffer(coupon) {
7950
+ return getBuyXGetFreeProductOffPercent(coupon) >= 100;
7951
+ };
7952
+ var getBuyXGetFreeProductOfferLabel = function getBuyXGetFreeProductOfferLabel(coupon) {
7953
+ var offPercent = getBuyXGetFreeProductOffPercent(coupon);
7954
+ if (offPercent >= 100) return 'free';
7955
+ return offPercent + "% off on these products";
7956
+ };
7957
+ var getFreeProductHref = function getFreeProductHref(product) {
7958
+ return "/product-details/" + paramCase.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);
7959
+ };
7960
+ var getBuyXGetFreeProductMessages = function getBuyXGetFreeProductMessages(quantityToBuy, quantityToGet, cartQuantity, offPercentage) {
7961
+ if (offPercentage === void 0) {
7962
+ offPercentage = 100;
7963
+ }
7964
+ var isFullyFree = offPercentage >= 100;
7965
+ var buyTimes = quantityToBuy + " " + (quantityToBuy === 1 ? 'time' : 'times');
7966
+ 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";
7967
+ var lines = [benefitSummary];
7968
+ if (cartQuantity <= 0) {
7969
+ return lines;
7970
+ }
7971
+ if (cartQuantity < quantityToBuy) {
7972
+ var remaining = quantityToBuy - cartQuantity;
7973
+ lines.push(formatCartCount(cartQuantity));
7974
+ lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
7975
+ } else {
7976
+ 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");
7977
+ }
7978
+ return lines;
7979
+ };
7980
+ var getBuyXGetYMessages = function getBuyXGetYMessages(quantityToBuy, quantityToGet, cartQuantity) {
7981
+ var totalNeeded = quantityToBuy + quantityToGet;
7982
+ var lines = ["Buy " + quantityToBuy + ", get " + quantityToGet + " for free"];
7983
+ if (cartQuantity <= 0) {
7984
+ return lines;
7985
+ }
7986
+ if (cartQuantity < quantityToBuy) {
7987
+ var remaining = quantityToBuy - cartQuantity;
7988
+ lines.push(formatCartCount(cartQuantity));
7989
+ lines.push("Add " + formatRemainingQuantity(remaining) + " to qualify");
7990
+ } else if (cartQuantity < totalNeeded) {
7991
+ var _remaining = totalNeeded - cartQuantity;
7992
+ lines.push(formatCartCount(cartQuantity));
7993
+ lines.push("Add " + formatRemainingQuantity(_remaining) + " to apply this coupon");
7994
+ } else {
7995
+ var freeLabel = quantityToGet === 1 ? 'item' : 'items';
7996
+ lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get " + quantityToGet + " " + freeLabel + " for free");
7997
+ }
7998
+ return lines;
7999
+ };
8000
+ var getCouponTypeIcon = function getCouponTypeIcon(coupon) {
8001
+ if (isBuyXGetFreeProduct(coupon)) {
8002
+ return isFullyFreeBuyXOffer(coupon) ? fi.FiGift : fi.FiPercent;
8003
+ }
8004
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) return fi.FiLayers;
8005
+ if (coupon !== null && coupon !== void 0 && coupon.offPercentage) return fi.FiPercent;
8006
+ return fi.FiTag;
8007
+ };
8008
+ var getDetailMeta = function getDetailMeta(line) {
8009
+ if (line.includes('added in the cart') && line.includes('Apply')) {
8010
+ return {
8011
+ icon: hi2.HiSparkles,
8012
+ tone: 'success'
8013
+ };
8014
+ }
8015
+ if (line.includes('added in the cart')) {
8016
+ return {
8017
+ icon: fi.FiShoppingCart,
8018
+ tone: 'info'
8019
+ };
8020
+ }
8021
+ if (line.startsWith('Add ')) {
8022
+ return {
8023
+ icon: fi.FiPlusCircle,
8024
+ tone: 'warning'
8025
+ };
8026
+ }
8027
+ if (line.includes('Apply') || line.includes('claim')) {
8028
+ return {
8029
+ icon: hi2.HiSparkles,
8030
+ tone: 'success'
8031
+ };
8032
+ }
8033
+ return {
8034
+ icon: fi.FiTag,
8035
+ tone: 'info'
8036
+ };
8037
+ };
8038
+ var getCouponBenefit = function getCouponBenefit(coupon, _temp) {
8039
+ var _ref = _temp === void 0 ? {} : _temp,
8040
+ _ref$productPrice = _ref.productPrice,
8041
+ productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
8042
+ _ref$cartQuantity = _ref.cartQuantity,
8043
+ cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity;
8044
+ if (isBuyXGetFreeProduct(coupon)) {
8045
+ return getBuyXGetFreeProductMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity, getBuyXGetFreeProductOffPercent(coupon));
8046
+ }
8047
+ var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8048
+ if (hasBuyXGetY) {
8049
+ return getBuyXGetYMessages(coupon.quantityToBuy, coupon.quantityToGet, cartQuantity);
8050
+ }
8051
+ var unitSaving = getUnitSaving(coupon, productPrice);
8052
+ if (!unitSaving) return null;
8053
+ var lines = [];
8054
+ if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
8055
+ lines.push(coupon.offPercentage + "% off \xB7 Save $" + formatCurrency(unitSaving) + " per item");
8056
+ } else {
8057
+ lines.push("Save $" + formatCurrency(unitSaving) + " per item");
8058
+ }
8059
+ if (cartQuantity > 0) {
8060
+ var totalSaving = unitSaving * cartQuantity;
8061
+ lines.push(formatCartCount(cartQuantity) + " \xB7 Apply this coupon to get $" + formatCurrency(totalSaving) + " off");
8062
+ }
8063
+ return lines;
8064
+ };
8065
+ var getSuggestionPreviewText = function getSuggestionPreviewText(coupon, _temp2) {
8066
+ var _ref2 = _temp2 === void 0 ? {} : _temp2,
8067
+ _ref2$productPrice = _ref2.productPrice,
8068
+ productPrice = _ref2$productPrice === void 0 ? 0 : _ref2$productPrice,
8069
+ _ref2$cartQuantity = _ref2.cartQuantity,
8070
+ cartQuantity = _ref2$cartQuantity === void 0 ? 0 : _ref2$cartQuantity;
8071
+ if (!coupon) return null;
8072
+ if (isBuyXGetFreeProduct(coupon)) {
8073
+ var _quantityToBuy = coupon.quantityToBuy || 1;
8074
+ var quantityToGet = coupon.quantityToGet || 1;
8075
+ var buyTimes = _quantityToBuy + " " + (_quantityToBuy === 1 ? 'time' : 'times');
8076
+ var offPercent = getBuyXGetFreeProductOffPercent(coupon);
8077
+ if (offPercent >= 100) {
8078
+ return "Buy this product " + buyTimes + ", get " + quantityToGet + " " + (quantityToGet === 1 ? 'free product' : 'free products') + ". Click View All offers to know more";
8079
+ }
8080
+ return "Buy this product " + buyTimes + ", get " + offPercent + "% off on some products. Click View All offers to know more";
8081
+ }
8082
+ var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8083
+ if (hasBuyXGetY) {
8084
+ var _getCouponBenefit;
8085
+ return ((_getCouponBenefit = getCouponBenefit(coupon, {
8086
+ productPrice: productPrice,
8087
+ cartQuantity: cartQuantity
8088
+ })) === null || _getCouponBenefit === void 0 ? void 0 : _getCouponBenefit[0]) || null;
8089
+ }
8090
+ var unitSaving = getUnitSaving(coupon, productPrice);
8091
+ var quantityToBuy = coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy;
8092
+ var hasBuyQuantityRequirement = quantityToBuy > 0 && !((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0);
8093
+ if (hasBuyQuantityRequirement && coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
8094
+ var qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
8095
+ return "Buy " + quantityToBuy + " " + qtyLabel + ", get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
8096
+ }
8097
+ if (hasBuyQuantityRequirement && unitSaving) {
8098
+ var _qtyLabel = quantityToBuy === 1 ? 'quantity' : 'quantities';
8099
+ return "Buy " + quantityToBuy + " " + _qtyLabel + ", save $" + formatCurrency(unitSaving) + " per item";
8100
+ }
8101
+ if (coupon !== null && coupon !== void 0 && coupon.offPercentage && unitSaving) {
8102
+ return "get " + coupon.offPercentage + "% off, save $" + formatCurrency(unitSaving) + " per item";
8103
+ }
8104
+ if (unitSaving) {
8105
+ return "save $" + formatCurrency(unitSaving) + " per item";
8106
+ }
8107
+ return null;
8108
+ };
8109
+ var getSavingsBadge = function getSavingsBadge(coupon, productPrice) {
8110
+ if (isBuyXGetFreeProduct(coupon)) {
8111
+ if (!isFullyFreeBuyXOffer(coupon)) {
8112
+ return {
8113
+ variant: 'percent',
8114
+ top: getBuyXGetFreeProductOffPercent(coupon) + "%",
8115
+ bottom: 'OFF'
8116
+ };
8117
+ }
8118
+ var qty = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) || 1;
8119
+ return {
8120
+ variant: 'gift',
8121
+ top: qty > 1 ? qty + "\xD7" : 'FREE',
8122
+ bottom: 'GIFT'
8123
+ };
8124
+ }
8125
+ if ((coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0) {
8126
+ return {
8127
+ variant: 'bogo',
8128
+ top: "+" + coupon.quantityToGet,
8129
+ bottom: 'FREE'
8130
+ };
8131
+ }
8132
+ if (coupon !== null && coupon !== void 0 && coupon.offPercentage) {
8133
+ return {
8134
+ variant: 'percent',
8135
+ top: coupon.offPercentage + "%",
8136
+ bottom: 'OFF'
8137
+ };
8138
+ }
8139
+ var unitSaving = getUnitSaving(coupon, productPrice);
8140
+ if (unitSaving) {
8141
+ return {
8142
+ variant: 'amount',
8143
+ top: "$" + formatCurrency(unitSaving),
8144
+ bottom: 'SAVE'
8145
+ };
8146
+ }
8147
+ return {
8148
+ variant: 'deal',
8149
+ top: 'SAVE',
8150
+ bottom: 'NOW'
8151
+ };
8152
+ };
8153
+ var getProgressInfo = function getProgressInfo(coupon, cartQuantity) {
8154
+ if (isBuyXGetFreeProduct(coupon)) {
8155
+ var _target = coupon.quantityToBuy || 0;
8156
+ if (!_target) return null;
8157
+ var _current = Math.min(cartQuantity, _target);
8158
+ var _percent = Math.min(100, _current / _target * 100);
8159
+ var _remaining2 = Math.max(0, _target - cartQuantity);
8160
+ var qualified = cartQuantity >= _target;
8161
+ var offerLabel = getBuyXGetFreeProductOfferLabel(coupon);
8162
+ var unlockLabel = isFullyFreeBuyXOffer(coupon) ? 'your FREE gift' : offerLabel;
8163
+ return {
8164
+ type: 'quantity',
8165
+ current: _current,
8166
+ target: _target,
8167
+ percent: _percent,
8168
+ qualified: qualified,
8169
+ unitLabel: _target === 1 ? 'Item' : 'Items',
8170
+ 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 + "!"
8171
+ };
8172
+ }
8173
+ var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8174
+ if (!hasBuyXGetY) return null;
8175
+ var quantityToBuy = coupon.quantityToBuy,
8176
+ quantityToGet = coupon.quantityToGet;
8177
+ var totalNeeded = quantityToBuy + quantityToGet;
8178
+ if (cartQuantity >= totalNeeded) {
8179
+ return {
8180
+ type: 'buyxgety',
8181
+ qualified: true,
8182
+ quantityToBuy: quantityToBuy,
8183
+ quantityToGet: quantityToGet,
8184
+ message: "You're eligible — apply your code at checkout!"
8185
+ };
8186
+ }
8187
+ if (cartQuantity >= quantityToBuy) {
8188
+ var _current2 = cartQuantity;
8189
+ var _target2 = totalNeeded;
8190
+ var _percent2 = Math.min(100, _current2 / _target2 * 100);
8191
+ var _remaining3 = totalNeeded - cartQuantity;
8192
+ return {
8193
+ type: 'quantity',
8194
+ current: _current2,
8195
+ target: _target2,
8196
+ percent: _percent2,
8197
+ qualified: false,
8198
+ unitLabel: _target2 === 1 ? 'Item' : 'Items',
8199
+ message: _remaining3 === 1 ? 'Only 1 more item to apply this coupon' : "Only " + _remaining3 + " more items to apply this coupon",
8200
+ showTimeline: true,
8201
+ quantityToBuy: quantityToBuy,
8202
+ quantityToGet: quantityToGet
8203
+ };
8204
+ }
8205
+ var current = Math.min(cartQuantity, quantityToBuy);
8206
+ var target = quantityToBuy;
8207
+ var percent = Math.min(100, current / target * 100);
8208
+ var remaining = quantityToBuy - cartQuantity;
8209
+ return {
8210
+ type: 'quantity',
8211
+ current: current,
8212
+ target: target,
8213
+ percent: percent,
8214
+ qualified: false,
8215
+ unitLabel: target === 1 ? 'Item' : 'Items',
8216
+ message: remaining === 1 ? 'Only 1 more item to qualify' : "Only " + remaining + " more items to qualify",
8217
+ showTimeline: true,
8218
+ quantityToBuy: quantityToBuy,
8219
+ quantityToGet: quantityToGet
8220
+ };
8221
+ };
8222
+ var isProgressDetailLine = function isProgressDetailLine(line) {
8223
+ return line === null || line === void 0 ? void 0 : line.startsWith('Add ');
8224
+ };
8225
+ var DiscountSuggestionsModal = function DiscountSuggestionsModal(_ref3) {
8226
+ var open = _ref3.open,
8227
+ onClose = _ref3.onClose,
8228
+ productName = _ref3.productName,
8229
+ _ref3$productDiscount = _ref3.productDiscounts,
8230
+ productDiscounts = _ref3$productDiscount === void 0 ? [] : _ref3$productDiscount,
8231
+ primaryColor = _ref3.primaryColor,
8232
+ _ref3$cartQuantity = _ref3.cartQuantity,
8233
+ cartQuantity = _ref3$cartQuantity === void 0 ? 0 : _ref3$cartQuantity,
8234
+ _ref3$productPrice = _ref3.productPrice,
8235
+ productPrice = _ref3$productPrice === void 0 ? 0 : _ref3$productPrice;
8236
+ var _useState = React.useState(null),
8237
+ copiedCode = _useState[0],
8238
+ setCopiedCode = _useState[1];
8239
+ var accentColor = primaryColor || DEFAULT_PRIMARY_COLOR$1;
8240
+ var copyCouponCode = React.useCallback(function (code) {
8241
+ try {
8242
+ if (!code) return Promise.resolve();
8243
+ var _temp3 = _catch(function () {
8244
+ var _navigator, _navigator$clipboard;
8245
+ 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 () {
8246
+ var _window;
8247
+ setCopiedCode(code);
8248
+ (_window = window) === null || _window === void 0 ? void 0 : _window.setTimeout(function () {
8249
+ return setCopiedCode(null);
8250
+ }, 1800);
8251
+ });
8252
+ }, function (error) {
8253
+ console.error('Failed to copy coupon code', error);
8254
+ });
8255
+ return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
8256
+ } catch (e) {
8257
+ return Promise.reject(e);
8258
+ }
8259
+ }, []);
8260
+ React.useEffect(function () {
8261
+ if (!open) return;
8262
+ var scrollLocks = [];
8263
+ var lockElement = function lockElement(el) {
8264
+ if (!el) return;
8265
+ scrollLocks.push({
8266
+ el: el,
8267
+ overflow: el.style.overflow,
8268
+ overscrollBehavior: el.style.overscrollBehavior
8269
+ });
8270
+ el.style.overflow = 'hidden';
8271
+ el.style.overscrollBehavior = 'none';
8272
+ };
8273
+ lockElement(document.body);
8274
+ lockElement(document.documentElement);
8275
+ document.querySelectorAll('.scrollDiv, .MuiTableContainer-root').forEach(lockElement);
8276
+ var handleKeyDown = function handleKeyDown(event) {
8277
+ if (event.key === 'Escape') onClose();
8278
+ };
8279
+ document.addEventListener('keydown', handleKeyDown);
8280
+ return function () {
8281
+ scrollLocks.forEach(function (_ref4) {
8282
+ var el = _ref4.el,
8283
+ overflow = _ref4.overflow,
8284
+ overscrollBehavior = _ref4.overscrollBehavior;
8285
+ el.style.overflow = overflow;
8286
+ el.style.overscrollBehavior = overscrollBehavior;
8287
+ });
8288
+ document.removeEventListener('keydown', handleKeyDown);
8289
+ };
8290
+ }, [open, onClose]);
8291
+ if (!open) return null;
8292
+ return reactDom.createPortal(/*#__PURE__*/React__default.createElement(Overlay, {
8293
+ onClick: onClose,
8294
+ role: "presentation"
8295
+ }, /*#__PURE__*/React__default.createElement(Panel, {
8296
+ role: "dialog",
8297
+ "aria-modal": "true",
8298
+ "aria-labelledby": "discount-suggestions-title",
8299
+ onClick: function onClick(event) {
8300
+ return event.stopPropagation();
8301
+ }
8302
+ }, /*#__PURE__*/React__default.createElement(DialogHeader, null, /*#__PURE__*/React__default.createElement(DialogTitle, {
8303
+ id: "discount-suggestions-title"
8304
+ }, "Available Offers"), /*#__PURE__*/React__default.createElement(CloseButton, {
8305
+ type: "button",
8306
+ "aria-label": "close",
8307
+ onClick: onClose
8308
+ }, /*#__PURE__*/React__default.createElement(md.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, {
8309
+ $accentColor: accentColor,
8310
+ role: "region",
8311
+ "aria-label": "Available offers and savings"
8312
+ }, /*#__PURE__*/React__default.createElement(AmbientGlow, {
8313
+ $accentColor: accentColor,
8314
+ "aria-hidden": "true"
8315
+ }), /*#__PURE__*/React__default.createElement(Sparkle, {
8316
+ $accentColor: accentColor,
8317
+ $top: "12%",
8318
+ $left: "6%",
8319
+ $delay: "0s",
8320
+ "aria-hidden": "true"
8321
+ }), /*#__PURE__*/React__default.createElement(Sparkle, {
8322
+ $accentColor: accentColor,
8323
+ $top: "28%",
8324
+ $left: "88%",
8325
+ $delay: "1.2s",
8326
+ $size: "sm",
8327
+ "aria-hidden": "true"
8328
+ }), /*#__PURE__*/React__default.createElement(Sparkle, {
8329
+ $accentColor: accentColor,
8330
+ $top: "72%",
8331
+ $left: "4%",
8332
+ $delay: "2.1s",
8333
+ $size: "sm",
8334
+ "aria-hidden": "true"
8335
+ }), /*#__PURE__*/React__default.createElement(SectionHeader, {
8336
+ $accentColor: accentColor
8337
+ }, /*#__PURE__*/React__default.createElement(HeaderIconWrap, {
8338
+ $accentColor: accentColor
8339
+ }, /*#__PURE__*/React__default.createElement(md.MdLocalOffer, null)), /*#__PURE__*/React__default.createElement(HeaderCopy, null, /*#__PURE__*/React__default.createElement(Eyebrow, {
8340
+ $accentColor: accentColor
8341
+ }, /*#__PURE__*/React__default.createElement(fi.FiZap, null), "Savings Center"), /*#__PURE__*/React__default.createElement(SectionHeading, null, productName || 'Available Offers')), /*#__PURE__*/React__default.createElement(OfferCountBadge, {
8342
+ $accentColor: accentColor
8343
+ }, /*#__PURE__*/React__default.createElement(hi2.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) {
8344
+ var _coupon$discountId;
8345
+ var benefit = getCouponBenefit(coupon, {
8346
+ productPrice: productPrice,
8347
+ cartQuantity: cartQuantity
8348
+ });
8349
+ var benefitSummary = (benefit === null || benefit === void 0 ? void 0 : benefit[0]) || null;
8350
+ var benefitDetails = (benefit === null || benefit === void 0 ? void 0 : benefit.length) > 1 ? benefit.slice(1) : [];
8351
+ var statusDetails = benefitDetails.filter(function (line) {
8352
+ return !isProgressDetailLine(line);
8353
+ });
8354
+ var hasSuccessStatus = statusDetails.some(function (line) {
8355
+ var _getDetailMeta = getDetailMeta(line),
8356
+ tone = _getDetailMeta.tone;
8357
+ return tone === 'success';
8358
+ });
8359
+ var freeProducts = isBuyXGetFreeProduct(coupon) ? (coupon === null || coupon === void 0 ? void 0 : coupon.freeProducts) || [] : [];
8360
+ var isFullyFreeOffer = isBuyXGetFreeProduct(coupon) ? isFullyFreeBuyXOffer(coupon) : false;
8361
+ var TypeIcon = getCouponTypeIcon(coupon);
8362
+ var isCopied = copiedCode === (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
8363
+ var savingsBadge = getSavingsBadge(coupon, productPrice);
8364
+ var progressInfo = getProgressInfo(coupon, cartQuantity);
8365
+ var hasBuyXGetY = (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToBuy) > 0 && (coupon === null || coupon === void 0 ? void 0 : coupon.quantityToGet) > 0;
8366
+ var showTimeline = hasBuyXGetY && ((progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.showTimeline) || (progressInfo === null || progressInfo === void 0 ? void 0 : progressInfo.type) === 'buyxgety');
8367
+ return /*#__PURE__*/React__default.createElement(OfferCard, {
8368
+ key: (_coupon$discountId = coupon === null || coupon === void 0 ? void 0 : coupon.discountId) != null ? _coupon$discountId : coupon === null || coupon === void 0 ? void 0 : coupon.couponCode,
8369
+ $accentColor: accentColor,
8370
+ $index: index
8371
+ }, /*#__PURE__*/React__default.createElement(CardBody, null, /*#__PURE__*/React__default.createElement(CardHeader, null, /*#__PURE__*/React__default.createElement(SavingsBadge, {
8372
+ $accentColor: accentColor,
8373
+ $variant: savingsBadge.variant
8374
+ }, /*#__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, {
8375
+ $accentColor: accentColor
8376
+ }, /*#__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, {
8377
+ $accentColor: accentColor
8378
+ }, /*#__PURE__*/React__default.createElement(hi2.HiSparkles, null), "Ready")), /*#__PURE__*/React__default.createElement(TitleRow, null, /*#__PURE__*/React__default.createElement(OfferTitle, {
8379
+ title: coupon === null || coupon === void 0 ? void 0 : coupon.discountName
8380
+ }, coupon === null || coupon === void 0 ? void 0 : coupon.discountName), /*#__PURE__*/React__default.createElement(CodeRow, {
8381
+ $accentColor: accentColor
8382
+ }, /*#__PURE__*/React__default.createElement(CodeValue, {
8383
+ $accentColor: accentColor,
8384
+ "aria-label": "Coupon code " + (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode)
8385
+ }, coupon === null || coupon === void 0 ? void 0 : coupon.couponCode), /*#__PURE__*/React__default.createElement(material.Tooltip, {
8386
+ title: isCopied ? 'Copied!' : 'Copy code',
8387
+ arrow: true,
8388
+ placement: "top"
8389
+ }, /*#__PURE__*/React__default.createElement(PrimaryCopyButton, {
8390
+ type: "button",
8391
+ $accentColor: accentColor,
8392
+ $copied: isCopied,
8393
+ "aria-label": "Copy coupon code " + (coupon === null || coupon === void 0 ? void 0 : coupon.couponCode),
8394
+ onClick: function onClick() {
8395
+ return copyCouponCode(coupon === null || coupon === void 0 ? void 0 : coupon.couponCode);
8396
+ }
8397
+ }, isCopied ? /*#__PURE__*/React__default.createElement("div", {
8398
+ style: {
8399
+ display: 'flex',
8400
+ alignItems: 'center',
8401
+ gap: '4px'
8402
+ }
8403
+ }, /*#__PURE__*/React__default.createElement(fi.FiCheck, null), /*#__PURE__*/React__default.createElement("span", null, "Copied")) : /*#__PURE__*/React__default.createElement("div", {
8404
+ style: {
8405
+ display: 'flex',
8406
+ alignItems: 'center',
8407
+ gap: '4px'
8408
+ }
8409
+ }, /*#__PURE__*/React__default.createElement(fi.FiCopy, null), /*#__PURE__*/React__default.createElement("span", null, "Copy")))))))), benefitSummary && /*#__PURE__*/React__default.createElement(OfferDescription, null, benefitSummary), showTimeline && /*#__PURE__*/React__default.createElement(BuyXTimeline, {
8410
+ $accentColor: accentColor
8411
+ }, /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
8412
+ $accentColor: accentColor
8413
+ }, /*#__PURE__*/React__default.createElement(fi.FiShoppingCart, null)), /*#__PURE__*/React__default.createElement(TimelineLabel, null, "Buy ", coupon.quantityToBuy)), /*#__PURE__*/React__default.createElement(TimelineTrack, {
8414
+ $accentColor: accentColor
8415
+ }, /*#__PURE__*/React__default.createElement(TimelineArrow, {
8416
+ $accentColor: accentColor
8417
+ })), /*#__PURE__*/React__default.createElement(TimelineStep, null, /*#__PURE__*/React__default.createElement(TimelineIcon, {
8418
+ $accentColor: accentColor,
8419
+ $highlight: true
8420
+ }, /*#__PURE__*/React__default.createElement(fi.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, {
8421
+ $accentColor: accentColor,
8422
+ role: "progressbar",
8423
+ "aria-valuenow": progressInfo.current,
8424
+ "aria-valuemin": 0,
8425
+ "aria-valuemax": progressInfo.target,
8426
+ "aria-label": progressInfo.current + " of " + progressInfo.target + " items toward eligibility"
8427
+ }, /*#__PURE__*/React__default.createElement(ProgressFill, {
8428
+ $accentColor: accentColor,
8429
+ $percent: progressInfo.percent
8430
+ })), /*#__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, {
8431
+ $accentColor: accentColor
8432
+ }, /*#__PURE__*/React__default.createElement(hi2.HiSparkles, null), /*#__PURE__*/React__default.createElement("span", null, progressInfo.message)), statusDetails.length > 0 && /*#__PURE__*/React__default.createElement(StatusList, null, statusDetails.map(function (line, detailIndex) {
8433
+ var _getDetailMeta2 = getDetailMeta(line),
8434
+ DetailIcon = _getDetailMeta2.icon,
8435
+ tone = _getDetailMeta2.tone;
8436
+ return /*#__PURE__*/React__default.createElement(StatusItem, {
8437
+ key: (coupon === null || coupon === void 0 ? void 0 : coupon.discountId) + "-" + detailIndex,
8438
+ $accentColor: accentColor,
8439
+ $tone: tone,
8440
+ $chipIndex: detailIndex
8441
+ }, /*#__PURE__*/React__default.createElement(DetailIcon, null), /*#__PURE__*/React__default.createElement("span", null, line));
8442
+ })), freeProducts.length > 0 && /*#__PURE__*/React__default.createElement(GiftSection, null, isFullyFreeOffer && /*#__PURE__*/React__default.createElement(GiftSectionHeader, {
8443
+ $accentColor: accentColor
8444
+ }, /*#__PURE__*/React__default.createElement(fi.FiGift, null), /*#__PURE__*/React__default.createElement("span", null, "Free gift options")), /*#__PURE__*/React__default.createElement(GiftList, null, freeProducts.map(function (product) {
8445
+ var _product$productName;
8446
+ return /*#__PURE__*/React__default.createElement(GiftLink, {
8447
+ key: product === null || product === void 0 ? void 0 : product.productId,
8448
+ href: getFreeProductHref(product),
8449
+ $accentColor: accentColor
8450
+ }, /*#__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(fi.FiArrowRight, null));
8451
+ })))));
8452
+ })))))), document.body);
8453
+ };
8454
+ var fadeSlideUp = styled.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"])));
8455
+ var shimmer = styled.keyframes(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n 0% {\n background-position: -120% 0;\n }\n 100% {\n background-position: 220% 0;\n }\n"])));
8456
+ var copyPop = styled.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"])));
8457
+ var chipIn = styled.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"])));
8458
+ var progressGrow = styled.keyframes(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n from {\n width: 0;\n }\n"])));
8459
+ var sparkleFloat = styled.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"])));
8460
+ var reducedMotion = styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n @media (prefers-reduced-motion: reduce) {\n animation: none !important;\n transition: none !important;\n }\n"])));
8461
+ var Overlay = styled__default.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"])));
8462
+ var Panel = styled__default.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"])));
8463
+ var DialogHeader = styled__default.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"])));
8464
+ var DialogTitle = styled__default.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"])));
8465
+ var CloseButton = styled__default.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"])));
8466
+ var ScrollableBody = styled__default.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"])));
8467
+ var EmptyState$1 = styled__default.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"])));
8468
+ var SavingsCenter = styled__default.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) {
8469
+ var $accentColor = _ref5.$accentColor;
8470
+ return $accentColor;
8471
+ }, function (_ref6) {
8472
+ var $accentColor = _ref6.$accentColor;
8473
+ return $accentColor + "20";
8474
+ }, function (_ref7) {
8475
+ var $accentColor = _ref7.$accentColor;
8476
+ return $accentColor + "10";
8477
+ }, fadeSlideUp, reducedMotion);
8478
+ var AmbientGlow = styled__default.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) {
8479
+ var $accentColor = _ref8.$accentColor;
8480
+ return $accentColor + "18";
8481
+ });
8482
+ var Sparkle = styled__default.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) {
8483
+ var $top = _ref9.$top;
8484
+ return $top;
8485
+ }, function (_ref10) {
8486
+ var $left = _ref10.$left;
8487
+ return $left;
8488
+ }, function (_ref11) {
8489
+ var $size = _ref11.$size;
8490
+ return $size === 'sm' ? '4px' : '6px';
8491
+ }, function (_ref12) {
8492
+ var $size = _ref12.$size;
8493
+ return $size === 'sm' ? '4px' : '6px';
8494
+ }, function (_ref13) {
8495
+ var $accentColor = _ref13.$accentColor;
8496
+ return $accentColor;
8497
+ }, function (_ref14) {
8498
+ var $accentColor = _ref14.$accentColor;
8499
+ return $accentColor + "80";
8500
+ }, sparkleFloat, function (_ref15) {
8501
+ var $delay = _ref15.$delay;
8502
+ return $delay;
8503
+ }, reducedMotion);
8504
+ var SectionHeader = styled__default.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) {
8505
+ var $accentColor = _ref16.$accentColor;
8506
+ return $accentColor + "16";
8507
+ }, function (_ref17) {
8508
+ var $accentColor = _ref17.$accentColor;
8509
+ return $accentColor + "05";
8510
+ }, function (_ref18) {
8511
+ var $accentColor = _ref18.$accentColor;
8512
+ return $accentColor + "12";
8513
+ }, shimmer, reducedMotion);
8514
+ var HeaderIconWrap = styled__default.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) {
8515
+ var $accentColor = _ref19.$accentColor;
8516
+ return $accentColor + "40";
8517
+ }, function (_ref20) {
8518
+ var $accentColor = _ref20.$accentColor;
8519
+ return $accentColor;
8520
+ }, function (_ref21) {
8521
+ var $accentColor = _ref21.$accentColor;
8522
+ return $accentColor + "cc";
8523
+ });
8524
+ var HeaderCopy = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n flex: 1;\n min-width: 0;\n z-index: 1;\n"])));
8525
+ var Eyebrow = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n font-size: 0.6rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: ", ";\n\n svg {\n font-size: 0.65rem;\n }\n"])), function (_ref22) {
8526
+ var $accentColor = _ref22.$accentColor;
8527
+ return $accentColor;
8528
+ });
8529
+ var SectionHeading = styled__default.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"])));
8530
+ var OfferCountBadge = styled__default.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) {
8531
+ var $accentColor = _ref23.$accentColor;
8532
+ return $accentColor;
8533
+ });
8534
+ var OfferStack = styled__default.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.55rem;\n"])));
8535
+ var OfferCard = styled__default.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) {
8536
+ var $accentColor = _ref24.$accentColor;
8537
+ return $accentColor + "20";
8538
+ }, fadeSlideUp, function (_ref25) {
8539
+ var $index = _ref25.$index;
8540
+ return 0.06 + $index * 0.04;
8541
+ }, function (_ref26) {
8542
+ var $accentColor = _ref26.$accentColor;
8543
+ return $accentColor + "45";
8544
+ }, function (_ref27) {
8545
+ var $accentColor = _ref27.$accentColor;
8546
+ return $accentColor + "12";
8547
+ }, function (_ref28) {
8548
+ var $accentColor = _ref28.$accentColor;
8549
+ return $accentColor + "50";
8550
+ }, reducedMotion);
8551
+ var CardBody = styled__default.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n padding: 0.6rem 0.65rem;\n"])));
8552
+ var CardHeader = styled__default.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n gap: 0.55rem;\n"])));
8553
+ var CardHeaderCopy = styled__default.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"])));
8554
+ var SavingsBadge = styled__default.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) {
8555
+ var $accentColor = _ref29.$accentColor,
8556
+ $variant = _ref29.$variant;
8557
+ if ($variant === 'gift') {
8558
+ return "linear-gradient(145deg, #e8a317 0%, #c47d0a 100%)";
8559
+ }
8560
+ if ($variant === 'bogo') {
8561
+ return "linear-gradient(145deg, " + $accentColor + " 0%, #2d5f0a 100%)";
8562
+ }
8563
+ return "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "cc 100%)";
8564
+ }, function (_ref30) {
8565
+ var $accentColor = _ref30.$accentColor;
8566
+ return $accentColor + "28";
8567
+ });
8568
+ var BadgeTop = styled__default.span(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n font-size: 0.82rem;\n font-weight: 900;\n letter-spacing: -0.02em;\n"])));
8569
+ var BadgeBottom = styled__default.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"])));
8570
+ var CardMetaRow = styled__default.div(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.28rem;\n"])));
8571
+ var TypePill = styled__default.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) {
8572
+ var $accentColor = _ref31.$accentColor;
8573
+ return $accentColor;
8574
+ }, function (_ref32) {
8575
+ var $accentColor = _ref32.$accentColor;
8576
+ return $accentColor + "10";
8577
+ }, function (_ref33) {
8578
+ var $accentColor = _ref33.$accentColor;
8579
+ return $accentColor + "22";
8580
+ });
8581
+ var QualifiedPill = styled__default.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) {
8582
+ var $accentColor = _ref34.$accentColor;
8583
+ return $accentColor;
8584
+ }, function (_ref35) {
8585
+ var $accentColor = _ref35.$accentColor;
8586
+ return $accentColor + "12";
8587
+ }, function (_ref36) {
8588
+ var $accentColor = _ref36.$accentColor;
8589
+ return $accentColor + "30";
8590
+ });
8591
+ var TitleRow = styled__default.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"])));
8592
+ var OfferTitle = styled__default.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"])));
8593
+ var OfferDescription = styled__default.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"])));
8594
+ var BuyXTimeline = styled__default.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) {
8595
+ var $accentColor = _ref37.$accentColor;
8596
+ return $accentColor + "07";
8597
+ }, function (_ref38) {
8598
+ var $accentColor = _ref38.$accentColor;
8599
+ return $accentColor + "14";
8600
+ });
8601
+ var TimelineStep = styled__default.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.25rem;\n min-width: 0;\n"])));
8602
+ var TimelineIcon = styled__default.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) {
8603
+ var $accentColor = _ref39.$accentColor,
8604
+ $highlight = _ref39.$highlight;
8605
+ return $highlight ? '#fff' : $accentColor;
8606
+ }, function (_ref40) {
8607
+ var $accentColor = _ref40.$accentColor,
8608
+ $highlight = _ref40.$highlight;
8609
+ return $highlight ? $accentColor : $accentColor + "14";
8610
+ });
8611
+ var TimelineLabel = styled__default.span(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n font-size: 0.65rem;\n font-weight: 700;\n color: #3a4334;\n white-space: nowrap;\n"])));
8612
+ var TimelineTrack = styled__default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n align-items: center;\n min-width: 2rem;\n padding: 0 0.15rem;\n"])));
8613
+ var TimelineArrow = styled__default.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) {
8614
+ var $accentColor = _ref41.$accentColor;
8615
+ return $accentColor + "44";
8616
+ }, function (_ref42) {
8617
+ var $accentColor = _ref42.$accentColor;
8618
+ return $accentColor;
8619
+ }, function (_ref43) {
8620
+ var $accentColor = _ref43.$accentColor;
8621
+ return $accentColor;
8622
+ });
8623
+ var ProgressBlock = styled__default.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n"])));
8624
+ var ProgressTrack = styled__default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 0.35rem;\n border-radius: 999px;\n background: #e8ede3;\n overflow: hidden;\n"])));
8625
+ var ProgressFill = styled__default.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) {
8626
+ var $percent = _ref44.$percent;
8627
+ return $percent;
8628
+ }, function (_ref45) {
8629
+ var $accentColor = _ref45.$accentColor;
8630
+ return $accentColor + "cc";
8631
+ }, function (_ref46) {
8632
+ var $accentColor = _ref46.$accentColor;
8633
+ return $accentColor;
8634
+ }, progressGrow, reducedMotion);
8635
+ var ProgressMeta = styled__default.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"])));
8636
+ var ProgressCount = styled__default.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"])));
8637
+ var ProgressHint = styled__default.span(_templateObject49 || (_templateObject49 = _taggedTemplateLiteralLoose(["\n font-size: 0.68rem;\n font-weight: 600;\n color: #7a5e12;\n line-height: 1.3;\n"])));
8638
+ var SuccessBanner = styled__default.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) {
8639
+ var $accentColor = _ref47.$accentColor;
8640
+ return $accentColor;
8641
+ }, function (_ref48) {
8642
+ var $accentColor = _ref48.$accentColor;
8643
+ return $accentColor + "10";
8644
+ }, function (_ref49) {
8645
+ var $accentColor = _ref49.$accentColor;
8646
+ return $accentColor + "25";
8647
+ });
8648
+ var StatusList = styled__default.div(_templateObject51 || (_templateObject51 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n"])));
8649
+ var StatusItem = styled__default.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) {
8650
+ var $chipIndex = _ref50.$chipIndex;
8651
+ return 0.1 + $chipIndex * 0.05;
8652
+ }, function (_ref51) {
8653
+ var $accentColor = _ref51.$accentColor,
8654
+ $tone = _ref51.$tone;
8655
+ if ($tone === 'warning') return '#fff8eb';
8656
+ if ($tone === 'success') return $accentColor + "10";
8657
+ return '#f4f6f1';
8658
+ }, function (_ref52) {
8659
+ var $accentColor = _ref52.$accentColor,
8660
+ $tone = _ref52.$tone;
8661
+ if ($tone === 'warning') return '#8a6400';
8662
+ if ($tone === 'success') return $accentColor;
8663
+ return '#45503c';
8664
+ }, function (_ref53) {
8665
+ var $accentColor = _ref53.$accentColor,
8666
+ $tone = _ref53.$tone;
8667
+ if ($tone === 'warning') return '#f0d48a';
8668
+ if ($tone === 'success') return $accentColor + "28";
8669
+ return '#e0e5da';
8670
+ }, reducedMotion);
8671
+ var GiftSection = styled__default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteralLoose(["\n padding-top: 0.35rem;\n border-top: 1px solid #eef1e9;\n"])));
8672
+ var GiftSectionHeader = styled__default.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) {
8673
+ var $accentColor = _ref54.$accentColor;
8674
+ return $accentColor;
8675
+ });
8676
+ var GiftList = styled__default.div(_templateObject55 || (_templateObject55 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 0.22rem;\n"])));
8677
+ var GiftLink = styled__default.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) {
8678
+ var $accentColor = _ref55.$accentColor;
8679
+ return $accentColor + "1e";
8680
+ }, function (_ref56) {
8681
+ var $accentColor = _ref56.$accentColor;
8682
+ return $accentColor;
8683
+ }, function (_ref57) {
8684
+ var $accentColor = _ref57.$accentColor;
8685
+ return $accentColor;
8686
+ }, function (_ref58) {
8687
+ var $accentColor = _ref58.$accentColor;
8688
+ return $accentColor + "08";
8689
+ }, function (_ref59) {
8690
+ var $accentColor = _ref59.$accentColor;
8691
+ return $accentColor;
8692
+ }, reducedMotion);
8693
+ var CodeRow = styled__default.div(_templateObject57 || (_templateObject57 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 0.3rem;\n flex-shrink: 0;\n"])));
8694
+ var CodeValue = styled__default.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) {
8695
+ var $accentColor = _ref60.$accentColor;
8696
+ return $accentColor;
8697
+ });
8698
+ var PrimaryCopyButton = styled__default.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) {
8699
+ var $accentColor = _ref61.$accentColor,
8700
+ $copied = _ref61.$copied;
8701
+ return $copied ? "linear-gradient(145deg, " + $accentColor + " 0%, " + $accentColor + "dd 100%)" : 'linear-gradient(145deg, #1a2114 0%, #0f140c 100%)';
8702
+ }, function (_ref62) {
8703
+ var $accentColor = _ref62.$accentColor;
8704
+ return $accentColor + "28";
8705
+ }, function (_ref63) {
8706
+ var $copied = _ref63.$copied;
8707
+ return $copied ? copyPop : 'none';
8708
+ }, function (_ref64) {
8709
+ var $accentColor = _ref64.$accentColor;
8710
+ return $accentColor;
8711
+ }, reducedMotion);
8712
+
8713
+ var _templateObject$w, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8;
8714
+ var DEFAULT_PRIMARY_COLOR$2 = '#437C0F';
8715
+ var DiscountSuggestionPreview = function DiscountSuggestionPreview(_ref) {
8716
+ var coupon = _ref.coupon,
8717
+ _ref$productPrice = _ref.productPrice,
8718
+ productPrice = _ref$productPrice === void 0 ? 0 : _ref$productPrice,
8719
+ _ref$cartQuantity = _ref.cartQuantity,
8720
+ cartQuantity = _ref$cartQuantity === void 0 ? 0 : _ref$cartQuantity,
8721
+ primaryColor = _ref.primaryColor,
8722
+ loading = _ref.loading,
8723
+ onViewOffers = _ref.onViewOffers,
8724
+ _ref$viewOffersLabel = _ref.viewOffersLabel,
8725
+ viewOffersLabel = _ref$viewOffersLabel === void 0 ? 'View All offers' : _ref$viewOffersLabel;
8726
+ var _useState = React.useState(false),
8727
+ copied = _useState[0],
8728
+ setCopied = _useState[1];
8729
+ var accentColor = primaryColor || DEFAULT_PRIMARY_COLOR$2;
8730
+ var previewText = getSuggestionPreviewText(coupon, {
8731
+ productPrice: productPrice,
8732
+ cartQuantity: cartQuantity
8733
+ });
8734
+ var code = coupon === null || coupon === void 0 ? void 0 : coupon.couponCode;
8735
+ var copyCouponCode = React.useCallback(function (event) {
8736
+ try {
8737
+ var _event$stopPropagatio;
8738
+ event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
8739
+ if (!code) return Promise.resolve();
8740
+ var _temp = _catch(function () {
8741
+ var _navigator, _navigator$clipboard;
8742
+ 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 () {
8743
+ var _window;
8744
+ setCopied(true);
8745
+ (_window = window) === null || _window === void 0 ? void 0 : _window.setTimeout(function () {
8746
+ return setCopied(false);
8747
+ }, 1800);
8748
+ });
8749
+ }, function (error) {
8750
+ console.error('Failed to copy coupon code', error);
8751
+ });
8752
+ return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
8753
+ } catch (e) {
8754
+ return Promise.reject(e);
8755
+ }
8756
+ }, [code]);
8757
+ if (!code) return null;
8758
+ var quotedCode = "\"" + code + "\"";
8759
+ var fullTitle = previewText ? quotedCode + " " + previewText : quotedCode;
8760
+ return /*#__PURE__*/React__default.createElement(SuggestionRow, {
8761
+ onClick: function onClick(event) {
8762
+ event.stopPropagation();
8763
+ }
8764
+ }, /*#__PURE__*/React__default.createElement(SuggestionText, {
8765
+ $accentColor: accentColor,
8766
+ title: fullTitle
8767
+ }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(CodeWrap, null, /*#__PURE__*/React__default.createElement(CodeValue$1, {
8768
+ $accentColor: accentColor
8769
+ }, quotedCode), /*#__PURE__*/React__default.createElement(material.Tooltip, {
8770
+ title: copied ? 'Copied!' : 'Copy code',
8771
+ arrow: true
8772
+ }, /*#__PURE__*/React__default.createElement(CopyBtn, {
8773
+ type: "button",
8774
+ $accentColor: accentColor,
8775
+ $copied: copied,
8776
+ "aria-label": "Copy coupon code " + code,
8777
+ onClick: copyCouponCode
8778
+ }, copied ? /*#__PURE__*/React__default.createElement(fi.FiCheck, null) : /*#__PURE__*/React__default.createElement(fi.FiCopy, null)))), previewText ? " " + previewText : '')), /*#__PURE__*/React__default.createElement(ViewOffersBtn, {
8779
+ type: "button",
8780
+ $accentColor: accentColor,
8781
+ onClick: function onClick(e) {
8782
+ e.stopPropagation();
8783
+ if (loading) return;
8784
+ onViewOffers === null || onViewOffers === void 0 ? void 0 : onViewOffers();
8785
+ }
8786
+ }, viewOffersLabel));
8787
+ };
8788
+ var SuggestionRow = styled__default.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"])));
8789
+ var SuggestionText = styled__default.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) {
8790
+ var $accentColor = _ref2.$accentColor;
8791
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8792
+ });
8793
+ var CodeWrap = styled__default.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"])));
8794
+ var CodeValue$1 = styled__default.span(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n font-weight: 800;\n letter-spacing: 0.02em;\n color: ", ";\n"])), function (_ref3) {
8795
+ var $accentColor = _ref3.$accentColor;
8796
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8797
+ });
8798
+ var CopyBtn = styled__default.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) {
8799
+ var $accentColor = _ref4.$accentColor,
8800
+ $copied = _ref4.$copied;
8801
+ return $copied ? $accentColor || DEFAULT_PRIMARY_COLOR$2 : ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "55";
8802
+ }, function (_ref5) {
8803
+ var $accentColor = _ref5.$accentColor,
8804
+ $copied = _ref5.$copied;
8805
+ return $copied ? ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "18" : '#fff';
8806
+ }, function (_ref6) {
8807
+ var $accentColor = _ref6.$accentColor;
8808
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8809
+ }, function (_ref7) {
8810
+ var $accentColor = _ref7.$accentColor;
8811
+ return ($accentColor || DEFAULT_PRIMARY_COLOR$2) + "14";
8812
+ }, function (_ref8) {
8813
+ var $accentColor = _ref8.$accentColor;
8814
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8815
+ });
8816
+ var ViewOffersBtn = styled__default.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) {
8817
+ var $accentColor = _ref9.$accentColor;
8818
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8819
+ }, function (_ref10) {
8820
+ var $accentColor = _ref10.$accentColor;
8821
+ return $accentColor || DEFAULT_PRIMARY_COLOR$2;
8822
+ }, function (_ref11) {
8823
+ var $accentColor = _ref11.$accentColor;
8824
+ return $accentColor ? $accentColor + "12" : '#437C0F12';
8825
+ });
8826
+
8827
+ var _templateObject$x, _templateObject2$o, _templateObject3$i, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$6;
8828
+ var ProductImage = styled__default.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"])));
8829
+ var ProductName = styled__default.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) {
7803
8830
  return props.size || '1em';
7804
8831
  });
7805
- var CartTableRow = styled__default(material.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) {
8832
+ var CartTableRow = styled__default(material.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) {
7806
8833
  return props.size || '1.19em';
7807
8834
  }, function (prop) {
7808
8835
  return prop.bg;
7809
8836
  }, function (prop) {
7810
8837
  return prop.bg;
7811
8838
  });
7812
- var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-size: 1em;\n }\n"])));
7813
- var QuantityBox = styled__default.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"])));
7814
- var DeleteBtn = styled__default.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"])));
7815
- var CardRow = function CardRow(_ref) {
7816
- var _styles$price, _styles$Btn;
7817
- var row = _ref.row,
7818
- isItemSelected = _ref.isItemSelected,
7819
- handleClick = _ref.handleClick,
7820
- imgnotfoundUrl = _ref.imgnotfoundUrl,
7821
- handleIncrementDecrement = _ref.handleIncrementDecrement,
7822
- handleRemoveProduct = _ref.handleRemoveProduct,
7823
- loading = _ref.loading,
7824
- imgSize = _ref.imgSize,
7825
- styles = _ref.styles,
7826
- clickRedirect = _ref.clickRedirect,
7827
- allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
7828
- doNotShowPrice = _ref.doNotShowPrice;
8839
+ var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-size: 1em;\n }\n"])));
8840
+ var QuantityBox = styled__default.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"])));
8841
+ var DeleteBtn = styled__default.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"])));
8842
+ var DiscountBtn = styled__default.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) {
8843
+ var $accentColor = _ref.$accentColor;
8844
+ return $accentColor || '#437C0F';
8845
+ }, function (_ref2) {
8846
+ var $accentColor = _ref2.$accentColor;
8847
+ return $accentColor || '#437C0F';
8848
+ });
8849
+ var ActionCell = styled__default.div(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n"])));
8850
+ var CardRow = function CardRow(_ref3) {
8851
+ var _styles$Btn, _styles$price, _styles$Btn2;
8852
+ var row = _ref3.row,
8853
+ isItemSelected = _ref3.isItemSelected,
8854
+ handleClick = _ref3.handleClick,
8855
+ imgnotfoundUrl = _ref3.imgnotfoundUrl,
8856
+ handleIncrementDecrement = _ref3.handleIncrementDecrement,
8857
+ handleRemoveProduct = _ref3.handleRemoveProduct,
8858
+ loading = _ref3.loading,
8859
+ imgSize = _ref3.imgSize,
8860
+ styles = _ref3.styles,
8861
+ clickRedirect = _ref3.clickRedirect,
8862
+ allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref3.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8863
+ doNotShowPrice = _ref3.doNotShowPrice,
8864
+ discountSuggesstions = _ref3.discountSuggesstions,
8865
+ showDiscountSuggestions = _ref3.showDiscountSuggestions;
7829
8866
  var imgnotfoundUrlcommon = noImgAvailable$1;
7830
8867
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
7831
8868
  var timer = React.useRef();
7832
8869
  var _useState = React.useState(row === null || row === void 0 ? void 0 : row.quantity),
7833
8870
  quantity = _useState[0],
7834
8871
  setQuantity = _useState[1];
8872
+ var _useState2 = React.useState(false),
8873
+ discountModalOpen = _useState2[0],
8874
+ setDiscountModalOpen = _useState2[1];
8875
+ 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);
8876
+ var productDiscounts = (discountSuggesstions === null || discountSuggesstions === void 0 ? void 0 : discountSuggesstions.filter(function (discount) {
8877
+ return (discount === null || discount === void 0 ? void 0 : discount.productId) == (row === null || row === void 0 ? void 0 : row.productId);
8878
+ })) || [];
8879
+ var showDiscountButton = (productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts.length) > 0;
8880
+ var firstSuggestion = productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts[0];
7835
8881
  React.useEffect(function () {
7836
8882
  setQuantity(row === null || row === void 0 ? void 0 : row.quantity);
7837
8883
  }, [row]);
@@ -7870,7 +8916,7 @@ var CardRow = function CardRow(_ref) {
7870
8916
  tabIndex: -1,
7871
8917
  key: row.ProductId,
7872
8918
  size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size,
7873
- 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)
8919
+ 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)
7874
8920
  }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
7875
8921
  padding: "checkbox",
7876
8922
  style: {
@@ -7906,6 +8952,15 @@ var CardRow = function CardRow(_ref) {
7906
8952
  }, row.productName), /*#__PURE__*/React__default.createElement(CouponDiscountName, {
7907
8953
  discountAmount: row === null || row === void 0 ? void 0 : row.couponDiscount,
7908
8954
  discountName: row === null || row === void 0 ? void 0 : row.couponCode
8955
+ }), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
8956
+ coupon: firstSuggestion,
8957
+ productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0,
8958
+ cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
8959
+ primaryColor: accentColor,
8960
+ loading: loading,
8961
+ onViewOffers: function onViewOffers() {
8962
+ return setDiscountModalOpen(true);
8963
+ }
7909
8964
  }), !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", {
7910
8965
  style: {
7911
8966
  color: 'red',
@@ -7982,7 +9037,7 @@ var CardRow = function CardRow(_ref) {
7982
9037
  discountAmount: row === null || row === void 0 ? void 0 : row.couponDiscount
7983
9038
  }))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
7984
9039
  alig: "center"
7985
- }, /*#__PURE__*/React__default.createElement(DeleteBtn, {
9040
+ }, /*#__PURE__*/React__default.createElement(ActionCell, null, /*#__PURE__*/React__default.createElement(DeleteBtn, {
7986
9041
  onClick: function onClick(e) {
7987
9042
  e.stopPropagation();
7988
9043
  if (loading) return;
@@ -7994,7 +9049,17 @@ var CardRow = function CardRow(_ref) {
7994
9049
  style: {
7995
9050
  fontSize: 'inherit'
7996
9051
  }
7997
- }))));
9052
+ }))), /*#__PURE__*/React__default.createElement(DiscountSuggestionsModal, {
9053
+ open: discountModalOpen,
9054
+ onClose: function onClose() {
9055
+ return setDiscountModalOpen(false);
9056
+ },
9057
+ productName: row === null || row === void 0 ? void 0 : row.productName,
9058
+ productDiscounts: productDiscounts,
9059
+ primaryColor: accentColor,
9060
+ cartQuantity: (row === null || row === void 0 ? void 0 : row.quantity) || 0,
9061
+ productPrice: (row === null || row === void 0 ? void 0 : row.standardPrice) || 0
9062
+ })));
7998
9063
  };
7999
9064
 
8000
9065
  var DEFAULT_PAGE_SIZE = 50;
@@ -8125,12 +9190,17 @@ function EnhancedTable(_ref2) {
8125
9190
  disabledSelectAllProductCheckbox = _ref2.disabledSelectAllProductCheckbox,
8126
9191
  clickRedirect = _ref2.clickRedirect,
8127
9192
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref2.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8128
- doNotShowPrice = _ref2.doNotShowPrice;
9193
+ doNotShowPrice = _ref2.doNotShowPrice,
9194
+ showDiscountSuggestions = _ref2.showDiscountSuggestions;
8129
9195
  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) {
8130
9196
  return _extends({}, li, {
8131
9197
  subtotal: li.standardPrice * li.quantity
8132
9198
  });
8133
9199
  });
9200
+ var discountSuggesstions = React.useMemo(function () {
9201
+ var _cartData$suggestions;
9202
+ return (_cartData$suggestions = cartData === null || cartData === void 0 ? void 0 : cartData.suggestions) != null ? _cartData$suggestions : [];
9203
+ }, [cartData === null || cartData === void 0 ? void 0 : cartData.suggestions]);
8134
9204
  var _React$useState = React.useState('asc'),
8135
9205
  order = _React$useState[0],
8136
9206
  setOrder = _React$useState[1];
@@ -8253,8 +9323,10 @@ function EnhancedTable(_ref2) {
8253
9323
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8254
9324
  doNotShowPrice: doNotShowPrice
8255
9325
  }), /*#__PURE__*/React.createElement(TableBody, null, paginatedCartArray.map(function (row, index) {
9326
+ var _row$productId;
8256
9327
  var isItemSelected = isSelected(row);
8257
9328
  return /*#__PURE__*/React.createElement(CardRow, {
9329
+ key: (_row$productId = row === null || row === void 0 ? void 0 : row.productId) != null ? _row$productId : index,
8258
9330
  row: row,
8259
9331
  isItemSelected: isItemSelected,
8260
9332
  handleClick: handleClick,
@@ -8265,7 +9337,9 @@ function EnhancedTable(_ref2) {
8265
9337
  handleRemoveProduct: handleRemoveProduct,
8266
9338
  clickRedirect: clickRedirect,
8267
9339
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8268
- doNotShowPrice: doNotShowPrice
9340
+ doNotShowPrice: doNotShowPrice,
9341
+ discountSuggesstions: discountSuggesstions,
9342
+ showDiscountSuggestions: showDiscountSuggestions
8269
9343
  });
8270
9344
  }))))), /*#__PURE__*/React.createElement("div", {
8271
9345
  style: {
@@ -8335,35 +9409,56 @@ function EnhancedTable(_ref2) {
8335
9409
  }))))));
8336
9410
  }
8337
9411
 
8338
- var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
8339
- var CartPageCard = styled__default.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"])));
8340
- var CartPageImg = styled__default.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) {
9412
+ var _templateObject$y, _templateObject2$p, _templateObject3$j, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$8;
9413
+ var CartPageCard = styled__default.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"])));
9414
+ var CartPageImg = styled__default.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) {
8341
9415
  return props.width || 'auto';
8342
9416
  }, function (props) {
8343
9417
  return props.height || 'auto';
8344
9418
  });
8345
- var NameAndQtBox = styled__default.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"])));
8346
- var CartPageCardName = styled__default.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"])));
8347
- var QtAndPriceBox = styled__default.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"])));
8348
- var CartPageQtBox = styled__default.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"])));
8349
- var CloseBtn = styled__default.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"])));
9419
+ var NameAndQtBox = styled__default.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"])));
9420
+ var CartPageCardName = styled__default.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"])));
9421
+ var QtAndPriceBox = styled__default.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"])));
9422
+ var CartPageQtBox = styled__default.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"])));
9423
+ var CloseBtn = styled__default.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"])));
8350
9424
 
8351
- var CartPageProductCard = function CartPageProductCard(_ref) {
8352
- var item = _ref.item,
8353
- imgnotfoundUrl = _ref.imgnotfoundUrl,
8354
- handleIncrementDecrement = _ref.handleIncrementDecrement,
8355
- handleRemoveProduct = _ref.handleRemoveProduct,
8356
- loading = _ref.loading,
8357
- imgSize = _ref.imgSize,
8358
- clickRedirect = _ref.clickRedirect,
8359
- allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8360
- doNotShowPrice = _ref.doNotShowPrice;
9425
+ var _templateObject$z;
9426
+ var DiscountBtn$1 = styled__default.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) {
9427
+ var $accentColor = _ref.$accentColor;
9428
+ return $accentColor || '#437C0F';
9429
+ }, function (_ref2) {
9430
+ var $accentColor = _ref2.$accentColor;
9431
+ return $accentColor || '#437C0F';
9432
+ });
9433
+ var CartPageProductCard = function CartPageProductCard(_ref3) {
9434
+ var _styles$Btn;
9435
+ var item = _ref3.item,
9436
+ imgnotfoundUrl = _ref3.imgnotfoundUrl,
9437
+ handleIncrementDecrement = _ref3.handleIncrementDecrement,
9438
+ handleRemoveProduct = _ref3.handleRemoveProduct,
9439
+ loading = _ref3.loading,
9440
+ imgSize = _ref3.imgSize,
9441
+ styles = _ref3.styles,
9442
+ clickRedirect = _ref3.clickRedirect,
9443
+ allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref3.allowToProcessInvoiceForOutOfStockProductsEcommerce,
9444
+ doNotShowPrice = _ref3.doNotShowPrice,
9445
+ discountSuggesstions = _ref3.discountSuggesstions,
9446
+ showDiscountSuggestions = _ref3.showDiscountSuggestions;
8361
9447
  var imgnotfoundUrlcommon = noImgAvailable$1;
8362
9448
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
8363
9449
  var timer = React.useRef();
8364
9450
  var _useState = React.useState(item === null || item === void 0 ? void 0 : item.quantity),
8365
9451
  quantity = _useState[0],
8366
9452
  setQuantity = _useState[1];
9453
+ var _useState2 = React.useState(false),
9454
+ discountModalOpen = _useState2[0],
9455
+ setDiscountModalOpen = _useState2[1];
9456
+ 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);
9457
+ var productDiscounts = (discountSuggesstions === null || discountSuggesstions === void 0 ? void 0 : discountSuggesstions.filter(function (discount) {
9458
+ return (discount === null || discount === void 0 ? void 0 : discount.productId) == (item === null || item === void 0 ? void 0 : item.productId);
9459
+ })) || [];
9460
+ var showDiscountButton = (productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts.length) > 0;
9461
+ var firstSuggestion = productDiscounts === null || productDiscounts === void 0 ? void 0 : productDiscounts[0];
8367
9462
  React.useEffect(function () {
8368
9463
  setQuantity(item === null || item === void 0 ? void 0 : item.quantity);
8369
9464
  }, [item]);
@@ -8392,6 +9487,10 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
8392
9487
  }
8393
9488
  }, 500);
8394
9489
  };
9490
+ var openDiscountModal = function openDiscountModal() {
9491
+ if (loading) return;
9492
+ setDiscountModalOpen(true);
9493
+ };
8395
9494
  return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
8396
9495
  src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
8397
9496
  alt: 'img',
@@ -8411,7 +9510,14 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
8411
9510
  })), !doNotShowPrice && /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(TotalAfterDiscount, {
8412
9511
  totalAmount: item === null || item === void 0 ? void 0 : item.standardPrice,
8413
9512
  discountAmount: item === null || item === void 0 ? void 0 : item.discountAmount
8414
- }))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
9513
+ }))), showDiscountSuggestions && showDiscountButton && firstSuggestion && /*#__PURE__*/React__default.createElement(DiscountSuggestionPreview, {
9514
+ coupon: firstSuggestion,
9515
+ productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0,
9516
+ cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
9517
+ primaryColor: accentColor,
9518
+ loading: loading,
9519
+ onViewOffers: openDiscountModal
9520
+ }), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
8415
9521
  className: "icon",
8416
9522
  onClick: function onClick() {
8417
9523
  if (loading) return;
@@ -8461,7 +9567,17 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
8461
9567
  if (!sure) return;
8462
9568
  handleRemoveProduct(item);
8463
9569
  }
8464
- }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, null)));
9570
+ }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, null)), /*#__PURE__*/React__default.createElement(DiscountSuggestionsModal, {
9571
+ open: discountModalOpen,
9572
+ onClose: function onClose() {
9573
+ return setDiscountModalOpen(false);
9574
+ },
9575
+ productName: item === null || item === void 0 ? void 0 : item.productName,
9576
+ productDiscounts: productDiscounts,
9577
+ primaryColor: accentColor,
9578
+ cartQuantity: (item === null || item === void 0 ? void 0 : item.quantity) || 0,
9579
+ productPrice: (item === null || item === void 0 ? void 0 : item.standardPrice) || 0
9580
+ }));
8465
9581
  };
8466
9582
 
8467
9583
  var DEFAULT_PAGE_SIZE$1 = 50;
@@ -8477,7 +9593,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8477
9593
  styles = _ref.styles,
8478
9594
  clickRedirect = _ref.clickRedirect,
8479
9595
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8480
- doNotShowPrice = _ref.doNotShowPrice;
9596
+ doNotShowPrice = _ref.doNotShowPrice,
9597
+ showDiscountSuggestions = _ref.showDiscountSuggestions;
8481
9598
  var _useState = React.useState(1),
8482
9599
  page = _useState[0],
8483
9600
  setPage = _useState[1];
@@ -8505,6 +9622,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8505
9622
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
8506
9623
  loading: true
8507
9624
  })), paginatedCartArray.map(function (item) {
9625
+ var _cartData$suggestions;
8508
9626
  return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
8509
9627
  key: item === null || item === void 0 ? void 0 : item.productId,
8510
9628
  item: item,
@@ -8513,9 +9631,12 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8513
9631
  handleIncrementDecrement: handleIncrementDecrement,
8514
9632
  handleRemoveProduct: handleRemoveProduct,
8515
9633
  imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize,
9634
+ styles: styles,
8516
9635
  clickRedirect: clickRedirect,
8517
9636
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8518
- doNotShowPrice: doNotShowPrice
9637
+ doNotShowPrice: doNotShowPrice,
9638
+ discountSuggesstions: (_cartData$suggestions = cartData === null || cartData === void 0 ? void 0 : cartData.suggestions) != null ? _cartData$suggestions : [],
9639
+ showDiscountSuggestions: showDiscountSuggestions
8519
9640
  });
8520
9641
  }))), sortedCartArray.length > 0 && /*#__PURE__*/React__default.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React__default.createElement(material.Pagination, {
8521
9642
  count: totalPages,
@@ -8564,23 +9685,23 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8564
9685
  })))));
8565
9686
  };
8566
9687
 
8567
- var _templateObject$w, _templateObject2$o, _templateObject3$i, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7, _templateObject8$5;
8568
- var CartSummaryContainer = styled__default.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) {
9688
+ var _templateObject$A, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$9, _templateObject8$7;
9689
+ var CartSummaryContainer = styled__default.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) {
8569
9690
  return props.background || '#667080';
8570
9691
  }, function (props) {
8571
9692
  return props.color || 'white';
8572
9693
  }, function (props) {
8573
9694
  return props.color || 'white';
8574
9695
  });
8575
- var CartSummaryRow = styled__default.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) {
9696
+ var CartSummaryRow = styled__default.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) {
8576
9697
  return props.justify || 'space-between';
8577
9698
  }, function (props) {
8578
9699
  return props.h5 || '1.31em';
8579
9700
  });
8580
- var CartSummaryHr = styled__default.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) {
9701
+ var CartSummaryHr = styled__default.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) {
8581
9702
  return props.color || 'rgba(255, 255, 255, 0.5)';
8582
9703
  });
8583
- var CartSummaryInputBox = styled__default.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) {
9704
+ var CartSummaryInputBox = styled__default.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) {
8584
9705
  return props.paddingBottom ? '0' : '0';
8585
9706
  }, function (props) {
8586
9707
  return props.background || '#bfc3ca';
@@ -8595,16 +9716,16 @@ var CartSummaryInputBox = styled__default.form(_templateObject4$f || (_templateO
8595
9716
  }, function (props) {
8596
9717
  return props.btn || '#393f48';
8597
9718
  });
8598
- var DiscountCouponContainer = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n padding-top: 0.5rem;\n width: 100%;\n max-height: 200px;\n overflow: auto;\n"])));
8599
- var DiscountCouponCard = styled__default.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) {
9719
+ var DiscountCouponContainer = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n padding-top: 0.5rem;\n width: 100%;\n max-height: 200px;\n overflow: auto;\n"])));
9720
+ var DiscountCouponCard = styled__default.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) {
8600
9721
  return props.btn || '#393f48';
8601
9722
  });
8602
- var CartSummaryCheckoutBtn = styled__default.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) {
9723
+ var CartSummaryCheckoutBtn = styled__default.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) {
8603
9724
  return props.background || '#393f48';
8604
9725
  }, function (props) {
8605
9726
  return props.color || 'inherit';
8606
9727
  });
8607
- var CartSummaryCheckBoxRow = styled__default(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) {
9728
+ var CartSummaryCheckBoxRow = styled__default(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) {
8608
9729
  return props.background || 'white';
8609
9730
  }, function (props) {
8610
9731
  return props.selected ? props.background : 'transparent';
@@ -8833,7 +9954,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
8833
9954
  styles = _ref.styles,
8834
9955
  onChangeDiscountCoupon = _ref.onChangeDiscountCoupon,
8835
9956
  _ref$doNotShowPrice = _ref.doNotShowPrice,
8836
- doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice;
9957
+ doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice,
9958
+ _ref$showDiscountSugg = _ref.showDiscountSuggestions,
9959
+ showDiscountSuggestions = _ref$showDiscountSugg === void 0 ? false : _ref$showDiscountSugg;
8837
9960
  var _useAllSystemFeatureV = useAllSystemFeatureValues({
8838
9961
  apiEndPoint: apiEndPoint,
8839
9962
  token: token
@@ -8957,7 +10080,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
8957
10080
  handleRemoveProduct: handleRemoveProduct,
8958
10081
  clickRedirect: clickRedirect,
8959
10082
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8960
- doNotShowPrice: doNotShowPrice
10083
+ doNotShowPrice: doNotShowPrice,
10084
+ showDiscountSuggestions: showDiscountSuggestions
8961
10085
  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
8962
10086
  retail: retail,
8963
10087
  clickRedirect: clickRedirect,
@@ -8970,7 +10094,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
8970
10094
  handleRemoveAll: handleRemoveAll,
8971
10095
  disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox,
8972
10096
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8973
- doNotShowPrice: doNotShowPrice
10097
+ doNotShowPrice: doNotShowPrice,
10098
+ showDiscountSuggestions: showDiscountSuggestions
8974
10099
  }), /*#__PURE__*/React__default.createElement(CartSummary, {
8975
10100
  apiEndPoint: apiEndPoint,
8976
10101
  token: token,
@@ -9011,12 +10136,12 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
9011
10136
  return quantityReturn;
9012
10137
  };
9013
10138
 
9014
- var _templateObject$x, _templateObject2$p, _templateObject3$j;
9015
- var CartDrawerProduct = styled__default.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) {
10139
+ var _templateObject$B, _templateObject2$r, _templateObject3$l;
10140
+ var CartDrawerProduct = styled__default.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) {
9016
10141
  return props.color || 'grey';
9017
10142
  });
9018
- var CartDrawerQtBox = styled__default.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"])));
9019
- var CartDrawerLoader = styled__default.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"])));
10143
+ var CartDrawerQtBox = styled__default.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"])));
10144
+ var CartDrawerLoader = styled__default.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"])));
9020
10145
 
9021
10146
  var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
9022
10147
  var product = _ref.product,
@@ -9277,7 +10402,7 @@ var GTagManager = function GTagManager(_ref) {
9277
10402
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
9278
10403
  };
9279
10404
 
9280
- var _templateObject$y, _templateObject2$q, _templateObject3$k, _templateObject4$g, _templateObject5$c, _templateObject6$a;
10405
+ var _templateObject$C, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e, _templateObject6$c;
9281
10406
  var OutOfStock = function OutOfStock(_ref) {
9282
10407
  var _product$body, _product$body$content, _product$body2, _product$body2$conten, _product$masterProduc, _product$header;
9283
10408
  var product = _ref.product,
@@ -9425,7 +10550,7 @@ var OutOfStock = function OutOfStock(_ref) {
9425
10550
  fontSize: '1.3rem',
9426
10551
  fontWeight: 600
9427
10552
  }
9428
- }, "Get notified when this item is in-stock"), (outofstockproducts === null || outofstockproducts === void 0 ? void 0 : outofstockproducts.length) > 0 && /*#__PURE__*/React__default.createElement(TableContainer$3, {
10553
+ }, "Get notified when this item is in-stock"), (outofstockproducts === null || outofstockproducts === void 0 ? void 0 : outofstockproducts.length) > 0 && /*#__PURE__*/React__default.createElement(TableContainer$4, {
9429
10554
  style: {
9430
10555
  maxHeight: 400
9431
10556
  },
@@ -9508,13 +10633,13 @@ var OutOfStock = function OutOfStock(_ref) {
9508
10633
  }
9509
10634
  }), /*#__PURE__*/React__default.createElement("span", null, subscribed ? 'Subscribed Successfully' : 'Subscribe')))))));
9510
10635
  };
9511
- var VariantsContainer = styled__default.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"])));
9512
- var MainCheckbox = styled__default(Checkbox)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n &.Mui-checked,\n &.MuiCheckbox-indeterminate {\n color: ", ";\n }\n"])), function (props) {
10636
+ var VariantsContainer = styled__default.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"])));
10637
+ var MainCheckbox = styled__default(Checkbox)(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n &.Mui-checked,\n &.MuiCheckbox-indeterminate {\n color: ", ";\n }\n"])), function (props) {
9513
10638
  return props.theme.primaryColor;
9514
10639
  });
9515
- var EmailInput = styled__default(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"])));
9516
- var Root$a = styled__default.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"])));
9517
- var ContainerDiv = styled__default.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) {
10640
+ var EmailInput = styled__default(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"])));
10641
+ var Root$a = styled__default.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"])));
10642
+ var ContainerDiv = styled__default.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) {
9518
10643
  return props.height ? props.height : 'auto';
9519
10644
  }, function (props) {
9520
10645
  return props.margin ? props.margin : '0.3rem 0';
@@ -9525,7 +10650,7 @@ var ContainerDiv = styled__default.div(_templateObject5$c || (_templateObject5$c
9525
10650
  }, function (props) {
9526
10651
  return props.justifyContent ? props.justifyContent : 'default';
9527
10652
  });
9528
- var StyledSubscribe = styled__default.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) {
10653
+ var StyledSubscribe = styled__default.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) {
9529
10654
  return props.theme.primaryColor;
9530
10655
  }, function (props) {
9531
10656
  return props.padding ? props.padding : '5px 15px';
@@ -9545,12 +10670,12 @@ var StyledSubscribe = styled__default.button(_templateObject6$a || (_templateObj
9545
10670
  return props.Loading || props.subscribed ? 'none' : 'auto';
9546
10671
  });
9547
10672
 
9548
- var _templateObject$z;
10673
+ var _templateObject$D;
9549
10674
  var NoData = function NoData(_ref) {
9550
10675
  _objectDestructuringEmpty(_ref);
9551
10676
  return /*#__PURE__*/React__default.createElement(CustomNoRowsOverlay, null);
9552
10677
  };
9553
- var Container$1 = styled__default.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"])));
10678
+ var Container$1 = styled__default.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"])));
9554
10679
  var CustomNoRowsOverlay = function CustomNoRowsOverlay(_ref2) {
9555
10680
  _objectDestructuringEmpty(_ref2);
9556
10681
  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("svg", {
@@ -9660,7 +10785,7 @@ var SelectStyle = function SelectStyle(hasError) {
9660
10785
  };
9661
10786
  };
9662
10787
 
9663
- var _excluded$5 = ["value", "onChange", "placeholder", "searchProductLable", "apiData", "selectedValueKey", "loadOptionsMethod", "onScanUpdate", "minSearchChar", "searchLabelRequired", "onUpdate", "autoFocus", "defaultOptions", "initialOptions", "addItemLabel", "onAddItem", "searchResultSize"];
10788
+ var _excluded$6 = ["value", "onChange", "placeholder", "searchProductLable", "apiData", "selectedValueKey", "loadOptionsMethod", "onScanUpdate", "minSearchChar", "searchLabelRequired", "onUpdate", "autoFocus", "defaultOptions", "initialOptions", "addItemLabel", "onAddItem", "searchResultSize"];
9664
10789
  var AsyncSelectField = function AsyncSelectField(_ref) {
9665
10790
  var value = _ref.value,
9666
10791
  onChange = _ref.onChange,
@@ -9681,7 +10806,7 @@ var AsyncSelectField = function AsyncSelectField(_ref) {
9681
10806
  addItemLabel = _ref.addItemLabel,
9682
10807
  onAddItem = _ref.onAddItem,
9683
10808
  searchResultSize = _ref.searchResultSize,
9684
- props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
10809
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
9685
10810
  var DEFAULT_SEARCH_RESULT_SIZE = searchResultSize || 20;
9686
10811
  var labelKey = apiData.labelKey || 'name';
9687
10812
  var queryParam = apiData.queryParam || 'name';
@@ -10017,28 +11142,28 @@ var AsyncSelect = function AsyncSelect(_ref3) {
10017
11142
  return /*#__PURE__*/React__default.createElement(AsyncSelectField, props);
10018
11143
  };
10019
11144
 
10020
- var _templateObject$A;
10021
- var Container$2 = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose([""])));
11145
+ var _templateObject$E;
11146
+ var Container$2 = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose([""])));
10022
11147
 
10023
- var _templateObject$B, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$d, _templateObject6$b;
10024
- var ProductImage$1 = styled__default.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"])));
10025
- var ProductName$1 = styled__default.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) {
11148
+ var _templateObject$F, _templateObject2$t, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$d;
11149
+ var ProductImage$1 = styled__default.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"])));
11150
+ var ProductName$1 = styled__default.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) {
10026
11151
  return props.size || '1em';
10027
11152
  }, function (props) {
10028
11153
  return props.maxHeight ? props.maxHeight + "em" : '2.75em';
10029
11154
  }, function (props) {
10030
11155
  return props.maxHeight ? props.maxHeight + "em" : '2.80em';
10031
11156
  });
10032
- var CartTableRow$1 = styled__default(material.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) {
11157
+ var CartTableRow$1 = styled__default(material.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) {
10033
11158
  return props.size || '1.19em';
10034
11159
  }, function (prop) {
10035
11160
  return prop.bg;
10036
11161
  }, function (prop) {
10037
11162
  return prop.bg;
10038
11163
  });
10039
- var CartTableCell$2 = styled__default(material.TableCell)(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-size: 1em;\n }\n"])));
10040
- var QuantityBox$1 = styled__default.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"])));
10041
- var DeleteBtn$1 = styled__default.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"])));
11164
+ var CartTableCell$2 = styled__default(material.TableCell)(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-size: 1em;\n }\n"])));
11165
+ var QuantityBox$1 = styled__default.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"])));
11166
+ var DeleteBtn$1 = styled__default.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"])));
10042
11167
  var CardRow$1 = function CardRow(_ref) {
10043
11168
  var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
10044
11169
  var row = _ref.row,
@@ -10156,13 +11281,13 @@ var CardRow$1 = function CardRow(_ref) {
10156
11281
  }))));
10157
11282
  };
10158
11283
 
10159
- var _templateObject$C, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$e, _templateObject6$c, _templateObject7$8, _templateObject8$6, _templateObject9$5;
10160
- var CartPageSection$1 = styled__default.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) {
11284
+ var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$g, _templateObject6$e, _templateObject7$a, _templateObject8$8, _templateObject9$6;
11285
+ var CartPageSection$1 = styled__default.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) {
10161
11286
  return props.bg;
10162
11287
  }, function (props) {
10163
11288
  return props.bg || '#FAE8E5';
10164
11289
  });
10165
- var CartPageContainer$1 = styled__default.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) {
11290
+ var CartPageContainer$1 = styled__default.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) {
10166
11291
  return props.maxWidth || '1600px';
10167
11292
  }, function (props) {
10168
11293
  return "min(" + (props.maxWidth || '1600px') + ",100%)";
@@ -10173,16 +11298,16 @@ var CartPageContainer$1 = styled__default.div(_templateObject2$s || (_templateOb
10173
11298
  }, function (props) {
10174
11299
  return props.color || '#BFC3CA';
10175
11300
  });
10176
- var CardsBox$1 = styled__default.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) {
11301
+ var CardsBox$1 = styled__default.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) {
10177
11302
  return props.retail ? 'grid' : 'flex';
10178
11303
  });
10179
- var CartHeading$1 = styled__default.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) {
11304
+ var CartHeading$1 = styled__default.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) {
10180
11305
  return props.color || 'black';
10181
11306
  }, function (props) {
10182
11307
  return props.h1 || 'inherit';
10183
11308
  });
10184
- var Loader$2 = styled__default.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"])));
10185
- var CartTableCell$3 = styled__default(material.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) {
11309
+ var Loader$2 = styled__default.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"])));
11310
+ var CartTableCell$3 = styled__default(material.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) {
10186
11311
  return "" + props.bg;
10187
11312
  }, function (props) {
10188
11313
  return "" + props.color || 'inherit';
@@ -10191,17 +11316,17 @@ var CartTableCell$3 = styled__default(material.TableCell)(_templateObject6$c ||
10191
11316
  }, function (props) {
10192
11317
  return "" + props.color || 'inherit';
10193
11318
  });
10194
- var CartTableContainer$1 = styled__default(material.TableContainer)(_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) {
11319
+ var CartTableContainer$1 = styled__default(material.TableContainer)(_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) {
10195
11320
  return props.bg || '#fdccc480';
10196
11321
  }, function (props) {
10197
11322
  return props.color || 'red';
10198
11323
  });
10199
- var CartButtonsRow$1 = styled__default.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) {
11324
+ var CartButtonsRow$1 = styled__default.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) {
10200
11325
  return props.bg || 'rgba(107, 106, 106, 1)';
10201
11326
  }, function (props) {
10202
11327
  return props.color || 'white';
10203
11328
  });
10204
- var CartPageBox$1 = styled__default.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"])));
11329
+ var CartPageBox$1 = styled__default.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"])));
10205
11330
 
10206
11331
  var headCells$1 = [{
10207
11332
  id: 'image',
@@ -10606,7 +11731,7 @@ var SnowfallComponent = function SnowfallComponent(_ref) {
10606
11731
  }) : null;
10607
11732
  };
10608
11733
 
10609
- var _templateObject$D, _templateObject2$t;
11734
+ var _templateObject$H, _templateObject2$v;
10610
11735
  var ContactUsForm = function ContactUsForm(_ref) {
10611
11736
  var apiEndPoint = _ref.apiEndPoint,
10612
11737
  serviceApiEndPoint = _ref.serviceApiEndPoint,
@@ -10731,15 +11856,15 @@ var ContactUsForm = function ContactUsForm(_ref) {
10731
11856
  }
10732
11857
  }, "Submit"))));
10733
11858
  };
10734
- var TypographyContainer$8 = styled__default(material.Typography)(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n font-size: 1.2rem !important;\n align-items: center;\n"])), function (props) {
11859
+ var TypographyContainer$8 = styled__default(material.Typography)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n font-size: 1.2rem !important;\n align-items: center;\n"])), function (props) {
10735
11860
  return props.fontColor;
10736
11861
  });
10737
- var RootContainer$3 = styled__default(material.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) {
11862
+ var RootContainer$3 = styled__default(material.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) {
10738
11863
  return props.secondaryColor;
10739
11864
  });
10740
11865
 
10741
- var _templateObject$E;
10742
- var StaticContainer = styled__default.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) {
11866
+ var _templateObject$I;
11867
+ var StaticContainer = styled__default.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) {
10743
11868
  return props.theme.fontColor || '#606060';
10744
11869
  }, function (props) {
10745
11870
  return props.theme.primaryColor;
@@ -10751,7 +11876,7 @@ var StaticContainer = styled__default.div(_templateObject$E || (_templateObject$
10751
11876
  return props.theme.fontColor || '#606060';
10752
11877
  });
10753
11878
 
10754
- var _templateObject$F;
11879
+ var _templateObject$J;
10755
11880
  var APIStaticPage = function APIStaticPage(_ref) {
10756
11881
  var _ref$colors = _ref.colors,
10757
11882
  colors = _ref$colors === void 0 ? {
@@ -10939,10 +12064,10 @@ var APIStaticPage = function APIStaticPage(_ref) {
10939
12064
  }
10940
12065
  }, "Not found"))));
10941
12066
  };
10942
- var Root$b = styled__default(material.Box)(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n img {\n max-width: 100%;\n }\n"])));
12067
+ var Root$b = styled__default(material.Box)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n img {\n max-width: 100%;\n }\n"])));
10943
12068
 
10944
- var _templateObject$G;
10945
- var StaticContainer$1 = styled__default.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) {
12069
+ var _templateObject$K;
12070
+ var StaticContainer$1 = styled__default.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) {
10946
12071
  return props.theme.fontColor || '#606060';
10947
12072
  }, function (props) {
10948
12073
  return props.theme.primaryColor;
@@ -10954,7 +12079,7 @@ var StaticContainer$1 = styled__default.div(_templateObject$G || (_templateObjec
10954
12079
  return props.theme.fontColor || '#606060';
10955
12080
  });
10956
12081
 
10957
- var _templateObject$H;
12082
+ var _templateObject$L;
10958
12083
  var StaticPage = function StaticPage(_ref) {
10959
12084
  var _data$content;
10960
12085
  var _ref$colors = _ref.colors,
@@ -11022,9 +12147,9 @@ var StaticPage = function StaticPage(_ref) {
11022
12147
  referrerPolicy: "no-referrer-when-downgrade"
11023
12148
  })))));
11024
12149
  };
11025
- var Root$c = styled__default(material.Box)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose([""])));
12150
+ var Root$c = styled__default(material.Box)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose([""])));
11026
12151
 
11027
- var _templateObject$I;
12152
+ var _templateObject$M;
11028
12153
  var StaticPageList = function StaticPageList(_ref) {
11029
12154
  var _sortBy;
11030
12155
  var apiEndPoint = _ref.apiEndPoint,
@@ -11132,9 +12257,9 @@ var StaticPageList = function StaticPageList(_ref) {
11132
12257
  }
11133
12258
  }, "Not found")))));
11134
12259
  };
11135
- var TitleContainer$2 = styled__default.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"])));
12260
+ var TitleContainer$2 = styled__default.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"])));
11136
12261
 
11137
- var _excluded$6 = ["userName", "children", "style"];
12262
+ var _excluded$7 = ["userName", "children", "style"];
11138
12263
  var colors$1 = ['#FFB900', '#D83B01', '#B50E0E', '#E81123', '#B4009E', '#5C2D91', '#0078D7', '#00B4FF', '#008272', '#107C10'];
11139
12264
  var getRandomColor = function getRandomColor(userName) {
11140
12265
  return colors$1[(userName === null || userName === void 0 ? void 0 : userName.length) % (colors$1 === null || colors$1 === void 0 ? void 0 : colors$1.length)];
@@ -11153,7 +12278,7 @@ var Avatar = function Avatar(_ref) {
11153
12278
  var userName = _ref.userName,
11154
12279
  children = _ref.children,
11155
12280
  style = _ref.style,
11156
- props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
12281
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
11157
12282
  var backgroundColor = '#1f62ff';
11158
12283
  if (userName) {
11159
12284
  backgroundColor = getRandomColor(userName);
@@ -11168,7 +12293,7 @@ var Avatar = function Avatar(_ref) {
11168
12293
  }));
11169
12294
  };
11170
12295
 
11171
- var _templateObject$J, _templateObject2$u;
12296
+ var _templateObject$N, _templateObject2$w;
11172
12297
  var SwitchUser = function SwitchUser(_ref) {
11173
12298
  var _customerData$filter, _customerData$filter$;
11174
12299
  var apiEndPoint = _ref.apiEndPoint,
@@ -11255,14 +12380,14 @@ var SwitchUser = function SwitchUser(_ref) {
11255
12380
  }, /*#__PURE__*/React__default.createElement(ai.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)))));
11256
12381
  }))));
11257
12382
  };
11258
- var RootContainer$4 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n margin: auto;\n padding: 2.4rem;\n max-width: 1920px;\n"])));
11259
- var CustomerContainer = styled__default.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) {
12383
+ var RootContainer$4 = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n margin: auto;\n padding: 2.4rem;\n max-width: 1920px;\n"])));
12384
+ var CustomerContainer = styled__default.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) {
11260
12385
  return props.theme.primaryColor || '#000000d9';
11261
12386
  }, function (props) {
11262
12387
  return props.theme.primaryColor || '#000000d9';
11263
12388
  });
11264
12389
 
11265
- var _templateObject$K, _templateObject2$v;
12390
+ var _templateObject$O, _templateObject2$x;
11266
12391
  var ThankYou = function ThankYou(_ref) {
11267
12392
  var _ref$id = _ref.id,
11268
12393
  id = _ref$id === void 0 ? 0 : _ref$id,
@@ -11321,8 +12446,8 @@ var ThankYou = function ThankYou(_ref) {
11321
12446
  onClick: onContinue
11322
12447
  }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
11323
12448
  };
11324
- var Root$d = styled__default(material.Box)(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose([""])));
11325
- var StyledButton = styled__default.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) {
12449
+ var Root$d = styled__default(material.Box)(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose([""])));
12450
+ var StyledButton = styled__default.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) {
11326
12451
  return props.theme.primaryColor;
11327
12452
  }, function (props) {
11328
12453
  return props.theme.primaryColor;
@@ -11476,38 +12601,38 @@ var DiscountSummaryModal = function DiscountSummaryModal(_ref) {
11476
12601
  }, "Okay"))));
11477
12602
  };
11478
12603
 
11479
- var _templateObject$L, _templateObject2$w, _templateObject3$n, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7;
11480
- var CheckoutRootContainer = styled__default.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) {
12604
+ var _templateObject$P, _templateObject2$y, _templateObject3$p, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$9;
12605
+ var CheckoutRootContainer = styled__default.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) {
11481
12606
  return props.bg;
11482
12607
  });
11483
- var CheckoutPageContainer = styled__default.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) {
12608
+ var CheckoutPageContainer = styled__default.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) {
11484
12609
  return props.maxWidth || '1605px';
11485
12610
  }, function (props) {
11486
12611
  return props.bg || '#fff8f6';
11487
12612
  }, function (props) {
11488
12613
  return props.primaryColor || 'rgba(50, 50, 50, 1)';
11489
12614
  });
11490
- var Row = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
11491
- var CheckoutMainWithHeader = styled__default(material.Stack)(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11492
- var CheckoutMain = styled__default.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) {
12615
+ var Row = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
12616
+ var CheckoutMainWithHeader = styled__default(material.Stack)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
12617
+ var CheckoutMain = styled__default.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) {
11493
12618
  return props.bg || 'rgba(102,112,128,0.5)';
11494
12619
  }, function (props) {
11495
12620
  return props.bg || 'rgba(102,112,128,0.5)';
11496
12621
  }, function (props) {
11497
12622
  return props.color;
11498
12623
  });
11499
- var CheckoutHeading = styled__default.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"])));
11500
- var CheckoutHeader = styled__default(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"])));
11501
- var CheckoutStepIcon = styled__default.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"])));
12624
+ var CheckoutHeading = styled__default.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"])));
12625
+ var CheckoutHeader = styled__default(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"])));
12626
+ var CheckoutStepIcon = styled__default.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"])));
11502
12627
 
11503
- var _templateObject$M, _templateObject2$x, _templateObject3$o;
11504
- var CheckoutSummaryContainer = styled__default.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) {
12628
+ var _templateObject$Q, _templateObject2$z, _templateObject3$q;
12629
+ var CheckoutSummaryContainer = styled__default.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) {
11505
12630
  return props.bg || 'rgba(255, 240, 236, 1)';
11506
12631
  }, function (props) {
11507
12632
  return props.color || ' rgba(50, 50, 50, 1)';
11508
12633
  });
11509
- var TextRow = styled__default.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"])));
11510
- var FilledInfo = styled__default.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"])));
12634
+ var TextRow = styled__default.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"])));
12635
+ var FilledInfo = styled__default.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"])));
11511
12636
 
11512
12637
  var CheckoutSummary = function CheckoutSummary(_ref) {
11513
12638
  var billingInformation = _ref.billingInformation,
@@ -11579,14 +12704,14 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
11579
12704
  }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
11580
12705
  };
11581
12706
 
11582
- 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;
11583
- var StepContainer = styled__default.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"])));
11584
- var StepsContent = styled__default.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) {
12707
+ 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;
12708
+ var StepContainer = styled__default.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"])));
12709
+ var StepsContent = styled__default.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) {
11585
12710
  return 'transparent' + '!important';
11586
12711
  }, function (props) {
11587
12712
  return props.bg || 'red';
11588
12713
  });
11589
- var StepsHeaderContainer = styled__default.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) {
12714
+ var StepsHeaderContainer = styled__default.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) {
11590
12715
  return props.single ? '1.8em 2em' : '1em 0';
11591
12716
  }, function (props) {
11592
12717
  return props.single ? '-1.56em' : '1em';
@@ -11599,11 +12724,11 @@ var StepsHeaderContainer = styled__default.div(_templateObject3$p || (_templateO
11599
12724
  }, function (props) {
11600
12725
  return props.username ? 'not-allowed' : 'pointer';
11601
12726
  });
11602
- var TextFeildContainer = styled__default.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) {
12727
+ var TextFeildContainer = styled__default.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) {
11603
12728
  var _props$theme, _props$theme$input;
11604
12729
  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';
11605
12730
  });
11606
- var CommonCheckoutBtn = styled__default.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) {
12731
+ var CommonCheckoutBtn = styled__default.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) {
11607
12732
  return props.width || '8.05em';
11608
12733
  }, function (props) {
11609
12734
  return props.height || '2.25em';
@@ -11616,7 +12741,7 @@ var CommonCheckoutBtn = styled__default.button(_templateObject5$g || (_templateO
11616
12741
  });
11617
12742
  var Select = styled__default.div.attrs({
11618
12743
  className: 'checkout-input'
11619
- })(_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) {
12744
+ })(_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) {
11620
12745
  var _props$theme2, _props$theme2$input;
11621
12746
  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';
11622
12747
  }, function (props) {
@@ -11624,12 +12749,12 @@ var Select = styled__default.div.attrs({
11624
12749
  });
11625
12750
  var SaveButton = styled__default.button.attrs({
11626
12751
  className: 'checkout-btn'
11627
- })(_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) {
12752
+ })(_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) {
11628
12753
  return props.color || '#FD0015';
11629
12754
  }, function (props) {
11630
12755
  return props.disabled ? 'not-allowed' : 'pointer';
11631
12756
  });
11632
- var ButtonRowContainer = styled__default.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) {
12757
+ var ButtonRowContainer = styled__default.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) {
11633
12758
  return props.disabledNext && '0.5';
11634
12759
  }, function (props) {
11635
12760
  return props.color || '#fd0015';
@@ -11640,7 +12765,7 @@ var ButtonRowContainer = styled__default.div(_templateObject8$8 || (_templateObj
11640
12765
  }, function (props) {
11641
12766
  return props.disabledBack ? 'not-allowed' : 'pointer';
11642
12767
  });
11643
- var CheckBoxRow = styled__default.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) {
12768
+ var CheckBoxRow = styled__default.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) {
11644
12769
  return props.padding;
11645
12770
  }, function (props) {
11646
12771
  return props.marginLeft;
@@ -11651,14 +12776,14 @@ var CheckBoxRow = styled__default.div(_templateObject9$6 || (_templateObject9$6
11651
12776
  }, function (prop) {
11652
12777
  return prop.colorText || 'red';
11653
12778
  });
11654
- var CreditCardFextField = styled__default.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) {
12779
+ var CreditCardFextField = styled__default.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) {
11655
12780
  return prop.bgInput + '!important' || '';
11656
12781
  }, function (prop) {
11657
12782
  return prop.btnBg + '!important' || '';
11658
12783
  });
11659
- var CardHeading = styled__default.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n margin-bottom: 1rem;\n"])));
11660
- var DeliveryOptionContainer = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11661
- var DeliveryOption = styled__default.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) {
12784
+ var CardHeading = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n margin-bottom: 1rem;\n"])));
12785
+ var DeliveryOptionContainer = styled__default.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
12786
+ var DeliveryOption = styled__default.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) {
11662
12787
  return props.hovered ? props.bg : '';
11663
12788
  }, function (props) {
11664
12789
  return props.hovered ? "1px solid " + props.border : "1px solid" + props.bg;
@@ -11677,19 +12802,19 @@ var DeliveryOption = styled__default.div(_templateObject13$2 || (_templateObject
11677
12802
  }, function (props) {
11678
12803
  return props.hovered ? '800' : '700';
11679
12804
  });
11680
- var CreditCard = styled__default.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"])));
11681
- var PaymentLi = styled__default.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"])));
11682
- var StyledTableRow = styled__default(material.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) {
12805
+ var CreditCard = styled__default.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"])));
12806
+ var PaymentLi = styled__default.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"])));
12807
+ var StyledTableRow = styled__default(material.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) {
11683
12808
  return props.colored ? props.bg || "'rgba(255, 240, 236, 1)'" : 'white';
11684
12809
  }, function (props) {
11685
12810
  return props.bg || 'red';
11686
12811
  });
11687
- var StyledTableCell = styled__default(material.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) {
12812
+ var StyledTableCell = styled__default(material.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) {
11688
12813
  return props.noSmall ? 'none' : '';
11689
12814
  }, function (props) {
11690
12815
  return props.noAboveSmall ? 'none' : '';
11691
12816
  });
11692
- var BottomGrid = styled__default(material.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) {
12817
+ var BottomGrid = styled__default(material.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) {
11693
12818
  return prop.primaryColor || 'rgba(107, 106, 106, 1)';
11694
12819
  }, function (prop) {
11695
12820
  var _prop$bgTextArea;
@@ -13139,7 +14264,7 @@ var erSessionStorage = {
13139
14264
  }
13140
14265
  };
13141
14266
 
13142
- var _templateObject$O, _templateObject2$z;
14267
+ var _templateObject$S, _templateObject2$B;
13143
14268
  var ConsentForm = function ConsentForm(_ref) {
13144
14269
  var apiEndPoint = _ref.apiEndPoint,
13145
14270
  token = _ref.token,
@@ -13305,7 +14430,7 @@ var InfoComponent = function InfoComponent(_ref2) {
13305
14430
  });
13306
14431
  }))));
13307
14432
  };
13308
- var InfoContainer$1 = styled__default.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"])));
14433
+ var InfoContainer$1 = styled__default.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"])));
13309
14434
  var InfoItem = function InfoItem(_ref3) {
13310
14435
  var name = _ref3.name,
13311
14436
  value = _ref3.value;
@@ -13318,7 +14443,7 @@ var InfoItem = function InfoItem(_ref3) {
13318
14443
  item: true
13319
14444
  }, /*#__PURE__*/React__default.createElement("p", null, value))));
13320
14445
  };
13321
- var InfoItemContainer = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n background: #00000010;\n padding: 0.5rem;\n"])));
14446
+ var InfoItemContainer = styled__default.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n background: #00000010;\n padding: 0.5rem;\n"])));
13322
14447
 
13323
14448
  var PaypalComponent = function PaypalComponent(_ref) {
13324
14449
  var apiEndPoint = _ref.apiEndPoint,
@@ -14693,8 +15818,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref9) {
14693
15818
  }, props)));
14694
15819
  };
14695
15820
 
14696
- var _templateObject$P, _templateObject2$A, _templateObject3$q;
14697
- var columns = [{
15821
+ var _templateObject$T, _templateObject2$C, _templateObject3$s;
15822
+ var columns$1 = [{
14698
15823
  id: 'id',
14699
15824
  label: 'Id',
14700
15825
  isSearchable: 'true'
@@ -14757,7 +15882,7 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
14757
15882
  };
14758
15883
  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer$3, {
14759
15884
  primaryColor: primaryColor
14760
- }, /*#__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, {
15885
+ }, /*#__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, {
14761
15886
  cacheFilters: true,
14762
15887
  extraFilterParams: queryParams,
14763
15888
  listUpdate: triggerTableData,
@@ -14766,7 +15891,7 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
14766
15891
  x: 1000
14767
15892
  },
14768
15893
  tableId: "master-child-map",
14769
- columns: columns,
15894
+ columns: columns$1,
14770
15895
  apiData: {
14771
15896
  url: "/vendor/portal/purchaseOrder/list",
14772
15897
  apiEndPoint: API_BASE_URL,
@@ -14808,15 +15933,15 @@ var PurchaseOrderList = function PurchaseOrderList(_ref) {
14808
15933
  setTriggerTableData: setTriggerTableData
14809
15934
  })));
14810
15935
  };
14811
- var TableContainer$2 = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n margin: 0.5rem;\n border-radius: 14px;\n"])));
14812
- var TypographyContainer$9 = styled__default(material.Typography)(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
15936
+ var TableContainer$3 = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n margin: 0.5rem;\n border-radius: 14px;\n"])));
15937
+ var TypographyContainer$9 = styled__default(material.Typography)(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
14813
15938
  return props.fontColor;
14814
15939
  });
14815
- var TitleContainer$3 = styled__default.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) {
15940
+ var TitleContainer$3 = styled__default.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) {
14816
15941
  return props.primaryColor;
14817
15942
  });
14818
15943
 
14819
- var columns$1 = [{
15944
+ var columns$2 = [{
14820
15945
  id: 'id',
14821
15946
  label: 'Id'
14822
15947
  }, {
@@ -15110,7 +16235,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
15110
16235
  fontSize: '1.2rem'
15111
16236
  }
15112
16237
  }, item === null || item === void 0 ? void 0 : item.value)))));
15113
- }))))))), /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
16238
+ }))))))), /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
15114
16239
  cacheFilters: true,
15115
16240
  extraFilterParams: queryParams,
15116
16241
  listUpdate: triggerTableData,
@@ -15119,7 +16244,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
15119
16244
  x: 1000
15120
16245
  },
15121
16246
  tableId: "master-child-map",
15122
- columns: columns$1,
16247
+ columns: columns$2,
15123
16248
  apiData: {
15124
16249
  url: "/vendor/portal/purchaseOrder/" + (router$1 === null || router$1 === void 0 ? void 0 : (_router$query = router$1.query) === null || _router$query === void 0 ? void 0 : _router$query.id),
15125
16250
  apiEndPoint: API_BASE_URL,
@@ -15167,7 +16292,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
15167
16292
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
15168
16293
  item: true,
15169
16294
  xs: 6
15170
- }, /*#__PURE__*/React__default.createElement(TableContainer$2, {
16295
+ }, /*#__PURE__*/React__default.createElement(TableContainer$3, {
15171
16296
  style: {
15172
16297
  boxShadow: 'rgba(0,0,0,0.2) 0px 0px 8px 0px'
15173
16298
  }
@@ -15193,7 +16318,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
15193
16318
  }))))), /*#__PURE__*/React__default.createElement(material.Grid, {
15194
16319
  item: true,
15195
16320
  xs: 6
15196
- }, /*#__PURE__*/React__default.createElement(TableContainer$2, {
16321
+ }, /*#__PURE__*/React__default.createElement(TableContainer$3, {
15197
16322
  style: {
15198
16323
  boxShadow: 'rgba(0,0,0,0.2) 0px 0px 8px 0px'
15199
16324
  }
@@ -15219,7 +16344,7 @@ var PurchaseOrderDetail = function PurchaseOrderDetail(_ref) {
15219
16344
  })))))));
15220
16345
  };
15221
16346
 
15222
- var columns$2 = [{
16347
+ var columns$3 = [{
15223
16348
  id: 'name',
15224
16349
  label: 'Name',
15225
16350
  isSearchable: true
@@ -15310,7 +16435,7 @@ var VendorInventory = function VendorInventory(_ref) {
15310
16435
  var onChangeQueryParams = function onChangeQueryParams(data) {
15311
16436
  setTableParams(data);
15312
16437
  };
15313
- return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$2, null, /*#__PURE__*/React__default.createElement(APITable, {
16438
+ return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TableContainer$3, null, /*#__PURE__*/React__default.createElement(APITable, {
15314
16439
  cacheFilters: true,
15315
16440
  extraFilterParams: queryParams,
15316
16441
  listUpdate: triggerTableData,
@@ -15320,7 +16445,7 @@ var VendorInventory = function VendorInventory(_ref) {
15320
16445
  x: 1000
15321
16446
  },
15322
16447
  tableId: "master-child-map",
15323
- columns: columns$2,
16448
+ columns: columns$3,
15324
16449
  apiData: {
15325
16450
  apiEndPoint: API_BASE_URL,
15326
16451
  token: token,
@@ -15383,7 +16508,7 @@ var VendorInventory = function VendorInventory(_ref) {
15383
16508
  })));
15384
16509
  };
15385
16510
 
15386
- var _templateObject$Q, _templateObject2$B, _templateObject3$r, _templateObject4$l, _templateObject5$h, _templateObject6$f, _templateObject7$b, _templateObject8$9;
16511
+ var _templateObject$U, _templateObject2$D, _templateObject3$t, _templateObject4$n, _templateObject5$j, _templateObject6$h, _templateObject7$d, _templateObject8$b;
15387
16512
  var VendorLogin = function VendorLogin(_ref) {
15388
16513
  var primaryColor = _ref.primaryColor,
15389
16514
  API_BASE_URL = _ref.API_BASE_URL;
@@ -15489,16 +16614,16 @@ var VendorLogin = function VendorLogin(_ref) {
15489
16614
  color: "inherit"
15490
16615
  }) : 'sign in'))))));
15491
16616
  };
15492
- var Container$3 = styled__default.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"])));
15493
- var StyledLogin = styled__default.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"])));
15494
- var StyledCard = styled__default(material.Card)(_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"])));
15495
- var H1 = styled__default(material.Typography)(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n margin-top: 1rem;\n"])));
15496
- var StyleInputBx = styled__default.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"])));
15497
- var ShowPassBtn = styled__default.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"])));
15498
- var ButtonContianer = styled__default.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"])));
15499
- var StyledButton$1 = styled__default(material.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"])));
16617
+ var Container$3 = styled__default.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"])));
16618
+ var StyledLogin = styled__default.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"])));
16619
+ var StyledCard = styled__default(material.Card)(_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"])));
16620
+ var H1 = styled__default(material.Typography)(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n margin-top: 1rem;\n"])));
16621
+ var StyleInputBx = styled__default.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"])));
16622
+ var ShowPassBtn = styled__default.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"])));
16623
+ var ButtonContianer = styled__default.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"])));
16624
+ var StyledButton$1 = styled__default(material.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"])));
15500
16625
 
15501
- var _templateObject$R, _templateObject2$C, _templateObject3$s, _templateObject4$m;
16626
+ var _templateObject$V, _templateObject2$E, _templateObject3$u, _templateObject4$o;
15502
16627
  var menuItems = [{
15503
16628
  name: 'My Account',
15504
16629
  Icon: ri.RiAccountBoxLine,
@@ -15706,8 +16831,8 @@ var VendorAccountDetails = function VendorAccountDetails(_ref) {
15706
16831
  height: 200
15707
16832
  }) : /*#__PURE__*/React__default.createElement(React.Fragment, null, API_BASE_URL && token && renderListItemComponent(tabValue)))))));
15708
16833
  };
15709
- var Root$e = styled__default(material.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"])));
15710
- var MainContainer$4 = styled__default.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) {
16834
+ var Root$e = styled__default(material.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"])));
16835
+ var MainContainer$4 = styled__default.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) {
15711
16836
  return props.open ? '1800px' : '1600px';
15712
16837
  });
15713
16838
  var Main$1 = styles.styled('main', {
@@ -15740,12 +16865,12 @@ var Main$1 = styles.styled('main', {
15740
16865
  overflow: 'auto'
15741
16866
  });
15742
16867
  });
15743
- var ContainerDrawer$1 = styled__default(material.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) {
16868
+ var ContainerDrawer$1 = styled__default(material.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) {
15744
16869
  return props.open && '2rem';
15745
16870
  }, function (props) {
15746
16871
  return props.primaryColor || transparent;
15747
16872
  });
15748
- var TypographyContainer$a = styled__default(material.Typography)(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
16873
+ var TypographyContainer$a = styled__default(material.Typography)(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
15749
16874
  return props.fontColor;
15750
16875
  });
15751
16876
 
@@ -15850,7 +16975,7 @@ var getRestockedData = function getRestockedData(_ref3) {
15850
16975
  }
15851
16976
  };
15852
16977
 
15853
- var _templateObject$S;
16978
+ var _templateObject$W;
15854
16979
  var NewArrival = function NewArrival(_ref) {
15855
16980
  var _newArrivalItems$cont;
15856
16981
  var apiEndPoint = _ref.apiEndPoint,
@@ -16001,7 +17126,7 @@ var DateCard = function DateCard(_ref2) {
16001
17126
  }
16002
17127
  }, item === null || item === void 0 ? void 0 : item.count));
16003
17128
  };
16004
- var ProductsGrid = styled__default.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"])));
17129
+ var ProductsGrid = styled__default.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"])));
16005
17130
 
16006
17131
  var ReStockedItem = function ReStockedItem(_ref) {
16007
17132
  var _newArrivalItems$cont;
@@ -16111,7 +17236,7 @@ var ReStockedItem = function ReStockedItem(_ref) {
16111
17236
  })))))));
16112
17237
  };
16113
17238
 
16114
- var _excluded$7 = ["children", "value", "index"];
17239
+ var _excluded$8 = ["children", "value", "index"];
16115
17240
  var NewArrivalPage = function NewArrivalPage(_ref) {
16116
17241
  var apiEndPoint = _ref.apiEndPoint,
16117
17242
  token = _ref.token,
@@ -16219,7 +17344,7 @@ function CustomTabPanel(props) {
16219
17344
  var children = props.children,
16220
17345
  value = props.value,
16221
17346
  index = props.index,
16222
- other = _objectWithoutPropertiesLoose(props, _excluded$7);
17347
+ other = _objectWithoutPropertiesLoose(props, _excluded$8);
16223
17348
  return /*#__PURE__*/React__default.createElement("div", _extends({
16224
17349
  role: "tabpanel",
16225
17350
  hidden: value !== index,
@@ -16361,21 +17486,21 @@ var moveToCart = function moveToCart(_ref3) {
16361
17486
  }
16362
17487
  };
16363
17488
 
16364
- var _templateObject$T, _templateObject2$D, _templateObject3$t, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$a, _templateObject9$7, _templateObject10$5, _templateObject11$4;
16365
- var EmptyStateText = styled__default.p(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n color: #4b4b4b;\n margin: 16px 0;\n"])));
16366
- var ProductCardWrapper = styled__default.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"])));
16367
- var TopBar = styled__default.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"])));
16368
- var SearchWrapper = styled__default(material.Box)(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 24px;\n max-width: 400px;\n width: 100%;\n }\n"])));
16369
- var TotalItemsText = styled__default.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"])));
16370
- var DeleteButton = styled__default.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"])));
16371
- var PriceContainer = styled__default.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
16372
- var DiscountPriceRow = styled__default.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n"])));
16373
- var ProductName$2 = styled__default.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"])));
16374
- var ProductActionButton = styled__default(material.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) {
17489
+ var _templateObject$X, _templateObject2$F, _templateObject3$v, _templateObject4$p, _templateObject5$k, _templateObject6$i, _templateObject7$e, _templateObject8$c, _templateObject9$8, _templateObject10$6, _templateObject11$5;
17490
+ var EmptyStateText = styled__default.p(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n font-size: 16px;\n color: #4b4b4b;\n margin: 16px 0;\n"])));
17491
+ var ProductCardWrapper = styled__default.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"])));
17492
+ var TopBar = styled__default.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"])));
17493
+ var SearchWrapper = styled__default(material.Box)(_templateObject4$p || (_templateObject4$p = _taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 24px;\n max-width: 400px;\n width: 100%;\n }\n"])));
17494
+ var TotalItemsText = styled__default.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"])));
17495
+ var DeleteButton = styled__default.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"])));
17496
+ var PriceContainer = styled__default.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])));
17497
+ var DiscountPriceRow = styled__default.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n"])));
17498
+ var ProductName$2 = styled__default.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"])));
17499
+ var ProductActionButton = styled__default(material.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) {
16375
17500
  var primaryColor = _ref.primaryColor;
16376
17501
  return primaryColor != null ? primaryColor : '#000000';
16377
17502
  });
16378
- var OutOfStockButton = styled__default(material.Button)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n && {\n color: #ffffff;\n border-radius: 10px;\n font-weight: 500;\n }\n"])));
17503
+ var OutOfStockButton = styled__default(material.Button)(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n && {\n color: #ffffff;\n border-radius: 10px;\n font-weight: 500;\n }\n"])));
16379
17504
 
16380
17505
  var getProductImage = function getProductImage(imageUrl, fallbackUrl) {
16381
17506
  var url = imageUrl || fallbackUrl;