@salesgenterp/ui-components 0.4.62 → 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
@@ -22,7 +22,6 @@ var md = require('react-icons/md');
22
22
  var reactHookForm = require('react-hook-form');
23
23
  var hi = require('react-icons/hi');
24
24
  var Cards = _interopDefault(require('react-credit-cards'));
25
- require('react-credit-cards/es/styles-compiled.css');
26
25
  var fi = require('react-icons/fi');
27
26
 
28
27
  function _extends() {
@@ -2027,7 +2026,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2027
2026
  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
2028
2027
  };
2029
2028
 
2030
- 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;
2031
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"])));
2032
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"])));
2033
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) {
@@ -2055,22 +2054,23 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2055
2054
  }, function (props) {
2056
2055
  return props.disabled ? 'not-allowed' : 'pointer';
2057
2056
  });
2058
- 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) {
2059
2059
  return props.color || '#FD0015';
2060
2060
  }, function (props) {
2061
2061
  return props.disabled ? 'not-allowed' : 'pointer';
2062
2062
  });
2063
- 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) {
2064
2064
  return props.disabledNext ? 'not-allowed' : 'pointer';
2065
2065
  }, function (props) {
2066
2066
  return props.disabledBack ? 'not-allowed' : 'pointer';
2067
2067
  });
2068
- 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) {
2069
2069
  return props.padding;
2070
2070
  }, function (props) {
2071
2071
  return props.marginLeft;
2072
2072
  });
2073
- 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) {
2074
2074
  return props.hovered ? '#fff0ec' : '';
2075
2075
  }, function (props) {
2076
2076
  return props.hovered ? '1px solid #fce1d9' : '';
@@ -2079,15 +2079,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
2079
2079
  }, function (props) {
2080
2080
  return props.hovered ? '800' : '700';
2081
2081
  });
2082
- 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"])));
2083
- 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"])));
2084
- 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) {
2085
2085
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2086
2086
  });
2087
- 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) {
2088
2088
  return props.noSmall ? 'none' : '';
2089
2089
  });
2090
- 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"])));
2091
2091
 
2092
2092
  var CheckoutInput = function CheckoutInput(_ref) {
2093
2093
  var controlls = _ref.controlls;
@@ -2569,7 +2569,7 @@ var Step1 = function Step1(_ref) {
2569
2569
  item: true,
2570
2570
  xs: 12,
2571
2571
  sm: 10
2572
- }, /*#__PURE__*/React__default.createElement("select", {
2572
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2573
2573
  value: selectedStore,
2574
2574
  onChange: function onChange(e) {
2575
2575
  return setSelectedStore(parseInt(e.target.value));
@@ -2579,7 +2579,7 @@ var Step1 = function Step1(_ref) {
2579
2579
  key: i,
2580
2580
  value: store === null || store === void 0 ? void 0 : store.id
2581
2581
  }, store === null || store === void 0 ? void 0 : store.storeName);
2582
- })))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2582
+ }))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2583
2583
  control: control,
2584
2584
  onSubmit: onSubmit,
2585
2585
  handleSubmit: handleSubmit
