@salesgenterp/ui-components 0.4.37 → 0.4.39

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.
Files changed (5) hide show
  1. package/dist/index.js +189 -153
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +190 -154
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -21,8 +21,8 @@ var cg = require('react-icons/cg');
21
21
  var md = require('react-icons/md');
22
22
  var reactHookForm = require('react-hook-form');
23
23
  var hi = require('react-icons/hi');
24
- var fi = require('react-icons/fi');
25
24
  var io5 = require('react-icons/io5');
25
+ var fi = require('react-icons/fi');
26
26
 
27
27
  function _extends() {
28
28
  _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -2020,7 +2020,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2020
2020
  }))));
2021
2021
  };
2022
2022
 
2023
- var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2023
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
2024
2024
  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
2025
  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
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) {
@@ -2057,15 +2057,22 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
2057
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) {
2058
2058
  return props.padding;
2059
2059
  });
2060
- var DeliveryCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n margin-bottom: 1em;\n /* padding: 1em 0.4em; */\n cursor: pointer;\n img {\n width: 38px;\n height: 17px;\n margin-bottom: -5px;\n margin-right: 4px;\n }\n p {\n font-size: 10px;\n }\n .circle {\n width: 10px;\n height: 10px;\n border-radius: 1px solid black;\n background-color: white;\n display: grid;\n place-items: center;\n border-radius: 50%;\n margin-left: auto;\n margin-left: 5px;\n .smallCircle {\n width: 4px;\n height: 4px;\n background: black;\n border-radius: 50%;\n }\n }\n"])));
2061
- 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 &:hover,\n &:focus {\n border: 1px solid black;\n }\n"])));
2062
- var StyledTableRow = styled(material.TableRow)(_templateObject11 || (_templateObject11 = _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) {
2060
+ 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 cursor: pointer;\n height: 14px;\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) {
2061
+ return props.hovered ? '#fff0ec' : '';
2062
+ }, function (props) {
2063
+ return props.hovered ? '1px solid #fce1d9' : '';
2064
+ }, function (props) {
2065
+ return props.hovered ? '5px' : '0';
2066
+ });
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(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) {
2063
2070
  return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2064
2071
  });
2065
- var StyledTableCell = styled(material.TableCell)(_templateObject12 || (_templateObject12 = _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
+ 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) {
2066
2073
  return props.noSmall ? 'none' : '';
2067
2074
  });
2068
- var BottomGrid = styled(material.Grid)(_templateObject13 || (_templateObject13 = _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
+ 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"])));
2069
2076
 
2070
2077
  var CheckoutInput = function CheckoutInput(_ref) {
2071
2078
  var controlls = _ref.controlls;
@@ -2138,7 +2145,8 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2138
2145
  icon = _ref.icon,
2139
2146
  single = _ref.single,
2140
2147
  closed = _ref.closed,
2141
- handleClick = _ref.handleClick;
2148
+ handleClick = _ref.handleClick,
2149
+ withoutIcon = _ref.withoutIcon;
2142
2150
  console.log("/images/checkout/vector-" + icon + ".svg");
2143
2151
  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
2144
2152
  single: single
@@ -2152,12 +2160,12 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2152
2160
  }, /*#__PURE__*/React__default.createElement(material.Stack, {
2153
2161
  flexDirection: "row",
2154
2162
  alignItems: "center"
2155
- }, /*#__PURE__*/React__default.createElement("img", {
2163
+ }, !withoutIcon && /*#__PURE__*/React__default.createElement("img", {
2156
2164
  src: "/images/checkout/vector-" + icon + ".svg",
2157
2165
  alt: "vector",
2158
2166
  width: 18,
2159
2167
  height: 18
2160
- }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2168
+ }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
2161
2169
  className: "dropIcon",
2162
2170
  style: closed ? {
2163
2171
  transform: 'rotate(-90deg)'
@@ -2429,11 +2437,14 @@ var AddressForm = function AddressForm(_ref) {
2429
2437
  sm: 8
2430
2438
  }, /*#__PURE__*/React__default.createElement(SaveButton, {
2431
2439
  type: "submit"
2432
- }, "save address")));
2440
+ }, "Save address")));
2433
2441
  };
2434
2442
 
