@salesgenterp/ui-components 0.4.187 → 0.4.188

package/dist/index.css

@@ -68,6 +68,7 @@ input[type='number'] {
   /* background: #fff0ec; //orlando */
   background: rgba(240, 249, 240, 1);
   border-radius: 10px;
+  border: 1px solid gray;
 }
 ._1vD5N ._yC7t2 {
   /* background: #fff0ec; //orlando */

package/dist/index.js

@@ -2885,10 +2885,17 @@ var CreditCardForm = function CreditCardForm(_ref) {
     handleSave = _ref.handleSave,
     showError = _ref.showError,
     data = _ref.data;
-  var name = data.name,
-    number = data.number,
-    cvc = data.cvc,
-    expiry = data.expiry;
+  var firstName = data.firstName,
+    lastName = data.lastName,
+    cardNumber = data.cardNumber,
+    cvv = data.cvv,
+    expirationMonth = data.expirationMonth,
+    expirationYear = data.expirationYear,
+    address = data.address,
+    countryId = data.countryId,
+    stateId = data.stateId,
+    city = data.city,
+    zipcode = data.zipcode;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
@@ -2905,37 +2912,57 @@ var CreditCardForm = function CreditCardForm(_ref) {
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 10
+    md: 6
   }, /*#__PURE__*/React__default.createElement(material.TextField, {
     required: true,
     fullWidth: true,
     onChange: handleChange,
     onFocus: handleFocus,
-    name: "name",
+    name: "firstName",
     type: "text",
-    value: name,
-    placeholder: "Card Holder's Name*"
-  }), showError && name.length < 3 ? /*#__PURE__*/React__default.createElement("p", {
+    value: firstName,
+    placeholder: "Card Holder's First Name*"
+  }), showError && (firstName === null || firstName === void 0 ? void 0 : firstName.length) < 3 ? /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: 'red',
       marginLeft: '.5em',
       paddingTop: '.4em',
       fontSize: '.95em'
     }
-  }, "Please enter a valid Card Holder's Name") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, "Please enter a valid Card Holder's First Name") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    md: 10
+    md: 6
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "lastName",
+    type: "text",
+    value: lastName,
+    placeholder: "Card Holder's Last Name*"
+  }), showError && (lastName === null || lastName === void 0 ? void 0 : lastName.length) < 3 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid Card Holder's Last Name") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 12
   }, /*#__PURE__*/React__default.createElement(material.TextField, {
     required: true,
     fullWidth: true,
     onChange: handleChange,
     onFocus: handleFocus,
-    name: "number",
+    name: "cardNumber",
     type: "number",
-    value: number,
+    value: cardNumber,
     placeholder: "Card Nubmers   xxxx-xxxx-xxxx-xxxx"
-  }), showError && number.length < 14 || showError && number.length > 16 ? /*#__PURE__*/React__default.createElement("p", {
+  }), showError && (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) < 14 || showError && (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.length) > 16 ? /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: 'red',
       marginLeft: '.5em',
@@ -2945,37 +2972,137 @@ var CreditCardForm = function CreditCardForm(_ref) {
   }, "Please enter a valid card Number") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    sm: 5
+    sm: 4
   }, /*#__PURE__*/React__default.createElement(material.TextField, {
     required: true,
     fullWidth: true,
     onChange: handleChange,
     onFocus: handleFocus,
-    name: "expiry",
+    name: "expirationMonth",
     type: "number",
-    value: expiry,
-    placeholder: "Expiration Date  MM/YYYY "
-  }), showError && expiry.length < 4 || showError && expiry.length > 6 ? /*#__PURE__*/React__default.createElement("p", {
+    value: expirationMonth,
+    placeholder: "Expiration Month  MM "
+  }), showError && (expirationMonth === null || expirationMonth === void 0 ? void 0 : expirationMonth.length) !== 2 ? /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: 'red',
       marginLeft: '.5em',
       paddingTop: '.4em',
       fontSize: '.95em'
     }
-  }, "Please enter a valid date.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, "Please enter a valid Month.") : ''), ' ', /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
-    sm: 3.5
+    sm: 4
   }, /*#__PURE__*/React__default.createElement(material.TextField, {
     required: true,
     fullWidth: true,
     onChange: handleChange,
     onFocus: handleFocus,
-    name: "cvc",
+    name: "expirationYear",
+    type: "number",
+    value: expirationYear,
+    placeholder: "Expiration Year YY "
+  }), showError && (expirationYear === null || expirationYear === void 0 ? void 0 : expirationYear.length) !== 2 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid year.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 4
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "cvv",
     type: "number",
     placeholder: "CVC/CVV  ***",
