contentoh-components-library 21.4.71 → 21.4.73

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

@@ -1,35 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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);
-  },
-};