2435
2443
  var Step1 = function Step1(_ref) {
2436
- var addStore = _ref.addStore,
2444
+ var handleBack = _ref.handleBack,
2445
+ handleNext = _ref.handleNext,
2446
+ setBilling = _ref.setBilling,
2447
+ addStore = _ref.addStore,
2437
2448
  addStoreAddress = _ref.addStoreAddress,
2438
2449
  stores = _ref.stores,
2439
2450
  addresses = _ref.addresses,
@@ -2474,6 +2485,15 @@ var Step1 = function Step1(_ref) {
2474
2485
  resetAddress('billingAddress');
2475
2486
  };
2476
2487
 
2488
+ var next = function next() {
2489
+ setBilling({
2490
+ store: selectedStore
2491
+ }, {
2492
+ billingAddress: selectedAddress
2493
+ });
2494
+ handleNext();
2495
+ };
2496
+
2477
2497
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2478
2498
  text: 'billing information',
2479
2499
  icon: 2
@@ -2519,167 +2539,117 @@ var Step1 = function Step1(_ref) {
2519
2539
  handleSubmit: handleSubmitAddress,
2520
2540
  onSubmit: addAddress,
2521
2541
  countries: countries
2542
+ }), /*#__PURE__*/React__default.createElement(ButtonRow, {
2543
+ handleBack: handleBack,
2544
+ handleNext: function handleNext() {
2545
+ next();
2546
+ },
2547
+ nextDisabled: !selectedStore || !selectedAddress || selectedStore === 99999999 || selectedAddress === 99999999
2522
2548
  })));
2523
2549
  };
2524
2550
 
