@salesgenterp/ui-components 0.4.61 → 0.4.63

package/dist/index.js

@@ -21,7 +21,7 @@ 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 io5 = require('react-icons/io5');
+var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
 
 function _extends() {
@@ -41,6 +41,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
@@ -2749,91 +2764,142 @@ var Step2 = function Step2(_ref) {
 };
 
 var CreditCardForm = function CreditCardForm(_ref) {
-  var control = _ref.control;
+  var handleChange = _ref.handleChange,
+      handleFocus = _ref.handleFocus,
+      handleSave = _ref.handleSave;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
-    component: 'form',
     rowSpacing: 2,
+    component: 'form',
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      handleSave();
+    },
     paddingLeft: "1em",
     columnSpacing: 2,
     sx: {
-      paddingBottom: '1em'
+      paddingTop: '1em'
     }
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'cardName',
-      placeholder: "Card Holder's Name*",
-      control: control,
-      showIcon: function showIcon() {
-        return /*#__PURE__*/React__default.createElement(io5.IoPersonOutline, {
-          className: "icon"
-        });
-      }
-    }
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "name",
+    type: "text",
+    placeholder: "Card Holder's Name*"
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'cardNumber',
-      placeholder: 'Card Nubmers   xxxx-xxxx-xxxx-xxxx',
-      control: control,
-      showIcon: function showIcon() {
-        return /*#__PURE__*/React__default.createElement(bs.BsCreditCard, {
-          className: "icon"
-        });
-      },
-      type: 'number'
-    }
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "number",
+    type: "number",
+    placeholder: "Card Nubmers   xxxx-xxxx-xxxx-xxxx"
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 5
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'expiryDate ',
-      placeholder: 'Expiration Date  MM/YYYY',
-      control: control,
-      showIcon: function showIcon() {
-        return /*#__PURE__*/React__default.createElement(md.MdOutlineDateRange, {
-          className: "icon"
-        });
-      },
-      type: 'number'
-    }
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "expiry",
+    type: "number",
+    placeholder: "Expiration Date  MM/YYYY "
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 3.5
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'cvv',
-      placeholder: 'CVC/CVVV  ***',
-      control: control,
-      showIcon: function showIcon() {
-        return /*#__PURE__*/React__default.createElement(bi.BiLockAlt, {
-          className: "icon"
-        });
-      },
-      type: 'password'
-    }
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "cvc",
+    type: "number",
+    placeholder: "CVC/CVVV  ***"
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    padding: ".8em 0 0 0"
-  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
-    size: "small"
-  }), /*#__PURE__*/React__default.createElement("p", null, "Remember the card"))));
+  }));
 };
 
+var PaymentForm = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(PaymentForm, _React$Component);
+
+  function PaymentForm() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
+      cvc: '',
+      expiry: '',
+      focus: '',
+      name: '',
+      number: ''
+    };
+
+    _this.handleInputFocus = function (e) {
+      _this.setState({
+        focus: e.target.name
+      });
+    };
+
+    _this.handleInputChange = function (e) {
+      var _this$setState;
+
+      var _e$target = e.target,
+          name = _e$target.name,
+          value = _e$target.value;
+
+      _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
+    };
+
+    _this.handleSave = function (e) {
+      console.log(e);
+    };
+
+    return _this;
+  }
+
+  var _proto = PaymentForm.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React__default.createElement("div", {
+      id: "PaymentForm"
+    }, /*#__PURE__*/React__default.createElement(Cards, {
+      cvc: this.state.cvc,
+      expiry: this.state.expiry,
+      focused: this.state.focus,
+      name: this.state.name,
+      number: this.state.number
+    }), /*#__PURE__*/React__default.createElement(CreditCardForm, {
+      handleChange: this.handleInputChange,
+      handleFocus: this.handleInputFocus,
+      saved: false,
+      handleSave: this.props.handleSave(this.state)
+    }));
+  };
+
+  return PaymentForm;
+}(React__default.Component);
+
 var Step3 = function Step3(_ref) {
-  var _selectedMethod$name, _Object$keys;
+  var _selectedMethod$name;
 
   var handleBack = _ref.handleBack,
       _handleNext = _ref.handleNext,
@@ -2850,13 +2916,11 @@ var Step3 = function Step3(_ref) {
       useStoreCr = _useState2[0],
       setUseStoreCr = _useState2[1];
 
-  var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      dirtyFields = _useForm.formState.dirtyFields,
-      getValues = _useForm.getValues;
-
-  var Images = ['visa', 'mastercard', 'paypal', 'stripe'];
+  var _useState3 = React.useState(null),
+      card = _useState3[0],
+      setCard = _useState3[1];
   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');
+  console.log(card);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Payments Method',
     icon: 4
@@ -2904,28 +2968,10 @@ var Step3 = function Step3(_ref) {
         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',
-        style: storeCredits >= total && useStoreCr ? {
-          opacity: '.6'
-        } : {}
-      }, 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
+      })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement(PaymentForm, {
+        handleSave: function handleSave(data) {
+          return setCard(data);
+        }
       }));
     } else {
       return /*#__PURE__*/React__default.createElement(PaymentLi, {
@@ -2945,11 +2991,10 @@ var Step3 = function Step3(_ref) {
   }), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
-      setPaymentDetails(useStoreCr, selectedMethod, isCard && getValues());
+      setPaymentDetails(useStoreCr, selectedMethod, isCard && card);
 
       _handleNext();
-    },
-    nextDisabled: isCard && ((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) !== 4
+    }
   })));
 };