@salesgenterp/ui-components 0.4.247 → 0.4.249

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 (6) hide show
  1. package/dist/index.js +201 -195
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +203 -197
  4. package/dist/index.modern.js.map +1 -1
  5. package/dist/noImgAvailable~MKyxWVUp.png +0 -0
  6. package/package.json +8 -5
package/dist/index.js CHANGED
@@ -4230,91 +4230,150 @@ 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 noImgAvailable = "noImgAvailable~MKyxWVUp.png";
4234
+
4235
+ var AsyncDataLoad = function AsyncDataLoad(_ref) {
4236
+ var apiEndPoint = _ref.apiEndPoint,
4237
+ token = _ref.token,
4238
+ children = _ref.children,
4239
+ onError = _ref.onError,
4240
+ showSkeleton = _ref.showSkeleton,
4241
+ loadingView = _ref.loadingView,
4242
+ errorView = _ref.errorView,
4243
+ asyncService = _ref.asyncService,
4244
+ triggerChange = _ref.triggerChange,
4245
+ apiConfig = _ref.apiConfig;
4246
+ var _useState = React.useState({
4247
+ status: 'loading',
4248
+ data: {}
4249
+ }),
4250
+ apiState = _useState[0],
4251
+ setApiState = _useState[1];
4252
+ var getAPIData = function getAPIData() {
4253
+ try {
4254
+ var _temp3 = _catch(function () {
4255
+ function _temp2() {
4256
+ setApiState({
4257
+ status: API_STATUSES.SUCCESS,
4258
+ data: data
4259
+ });
4260
+ }
4261
+ setApiState({
4262
+ status: API_STATUSES.LOADING,
4263
+ data: {}
4264
+ });
4265
+ var data;
4266
+ var _temp = function () {
4267
+ if (asyncService) {
4268
+ return Promise.resolve(asyncService()).then(function (_asyncService) {
4269
+ data = _asyncService;
4270
+ });
4271
+ } else {
4272
+ return Promise.resolve(API$1(_extends({
4273
+ apiEndPoint: apiEndPoint,
4274
+ token: token,
4275
+ hideErrorMessage: true
4276
+ }, apiConfig))).then(function (_API) {
4277
+ data = _API;
4278
+ });
4279
+ }
4280
+ }();
4281
+ return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
4282
+ }, function (e) {
4283
+ console.error('Async data load error', e);
4284
+ setApiState({
4285
+ status: API_STATUSES.ERROR,
4286
+ data: {}
4287
+ });
4288
+ if (onError) {
4289
+ onError(e);
4290
+ }
4291
+ });
4292
+ return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
4293
+ } catch (e) {
4294
+ return Promise.reject(e);
4295
+ }
4296
+ };
4297
+ React.useEffect(function () {
4298
+ if (apiConfig || asyncService) {
4299
+ (function () {
4300
+ return getAPIData();
4301
+ })();
4302
+ }
4303
+ }, [apiConfig, triggerChange]);
4304
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, apiState.status === API_STATUSES.LOADING ? loadingView ? loadingView : showSkeleton ? /*#__PURE__*/React__default.createElement(material.Skeleton, {
4305
+ variant: "rectangular"
4306
+ }) : /*#__PURE__*/React__default.createElement(Loader, {
4307
+ style: {
4308
+ maxWidth: 691
4309
+ }
4310
+ }) : null, apiState.status === API_STATUSES.SUCCESS ? typeof children === 'function' ? children(apiState.data) : {
4311
+ children: children
4312
+ } : null, apiState.status === API_STATUSES.ERROR ? errorView ? errorView : 'NO DATA' : null);
4250
4313
  };
