@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.
- package/dist/index.js +90 -92
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +91 -93
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1958,46 +1958,35 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1958
1958
|
})));
|
|
1959
1959
|
};
|
|
1960
1960
|
|
|
1961
|
-
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$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 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
|
|
1961
|
+
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3;
|
|
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: 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) {
|
|
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
|
-
var
|
|
1969
|
-
var
|
|
1970
|
-
var
|
|
1971
|
-
var
|
|
1968
|
+
var CheckoutMainWithHeader = styled(material.Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
|
|
1969
|
+
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"])));
|
|
1970
|
+
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"])));
|
|
1971
|
+
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"])));
|
|
1972
|
+
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"])));
|
|
1972
1973
|
|
|
1973
1974
|
var _templateObject$7, _templateObject2$7, _templateObject3$7;
|
|
1974
|
-
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) {
|
|
1975
|
+
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) {
|
|
1975
1976
|
return props.bg || 'rgba(255, 240, 236, 1)';
|
|
1976
1977
|
});
|
|
1977
|
-
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:
|
|
1978
|
-
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"])));
|
|
1978
|
+
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"])));
|
|
1979
|
+
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"])));
|
|
1979
1980
|
|
|
1980
1981
|
var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
1981
|
-
var _src;
|
|
1982
|
-
|
|
1983
1982
|
var total = _ref.total,
|
|
1984
1983
|
billingInformation = _ref.billingInformation,
|
|
1985
1984
|
shippingInformation = _ref.shippingInformation,
|
|
1986
|
-
paymentMethod = _ref.paymentMethod
|
|
1987
|
-
|
|
1988
|
-
var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
|
|
1989
|
-
|
|
1990
|
-
if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
|
|
1991
|
-
if (src !== 'masterCard') {
|
|
1992
|
-
src = 'visa';
|
|
1993
|
-
}
|
|
1994
|
-
} else if (!Images.includes(src)) {
|
|
1995
|
-
src = 'none';
|
|
1996
|
-
}
|
|
1997
|
-
|
|
1985
|
+
paymentMethod = _ref.paymentMethod,
|
|
1986
|
+
shippingMethod = _ref.shippingMethod;
|
|
1998
1987
|
return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
|
|
1999
1988
|
className: "text"
|
|
2000
|
-
}, "order total:"), /*#__PURE__*/React__default.createElement("h6", {
|
|
1989
|
+
}, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
|
|
2001
1990
|
className: "total"
|
|
2002
1991
|
}, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
|
|
2003
1992
|
className: "heading"
|
|
@@ -2013,18 +2002,19 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2013
2002
|
className: "blank bold"
|
|
2014
2003
|
}, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
|
|
2015
2004
|
className: "heading"
|
|
2016
|
-
}, "
|
|
2017
|
-
className: "
|
|
2018
|
-
},
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2005
|
+
}, "Shipping Method"), /*#__PURE__*/React__default.createElement("p", {
|
|
2006
|
+
className: "bold"
|
|
2007
|
+
}, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name)), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
|
|
2008
|
+
className: "heading"
|
|
2009
|
+
}, "Payment Method"), /*#__PURE__*/React__default.createElement("p", {
|
|
2010
|
+
className: "bold"
|
|
2011
|
+
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
|
|
2022
2012
|
};
|
|
2023
2013
|
|
|
2024
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$
|
|
2025
|
-
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:
|
|
2014
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
2015
|
+
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"])));
|
|
2026
2016
|
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"])));
|
|
2027
|
-
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:
|
|
2017
|
+
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) {
|
|
2028
2018
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2029
2019
|
}, function (props) {
|
|
2030
2020
|
return props.single ? '-1.56em' : '1em';
|
|
@@ -2034,8 +2024,10 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
|
|
|
2034
2024
|
return props.single ? '1.45em' : '0';
|
|
2035
2025
|
}, function (props) {
|
|
2036
2026
|
return props.single ? '0 2em' : '0';
|
|
2027
|
+
}, function (props) {
|
|
2028
|
+
return props.username ? 'not-allowed' : 'pointer';
|
|
2037
2029
|
});
|
|
2038
|
-
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n height: 24px
|
|
2030
|
+
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"])));
|
|
2039
2031
|
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) {
|
|
2040
2032
|
return props.width || '8.05em';
|
|
2041
2033
|
}, function (props) {
|
|
@@ -2052,7 +2044,7 @@ var SaveButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _tagg
|
|
|
2052
2044
|
}, function (props) {
|
|
2053
2045
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2054
2046
|
});
|
|
2055
|
-
var ButtonRowContainer = styled.div(_templateObject7$
|
|
2047
|
+
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) {
|
|
2056
2048
|
return props.disabledNext ? 'not-allowed' : 'pointer';
|
|
2057
2049
|
}, function (props) {
|
|
2058
2050
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
@@ -2060,16 +2052,18 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
|
|
|
2060
2052
|
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) {
|
|
2061
2053
|
return props.padding;
|
|
2062
2054
|
});
|
|
2063
|
-
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:
|
|
2055
|
+
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) {
|
|
2064
2056
|
return props.hovered ? '#fff0ec' : '';
|
|
2065
2057
|
}, function (props) {
|
|
2066
2058
|
return props.hovered ? '1px solid #fce1d9' : '';
|
|
2067
2059
|
}, function (props) {
|
|
2068
2060
|
return props.hovered ? '5px' : '0';
|
|
2061
|
+
}, function (props) {
|
|
2062
|
+
return props.hovered ? '800' : '700';
|
|
2069
2063
|
});
|
|
2070
2064
|
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"])));
|
|
2071
2065
|
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"])));
|
|
2072
|
-
var StyledTableRow = styled(material.TableRow)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 600;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size:
|
|
2066
|
+
var StyledTableRow = styled(material.TableRow)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 600;\n }\n .sm {\n font-weight: 600;\n }\n .bolder {\n font-weight: 800;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
|
|
2073
2067
|
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2074
2068
|
});
|
|
2075
2069
|
var StyledTableCell = styled(material.TableCell)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n font-size: 1em;\n .noAboveSm {\n display: none;\n }\n @media only screen and (max-width: 748px) {\n display: ", ";\n padding: 0.5em 0.3em;\n .noAboveSm {\n display: inline-block;\n margin-right: 6px;\n }\n }\n }\n"])), function (props) {
|
|
@@ -2092,7 +2086,6 @@ var CheckoutInput = function CheckoutInput(_ref) {
|
|
|
2092
2086
|
placeholder: placeholder,
|
|
2093
2087
|
variant: "outlined",
|
|
2094
2088
|
required: true,
|
|
2095
|
-
size: "small",
|
|
2096
2089
|
InputProps: showIcon ? {
|
|
2097
2090
|
startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
|
|
2098
2091
|
position: "start"
|
|
@@ -2108,36 +2101,30 @@ var CheckoutInput = function CheckoutInput(_ref) {
|
|
|
2108
2101
|
};
|
|
2109
2102
|
var CheckoutSelect = function CheckoutSelect(_ref3) {
|
|
2110
2103
|
var controlls = _ref3.controlls;
|
|
2111
|
-
var
|
|
2112
|
-
List = controlls.List,
|
|
2113
|
-
name = controlls.name,
|
|
2114
|
-
placeholder = controlls.placeholder,
|
|
2104
|
+
var name = controlls.name,
|
|
2115
2105
|
control = controlls.control,
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
_controlls$autoFocus2 = controlls.autoFocus,
|
|
2119
|
-
autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2;
|
|
2120
|
-
return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
|
|
2121
|
-
select: true
|
|
2122
|
-
}, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
|
|
2106
|
+
defaultValue = controlls.defaultValue;
|
|
2107
|
+
return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, console.log(defaultValue), /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
|
|
2123
2108
|
control: control,
|
|
2124
2109
|
name: name,
|
|
2125
2110
|
defaultValue: "",
|
|
2126
2111
|
render: function render(_ref4) {
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
value:
|
|
2139
|
-
},
|
|
2140
|
-
|
|
2112
|
+
return (
|
|
2113
|
+
/*#__PURE__*/
|
|
2114
|
+
React__default.createElement(material.NativeSelect, {
|
|
2115
|
+
defaultValue: 30,
|
|
2116
|
+
inputProps: {
|
|
2117
|
+
name: 'age',
|
|
2118
|
+
id: 'uncontrolled-native'
|
|
2119
|
+
}
|
|
2120
|
+
}, /*#__PURE__*/React__default.createElement("option", {
|
|
2121
|
+
value: 10
|
|
2122
|
+
}, "Ten"), /*#__PURE__*/React__default.createElement("option", {
|
|
2123
|
+
value: 20
|
|
2124
|
+
}, "Twenty"), /*#__PURE__*/React__default.createElement("option", {
|
|
2125
|
+
value: 30
|
|
2126
|
+
}, "Thirty"))
|
|
2127
|
+
);
|
|
2141
2128
|
}
|
|
2142
2129
|
}));
|
|
2143
2130
|
};
|
|
@@ -2150,9 +2137,14 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2150
2137
|
closed = _ref.closed,
|
|
2151
2138
|
handleClick = _ref.handleClick,
|
|
2152
2139
|
withoutIcon = _ref.withoutIcon;
|
|
2153
|
-
console.log("/images/checkout/vector-" + icon + ".svg");
|
|
2154
2140
|
return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
|
|
2155
|
-
single: single
|
|
2141
|
+
single: single,
|
|
2142
|
+
username: username,
|
|
2143
|
+
onClick: function onClick() {
|
|
2144
|
+
if (!handleClick) return;
|
|
2145
|
+
if (username) return;
|
|
2146
|
+
handleClick();
|
|
2147
|
+
}
|
|
2156
2148
|
}, /*#__PURE__*/React__default.createElement(material.Stack, {
|
|
2157
2149
|
justifyContent: 'space-between',
|
|
2158
2150
|
flexDirection: "row",
|
|
@@ -2176,10 +2168,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2176
2168
|
transform: 'rotate(-90deg)'
|
|
2177
2169
|
} : {
|
|
2178
2170
|
transform: 'rotate(0deg)'
|
|
2179
|
-
},
|
|
2180
|
-
onClick: function onClick() {
|
|
2181
|
-
if (!handleClick) return;
|
|
2182
|
-
handleClick();
|
|
2183
2171
|
}
|
|
2184
2172
|
})));
|
|
2185
2173
|
};
|
|
@@ -2452,14 +2440,14 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2452
2440
|
};
|
|
2453
2441
|
|
|
2454
2442
|
var Step1 = function Step1(_ref) {
|
|
2455
|
-
var
|
|
2456
|
-
|
|
2443
|
+
var _stores$;
|
|
2444
|
+
|
|
2445
|
+
var handleNext = _ref.handleNext,
|
|
2457
2446
|
setShipping = _ref.setShipping,
|
|
2458
2447
|
setBilling = _ref.setBilling,
|
|
2459
2448
|
addStore = _ref.addStore,
|
|
2460
2449
|
addStoreAddress = _ref.addStoreAddress,
|
|
2461
2450
|
stores = _ref.stores,
|
|
2462
|
-
addresses = _ref.addresses,
|
|
2463
2451
|
countries = _ref.countries;
|
|
2464
2452
|
|
|
2465
2453
|
var _useForm = reactHookForm.useForm(),
|
|
@@ -2484,19 +2472,24 @@ var Step1 = function Step1(_ref) {
|
|
|
2484
2472
|
}]);
|
|
2485
2473
|
var selectedStore = watch('store');
|
|
2486
2474
|
var selectedAddress = watchAddress('billingAddress');
|
|
2487
|
-
var
|
|
2488
|
-
|
|
2489
|
-
|
|
2490
|
-
|
|
2475
|
+
var selectedStoreAddreses = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
|
|
2476
|
+
return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
|
|
2477
|
+
});
|
|
2478
|
+
var addressList = [];
|
|
2479
|
+
|
|
2480
|
+
if (selectedStoreAddreses !== null && selectedStoreAddreses !== void 0 && selectedStoreAddreses.customerStoreAddressList) {
|
|
2481
|
+
addressList = [].concat(selectedStoreAddreses === null || selectedStoreAddreses === void 0 ? void 0 : selectedStoreAddreses.customerStoreAddressList, [{
|
|
2482
|
+
name: 'add billing Address',
|
|
2483
|
+
id: 99999999
|
|
2484
|
+
}]);
|
|
2485
|
+
}
|
|
2491
2486
|
|
|
2492
2487
|
var onSubmit = function onSubmit(data) {
|
|
2493
|
-
console.log(data);
|
|
2494
2488
|
addStore(data);
|
|
2495
2489
|
resetField('store');
|
|
2496
2490
|
};
|
|
2497
2491
|
|
|
2498
2492
|
var addAddress = function addAddress(data) {
|
|
2499
|
-
console.log(data);
|
|
2500
2493
|
addStoreAddress(data);
|
|
2501
2494
|
resetAddress('billingAddress');
|
|
2502
2495
|
};
|
|
@@ -2507,6 +2500,7 @@ var Step1 = function Step1(_ref) {
|
|
|
2507
2500
|
}, {
|
|
2508
2501
|
billingAddress: selectedAddress
|
|
2509
2502
|
});
|
|
2503
|
+
console.log(setShipping);
|
|
2510
2504
|
setShipping(address);
|
|
2511
2505
|
handleNext();
|
|
2512
2506
|
};
|
|
@@ -2549,7 +2543,8 @@ var Step1 = function Step1(_ref) {
|
|
|
2549
2543
|
placeholder: 'Select a billing address from your address book ',
|
|
2550
2544
|
control: addressControl,
|
|
2551
2545
|
List: addressList,
|
|
2552
|
-
key: 'name'
|
|
2546
|
+
key: 'name',
|
|
2547
|
+
defaultValue: stores && ((_stores$ = stores[0]) === null || _stores$ === void 0 ? void 0 : _stores$.id)
|
|
2553
2548
|
}
|
|
2554
2549
|
}))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
|
|
2555
2550
|
control: addressControl,
|
|
@@ -2561,23 +2556,23 @@ var Step1 = function Step1(_ref) {
|
|
|
2561
2556
|
xs: 12
|
|
2562
2557
|
}, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
|
|
2563
2558
|
onClick: function onClick() {
|
|
2564
|
-
setAddress(
|
|
2559
|
+
setAddress(true);
|
|
2565
2560
|
}
|
|
2566
2561
|
}, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
2567
|
-
checked:
|
|
2562
|
+
checked: address,
|
|
2568
2563
|
icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
|
|
2569
2564
|
checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
|
|
2570
2565
|
}), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
|
|
2571
2566
|
padding: '0 0 1em 0',
|
|
2572
2567
|
onClick: function onClick() {
|
|
2573
|
-
setAddress(
|
|
2568
|
+
setAddress(false);
|
|
2574
2569
|
}
|
|
2575
2570
|
}, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
2576
|
-
checked: address,
|
|
2571
|
+
checked: !address,
|
|
2577
2572
|
icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
|
|
2578
2573
|
checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
|
|
2579
2574
|
}), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow, {
|
|
2580
|
-
|
|
2575
|
+
backDisabled: true,
|
|
2581
2576
|
handleNext: function handleNext() {
|
|
2582
2577
|
next();
|
|
2583
2578
|
},
|
|
@@ -2897,7 +2892,7 @@ var Step4 = function Step4(_ref) {
|
|
|
2897
2892
|
align: "center"
|
|
2898
2893
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
2899
2894
|
className: "price max"
|
|
2900
|
-
}, (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
|
|
2895
|
+
}, "$", (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
|
|
2901
2896
|
}), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
2902
2897
|
colSpan: 1,
|
|
2903
2898
|
noSmall: true
|
|
@@ -2948,14 +2943,14 @@ var Step4 = function Step4(_ref) {
|
|
|
2948
2943
|
},
|
|
2949
2944
|
colSpan: 1
|
|
2950
2945
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
2951
|
-
className: "max sm
|
|
2946
|
+
className: "max sm bolder red"
|
|
2952
2947
|
}, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
2953
2948
|
sx: {
|
|
2954
2949
|
paddingTop: '1em'
|
|
2955
2950
|
},
|
|
2956
2951
|
align: "right"
|
|
2957
2952
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
2958
|
-
className: "max sm total
|
|
2953
|
+
className: "max sm total bolder red"
|
|
2959
2954
|
}, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat + deliveryCharges).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
|
|
2960
2955
|
container: true,
|
|
2961
2956
|
columnSpacing: 0,
|
|
@@ -3083,9 +3078,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3083
3078
|
addStore = _ref.addStore,
|
|
3084
3079
|
addStoreAddress = _ref.addStoreAddress,
|
|
3085
3080
|
setBilling = _ref.setBilling,
|
|
3081
|
+
setShowShipping = _ref.setShowShipping,
|
|
3082
|
+
userStores = _ref.userStores,
|
|
3086
3083
|
addShipping = _ref.addShipping,
|
|
3087
3084
|
showShipping = _ref.showShipping,
|
|
3088
|
-
setShowShipping = _ref.setShowShipping,
|
|
3089
3085
|
deliveryOptions = _ref.deliveryOptions,
|
|
3090
3086
|
countries = _ref.countries,
|
|
3091
3087
|
setPaymentDetails = _ref.setPaymentDetails,
|
|
@@ -3095,7 +3091,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3095
3091
|
shippingAddress = _ref.shippingAddress,
|
|
3096
3092
|
billingAddress = _ref.billingAddress,
|
|
3097
3093
|
selectedPaymentMethod = _ref.selectedPaymentMethod,
|
|
3098
|
-
userStores = _ref.userStores,
|
|
3099
3094
|
userAddresses = _ref.userAddresses,
|
|
3100
3095
|
clickRedirect = _ref.clickRedirect,
|
|
3101
3096
|
ordering = _ref.ordering,
|
|
@@ -3106,14 +3101,17 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3106
3101
|
}, /*#__PURE__*/React__default.createElement(material.Stack, {
|
|
3107
3102
|
flexDirection: "column",
|
|
3108
3103
|
alignItems: "flex-start"
|
|
3109
|
-
}, /*#__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(
|
|
3104
|
+
}, /*#__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, {
|
|
3105
|
+
flexDirection: "column",
|
|
3106
|
+
alignItems: "flex-end"
|
|
3107
|
+
}, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
|
|
3110
3108
|
var words = item.text.split(' ');
|
|
3111
3109
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
3112
3110
|
className: currStep > i ? 'row checked' : 'row'
|
|
3113
3111
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
3114
3112
|
className: "icon"
|
|
3115
3113
|
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
|
|
3116
|
-
})), /*#__PURE__*/React__default.createElement(material.Stepper, {
|
|
3114
|
+
})), /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(material.Stepper, {
|
|
3117
3115
|
activeStep: currStep,
|
|
3118
3116
|
orientation: "vertical",
|
|
3119
3117
|
sx: {
|
|
@@ -3229,7 +3227,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3229
3227
|
ordering: loading,
|
|
3230
3228
|
placeOrder: placeOrder
|
|
3231
3229
|
})));
|
|
3232
|
-
})))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3230
|
+
}))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3233
3231
|
billingInformation: billingAddress,
|
|
3234
3232
|
shippingInformation: shippingAddress,
|
|
3235
3233
|
paymentMethod: selectedPaymentMethod,
|