@salesgenterp/ui-components 0.4.44 → 0.4.48
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 +54 -56
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +55 -57
- 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;\n overflow: hidden;\n background:
|
|
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 }\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,23 @@ 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"), shippingMethod !== null && shippingMethod !== void 0 && shippingMethod.name ? /*#__PURE__*/React__default.createElement("p", {
|
|
2006
|
+
className: "bold"
|
|
2007
|
+
}, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name) : /*#__PURE__*/React__default.createElement("p", {
|
|
2008
|
+
className: "blank bold"
|
|
2009
|
+
}, "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
|
|
2010
|
+
className: "heading"
|
|
2011
|
+
}, "Payment Method"), paymentMethod !== null && paymentMethod !== void 0 && paymentMethod.name ? /*#__PURE__*/React__default.createElement("p", {
|
|
2012
|
+
className: "bold"
|
|
2013
|
+
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name) : /*#__PURE__*/React__default.createElement("p", {
|
|
2014
|
+
className: "blank bold"
|
|
2015
|
+
}, "- - -")));
|
|
2022
2016
|
};
|
|
2023
2017
|
|
|
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:
|
|
2018
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
2019
|
+
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
2020
|
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:
|
|
2021
|
+
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
2022
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2029
2023
|
}, function (props) {
|
|
2030
2024
|
return props.single ? '-1.56em' : '1em';
|
|
@@ -2034,8 +2028,10 @@ var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8
|
|
|
2034
2028
|
return props.single ? '1.45em' : '0';
|
|
2035
2029
|
}, function (props) {
|
|
2036
2030
|
return props.single ? '0 2em' : '0';
|
|
2031
|
+
}, function (props) {
|
|
2032
|
+
return props.username ? 'not-allowed' : 'pointer';
|
|
2037
2033
|
});
|
|
2038
|
-
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n height: 24px
|
|
2034
|
+
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
2035
|
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
2036
|
return props.width || '8.05em';
|
|
2041
2037
|
}, function (props) {
|
|
@@ -2052,7 +2048,7 @@ var SaveButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _tagg
|
|
|
2052
2048
|
}, function (props) {
|
|
2053
2049
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2054
2050
|
});
|
|
2055
|
-
var ButtonRowContainer = styled.div(_templateObject7$
|
|
2051
|
+
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
2052
|
return props.disabledNext ? 'not-allowed' : 'pointer';
|
|
2057
2053
|
}, function (props) {
|
|
2058
2054
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
@@ -2060,16 +2056,18 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
|
|
|
2060
2056
|
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
2057
|
return props.padding;
|
|
2062
2058
|
});
|
|
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:
|
|
2059
|
+
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
2060
|
return props.hovered ? '#fff0ec' : '';
|
|
2065
2061
|
}, function (props) {
|
|
2066
2062
|
return props.hovered ? '1px solid #fce1d9' : '';
|
|
2067
2063
|
}, function (props) {
|
|
2068
2064
|
return props.hovered ? '5px' : '0';
|
|
2065
|
+
}, function (props) {
|
|
2066
|
+
return props.hovered ? '800' : '700';
|
|
2069
2067
|
});
|
|
2070
2068
|
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
2069
|
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:
|
|
2070
|
+
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
2071
|
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2074
2072
|
});
|
|
2075
2073
|
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 +2090,6 @@ var CheckoutInput = function CheckoutInput(_ref) {
|
|
|
2092
2090
|
placeholder: placeholder,
|
|
2093
2091
|
variant: "outlined",
|
|
2094
2092
|
required: true,
|
|
2095
|
-
size: "small",
|
|
2096
2093
|
InputProps: showIcon ? {
|
|
2097
2094
|
startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
|
|
2098
2095
|
position: "start"
|
|
@@ -2111,7 +2108,6 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
|
|
|
2111
2108
|
var key = controlls.key,
|
|
2112
2109
|
List = controlls.List,
|
|
2113
2110
|
name = controlls.name,
|
|
2114
|
-
placeholder = controlls.placeholder,
|
|
2115
2111
|
control = controlls.control,
|
|
2116
2112
|
_controlls$val = controlls.val,
|
|
2117
2113
|
val = _controlls$val === void 0 ? 'id' : _controlls$val,
|
|
@@ -2119,18 +2115,16 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
|
|
|
2119
2115
|
autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2;
|
|
2120
2116
|
return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
|
|
2121
2117
|
select: true
|
|
2122
|
-
}, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
|
|
2118
|
+
}, console.log(List[0][val]), /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
|
|
2123
2119
|
control: control,
|
|
2124
2120
|
name: name,
|
|
2125
2121
|
defaultValue: "",
|
|
2126
2122
|
render: function render(_ref4) {
|
|
2127
2123
|
var field = _ref4.field;
|
|
2128
|
-
return /*#__PURE__*/React__default.createElement(material.
|
|
2124
|
+
return /*#__PURE__*/React__default.createElement(material.Select, _extends({
|
|
2129
2125
|
fullWidth: true,
|
|
2130
|
-
|
|
2131
|
-
select: true,
|
|
2126
|
+
displayEmpty: true,
|
|
2132
2127
|
required: true,
|
|
2133
|
-
size: "small",
|
|
2134
2128
|
autoFocus: autoFocus
|
|
2135
2129
|
}, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
|
|
2136
2130
|
return /*#__PURE__*/React__default.createElement(material.MenuItem, {
|
|
@@ -2150,9 +2144,14 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2150
2144
|
closed = _ref.closed,
|
|
2151
2145
|
handleClick = _ref.handleClick,
|
|
2152
2146
|
withoutIcon = _ref.withoutIcon;
|
|
2153
|
-
console.log("/images/checkout/vector-" + icon + ".svg");
|
|
2154
2147
|
return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
|
|
2155
|
-
single: single
|
|
2148
|
+
single: single,
|
|
2149
|
+
username: username,
|
|
2150
|
+
onClick: function onClick() {
|
|
2151
|
+
if (!handleClick) return;
|
|
2152
|
+
if (username) return;
|
|
2153
|
+
handleClick();
|
|
2154
|
+
}
|
|
2156
2155
|
}, /*#__PURE__*/React__default.createElement(material.Stack, {
|
|
2157
2156
|
justifyContent: 'space-between',
|
|
2158
2157
|
flexDirection: "row",
|
|
@@ -2176,10 +2175,6 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2176
2175
|
transform: 'rotate(-90deg)'
|
|
2177
2176
|
} : {
|
|
2178
2177
|
transform: 'rotate(0deg)'
|
|
2179
|
-
},
|
|
2180
|
-
onClick: function onClick() {
|
|
2181
|
-
if (!handleClick) return;
|
|
2182
|
-
handleClick();
|
|
2183
2178
|
}
|
|
2184
2179
|
})));
|
|
2185
2180
|
};
|
|
@@ -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,
|
|
@@ -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,
|