@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.
@@ -19,7 +19,6 @@ import { MdArrowBack, MdOutlineCircle, MdOutlineStickyNote2 } from 'react-icons/
19
19
  import { Controller, useForm } from 'react-hook-form';
20
20
  import { HiOutlineChevronDown } from 'react-icons/hi';
21
21
  import Cards from 'react-credit-cards';
22
- import 'react-credit-cards/es/styles-compiled.css';
23
22
  import { FiTruck } from 'react-icons/fi';
24
23
 
25
24
  function _extends() {
@@ -2024,7 +2023,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2024
2023
  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
2025
2024
  };
2026
2025
 
2027
- var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2026
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
2028
2027
  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"])));
2029
2028
  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"])));
2030
2029
  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) {
@@ -2052,22 +2051,23 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2052
2051
  }, function (props) {
2053
2052
  return props.disabled ? 'not-allowed' : 'pointer';
2054
2053
  });
2055
- 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) {
2054
+ 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"])));
2055
+ 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) {
2056
2056
  return props.color || '#FD0015';
2057
2057
  }, function (props) {
2058
2058
  return props.disabled ? 'not-allowed' : 'pointer';
2059
2059
  });
2060
- 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) {
2060
+ 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) {
2061
2061
  return props.disabledNext ? 'not-allowed' : 'pointer';
2062
2062
  }, function (props) {
2063
2063
  return props.disabledBack ? 'not-allowed' : 'pointer';
2064
2064
  });
2065
- 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) {
2065
+ 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) {
2066
2066
  return props.padding;
2067
2067
  }, function (props) {
2068
2068
  return props.marginLeft;
2069
2069
  });
2070
- 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) {
2070
+ 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) {
2071
2071
  return props.hovered ? '#fff0ec' : '';
2072
2072
  }, function (props) {
2073
2073
  return props.hovered ? '1px solid #fce1d9' : '';
@@ -2076,15 +2076,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
2076
2076
  }, function (props) {
2077
2077
  return props.hovered ? '800' : '700';
2078
2078
  });
2079
- 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"])));
2080
- 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"])));
2081
- var StyledTableRow = styled(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) {
2079
+ 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"])));
2080
+ 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"])));
2081
+ var StyledTableRow = styled(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) {
2082
2082
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2083
2083
  });
2084
- var StyledTableCell = styled(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) {
2084
+ var StyledTableCell = styled(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) {
2085
2085
  return props.noSmall ? 'none' : '';
2086
2086
  });
2087
- var BottomGrid = styled(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"])));
2087
+ var BottomGrid = styled(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"])));
2088
2088
 
2089
2089
  var CheckoutInput = function CheckoutInput(_ref) {
2090
2090
  var controlls = _ref.controlls;
@@ -2566,7 +2566,7 @@ var Step1 = function Step1(_ref) {
2566
2566
  item: true,
2567
2567
  xs: 12,
2568
2568
  sm: 10
2569
- }, /*#__PURE__*/React__default.createElement("select", {
2569
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2570
2570
  value: selectedStore,
2571
2571
  onChange: function onChange(e) {
2572
2572
  return setSelectedStore(parseInt(e.target.value));
@@ -2576,7 +2576,7 @@ var Step1 = function Step1(_ref) {
2576
2576
  key: i,
2577
2577
  value: store === null || store === void 0 ? void 0 : store.id
2578
2578
  }, store === null || store === void 0 ? void 0 : store.storeName);
2579
- })))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2579
+ }))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2580
2580
  control: control,
2581
2581
  onSubmit: onSubmit,
2582
2582
  handleSubmit: handleSubmit
@@ -2589,7 +2589,7 @@ var Step1 = function Step1(_ref) {
2589
2589
  sx: {
2590
2590
  padding: '1em 0'
2591
2591
  }
2592
- }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement("select", {
2592
+ }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2593
2593
  value: address,
2594
2594
  onChange: function onChange(e) {
2595
2595
  return setAddress(parseInt(e.target.value));
@@ -2599,7 +2599,7 @@ var Step1 = function Step1(_ref) {
2599
2599
  key: i,
2600
2600
  value: address.id
2601
2601
  }, address === null || address === void 0 ? void 0 : address.address1);
2602
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2602
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2603
2603
  control: addressControl,
2604
2604
  handleSubmit: handleSubmitAddress,
2605
2605
  onSubmit: addAddress,
@@ -2707,7 +2707,7 @@ var Step2 = function Step2(_ref) {
2707
2707
  sx: {
2708
2708
  padding: '1em 0'
2709
2709
  }
2710
- }, /*#__PURE__*/React__default.createElement("select", {
2710
+ }, /*#__PURE__*/React__default.createElement(Select, null, /*#__PURE__*/React__default.createElement("select", {
2711
2711
  value: address,
2712
2712
  onChange: function onChange(e) {
2713
2713
  return setAddress(parseInt(e.target.value));
@@ -2717,7 +2717,7 @@ var Step2 = function Step2(_ref) {
2717
2717
  key: i,
2718
2718
  value: address.id
2719
2719
  }, address === null || address === void 0 ? void 0 : address.address1);
2720
- })))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2720
+ }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2721
2721
  control: control,
