contentoh-components-library 21.4.69 → 21.4.70

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .title-container {
+    position: relative;
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 12px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+    }
+
+    // &:hover {
+    //   .tooltip {
+    //     display: block;
+    //   }
+    // }
+  }
+
+  // & > :first-child {
+  //   & + * {
+  //     margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
+  //   }
+  // }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
+`;

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

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

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

@@ -0,0 +1,77 @@
+import { useState } from "react";
+
+//Components
+import { Container } from "./styles";
+import { Button } from "../../atoms/GeneralButton";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { useEffect } from "react";
+import { RetailerSelector } from "../RetailerSelector";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+export const Validation = ({
+  retailers,
+  validation,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  approve,
+  reject,
+  approveAll,
+  rejectAll,
+  showApproveRejectAll,
+}) => {
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+  const [buttonType, setButtonType] = useState(
+    validation ? validation : "null-button"
+  );
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+
+  return (
+    <Container>
+      <div className="buttons-container">
+        {showValidationButtons && (
+          <ButtonV2
+            id={"btn-validar-info"}
+            key={"btn-validar-info"}
+            type={"pink"}
+            className="button-height"
+            borderType={"oval"}
+            label={"Validar información"}
+            size={10}
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowValidationPanel(true);
+            }}
+          />
+        )}
+      </div>
+      {showValidationPanel && (
+        <ValidationPanel
+          id="validation-panel"
+          setOptionClicked={setButtonType}
+          setShowValidationPanel={setShowValidationPanel}
+          approve={approve}
+          reject={reject}
+          approveAll={approveAll}
+          rejectAll={rejectAll}
+          showApproveRejectAll={showApproveRejectAll}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  width: fit-content;
+
+  .buttons-container {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+      margin-left: 3px;
+    }
+  }
+  #btn-validar-info button{
+    height:20px;
+    padding:4px 10px;
+  }
+`;

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

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

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);
+  },
+};