@bonlineza/luxity-lib 2.35.0 → 2.35.2

package/LuxityProductInterestItem.js

@@ -0,0 +1,434 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
+  (global = global || self, global.LuxityProductInterestItem = factory(global.React, global.styled));
+}(this, (function (React, styled) { 'use strict';
+
+  var React__default = 'default' in React ? React['default'] : React;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = null != arguments[i] ? arguments[i] : {};
+      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
+  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;
+  }
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  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
+      }
+    });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+    return _setPrototypeOf(o, p);
+  }
+
+  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 _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  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 _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  /** @format */
+  var request = {
+    fetching: false,
+    failed: false,
+    success: false,
+    payload: null
+  };
+  var method = {
+    DELETE: 'DELETE',
+    POST: 'POST',
+    GET: 'GET'
+  };
+
+  var simpleRequest = (function (axiosInstance, url) {
+    var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'get';
+    var payload = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    var onSuccess = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : function () {
+      return null;
+    };
+    var onFailed = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : function () {
+      return null;
+    };
+    var requestConfigParams = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    return axiosInstance[method.toLowerCase()](url, payload, requestConfigParams).then(function (res) {
+      onSuccess(res);
+      return res;
+    }).catch(function (err) {
+      onFailed(err);
+      return err;
+    });
+  });
+
+  var Trash = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      version: "1.1",
+      id: "svg-trash",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 15.1 17.5",
+      xmlSpace: "preserve"
+    }, props), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
+      d: "M2.4,17.5c-0.4-0.1-0.5-0.4-0.5-0.8c0-4,0-7.9,0-11.9c0-0.1,0-0.1,0-0.2c-0.1,0-0.1,0-0.2,0c-0.3,0-0.7,0-1,0 C0.3,4.6,0,4.3,0,4C0,3.3,0,2.7,0,2c0.1-0.8,0.8-1.5,1.7-1.6c1.3,0,2.6,0,3.9,0c0.1,0,0.2,0,0.3-0.1C6,0.1,6.2,0,6.5,0 c0.7,0,1.4,0,2.1,0c0.3,0,0.5,0.1,0.6,0.3c0.1,0.1,0.1,0.1,0.2,0.1c1.3,0,2.5,0,3.8,0c0.8,0,1.4,0.4,1.7,1.1C15,1.7,15,2,15,2.3 c0,0.5,0,1,0,1.6c0,0.5-0.3,0.7-0.7,0.7c-0.4,0-0.7,0-1.1,0c0,0,0,0-0.1,0c0,0.1,0,0.1,0,0.2c0,4,0,7.9,0,11.9 c0,0.4-0.1,0.7-0.5,0.8C9.2,17.5,5.8,17.5,2.4,17.5z M11.8,16.2c0-3.9,0-7.7,0-11.6c-2.9,0-5.7,0-8.6,0c0,3.9,0,7.7,0,11.6 C6.1,16.2,9,16.2,11.8,16.2z M1.3,3.2c4.1,0,8.3,0,12.4,0c0-0.3,0-0.6,0-0.9c0-0.5-0.2-0.6-0.6-0.6c-3.7,0-7.4,0-11.1,0 c-0.1,0-0.2,0-0.3,0C1.5,1.8,1.3,2,1.3,2.2C1.3,2.5,1.3,2.9,1.3,3.2z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M5.1,9.8c0-1.1,0-2.3,0-3.4c0-0.4,0.2-0.7,0.5-0.7C6,5.6,6.3,5.8,6.4,6.1c0,0.1,0,0.2,0,0.3c0,2.2,0,4.5,0,6.7 c0,0.1,0,0.3-0.1,0.4C6.2,13.8,6,14,5.7,13.9c-0.3,0-0.5-0.2-0.6-0.5c0-0.1,0-0.2,0-0.3C5.1,12,5.1,10.9,5.1,9.8z"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M9.9,9.8c0,1.1,0,2.3,0,3.4c0,0.3-0.2,0.6-0.5,0.7c-0.4,0.1-0.8-0.1-0.9-0.5c0-0.1,0-0.2,0-0.2c0-2.3,0-4.5,0-6.8 c0-0.4,0.2-0.7,0.5-0.7c0.3-0.1,0.7,0.1,0.7,0.5c0,0.1,0,0.2,0,0.3C9.9,7.6,9.9,8.7,9.9,9.8z"
+    })));
+  });
+
+  var _templateObject;
+  var SvgWrapper = styled__default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 1rem;\n  display: flex;\n  svg {\n    width: 23px;\n    height: auto;\n  }\n"])));
+
+  var theme = {
+    breakpoints: ['40em', '52em', '64em'],
+    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+    letterSpacings: ['-0.5px', '0px', '+0.5px'],
+    radii: ['0px', '2px', '4px', '8px'],
+    borderRadius: '6px',
+    colors: {
+      primary: '#000',
+      base: '#4e4949',
+      baseLt: '#817c7c',
+      borderColor: '#d8d8d8',
+      ntrlMin: '#fff',
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
+    },
+    rareStepColors: {
+      primary: '#202b58',
+      secondary: '#ef5c2d',
+      ntrlMin: '#ffffff',
+      ntrl40: '#f4f4f4',
+      ntrl50: '#808080',
+      ntrl60: '#e8e8e8',
+      ntrl70: '#252525',
+      ntrlMax: '#000000'
+    },
+    rareStepFontWeights: {
+      normal: 400,
+      medium: 500,
+      semiBold: 600,
+      bold: 700
+    },
+    rareStepFontSize: {
+      h1: '36px',
+      h2: '30px',
+      h3: '24px',
+      h4: '20px',
+      h5: '16px',
+      h6: '14px',
+      footerTitle: '16px'
+    },
+    rareStepPageSizes: {
+      mobile: '500px',
+      tablet: '768px',
+      desktop: '992px',
+      screenl: '1280px',
+      screenxl: '1680px',
+      screenxxl: '1920px',
+      container: '1600px'
+    }
+  };
+
+  var themed = (function (Component) {
+    return /*#__PURE__*/React.forwardRef(function (props, ref) {
+      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+        theme: theme
+      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
+        ref: ref
+      })));
+    });
+  });
+
+  var _templateObject$1;
+  var IconWrapper = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n    height: 100%;\n  }\n"])), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  });
+
+  var media = {
+    xs: '576px',
+    sm: '768px',
+    md: '992px',
+    lg: '1200px'
+  };
+
+  var _templateObject$2, _templateObject2, _templateObject3;
+
+  var TrashIcon = function TrashIcon(_ref) {
+    var onClick = _ref.onClick,
+        id = _ref.id;
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
+      onClick: onClick,
+      id: id
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Trash, null)));
+  };
+
+  var LuxityProductInterestItem = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityProductInterestItem, _React$Component);
+
+    var _super = _createSuper(LuxityProductInterestItem);
+
+    function LuxityProductInterestItem(props) {
+      var _this;
+
+      _classCallCheck(this, LuxityProductInterestItem);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "deleteInterestItem", function () {
+        var id = _this.props.data.id;
+
+        _this.setState({
+          delete: _objectSpread2(_objectSpread2({}, request), {}, {
+            fetching: true
+          })
+        });
+
+        var url = _this.props.deleteInterestApi(id);
+
+        simpleRequest(_this.props.requestInstance, url, method.DELETE, null, function () {
+          _this.setState({
+            delete: _objectSpread2(_objectSpread2({}, request), {}, {
+              success: true
+            })
+          });
+
+          _this.props.onDeleted(_this.props.data);
+        }, function () {
+          return _this.setState({
+            delete: _objectSpread2({}, request)
+          });
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _data$luxity_model, _data$luxity_material;
+
+        var data = _this.props.data;
+        var success = _this.state.delete.success;
+        return /*#__PURE__*/React__default.createElement(InterestItemContainer, {
+          id: "interests__item--".concat(data.id),
+          className: "".concat(success && 'interests__item--hiding')
+        }, /*#__PURE__*/React__default.createElement(InterestItemContent, {
+          className: "interest-item__container ".concat(_this.props.className || '')
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Brand:"), /*#__PURE__*/React__default.createElement("div", {
+          id: "interest-item-".concat(data.id, "__category"),
+          className: "list-items"
+        }, data.luxity_brand.name)), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Model:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data === null || data === void 0 ? void 0 : (_data$luxity_model = data.luxity_model) === null || _data$luxity_model === void 0 ? void 0 : _data$luxity_model.name)), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Material:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data === null || data === void 0 ? void 0 : (_data$luxity_material = data.luxity_material) === null || _data$luxity_material === void 0 ? void 0 : _data$luxity_material.name))), /*#__PURE__*/React__default.createElement(TrashIcon, {
+          id: "interest-".concat(data.id, "-delete-button"),
+          onClick: function onClick() {
+            if (!_this.state.delete.fetching) {
+              _this.deleteInterestItem();
+            }
+          }
+        }));
+      });
+
+      _this.state = {
+        delete: _objectSpread2({}, request)
+      };
+      return _this;
+    }
+
+    return _createClass(LuxityProductInterestItem);
+  }(React__default.Component);
+
+  var InterestItemTitle = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"])), media.xs);
+  var InterestItemContainer = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
+  var InterestItemContent = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 1rem;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.darkerGray;
+  }, media.xs, media.xs, function (props) {
+    return props.theme.marginPaddings[0];
+  }, media.xs);
+  var ThemedInterestItem = themed(LuxityProductInterestItem);
+  /**
+   * The Interest Item view shows the selected interest configuration,
+   * and gives user control to delete it.
+   */
+
+  var index = (function (props) {
+    return /*#__PURE__*/React__default.createElement(ThemedInterestItem, props);
+  });
+
+  return index;
+
+})));