contentoh-components-library 21.6.56 → 21.6.57

package/dist/components/pages/CreatorsProductEdition/sections/ServiceActions.js

@@ -0,0 +1,542 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ServiceActions = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _data = require("../../../../global-files/data");
+
+var _AiProductEdition = require("../../../../contexts/AiProductEdition");
+
+var _defaultProfileImage = _interopRequireDefault(require("../../../../assets/images/defaultImages/defaultProfileImage.svg"));
+
+var _infoIcon = _interopRequireDefault(require("../../../../assets/images/sliderToolTip/infoIcon.svg"));
+
+var _slide = _interopRequireDefault(require("../../../../assets/images/sliderToolTip/slide21.svg"));
+
+var _slide2 = _interopRequireDefault(require("../../../../assets/images/sliderToolTip/slide22.svg"));
+
+var _slide3 = _interopRequireDefault(require("../../../../assets/images/sliderToolTip/slide23.svg"));
+
+var _saveIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/saveIcon.svg"));
+
+var _saveIconHover = _interopRequireDefault(require("../../../../assets/images/generalButton/saveIconHover.svg"));
+
+var _deleteIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/deleteIcon.svg"));
+
+var _deleteIconHover = _interopRequireDefault(require("../../../../assets/images/generalButton/deleteIconHover.svg"));
+
+var _downloadIcon = _interopRequireDefault(require("../../../../assets/images/generalButton/downloadIcon.svg"));
+
+var _rowLayout = _interopRequireDefault(require("../../../../assets/images/generalButton/rowLayout.svg"));
+
+var _gridLayout = _interopRequireDefault(require("../../../../assets/images/generalButton/gridLayout.svg"));
+
+var _StatusChip = require("./StatusChip");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Acciones de un servicio: ayuda, versión, estatus, guardar, (en imágenes)
+  borrar/descargar/cambiar vista, y asignaciones con su panel.
+
+  Es lo que hacía `molecules/StatusAsignationInfo`, que la vista original usa en
+  DOS lugares: junto a las pestañas y en la cabecera de los datos de la imagen.
+  Aquí también se comparte: TabsBar e ImagePanel usan este mismo componente.
+*/
+var SLIDES = [{
+  slide: _slide.default,
+  title: "Valida tu producto en cada activo digital",
+  description: "Al solicitar a Content-oh! podrás validar la información, imágenes y documentación de tu producto, esto hará más sencillo que puedas aprobar o rechazar el contenido."
+}, {
+  slide: _slide2.default,
+  title: "Aprueba o rechaza con un clic",
+  description: "Cuando termines de revisar tu información, elige si aproebas o rechazas, esto enviara una notificiación a nuestro equipo, para continuar o corregir el producto."
+}, {
+  slide: _slide3.default,
+  title: "Estatus de tu producto en el proceso",
+  description: "La mayor parte del proceso podrás identificar que estatus tiene tu producto, esto dara visibilidad a todo tu equipo para saber la etapa se encuentra."
+}];
+
+var HelpSlides = function HelpSlides() {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      anchor = _useState2[0],
+      setAnchor = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      step = _useState4[0],
+      setStep = _useState4[1];
+
+  var last = step === SLIDES.length - 1;
+
+  var close = function close() {
+    setAnchor(null);
+    setStep(0);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      "aria-label": "Ayuda",
+      size: "small",
+      onClick: function onClick(e) {
+        return setAnchor(e.currentTarget);
+      },
+      sx: {
+        p: 0
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: _infoIcon.default,
+        alt: "",
+        width: 30,
+        height: 30,
+        style: {
+          filter: "brightness(.35)"
+        }
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Popover, {
+      open: Boolean(anchor),
+      anchorEl: anchor,
+      onClose: close,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      PaperProps: {
+        sx: {
+          width: 300,
+          maxWidth: "calc(100vw - 24px)",
+          p: 2,
+          mt: 1
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+        component: "img",
+        src: SLIDES[step].slide,
+        alt: "",
+        sx: {
+          width: "100%",
+          height: 150,
+          objectFit: "contain"
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.Raleway_700,
+          fontSize: 14,
+          color: _tokens.COLORS.s5,
+          mt: 1
+        },
+        children: SLIDES[step].title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontSize: 12,
+          color: _tokens.COLORS.s4,
+          mt: 0.5
+        },
+        children: SLIDES[step].description
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MobileStepper, {
+        variant: "dots",
+        steps: SLIDES.length,
+        position: "static",
+        activeStep: step,
+        sx: {
+          bgcolor: "transparent",
+          px: 0,
+          mt: 1,
+          "& .MuiMobileStepper-dotActive": {
+            bgcolor: _tokens.COLORS.magenta_s2
+          }
+        },
+        backButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          size: "small",
+          disabled: step === 0,
+          onClick: function onClick() {
+            return setStep(function (s) {
+              return s - 1;
+            });
+          },
+          sx: {
+            color: _tokens.COLORS.s5
+          },
+          children: "Anterior"
+        }),
+        nextButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+          size: "small",
+          onClick: function onClick() {
+            return last ? close() : setStep(function (s) {
+              return s + 1;
+            });
+          },
+          sx: {
+            color: _tokens.COLORS.magenta_s2
+          },
+          children: last ? "Cerrar" : "Siguiente"
+        })
+      })]
+    })]
+  });
+};
+/** Botón redondo de 25px con el ícono de siempre y su versión "hover". */
+
+
+var RoundIcon = function RoundIcon(_ref) {
+  var label = _ref.label,
+      icon = _ref.icon,
+      hoverIcon = _ref.hoverIcon,
+      onClick = _ref.onClick,
+      _ref$bordered = _ref.bordered,
+      bordered = _ref$bordered === void 0 ? _tokens.COLORS.s3 : _ref$bordered,
+      _ref$hoverBg = _ref.hoverBg,
+      hoverBg = _ref$hoverBg === void 0 ? _tokens.COLORS.magenta_s2 : _ref$hoverBg,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 15 : _ref$size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    title: label,
+    arrow: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+      "aria-label": label,
+      onClick: onClick,
+      sx: {
+        width: 25,
+        height: 25,
+        p: 0,
+        border: bordered ? "1px solid ".concat(bordered) : "none",
+        backgroundImage: "url(".concat(icon, ")"),
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: size,
+        "&:hover": (0, _objectSpread2.default)({
+          backgroundColor: hoverBg,
+          borderColor: hoverBg
+        }, hoverIcon ? {
+          backgroundImage: "url(".concat(hoverIcon, ")")
+        } : {})
+      }
+    })
+  });
+};
+
+var ServiceActions = function ServiceActions(_ref2) {
+  var _assig$collaborators, _assig$assignations;
+
+  var _ref2$status = _ref2.status,
+      status = _ref2$status === void 0 ? "" : _ref2$status,
+      _ref2$imagesSection = _ref2.imagesSection,
+      imagesSection = _ref2$imagesSection === void 0 ? false : _ref2$imagesSection,
+      imageLayout = _ref2.imageLayout,
+      setImageLayout = _ref2.setImageLayout,
+      assig = _ref2.assig,
+      setAssignation = _ref2.setAssignation,
+      isRetailer = _ref2.isRetailer,
+      downloadImages = _ref2.downloadImages,
+      askToDeleteImages = _ref2.askToDeleteImages,
+      onClickSave = _ref2.onClickSave,
+      showSaveButton = _ref2.showSaveButton,
+      canAssign = _ref2.canAssign,
+      version = _ref2.version,
+      setShowVersionSelector = _ref2.setShowVersionSelector,
+      resetKey = _ref2.resetKey;
+  var isImagesTab = imagesSection;
+
+  var _useAiProductEdition = (0, _AiProductEdition.useAiProductEdition)(),
+      inputsUsingAi = _useAiProductEdition.inputsUsingAi;
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      assignAnchor = _useState6[0],
+      setAssignAnchor = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("facilitator"),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      assignationType = _useState8[0],
+      setAssignationType = _useState8[1];
+
+  var collaborators = assig === null || assig === void 0 ? void 0 : (_assig$collaborators = assig.collaborators) === null || _assig$collaborators === void 0 ? void 0 : _assig$collaborators[assignationType];
+  (0, _react.useEffect)(function () {
+    return setAssignAnchor(null);
+  }, [resetKey]);
+
+  var save = function save() {
+    if (Object.values(inputsUsingAi !== null && inputsUsingAi !== void 0 ? inputsUsingAi : {}).some(function (input) {
+      return !!(input !== null && input !== void 0 && input.using);
+    })) {
+      console.warn("Para guardar se debe de dejar de usar la generación con IA");
+      return;
+    }
+
+    onClickSave && onClickSave();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: "10px",
+      justifyContent: "flex-end",
+      sx: {
+        flex: "0 1 auto",
+        ml: "auto"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HelpSlides, {}), version && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+        title: "Cambiar de versi\xF3n",
+        arrow: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            setShowVersionSelector(true);
+          },
+          sx: {
+            minWidth: 25,
+            width: 25,
+            height: 25,
+            p: 0,
+            borderRadius: "50%",
+            border: "1px solid ".concat(_tokens.COLORS.color_purple),
+            color: _tokens.COLORS.color_purple,
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontSize: 11,
+            lineHeight: "25px"
+          },
+          children: ["V", version]
+        })
+      }), status !== "-" && status !== "" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusChip.StatusChip, {
+        status: status,
+        oval: true
+      }), showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(RoundIcon, {
+        label: "Guardar",
+        icon: _saveIcon.default,
+        hoverIcon: _saveIconHover.default,
+        bordered: _tokens.COLORS.color_gray,
+        hoverBg: _tokens.COLORS.color_pink,
+        size: undefined,
+        onClick: save
+      }), isImagesTab && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [showSaveButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(RoundIcon, {
+          label: "Borrar seleccionadas",
+          icon: _deleteIcon.default,
+          hoverIcon: _deleteIconHover.default,
+          onClick: function onClick() {
+            return askToDeleteImages && askToDeleteImages();
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RoundIcon, {
+          label: "Descargar",
+          icon: _downloadIcon.default,
+          onClick: function onClick() {
+            return downloadImages && downloadImages();
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: imageLayout ? "Ver como lista" : "Ver como cuadrícula",
+          arrow: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            "aria-label": imageLayout ? "Ver como lista" : "Ver como cuadrícula",
+            onClick: function onClick() {
+              return setImageLayout && setImageLayout(!imageLayout);
+            },
+            sx: {
+              width: 24,
+              height: 24,
+              p: 0
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              src: imageLayout ? _rowLayout.default : _gridLayout.default,
+              alt: "",
+              width: 24,
+              height: 24
+            })
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: "6px",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AvatarGroup, {
+          max: 4,
+          sx: {
+            "& .MuiAvatar-root": {
+              width: 20,
+              height: 20,
+              fontSize: 10,
+              border: 0
+            }
+          },
+          children: assig === null || assig === void 0 ? void 0 : (_assig$assignations = assig.assignations) === null || _assig$assignations === void 0 ? void 0 : _assig$assignations.map(function (assignation, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+              src: (0, _data.getProfilePicture)(assignation.id, 20, 20),
+              alt: "Persona asignada",
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                setAssignationType(assignation === null || assignation === void 0 ? void 0 : assignation.collaboratorType);
+                setAssignAnchor(e.currentTarget);
+              },
+              sx: {
+                cursor: "pointer"
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _defaultProfileImage.default,
+                alt: "",
+                width: 20,
+                height: 20
+              })
+            }, "".concat(index, "-").concat(assignation.id));
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontSize: 14,
+            color: _tokens.COLORS.color_gray
+          },
+          children: "Asig."
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Popover, {
+      open: Boolean(assignAnchor) && canAssign,
+      anchorEl: assignAnchor,
+      onClose: function onClose() {
+        return setAssignAnchor(null);
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: {
+          width: 260,
+          maxWidth: "calc(100vw - 24px)",
+          mt: 1,
+          p: 1.5
+        }
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        gap: 1,
+        sx: {
+          mb: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            fontFamily: _tokens.FONTS.AvenirNext,
+            fontSize: 13,
+            color: _tokens.COLORS.s4
+          },
+          children: "Estatus"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatusChip.StatusChip, {
+          status: status,
+          oval: true
+        })]
+      }), collaborators !== null && collaborators !== void 0 && collaborators.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.List, {
+        dense: true,
+        disablePadding: true,
+        sx: {
+          maxHeight: 280,
+          overflowY: "auto"
+        },
+        children: collaborators.map(function (person, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ListItemButton, {
+            onClick: function onClick() {
+              setAssignation && setAssignation(assignationType, person === null || person === void 0 ? void 0 : person.id_user);
+              setAssignAnchor(null);
+            },
+            sx: {
+              borderRadius: "3px"
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemAvatar, {
+              sx: {
+                minWidth: 40
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Avatar, {
+                src: (0, _data.getProfilePicture)(person === null || person === void 0 ? void 0 : person.id_user, 40, 40),
+                sx: {
+                  width: 26,
+                  height: 26
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _defaultProfileImage.default,
+                  alt: "",
+                  width: 26,
+                  height: 26
+                })
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+              primary: person.name,
+              primaryTypographyProps: {
+                sx: {
+                  fontFamily: _tokens.FONTS.AvenirNext,
+                  fontSize: 14,
+                  color: _tokens.COLORS.s5
+                }
+              }
+            })]
+          }, "".concat(index, "-").concat(person.name));
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontSize: 13,
+          color: _tokens.COLORS.s4,
+          py: 1
+        },
+        children: "Sin personas para asignar"
+      }), isRetailer === 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.List, {
+        dense: true,
+        disablePadding: true,
+        sx: {
+          mt: 1,
+          borderTop: "1px solid ".concat(_tokens.COLORS.s2),
+          pt: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+          primary: "Solicitar a",
+          secondary: "Proveedor",
+          sx: {
+            px: 2
+          },
+          primaryTypographyProps: {
+            sx: {
+              fontSize: 14,
+              color: _tokens.COLORS.s5
+            }
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemText, {
+          primary: "Solicitar a",
+          secondary: "Content-oh!",
+          sx: {
+            px: 2
+          },
+          primaryTypographyProps: {
+            sx: {
+              fontSize: 14,
+              color: _tokens.COLORS.s5
+            }
+          }
+        })]
+      })]
+    })]
+  });
+};
+
+exports.ServiceActions = ServiceActions;

