@salesgenterp/ui-components 0.4.35 → 0.4.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +318 -177
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +321 -180
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1835,7 +1835,8 @@ var CartSummary = function CartSummary(_ref) {
1835
1835
  clickRedirect = _ref.clickRedirect,
1836
1836
  subtotal = _ref.subtotal,
1837
1837
  styles = _ref.styles,
1838
- totalCartPrice = _ref.totalCartPrice;
1838
+ totalCartPrice = _ref.totalCartPrice,
1839
+ loading = _ref.loading;
1839
1840
  var cartSummary = styles.cartSummary,
1840
1841
  Btn = styles.Btn;
1841
1842
  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
@@ -1958,15 +1959,15 @@ var CartPageComponent = function CartPageComponent(_ref) {
1958
1959
  };
1959
1960
 
1960
1961
  var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
1961
- var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _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\n margin: 0 auto;\n padding: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n border-radius: 28px;\n @media only screen and (max-width: 1488px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
1962
+ var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _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: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n background: gainsboro;\n border-radius: 28px;\n @media only screen and (max-width: 1488px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
1962
1963
  return props.maxWidth || '1605px';
1963
1964
  }, function (props) {
1964
1965
  return props.bg || 'rgba(255, 248, 246, 1)';
1965
1966
  });
1966
1967
  var Row = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
1967
1968
  var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 1008px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n margin-right: 2em;\n max-height: 80vh;\n padding-right: 2em;\n overflow-y: auto;\n /* width */\n ::-webkit-scrollbar {\n width: 10px;\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #ef9687;\n border-radius: 16px;\n border: 3px solid rgba(245, 197, 189, 0.5);\n /* border: 3px solid black; */\n }\n @media only screen and (max-width: 1488px) {\n margin-bottom: 3em;\n min-height: max-content;\n max-height: max-content;\n margin-right: 0;\n overflow: visible;\n }\n @media only screen and (max-width: 788px) {\n max-width: 100vw;\n padding-right: 0;\n }\n /* overflow: hidden; */\n"])));
1968
- var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n padding: 2em;\n padding-right: 4em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 2em;\n margin-right: 0.35em;\n .row {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\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 font-size: 14px;\n }\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1969
- var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _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 .ic {\n font-size: 12px;\n }\n"])));
1969
+ var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n min-height: 4.1875em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 2em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\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.2%;\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 font-weight: 300;\n }\n .checked {\n color: #323232;\n .icon {\n color: rgba(36, 153, 55, 1);\n }\n }\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1970
+ var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _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 .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"])));
1970
1971
 
1971
1972
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
1972
1973
  var CheckoutSummaryContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n background: ", ";\n\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"])), function (props) {
@@ -2019,10 +2020,10 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2019
2020
  }))));
2020
2021
  };
2021
2022
 
2022
- var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
2023
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2023
2024
  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"])));
2024
- var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 2.5em;\n\n min-height: max-content;\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 1em;\n span {\n font-weight: 700;\n cursor: pointer;\n }\n .red {\n color: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
2025
- 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 h5 {\n font-size: 16px;\n font-weight: 700;\n text-transform: capitalize;\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 }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n\n /* padding: 1.5em 2em; */\n }\n"])), function (props) {
2025
+ 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"])));
2026
+ 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 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 }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
2026
2027
  return props.single ? '1.8em 2em' : '1em 0';
2027
2028
  }, function (props) {
2028
2029
  return props.single ? '-1.56em' : '1em';
@@ -2030,10 +2031,14 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
2030
2031
  return props.single ? '-1.56em' : '0';
2031
2032
  }, function (props) {
2032
2033
  return props.single ? '1.5em' : '0';
2034
+ }, function (props) {
2035
+ return props.single ? '0 2em' : '0';
2033
2036
  });
