contentoh-components-library 21.5.3 → 21.5.4

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

@@ -0,0 +1,114 @@
+import styled, { css } from "styled-components";
+
+export const Container = styled.div`
+  background: #fff;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-x: auto;
+  width: 100%;
+  margin-right: 30px;
+  .checkbox_fixed {
+    left: 0px;
+    position: sticky;
+    z-index: 5;
+  }
+
+  .custom-table {
+    border-collapse: collapse;
+    box-sizing: border-box;
+    width: 100%;
+    & > thead {
+      top: 0;
+      height: 45px;
+      position: sticky;
+      z-index: 2;
+      & > tr {
+        background-color: #f7f7fc;
+        border-radius: 5px 5px 0px 0px;
+        height: 45px;
+      }
+    }
+    & > tbody > tr {
+      height: 70px;
+      &:last-child {
+        border-radius: 0px 0px 5px 5px;
+      }
+    }
+  }
+
+  .custom-table th,
+  .custom-table td {
+    padding: 8px;
+    border: 0;
+  }
+
+  .custom-table th {
+    border-radius: 5px 0 0 5px;
+    border: 0;
+    color: var(--black-main, #262626);
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-align: left;
+  }
+
+  .custom-table tr {
+    background: var(--white-main, #fff);
+    border-bottom: 1px solid var(--grey-light, #f0f0f0);
+    border-left: 1px solid var(--grey-light, #f0f0f0);
+    border-right: 1px solid var(--grey-light, #f0f0f0);
+    & > td {
+      color: var(--grey-main, #707070);
+      font-family: Roboto;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      gap:5px;
+    }
+    display: flex;
+    align-items: center;
+    ${({ withCheckbox }) => withCheckbox && `padding-left: 10px;`}
+  }
+`;
+
+export const TH = styled.th`
+  background: inherit;
+  min-height: ${({ height }) => height ?? "auto"};
+  min-width: ${({ width }) => width ?? "auto"};
+  position: sticky;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
+  ${({ fixedToLeft, withCheckbox }) =>
+    fixedToLeft >= 0 &&
+    css`
+      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
+      z-index: 10;
+    `}
+`;
+
+export const TD = styled.td`
+  align-items: center;
+  background: inherit;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  min-width: ${({ width }) => width ?? "auto"};
+  text-align: center;
+  vertical-align: middle;
+  z-index: 5;
+  position: sticky;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
+  .content {
+    white-space: nowrap;
+    overflow: hidden;
+    /* text-overflow: ellipsis; */
+  }
+  ${({ fixedToLeft, withCheckbox }) =>
+    fixedToLeft >= 0 &&
+    css`
+      left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
+      z-index: 10;
+    `}
+`;

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

@@ -0,0 +1,15 @@
+import { VersionSelectorv2 } from "./index";
+
+export default {
+  title: "Components/organisms/VersionSelectorv2",
+  component: VersionSelectorv2,
+};
+
+const Template = (args) => <VersionSelectorv2 {...args} />;
+
+export const VersionSelectorv2Default = Template.bind({});
+VersionSelectorv2Default.args = {
+  articleId: 35707,
+  companyName: "COMPANY DEV",
+  currentVersion: 7,
+};

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

