@salesgenterp/ui-components 0.4.38 → 0.4.39

package/dist/index.js

@@ -2020,7 +2020,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
   }))));
 };
 
-var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 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"])));
 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"])));
 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) {
@@ -2064,14 +2064,15 @@ var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedT
 }, 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) {
+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"])));
+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"])));
+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) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
 });
-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) {
+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) {
   return props.noSmall ? 'none' : '';
 });
-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"])));
+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"])));
 
 var CheckoutInput = function CheckoutInput(_ref) {
   var controlls = _ref.controlls;
@@ -2642,69 +2643,13 @@ var Step2 = function Step2(_ref) {
   })));
 };
 
-var Step3 = function Step3(_ref) {
-  var _Object$keys2;
-
-  var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      setPaymentDetails = _ref.setPaymentDetails,
-      payments = _ref.payments;
-
-  var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit,
-      dirtyFields = _useForm.formState.dirtyFields,
-      getValues = _useForm.getValues;
-
-  var onSubmit = function onSubmit(data) {
-    console.log(data);
-  };
-
-  function Icon() {
-    return /*#__PURE__*/React__default.createElement(bi.BiWallet, {
-      className: "icon"
-    });
-  }
-
-  var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
-  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
-    text: 'Payments Method',
-    Icon: Icon
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    rowSpacing: 2,
-    sx: {
-      margin: '1.5em 0'
-    }
-  }, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
-    var _src;
-
-    var src = payment === null || payment === void 0 ? void 0 : payment.name;
-
-    if ((_src = src) !== null && _src !== void 0 && _src.toLowerCase().includes('card')) {
-      if (src !== 'masterCard') {
-        src = 'visa';
-      }
-    } else if (!Images.includes(src)) {
-      src = 'none';
-    }
-
-    return /*#__PURE__*/React__default.createElement(material.Grid, {
-      item: true,
-      key: i,
-      xs: 2.8,
-      sm: 1.5
-    }, /*#__PURE__*/React__default.createElement(CreditCard, {
-      tabIndex: 1
-    }, src !== 'none' ? /*#__PURE__*/React__default.createElement("img", {
-      src: "/images/" + src + ".png",
-      alt: payment.name
-    }) : /*#__PURE__*/React__default.createElement("p", null, payment.name)));
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+var CreditCardForm = function CreditCardForm(_ref) {
+  var control = _ref.control;
+  return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     component: 'form',
-    onSubmit: handleSubmit(onSubmit),
     rowSpacing: 2,
+    paddingLeft: "1em",
     columnSpacing: 2,
     sx: {
       paddingBottom: '1em'
@@ -2712,7 +2657,7 @@ var Step3 = function Step3(_ref) {
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 103
+    md: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardName',
@@ -2727,7 +2672,7 @@ var Step3 = function Step3(_ref) {
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 103
+    md: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardNumber',
@@ -2779,19 +2724,84 @@ var Step3 = function Step3(_ref) {
     padding: ".8em 0 0 0"
   }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     size: "small"
-  }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")))), /*#__PURE__*/React__default.createElement(ButtonRow, {
+  }), /*#__PURE__*/React__default.createElement("p", null, "Remember the card"))));
+};
+
+var Step3 = function Step3(_ref) {
+  var _selectedMethod$name, _Object$keys;
+
+  var handleBack = _ref.handleBack,
+      _handleNext = _ref.handleNext,
+      setPaymentDetails = _ref.setPaymentDetails,
+      payments = _ref.payments;
+
+  var _useState = React.useState(payments && payments[0]),
+      selectedMethod = _useState[0],
+      setSelectedMethod = _useState[1];
+
+  var _useForm = reactHookForm.useForm(),
+      control = _useForm.control,
+      dirtyFields = _useForm.formState.dirtyFields,
+      getValues = _useForm.getValues;
+
+  var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
+  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');
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
+    text: 'Payments Method',
+    icon: 4
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
+    var _payment$name;
+
+    if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: i
+      }, /*#__PURE__*/React__default.createElement(PaymentLi, {
+        onClick: function onClick() {
+          return setSelectedMethod(payment);
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "circle"
+      }, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
+        className: "innerCircle"
+      })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), /*#__PURE__*/React__default.createElement(material.Grid, {
+        container: true,
+        rowSpacing: 2,
+        paddingLeft: "1em",
+        paddingBottom: '1em'
+      }, Images === null || Images === void 0 ? void 0 : Images.map(function (img, i) {
+        return /*#__PURE__*/React__default.createElement(material.Grid, {
+          item: true,
+          key: i,
+          xs: 2.8,
+          sm: 1.5
+        }, /*#__PURE__*/React__default.createElement(CreditCard, {
+          tabIndex: 1
+        }, /*#__PURE__*/React__default.createElement("img", {
+          src: "/images/" + img + ".png",
+          alt: img.name
+        })));
+      })), /*#__PURE__*/React__default.createElement(CreditCardForm, {
+        control: control
+      }));
+    } else {
+      return /*#__PURE__*/React__default.createElement(PaymentLi, {
+        onClick: function onClick() {
+          return setSelectedMethod(payment);
+        }
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "circle"
+      }, (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement("span", {
+        className: "innerCircle"
+      })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name));
+    }
+  }), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
-      var _Object$keys;
-
-      if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
-        console.log('clicked', getValues());
-        setPaymentDetails(getValues());
+      setPaymentDetails(selectedMethod, getValues());
 
-        _handleNext();
-      }
+      _handleNext();
     },
-    nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
+    nextDisabled: isCard && ((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 4
   })));
 };