@salesgenterp/ui-components 0.4.63 → 0.4.65

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
@@ -2026,7 +2026,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2026
2026
  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
2027
2027
  };
2028
2028
 
2029
- var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2029
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
2030
2030
  var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _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"])));
2031
2031
  var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\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: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
2032
2032
  var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n font-family: 'karla-fonts';\n color: #323232;\n /* padding: ", "; */\n margin-bottom: ", ";\n margin-top: ", ";\n margin-left: ", ";\n /* color: grey; */\n border-bottom: 1px solid #fff0ec;\n background: #ffffff;\n border-radius: 20px;\n max-width: 919px;\n\n min-height: 4.35em;\n max-height: 4.35em;\n padding: ", ";\n h5 {\n font-size: 16px;\n font-weight: 600;\n text-transform: capitalize;\n margin-left: 0.6em;\n }\n .icon {\n font-size: 1.3em;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4em;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n cursor: ", ";\n }\n .red {\n font-weight: 600;\n color: #fd0015;\n font-size: inherit;\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 0.5em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
@@ -2054,22 +2054,23 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2054
2054
  }, function (props) {
2055
2055
  return props.disabled ? 'not-allowed' : 'pointer';
2056
2056
  });
2057
- var SaveButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2057
+ var Select = styled.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 54px;\n border-radius: 10px;\n background: rgba(255, 240, 236, 1);\n outline: none;\n border: none;\n padding: 0 1em;\n cursor: pointer;\n select {\n width: 100%;\n height: 100%;\n background: transparent;\n border: none;\n outline: none;\n padding: 0.5em 0;\n }\n"])));
2058
+ var SaveButton = styled.button(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2058
2059
  return props.color || '#FD0015';
2059
2060
  }, function (props) {
2060
2061
  return props.disabled ? 'not-allowed' : 'pointer';
2061
2062
  });
2062
- var ButtonRowContainer = styled.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 700;\n letter-spacing: 1px;\n color: white;\n background-color: #fd0015;\n border: 2px solid rgba(254, 81, 96, 0.87);\n cursor: ", ";\n }\n .back {\n font-size: 0.875em;\n font-weight: 500;\n justify-content: flex-start;\n margin-right: 0.2em;\n color: #323232;\n background: transparent;\n border: none;\n cursor: ", ";\n font-size: 0.8em;\n transition: 0.4s;\n .icon {\n font-size: 1.2em;\n margin-right: 2px;\n }\n &:hover,\n &:focus {\n letter-spacing: 1px;\n outline: none;\n }\n }\n"])), function (props) {
2063
+ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 700;\n letter-spacing: 1px;\n color: white;\n background-color: #fd0015;\n border: 2px solid rgba(254, 81, 96, 0.87);\n cursor: ", ";\n }\n .back {\n font-size: 0.875em;\n font-weight: 500;\n justify-content: flex-start;\n margin-right: 0.2em;\n color: #323232;\n background: transparent;\n border: none;\n cursor: ", ";\n font-size: 0.8em;\n transition: 0.4s;\n .icon {\n font-size: 1.2em;\n margin-right: 2px;\n }\n &:hover,\n &:focus {\n letter-spacing: 1px;\n outline: none;\n }\n }\n"])), function (props) {
2063
2064
  return props.disabledNext ? 'not-allowed' : 'pointer';
2064
2065
  }, function (props) {
2065
2066
  return props.disabledBack ? 'not-allowed' : 'pointer';
2066
2067
  });
2067
- var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
2068
+ var CheckBoxRow = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
2068
2069
  return props.padding;
2069
2070
  }, function (props) {
2070
2071
  return props.marginLeft;
2071
2072
  });
2072
- var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 691px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n\n transition: 0.3s;\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: #fff0ec;\n border: 1px solid #fce1d9;\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: #fd0015;\n }\n }\n .amount {\n margin-left: auto;\n color: #fd0015;\n font-weight: ", ";\n font-size: 0.95em;\n }\n"])), function (props) {
2073
+ var DeliveryOption = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 691px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n\n transition: 0.3s;\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: #fff0ec;\n border: 1px solid #fce1d9;\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: #fd0015;\n }\n }\n .amount {\n margin-left: auto;\n color: #fd0015;\n font-weight: ", ";\n font-size: 0.95em;\n }\n"])), function (props) {
2073
2074
  return props.hovered ? '#fff0ec' : '';
2074
2075
  }, function (props) {
2075
2076
  return props.hovered ? '1px solid #fce1d9' : '';
@@ -2078,15 +2079,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
2078
2079
  }, function (props) {
2079
2080
  return props.hovered ? '800' : '700';
2080
2081
  });
