@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

package/App/Shared/Components/ReceiveOfferForm/index.js

@@ -0,0 +1,432 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField/TextField"));
+
+var _Grid2 = _interopRequireDefault(require("@material-ui/core/Grid"));
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _i18n = require("../../../../Framework/i18n");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = function styles(theme) {
+  return {
+    Grid: _defineProperty({}, theme.breakpoints.up('sm'), {
+      paddingRight: theme.spacing(2)
+    }),
+    MuiFormControlRoot: {
+      marginTop: 0
+    },
+    outlinedInput: _defineProperty({
+      padding: 14,
+      fontSize: 15
+    }, theme.breakpoints.down('xs'), {
+      padding: 19
+    }),
+    outlinedLabel: {
+      fontSize: 15
+    }
+  };
+};
+
+var getErrorMessage = function getErrorMessage(error) {
+  return error ? (0, _i18n.t)(error) : null;
+};
+
+var validateTextInput = function validateTextInput(name, value) {
+  var emailRegexp = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+
+  if (value === '') {
+    return 'receiveOfferForm.errors.required';
+  }
+
+  if (name === 'email' && !emailRegexp.test(value)) {
+    return 'receiveOfferForm.errors.invalidEmail';
+  }
+
+  return null;
+};
+
+var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
+  _inherits(ReceiveOfferForm, _React$Component);
+
+  var _super = _createSuper(ReceiveOfferForm);
+
+  function ReceiveOfferForm(props) {
+    var _this;
+
+    _classCallCheck(this, ReceiveOfferForm);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "setInputRef", function (ref) {
+      if (ref) {
+        _this.inputRefs[ref.name] = ref;
+      }
+    });
+
+    _this.state = {
+      email: {
+        value: '',
+        error: null
+      },
+      name: {
+        value: '',
+        error: null
+      },
+      company: {
+        value: '',
+        error: null
+      },
+      phonenumber: {
+        value: '',
+        error: null
+      },
+      zip: {
+        value: '',
+        error: null
+      },
+      city: {
+        value: '',
+        error: null
+      },
+      street: {
+        value: '',
+        error: null
+      },
+      country: {
+        value: '',
+        error: null
+      }
+    };
+    _this.inputRefs = {};
+    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
+    _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
+    _this.setInputRef = _this.setInputRef.bind(_assertThisInitialized(_this));
+    _this.designApprovalRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  _createClass(ReceiveOfferForm, [{
+    key: "handleChange",
+    value: function handleChange(event) {
+      this.setState(_defineProperty({}, event.target.name, {
+        value: event.target.type === 'checkbox' ? event.target.checked : event.target.value,
+        error: null
+      }));
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(event) {
+      var value = _lodash["default"].cloneDeep(this.state[event.target.name]);
+
+      value.error = validateTextInput(event.target.name, event.target.value);
+      this.setState(_defineProperty({}, event.target.name, value));
+    }
+  }, {
+    key: "validate",
+    value: function validate() {
+      var formErrors = false;
+      var approvalNotSet = null;
+      var values = {};
+
+      var state = _lodash["default"].cloneDeep(this.state);
+
+      var inputFields = ['email', 'name', 'company', 'phonenumber', 'zip', 'city', 'street', 'country'];
+      var errorInputRef = null;
+
+      for (var _i = 0, _inputFields = inputFields; _i < _inputFields.length; _i++) {
+        var inputField = _inputFields[_i];
+        values[inputField] = state[inputField].value;
+        var error = validateTextInput(inputField, state[inputField].value);
+
+        if (error !== null) {
+          formErrors = true;
+        }
+
+        if (error && !errorInputRef) {
+          errorInputRef = this.inputRefs[inputField];
+        }
+
+        state[inputField].error = error;
+      }
+
+      this.setState(state);
+      var hasError = formErrors || approvalNotSet === true;
+
+      if (hasError) {
+        var result = {
+          hasError: hasError,
+          formErrors: formErrors
+        };
+
+        if (approvalNotSet !== null) {
+          result.approvalNotSet = approvalNotSet;
+        }
+
+        return result;
+      }
+
+      return _objectSpread({
+        hasError: hasError
+      }, values);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var classes = this.props.classes;
+      var _this$state = this.state,
+          email = _this$state.email,
+          name = _this$state.name,
+          company = _this$state.company,
+          phonenumber = _this$state.phonenumber,
+          zip = _this$state.zip,
+          city = _this$state.city,
+          street = _this$state.street,
+          country = _this$state.country;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "email",
+        inputRef: this.setInputRef,
+        value: email.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.email'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!email.error,
+        helperText: getErrorMessage(email.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        },
+        classes: {
+          root: classes.MuiFormControlRoot
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "name",
+        inputRef: this.setInputRef,
+        value: name.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.name'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!name.error,
+        helperText: getErrorMessage(name.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "company",
+        inputRef: this.setInputRef,
+        value: company.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.company'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!company.error,
+        helperText: getErrorMessage(company.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "phonenumber",
+        inputRef: this.setInputRef,
+        value: phonenumber.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.phonenumber'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!phonenumber.error,
+        helperText: getErrorMessage(phonenumber.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_Grid2["default"], {
+        container: true
+      }, /*#__PURE__*/_react["default"].createElement(_Grid2["default"], {
+        item: true,
+        xs: 12,
+        sm: 4,
+        className: classes.Grid
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "zip",
+        inputRef: this.setInputRef,
+        value: zip.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.zip'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!zip.error,
+        helperText: getErrorMessage(zip.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      })), /*#__PURE__*/_react["default"].createElement(_Grid2["default"], {
+        item: true,
+        xs: 12,
+        sm: 8
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "city",
+        inputRef: this.setInputRef,
+        value: city.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.city'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!city.error,
+        helperText: getErrorMessage(city.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }))), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "street",
+        inputRef: this.setInputRef,
+        value: street.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.street'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!street.error,
+        helperText: getErrorMessage(street.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        name: "country",
+        inputRef: this.setInputRef,
+        value: country.value,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        label: (0, _i18n.t)('receiveOfferForm.country'),
+        margin: "normal",
+        variant: "outlined",
+        fullWidth: true,
+        error: !!country.error,
+        helperText: getErrorMessage(country.error),
+        InputProps: {
+          classes: {
+            input: classes.outlinedInput
+          }
+        },
+        InputLabelProps: {
+          classes: {
+            outlined: classes.outlinedLabel
+          }
+        }
+      }));
+    }
+  }]);
+
+  return ReceiveOfferForm;
+}(_react["default"].Component);
+
+_defineProperty(ReceiveOfferForm, "propTypes", {
+  classes: _propTypes["default"].object
+});
+
+var _default = (0, _styles.withStyles)(styles, {
+  name: 'ReceiveOfferForm'
+})(ReceiveOfferForm);
+
+exports["default"] = _default;

package/App/Shared/Components/ReceiveOfferForm/index.story.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var handleClick = function handleClick() {
+  // eslint-disable-next-line no-console
+  console.log(componentRef.current.validate());
+};
+
+var componentRef = /*#__PURE__*/_react["default"].createRef();
+
+(0, _react2.storiesOf)('ReceiveOfferForm', module).add('with approval', function () {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: handleClick
+  }, "validate"), /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    displayApproval: true,
+    innerRef: componentRef
+  }));
+}).add('without approval', function () {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: handleClick
+  }, "validate"), /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    displayApproval: false,
+    innerRef: componentRef
+  }));
+});

package/App/Shared/Components/ReceiveOfferForm/index.test.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _reactRedux = require("react-redux");
+
+var _reduxMockStore = _interopRequireDefault(require("redux-mock-store"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-env jest */
+var mockStore = (0, _reduxMockStore["default"])();
+it('renders correctly with approval', function () {
+  var store = mockStore({});
+  store.dispatch = jest.fn();
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    displayApproval: true
+  })));
+  expect(tree).toMatchSnapshot();
+});
+it('renders correctly without approval', function () {
+  var store = mockStore({});
+  store.dispatch = jest.fn();
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    displayApproval: false
+  })));
+  expect(tree).toMatchSnapshot();
+});