2034
- var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.975em !important;\n height: 28px;\n &::placeholder {\n font-size: 0.975em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1em;\n }\n }\n"])));
2035
- var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n padding: ", ";\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2036
- return props.padding || '.4em 1.6em';
2037
+ var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.75em !important;\n height: 24px;\n color: rgba(107, 106, 106, 1);\n &::placeholder {\n font-size: 0.975em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1em;\n }\n }\n"])));
2038
+ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n width: ", ";\n height: ", ";\n\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n font-weight: 500;\n letter-spacing: 1px;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2039
+ return props.width || '8.05em';
2040
+ }, function (props) {
2041
+ return props.height || '2.25em';
2037
2042
  }, function (props) {
2038
2043
  return props.color || '#FD0015';
2039
2044
  }, function (props) {
@@ -2041,21 +2046,26 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2041
2046
  }, function (props) {
2042
2047
  return props.disabled ? 'not-allowed' : 'pointer';
2043
2048
  });
2044
- var ButtonRowContainer = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n .back {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 0.812em;\n font-weight: 500;\n justify-content: flex-start;\n font-size: 0.8em;\n cursor: ", ";\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) {
2049
+ var SaveButton = styled.button(_templateObject6$5 || (_templateObject6$5 = _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) {
2050
+ return props.color || '#FD0015';
2051
+ }, function (props) {
2045
2052
  return props.disabled ? 'not-allowed' : 'pointer';
2046
2053
  });
2047
- var CheckBoxRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\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: 700;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\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"])), function (props) {
2054
+ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n .back {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 0.812em;\n font-weight: 500;\n justify-content: flex-start;\n font-size: 0.8em;\n cursor: ", ";\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) {
2055
+ return props.disabled ? 'not-allowed' : 'pointer';
2056
+ });
2057
+ 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 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 &: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"])), function (props) {
2048
2058
  return props.padding;
2049
2059
  });
2050
- var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n margin-bottom: 1em;\n /* padding: 1em 0.4em; */\n cursor: pointer;\n img {\n width: 38px;\n height: 17px;\n margin-bottom: -5px;\n margin-right: 4px;\n }\n p {\n font-size: 10px;\n }\n .circle {\n width: 10px;\n height: 10px;\n border-radius: 1px solid black;\n background-color: white;\n display: grid;\n place-items: center;\n border-radius: 50%;\n margin-left: auto;\n margin-left: 5px;\n .smallCircle {\n width: 4px;\n height: 4px;\n background: black;\n border-radius: 50%;\n }\n }\n"])));
2051
- var CreditCard = styled.div(_templateObject9 || (_templateObject9 = _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 &:hover,\n &:focus {\n border: 1px solid black;\n }\n"])));
2052
- var StyledTableRow = styled(material.TableRow)(_templateObject10 || (_templateObject10 = _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 @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 8px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n }\n }\n"])), function (props) {
2060
+ var DeliveryCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n margin-bottom: 1em;\n /* padding: 1em 0.4em; */\n cursor: pointer;\n img {\n width: 38px;\n height: 17px;\n margin-bottom: -5px;\n margin-right: 4px;\n }\n p {\n font-size: 10px;\n }\n .circle {\n width: 10px;\n height: 10px;\n border-radius: 1px solid black;\n background-color: white;\n display: grid;\n place-items: center;\n border-radius: 50%;\n margin-left: auto;\n margin-left: 5px;\n .smallCircle {\n width: 4px;\n height: 4px;\n background: black;\n border-radius: 50%;\n }\n }\n"])));
2061
+ 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 &:hover,\n &:focus {\n border: 1px solid black;\n }\n"])));
2062
+ var StyledTableRow = styled(material.TableRow)(_templateObject11 || (_templateObject11 = _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 @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 8px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n }\n }\n"])), function (props) {
2053
2063
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2054
2064
  });
