@salesgenterp/ui-components 0.4.36 → 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 +316 -176
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +319 -179
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1959,15 +1959,15 @@ var CartPageComponent = function CartPageComponent(_ref) {
1959
1959
  };
1960
1960
 
1961
1961
  var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
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\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) {
1963
1963
  return props.maxWidth || '1605px';
1964
1964
  }, function (props) {
1965
1965
  return props.bg || 'rgba(255, 248, 246, 1)';
1966
1966
  });
1967
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"])));
1968
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"])));
1969
- 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"])));
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 .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"])));
1971
1971
 
1972
1972
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
1973
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) {
@@ -2020,10 +2020,10 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2020
2020
  }))));
2021
2021
  };
2022
2022
 
2023
- 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;
2024
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"])));
2025
- 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"])));
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 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) {
2027
2027
  return props.single ? '1.8em 2em' : '1em 0';
2028
2028
  }, function (props) {
2029
2029
  return props.single ? '-1.56em' : '1em';
@@ -2031,10 +2031,14 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
2031
2031
  return props.single ? '-1.56em' : '0';
2032
2032
  }, function (props) {
2033
2033
  return props.single ? '1.5em' : '0';
2034
+ }, function (props) {
2035
+ return props.single ? '0 2em' : '0';
2034
2036
  });
2035
- 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"])));
2036
- 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) {
2037
- 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';
2038
2042
  }, function (props) {
2039
2043
  return props.color || '#FD0015';
2040
2044
  }, function (props) {
@@ -2042,21 +2046,26 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
2042
2046
  }, function (props) {
2043
2047
  return props.disabled ? 'not-allowed' : 'pointer';
2044
2048
  });
2045
- 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) {
2046
2052
  return props.disabled ? 'not-allowed' : 'pointer';
2047
2053
  });
2048
- 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) {
2049
2058
  return props.padding;
2050
2059
  });
2051
- 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"])));
2052
- 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"])));
2053
- 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) {
2054
2063
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2055
2064
  });
2056
- 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) {
2057
2066
  return props.noSmall ? 'none' : '';
2058
2067
  });
2059
- 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"])));
2060
2069
 
2061
2070
  var CheckoutInput = function CheckoutInput(_ref) {
2062
2071
  var controlls = _ref.controlls;
@@ -2123,39 +2132,14 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
2123
2132
  }));
2124
2133
  };
2125
2134
 
2126
- var ButtonRow = function ButtonRow(_ref) {
2127
- var handleBack = _ref.handleBack,
2128
- handleNext = _ref.handleNext,
2129
- backDisabled = _ref.backDisabled,
2130
- nextDisabled = _ref.nextDisabled;
2131
- return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
2132
- disabled: backDisabled
2133
- }, /*#__PURE__*/React__default.createElement("div", {
2134
- className: "back",
2135
- tabIndex: "1",
2136
- onClick: function onClick() {
2137
- if (backDisabled) return;
2138
- handleBack();
2139
- }
2140
- }, /*#__PURE__*/React__default.createElement(bi.BiArrowBack, {
2141
- className: "icon"
2142
- }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
2143
- disabled: nextDisabled,
2144
- tabIndex: "1",
2145
- onClick: function onClick() {
2146
- if (nextDisabled) return;
2147
- handleNext();
2148
- }
2149
- }, "Next"));
2150
- };
2151
-
2152
2135
  var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2153
2136
  var text = _ref.text,
2154
2137
  username = _ref.username,
2155
- Icon = _ref.Icon,
2138
+ icon = _ref.icon,
2156
2139
  single = _ref.single,
2157
2140
  closed = _ref.closed,
2158
2141
  handleClick = _ref.handleClick;
2142
+ console.log("/images/checkout/vector-" + icon + ".svg");
2159
2143
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2160
2144
  single: single
2161
2145
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
@@ -2163,10 +2147,17 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2163
2147
  flexDirection: "row",
