@salesgenterp/ui-components 0.4.310 → 0.4.312

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
@@ -763,13 +763,24 @@ var FormTextField = function FormTextField(props) {
763
763
  control = props.control,
764
764
  rules = props.rules,
765
765
  required = props.required,
766
- onChangeField = props.onChangeField;
766
+ onChangeField = props.onChangeField,
767
+ min = props.min,
768
+ max = props.max;
767
769
  return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
768
770
  name: name,
769
771
  control: control,
770
772
  rules: _extends({
771
773
  required: required ? 'This field is required' : false
772
- }, rules),
774
+ }, rules, {
775
+ min: {
776
+ value: min,
777
+ message: "This field should be minimum " + min + " value"
778
+ },
779
+ max: {
780
+ value: max,
781
+ message: "This field should not be more than " + max + " value"
782
+ }
783
+ }),
773
784
  render: function render(_ref) {
774
785
  var _ref$field = _ref.field,
775
786
  _onChange = _ref$field.onChange,
@@ -789,6 +800,12 @@ var FormTextField = function FormTextField(props) {
789
800
  },
790
801
  error: !!error,
791
802
  helperText: error !== null && error !== void 0 && error.message ? error.message : '',
803
+ InputProps: {
804
+ inputProps: {
805
+ min: 0,
806
+ max: 10
807
+ }
808
+ },
792
809
  InputLabelProps: {
793
810
  shrink: !isNullUndefined(value) ? true : false
794
811
  }
@@ -1647,7 +1664,8 @@ var addAuthoriseDotNetCard = function addAuthoriseDotNetCard(_ref4) {
1647
1664
  token: token,
1648
1665
  url: "/authoriseDotNet/paymentProfile",
1649
1666
  method: 'post',
1650
- body: body
1667
+ body: body,
1668
+ errorMessage: 'Error in adding card.'
1651
1669
  }));
1652
1670
  } catch (e) {
1653
1671
  return Promise.reject(e);
@@ -1881,7 +1899,6 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
1881
1899
  visible = _ref.visible,
1882
1900
  onCancel = _ref.onCancel,
1883
1901
  styles = _ref.styles,
1884
- fontColor = _ref.fontColor,
1885
1902
  customerId = _ref.customerId,
1886
1903
  setListUpdate = _ref.setListUpdate;
1887
1904
  var _useForm = reactHookForm.useForm({
@@ -1889,7 +1906,8 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
1889
1906
  }),
1890
1907
  handleSubmit = _useForm.handleSubmit,
1891
1908
  control = _useForm.control,
1892
- setValue = _useForm.setValue;
1909
+ setValue = _useForm.setValue,
1910
+ watch = _useForm.watch;
1893
1911
  var _useState = React.useState(false),
1894
1912
  submitLoading = _useState[0],
1895
1913
  setSubmitLoading = _useState[1];
@@ -1899,6 +1917,11 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
1899
1917
  var _useState3 = React.useState([]),
1900
1918
  states = _useState3[0],
1901
1919
  setStates = _useState3[1];
1920
+ var cardNumber = watch('cardNumber');
1921
+ var expirationYear = watch('expirationYear');
1922
+ var expirationMonth = watch('expirationMonth');
1923
+ var firstName = watch('firstName');
1924
+ var lastName = watch('lastName');
1902
1925
  var getCountryData = function getCountryData() {
1903
1926
  try {
1904
1927
  var _temp = _catch(function () {
@@ -2005,7 +2028,11 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2005
2028
  },
2006
2029
  onClick: onCancel
2007
2030
  }, "Cancel"))))
2008
- }, /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
2031
+ }, /*#__PURE__*/React__default.createElement(Cards, {
2032
+ expiry: (expirationMonth || '') + " " + (expirationYear || '') || '----',
2033
+ name: (firstName || '') + " " + (lastName || ''),
2034
+ number: cardNumber || ''
2035
+ }), /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
2009
2036
  container: true,
2010
2037
  columnSpacing: 2
2011
2038
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -2017,7 +2044,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2017
2044
  name: "firstName",
2018
2045
  required: true,
2019
2046
  control: control,
2020
- fontColor: fontColor
2047
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2021
2048
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2022
2049
  item: true,
2023
2050
  xs: 12,
@@ -2027,7 +2054,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2027
2054
  name: "lastName",
2028
2055
  required: true,
2029
2056
  control: control,
2030
- fontColor: fontColor
2057
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2031
2058
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2032
2059
  item: true,
2033
2060
  xs: 12
@@ -2037,7 +2064,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2037
2064
  type: "number",
2038
2065
  required: true,
2039
2066
  control: control,
2040
- fontColor: fontColor
2067
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2041
2068
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2042
2069
  item: true,
2043
2070
  xs: 12,
@@ -2048,7 +2075,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2048
2075
  type: "number",
2049
2076
  required: true,
2050
2077
  control: control,
2051
- fontColor: fontColor
2078
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2052
2079
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2053
2080
  item: true,
2054
2081
  xs: 12,
@@ -2059,7 +2086,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2059
2086
  type: "number",
2060
2087
  required: true,
2061
2088
  control: control,
2062
- fontColor: fontColor
2089
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2063
2090
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2064
2091
  item: true,
2065
2092
  xs: 12,
@@ -2070,7 +2097,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2070
2097
  type: "number",
2071
2098
  required: true,
2072
2099
  control: control,
2073
- fontColor: fontColor
2100
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2074
2101
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2075
2102
  item: true,
2076
2103
  xs: 12,
@@ -2084,7 +2111,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2084
2111
  valueKey: "id",
2085
2112
  labelKey: "code",
2086
2113
  onChangeField: onUpdateCountry,
2087
- fontColor: fontColor
2114
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2088
2115
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2089
2116
  item: true,
2090
2117
  xs: 12,
@@ -2097,7 +2124,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2097
2124
  options: states,
2098
2125
  valueKey: "id",
2099
2126
  labelKey: "name",
2100
- fontColor: fontColor
2127
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2101
2128
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2102
2129
  item: true,
2103
2130
  xs: 12,
@@ -2107,7 +2134,7 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2107
2134
  name: "city",
2108
2135
  required: true,
2109
2136
  control: control,
2110
- fontColor: fontColor
2137
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2111
2138
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2112
2139
  item: true,
2113
2140
  xs: 12,
@@ -2117,23 +2144,23 @@ var AddAuthorizeDotNetCard = function AddAuthorizeDotNetCard(_ref) {
2117
2144
  name: "zipcode",
2118
2145
  required: true,
2119
2146
  control: control,
2120
- fontColor: fontColor
2147
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor
2121
2148
  }))))));
2122
2149
  };
2123
2150
 
2151
+ var _templateObject$c;
2124
2152
  var PaymentModal = function PaymentModal(_ref) {
2125
- var _customerCreditCards$, _customerCreditCards$2, _filter, _authorizeDotNetCardD, _authorizeDotNetCardD2, _authorizeDotNetCardD3, _authorizeDotNetCardD4, _authorizeDotNetCardD5, _authorizeDotNetCardD6, _authorizeDotNetCardD7, _authorizeDotNetCardD8, _customerCreditCards$4, _customerCreditCards$5;
2153
+ var _customerCreditCards$, _customerCreditCards$2, _orderData$orderDto4, _orderData$orderDto5, _orderData$orderDto6, _orderData$orderDto7, _orderData$customerDt, _orderData$orderDto8, _orderData$orderDto9, _authorizeDotNetCardD, _authorizeDotNetCardD2, _authorizeDotNetCardD3, _authorizeDotNetCardD4, _authorizeDotNetCardD5, _authorizeDotNetCardD6, _authorizeDotNetCardD7, _authorizeDotNetCardD8, _customerCreditCards$4, _customerCreditCards$5;
2126
2154
  var apiEndPoint = _ref.apiEndPoint,
2127
2155
  token = _ref.token,
2128
2156
  visible = _ref.visible,
2129
2157
  onCancel = _ref.onCancel,
2130
2158
  styles = _ref.styles,
2131
- fontColor = _ref.fontColor,
2132
2159
  orderId = _ref.orderId,
2133
2160
  storeIdList = _ref.storeIdList;
2134
2161
  var _useState = React.useState(),
2135
- orderDto = _useState[0],
2136
- setOrderDto = _useState[1];
2162
+ orderData = _useState[0],
2163
+ setOrderData = _useState[1];
2137
2164
  var _useState2 = React.useState(false),
2138
2165
  openAddNewCardModal = _useState2[0],
2139
2166
  setOpenAddNewCardModal = _useState2[1];
@@ -2156,7 +2183,8 @@ var PaymentModal = function PaymentModal(_ref) {
2156
2183
  defaultValues: {
2157
2184
  insertedTimestamp: getLocalTime({
2158
2185
  time: new Date()
2159
- })
2186
+ }),
2187
+ paymentModeId: 2
2160
2188
  }
2161
2189
  }),
2162
2190
  handleSubmit = _useForm.handleSubmit,
