contentoh-components-library 21.5.7 → 21.5.9

package/src/components/organisms/EditGroup/index.js

@@ -1,321 +0,0 @@
-import React, { useState, useEffect, useReducer, useRef } from "react";
-import { Container } from "./styles";
-import { Button } from "@mui/material";
-import { GroupRow } from "./styles";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import trash from "../../../assets/images/Icons/trash.svg";
-import edit from "../../../assets/images/Icons/edit.svg";
-import close from "../../../assets/images/Icons/close.svg";
-import save from "../../../assets/images/Icons/save.svg";
-import { Fade, Grow, Zoom, Backdrop } from "@mui/material";
-import axios from "axios";
-
-const reducerGroups = (state, action) => {
-  let { values } = state;
-  switch (action.type) {
-    case "init":
-      return { ...state, values: action.payload };
-    case "addGroup":
-      values = [...values, action.group];
-      return { ...state, values };
-    case "updateGroup":
-      values[action.payload.index][action.payload.property] =
-        action.payload.value;
-      return { ...state, values };
-    case "deleteGroup":
-      values = values.map((item) =>
-        item.groupId !== action.payload.id ? item : { ...item, isDeleted: true }
-      );
-      return { ...state, values };
-    default:
-      return state;
-  }
-};
-
-export const EditGroup = ({ token, show, onClose }) => {
-  const [groups, setGroups] = useState([]);
-  const [state, dispatch] = useReducer(reducerGroups, {});
-  const [isMoreThanTenGroups, setIsMoreThanTenGroups] = useState(false);
-  const [editingIndex, setEditingIndex] = useState(null);
-  const [deletingIndex, setDeletingIndex] = useState(null);
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const [isEditingList, setIsEditingList] = useState([]);
-  const [newGroup, setNewGroup] = useState(false);
-  const [currentEditIndex, setCurrentEditIndex] = useState(null);
-  const [inputValue, setInputValue] = useState([]);
-
-  useEffect(() => {}, [groups]);
-
-  useEffect(() => {
-    loadData();
-  }, []);
-
-  const loadData = async () => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_GROUPS_ENDPOINT}/get`,
-        {},
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-
-      const receivedGroups = JSON.parse(response.data.body).groups;
-      const groupsArray = [];
-      receivedGroups.forEach(({ id, name, retailer_id }) => {
-        groupsArray.push({
-          groupId: id,
-          groupName: name || null,
-          retailerId: retailer_id || null,
-        });
-      });
-      setGroups(groupsArray);
-
-      dispatch({ type: "init", payload: groupsArray });
-    } catch (error) {
-      console.error("Error al obtener grupos:", error);
-    }
-  };
-
-  const AddGroup = async (index, concatenatedValue) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_GROUPS_ENDPOINT}/create`,
-        {
-          groupName: concatenatedValue,
-        },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-
-      const createdGroup = response.data.body;
-      dispatch({ type: "addGroup", payload: createdGroup });
-      setEditingIndex(null);
-      setInputValue([]);
-      setIsEditingList((prevList) => {
-        const newList = [...prevList];
-        newList[index] = false;
-        return newList;
-      });
-      setCurrentEditIndex(null);
-      loadData();
-    } catch (error) {
-      console.error("Error al agregar grupo:", error);
-    }
-  };
-
-  const handleUpdateGroup = async (index, groupId, updatedGroupName) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_GROUPS_ENDPOINT}/update?id=${groupId}&groupName=${updatedGroupName}`,
-        {},
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      const updatedData = response.data.body;
-      dispatch({
-        type: "updateGroup",
-        payload: {
-          index,
-          property: "groupName",
-          value: updatedData.groupName,
-        },
-      });
-      setEditingIndex(null);
-      setInputValue([]);
-      setIsEditingList((prevList) => {
-        const newList = [...prevList];
-        newList[index] = false;
-        return newList;
-      });
-      setCurrentEditIndex(null);
-      loadData();
-    } catch (error) {
-      console.error("Error al actualizar grupo:", error);
-    }
-  };
-
-  const deleteGroup = async (groupId) => {
-    try {
-      const response = await axios.post(
-        `${process.env.REACT_APP_GROUPS_ENDPOINT}/delete?id=${groupId}`,
-        {},
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      dispatch({
-        type: "deleteGroup",
-        payload: { id: groupId },
-      });
-      loadData();
-    } catch (error) {
-      console.error("Error al borrar grupo:", error);
-    }
-  };
-
-  const handleEditButtonClick = (index) => {
-    if (isEditingList[index]) {
-      handleSaveChanges(index);
-    } else {
-      setIsEditingList((prevList) => {
-        const newList = [...prevList];
-        newList[index] = true;
-        return newList;
-      });
-      setEditingIndex(index);
-      setInputValue(groups[index].groupName);
-      setNewGroup(groups[index].groupId);
-      setCurrentEditIndex(index);
-    }
-  };
-
-  const handleDeleteButtonClick = async (groupId) => {
-    await deleteGroup(groupId);
-  };
-
-  const handleInputChange = (value, index) => {
-    setInputValue((prevInputValue) => prevInputValue + value);
-
-    setGroups((prevGroups) => {
-      const updatedGroups = [...prevGroups];
-      if (index !== undefined) {
-        updatedGroups[index] = { ...updatedGroups[index], groupName: value };
-      }
-      return updatedGroups;
-    });
-  };
-
-  const handleAddButtonClick = () => {
-    const isAnyGroupEditing = isEditingList.some((editing) => editing);
-    if (!isAnyGroupEditing && groups.length < 20) {
-      setIsEditingList((prevList) => {
-        const newList = [...prevList];
-        newList[groups.length] = true;
-        return newList;
-      });
-      setEditingIndex(groups.length);
-      const nuevoGrupo = {
-        groupName: inputValue,
-        isEditing: true,
-      };
-      setGroups([...groups, nuevoGrupo]);
-      setIsMoreThanTenGroups(groups.length + 1 > 10);
-      setNewGroup(undefined);
-      setCurrentEditIndex(groups.length);
-    }
-  };
-
-  const handleSaveChanges = (index) => {
-    const concatenatedValue = groups[index].groupName;
-    if (newGroup !== undefined) {
-      handleUpdateGroup(index, newGroup, concatenatedValue);
-    } else {
-      AddGroup(index, concatenatedValue);
-    }
-  };
-
-  return (
-    <Backdrop
-      open={show}
-      className="container-backgroundModal"
-      timeout={400}
-      style={{
-        backgroundColor: "transparent",
-        zIndex: show ? 10 : -1,
-      }}
-    >
-      <Fade in={show} timeout={400}>
-        <Container>
-          <div className="Modal-edit-group">
-            <div className="header">
-              <h2 className="title-edit">Editar grupos</h2>
-              <Button
-                className={`circular-button close-edit-button`}
-                onClick={onClose}
-              >
-                <img src={close} alt="close icon" />
-              </Button>
-            </div>
-            <p className="details-edit">
-              Agrega, edita y borra. Luego guarda los cambios.
-            </p>
-            <div
-              className={`${
-                isMoreThanTenGroups ? "table-groups-max" : "table-groups-edit"
-              }`}
-            >
-              {groups.map((group, index) => (
-                <GroupRow
-                  key={group.groupId}
-                  editing={editingIndex === index}
-                  deleting={deletingIndex === index}
-                  onMouseEnter={() => setHoveredIndex(index)}
-                  onMouseLeave={() => setHoveredIndex(null)}
-                  className={`group-row ${
-                    isEditingList[index] ? "editing" : ""
-                  }`}
-                >
-                  <input
-                    key={index}
-                    className={`input-group`}
-                    placeholder="Escribe el nombre del grupo"
-                    value={index !== undefined ? group.groupName : inputValue}
-                    onChange={(e) => handleInputChange(e.target.value, index)}
-                    disabled={!isEditingList[index]}
-                    autoFocus={isEditingList[index] && editingIndex === index}
-                  />
-                  {currentEditIndex === index ? (
-                    <Button
-                      className={`circular-button save-group-button visible`}
-                      onClick={() => handleSaveChanges(index)}
-                    >
-                      <img src={save} alt="save update icon" />
-                    </Button>
-                  ) : (
-                    <>
-                      <Button
-                        className={`circular-button edit-group-button ${
-                          hoveredIndex === index ? "visible" : ""
-                        }`}
-                        onClick={() => handleEditButtonClick(index)}
-                      >
-                        <img src={edit} alt="edit icon" />
-                      </Button>
-                      <Button
-                        className={`circular-button delete-group-button ${
-                          hoveredIndex === index ? "visible" : ""
-                        }`}
-                        onClick={() => handleDeleteButtonClick(group.groupId)}
-                      >
-                        <img src={trash} alt="trash icon" />
-                      </Button>
-                    </>
-                  )}
-                </GroupRow>
-              ))}
-            </div>
-            <div className="container-save-add">
-              <Button
-                className="button-group-add"
-                onClick={() => handleAddButtonClick()}
-              >
-                + Agregar Grupo
-              </Button>
-            </div>
-          </div>
-        </Container>
-      </Fade>
-    </Backdrop>
-  );
-};

package/src/components/organisms/EditGroup/styles.js

@@ -1,207 +0,0 @@
-import styled, {keyframes} from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-export const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  display: grid;
-  place-items: center;
-  .header {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-  }
-  .close-edit-button {
-    min-width: 24px;
-    height: 24px;
-    background-color: transparent;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s ease, opacity 0.3s ease;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    -webkit-filter: grayscale(100%);
-    filter: grayscale(100%);
-    opacity:0.4;
-    img {
-      width: 10px;
-      height: 10px;
-    }
-
-    &:hover {
-      background-color: ${GlobalColors.blue_light};
-      -webkit-filter: grayscale(0);
-      filter: grayscale(0);
-      opacity:1;
-    }
-  }
-  .Modal-edit-group {
-    position: absolute;
-    top: 10%;
-    z-index: 20;
-    width: fit-content;
-    max-width: 80%;
-    min-width: 80px;
-    height: fit-content;
-    max-height: 100%;
-    min-height: 120px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: white;
-    border-radius: 10px;
-    border: 1px solid ${GlobalColors.gray_light};
-    padding: 25px 25px 20px 25px;
-    box-shadow: 0px 2px 4px 0px #00000040;
-  }
-
-  .title-edit {
-    width: 100%;
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 17px;
-    font-weight: 500;
-    line-height: 20px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: ${GlobalColors.black};
-  }
-
-  .details-edit {
-    width: 100%;
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 14px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: ${GlobalColors.gray};
-    margin: 5px 0 10px;
-  }
-  .container-save-add {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-  }
-  .button-group-add {
-    font-family: ${FontFamily.RobotoRegular}, sans-serif;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 14px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: ${GlobalColors.magenta_s2};
-    text-transform: capitalize;
-    border: none;
-    background: transparent;
-    border-radius: 20px;
-    &:hover {
-      background-color: ${GlobalColors.blue_light};
-    }
-  }
-  .table-groups-edit {
-    width: 100%;
-    min-width: 288px;
-    border: 1px solid ${GlobalColors.gray_light};
-    border-radius: 5px;
-  }
-  .table-groups-max {
-    min-width: 288px;
-    border: 1px solid ${GlobalColors.gray_light};
-    border-radius: 5px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .modal-save {
-    .contentModal {
-      width: 25%;
-    }
-  }
-`;
-
-export const GroupRow = styled.div`
-  width: 100%;
-  height: 34px;
-  margin: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-family: Roboto;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 14px;
-  letter-spacing: 0em;
-  text-align: left;
-  text-decoration: none;
-  border-bottom: 1px solid ${GlobalColors.gray_light};
-  padding: 0 8px 0 0;
-  input {
-    width:100%;
-    min-width: 215px;
-    background: transparent;
-    color: ${GlobalColors.gray};
-    border: 0;
-    font-size: 12px;
-    font-family:${FontFamily.RobotoRegular}, sans-serif;
-    padding: 5px 20px;
-    ::placeholder {
-      color: #CBCBCB;
-    }
-  }
-
-  input:focus {
-    border: 0;
-  }
-  &.editing {
-    background-color: ${GlobalColors.blue_light}; 
-    color: black;
-    input{
-      color: ${GlobalColors.black};
-    }
-  }
-
-  .save-group-button,
-  .edit-group-button,
-  .delete-group-button {
-    min-width: 24px;
-    height: 24px;
-    background-color: transparent;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s ease, opacity 0.3s ease;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  
-    img {
-      width: 12px;
-      height: 12px;
-    }
-  
-    &:hover {
-      background-color: ${GlobalColors.blue_light};
-    }
-  }
-  .edit-group-button,
-  .delete-group-button {
-    display: none;
-  }
-
-  .visible {
-    display: flex;
-    animation: ${fadeIn} 0.3s ease-in-out forwards;
-  }
-`;