2525
2551
  var Step2 = function Step2(_ref) {
2526
- var _Object$keys2;
2527
-
2528
2552
  var handleBack = _ref.handleBack,
2529
2553
  _handleNext = _ref.handleNext,
2530
2554
  options = _ref.options,
2531
2555
  setShipping = _ref.setShipping,
2532
2556
  countries = _ref.countries,
2533
- setShippingMethod = _ref.setShippingMethod;
2557
+ addShipping = _ref.addShipping,
2558
+ showShipping = _ref.showShipping,
2559
+ addresses = _ref.addresses;
2534
2560
 
2535
2561
  var _useForm = reactHookForm.useForm(),
2536
2562
  control = _useForm.control,
2537
- dirtyFields = _useForm.formState.dirtyFields,
2538
- getValues = _useForm.getValues;
2563
+ handleSubmit = _useForm.handleSubmit,
2564
+ resetField = _useForm.resetField,
2565
+ watch = _useForm.watch;
2539
2566
 
2540
2567
  var _React$useState = React__default.useState(options[0]),
2541
2568
  method = _React$useState[0],
2542
2569
  setmethod = _React$useState[1];
2543
2570
 
2544
- function Icon() {
2545
- return /*#__PURE__*/React__default.createElement(fi.FiTruck, {
2546
- className: "icon"
2547
- });
2548
- }
2571
+ var addressList = [].concat(addresses, [{
2572
+ name: 'add shipping Address',
2573
+ id: 99999999
2574
+ }]);
2575
+ var selectedAddress = watch('shippingAddress');
2576
+
2577
+ var onSubmit = function onSubmit(data) {
2578
+ console.log(data);
2579
+ addShipping(data);
2580
+ resetField('shippingAddress');
2581
+ };
2549
2582
 
2550
2583
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2551
- text: 'shipping information',
2552
- Icon: Icon
2553
- }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(AddressForm, {
2554
- countries: countries,
2555
- control: control
2556
- }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
2557
- controlls: {
2558
- name: 'city',
2559
- placeholder: 'City*',
2560
- control: control
2584
+ text: showShipping ? 'shipping information' : 'shipping method',
2585
+ icon: 3
2586
+ }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2587
+ container: true
2588
+ }, /*#__PURE__*/React__default.createElement(material.Grid, {
2589
+ item: true,
2590
+ xs: 12,
2591
+ sm: 10,
2592
+ sx: {
2593
+ padding: '1em 0'
2561
2594
  }
2562
- }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
2595
+ }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
2563
2596
  controlls: {
2564
- name: 'city',
2565
- placeholder: 'City*',
2566
- control: control
2567
- }
2568
- }), /*#__PURE__*/React__default.createElement(material.Grid, {
2569
- container: true,
2570
- columnSpacing: 0.5,
2571
- rowSpacing: 2,
2572
- sx: {
2573
- margin: '1em 0'
2597
+ name: 'shippingAddress',
2598
+ placeholder: 'Select shipping Address ',
2599
+ control: control,
2600
+ List: addressList,
2601
+ key: 'name'
2574
2602
  }
2603
+ }))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
2604
+ control: control,
2605
+ onSubmit: onSubmit,
2606
+ handleSubmit: handleSubmit,
2607
+ countries: countries
2608
+ }), /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2609
+ text: 'shipping method',
2610
+ icon: 3,
2611
+ withoutIcon: showShipping
2612
+ })), /*#__PURE__*/React__default.createElement(material.Stack, {
2613
+ flexDirection: "column",
2614
+ width: "100%",
2615
+ alignItems: 'flex-start',
2616
+ paddingBottom: '2em'
2575
2617
  }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2576
- var _option$name, _option$name$toLowerC;
2577
-
2578
- var fedex = option === null || option === void 0 ? void 0 : (_option$name = option.name) === null || _option$name === void 0 ? void 0 : (_option$name$toLowerC = _option$name.toLowerCase()) === null || _option$name$toLowerC === void 0 ? void 0 : _option$name$toLowerC.includes('fedex');
2579
- var replaced;
2618
+ var _option$amount;
2580
2619
 
2581
- if (fedex) {
2582
- var _option$name2;
2583
-
2584
- replaced = (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.replace(/fedex/i, ' ');
2585
- }
2586
-
2587
- return /*#__PURE__*/React__default.createElement(material.Stack, {
2588
- flexDirection: "row",
2589
- justifyContent: "space-around",
2590
- aligItems: "center",
2591
- flexWrap: 'wrap'
2592
- }, /*#__PURE__*/React__default.createElement(DeliveryCard, {
2620
+ return /*#__PURE__*/React__default.createElement(DeliveryOption, {
2621
+ hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
2593
2622
  onClick: function onClick() {
2594
- return setmethod(option);
2595
- }
2596
- }, fedex && /*#__PURE__*/React__default.createElement("img", {
2597
- src: "/images/fedex.png",
2598
- alt: "fedex"
2599
- }), fedex ? /*#__PURE__*/React__default.createElement("p", null, replaced) : /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("p", null, option.name)), /*#__PURE__*/React__default.createElement("span", {
2623
+ setmethod(option);
2624
+ },
2625
+ key: i
2626
+ }, /*#__PURE__*/React__default.createElement("div", {
2600
2627
  className: "circle"
2628
+ }, /*#__PURE__*/React__default.createElement("span", {
2629
+ className: "inner"
2601
2630
  }, (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id) && /*#__PURE__*/React__default.createElement("span", {
2602
- className: "smallCircle"
2603
- }))));
2631
+ className: "fill"
2632
+ }))), /*#__PURE__*/React__default.createElement("p", null, option === null || option === void 0 ? void 0 : option.name), /*#__PURE__*/React__default.createElement("h6", {
2633
+ className: "amount"
2634
+ }, "$", option === null || option === void 0 ? void 0 : (_option$amount = option.amount) === null || _option$amount === void 0 ? void 0 : _option$amount.toFixed(2)));
2604
2635
  })), /*#__PURE__*/React__default.createElement(ButtonRow, {
2605
2636
  handleBack: handleBack,
2606
2637
  handleNext: function handleNext() {
2607
- var _Object$keys;
2608
-
2609
- if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
2610
- setShipping(getValues());
2611
- setShippingMethod(method);
2638
+ setShipping(selectedAddress, method);
2612
2639
 
2613
- _handleNext();
2614
- }
2640
+ _handleNext();
2615
2641
  },
2616
- nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
2642
+ nextDisabled: showShipping && !selectedAddress || (selectedAddress === null || selectedAddress === void 0 ? void 0 : selectedAddress.id) === 99999999
2617
2643
  })));
2618
2644
  };
2619
2645
 