@@ -2164,7 +2192,6 @@ var PaymentModal = function PaymentModal(_ref) {
2164
2192
  setValue = _useForm.setValue,
2165
2193
  watch = _useForm.watch;
2166
2194
  var _useState8 = React.useState([]),
2167
- paymentMethods = _useState8[0],
2168
2195
  setPaymentMethods = _useState8[1];
2169
2196
  var _useState9 = React.useState(),
2170
2197
  customerCreditCards = _useState9[0],
@@ -2187,10 +2214,10 @@ var PaymentModal = function PaymentModal(_ref) {
2187
2214
  url: "/ecommerce/order/" + orderId + "?storeIds=" + storeIdList,
2188
2215
  apiEndPoint: apiEndPoint,
2189
2216
  token: token
2190
- })).then(function (orderData) {
2191
- var _orderData$orderDto;
2192
- setValue('amount', orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto = orderData.orderDto) === null || _orderData$orderDto === void 0 ? void 0 : _orderData$orderDto.dueAmount);
2193
- setOrderDto(orderData === null || orderData === void 0 ? void 0 : orderData.orderDto);
2217
+ })).then(function (orderRes) {
2218
+ var _orderRes$orderDto;
2219
+ setValue('amount', orderRes === null || orderRes === void 0 ? void 0 : (_orderRes$orderDto = orderRes.orderDto) === null || _orderRes$orderDto === void 0 ? void 0 : _orderRes$orderDto.dueAmount);
2220
+ setOrderData(orderRes);
2194
2221
  return Promise.resolve(getPaymentMethods({
2195
2222
  apiEndPoint: apiEndPoint,
2196
2223
  token: token
@@ -2213,16 +2240,18 @@ var PaymentModal = function PaymentModal(_ref) {
2213
2240
  }
2214
2241
  }, [orderId]);
2215
2242
  React.useEffect(function () {
2216
- if (defaultPaymentProvider === DEFAULT_PAYMENT_PROVIDER.AUTHORISE_DOT_NET && orderDto !== null && orderDto !== void 0 && orderDto.customerId) {
2243
+ var _orderData$orderDto;
2244
+ if (defaultPaymentProvider === DEFAULT_PAYMENT_PROVIDER.AUTHORISE_DOT_NET && orderData !== null && orderData !== void 0 && (_orderData$orderDto = orderData.orderDto) !== null && _orderData$orderDto !== void 0 && _orderData$orderDto.customerId) {
2217
2245
  if (lodash.includes(lodash.values(CARD_METHODS), paymentModeId)) {
2218
2246
  (function () {
2219
2247
  try {
2220
2248
  setCardLoading(API_STATUSES.LOADING);
2221
2249
  var _temp3 = _catch(function () {
2250
+ var _orderData$orderDto2;
2222
2251
  return Promise.resolve(getAuthorizeDotNetCreditCards({
2223
2252
  apiEndPoint: apiEndPoint,
2224
2253
  token: token,
2225
- customerId: orderDto === null || orderDto === void 0 ? void 0 : orderDto.customerId
2254
+ customerId: orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto2 = orderData.orderDto) === null || _orderData$orderDto2 === void 0 ? void 0 : _orderData$orderDto2.customerId
2226
2255
  })).then(function (data) {
2227
2256
  setCustomerCreditCards(data);
2228
2257
  setCardLoading(API_STATUSES.SUCCESS);
@@ -2237,7 +2266,7 @@ var PaymentModal = function PaymentModal(_ref) {
2237
2266
  })();
2238
2267
  }
2239
2268
  }
2240
- }, [paymentModeId, listUpdate]);
2269
+ }, [paymentModeId, listUpdate, defaultPaymentProvider]);
2241
2270
  React.useEffect(function () {
2242
2271
  if (!lodash.includes(lodash.values(CARD_METHODS), paymentModeId)) {
2243
2272
  setValue('authorizeDotNetCard', null);
@@ -2252,11 +2281,11 @@ var PaymentModal = function PaymentModal(_ref) {
2252
2281
  };
2253
2282
  setSubmitLoading(true);
2254
2283
  var _temp4 = _catch(function () {
2255
- var _customerCreditCards$3;
2284
+ var _orderData$orderDto3, _customerCreditCards$3;
2256
2285
  var modifyData = lodash.cloneDeep(lodash.omit(_extends({}, formData, {
2257
2286
  status: 'PAID',
2258
2287
  customerId: customerId,
2259
- orderId: orderDto === null || orderDto === void 0 ? void 0 : orderDto.id,
2288
+ orderId: orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto3 = orderData.orderDto) === null || _orderData$orderDto3 === void 0 ? void 0 : _orderData$orderDto3.id,
2260
2289
  authorizeDotNetCustomerPaymentProfileId: authorizeDotNetCardData === null || authorizeDotNetCardData === void 0 ? void 0 : authorizeDotNetCardData.customerPaymentProfileId,
2261
2290
  authorizeDotNetCustomerProfileId: customerCreditCards === null || customerCreditCards === void 0 ? void 0 : (_customerCreditCards$3 = customerCreditCards.profile) === null || _customerCreditCards$3 === void 0 ? void 0 : _customerCreditCards$3.customerProfileId
2262
2291
  }), ['authorizeDotNetCard']));
@@ -2266,6 +2295,7 @@ var PaymentModal = function PaymentModal(_ref) {
2266
2295
  method: 'post',
2267
2296
  url: "/ecommerce/order/payment",
2268
2297
  body: modifyData,
2298
+ successMessage: 'Payment collected successfully.',
2269
2299
  errorMessage: 'Error in payment.'
2270
2300
  })).then(function () {
2271
2301
  onCancel && onCancel();
@@ -2288,8 +2318,9 @@ var PaymentModal = function PaymentModal(_ref) {
2288
2318
  return Promise.reject(e);
2289
2319
  }
2290
2320
  },
2291
- customerId: orderDto === null || orderDto === void 0 ? void 0 : orderDto.customerId,
2292
- setListUpdate: setListUpdate
2321
+ customerId: orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto4 = orderData.orderDto) === null || _orderData$orderDto4 === void 0 ? void 0 : _orderData$orderDto4.customerId,
2322
+ setListUpdate: setListUpdate,
2323
+ styles: styles
2293
2324
  }), visible && /*#__PURE__*/React__default.createElement(MuiModal, {
2294
2325
  onClose: onCancel,
2295
2326
  "aria-labelledby": "customized-dialog-title",
@@ -2316,7 +2347,7 @@ var PaymentModal = function PaymentModal(_ref) {
2316
2347
  },
2317
2348
  loading: submitLoading,
2318
2349
  onClick: handleSubmit(onSubmit),
2319
- disabled: (orderDto === null || orderDto === void 0 ? void 0 : orderDto.dueAmount) <= 0
2350
+ disabled: (orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto5 = orderData.orderDto) === null || _orderData$orderDto5 === void 0 ? void 0 : _orderData$orderDto5.dueAmount) <= 0
2320
2351
  }, "Save")), /*#__PURE__*/React__default.createElement(material.Grid, {
2321
2352
  item: true
2322
2353
  }, /*#__PURE__*/React__default.createElement(MuiButton, {
@@ -2328,7 +2359,9 @@ var PaymentModal = function PaymentModal(_ref) {
2328
2359
  }, "Cancel"))))
2329
2360
  }, /*#__PURE__*/React__default.createElement(DataLoader, {
2330
2361
  loading: dataLoading
2331
- }, /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
2362
+ }, /*#__PURE__*/React__default.createElement(InfoContainer, null, /*#__PURE__*/React__default.createElement("h2", null, "Order #", orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto6 = orderData.orderDto) === null || _orderData$orderDto6 === void 0 ? void 0 : _orderData$orderDto6.id), /*#__PURE__*/React__default.createElement("p", null, getLocalTime({
2363
+ time: orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto7 = orderData.orderDto) === null || _orderData$orderDto7 === void 0 ? void 0 : _orderData$orderDto7.insertedTimestamp
2364
+ })), /*#__PURE__*/React__default.createElement("p", null, orderData === null || orderData === void 0 ? void 0 : (_orderData$customerDt = orderData.customerDto) === null || _orderData$customerDt === void 0 ? void 0 : _orderData$customerDt.company), /*#__PURE__*/React__default.createElement("p", null, "Due Amount: ", renderMoney(orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto8 = orderData.orderDto) === null || _orderData$orderDto8 === void 0 ? void 0 : _orderData$orderDto8.dueAmount))), /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
2332
2365
  container: true,
2333
2366
  columnSpacing: 2
