@salesgenterp/ui-components 0.4.248 → 0.4.250

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.
package/dist/index.js CHANGED
@@ -4230,99 +4230,156 @@ var TypographyContainer$7 = styled__default(material.Typography)(_templateObject
4230
4230
  return props.fontColor;
4231
4231
  });
4232
4232
 
4233
- var _templateObject$m, _templateObject2$d, _templateObject3$8;
4234
- var storeData = {
4235
- logoUrl: '',
4236
- text1: 'PLEASE DEPOSIT OR WIRE FUNDS TO SAFA GOODS',
4237
- bankInfo: {
4238
- bankName: 'N/A',
4239
- accountName: 'N/A',
4240
- accountNumber: 'N/A',
4241
- wireRoutingNumber: 'N/A',
4242
- achRoutingNumber: 'N/A',
4243
- swiftCode: 'N/A',
4244
- bankAddress: 'N/A'
4245
- },
4246
- text2: 'PLEASE INCLUDE INVOICE NUMBER ON WIRE RECEIPT',
4247
- contactPerson: {
4248
- mainLine: 'N/A'
4249
- }
4233
+ var AsyncDataLoad = function AsyncDataLoad(_ref) {
4234
+ var apiEndPoint = _ref.apiEndPoint,
4235
+ token = _ref.token,
4236
+ children = _ref.children,
4237
+ onError = _ref.onError,
4238
+ showSkeleton = _ref.showSkeleton,
4239
+ loadingView = _ref.loadingView,
4240
+ errorView = _ref.errorView,
4241
+ asyncService = _ref.asyncService,
4242
+ triggerChange = _ref.triggerChange,
4243
+ apiConfig = _ref.apiConfig;
4244
+ var _useState = React.useState({
4245
+ status: 'loading',
4246
+ data: {}
4247
+ }),
4248
+ apiState = _useState[0],
4249
+ setApiState = _useState[1];
4250
+ var getAPIData = function getAPIData() {
4251
+ try {
4252
+ var _temp3 = _catch(function () {
4253
+ function _temp2() {
4254
+ setApiState({
4255
+ status: API_STATUSES.SUCCESS,
4256
+ data: data
4257
+ });
4258
+ }
4259
+ setApiState({
4260
+ status: API_STATUSES.LOADING,
4261
+ data: {}
4262
+ });
4263
+ var data;
4264
+ var _temp = function () {
4265
+ if (asyncService) {
4266
+ return Promise.resolve(asyncService()).then(function (_asyncService) {
4267
+ data = _asyncService;
4268
+ });
4269
+ } else {
4270
+ return Promise.resolve(API$1(_extends({
4271
+ apiEndPoint: apiEndPoint,
4272
+ token: token,
4273
+ hideErrorMessage: true
4274
+ }, apiConfig))).then(function (_API) {
4275
+ data = _API;
4276
+ });
4277
+ }
4278
+ }();
4279
+ return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
4280
+ }, function (e) {
4281
+ console.error('Async data load error', e);
4282
+ setApiState({
4283
+ status: API_STATUSES.ERROR,
4284
+ data: {}
4285
+ });
4286
+ if (onError) {
4287
+ onError(e);
4288
+ }
4289
+ });
4290
+ return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
4291
+ } catch (e) {
4292
+ return Promise.reject(e);
4293
+ }
4294
+ };
4295
+ React.useEffect(function () {
4296
+ if (apiConfig || asyncService) {
4297
+ (function () {
4298
+ return getAPIData();
4299
+ })();
4300
+ }
4301
+ }, [apiConfig, triggerChange]);
4302
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, apiState.status === API_STATUSES.LOADING ? loadingView ? loadingView : showSkeleton ? /*#__PURE__*/React__default.createElement(material.Skeleton, {
4303
+ variant: "rectangular"
4304
+ }) : /*#__PURE__*/React__default.createElement(Loader, {
4305
+ style: {
4306
+ maxWidth: 691
4307
+ }
4308
+ }) : null, apiState.status === API_STATUSES.SUCCESS ? typeof children === 'function' ? children(apiState.data) : {
4309
+ children: children
4310
+ } : null, apiState.status === API_STATUSES.ERROR ? errorView ? errorView : 'NO DATA' : null);
4250
4311
  };
