contentoh-components-library 8.0.0 → 10.0.1

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

@@ -0,0 +1,77 @@
+import { Container } from "./styles";
+import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
+import { useState } from "react";
+import { Button } from "../../atoms/GeneralButton";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { GradientPanel } from "../../atoms/GradientPanel";
+
+export const ChangePassword = (props) => {
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
+  const [matchPasswords, setMatchPasswords] = useState(true);
+
+  const validate = async (e) => {
+    e.preventDefault();
+    let password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    let confirmPassword = document.querySelector("#confirmPasswordInput").value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+    let valid = true;
+    if (
+      password.length < 8 ||
+      confirmPassword === "" ||
+      password !== confirmPassword
+    ) {
+      valid = false;
+    }
+    if (valid) {
+      sessionStorage.setItem("newPassword", JSON.stringify(password));
+      !sessionStorage.getItem("resetPasswordProcess")
+        ? props.setPaso(9)
+         : props.setPaso(11); 
+    }
+  };
+
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={"Ingresa tus credenciales"}
+      />
+    </div>,
+    <LoginPasswordStrength
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={"Ingresa tus credenciales"}
+      key="3"
+    />,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        panelColor={GlobalColors.white}
+        componentsArray={loginRight}
+        panelType={"home-login"}
+      ></GradientPanel>
+    </Container>
+  );
+};

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 50%;
+  height: 100vh;
+  .button-center {
+    display: flex;
+    justify-content: center;
+    .general-default-button {
+      width: 160px;
+    }
+  }
+`;

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

@@ -2,44 +2,81 @@ import { Container } from "./styles";
 import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
+import { useState } from "react";
+import { useEffect } from "react";
 
 export const FullProductNameHeader = ({
   headerData,
   percent,
   activeRetailer,
   setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
+  showValidationButtons,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  servicesData,
+  showApproveRejectAll,
 }) => {
+  const [retailers, setRetailers] = useState([]);
+  useEffect(() => {
+    const rtls = headerData?.retailers || headerData?.retailersAvailable;
+    servicesData &&
+      rtls.forEach((rt) => {
+        const element = [];
+        servicesData.forEach((sd) => {
+          if (sd.id_retailer === rt.id) {
+            element.push(sd.status ? sd.status : "RECEIVED");
+          } else element.push("NA");
+          rt["services"] = element;
+        });
+      });
+    setRetailers(rtls);
+  }, [servicesData]);
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.article?.name}
-        statusType={headerData?.status}
-        percent={percent}
+        productName={headerData?.article?.name || headerData?.name}
+        statusType={
+          headerData?.version_status ||
+          headerData?.status ||
+          headerData?.article_status
+        }
+        percent={percent?.toFixed(0)}
         priority={headerData?.prio}
-        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
+        date={new Date(
+          headerData?.article?.timestamp || headerData?.timestamp
+        ).toLocaleDateString()}
       />
       <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 },
+            {
+              feature: "Categoría",
+              value: headerData?.article?.category || headerData?.categoryName,
+            },
+            {
+              feature: "Prov",
+              value: headerData?.article?.company_name,
+            },
+            {
+              feature: "UPC",
+              value: headerData?.article?.upc || headerData?.upc,
+            },
           ]}
         />
         <AvatarAndValidation
-          retailers={headerData?.retailers}
+          retailers={retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
           activeRetailer={activeRetailer}
           setActiveRetailer={setActiveRetailer}
-          approveRejectButtons={approveRejectButtons}
-          sendToFacilitator={sendToFacilitator}
-          auditorAssigned={auditorAssigned}
-          userAssigned={userAssigned}
+          showValidationButtons={showValidationButtons}
+          showApproveRejectAll={showApproveRejectAll}
+          approve={approve}
+          reject={reject}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
         />
       </div>
     </Container>

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

@@ -6,17 +6,18 @@ import { useState } from "react";
 export const FullTabsMenu = ({
   tabsSections,
   status = "",
-  profileImage,
   activeTab,
   setActiveTab,
   setImageLayout,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
-  assignations,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
-  //console.log(status);
 
   return (
     <Container>
@@ -26,15 +27,17 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-        status={status[activeTab]}
+        status={status}
         activeTab={activeTab}
-        image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
-        saveDatasheets={saveDatasheets}
-        saveDescriptions={saveDescriptions}
-        updateImages={updateImages}
-        assignationsImages={assignations[activeTab]}
+        assignationsImages={assig}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        downloadImages={downloadImages}
+        onClickSave={onClickSave}
+        askToDeleteImages={askToDeleteImages}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );

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

@@ -0,0 +1,68 @@
+import React from "react";
+import ReactImageFallback from "react-image-fallback";
+import {
+  MainContainer,
+  MessageContainer,
+  Header,
+  Icon,
+  Close,
+  Message,
+  ContainerButtons,
+  FirstButton,
+  Button,
+  Detail,
+  TextArea,
+  BoldText,
+} from "./styles";
+
+import yellowAlert from "../../../assets/images/genericModal/yellowAlert.svg";
+import closeWhite from "../../../assets/images/genericModal/closeWhite.svg";
+
+/*
+props (* required):
+  - *close: function to quit pop up e.g close={() => setShow(!show)}
+  - button1/button2: name and action button e.g. button1={{ name: 'Cancelar', action: () => console.log('Cancelar') }}
+  - img: source image
+  - *message: message to show (like title)
+  - detail: message detail
+  - withoutImg: if the value is "true" the icon will not be displayed, if this attribute is ignored or has the value of "false" the icon will be displayed
+  - customComponent: contains a custom component
+*/
+export const GlobalModal = (props) => {
+  return (
+    <MainContainer>
+      <MessageContainer height={props.button1 || props.button2}>
+        <Header>
+          <Icon widthImg={props.widthImg} heightImg={props.heightImg}>
+            {!props.withoutImg && (
+              <ReactImageFallback
+                src={props.img}
+                fallbackImage={yellowAlert}
+                alt=""
+              />
+            )}
+          </Icon>
+          <Close onClick={props.close}>
+            <img src={closeWhite} alt="Cerrar" />
+          </Close>
+        </Header>
+        <Message>
+          {props.bold && <BoldText>{props.bold}</BoldText>} {props.message}
+        </Message>
+        {props.detail && <Detail>{`${props.detail} `}</Detail>}
+        {props.textArea && <TextArea id="area" />}
+        {props.customComponent && props.customComponent}
+        <ContainerButtons>
+          {props.button1 && (
+            <FirstButton onClick={props.button1.action}>
+              {props.button1.name}
+            </FirstButton>
+          )}
+          {props.button2 && (
+            <Button onClick={props.button2.action}>{props.button2.name}</Button>
+          )}
+        </ContainerButtons>
+      </MessageContainer>
+    </MainContainer>
+  );
+};

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

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #281f3366;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+`;
+
+export const MessageContainer = styled.div`
+  position: relative;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  width: 600px;
+  min-height: ${(props) => (props.height ? "300px" : "190px")};
+  background: #281f33;
+  border-radius: 39px;
+`;
+export const TextArea = styled.textarea`
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  width: 479px;
+  height: 84px;
+  background: #f0eef2;
+  border-radius: 4px;
+  color: #817393;
+  margin-bottom: 10px;
+`;
+
+export const Close = styled.figure`
+  position: absolute;
+  cursor: pointer;
+  right: 45px;
+  > img {
+    width: 14px;
+    height: 14px;
+  }
+`;
+
+export const Icon = styled.figure`
+  margin-bottom: 10px;
+  height: ${(props) => props.heightImg && props.heightImg};
+  > img {
+    width: ${(props) => (props.widthImg ? props.widthImg : "85px")};
+    height: ${(props) => (props.heightImg ? props.heightImg : "85px")};
+  }
+`;
+export const BoldText = styled.span`
+  font-weight: 600;
+`;
+
+export const Message = styled.p`
+  width: 100%;
+  font-family: Raleway;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  text-align: center;
+  color: #f7f7f7;
+  margin: 20px 0px;
+`;
+
+export const ContainerButtons = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+export const FirstButton = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 40px;
+  border: 1px solid #f0eef2;
+  box-sizing: border-box;
+  border-radius: 30px;
+  font-family: Avenir Next;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: #f0eef2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+`;
+
+export const Button = styled(FirstButton)`
+  border: 0;
+  background: #e33aa9;
+  cursor: pointer;
+`;
+
+export const Detail = styled(Message)`
+  font-weight: bold;
+  font-size: 18px;
+  white-space: normal;
+`;

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