2334
2367
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -2336,60 +2369,41 @@ var PaymentModal = function PaymentModal(_ref) {
2336
2369
  xs: 12,
2337
2370
  md: 6
2338
2371
  }, /*#__PURE__*/React__default.createElement(FormTextField, {
2339
- label: "Amount",
2372
+ label: "Payment Amount",
2340
2373
  name: "amount",
2341
2374
  type: "number",
2342
2375
  required: true,
2343
2376
  control: control,
2344
- fontColor: fontColor,
2345
- max: orderDto === null || orderDto === void 0 ? void 0 : orderDto.dueAmount
2346
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2347
- item: true,
2348
- xs: 12,
2349
- md: 6
2350
- }, /*#__PURE__*/React__default.createElement(FormTextField, {
2351
- label: "Date/Time",
2352
- name: "insertedTimestamp",
2353
- required: true,
2354
- disabled: true,
2355
- control: control,
2356
- fontColor: fontColor
2357
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2358
- item: true,
2359
- xs: 12,
2360
- md: 6
2361
- }, /*#__PURE__*/React__default.createElement(FormSelect, {
2362
- label: "Payment Method",
2363
- name: "paymentModeId",
2364
- required: true,
2365
- control: control,
2366
- fontColor: fontColor,
2367
- valueKey: "id",
2368
- labelKey: "name",
2369
- options: (_filter = lodash.filter(paymentMethods || [], {
2370
- ecommerce: true
2371
- })) === null || _filter === void 0 ? void 0 : _filter.map(function (item) {
2372
- return _extends({}, item, {
2373
- disabled: !lodash.includes(lodash.values(CARD_METHODS), item === null || item === void 0 ? void 0 : item.id)
2374
- });
2375
- })
2377
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
2378
+ max: orderData === null || orderData === void 0 ? void 0 : (_orderData$orderDto9 = orderData.orderDto) === null || _orderData$orderDto9 === void 0 ? void 0 : _orderData$orderDto9.dueAmount
2376
2379
  })), defaultPaymentProvider === DEFAULT_PAYMENT_PROVIDER.AUTHORISE_DOT_NET && lodash.includes(lodash.values(CARD_METHODS), paymentModeId) && /*#__PURE__*/React__default.createElement(material.Grid, {
2377
2380
  item: true,
2378
2381
  xs: 12
2379
2382
  }, /*#__PURE__*/React__default.createElement(DataLoader, {
2380
2383
  loading: cardLoading === API_STATUSES.LOADING,
2381
2384
  error: cardLoading === API_STATUSES.ERROR
2385
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2386
+ container: true,
2387
+ columnSpacing: 2
2388
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2389
+ item: true,
2390
+ xs: 12,
2391
+ md: 6
2382
2392
  }, /*#__PURE__*/React__default.createElement(Cards, {
2383
2393
  expiry: (authorizeDotNetCardData === null || authorizeDotNetCardData === void 0 ? void 0 : (_authorizeDotNetCardD = authorizeDotNetCardData.payment) === null || _authorizeDotNetCardD === void 0 ? void 0 : (_authorizeDotNetCardD2 = _authorizeDotNetCardD.creditCard) === null || _authorizeDotNetCardD2 === void 0 ? void 0 : _authorizeDotNetCardD2.expirationDate) || '----',
2384
2394
  name: ((authorizeDotNetCardData === null || authorizeDotNetCardData === void 0 ? void 0 : (_authorizeDotNetCardD3 = authorizeDotNetCardData.billTo) === null || _authorizeDotNetCardD3 === void 0 ? void 0 : _authorizeDotNetCardD3.firstName) || '') + " " + ((authorizeDotNetCardData === null || authorizeDotNetCardData === void 0 ? void 0 : (_authorizeDotNetCardD4 = authorizeDotNetCardData.billTo) === null || _authorizeDotNetCardD4 === void 0 ? void 0 : _authorizeDotNetCardD4.lastName) || ''),
2385
2395
  number: "000000000000" + ((authorizeDotNetCardData === null || authorizeDotNetCardData === void 0 ? void 0 : (_authorizeDotNetCardD5 = authorizeDotNetCardData.payment) === null || _authorizeDotNetCardD5 === void 0 ? void 0 : (_authorizeDotNetCardD6 = _authorizeDotNetCardD5.creditCard) === null || _authorizeDotNetCardD6 === void 0 ? void 0 : (_authorizeDotNetCardD7 = _authorizeDotNetCardD6.cardNumber) === null || _authorizeDotNetCardD7 === void 0 ? void 0 : (_authorizeDotNetCardD8 = _authorizeDotNetCardD7.split('XXXX')) === null || _authorizeDotNetCardD8 === void 0 ? void 0 : _authorizeDotNetCardD8[1]) || '0000')
2386
- }), /*#__PURE__*/React__default.createElement(FormRadiogroup, {
2396
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2397
+ item: true,
2398
+ xs: 12,
2399
+ md: 6
2400
+ }, /*#__PURE__*/React__default.createElement(FormRadiogroup, {
2387
2401
  label: "Select Card",
2388
2402
  valueKey: "id",
2389
2403
  name: "authorizeDotNetCard",
2390
2404
  required: true,
2391
2405
  control: control,
2392
- fontColor: fontColor,
2406
+ fontColor: styles === null || styles === void 0 ? void 0 : styles.fontColor,
2393
2407
  options: customerCreditCards === null || customerCreditCards === void 0 ? void 0 : (_customerCreditCards$4 = customerCreditCards.profile) === null || _customerCreditCards$4 === void 0 ? void 0 : (_customerCreditCards$5 = _customerCreditCards$4.paymentProfiles) === null || _customerCreditCards$5 === void 0 ? void 0 : _customerCreditCards$5.map(function (profile) {
2394
2408
  var _profile$payment, _profile$payment$cred, _profile$payment2, _profile$payment2$cre, _profile$payment2$cre2, _profile$payment2$cre3;
2395
2409
  return {
@@ -2397,16 +2411,22 @@ var PaymentModal = function PaymentModal(_ref) {
2397
2411
  name: /*#__PURE__*/React__default.createElement("span", null, "(" + (profile === null || profile === void 0 ? void 0 : (_profile$payment = profile.payment) === null || _profile$payment === void 0 ? void 0 : (_profile$payment$cred = _profile$payment.creditCard) === null || _profile$payment$cred === void 0 ? void 0 : _profile$payment$cred.cardType) + ")", ' ', "XXXX - XXXX - XXXX - " + (profile === null || profile === void 0 ? void 0 : (_profile$payment2 = profile.payment) === null || _profile$payment2 === void 0 ? void 0 : (_profile$payment2$cre = _profile$payment2.creditCard) === null || _profile$payment2$cre === void 0 ? void 0 : (_profile$payment2$cre2 = _profile$payment2$cre.cardNumber) === null || _profile$payment2$cre2 === void 0 ? void 0 : (_profile$payment2$cre3 = _profile$payment2$cre2.split('XXXX')) === null || _profile$payment2$cre3 === void 0 ? void 0 : _profile$payment2$cre3[1]))
2398
2412
  };
2399
2413
  })
2400
- })), /*#__PURE__*/React__default.createElement(MuiButton, {
2401
- variant: "outlined",
2414
+ }), /*#__PURE__*/React__default.createElement(MuiButton, {
2402
2415
  onClick: function onClick() {
2403
2416
  setOpenAddNewCardModal(true);
2404
2417
  setValue('authorizeDotNetCard', null);
2405
- }
2406
- }, "Add New Card")))))));
2418
+ },
2419
+ primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
2420
+ startIcon: /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, {
2421
+ style: {
2422
+ fontSize: 'inherit'
2423
+ }
2424
+ })
2425
+ }, /*#__PURE__*/React__default.createElement("span", null, "Add New Card")))))))))));
2407
2426
  };
2427
+ var InfoContainer = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n border-bottom: 1px solid #00000040;\n padding-bottom: 1rem;\n margin-bottom: 1rem;\n h2 {\n margin-bottom: 0.8rem;\n }\n p {\n font-size: 1.2rem;\n }\n"])));
2408
2428
 
2409
- var _templateObject$c, _templateObject2$6, _templateObject3$3, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
2429
+ var _templateObject$d, _templateObject2$6, _templateObject3$3, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
2410
2430
  var totalIcons = [{
2411
2431
  name: '',
2412
2432
  icon: /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, null)
@@ -2426,6 +2446,7 @@ var Dashboard = function Dashboard(_ref) {
2426
2446
  serviceApiEndPoint = _ref.serviceApiEndPoint,
2427
2447
  token = _ref.token,
2428
2448
  queryParams = _ref.queryParams,
2449
+ styles = _ref.styles,
2429
2450
  primaryColor = _ref.primaryColor,
2430
2451
  secondaryColor = _ref.secondaryColor,
2431
2452
  backgroundColor = _ref.backgroundColor,
@@ -2663,7 +2684,8 @@ var Dashboard = function Dashboard(_ref) {
2663
2684
  return Promise.reject(e);
2664
2685
  }
2665
2686
  },
2666
- orderId: isPaymentModal === null || isPaymentModal === void 0 ? void 0 : isPaymentModal.orderId
2687
+ orderId: isPaymentModal === null || isPaymentModal === void 0 ? void 0 : isPaymentModal.orderId,
2688
+ styles: styles
2667
2689
  }), /*#__PURE__*/React__default.createElement(material.Grid, {
2668
2690
  container: true,
2669
2691
  columnSpacing: 4
@@ -2967,7 +2989,7 @@ var Dashboard = function Dashboard(_ref) {
2967
2989
  }
2968
2990
  }))))))))));
2969
2991
  };