2164
2148
  sx: {
2165
2149
  width: '100%'
2166
- }
2150
+ },
2151
+ alignItems: "center"
2167
2152
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
2168
- flexDirection: "row"
2169
- }, 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, {
2170
2161
  className: "dropIcon",
2171
2162
  style: closed ? {
2172
2163
  transform: 'rotate(-90deg)'
@@ -2183,8 +2174,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2183
2174
  var Step0 = function Step0(_ref) {
2184
2175
  var loading = _ref.loading,
2185
2176
  userName = _ref.userName,
2186
- handleBack = _ref.handleBack,
2187
- handleNext = _ref.handleNext,
2188
2177
  handleLogin = _ref.handleLogin;
2189
2178
 
2190
2179
  var _useForm = reactHookForm.useForm(),
@@ -2195,17 +2184,10 @@ var Step0 = function Step0(_ref) {
2195
2184
  handleLogin(data);
2196
2185
  };
2197
2186
 
2198
- function Icon() {
2199
- return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
2200
- className: "icon"
2201
- });
2202
- }
2203
-
2204
2187
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2205
2188
  text: 'welcome',
2206
2189
  username: userName,
2207
- Icon: Icon,
2208
- step: 0
2190
+ icon: 1
2209
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", {
2210
2192
  className: "bold"
2211
2193
  }, /*#__PURE__*/React__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React__default.createElement("span", {
@@ -2220,7 +2202,7 @@ var Step0 = function Step0(_ref) {
2220
2202
  }
2221
2203
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
2222
2204
  item: true,
2223
- sm: 8,
2205
+ sm: 6.5,
2224
2206
  xs: 12
2225
2207
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2226
2208
  controlls: {
@@ -2232,7 +2214,7 @@ var Step0 = function Step0(_ref) {
2232
2214
  }
2233
2215
  })), /*#__PURE__*/React__default.createElement(material.Grid, {
2234
2216
  item: true,
2235
- sm: 8,
2217
+ sm: 6.5,
2236
2218
  xs: 12
2237
2219
  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2238
2220
  controlls: {
@@ -2258,106 +2240,285 @@ var Step0 = function Step0(_ref) {
2258
2240
  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
2259
2241
  color: "inherit",
2260
2242
  size: 15
2261
- }) : 'Login'))), /*#__PURE__*/React__default.createElement(ButtonRow, {
2262
- handleBack: handleBack,
2263
- handleNext: handleNext,
2264
- backDisabled: true,
2265
- nextDisabled: !userName
2266
- })));
2243
+ }) : 'Login')))));
2267
2244
  };
2268
2245
 
2269
- var Step1 = function Step1(_ref) {
2270
- var _Object$keys2;
2271
-
2246
+ var ButtonRow = function ButtonRow(_ref) {
2272
2247
  var handleBack = _ref.handleBack,
2273
- _handleNext = _ref.handleNext,
2274
- setShipping = _ref.setShipping,
2275
- 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,
2276
2438
  stores = _ref.stores,
2277
- addresses = _ref.addresses;
2439
+ addresses = _ref.addresses,
2440
+ countries = _ref.countries;
2278
2441
 
2279
2442
  var _useForm = reactHookForm.useForm(),
2280
2443
  control = _useForm.control,
2281
- dirtyFields = _useForm.formState.dirtyFields,
2282
- getValues = _useForm.getValues;
2444
+ watch = _useForm.watch,
2445
+ resetField = _useForm.resetField,
2446
+ handleSubmit = _useForm.handleSubmit;
2283
2447
 
2284
- var _React$useState = React__default.useState(false),
2285
- setAddress = _React$useState[0],
2286
- 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
+ }]);
2287
2464
 
2288
- function Icon() {
2289
- return /*#__PURE__*/React__default.createElement(bi.BiNotepad, {
2290
- className: "icon"
2291
- });
2292
- }
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
+ };
2293
2476
 
2294
2477
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2295
2478
  text: 'billing information',
2296
- Icon: Icon
2479
+ icon: 2
2297
2480
  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2298
2481
  container: true,
2299
2482
  rowSpacing: 2,
2300
- sx: {
2301
- paddingTop: '1em'
2302
- }
2483
+ columnSpacing: 1
2303
2484
  }, /*#__PURE__*/React__default.createElement(material.Grid, {
2304
2485
  item: true,
2305
2486
  xs: 12,
2306
- md: 10
2487
+ sm: 10
2307
2488
  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2308
2489
  controlls: {
2309
2490
  name: 'store',
2310
2491
  placeholder: 'Please Select your store',
2311
2492
  control: control,
2312
- List: stores,
2493
+ List: StoresList,
2313
2494
  key: 'storeName'
2314
2495
  }
2315
- })), /*#__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, {
2316
2503
  item: true,
2317
2504
  xs: 12,
2318
- md: 10
2505
+ sm: 10,
2506
+ sx: {
2507
+ padding: '1em 0'
2508
+ }
2319
2509
  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2320
2510
  controlls: {
2321
2511
  name: 'billingAddress',
2322
2512
  placeholder: 'Select a billing address from your address book ',
2323
- control: control,
2324
- List: addresses,
2513
+ control: addressControl,
2514
+ List: addressList,
2325
2515
  key: 'name'
2326
2516
  }
2327
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2328
- item: true,
2329
- xs: 12
2330
- }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2331
- onClick: function onClick() {
2332
- setSetAddress(false);
2333
- }
2334
- }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
2335
- checked: !setAddress,
2336
- icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
2337
- checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
2338
- }), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2339
- padding: '0 0 1em 0',
2340
- onClick: function onClick() {
2341
- setSetAddress(true);
2342
- }
2343
- }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
2344
- checked: setAddress,
2345
- icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
2346
- checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
2347
- }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address "))), /*#__PURE__*/React__default.createElement(ButtonRow, {
2348
- handleBack: handleBack,
2349
- handleNext: function handleNext() {
2350
- var _Object$keys;
2351
-
2352
- if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 2) {
2353
- console.log(setAddress, getValues());
2354
- setShipping(setAddress);
2355
- setBillingAddress(getValues());
2356
-
2357
- _handleNext();
2358
- }
2359
- },
2360
- 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
2361
2522
  })));
