contentoh-components-library 21.5.3 → 21.5.4

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

@@ -4,10 +4,13 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
 import { Chat } from "../../organisms/Chat";
 import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
+import { useState } from "react";
+import { render } from "@testing-library/react";
 
 export const HeaderTop = ({
   setHeaderTop,
   withChat,
+  chatType,
   productSelected,
   token,
   auditableVersion,
@@ -16,16 +19,51 @@ export const HeaderTop = ({
   activeRetailer,
 }) => {
   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]);
 
   useEffect(() => {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
 
-  return (
-    <Container ref={headerTop}>
-      <ScreenHeader text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && (
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chat
+              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(
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -37,8 +75,16 @@ export const HeaderTop = ({
             size={18}
             activeRetailer={activeRetailer}
           />
-        )}
+        );
+        break;
+    }
+  };
 
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && chat}
         {isAuditor && auditableVersion && (
           <Button
             buttonType="general-white-button circular-button"

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

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

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

@@ -0,0 +1,100 @@
+import { Container } from "./styles";
+import { Button } from "../../atoms/GeneralButton/index";
+import { useEffect, useRef } from "react";
+import { Chat } from "../../organisms/Chat";
+import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
+import { useState } from "react";
+import { render } from "@testing-library/react";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+
+export const HeaderTopv2 = ({
+  setHeaderTop,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+  auditableVersion,
+  setCompare,
+  isAuditor,
+  activeRetailer,
+}) => {
+  const HeaderTopv2 = 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]);
+
+  useEffect(() => {
+    setHeaderTop && setHeaderTop(HeaderTopv2.current.clientHeight);
+  }, []);
+
+  const renderChat = (chatType) => {
+    switch (chatType) {
+      case "product_status":
+        chatData &&
+          setChat(
+            <Chat
+              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(
+          <Chat
+            chatType="merchant_product"
+            chatContainerType="popUp"
+            chatData={{
+              userToken: token,
+              id: productSelected.id_article,
+              version: productSelected.version,
+            }}
+            size={18}
+            activeRetailer={activeRetailer}
+          />
+        );
+        break;
+    }
+  };
+
+  return (
+    <Container ref={HeaderTopv2}>
+      <ScreenHeaderv2 text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && chat}
+        {isAuditor && auditableVersion && (
+          <Button
+            buttonType="general-white-button circular-button"
+            onClick={() => {
+              setCompare((current) => !current);
+            }}
+            image={auditIcon}
+          />
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+    padding-top: 10px;
+  }
+
+  .buttons-container {
+    display: flex;
+
+    button {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #f0f0f0;
+      background-size: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        height: 15px;
+      }
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,46 @@
+import { ImageSelectorv2 } from "./index";
+
+export default {
+  title: "Components/molecules/ImageSelectorv2",
+  component: ImageSelectorv2,
+  images: {},
+  argTypes: {
+    modalSelector: {
+      options: [true, false],
+      type: "boolean",
+    },
+  },
+};
+
+const Template = (args) => <ImageSelectorv2 {...args} />;
+
+export const ImageSelectorv2Default = Template.bind({});
+
+ImageSelectorv2Default.args = {
+  images: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+  ],
+};

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

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+import { ProductImagev2 } from "../../atoms/ProductImagev2";
+
+export const ImageSelectorv2 = ({
+  images = [],
+  setActiveImage,
+  modalSelector,
+}) => {
+  return (
+    <Container className={modalSelector && "modal-image-selector"}>
+      {images?.values?.map((image, index) => (
+        <ProductImagev2
+          key={index}
+          img={image.src}
+          altText={image.altText}
+          imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
+          onClick={() => setActiveImage(index)}
+        />
+      ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 340px;
+  display: flex;
+  overflow: auto;
+  gap: 10px;
+
+  &.modal-image-selector {
+    width: 377px;
+    height: auto;
+    background: #ffff;
+    border-radius: 10px;
+  }
+`;

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

@@ -0,0 +1,107 @@
+import { Phase } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/Phase",
+  component: Phase,
+  argTypes: {
+  },
+};
+
+const Template = (args) => <Phase {...args} />;
+
+export const PhaseDefault = Template.bind({});
+
+PhaseDefault.args = {
+  id:0,
+ phases:[
+  {
+      "phaseId": 2,
+      "phaseName": "Fase Evaluación",
+      "isInitialPhase": 1,
+      "nextPhaseIfApproved": 3,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 1
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 1
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  },
+  {
+      "phaseId": 3,
+      "phaseName": "Fase comercial",
+      "isInitialPhase": 0,
+      "nextPhaseIfApproved": 4,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 1
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 1
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  },
+  {
+      "phaseId": 4,
+      "phaseName": "Fase legal",
+      "isInitialPhase": 0,
+      "nextPhaseIfApproved": null,
+      "groupsAssigned": [
+          {
+              "groupId": 1,
+              "groupName": "Preguntas",
+              "groupActive": 0
+          },
+          {
+              "groupId": 8,
+              "groupName": "Inteligencia",
+              "groupActive": 0
+          },
+          {
+              "groupId": 9,
+              "groupName": "Legal",
+              "groupActive": 0
+          }
+      ]
+  }
+],
+phaseName:"Fase Evaluación",
+nextPhase:3,
+groups: [
+  {
+      "groupId": 1,
+      "groupName": "Preguntas",
+      "groupActive": 1
+  },
+  {
+      "groupId": 8,
+      "groupName": "Inteligencia",
+      "groupActive": 1
+  },
+  {
+      "groupId": 9,
+      "groupName": "Legal",
+      "groupActive": 0
+  }
+]
+};