2970
- var Root$3 = styled__default.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose([""])));
2992
+ var Root$3 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose([""])));
2971
2993
  var TitleContainer = styled__default.h4(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n span {\n color: ", ";\n font-size: 2.7rem;\n font-weight: 500;\n }\n b {\n color: ", ";\n font-size: 2.7rem;\n }\n"])), function (props) {
2972
2994
  return props.fontColor;
2973
2995
  }, function (props) {
@@ -3036,7 +3058,7 @@ var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_tem
3036
3058
  var TableContainer = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n margin-top: 2rem;\n border-radius: 14px;\n"])));
3037
3059
  var InvoiceDialog = styled__default(material.Dialog)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n iframe {\n width: 900px;\n border: none;\n height: 600px;\n }\n"])));
3038
3060
 
3039
- var _templateObject$d, _templateObject2$7, _templateObject3$4, _templateObject4$2, _templateObject5$2;
3061
+ var _templateObject$e, _templateObject2$7, _templateObject3$4, _templateObject4$2, _templateObject5$2;
3040
3062
  var MyProfile = function MyProfile(_ref) {
3041
3063
  var apiEndPoint = _ref.apiEndPoint,
3042
3064
  token = _ref.token,
@@ -3273,7 +3295,7 @@ var MyProfile = function MyProfile(_ref) {
3273
3295
  }
3274
3296
  }, "Update Profile"))));
3275
3297
  };
3276
- var MeetContainer$1 = styled__default.h4(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n span > b {\n color: ", ";\n font-size: 1.5rem;\n }\n b {\n color: ", ";\n font-size: 1.5rem;\n }\n"])), function (props) {
3298
+ var MeetContainer$1 = styled__default.h4(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n span > b {\n color: ", ";\n font-size: 1.5rem;\n }\n b {\n color: ", ";\n font-size: 1.5rem;\n }\n"])), function (props) {
3277
3299
  return props.primaryColor;
3278
3300
  }, function (props) {
3279
3301
  return props.fontColor;
@@ -3289,7 +3311,7 @@ var RootContainer$2 = styled__default(material.Stack)(_templateObject5$2 || (_te
3289
3311
  return props.secondaryColor;
3290
3312
  });
3291
3313
 
3292
- var _templateObject$e;
3314
+ var _templateObject$f;
3293
3315
  var SideMenuItemComponent = function SideMenuItemComponent(props) {
3294
3316
  var className = props.className,
3295
3317
  onClick = props.onClick,
@@ -3383,7 +3405,7 @@ var SideMenuItem = function SideMenuItem(props) {
3383
3405
  }))) : null;
3384
3406
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
3385
3407
  };
3386
- var ListItemIconContainer = styled__default(material.ListItemIcon)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n min-width: 40px !important;\n"])));
3408
+ var ListItemIconContainer = styled__default(material.ListItemIcon)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n min-width: 40px !important;\n"])));
3387
3409
  var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(function (_ref) {
3388
3410
  var primaryColor = _ref.primaryColor,
3389
3411
  list = _ref.list,
@@ -3492,7 +3514,7 @@ var SideMenu = function SideMenu(props) {
3492
3514
  }));
3493
3515
  };
3494
3516
 
3495
- var _templateObject$f, _templateObject2$8;
3517
+ var _templateObject$g, _templateObject2$8;
3496
3518
  var _excluded$3 = ["label", "onChange", "defaultValue", "options", "valueKey", "labelKey", "addNone", "fontColor"];
3497
3519
  function MuiSelect(_ref) {
3498
3520
  var label = _ref.label,
@@ -3541,7 +3563,7 @@ function MuiSelect(_ref) {
3541
3563
  }));
3542
3564
  })));
3543
3565
  }
3544
- var SelectContainer = styled__default(Select$1)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n svg,\n input {\n color: ", " !important;\n }\n fieldset {\n border-color: ", " !important;\n }\n"])), function (props) {
3566
+ var SelectContainer = styled__default(Select$1)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n color: ", " !important;\n svg,\n input {\n color: ", " !important;\n }\n fieldset {\n border-color: ", " !important;\n }\n"])), function (props) {
3545
3567
  return props.fontColor;
3546
3568
  }, function (props) {
3547
3569
  return props.fontColor;
@@ -3552,7 +3574,7 @@ var InputContainer$1 = styled__default(InputLabel)(_templateObject2$8 || (_templ
3552
3574
  return props.fontColor;
3553
3575
  });
3554
3576
 
3555
- var _templateObject$g, _templateObject2$9, _templateObject3$5, _templateObject4$3;
3577
+ var _templateObject$h, _templateObject2$9, _templateObject3$5, _templateObject4$3;
3556
3578
  var Statement = function Statement(_ref) {
3557
3579
  var apiEndPoint = _ref.apiEndPoint,
3558
3580
  serviceApiEndPoint = _ref.serviceApiEndPoint,
@@ -3774,14 +3796,14 @@ var Statement = function Statement(_ref) {
3774
3796
  fontColor: fontColor
3775
3797
  })));
3776
3798
  };
3777
- var Root$4 = styled__default.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose([""])));
3799
+ var Root$4 = styled__default.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose([""])));
3778
3800
  var TypographyContainer$4 = styled__default(material.Typography)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
3779
3801
  return props.fontColor;
3780
3802
  });
3781
3803
  var StatusContainer$1 = styled__default(material.Grid)(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n display: initial;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n padding: 2px 4px;\n"])));
3782
3804
  var TableContainer$1 = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n margin: 1.2rem 0;\n border-radius: 14px;\n"])));
3783
3805
 
3784
- var _templateObject$h, _templateObject2$a;
3806
+ var _templateObject$i, _templateObject2$a;
3785
3807
  var FormCheckbox = function FormCheckbox(props) {
3786
3808
  var label = props.label,
3787
3809
  name = props.name,
@@ -3823,14 +3845,14 @@ var FormCheckbox = function FormCheckbox(props) {
3823
3845
  }
3824
3846
  });
3825
3847
  };
3826
- var CheckboxField = styled__default(material.Checkbox)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n svg {\n color: ", " !important;\n }\n"])), function (props) {
3848
+ var CheckboxField = styled__default(material.Checkbox)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n svg {\n color: ", " !important;\n }\n"])), function (props) {
3827
3849
  return props.primaryColor;
3828
3850
  });
3829
3851
  var FormControlLabelContainer$1 = styled__default(material.FormControlLabel)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n .MuiTypography-root {\n color: ", " !important;\n }\n"])), function (props) {
3830
3852
  return props.fontColor;
3831
3853
  });
3832
3854
 
3833
- var _templateObject$i;
3855
+ var _templateObject$j;
3834
3856
  var AddEditAddress = function AddEditAddress(_ref) {
3835
3857
  var apiEndPoint = _ref.apiEndPoint,
3836
3858
  token = _ref.token,
@@ -4047,11 +4069,11 @@ var AddEditAddress = function AddEditAddress(_ref) {
4047
4069
  loading: isLoading
4048
4070
  }, addressDetails ? 'Update Address' : 'Add Address')));
4049
4071
  };
4050
- var HeaderContainer = styled__default.h2(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-top: 1rem;\n font-size: 1.3rem;\n font-weight: 500;\n"])), function (props) {
4072
+ var HeaderContainer = styled__default.h2(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n color: ", ";\n margin-top: 1rem;\n font-size: 1.3rem;\n font-weight: 500;\n"])), function (props) {
4051
4073
  return props.fontColor;
4052
4074
  });
4053
4075
 
4054
- var _templateObject$j, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$2;
4076
+ var _templateObject$k, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$2;
4055
4077
  var StoreDetails = function StoreDetails(_ref) {
4056
4078
  var _storeAddresses$filte;
4057
4079
  var apiEndPoint = _ref.apiEndPoint,
@@ -4159,7 +4181,7 @@ var StoreDetails = function StoreDetails(_ref) {
4159
4181
  }, (address === null || address === void 0 ? void 0 : address.address1) && /*#__PURE__*/React__default.createElement("p", null, address === null || address === void 0 ? void 0 : address.address1), (address === null || address === void 0 ? void 0 : address.address2) && /*#__PURE__*/React__default.createElement("p", null, address === null || address === void 0 ? void 0 : address.address2), ((address === null || address === void 0 ? void 0 : address.city) || (address === null || address === void 0 ? void 0 : address.state)) && /*#__PURE__*/React__default.createElement("p", null, (address === null || address === void 0 ? void 0 : address.city) + (address === null || address === void 0 ? void 0 : address.state)), (address === null || address === void 0 ? void 0 : address.country) && /*#__PURE__*/React__default.createElement("p", null, address === null || address === void 0 ? void 0 : address.country), /*#__PURE__*/React__default.createElement("p", null, address === null || address === void 0 ? void 0 : address.phone), (address === null || address === void 0 ? void 0 : address.defaultBillingAddress) && /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("span", null, "Default billing address")), (address === null || address === void 0 ? void 0 : address.defaultShippingAddress) && /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("span", null, "Default shipping address"))))));
4160
4182
  })));
