contentoh-components-library 21.4.32 → 21.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.32",
+  "version": "21.4.34",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -16,8 +16,6 @@
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@storybook/addon-postcss": "^2.0.0",
-    "@stripe/react-stripe-js": "^2.2.0",
-    "@stripe/stripe-js": "^2.1.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -30,7 +28,6 @@
     "contentoh-components-library": "^21.0.18",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
-    "infinite-react-carousel": "^1.2.11",
     "js-base64": "^3.7.2",
     "moment": "^2.29.4",
     "prop-types": "^15.7.2",

package/src/components/atoms/Avatar/index.js

@@ -2,18 +2,12 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 
-export const Avatar = ({
-  image,
-  altText,
-  imageType,
-  onClick,
-  fallbackImage,
-}) => {
+export const Avatar = ({ image, altText, imageType, onClick }) => {
   return (
     <Container className={imageType}>
       <ReactImageFallback
         src={image}
-        fallbackImage={fallbackImage || defaultProfile}
+        fallbackImage={defaultProfile}
         alt={altText}
         onClick={onClick}
       />

package/src/components/atoms/Card/index.js

@@ -1,42 +1,9 @@
 import { Container } from "./styles";
-import { CheckBox } from "../CheckBox";
-import { useStripe } from "@stripe/react-stripe-js";
-
-export const Card = ({
-  card = {},
-  selectedCard,
-  setSelectedCard,
-  setCard,
-  setStripe,
-}) => {
-  const stripe = useStripe();
-
-  const handleOnChange = (e, cardId) => {
-    if (e.target.checked) {
-      setCard && setCard({ ...card, isNew: 0 });
-      setStripe && setStripe(stripe);
-      setSelectedCard && setSelectedCard(cardId);
-    } else {
-      setSelectedCard && setSelectedCard("");
-      setCard && setCard(null);
-    }
-  };
 
+export const Card = ({ cardIcon, altText }) => {
   return (
     <Container>
-      <div className="card-details">
-        <CheckBox
-          id={card.id}
-          label={
-            <>
-              <span className="brand-card">{card.brand}</span>
-              <span>{`**** **** **** ${card.last4}`}</span>
-            </>
-          }
-          checked={selectedCard === card.id}
-          onChange={(e) => handleOnChange(e, card.id)}
-        />
-      </div>
+      <img src={cardIcon} alt={altText} />
     </Container>
   );
 };

package/src/components/atoms/Card/styles.js

@@ -1,44 +1,8 @@
 import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  display: flex;
-  cursor: pointer;
-
-  .card-details {
-    label {
-      cursor: pointer;
-      height: 25px;
-      p {
-        margin-left: 40px;
-        span {
-          & + * {
-            margin-left: 20px;
-          }
-        }
-      }
-    }
-    & + * {
-      margin-left: 20px;
-    }
-  }
-
-  .cvc-input {
-    display: flex;
-    align-items: center;
-    color: ${GlobalColors.s4};
-    font-family: ${FontFamily.AvenirNext};
-    font-size: 13px;
-
-    .card-input {
-      border: 1px solid #f0f0f0 !important;
-      border-radius: 5px;
-      padding: 3px;
-      width: 50px;
-    }
-  }
-
-  & + * {
-    margin-top: 15px;
-  }
-`;
+img {
+    width: 100%;
+    margin:auto;
+}
+`;

package/src/components/atoms/CheckBox/index.js

@@ -7,11 +7,9 @@ export const CheckBox = ({
   isFilter,
   defaultChecked,
   disabled = false,
-  checked,
-  className = "",
 }) => {
   return (
-    <Container key={`check-${id}`} className={className}>
+    <Container key={`check-${id}`}>
       <input
         type="checkbox"
         name={id}
@@ -19,7 +17,6 @@ export const CheckBox = ({
         onChange={onChange}
         defaultChecked={defaultChecked}
         disabled={disabled}
-        checked={checked}
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}

package/src/components/atoms/CheckBox/styles.js

@@ -46,8 +46,6 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
-      z-index: 5;
-      cursor: pointer;
     }
   }
 `;

package/src/components/atoms/InputFormatter/styles.js

@@ -37,6 +37,5 @@ export const Container = styled.div`
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.deep_gray};
     text-align: right;
-    margin-top: 5px;
   }
-`;
+`;

package/src/components/atoms/SliderToolTip/styles.js

@@ -46,7 +46,7 @@ export const Slider = styled.div`
   }
   &.bottom-slide {
     top: 100%;
-    right: calc(100% + -100px);
+    right: calc(100% + -70px);
   }
   ul,
   li {

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

@@ -27,7 +27,7 @@ export const CarouselImagesLogin = ({
       img2.src = images[i];
       const circulo_actual = Array.from(circulos).find((el) => el.id === i);
       Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
-      circulo_actual?.classList.add("resaltado");
+      circulo_actual.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

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

@@ -4,13 +4,10 @@ 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,
@@ -19,51 +16,16 @@ 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);
   }, []);
 
-  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(
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && (
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -75,16 +37,8 @@ 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/SignInLogin/index.js

@@ -12,6 +12,7 @@ import showPassword from "../../../assets/images/editField/showPassword.png";
 import axios from "axios";
 
 export const SignInLogin = (props) => {
+  if (props.showProps) console.log(props);
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [invalidEmail, setInvalidEmail] = useState(false);
   const [emptyPassword, setEmptyPassword] = useState(false);
@@ -54,25 +55,26 @@ export const SignInLogin = (props) => {
         } else {
           const userGroup =
             session.signInUserSession.accessToken.payload["cognito:groups"];
-          const response = await axios.get(
-            process.env.REACT_APP_USER_ENDPOINT,
-            {
-              headers: {
-                Authorization: session.signInUserSession.idToken.jwtToken,
-              },
-            }
-          );
-          if (userGroup[0] === props.users) {
+          if (userGroup.inclues(props.users)) {
             sessionStorage.setItem("auth", true);
             sessionStorage.setItem(
               "jwt",
               session.signInUserSession.idToken.jwtToken
             );
+            const response = await axios.get(
+              process.env.REACT_APP_USER_ENDPOINT,
+              {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken,
+                },
+              }
+            );
             const user = JSON.parse(response.data.body).data[0];
             const company = JSON.parse(response.data.body).data[1];
+            console.log({ caches, keys: caches.keys() });
             caches.keys().then((names) => {
               names.forEach((name) => {
-                caches.delete(name);
+                caches?.delete(name);
               });
             });
             user.src = `https://${
@@ -89,7 +91,7 @@ export const SignInLogin = (props) => {
           }
         }
       } catch (error) {
-        console.log(error.code);
+        console.log(error);
         setLoading(false);
         if (error.code === "NotAuthorizedException") {
           setSignInError("NotAuthorizedException");

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

@@ -36,16 +36,14 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      {label?.length && (
-        <div className="title-container">
-          <ScreenHeader
-            text={label}
-            headerType={"input-name-header"}
-            color={color}
-          />
-          {showTooltip && <span className="tooltip">{label}</span>}
-        </div>
-      )}
+      <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}

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

@@ -148,37 +148,17 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 171,
-    ticketOwnerUserId: 52,
-    statusTicket: "IN_PROGRESS",
+    id: 130,
+    ticketOwnerUserId: 194,
+    ticketCompany: undefined,
+    statusTicket: "PENDING",
     currentUser: {
       token:
-        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI3M2NjOGQ0MC1jODQxLTQyMmEtYTJmMi1lNjlkN2ZlMjZlYmYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjczY2M4ZDQwLWM4NDEtNDIyYS1hMmYyLWU2OWQ3ZmUyNmViZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwYWNiYTdlYy01OGJhLTQyNGYtOTM5OC02ZGMxOGI1YTRkODYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4ODk0MzcxNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4ODk0NzMxNywiaWF0IjoxNjg4OTQzNzE3LCJlbWFpbCI6Im9hcmVuYXNAY29udGVudG9oLmNvbSJ9.SHeA5EMqLdqlTuDBTpJ3l_lAAqjMlOT2Dm9U9yf-Y3-4FR-3cwQ_16sdsmGCjJpwkhdYBEyuQbFkY1xnQHOBLMow0izWD4CDlhlNXkWBE_3DjgCspyPMlz31Lfik2ddnkHp3HQeLwucC4uyum3N-roQA7HkuWQHSBIplp6b-Xd44OmN9X-V_kseN3QOX6o7kxNFjwZL_DUzTJUdMDOtIXXIKYO2FLkR1eWJDNdvee5FEIWAxJXfaSZ__Awawfi5k93ILXrPX7QVt78lOH3THMyiPTtfiOOwMhoSQz_k5DIuofE8FM_1-nLNajM18pI49wPQ_-k3ltCjChjqy-OlERQ",
-      id: 65,
-      companyId: 2,
+        "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJlYTRlZmQ1Zi1mYTg4LTRjNDEtYTM3Ny02MWVkNmY0YTMyOTciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MDA1Njg2NSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODAwNjA0NjUsImlhdCI6MTY4MDA1Njg2NSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.oRuv3LkdvctEMUjmeGw0-XefzV_Aoh1O2hFMik4RxpkkCUeP1O7AjA7lJI6sgoqa9Nwa2fCPRXk6ufi84UbgxGEgkupQmAvXTHQCw_uwCUVAZitlNGXSBl-VSisMuXSnckxdZQ1MvLV5BgLmiw4mu6HxKDN-Uw0xc7yL_yDtGu3NWxoO0Cm2zbej8jYLE9DV9wG297bjfzVQ7hzpEfEcB52I5Tg6nF2VDTx-8_m4mVVrpisbV5uBoYokbFyyOFVLZzUU7Je5uHukscHS5dje9IMTY8DE5S8xUWJubHjf_ktcy7Y2-F2cG5dI5oSdrBNU-wNNW5-OtRLgclSJLmbPCw",
+      id: 28,
+      companyId: 1,
       isUserTech: true,
     },
   },
   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,7 +22,6 @@ 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";
 
@@ -56,10 +55,7 @@ export const ContainerItems = (props) => {
 
   useEffect(() => {
     if (!items) return;
-    if (
-      ["merchant_product", "order_product", "product_status"].includes(chatType)
-    )
-      renderItems();
+    if (["merchant_product", "order_product"].includes(chatType)) renderItems();
     else if (chatType === "ticket") renderItemsTicket();
     else setCustomItems([]);
   }, [items]);
@@ -134,16 +130,6 @@ 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
@@ -318,7 +304,7 @@ export const ContainerItems = (props) => {
       >
         <li
           className={
-            (ownMessage && item.type !== "status" ? "own-message " : "") +
+            (ownMessage ? "own-message " : "") +
             (lastUserId === item.userId ? "sameUser" : "")
           }
         >
@@ -353,8 +339,6 @@ 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

@@ -36,10 +36,6 @@ export const Container = styled.div`
     }
   }
 
-  @media (max-width: 768px) { 
-    width: 90%;
-  }
-
   // lista de items
   > ul {
     --marginUserValue: 10px;
@@ -162,8 +158,7 @@ export const Container = styled.div`
       .item-message,
       .item-comment,
       .item-file,
-      .item-statusTicket,
-      .item-statusItem {
+      .item-statusTicket {
         border-radius: 10px;
         padding: 10px;
         font-family: ${FontFamily.RobotoRegular}, sans-serif;
@@ -178,17 +173,10 @@ export const Container = styled.div`
       .item-file {
         background-color: #8386ee;
       }
-      .item-statusTicket,
-      .item-statusItem {
+      .item-statusTicket {
         background-color: #85bc5b;
       }
 
-      .item-statusItem {
-        display: flex;
-        gap: 3px;
-        align-items: center;
-      }
-
       .item-message {
         &.different-company {
           border: 1px solid #e33aa9;