contentoh-components-library 0.1.1 → 6.0.0

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/SidebarNotification/SidebarNotification.stories.js

@@ -0,0 +1,101 @@
+import { SidebarNotification } from "./index";
+import profileImg from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+
+export default {
+  title: "Components/molecules/SidebarNotification",
+  component: SidebarNotification,
+  argTypes: {
+    showSidebar: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+let showSidebar=false;
+const setShowSidebar = (value) => {
+  showSidebar=value
+}  
+const Template = (args) => <SidebarNotification {...args} />;
+export const SidebarNotificationDefault = Template.bind({});
+
+SidebarNotificationDefault.args = {
+  array: [
+    {
+      dates: "2/18/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/17/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/16/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/14/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+    {
+      dates: "2/17/2022",
+      notifications: [
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+        {
+          profilePicture: profileImg,
+          notification: "ODT 23441244",
+          newNotification: true,
+        },
+      ],
+    },
+  ],
+  setShowSidebar:setShowSidebar,
+  showSidebar:showSidebar,
+};

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

@@ -0,0 +1,95 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { Avatar } from "../../atoms/Avatar/index";
+import notificationImg from "../../../assets/images/productNotification/productNotification.svg";
+import { Button } from "../../atoms/GeneralButton";
+import { Notification } from "../../atoms/Notification";
+import { useEffect, useRef } from "react";
+
+export const SidebarNotification = ({
+  array = [],
+  showSidebar,
+  setShowSidebar,
+}) => {
+  const sidebar = useRef(null);
+
+  const closeSidebar = (e) => {
+    if (!e.target.closest("#side-bar") && showSidebar) {
+      document.removeEventListener("click", closeSidebar, false);
+      sidebar.current.classList.remove("active");
+      setTimeout(() => {
+        setShowSidebar(false);
+      }, 500);
+    }
+  };
+
+  useEffect(() => {
+    if (showSidebar) {
+      document.addEventListener("click", closeSidebar, false);
+        sidebar.current.classList.add("active");
+    }
+  }, [showSidebar]);
+
+  const comparisonDate = (dates) => {
+    const dateActual = new Date();
+    const dateComparison = new Date(dates);
+    let date = "";
+    if (dateActual.toDateString() === dateComparison.toDateString()) {
+      date = "Hoy";
+    } else if (
+      dateActual.getFullYear() === dateComparison.getFullYear() &&
+      dateActual.getMonth() === dateComparison.getMonth() &&
+      dateActual.getDate() - 1 === dateComparison.getDate()
+    ) {
+      date = "Ayer";
+    } else {
+      date = dateComparison.toLocaleDateString();
+    }
+    return date;
+  };
+  return (
+    <>
+      {showSidebar && (
+        <Container id="side-bar" ref={sidebar}>
+          <div className="notification-header">
+            <Avatar
+              image={notificationImg}
+              imageType={"retailer-image"}
+              altText={"Notification Picture"}
+            />
+            <ScreenHeader
+              headerType={"product-name-header"}
+              text={"Notificaciones"}
+              color={"#867586"}
+            />
+            <Button buttonType="close-button" />
+          </div>
+          <div className="scroll">
+            {array?.map((element, index) => (
+              <div
+                className="date-notification"
+                key={index + "-" + element?.dates}
+              >
+                <ScreenHeader
+                  headerType={"input-name-header"}
+                  text={comparisonDate(element?.dates)}
+                  color={"#6A5880"}
+                  FontFamily={FontFamily.AvenirNext}
+                />
+                {element?.notifications?.map((notification, index) => (
+                  <Notification
+                    key={index}
+                    profilePicture={notification?.profilePicture}
+                    notification={notification?.notification}
+                    newNotification={notification?.newNotification}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        </Container>
+      )}{" "}
+    </>
+  );
+};

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

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: absolute;
+  right: 0;
+  background-color: #f9f9fc;
+  overflow: hidden;
+  width: 380px;
+  height: 100vh;
+  padding: 10px;
+  border: none;
+  box-shadow: -3px 0px 4px rgba(0, 0, 0, 0.25);
+  right: -100%;
+  transition: right linear 1s;
+  &.active {
+    right: 0;
+  } 
+  /*
+  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  transition: clip-path linear 1s;
+  &.active {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  } */
+  .notification-header {
+    display: flex;
+    justify-content: space-between;
+    .retailer-image {
+      margin-left: 10px;
+    }
+    .product-name-header {
+      text-align: left;
+      flex: 1;
+      line-height: 50px;
+      margin-left: 13px;
+    }
+    .close-button {
+      height: 23px;
+      width: 23px;
+      padding: 3px;
+      border: 1px solid #ededed;
+      border-radius: 3px;
+      background-size: 23px;
+    }
+  }
+  .scroll {
+    overflow: auto;
+    height: 85vh;
+    .date-notification {
+      margin-top: 10px;
+      .input-name-header {
+        font-weight: 600;
+        display: flex;
+        justify-content: flex-end;
+        margin-right: 25px;
+      }
+      .new-notification {
+        margin-top: 7px;
+        width: 100%;
+      }
+    }
+  }
+`;

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

@@ -5,14 +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,
+  activeTab,
+  deleteImages,
+  saveDatasheets,
+  saveDescriptions,
+  updateImages,
+  assignationsImages,
   id = "default-id",
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
@@ -32,27 +38,57 @@ export const StatusAsignationInfo = ({
   }, [showAsignationPanel]);
 
   return (
-    <Container
-      onClick={() => {
-        setShowAsignationPanel(true);
-      }}
-      id={id}
-    >
+    <Container id={id}>
+      <Button
+        buttonType={"circular-button save-button"}
+        onClick={() => {
+          switch (activeTab) {
+            case "Descripción":
+              saveDescriptions && saveDescriptions();
+              break;
+            case "Ficha técnica":
+              saveDatasheets && saveDatasheets();
+              break;
+            case "Imágenes":
+              updateImages && updateImages();
+              break;
+
+            default:
+              break;
+          }
+        }}
+      />
       {imagesSection && (
-        <Button
-          buttonType={layout ? "grid-layout" : "row-layout"}
-          onClick={() => {
-            setLayout(!layout);
-            setImageLayout(!layout);
-          }}
-        />
+        <div className="images-buttons">
+          <Button
+            buttonType={"circular-button delete-button"}
+            onClick={() => {
+              deleteImages && deleteImages();
+            }}
+          />
+          <Button
+            buttonType={layout ? "grid-layout" : "row-layout"}
+            onClick={() => {
+              setLayout(!layout);
+              setImageLayout && setImageLayout(!layout);
+            }}
+          />
+        </div>
       )}
       <StatusTag statusType={status} ovalForm={true} />
-      <Avatar
-        imageType={"small-image"}
-        image={src}
-        altText="user profile image"
-      />
+      <div className="assignations-container">
+        {assignationsImages?.map((assignation, index) => (
+          <Avatar
+            key={index + "-" + assignation}
+            imageType={"small-image"}
+            image={getProfilePicture(assignation, 20, 20)}
+            altText="user profile image"
+            onClick={() => {
+              setShowAsignationPanel(true);
+            }}
+          />
+        ))}
+      </div>
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}

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

@@ -10,6 +10,16 @@ export const Container = styled.div`
     margin-left: 8px;
   }
 
+  .images-buttons {
+    button + * {
+      margin-left: 8px;
+    }
+  }
+
+  .assignations-container {
+    display: flex;
+  }
+
   .asignation-panel {
     background: ${GlobalColors.s2};
     border: 1px solid ${GlobalColors.s3};

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

@@ -3,7 +3,7 @@ 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 }) => {
   return (
     <Container>
       <ScreenHeader
@@ -11,7 +11,10 @@ export const TableHeader = ({ headerInfo, activeImage }) => {
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
+      <StatusAsignationInfo
+        status={imagesStatus}
+        assignationsImages={assignationsImages}
+      />
     </Container>
   );
 };

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

@@ -2,10 +2,14 @@ import { Container } from "./styles";
 import { TabSection } from "../../atoms/TabSection";
 import { useEffect, useState } from "react";
 
-export const TabsMenu = ({ tabsSections, setImagesSection, setActiveTab }) => {
+export const TabsMenu = ({
+  tabsSections = {},
+  setImagesSection,
+  setActiveTab,
+}) => {
   const [sections, setSections] = useState(tabsSections);
 
-  const activeSection = (key, array) => {
+  const activeSection = (key, array = {}) => {
     let tempArray = {};
     setImagesSection(key === "Imágenes");
     Object.keys(array).forEach((section) => {

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

@@ -2,14 +2,47 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
 
-export const TagAndInput = ({ inputType, label, value, inputPlaceHolder }) => {
+export const TagAndInput = ({
+  inputType,
+  label,
+  value,
+  inputPlaceHolder,
+  inputId,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  index,
+  isRequired,
+  dinamicHeight,
+  inputCols,
+  inputRows,
+}) => {
   return (
-    <Container inputType={inputType} className={"input-container"}>
+    <Container
+      inputType={inputType}
+      className={"input-container"}
+      key={`generalTagInput-${inputType}`}
+    >
       <ScreenHeader text={label} headerType={"input-name-header"} />
       <GeneralInput
+        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/molecules/TagAndInput/styles.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const Container = styled.div`
   & > :first-child {
     & + * {
-      margin-top: ${({ inputType }) => (inputType === "text" ? 4 : 15)}px;
+      margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
     }
   }
 `;

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

@@ -3,22 +3,43 @@ 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,
+  approveRejectButtons,
+  sendToFacilitator,
+  auditorAssigned,
+  userAssigned,
+}) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.name}
+        productName={headerData?.article?.name}
         statusType={headerData?.status}
-        percent={headerData?.percent}
-        backgroundColor={headerData?.backgroundColor}
-        priority={headerData?.priority}
-        date={headerData?.date}
+        percent={percent}
+        priority={headerData?.prio}
+        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
       />
       <div className="features-bar-container">
-        <FeaturesBar features={headerData?.features} />
+        <FeaturesBar
+          features={[
+            { feature: "Categoría", value: headerData?.article?.category },
+            { feature: "Prov", value: headerData?.article?.company_name },
+            { feature: "UPC", value: headerData?.article?.upc },
+          ]}
+        />
         <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,12 +5,18 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status,
+  status = "",
   profileImage,
+  activeTab,
   setActiveTab,
   setImageLayout,
+  saveDatasheets,
+  saveDescriptions,
+  updateImages,
+  assignations,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
+  //console.log(status);
 
   return (
     <Container>
@@ -20,10 +26,15 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-        status={status}
+        status={status[activeTab]}
+        activeTab={activeTab}
         image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
+        saveDatasheets={saveDatasheets}
+        saveDescriptions={saveDescriptions}
+        updateImages={updateImages}
+        assignationsImages={assignations[activeTab]}
       />
     </Container>
   );

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

@@ -5,6 +5,6 @@ export const Container = styled.div`
   justify-content: space-between;
 
   & + * {
-    margin-top: 15px;
+    margin-top: 14px;
   }
 `;

package/src/components/organisms/Fullplan/FullPlan.stories.js

@@ -12,12 +12,10 @@ FullPlanDefault.args = {
   title: "Elige el número de proveedores",
   textGeneral:
     "Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena",
-  containerData: {
-    planSelection: [
-      { number: "300", name: "Proveedores" },
-      { number: "1500", name: "Proveedores" },
-      { number: "+3000", name: "Proveedores" },
-      { number: "Ondemand", name: "agrega proveedores a tu forma" },
-    ],
-  },
-};
+  containerData: [
+    { number: "300", name: "Proveedores" },
+    { number: "1500", name: "Proveedores" },
+    { number: "+3000", name: "Proveedores" },
+    { number: "Ondemand", name: "agrega proveedores a tu forma" },
+  ],
+};

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

@@ -20,7 +20,7 @@ export const FullPlan = ({ title, textGeneral, containerData }) => {
         <p>{textGeneral}</p>
       </div>
       <PlanSelection
-        planSelection={containerData.planSelection}
+        planSelection={containerData}
         setbuttonActive={setbuttonActive}
       />
       <Button