4314
+ var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
4315
+
4316
+ var _templateObject$m, _templateObject2$d, _templateObject3$8, _templateObject4$6;
4251
4317
  var BrandStock = function BrandStock(_ref) {
4252
4318
  var _Object$keys, _Object$keys2, _data$brands;
4253
- var logoUrl = _ref.logoUrl,
4319
+ var storeData = _ref.storeData,
4254
4320
  apiEndPoint = _ref.apiEndPoint,
4255
4321
  _ref$colors = _ref.colors,
4256
4322
  colors = _ref$colors === void 0 ? {
4257
4323
  primaryColor: '#D2122E'
4258
4324
  } : _ref$colors;
4259
- var _useState = React.useState(_extends({}, storeData, {
4260
- logoUrl: logoUrl
4261
- })),
4325
+ var _useState = React.useState(_extends({}, storeData)),
4262
4326
  data = _useState[0],
4263
4327
  setData = _useState[1];
4264
4328
  React.useEffect(function () {
4265
4329
  (function () {
4266
4330
  try {
4267
- var _temp3 = _catch(function () {
4331
+ var _temp = _catch(function () {
4268
4332
  return Promise.resolve(API$1({
4269
4333
  apiEndPoint: apiEndPoint,
4270
4334
  url: "/brand/list?size=9999"
4271
4335
  })).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);
4336
+ setData(_extends({}, data, {
4337
+ brands: brandList === null || brandList === void 0 ? void 0 : brandList.content
4338
+ }));
4291
4339
  });
4292
4340
  }, function () {});
4293
- return _temp3 && _temp3.then ? _temp3.then(function () {}) : void 0;
4341
+ return _temp && _temp.then ? _temp.then(function () {}) : void 0;
4294
4342
  } catch (e) {
4295
4343
  Promise.reject(e);
4296
4344
  }
4297
4345
  })();
4298
4346
  }, []);
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;
4347
+ var getBrandProducts = React.useCallback(function (_ref2) {
4348
+ var brand = _ref2.brand;
4349
+ return Promise.resolve(_catch(function () {
4350
+ var data = [];
4351
+ return Promise.resolve(API$1({
4352
+ apiEndPoint: apiEndPoint,
4353
+ url: "/ecommerce/product/brand?brandIdList=" + (brand === null || brand === void 0 ? void 0 : brand.id) + "&storeIds=2&size=9999"
4354
+ })).then(function (products) {
4355
+ function _temp3() {
4356
+ return Promise.resolve(Promise.all(updatePromises)).then(function () {
4357
+ return data;
4358
+ });
4359
+ }
4360
+ data = products === null || products === void 0 ? void 0 : products.content;
4361
+ var updatePromises = [];
4362
+ var _temp2 = _forOf(products === null || products === void 0 ? void 0 : products.content, function (product) {
4363
+ return Promise.resolve(API$1({
4364
+ apiEndPoint: apiEndPoint,
4365
+ url: "/ecommerce/product/" + (product === null || product === void 0 ? void 0 : product.productId) + "?storeIds=2"
4366
+ })).then(function (childProducts) {
4367
+ var _childProducts$body;
4368
+ product.childProducts = (childProducts === null || childProducts === void 0 ? void 0 : (_childProducts$body = childProducts.body) === null || _childProducts$body === void 0 ? void 0 : _childProducts$body.content) || [];
4369
+ });
4309
4370
  });
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
- };
4371
+ return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
4372
+ });
4373
+ }, function () {
4374
+ return [];
4375
+ }));
4376
+ }, []);
4318
4377
  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
4319
4378
  theme: colors