2362
2523
  };
2363
2524
 
@@ -2389,57 +2550,22 @@ var Step2 = function Step2(_ref) {
2389
2550
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2390
2551
  text: 'shipping information',
2391
2552
  Icon: Icon
2392
- }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2393
- container: true,
2394
- rowSpacing: 2,
2395
- columnSpacing: 2,
2396
- sx: {
2397
- paddingBottom: '1em'
2398
- }
2399
- }, /*#__PURE__*/React__default.createElement(material.Grid, {
2400
- item: true,
2401
- xs: 12,
2402
- md: 10
2403
- }, /*#__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, {
2404
2557
  controlls: {
2405
- name: 'fullAddress',
2406
- placeholder: 'Full Address*',
2558
+ name: 'city',
2559
+ placeholder: 'City*',
2407
2560
  control: control
2408
2561
  }
2409
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2410
- item: true,
2411
- xs: 6,
2412
- md: 3.33
2413
- }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2414
- controlls: {
2415
- name: 'zipCode',
2416
- placeholder: 'Zip/Postal Code*',
2417
- control: control,
2418
- type: 'number'
2419
- }
2420
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2421
- item: true,
2422
- xs: 6,
2423
- md: 3.33
2424
- }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
2562
+ }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
2425
2563
  controlls: {
2426
2564
  name: 'city',
2427
2565
  placeholder: 'City*',
2428
2566
  control: control
2429
2567
  }
2430
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2431
- item: true,
2432
- xs: 12,
2433
- md: 3.34
2434
- }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2435
- controlls: {
2436
- name: 'country',
2437
- placeholder: 'Country',
2438
- control: control,
2439
- List: countries,
2440
- key: 'name'
2441
- }
2442
- }))), /*#__PURE__*/React__default.createElement(material.Grid, {
2568
+ }), /*#__PURE__*/React__default.createElement(material.Grid, {
2443
2569
  container: true,
2444
2570
  columnSpacing: 0.5,
2445
2571
  rowSpacing: 2,
@@ -2844,7 +2970,7 @@ var Step4 = function Step4(_ref) {
2844
2970
  };
2845
2971
 
2846
2972
  var steps = [{
2847
- text: 'welcome',
2973
+ text: 'Personal Information',
2848
2974
  Icon: function Icon() {
2849
2975
  return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
2850
2976
  className: "icon"
@@ -2888,6 +3014,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2888
3014
  handleLogin = _ref.handleLogin,
2889
3015
  setShipping = _ref.setShipping,
2890
3016
  userName = _ref.userName,
3017
+ addStore = _ref.addStore,
3018
+ addStoreAddress = _ref.addStoreAddress,
2891
3019
  setBillingAddress = _ref.setBillingAddress,
2892
3020
  setShippingAddress = _ref.setShippingAddress,
2893
3021
  setShippingMethod = _ref.setShippingMethod,
@@ -2912,12 +3040,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2912
3040
  }, /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
2913
3041
  var words = item.text.split(' ');
2914
3042
  return /*#__PURE__*/React__default.createElement("div", {
2915
- className: "row"
3043
+ className: currStep > i ? 'row checked' : 'row'
2916
3044
  }, /*#__PURE__*/React__default.createElement("span", {
2917
- className: "icon",
2918
- style: currStep > i ? {
2919
- color: 'rgba(36, 153, 55, 1)'
2920
- } : {}
3045
+ className: "icon"
2921
3046
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
2922
3047
  })), /*#__PURE__*/React__default.createElement(material.Stepper, {
2923
3048
  activeStep: currStep,
@@ -2933,6 +3058,17 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2933
3058
  padding: 0
2934
3059
  },
2935
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",
2936
3072
  style: currStep >= index ? {
2937
3073
  background: 'rgba(253, 0, 21, 1)',
2938
3074
  color: 'white',
@@ -2944,13 +3080,14 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2944
3080
  }
2945
3081
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheck, {
2946
3082
  className: "ic"
2947
- }))
3083
+ })))
2948
3084
  }, currStep !== index && /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2949
3085
  text: item.text,
2950
3086
  Icon: item.Icon,
2951
3087
  single: true,
2952
3088
  username: index === 0 ? userName : '',
2953
3089
  closed: true,
3090
+ icon: index + 1,
2954
3091
  handleClick: function handleClick() {
2955
3092
  if (currStep > index) {
2956
3093
  handleBack(index);
@@ -2978,7 +3115,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
2978
3115
  setShipping: setShipping,
2979
3116
  setBillingAddress: setBillingAddress,
2980
3117
  stores: userStores,
2981
- addresses: userAddresses
3118
+ addresses: userAddresses,
3119
+ addStore: addStore,
3120
+ countries: countries,
3121
+ addStoreAddress: addStoreAddress
2982
3122
  })), index === 2 && /*#__PURE__*/React__default.createElement(material.StepContent, {
2983
3123
  sx: {
2984
3124
  padding: 0