4312
+ var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
4313
+
4314
+ var _templateObject$m, _templateObject2$d, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$3;
4251
4315
  var BrandStock = function BrandStock(_ref) {
4252
4316
  var _Object$keys, _Object$keys2, _data$brands;
4253
- var logoUrl = _ref.logoUrl,
4317
+ var storeData = _ref.storeData,
4254
4318
  apiEndPoint = _ref.apiEndPoint,
4255
4319
  _ref$colors = _ref.colors,
4256
4320
  colors = _ref$colors === void 0 ? {
4257
4321
  primaryColor: '#D2122E'
4258
4322
  } : _ref$colors;
4259
- var _useState = React.useState(_extends({}, storeData, {
4260
- logoUrl: logoUrl
4261
- })),
4323
+ var _useState = React.useState(_extends({}, storeData)),
4262
4324
  data = _useState[0],
4263
4325
  setData = _useState[1];
4264
4326
  React.useEffect(function () {
4265
4327
  (function () {
4266
4328
  try {
4267
- var _temp3 = _catch(function () {
4329
+ var _temp = _catch(function () {
4268
4330
  return Promise.resolve(API$1({
4269
4331
  apiEndPoint: apiEndPoint,
4270
4332
  url: "/brand/list?size=9999"
4271
4333
  })).then(function (brandList) {
4272
- function _temp2() {
4273
- return Promise.resolve(Promise.all(updatePromises)).then(function () {
4274
- setData(_extends({}, data, {
4275
- brands: updatePromises
4276
- }));
4277
- });
4278
- }
4279
- var updatePromises = [];
4280
- var _temp = _forOf(brandList === null || brandList === void 0 ? void 0 : brandList.content, function (brand) {
4281
- return Promise.resolve(getBrandById({
4282
- id: brand === null || brand === void 0 ? void 0 : brand.id
4283
- })).then(function (brandDataById) {
4284
- var modifyBrands = _extends({}, brand, {
4285
- products: brandDataById === null || brandDataById === void 0 ? void 0 : brandDataById.content
4286
- });
4287
- updatePromises === null || updatePromises === void 0 ? void 0 : updatePromises.push(modifyBrands);
4288
- });
4289
- });
4290
- return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
4334
+ setData(_extends({}, data, {
4335
+ brands: brandList === null || brandList === void 0 ? void 0 : brandList.content
4336
+ }));
4291
4337
  });
4292
4338
  }, function () {});
4293
- return _temp3 && _temp3.then ? _temp3.then(function () {}) : void 0;
4339
+ return _temp && _temp.then ? _temp.then(function () {}) : void 0;
4294
4340
  } catch (e) {
4295
4341
  Promise.reject(e);
4296
4342
  }
4297
4343
  })();
4298
4344
  }, []);
4299
- var getBrandById = function getBrandById(_ref2) {
4300
- var id = _ref2.id;
4301
- try {
4302
- var _data;
4303
- var _temp4 = _catch(function () {
4304
- return Promise.resolve(API$1({
4305
- apiEndPoint: apiEndPoint,
4306
- url: "/ecommerce/product/brand?brandIdList=" + id + "&storeIds=2&size=9999"
4307
- })).then(function (_API) {
4308
- _data = _API;
4345
+ var getBrandProducts = React.useCallback(function (_ref2) {
4346
+ var brand = _ref2.brand;
4347
+ return Promise.resolve(_catch(function () {
4348
+ var data = [];
4349
+ return Promise.resolve(API$1({
4350
+ apiEndPoint: apiEndPoint,
4351
+ url: "/ecommerce/product/brand?brandIdList=" + (brand === null || brand === void 0 ? void 0 : brand.id) + "&storeIds=2&size=9999"
4352
+ })).then(function (products) {
4353
+ function _temp3() {
4354
+ return Promise.resolve(Promise.all(updatePromises)).then(function () {
4355
+ return data;
4356
+ });
4357
+ }
4358
+ data = products === null || products === void 0 ? void 0 : products.content;
4359
+ var updatePromises = [];
4360
+ var _temp2 = _forOf(products === null || products === void 0 ? void 0 : products.content, function (product) {
4361
+ return Promise.resolve(API$1({
4362
+ apiEndPoint: apiEndPoint,
4363
+ url: "/ecommerce/product/" + (product === null || product === void 0 ? void 0 : product.productId) + "?storeIds=2"
4364
+ })).then(function (childProducts) {
4365
+ var _childProducts$body;
4366
+ product.childProducts = (childProducts === null || childProducts === void 0 ? void 0 : (_childProducts$body = childProducts.body) === null || _childProducts$body === void 0 ? void 0 : _childProducts$body.content) || [];
4367
+ });
4309
4368
  });
4310
- }, function () {});
4311
- return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {
4312
- return _data;
4313
- }) : _data);
4314
- } catch (e) {
4315
- return Promise.reject(e);
4316
- }
4317
- };
4369
+ return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
4370
+ });
4371
+ }, function () {
4372
+ return [];
4373
+ }));
4374
+ }, []);
4318
4375
  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
4319
4376
  theme: colors
4320
- }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(RootContainer$4, null, (data === null || data === void 0 ? void 0 : data.logoUrl) && /*#__PURE__*/React__default.createElement("div", {
4377
+ }, /*#__PURE__*/React__default.createElement(Root$5, null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, null, /*#__PURE__*/React__default.createElement("p", null, "Product stock sheet"), /*#__PURE__*/React__default.createElement("span", null, "Updated automatically every 5 minutes")), /*#__PURE__*/React__default.createElement(MainContainer$1, null, (data === null || data === void 0 ? void 0 : data.logoUrl) && /*#__PURE__*/React__default.createElement("div", {
4321
4378
  className: "logo"
4322
4379
  }, /*#__PURE__*/React__default.createElement("img", {
4323
4380
  className: "logo",
4324
4381
  alt: "logo",
4325
- src: data === null || data === void 0 ? void 0 : data.logoUrl
4382
+ src: (data === null || data === void 0 ? void 0 : data.logoUrl) || (data === null || data === void 0 ? void 0 : data.imgnotfoundUrl)
4326
4383
  })), /*#__PURE__*/React__default.createElement(DetailsContainer, null, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.text1), (data === null || data === void 0 ? void 0 : data.bankInfo) && (Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(data === null || data === void 0 ? void 0 : data.bankInfo)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (info, i) {
4327
4384
  var _data$bankInfo;
4328
4385
  return /*#__PURE__*/React__default.createElement("div", {
@@ -4336,48 +4393,82 @@ var BrandStock = function BrandStock(_ref) {
4336
4393
  className: "lineContainer"
4337
4394
  }, /*#__PURE__*/React__default.createElement("span", null, convertToTitleCase(info), ": "), /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : (_data$contactPerson = data.contactPerson) === null || _data$contactPerson === void 0 ? void 0 : _data$contactPerson[info]));
4338
4395
  }))), /*#__PURE__*/React__default.createElement("div", null, data === null || data === void 0 ? void 0 : (_data$brands = data.brands) === null || _data$brands === void 0 ? void 0 : _data$brands.map(function (brand, i) {
4339
- var _brand$products, _brand$products2;
4340
- return /*#__PURE__*/React__default.createElement(BrandContainer, {
4396
+ return /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
4397
+ apiEndPoint: apiEndPoint,
4398
+ asyncService: function asyncService() {
4399
+ return getBrandProducts({
4400
+ brand: brand
4401
+ });
4402
+ },
4341
4403
  key: i
4342
- }, (brand === null || brand === void 0 ? void 0 : brand.imageUrl) && /*#__PURE__*/React__default.createElement("img", {
4343
- className: "image",
4344
- alt: "logo",
4345
- src: brand === null || brand === void 0 ? void 0 : brand.imageUrl
4346
- }), /*#__PURE__*/React__default.createElement("div", {
4347
- style: {
4348
- marginBottom: '0.4rem',
4349
- textAlign: 'center'
4350
- }
4351
- }, /*#__PURE__*/React__default.createElement("p", {
4352
- style: {
4353
- fontWeight: 600
4354
- }
4355
- }, brand === null || brand === void 0 ? void 0 : brand.name), /*#__PURE__*/React__default.createElement("p", null, "Case quantity: ", (brand === null || brand === void 0 ? void 0 : brand.caseQuantity) || 'N/A')), /*#__PURE__*/React__default.createElement(TableContainer$2, {
4356
- component: Paper
4357
- }, /*#__PURE__*/React__default.createElement(Table, {
4358
- "aria-label": "simple table",
4359
- size: "small"
4360
- }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, null, /*#__PURE__*/React__default.createElement("p", null, "Product Name")), /*#__PURE__*/React__default.createElement(TableCell, {
4361
- align: "right"
4362
- }, /*#__PURE__*/React__default.createElement("p", null, "Stock")))), /*#__PURE__*/React__default.createElement(TableBody, null, (brand === null || brand === void 0 ? void 0 : (_brand$products = brand.products) === null || _brand$products === void 0 ? void 0 : _brand$products.length) > 0 ? brand === null || brand === void 0 ? void 0 : (_brand$products2 = brand.products) === null || _brand$products2 === void 0 ? void 0 : _brand$products2.map(function (row, i) {
4363
- return /*#__PURE__*/React__default.createElement(TableRow, {
4364
- key: i,
4365
- sx: {
4366
- '&:last-child td, &:last-child th': {
4367
- border: 0
4368
- }
4404
+ }, function (products) {
4405
+ return /*#__PURE__*/React__default.createElement(BrandContainer, null, /*#__PURE__*/React__default.createElement("div", {
4406
+ style: {
4407
+ display: 'flex'
4369
4408
  }
4370
- }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4409
+ }, /*#__PURE__*/React__default.createElement("img", {
4410
+ className: "brandImage",
4411
+ alt: "logo",
4412
+ src: (brand === null || brand === void 0 ? void 0 : brand.imageUrl) || (data === null || data === void 0 ? void 0 : data.imgnotfoundUrl)
4413
+ })), /*#__PURE__*/React__default.createElement("div", {
4414
+ style: {
4415
+ marginBottom: '0.4rem',
4416
+ textAlign: 'center'
4417
+ }
4418
+ }, /*#__PURE__*/React__default.createElement("p", {
4419
+ style: {
4420
+ fontWeight: 600
4421
+ }
4422
+ }, brand === null || brand === void 0 ? void 0 : brand.name), /*#__PURE__*/React__default.createElement("p", null, "Case quantity: ", (brand === null || brand === void 0 ? void 0 : brand.caseQuantity) || 'N/A')), /*#__PURE__*/React__default.createElement(TableContainer$2, {
4423
+ component: Paper
4424
+ }, /*#__PURE__*/React__default.createElement(Table, {
4425
+ "aria-label": "simple table",
4426
+ size: "small"
4427
+ }, /*#__PURE__*/React__default.createElement(TableHead, null, /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, null, /*#__PURE__*/React__default.createElement("p", null, "Product Name")), /*#__PURE__*/React__default.createElement(TableCell, {
4371
4428
  align: "right"
4372
- }, row.availableQuantity ? 'In Stock' : 'In Stock'));
4373
- }) : /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "No Data Found"))))))));
4374
- })))));
4429
+ }, /*#__PURE__*/React__default.createElement("p", null, "Stock")))), /*#__PURE__*/React__default.createElement(TableBody, null, (products === null || products === void 0 ? void 0 : products.length) > 0 ? products === null || products === void 0 ? void 0 : products.map(function (row, i) {
4430
+ var _row$childProducts, _row$childProducts2;
4431
+ return (row === null || row === void 0 ? void 0 : (_row$childProducts = row.childProducts) === null || _row$childProducts === void 0 ? void 0 : _row$childProducts.length) > 0 ? row === null || row === void 0 ? void 0 : (_row$childProducts2 = row.childProducts) === null || _row$childProducts2 === void 0 ? void 0 : _row$childProducts2.map(function (row, i) {
4432
+ return /*#__PURE__*/React__default.createElement(TableRow, {
4433
+ key: i,
4434
+ sx: {
4435
+ '&:last-child td, &:last-child th': {
4436
+ border: 0
4437
+ }
4438
+ }
4439
+ }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4440
+ align: "right"
4441
+ }, /*#__PURE__*/React__default.createElement("span", {
4442
+ style: {
4443
+ color: row.availableQuantity ? 'green' : 'green'
4444
+ }
4445
+ }, row.availableQuantity ? 'In Stock' : 'In Stock')));
4446
+ }) : /*#__PURE__*/React__default.createElement(TableRow, {
4447
+ key: i,
4448
+ sx: {
4449
+ '&:last-child td, &:last-child th': {
4450
+ border: 0
4451
+ }
4452
+ }
4453
+ }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4454
+ align: "right"
4455
+ }, /*#__PURE__*/React__default.createElement("span", {
4456
+ style: {
4457
+ color: row.availableQuantity ? 'green' : 'green'
4458
+ }
4459
+ }, row.availableQuantity ? 'In Stock' : 'In Stock')));
4460
+ }) : /*#__PURE__*/React__default.createElement(TableRow, null, /*#__PURE__*/React__default.createElement(TableCell, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "No Data Found"))))))));
4461
+ });
4462
+ })), (data === null || data === void 0 ? void 0 : data.returnPolicy) && /*#__PURE__*/React__default.createElement(ReturnPolicyContainer, null, /*#__PURE__*/React__default.createElement("h2", null, "Return Policy"), data === null || data === void 0 ? void 0 : data.returnPolicy))));
4375
4463
  };