2081
- var CreditCard = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n border: 1px solid transparent;\n text-align: center;\n p {\n font-size: 10px;\n }\n"])));
2082
- var PaymentLi = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 1.5em;\n cursor: pointer;\n .circle {\n /* background: #323232; */\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n border: 1px solid #323232;\n margin-right: 1em;\n }\n .innerCircle {\n background: #323232;\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n p {\n font-size: 1em;\n color: black;\n text-transform: capitalize;\n font-weight: 500;\n }\n"])));
2083
- var StyledTableRow = styled(material.TableRow)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 600;\n }\n .sm {\n font-weight: 600;\n }\n .bolder {\n font-weight: 800;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
2082
+ var CreditCard = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n border: 1px solid transparent;\n text-align: center;\n p {\n font-size: 10px;\n }\n"])));
2083
+ var PaymentLi = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 1.5em;\n cursor: pointer;\n .circle {\n /* background: #323232; */\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n border: 1px solid #323232;\n margin-right: 1em;\n }\n .innerCircle {\n background: #323232;\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n p {\n font-size: 1em;\n color: black;\n text-transform: capitalize;\n font-weight: 500;\n }\n"])));
2084
+ var StyledTableRow = styled(material.TableRow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 700;\n }\n /* .sm {\n font-weight: 600;\n } */\n .bolder {\n font-weight: 800;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
2084
2085
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2085
2086
  });
2086
- var StyledTableCell = styled(material.TableCell)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n font-size: 1em;\n .noAboveSm {\n display: none;\n }\n @media only screen and (max-width: 748px) {\n display: ", ";\n padding: 0.5em 0.3em;\n .noAboveSm {\n display: inline-block;\n margin-right: 6px;\n }\n }\n }\n"])), function (props) {
2087
+ var StyledTableCell = styled(material.TableCell)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n font-size: 1em;\n .noAboveSm {\n display: none;\n }\n @media only screen and (max-width: 748px) {\n display: ", ";\n padding: 0.5em 0.3em;\n .noAboveSm {\n display: inline-block;\n margin-right: 6px;\n }\n }\n }\n"])), function (props) {
2087
2088
  return props.noSmall ? 'none' : '';
2088
2089
  });
2089
- var BottomGrid = styled(material.Grid)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 600;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1em;\n }\n .icon {\n font-size: 1.6em;\n color: rgba(253, 0, 21, 1);\n }\n textarea {\n width: 100%;\n resize: none;\n background: #fff8f6;\n border: 1px solid rgba(253, 0, 21, 0.5);\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\n }\n p {\n font-size: 12px;\n .ul {\n text-decoration: underline;\n font-size: inherit;\n }\n }\n .bottom {\n margin-left: 3em;\n font-style: italic;\n span {\n font-weight: 600;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
2090
+ var BottomGrid = styled(material.Grid)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 600;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1em;\n }\n .icon {\n font-size: 1.6em;\n color: rgba(253, 0, 21, 1);\n }\n textarea {\n width: 100%;\n resize: none;\n background: #fff8f6;\n border: 1px solid rgba(253, 0, 21, 0.5);\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\n }\n p {\n font-size: 12px;\n .ul {\n text-decoration: underline;\n font-size: inherit;\n }\n }\n .bottom {\n margin-left: 3em;\n font-style: italic;\n span {\n font-weight: 600;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
2090
2091
 
2091
2092
  var CheckoutInput = function CheckoutInput(_ref) {
2092
2093
  var controlls = _ref.controlls;
@@ -2568,7 +2569,7 @@ var Step1 = function Step1(_ref) {
2568
2569
  item: true,
2569
2570
  xs: 12,
2570
2571
  sm: 10
2571
- }, /*#__PURE__*/React__default.createElement("select", {
2572
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2572
2573
  value: selectedStore,
2573
2574
  onChange: function onChange(e) {
2574
2575
  return setSelectedStore(parseInt(e.target.value));
@@ -2578,7 +2579,7 @@ var Step1 = function Step1(_ref) {
2578
2579
  key: i,
2579
2580
  value: store === null || store === void 0 ? void 0 : store.id
2580
2581
  }, store === null || store === void 0 ? void 0 : store.storeName);
2581
- })))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2582
+ }))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2582
2583
  control: control,
2583
2584
  onSubmit: onSubmit,
2584
2585
  handleSubmit: handleSubmit
