contentoh-components-library 21.0.72 → 21.0.73

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

@@ -0,0 +1,63 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption";
+
+export const RetailerSelector = ({
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+}) => {
+  const [retailersPanel, setRetailersPanel] = useState(false);
+
+  const closeRetailersPanel = (e) => {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+
+  return (
+    <Container id="retailers-assignation">
+      <Avatar
+        image={activeRetailer?.image}
+        altText={activeRetailer?.name}
+        imageType={"medium-image"}
+        onClick={() => {
+          retailers?.length > 1 && setRetailersPanel(!retailersPanel);
+          if (retailersPanel)
+            document.removeEventListener("click", closeRetailersPanel, false);
+        }}
+      />
+      {retailersPanel && (
+        <div className="retailers-panel">
+          {retailers.map((retailer, index) => (
+            <AsignationOption
+              key={`${index}-${retailer?.name}`}
+              profileImage={retailer?.image}
+              imageType={"medium-image"}
+              asignationType={null}
+              name={retailer?.name}
+              team={retailer?.team}
+              onClick={() => {
+                setActiveRetailer(retailer);
+                document.removeEventListener(
+                  "click",
+                  closeRetailersPanel,
+                  false
+                );
+                setRetailersPanel(false);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: relative;
+  .retailers-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;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+  }
+`;

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

@@ -5,20 +5,24 @@ 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,
-  saveImages,
-  deleteImages,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
   id = "default-id",
+  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(true);
+  const [layout, setLayout] = useState(false);
+  const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -35,18 +39,24 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      {["AP", "AC", "RC"].includes(status) && (
+        <Button
+          buttonType={"circular-button save-button"}
+          onClick={onClickSave}
+        />
+      )}
       {imagesSection && (
         <div className="images-buttons">
           <Button
-            buttonType={"circular-button save-button"}
+            buttonType={"circular-button delete-button"}
             onClick={() => {
-              saveImages && saveImages();
+              askToDeleteImages && askToDeleteImages();
             }}
           />
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button download-button"}
             onClick={() => {
-              deleteImages && deleteImages();
+              downloadImages();
             }}
           />
           <Button
@@ -58,15 +68,20 @@ export const StatusAsignationInfo = ({
           />
         </div>
       )}
-      <StatusTag statusType={status} ovalForm={true} />
-      <Avatar
-        imageType={"small-image"}
-        image={src}
-        altText="user profile image"
-        onClick={() => {
-          setShowAsignationPanel(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>
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}
@@ -86,31 +101,41 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {asignationsList !== undefined ? (
-              asignationsList.map((asigantion, index) => (
-                <AsignationOption
-                  profileImage={asignation.image}
-                  asignationType={asignation.asignationType}
-                  name={asignation.name}
-                  team={asigantion.team}
-                />
-              ))
+            {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}
+                  />
+                )
+              )
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          <div className="default-asignations-list">
-            <AsignationOption
-              asignationType={"provider"}
-              name={"Solicitar a"}
-              team={"Proveedor"}
-            />
-            <AsignationOption
-              asignationType={"team"}
-              name={"Solicitar a"}
-              team={"Content-oh!"}
-            />
-          </div>
+          {isRetailer === 1 && (
+            <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,16 +16,22 @@ 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;
+    padding: 10px 8px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
+    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -53,7 +59,6 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
-      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -66,7 +71,12 @@ 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,15 +3,28 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({ headerInfo, activeImage }) => {
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+}) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.imageName}
+        text={activeImage?.name || "-"}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
+      <StatusAsignationInfo
+        status={imagesStatus}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        onClickSave={onClickSave}
+      />
     </Container>
   );
 };

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

@@ -7,6 +7,11 @@ export const Container = styled.div`
   padding-bottom: 5px;
   border-bottom: 1px solid ${GlobalColors.s2};
 
+  .input-name-header {
+    overflow: auto;
+    max-width: 40%;
+    white-space: nowrap;
+  }
   .status-asignation-info {
     display: flex;
     align-items: center;

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

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

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

@@ -3,22 +3,52 @@ import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
 
-export const FullProductNameHeader = ({ headerData }) => {
+export const FullProductNameHeader = ({
+  headerData,
+  percent,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  approve,
+  reject,
+}) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.name}
-        statusType={headerData?.status}
-        percent={headerData?.percent}
-        backgroundColor={headerData?.backgroundColor}
-        priority={headerData?.priority}
-        date={headerData?.date}
+        productName={headerData?.article?.name || headerData?.name}
+        statusType={headerData?.version_status || headerData?.status}
+        percent={percent?.toFixed(0)}
+        priority={headerData?.prio}
+        date={new Date(
+          headerData?.article?.timestamp || headerData?.timestamp
+        ).toLocaleDateString()}
       />
       <div className="features-bar-container">
-        <FeaturesBar features={headerData?.features} />
+        <FeaturesBar
+          features={[
+            {
+              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 || headerData?.retailersAvailable}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          showValidationButtons={showValidationButtons}
+          approve={approve}
+          reject={reject}
         />
       </div>
     </Container>

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

@@ -5,10 +5,16 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status,
-  profileImage,
+  status = "",
+  activeTab,
   setActiveTab,
   setImageLayout,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -21,9 +27,15 @@ export const FullTabsMenu = ({
       />
       <StatusAsignationInfo
         status={status}
-        image={profileImage}
+        activeTab={activeTab}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
+        assignationsImages={assig}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        downloadImages={downloadImages}
+        onClickSave={onClickSave}
+        askToDeleteImages={askToDeleteImages}
       />
     </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;
+`;