2055
- var StyledTableCell = styled(material.TableCell)(_templateObject11 || (_templateObject11 = _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) {
2065
+ var StyledTableCell = styled(material.TableCell)(_templateObject12 || (_templateObject12 = _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) {
2056
2066
  return props.noSmall ? 'none' : '';
2057
2067
  });
2058
- var BottomGrid = styled(material.Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 700;\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: 700;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
2068
+ var BottomGrid = styled(material.Grid)(_templateObject13 || (_templateObject13 = _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"])));
2059
2069
 
2060
2070
  var CheckoutInput = function CheckoutInput(_ref) {
2061
2071
  var controlls = _ref.controlls;
@@ -2122,39 +2132,14 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
2122
2132
  }));
2123
2133
  };
2124
2134
 
2125
- var ButtonRow = function ButtonRow(_ref) {
2126
- var handleBack = _ref.handleBack,
2127
- handleNext = _ref.handleNext,
2128
- backDisabled = _ref.backDisabled,
2129
- nextDisabled = _ref.nextDisabled;
2130
- return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
2131
- disabled: backDisabled
2132
- }, /*#__PURE__*/React__default.createElement("div", {
2133
- className: "back",
2134
- tabIndex: "1",
2135
- onClick: function onClick() {
2136
- if (backDisabled) return;
2137
- handleBack();
2138
- }
2139
- }, /*#__PURE__*/React__default.createElement(bi.BiArrowBack, {
2140
- className: "icon"
2141
- }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2142
- disabled: nextDisabled,
2143
- tabIndex: "1",
2144
- onClick: function onClick() {
2145
- if (nextDisabled) return;
2146
- handleNext();
2147
- }
2148
- }, "Next"));
2149
- };
2150
-
2151
2135
  var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2152
2136
  var text = _ref.text,
2153
2137
  username = _ref.username,
2154
- Icon = _ref.Icon,
2138
+ icon = _ref.icon,
2155
2139
  single = _ref.single,
2156
2140
  closed = _ref.closed,
2157
2141
  handleClick = _ref.handleClick;
2142
+ console.log("/images/checkout/vector-" + icon + ".svg");
2158
2143
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2159
2144
  single: single
2160
2145
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
@@ -2162,10 +2147,17 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2162
2147
  flexDirection: "row",
2163
2148
  sx: {
2164
2149
  width: '100%'
2165
- }
2150
+ },
2151
+ alignItems: "center"
2166
2152
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
2167
- flexDirection: "row"
2168
- }, Icon(), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2153
+ flexDirection: "row",
2154
+ alignItems: "center"
2155
+ }, /*#__PURE__*/React__default.createElement("img", {
2156
+ src: "/images/checkout/vector-" + icon + ".svg",
2157
+ alt: "vector",
2158
+ width: 18,
2159
+ height: 18
2160
+ }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2169
2161
  className: "dropIcon",
2170
2162
  style: closed ? {
2171
2163
  transform: 'rotate(-90deg)'
@@ -2182,8 +2174,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2182
2174
  var Step0 = function Step0(_ref) {
2183
2175
  var loading = _ref.loading,
2184
2176
  userName = _ref.userName,
2185
- handleBack = _ref.handleBack,
2186
- handleNext = _ref.handleNext,
2187
2177
  handleLogin = _ref.handleLogin;
2188
2178
 
2189
2179
  var _useForm = reactHookForm.useForm(),
@@ -2194,17 +2184,10 @@ var Step0 = function Step0(_ref) {
2194
2184
  handleLogin(data);
2195
2185
  };
2196
2186
 
2197
- function Icon() {
2198
- return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
2199
- className: "icon"
2200
- });
2201
- }
2202
-
2203
2187
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2204
2188
  text: 'welcome',
2205
2189
  username: userName,
2206
- Icon: Icon,
2207
- step: 0
2190
+ icon: 1
2208
2191
  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement("p", null, "Please choose how you want to proceed"), /*#__PURE__*/React__default.createElement("p", {
2209
2192
  className: "bold"
2210
2193
  }, /*#__PURE__*/React__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React__default.createElement("span", {
@@ -2219,7 +2202,7 @@ var Step0 = function Step0(_ref) {
2219
2202
  }
2220
2203
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
2221
2204
  item: true,
2222
- sm: 8,
2205
+ sm: 6.5,
2223
2206
  xs: 12
2224
2207
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2225
2208
  controlls: {
@@ -2231,7 +2214,7 @@ var Step0 = function Step0(_ref) {
2231
2214
  }
2232
2215
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2233
2216
  item: true,
2234
- sm: 8,
2217
+ sm: 6.5,
2235
2218
  xs: 12
2236
2219
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2237
2220
  controlls: {
@@ -2257,106 +2240,285 @@ var Step0 = function Step0(_ref) {
2257
2240
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
2258
2241
  color: "inherit",
2259
2242
  size: 15
2260
- }) : 'Login'))), /*#__PURE__*/React__default.createElement(ButtonRow, {
2261
- handleBack: handleBack,
2262
- handleNext: handleNext,
2263
- backDisabled: true,
2264
- nextDisabled: !userName
2265
- })));
2243
+ }) : 'Login')))));
2266
2244
  };