@@ -2592,7 +2592,7 @@ var Step1 = function Step1(_ref) {
2592
2592
  sx: {
2593
2593
  padding: '1em 0'
2594
2594
  }
2595
- }, ((_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", {
2596
2596
  value: address,
2597
2597
  onChange: function onChange(e) {
2598
2598
  return setAddress(parseInt(e.target.value));
@@ -2602,7 +2602,7 @@ var Step1 = function Step1(_ref) {
2602
2602
  key: i,
2603
2603
  value: address.id
2604
2604
  }, address === null || address === void 0 ? void 0 : address.address1);
2605
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2605
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2606
2606
  control: addressControl,
2607
2607
  handleSubmit: handleSubmitAddress,
2608
2608
  onSubmit: addAddress,
@@ -2710,7 +2710,7 @@ var Step2 = function Step2(_ref) {
2710
2710
  sx: {
2711
2711
  padding: '1em 0'
2712
2712
  }
2713
- }, /*#__PURE__*/React__default.createElement("select", {
2713
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2714
2714
  value: address,
2715
2715
  onChange: function onChange(e) {
2716
2716
  return setAddress(parseInt(e.target.value));
@@ -2720,7 +2720,7 @@ var Step2 = function Step2(_ref) {
2720
2720
  key: i,
2721
2721
  value: address.id
2722
2722
  }, address === null || address === void 0 ? void 0 : address.address1);
2723
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2723
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2724
2724
  control: control,
2725
2725
  onSubmit: onSubmit,
2726
2726
  handleSubmit: handleSubmit,
@@ -2921,7 +2921,6 @@ var Step3 = function Step3(_ref) {
2921
2921
  card = _useState3[0],
2922
2922
  setCard = _useState3[1];
2923
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');
2924
- console.log(card);
2925
2924
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2926
2925
  text: 'Payments Method',
2927
2926
  icon: 4
@@ -3004,11 +3003,10 @@ var Step4 = function Step4(_ref) {
3004
3003
 
3005
3004
  var handleBack = _ref.handleBack,
3006
3005
  cartData = _ref.cartData,
3007
- vatPercentage = _ref.vat,
3008
3006
  clickRedirect = _ref.clickRedirect,
3009
- deliveryCharges = _ref.deliveryCharges,
3010
3007
  loading = _ref.loading,
3011
- placeOrder = _ref.placeOrder;
3008
+ placeOrder = _ref.placeOrder,
3009
+ storeCredits = _ref.storeCredits;
3012
3010
 
3013
3011
  var _React$useState = React__default.useState(false),
3014
3012
  checked = _React$useState[0],
@@ -3017,8 +3015,7 @@ var Step4 = function Step4(_ref) {
3017
3015
  var _React$useState2 = React__default.useState(''),
3018
3016
  comments = _React$useState2[0],
3019
3017
  setComments = _React$useState2[1];
3020
-
3021
- 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;
3022
3019
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
3023
3020
  text: 'Order Review',
3024
3021
  icon: 5
@@ -3077,11 +3074,11 @@ var Step4 = function Step4(_ref) {
3077
3074
  colSpan: 1
3078
3075
  }, /*#__PURE__*/React__default.createElement("p", {
3079
3076
  className: "max sm"
3080
- }, "Value added tax (VAT)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3077
+ }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3081
3078
  align: "right"
3082
3079
  }, /*#__PURE__*/React__default.createElement("p", {
3083
- className: "max sm price"
3084
- }, "$", 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, {
3085
3082
  colSpan: 1,
3086
3083
  noSmall: true
3087
3084
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3090,11 +3087,24 @@ var Step4 = function Step4(_ref) {
3090
3087
  colSpan: 1
3091
3088
  }, /*#__PURE__*/React__default.createElement("p", {
3092
3089
  className: "max sm"
3093
- }, "Delivery Charge")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3090
+ }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3094
3091
  align: "right"
3095
3092
  }, /*#__PURE__*/React__default.createElement("p", {
3096
- className: "max sm price red"
3097
- }, 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, {
3098
3108
  colSpan: 1,
3099
3109
  noSmall: true
3100
3110
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3106,14 +3116,14 @@ var Step4 = function Step4(_ref) {
3106
3116
  colSpan: 1
3107
3117
  }, /*#__PURE__*/React__default.createElement("p", {
3108
3118
  className: "max sm bolder red"
3109
- }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3119
+ }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3110
3120
  sx: {
3111
3121
  paddingTop: '1em'
3112
3122
  },
3113
3123
  align: "right"
3114
3124
  }, /*#__PURE__*/React__default.createElement("p", {
3115
3125
  className: "max sm total bolder red"
3116
- }, "$", ((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, {
3117
3127
  container: true,
3118
3128
  columnSpacing: 0,
3119
3129
  rowSpacing: 0
@@ -3399,7 +3409,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3399
3409
  loading: ordering,
3400
3410
  deliveryCharges: deliveryCharges,
3401
3411
  ordering: loading,
3402
- placeOrder: placeOrder
3412
+ placeOrder: placeOrder,
3413
+ storeCredits: storeCredits
3403
3414
  })));
3404
3415
  }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
3405
3416
  billingInformation: billingAddress,