@salesgenterp/ui-components 0.4.44 → 0.4.49

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.
@@ -1,4 +1,4 @@
1
- import { Stack, Tooltip, TableCell, TableContainer, TableRow, Checkbox, Grid, TextField, InputAdornment, MenuItem, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent } from '@mui/material';
1
+ import { Stack, Tooltip, TableCell, TableContainer, TableRow, Checkbox, Grid, TextField, InputAdornment, NativeSelect, CircularProgress, Table as Table$1, TableBody as TableBody$1, Stepper, Step, StepLabel, StepContent } from '@mui/material';
2
2
  import React__default, { useState, useEffect, createElement } from 'react';
3
3
  import { GrClose, GrRadialSelected } from 'react-icons/gr';
4
4
  import 'react-icons/gi';
@@ -1955,46 +1955,35 @@ var CartPageComponent = function CartPageComponent(_ref) {
1955
1955
  })));
1956
1956
  };
1957
1957
 
1958
- var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5;
1959
- 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: 2.375em 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 background: #fff8f6;\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) {
1958
+ var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3;
1959
+ 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: 2.375em 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: #fff8f6;\n background: gainsboro;\n border-radius: 28px;\n @media only screen and (max-width: 1508px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 1em 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
1960
1960
  return props.maxWidth || '1605px';
1961
1961
  }, function (props) {
1962
1962
  return props.bg || 'rgba(255, 248, 246, 1)';
1963
1963
  });
1964
1964
  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"])));
1965
- 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: 65vh;\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 width: 92vw;\n min-width: 90vw;\n }\n /* overflow: hidden; */\n"])));
1966
- var CheckoutHeading = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.3em;\n font-weight: 600;\n text-transform: capitalize;\n }\n p {\n font-size: 0.875em;\n font-weight: 300;\n margin-top: 0.5em;\n }\n @media only screen and (max-width: 788px) {\n margin-left: 0;\n }\n"])));
1967
- var CheckoutHeader = styled(Row)(_templateObject5$5 || (_templateObject5$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.18em;\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.4%;\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 }\n .checked {\n p,\n span {\n color: #323232;\n }\n .icon {\n color: #249937;\n }\n }\n @media only screen and (max-width: 1646px) {\n margin-right: 1em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n margin-right: -0.2em;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1968
- var CheckoutStepIcon = styled.div(_templateObject6$5 || (_templateObject6$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 margin-left: 2px;\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"])));
1965
+ var CheckoutMainWithHeader = styled(Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
1966
+ var CheckoutMain = styled.div(_templateObject4$5 || (_templateObject4$5 = _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: 65vh;\n padding-right: 2em;\n overflow-y: auto;\n position: relative;\n padding-top: 2em;\n padding-bottom: 3em;\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 width: 98vw;\n min-width: 90vw;\n padding-top: 1em;\n }\n /* overflow: hidden; */\n"])));
1967
+ var CheckoutHeading = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.3em;\n font-weight: 600;\n text-transform: capitalize;\n }\n p {\n font-size: 0.875em;\n font-weight: 300;\n margin-top: 0.5em;\n }\n @media only screen and (max-width: 788px) {\n margin-left: 0;\n padding-left: 1em;\n }\n"])));
1968
+ var CheckoutHeader = styled(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n justify-content: flex-start;\n min-height: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\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.4%;\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 }\n .checked {\n p,\n span {\n color: #323232;\n }\n .icon {\n color: #249937;\n }\n }\n @media only screen and (max-width: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 1em;\n margin: 1.4em 0;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1969
+ var CheckoutStepIcon = styled.div(_templateObject7$3 || (_templateObject7$3 = _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 margin-left: 2px;\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"])));
1969
1970
 
1970
1971
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
1971
- 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) {
1972
+ 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 margin-top: 6.15em;\n @media only screen and (max-width: 1508px) {\n margin-top: 0;\n }\n"])), function (props) {
1972
1973
  return props.bg || 'rgba(255, 240, 236, 1)';
1973
1974
  });
1974
- var TextRow = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 90%;\n margin-bottom: 1em;\n padding-bottom: 1em;\n width: 90%;\n border-bottom: 1px solid rgba(250, 232, 229, 1);\n .text {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n }\n .total {\n font-size: 1.65em;\n font-weight: 800;\n }\n"])));
1975
- var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 50%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: .8em;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
1975
+ var TextRow = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 90%;\n margin-bottom: 1em;\n padding-bottom: 1em;\n width: 90%;\n border-bottom: 1px solid rgba(250, 232, 229, 1);\n .text {\n font-size: 1.1em;\n font-weight: 300;\n text-transform: capitalize;\n }\n .total {\n font-size: 1.65em;\n font-weight: 800;\n }\n"])));
1976
+ var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 50%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: 0.8em;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
1976
1977
 
1977
1978
  var CheckoutSummary = function CheckoutSummary(_ref) {
1978
- var _src;
1979
-
1980
1979
  var total = _ref.total,
1981
1980
  billingInformation = _ref.billingInformation,
1982
1981
  shippingInformation = _ref.shippingInformation,
1983
- paymentMethod = _ref.paymentMethod;
1984
- var src = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name;
1985
- var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
1986
-
1987
- if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
1988
- if (src !== 'masterCard') {
1989
- src = 'visa';
1990
- }
1991
- } else if (!Images.includes(src)) {
1992
- src = 'none';
1993
- }
1994
-
1982
+ paymentMethod = _ref.paymentMethod,
1983
+ shippingMethod = _ref.shippingMethod;
1995
1984
  return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
1996
1985
  className: "text"
1997
- }, "order total:"), /*#__PURE__*/React__default.createElement("h6", {
1986
+ }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
1998
1987
  className: "total"
1999
1988
  }, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2000
1989
  className: "heading"
@@ -2010,18 +1999,19 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2010
1999
  className: "blank bold"
2011
2000
  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2012
2001
  className: "heading"
2013
- }, "Payment Method"), /*#__PURE__*/React__default.createElement("div", {
2014
- className: "payment"
2015
- }, paymentMethod && /*#__PURE__*/React__default.createElement("img", {
2016
- src: "/images/" + src + ".png",
2017
- alt: "payment"
2018
- }))));
2002
+ }, "Shipping Method"), /*#__PURE__*/React__default.createElement("p", {
2003
+ className: "bold"
2004
+ }, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name)), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2005
+ className: "heading"
2006
+ }, "Payment Method"), /*#__PURE__*/React__default.createElement("p", {
2007
+ className: "bold"
2008
+ }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
2019
2009
  };
