contentoh-components-library 21.2.105 → 21.3.0

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

@@ -0,0 +1,294 @@
+import {
+  ContainerBtnPopUpChat,
+  ContainerFixed,
+  ContainerPopUp,
+} from "./styles";
+import { useEffect, useState } from "react";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { ContentChat } from "./ContentChat";
+import { faComments as IconChat } from "@fortawesome/free-solid-svg-icons";
+import { Slide } from "@mui/material";
+import {
+  isStringEmpty,
+  isValidNaturalNumber,
+} from "../../../global-files/utils";
+
+export const Chat = (props) => {
+  const {
+    chatType, // "merchant_product" | "order_product" | "ticket"
+    chatContainerType, // ("fixed") | ("popUp")
+    chatData, // {} => aqui poner los datos requeridos segun el tipo de chat
+    classNameContainerFixed, // clases CSS del envoltoria chat fixed
+  } = props;
+  const [showPopUpChat, setShowPopUpChat] = useState(false);
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    switch (chatType) {
+      case "merchant_product":
+        validateChatMerchantProduct();
+        break;
+      case "order_product":
+        validateChatOrderProduct();
+        break;
+      case "ticket":
+        validateChatTicket();
+        break;
+      default:
+        setData({
+          code: 404,
+          message: `El tipo de chat especificado "${chatType}" no es valido`,
+          errorDetail: "",
+        });
+    }
+  }, [chatType]);
+
+  // validar props que se requieren para el tipo de chat "order_product"
+  const validateChatOrderProduct = () => {
+    const {
+      userToken, // string
+      id, // number
+      orderId, // number
+      retailerId, // number
+    } = chatData;
+
+    // validar token del user
+    if (isStringEmpty(userToken)) {
+      setDataError("El token del usuario no es valido");
+      return;
+    }
+    // validar ID del producto
+    if (!isValidNaturalNumber(id)) {
+      setDataError("El ID del producto no es valido");
+      return;
+    }
+    // validar el ID de la OT en donde se encuentra el producto
+    if (!isValidNaturalNumber(orderId)) {
+      setDataError("El ID de la orden del producto no es valido");
+      return;
+    }
+    // validar el ID de la cadena asociada al producto en la OT
+    if (!isValidNaturalNumber(retailerId)) {
+      setDataError("La cadena relacionada al producto no es valida");
+      return;
+    }
+    setData({
+      userToken,
+      id,
+      orderId,
+      retailerId,
+    });
+  };
+
+  // validar props que se requieren para el tipo de chat "merchants_product"
+  const validateChatMerchantProduct = () => {
+    const {
+      userToken, // string
+      id, // number
+      version, // number
+    } = chatData;
+
+    // validar token del user
+    if (isStringEmpty(userToken)) {
+      setDataError("El token del usuario no es valido");
+      return;
+    }
+    // validar ID del producto
+    if (!isValidNaturalNumber(id)) {
+      setDataError("El ID del producto no es valido");
+      return;
+    }
+    // validar la version del producto
+    if (!isValidNaturalNumber(version)) {
+      setDataError("La version del producto no es valida");
+      return;
+    }
+    setData({
+      userToken,
+      id,
+      version,
+    });
+  };
+
+  // validar props que se requieren para el tipo de chat "ticket"
+  const validateChatTicket = () => {
+    const {
+      currentUser /* {
+        id: number ,
+        companyId: number , 
+        isUserTech: boolean ,
+      } */,
+      id, // number
+      statusTicket, // (string) "IN_PROGRESS" | "PENDING" | "COMPLETED"
+      ticketOwnerUserId, // number
+    } = chatData;
+
+    // validar si ID del usuario conectado
+    if (!isValidNaturalNumber(currentUser?.id)) {
+      setDataError("Tu ID de usuario no fue especificado");
+      return;
+    }
+    // validar si ID de la compañia del usuario conectado
+    if (!isValidNaturalNumber(currentUser?.companyId)) {
+      setDataError("El ID de tu compañia no fue especificado");
+      return;
+    }
+    // validar si el usuario conectado es de tecnologia o no
+    if (
+      currentUser?.isUserTech === undefined ||
+      typeof currentUser.isUserTech !== "boolean"
+    ) {
+      setDataError("Tu tipo de usuario no fue especificado");
+      return;
+    }
+    // validar ID del ticket
+    if (!isValidNaturalNumber(id)) {
+      setDataError("El ID del ticket no es valido");
+      return;
+    }
+    // validar ID del usuario que creó el ticket
+    if (!isValidNaturalNumber(ticketOwnerUserId)) {
+      setDataError(
+        "El ID del usuario al que le pertenece el ticket no es valido"
+      );
+      return;
+    }
+    // validar el status del chat
+    if (isStringEmpty(statusTicket)) {
+      setDataError("El estatus del ticket no es valido");
+      return;
+    }
+    let statusChat = "open";
+    if (statusTicket === "COMPLETED") statusChat = "closed";
+
+    // convertir user TECH a NORMAL si es el propietario del ticket
+    let isUserTech = currentUser.isUserTech;
+    if (isUserTech && currentUser.id == ticketOwnerUserId) {
+      isUserTech = false;
+    }
+    setData({
+      currentUser: {
+        ...currentUser,
+        isUserTech,
+      },
+      id,
+      statusChat,
+    });
+  };
+
+  const setDataError = (errorDetail) => {
+    setData({
+      code: 404,
+      message: `No se especificaron algunos datos requeridos para el tipo de chat "${chatType}"`,
+      errorDetail,
+    });
+  };
+
+  /*
+  const createItem = async (valueType, valueInput) => {
+    clearTimeout(processUpdateID);
+    let currentItems = items.slice();
+    let paramsBody = {};
+    let paramsHeaders = {};
+    switch (chatType.toLowerCase()) {
+      case "order_product": //------------------------------------------
+        paramsBody = {
+          articleId: articleId,
+          valueType: valueType,
+          value: valueInput,
+          isOrderProduct: "1",
+          orderId: orderId,
+          retailerId: retailerId,
+        };
+        paramsHeaders = { Authorization: userToken };
+        break;
+
+      default:
+        // merchants_products--------------------------------------
+        paramsBody = {
+          articleId: articleId,
+          articleVersion: articleVersion,
+          valueType: valueType,
+          value: valueInput,
+          isOrderProduct: "0",
+        };
+        paramsHeaders = { Authorization: userToken };
+    }
+    const response = await fetchPOST(
+      process.env.REACT_APP_PRODUCTS_CHAT_ENDPOINT,
+      paramsBody,
+      paramsHeaders
+    );
+    if (!response.body) {
+      let itemType =
+        valueType === "txt"
+          ? "el mensaje"
+          : valueType === "img"
+          ? "la imagen"
+          : "el archivo";
+      showModalAlert(
+        `No fue posible agregar ${itemType} en el chat`,
+        response.errorDetail,
+        "error"
+      );
+      setItems(currentItems);
+    } else {
+      if (currentItems?.length == 0) {
+        // console.log("NUEVO ITEM <> NUEVO INITIAL");
+        await getInitial();
+      } else {
+        // console.log("NUEVO ITEM <> NUEVO UPDATE");
+        await getUpdate();
+      }
+    }
+  };
+  */
+
+  return (
+    <>
+      {chatContainerType?.toLowerCase() === "fixed" ? (
+        <>
+          {/* chat tipo fixed */}
+          <ContainerFixed className={classNameContainerFixed}>
+            <ContentChat
+              chatType={chatType?.toLowerCase()}
+              chatContainerType={"fixed"}
+              dataChat={data}
+              showBtnClose={false}
+            />
+          </ContainerFixed>
+        </>
+      ) : (
+        <>
+          {/* chat tipo popUp */}
+          <ContainerBtnPopUpChat>
+            <ButtonV2
+              className={"container-btn-popUpChat"}
+              type={"whiteS2"}
+              size={14}
+              borderType={"circle"}
+              icon={IconChat}
+              onClick={async (event) => {
+                setShowPopUpChat(!showPopUpChat);
+              }}
+            />
+          </ContainerBtnPopUpChat>
+
+          <Slide direction={"left"} in={showPopUpChat} timeout={400}>
+            <ContainerPopUp>
+              <ContentChat
+                chatType={chatType?.toLowerCase()}
+                chatContainerType={"popUp"}
+                dataChat={data}
+                showBtnClose={true}
+                onClickBtnClose={() => {
+                  setShowPopUpChat(false);
+                }}
+              />
+            </ContainerPopUp>
+          </Slide>
+        </>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+// Container para chat fixed
+export const ContainerFixed = styled.div`
+  width: auto;
+  max-width: 550px;
+  min-width: 325px;
+  height: 100%;
+  flex-grow: 2;
+  background-color: white;
+  border: 1px solid #f0f0f0;
+  z-index: 1000;
+  padding: 0px;
+`;
+
+export const ContainerBtnPopUpChat = styled.div`
+  border-radius: 50%;
+  height: 34px;
+  width: 34px;
+
+  .container-btn-popUpChat {
+    height: inherit;
+    width: inherit;
+    overflow: hidden;
+  }
+`;
+
+export const ContainerPopUp = styled.div`
+  position: fixed;
+  top: 20px;
+  right: 23px;
+  bottom: 20px;
+  box-shadow: 0px 2px 10px 0px #00000073;
+  z-index: 1000;
+  width: calc(100% - 50px);
+  max-width: 550px;
+  min-width: 325px;
+  border-radius: 10px;
+  background: white;
+  padding: 0px;
+`;

package/src/components/organisms/CreateVersion/RenderChilds.js

@@ -21,25 +21,27 @@ export const Children = (
           <img src={createVersionImg} alt="create version icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType="product-name-header"
+            headerType={"product-name-header"}
             color={GlobalColors.white}
-            text="Crea una nueva versión"
+            text={"Crea una nueva versión"}
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType="retailer-name-header"
+            headerType={"retailer-name-header"}
             color={GlobalColors.white}
-            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
+            text={
+              "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
+            }
           />
           <div className="buttons-container">
             <Button
-              label="Versión desde cero"
-              buttonType="general-transparent-button"
+              label={"Versión desde cero"}
+              buttonType={"general-transparent-button"}
               onClick={() => setStep("empty-version")}
             />
             <Button
-              label="Versión personalizada"
-              buttonType="general-default-button"
+              label={"Versión personalizada"}
+              buttonType={"general-default-button"}
               onClick={() => setStep("create-version")}
             />
           </div>
@@ -51,25 +53,27 @@ export const Children = (
           <img src={genericModalWarning} alt="warning icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType="product-name-header"
+            headerType={"product-name-header"}
             color={GlobalColors.white}
-            text="Si creas una versión desde cero perderas la información actual"
+            text={
+              "Si creas una versión desde cero perderas la información actual"
+            }
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType="retailer-name-header"
+            headerType={"retailer-name-header"}
             color={GlobalColors.white}
-            text="¿Deseas Continuar?"
+            text={"¿Deseas Continuar?"}
           />
           <div className="buttons-container">
             <Button
-              label="Atrás"
-              buttonType="general-transparent-button"
+              label={"Atrás"}
+              buttonType={"general-transparent-button"}
               onClick={() => setStep("version-options")}
             />
             <Button
-              label="Continuar"
-              buttonType="general-default-button"
+              label={"Continuar"}
+              buttonType={"general-default-button"}
               onClick={() => createVersion(true)}
             />
           </div>
@@ -80,16 +84,18 @@ export const Children = (
         <CreateVersion>
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType="retailer-name-header"
+            headerType={"retailer-name-header"}
             color={GlobalColors.white}
-            text="Elige el contenido que deseas utilizar de versiones anteriores"
+            text={
+              "Elige el contenido que deseas utilizar de versiones anteriores"
+            }
           />
           <div className="version-selector">
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label="Ficha técnica"
-                id="datasheet"
+                label={"Ficha técnica"}
+                id={"datasheet"}
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -97,8 +103,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label="Descripción"
-                id="description"
+                label={"Descripción"}
+                id={"description"}
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -106,8 +112,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label="Imágenes"
-                id="image"
+                label={"Imágenes"}
+                id={"image"}
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -115,13 +121,13 @@ export const Children = (
           </div>
           <div className="buttons-container">
             <Button
-              label="Atrás"
-              buttonType="general-transparent-button"
+              label={"Atrás"}
+              buttonType={"general-transparent-button"}
               onClick={() => setStep("version-options")}
             />
             <Button
-              label="Continuar"
-              buttonType="general-default-button"
+              label={"Continuar"}
+              buttonType={"general-default-button"}
               onClick={() => createVersion()}
             />
           </div>

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

@@ -5,32 +5,48 @@ import { useEffect, useState } from "react";
 import { Children } from "./RenderChilds";
 import axios from "axios";
 
-export const CreateVersion = ({
-  articleId,
-  version,
-  setShowCreateVersion,
-  versionsList,
-  realoadVersion,
-  jwt,
-}) => {
+export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
   const [step, setStep] = useState("version-options");
+  const [versions, setVersions] = useState([]);
   const [selectedVersions, setSelectedVersions] = useState({
     datasheet: version,
     description: version,
     image: version,
   });
 
+  const getVersions = async () => {
+    try {
+      const response = await axios({
+        method: "get",
+        url: `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${idArticle}&provider=true`,
+        headers: {
+          Authorization: sessionStorage.getItem("jwt"),
+        },
+      });
+      setVersions(JSON.parse(response.data.body).data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   const createVersion = async (isEmpty) => {
     try {
-      let data = { articleId, isEmpty };
+      let data = {
+        articleId: idArticle,
+        isEmpty,
+      };
 
-      if (!isEmpty) data["version"] = selectedVersions;
+      isEmpty && (data["version"] = selectedVersions);
 
-      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
-        headers: { Authorization: jwt },
+      await axios({
+        method: "post",
+        url: process.env.REACT_APP_VERSIONS_ENDPOINT,
+        data: data,
+        headers: {
+          Authorization: sessionStorage.getItem("jwt"),
+        },
       });
       setShowCreateVersion(false);
-      realoadVersion && realoadVersion();
     } catch (error) {
       console.log(error);
     }
@@ -39,13 +55,17 @@ export const CreateVersion = ({
   const onChange = (e) => {
     setSelectedVersions({
       ...selectedVersions,
-      [e.target.name]: parseInt(e.target.value),
+      [e.target.name]: parseInt(e.target.value.slice(-1)),
     });
   };
 
+  useEffect(async () => {
+    await getVersions();
+  }, []);
+
   return (
     <Container>
-      <div id="create-version" className="modal-container">
+      <div className="modal-container">
         <div className="button-container">
           <Button
             image={closeIcon}
@@ -57,7 +77,7 @@ export const CreateVersion = ({
         {Children(
           step,
           setStep,
-          versionsList,
+          versions,
           selectedVersions,
           onChange,
           createVersion

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

@@ -0,0 +1,55 @@
+import { Modal } from "./index";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+export default {
+  title: "Components/organisms/Modal",
+  component: Modal,
+  argTypes: {
+    icon: {
+      options: [undefined, "error", "warning", "success", "info"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Modal {...args} />;
+
+export const modalDefault = Template.bind({});
+modalDefault.args = {
+  show: false,
+  title: "Titulo del modal",
+  icon: undefined,
+  message: `descripcion amplia sobre el componente 
+	modal white para saber como se ven varias lineas
+	de codigo`,
+};
+
+export const modalWithButtons = Template.bind({});
+modalWithButtons.args = {
+  show: false,
+  title: "Titulo del modal",
+  icon: undefined,
+  message: `descripcion amplia sobre el componente 
+	modal white para saber como se ven varias lineas
+	de codigo`,
+  buttons: [
+    <ButtonV2
+      key={"btn-Cancelar"}
+      type={"white"}
+      label={"Cancelar"}
+      size={12}
+      onClick={(event) => {
+        alert("cancelar");
+      }}
+    />,
+    <ButtonV2
+      key={"btn-Aceptar"}
+      type={"pink"}
+      label={"Aceptar"}
+      size={12}
+      onClick={(event) => {
+        alert("aceptar");
+      }}
+    />,
+  ],
+};