@salesgenterp/ui-components 0.4.40 → 0.4.42
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 +36 -10
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +38 -12
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1965,9 +1965,9 @@ var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 =
|
|
|
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: 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"])));
|
|
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 width: 92vw;\n min-width: 90vw;\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 @media only screen and (max-width: 788px) {\n margin-left: 0;\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 margin-right: -0.2em;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
|
|
1971
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"])));
|
|
1972
1972
|
|
|
1973
1973
|
var _templateObject$7, _templateObject2$7, _templateObject3$7;
|
|
@@ -2022,7 +2022,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2022
2022
|
};
|
|
2023
2023
|
|
|
2024
2024
|
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
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
|
+
var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n @media screen and (max-width: 1305px) {\n width: 80vw;\n min-width: 0;\n }\n @media screen and (max-width: 768px) {\n width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 540px) {\n width: 98%;\n margin-left: 0.4em;\n }\n"])));
|
|
2026
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"])));
|
|
2027
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) {
|
|
2028
2028
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
@@ -2057,10 +2057,10 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
|
|
|
2057
2057
|
}, function (props) {
|
|
2058
2058
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2059
2059
|
});
|
|
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) {
|
|
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 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
2061
|
return props.padding;
|
|
2062
2062
|
});
|
|
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: 705px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n transition: 0.3s;\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: #fff0ec;\n border: 1px solid #fce1d9;\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n
|
|
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: 705px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n transition: 0.3s;\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: #fff0ec;\n border: 1px solid #fce1d9;\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: #fd0015;\n }\n }\n .amount {\n margin-left: auto;\n color: #fd0015;\n font-weight: 700;\n font-size: 0.95em;\n }\n"])), function (props) {
|
|
2064
2064
|
return props.hovered ? '#fff0ec' : '';
|
|
2065
2065
|
}, function (props) {
|
|
2066
2066
|
return props.hovered ? '1px solid #fce1d9' : '';
|
|
@@ -2386,7 +2386,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2386
2386
|
}
|
|
2387
2387
|
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2388
2388
|
item: true,
|
|
2389
|
-
xs:
|
|
2389
|
+
xs: 6,
|
|
2390
2390
|
sm: 3.34
|
|
2391
2391
|
}, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
|
|
2392
2392
|
controlls: {
|
|
@@ -2408,7 +2408,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2408
2408
|
}
|
|
2409
2409
|
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2410
2410
|
item: true,
|
|
2411
|
-
xs:
|
|
2411
|
+
xs: 6,
|
|
2412
2412
|
sm: 3.34
|
|
2413
2413
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2414
2414
|
controlls: {
|
|
@@ -2418,7 +2418,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2418
2418
|
}
|
|
2419
2419
|
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2420
2420
|
item: true,
|
|
2421
|
-
xs:
|
|
2421
|
+
xs: 6,
|
|
2422
2422
|
sm: 3.34
|
|
2423
2423
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2424
2424
|
controlls: {
|
|
@@ -2449,6 +2449,7 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2449
2449
|
var Step1 = function Step1(_ref) {
|
|
2450
2450
|
var handleBack = _ref.handleBack,
|
|
2451
2451
|
handleNext = _ref.handleNext,
|
|
2452
|
+
setShipping = _ref.setShipping,
|
|
2452
2453
|
setBilling = _ref.setBilling,
|
|
2453
2454
|
addStore = _ref.addStore,
|
|
2454
2455
|
addStoreAddress = _ref.addStoreAddress,
|
|
@@ -2462,6 +2463,10 @@ var Step1 = function Step1(_ref) {
|
|
|
2462
2463
|
resetField = _useForm.resetField,
|
|
2463
2464
|
handleSubmit = _useForm.handleSubmit;
|
|
2464
2465
|
|
|
2466
|
+
var _useState = React.useState(true),
|
|
2467
|
+
address = _useState[0],
|
|
2468
|
+
setAddress = _useState[1];
|
|
2469
|
+
|
|
2465
2470
|
var _useForm2 = reactHookForm.useForm(),
|
|
2466
2471
|
addressControl = _useForm2.control,
|
|
2467
2472
|
watchAddress = _useForm2.watch,
|
|
@@ -2497,6 +2502,7 @@ var Step1 = function Step1(_ref) {
|
|
|
2497
2502
|
}, {
|
|
2498
2503
|
billingAddress: selectedAddress
|
|
2499
2504
|
});
|
|
2505
|
+
setShipping(address);
|
|
2500
2506
|
handleNext();
|
|
2501
2507
|
};
|
|
2502
2508
|
|
|
@@ -2545,7 +2551,27 @@ var Step1 = function Step1(_ref) {
|
|
|
2545
2551
|
handleSubmit: handleSubmitAddress,
|
|
2546
2552
|
onSubmit: addAddress,
|
|
2547
2553
|
countries: countries
|
|
2548
|
-
}), /*#__PURE__*/React__default.createElement(
|
|
2554
|
+
}), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2555
|
+
item: true,
|
|
2556
|
+
xs: 12
|
|
2557
|
+
}, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
|
|
2558
|
+
onClick: function onClick() {
|
|
2559
|
+
setAddress(false);
|
|
2560
|
+
}
|
|
2561
|
+
}, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
2562
|
+
checked: !address,
|
|
2563
|
+
icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
|
|
2564
|
+
checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
|
|
2565
|
+
}), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
|
|
2566
|
+
padding: '0 0 1em 0',
|
|
2567
|
+
onClick: function onClick() {
|
|
2568
|
+
setAddress(true);
|
|
2569
|
+
}
|
|
2570
|
+
}, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
2571
|
+
checked: address,
|
|
2572
|
+
icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
|
|
2573
|
+
checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
|
|
2574
|
+
}), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow, {
|
|
2549
2575
|
handleBack: handleBack,
|
|
2550
2576
|
handleNext: function handleNext() {
|
|
2551
2577
|
next();
|