4320
4379
  }, /*#__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", {
@@ -4322,7 +4381,7 @@ var BrandStock = function BrandStock(_ref) {
4322
4381
  }, /*#__PURE__*/React__default.createElement("img", {
4323
4382
  className: "logo",
4324
4383
  alt: "logo",
4325
- src: data === null || data === void 0 ? void 0 : data.logoUrl
4384
+ src: (data === null || data === void 0 ? void 0 : data.logoUrl) || noImgAvailable
4326
4385
  })), /*#__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
4386
  var _data$bankInfo;
4328
4387
  return /*#__PURE__*/React__default.createElement("div", {
@@ -4336,48 +4395,76 @@ var BrandStock = function BrandStock(_ref) {
4336
4395
  className: "lineContainer"
4337
4396
  }, /*#__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
4397
  }))), /*#__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, {
4398
+ return /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
4399
+ apiEndPoint: apiEndPoint,
4400
+ asyncService: function asyncService() {
4401
+ return getBrandProducts({
4402
+ brand: brand
4403
+ });
4404
+ },
4341
4405
  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
- }
4406
+ }, function (products) {
4407
+ return /*#__PURE__*/React__default.createElement(BrandContainer, null, /*#__PURE__*/React__default.createElement("img", {
4408
+ className: "image",
4409
+ alt: "logo",
4410
+ src: (brand === null || brand === void 0 ? void 0 : brand.imageUrl) || noImgAvailable
4411
+ }), /*#__PURE__*/React__default.createElement("div", {
4412
+ style: {
4413
+ marginBottom: '0.4rem',
4414
+ textAlign: 'center'
4415
+ }
4416
+ }, /*#__PURE__*/React__default.createElement("p", {
4417
+ style: {
4418
+ fontWeight: 600
4369
4419
  }
4370
- }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4420
+ }, 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, {
4421
+ component: Paper
4422
+ }, /*#__PURE__*/React__default.createElement(Table, {
4423
+ "aria-label": "simple table",
4424
+ size: "small"
4425
+ }, /*#__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
4426
  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
- })))));
4427
+ }, /*#__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) {
4428
+ var _row$childProducts, _row$childProducts2;
4429
+ 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) {
4430
+ return /*#__PURE__*/React__default.createElement(TableRow, {
4431
+ key: i,
4432
+ sx: {
4433
+ '&:last-child td, &:last-child th': {
4434
+ border: 0
4435
+ }
4436
+ }
4437
+ }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4438
+ align: "right"
4439
+ }, /*#__PURE__*/React__default.createElement("span", {
4440
+ style: {
4441
+ color: row.availableQuantity ? 'green' : 'green'
4442
+ }
4443
+ }, row.availableQuantity ? 'In Stock' : 'In Stock')));
4444
+ }) : /*#__PURE__*/React__default.createElement(TableRow, {
4445
+ key: i,
4446
+ sx: {
4447
+ '&:last-child td, &:last-child th': {
4448
+ border: 0
4449
+ }
4450
+ }
4451
+ }, /*#__PURE__*/React__default.createElement(TableCell, null, row === null || row === void 0 ? void 0 : row.productName), /*#__PURE__*/React__default.createElement(TableCell, {
4452
+ align: "right"
4453
+ }, /*#__PURE__*/React__default.createElement("span", {
4454
+ style: {
4455
+ color: row.availableQuantity ? 'green' : 'green'
4456
+ }
4457
+ }, row.availableQuantity ? 'In Stock' : 'In Stock')));
4458
+ }) : /*#__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"))))))));
4459
+ });
4460
+ })), (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
4461
  };
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"])));
4462
+ var RootContainer$4 = styled__default.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n max-width: 600px;\n margin: auto;\n\n .logo {\n max-width: min(400px, 100%);\n margin: 1rem auto;\n }\n"])));
4463
+ var DetailsContainer = styled__default.div(_templateObject2$d || (_templateObject2$d = _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"])));
4378
4464
  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"])));
4465
+ var ReturnPolicyContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n margin: 1rem;\n text-align: center;\n p {\n font-size: 16px;\n }\n"])));
4379
4466
 
4380
- var _templateObject$n, _templateObject2$e, _templateObject3$9, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2;
4467
+ var _templateObject$n, _templateObject2$e, _templateObject3$9, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$2;
4381
4468
  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
4469
  return props.maxWidth || '650px';
4383
4470
  }, function (props) {
@@ -4387,7 +4474,7 @@ var CartDrawerBar = styled__default.div(_templateObject2$e || (_templateObject2$
4387
4474
  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
4475
  return props.opacity;
4389
4476
  });
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"])));
4477
+ 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"])));
4391
4478
  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) {
4392
4479
  return props.color || 'black';
4393
4480
  }, function (props) {
@@ -4525,7 +4612,7 @@ var CartDrawer = function CartDrawer(_ref) {
4525
4612
  }, "continue to checkout"))));
4526
4613
  };
4527
4614
 
4528
- var _templateObject$p, _templateObject2$g, _templateObject3$b, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$2;
4615
+ var _templateObject$p, _templateObject2$g, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$4, _templateObject7$3, _templateObject8$2, _templateObject9$2;
4529
4616
  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
4617
  return props.bg;
4531
4618
  }, function (props) {
@@ -4547,7 +4634,7 @@ var CartPageContainer = styled__default.div(_templateObject2$g || (_templateObje
4547
4634
  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
4635
  return props.retail ? 'grid' : 'flex';
4549
4636
  });
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) {
4637
+ 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
4638
  return props.color || 'black';
4552
4639
  }, function (props) {
4553
4640
  return props.h1 || 'inherit';
@@ -5675,7 +5762,7 @@ if (process.env.NODE_ENV !== 'production') {
5675
5762
  }
5676
5763
  });
5677
5764
 
5678
- var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$8, _templateObject5$6, _templateObject6$5;
5765
+ var _templateObject$q, _templateObject2$h, _templateObject3$c, _templateObject4$9, _templateObject5$6, _templateObject6$5;
5679
5766
  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
5767
  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
5768
  return props.size || '1em';
@@ -5691,7 +5778,7 @@ var CartTableRow = styled__default(material.TableRow)(_templateObject3$c || (_te
5691
5778
  }, function (prop) {
5692
5779
  return prop.bg;
5693
5780
  });
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"])));
5781
+ 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"])));
5695
5782
  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
5783
  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"])));
5697
5784
  var CardRow = function CardRow(_ref) {
@@ -6035,7 +6122,7 @@ function EnhancedTable(_ref) {
6035
6122
  }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
6036
6123
  }
6037
6124
 
6038
- var _templateObject$r, _templateObject2$i, _templateObject3$d, _templateObject4$9, _templateObject5$7, _templateObject6$6, _templateObject7$4;
6125
+ var _templateObject$r, _templateObject2$i, _templateObject3$d, _templateObject4$a, _templateObject5$7, _templateObject6$6, _templateObject7$4;
6039
6126
  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
6127
  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
6128
  return props.width || 'auto';
@@ -6043,7 +6130,7 @@ var CartPageImg = styled__default.img(_templateObject2$i || (_templateObject2$i
6043
6130
  return props.height || '81px';
6044
6131
  });
6045
6132
  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"])));
6133
+ 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"])));
6047
6134
  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
6135
  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"])));
6049
6136
  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"])));
@@ -6120,7 +6207,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
6120
6207
  })));
6121
6208
  };
6122
6209
 
6123
- var _templateObject$s, _templateObject2$j, _templateObject3$e, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$3;
6210
+ var _templateObject$s, _templateObject2$j, _templateObject3$e, _templateObject4$b, _templateObject5$8, _templateObject6$7, _templateObject7$5, _templateObject8$3;
6124
6211
  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
6212
  return props.maxWidth || '26.375em';
6126
6213
  }, function (props) {
@@ -6138,7 +6225,7 @@ var CartSummaryRow = styled__default.div(_templateObject2$j || (_templateObject2
6138
6225
  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
6226
  return props.color || 'rgba(255, 255, 255, 0.5)';
6140
6227
  });
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) {
6228
+ 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
6229
  return props.paddingBottom ? '0' : '0';
6143
6230
  }, function (props) {
6144
6231
  return props.retail ? '1.19rem' : '0';
@@ -6939,7 +7026,7 @@ var AsyncSelect = function AsyncSelect(_ref3) {
6939
7026
  var _templateObject$u;
6940
7027
  var Container$1 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose([""])));
6941
7028
 
6942
- var _templateObject$v, _templateObject2$k, _templateObject3$f, _templateObject4$b, _templateObject5$9, _templateObject6$8;
7029
+ var _templateObject$v, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$9, _templateObject6$8;
6943
7030
  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
7031
  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
7032
  return props.size || '1em';
@@ -6955,7 +7042,7 @@ var CartTableRow$1 = styled__default(material.TableRow)(_templateObject3$f || (_
6955
7042
  }, function (prop) {
6956
7043
  return prop.bg;
6957
7044
  });
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"])));
7045
+ 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"])));
6959
7046
  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
7047
  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"])));
6961
7048
  var CardRow$1 = function CardRow(_ref) {
@@ -7064,7 +7151,7 @@ var CardRow$1 = function CardRow(_ref) {
7064
7151
  }))));
7065
7152
  };
7066
7153
 
7067
- var _templateObject$w, _templateObject2$l, _templateObject3$g, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$4, _templateObject9$3;
7154
+ var _templateObject$w, _templateObject2$l, _templateObject3$g, _templateObject4$d, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$4, _templateObject9$3;
7068
7155
  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
7156
  return props.bg;
7070
7157
  }, function (props) {
@@ -7086,7 +7173,7 @@ var CartPageContainer$1 = styled__default.div(_templateObject2$l || (_templateOb
7086
7173
  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
7174
  return props.retail ? 'grid' : 'flex';
7088
7175
  });
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) {
7176
+ 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
7177
  return props.color || 'black';
7091
7178
  }, function (props) {
7092
7179
  return props.h1 || 'inherit';
@@ -7753,7 +7840,7 @@ var StyledButton = styled__default.button(_templateObject2$n || (_templateObject
7753
7840
  return props.theme.primaryColor;
7754
7841
  });
7755
7842
 
7756
- var _templateObject$B, _templateObject2$o, _templateObject3$h, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$7;
7843
+ var _templateObject$B, _templateObject2$o, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$a, _templateObject7$7;
7757
7844
  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
7845
  return props.maxWidth || '1605px';
7759
7846
  }, function (props) {
@@ -7761,7 +7848,7 @@ var CheckoutPageContainer = styled__default.div(_templateObject$B || (_templateO
7761
7848
  });
7762
7849
  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
7850
  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) {
7851
+ 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
7852
  return props.bg || 'rgba(102,112,128,0.5)';
7766
7853
  }, function (props) {
7767
7854
  return props.bg || 'rgba(102,112,128,0.5)';
@@ -7833,7 +7920,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
7833
7920
  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
7834
7921
  };
7835
7922
 
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;
7923
+ var _templateObject$D, _templateObject2$q, _templateObject3$j, _templateObject4$f, _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;
7837
7924
  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
7925
  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
7926
  return 'transparent' + '!important';
@@ -7853,7 +7940,7 @@ var StepsHeaderContainer = styled__default.div(_templateObject3$j || (_templateO
7853
7940
  }, function (props) {
7854
7941
  return props.username ? 'not-allowed' : 'pointer';
7855
7942
  });
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) {
7943
+ 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
7944
  var _props$theme, _props$theme$input;
7858
7945
  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
7946
  });
@@ -8537,87 +8624,6 @@ var Step1 = function Step1(_ref) {
8537
8624
  })));
8538
8625
  };
8539
8626
 
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
8627
  var _templateObject$E;
8622
8628
  var Step2 = function Step2(_ref) {
8623
8629
  var _filter, _addressList$, _addressList, _JSON$parse2, _styles$button2;