2722
2722
  onSubmit: onSubmit,
2723
2723
  handleSubmit: handleSubmit,
@@ -2918,7 +2918,6 @@ var Step3 = function Step3(_ref) {
2918
2918
  card = _useState3[0],
2919
2919
  setCard = _useState3[1];
2920
2920
  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');
2921
- console.log(card);
2922
2921
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2923
2922
  text: 'Payments Method',
2924
2923
  icon: 4
@@ -3001,11 +3000,10 @@ var Step4 = function Step4(_ref) {
3001
3000
 
3002
3001
  var handleBack = _ref.handleBack,
3003
3002
  cartData = _ref.cartData,
3004
- vatPercentage = _ref.vat,
3005
3003
  clickRedirect = _ref.clickRedirect,
3006
- deliveryCharges = _ref.deliveryCharges,
3007
3004
  loading = _ref.loading,
3008
- placeOrder = _ref.placeOrder;
3005
+ placeOrder = _ref.placeOrder,
3006
+ storeCredits = _ref.storeCredits;
3009
3007
 
3010
3008
  var _React$useState = React__default.useState(false),
3011
3009
  checked = _React$useState[0],
@@ -3014,8 +3012,7 @@ var Step4 = function Step4(_ref) {
3014
3012
  var _React$useState2 = React__default.useState(''),
3015
3013
  comments = _React$useState2[0],
3016
3014
  setComments = _React$useState2[1];
3017
-
3018
- var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
3015
+ var storeCr = storeCredits > (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) ? cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice : storeCredits;
3019
3016
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
3020
3017
  text: 'Order Review',
3021
3018
  icon: 5
@@ -3074,11 +3071,11 @@ var Step4 = function Step4(_ref) {
3074
3071
  colSpan: 1
3075
3072
  }, /*#__PURE__*/React__default.createElement("p", {
3076
3073
  className: "max sm"
3077
- }, "Value added tax (VAT)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3074
+ }, "Shipping Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3078
3075
  align: "right"
3079
3076
  }, /*#__PURE__*/React__default.createElement("p", {
3080
- className: "max sm price"
3081
- }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3077
+ className: "max sm red"
3078
+ }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3082
3079
  colSpan: 1,
3083
3080
  noSmall: true
3084
3081
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3087,11 +3084,24 @@ var Step4 = function Step4(_ref) {
3087
3084
  colSpan: 1
3088
3085
  }, /*#__PURE__*/React__default.createElement("p", {
3089
3086
  className: "max sm"
3090
- }, "Delivery Charge")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3087
+ }, "Tax Charges")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3091
3088
  align: "right"
3092
3089
  }, /*#__PURE__*/React__default.createElement("p", {
3093
- className: "max sm price red"
3094
- }, 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, {
3090
+ className: "max sm red"
3091
+ }, "Calculated later"))), storeCredits && /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3092
+ colSpan: 1,
3093
+ noSmall: true
3094
+ }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3095
+ colSpan: 1
3096
+ }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3097
+ colSpan: 1
3098
+ }, /*#__PURE__*/React__default.createElement("p", {
3099
+ className: "max sm"
3100
+ }, "Store Credits")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3101
+ align: "right"
3102
+ }, /*#__PURE__*/React__default.createElement("p", {
3103
+ className: "max sm price"
3104
+ }, "- $", storeCr || 0))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3095
3105
  colSpan: 1,
3096
3106
  noSmall: true
3097
3107
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3103,14 +3113,14 @@ var Step4 = function Step4(_ref) {
3103
3113
  colSpan: 1
3104
3114
  }, /*#__PURE__*/React__default.createElement("p", {
3105
3115
  className: "max sm bolder red"
3106
- }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3116
+ }, "Grand Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
3107
3117
  sx: {
3108
3118
  paddingTop: '1em'
3109
3119
  },
3110
3120
  align: "right"
3111
3121
  }, /*#__PURE__*/React__default.createElement("p", {
3112
3122
  className: "max sm total bolder red"
3113
- }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat + deliveryCharges).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3123
+ }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3114
3124
  container: true,
3115
3125
  columnSpacing: 0,
3116
3126
  rowSpacing: 0
@@ -3396,7 +3406,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3396
3406
  loading: ordering,
3397
3407
  deliveryCharges: deliveryCharges,
3398
3408
  ordering: loading,
3399
- placeOrder: placeOrder
3409
+ placeOrder: placeOrder,
3410
+ storeCredits: storeCredits
3400
3411
  })));
3401
3412
  }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
3402
3413
  billingInformation: billingAddress,