contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,59 @@
+import { Avatar } from "../../atoms/Avatar/index";
+import { Container } from "./styles";
+import nullIcon from "../../../assets/images/versionSelector/nullIcon.svg";
+import acceptIcon from "../../../assets/images/versionSelector/acceptIcon.svg";
+import versionSelected from "../../../assets/images/versionSelector/versionSelected.svg";
+import { Button } from "../../atoms/GeneralButton";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const VersionItemv2 = ({
+  version = "",
+  articleStatus,
+  currentVersion,
+  productOwner = "owner test",
+  setVersion,
+  timestamp,
+}) => {
+  let textExportedDate = "";
+  if (timestamp !== null) {
+    const exportedDate = new Date(timestamp).toLocaleDateString();
+    textExportedDate = `Última vez exportado: ${exportedDate}`;
+  }
+
+  return (
+    <Container className={(currentVersion ? "active" : "disabled")} onClick={() => setVersion && setVersion(version)}>
+      <div className="header">
+        {/* <Button
+          buttonType={"circular-button" + (currentVersion ? " disabled" : "")}
+          image={versionSelected}
+        
+        /> */}
+       
+      </div>
+      <div className="version-info">
+        <div className="version-title">
+          <ScreenHeader
+            text={"Versión " + version}
+            headerType={"input-name-header"}
+            color={GlobalColors.black}
+          /> 
+          <img
+            src={articleStatus ? acceptIcon : nullIcon}
+            alt={articleStatus ? "Validated version" : "Unvalidated version"}
+          />
+        </div>
+        
+        <p>{textExportedDate}</p>
+        <p>
+          {currentVersion
+            ? "Versión actual"
+            : articleStatus
+            ? "Edición Content-Oh!"
+            : "Versión de " + productOwner}
+        </p>
+        <p>{articleStatus ? "Content-Oh! digital" : productOwner}</p>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,47 @@
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.white};
+  padding: 5px 10px;
+  border-radius:10px;
+  &.disabled {
+    border: 1px solid ${GlobalColors.gray_light};
+  }
+  &.active {
+    border: 1px solid ${GlobalColors.purple};
+    background:rgba(138,108,170,0.2);
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .version-title {
+    display:flex;
+    justify-content:space-between;
+    align-items: center;
+  }
+  .version-info {
+    text-align: left;
+    h2{
+      font-size: 12px;
+      font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    }
+    p {
+      & + * {
+        margin-top: 5px;
+      }
+    }
+
+    p {
+      font-size: 12px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      color: ${GlobalColors.gray};
+    }
+  }
+
+  & + * {
+    margin-top: 10px;
+  }
+`;

package/src/components/organisms/BarButtons/BarButtons.stories.js

@@ -0,0 +1,13 @@
+import { BarButtons } from "./index";
+
+export default {
+  title: "Components/organisms/BarButtons",
+  component: BarButtons,
+};
+
+const Template = (args) => <BarButtons {...args} />;
+
+export const BarButtonsDefault = Template.bind({});
+BarButtonsDefault.args = {
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,150 @@
+import { Container, ContainerIcon } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+// import { Button } from "../../atoms/GeneralButton/index";
+import { useState, useEffect, useRef } from "react";
+import { Chatv2 } from "../Chatv2";
+import { Button } from "@mui/material";
+
+export const BarButtons = ({
+  showSaveButton,
+  imagesSection,
+  onClickSave,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+  activeRetailer,
+  setImageLayout,
+  setShowVersionSelector,
+  askToDeleteImages,
+  downloadImages,
+}) => {
+  const [layout, setLayout] = useState(false);
+  const headerTop = useRef();
+  const [chat, setChat] = useState(null);
+  const [chatData, setChatData] = useState(null);
+  useEffect(() => {
+    if (activeRetailer?.id && productSelected && token.length) {
+      setChatData({
+        id: productSelected?.article?.id_article || productSelected?.id_article,
+        version: productSelected?.version,
+        retailerId: activeRetailer?.id,
+        status: productSelected?.status,
+        userToken: token,
+      });
+    }
+  }, [activeRetailer, productSelected, token]);
+
+  useEffect(() => {
+    if (chatType) renderChat(chatType);
+  }, [chatData, chatType]);
+
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chatv2
+              chatType="product_status"
+              chatContainerType="popUp"
+              chatData={{
+                id: chatData?.id,
+                version: chatData?.version,
+                retailerId: chatData?.retailerId,
+                status: chatData?.status,
+                userToken: chatData?.userToken,
+              }}
+              size={18}
+              activeRetailer={activeRetailer}
+            />
+          );
+        break;
+      default:
+        setChat(
+          <Chatv2
+            chatType="merchant_product"
+            chatContainerType="popUp"
+            chatData={{
+              userToken: token,
+              id: productSelected.id_article,
+              version: productSelected.version,
+            }}
+            size={18}
+            activeRetailer={activeRetailer}
+          />
+        );
+        break;
+    }
+  };
+
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+        {imagesSection && (<Button className="btn-gral" onClick={() => {
+              setLayout(!layout);
+              setImageLayout && setImageLayout(!layout);
+            }}>
+            <ContainerIcon className="container-btn">
+              <span class="iconos-out icono-gris">{layout ? "table_chart" : "grid_view"}</span>
+            </ContainerIcon>
+          </Button>)}
+          {/* <Button
+            buttonType={layout ? "grid-layout" : "row-layout"}
+            onClick={() => {
+              setLayout(!layout);
+              setImageLayout && setImageLayout(!layout);
+            }}
+          /> */}
+      {showSaveButton && (
+        <Button className="btn-gral" onClick={onClickSave}>
+            <ContainerIcon className="container-btn">
+                <span class="iconos-out icono-gris">save</span>
+            </ContainerIcon>
+        </Button>
+        // <Button
+        //   buttonType={"circular-button save-button"}
+        //   onClick={onClickSave}
+        // />
+      )}
+      {imagesSection && (
+        <div className="images-buttons">
+          {showSaveButton && (
+            <Button className="btn-gral" onClick={() => {askToDeleteImages && askToDeleteImages();}}>
+                <ContainerIcon className="container-btn">
+                    <span class="iconos-out icono-gris">delete_forever</span>
+                </ContainerIcon>
+            </Button>
+          )}
+          {/* <Button
+            buttonType={"circular-button download-button"}
+            onClick={() => {
+              downloadImages();
+            }}
+          /> */}
+        </div>
+          )}
+      {withChat && chat}
+      <Button className="btn-gral" onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setShowVersionSelector(true);
+          }}>
+        <ContainerIcon className="container-btn">
+          <span class="iconos-out icono-gris">layers</span>
+        </ContainerIcon>
+      </Button>
+      {imagesSection && (
+        <div className="images-buttons">
+          <Button className="btn-gral" onClick={() => {downloadImages();}}>
+            <ContainerIcon className="container-btn">
+              <span class="iconos-out icono-gris">download</span>
+            </ContainerIcon>
+          </Button>
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+justify-content: center;
+width: auto;
+height:34px;
+gap:10px;
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+    padding:0;
+  }
+  .images-buttons{
+    display:flex;
+  }
+`;
+
+export const ContainerIcon = styled.div`
+  cursor: pointer;
+  border-radius: 50%;
+  height: 34px;
+  width: 34px;
+  border:1px solid ${GlobalColors.gray_light};
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+      format("woff2");
+  }
+  .container-btn {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+  }
+  .iconos-out {
+    font-family: "Material Symbols Outlined";
+    font-size: 20px;
+    //line-height: 1;
+    margin-top: 10px;
+  }
+  .iconos-out {
+    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+    color:  #B64545;
+  }
+
+  .icono-gris{
+    font-size:18px;
+    color: ${GlobalColors.gray};
+  }
+`;

package/src/components/organisms/Chatv2/ChatLists/ChatLists.stories.js

@@ -0,0 +1,65 @@
+import { ChatLists } from "./index";
+import THD from "./THD.png";
+import Rotoplas from "./Rotoplas.jpeg";
+
+export default {
+  title: "Components/organisms/Chat/ChatLists",
+  component: ChatLists,
+};
+
+const Template = (args) => <ChatLists {...args} />;
+
+// companies de prueba
+const companies = {
+  200: {
+    name: "The Home Depot",
+    src: THD,
+    lastChatDate: "2022-11-4 21:01:00",
+    statusChat: "disabled",
+  },
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    lastChatDate: "2022-11-03 21:01:00",
+    statusChat: "enabled",
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-11-02 21:01:00",
+    statusChat: "current",
+  },
+};
+// companies de prueba sin chats cerrados
+const companies2 = {
+  300: {
+    name: "Rotoplas",
+    src: Rotoplas,
+    lastChatDate: "2022-10-27 21:01:00",
+    statusChat: "enabled",
+  },
+  100: {
+    name: "Content-oh!",
+    src: "",
+    lastChatDate: "2022-9-27 21:01:00",
+    statusChat: "current",
+  },
+};
+
+export const exampleChatLists = Template.bind({});
+exampleChatLists.args = {
+  companies,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};
+
+export const onlyOpenChatLists = Template.bind({});
+onlyOpenChatLists.args = {
+  companies: companies2,
+  currentCompanyId: 100,
+  onClickCompany: (companyId) => {
+    console.log("click en company:", companyId);
+  },
+};

package/src/components/organisms/Chatv2/ChatLists/index.js

@@ -0,0 +1,141 @@
+import { Container, ContainerItemChat, ContainerTooltip } from "./styles";
+import { useEffect, useState } from "react";
+import { getCustomDate } from "../../../../global-files/utils";
+import { faImage as IconImage } from "@fortawesome/free-solid-svg-icons";
+import { CustomIcon } from "../../../atoms/CustomIcon";
+import { Image } from "../../../atoms/Image";
+import { Tooltip } from "../../../atoms/Tooltip";
+
+export const ChatLists = (props) => {
+  const {
+    companies /* {
+        id: { name , src , statusChat , items } ,
+        ...
+    } */,
+    currentCompanyId, // number
+    onClickCompany, // (id) => {}
+  } = props;
+  const [openChats, setOpenChats] = useState([]);
+  const [closedChats, setClosedChats] = useState([]);
+
+  useEffect(() => {
+    renderChats();
+  }, [companies]);
+
+  const renderChats = () => {
+    let jsxOpenChats = [];
+    let jsxClosedChats = [];
+
+    for (const companyId of Object.keys(companies)) {
+      const company = companies[companyId];
+      // crear el item chat
+      const itemChat = (
+        <ContainerItemChat
+          key={"itemChat-" + companyId}
+          onClick={(event) => {
+            onClickCompany && onClickCompany(companyId);
+          }}
+        >
+          {/* logo de la compañia */}
+          <Image
+            className="img-logoCompany"
+            width={"34px"}
+            sizeLoading={24}
+            colorLoading={undefined}
+            src={company.src}
+            componentDefault={
+              <CustomIcon
+                className="icon-logoCompany"
+                type={"white"}
+                borderType={"circle"}
+                size={15}
+                icon={IconImage}
+              />
+            }
+          />
+
+          {/* name y date */}
+          <div className="container-info">
+            <label className="label-name"> {company.name} </label>
+            <label className="label-lastDate">
+              {getCustomDate(
+                new Date(
+                  company.items.length ? company.items[0].date : undefined
+                )
+              )}
+            </label>
+          </div>
+
+          {/* label interno */}
+          <div className="container-indicators">
+            {currentCompanyId === companyId && (
+              <div className="label-ownCompany">Interno</div>
+            )}
+          </div>
+        </ContainerItemChat>
+      );
+
+      // checar si es chat abierto
+      if (company.statusChat === "closed") jsxClosedChats.push(itemChat);
+      else jsxOpenChats.push(itemChat);
+    }
+    setOpenChats(jsxOpenChats);
+    setClosedChats(jsxClosedChats);
+  };
+
+  return (
+    <>
+      <Container>
+        {openChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats abiertos </label>
+                    <label className="label-message">{`De acuerdo al estatus 
+                  actual del producto, puedes establecer una conversación 
+                  con estas compañias`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats abiertos </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{openChats}</div>
+          </section>
+        )}
+
+        {closedChats.length !== 0 && (
+          <section>
+            <div className="container-headerChats">
+              <Tooltip
+                className={"tooltip-title"}
+                position={"topCenter"}
+                addArrow={false}
+                transitionType={"zoom"}
+                followCursor={false}
+                componentTooltip={
+                  <ContainerTooltip>
+                    <label className="label-title"> Chats cerrados </label>
+                    <label className="label-message">{`Las conversaciones 
+                  con estas compañias han finalizado debido al cambio de 
+                  estatus, sigue el flujo de trabajo con tus chats abiertos`}</label>
+                  </ContainerTooltip>
+                }
+              >
+                <label> Chats cerrados </label>
+              </Tooltip>
+            </div>
+            <div className="container-bodyChats">{closedChats}</div>
+          </section>
+        )}
+      </Container>
+    </>
+  );
+};

package/src/components/organisms/Chatv2/ChatLists/styles.js

@@ -0,0 +1,162 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  max-height: 100%;
+  flex-grow: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 30px;
+  background: white;
+  padding: 20px;
+  overflow: auto;
+  //border: 1px solid red;
+
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+
+    // container del nombre de la seccion con su icono info
+    .container-headerChats {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: 5px;
+
+      .tooltip-title {
+        max-width: 100%;
+
+        label {
+          font-family: ${FontFamily.RobotoMedium}, sans-serif;
+          font-size: 15px;
+          text-align: left;
+          color: #262626;
+        }
+      }
+    }
+
+    // container de la lista de los items chats de la seccion
+    .container-bodyChats {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+`;
+
+export const ContainerItemChat = styled.div`
+  width: 100%;
+  min-width: min-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 20px;
+  background: #f7f7fc;
+  padding: 15px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.25s;
+
+  * {
+    cursor: inherit;
+  }
+
+  // imagen del logo de la compañia
+  .img-logoCompany {
+    border-radius: 50%;
+    overflow: hidden;
+    height: 34px;
+    width: 34px;
+
+    .icon-logoCompany {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // container de las etiquetas "name" y "lastDate"
+  .container-info {
+    flex-grow: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+
+    .label-name {
+      font-family: ${FontFamily.RobotoMedium}, sans-serif;
+      font-size: 15px;
+      text-align: left;
+      color: #262626;
+    }
+    .label-lastDate {
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: 11px;
+      text-align: left;
+      color: #b3b3b3;
+    }
+  }
+
+  .container-indicators {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 7px;
+
+    // label "Interno"
+    .label-ownCompany {
+      padding: 5px 10px;
+      border-radius: 3px;
+      font-family: ${FontFamily.RobotoRegular}, sans-serif;
+      font-size: 10px;
+      background-color: rgba(0, 0, 0, 0.05);
+      color: #707070;
+    }
+  }
+
+  // cuando el item chat tenga el cursor
+  &:hover {
+    background-color: #d7d7dd;
+
+    .container-info {
+      .label-lastDate {
+        color: #959292;
+      }
+    }
+
+    /*
+    .label-ownCompany {
+      background-color: ;
+    }*/
+  }
+`;
+
+// container con 2 labels "label-title" y "label-message"
+export const ContainerTooltip = styled.div`
+  min-width: min-content;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  background: transparent;
+
+  .label-title {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    text-align: left;
+    color: #262626;
+  }
+  .label-message {
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 11px;
+    text-align: left;
+    color: #262626;
+  }
+`;