4376
- var RootContainer$4 = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n max-width: 600px;\n margin: auto;\n p {\n font-size: 16px;\n font-weight: 500;\n }\n span {\n font-size: 15px;\n }\n .logo {\n max-width: min(400px, 100%);\n margin: 1rem auto;\n }\n"])));
4377
- var DetailsContainer = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n margin: 1.5rem 0;\n text-align: center;\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"])));
4378
- var BrandContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n margin: 1rem;\n .brandImage {\n max-width: 100%;\n margin: 1rem auto;\n }\n"])));
4379
-
4380
- var _templateObject$n, _templateObject2$e, _templateObject3$9, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2;
4464
+ var Root$5 = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n"])));
4465
+ var TitleContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n"])));
4466
+ var MainContainer$1 = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n max-width: 600px;\n margin: auto;\n\n .logo {\n max-width: min(400px, 100%);\n max-height: 200px;\n margin: 1rem auto;\n }\n"])));
4467
+ var DetailsContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n margin: 1.5rem 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"])));
4468
+ var BrandContainer = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n .brandImage {\n max-width: 100%;\n max-height: 200px;\n margin: 1rem auto;\n }\n"])));
4469
+ var ReturnPolicyContainer = styled__default.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n margin: 1rem 0;\n text-align: center;\n p {\n font-size: 16px;\n }\n"])));
4470
+
4471
+ var _templateObject$n, _templateObject2$e, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$2;
4381
4472
  var CartDrawerContainer = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n font-family: ", ";\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