2020
2010
 
2021
- var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2022
- 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: 98%;\n margin-left: 0.4em;\n }\n"])));
2011
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2012
+ 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"])));
2023
2013
  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"])));
2024
- 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 }\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: 1em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
2014
+ 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) {
2025
2015
  return props.single ? '1.8em 2em' : '1em 0';
2026
2016
  }, function (props) {
2027
2017
  return props.single ? '-1.56em' : '1em';
@@ -2031,8 +2021,10 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
2031
2021
  return props.single ? '1.45em' : '0';
2032
2022
  }, function (props) {
2033
2023
  return props.single ? '0 2em' : '0';
2024
+ }, function (props) {
2025
+ return props.username ? 'not-allowed' : 'pointer';
2034
2026
  });
2035
- var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !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"])));
2027
+ var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !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"])));
2036
2028
  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) {
2037
2029
  return props.width || '8.05em';
2038
2030
  }, function (props) {
@@ -2049,7 +2041,7 @@ var SaveButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _tagg
2049
2041
  }, function (props) {
2050
2042
  return props.disabled ? 'not-allowed' : 'pointer';
2051
2043
  });
2052
- 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 button {\n width: 4.562em;\n height: 1.56em;\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 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) {
2044
+ 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) {
2053
2045
  return props.disabledNext ? 'not-allowed' : 'pointer';
2054
2046
  }, function (props) {
2055
2047
  return props.disabledBack ? 'not-allowed' : 'pointer';
@@ -2057,16 +2049,18 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
2057
2049
  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 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 @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 }\n"])), function (props) {
2058
2050
  return props.padding;
2059
2051
  });
2060
- 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: 705px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\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: 700;\n font-size: 0.95em;\n }\n"])), function (props) {
2052
+ 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) {
2061
2053
  return props.hovered ? '#fff0ec' : '';
2062
2054
  }, function (props) {
2063
2055
  return props.hovered ? '1px solid #fce1d9' : '';
2064
2056
  }, function (props) {
2065
2057
  return props.hovered ? '5px' : '0';
2058
+ }, function (props) {
2059
+ return props.hovered ? '800' : '700';
2066
2060
  });
