contentoh-components-library 21.0.78 → 21.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.78",
+  "version": "21.0.79",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -21,6 +21,8 @@ export const GeneralInput = ({
   maxChar,
   isRequired,
   version,
+  optionList = [],
+  description,
 }) => {
   const [textValue, setTextValue] = useState({
     value: inputValue,
@@ -72,7 +74,27 @@ export const GeneralInput = ({
 
   return (
     <Container isRequired={requiredEmpty}>
-      {inputType === "checkbox" ? (
+      {optionList?.length > 0 ? (
+        <select
+          key={`dropdownK${inputId}`}
+          id={`dropdown${inputId}`}
+          //disabled={!enableInputs}
+          onChange={(e) => onHandleChange(e)}
+        >
+          <option value="" selected disabled>
+            {description}
+          </option>
+          {JSON.parse(optionList || "[]").map((element) => (
+            <option
+              key={element}
+              value={element}
+              selected={element === textValue.value ? "selected" : ""}
+            >
+              {element}
+            </option>
+          ))}
+        </select>
+      ) : inputType === "checkbox" ? (
         <CheckBox
           id={inputId}
           onChange={(e) => onHandleChange(e)}
@@ -104,6 +126,7 @@ export const GeneralInput = ({
           isRequired={isRequired}
         />
       )}
+      <p>{description}</p>
     </Container>
   );
 };

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

@@ -32,4 +32,29 @@ export const Container = styled.div`
       border: 1px solid ${GlobalColors.magenta_s2};
     }
   }
+
+  select {
+    background: #fafafa;
+    outline: none;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+    width: 100%;
+    cursor: pointer;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    font-size: 12px;
+    line-height: 21px;
+    padding: 10px;
+    border-right: 2px solid #e33aa9;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  p {
+    font-family: ${FontFamily.Raleway};
+    font-size: 11px;
+    color: ${GlobalColors.s4};
+  }
 `;

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

@@ -9,6 +9,7 @@ export const Container = styled.h2`
   line-height: 42px;
   font-feature-settings: "pnum" on, "lnum" on;
   color: ${(props) => props.color};
+  position: relative;
 
   &.with-bold-text {
     span {
@@ -34,8 +35,12 @@ export const Container = styled.h2`
   &.input-name-header {
     font-size: 14px;
     line-height: 19px;
+    height: 19px;
+    max-width: 100%;
     font-weight: 400;
     color: ${({ color }) => (color ? color : GlobalColors.s5)};
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.date-header {

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

@@ -11,7 +11,6 @@ import React, { useState, useEffect, useCallback } from "react";
 export const VerticalSideMenuMainPage = () => {
   const [trueBar, setTrueBar] = useState(false);
   const active = () => {
-    console.log(window.location.href);
     //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
   };
   return (

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

@@ -21,7 +21,6 @@ export const RegistrationSecondStep = (props) => {
     !termsCheck && (valid = false);
     !privacyCheck && (valid = false);
     if (valid) {
-      console.log(valid)
       nuevoUsuario.password = password;
       sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
       valid && props.setPaso(3);

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

@@ -21,6 +21,8 @@ export const TagAndInput = ({
   inputRows,
   maxChar,
   required,
+  optionList,
+  description,
 }) => {
   return (
     <Container
@@ -28,7 +30,10 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <ScreenHeader text={label} headerType={"input-name-header"} />
+      <div className="title-container">
+        <ScreenHeader text={label} headerType={"input-name-header"} />
+        <span className="tooltip">{label}</span>
+      </div>
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -47,6 +52,8 @@ export const TagAndInput = ({
         inputRows={inputRows}
         maxChar={maxChar}
         required={required}
+        optionList={optionList}
+        description={description}
       />
     </Container>
   );

package/src/components/molecules/TagAndInput/styles.js

@@ -1,9 +1,37 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  .title-container {
+    position: relative;
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 14px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+      transition: display 2s;
+    }
+
+    &:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+  }
+
   & > :first-child {
     & + * {
       margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
     }
   }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
 `;

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

@@ -14,7 +14,6 @@ export const InputGroup = ({
   version,
   dinamicHeight,
 }) => {
-  console.log(dataInputs, "dataInputs");
   const inputTypeValue = (type) => {
     switch (type) {
       case "Booleano":
@@ -68,6 +67,8 @@ export const InputGroup = ({
                   ? dataInputs[input]?.max_chars
                   : 999
               }
+              optionList={dataInputs[input]?.option_list}
+              description={dataInputs[input]?.description}
             />
           ) : (
             <TagAndInput
@@ -85,6 +86,7 @@ export const InputGroup = ({
               articleId={articleId}
               version={version}
               dinamicHeight={dinamicHeight}
+              description={input?.description}
             />
           )
         )}

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

@@ -18,14 +18,14 @@ export const Container = styled.div`
     .inputs-container {
       display: flex;
       flex-wrap: wrap;
+      width: 100%;
+      gap: 5px;
 
       .input-container {
         flex: 1 1 20%;
-        margin-right: 10px;
         min-width: 227px;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
       }
     }
   }

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -21,55 +21,50 @@ RetailerProductEditionDefault.args = {
   category: 846,
   version: 2,
   productSelected: {
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1,
-    },
-    orderId: 152,
-    status: "ASSIGNED",
-    datasheet_status: "IN_PROGRESS",
+    orderId: 132,
+    id_category: "612",
+    status: "IN_PROGRESS",
+    datasheet_status: "QF",
     prio: "none",
-    version: 3,
+    version: 2,
     description_status: "IN_PROGRESS",
     images_status: "IN_PROGRESS",
+    brand: null,
+    missing: {
+      datasheet: 0,
+      descriptions: 0,
+      images: 0,
+    },
     article: {
-      id_article: 343,
-      id_category: "2898",
-      name: "Producto prueba dos ",
-      upc: "2004202212",
-      timestamp: "2022-04-20T17:01:17.000Z",
-      id_user: 28,
-      status: "NULL",
-      active: 1,
-      company_id: 1,
+      category: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
       company_name: "COMPANY DEV",
-      country: "México",
-      id_order: 152,
-      id_datasheet_especialist: 54,
-      id_datasheet_facilitator: 52,
-      id_description_especialist: 54,
-      id_description_facilitator: 52,
-      id_images_especialist: 55,
-      id_images_facilitator: 53,
-      id_auditor: 30,
-      id_recepcionist: null,
-      category: "HALLOWEN|DECORACIÓN E INFLABLES|DECORACIÓN E INFLABLES",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null,
+      id_category: "612",
+      id_article: 109490,
+      name: "Collar con dije letra ",
+      timestamp: "2022-05-05T16:45:49.000Z",
+      upc: "123434",
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot",
-        country: "México",
-        id_region: 1,
-        active: 1,
+        id: 2,
+        name: "Walmart Mercancías Generales",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    checked: false,
+    retailersAvailable: [
+      {
+        id: 2,
+        name: "Walmart Mercancías Generales",
       },
     ],
-    country: "México",
-    upc: "2004202212",
+    id_article: 109490,
+    categoryName: "ROPA, ACCESORIOS, FRAGANCIAS Y JOYERÍA|ACCESORIOS|COLLARES",
+    version_status: "IN_PROGRESS",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },

package/src/global-files/data.js

@@ -183,7 +183,6 @@ export const fetchUsers = async (auth) => {
 export const getNewStatus = (statusArray) => {
   let lookupString = "";
   statusArray.forEach((element) => (lookupString += element + "/"));
-  console.log(lookupString, "productTemp");
   if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";