@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.modern.js
CHANGED
|
@@ -13,9 +13,9 @@ import TableBody from '@mui/material/TableBody';
|
|
|
13
13
|
import TableHead from '@mui/material/TableHead';
|
|
14
14
|
import TableRow$1 from '@mui/material/TableRow';
|
|
15
15
|
import TableSortLabel from '@mui/material/TableSortLabel';
|
|
16
|
-
import {
|
|
16
|
+
import { BiLockAlt, BiNotepad, BiWallet } from 'react-icons/bi';
|
|
17
17
|
import { CgProfile } from 'react-icons/cg';
|
|
18
|
-
import { MdOutlineDateRange, MdOutlineStickyNote2 } from 'react-icons/md';
|
|
18
|
+
import { MdArrowBack, MdOutlineDateRange, MdOutlineStickyNote2 } from 'react-icons/md';
|
|
19
19
|
import { Controller, useForm } from 'react-hook-form';
|
|
20
20
|
import { HiOutlineChevronDown } from 'react-icons/hi';
|
|
21
21
|
import { IoPersonOutline } from 'react-icons/io5';
|
|
@@ -1955,16 +1955,17 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1955
1955
|
})));
|
|
1956
1956
|
};
|
|
1957
1957
|
|
|
1958
|
-
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
|
|
1959
|
-
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) {
|
|
1958
|
+
var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5;
|
|
1959
|
+
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) {
|
|
1960
1960
|
return props.maxWidth || '1605px';
|
|
1961
1961
|
}, function (props) {
|
|
1962
1962
|
return props.bg || 'rgba(255, 248, 246, 1)';
|
|
1963
1963
|
});
|
|
1964
1964
|
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"])));
|
|
1965
|
-
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:
|
|
1966
|
-
var
|
|
1967
|
-
var
|
|
1965
|
+
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"])));
|
|
1966
|
+
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"])));
|
|
1967
|
+
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 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"])));
|
|
1968
1969
|
|
|
1969
1970
|
var _templateObject$7, _templateObject2$7, _templateObject3$7;
|
|
1970
1971
|
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) {
|
|
@@ -2017,21 +2018,21 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2017
2018
|
}))));
|
|
2018
2019
|
};
|
|
2019
2020
|
|
|
2020
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$
|
|
2021
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
2021
2022
|
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"])));
|
|
2022
2023
|
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"])));
|
|
2023
|
-
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) {
|
|
2024
|
+
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) {
|
|
2024
2025
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2025
2026
|
}, function (props) {
|
|
2026
2027
|
return props.single ? '-1.56em' : '1em';
|
|
2027
2028
|
}, function (props) {
|
|
2028
2029
|
return props.single ? '-1.56em' : '0';
|
|
2029
2030
|
}, function (props) {
|
|
2030
|
-
return props.single ? '1.
|
|
2031
|
+
return props.single ? '1.45em' : '0';
|
|
2031
2032
|
}, function (props) {
|
|
2032
2033
|
return props.single ? '0 2em' : '0';
|
|
2033
2034
|
});
|
|
2034
|
-
var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.
|
|
2035
|
+
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"])));
|
|
2035
2036
|
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) {
|
|
2036
2037
|
return props.width || '8.05em';
|
|
2037
2038
|
}, function (props) {
|
|
@@ -2043,13 +2044,15 @@ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6
|
|
|
2043
2044
|
}, function (props) {
|
|
2044
2045
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2045
2046
|
});
|
|
2046
|
-
var SaveButton = styled.button(_templateObject6$
|
|
2047
|
+
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) {
|
|
2047
2048
|
return props.color || '#FD0015';
|
|
2048
2049
|
}, function (props) {
|
|
2049
2050
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2050
2051
|
});
|
|
2051
|
-
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
|
|
2052
|
-
return props.
|
|
2052
|
+
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) {
|
|
2053
|
+
return props.disabledNext ? 'not-allowed' : 'pointer';
|
|
2054
|
+
}, function (props) {
|
|
2055
|
+
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2053
2056
|
});
|
|
2054
2057
|
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) {
|
|
2055
2058
|
return props.padding;
|
|
@@ -2061,14 +2064,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
|
|
|
2061
2064
|
}, function (props) {
|
|
2062
2065
|
return props.hovered ? '5px' : '0';
|
|
2063
2066
|
});
|
|
2064
|
-
var CreditCard = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n border: 1px solid transparent;\n text-align: center;\n p {\n font-size: 10px;\n }\n
|
|
2065
|
-
var
|
|
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 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"])));
|
|
2069
|
+
var StyledTableRow = styled(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) {
|
|
2066
2070
|
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2067
2071
|
});
|
|
2068
|
-
var StyledTableCell = styled(TableCell)(
|
|
2072
|
+
var StyledTableCell = styled(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) {
|
|
2069
2073
|
return props.noSmall ? 'none' : '';
|
|
2070
2074
|
});
|
|
2071
|
-
var BottomGrid = styled(Grid)(
|
|
2075
|
+
var BottomGrid = styled(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"])));
|
|
2072
2076
|
|
|
2073
2077
|
var CheckoutInput = function CheckoutInput(_ref) {
|
|
2074
2078
|
var controlls = _ref.controlls;
|
|
@@ -2161,7 +2165,9 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
|
|
|
2161
2165
|
alt: "vector",
|
|
2162
2166
|
width: 18,
|
|
2163
2167
|
height: 18
|
|
2164
|
-
}), /*#__PURE__*/React__default.createElement("h5", null,
|
|
2168
|
+
}), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome ", /*#__PURE__*/React__default.createElement("span", {
|
|
2169
|
+
className: "red"
|
|
2170
|
+
}, "Mr. ", username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(HiOutlineChevronDown, {
|
|
2165
2171
|
className: "dropIcon",
|
|
2166
2172
|
style: closed ? {
|
|
2167
2173
|
transform: 'rotate(-90deg)'
|
|
@@ -2253,17 +2259,18 @@ var ButtonRow = function ButtonRow(_ref) {
|
|
|
2253
2259
|
backDisabled = _ref.backDisabled,
|
|
2254
2260
|
nextDisabled = _ref.nextDisabled;
|
|
2255
2261
|
return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
|
|
2256
|
-
|
|
2257
|
-
|
|
2262
|
+
disabledBack: backDisabled,
|
|
2263
|
+
disabledNext: nextDisabled
|
|
2264
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
2258
2265
|
className: "back",
|
|
2259
2266
|
tabIndex: "1",
|
|
2260
2267
|
onClick: function onClick() {
|
|
2261
2268
|
if (backDisabled) return;
|
|
2262
2269
|
handleBack();
|
|
2263
2270
|
}
|
|
2264
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
2271
|
+
}, /*#__PURE__*/React__default.createElement(MdArrowBack, {
|
|
2265
2272
|
className: "icon"
|
|
2266
|
-
}), "Back"), /*#__PURE__*/React__default.createElement(
|
|
2273
|
+
}), "Back"), /*#__PURE__*/React__default.createElement("button", {
|
|
2267
2274
|
disabled: nextDisabled,
|
|
2268
2275
|
tabIndex: "1",
|
|
2269
2276
|
onClick: function onClick() {
|
|
@@ -2639,69 +2646,13 @@ var Step2 = function Step2(_ref) {
|
|
|
2639
2646
|
})));
|
|
2640
2647
|
};
|
|
2641
2648
|
|
|
2642
|
-
var
|
|
2643
|
-
var
|
|
2644
|
-
|
|
2645
|
-
var handleBack = _ref.handleBack,
|
|
2646
|
-
_handleNext = _ref.handleNext,
|
|
2647
|
-
setPaymentDetails = _ref.setPaymentDetails,
|
|
2648
|
-
payments = _ref.payments;
|
|
2649
|
-
|
|
2650
|
-
var _useForm = useForm(),
|
|
2651
|
-
control = _useForm.control,
|
|
2652
|
-
handleSubmit = _useForm.handleSubmit,
|
|
2653
|
-
dirtyFields = _useForm.formState.dirtyFields,
|
|
2654
|
-
getValues = _useForm.getValues;
|
|
2655
|
-
|
|
2656
|
-
var onSubmit = function onSubmit(data) {
|
|
2657
|
-
console.log(data);
|
|
2658
|
-
};
|
|
2659
|
-
|
|
2660
|
-
function Icon() {
|
|
2661
|
-
return /*#__PURE__*/React__default.createElement(BiWallet, {
|
|
2662
|
-
className: "icon"
|
|
2663
|
-
});
|
|
2664
|
-
}
|
|
2665
|
-
|
|
2666
|
-
var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
|
|
2667
|
-
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2668
|
-
text: 'Payments Method',
|
|
2669
|
-
Icon: Icon
|
|
2670
|
-
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(Grid, {
|
|
2671
|
-
container: true,
|
|
2672
|
-
rowSpacing: 2,
|
|
2673
|
-
sx: {
|
|
2674
|
-
margin: '1.5em 0'
|
|
2675
|
-
}
|
|
2676
|
-
}, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
|
|
2677
|
-
var _src;
|
|
2678
|
-
|
|
2679
|
-
var src = payment === null || payment === void 0 ? void 0 : payment.name;
|
|
2680
|
-
|
|
2681
|
-
if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
|
|
2682
|
-
if (src !== 'masterCard') {
|
|
2683
|
-
src = 'visa';
|
|
2684
|
-
}
|
|
2685
|
-
} else if (!Images.includes(src)) {
|
|
2686
|
-
src = 'none';
|
|
2687
|
-
}
|
|
2688
|
-
|
|
2689
|
-
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
2690
|
-
item: true,
|
|
2691
|
-
key: i,
|
|
2692
|
-
xs: 2.8,
|
|
2693
|
-
sm: 1.5
|
|
2694
|
-
}, /*#__PURE__*/React__default.createElement(CreditCard, {
|
|
2695
|
-
tabIndex: 1
|
|
2696
|
-
}, src !== 'none' ? /*#__PURE__*/React__default.createElement("img", {
|
|
2697
|
-
src: "/images/" + src + ".png",
|
|
2698
|
-
alt: payment.name
|
|
2699
|
-
}) : /*#__PURE__*/React__default.createElement("p", null, payment.name)));
|
|
2700
|
-
})), /*#__PURE__*/React__default.createElement(Grid, {
|
|
2649
|
+
var CreditCardForm = function CreditCardForm(_ref) {
|
|
2650
|
+
var control = _ref.control;
|
|
2651
|
+
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
2701
2652
|
container: true,
|
|
2702
2653
|
component: 'form',
|
|
2703
|
-
onSubmit: handleSubmit(onSubmit),
|
|
2704
2654
|
rowSpacing: 2,
|
|
2655
|
+
paddingLeft: "1em",
|
|
2705
2656
|
columnSpacing: 2,
|
|
2706
2657
|
sx: {
|
|
2707
2658
|
paddingBottom: '1em'
|
|
@@ -2709,7 +2660,7 @@ var Step3 = function Step3(_ref) {
|
|
|
2709
2660
|
}, /*#__PURE__*/React__default.createElement(Grid, {
|
|
2710
2661
|
item: true,
|
|
2711
2662
|
xs: 12,
|
|
2712
|
-
md:
|
|
2663
|
+
md: 10
|
|
2713
2664
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2714
2665
|
controlls: {
|
|
2715
2666
|
name: 'cardName',
|
|
@@ -2724,7 +2675,7 @@ var Step3 = function Step3(_ref) {
|
|
|
2724
2675
|
})), /*#__PURE__*/React__default.createElement(Grid, {
|
|
2725
2676
|
item: true,
|
|
2726
2677
|
xs: 12,
|
|
2727
|
-
md:
|
|
2678
|
+
md: 10
|
|
2728
2679
|
}, /*#__PURE__*/React__default.createElement(CheckoutInput, {
|
|
2729
2680
|
controlls: {
|
|
2730
2681
|
name: 'cardNumber',
|
|
@@ -2776,19 +2727,84 @@ var Step3 = function Step3(_ref) {
|
|
|
2776
2727
|
padding: ".8em 0 0 0"
|
|
2777
2728
|
}, /*#__PURE__*/React__default.createElement(Checkbox, {
|
|
2778
2729
|
size: "small"
|
|
2779
|
-
}), /*#__PURE__*/React__default.createElement("p", null, "Remember
|
|
2730
|
+
}), /*#__PURE__*/React__default.createElement("p", null, "Remember the card"))));
|
|
2731
|
+
};
|
|
2732
|
+
|
|
2733
|
+
var Step3 = function Step3(_ref) {
|
|
2734
|
+
var _selectedMethod$name, _Object$keys;
|
|
2735
|
+
|
|
2736
|
+
var handleBack = _ref.handleBack,
|
|
2737
|
+
_handleNext = _ref.handleNext,
|
|
2738
|
+
setPaymentDetails = _ref.setPaymentDetails,
|
|
2739
|
+
payments = _ref.payments;
|
|
2740
|
+
|
|
2741
|
+
var _useState = useState(payments && payments[0]),
|
|
2742
|
+
selectedMethod = _useState[0],
|
|
2743
|
+
setSelectedMethod = _useState[1];
|
|
2744
|
+
|
|
2745
|
+
var _useForm = useForm(),
|
|
2746
|
+
control = _useForm.control,
|
|
2747
|
+
dirtyFields = _useForm.formState.dirtyFields,
|
|
2748
|
+
getValues = _useForm.getValues;
|
|
2749
|
+
|
|
2750
|
+
var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
|
|
2751
|
+
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');
|
|
2752
|
+
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2753
|
+
text: 'Payments Method',
|
|
2754
|
+
icon: 4
|
|
2755
|
+
}), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
|
|
2756
|
+
var _payment$name;
|
|
2757
|
+
|
|
2758
|
+
if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
|
|
2759
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
2760
|
+
key: i
|
|
2761
|
+
}, /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
2762
|
+
onClick: function onClick() {
|
|
2763
|
+
return setSelectedMethod(payment);
|
|
2764
|
+
}
|
|
2765
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2766
|
+
className: "circle"
|
|
2767
|
+
}, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
|
|
2768
|
+
className: "innerCircle"
|
|
2769
|
+
})), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), /*#__PURE__*/React__default.createElement(Grid, {
|
|
2770
|
+
container: true,
|
|
2771
|
+
rowSpacing: 2,
|
|
2772
|
+
paddingLeft: "1em",
|
|
2773
|
+
paddingBottom: '1em'
|
|
2774
|
+
}, Images === null || Images === void 0 ? void 0 : Images.map(function (img, i) {
|
|
2775
|
+
return /*#__PURE__*/React__default.createElement(Grid, {
|
|
2776
|
+
item: true,
|
|
2777
|
+
key: i,
|
|
2778
|
+
xs: 2.8,
|
|
2779
|
+
sm: 1.5
|
|
2780
|
+
}, /*#__PURE__*/React__default.createElement(CreditCard, {
|
|
2781
|
+
tabIndex: 1
|
|
2782
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
2783
|
+
src: "/images/" + img + ".png",
|
|
2784
|
+
alt: img.name
|
|
2785
|
+
})));
|
|
2786
|
+
})), /*#__PURE__*/React__default.createElement(CreditCardForm, {
|
|
2787
|
+
control: control
|
|
2788
|
+
}));
|
|
2789
|
+
} else {
|
|
2790
|
+
return /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
2791
|
+
onClick: function onClick() {
|
|
2792
|
+
return setSelectedMethod(payment);
|
|
2793
|
+
}
|
|
2794
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2795
|
+
className: "circle"
|
|
2796
|
+
}, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
|
|
2797
|
+
className: "innerCircle"
|
|
2798
|
+
})), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name));
|
|
2799
|
+
}
|
|
2800
|
+
}), /*#__PURE__*/React__default.createElement(ButtonRow, {
|
|
2780
2801
|
handleBack: handleBack,
|
|
2781
2802
|
handleNext: function handleNext() {
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
|
|
2785
|
-
console.log('clicked', getValues());
|
|
2786
|
-
setPaymentDetails(getValues());
|
|
2803
|
+
setPaymentDetails(selectedMethod, getValues());
|
|
2787
2804
|
|
|
2788
|
-
|
|
2789
|
-
}
|
|
2805
|
+
_handleNext();
|
|
2790
2806
|
},
|
|
2791
|
-
nextDisabled: ((_Object$
|
|
2807
|
+
nextDisabled: isCard && ((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 4
|
|
2792
2808
|
})));
|
|
2793
2809
|
};
|
|
2794
2810
|
|
|
@@ -2811,16 +2827,10 @@ var Step4 = function Step4(_ref) {
|
|
|
2811
2827
|
comments = _React$useState2[0],
|
|
2812
2828
|
setComments = _React$useState2[1];
|
|
2813
2829
|
|
|
2814
|
-
function Icon() {
|
|
2815
|
-
return /*#__PURE__*/React__default.createElement(MdOutlineStickyNote2, {
|
|
2816
|
-
className: "icon"
|
|
2817
|
-
});
|
|
2818
|
-
}
|
|
2819
|
-
|
|
2820
2830
|
var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
|
|
2821
2831
|
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2822
2832
|
text: 'Order Review',
|
|
2823
|
-
|
|
2833
|
+
icon: 5
|
|
2824
2834
|
}), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(Table$1, {
|
|
2825
2835
|
"aria-label": "customized table",
|
|
2826
2836
|
sx: {
|
|
@@ -3059,7 +3069,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3059
3069
|
placeOrder = _ref.placeOrder;
|
|
3060
3070
|
return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
|
|
3061
3071
|
className: "checkout"
|
|
3062
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
3072
|
+
}, /*#__PURE__*/React__default.createElement(Stack, {
|
|
3073
|
+
flexDirection: "column",
|
|
3074
|
+
alignItems: "flex-start"
|
|
3075
|
+
}, /*#__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) {
|
|
3063
3076
|
var words = item.text.split(' ');
|
|
3064
3077
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
3065
3078
|
className: currStep > i ? 'row checked' : 'row'
|
|
@@ -3181,7 +3194,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3181
3194
|
ordering: loading,
|
|
3182
3195
|
placeOrder: placeOrder
|
|
3183
3196
|
})));
|
|
3184
|
-
}))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3197
|
+
})))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
3185
3198
|
billingInformation: billingAddress,
|
|
3186
3199
|
shippingInformation: shippingAddress,
|
|
3187
3200
|
paymentMethod: selectedPaymentMethod,
|