2267
2245
 
2268
- var Step1 = function Step1(_ref) {
2269
- var _Object$keys2;
2270
-
2246
+ var ButtonRow = function ButtonRow(_ref) {
2271
2247
  var handleBack = _ref.handleBack,
2272
- _handleNext = _ref.handleNext,
2273
- setShipping = _ref.setShipping,
2274
- setBillingAddress = _ref.setBillingAddress,
2248
+ handleNext = _ref.handleNext,
2249
+ backDisabled = _ref.backDisabled,
2250
+ nextDisabled = _ref.nextDisabled;
2251
+ return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
2252
+ disabled: backDisabled
2253
+ }, /*#__PURE__*/React__default.createElement("div", {
2254
+ className: "back",
2255
+ tabIndex: "1",
2256
+ onClick: function onClick() {
2257
+ if (backDisabled) return;
2258
+ handleBack();
2259
+ }
2260
+ }, /*#__PURE__*/React__default.createElement(bi.BiArrowBack, {
2261
+ className: "icon"
2262
+ }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2263
+ disabled: nextDisabled,
2264
+ tabIndex: "1",
2265
+ onClick: function onClick() {
2266
+ if (nextDisabled) return;
2267
+ handleNext();
2268
+ }
2269
+ }, "Next"));
2270
+ };
2271
+
2272
+ var StoreForm = function StoreForm(_ref) {
2273
+ var control = _ref.control,
2274
+ _onSubmit = _ref.onSubmit,
2275
+ handleSubmit = _ref.handleSubmit;
2276
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
2277
+ container: true,
2278
+ columnSpacing: 1,
2279
+ component: "form",
2280
+ rowSpacing: 1,
2281
+ paddingY: 4,
2282
+ onSubmit: function onSubmit(e) {
2283
+ e.preventDefault();
2284
+ handleSubmit(_onSubmit)(e);
2285
+ }
2286
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2287
+ item: true,
2288
+ xs: 12,
2289
+ sm: 10
2290
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2291
+ controlls: {
2292
+ name: 'storeName',
2293
+ placeholder: 'Store Name',
2294
+ control: control
2295
+ }
2296
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2297
+ item: true,
2298
+ xs: 6,
2299
+ sm: 3.33
2300
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2301
+ controlls: {
2302
+ name: 'taxNumber',
2303
+ placeholder: 'Tax number',
2304
+ control: control,
2305
+ type: 'number'
2306
+ }
2307
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2308
+ item: true,
2309
+ xs: 6,
2310
+ sm: 3.33
2311
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2312
+ controlls: {
2313
+ name: 'Mobile',
2314
+ placeholder: 'Mobile',
2315
+ control: control,
2316
+ type: 'number'
2317
+ }
2318
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2319
+ item: true,
2320
+ xs: 6,
2321
+ sm: 3.33
2322
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2323
+ controlls: {
2324
+ name: 'email',
2325
+ placeholder: 'Email',
2326
+ control: control
2327
+ }
2328
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2329
+ item: true,
2330
+ xs: 12,
2331
+ sm: 10
2332
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2333
+ controlls: {
2334
+ name: 'description',
2335
+ placeholder: 'Description',
2336
+ control: control,
2337
+ rows: '4'
2338
+ }
2339
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2340
+ item: true,
2341
+ xs: 4
2342
+ }, /*#__PURE__*/React__default.createElement(SaveButton, null, "save store")));
2343
+ };
2344
+
2345
+ var AddressForm = function AddressForm(_ref) {
2346
+ var control = _ref.control,
2347
+ countries = _ref.countries,
2348
+ _onSubmit = _ref.onSubmit,
2349
+ handleSubmit = _ref.handleSubmit;
2350
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
2351
+ container: true,
2352
+ rowSpacing: 2,
2353
+ columnSpacing: 2,
2354
+ paddingY: 2,
2355
+ component: "form",
2356
+ onSubmit: function onSubmit(e) {
2357
+ e.preventDefault();
2358
+ handleSubmit(_onSubmit)(e);
2359
+ },
2360
+ sx: {
2361
+ paddingBottom: '1em'
2362
+ }
2363
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2364
+ item: true,
2365
+ xs: 12,
2366
+ sm: 10
2367
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2368
+ controlls: {
2369
+ name: 'fullAddress',
2370
+ placeholder: 'Full Address*',
2371
+ control: control
2372
+ }
2373
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2374
+ item: true,
2375
+ xs: 12,
2376
+ sm: 3.34
2377
+ }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2378
+ controlls: {
2379
+ name: 'country',
2380
+ placeholder: 'Country',
2381
+ control: control,
2382
+ List: countries,
2383
+ key: 'name'
2384
+ }
2385
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2386
+ item: true,
2387
+ xs: 6,
2388
+ sm: 3.33
2389
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2390
+ controlls: {
2391
+ name: 'state',
2392
+ placeholder: 'State/Province*',
2393
+ control: control
2394
+ }
2395
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2396
+ item: true,
2397
+ xs: 12,
2398
+ sm: 3.34
2399
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2400
+ controlls: {
2401
+ name: 'city',
2402
+ placeholder: 'City*',
2403
+ control: control
2404
+ }
2405
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2406
+ item: true,
2407
+ xs: 12,
2408
+ sm: 3.34
2409
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2410
+ controlls: {
2411
+ name: 'zip',
2412
+ placeholder: 'Zip/Postal Code*',
2413
+ control: control
2414
+ }
2415
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2416
+ item: true,
2417
+ xs: 12,
2418
+ sm: 3.34
2419
+ }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2420
+ controlls: {
2421
+ name: 'mobile',
2422
+ placeholder: 'Mobile*',
2423
+ control: control,
2424
+ type: 'number'
2425
+ }
2426
+ })), /*#__PURE__*/React__default.createElement(material.Grid, {
2427
+ item: true,
2428
+ xs: 8,
2429
+ sm: 8
2430
+ }, /*#__PURE__*/React__default.createElement(SaveButton, {
2431
+ type: "submit"
2432
+ }, "save address")));
2433
+ };
2434
+
2435
+ var Step1 = function Step1(_ref) {
2436
+ var addStore = _ref.addStore,
2437
+ addStoreAddress = _ref.addStoreAddress,
2275
2438
  stores = _ref.stores,
2276
- addresses = _ref.addresses;
2439
+ addresses = _ref.addresses,
2440
+ countries = _ref.countries;
2277
2441
 
2278
2442
  var _useForm = reactHookForm.useForm(),
2279
2443
  control = _useForm.control,
2280
- dirtyFields = _useForm.formState.dirtyFields,
2281
- getValues = _useForm.getValues;
2444
+ watch = _useForm.watch,
2445
+ resetField = _useForm.resetField,
2446
+ handleSubmit = _useForm.handleSubmit;
2282
2447
 
2283
- var _React$useState = React__default.useState(false),
2284
- setAddress = _React$useState[0],
2285
- setSetAddress = _React$useState[1];
2448
+ var _useForm2 = reactHookForm.useForm(),
2449
+ addressControl = _useForm2.control,
2450
+ watchAddress = _useForm2.watch,
2451
+ resetAddress = _useForm2.resetField,
2452
+ handleSubmitAddress = _useForm2.handleSubmit;
2453
+
2454
+ var StoresList = [].concat(stores, [{
2455
+ storeName: 'add Store',
2456
+ id: 99999999
2457
+ }]);
2458
+ var selectedStore = watch('store');
2459
+ var selectedAddress = watchAddress('billingAddress');
2460
+ var addressList = [].concat(addresses, [{
2461
+ name: 'add billing Address',
2462
+ id: 99999999
2463
+ }]);
2286
2464
 
2287
- function Icon() {
2288
- return /*#__PURE__*/React__default.createElement(bi.BiNotepad, {
2289
- className: "icon"
2290
- });
2291
- }
2465
+ var onSubmit = function onSubmit(data) {
2466
+ console.log(data);
2467
+ addStore(data);
2468
+ resetField('store');
2469
+ };
2470
+
2471
+ var addAddress = function addAddress(data) {
2472
+ console.log(data);
2473
+ addStoreAddress(data);
2474
+ resetAddress('billingAddress');
2475
+ };
2292
2476
 
2293
2477
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2294
2478
  text: 'billing information',
2295
- Icon: Icon
2479
+ icon: 2
2296
2480
  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2297
2481
  container: true,
2298
2482
  rowSpacing: 2,
2299
- sx: {
2300
- paddingTop: '1em'
2301
- }
2483
+ columnSpacing: 1
2302
2484
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
2303
2485
  item: true,
2304
2486
  xs: 12,
2305
- md: 10
2487
+ sm: 10
2306
2488
  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2307
2489
  controlls: {
2308
2490
  name: 'store',
2309
2491
  placeholder: 'Please Select your store',
2310
2492
  control: control,
2311
- List: stores,
2493
+ List: StoresList,
2312
2494
  key: 'storeName'
2313
2495
  }
2314
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2496
+ }))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
2497
+ control: control,
2498
+ onSubmit: onSubmit,
2499
+ handleSubmit: handleSubmit
2500
+ }), /*#__PURE__*/React__default.createElement(material.Grid, {
2501
+ container: true
2502
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2315
2503
  item: true,
2316
2504
  xs: 12,
2317
- md: 10
2505
+ sm: 10,
2506
+ sx: {
2507
+ padding: '1em 0'
2508
+ }
2318
2509
  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2319
2510
  controlls: {
2320
2511
  name: 'billingAddress',
2321
2512
  placeholder: 'Select a billing address from your address book ',
2322
- control: control,
2323
- List: addresses,
2513
+ control: addressControl,
2514
+ List: addressList,
2324
2515
  key: 'name'
2325
2516
  }
2326
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2327
- item: true,
2328
- xs: 12
2329
- }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2330
- onClick: function onClick() {
2331
- setSetAddress(false);
2332
- }
2333
- }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
2334
- checked: !setAddress,
2335
- icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
2336
- checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
2337
- }), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2338
- padding: '0 0 1em 0',
2339
- onClick: function onClick() {
2340
- setSetAddress(true);
2341
- }
2342
- }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
2343
- checked: setAddress,
2344
- icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
2345
- checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
2346
- }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address "))), /*#__PURE__*/React__default.createElement(ButtonRow, {
2347
- handleBack: handleBack,
2348
- handleNext: function handleNext() {
2349
- var _Object$keys;
2350
-
2351
- if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 2) {
2352
- console.log(setAddress, getValues());
2353
- setShipping(setAddress);
2354
- setBillingAddress(getValues());
2355
-
2356
- _handleNext();
2357
- }
2358
- },
2359
- nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 2
2517
+ }))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2518
+ control: addressControl,
2519
+ handleSubmit: handleSubmitAddress,
2520
+ onSubmit: addAddress,
2521
+ countries: countries
2360
2522
  })));
