contentoh-components-library 21.5.92 → 21.5.93

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

@@ -1,17 +1,7 @@
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
-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";
+import { useState } from "react";
+import { Container } from "./styles";
 
 export const InputFormatter = ({
   mainValue = "",
@@ -22,29 +12,7 @@ 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 });
@@ -99,49 +67,32 @@ export const InputFormatter = ({
     setCharsCounter(h.getLength() - 1);
     value = valueFormater(value);
 
-    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;
+    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);
         } else {
-          dataSave.splice(index, 1);
+          dataSave.push({
+            articleId: articleId,
+            attributeId: idInput,
+            value: value,
+          });
         }
       } else {
-        if (finalValue !== mainValue) {
+        if (value !== mainValue) {
           dataSave.push({
             articleId: articleId,
             attributeId: idInput,
-            value: finalValue,
-            aiSuggestionAccepted: generatedWithAi,
+            value: value,
           });
         }
       }
-    } else {
-      if (finalValue !== mainValue) {
-        dataSave.push({
-          articleId: articleId,
-          attributeId: idInput,
-          value: finalValue,
-          aiSuggestionAccepted: generatedWithAi,
-        });
-      }
+      setUpdatedDescriptions(dataSave);
     }
-    setUpdatedDescriptions(dataSave);
   };
 
   const getSelection = (range, a, b) => {
@@ -154,41 +105,6 @@ 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={
@@ -198,104 +114,39 @@ export const InputFormatter = ({
       selection={selection}
       position={position}
     >
-      <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>
+      <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>
     </Container>
   );
 };

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

@@ -10,24 +10,6 @@ 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;
@@ -62,269 +44,3 @@ 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/molecules/StatusAsignationInfo/index.js

@@ -13,7 +13,6 @@ 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 = "-",
@@ -38,10 +37,6 @@ 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);
@@ -98,10 +93,7 @@ export const StatusAsignationInfo = ({
       {showSaveButton && !isFinanced && (
         <Button
           buttonType={"circular-button save-button"}
-          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();
-          }}
+          onClick={onClickSave}
         />
       )}
       {imagesSection && (

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

@@ -20,23 +20,22 @@ export const TabsMenu = ({
 }) => {
   const [sections, setSections] = useState(tabsSections);
 
+  useEffect(() => {
+    if (!activeTab) return;
+    setSections((prev) => {
+      const updated = {};
+      Object.keys(prev).forEach((key) => {
+        updated[key] = key === activeTab;
+      });
+      return updated;
+    });
+  }, [activeTab]);
+
   const [modal, setModal] = useState(false);
   const [cancelAccept, setCancelAccept] = useState("");
   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");