contentoh-components-library 18.0.0 → 20.0.17

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

@@ -25,21 +25,5 @@ export const Container = styled.div`
     &.image-header {
       max-width: 60px;
     }
-
-    &.image-name {
-      min-width: 20%;
-    }
-
-    &.image-format {
-      max-width: 60px;
-    }
-
-    &.image-size {
-      max-width: 90px;
-    }
-
-    &.image-identifier {
-      max-width: 80px;
-    }
   }
 `;

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

@@ -1,5 +1,6 @@
 import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
+import { getImage } from "../../../global-files/data";
 
 export const ImageSelector = ({
   images = [],
@@ -11,10 +12,10 @@ export const ImageSelector = ({
       {images?.values?.map((image, index) => (
         <ProductImage
           key={index}
-          img={image.src}
+          img={getImage(image, 85, 60).src}
           altText={image.altText}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
-          onClick={() => setActiveImage(index)}
+          onClick={() => setActiveImage(getImage(image), 350, 295)}
         />
       ))}
     </Container>

package/src/components/molecules/LoginPasswordStrength/LoginPasswordStrength.stories.js

@@ -0,0 +1,8 @@
+import { LoginPasswordStrength } from "./index";
+export default {
+  title: "Components/molecules/LoginPasswordStrength",
+  component: LoginPasswordStrength,
+};
+const Template = (args) => <LoginPasswordStrength {...args} />;
+export const LoginPasswordStrengthDefault = Template.bind({});
+LoginPasswordStrengthDefault.args = {};

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

@@ -0,0 +1,89 @@
+import { Container, ItemPasswordStrength, Password } from "./styles";
+import { useEffect, useState } from "react";
+import { TagAndInput } from "../TagAndInput";
+export const LoginPasswordStrength = ({
+  emptyPassword,
+  emptyConfirmPassword,
+  matchPasswords,
+}) => {
+  const [passwordStrength, setPasswordStrength] = useState(0);
+  let upperCaseLetters = /[A-Z]/g;
+  let numbers = /[0-9]/g;
+  let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+  useEffect(() => {
+    const inputValue = document.getElementById("newPasswordInput");
+    inputValue.addEventListener(
+      "input",
+      (e) => {
+        updateInfo(e, e.target.value);
+      },
+      false
+    );
+  }, []);
+  const updateInfo = (e, newValue) => {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+        if (newValue.length >= 8) {
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        }
+        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+        newValue.match(upperCaseLetters) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        newValue.match(numbers) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        newValue.match(specialChar) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        break;
+      case "confirmPasswordInput":
+        break;
+      default:
+        return;
+    }
+  };
+  return (
+    <Container>
+      <div className="user" key={"3"}>
+        <TagAndInput
+          inputType={"password"}
+          inputId={"newPasswordInput"}
+          label={"Ingrese su nueva contraseña"}
+        />
+        {emptyPassword && (
+          <label>La contraseña debe ser minimo de 8 caracteres</label>
+        )}
+      </div>
+      <div className="divPasswordStrength" key={"4"}>
+        <ItemPasswordStrength paso={1}>
+          <Password level={1} passwordStrength={passwordStrength} />
+          {passwordStrength === 1 && <p>Baja</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={2}>
+          <Password level={2} passwordStrength={passwordStrength} />
+          {passwordStrength === 2 && <p>Regular</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={3}>
+          <Password level={3} passwordStrength={passwordStrength} />
+          {passwordStrength === 3 && <p>Segura</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={4}>
+          <Password level={4} passwordStrength={passwordStrength} />
+          {passwordStrength === 4 && <p>Fuerte</p>}
+        </ItemPasswordStrength>
+      </div>
+      <div className="user" key={"5"}>
+        <TagAndInput
+          inputType={"password"}
+          inputId={"confirmPasswordInput"}
+          label={"Confirme la nueva contraseña"}
+        />
+        {emptyConfirmPassword && !emptyPassword && (
+          <label>Confirme la contraseña</label>
+        )}
+        {!emptyConfirmPassword && !emptyPassword && !matchPasswords && (
+          <label>La contraseña no coincide</label>
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  .divPasswordStrength {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 30px;
+    & + * {
+      margin-top: 40px;
+    }
+  }
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+  }
+`;
+
+export const Password = styled.div`
+  height: 8px;
+  width: 100%;
+  background-color: ${(props) => {
+    switch (props.passwordStrength) {
+      case 0:
+        return "#F0F0F0";
+      case 1:
+        if (props.level === 1) {
+          return "#E67432";
+        } else {
+          return "#F0F0F0";
+        }
+      case 2:
+        if (props.level <= 2) {
+          return "#EDD34D";
+        } else {
+          return "#F0F0F0";
+        }
+      case 3:
+        if (props.level <= 3) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      case 4:
+        if (props.level <= 4) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      default:
+        return;
+    }
+  }};
+`;
+
+export const ItemPasswordStrength = styled.div`
+  width: 24%;
+  position: relative;
+  p {
+    margin-top: 1.5%;
+    font-weight: 700;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 11px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    color: ${(props) => {
+      switch (props.paso) {
+        case 1:
+          return "#E67432";
+        case 2:
+          return "#EDD34D";
+        case 3:
+          return "#71DE56";
+        case 4:
+          return "#71DE56";
+      }
+    }};
+  }
+`;

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

@@ -8,6 +8,7 @@ export const ProductNameHeader = ({
   productName,
   statusType,
   percent,
+  backgroundColor,
   priority,
   date,
 }) => {
@@ -15,7 +16,7 @@ export const ProductNameHeader = ({
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <StatusTag statusType={statusType} />
-      <ProgressBar percent={percent} progressBarType={statusType} />
+      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

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

@@ -5,24 +5,20 @@ import { StatusTag } from "../../atoms/StatusTag/index";
 import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
-import { getProfilePicture } from "../../../global-files/data";
 
 export const StatusAsignationInfo = ({
   status = "-",
+  src,
   imagesSection,
   setImageLayout,
+  asignationsList,
   percent = 0,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
+  saveImages,
+  deleteImages,
   id = "default-id",
-  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(false);
-  const [assignationType, setAssignationType] = useState("facilitator");
+  const [layout, setLayout] = useState(true);
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -39,22 +35,18 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      <Button
-        buttonType={"circular-button save-button"}
-        onClick={onClickSave}
-      />
       {imagesSection && (
         <div className="images-buttons">
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button save-button"}
             onClick={() => {
-              askToDeleteImages && askToDeleteImages();
+              saveImages && saveImages();
             }}
           />
           <Button
-            buttonType={"circular-button download-button"}
+            buttonType={"circular-button delete-button"}
             onClick={() => {
-              downloadImages();
+              deleteImages && deleteImages();
             }}
           />
           <Button
@@ -67,20 +59,14 @@ export const StatusAsignationInfo = ({
         </div>
       )}
       <StatusTag statusType={status} ovalForm={true} />
-      <div className="assignations-container">
-        {assignationsImages?.assignations?.map((assignation, index) => (
-          <Avatar
-            key={index + "-" + assignation.id}
-            imageType={"small-image"}
-            image={getProfilePicture(assignation.id, 20, 20)}
-            altText="user profile image"
-            onClick={() => {
-              setShowAsignationPanel(true);
-              setAssignationType(assignation?.collaboratorType);
-            }}
-          />
-        ))}
-      </div>
+      <Avatar
+        imageType={"small-image"}
+        image={src}
+        altText="user profile image"
+        onClick={() => {
+          setShowAsignationPanel(true);
+        }}
+      />
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}
@@ -100,41 +86,31 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {assignationsImages?.collaborators !== undefined ? (
-              assignationsImages?.collaborators[assignationType]?.map(
-                (asignation, index) => (
-                  <AsignationOption
-                    key={index + "-" + asignation.name}
-                    profileImage={getProfilePicture(
-                      asignation?.id_user,
-                      40,
-                      40
-                    )}
-                    onClick={() => {
-                      setAssignation(assignationType, asignation?.id_user);
-                    }}
-                    name={asignation.name}
-                  />
-                )
-              )
+            {asignationsList !== undefined ? (
+              asignationsList.map((asigantion, index) => (
+                <AsignationOption
+                  profileImage={asignation.image}
+                  asignationType={asignation.asignationType}
+                  name={asignation.name}
+                  team={asigantion.team}
+                />
+              ))
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          {isRetailer === 0 && (
-            <div className="default-asignations-list">
-              <AsignationOption
-                asignationType={"provider"}
-                name={"Solicitar a"}
-                team={"Proveedor"}
-              />
-              <AsignationOption
-                asignationType={"team"}
-                name={"Solicitar a"}
-                team={"Content-oh!"}
-              />
-            </div>
-          )}
+          <div className="default-asignations-list">
+            <AsignationOption
+              asignationType={"provider"}
+              name={"Solicitar a"}
+              team={"Proveedor"}
+            />
+            <AsignationOption
+              asignationType={"team"}
+              name={"Solicitar a"}
+              team={"Content-oh!"}
+            />
+          </div>
         </div>
       )}
     </Container>

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

@@ -16,22 +16,16 @@ export const Container = styled.div`
     }
   }
 
-  .assignations-container {
-    display: flex;
-    cursor: pointer;
-  }
-
   .asignation-panel {
     background: ${GlobalColors.s2};
     border: 1px solid ${GlobalColors.s3};
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px 8px;
+    padding: 10px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
-    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -59,6 +53,7 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
+      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -71,12 +66,7 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
-        border-top: 1px solid ${GlobalColors.s3};
       }
     }
-
-    .default-asignations-list {
-      padding-top: 10px;
-    }
   }
 `;

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

@@ -3,28 +3,15 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({
-  imagesStatus,
-  activeImage,
-  assignationsImages,
-  setAssignation,
-  isRetailer,
-  onClickSave,
-}) => {
+export const TableHeader = ({ headerInfo, activeImage }) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name}
+        text={activeImage?.imageName}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo
-        status={imagesStatus}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
+      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
     </Container>
   );
 };

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

@@ -8,17 +8,6 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  index,
-  isRequired,
-  dinamicHeight,
-  inputCols,
-  inputRows,
 }) => {
   return (
     <Container
@@ -31,18 +20,7 @@ export const TagAndInput = ({
         inputId={inputId}
         inputType={inputType}
         inputValue={value}
-        index={index}
-        isRequired={isRequired}
         inputPlaceholder={inputPlaceHolder}
-        updatedDescriptions={updatedDescriptions}
-        setUpdatedDescriptions={setUpdatedDescriptions}
-        updatedDatasheets={updatedDatasheets}
-        setUpdatedDatasheets={setUpdatedDatasheets}
-        articleId={articleId}
-        version={version}
-        dinamicHeight={dinamicHeight}
-        inputCols={inputCols}
-        inputRows={inputRows}
       />
     </Container>
   );

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

@@ -3,43 +3,22 @@ import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
 
-export const FullProductNameHeader = ({
-  headerData,
-  percent,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const FullProductNameHeader = ({ headerData }) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.article?.name}
+        productName={headerData?.name}
         statusType={headerData?.status}
-        percent={percent?.toFixed(0)}
-        priority={headerData?.prio}
-        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
+        percent={headerData?.percent}
+        backgroundColor={headerData?.backgroundColor}
+        priority={headerData?.priority}
+        date={headerData?.date}
       />
       <div className="features-bar-container">
-        <FeaturesBar
-          features={[
-            { feature: "Categoría", value: headerData?.article?.category },
-            { feature: "Prov", value: headerData?.article?.company_name },
-            { feature: "UPC", value: headerData?.article?.upc },
-          ]}
-        />
+        <FeaturesBar features={headerData?.features} />
         <AvatarAndValidation
-          retailers={headerData?.retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-          approveRejectButtons={approveRejectButtons}
-          sendToFacilitator={sendToFacilitator}
-          auditorAssigned={auditorAssigned}
-          userAssigned={userAssigned}
         />
       </div>
     </Container>

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

@@ -5,16 +5,10 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status = "",
-  activeTab,
+  status,
+  profileImage,
   setActiveTab,
   setImageLayout,
-  assig,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
-  onClickSave,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -26,16 +20,10 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-        status={status[activeTab]}
-        activeTab={activeTab}
+        status={status}
+        image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
-        assignationsImages={assig}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        downloadImages={downloadImages}
-        onClickSave={onClickSave}
-        askToDeleteImages={askToDeleteImages}
       />
     </Container>
   );