contentoh-components-library 21.5.99 → 21.6.1

package/src/components/atoms/InputFormatter/index.js

@@ -1,7 +1,17 @@
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
-import { useState } from "react";
-import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import { ButtonsContainer, Container, InputContainer, OptionsContainer, BottomContainer } from "./styles";
+
+import AiGenerationIcon from "../../../assets/images/Icons/ia-icon.png";
+import ArrowIcon from "../../../assets/images/Icons/arrow.png";
+import LoadingIcon from "../../../assets/images/Icons/loading.svg";
+import CancelIcon from "../../../assets/images/Icons/cancel.png";
+import ReloadIcon from "../../../assets/images/Icons/reload.png";
+
+import { useAiProductEdition } from "../../../contexts/AiProductEdition";
+
+import { getTextSimilarityPercentage } from "../../../ai/utils/compare-strings";
 
 export const InputFormatter = ({
   mainValue = "",
@@ -12,7 +22,29 @@ export const InputFormatter = ({
   isRequired,
   maxChar,
   disabled,
+
+  //AI Generation
+  hasAiGeneration = false,
+  isAiGenerationLoading = false,
+  isAiRegenerationLoading=false,
+  isAiActive = false,
+  isAiAvailable = false,
+  aiGenerated = false,
+
+  setIsAiActive = () => {},
+  handlerAiGeneration = () => {},
+  handlerRegenerateSuggestions = () => {},
+  handleChangeSuggestion = () => {}
 }) => {
+
+  const {
+    suggestions,
+    currentSuggestion
+  } = useAiProductEdition();
+
+  const [aiSuggestionAccepted, setAiSuggestionAccepted] = useState(false);
+  const [valueAccepted, setValueAccepted] = useState(mainValue);
+
   const [inputValue, setInputValue] = useState(mainValue);
   const [selection, setSelection] = useState(false);
   const [position, setPosition] = useState({ left: 0, top: 0 });
@@ -67,32 +99,49 @@ export const InputFormatter = ({
     setCharsCounter(h.getLength() - 1);
     value = valueFormater(value);
 
-    if (updatedDescriptions) {
-      let idInput = inputId;
-      let dataSave = updatedDescriptions?.slice();
-      if (dataSave?.length > 0) {
-        const index = dataSave.findIndex((e) => e.attributeId === idInput);
-        if (index !== -1) {
-          if (value !== mainValue) dataSave[index].value = value;
-          else dataSave.splice(index, 1);
+    updateParentDescriptions(value, aiSuggestionAccepted);
+  };
+
+  const updateParentDescriptions = (finalValue, isAiAccepted) => {
+    if (!updatedDescriptions) return;
+
+    let idInput = inputId;
+    let dataSave = updatedDescriptions?.slice();
+
+    const similarity = getTextSimilarityPercentage(valueAccepted, inputValue);
+
+    const generatedWithAi = (isAiAccepted) || aiGenerated && similarity >= 50;
+
+    if (dataSave?.length > 0) {
+      const index = dataSave.findIndex((e) => e.attributeId === idInput);
+      if (index !== -1) {
+        if (finalValue !== mainValue) {
+          dataSave[index].value = finalValue;
+          dataSave[index].aiSuggestionAccepted = generatedWithAi;
         } else {
-          dataSave.push({
-            articleId: articleId,
-            attributeId: idInput,
-            value: value,
-          });
+          dataSave.splice(index, 1);
         }
       } else {
-        if (value !== mainValue) {
+        if (finalValue !== mainValue) {
           dataSave.push({
             articleId: articleId,
             attributeId: idInput,
-            value: value,
+            value: finalValue,
+            aiSuggestionAccepted: generatedWithAi,
           });
         }
       }
-      setUpdatedDescriptions(dataSave);
+    } else {
+      if (finalValue !== mainValue) {
+        dataSave.push({
+          articleId: articleId,
+          attributeId: idInput,
+          value: finalValue,
+          aiSuggestionAccepted: generatedWithAi,
+        });
+      }
     }
+    setUpdatedDescriptions(dataSave);
   };
 
   const getSelection = (range, a, b) => {
@@ -105,6 +154,41 @@ export const InputFormatter = ({
     }
   };
 
+  //AI Generation
+  const handleAcceptSuggestion = (suggestionValue) => {
+    if (!suggestionValue) return;
+
+    setInputValue(suggestionValue);
+    setValueAccepted(suggestionValue);
+    setAiSuggestionAccepted(true);
+    setIsAiActive(false);
+
+    // Formateamos el valor sugerido igual que en el onChange
+    const formattedSuggestion = valueFormater(suggestionValue);
+
+    // Disparamos la actualización enviando "true" directamente
+    updateParentDescriptions(formattedSuggestion, true);
+  };
+
+  useEffect(() => {
+
+    // Comprueba cuando la función de IA se cierra y no se acepto una sugerencia
+    // Devuelve el valor inicial
+    if(!isAiActive && !aiSuggestionAccepted) return setInputValue(valueAccepted);
+
+  }, [suggestions, isAiActive]);
+
+  useEffect(() => {
+
+    if(!isAiActive) return;
+
+    // Comprueba si la sugerencia fue aceptada
+    setAiSuggestionAccepted(false);
+
+  }, [isAiActive]);
+
+  //End Ai Generation
+
   return (
     <Container
       isRequired={
@@ -114,39 +198,104 @@ export const InputFormatter = ({
       selection={selection}
       position={position}
     >
-      <ReactQuill
-        id={inputId + ""}
-        ref={(el) => setQuill(el)}
-        defaultValue={getValue(inputValue)}
-        readOnly={disabled}
-        modules={{ toolbar: ["bold"] }}
-        onKeyPress={(e) => {
-          if (charsCounter >= maxLength && e.key !== "Backspace") {
-            e.preventDefault();
-          }
-        }}
-        onKeyDown={(e) => {
-          let keysArray = [
-            "Backspace",
-            "Meta",
-            "ArrowLeft",
-            "ArrowRight",
-            "ArrowUp",
-            "ArrowDown",
-          ];
-          if (
-            charsCounter >= maxLength &&
-            keysArray.every((key) => e.key !== key)
-          ) {
-            e.preventDefault();
-          }
-        }}
-        onChange={(valueInput, user, range, h) => onChange(valueInput, h)}
-        onChangeSelection={getSelection}
-      />
-      <p className="description-limit">
-        {charsCounter}/{maxLength}
-      </p>
+      <InputContainer className={hasAiGeneration ? "ai-generation" : ""}>
+        {
+          <ReactQuill
+            id={inputId + ""}
+            ref={(el) => setQuill(el)}
+            value={isAiActive ? (
+              currentSuggestion?.[inputId]?.value
+            ) : getValue(inputValue)}
+            readOnly={isAiActive || disabled}
+            modules={{
+              toolbar: false,
+            }}
+            onKeyPress={(e) => {
+              if (charsCounter >= maxLength && e.key !== "Backspace") {
+                e.preventDefault();
+              }
+            }}
+            onKeyDown={(e) => {
+              let keysArray = [
+                "Backspace",
+                "Meta",
+                "ArrowLeft",
+                "ArrowRight",
+                "ArrowUp",
+                "ArrowDown",
+              ];
+              if (
+                charsCounter >= maxLength &&
+                keysArray.every((key) => e.key !== key)
+              ) {
+                e.preventDefault();
+              }
+            }}
+            onChange={(valueInput, user, range, h) => onChange(valueInput, h)}
+            onChangeSelection={getSelection}
+            className={`quill ${hasAiGeneration && "has-ai"} ${isAiActive && "ai-generation"}`}
+          />
+        }
+        {
+          hasAiGeneration && (
+            <div className={`icon_container ${isAiActive ? "ai-active" : ''} ${isAiAvailable ? "ai-available" : ''}`} title={!isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : ''} onClick={handlerAiGeneration}>
+              <img className={isAiGenerationLoading ? "loading" : ""} src={isAiGenerationLoading ? LoadingIcon : isAiActive ? CancelIcon : AiGenerationIcon} />
+            </div>
+          )
+        }
+      </InputContainer>
+      <BottomContainer className={isAiActive ? "with-ai" : ""}>
+        {
+          isAiActive && (
+            <div className="ai-options">
+
+              <OptionsContainer>
+                <div className={
+                  `arrow ${currentSuggestion?.[inputId]?.index === 0 && "disabled"}`
+                } onClick={() => {
+                  handleChangeSuggestion({ action: "prev" })
+                }}>
+                  <img src={ArrowIcon} alt="" />
+                </div>
+                <p>
+                  {(currentSuggestion?.[inputId]?.index + 1) || 1}
+                  /
+                  {suggestions?.[inputId]?.length}
+                </p>
+                <div className={`arrow right ${currentSuggestion?.[inputId]?.index === suggestions?.[inputId]?.length - 1 && "disabled"}`} onClick={() => {
+
+                }}>
+                  <img onClick={() => {
+                    handleChangeSuggestion({ action: "next" })
+                  }} src={ArrowIcon} alt="ai icon" />
+                </div>
+              </OptionsContainer>
+
+              <ButtonsContainer>
+
+                <div className={`reload-suggestions ${isAiRegenerationLoading && "loading"}`} onClick={() => {
+                  handlerRegenerateSuggestions({
+                    type: "description"
+                  });
+                }}>
+                  <img className="" src={isAiRegenerationLoading ? LoadingIcon : ReloadIcon} />
+                </div>
+
+                <div className="accept-suggestion" onClick={() => {
+                  handleAcceptSuggestion(currentSuggestion?.[inputId]?.value);
+                }}>
+                  <p>Aceptar sugerencia</p>
+                </div>
+
+              </ButtonsContainer>
+
+            </div>
+          )
+        }
+        <p className="description-limit">
+          {charsCounter}/{maxLength}
+        </p>
+      </BottomContainer>
     </Container>
   );
 };

package/src/components/atoms/InputFormatter/styles.js

@@ -10,6 +10,24 @@ export const Container = styled.div`
     position: relative;
     border-radius: 5px;
 
+    &.has-ai {
+      .ql-container {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.ai-generation {
+
+      .ql-container {
+        border: 1px solid #3F8AED;
+        border-radius: 5px;
+        background-color: rgba(59, 147, 224, 0.05);
+        margin: 5px;
+        margin-right: 2.5rem;
+      }
+
+    }
+
     .ql-toolbar {
       background-color: ${GlobalColors.s2};
       position: absolute;
@@ -44,3 +62,269 @@ export const Container = styled.div`
     margin-top: 5px;
   }
 `;
+export const InputContainer = styled.div`
+
+  &.ai-generation {
+
+    position: relative;
+
+    > input[type=text] {
+      padding-right: 2.5rem;
+    }
+
+    > input[type=text].ia-input {
+      background-color: rgba(59, 147, 224, 0.05);
+      border: 1px solid #3F8AED;
+    }
+
+    .icon_container {
+      position: absolute;
+      right: 10px;
+      top: 7px;
+      width: 22.5px;
+      height: 22.5px;
+      padding: 4px;
+
+      cursor: not-allowed;
+
+      border-radius: 50%;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        background: gray;
+        background-size: 200% 200%;
+
+        animation: ai-shimmer 3s ease-in-out infinite alternate;
+        z-index: -1;
+      }
+
+      &.ai-available {
+        cursor: pointer;
+      }
+
+      &.ai-available::before{
+        background: linear-gradient(
+          120deg,
+          #4285F4 20%,
+          #33A3C8 50%,
+          #4285F4 80%
+        );
+        background-size: 200% 200%;
+      }
+
+      &.ai-available::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.75;
+
+        background: linear-gradient(
+          135deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0) 40%,
+          rgba(255, 255, 255, 0.8) 50%,
+          rgba(255, 255, 255, 0) 60%,
+          rgba(255, 255, 255, 0) 100%
+        );
+
+        transform: scale(2) translate(-100%, -100%);
+        z-index: 3;
+
+        animation: ai-glint 3s infinite ease-in-out;
+      }
+
+      &.ai-available img.loading ~ ::after {
+        animation: none;
+        display: none;
+      }
+
+      &.ai-active::after {
+        animation: none;
+        display: none;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        position: relative;
+        z-index: 2;
+        filter: invert(1) grayscale(1) brightness(2);
+      }
+
+      img.loading {
+        width: 22.5px;
+        height: 22.5px;
+      }
+
+      &.ai-active::before {
+        background: oklch(57.7% 0.245 27.325);
+      }
+
+
+    }
+  }
+
+  @keyframes ai-shimmer {
+    0% {
+      background-position: 0% 50%;
+    }
+    100% {
+      background-position: 100% 50%;
+    }
+  }
+
+  @keyframes ai-glint {
+    0% {
+      transform: scale(2) translate(-100%, -100%);
+    }
+    70%, 100% {
+      transform: scale(2) translate(100%, 100%);
+    }
+  }
+
+`;
+export const BottomContainer = styled.div`
+
+  display: flex;
+  align-items: center;
+  padding-top: 5px;
+  justify-content: flex-end;
+
+  &.with-ai {
+    justify-content: space-between;
+  }
+
+  > div.ai-options {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+`;
+
+export const OptionsContainer = styled.div`
+
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  user-select: none;
+
+  p {
+    font-size: 12px;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.deep_gray};
+    padding-top: 2px;
+  }
+
+  .arrow {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    padding: 2px;
+
+    border-radius: 5px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.disabled {
+      opacity: 0.5;
+      filter: grayscale(1);
+      cursor: not-allowed;
+    }
+
+    :hover {
+      background-color: rgba(59, 147, 224, 0.1);
+    }
+
+    &.right {
+      transform: rotate(180deg);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+  }
+
+`;
+
+export const ButtonsContainer = styled.div`
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  .reload-suggestions {
+
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    padding: 4px;
+    cursor: pointer;
+
+    &.loading {
+
+      filter: grayscale(1);
+      opacity: 0.75;
+      cursor: not-allowed;
+
+      > img {
+        width: 20px;
+        height: 20px;
+      }
+
+    }
+
+    :hover {
+      background-color: rgba(59, 147, 224, 0.1);
+    }
+
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+  }
+
+  .accept-suggestion {
+
+    text-align: center;
+    padding: 4px 5px;
+    cursor: pointer;
+    background-color: rgba(59, 147, 224, 0.05);
+
+    border-radius: 5px;
+
+    :hover {
+      background-color: rgba(59, 147, 224, 0.1);
+    }
+
+    > p {
+      font-size: 11px;
+    }
+  }
+
+`;

package/src/components/atoms/RetailerSelector/RetailerSelector.stories.js

@@ -0,0 +1,10 @@
+import { RetailerSelector } from ".";
+
+export default {
+  component: RetailerSelector,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Default = {};

package/src/components/atoms/RetailerSelector/index.js

@@ -0,0 +1,3 @@
+export const RetailerSelector = () => {
+  return <div>RetailerSelector Component</div>;
+};

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

@@ -13,6 +13,7 @@ import Slide2 from "../../../assets/images/sliderToolTip/slide22.svg";
 import Slide3 from "../../../assets/images/sliderToolTip/slide23.svg";
 import { FinancedCompanies } from "./FinancedCompanies";
 import { GlobalColors } from "../../../global-files/variables";
+import { useAiProductEdition } from "../../../contexts/AiProductEdition";
 
 export const StatusAsignationInfo = ({
   status = "-",
@@ -37,6 +38,10 @@ export const StatusAsignationInfo = ({
   const [assignationType, setAssignationType] = useState("facilitator");
   const isFinanced = FinancedCompanies.includes(user?.id_company);
 
+  const {
+    inputsUsingAi
+  } = useAiProductEdition();
+
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
       document.removeEventListener("click", closeAsignations, false);
@@ -93,7 +98,10 @@ export const StatusAsignationInfo = ({
       {showSaveButton && !isFinanced && (
         <Button
           buttonType={"circular-button save-button"}
-          onClick={onClickSave}
+          onClick={() => {
+            if(Object.values(inputsUsingAi).some(input => !!input?.using)) return console.warn("Para guardar se debe de dejar de usar la generación con IA");
+            onClickSave();
+          }}
         />
       )}
       {imagesSection && (

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

@@ -36,6 +36,18 @@ export const TabsMenu = ({
   const [llave, setLlave] = useState("");
   const [objeto, setObjeto] = useState();
 
+  // Sincronizar sections cuando activeTab cambia desde el exterior
+  useEffect(() => {
+    if (activeTab && Object.keys(tabsSections).length > 0) {
+      const tempArray = {};
+      Object.keys(tabsSections).forEach((section) => {
+        tempArray[section] = section === activeTab;
+      });
+      setSections(tempArray);
+      setImagesSection(activeTab === "Imágenes");
+    }
+  }, [activeTab, tabsSections]);
+
   const activeSection = (key, array = {}) => {
     let tempArray = {};
     setImagesSection(key === "Imágenes");