contentoh-components-library 21.3.68 → 21.3.69

package/src/components/molecules/StripeCardForm/paymentForm.js

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import { PaymentFormContainer } from "./styles";
+import {
+  useStripe,
+  useElements,
+  CardNumberElement,
+  CardExpiryElement,
+  CardCvcElement,
+} from "@stripe/react-stripe-js";
+import { useEffect } from "react";
+
+export const PaymentForm = ({
+  labelForm = "Pago con tarjeta",
+  setToken,
+  setCard,
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [cardName, setCardName] = useState("");
+  const [valuesComplete, setValuesComplete] = useState({
+    name: false,
+    number: false,
+    cvc: false,
+    exp: false,
+  });
+
+  const handleIputChange = (event, key) => {
+    const temp = { ...valuesComplete };
+    if (key === "name") {
+      temp[key] = event?.length;
+      setValuesComplete(temp);
+    } else {
+      temp[key] = event.complete;
+      setValuesComplete(temp);
+    }
+  };
+
+  /**
+   * Este método crea un nuevo token que será enviado a la bd para generar una nueva tarjeta
+   */
+  const createToken = async () => {
+    /* isNew values
+      1: is new
+      0: use card existing
+      -1: use other payment metoh */
+    let token = "";
+    token = await stripe.createToken(elements.getElement(CardNumberElement));
+
+    const { error, paymentMethod } = await stripe.createPaymentMethod({
+      type: "card",
+      card: elements.getElement(CardNumberElement),
+      billing_details: {
+        name: cardName,
+      },
+    });
+
+    try {
+      if (token.token) {
+        token = token.token.id;
+      } else {
+        setModalErrorCard(true);
+        setMsj(token.error.message);
+      }
+
+      paymentMethod.isNew = true;
+      setToken && setToken(token);
+      setCard && setCard(paymentMethod);
+    } catch (err) {
+      console.log(err, error);
+    }
+  };
+
+  useEffect(() => {
+    const valuesArray = Object.values(valuesComplete);
+    const allValuesComplete = valuesArray?.every((val) => val);
+
+    allValuesComplete ? createToken() : "le falta algo oiga";
+  }, [valuesComplete]);
+
+  const handleCardNameChange = (event) => {
+    handleIputChange(event.target.value, "name");
+    setCardName(event.target.value);
+  };
+
+  return (
+    <PaymentFormContainer>
+      <h2>{labelForm}</h2>
+      <div className="card-fields">
+        <div className="element card-name">
+          <label>Nombre en la tarjeta</label>
+          <input
+            className="card-input"
+            value={cardName}
+            onChange={handleCardNameChange}
+          />
+        </div>
+        <div className="element card-number">
+          <label>No. de tarjeta</label>
+          <CardNumberElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "number")}
+          />
+        </div>
+        <div className="element expiration-date">
+          <label>Fecha de expiración</label>
+          <CardExpiryElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "exp")}
+          />
+        </div>
+        <div className="element cvc-code ">
+          <label>CVC</label>
+          <CardCvcElement
+            className="card-input"
+            onChange={(e) => handleIputChange(e, "cvc")}
+          />
+        </div>
+      </div>
+    </PaymentFormContainer>
+  );
+};

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

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div``;
+
+export const PaymentFormContainer = styled.form`
+  padding: 20px;
+  border: 1px solid #f0f0f0;
+
+  h2 {
+    font-size: 15px;
+    line-height: 20px;
+    color: #262626;
+    font-family: ${FontFamily.Lato};
+
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .card-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    .element {
+      display: flex;
+      align-items: center;
+
+      label {
+        color: #808080;
+        font-family: ${FontFamily.Lato};
+        font-size: 12px;
+        display: flex;
+
+        & + * {
+          margin-left: 6px;
+        }
+      }
+
+      .card-input {
+        border: 1px solid #f0f0f0 !important;
+        border-radius: 5px;
+        padding: 3px;
+        font-family: ${FontFamily.Lato};
+        font-size: 12px;
+        flex: 1;
+      }
+
+      &.card-name {
+        flex: 1 0 100%;
+        label + * {
+          margin-left: 6px;
+        }
+      }
+
+      &.card-number {
+        flex: 1 0 100%;
+        label + * {
+          margin-left: 43px;
+        }
+      }
+
+      &.expiration-date,
+      &.cvc-code {
+        flex: 1 1 49%;
+        label + * {
+          margin-left: 9px;
+        }
+      }
+    }
+  }
+`;