@@ -0,0 +1,105 @@
+import { Container } from "./styles";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Button } from "../../atoms/GeneralButton";
+import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { GlobalColors } from "../../../global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+import { VersionItemv2 } from "../../molecules/VersionItemv2";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
+
+export const VersionSelectorv2 = ({
+  modalId,
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowVersionSelector,
+  jwt,
+}) => {
+  const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
+
+  const loadProductVersions = async (articleId) => {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+        {
+          headers: {
+            Authorization: jwt,
+          },
+        }
+      );
+
+      const versionList = JSON.parse(response.data.body).data;
+      setVersions(versionList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    const ac = new AbortController();
+    loadProductVersions(articleId);
+
+    return () => {
+      setVersions([]);
+      setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
+    };
+  }, [reload]);
+
+  return (
+    <Container id={modalId}>
+      <div className="versions-header">
+        <ScreenHeader
+          text={"Versiones"}
+          headerType={"input-name-header"}
+          color={GlobalColors.gray}
+          fontFamily={FontFamily.Lato}
+        />
+        <div className="buttons-container">
+          <Button
+            image={addVersion}
+            buttonType={"circular-button"}
+            onClick={() => setShowCreateVersion(true)}
+            id="add-version"
+          />
+          <Button
+            buttonType="general-white-button close-button"
+            onClick={() => setShowVersionSelector(false)}
+            id="close-button"
+          />
+        </div>
+      </div>
+      <div className="versions-container">
+        {versions?.map((item) => (
+          <VersionItemv2
+            key={item.version}
+            version={item.version}
+            articleStatus={item.article_status}
+            currentVersion={item.version === currentVersion}
+            productOwner={companyName}
+            setVersion={setVersion}
+            timestamp={item.timestamp}
+          />
+        ))}
+      </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 300px;
+  height: 100%;
+  background-color: ${GlobalColors.white};
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+  overflow: auto;
+  position: absolute;
+  right: 20px;
+  top: 0;
+  z-index: 500;
+
+  .versions-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 44px;
+    border-radius: 10px 10px 0 0;
+    background: #F9F9F9;
+    padding:5px 10px;
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+
+      button + * {
+        margin-left: 10px;
+        width: 24px;
+        height: 24px;
+        border: 1px solid ${GlobalColors.magenta_s2};
+        background-size: 12px;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    }
+  }
+  .versions-container{
+    padding:5px 10px;
+  }
+    
+`;

package/src/components/pages/Dashboard/Dashboard.stories.js

@@ -9,59 +9,54 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 37,
-    name: "José",
-    last_name: "Castañeda",
-    email: "ismael97lopez@gmail.com",
-    position: "Auditor",
-    telephone: "",
+    id_user: 343,
+    name: "Jair",
+    last_name: "León",
+    email: "hleon@contentoh.com",
+    position: "Test States",
+    telephone: "+525555555555",
     country: "México",
-    id_company: 2,
-    id_cognito: "9a213128-6482-4c16-a4b6-6e64f225b1bd",
+    id_company: 234,
+    id_cognito: "4512b5a5-366a-4bb5-916e-aafe05402992",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
-    id_stripe: "",
-    id_role: 6,
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
     active: 1,
     is_retailer: 0,
-    email_notify: 1,
-    is_user_tech: null,
+    email_notify: 0,
+    is_user_tech: "ADMIN-AS",
     membership: {
-      id: 2,
-      start_date: "2021-11-05T02:35:12.000Z",
-      end_date: "2022-11-05T02:34:49.000Z",
-      planID: 1,
-      plan: "prod_KtkvuFFLpOdP6e",
-      name: "Plan Free",
-      user_limit: "1",
-      products_limit: "3",
-      type: "PyMES",
+      id: 139,
+      start_date: "2023-10-04T15:46:14.000Z",
+      end_date: "2024-10-04T08:46:09.000Z",
+      planID: 9,
+      plan: "prod_KtlkzZVGq6bRTO",
+      name: "Plan Enterprise Full",
+      user_limit: "30",
+      products_limit: "10000",
+      type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-37/37.png?1684953973972",
+    src: "https://content-management-profile.s3.amazonaws.com/id-343/343.png?1699640943284",
   },
   company: {
-    id_company: 1,
-    trade_name: "GRUPO BRAHMA",
-    company_name: "GRUPO BRAHMA",
+    id_company: 234,
+    trade_name: "L'ORÉAL",
+    company_name: "L'ORÉAL",
     rfc: "XAXX010101000",
     adress: "AA",
-    about_company: "",
-    telephone: "",
-    web_site: "",
-    zip_code: "",
+    about_company: " ",
+    telephone: " ",
+    web_site: " ",
+    zip_code: " ",
     email: null,
-    social_link: "",
+    social_link: " ",
     is_retailer: 0,
-    retailers: [
-      {
-        id: null,
-        name: null,
-        country: null,
-      },
-    ],
+    financedRetailers: [],
+    retailers: [],
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI3ZjNkZTM4Mi03NWE2LTRlNDAtYTI3NC00YmM5ODg2Nzk0YjYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NDk1NTYzOCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODQ5NTkyMzcsImlhdCI6MTY4NDk1NTYzOCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.ALvhpSGVv34JV8vLSg0CznmsIzRMJ_BFcmDI4qYXzr0qwgLLihon0M0xmODMhIHKcZK4jODC01guliB6fTPoCb8kfPHrBgLnHMBU8PxU1Fcc2EqF5U8lh4fJK6Mc7kiJ4lCreKJL3kT_1ytC-7FdRAlhNXzuJW6aMQQ785ODQ8-1RtHKW6U_b9x88-WFxjltEKuw734LGBSkz9iKZSumNBJBP8HTMgwOgmRTJ6lR-hPsujvl7aF3maXhftpk2fI8S_FzjVRMsxY3T8hQHIXEYwQUv-fC5SPOgc8XDuAp18MKfi0qkU1EYHQahC0qZmvgVGWEDcu5D36Xj0as4iAiFQ",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI0NTEyYjVhNS0zNjZhLTRiYjUtOTE2ZS1hYWZlMDU0MDI5OTIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjQ1MTJiNWE1LTM2NmEtNGJiNS05MTZlLWFhZmUwNTQwMjk5MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4YTJhOTE3ZS0xZWU2LTQ5ODAtODZiZS0yZTEzMGI4ZTcyMmIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5OTY0MDk0MSwibmFtZSI6IkphaXIgTGXDs24iLCJwaG9uZV9udW1iZXIiOiIrNTI1NTU1NTU1NTU1IiwiZXhwIjoxNjk5NjQ0NTQxLCJpYXQiOjE2OTk2NDA5NDEsImVtYWlsIjoiaGxlb25AY29udGVudG9oLmNvbSJ9.YrLhtF5cee0S_iWX1gXBTJPxF8zls25SMK9GfCWoCpAabGRy9HtGSZ9KUuZlXICz13TTvgOfxFIv5duwS2vxYIlE1ZuLPHXSm2L4FuwJHcppedxssPNgfmxmVu-4B0SaMNWynjIWwbt_wumb2spwe3ONTcuRI-UgmJo_Rfa_cKUOiL-oNCQwkX6KhuWRGcfcpoUkfhi6tfOAgkA8VT5D8h-Dgawg5ibRnbjRMQejfNg1vVh_d2MpYhX9ve5SM9r1JdRCowgxMjb3ii6eXnng_UqjRdrB4008wkG8iZbz2C_NVJjJGrt1B454MZZmRvHbRogs-uu6U1JUsDW09qhcCg",
 };

package/src/components/pages/Dashboard/index.js

@@ -40,6 +40,8 @@ export const Dashboard = ({ jwt, user, company }) => {
   const [applicantsFilter, setApplicantsFilter] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
+  const [trades, setTrades] = useState([]);
+  const [tradesSelected, setTradesSelected] = useState([]);
 
   const loadProductVersions = async (queryObject) => {
     const keys = Object.keys(queryObject);
@@ -84,9 +86,10 @@ export const Dashboard = ({ jwt, user, company }) => {
     const isRetailer = user.is_retailer && company.retailers;
     const isProvider = !user.is_retailer && user.id_role === 0;
     const isCollaborator = user.id_role > 0;
-    const { ordersBydate, ordersByStatus } =
+    const { ordersBydate, ordersByStatus, ordersByActive, companyTrades } =
       (await loadProductVersions(orderByStatus)) || {};
 
+    if (trades.length === 0) setTrades(companyTrades);
     const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
     let productsFinished = 0;
     if (isRetailer) productsFinished = Ex;
@@ -100,6 +103,8 @@ export const Dashboard = ({ jwt, user, company }) => {
           : prev,
       0
     );
+
+    const registeredProducts = ordersByActive.registered;
     let metricsArray = [
       metricsData[0]
         ? metricsData[0]
@@ -107,6 +112,7 @@ export const Dashboard = ({ jwt, user, company }) => {
     ];
 
     metricsArray.push(
+      { label: "Productos activos", value: registeredProducts },
       { label: "Productos filtrados", value: total },
       { label: "Productos sin asignar", value: PA + R },
       { label: "Productos en proceso", value: inProcess },
@@ -217,10 +223,13 @@ export const Dashboard = ({ jwt, user, company }) => {
   }, []);
 
   useEffect(() => {
-    orderByRequired?.startDate &&
+    if (
+      orderByRequired?.startDate &&
       orderByStatus?.endDate &&
-      metricsData.length > 0 &&
+      metricsData.length > 0
+    ) {
       setLoading(false);
+    }
   }, [orderByRequired, orderByStatus, metricsData]);
 
   useEffect(async () => {
@@ -229,14 +238,23 @@ export const Dashboard = ({ jwt, user, company }) => {
       startDate: startDate,
       endDate: endDate,
     };
-    companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
-    retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
-    categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
+    if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
+    if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
+    if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
+    if (tradesSelected.length > 0)
+      queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
     applicantsFilter.length > 0 &&
       (queryObject["requestedBy"] = applicantsFilter.join(","));
 
     await loadProductsByStatus(queryObject, true);
-  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
+  }, [
+    companyId,
+    retailerId,
+    categoryId,
+    datesRange,
+    applicantsFilter,
+    tradesSelected,
+  ]);
 
   return loading ? (
     <Loading />
@@ -301,6 +319,17 @@ export const Dashboard = ({ jwt, user, company }) => {
             defaultOption="Todos los solicitantes"
           />
         )}
+        {user.id_role === 0 && trades?.length > 0 && (
+          <CustomSelect
+            showSearchBar={true}
+            options={trades}
+            selectLabel="Todas las marcas"
+            placeHolder="Buscar marca"
+            customSelectId="trade-select"
+            parameterArray={tradesSelected}
+            setParameterArray={setTradesSelected}
+          />
+        )}
       </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (

package/src/components/pages/MultipleEdition/MultipleEdition.stories.js

@@ -0,0 +1,17 @@
+import {MultipleEdition} from "./index";
+
+export default {
+  title: "Components/pages/MultipleEdition",
+  component: MultipleEdition,
+};
+const Template = (args) => <MultipleEdition {...args} />;
+
+export const MultipleEditionDefault = Template.bind({});
+
+MultipleEditionDefault.args = {
+  articles: [121219],//[216, 238, 239],
+  versions: [1],
+  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIxZmFjNjY2Ny1hMDMzLTQ1NjAtOWU5ZC01MTQwMDc2MmI2MWYiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjFmYWM2NjY3LWEwMzMtNDU2MC05ZTlkLTUxNDAwNzYyYjYxZiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjM2FlNjRiMC0yNDcxLTQ1MmQtOGExYi04OGFkNWIxNjRjOWQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNjU0ODk3OCwibmFtZSI6IlJhZGlvc2NoYWNrIE9uYm9hcmRpbmciLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODk4IiwiZXhwIjoxNzA2NTUyNTc4LCJpYXQiOjE3MDY1NDg5NzgsImVtYWlsIjoicmFkaW9zaGFja2Ryb3BzaGlwQGFsbGZyZWVtYWlsLm5ldCJ9.RPiGAf-R2eEqdsfAbKKC7uX57t1JTEIZ3rgJZZNQ6wnJm8hfDKk1aa1fOqGZMDVw_peoq_XyZQWvmsJ8pRexWxO05oLZchn1n_gml6rapq2WqVap1CYyj2k2aBEGJo5CZzWGFp8VVXn9nl9pm8AsFjjfCAQGFaKB_5iMeNCPYt_vXXQ-LAOwkjzoAP6ujmlpJMVMsXoCaabWH7t5Z8akNO0eS0KAscL5EPDl_MmjqV_2PeBXl1KYAU-uJbdSG1xRiSV_nqJ23B4TAkERDfouCfd3ysLMrlRxkcsQd9xOvrt9fQMlrJqrCuf6RoD12pgqSRIxk_cOa4NFm6SKwCwRnw"
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI2ZTY5MTNjZS01MTc1LTRhOWItYjhlYS1iMGNhMDk4Yjc0M2EiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjZlNjkxM2NlLTUxNzUtNGE5Yi1iOGVhLWIwY2EwOThiNzQzYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwN2JjM2E5Mi02ZmY4LTQ5NDctYWU3ZS0yZjkxNWE4OWE0N2IiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxMzE5NzkyMiwibmFtZSI6IkplZmUgQ29tZXJjaWFsIiwicGhvbmVfbnVtYmVyIjoiKzUyMzMzMzIzMjIzMzMiLCJleHAiOjE3MTMyMDE1MjIsImlhdCI6MTcxMzE5NzkyMiwiZW1haWwiOiJqZWZlY29tZXJjaWFsQGFsbGZyZWVtYWlsLm5ldCJ9.pRmu4LHck97IR2lvsZNa7ehSMs7bDFrxJqqKn-FgiAeLhZPCJA7SMyWDQKvKH9QFNwQOXI4cNm653CPTvK1jOMFDa7RCaliT4mRlfgrU44EGb-GCr5sfg-97Wqd-kO4hNkJH7x7WvagjHNRL8uD_iMwfUIrZUcUIPRF1b1zl-bHc6WOJDqtyRcdh8NpQ4y63V11USlPvZrcimo4_iJ6re9ductEOwuTPPE30kj88N9J70nWk4dvKKHrC-BTFnt5PSped7nK55FVjg8uIfqpRtTVBtMfVq6zQp0CMjnpiD2yR93YUpSzeNZJ1Sz-pOij5K1RpVXrLHrghWY4ny9QFTg"
+  //token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMzE0ODYyYy02OTYxLTQ5YjktODMwOC1hMDM3Mzg1MjUwYzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwMjQxMTc0MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcwMjQxNTM0MSwiaWF0IjoxNzAyNDExNzQxLCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.O4Lr5HZLuueNNY1FxqrRBaQZKMgnTXY9IG7KAMkhWO20Dxnfj253sqOme36AbqIAsCQBy77GmnZtTAFs0uF9QBfEDzZXRQ1xcctboGZ9U235LlLdz-BNGoH5QCRXeZsZdXJ1M7yL8IvIdEnXkFC0WYcUMWMRUc6K6vgOvmCCQhzOr-uW-2nsLBGjBb7Tj_okViYvT0Lupo5Z0Z9Xc20oOWnVmrSuaYa1-b4AjOjEOnETA9usnRa6blOVOkHqi5fX8u11ejczINxNBtoizMPOQROuzuuPTvHrl17ae8JkNoxVCJe5ZdfRrUN1lwUXnOZim7QhNg8YR_uvPs_EJRIwfw",
+};

package/src/components/pages/MultipleEdition/components/ImageUploader.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { ImageUploaderContainer } from "./ImageUploaderStyles";
+import uploadFile from "../../../../assets/images/Icons/upload_file.svg";
+
+const ImageUploader = ({ handleNewImage }) => {
+  const [image, setImage] = useState(null);
+
+  const onDrop = (acceptedFiles) => {
+    if (acceptedFiles.length === 1) {
+      showImage(acceptedFiles[0]);
+    }
+  };
+
+  const showImage = (file) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      setImage(reader.result);
+      getImageDimensions(reader.result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const getImageDimensions = (dataURL) => {
+    const img = new Image();
+    img.onload = () => {
+      const image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height,
+      };
+      handleNewImage(image);
+    };
+    img.src = dataURL;
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <ImageUploaderContainer {...getRootProps()}>
+      <input {...getInputProps()} />
+      {image ? (
+        <img className="imageLoaded" src={image} alt="Imagen Cargada" />
+      ) : (
+        <>
+          <img src={uploadFile} alt="Subir imágen" />
+          {isDragActive ? (
+            <p>Suelta la imagen aquí</p>
+          ) : (
+            <div>
+              <p>Da clic aquí o arrastra la foto para subirla a Content-oh!</p>
+              <span>Tamaño de imagen recomendando 3000x3000 pixeles</span>
+            </div>
+          )}
+        </>
+      )}
+    </ImageUploaderContainer>
+  );
+};
+
+export default ImageUploader;

package/src/components/pages/MultipleEdition/components/ImageUploaderStyles.js

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const ImageUploaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  color: var(--magenta-main, #e33aa9);
+  text-align: center;
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 49px 32px;
+  & > div {
+    & > p {
+      margin-bottom: 10px;
+    }
+    & > span {
+      color: var(--grey-medium, #cbcbcb);
+      font-size: 10px;
+      font-weight: 400;
+    }
+  }
+`;