@salesgenterp/ui-components 0.4.37 → 0.4.38

package/dist/index.js

@@ -21,8 +21,8 @@ var cg = require('react-icons/cg');
 var md = require('react-icons/md');
 var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
-var fi = require('react-icons/fi');
 var io5 = require('react-icons/io5');
+var fi = require('react-icons/fi');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -2057,7 +2057,13 @@ var ButtonRowContainer = styled.div(_templateObject7$3 || (_templateObject7$3 =
 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) {
   return props.padding;
 });
-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"])));
+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) {
+  return props.hovered ? '#fff0ec' : '';
+}, function (props) {
+  return props.hovered ? '1px solid #fce1d9' : '';
+}, function (props) {
+  return props.hovered ? '5px' : '0';
+});
 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"])));
 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) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
@@ -2138,7 +2144,8 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
       icon = _ref.icon,
       single = _ref.single,
       closed = _ref.closed,
-      handleClick = _ref.handleClick;
+      handleClick = _ref.handleClick,
+      withoutIcon = _ref.withoutIcon;
   console.log("/images/checkout/vector-" + icon + ".svg");
   return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
     single: single
@@ -2152,12 +2159,12 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
   }, /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "row",
     alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement("img", {
+  }, !withoutIcon && /*#__PURE__*/React__default.createElement("img", {
     src: "/images/checkout/vector-" + icon + ".svg",
     alt: "vector",
     width: 18,
     height: 18
-  }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
+  }), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
     className: "dropIcon",
     style: closed ? {
       transform: 'rotate(-90deg)'
@@ -2429,11 +2436,14 @@ var AddressForm = function AddressForm(_ref) {
     sm: 8
   }, /*#__PURE__*/React__default.createElement(SaveButton, {
     type: "submit"
-  }, "save address")));
+  }, "Save address")));
 };
 
 var Step1 = function Step1(_ref) {
-  var addStore = _ref.addStore,
+  var handleBack = _ref.handleBack,
+      handleNext = _ref.handleNext,
+      setBilling = _ref.setBilling,
+      addStore = _ref.addStore,
       addStoreAddress = _ref.addStoreAddress,
       stores = _ref.stores,
       addresses = _ref.addresses,
@@ -2474,6 +2484,15 @@ var Step1 = function Step1(_ref) {
     resetAddress('billingAddress');
   };
 
+  var next = function next() {
+    setBilling({
+      store: selectedStore
+    }, {
+      billingAddress: selectedAddress
+    });
+    handleNext();
+  };
+
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'billing information',
     icon: 2
@@ -2519,101 +2538,107 @@ var Step1 = function Step1(_ref) {
     handleSubmit: handleSubmitAddress,
     onSubmit: addAddress,
     countries: countries
+  }), /*#__PURE__*/React__default.createElement(ButtonRow, {
+    handleBack: handleBack,
+    handleNext: function handleNext() {
+      next();
+    },
+    nextDisabled: !selectedStore || !selectedAddress || selectedStore === 99999999 || selectedAddress === 99999999
   })));
 };
 
 var Step2 = function Step2(_ref) {
-  var _Object$keys2;
-
   var handleBack = _ref.handleBack,
       _handleNext = _ref.handleNext,
       options = _ref.options,
       setShipping = _ref.setShipping,
       countries = _ref.countries,
-      setShippingMethod = _ref.setShippingMethod;
+      addShipping = _ref.addShipping,
+      showShipping = _ref.showShipping,
+      addresses = _ref.addresses;
 
   var _useForm = reactHookForm.useForm(),
       control = _useForm.control,
-      dirtyFields = _useForm.formState.dirtyFields,
-      getValues = _useForm.getValues;
+      handleSubmit = _useForm.handleSubmit,
+      resetField = _useForm.resetField,
+      watch = _useForm.watch;
 
   var _React$useState = React__default.useState(options[0]),
       method = _React$useState[0],
       setmethod = _React$useState[1];
 
-  function Icon() {
-    return /*#__PURE__*/React__default.createElement(fi.FiTruck, {
-      className: "icon"
-    });
-  }
+  var addressList = [].concat(addresses, [{
+    name: 'add shipping Address',
+    id: 99999999
+  }]);
+  var selectedAddress = watch('shippingAddress');
+
+  var onSubmit = function onSubmit(data) {
+    console.log(data);
+    addShipping(data);
+    resetField('shippingAddress');
+  };
 
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
-    text: 'shipping information',
-    Icon: Icon
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(AddressForm, {
-    countries: countries,
-    control: control
-  }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'city',
-      placeholder: 'City*',
-      control: control
+    text: showShipping ? 'shipping information' : 'shipping method',
+    icon: 3
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10,
+    sx: {
+      padding: '1em 0'
     }
-  }), ' ', /*#__PURE__*/React__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
-      name: 'city',
-      placeholder: 'City*',
-      control: control
-    }
-  }), /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    columnSpacing: 0.5,
-    rowSpacing: 2,
-    sx: {
-      margin: '1em 0'
+      name: 'shippingAddress',
+      placeholder: 'Select shipping Address ',
+      control: control,
+      List: addressList,
+      key: 'name'
     }
