contentoh-components-library 21.4.68 → 21.4.70

package/dist/components/molecules/ProductSkuStatus/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductSkuStatus = void 0;
+
+var _styles = require("./styles");
+
+var _index = require("../../atoms/Status/index");
+
+var _Progress = require("../../atoms/Progress");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ProductSkuStatus = function ProductSkuStatus(_ref) {
+  var statusType = _ref.statusType,
+      percentRequired = _ref.percentRequired,
+      version = _ref.version,
+      setShowVersionSelector = _ref.setShowVersionSelector,
+      showShield = _ref.showShield;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [statusType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Status, {
+      statusType: statusType
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+      percent: percentRequired,
+      progressBarType: statusType,
+      percentRequired: percentRequired,
+      version: version,
+      setShowVersionSelector: setShowVersionSelector,
+      showShield: showShield
+    })]
+  });
+};
+
+exports.ProductSkuStatus = ProductSkuStatus;

package/dist/components/molecules/ProductSkuStatus/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap:10px;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/RetailerSelectorv2/RetailerSelectorv2.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RetailerSelectorDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/RetailerSelectorv2",
+  component: _index.RetailerSelectorv2
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerSelectorv2, (0, _objectSpread2.default)({}, args));
+};
+
+var RetailerSelectorDefault = Template.bind({});
+exports.RetailerSelectorDefault = RetailerSelectorDefault;
+RetailerSelectorDefault.args = {
+  retailers: [{
+    id: 2,
+    name: "Walmart Mercancías Generales",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 3,
+    name: "Sam´s Club",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }, {
+    id: 14,
+    name: "Maskota y Petsy",
+    country: "México",
+    id_region: 1,
+    active: 1
+  }]
+};

package/dist/components/molecules/RetailerSelectorv2/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerSelectorv2 = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _react = require("react");
+
+var _AsignationOption = require("../../atoms/AsignationOption");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RetailerSelectorv2 = function RetailerSelectorv2(_ref) {
+  var retailers = _ref.retailers,
+      activeRetailer = _ref.activeRetailer,
+      setActiveRetailer = _ref.setActiveRetailer,
+      showStatus = _ref.showStatus;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      retailersPanel = _useState2[0],
+      setRetailersPanel = _useState2[1];
+
+  var closeRetailersPanel = function closeRetailersPanel(e) {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  var getRetailerImage = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              activeRetailer.image = "https://content-management-images.s3.amazonaws.com/retailers/".concat(activeRetailer.id, ".png");
+              retailers.forEach(function (retailer) {
+                return retailer.image = "https://content-management-images.s3.amazonaws.com/retailers/".concat(retailer.id, ".png");
+              });
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getRetailerImage() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+  (0, _react.useEffect)(function () {
+    getRetailerImage();
+  }, [activeRetailer]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    id: "retailers-assignation",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      image: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.image,
+      altText: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.name,
+      imageType: "medium-image",
+      onClick: function onClick() {
+        (retailers === null || retailers === void 0 ? void 0 : retailers.length) > 0 && setRetailersPanel(!retailersPanel);
+        if (retailersPanel) document.removeEventListener("click", closeRetailersPanel, false);
+      }
+    }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "retailers-panel",
+      children: retailers.map(function (retailer, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
+          profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
+          imageType: "medium-image",
+          asignationType: null,
+          name: retailer === null || retailer === void 0 ? void 0 : retailer.name,
+          team: retailer === null || retailer === void 0 ? void 0 : retailer.team,
+          services: retailer === null || retailer === void 0 ? void 0 : retailer.services,
+          onClick: function onClick() {
+            setActiveRetailer(retailer);
+            document.removeEventListener("click", closeRetailersPanel, false);
+            setRetailersPanel(false);
+          },
+          active: retailer.id === activeRetailer.id,
+          showStatus: showStatus
+        }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
+      })
+    })]
+  });
+};
+
+exports.RetailerSelectorv2 = RetailerSelectorv2;

package/dist/components/molecules/RetailerSelectorv2/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  cursor: pointer;\n  display: flex;\n\n  .retailers-panel {\n    background: ", ";\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);\n    border-radius: 4px;\n    padding: 10px;\n    position: absolute;\n    top: calc(100% + 10px);\n    right: 0;\n    z-index: 10;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s3);
+
+exports.Container = Container;

package/dist/components/molecules/RowItem/ColumnItem.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnItem = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ColumnItem = function ColumnItem(_ref) {
+  var element = _ref.element,
+      flex = _ref.flex,
+      minWidth = _ref.minWidth;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Column, {
+    flex: flex,
+    minWidth: minWidth,
+    children: element
+  });
+};
+
+exports.ColumnItem = ColumnItem;