@salesgenterp/ui-components 0.4.38 → 0.4.40
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 +114 -101
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +116 -103
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1958,16 +1958,17 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1958
1958
|
})));
|
|
1959
1959
|
};
|
|
1960
1960
|
|
|
1961
|
-
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
|
|
1962
|
-
var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n background-color: ", ";\n margin: 0 auto;\n padding: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n background: gainsboro;\n border-radius: 28px;\n @media only screen and (max-width: 1488px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
|
|
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: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5em, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n background: gainsboro;\n 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) {
|
|
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 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:
|
|
1969
|
-
var
|
|
1970
|
-
var
|
|
1968
|
+
var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 1008px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n margin-right: 2em;\n max-height: 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 }\n /* overflow: hidden; */\n"])));
|
|
1969
|
+
var CheckoutHeading = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n margin-left: 2.5em;\n margin-bottom: 2em;\n h5 {\n font-size: 2.735em;\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"])));
|
|
1970
|
+
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 .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
|
|
1971
|
+
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"])));
|
|
1971
1972
|
|
|
1972
1973
|
var _templateObject$7, _templateObject2$7, _templateObject3$7;
|
|
1973
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) {
|
|
@@ -2020,21 +2021,21 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2020
2021
|
}))));
|
|
2021
2022
|
};
|
|
2022
2023
|
|
|
2023
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$
|
|
2024
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
2024
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"])));
|
|
2025
2026
|
var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
|
|
2026
|
-
var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n font-family: 'karla-fonts';\n color: #323232;\n /* padding: ", "; */\n margin-bottom: ", ";\n margin-top: ", ";\n margin-left: ", ";\n /* color: grey; */\n border-bottom: 1px solid #fff0ec;\n background: #ffffff;\n border-radius: 20px;\n max-width: 919px;\n min-height: 4.35em;\n max-height: 4.35em;\n padding: ", ";\n h5 {\n font-size: 16px;\n font-weight: 600;\n text-transform: capitalize;\n margin-left: 0.6em;\n }\n .icon {\n font-size: 1.3em;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4em;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
|
|
2027
|
+
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) {
|
|
2027
2028
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2028
2029
|
}, function (props) {
|
|
2029
2030
|
return props.single ? '-1.56em' : '1em';
|
|
2030
2031
|
}, function (props) {
|
|
2031
2032
|
return props.single ? '-1.56em' : '0';
|
|
2032
2033
|
}, function (props) {
|
|
2033
|
-
return props.single ? '1.
|
|
2034
|
+
return props.single ? '1.45em' : '0';
|
|
2034
2035
|
}, function (props) {
|
|
2035
2036
|
return props.single ? '0 2em' : '0';
|
|
2036
2037
|
});
|
|
2037
|
-
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.
|
|
2038
|
+
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"])));
|
|
2038
2039
|
var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n width: ", ";\n height: ", ";\n\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n font-weight: 500;\n letter-spacing: 1px;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
|
|
2039
2040
|
return props.width || '8.05em';
|
|
2040
2041
|
}, function (props) {
|
|
@@ -2046,13 +2047,15 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
|
|
|
2046
2047
|
}, function (props) {
|
|
2047
2048
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2048
2049
|
});
|
|
2049
|
-
var SaveButton = styled.button(_templateObject6$
|
|
2050
|
+
var SaveButton = styled.button(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
|
|
2050
2051
|
return props.color || '#FD0015';
|
|
2051
2052
|
}, function (props) {
|
|
2052
2053
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2053
2054
|
});
|
|
2054
|
-
var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n
|
|
2055
|
-
return props.
|
|
2055
|
+
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) {
|
|
2056
|
+
return props.disabledNext ? 'not-allowed' : 'pointer';
|
|
2057
|
+
}, function (props) {
|
|
2058
|
+
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2056
2059
|
});
|
|
2057
2060
|
var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n"])), function (props) {
|
|
2058
2061
|
return props.padding;
|
|
@@ -2064,14 +2067,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
|
|
|
2064
2067
|
}, function (props) {
|
|
2065
2068
|
return props.hovered ? '5px' : '0';
|
|
2066
2069
|
});
|
|
2067
|
-
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
|
-
var
|
|
2070
|
+
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
|
+
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: 8px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n }\n }\n"])), function (props) {
|
|
2069
2073
|
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2070
2074
|
});
|
|
2071
|
-
var StyledTableCell = styled(material.TableCell)(
|
|
2075
|
+
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) {
|
|
2072
2076
|
return props.noSmall ? 'none' : '';
|
|
2073
2077
|
});
|
|
2074
|
-
var BottomGrid = styled(material.Grid)(
|
|
2078
|
+
var BottomGrid = styled(material.Grid)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 600;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1em;\n }\n .icon {\n font-size: 1.6em;\n color: rgba(253, 0, 21, 1);\n }\n textarea {\n width: 100%;\n resize: none;\n background: #fff8f6;\n border: 1px solid rgba(253, 0, 21, 0.5);\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\n }\n p {\n font-size: 12px;\n .ul {\n text-decoration: underline;\n font-size: inherit;\n }\n }\n .bottom {\n margin-left: 3em;\n font-style: italic;\n span {\n font-weight: 600;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
|
|
2075
2079
|
|
|
2076
2080
|
var CheckoutInput = function CheckoutInput(_ref) {
|
|
2077
2081
|
var controlls = _ref.controlls;
|
|
@@ -2164,7 +2168,9 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2164
2168
|
alt: "vector",
|
|
2165
2169
|
width: 18,
|
|
2166
2170
|
height: 18
|
|
2167
|
-
}), /*#__PURE__*/React__default.createElement("h5", null,
|
|
2171
|
+
}), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome ", /*#__PURE__*/React__default.createElement("span", {
|
|
2172
|
+
className: "red"
|
|
2173
|
+
}, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
|
|
2168
2174
|
className: "dropIcon",
|
|
2169
2175
|
style: closed ? {
|
|
2170
2176
|
transform: 'rotate(-90deg)'
|
|
@@ -2256,17 +2262,18 @@ var ButtonRow = function ButtonRow(_ref) {
|
|
|
2256
2262
|
backDisabled = _ref.backDisabled,
|
|
2257
2263
|
nextDisabled = _ref.nextDisabled;
|
|
2258
2264
|
return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
|
|
2259
|
-
|
|
2260
|
-
|
|
2265
|
+
disabledBack: backDisabled,
|
|
2266
|
+
disabledNext: nextDisabled
|
|
2267
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
2261
2268
|
className: "back",
|
|
2262
2269
|
tabIndex: "1",
|
|
2263
2270
|
onClick: function onClick() {
|
|
2264
2271
|
if (backDisabled) return;
|
|
2265
2272
|
handleBack();
|
|
2266
2273
|
}
|
|
2267
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
2274
|
+
}, /*#__PURE__*/React__default.createElement(md.MdArrowBack, {
|
|
2268
2275
|
className: "icon"
|
|
2269
|
-
}), "Back"), /*#__PURE__*/React__default.createElement(
|
|
2276
|
+
}), "Back"), /*#__PURE__*/React__default.createElement("button", {
|
|
2270
2277
|
disabled: nextDisabled,
|
|
2271
2278
|
tabIndex: "1",
|
|
2272
2279
|
onClick: function onClick() {
|
|
@@ -2642,69 +2649,13 @@ var Step2 = function Step2(_ref) {
|
|
|
2642
2649
|
})));
|
|
2643
2650
|
};
|
|
2644
2651
|
|
|
2645
|
-
var
|
|
2646
|
-
var
|
|
2647
|
-
|
|
2648
|
-
var handleBack = _ref.handleBack,
|
|
2649
|
-
_handleNext = _ref.handleNext,
|
|
2650
|
-
setPaymentDetails = _ref.setPaymentDetails,
|
|
2651
|
-
payments = _ref.payments;
|
|
2652
|
-
|
|
2653
|
-
var _useForm = reactHookForm.useForm(),
|
|
2654
|
-
control = _useForm.control,
|
|
2655
|
-
handleSubmit = _useForm.handleSubmit,
|
|
2656
|
-
dirtyFields = _useForm.formState.dirtyFields,
|
|
2657
|
-
getValues = _useForm.getValues;
|
|
2658
|
-
|
|
2659
|
-
var onSubmit = function onSubmit(data) {
|
|
2660
|
-
console.log(data);
|
|
2661
|
-
};
|
|
2662
|
-
|
|
2663
|
-
function Icon() {
|
|
2664
|
-
return /*#__PURE__*/React__default.createElement(bi.BiWallet, {
|
|
2665
|
-
className: "icon"
|
|
2666
|
-
});
|
|
2667
|
-
}
|
|
2668
|
-
|
|
2669
|
-
var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
|
|
2670
|
-
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2671
|
-
text: 'Payments Method',
|
|
2672
|
-
Icon: Icon
|
|
2673
|
-
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2674
|
-
container: true,
|
|
2675
|
-
rowSpacing: 2,
|
|
2676
|
-
sx: {
|
|
2677
|
-
margin: '1.5em 0'
|
|
2678
|
-
}
|
|
2679
|
-
}, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
|
|
2680
|
-
var _src;
|
|
2681
|
-
|
|
2682
|
-
var src = payment === null || payment === void 0 ? void 0 : payment.name;
|
|
2683
|
-
|
|
2684
|
-
if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
|
|
2685
|
-
if (src !== 'masterCard') {
|
|
2686
|
-
src = 'visa';
|
|
2687
|
-
}
|
|
2688
|
-
} else if (!Images.includes(src)) {
|
|
2689
|
-
src = 'none';
|
|
2690
|
-
}
|
|
2691
|
-
|
|
2692
|
-
return /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2693
|
-
item: true,
|
|
2694
|
-
key: i,
|
|
2695
|
-
xs: 2.8,
|
|
2696
|
-
sm: 1.5
|
|
2697
|
-
}, /*#__PURE__*/React__default.createElement(CreditCard, {
|
|
2698
|
-
tabIndex: 1
|
|
2699
|
-
}, src !== 'none' ? /*#__PURE__*/React__default.createElement("img", {
|
|
2700
|
-
src: "/images/" + src + ".png",
|
|
2701
|
-
alt: payment.name
|
|
2702
|
-
}) : /*#__PURE__*/React__default.createElement("p", null, payment.name)));
|
|
2703
|
-
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2652
|
+
var CreditCardForm = function CreditCardForm(_ref) {
|
|
2653
|
+
var control = _ref.control;
|
|
2654
|
+
return /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2704
2655
|
container: true,
|
|
2705
2656
|
component: 'form',
|
|
2706
|
-
onSubmit: handleSubmit(onSubmit),
|
|
2707
2657
|
rowSpacing: 2,
|
|
2658
|
+
paddingLeft: "1em",
|
|
2708
2659
|
columnSpacing: 2,
|
|
2709
2660
|
sx: {
|
|
2710
2661
|
paddingBottom: '1em'
|
|
@@ -2712,7 +2663,7 @@ var Step3 = function Step3(_ref) {
|
|
|
2712
2663
|
}, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2713
2664
|
item: true,
|
|
2714
2665
|
xs: 12,
|
|
2715
|
-
md:
|
|
2666
|
+
md: 10
|
|
2716
2667
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2717
2668
|
controlls: {
|
|
2718
2669
|
name: 'cardName',
|
|
@@ -2727,7 +2678,7 @@ var Step3 = function Step3(_ref) {
|
|
|
2727
2678
|
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2728
2679
|
item: true,
|
|
2729
2680
|
xs: 12,
|
|
2730
|
-
md:
|
|
2681
|
+
md: 10
|
|
2731
2682
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2732
2683
|
controlls: {
|
|
2733
2684
|
name: 'cardNumber',
|
|
@@ -2779,19 +2730,84 @@ var Step3 = function Step3(_ref) {
|
|
|
2779
2730
|
padding: ".8em 0 0 0"
|
|
2780
2731
|
}, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
2781
2732
|
size: "small"
|
|
2782
|
-
}), /*#__PURE__*/React__default.createElement("p", null, "Remember
|
|
2733
|
+
}), /*#__PURE__*/React__default.createElement("p", null, "Remember the card"))));
|
|
2734
|
+
};
|
|
2735
|
+
|
|
2736
|
+
var Step3 = function Step3(_ref) {
|
|
2737
|
+
var _selectedMethod$name, _Object$keys;
|
|
2738
|
+
|
|
2739
|
+
var handleBack = _ref.handleBack,
|
|
2740
|
+
_handleNext = _ref.handleNext,
|
|
2741
|
+
setPaymentDetails = _ref.setPaymentDetails,
|
|
2742
|
+
payments = _ref.payments;
|
|
2743
|
+
|
|
2744
|
+
var _useState = React.useState(payments && payments[0]),
|
|
2745
|
+
selectedMethod = _useState[0],
|
|
2746
|
+
setSelectedMethod = _useState[1];
|
|
2747
|
+
|
|
2748
|
+
var _useForm = reactHookForm.useForm(),
|
|
2749
|
+
control = _useForm.control,
|
|
2750
|
+
dirtyFields = _useForm.formState.dirtyFields,
|
|
2751
|
+
getValues = _useForm.getValues;
|
|
2752
|
+
|
|
2753
|
+
var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
|
|
2754
|
+
var isCard = selectedMethod === null || selectedMethod === void 0 ? void 0 : (_selectedMethod$name = selectedMethod.name) === null || _selectedMethod$name === void 0 ? void 0 : _selectedMethod$name.toLowerCase().includes('card');
|
|
2755
|
+
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2756
|
+
text: 'Payments Method',
|
|
2757
|
+
icon: 4
|
|
2758
|
+
}), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
|
|
2759
|
+
var _payment$name;
|
|
2760
|
+
|
|
2761
|
+
if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
|
|
2762
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
2763
|
+
key: i
|
|
2764
|
+
}, /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
2765
|
+
onClick: function onClick() {
|
|
2766
|
+
return setSelectedMethod(payment);
|
|
2767
|
+
}
|
|
2768
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2769
|
+
className: "circle"
|
|
2770
|
+
}, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
|
|
2771
|
+
className: "innerCircle"
|
|
2772
|
+
})), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2773
|
+
container: true,
|
|
2774
|
+
rowSpacing: 2,
|
|
2775
|
+
paddingLeft: "1em",
|
|
2776
|
+
paddingBottom: '1em'
|
|
2777
|
+
}, Images === null || Images === void 0 ? void 0 : Images.map(function (img, i) {
|
|
2778
|
+
return /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2779
|
+
item: true,
|
|
2780
|
+
key: i,
|
|
2781
|
+
xs: 2.8,
|
|
2782
|
+
sm: 1.5
|
|
2783
|
+
}, /*#__PURE__*/React__default.createElement(CreditCard, {
|
|
2784
|
+
tabIndex: 1
|
|
2785
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
2786
|
+
src: "/images/" + img + ".png",
|
|
2787
|
+
alt: img.name
|
|
2788
|
+
})));
|
|
2789
|
+
})), /*#__PURE__*/React__default.createElement(CreditCardForm, {
|
|
2790
|
+
control: control
|
|
2791
|
+
}));
|
|
2792
|
+
} else {
|
|
2793
|
+
return /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
2794
|
+
onClick: function onClick() {
|
|
2795
|
+
return setSelectedMethod(payment);
|
|
2796
|
+
}
|
|
2797
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2798
|
+
className: "circle"
|
|
2799
|
+
}, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
|
|
2800
|
+
className: "innerCircle"
|
|
2801
|
+
})), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name));
|
|
2802
|
+
}
|
|
2803
|
+
}), /*#__PURE__*/React__default.createElement(ButtonRow, {
|
|
2783
2804
|
handleBack: handleBack,
|
|
2784
2805
|
handleNext: function handleNext() {
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
|
|
2788
|
-
console.log('clicked', getValues());
|
|
2789
|
-
setPaymentDetails(getValues());
|
|
2806
|
+
setPaymentDetails(selectedMethod, getValues());
|
|
2790
2807
|
|
|
2791
|
-
|
|
2792
|
-
}
|
|
2808
|
+
_handleNext();
|
|
2793
2809
|
},
|
|
2794
|
-
nextDisabled: ((_Object$
|
|
2810
|
+
nextDisabled: isCard && ((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 4
|
|
2795
2811
|
})));
|
|
2796
2812
|
};
|
|
2797
2813
|
|
|
@@ -2814,16 +2830,10 @@ var Step4 = function Step4(_ref) {
|
|
|
2814
2830
|
comments = _React$useState2[0],
|
|
2815
2831
|
setComments = _React$useState2[1];
|
|
2816
2832
|
|
|
2817
|
-
function Icon() {
|
|
2818
|
-
return /*#__PURE__*/React__default.createElement(md.MdOutlineStickyNote2, {
|
|
2819
|
-
className: "icon"
|
|
2820
|
-
});
|
|
2821
|
-
}
|
|
2822
|
-
|
|
2823
2833
|
var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
|
|
2824
2834
|
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2825
2835
|
text: 'Order Review',
|
|
2826
|
-
|
|
2836
|
+
icon: 5
|
|
2827
2837
|
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.TableContainer, null, /*#__PURE__*/React__default.createElement(material.Table, {
|
|
2828
2838
|
"aria-label": "customized table",
|
|
2829
2839
|
sx: {
|
|
@@ -3062,7 +3072,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3062
3072
|
placeOrder = _ref.placeOrder;
|
|
3063
3073
|
return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
|
|
3064
3074
|
className: "checkout"
|
|
3065
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
3075
|
+
}, /*#__PURE__*/React__default.createElement(material.Stack, {
|
|
3076
|
+
flexDirection: "column",
|
|
3077
|
+
alignItems: "flex-start"
|
|
3078
|
+
}, /*#__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) {
|
|
3066
3079
|
var words = item.text.split(' ');
|
|
3067
3080
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
3068
3081
|
className: currStep > i ? 'row checked' : 'row'
|
|
@@ -3184,7 +3197,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3184
3197
|
ordering: loading,
|
|
3185
3198
|
placeOrder: placeOrder
|
|
3186
3199
|
})));
|
|
3187
|
-
}))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3200
|
+
})))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3188
3201
|
billingInformation: billingAddress,
|
|
3189
3202
|
shippingInformation: shippingAddress,
|
|
3190
3203
|
paymentMethod: selectedPaymentMethod,
|