2361
2523
  };
2362
2524
 
@@ -2388,57 +2550,22 @@ var Step2 = function Step2(_ref) {
2388
2550
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2389
2551
  text: 'shipping information',
2390
2552
  Icon: Icon
2391
- }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2392
- container: true,
2393
- rowSpacing: 2,
2394
- columnSpacing: 2,
2395
- sx: {
2396
- paddingBottom: '1em'
2397
- }
2398
- }, /*#__PURE__*/React__default.createElement(material.Grid, {
2399
- item: true,
2400
- xs: 12,
2401
- md: 10
2402
- }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2553
+ }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(AddressForm, {
2554
+ countries: countries,
2555
+ control: control
2556
+ }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
2403
2557
  controlls: {
2404
- name: 'fullAddress',
2405
- placeholder: 'Full Address*',
2558
+ name: 'city',
2559
+ placeholder: 'City*',
2406
2560
  control: control
2407
2561
  }
2408
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2409
- item: true,
2410
- xs: 6,
2411
- md: 3.33
2412
- }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2413
- controlls: {
2414
- name: 'zipCode',
2415
- placeholder: 'Zip/Postal Code*',
2416
- control: control,
2417
- type: 'number'
2418
- }
2419
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2420
- item: true,
2421
- xs: 6,
2422
- md: 3.33
2423
- }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2562
+ }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
2424
2563
  controlls: {
2425
2564
  name: 'city',
2426
2565
  placeholder: 'City*',
2427
2566
  control: control
2428
2567
  }
