contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  overflow: auto;
+  position: fixed;
+  background-color: rgba(59, 59, 59, 0.53);
+  backdrop-filter: blur(4px);
+  left: 0;
+  top: 0;
+  z-index: 100;
+
+  .modal-container {
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .modal-data-container {
+      display: flex;
+      flex-direction: column;
+      gap: 25px;
+      align-items: center;
+      padding: 15px;
+      min-width: 375px;
+      
+      h2 {
+        color: ${GlobalColors.gray};
+      }
+
+      .validation-and-table-container {
+        .validation-panel {
+          width: 100%;
+          height: 44px;
+          background-color: rgba(38,38,38,0.3);
+          padding: 0 10px;
+          position: absolute;
+          top:0;
+          right:0;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .circular-button {
+            & + * {
+              margin-left: 10px;
+            }
+          }
+
+          button{
+            width: 24px;
+            height: 24px;
+            border: 1px solid #f0f0f0;
+            background-size: 12px;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          // & + * {
+          //   margin-top: 25px;
+          // }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,18 @@
+import { RenameImagesBar } from "./index";
+
+export default {
+  title: "Components/organisms/RenameImagesBar",
+  component: RenameImagesBar,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => <RenameImagesBar {...args} />;
+
+export const RenameImagesBarDefault = Template.bind({});
+RenameImagesBarDefault.args = {
+  RenameImagesBar: {
+    
+  },
+};

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

@@ -0,0 +1,30 @@
+import { InputImages } from "../../atoms/InputImages";
+import { NumberMandatory } from "../../atoms/NumberMandatory";
+import { InputGroupv2 } from "../InputGroupv2";
+import { Container } from "./styles";
+
+export const RenameImagesBar = ({
+  description,
+  number,
+}) => {
+ 
+  return (
+    <Container>
+      <InputImages
+      required={true}
+      description_small={"Descripción del campo."}
+        placeHolder={"UPC"}
+        ></InputImages>
+      <InputImages
+       required={false}
+       description_small={"Descripción del campo."}
+        placeHolder={"Modelo"}
+        ></InputImages>
+        <InputImages
+         required={true}
+         description_small={"Descripción del campo."}
+        placeHolder={"Item"}
+        ></InputImages>
+    </Container>
+);
+}  

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  height:60px;
+  display: flex;
+  gap: 10px;
+  padding:22px 15px;
+  border:1px solid ${GlobalColors.gray_light};
+  border-radius:10px;
+`;

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

@@ -5,8 +5,7 @@ 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 "../../../../dist/global-files/variables";
-import { FontFamily } from "../../../global-files/variables";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { VersionItem } from "../../molecules/VersionItem";
 import { CreateVersion } from "../../organisms/CreateVersion";
 import { useCloseModal } from "../../../global-files/customHooks";

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/ProductEditionv2/ProductEditionv2.stories.js

@@ -0,0 +1,213 @@
+import { ProductEditionv2 } from "./index";
+
+export default {
+  title: "Components/pages/ProductEditionv2",
+  component: ProductEditionv2,
+};
+
+const Template = (args) => <ProductEditionv2 {...args} />;
+
+export const ProductEditionv2Default = Template.bind({});
+
+ProductEditionv2Default.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+  },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyM2Q1NTlmYi1jMzIwLTRhMjItYjJmNy1lOThhYTFhZGEyNmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkyNjgyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODM5MzA0MjEsImlhdCI6MTY4MzkyNjgyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.TvCoaKoctj5mypXWMz3NyV1Vm1ToBV0vJmpVyZSQw4-ikTChkxcZ5tFYvqhk1GdvNCFttfSQIqM-14dAYYBc28YwwKP86gqOuzB1fG41rN5x1Yx3tkJq6hiVRgiBbSHWtThA9c8VnxNQbrJiaRTvvkDiM5KNTEst1oxQHL5Ct9_iKQMJMRFie7Xv0xnyS0qZ6QHK4Q2A9OHsnDkAuumALZJcE19Zh6VgSitgWrZiz3x5Text4Q-U-R48NUAzUFirAzYZzJN_fCme5pGf1AnUaZjeUjPsmrV5TBVzPEYwXO0KG8lYjL8id80D7tbGs28ZIK6B4rf3-eqI_ngmBB4CjQ",
+  articleId: 238,
+  category: 846,
+  version: 2,
+  productSelected: {
+    orderId: 15275,
+    status: "AA",
+    datasheet_status: "AA",
+    prio: "none",
+    version: 3,
+    description_status: "AA",
+    images_status: "AA",
+    brand: null,
+    retailerOrder: 0,
+    missing: {
+      datasheet: null,
+      descriptions: null,
+      images: null,
+    },
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    article: {
+      category: "Abarrotes|Abarrotes Secos|Frutos Secos",
+      company_name: "GRUPO BRAHMA",
+      country: "México",
+      id_category: "11",
+      id_datasheet_especialist: 54,
+      id_datasheet_facilitator: 52,
+      id_description_especialist: 54,
+      id_description_facilitator: 52,
+      id_images_especialist: 55,
+      id_images_facilitator: 53,
+      id_order: 15275,
+      id_article: 39485,
+      id_auditor: 37,
+      name: "Mix de nueces",
+      timestamp: "2023-07-14T21:03:19.000Z",
+      upc: "7543453453",
+    },
+    retailers: [
+      {
+        id: 34,
+        name: "San Pablo",
+      },
+    ],
+    statusByRetailer: {
+      34: {
+        datasheet: "AA",
+        description: "AA",
+        images: "AA",
+      },
+    },
+    retailersAvailable: [
+      {
+        id: 34,
+        name: "San Pablo",
+      },
+    ],
+    categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
+    upc: "7543453453",
+    id_article: 39485,
+    id_order: 15275,
+  },
+  productToEdit: {
+    ArticleId: 39485,
+    idCategory: "11",
+    product: {
+      orderId: 15275,
+      status: "AA",
+      datasheet_status: "AA",
+      prio: "none",
+      version: 3,
+      description_status: "AA",
+      images_status: "AA",
+      brand: null,
+      retailerOrder: 0,
+      missing: {
+        datasheet: null,
+        descriptions: null,
+        images: null,
+      },
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      article: {
+        category: "Abarrotes|Abarrotes Secos|Frutos Secos",
+        company_name: "GRUPO BRAHMA",
+        country: "México",
+        id_category: "11",
+        id_datasheet_especialist: 54,
+        id_datasheet_facilitator: 52,
+        id_description_especialist: 54,
+        id_description_facilitator: 52,
+        id_images_especialist: 55,
+        id_images_facilitator: 53,
+        id_order: 15275,
+        id_article: 39485,
+        id_auditor: 37,
+        name: "Mix de nueces",
+        timestamp: "2023-07-14T21:03:19.000Z",
+        upc: "7543453453",
+      },
+      retailers: [
+        {
+          id: 34,
+          name: "San Pablo",
+        },
+      ],
+      statusByRetailer: {
+        34: {
+          datasheet: "AA",
+          description: "AA",
+          images: "AA",
+        },
+      },
+      retailersAvailable: [
+        {
+          id: 34,
+          name: "San Pablo",
+        },
+      ],
+      categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
+      upc: "7543453453",
+      id_article: 39485,
+      id_order: 15275,
+    },
+  },
+  location: {
+    pathname: "/EditProducts",
+    search: "",
+    hash: "",
+    state: {
+      withChat: true,
+      chatType: "product_status",
+      origin: "RequestWithContentoh",
+    },
+    key: "24vwut",
+  },
+  user: {
+    id_user: 28,
+    name: "Ismael",
+    last_name: "López",
+    email: "ilopez@contentoh.com",
+    position: "Test States",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    birth_Date: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    email_notify: 1,
+    is_user_tech: "ADMIN-AS",
+    membership: {
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "50",
+      products_limit: "5000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1693338334183",
+  },
+  company: {
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
+    email: null,
+    social_link: "",
+    is_retailer: 0,
+    financedRetailers: [],
+    retailers: [],
+  },
+  showSurvey: (v) => v && alert("se muestra"),
+};