2620
- var Step3 = function Step3(_ref) {
2621
- var _Object$keys2;
2622
-
2623
- var handleBack = _ref.handleBack,
2624
- _handleNext = _ref.handleNext,
2625
- setPaymentDetails = _ref.setPaymentDetails,
2626
- payments = _ref.payments;
2627
-
2628
- var _useForm = reactHookForm.useForm(),
2629
- control = _useForm.control,
2630
- handleSubmit = _useForm.handleSubmit,
2631
- dirtyFields = _useForm.formState.dirtyFields,
2632
- getValues = _useForm.getValues;
2633
-
2634
- var onSubmit = function onSubmit(data) {
2635
- console.log(data);
2636
- };
2637
-
2638
- function Icon() {
2639
- return /*#__PURE__*/React__default.createElement(bi.BiWallet, {
2640
- className: "icon"
2641
- });
2642
- }
2643
-
2644
- var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
2645
- return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2646
- text: 'Payments Method',
2647
- Icon: Icon
2648
- }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
2649
- container: true,
2650
- rowSpacing: 2,
2651
- sx: {
2652
- margin: '1.5em 0'
2653
- }
2654
- }, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
2655
- var _src;
2656
-
2657
- var src = payment === null || payment === void 0 ? void 0 : payment.name;
2658
-
2659
- if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
2660
- if (src !== 'masterCard') {
2661
- src = 'visa';
2662
- }
2663
- } else if (!Images.includes(src)) {
2664
- src = 'none';
2665
- }
2666
-
2667
- return /*#__PURE__*/React__default.createElement(material.Grid, {
2668
- item: true,
2669
- key: i,
2670
- xs: 2.8,
2671
- sm: 1.5
2672
- }, /*#__PURE__*/React__default.createElement(CreditCard, {
2673
- tabIndex: 1
2674
- }, src !== 'none' ? /*#__PURE__*/React__default.createElement("img", {
2675
- src: "/images/" + src + ".png",
2676
- alt: payment.name
2677
- }) : /*#__PURE__*/React__default.createElement("p", null, payment.name)));
2678
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2646
+ var CreditCardForm = function CreditCardForm(_ref) {
2647
+ var control = _ref.control;
2648
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
2679
2649
  container: true,
2680
2650
  component: 'form',
2681
- onSubmit: handleSubmit(onSubmit),
2682
2651
  rowSpacing: 2,
2652
+ paddingLeft: "1em",
2683
2653
  columnSpacing: 2,
2684
2654
  sx: {
2685
2655
  paddingBottom: '1em'
@@ -2754,19 +2724,84 @@ var Step3 = function Step3(_ref) {
2754
2724
  padding: ".8em 0 0 0"
2755
2725
  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
2756
2726
  size: "small"
2757
- }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")))), /*#__PURE__*/React__default.createElement(ButtonRow, {
2727
+ }), /*#__PURE__*/React__default.createElement("p", null, "Remember the card"))));
2728
+ };
2729
+
2730
+ var Step3 = function Step3(_ref) {
2731
+ var _selectedMethod$name, _Object$keys;
2732
+
2733
+ var handleBack = _ref.handleBack,
2734
+ _handleNext = _ref.handleNext,
2735
+ setPaymentDetails = _ref.setPaymentDetails,
2736
+ payments = _ref.payments;
2737
+
2738
+ var _useState = React.useState(payments && payments[0]),
2739
+ selectedMethod = _useState[0],
2740
+ setSelectedMethod = _useState[1];
2741
+
2742
+ var _useForm = reactHookForm.useForm(),
2743
+ control = _useForm.control,
2744
+ dirtyFields = _useForm.formState.dirtyFields,
2745
+ getValues = _useForm.getValues;
2746
+
2747
+ var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
2748
+ 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');
2749
+ return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2750
+ text: 'Payments Method',
2751
+ icon: 4
2752
+ }), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
2753
+ var _payment$name;
2754
+
2755
+ if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
2756
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
2757
+ key: i
2758
+ }, /*#__PURE__*/React__default.createElement(PaymentLi, {
2759
+ onClick: function onClick() {
2760
+ return setSelectedMethod(payment);
2761
+ }
2762
+ }, /*#__PURE__*/React__default.createElement("div", {
2763
+ className: "circle"
2764
+ }, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
2765
+ className: "innerCircle"
2766
+ })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), /*#__PURE__*/React__default.createElement(material.Grid, {
2767
+ container: true,
2768
+ rowSpacing: 2,
2769
+ paddingLeft: "1em",
2770
+ paddingBottom: '1em'
2771
+ }, Images === null || Images === void 0 ? void 0 : Images.map(function (img, i) {
2772
+ return /*#__PURE__*/React__default.createElement(material.Grid, {
2773
+ item: true,
2774
+ key: i,
2775
+ xs: 2.8,
2776
+ sm: 1.5
2777
+ }, /*#__PURE__*/React__default.createElement(CreditCard, {
2778
+ tabIndex: 1
2779
+ }, /*#__PURE__*/React__default.createElement("img", {
2780
+ src: "/images/" + img + ".png",
2781
+ alt: img.name
2782
+ })));
2783
+ })), /*#__PURE__*/React__default.createElement(CreditCardForm, {
2784
+ control: control
2785
+ }));
2786
+ } else {
2787
+ return /*#__PURE__*/React__default.createElement(PaymentLi, {
2788
+ onClick: function onClick() {
2789
+ return setSelectedMethod(payment);
2790
+ }
2791
+ }, /*#__PURE__*/React__default.createElement("div", {
2792
+ className: "circle"
2793
+ }, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
2794
+ className: "innerCircle"
2795
+ })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name));
2796
+ }
2797
+ }), /*#__PURE__*/React__default.createElement(ButtonRow, {
2758
2798
  handleBack: handleBack,
2759
2799
  handleNext: function handleNext() {
2760
- var _Object$keys;
2761
-
2762
- if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
2763
- console.log('clicked', getValues());
2764
- setPaymentDetails(getValues());
2800
+ setPaymentDetails(selectedMethod, getValues());
2765
2801
 
2766
- _handleNext();
2767
- }
2802
+ _handleNext();
2768
2803
  },
2769
- nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
2804
+ nextDisabled: isCard && ((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 4
2770
2805
  })));