4382
4473
  return props.maxWidth || '650px';
4383
4474
  }, function (props) {
@@ -4387,13 +4478,13 @@ var CartDrawerBar = styled__default.div(_templateObject2$e || (_templateObject2$
4387
4478
  var CartDrawerProductContainer = styled__default.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n /* height: 900px; */\n padding: 1rem;\n min-height: 74vh;\n opacity: ", ";\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n /* background-color: red; */\n"])), function (props) {
4388
4479
  return props.opacity;
4389
4480
  });
4390
- var CartDrawerBottomSection = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
4391
- var CartDrawerOutlinedButton = styled__default.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n width: 90%;\n height: 3.55rem;\n border: 2px solid;\n border-radius: 1rem;\n display: grid;\n place-items: center;\n font-weight: 500;\n font-size: 1rem;\n transition: 0.5s;\n outline: none;\n text-transform: capitalize;\n border-color: ", ";\n color: ", ";\n text-transform: capitalize;\n margin: 0.6rem 0;\n cursor: pointer;\n background: white;\n &:hover,\n &:focus {\n opacity: 0.8;\n letter-spacing: 1px;\n outline: none;\n }\n @media only screen and (max-width: 640px) {\n height: 2.9rem;\n }\n @media only screen and (max-width: 340px) {\n height: 2.2rem;\n margin: 0.3rem 0;\n }\n"])), function (props) {
4481
+ var CartDrawerBottomSection = styled__default.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
4482
+ var CartDrawerOutlinedButton = styled__default.button(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n width: 90%;\n height: 3.55rem;\n border: 2px solid;\n border-radius: 1rem;\n display: grid;\n place-items: center;\n font-weight: 500;\n font-size: 1rem;\n transition: 0.5s;\n outline: none;\n text-transform: capitalize;\n border-color: ", ";\n color: ", ";\n text-transform: capitalize;\n margin: 0.6rem 0;\n cursor: pointer;\n background: white;\n &:hover,\n &:focus {\n opacity: 0.8;\n letter-spacing: 1px;\n outline: none;\n }\n @media only screen and (max-width: 640px) {\n height: 2.9rem;\n }\n @media only screen and (max-width: 340px) {\n height: 2.2rem;\n margin: 0.3rem 0;\n }\n"])), function (props) {
4392
4483
  return props.color || 'black';
4393
4484
  }, function (props) {
4394
4485
  return props.color || 'black';
4395
4486
  });
4396
- var CartDrawerFilledButton = styled__default(CartDrawerOutlinedButton)(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n"])), function (props) {
4487
+ var CartDrawerFilledButton = styled__default(CartDrawerOutlinedButton)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n"])), function (props) {
4397
4488
  return props.color || 'black';
4398
4489
  });
4399
4490
  var CartDrawerEmptyCart = styled__default.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: calc(100vh - 4.6rem);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n h6 {\n font-size: 1.8rem;\n font-weight: bold;\n text-transform: uppercase;\n margin: 0;\n margin-top: 1rem;\n color: ", ";\n }\n p {\n font-size: 1.1rem;\n text-transform: capitalize;\n font-weight: 500;\n /* color: darkgrey; */\n /* color: orange; */\n }\n .icon {\n font-size: 9.5rem;\n color: darkgrey;\n /* color: orange; */\n }\n"])), function (props) {
@@ -4525,7 +4616,7 @@ var CartDrawer = function CartDrawer(_ref) {
4525
4616
  }, "continue to checkout"))));
4526
4617
  };
4527
4618
 
