contentoh-components-library 21.0.70 → 21.0.73

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

@@ -1,24 +1,102 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { TableRow } from "../../molecules/TableRow";
+import { Container as Row } from "../../molecules/TableRow/styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import LabelToInput from "../../atoms/LabelToInput";
 
 export const ImageDataTable = ({
-  headerInfo,
-  imageData,
   activeImage,
   darkMode,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
 }) => {
   return (
     <Container darkMode={darkMode}>
-      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
-      {imageData?.map((attribute, index) => (
-        <TableRow
-          key={index}
-          feature={attribute.feature}
-          value={attribute.value}
-          valueType={index < 2}
+      <TableHeader
+        imagesStatus={imagesStatus}
+        activeImage={activeImage}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        onClickSave={onClickSave}
+      />
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
+          }
         />
-      ))}
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imagePackagingType?.find(
+              (f) => f.id === +activeImage?.packing_type
+            )?.name || "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
+              ?.name || "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Formato" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={activeImage?.ext || "-"}
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={
+            activeImage?.width && activeImage.height
+              ? `${activeImage?.width}x${activeImage?.height}px`
+              : "-"
+          }
+        />
+      </Row>
+      {retailerSelected &&
+        lists?.attrForImgs &&
+        lists?.attrForImgs[retailerSelected]?.map((attr, index) => (
+          <Row key={"row-" + index}>
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
+            <LabelToInput
+              width="100px"
+              defaultValue={attr?.value}
+              onChange={(e) => {
+                setImages({
+                  action: "changeAttrValue",
+                  retailer: retailerSelected,
+                  index,
+                  value: e.target.value || "-",
+                });
+              }}
+            />
+          </Row>
+        ))}
     </Container>
   );
 };

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

