@salesgenterp/ui-components 0.4.39 → 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 +29 -26
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +31 -28
- 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;
|
|
@@ -2165,7 +2168,9 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2165
2168
|
alt: "vector",
|
|
2166
2169
|
width: 18,
|
|
2167
2170
|
height: 18
|
|
2168
|
-
}), /*#__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, {
|
|
2169
2174
|
className: "dropIcon",
|
|
2170
2175
|
style: closed ? {
|
|
2171
2176
|
transform: 'rotate(-90deg)'
|
|
@@ -2257,17 +2262,18 @@ var ButtonRow = function ButtonRow(_ref) {
|
|
|
2257
2262
|
backDisabled = _ref.backDisabled,
|
|
2258
2263
|
nextDisabled = _ref.nextDisabled;
|
|
2259
2264
|
return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
|
|
2260
|
-
|
|
2261
|
-
|
|
2265
|
+
disabledBack: backDisabled,
|
|
2266
|
+
disabledNext: nextDisabled
|
|
2267
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
2262
2268
|
className: "back",
|
|
2263
2269
|
tabIndex: "1",
|
|
2264
2270
|
onClick: function onClick() {
|
|
2265
2271
|
if (backDisabled) return;
|
|
2266
2272
|
handleBack();
|
|
2267
2273
|
}
|
|
2268
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
2274
|
+
}, /*#__PURE__*/React__default.createElement(md.MdArrowBack, {
|
|
2269
2275
|
className: "icon"
|
|
2270
|
-
}), "Back"), /*#__PURE__*/React__default.createElement(
|
|
2276
|
+
}), "Back"), /*#__PURE__*/React__default.createElement("button", {
|
|
2271
2277
|
disabled: nextDisabled,
|
|
2272
2278
|
tabIndex: "1",
|
|
2273
2279
|
onClick: function onClick() {
|
|
@@ -2824,16 +2830,10 @@ var Step4 = function Step4(_ref) {
|
|
|
2824
2830
|
comments = _React$useState2[0],
|
|
2825
2831
|
setComments = _React$useState2[1];
|
|
2826
2832
|
|
|
2827
|
-
function Icon() {
|
|
2828
|
-
return /*#__PURE__*/React__default.createElement(md.MdOutlineStickyNote2, {
|
|
2829
|
-
className: "icon"
|
|
2830
|
-
});
|
|
2831
|
-
}
|
|
2832
|
-
|
|
2833
2833
|
var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
|
|
2834
2834
|
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2835
2835
|
text: 'Order Review',
|
|
2836
|
-
|
|
2836
|
+
icon: 5
|
|
2837
2837
|
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.TableContainer, null, /*#__PURE__*/React__default.createElement(material.Table, {
|
|
2838
2838
|
"aria-label": "customized table",
|
|
2839
2839
|
sx: {
|
|
@@ -3072,7 +3072,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3072
3072
|
placeOrder = _ref.placeOrder;
|
|
3073
3073
|
return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
|
|
3074
3074
|
className: "checkout"
|
|
3075
|
-
}, /*#__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) {
|
|
3076
3079
|
var words = item.text.split(' ');
|
|
3077
3080
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
3078
3081
|
className: currStep > i ? 'row checked' : 'row'
|
|
@@ -3194,7 +3197,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3194
3197
|
ordering: loading,
|
|
3195
3198
|
placeOrder: placeOrder
|
|
3196
3199
|
})));
|
|
3197
|
-
}))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3200
|
+
})))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3198
3201
|
billingInformation: billingAddress,
|
|
3199
3202
|
shippingInformation: shippingAddress,
|
|
3200
3203
|
paymentMethod: selectedPaymentMethod,
|