contentoh-components-library 21.5.3 → 21.5.4

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

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

@@ -0,0 +1,207 @@
+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/FullProductNameHeader/index.js

@@ -17,13 +17,18 @@ export const FullProductNameHeader = ({
   rejectAll,
   servicesData,
   showApproveRejectAll,
+  productObservation,
+  isObservationVisible,
+  toggleObservation,
+  // handleClickOutside,
+   hideObservation
 }) => {
   const [retailers, setRetailers] = useState([]);
 
   useEffect(() => {
     const rtls = headerData?.retailers || headerData?.retailersAvailable;
     servicesData &&
-      rtls.forEach((rt) => {
+      rtls?.forEach((rt) => {
         const element = [];
         servicesData.forEach((sd) => {
           if (sd.id_retailer === rt.id) {
@@ -52,7 +57,14 @@ export const FullProductNameHeader = ({
         percentRequired={percent}
         percent={percent?.toFixed(0)}
         priority={headerData?.prio}
+        productObservation={productObservation}
         date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
+        dataProduct={headerData}
+        isObservationVisible ={isObservationVisible}
+        toggleObservation = {toggleObservation}
+        // handleClickOutside ={handleClickOutside}
+         hideObservation={hideObservation}
+
       />
       <div className="features-bar-container">
         <FeaturesBar

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

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

@@ -0,0 +1,101 @@
+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>
+  );
+};