2429
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2430
- item: true,
2431
- xs: 12,
2432
- md: 3.34
2433
- }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2434
- controlls: {
2435
- name: 'country',
2436
- placeholder: 'Country',
2437
- control: control,
2438
- List: countries,
2439
- key: 'name'
2440
- }
2441
- }))), /*#__PURE__*/React__default.createElement(material.Grid, {
2568
+ }), /*#__PURE__*/React__default.createElement(material.Grid, {
2442
2569
  container: true,
2443
2570
  columnSpacing: 0.5,
2444
2571
  rowSpacing: 2,
@@ -2843,7 +2970,7 @@ var Step4 = function Step4(_ref) {
2843
2970
  };
2844
2971
 
2845
2972
  var steps = [{
2846
- text: 'welcome',
2973
+ text: 'Personal Information',
2847
2974
  Icon: function Icon() {
2848
2975
  return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
2849
2976
  className: "icon"
@@ -2887,6 +3014,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2887
3014
  handleLogin = _ref.handleLogin,
2888
3015
  setShipping = _ref.setShipping,
2889
3016
  userName = _ref.userName,
3017
+ addStore = _ref.addStore,
3018
+ addStoreAddress = _ref.addStoreAddress,
2890
3019
  setBillingAddress = _ref.setBillingAddress,
2891
3020
  setShippingAddress = _ref.setShippingAddress,
2892
3021
  setShippingMethod = _ref.setShippingMethod,
@@ -2911,12 +3040,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2911
3040
  }, /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
2912
3041
  var words = item.text.split(' ');
2913
3042
  return /*#__PURE__*/React__default.createElement("div", {
2914
- className: "row"
3043
+ className: currStep > i ? 'row checked' : 'row'
2915
3044
  }, /*#__PURE__*/React__default.createElement("span", {
2916
- className: "icon",
2917
- style: currStep > i ? {
2918
- color: 'rgba(36, 153, 55, 1)'
2919
- } : {}
3045
+ className: "icon"
2920
3046
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
2921
3047
  })), /*#__PURE__*/React__default.createElement(material.Stepper, {
2922
3048
  activeStep: currStep,
@@ -2932,6 +3058,17 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2932
3058
  padding: 0
2933
3059
  },
2934
3060
  icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
3061
+ style: currStep >= index ? {
3062
+ background: '#ff717c',
3063
+ color: 'white',
3064
+ padding: 0
3065
+ } : {
3066
+ background: '#FAE8E5',
3067
+ color: 'inherit',
3068
+ padding: 0
3069
+ }
3070
+ }, /*#__PURE__*/React__default.createElement("div", {
3071
+ className: "circle",
2935
3072
  style: currStep >= index ? {
2936
3073
  background: 'rgba(253, 0, 21, 1)',
2937
3074
  color: 'white',
@@ -2943,13 +3080,14 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2943
3080
  }
2944
3081
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheck, {
2945
3082
  className: "ic"
2946
- }))
3083
+ })))
2947
3084
  }, currStep !== index && /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2948
3085
  text: item.text,
2949
3086
  Icon: item.Icon,
2950
3087
  single: true,
2951
3088
  username: index === 0 ? userName : '',
2952
3089
  closed: true,
3090
+ icon: index + 1,
2953
3091
  handleClick: function handleClick() {
2954
3092
  if (currStep > index) {
2955
3093
  handleBack(index);
@@ -2977,7 +3115,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2977
3115
  setShipping: setShipping,
2978
3116
  setBillingAddress: setBillingAddress,
2979
3117
  stores: userStores,
2980
- addresses: userAddresses
3118
+ addresses: userAddresses,
3119
+ addStore: addStore,
3120
+ countries: countries,
3121
+ addStoreAddress: addStoreAddress
2981
3122
  })), index === 2 && /*#__PURE__*/React__default.createElement(material.StepContent, {
2982
3123
  sx: {
2983
3124
  padding: 0