2067
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"])));
2068
2062
  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"])));
2069
- 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 @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) {
2063
+ 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) {
2070
2064
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2071
2065
  });
2072
2066
  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) {
@@ -2089,7 +2083,6 @@ var CheckoutInput = function CheckoutInput(_ref) {
2089
2083
  placeholder: placeholder,
2090
2084
  variant: "outlined",
2091
2085
  required: true,
2092
- size: "small",
2093
2086
  InputProps: showIcon ? {
2094
2087
  startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
2095
2088
  position: "start"
@@ -2105,36 +2098,30 @@ var CheckoutInput = function CheckoutInput(_ref) {
2105
2098
  };
2106
2099
  var CheckoutSelect = function CheckoutSelect(_ref3) {
2107
2100
  var controlls = _ref3.controlls;
2108
- var key = controlls.key,
2109
- List = controlls.List,
2110
- name = controlls.name,
2111
- placeholder = controlls.placeholder,
2101
+ var name = controlls.name,
2112
2102
  control = controlls.control,
2113
- _controlls$val = controlls.val,
2114
- val = _controlls$val === void 0 ? 'id' : _controlls$val,
2115
- _controlls$autoFocus2 = controlls.autoFocus,
2116
- autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2;
2117
- return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
2118
- select: true
2119
- }, /*#__PURE__*/React__default.createElement(Controller, {
2103
+ defaultValue = controlls.defaultValue;
2104
+ return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, console.log(defaultValue), /*#__PURE__*/React__default.createElement(Controller, {
2120
2105
  control: control,
2121
2106
  name: name,
2122
2107
  defaultValue: "",
2123
2108
  render: function render(_ref4) {
2124
- var field = _ref4.field;
2125
- return /*#__PURE__*/React__default.createElement(TextField, _extends({
2126
- fullWidth: true,
2127
- label: placeholder,
2128
- select: true,
2129
- required: true,
2130
- size: "small",
2131
- autoFocus: autoFocus
2132
- }, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
2133
- return /*#__PURE__*/React__default.createElement(MenuItem, {
2134
- key: i,
2135
- value: item[val]
2136
- }, item[key]);
2137
- })));
2109
+ return (
2110
+ /*#__PURE__*/
2111
+ React__default.createElement(NativeSelect, {
2112
+ defaultValue: 30,
2113
+ inputProps: {
2114
+ name: 'age',
2115
+ id: 'uncontrolled-native'
2116
+ }
2117
+ }, /*#__PURE__*/React__default.createElement("option", {
2118
+ value: 10
2119
+ }, "Ten"), /*#__PURE__*/React__default.createElement("option", {
2120
+ value: 20
2121
+ }, "Twenty"), /*#__PURE__*/React__default.createElement("option", {
2122
+ value: 30
2123
+ }, "Thirty"))
2124
+ );
2138
2125
  }
2139
2126
  }));
2140
2127
  };
@@ -2147,9 +2134,14 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2147
2134
  closed = _ref.closed,
2148
2135
  handleClick = _ref.handleClick,
2149
2136
  withoutIcon = _ref.withoutIcon;
2150
- console.log("/images/checkout/vector-" + icon + ".svg");
2151
2137
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2152
- single: single
2138
+ single: single,
2139
+ username: username,
2140
+ onClick: function onClick() {
2141
+ if (!handleClick) return;
2142
+ if (username) return;
2143
+ handleClick();
2144
+ }
2153
2145
  }, /*#__PURE__*/React__default.createElement(Stack, {
2154
2146
  justifyContent: 'space-between',
2155
2147
  flexDirection: "row",
@@ -2173,10 +2165,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2173
2165
  transform: 'rotate(-90deg)'
2174
2166
  } : {
2175
2167
  transform: 'rotate(0deg)'
2176
- },
2177
- onClick: function onClick() {
2178
- if (!handleClick) return;
2179
- handleClick();
2180
2168
  }
2181
2169
  })));
2182
2170
  };
@@ -2449,14 +2437,14 @@ var AddressForm = function AddressForm(_ref) {
2449
2437
  };