@@ -2591,7 +2592,7 @@ var Step1 = function Step1(_ref) {
2591
2592
  sx: {
2592
2593
  padding: '1em 0'
2593
2594
  }
2594
- }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement("select", {
2595
+ }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2595
2596
  value: address,
2596
2597
  onChange: function onChange(e) {
2597
2598
  return setAddress(parseInt(e.target.value));
@@ -2601,7 +2602,7 @@ var Step1 = function Step1(_ref) {
2601
2602
  key: i,
2602
2603
  value: address.id
2603
2604
  }, address === null || address === void 0 ? void 0 : address.address1);
2604
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2605
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2605
2606
  control: addressControl,
2606
2607
  handleSubmit: handleSubmitAddress,
2607
2608
  onSubmit: addAddress,
@@ -2709,7 +2710,7 @@ var Step2 = function Step2(_ref) {
2709
2710
  sx: {
2710
2711
  padding: '1em 0'
2711
2712
  }
2712
- }, /*#__PURE__*/React__default.createElement("select", {
2713
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2713
2714
  value: address,
2714
2715
  onChange: function onChange(e) {
2715
2716
  return setAddress(parseInt(e.target.value));
@@ -2719,7 +2720,7 @@ var Step2 = function Step2(_ref) {
2719
2720
  key: i,
2720
2721
  value: address.id
2721
2722
  }, address === null || address === void 0 ? void 0 : address.address1);
2722
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2723
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2723
2724
  control: control,
2724
2725
  onSubmit: onSubmit,
2725
2726
  handleSubmit: handleSubmit,
@@ -2920,7 +2921,6 @@ var Step3 = function Step3(_ref) {
2920
2921
  card = _useState3[0],
2921
2922
  setCard = _useState3[1];
2922
2923
  var isCard = selectedMethod === null || selectedMethod === void 0 ? void 0 : (_selectedMethod$name = selectedMethod.name) === null || _selectedMethod$name === void 0 ? void 0 : _selectedMethod$name.toLowerCase().includes('card');
2923
- console.log(card);
2924
2924
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2925
2925
  text: 'Payments Method',
2926
2926
  icon: 4
@@ -3003,11 +3003,10 @@ var Step4 = function Step4(_ref) {
3003
3003
 
3004
3004
  var handleBack = _ref.handleBack,
3005
3005
  cartData = _ref.cartData,
3006
- vatPercentage = _ref.vat,
3007
3006
  clickRedirect = _ref.clickRedirect,
3008
- deliveryCharges = _ref.deliveryCharges,
3009
3007
  loading = _ref.loading,
3010
- placeOrder = _ref.placeOrder;
3008
+ placeOrder = _ref.placeOrder,
3009
+ storeCredits = _ref.storeCredits;
3011
3010
 
3012
3011
  var _React$useState = React__default.useState(false),
3013
3012
  checked = _React$useState[0],
@@ -3016,8 +3015,7 @@ var Step4 = function Step4(_ref) {
3016
3015
  var _React$useState2 = React__default.useState(''),
3017
3016
  comments = _React$useState2[0],
3018
3017
  setComments = _React$useState2[1];
3019
-
3020
- var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
3018
+ var storeCr = storeCredits > (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) ? cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice : storeCredits;
3021
3019
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
3022
3020
  text: 'Order Review',
3023
3021
  icon: 5
@@ -3076,11 +3074,11 @@ var Step4 = function Step4(_ref) {
3076
3074
  colSpan: 1
3077
3075
  }, /*#__PURE__*/React__default.createElement("p", {
3078
3076
  className: "max sm"
3079
- }, "Value added tax (VAT)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3077
+ }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3080
3078
  align: "right"
3081
3079
  }, /*#__PURE__*/React__default.createElement("p", {
3082
- className: "max sm price"
3083
- }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3080
+ className: "max sm red"
3081
+ }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3084
3082
  colSpan: 1,
3085
3083
  noSmall: true
3086
3084
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3089,11 +3087,24 @@ var Step4 = function Step4(_ref) {
3089
3087
  colSpan: 1
3090
3088
  }, /*#__PURE__*/React__default.createElement("p", {
3091
3089
  className: "max sm"
3092
- }, "Delivery Charge")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3090
+ }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3093
3091
  align: "right"
3094
3092
  }, /*#__PURE__*/React__default.createElement("p", {
3095
- className: "max sm price red"
3096
- }, deliveryCharges && deliveryCharges > 0 ? deliveryCharges === null || deliveryCharges === void 0 ? void 0 : deliveryCharges.toFixed(2) : 'Free'))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3093
+ className: "max sm red"
3094
+ }, "Calculated later"))), storeCredits && /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3095
+ colSpan: 1,
3096
+ noSmall: true
3097
+ }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3098
+ colSpan: 1
3099
+ }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3100
+ colSpan: 1
3101
+ }, /*#__PURE__*/React__default.createElement("p", {
3102
+ className: "max sm"
3103
+ }, "Store Credits")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3104
+ align: "right"
3105
+ }, /*#__PURE__*/React__default.createElement("p", {
3106
+ className: "max sm price"
3107
+ }, "- $", storeCr || 0))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3097
3108
  colSpan: 1,
3098
3109
  noSmall: true
3099
3110
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3105,14 +3116,14 @@ var Step4 = function Step4(_ref) {
3105
3116
  colSpan: 1
3106
3117
  }, /*#__PURE__*/React__default.createElement("p", {
3107
3118
  className: "max sm bolder red"
3108
- }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3119
+ }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3109
3120
  sx: {
3110
3121
  paddingTop: '1em'
3111
3122
  },
3112
3123
  align: "right"
3113
3124
  }, /*#__PURE__*/React__default.createElement("p", {
3114
3125
  className: "max sm total bolder red"
3115
- }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat + deliveryCharges).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3126
+ }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3116
3127
  container: true,
3117
3128
  columnSpacing: 0,
3118
3129
  rowSpacing: 0
@@ -3398,7 +3409,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3398
3409
  loading: ordering,
3399
3410
  deliveryCharges: deliveryCharges,
3400
3411
  ordering: loading,
3401
- placeOrder: placeOrder
3412
+ placeOrder: placeOrder,
3413
+ storeCredits: storeCredits
3402
3414
  })));
3403
3415
  }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
3404
3416
  billingInformation: billingAddress,