package/src/components/molecules/StripeCardSelector/CardSelector.stories.js

@@ -0,0 +1,12 @@
+import { CardSelector } from ".";
+
+export default {
+  title: "Components/molecules/CardSelector",
+  component: CardSelector,
+};
+
+const Template = (args) => <CardSelector {...args} />;
+export const CardSelectorDefault = Template.bind({});
+CardSelectorDefault.args = {
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjQzNjAwMC0wYzgyLTRjNzYtYWEzNi1kM2Q1NGJjZTZiMTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NTU2OTUyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODU1NzMxMjMsImlhdCI6MTY4NTU2OTUyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.EotcxmtkUpBxwlXa3bo25iLAmRcT0kj1G3PVITVB_0ZtF8UC19rJIMTNSc1hYkl8cbfCuB_vkjYCAxi4b2SOru5MdMTRhgNjcQTVbiwIYww-QdUWq0WSv84nW_HaRoxCJ8ezm-wBZgUTpcD3VFuynUICbODKKHUfxVdKdVoAM6GGE6ymSbO7-0C7ZumoWEqaZ22BF4G1H-JvLkR-tL5iqXa2N-QCnNoteFmHstBfH6Sp5UZhPav1VBEGRmwdFfUnC-Xc-aNeIFwgWCXMsOXFWbbmWeh0uNF-Btu-QEJ7VkCu4pbElqHWJKBYLCx1zqDBrKrsrNxyvQlxsJ9NSOae8Q",
+};

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

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { Container } from "./styles";
+import { loadStripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { getAllCards } from "./utils";
+import { Card } from "../../atoms/Card";
+import { Loading } from "../../atoms/Loading";
+const stripeApiKey = loadStripe(`${process.env.REACT_APP_KEY_STRIPE}`);
+
+export const CardSelector = ({ jwt, setCard }) => {
+  const [stripeLoaded, setStripeLoaded] = useState(false);
+  const [cards, setCards] = useState([]);
+  const [selectedCard, setSelectedCard] = useState("");
+
+  const loadStripeJS = async () => {
+    await stripeApiKey;
+    setStripeLoaded(true);
+    const cardsResponse = await getAllCards(jwt);
+    setCards(cardsResponse);
+  };
+  useEffect(() => {
+    loadStripeJS();
+  }, []);
+
+  return stripeLoaded ? (
+    <Container>
+      <Elements stripe={stripeApiKey}>
+        {cards.map((card) => (
+          <Card
+            key={card.id}
+            card={card}
+            selectedCard={selectedCard}
+            setSelectedCard={setSelectedCard}
+            setCard={setCard}
+          />
+        ))}
+      </Elements>
+    </Container>
+  ) : (
+    <Loading />
+  );
+};

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

@@ -0,0 +1,4 @@
+import styled from "styled-components";
+import { PaymentFormContainer } from "../StripeCardForm/styles";
+
+export const Container = styled(PaymentFormContainer)``;

package/src/components/molecules/StripeCardSelector/utils.js

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+export const getAllCards = async (jwt) => {
+  try {
+    const response = await axios({
+      method: "get",
+      url: `${process.env.REACT_APP_CARDS_ENDPOINT}`,
+      headers: {
+        Authorization: jwt,
+      },
+    });
+    const stripeCards = JSON.parse(response.data.body).data;
+    return stripeCards;
+  } catch (error) {
+    console.log(error);
+  }
+};

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

@@ -2,33 +2,156 @@ import { Container } from "./styles";
 import { TabSection } from "../../atoms/TabSection";
 import { useEffect, useState } from "react";
 
+
+import { Modal } from "../../organisms/Modal";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+
+
 export const TabsMenu = ({
   tabsSections = {},
   setImagesSection,
   setActiveTab,
+  activeTab,
+
+  desc,
+  setDesc,
+  fich,
+  setFich,
+  imag,
+  setImag,
+  updatedDescriptions,
+  updatedDatasheets,
+  selectedImages,
+  setUpdatedDescriptions,
+  setUpdatedDatasheets,
+  setSelectedImages
 }) => {
   const [sections, setSections] = useState(tabsSections);
 
+
+  const [modal, setModal] = useState(false)
+  const [isFirstExecution, setIsFirstExecution] = useState(true)
+  const [detectaTab, setDetectaTab] = useState('')
+  const [cancelAccept, setCancelAccept] = useState('')
+  const [llave, setLlave] = useState('')
+  const [objeto, setObjeto] = useState()
+
+
+
+
   const activeSection = (key, array = {}) => {
     let tempArray = {};
     setImagesSection(key === "Imágenes");
     Object.keys(array).forEach((section) => {
       tempArray[section] = section === key;
-      if (section === key) setActiveTab(key);
+      if (section === key) {
+        
+        setUpdatedDatasheets([])
+        setUpdatedDescriptions([])
+        setSelectedImages([])
+        setDesc([])
+        setFich([])
+        setImag([])
+        return setActiveTab(key)
+      };
     });
     setSections(tempArray);
   };
 
+
+
+
+    //! ==========================================Daniel===========================================
+  {/*=============================================================================
+    UseEffect para poder recolectar la info
+  ==============================================================================*/}
+
+useEffect(() => {
+    if (cancelAccept==='Aceptar' & llave!==''){
+      setCancelAccept('')
+      setModal(false)
+      activeSection(llave, objeto)
+    } else if (cancelAccept==='Cancelar' & llave!=='') {
+       setModal(false)
+       setCancelAccept('')
+    }  
+  },[cancelAccept])
+
+ 
+
+  function detectClickFunction  (e,key,sections) {
+
+
+    const targetIsTheCurrentTab = e.target.innerHTML === activeTab;
+    const descriptionsWereUpdated = updatedDescriptions.length > 0;
+    const datasheetWereUpdated = updatedDatasheets.length > 0;
+    const imagesWereUpdated = selectedImages.length > 0;
+    const dataWereUpdated = descriptionsWereUpdated || datasheetWereUpdated || imagesWereUpdated;
+
+    if (!targetIsTheCurrentTab && !dataWereUpdated ){ 
+      setLlave(key)
+      setObjeto(sections)
+      activeSection(key, sections)
+      }
+    else if(!targetIsTheCurrentTab &&  dataWereUpdated ){
+      setModal(true)
+      setLlave(key)
+      setObjeto(sections)
+
+
+    }
+  } 
+
+
+
+
+  //! ==========================================Daniel===========================================
+
+
   return (
+    <>
+    {/* //! ==========================================Daniel=========================================== */ }
+                  {/*=============================================================================
+                          Llamado al componente para poder renderizar la alerta
+                  ==============================================================================*/}
+                {activeTab && <Modal
+                  show={modal}
+                  title='Cambios sin Guardar'
+                  message= 'Estás cambiando de vista y aun no guardas cambios ¿Estás seguro?'
+                  buttons={ [
+                    <ButtonV2
+                      key={"btn-Cancelar"}
+                      type={"white"}
+                      label={"Cancelar"}
+                      size={12}
+                      onClick={(event) => setCancelAccept(event.target.textContent)}
+                    />,
+                    <ButtonV2
+                      key={"btn-Aceptar"}
+                      type={"pink"}
+                      label={"Aceptar"}
+                      size={12}
+                      onClick={(event) =>  setCancelAccept(event.target.textContent)}
+                    />,
+                  ]}
+                /> 
+                }
+                {/*=============================================================================
+                          Llamado al componente para poder renderizar la alerta
+                  ==============================================================================*/}
+{/*  //! ==========================================Daniel=========================================== */ }
     <Container>
       {Object.keys(sections).map((key, index) => (
         <TabSection
           key={index}
           label={key}
           active={sections[key]}
-          onClick={() => activeSection(key, sections)}
+          onClick={(e)=>{
+           detectClickFunction (e, key, sections)
+          }}
         />
       ))}
     </Container>
+    </>
   );
-};
+};

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