2450
2438
 
2451
2439
  var Step1 = function Step1(_ref) {
2452
- var handleBack = _ref.handleBack,
2453
- handleNext = _ref.handleNext,
2440
+ var _stores$;
2441
+
2442
+ var handleNext = _ref.handleNext,
2454
2443
  setShipping = _ref.setShipping,
2455
2444
  setBilling = _ref.setBilling,
2456
2445
  addStore = _ref.addStore,
2457
2446
  addStoreAddress = _ref.addStoreAddress,
2458
2447
  stores = _ref.stores,
2459
- addresses = _ref.addresses,
2460
2448
  countries = _ref.countries;
2461
2449
 
2462
2450
  var _useForm = useForm(),
@@ -2481,19 +2469,24 @@ var Step1 = function Step1(_ref) {
2481
2469
  }]);
2482
2470
  var selectedStore = watch('store');
2483
2471
  var selectedAddress = watchAddress('billingAddress');
2484
- var addressList = [].concat(addresses, [{
2485
- name: 'add billing Address',
2486
- id: 99999999
2487
- }]);
2472
+ var selectedStoreAddreses = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
2473
+ return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
2474
+ });
2475
+ var addressList = [];
2476
+
2477
+ if (selectedStoreAddreses !== null && selectedStoreAddreses !== void 0 && selectedStoreAddreses.customerStoreAddressList) {
2478
+ addressList = [].concat(selectedStoreAddreses === null || selectedStoreAddreses === void 0 ? void 0 : selectedStoreAddreses.customerStoreAddressList, [{
2479
+ name: 'add billing Address',
2480
+ id: 99999999
2481
+ }]);
2482
+ }
2488
2483
 
2489
2484
  var onSubmit = function onSubmit(data) {
2490
- console.log(data);
2491
2485
  addStore(data);
2492
2486
  resetField('store');
2493
2487
  };
2494
2488
 
2495
2489
  var addAddress = function addAddress(data) {
2496
- console.log(data);
2497
2490
  addStoreAddress(data);
2498
2491
  resetAddress('billingAddress');
2499
2492
  };
@@ -2504,6 +2497,7 @@ var Step1 = function Step1(_ref) {
2504
2497
  }, {
2505
2498
  billingAddress: selectedAddress
2506
2499
  });
2500
+ console.log(setShipping);
2507
2501
  setShipping(address);
2508
2502
  handleNext();
2509
2503
  };
@@ -2546,7 +2540,8 @@ var Step1 = function Step1(_ref) {
2546
2540
  placeholder: 'Select a billing address from your address book ',
2547
2541
  control: addressControl,
2548
2542
  List: addressList,
2549
- key: 'name'
2543
+ key: 'name',
2544
+ defaultValue: stores && ((_stores$ = stores[0]) === null || _stores$ === void 0 ? void 0 : _stores$.id)
2550
2545
  }
2551
2546
  }))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2552
2547
  control: addressControl,