4161
4183
  };
4162
- var RootContainer$3 = styled__default(material.Stack)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n background-color: ", " !important;\n border-radius: 14px !important;\n padding: 1.3rem;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
4184
+ var RootContainer$3 = styled__default(material.Stack)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n background-color: ", " !important;\n border-radius: 14px !important;\n padding: 1.3rem;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
4163
4185
  return props.secondaryColor;
4164
4186
  });
4165
4187
  var AddressContainer = styled__default(material.Card)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n border-radius: 14px !important;\n background-color: ", " !important;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px !important;\n .MuiCardHeader-root {\n background-color: ", ";\n padding: 4px 14px;\n svg,\n h3 {\n color: #fff;\n font-size: 1.3rem;\n }\n h3 {\n font-weight: 500;\n margin-left: 6px;\n }\n }\n p {\n font-size: 0.9rem;\n font-weight: 400;\n color: ", ";\n margin-bottom: 1rem;\n word-break: break-word;\n }\n"])), function (props) {
@@ -4178,7 +4200,7 @@ var AddressCardContainer = styled__default.div(_templateObject6$2 || (_templateO
4178
4200
  return props.primaryColor;
4179
4201
  });
4180
4202
 
4181
- var _templateObject$k;
4203
+ var _templateObject$l;
4182
4204
  var _excluded$4 = ["children", "value", "index"];
4183
4205
  function TabPanel(props) {
4184
4206
  var children = props.children,
@@ -4283,7 +4305,7 @@ var StoreTabs = function StoreTabs(_ref) {
4283
4305
  customer: customer
4284
4306
  })))));
4285
4307
  };
4286
- var TabsContainer = styled__default(material.Tabs)(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n button {\n color: ", " !important;\n font-size: 1.1rem;\n }\n .Mui-selected {\n color: ", " !important;\n }\n .MuiTabs-indicator {\n background-color: ", " !important;\n }\n"])), function (props) {
4308
+ var TabsContainer = styled__default(material.Tabs)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n button {\n color: ", " !important;\n font-size: 1.1rem;\n }\n .Mui-selected {\n color: ", " !important;\n }\n .MuiTabs-indicator {\n background-color: ", " !important;\n }\n"])), function (props) {
4287
4309
  return props.fontColor;
4288
4310
  }, function (props) {
4289
4311
  return props.primaryColor;
@@ -4291,7 +4313,7 @@ var TabsContainer = styled__default(material.Tabs)(_templateObject$k || (_templa
4291
4313
  return props.primaryColor;
4292
4314
  });
4293
4315
 
4294
- var _templateObject$l, _templateObject2$c, _templateObject3$7;
4316
+ var _templateObject$m, _templateObject2$c, _templateObject3$7;
4295
4317
  var StoreList = function StoreList(_ref) {
4296
4318
  var apiEndPoint = _ref.apiEndPoint,
4297
4319
  token = _ref.token,
@@ -4333,13 +4355,13 @@ var StoreList = function StoreList(_ref) {
4333
4355
  customer: customer
4334
4356
  }));
4335
4357
  };
4336
- var Modal$1 = styled__default(MuiModal)(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose([""])));
4358
+ var Modal$1 = styled__default(MuiModal)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose([""])));
4337
4359
  var StoreHeader = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 1rem 0;\n .manageStore {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n"])));
4338
4360
  var TypographyContainer$6 = styled__default(material.Typography)(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
4339
4361
  return props.fontColor;
4340
4362
  });
4341
4363
 
4342
- var _templateObject$m, _templateObject2$d, _templateObject3$8, _templateObject4$5;
4364
+ var _templateObject$n, _templateObject2$d, _templateObject3$8, _templateObject4$5;
4343
4365
  var AccountDetails = function AccountDetails(_ref) {
4344
4366
  var _storeData$map, _storeData$find, _storeData$;
4345
4367
  var _ref$apiEndPoint = _ref.apiEndPoint,
@@ -4468,6 +4490,7 @@ var AccountDetails = function AccountDetails(_ref) {
4468
4490
  serviceApiEndPoint: serviceApiEndPoint,
4469
4491
  token: token,
4470
4492
  queryParams: queryParams,
4493
+ styles: colors,
4471
4494
  primaryColor: colors.primaryColor,
4472
4495
  secondaryColor: colors.secondaryColor,
4473
4496
  backgroundColor: colors.backgroundColor,
@@ -4622,7 +4645,7 @@ var AccountDetails = function AccountDetails(_ref) {
4622
4645
  }
4623
4646
  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && renderListItemComponent()))))));
4624
4647
  };
4625
- var Root$5 = styled__default(material.Box)(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n // background-image: url(", ");\n // background-position: center;\n // background-repeat: no-repeat;\n // background-size: cover;\n padding: 1.4rem;\n background-color: ", ";\n"])), function (props) {
4648
+ var Root$5 = styled__default(material.Box)(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n // background-image: url(", ");\n // background-position: center;\n // background-repeat: no-repeat;\n // background-size: cover;\n padding: 1.4rem;\n background-color: ", ";\n"])), function (props) {
4626
4649
  var _props$theme;
4627
4650
  return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundImage;
4628
4651
  }, function (props) {
@@ -4673,7 +4696,7 @@ var TypographyContainer$7 = styled__default(material.Typography)(_templateObject
4673
4696
  return props.fontColor;
4674
4697
  });
4675
4698
 
4676
- var _templateObject$n, _templateObject2$e, _templateObject3$9;
4699
+ var _templateObject$o, _templateObject2$e, _templateObject3$9;
4677
4700
  var LandingCarousel = function LandingCarousel(_ref) {
4678
4701
  var _brandData;
4679
4702
  var brandList = _ref.brandList;
@@ -4753,7 +4776,7 @@ var LandingCarousel = function LandingCarousel(_ref) {
4753
4776
  })));
4754
4777
  })));
4755
4778
  };
4756
- var Image = styled__default.img(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.05);\n }\n"])));
4779
+ var Image = styled__default.img(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.05);\n }\n"])));
4757
4780
  var Root$6 = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose([""])));
4758
4781
  var ReactSlick = styled__default(Slider)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n .slick-list {\n margin: 0 -", "px;\n }\n .slideItem {\n padding: 0 ", "px;\n overflow: hidden;\n }\n line-height: 0;\n .slick-dots {\n bottom: 0;\n li {\n margin: 0;\n button:before {\n color: #ffffff !important;\n font-size: 10px;\n }\n }\n }\n .slick-prev,\n .slick-next {\n color: #ffffff;\n z-index: 1;\n width: 26px;\n height: 26px;\n }\n .slick-prev {\n left: 12px;\n }\n .slick-next {\n right: 12px;\n }\n"])), function (props) {
4759
4782
  return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
@@ -4761,7 +4784,7 @@ var ReactSlick = styled__default(Slider)(_templateObject3$9 || (_templateObject3
4761
4784
  return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
4762
4785
  });
4763
4786
 
4764
- var _templateObject$o, _templateObject2$f;
4787
+ var _templateObject$p, _templateObject2$f;
4765
4788
  var BrandList = function BrandList(_ref) {
4766
4789
  var _ref$apiEndPoint = _ref.apiEndPoint,
4767
4790
  apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://erp.salesgenterp.com/api' : _ref$apiEndPoint,
@@ -4797,7 +4820,7 @@ var BrandList = function BrandList(_ref) {
4797
4820
  brandList: brandList
4798
4821
  }))));
4799
4822
  };
4800
- var Root$7 = styled__default.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose([""])));
4823
+ var Root$7 = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
4801
4824
  var MainContainer$1 = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose([""])));
4802
4825
 
4803
4826
  var AsyncDataLoad = function AsyncDataLoad(_ref) {
@@ -4877,7 +4900,7 @@ var AsyncDataLoad = function AsyncDataLoad(_ref) {
4877
4900
  };
4878
4901
  var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
4879
4902
 
4880
- var _templateObject$p, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2;
4903
+ var _templateObject$q, _templateObject2$g, _templateObject3$a, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2;
4881
4904
  var BrandStock = function BrandStock(_ref) {
4882
4905
  var _Object$keys, _Object$keys2, _data$brands;
4883
4906
  var storeData = _ref.storeData,
@@ -5027,7 +5050,7 @@ var BrandStock = function BrandStock(_ref) {
5027
5050
  }));
5028
5051
  })), (data === null || data === void 0 ? void 0 : data.returnPolicy) && /*#__PURE__*/React__default.createElement(ReturnPolicyContainer, null, /*#__PURE__*/React__default.createElement("h2", null, (data === null || data === void 0 ? void 0 : data.returnPolicyTitle) || 'Return Policy'), data === null || data === void 0 ? void 0 : data.returnPolicy))));
5029
5052
  };
5030
- var Root$8 = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n"])));
5053
+ var Root$8 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n"])));
5031
5054
  var TitleContainer$1 = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n padding: 0 1rem;\n display: flex;\n justify-content: space-between;\n"])));