package/dist/components/pages/CreatorsProductEdition/sections/StatusChip.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusChip = void 0;
+
+var _material = require("@mui/material");
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/**
+ * Etiqueta de estatus ("RA/AS", "AA"...). Mismo color y tamaño que
+ * `atoms/Status`; el nombre completo va en el tooltip. `oval` es la variante
+ * redondeada de la barra de pestañas.
+ */
+var StatusChip = function StatusChip(_ref) {
+  var status = _ref.status,
+      _ref$oval = _ref.oval,
+      oval = _ref$oval === void 0 ? false : _ref$oval;
+  var label = status !== null && status !== void 0 ? status : "NS";
+  var chip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+    label: label,
+    size: "small",
+    sx: {
+      height: 20,
+      borderRadius: oval ? "10px" : "3px",
+      backgroundColor: (0, _tokens.statusColor)(status),
+      color: _tokens.COLORS.white,
+      fontFamily: _tokens.FONTS.Lato,
+      fontSize: 12,
+      cursor: "default",
+      "& .MuiChip-label": {
+        px: "10px",
+        lineHeight: "20px"
+      }
+    }
+  });
+  var name = (0, _tokens.statusName)(status);
+  return name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+    title: name,
+    arrow: true,
+    placement: "top",
+    children: chip
+  }) : chip;
+};
+
+exports.StatusChip = StatusChip;