@@ -12,6 +12,10 @@ export const ImageDataTable = ({
   setImages,
   assignationsImages,
   imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
 }) => {
   return (
     <Container darkMode={darkMode}>
@@ -19,13 +23,18 @@ export const ImageDataTable = ({
         imagesStatus={imagesStatus}
         activeImage={activeImage}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        showSaveButton={showSaveButton}
+        onClickSave={onClickSave}
       />
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
         <ScreenHeader
           headerType={"table-row-text gray-table-row"}
           text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
           }
         />
       </Row>
@@ -36,7 +45,7 @@ export const ImageDataTable = ({
           text={
             lists?.imagePackagingType?.find(
               (f) => f.id === +activeImage?.packing_type
-            )?.name
+            )?.name || "-"
           }
         />
       </Row>
@@ -46,26 +55,36 @@ export const ImageDataTable = ({
           headerType={"table-row-text gray-table-row"}
           text={
             lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name
+              ?.name || "-"
           }
         />
       </Row>
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader headerType={"table-row-text"} text={activeImage?.ext} />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={activeImage?.ext || "-"}
+        />
       </Row>
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
         <ScreenHeader
           headerType={"table-row-text"}
-          text={`${activeImage?.width}x${activeImage?.height}px`}
+          text={
+            activeImage?.width && activeImage.height
+              ? `${activeImage?.width}x${activeImage?.height}px`
+              : "-"
+          }
         />
       </Row>
       {retailerSelected &&
         lists?.attrForImgs &&
         lists?.attrForImgs[retailerSelected]?.map((attr, index) => (
-          <Row key={"row-" + index}>
-            <ScreenHeader headerType={"table-row-text"} text={attr?.name} />
+          <Row key={"row-" + index + "-" + attr?.name}>
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
             <LabelToInput
               width="100px"
               defaultValue={attr?.value}
@@ -74,7 +93,9 @@ export const ImageDataTable = ({
                   action: "changeAttrValue",
                   retailer: retailerSelected,
                   index,
-                  value: e.target.value,
+                  value: e.target.value || "-",
+                  name: attr.name,
+                  retailersId: Object.keys(lists.attrForImgs).slice(0, -1),
                 });
               }}
             />

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

@@ -32,41 +32,61 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      <ScreenHeader
-        headerType={"retailer-name-header"}
-        text={inputGroup?.dataGroup}
-      />
+      {inputGroup?.dataGroup && (
+        <ScreenHeader
+          headerType={"retailer-name-header"}
+          text={inputGroup?.dataGroup}
+        />
+      )}
       <div className="inputs-container">
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
             <TagAndInput
-              key={index + "-" + dataInputs[input]?.value}
+              key={
+                index +
+                "-" +
+                dataInputs[input]?.value +
+                "-" +
+                dataInputs[input]?.id
+              }
               inputId={dataInputs[input]?.id}
               version={version}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={dataInputs[input]?.name}
+              label={
+                dataInputs[input]?.name +
+                (dataInputs[input]?.required ? "*" : "")
+              }
               value={dataInputs[input]?.value}
               inputPlaceHolder={input?.placeholder}
               articleId={articleId}
               isRequired={dataInputs[input]?.required}
               updatedDatasheets={updatedDatasheets}
               setUpdatedDatasheets={setUpdatedDatasheets}
+              maxChar={
+                dataInputs[input]?.max_chars
+                  ? dataInputs[input]?.max_chars
+                  : 999
+              }
+              optionList={dataInputs[input]?.option_list}
+              description={dataInputs[input]?.description}
             />
           ) : (
             <TagAndInput
               key={index + "-" + input?.value}
-              inputId={input?.id}
+              inputId={input.id}
               index={index}
               inputType={"textarea"}
-              label={input?.name}
+              label={input?.name + (input.required ? "*" : "")}
               value={input?.value}
               isRequired={input.required}
+              maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
               updatedDescriptions={updatedDescriptions}
               setUpdatedDescriptions={setUpdatedDescriptions}
               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/organisms/ProductImageModal/index.js

@@ -5,7 +5,6 @@ import { ImageSelector } from "../../molecules/ImageSelector";
 import { useState, useEffect } from "react";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { Button } from "../../atoms/GeneralButton";
-import { getImage } from "../../../global-files/data";
 
 export const ProductImageModal = ({
   images = [],
@@ -13,7 +12,6 @@ export const ProductImageModal = ({
   validation,
   setShowModal,
   sendToFacilitator,
-  approveRejectButtons,
 }) => {
   const [activeImage, setActiveImage] = useState(0);
   const [buttonType, setButtonType] = useState(
@@ -37,16 +35,17 @@ export const ProductImageModal = ({
     }
   }, [showValidationPanel]);
 
-  useEffect(() => {
-    console.log(images?.values[activeImage]);
-  }, [activeImage]);
-
   return (
     <Container>
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={images?.values[activeImage]?.src}
+            img={
+              "https://" +
+              process.env.REACT_APP_IMAGES_BUCKET +
+              ".s3.amazonaws.com/" +
+              images?.values[activeImage]?.srcDB
+            }
             altText={images?.values[activeImage]?.name}
             imageType={"expanded-modal-image"}
           />
@@ -54,12 +53,12 @@ export const ProductImageModal = ({
         <div className="modal-data-container">
           <div className="validation-and-table-container">
             <div className="validation-panel">
-              {approveRejectButtons("images") && (
+              {
                 <Button
                   buttonType={`circular-button ${buttonType}`}
                   onClick={() => setShowValidationPanel(true)}
                 />
-              )}
+              }
               <Button
                 buttonType={"close-button"}
                 onClick={() => {

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

@@ -11,6 +11,9 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
+  left: 0;
+  top: 0;
+  z-index: 100;
 
   .modal-container {
     display: flex;

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

@@ -0,0 +1,18 @@
+import { ChangePasswordLogin } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/ChangePasswordLogin",
+  component: ChangePasswordLogin,
+};
+const Template = (args) => <ChangePasswordLogin {...args} />;
+
+export const ChangePasswordLoginDefault = Template.bind({});
+
+ChangePasswordLoginDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales",
+};