5032
5055
  var MainContainer$2 = styled__default.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n max-width: 600px;\n margin: auto;\n .logo {\n display: flex;\n }\n .logoImage {\n max-width: min(400px, 100%);\n max-height: 200px;\n margin: auto;\n }\n"])));
5033
5056
  var DetailsContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n margin: 1.2rem 0;\n text-align: center;\n p {\n font-size: 16px;\n font-weight: 500;\n }\n span {\n font-size: 15px;\n }\n .lineContainer {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0.5rem 0;\n span {\n margin-right: 6px;\n }\n }\n"])));
@@ -5041,8 +5064,8 @@ var TableCellContainer$1 = styled__default(TableCell)(_templateObject9$2 || (_te
5041
5064
  return props.availableQuantity ? props.stockCol && 'green' : '#ffffff';
5042
5065
  });
5043
5066
 
5044
- var _templateObject$q, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3;
5045
- var CartDrawerContainer = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
5067
+ var _templateObject$r, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$5, _templateObject6$4, _templateObject7$3;
5068
+ var CartDrawerContainer = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
5046
5069
  return props.maxWidth || '650px';
5047
5070
  });
5048
5071
  var CartDrawerBar = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
@@ -5062,8 +5085,8 @@ var CartDrawerEmptyCart = styled__default.div(_templateObject7$3 || (_templateOb
5062
5085
  return props.color || 'red';
5063
5086
  });
5064
5087
 
5065
- var _templateObject$r, _templateObject2$i, _templateObject3$c;
5066
- var CartDrawerProduct = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n user-select: none;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n\n span {\n font-size: 0.8rem;\n color: grey;\n text-decoration: line-through;\n margin-right: 0.5rem;\n }\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n height: 80px;\n .middleSection {\n .name {\n max-height: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n height: 80px;\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n .name {\n font-size: 0.7rem;\n height: 1.45rem;\n }\n }\n }\n"])), function (props) {
5088
+ var _templateObject$s, _templateObject2$i, _templateObject3$c;
5089
+ var CartDrawerProduct = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n user-select: none;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n\n span {\n font-size: 0.8rem;\n color: grey;\n text-decoration: line-through;\n margin-right: 0.5rem;\n }\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n height: 80px;\n .middleSection {\n .name {\n max-height: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n height: 80px;\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n .name {\n font-size: 0.7rem;\n height: 1.45rem;\n }\n }\n }\n"])), function (props) {
5067
5090
  return props.color || 'grey';
5068
5091
  });
5069
5092
  var CartDrawerQtBox = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n height: 34px;\n width: 82px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #333;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n }\n @media only screen and (max-width: 640px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n /* min-height: 28px; */\n font-size: 10px;\n }\n @media only screen and (max-width: 340px) {\n min-width: 50px;\n aspect-ratio: 1/2;\n height: 22px;\n font-size: 8px;\n }\n"])));
@@ -5186,8 +5209,8 @@ var CartDrawer = function CartDrawer(_ref) {
5186
5209
  }, "continue to checkout"))));
5187
5210
  };
5188
5211
 
5189
- var _templateObject$s, _templateObject2$j, _templateObject3$d, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
5190
- var CartPageSection = styled__default.section(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 28px;\n\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
5212
+ var _templateObject$t, _templateObject2$j, _templateObject3$d, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
5213
+ var CartPageSection = styled__default.section(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 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) {
5191
5214
  return props.bg;
5192
5215
  }, function (props) {
5193
5216
  return props.bg || '#FAE8E5';
@@ -6336,8 +6359,8 @@ if (process.env.NODE_ENV !== 'production') {
6336
6359
  }
6337
6360
  });
6338
6361
 
6339
- var _templateObject$t, _templateObject2$k, _templateObject3$e, _templateObject4$9, _templateObject5$7, _templateObject6$6;
6340
- var ProductImage = styled__default.img(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
6362
+ var _templateObject$u, _templateObject2$k, _templateObject3$e, _templateObject4$9, _templateObject5$7, _templateObject6$6;
6363
+ var ProductImage = styled__default.img(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
6341
6364
  var ProductName = 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) {
6342
6365
  return props.size || '1em';
6343
6366
  }, function (props) {
@@ -6705,8 +6728,8 @@ function EnhancedTable(_ref) {
6705
6728
  }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
6706
6729
  }
6707
6730
 
6708
- var _templateObject$u, _templateObject2$l, _templateObject3$f, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5;
6709
- var CartPageCard = styled__default.div(_templateObject$u || (_templateObject$u = _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"])));
6731
+ var _templateObject$v, _templateObject2$l, _templateObject3$f, _templateObject4$a, _templateObject5$8, _templateObject6$7, _templateObject7$5;
6732
+ var CartPageCard = styled__default.div(_templateObject$v || (_templateObject$v = _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"])));
6710
6733
  var CartPageImg = styled__default.img(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n /* width: 95px; */\n width: ", ";\n height: ", ";\n position: relative;\n margin-right: 1em;\n"])), function (props) {
6711
6734
  return props.width || 'auto';
6712
6735
  }, function (props) {
@@ -6790,8 +6813,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
6790
6813
  })));
6791
6814
  };
6792
6815
 
6793
- var _templateObject$v, _templateObject2$m, _templateObject3$g, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$4;
6794
- var CartSummaryContainer = styled__default.div(_templateObject$v || (_templateObject$v = _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 cursor: pointer;\n }\n @media only screen and (max-width: 1340px) {\n margin-top: 4em;\n }\n"])), function (props) {
6816
+ var _templateObject$w, _templateObject2$m, _templateObject3$g, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$4;
6817
+ var CartSummaryContainer = styled__default.div(_templateObject$w || (_templateObject$w = _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 cursor: pointer;\n }\n @media only screen and (max-width: 1340px) {\n margin-top: 4em;\n }\n"])), function (props) {
6795
6818
  return props.maxWidth || '26.375em';
6796
6819
  }, function (props) {
6797
6820
  return props.background || '#667080';
@@ -7136,7 +7159,7 @@ var GTagManager = function GTagManager(_ref) {
7136
7159
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
7137
7160
  };
7138
7161
 
7139
- var _templateObject$w, _templateObject2$n;
7162
+ var _templateObject$x, _templateObject2$n;
7140
7163
  var BannerImages = function BannerImages(_ref) {
7141
7164
  var config = _ref.config,
7142
7165
  sliderImages = _ref.sliderImages,
@@ -7177,10 +7200,10 @@ var BannerImages = function BannerImages(_ref) {
7177
7200
  }))));
7178
7201
  })));
7179
7202
  };
7180
- var Image$1 = styled__default.img(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n cursor: pointer;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.02);\n }\n"])));
7203
+ var Image$1 = styled__default.img(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n cursor: pointer;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.02);\n }\n"])));
7181
7204
  var BannerContainer$1 = styled__default.section(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n font-size: 0;\n"])));
7182
7205
 
7183
- var _templateObject$x, _templateObject2$o, _templateObject3$h;
7206
+ var _templateObject$y, _templateObject2$o, _templateObject3$h;
7184
7207
  var LandingCarousel$1 = function LandingCarousel(_ref) {
7185
7208
  var _config$spaceBetweenC, _config$colLg, _ref2, _ref3, _config$colSm, _ref4, _config$colMd, _config$colLg2;
7186
7209
  var config = _ref.config,
@@ -7247,7 +7270,7 @@ var LandingCarousel$1 = function LandingCarousel(_ref) {
7247
7270
  })));
7248
7271
  })));
7249
7272
  };
7250
- var Image$2 = styled__default.img(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.05);\n }\n"])));
7273
+ var Image$2 = styled__default.img(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: auto;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.05);\n }\n"])));
7251
7274
  var Root$9 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose([""])));
7252
7275
  var ReactSlick$1 = styled__default(Slider)(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteralLoose(["\n .slick-list {\n margin: 0 -", "px;\n }\n .slideItem {\n padding: 0 ", "px;\n overflow: hidden;\n }\n line-height: 0;\n .slick-dots {\n bottom: 0;\n li {\n margin: 0;\n button:before {\n color: #ffffff !important;\n font-size: 10px;\n }\n }\n }\n .slick-prev,\n .slick-next {\n color: #ffffff;\n z-index: 1;\n width: 26px;\n height: 26px;\n }\n .slick-prev {\n left: 12px;\n }\n .slick-next {\n right: 12px;\n }\n"])), function (props) {
7253
7276
  return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
@@ -7255,7 +7278,7 @@ var ReactSlick$1 = styled__default(Slider)(_templateObject3$h || (_templateObjec
7255
7278
  return props === null || props === void 0 ? void 0 : props.spaceBetweenCol;
7256
7279
  });
7257
7280
 
7258
- var _templateObject$y, _templateObject2$p;
7281
+ var _templateObject$z, _templateObject2$p;
7259
7282
  var HomeBanner = function HomeBanner(_ref) {
7260
7283
  var _ref$apiEndPoint = _ref.apiEndPoint,
7261
7284
  apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://erp.salesgenterp.com/api' : _ref$apiEndPoint,
@@ -7384,10 +7407,10 @@ var HomeBanner = function HomeBanner(_ref) {
7384
7407
  }, item === null || item === void 0 ? void 0 : item.component);
7385
7408
  })))));
