contentoh-components-library 21.5.92 → 21.5.93

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

@@ -3,16 +3,6 @@ import { Container } from "./styles";
 import { InputFormatter } from "../InputFormatter";
 import { CheckBox } from "../CheckBox";
 
-import AiGenerationIcon from "../../../assets/images/Icons/ia-icon.png";
-import LoadingIcon from "../../../assets/images/Icons/loading.svg";
-import ArrowIcon from "../../../assets/images/Icons/arrow.png";
-import CancelIcon from "../../../assets/images/Icons/cancel.png";
-import ReloadIcon from "../../../assets/images/Icons/reload.png";
-
-import { useAiProductEdition } from "../../../contexts/AiProductEdition";
-import { InputContainer, BottomContainer, OptionsContainer, ButtonsContainer } from "../InputFormatter/styles";
-import { getTextSimilarityPercentage } from "../../../ai/utils/compare-strings";
-
 export const GeneralInput = ({
   inputType,
   inputId,
@@ -37,67 +27,45 @@ export const GeneralInput = ({
   disabled,
   onKeyDown,
   auditClass,
-
-  //AI Generation
-  hasAiGeneration = false,
-  isBenefitInput = false,
-  isAiGenerationLoading = false,
-  isAiRegenerationLoading=false,
-  isAiActive = false,
-  isAiAvailable = false,
-  aiGenerated = false,
-
-  setIsAiActive = () => {},
-  handlerAiGeneration = () => {},
-  handlerRegenerateSuggestions = () => {},
-  handleChangeSuggestion = () => {}
-
 }) => {
-
-  const {
-    suggestions,
-    currentSuggestion,
-    setCurrentSuggestionValue
-  } = useAiProductEdition();
-
   const [textValue, setTextValue] = useState({
     value: inputValue,
   });
   const [requiredEmpty, setRequiredEmpty] = useState(false);
 
-  const [aiSuggestionAccepted, setAiSuggestionAccepted] = useState(false);
-  const [valueAccepted, setValueAccepted] = useState(inputValue);
-
-  const updateParentData = (generalValue, isAiAccepted, newBaseValue = null) => {
-    setTextValue({ value: generalValue });
-
-    const baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
-
-    const similarity = getTextSimilarityPercentage(baseToCompare, generalValue);
-
-    const generatedWithAi = (isAiAccepted || aiGenerated) && similarity >= 50;
-
-    if (updatedDatasheets || updatedDescriptions || inputType === "textarea") {
-      let dataSave = updatedDatasheets?.slice() || [];
+  const onHandleChange = (evt) => {
+    if (validateInput) {
+      setTextValue({ value: validateInput(evt, position, inputsArray) });
+    } else if (
+      updatedDatasheets ||
+      updatedDescriptions ||
+      inputType === "textarea"
+    ) {
+      let generalValue;
+      if (optionList?.length > 0) {
+        let valueSelected = evt.target.value;
+        generalValue = valueSelected;
+        setTextValue({ value: generalValue });
+      } else {
+        generalValue =
+          inputType === "checkbox" ? evt.target.checked : evt.target.value;
+        setTextValue({
+          value: generalValue,
+        });
+      }
+      let dataSave = updatedDatasheets?.slice();
 
       if (dataSave?.length > 0) {
         const index = dataSave.findIndex((e) => e.attributeId === inputId);
         if (index !== -1) {
-          if (generalValue !== inputValue) {
-            dataSave[index].value = generalValue;
-            dataSave[index].aiSuggestionAccepted = generatedWithAi;
-          } else {
-            dataSave.splice(index, 1);
-          }
+          if (generalValue !== inputValue) dataSave[index].value = generalValue;
+          else dataSave.splice(index, 1);
         } else {
-          if (generalValue !== inputValue) {
-            dataSave.push({
-              articleId: articleId,
-              attributeId: inputId,
-              value: generalValue,
-              aiSuggestionAccepted: generatedWithAi,
-            });
-          }
+          dataSave.push({
+            articleId: articleId,
+            attributeId: inputId,
+            value: generalValue,
+          });
         }
       } else {
         if (generalValue !== inputValue) {
@@ -105,69 +73,16 @@ export const GeneralInput = ({
             articleId: articleId,
             attributeId: inputId,
             value: generalValue,
-            aiSuggestionAccepted: generatedWithAi,
           });
         }
       }
-
       setUpdatedDatasheets(dataSave);
-    }
-  };
-
-  const onHandleChange = (evt) => {
-    if (validateInput) {
-      setTextValue({ value: validateInput(evt, position, inputsArray) });
-    } else if (
-      updatedDatasheets ||
-      updatedDescriptions ||
-      inputType === "textarea"
-    ) {
-      let generalValue;
-      if (optionList?.length > 0) {
-        generalValue = evt.target.value;
-      } else {
-        generalValue =
-          inputType === "checkbox" ? evt.target.checked : evt.target.value;
-      }
-
-      updateParentData(generalValue, aiSuggestionAccepted);
-
     } else {
       setTextValue({ value: evt.target.value });
       inputOnChange && inputOnChange(evt);
     }
   };
 
-  useEffect(() => {
-
-    if(Object.keys(suggestions).length === 0) return;
-
-    if(currentSuggestion?.[inputId]) return
-
-
-    const firstSuggestion = suggestions?.[inputId]?.[0];
-
-    if(!firstSuggestion) return;
-
-    setCurrentSuggestionValue({
-      inputId,
-      index: 0,
-      value: firstSuggestion?.value
-    });
-
-  }, [suggestions]);
-
-  useEffect(() => {
-    if(!isAiActive) return;
-    setAiSuggestionAccepted(false);
-  }, [isAiActive]);
-
-  useEffect(() => {
-    if(!isAiActive && !aiSuggestionAccepted) {
-      setTextValue({ value: valueAccepted });
-    }
-  }, [suggestions, isAiActive]);
-
   useEffect(() => {
     setRequiredEmpty(
       isRequired &&
@@ -175,26 +90,14 @@ export const GeneralInput = ({
     );
   }, [textValue]);
 
-  // const numberInputOnWheelPreventChange = (e) => {
-  //   // Prevent the input value change
-  //   e.target.blur();
-  //   // Prevent the page/container scrolling
-  //   e.stopPropagation();
-  //   // Refocus immediately, on the next tick (after the current function is done)
-  //   setTimeout(() => e.target.focus(), 0);
-  // };
-
-  //AI Generation
-
-  const handleAcceptSuggestion = (suggestionValue) => {
-      if(!suggestionValue) return;
-
-      setValueAccepted(suggestionValue);
-      setAiSuggestionAccepted(true);
-      setIsAiActive(false);
-
-      updateParentData(suggestionValue, true, suggestionValue);
-  }
+  const numberInputOnWheelPreventChange = (e) => {
+    // Prevent the input value change
+    e.target.blur();
+    // Prevent the page/container scrolling
+    e.stopPropagation();
+    // Refocus immediately, on the next tick (after the current function is done)
+    setTimeout(() => e.target.focus(), 0);
+  };
 
   return (
     <Container isRequired={requiredEmpty} className={auditClass}>
@@ -221,113 +124,33 @@ export const GeneralInput = ({
           disabled={disabled}
         />
       ) : inputType !== "textarea" ? (
-        <div>
-          <InputContainer className={hasAiGeneration ? "ai-generation" : ""}>
-            <input
-              type={inputType}
-              disabled={disabled}
-              id={inputId}
-              size={inputSize}
-              className={`general-input ${isAiActive && isBenefitInput && "ia-input"}`}
-              placeholder={inputPlaceholder}
-              value={isAiActive ? (
-                currentSuggestion?.[inputId]?.value
-              ) : textValue.value}
-              onInput={(e) => onHandleChange(e)}
-              maxLength={maxChar}
-              required={isRequired}
-              onKeyDown={onKeyDown}
-              // onWheel={numberInputOnWheelPreventChange}
-            />
-            {
-
-              hasAiGeneration && isBenefitInput && (
-                <div className={`icon_container ${isAiAvailable ? "ai-available" : ''} ${isAiActive ? 'ai-active' : ''}`} title={!isAiAvailable ? 'Debes de completar ficha técnica e imágenes para desbloquear la generación con IA' : ''} onClick={() => {
-                  handlerAiGeneration({ type: "attribute" })
-                }}>
-                  <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: "attribute"
-                      });
-                    }}>
-                      <img className="" src={isAiRegenerationLoading ? LoadingIcon : ReloadIcon} />
-                    </div>
-
-                    <div className="accept-suggestion" onClick={() => {
-                      handleAcceptSuggestion(currentSuggestion?.[inputId]?.value);
-                    }}>
-                      <p>Aceptar sugerencia</p>
-                    </div>
-
-                  </ButtonsContainer>
-
-                </div>
-              )
-            }
-          </BottomContainer>
-        </div>
+        <input
+          type={inputType}
+          disabled={disabled}
+          id={inputId}
+          size={inputSize}
+          className="general-input"
+          placeholder={inputPlaceholder}
+          value={textValue.value}
+          onInput={(e) => onHandleChange(e)}
+          maxLength={maxChar}
+          required={isRequired}
+          onKeyDown={onKeyDown}
+          onWheel={numberInputOnWheelPreventChange}
+        />
       ) : (
         <InputFormatter
           name={inputName}
-            inputId={inputId}
-            placeholder={inputPlaceholder}
-            mainValue={textValue.value}
-            onChange={onHandleChange}
-            articleId={articleId}
-            updatedDescriptions={updatedDescriptions}
-            setUpdatedDescriptions={setUpdatedDescriptions}
-            maxChar={maxChar}
-            isRequired={isRequired}
-            disabled={disabled}
-            hasAiGeneration={hasAiGeneration && inputId != 'commentary-box'}
-            isAiAvailable={isAiAvailable}
-            aiGenerated={aiGenerated}
-            handlerAiGeneration={() => {
-              handlerAiGeneration({ type: "description" })
-            }}
-            handlerRegenerateSuggestions={() => {
-              handlerRegenerateSuggestions({ type: "description" })
-            }}
-            handleChangeSuggestion={handleChangeSuggestion}
-            isAiGenerationLoading={isAiGenerationLoading}
-            isAiRegenerationLoading={isAiRegenerationLoading}
-            isAiActive={isAiActive}
-            setIsAiActive={setIsAiActive}
+          inputId={inputId}
+          placeholder={inputPlaceholder}
+          mainValue={textValue.value}
+          onChange={onHandleChange}
+          articleId={articleId}
+          updatedDescriptions={updatedDescriptions}
+          setUpdatedDescriptions={setUpdatedDescriptions}
+          maxChar={maxChar}
+          isRequired={isRequired}
+          disabled={disabled}
         />
       )}
       {/* <p>{description}</p> */}

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

@@ -84,84 +84,3 @@ export const Container = styled.div`
     background: lightgray;
   }
 `;
-
-export const InputContainer = styled.div`
-
-  &.ai-generation {
-    position: relative;
-
-    cursor: pointer;
-
-    .ia-input {
-      padding-right: 2.5rem;
-    }
-
-    .icon_container {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 20px;
-      height: 20px;
-      padding: 4px;
-
-      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: linear-gradient(
-          120deg,
-          #ffffff 10%,
-          #ffe0f4 50%,
-          #ffffff 90%
-        );
-        background-size: 200% 200%;
-
-        animation: ai-shimmer 3s ease-in-out infinite alternate;
-        z-index: -1;
-      }
-
-      &.ai-available::before{
-
-        background: gray;
-        background-size: 200% 200%;
-
-      }
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        position: relative;
-        z-index: 2;
-      }
-
-      img.loading {
-        width: 20px;
-        height: 20px;
-      }
-
-    }
-  }
-
-  @keyframes ai-shimmer {
-    0% {
-      background-position: 0% 50%;
-    }
-    100% {
-      background-position: 100% 50%;
-    }
-  }
-
-`;