contentoh-components-library 21.4.74 → 21.4.75

package/src/components/molecules/HeaderTopv2/index.js

@@ -0,0 +1,100 @@
+import { Container } from "./styles";
+import { Button } from "../../atoms/GeneralButton/index";
+import { useEffect, useRef } from "react";
+import { Chat } from "../../organisms/Chat";
+import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
+import { useState } from "react";
+import { render } from "@testing-library/react";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+
+export const HeaderTopv2 = ({
+  setHeaderTop,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+  auditableVersion,
+  setCompare,
+  isAuditor,
+  activeRetailer,
+}) => {
+  const HeaderTopv2 = useRef();
+  const [chat, setChat] = useState(null);
+  const [chatData, setChatData] = useState(null);
+
+  useEffect(() => {
+    if (activeRetailer.id && productSelected && token.length) {
+      setChatData({
+        id: productSelected?.article?.id_article || productSelected?.id_article,
+        version: productSelected?.version,
+        retailerId: activeRetailer?.id,
+        status: productSelected?.status,
+        userToken: token,
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+
+  useEffect(() => {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
+
+  useEffect(() => {
+    setHeaderTop && setHeaderTop(HeaderTopv2.current.clientHeight);
+  }, []);
+
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chat
+              chatType="product_status"
+              chatContainerType="popUp"
+              chatData={{
+                id: chatData?.id,
+                version: chatData?.version,
+                retailerId: chatData?.retailerId,
+                status: chatData?.status,
+                userToken: chatData?.userToken,
+              }}
+              size={18}
+              activeRetailer={activeRetailer}
+            />
+          );
+        break;
+      default:
+        setChat(
+          <Chat
+            chatType="merchant_product"
+            chatContainerType="popUp"
+            chatData={{
+              userToken: token,
+              id: productSelected.id_article,
+              version: productSelected.version,
+            }}
+            size={18}
+            activeRetailer={activeRetailer}
+          />
+        );
+        break;
+    }
+  };
+
+  return (
+    <Container ref={HeaderTopv2}>
+      <ScreenHeaderv2 text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && chat}
+        {isAuditor && auditableVersion && (
+          <Button
+            buttonType="general-white-button circular-button"
+            onClick={() => {
+              setCompare((current) => !current);
+            }}
+            image={auditIcon}
+          />
+        )}
+      </div>
+    </Container>
+  );
+};

package/src/components/molecules/HeaderTopv2/styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+    padding-top: 10px;
+  }
+
+  .buttons-container {
+    display: flex;
+
+    button {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #f0f0f0;
+      background-size: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        height: 15px;
+      }
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;

package/src/components/molecules/ImageSelectorv2/ImageSelectorv2.stories.js

@@ -0,0 +1,46 @@
+import { ImageSelectorv2 } from "./index";
+
+export default {
+  title: "Components/molecules/ImageSelectorv2",
+  component: ImageSelectorv2,
+  images: {},
+  argTypes: {
+    modalSelector: {
+      options: [true, false],
+      type: "boolean",
+    },
+  },
+};
+
+const Template = (args) => <ImageSelectorv2 {...args} />;
+
+export const ImageSelectorv2Default = Template.bind({});
+
+ImageSelectorv2Default.args = {
+  images: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+  ],
+};

package/src/components/molecules/ImageSelectorv2/index.js

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+import { ProductImagev2 } from "../../atoms/ProductImagev2";
+
+export const ImageSelectorv2 = ({
+  images = [],
+  setActiveImage,
+  modalSelector,
+}) => {
+  return (
+    <Container className={modalSelector && "modal-image-selector"}>
+      {images?.values?.map((image, index) => (
+        <ProductImagev2
+          key={index}
+          img={image.src}
+          altText={image.altText}
+          imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
+          onClick={() => setActiveImage(index)}
+        />
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/ImageSelectorv2/styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 340px;
+  display: flex;
+  overflow: auto;
+  gap: 10px;
+
+  &.modal-image-selector {
+    width: 377px;
+    height: auto;
+    background: #ffff;
+    border-radius: 10px;
+  }
+`;

package/src/components/molecules/Phase/Phase.stories.js

@@ -0,0 +1,37 @@
+import { Phase } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/Phase",
+  component: Phase,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Phase {...args} />;
+
+export const PhaseDefault = Template.bind({});
+
+PhaseDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/Phase/index.js

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from "react";
+import { Container, ContainerIcon } from "./styles";
+import Chip from "@mui/material/Chip";
+import { Button, Menu, MenuItem } from "@mui/material";
+import Select from "../../atoms/Select";
+import add from "../../../assets/images/Icons/addv2.svg";
+import { Modal } from "../../organisms/Modal";
+import { TextField } from "@mui/material/TextField";
+import { GroupSelect } from "../../molecules/GroupSelect";
+import options from "../../../assets/images/Icons/options.svg";
+import DeleteIcon from '@mui/icons-material/DeleteForeverOutlined';
+
+export const Phase = ({ id, phases, phaseName, nextPhase, groups, onDeletePhase }) => {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [chips, setChips] = useState([]);
+  const [groupsSelected, setGroupsSelected] = useState([]);
+  const [showCustomSelect, setShowCustomSelect] = useState(false);
+  const [modalData, setModalData] = useState({
+    show: false,
+    title: "Actualización completa",
+    message: "",
+    icon: "success",
+  });
+
+  const idPhase = id + 1;
+
+
+  const onAdd = () => {
+    if (selectedValue && !groupsSelected.includes(selectedValue)) {
+      setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
+      setChips((prevChips) => [...prevChips, selectedValue]);
+      setSelectedValue("");
+    }
+  };
+
+  const handleDeletePhase = () => {
+    onDeletePhase(idPhase);
+  };
+
+  const handleGroupSelect = (selectedGroup) => {
+    setGroupsSelected((prevGroups) => [...prevGroups, selectedGroup]);
+    setSelectedValue(selectedGroup);
+  };
+
+  const handleChipDelete = (chipToRemove) => {
+    setGroupsSelected((prevGroups) =>
+      prevGroups.filter((chip) => chip !== chipToRemove)
+    );
+    setChips((prevChips) => prevChips.filter((chip) => chip !== chipToRemove));
+  };
+
+  // const combinedGroups = [...grupos, ...chips];
+
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const HoverableChip = ({ label, onDelete }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+    };
+
+    return (
+      <Chip
+        label={label}
+        onDelete={onDelete}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        deleteIcon={<DeleteIcon />}
+        style={{
+          borderRadius: "5px",
+          background: "transparent",
+          border: `1px solid ${isHovered ? "#B64545" : "#F0F0F0"}`,
+          color: `${isHovered ? "#B64545" : "#707070"}`,
+
+        }}
+      />
+    );
+  };
+
+ 
+  console.log(id, phases, nextPhase, groups)
+
+
+
+
+  // useEffect(() => initialPhase(),[]);
+
+  return (
+    <Container>
+       {/* {initialPhase()} */}
+      <div key={idPhase} className="header-phase">
+        <h2>Fase {idPhase} - {phaseName}</h2>
+          <div className="text-button-container">
+            {idPhase === 1 ? (
+              <p className="text-phase">
+                Al rechazar en esta fase enviar a proveedor
+              </p>
+            ) : (
+              <div className="phase-sel">
+                <p className="text-phase">Al rechazar en esta fase enviar a </p>
+                <Select
+                  width="100px"
+                  valueSelected={nextPhase ? Object.values(nextPhase) : []}
+                  placeholder={`Fase`}
+                  options={phases.map((phase) => phase.phaseName)}
+                  onChange={(e) => {
+                    const selectedPhase = phases.find((phase) => phase.phaseName === e.target.value);
+                    console.log("fase seleccionada", selectedPhase);
+                    setSelectedValue(selectedPhase.nextPhaseIfApproved);
+                  }}
+                />
+                <Button
+                  id="basic-button"
+                  aria-controls={open ? "basic-menu" : undefined}
+                  aria-haspopup="true"
+                  aria-expanded={open ? "true" : undefined}
+                  onClick={handleClick}
+                >
+                  <img src={options} alt="" />
+                </Button>
+                <Menu
+                  id="basic-menu"
+                  anchorEl={anchorEl}
+                  open={open}
+                  onClose={handleClose}
+                  MenuListProps={{
+                    "aria-labelledby": "basic-button",
+                  }}
+                >
+                  <MenuItem onClick={() => onDeletePhase(id)}>Eliminar Fase</MenuItem>
+                </Menu>
+              </div>
+            )}
+          </div>
+        </div>
+
+      <div className="attributes-container">
+        {groups
+        .filter((group) => group.groupActive === 1)
+        .map((group, index) => (
+          <HoverableChip
+            key={index}
+            label={group.groupName}
+            onDelete={() => handleChipDelete(group)}
+          />
+        ))}
+        <GroupSelect
+          options={groups.filter((group) => group.groupActive === 0)
+            .map((group, index) => ({
+            id: index,
+            name: group.groupName
+          }))}        
+          showSearchBar={true}
+          icon={add}
+          placeHolder={"Buscar grupo"}
+          customSelectId={"category-select-" + groups.id}
+          defaultOption={"Todos los grupos"}
+          parameterArray={groupsSelected}
+          setParameterArray={setGroupsSelected}
+          onSelect={handleGroupSelect}
+          onClickItem={onAdd}
+        />
+      </div>
+
+      <Modal
+        {...modalData}
+        onClickBtnDefault={() =>
+          setModalData((prev) => ({ ...prev, show: false }))
+        }
+      />
+    </Container>
+  );
+};

package/src/components/molecules/Phase/styles.js

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction:column;
+  gap:10px;
+  align-items: center;
+  border-radius:10px;
+  border:1px solid ${GlobalColors.gray_light};
+  padding:10px 15px;
+  font-family:${FontFamily.Roboto}, sans-serif;
+  font-size:17px;
+
+ .header-phase{
+  display:flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 5px;
+  border-bottom: 1px solid ${GlobalColors.gray_light};
+
+  h2{
+    font-family:${FontFamily.Roboto}, sans-serif;
+    font-size:17px;
+  }
+  p{
+    font-family:${FontFamily.Roboto}, sans-serif;
+    font-size:12px;
+  }
+ }
+ .attributes-container{
+  display: flex;
+  align-self: flex-start;
+  flex-wrap: wrap;
+  gap: 10px;
+ }
+ .phase-sel{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+ }
+ .button-circle{
+  width:30px;
+  height:30px;
+  padding:2px;
+  border-radius:100%;
+  min-width:30px;
+  border: 1px solid ${GlobalColors.magenta_s2};
+}
+.button-circle:hover {
+  border: 1px solid ${GlobalColors.magenta_s2};
+}
+.text-phase{
+  font-family:${FontFamily.Roboto}, sans-serif;
+  font-size:12px;
+  color:${GlobalColors.gray};
+}
+.text-button-container {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  button{
+    min-width: 5px;
+    cursor: pointer;
+  }
+}
+`;
+
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.magenta_s2};
+}`;

package/src/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -0,0 +1,37 @@
+import { ProductNameHeaderv2 } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/ProductNameHeaderv2",
+  component: ProductNameHeaderv2,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductNameHeaderv2 {...args} />;
+
+export const ProductNameHeaderv2Default = Template.bind({});
+
+ProductNameHeaderv2Default.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/ProductNameHeaderv2/index.js

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+
+export const ProductNameHeaderv2 = ({
+  productName
+}) => {
+  return (
+    <Container>
+      <ScreenHeaderv2 headerType={"product-name-header"} text={productName} />
+    </Container>
+  );
+};

package/src/components/molecules/ProductNameHeaderv2/styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+
+  * + * {
+    margin-left: 10px;
+  }
+`;

package/src/components/molecules/ProductSkuStatus/ProductSkuStatus.stories.js

@@ -0,0 +1,37 @@
+import { ProductSkuStatus } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/ProductSkuStatus",
+  component: ProductSkuStatus,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductSkuStatus {...args} />;
+
+export const ProductSkuStatusDefault = Template.bind({});
+
+ProductSkuStatusDefault.args = {
+  statusType: "AP",
+  percent: 84,
+  backgroundColor: "s2",
+  priority: "no priority",
+  percentRequired:100,
+  // date: new Date().toLocaleDateString(),
+};

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

@@ -0,0 +1,26 @@
+import { Container } from "./styles";
+import { Status } from "../../atoms/Status/index";
+import { Progress } from "../../atoms/Progress";
+
+export const ProductSkuStatus = ({
+  statusType,
+  percentRequired,
+  version,
+  setShowVersionSelector,
+  showShield
+}) => {
+  return (
+    <Container>
+      {statusType && <Status statusType={statusType} />}
+      <Progress
+        percent={percentRequired}
+        progressBarType={statusType}
+        percentRequired={percentRequired}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
+        showShield={showShield}
+      />
+       
+    </Container>
+  );
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap:10px;
+`;