7386
7409
  };
7387
- var Root$a = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose([""])));
7410
+ var Root$a = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose([""])));
7388
7411
  var MainContainer$3 = styled__default.div(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose([""])));
7389
7412
 
7390
- var _templateObject$z, _templateObject2$q, _templateObject3$i, _templateObject4$c, _templateObject5$a, _templateObject6$9;
7413
+ var _templateObject$A, _templateObject2$q, _templateObject3$i, _templateObject4$c, _templateObject5$a, _templateObject6$9;
7391
7414
  var OutOfStock = function OutOfStock(_ref) {
7392
7415
  var _product$body, _product$body$content, _product$body2, _product$body2$conten, _product$masterProduc, _product$header;
7393
7416
  var product = _ref.product,
@@ -7618,7 +7641,7 @@ var OutOfStock = function OutOfStock(_ref) {
7618
7641
  }
7619
7642
  }), /*#__PURE__*/React__default.createElement("span", null, subscribed ? 'Subscribed Successfully' : 'Subscribe')))))));
7620
7643
  };
7621
- var VariantsContainer = styled__default.div(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 5px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(178, 169, 169, 1);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n"])));
7644
+ var VariantsContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: 5px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n background-color: rgba(178, 169, 169, 1);\n box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);\n }\n"])));
7622
7645
  var MainCheckbox = styled__default(Checkbox)(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteralLoose(["\n &.Mui-checked,\n &.MuiCheckbox-indeterminate {\n color: ", ";\n }\n"])), function (props) {
7623
7646
  return props.theme.primaryColor;
7624
7647
  });
@@ -7655,12 +7678,12 @@ var StyledSubscribe = styled__default.button(_templateObject6$9 || (_templateObj
7655
7678
  return props.Loading || props.subscribed ? 'none' : 'auto';
7656
7679
  });
7657
7680
 
7658
- var _templateObject$A;
7681
+ var _templateObject$B;
7659
7682
  var NoData = function NoData(_ref) {
7660
7683
  _objectDestructuringEmpty(_ref);
7661
7684
  return /*#__PURE__*/React__default.createElement(CustomNoRowsOverlay, null);
7662
7685
  };
7663
- var Container = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n & .ant-empty-img-1 {\n fill: #aeb8c2;\n }\n & .ant-empty-img-2 {\n fill: #f5f5f7;\n }\n & .ant-empty-img-3 {\n fill: #dce0e6;\n }\n & .ant-empty-img-4 {\n fill: #fff;\n }\n & ant-empty-img-5 {\n fill-opacity: 0.8;\n fill: #f5f5f5;\n }\n"])));
7686
+ var Container = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n & .ant-empty-img-1 {\n fill: #aeb8c2;\n }\n & .ant-empty-img-2 {\n fill: #f5f5f7;\n }\n & .ant-empty-img-3 {\n fill: #dce0e6;\n }\n & .ant-empty-img-4 {\n fill: #fff;\n }\n & ant-empty-img-5 {\n fill-opacity: 0.8;\n fill: #f5f5f5;\n }\n"])));
7664
7687
  var CustomNoRowsOverlay = function CustomNoRowsOverlay(_ref2) {
7665
7688
  _objectDestructuringEmpty(_ref2);
7666
7689
  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement("svg", {
@@ -8127,11 +8150,11 @@ var AsyncSelect = function AsyncSelect(_ref3) {
8127
8150
  return /*#__PURE__*/React__default.createElement(AsyncSelectField, props);
8128
8151
  };
8129
8152
 
8130
- var _templateObject$B;
8131
- var Container$1 = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose([""])));
8153
+ var _templateObject$C;
8154
+ var Container$1 = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose([""])));
8132
8155
 
8133
- var _templateObject$C, _templateObject2$r, _templateObject3$j, _templateObject4$d, _templateObject5$b, _templateObject6$a;
8134
- var ProductImage$1 = styled__default.img(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
8156
+ var _templateObject$D, _templateObject2$r, _templateObject3$j, _templateObject4$d, _templateObject5$b, _templateObject6$a;
8157
+ var ProductImage$1 = styled__default.img(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
8135
8158
  var ProductName$1 = styled__default.h6(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0;\n line-height: 1.3em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n height: fit-content;\n"])), function (props) {
8136
8159
  return props.size || '1em';
8137
8160
  }, function (props) {
@@ -8261,8 +8284,8 @@ var CardRow$1 = function CardRow(_ref) {
8261
8284
  }))));
8262
8285
  };
8263
8286
 
8264
- var _templateObject$D, _templateObject2$s, _templateObject3$k, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$5, _templateObject9$4;
8265
- var CartPageSection$1 = styled__default.section(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 28px;\n\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
8287
+ var _templateObject$E, _templateObject2$s, _templateObject3$k, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$5, _templateObject9$4;
8288
+ var CartPageSection$1 = styled__default.section(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 28px;\n\n @media screen and (max-width: 1340px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 640px) {\n padding: 0 1em;\n }\n"])), function (props) {
8266
8289
  return props.bg;
8267
8290
  }, function (props) {
8268
8291
  return props.bg || '#FAE8E5';
@@ -8720,14 +8743,14 @@ var SnowfallComponent = function SnowfallComponent(_ref) {
8720
8743
  }) : null;
8721
8744
  };
8722
8745
 
8723
- var _templateObject$E;
8724
- var StaticContainer$1 = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n width: 100%;\n color: #606060;\n .top-bar {\n background-color: #f5f5f5;\n padding: 1rem;\n text-align: center;\n font-size: 3.2rem;\n font-weight: bold;\n text-transform: uppercase;\n color: ", ";\n }\n .route-bar {\n text-transform: capitalize;\n p {\n padding: 0;\n word-spacing: 5px;\n display: flex;\n align-items: center;\n color: #606060;\n }\n }\n .data-container {\n margin: auto;\n }\n hr {\n border-bottom: 2px solid #eceff8;\n border-top: 0px;\n margin: 1rem 0;\n }\n li {\n margin-left: 1rem;\n }\n a {\n color: ", ";\n }\n p {\n margin: 1rem 0;\n width: 100%;\n color: #606060;\n }\n"])), function (props) {
8746
+ var _templateObject$F;
8747
+ var StaticContainer$1 = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n padding: 1rem;\n width: 100%;\n color: #606060;\n .top-bar {\n background-color: #f5f5f5;\n padding: 1rem;\n text-align: center;\n font-size: 3.2rem;\n font-weight: bold;\n text-transform: uppercase;\n color: ", ";\n }\n .route-bar {\n text-transform: capitalize;\n p {\n padding: 0;\n word-spacing: 5px;\n display: flex;\n align-items: center;\n color: #606060;\n }\n }\n .data-container {\n margin: auto;\n }\n hr {\n border-bottom: 2px solid #eceff8;\n border-top: 0px;\n margin: 1rem 0;\n }\n li {\n margin-left: 1rem;\n }\n a {\n color: ", ";\n }\n p {\n margin: 1rem 0;\n width: 100%;\n color: #606060;\n }\n"])), function (props) {
8725
8748
  return props.theme.primaryColor;
8726
8749
  }, function (props) {
8727
8750
  return props.theme.primaryColor;
8728
8751
  });
8729
8752
 
8730
- var _templateObject$F;
8753
+ var _templateObject$G;
8731
8754
  var StaticPage = function StaticPage(_ref) {
8732
8755
  var _data$content;
8733
8756
  var _ref$colors = _ref.colors,
@@ -8791,7 +8814,7 @@ var StaticPage = function StaticPage(_ref) {
8791
8814
  logoUrl: logoUrl
8792
8815
  }))))))));
8793
8816
  };
8794
- var Root$c = styled__default(material.Box)(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose([""])));
8817
+ var Root$c = styled__default(material.Box)(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose([""])));
8795
8818
 
8796
8819
  var _excluded$6 = ["userName", "children", "style"];
8797
8820
  var colors$1 = ['#FFB900', '#D83B01', '#B50E0E', '#E81123', '#B4009E', '#5C2D91', '#0078D7', '#00B4FF', '#008272', '#107C10'];
@@ -8827,7 +8850,7 @@ var Avatar = function Avatar(_ref) {
8827
8850
  }));
8828
8851
  };
8829
8852
 
8830
- var _templateObject$G, _templateObject2$t;
8853
+ var _templateObject$H, _templateObject2$t;
8831
8854
  var SwitchUser = function SwitchUser(_ref) {
8832
8855
  var _customerData$filter, _customerData$filter$;
8833
8856
  var _ref$apiEndPoint = _ref.apiEndPoint,
@@ -8902,10 +8925,10 @@ var SwitchUser = function SwitchUser(_ref) {
8902
8925
  }), /*#__PURE__*/React__default.createElement("p", null, ((item === null || item === void 0 ? void 0 : item.firstName) || '') + " " + ((item === null || item === void 0 ? void 0 : item.lastName) || '')), /*#__PURE__*/React__default.createElement("p", null, item === null || item === void 0 ? void 0 : item.company), /*#__PURE__*/React__default.createElement("p", null, item === null || item === void 0 ? void 0 : item.dbaName)));