4528
- var _templateObject$p, _templateObject2$g, _templateObject3$b, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$2;
4619
+ var _templateObject$p, _templateObject2$g, _templateObject3$b, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$2;
4529
4620
  var CartPageSection = styled__default.section(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n border-radius: 28px;\n\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
4530
4621
  return props.bg;
4531
4622
  }, function (props) {
@@ -4547,13 +4638,13 @@ var CartPageContainer = styled__default.div(_templateObject2$g || (_templateObje
4547
4638
  var CardsBox = styled__default.div(_templateObject3$b || (_templateObject3$b = _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: 960px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
4548
4639
  return props.retail ? 'grid' : 'flex';
4549
4640
  });
4550
- var CartHeading = styled__default.div(_templateObject4$7 || (_templateObject4$7 = _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) {
4641
+ var CartHeading = styled__default.div(_templateObject4$8 || (_templateObject4$8 = _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) {
4551
4642
  return props.color || 'black';
4552
4643
  }, function (props) {
4553
4644
  return props.h1 || 'inherit';
4554
4645
  });
4555
- var Loader$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
4556
- var CartTableCell = styled__default(material.TableCell)(_templateObject6$4 || (_templateObject6$4 = _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 font-family: 'karla-fonts';\n }\n &.bg-transparent {\n // background-color: transparent !important;\n text-transform: uppercase;\n z-index: 3 !important;\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) {
4646
+ var Loader$1 = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
4647
+ var CartTableCell = styled__default(material.TableCell)(_templateObject6$5 || (_templateObject6$5 = _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 font-family: 'karla-fonts';\n }\n &.bg-transparent {\n // background-color: transparent !important;\n text-transform: uppercase;\n z-index: 3 !important;\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) {
4557
4648
  return "" + props.bg;
4558
4649
  }, function (props) {
4559
4650
  return "" + props.color || 'inherit';
@@ -5675,7 +5766,7 @@ if (process.env.NODE_ENV !== 'production') {
5675
5766
  }
5676
5767
  });
5677
5768
 
5678
- var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$8, _templateObject5$6, _templateObject6$5;
5769
+ var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$7, _templateObject6$6;
5679
5770
  var ProductImage = styled__default.img(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 58px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
5680
5771
  var ProductName = styled__default.h6(_templateObject2$h || (_templateObject2$h = _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) {
5681
5772
  return props.size || '1em';
@@ -5691,9 +5782,9 @@ var CartTableRow = styled__default(material.TableRow)(_templateObject3$c || (_te
5691
5782
  }, function (prop) {
5692
5783
  return prop.bg;
5693
5784
  });
5694
- var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n font-size: 1em;\n }\n"])));
5695
- var QuantityBox = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _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"])));
5696
- var DeleteBtn = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _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"])));
5785
+ var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n font-size: 1em;\n }\n"])));
5786
+ var QuantityBox = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _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"])));
5787
+ var DeleteBtn = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _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"])));
5697
5788
  var CardRow = function CardRow(_ref) {
5698
5789
  var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
5699
5790
  var row = _ref.row,
@@ -6035,7 +6126,7 @@ function EnhancedTable(_ref) {
6035
6126
  }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
6036
6127
  }
6037
6128
 
6038
- var _templateObject$r, _templateObject2$i, _templateObject3$d, _templateObject4$9, _templateObject5$7, _templateObject6$6, _templateObject7$4;
6129
+ var _templateObject$r, _templateObject2$i, _templateObject3$d, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$4;
6039
6130
  var CartPageCard = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: min(97%, 485px);\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: 20px;\n position: relative;\n"])));
6040
6131
  var CartPageImg = styled__default.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n /* width: 95px; */\n width: ", ";\n height: ", ";\n position: relative;\n margin-right: 1em;\n"])), function (props) {
6041
6132
  return props.width || 'auto';
@@ -6043,9 +6134,9 @@ var CartPageImg = styled__default.img(_templateObject2$i || (_templateObject2$i
6043
6134
  return props.height || '81px';
6044
6135
  });
6045
6136
  var NameAndQtBox = styled__default.div(_templateObject3$d || (_templateObject3$d = _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"])));
6046
- var CartPageCardName = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _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 max-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n color: #c3c6c9;\n }\n"])));
6047
- var QtAndPriceBox = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n .subtotal {\n color: #323232;\n text-transform: capitalize;\n font-weight: bold;\n font-size: 0.85em;\n }\n"])));
6048
- var CartPageQtBox = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 80px;\n min-width: 80px;\n height: 22px;\n .icon {\n width: 20.5px;\n height: 20.5px;\n display: grid;\n place-items: center;\n font-size: 10px;\n background: #eef1f4;\n cursor: pointer;\n }\n .qt {\n font-size: 18px;\n font-weight: 500;\n display: grid;\n place-items: center;\n color: #c3c6c9;\n }\n"])));
6137
+ var CartPageCardName = styled__default.div(_templateObject4$a || (_templateObject4$a = _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 max-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n color: #c3c6c9;\n }\n"])));
6138
+ var QtAndPriceBox = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n .subtotal {\n color: #323232;\n text-transform: capitalize;\n font-weight: bold;\n font-size: 0.85em;\n }\n"])));
6139
+ var CartPageQtBox = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 80px;\n min-width: 80px;\n height: 22px;\n .icon {\n width: 20.5px;\n height: 20.5px;\n display: grid;\n place-items: center;\n font-size: 10px;\n background: #eef1f4;\n cursor: pointer;\n }\n .qt {\n font-size: 18px;\n font-weight: 500;\n display: grid;\n place-items: center;\n color: #c3c6c9;\n }\n"])));
6049
6140
  var CloseBtn = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _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"])));
6050
6141
 
6051
6142
  var CartPageProductCard = function CartPageProductCard(_ref) {
@@ -6120,7 +6211,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
6120
6211
  })));
6121
6212
  };
6122
6213
 
6123
- var _templateObject$s, _templateObject2$j, _templateObject3$e, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$3;
6214
+ var _templateObject$s, _templateObject2$j, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$5, _templateObject8$3;
6124
6215
  var CartSummaryContainer = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n min-height: 580px;\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 font-weight: 300;\n cursor: pointer;\n }\n @media only screen and (max-width: 1340px) {\n margin-top: 4em;\n }\n"])), function (props) {
6125
6216
  return props.maxWidth || '26.375em';
6126
6217
  }, function (props) {
@@ -6138,7 +6229,7 @@ var CartSummaryRow = styled__default.div(_templateObject2$j || (_templateObject2
6138
6229
  var CartSummaryHr = styled__default.span(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1.2em 0;\n"])), function (props) {
6139
6230
  return props.color || 'rgba(255, 255, 255, 0.5)';
6140
6231
  });
6141
- var CartSummaryInputBox = styled__default.form(_templateObject4$a || (_templateObject4$a = _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.44rem;\n padding: 0.2rem 0.8rem;\n\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: 0.1em;\n\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 35%;\n height: 2.44rem;\n line-height: 0.8rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n font-family: 'karla-fonts';\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) {
6232
+ var CartSummaryInputBox = styled__default.form(_templateObject4$b || (_templateObject4$b = _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.44rem;\n padding: 0.2rem 0.8rem;\n\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: 0.1em;\n\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 35%;\n height: 2.44rem;\n line-height: 0.8rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n font-family: 'karla-fonts';\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) {
6142
6233
  return props.paddingBottom ? '0' : '0';
6143
6234
  }, function (props) {
6144
6235
  return props.retail ? '1.19rem' : '0';
@@ -6157,8 +6248,8 @@ var CartSummaryInputBox = styled__default.form(_templateObject4$a || (_templateO
6157
6248
  }, function (props) {
6158
6249
  return props.btn || '#393f48';
6159
6250
  });
6160
- var DiscountCouponContainer = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n padding: 0.6rem 0;\n width: 100%;\n"])));
6161
- var DiscountCouponCard = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n padding: 0.3rem;\n svg {\n color: ", ";\n cursor: pointer;\n font-size: 1.4rem;\n }\n"])), function (props) {
6251
+ var DiscountCouponContainer = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n padding: 0.6rem 0;\n width: 100%;\n"])));
6252
+ var DiscountCouponCard = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n padding: 0.3rem;\n svg {\n color: ", ";\n cursor: pointer;\n font-size: 1.4rem;\n }\n"])), function (props) {
6162
6253
  return props.btn || '#393f48';
6163
6254
  });
6164
6255
  var CartSummaryCheckoutBtn = styled__default.button(_templateObject7$5 || (_templateObject7$5 = _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 border-radius: ", ";\n padding: 0;\n font-family: 'karla-fonts';\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) {
@@ -6939,7 +7030,7 @@ var AsyncSelect = function AsyncSelect(_ref3) {
6939
7030
  var _templateObject$u;
6940
7031
  var Container$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose([""])));
6941
7032
 
6942
- var _templateObject$v, _templateObject2$k, _templateObject3$f, _templateObject4$b, _templateObject5$9, _templateObject6$8;
7033
+ var _templateObject$v, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$9;
6943
7034
  var ProductImage$1 = styled__default.img(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 58px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
6944
7035
  var ProductName$1 = styled__default.h6(_templateObject2$k || (_templateObject2$k = _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) {
6945
7036
  return props.size || '1em';
@@ -6955,9 +7046,9 @@ var CartTableRow$1 = styled__default(material.TableRow)(_templateObject3$f || (_
6955
7046
  }, function (prop) {
6956
7047
  return prop.bg;
6957
7048
  });
6958
- var CartTableCell$2 = styled__default(material.TableCell)(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n font-size: 1em;\n }\n"])));
6959
- var QuantityBox$1 = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _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"])));
6960
- var DeleteBtn$1 = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _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"])));
7049
+ var CartTableCell$2 = styled__default(material.TableCell)(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n font-size: 1em;\n }\n"])));
7050
+ var QuantityBox$1 = styled__default.div(_templateObject5$a || (_templateObject5$a = _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"])));
7051
+ var DeleteBtn$1 = 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"])));
6961
7052
  var CardRow$1 = function CardRow(_ref) {
6962
7053
  var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
6963
7054
  var row = _ref.row,
@@ -7064,7 +7155,7 @@ var CardRow$1 = function CardRow(_ref) {
7064
7155
  }))));
7065
7156
  };
7066
7157
 
7067
- var _templateObject$w, _templateObject2$l, _templateObject3$g, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$4, _templateObject9$3;
7158
+ var _templateObject$w, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$6, _templateObject8$4, _templateObject9$3;
7068
7159
  var CartPageSection$1 = styled__default.section(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n border-radius: 28px;\n\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
7069
7160
  return props.bg;
7070
7161
  }, function (props) {
@@ -7086,13 +7177,13 @@ var CartPageContainer$1 = styled__default.div(_templateObject2$l || (_templateOb
7086
7177
  var CardsBox$1 = styled__default.div(_templateObject3$g || (_templateObject3$g = _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: 960px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
7087
7178
  return props.retail ? 'grid' : 'flex';
7088
7179
  });
7089
- var CartHeading$1 = styled__default.div(_templateObject4$c || (_templateObject4$c = _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) {
7180
+ var CartHeading$1 = styled__default.div(_templateObject4$d || (_templateObject4$d = _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) {
7090
7181
  return props.color || 'black';
7091
7182
  }, function (props) {
7092
7183
  return props.h1 || 'inherit';
7093
7184
  });
7094
- var Loader$2 = styled__default.div(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
7095
- var CartTableCell$3 = styled__default(material.TableCell)(_templateObject6$9 || (_templateObject6$9 = _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 font-family: 'karla-fonts';\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) {
7185
+ var Loader$2 = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
7186
+ var CartTableCell$3 = styled__default(material.TableCell)(_templateObject6$a || (_templateObject6$a = _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 font-family: 'karla-fonts';\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) {
7096
7187
  return "" + props.bg;
7097
7188
  }, function (props) {
7098
7189
  return "" + props.color || 'inherit';
@@ -7540,7 +7631,7 @@ var ContactUsForm = function ContactUsForm(_ref) {
7540
7631
  return Promise.reject(e);
7541
7632
  }
7542
7633
  };
7543
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RootContainer$5, {
7634
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RootContainer$4, {
7544
7635
  secondaryColor: secondaryColor
7545
7636
  }, /*#__PURE__*/React__default.createElement(TypographyContainer$8, {
7546
7637
  fontColor: fontColor
@@ -7608,7 +7699,7 @@ var ContactUsForm = function ContactUsForm(_ref) {
7608
7699
  var TypographyContainer$8 = styled__default(material.Typography)(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n font-size: 1.2rem !important;\n align-items: center;\n"])), function (props) {
7609
7700
  return props.fontColor;
7610
7701
  });
7611
- var RootContainer$5 = styled__default(material.Stack)(_templateObject2$m || (_templateObject2$m = _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) {
7702
+ var RootContainer$4 = styled__default(material.Stack)(_templateObject2$m || (_templateObject2$m = _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) {
7612
7703
  return props.secondaryColor;
7613
7704
  });
7614
7705
 
@@ -7636,7 +7727,7 @@ var StaticPage = function StaticPage(_ref) {
7636
7727
  logoUrl = _ref.logoUrl;
7637
7728
  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
7638
7729
  theme: colors
7639
- }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$5, null, /*#__PURE__*/React__default.createElement(StaticContainer, null, /*#__PURE__*/React__default.createElement("div", {
7730
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$6, null, /*#__PURE__*/React__default.createElement(StaticContainer, null, /*#__PURE__*/React__default.createElement("div", {
7640
7731
  className: "top-bar"
7641
7732
  }, data.mainTitle), mapSrc && /*#__PURE__*/React__default.createElement("iframe", {
7642
7733
  width: "100%",
@@ -7683,7 +7774,7 @@ var StaticPage = function StaticPage(_ref) {
7683
7774
  logoUrl: logoUrl
7684
7775
  }))))))));
7685
7776
  };
7686
- var Root$5 = styled__default(material.Box)(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose([""])));
7777
+ var Root$6 = styled__default(material.Box)(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose([""])));
7687
7778
 
7688
7779
  var _templateObject$A, _templateObject2$n;
7689
7780
  var ThankYou = function ThankYou(_ref) {
@@ -7696,7 +7787,7 @@ var ThankYou = function ThankYou(_ref) {
7696
7787
  onContinue = _ref.onContinue;
7697
7788
  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
7698
7789
  theme: colors
7699
- }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$6, null, /*#__PURE__*/React__default.createElement(material.Grid, {
7790
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$7, null, /*#__PURE__*/React__default.createElement(material.Grid, {
7700
7791
  container: true,
7701
7792
  justify: "center"
7702
7793
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -7744,7 +7835,7 @@ var ThankYou = function ThankYou(_ref) {
7744
7835
  onClick: onContinue
7745
7836
  }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
7746
7837
  };
7747
- var Root$6 = styled__default(material.Box)(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose([""])));
7838
+ var Root$7 = styled__default(material.Box)(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose([""])));
7748
7839
  var StyledButton = styled__default.button(_templateObject2$n || (_templateObject2$n = _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) {
7749
7840
  return props.theme.primaryColor;
7750
7841
  }, function (props) {
@@ -7753,7 +7844,7 @@ var StyledButton = styled__default.button(_templateObject2$n || (_templateObject
7753
7844
  return props.theme.primaryColor;
7754
7845
  });
7755
7846
 
7756
- var _templateObject$B, _templateObject2$o, _templateObject3$h, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7;
7847
+ var _templateObject$B, _templateObject2$o, _templateObject3$h, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7;
7757
7848
  var CheckoutPageContainer = styled__default.div(_templateObject$B || (_templateObject$B = _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: 2.375em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\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: 1508px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 1em 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
7758
7849
  return props.maxWidth || '1605px';
7759
7850
  }, function (props) {
@@ -7761,15 +7852,15 @@ var CheckoutPageContainer = styled__default.div(_templateObject$B || (_templateO
7761
7852
  });
7762
7853
  var Row = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
7763
7854
  var CheckoutMainWithHeader = styled__default(material.Stack)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose([""])));
7764
- var CheckoutMain = styled__default.div(_templateObject4$d || (_templateObject4$d = _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: 1488px) {\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: 788px) {\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) {
7855
+ var CheckoutMain = styled__default.div(_templateObject4$e || (_templateObject4$e = _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: 1488px) {\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: 788px) {\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) {
7765
7856
  return props.bg || 'rgba(102,112,128,0.5)';
7766
7857
  }, function (props) {
7767
7858
  return props.bg || 'rgba(102,112,128,0.5)';
7768
7859
  }, function (props) {
7769
7860
  return props.color;
7770
7861
  });
7771
- var CheckoutHeading = styled__default.div(_templateObject5$b || (_templateObject5$b = _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 font-weight: 300;\n margin-top: 0.5em;\n }\n @media only screen and (max-width: 788px) {\n margin-left: 0;\n padding-left: 1em;\n }\n"])));
7772
- var CheckoutHeader = styled__default(Row)(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\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: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\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 font-weight: 300;\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: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\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"])));
7862
+ var CheckoutHeading = styled__default.div(_templateObject5$c || (_templateObject5$c = _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 font-weight: 300;\n margin-top: 0.5em;\n }\n @media only screen and (max-width: 788px) {\n margin-left: 0;\n padding-left: 1em;\n }\n"])));
7863
+ var CheckoutHeader = styled__default(Row)(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\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: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\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 font-weight: 300;\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: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\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"])));
7773
7864
  var CheckoutStepIcon = styled__default.div(_templateObject7$7 || (_templateObject7$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"])));
7774
7865
 
7775
7866
  var _templateObject$C, _templateObject2$p, _templateObject3$i;
@@ -7833,7 +7924,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
7833
7924
  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
7834
7925
  };
7835
7926
 
7836
- var _templateObject$D, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
7927
+ var _templateObject$D, _templateObject2$q, _templateObject3$j, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$8, _templateObject8$5, _templateObject9$4, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
7837
7928
  var StepContainer = styled__default.div(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\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: 1305px) {\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: 540px) {\n width: 94%;\n margin-left: 1.2em;\n }\n"])));
7838
7929
  var StepsContent = styled__default.div(_templateObject2$q || (_templateObject2$q = _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) {
7839
7930
  return 'transparent' + '!important';
@@ -7853,11 +7944,11 @@ var StepsHeaderContainer = styled__default.div(_templateObject3$j || (_templateO
7853
7944
  }, function (props) {
7854
7945
  return props.username ? 'not-allowed' : 'pointer';
7855
7946
  });
7856
- var TextFeildContainer = styled__default.div(_templateObject4$e || (_templateObject4$e = _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) {
7947
+ var TextFeildContainer = styled__default.div(_templateObject4$f || (_templateObject4$f = _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) {
7857
7948
  var _props$theme, _props$theme$input;
7858
7949
  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';
7859
7950
  });
7860
- var CommonCheckoutBtn = styled__default.button(_templateObject5$c || (_templateObject5$c = _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) {
7951
+ var CommonCheckoutBtn = styled__default.button(_templateObject5$d || (_templateObject5$d = _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) {
7861
7952
  return props.width || '8.05em';
7862
7953
  }, function (props) {
7863
7954
  return props.height || '2.25em';
@@ -7870,7 +7961,7 @@ var CommonCheckoutBtn = styled__default.button(_templateObject5$c || (_templateO
7870
7961
  });
7871
7962
  var Select = styled__default.div.attrs({
7872
7963
  className: 'checkout-input'
7873
- })(_templateObject6$b || (_templateObject6$b = _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) {
7964
+ })(_templateObject6$c || (_templateObject6$c = _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) {
7874
7965
  var _props$theme2, _props$theme2$input;
7875
7966
  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';
7876
7967
  }, function (props) {
@@ -8537,87 +8628,6 @@ var Step1 = function Step1(_ref) {
8537
8628
  })));
8538
8629
  };
8539
8630
 
8540
- var AsyncDataLoad = function AsyncDataLoad(_ref) {
8541
- var apiEndPoint = _ref.apiEndPoint,
8542
- token = _ref.token,
8543
- children = _ref.children,
8544
- onError = _ref.onError,
8545
- showSkeleton = _ref.showSkeleton,
8546
- loadingView = _ref.loadingView,
8547
- errorView = _ref.errorView,
8548
- asyncService = _ref.asyncService,
8549
- triggerChange = _ref.triggerChange,
8550
- apiConfig = _ref.apiConfig;
8551
- var _useState = React.useState({
8552
- status: 'loading',
8553
- data: {}
8554
- }),
8555
- apiState = _useState[0],
8556
- setApiState = _useState[1];
8557
- var getAPIData = function getAPIData() {
8558
- try {
8559
- var _temp3 = _catch(function () {
8560
- function _temp2() {
8561
- setApiState({
8562
- status: API_STATUSES.SUCCESS,
8563
- data: data
8564
- });
8565
- }
8566
- setApiState({
8567
- status: API_STATUSES.LOADING,
8568
- data: {}
8569
- });
8570
- var data;
8571
- var _temp = function () {
8572
- if (asyncService) {
8573
- return Promise.resolve(asyncService()).then(function (_asyncService) {
8574
- data = _asyncService;
8575
- });
8576
- } else {
8577
- return Promise.resolve(API$1(_extends({
8578
- apiEndPoint: apiEndPoint,
8579
- token: token,
8580
- hideErrorMessage: true
8581
- }, apiConfig))).then(function (_API) {
8582
- data = _API;
8583
- });
8584
- }
8585
- }();
8586
- return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
8587
- }, function (e) {
8588
- console.error('Async data load error', e);
8589
- setApiState({
8590
- status: API_STATUSES.ERROR,
8591
- data: {}
8592
- });
8593
- if (onError) {
8594
- onError(e);
8595
- }
8596
- });
8597
- return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
8598
- } catch (e) {
8599
- return Promise.reject(e);
8600
- }
8601
- };
8602
- React.useEffect(function () {
8603
- if (apiConfig || asyncService) {
8604
- (function () {
8605
- return getAPIData();
8606
- })();
8607
- }
8608
- }, [apiConfig, triggerChange]);
8609
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, apiState.status === API_STATUSES.LOADING ? loadingView ? loadingView : showSkeleton ? /*#__PURE__*/React__default.createElement(material.Skeleton, {
8610
- variant: "rectangular"
8611
- }) : /*#__PURE__*/React__default.createElement(Loader, {
8612
- style: {
8613
- maxWidth: 691
8614
- }
8615
- }) : null, apiState.status === API_STATUSES.SUCCESS ? typeof children === 'function' ? children(apiState.data) : {
8616
- children: children
8617
- } : null, apiState.status === API_STATUSES.ERROR ? errorView ? errorView : 'NO DATA' : null);
8618
- };
8619
- var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
8620
-
8621
8631
  var _templateObject$E;
8622
8632
  var Step2 = function Step2(_ref) {
8623
8633
  var _filter, _addressList$, _addressList, _JSON$parse2, _styles$button2;