-    value: cvc
-  }), showError && cvc.length < 3 || showError && cvc.length > 4 ? /*#__PURE__*/React__default.createElement("p", {
+    value: cvv
+  }), showError && (cvv === null || cvv === void 0 ? void 0 : cvv.length) < 3 || showError && (cvv === null || cvv === void 0 ? void 0 : cvv.length) > 4 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid cvv.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 12
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "address",
+    type: "text",
+    value: address,
+    placeholder: "Address"
+  }), showError && (address === null || address === void 0 ? void 0 : address.length) < 1 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid Address") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "countryId",
+    type: "number",
+    value: countryId,
+    placeholder: "Country"
+  }), showError && !countryId ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a country.") : ''), ' ', /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "stateId",
+    type: "number",
+    value: stateId,
+    placeholder: "State"
+  }), showError && !stateId ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a State.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "city",
+    type: "text",
+    placeholder: "CIty",
+    value: city
+  }), showError && (city === null || city === void 0 ? void 0 : city.length) < 1 ? /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: 'red',
       marginLeft: '.5em',
@@ -2983,6 +3110,26 @@ var CreditCardForm = function CreditCardForm(_ref) {
       fontSize: '.95em'
     }
   }, "Please enter a valid cvv.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 3
+  }, /*#__PURE__*/React__default.createElement(material.TextField, {
+    required: true,
+    fullWidth: true,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    name: "zipcode",
+    type: "number",
+    placeholder: "Zip code",
+    value: zipcode
+  }), showError && (zipcode === null || zipcode === void 0 ? void 0 : zipcode.length) < 1 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a Zip code.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
   }, /*#__PURE__*/React__default.createElement(SaveButton, {
@@ -3009,11 +3156,17 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      cvc: '',
-      expiry: '',
-      focus: '',
-      name: '',
-      number: '',
+      firstName: '',
+      lastName: '',
+      cardNumber: '',
+      cvv: '',
+      expirationMonth: '',
+      expirationYear: '',
+      address: '',
+      countryId: '',
+      stateId: '',
+      city: '',
+      zipcode: '',
       showError: false
     };
     _this.handleInputFocus = function (e) {
@@ -3026,27 +3179,9 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
       var _e$target = e.target,
         name = _e$target.name,
         value = _e$target.value;
-      console.log(name);
       _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
     };
     _this.handleSave = function (e) {
-      var _this$state = _this.state,
-        name = _this$state.name,
-        number = _this$state.number,
-        cvc = _this$state.cvc,
-        expiry = _this$state.expiry;
-      if (name.length < 3) return _this.setState({
-        showError: true
-      });
-      if (number.length < 14 || number.length > 16) return _this.setState({
-        showError: true
-      });
-      if (cvc.length < 3 || cvc.length > 4) return _this.setState({
-        showError: true
-      });
-      if (expiry.length < 4 || expiry.length > 6) return _this.setState({
-        showError: true
-      });
       _this.props.handleSave(_this.state);
     };
     return _this;
@@ -3058,10 +3193,10 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
       id: "PaymentForm"
     }, /*#__PURE__*/React__default.createElement(Cards, {
       cvc: this.state.cvc,
-      expiry: this.state.expiry,
+      expiry: "" + this.state.expirationMonth + this.state.expirationYear,
       focused: this.state.focus,
-      name: this.state.name,
-      number: this.state.number
+      name: this.state.firstName + " " + this.state.lastName,
+      number: this.state.cardNumber
     }), /*#__PURE__*/React__default.createElement(CreditCardForm, {
       handleChange: this.handleInputChange,
       handleFocus: this.handleInputFocus,
@@ -7217,7 +7352,7 @@ var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
     apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
     _ref$token = _ref.token,
-    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJjYXJib25zbW9rZXZhcGVAZ21haWwuY29tIiwidGllciI6MSwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2OTc2MzcwMCwidXNlcklkIjoyNDA3LCJpYXQiOjE2Njk2NDM3MDAsInJlc2V0UGsFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.s7-e8ERYHM6TYWODLkeB8tDsInwpMRvvkvpfPiXCqKo' : _ref$token,
+    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY3MDI2ODk4OSwidXNlcklkIjoyNDU1LCJpYXQiOjE2NzAyMzI5ODksInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.-SdkA9CatCY-g4ln5ZU9hKsYvBfoTPspZV_hSQHo8wI' : _ref$token,
     _ref$primaryColor = _ref.primaryColor,
     primaryColor = _ref$primaryColor === void 0 ? '#D2122E' : _ref$primaryColor,
     secondaryColor = _ref.secondaryColor,