package/src/components/organisms/FullProductNamev2/FullProductNamev2.stories.js

@@ -1,28 +0,0 @@
-import { FullProductNamev2 } from "./index";
-
-export default {
-  title: "Components/organisms/FullProductNamev2",
-  component: FullProductNamev2,
-};
-
-const Template = (args) => <FullProductNamev2 {...args} />;
-export const FullProductNamev2Default = Template.bind({});
-
-FullProductNamev2Default.args = {
-  headerData: {
-    name: "Nombre del producto",
-    status: "P",
-    percent: 20,
-    backgroundColor: "in_progress",
-    priority: "low",
-    date: new Date().toLocaleDateString(),
-    features: [
-      { feature: "Prov", value: "Unilever" },
-      { feature: "Vendor", value: "1234567890" },
-      { feature: "SKU", value: "1234567890" },
-      { feature: "UPC", value: "1234567890" },
-      { feature: "Categoría", value: "Desodorantes Caballero y Dama" },
-    ],
-    validation: "null-button",
-  },
-};

package/src/components/organisms/FullProductNamev2/index.js

@@ -1,101 +0,0 @@
-import { Container } from "./styles";
-import { ProductNameHeaderv2 } from "../../molecules/ProductNameHeaderv2";
-import { FeaturesBarv2 } from "../../molecules/FeaturesBarv2";
-import { Button } from "../../atoms/GeneralButton/index";
-import { useState } from "react";
-import { useEffect } from "react";
-import { ProductSkuStatus } from "../../molecules/ProductSkuStatus";
-import { PriorityFlagv2 } from "../../atoms/PriorityFlagv2";
-
-
-export const FullProductNamev2 = ({
-  headerData,
-  percent,
-  servicesData,
-  version,
-  setShowVersionSelector,
-}) => {
-  const [retailers, setRetailers] = useState([]);
-  
-
-  useEffect(() => {
-    const rtls = headerData?.retailers || headerData?.retailersAvailable;
-    servicesData &&
-      rtls?.forEach((rt) => {
-        const element = [];
-        servicesData.forEach((sd) => {
-          if (sd.id_retailer === rt.id) {
-            element.push(sd.status ? sd.status : "R");
-          } else element.push("NA");
-          rt["services"] = element;
-        });
-      });
-    setRetailers(rtls);
-  }, [servicesData]);
-
-  const getTime = (date) => {
-    if (!date) return "";
-    return new Date(date).toLocaleDateString();
-  };
-
-  return (
-    <Container>
-      <div className="top-product-close">
-        <ProductNameHeaderv2
-        productName={headerData?.article?.name || headerData?.name}
-      />
-        <Button
-          buttonType="general-white-button close-buttonv2"
-          onClick={() => {
-            window.location.href = `/products`;
-          }}
-        />
-      </div>
-      
-      <div className="features-bar-container">
-        <FeaturesBarv2
-          containerClassName="bar-container"
-          features={[
-            {
-              feature: "Categoría",
-              value: headerData?.article?.category || headerData?.categoryName,
-            },
-            {
-              feature: "Proveedor",
-              value: headerData?.article?.company_name,
-            },
-          ]}
-        />
-      </div> 
-      <div className="features-bar-sku">
-        <PriorityFlagv2 priority={headerData?.prio}/>
-        <FeaturesBarv2
-        containerClassName="bar-sku"
-        contClassName="bar-sku-cont"
-        features={[
-              {
-                feature: "SKU",
-                value: headerData?.article?.upc || headerData?.upc,
-              },
-            ]}
-            />
-        <ProductSkuStatus
-          productName={headerData?.article?.name || headerData?.name}
-          statusType={
-            headerData?.version_status ||
-            headerData?.status ||
-            headerData?.article_status
-          }
-          setShowVersionSelector={setShowVersionSelector}
-          percentRequired={percent}
-          showShield={true}
-          percent={percent?.toFixed(0)}
-          date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
-          containerClassName="bar-sku"
-          contClassName="bar-sku-cont"
-              version={version}
-        />
-      </div>
-    </Container>
-  );
-};

package/src/components/organisms/FullProductNamev2/styles.js

@@ -1,49 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-
-export const Container = styled.div`
-    background: ${GlobalColors.blue_light};
-    padding: 16px 20px 15px 20px;
-    border-radius: 10px;
-    width: 100%;
-  .features-bar-container {
-    display: flex;
-    flex-direction:column;
-    justify-content: space-between;
-    margin:10px 0px;
-  }
-  .features-bar-sku {
-    margin:10px 5px;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    
-  }
-
-  & + * {
-    margin-top: 0px;
-  }
-
-  .top-product-close{
-    display:flex;
-    justify-content:space-between;
-    button {
-      width: 34px;
-      height: 34px;
-      border: 1px solid #f0f0f0;
-      background-size: 20px;
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      img {
-        height: 15px;
-      }
-  
-      & + * {
-        margin-left: 10px;
-      }
-    }
-  }
-}
-`;