2771
2806
  };
2772
2807
 
@@ -3016,9 +3051,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3016
3051
  userName = _ref.userName,
3017
3052
  addStore = _ref.addStore,
3018
3053
  addStoreAddress = _ref.addStoreAddress,
3019
- setBillingAddress = _ref.setBillingAddress,
3020
- setShippingAddress = _ref.setShippingAddress,
3021
- setShippingMethod = _ref.setShippingMethod,
3054
+ setBilling = _ref.setBilling,
3055
+ addShipping = _ref.addShipping,
3056
+ showShipping = _ref.showShipping,
3057
+ setShowShipping = _ref.setShowShipping,
3022
3058
  deliveryOptions = _ref.deliveryOptions,
3023
3059
  countries = _ref.countries,
3024
3060
  setPaymentDetails = _ref.setPaymentDetails,
@@ -3030,7 +3066,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3030
3066
  selectedPaymentMethod = _ref.selectedPaymentMethod,
3031
3067
  userStores = _ref.userStores,
3032
3068
  userAddresses = _ref.userAddresses,
3033
- showShipping = _ref.showShipping,
3034
3069
  clickRedirect = _ref.clickRedirect,
3035
3070
  ordering = _ref.ordering,
3036
3071
  deliveryCharges = _ref.deliveryCharges,
@@ -3112,8 +3147,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3112
3147
  currstep: currStep,
3113
3148
  handleBack: handleBack,
3114
3149
  handleNext: handleNext,
3115
- setShipping: setShipping,
3116
- setBillingAddress: setBillingAddress,
3150
+ setShipping: setShowShipping,
3151
+ setBilling: setBilling,
3117
3152
  stores: userStores,
3118
3153
  addresses: userAddresses,
3119
3154
  addStore: addStore,
@@ -3129,9 +3164,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3129
3164
  handleNext: handleNext,
3130
3165
  options: deliveryOptions,
3131
3166
  countries: countries,
3132
- setShipping: setShippingAddress,
3133
- setShippingMethod: setShippingMethod,
3134
- showShipping: showShipping
3167
+ setShipping: setShipping,
3168
+ showShipping: showShipping,
3169
+ addresses: userAddresses,
3170
+ addShipping: addShipping
3135
3171
  })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
3136
3172
  sx: {
3137
3173
  padding: 0