@@ -32,20 +32,23 @@ export const TagAndInput = ({
   showTooltip,
   auditClass,
 }) => {
+  
   return (
     <Container
       inputType={inputType}
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <div className="title-container">
-        <ScreenHeader
-          text={label}
-          headerType={"input-name-header"}
-          color={color}
-        />
-        {showTooltip && <span className="tooltip">{label}</span>}
-      </div>
+      {label?.length && (
+        <div className="title-container">
+          <ScreenHeader
+            text={label}
+            headerType={"input-name-header"}
+            color={color}
+          />
+          {showTooltip && <span className="tooltip">{label}</span>}
+        </div>
+      )}
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -73,4 +76,5 @@ export const TagAndInput = ({
       />
     </Container>
   );
+  
 };

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

@@ -162,3 +162,24 @@ chatTicket_userTECH.args = {
   },
   classNameContainerFixed: "chatTicket",
 };
+
+// ejemplo del chat para los cambios de status del producto.
+export const chatProduct_status = Template.bind({});
+chatProduct_status.args = {
+  chatType: "product_status",
+  chatContainerType: "popUp",
+  chatData: {
+    id: 37414,
+    version: 7,
+    retailerId: 70,
+    status: "AA",
+    orderId: 15189,
+    userToken:
+      "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhOWFhMDQ4Zi05YzRjLTQxODMtYWUzMS03OWVjNjBhY2NjZGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzU4ODM4OSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MzU5MTk4OSwiaWF0IjoxNjgzNTg4Mzg5LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.k9FQfRR02XC3WWfOzWhrbJGmp69AmCHJEIrgtXKhIwC69trdphSm1AKkZnDJMsEdkpUgjF_zAOsa_xYRxO6goXy7WXVc_p7N-yFHlkhZrRyn3LEFKaLzD8vVqlWx4kgfSERm7KhI1AxPmrA-lw8eF6Axvqn3PvuszAw89_WhPOcnOt8vU0MxAVhLgS8oM6vyHFmHEHWQ2FnSYYed9sEvAxGh_B44aIgWeDteQGeGdYhsm6rUcxgkrskywZJp9FW5VgYXuDcC5NpvomMMRy_v95UV897JzCHl__sK2Z9ahm0eczVN3tAc0GbKnlN96ZrGTQ_nmNHbuMDPQBPXH5HXZQ",
+    currentUser: {
+      id: 37,
+      companyId: 2,
+      isUserTech: false,
+    },
+  },
+};

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

@@ -22,6 +22,7 @@ import { Tooltip } from "../../../atoms/Tooltip";
 import { Slide, Zoom } from "@mui/material";
 import { useRef } from "react";
 import { ImagePreview } from "../../../atoms/ImagePreview";
+import { Status } from "../../../atoms/Status";
 import { isUserTech } from "../../../../global-files/handle_userTech";
 import { container } from "aws-amplify";
 
@@ -55,7 +56,10 @@ export const ContainerItems = (props) => {
 
   useEffect(() => {
     if (!items) return;
-    if (["merchant_product", "order_product"].includes(chatType)) renderItems();
+    if (
+      ["merchant_product", "order_product", "product_status"].includes(chatType)
+    )
+      renderItems();
     else if (chatType === "ticket") renderItemsTicket();
     else setCustomItems([]);
   }, [items]);
@@ -130,6 +134,16 @@ export const ContainerItems = (props) => {
     return <label className="item-statusTicket">{item.value}</label>;
   };
 
+  const renderStatusItem = (item) => {
+    const splitText = item.value.split("|");
+    let message = [];
+    splitText.forEach((text, i) => {
+      if (i === 1 || i === 3) message.push(<Status statusType={text} />);
+      else message.push(text);
+    });
+    return <label className="item-statusItem">{message}</label>;
+  };
+
   const renderStatusTicketNeutral = (item) => {
     return (
       <Tooltip
@@ -304,7 +318,7 @@ export const ContainerItems = (props) => {
       >
         <li
           className={
-            (ownMessage ? "own-message " : "") +
+            (ownMessage && item.type !== "status" ? "own-message " : "") +
             (lastUserId === item.userId ? "sameUser" : "")
           }
         >
@@ -339,6 +353,8 @@ export const ContainerItems = (props) => {
             ? renderComment(item)
             : item.type === "img"
             ? renderImg(item)
+            : item.type === "status"
+            ? renderStatusItem(item)
             : item.type === "file"
             ? renderFile(item, ownMessage)
             : item.type === "statusTicket" &&

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

@@ -158,7 +158,8 @@ export const Container = styled.div`
       .item-message,
       .item-comment,
       .item-file,
-      .item-statusTicket {
+      .item-statusTicket,
+      .item-statusItem {
         border-radius: 10px;
         padding: 10px;
         font-family: ${FontFamily.RobotoRegular}, sans-serif;
@@ -173,10 +174,17 @@ export const Container = styled.div`
       .item-file {
         background-color: #8386ee;
       }
-      .item-statusTicket {
+      .item-statusTicket,
+      .item-statusItem {
         background-color: #85bc5b;
       }
 
+      .item-statusItem {
+        display: flex;
+        gap: 3px;
+        align-items: center;
+      }
+
       .item-message {
         &.different-company {
           border: 1px solid #e33aa9;