8903
8926
  }))));
8904
8927
  };
8905
- var RootContainer$4 = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n margin: auto;\n text-align: center;\n padding: 2.4rem;\n"])));
8928
+ var RootContainer$4 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n margin: auto;\n text-align: center;\n padding: 2.4rem;\n"])));
8906
8929
  var CustomerContainer = styled__default.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: all 0.5s;\n &:hover {\n transform: scale(1.05);\n }\n"])));
8907
8930
 
8908
- var _templateObject$H, _templateObject2$u;
8931
+ var _templateObject$I, _templateObject2$u;
8909
8932
  var ThankYou = function ThankYou(_ref) {
8910
8933
  var _ref$id = _ref.id,
8911
8934
  id = _ref$id === void 0 ? 0 : _ref$id,
@@ -8964,7 +8987,7 @@ var ThankYou = function ThankYou(_ref) {
8964
8987
  onClick: onContinue
8965
8988
  }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
8966
8989
  };
8967
- var Root$d = styled__default(material.Box)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose([""])));
8990
+ var Root$d = styled__default(material.Box)(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose([""])));
8968
8991
  var StyledButton = styled__default.button(_templateObject2$u || (_templateObject2$u = _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) {
8969
8992
  return props.theme.primaryColor;
8970
8993
  }, function (props) {
@@ -8973,8 +8996,8 @@ var StyledButton = styled__default.button(_templateObject2$u || (_templateObject
8973
8996
  return props.theme.primaryColor;
8974
8997
  });
8975
8998
 
8976
- var _templateObject$I, _templateObject2$v, _templateObject3$l, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$8, _templateObject8$6;
8977
- var CheckoutRootContainer = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding: 4rem;\n background-color: ", ";\n font-size: 16px;\n\n div,\n button,\n span {\n font-size: 16px;\n }\n @media only screen and (max-width: 1620px) {\n padding: 3em 0.5em;\n }\n @media screen and (max-width: 840px) {\n div,\n button,\n span {\n font-size: 12px;\n }\n padding: 2rem 0.5rem;\n }\n"])), function (props) {
8999
+ var _templateObject$J, _templateObject2$v, _templateObject3$l, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$8, _templateObject8$6;
9000
+ var CheckoutRootContainer = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding: 4rem;\n background-color: ", ";\n font-size: 16px;\n\n div,\n button,\n span {\n font-size: 16px;\n }\n @media only screen and (max-width: 1620px) {\n padding: 3em 0.5em;\n }\n @media screen and (max-width: 840px) {\n div,\n button,\n span {\n font-size: 12px;\n }\n padding: 2rem 0.5rem;\n }\n"])), function (props) {
8978
9001
  return props.bg;
8979
9002
  });
8980
9003
  var CheckoutPageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _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 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 ////////////checkout and cart fonts\n /////////////////\n /* /////remove arrows from number input */\n /* Chrome, Safari, Edge, Opera */\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n input[type='number'] {\n -moz-appearance: textfield;\n }\n\n /* //////mui inputs */\n\n .Mui-checked {\n color: ", ";\n }\n\n .MuiOutlinedInput-notchedOutline {\n border: none;\n outline: none;\n }\n\n .MuiInputBase-root .MuiOutlinedInput-root,\n .MuiInputBase-colorPrimary,\n .MuiInputBase-fullWidth,\n .MuiInputBase-formControl {\n border-radius: 10px;\n }\n // /* /////stepper length */\n .MuiStepConnector-line,\n .MuiStepConnector-lineVertical {\n min-height: 60px !important;\n }\n\n @media only screen and (max-width: 640px) {\n .MuiStepConnector-line,\n .MuiStepConnector-lineVertical {\n min-height: 40px !important;\n }\n }\n"])), function (props) {
@@ -8997,8 +9020,8 @@ var CheckoutHeading = styled__default.div(_templateObject6$c || (_templateObject
8997
9020
  var CheckoutHeader = styled__default(Row)(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n overflow: auto;\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n justify-content: flex-start;\n min-height: 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 }\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"])));
8998
9021
  var CheckoutStepIcon = styled__default.div(_templateObject8$6 || (_templateObject8$6 = _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"])));
8999
9022
 
9000
- var _templateObject$J, _templateObject2$w, _templateObject3$m;
9001
- var CheckoutSummaryContainer = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: max(1.5em, 30px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 422px;\n min-width: min(412px, 95%);\n font-size: 16px;\n margin-top: 6.15em;\n @media only screen and (max-width: 1508px) {\n margin-top: 0;\n }\n"])), function (props) {
9023
+ var _templateObject$K, _templateObject2$w, _templateObject3$m;
9024
+ var CheckoutSummaryContainer = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: max(1.5em, 30px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 422px;\n min-width: min(412px, 95%);\n font-size: 16px;\n margin-top: 6.15em;\n @media only screen and (max-width: 1508px) {\n margin-top: 0;\n }\n"])), function (props) {
9002
9025
  return props.bg || 'rgba(255, 240, 236, 1)';
9003
9026
  }, function (props) {
9004
9027
  return props.color || ' rgba(50, 50, 50, 1)';
@@ -9069,8 +9092,8 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
9069
9092
  }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
9070
9093
  };
9071
9094
 
9072
- var _templateObject$K, _templateObject2$x, _templateObject3$n, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
9073
- var StepContainer = styled__default.div(_templateObject$K || (_templateObject$K = _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"])));
9095
+ var _templateObject$L, _templateObject2$x, _templateObject3$n, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
9096
+ var StepContainer = styled__default.div(_templateObject$L || (_templateObject$L = _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"])));
9074
9097
  var StepsContent = styled__default.div(_templateObject2$x || (_templateObject2$x = _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) {
9075
9098
  return 'transparent' + '!important';
9076
9099
  }, function (props) {
@@ -9654,7 +9677,7 @@ var Step1 = function Step1(_ref) {
9654
9677
  })));
9655
9678
  };
9656
9679
 
9657
- var _templateObject$L;
9680
+ var _templateObject$M;
9658
9681
  var Step2 = function Step2(_ref) {
9659
9682
  var _filter, _customer$customerDto, _addressList$, _addressList, _styles$button2, _JSON$parse2, _styles$button3;
9660
9683
  var apiEndPoint = _ref.apiEndPoint,
@@ -9931,7 +9954,7 @@ var Step2 = function Step2(_ref) {
9931
9954
  color: styles === null || styles === void 0 ? void 0 : (_styles$button3 = styles.button) === null || _styles$button3 === void 0 ? void 0 : _styles$button3.bg
9932
9955
  })));
9933
9956
  };
9934
- var ImageContainer$1 = styled__default(material.CardMedia)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 3rem,\n border-radius: 14px;\n img {\n max-width: 100%;\n }\n"])));
9957
+ var ImageContainer$1 = styled__default(material.CardMedia)(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 3rem,\n border-radius: 14px;\n img {\n max-width: 100%;\n }\n"])));
9935
9958
 
9936
9959
  var CreditCardForm = function CreditCardForm(_ref) {
9937
9960
  var _React$createElement, _React$createElement2;
@@ -10509,7 +10532,7 @@ var Step3 = function Step3(_ref) {
10509
10532
  })));
10510
10533
  };
10511
10534
 
10512
- var _templateObject$M, _templateObject2$y;
10535
+ var _templateObject$N, _templateObject2$y;
10513
10536
  var ConsentForm = function ConsentForm(_ref) {
10514
10537
  var apiEndPoint = _ref.apiEndPoint,
10515
10538
  token = _ref.token,
@@ -10657,7 +10680,7 @@ var InfoComponent = function InfoComponent(_ref2) {
10657
10680
  name: 'Order Total After Tax Waiver',
10658
10681
  value: renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.totalAmount)
10659
10682
  }];
10660
- return /*#__PURE__*/React__default.createElement(InfoContainer, null, /*#__PURE__*/React__default.createElement(material.Grid, {
10683
+ return /*#__PURE__*/React__default.createElement(InfoContainer$1, null, /*#__PURE__*/React__default.createElement(material.Grid, {
10661
10684
  container: true,
10662
10685
  spacing: 4
10663
10686
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -10675,7 +10698,7 @@ var InfoComponent = function InfoComponent(_ref2) {
10675
10698
  });
10676
10699
  }))));
10677
10700
  };
10678
- var InfoContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n h2 {\n border-bottom: 1px solid #00000040;\n margin-bottom: 0.8rem;\n }\n p {\n font-size: 1.2rem;\n }\n"])));
10701
+ var InfoContainer$1 = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n h2 {\n border-bottom: 1px solid #00000040;\n margin-bottom: 0.8rem;\n }\n p {\n font-size: 1.2rem;\n }\n"])));
10679
10702
  var InfoItem = function InfoItem(_ref3) {
10680
10703
  var name = _ref3.name,
10681
10704
  value = _ref3.value;