contentoh-components-library 21.5.2 → 21.5.3

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

@@ -1,391 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Container, ContainerIcon } from "./styles";
-import { Button, Menu, MenuItem } from "@mui/material";
-import Select from "@mui/material/Select";
-import axios from "axios";
-
-//Componentes
-import { Modal } from "../../organisms/Modal";
-import { CustomChip } from "../../atoms/CustomChip";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-
-//svg
-import options from "../../../assets/images/Icons/options.svg";
-import { AddGroup } from "../AddGroup";
-
-export const Phase = ({
-  key,
-  id,
-  phaseId,
-  phases,
-  phaseName,
-  nextPhase,
-  groups,
-  onDeletePhase,
-  token,
-  showMenu=true,
-  showButtonChip=true,
-}) => {
-  const [selectedValue, setSelectedValue] = useState([]);
-  const [chips, setChips] = useState([]);
-  const [groupsSelected, setGroupsSelected] = useState([]);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [nextPhaseState, setNextPhaseState] = useState("");
-  const [tempChips, setTempChips] = useState([]);
-  const open = Boolean(anchorEl);
-  const [modalData, setModalData] = useState({
-    show: false,
-    title: "Actualización completa",
-    message: "",
-    icon: "success",
-  });
-
-  const ITEM_HEIGHT = 48;
-  const ITEM_PADDING_TOP = 8;
-  const MenuProps = {
-    PaperProps: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  };
-
-  const loadData = async() => {
-    const activeGroups = groups.filter((group) => group.groupActive === 1);
-    const initialChips = activeGroups.map((group) => ({
-      id: group.groupId,
-      label: group.groupName,
-    }));
-    setChips(initialChips);
-
-    const nextPhaseObject = phases.find((phase) => phase.phaseId === nextPhase);
-    if (nextPhaseObject) {
-      setNextPhaseState(nextPhaseObject.phaseName);
-    }
-  };
-
-  useEffect(() => {
-    loadData();
-  }, [groups]);
-
-  useEffect(() => {
-    loadData();
-  }, [nextPhase, phases]);
-
-  useEffect(() => {
-    handleGroupSelect();
-  }, [groupsSelected]);
-
-
-  useEffect(() => {
-    handleNextPhaseSelect();
-  }, [selectedValue]);
-
-  //agregar fase
-  const onAdd = async (phaseId) => {
-    if (selectedValue && !groupsSelected.includes(selectedValue)) {
-      const updatedGroups = groups.map((group) =>
-        group.groupName === selectedValue ? { ...group, groupActive: 1 } : group
-      );
-      setTempChips((prevChips) => [
-        ...prevChips,
-        { id: phaseId, label: selectedValue },
-      ]);
-  
-      setGroupsSelected((prevGroups) => [...prevGroups, selectedValue]);
-      setSelectedValue("");
-      loadData();
-    }
-  };
-
-  //agregar grupo a fase
-  const addGroup = async (phaseId, groups) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        {
-          retailerGroupsIds: groups,
-          phaseId,
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log(response.data.body)
-      loadData();
-    } catch (error) {
-      console.error("Error al agregar grupo a fase:", error);
-    }
-  };
-
-  //actualiza siguiente fase
-  const updateNextPhase = async (phaseId, newNextPhase) => {
-    try {
-      console.log("fase y grupos", { phaseId, newNextPhase });
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/update`,
-        {
-          nextPhaseId: newNextPhase,
-          phaseId,
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log(response.data.body);
-    } catch (error) {
-      console.error("Error al actualizar grupo de fase:", error);
-    }
-  };
-
-  const handleGroupSelect = async () => {
-    for (const groupId of groupsSelected) {
-      const matchingGroup = groups.find((group) => group.groupId === groupId);
-      if (matchingGroup) {
-        if (!tempChips.find((chip) => chip.key === matchingGroup.groupId)) {
-          setTempChips((prevChips) => [
-            ...prevChips,
-            { id: matchingGroup.groupId, label: matchingGroup.groupName },
-          ]);
-        }
-        await addGroup(phaseId, [groupId]); 
-      }
-    }
-  };
-
-
-  const handleNextPhaseSelect = () => {
-    if (selectedValue.length > 0) {
-      const Id = selectedValue[0];
-      const matchingPhase = phases.find((phase) => phase.phaseId === Id);
-      if (matchingPhase) {
-        checkAvailablePhase(phaseId, matchingPhase.phaseId);
-      }
-    }
-  };
-
-
-  //checa si llega una fase que se tiene en otro lado 
-  const checkAvailablePhase = (phaseId, newNextPhase) => {
-    const isNextPhaseUsed = phases.some(phase => phase.nextPhaseIfApproved === newNextPhase);
-  
-    if (isNextPhaseUsed) {
-      setModalData({
-        show: true,
-        className: "modal-next-phase",
-        message: `La fase ${newNextPhase} ya está siendo utilizada como siguiente fase en otra fase.`,
-        icon: "info",
-        customComponent: (
-          <div className="container-input-name">
-            <p>La fase anterior se borrará</p>
-            <p>¿Estás seguro?</p>
-          </div>
-        ),
-        buttons: [
-          <ButtonV2
-          key="btn-Cancelar"
-          type="white"
-          label="Cancelar"
-          size={12}
-          onClick={() => {
-            setModalData((prev) => ({ ...prev, show: false }))
-          }}
-        />,
-          <ButtonV2
-            key="btn-Aceptar"
-            type="pink"
-            label="Aceptar"
-            size={12}
-            onClick={() => {
-              setModalData((prev) => ({ ...prev, show: false }));
-            }}
-          />,
-        ],
-      })
-    } else {
-      // Si la fase no está siendo utilizada, se actualizar la siguiente fase
-      updateNextPhase(phaseId, newNextPhase);
-    }
-  };
-
-  //eliminar chip
-  const handleChipDelete = async(phaseId, chipToRemove) => {
-    setGroupsSelected((prevGroups) =>
-      prevGroups.filter((chip) => chip.id !== chipToRemove.id)
-    );
-    setChips((prevChips) =>
-      prevChips.filter((chip) => chip.id !== chipToRemove.id)
-    );
-    setTempChips((prevChips) =>
-    prevChips.filter((chip) => chip.id !== chipToRemove.id)
-  );
-    await deleteGroup(phaseId, chipToRemove.id);
-  };
-
-  //eliminar grupo de fase
-  const deleteGroup = async (phaseId, groupId) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_PHASES_ENDPOINT}/delete`,
-        {
-          deleteGroupOfPhase: {
-            phaseId,
-            groupId,
-          },
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      console.log("grupo eliminado correctamente");
-      loadData();
-      setTempChips((prevChips) =>
-      prevChips.filter((chip) => chip.id !== groupId)
-    );
-    } catch (error) {
-      console.error("Error al eliminar grupo de fase:", error);
-    }
-  };
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <Container>
-      <div key={key} className="header-phase">
-        <h2>
-          Fase {id} - {phaseName}
-        </h2>
-        <div className="text-button-container">
-          <div className="phase-sel">
-            <p className="text-phase">Siguiente Fase </p>
-            <Select
-              value={
-                selectedValue.length > 0
-                  ? selectedValue[0]
-                  : nextPhaseState
-                  ? nextPhaseState
-                  : ""
-              }
-              placeholder={`Fase`}
-              onChange={(e) => {
-                const selectedPhase = phases.find(
-                  (phase) => phase.phaseName === e.target.value
-                );
-                setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
-              }}
-              sx={{
-                minWidth: "100px",
-                height: "24px",
-                background: "#F7F7FC",
-                borderRadius: "5px",
-                fontSize: "12px",
-              }}
-              MenuProps={{
-                PaperProps: {
-                  style: {
-                    background: "#F7F7FC",
-                  },
-                },
-              }}
-            >
-              {phases.map((phase) => (
-                <MenuItem
-                  key={phase.phaseId}
-                  value={phase.phaseName}
-                  sx={{
-                    fontSize: "12px",
-                    color: "#262626",
-                    minHeight: "auto",
-                  }}
-                >
-                  {phase.phaseName}
-                </MenuItem>
-              ))}
-            </Select>
-            {showMenu && (
-              <>
-                <Button
-                  id="basic-button"
-                  aria-controls={open ? "basic-menu" : undefined}
-                  aria-haspopup="true"
-                  aria-expanded={open ? "true" : undefined}
-                  onClick={(e) => handleClick(e)}
-                >
-                  <img src={options} alt="" />
-                </Button>
-                <Menu
-                  id="basic-menu"
-                  anchorEl={anchorEl}
-                  open={open}
-                  onClose={handleClose}
-                  MenuListProps={{
-                    "aria-labelledby": "basic-button",
-                  }}
-                  sx={{
-                    ul: {
-                      paddingTop: "0px",
-                      paddingBottom: "0px",
-                    },
-                  }}
-                >
-                  <MenuItem
-                    onClick={() => onDeletePhase(id)}
-                    sx={{
-                      fontSize: "12px",
-                      color: "#262626",
-                      minHeight: "auto",
-                    }}
-                  >
-                    Eliminar Fase
-                  </MenuItem>
-                </Menu>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="attributes-container">
-        {chips.map((chip) => (
-          <CustomChip
-            key={chip.id}
-            label={chip.label}
-            onDelete={() => handleChipDelete(phaseId, chip)}
-            showDelete={showButtonChip}
-          />
-        ))}
-        {showButtonChip && <AddGroup
-        id={`add-group-select-${phaseId}`}
-        items={groups
-          .filter((group) => group.groupActive === 0)
-          .map((group) => ({
-            value: group.groupId,
-            label: group.groupName,
-          }))}
-          defaultOption="Todos los grupos"
-          placeholder="Buscar grupo"
-          onChange={(selectedItems) => {
-            setGroupsSelected(selectedItems);
-          }}
-          />}
-      </div>
-      <Modal
-        {...modalData}
-        onClickBtnDefault={() =>
-          setModalData((prev) => ({ ...prev, show: false }))
-        }
-      />
-    </Container>
-  );
-};

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

@@ -1,97 +0,0 @@
-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;
-  }
-}
-.modal-next-phase .contentModal {
-  max-width: 250px;
-  .container-input-name p{
-    text-align:center;
-  }
-}
-`;
-
-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

@@ -1,37 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-import { RetailerSelectorv2 } from "./index";
-
-export default {
-  title: "Components/molecules/RetailerSelectorv2",
-  component: RetailerSelectorv2,
-};
-
-const Template = (args) => <RetailerSelectorv2 {...args} />;
-
-export const RetailerSelectorDefault = Template.bind({});
-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,
-    },
-  ],
-};