@@ -6,6 +6,13 @@ export const InputGroup = ({
   inputGroup = {},
   activeSection,
   dataInputs = {},
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  dinamicHeight,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -17,7 +24,6 @@ export const InputGroup = ({
         return "text";
     }
   };
-
   return (
     <Container
       className={
@@ -26,29 +32,58 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      <ScreenHeader
-        headerType={"retailer-name-header"}
-        text={inputGroup?.dataGroup}
-      />
+      {inputGroup?.dataGroup && (
+        <ScreenHeader
+          headerType={"retailer-name-header"}
+          text={inputGroup?.dataGroup}
+        />
+      )}
       <div className="inputs-container">
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
             <TagAndInput
-              key={index}
-              inputId={"datasheet-" + dataInputs[input]?.id + "-" + index}
+              key={
+                index +
+                "-" +
+                dataInputs[input]?.value +
+                "-" +
+                dataInputs[input]?.id
+              }
+              inputId={dataInputs[input]?.id}
+              version={version}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={dataInputs[input]?.name}
+              label={
+                dataInputs[input]?.name +
+                (dataInputs[input]?.required ? "*" : "")
+              }
               value={dataInputs[input]?.value}
               inputPlaceHolder={input?.placeholder}
+              articleId={articleId}
+              isRequired={dataInputs[input]?.required}
+              updatedDatasheets={updatedDatasheets}
+              setUpdatedDatasheets={setUpdatedDatasheets}
+              maxChar={
+                dataInputs[input]?.max_chars
+                  ? dataInputs[input]?.max_chars
+                  : 999
+              }
             />
           ) : (
             <TagAndInput
-              key={index}
-              inputId={"description-" + input?.id + "-" + index}
+              key={index + "-" + input?.value}
+              inputId={input.id}
+              index={index}
               inputType={"textarea"}
-              label={input?.name}
+              label={input?.name + (input.required ? "*" : "")}
               value={input?.value}
+              isRequired={input.required}
+              maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
+              updatedDescriptions={updatedDescriptions}
+              setUpdatedDescriptions={setUpdatedDescriptions}
+              articleId={articleId}
+              version={version}
+              dinamicHeight={dinamicHeight}
             />
           )
         )}

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

@@ -23,6 +23,9 @@ export const Container = styled.div`
         flex: 1 1 20%;
         margin-right: 10px;
         min-width: 227px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
     }
   }

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

@@ -5,17 +5,15 @@ import { ImageSelector } from "../../molecules/ImageSelector";
 import { useState, useEffect } from "react";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { Button } from "../../atoms/GeneralButton";
-import { getImage } from "../../../global-files/data";
 
 export const ProductImageModal = ({
   images = [],
   headerInfo,
   validation,
   setShowModal,
+  sendToFacilitator,
 }) => {
-  const [activeImage, setActiveImage] = useState(
-    getImage(images?.values[0], 710, 710)
-  );
+  const [activeImage, setActiveImage] = useState(0);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
   );
@@ -42,18 +40,25 @@ export const ProductImageModal = ({
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={activeImage.src}
-            altText={activeImage?.name}
+            img={
+              "https://" +
+              process.env.REACT_APP_IMAGES_BUCKET +
+              ".s3.amazonaws.com/" +
+              images?.values[activeImage]?.srcDB
+            }
+            altText={images?.values[activeImage]?.name}
             imageType={"expanded-modal-image"}
           />
         </div>
         <div className="modal-data-container">
           <div className="validation-and-table-container">
             <div className="validation-panel">
-              <Button
-                buttonType={`circular-button ${buttonType}`}
-                onClick={() => setShowValidationPanel(true)}
-              />
+              {
+                <Button
+                  buttonType={`circular-button ${buttonType}`}
+                  onClick={() => setShowValidationPanel(true)}
+                />
+              }
               <Button
                 buttonType={"close-button"}
                 onClick={() => {
@@ -66,14 +71,16 @@ export const ProductImageModal = ({
                   id="validation-panel"
                   setOptionClicked={setButtonType}
                   setShowValidationPanel={setShowValidationPanel}
+                  sendToFacilitator={sendToFacilitator}
                 />
               )}
             </div>
             <ImageDataTable
-              imageData={activeImage.data}
+              imageData={images?.values[activeImage]?.data}
               headerInfo={headerInfo}
-              activeImage={activeImage}
+              activeImage={images?.values[activeImage]}
               darkMode={true}
+              lists={images}
             />
           </div>
           <ImageSelector

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

@@ -11,6 +11,9 @@ export const Container = styled.div`
   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;

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

@@ -0,0 +1,123 @@
+import { ProviderProductEdition } from "./index";
+
+export default {
+  title: "Components/pages/ProviderProductEdition",
+  component: ProviderProductEdition,
+};
+
+const Template = (args) => <ProviderProductEdition {...args} />;
+
+export const ProviderProductEditionDefault = Template.bind({});
+
+ProviderProductEditionDefault.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+  },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhZWQzMzEyZi1kZGYyLTQ2ZTAtOTgyNS1lODU2ZDM0ODYwNzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1Mzk1NzQ3MiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NTM5NjEwNzIsImlhdCI6MTY1Mzk1NzQ3MiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Fq4bWu0irZ3NHDU2MOXBJZaqQlzbXwrS6YY2_GBG0Nq8z5gNmKr8LFcjBvD1mYj6sO6BHPrh0yzAOtlQMVOFAeXXRZ524Um_rpECWKDUD8IjCKUIgbqQos_YB-09zetlsmIE6Pd29UxDuwrN7zWqzzTuKGUnNhfC8uS3_tG9fi4TxNY0TY8Jwuk9uo0LlOjiIb28mL06B98EWTFbuze5J0AADfa_p0zEqYMyAIn4kYouIOt8eqOVFfZ4piEJMMcbwwaPwVTpy8e6FSLHrQeCa054ZJCvdGQLKhN1Ceue77voFINI9umnEIExAp_w2miOwzJjuk6E1ALf2LWo-Rz_qg",
+  articleId: 238,
+  category: 846,
+  version: 2,
+  productSelected: {
+    id_article: 32,
+    id_category: "781",
+    name: "PRODUCTO 10",
+    upc: "PRUEBA10",
+    timestamp: "2021-11-09T23:22:36.000Z",
+    status: "NULL",
+    categoryName: "TECNOLOGÍA Y ELECTRÓNICA|VIDEO|DVD Y BLU-RAY",
+    asignations: [],
+    version: 2,
+    version_status: "AC",
+    retailersAvailable: [
+      {
+        id: 2,
+        name: "Walmart Mercancías Generales",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+      {
+        id: 3,
+        name: "Sam´s Club",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+    ],
+    missing: {},
+  },
+  productToEdit: {
+    idCategory: "781",
+    ArticleId: 32,
+    product: [
+      {
+        id_article: 32,
+        id_category: "781",
+        name: "PRODUCTO 10",
+        upc: "PRUEBA10",
+        timestamp: "2021-11-09T23:22:36.000Z",
+        status: "NULL",
+        categoryName: "TECNOLOGÍA Y ELECTRÓNICA|VIDEO|DVD Y BLU-RAY",
+        asignations: [],
+        version: 2,
+        version_status: "AC",
+        retailersAvailable: [
+          {
+            id: 2,
+            name: "Walmart Mercancías Generales",
+            country: "México",
+            id_region: 1,
+            active: 1,
+          },
+          {
+            id: 3,
+            name: "Sam´s Club",
+            country: "México",
+            id_region: 1,
+            active: 1,
+          },
+        ],
+        missing: {},
+      },
+    ],
+  },
+  location: {
+    product: { articleId: 109485, versionId: 3 },
+    state: { origin: "RequestWithContentoh" },
+  },
+  user: {
+    id_user: 28,
+    name: "Proveedor",
+    last_name: "Colgate",
+    email: "ilopez@contentoh.com",
+    position: "Prueba Admin",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    membership: {
+      id: 38,
+      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: "20",
+      products_limit: "5000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1653957474326",
+  },
+};