@@ -2558,23 +2553,23 @@ var Step1 = function Step1(_ref) {
2558
2553
  xs: 12
2559
2554
  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2560
2555
  onClick: function onClick() {
2561
- setAddress(false);
2556
+ setAddress(true);
2562
2557
  }
2563
2558
  }, /*#__PURE__*/React__default.createElement(Checkbox, {
2564
- checked: !address,
2559
+ checked: address,
2565
2560
  icon: /*#__PURE__*/React__default.createElement(MdOutlineCircle, null),
2566
2561
  checkedIcon: /*#__PURE__*/React__default.createElement(GrRadialSelected, null)
2567
2562
  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
2568
2563
  padding: '0 0 1em 0',
2569
2564
  onClick: function onClick() {
2570
- setAddress(true);
2565
+ setAddress(false);
2571
2566
  }
2572
2567
  }, /*#__PURE__*/React__default.createElement(Checkbox, {
2573
- checked: address,
2568
+ checked: !address,
2574
2569
  icon: /*#__PURE__*/React__default.createElement(MdOutlineCircle, null),
2575
2570
  checkedIcon: /*#__PURE__*/React__default.createElement(GrRadialSelected, null)
2576
2571
  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow, {
2577
- handleBack: handleBack,
2572
+ backDisabled: true,
2578
2573
  handleNext: function handleNext() {
2579
2574
  next();
2580
2575
  },
@@ -2894,7 +2889,7 @@ var Step4 = function Step4(_ref) {
2894
2889
  align: "center"
2895
2890
  }, /*#__PURE__*/React__default.createElement("p", {
2896
2891
  className: "price max"
2897
- }, (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
2892
+ }, "$", (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
2898
2893
  }), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
2899
2894
  colSpan: 1,
2900
2895
  noSmall: true
@@ -2945,14 +2940,14 @@ var Step4 = function Step4(_ref) {
2945
2940
  },
2946
2941
  colSpan: 1
2947
2942
  }, /*#__PURE__*/React__default.createElement("p", {
2948
- className: "max sm price red"
2943
+ className: "max sm bolder red"
2949
2944
  }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
2950
2945
  sx: {
2951
2946
  paddingTop: '1em'
2952
2947
  },
2953
2948
  align: "right"
2954
2949
  }, /*#__PURE__*/React__default.createElement("p", {
2955
- className: "max sm total price red"
2950
+ className: "max sm total bolder red"
2956
2951
  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat + deliveryCharges).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
2957
2952
  container: true,
2958
2953
  columnSpacing: 0,
@@ -3080,9 +3075,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3080
3075
  addStore = _ref.addStore,
3081
3076
  addStoreAddress = _ref.addStoreAddress,
3082
3077
  setBilling = _ref.setBilling,
3078
+ setShowShipping = _ref.setShowShipping,
3079
+ userStores = _ref.userStores,
3083
3080
  addShipping = _ref.addShipping,
3084
3081
  showShipping = _ref.showShipping,
3085
- setShowShipping = _ref.setShowShipping,
3086
3082
  deliveryOptions = _ref.deliveryOptions,
3087
3083
  countries = _ref.countries,
3088
3084
  setPaymentDetails = _ref.setPaymentDetails,
@@ -3092,7 +3088,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3092
3088
  shippingAddress = _ref.shippingAddress,
3093
3089
  billingAddress = _ref.billingAddress,
3094
3090
  selectedPaymentMethod = _ref.selectedPaymentMethod,
3095
- userStores = _ref.userStores,
3096
3091
  userAddresses = _ref.userAddresses,
3097
3092
  clickRedirect = _ref.clickRedirect,
3098
3093
  ordering = _ref.ordering,
@@ -3103,14 +3098,17 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3103
3098
  }, /*#__PURE__*/React__default.createElement(Stack, {
3104
3099
  flexDirection: "column",
3105
3100
  alignItems: "flex-start"
3106
- }, /*#__PURE__*/React__default.createElement(CheckoutHeading, null, /*#__PURE__*/React__default.createElement("h5", null, "payment Details"), /*#__PURE__*/React__default.createElement("p", null, "Complete your purchase by providing your payment details")), /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
3101
+ }, /*#__PURE__*/React__default.createElement(CheckoutHeading, null, /*#__PURE__*/React__default.createElement("h5", null, "payment Details"), /*#__PURE__*/React__default.createElement("p", null, "Complete your purchase by providing your payment details")), /*#__PURE__*/React__default.createElement(CheckoutMainWithHeader, {
3102
+ flexDirection: "column",
3103
+ alignItems: "flex-end"
3104
+ }, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
3107
3105
  var words = item.text.split(' ');
3108
3106
  return /*#__PURE__*/React__default.createElement("div", {
3109
3107
  className: currStep > i ? 'row checked' : 'row'
3110
3108
  }, /*#__PURE__*/React__default.createElement("span", {
3111
3109
  className: "icon"
3112
3110
  }, /*#__PURE__*/React__default.createElement(AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
3113
- })), /*#__PURE__*/React__default.createElement(Stepper, {
3111
+ })), /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(Stepper, {
3114
3112
  activeStep: currStep,
3115
3113
  orientation: "vertical",
3116
3114
  sx: {
@@ -3226,7 +3224,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3226
3224
  ordering: loading,
3227
3225
  placeOrder: placeOrder
3228
3226
  })));
3229
- })))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
3227
+ }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
3230
3228
  billingInformation: billingAddress,
3231
3229
  shippingInformation: shippingAddress,
3232
3230
  paymentMethod: selectedPaymentMethod,