+  }))), selectedAddress === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
+    control: control,
+    onSubmit: onSubmit,
+    handleSubmit: handleSubmit,
+    countries: countries
+  }), /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
+    text: 'shipping method',
+    icon: 3,
+    withoutIcon: showShipping
+  })), /*#__PURE__*/React__default.createElement(material.Stack, {
+    flexDirection: "column",
+    width: "100%",
+    alignItems: 'flex-start',
+    paddingBottom: '2em'
   }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
-    var _option$name, _option$name$toLowerC;
-
-    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');
-    var replaced;
-
-    if (fedex) {
-      var _option$name2;
-
-      replaced = (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.replace(/fedex/i, ' ');
-    }
+    var _option$amount;
 
-    return /*#__PURE__*/React__default.createElement(material.Stack, {
-      flexDirection: "row",
-      justifyContent: "space-around",
-      aligItems: "center",
-      flexWrap: 'wrap'
-    }, /*#__PURE__*/React__default.createElement(DeliveryCard, {
+    return /*#__PURE__*/React__default.createElement(DeliveryOption, {
+      hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
       onClick: function onClick() {
-        return setmethod(option);
-      }
-    }, fedex && /*#__PURE__*/React__default.createElement("img", {
-      src: "/images/fedex.png",
-      alt: "fedex"
-    }), 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", {
+        setmethod(option);
+      },
+      key: i
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "circle"
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "inner"
     }, (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id) && /*#__PURE__*/React__default.createElement("span", {
-      className: "smallCircle"
-    }))));
+      className: "fill"
+    }))), /*#__PURE__*/React__default.createElement("p", null, option === null || option === void 0 ? void 0 : option.name), /*#__PURE__*/React__default.createElement("h6", {
+      className: "amount"
+    }, "$", option === null || option === void 0 ? void 0 : (_option$amount = option.amount) === null || _option$amount === void 0 ? void 0 : _option$amount.toFixed(2)));
   })), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
-      var _Object$keys;
+      setShipping(selectedAddress, method);
 
-      if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
-        setShipping(getValues());
-        setShippingMethod(method);
-
-        _handleNext();
-      }
+      _handleNext();
     },
-    nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
+    nextDisabled: showShipping && !selectedAddress || (selectedAddress === null || selectedAddress === void 0 ? void 0 : selectedAddress.id) === 99999999
   })));
 };
 
@@ -2687,7 +2712,7 @@ var Step3 = function Step3(_ref) {
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 10
+    md: 103
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardName',
@@ -2702,7 +2727,7 @@ var Step3 = function Step3(_ref) {
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 10
+    md: 103
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardNumber',
@@ -3016,9 +3041,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       userName = _ref.userName,
       addStore = _ref.addStore,
       addStoreAddress = _ref.addStoreAddress,
-      setBillingAddress = _ref.setBillingAddress,
-      setShippingAddress = _ref.setShippingAddress,
-      setShippingMethod = _ref.setShippingMethod,
+      setBilling = _ref.setBilling,
+      addShipping = _ref.addShipping,
+      showShipping = _ref.showShipping,
+      setShowShipping = _ref.setShowShipping,
       deliveryOptions = _ref.deliveryOptions,
       countries = _ref.countries,
       setPaymentDetails = _ref.setPaymentDetails,
@@ -3030,7 +3056,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       selectedPaymentMethod = _ref.selectedPaymentMethod,
       userStores = _ref.userStores,
       userAddresses = _ref.userAddresses,
-      showShipping = _ref.showShipping,
       clickRedirect = _ref.clickRedirect,
       ordering = _ref.ordering,
       deliveryCharges = _ref.deliveryCharges,
@@ -3112,8 +3137,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       currstep: currStep,
       handleBack: handleBack,
       handleNext: handleNext,
-      setShipping: setShipping,
-      setBillingAddress: setBillingAddress,
+      setShipping: setShowShipping,
+      setBilling: setBilling,
       stores: userStores,
       addresses: userAddresses,
       addStore: addStore,
@@ -3129,9 +3154,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleNext: handleNext,
       options: deliveryOptions,
       countries: countries,
-      setShipping: setShippingAddress,
-      setShippingMethod: setShippingMethod,
-      showShipping: showShipping
+      setShipping: setShipping,
+      showShipping: showShipping,
+      addresses: userAddresses,
+      addShipping: addShipping
     })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0