contentoh-components-library 21.3.4 → 21.3.6

package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -28,107 +28,91 @@ exports.RetailerProductEditionDefault = RetailerProductEditionDefault;
 RetailerProductEditionDefault.args = {
   tabsSections: {
     Descripción: true,
-    "Ficha técnica": false,
-    Imágenes: false
+    "Ficha técnica": true,
+    Imágenes: true
   },
-  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4ZDAxMDIxNC01YmZhLTQzYzMtOTZmYi1jNTU2ZGMwNTc3NGIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjhkMDEwMjE0LTViZmEtNDNjMy05NmZiLWM1NTZkYzA1Nzc0YiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI2ZWY3Y2UxYy0xYjBjLTRkNGYtYTc3Yy1jMWIwYTk0ZjIwOWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NzMyMTQ5NCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NzMyNTA5NCwiaWF0IjoxNjY3MzIxNDk0LCJlbWFpbCI6ImthcmFmZTMyMThAbW9tMmtpZC5jb20ifQ.GjBtY-LW5eYzvNfrIJOdb9pDMU_CZlIxRAn1ZszjMfWNU9s8s_j6o4_2x0J7AyiSjgu9TaLRcRpF6FZ5pzwNGs8G5AxnO3r_PIg2mznM44QLnt5PTfdoFx2jJmU53UA8GZU1SFDvDlR1QZR-EtANz2wfNs8RqY_mKTz5WjY7RdGTFVkowTv-Y1Q9T7x_fpv_5o-nB5GzLBQoHwTLQ_vjguSLH17l2BUn0QxLi2WJVs-qWX4ze4QysADVxYOlMkAQql328oqoqdXRbZrntnxYxa5EMpmref1bGbSOFk4qgHax4qa3gD2_h291NLjCZS7IMGDSIhOk9r7irItbojM01Q",
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmMzY2YTdjYi02YjA0LTRiMzAtOTJmYy1iMzY0MmY3ZjEzNmEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3MTc0MzE0OSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjcxNzQ2NzQ5LCJpYXQiOjE2NzE3NDMxNDksImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.J8kTv1sEotxoicaRclaK1r0tjVbwHPDxIzdDfxYo9J4XwBYYfS180__KYYE0Dh1AfUK_K0mrk2_78_rhTNxCQT85W7XS3ZEcxIOUekqoxaKFl8LSVN_eWz3SlsGG0yRflhJGt6d4gBVByXZbdNiyp1rkjgMln6fhwlRUnuGRbG1WKQvdAPli3qfH8mLzgoTz-6HWs1Jf2Ujheavf3ipGMNtj-OSUdQsh04Ov7jehDWdnPNn2s2DAl4eubgjdXrwIiBPCRkbuFeYZZJpzj1wy__a0nCM7bzly5uTZ2aWujgEJvf9bJb-Y4gkS8TxyJaggJ01ZsMki36aEpIt8J1tJag",
   productSelected: {
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1
-    },
-    orderId: 3321,
-    status: "PA",
-    datasheet_status: "AC",
-    prio: "none",
-    version: 2,
-    description_status: "AC",
-    images_status: "PA",
-    statusByRetailer: {
-      58: {
-        datasheet: "AC",
-        description: "AC",
-        images: "PA"
-      }
-    },
+    articleStatus: "AA",
+    version: 3,
+    missing: {},
     article: {
-      id_article: 85655,
-      id_category: "2052",
-      name: "EXTENSION P/ EXTERIOR 3X10 AWG 10M ROJO",
-      upc: "165679",
-      timestamp: "2022-11-01T15:46:51.000Z",
-      id_user: 1436,
-      status: null,
-      active: 1,
-      company_id: 409,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "HIGHLINE-WARREN LLC",
-      country: null,
-      id_order: 3321,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: null,
-      id_description_especialist: 1248,
-      id_description_facilitator: null,
-      id_images_especialist: null,
-      id_images_facilitator: null,
-      id_auditor: null,
-      id_recepcionist: null,
-      category: "Eléctrico|Extensiones y Multicontactos|Extensiones y Multicontactos",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null
+      category: "Ventilación y Calefacción|Ventiladores de Techo|Ventiladores de Techo",
+      company_name: "GRUPO BRAHMA",
+      company_id: 1,
+      id_category: "2416",
+      id_article: 221,
+      name: 'DEMO VENTILADOR DE TECHO TRIBECA 52"',
+      upc: "147259"
     },
+    asignations: [],
     retailers: [{
-      id: 58,
-      name: "The Home Depot Golden",
+      id: 59,
+      name: "The Home Depot Platinum",
+      country: "México",
+      id_region: 1,
+      active: 1
+    }],
+    retailersAvailable: [{
+      id: 59,
+      name: "The Home Depot Platinum",
       country: "México",
       id_region: 1,
       active: 1
     }],
-    country: null,
-    upc: "165679"
+    upc: "147259",
+    name: 'DEMO VENTILADOR DE TECHO TRIBECA 52"',
+    categoryName: "Ventilación y Calefacción|Ventiladores de Techo|Ventiladores de Techo",
+    id_category: "2416",
+    id_article: 221,
+    services: [{
+      id_article: 221,
+      service: "datasheet",
+      quantity: 1,
+      price: 0,
+      id_user: 59,
+      datasheet_common: null,
+      discount: null
+    }]
   },
   location: {
     product: {
-      articleId: 109485,
+      articleId: 221,
       versionId: 3
     }
   },
   user: {
-    id_user: 426,
-    name: "Especialista Textos",
-    last_name: " ",
-    email: "karafe3218@mom2kid.com",
-    position: "Tester",
-    telephone: null,
-    country: null,
-    id_company: 254,
-    id_cognito: "8d010214-5bfa-43c3-96fb-c556dc05774b",
+    id_user: 59,
+    name: "The Home",
+    last_name: "Depot",
+    email: "cadena.ismael@allfreemail.net",
+    position: "Admin",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 817,
+    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
-    id_role: 7,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "",
+    id_role: 0,
     active: 1,
-    is_retailer: 0,
-    email_notify: null,
+    is_retailer: 1,
+    email_notify: 0,
+    is_user_tech: null,
     membership: {
-      id: 750,
-      start_date: "2022-01-07T21:32:54.000Z",
-      end_date: "2023-01-07T21:32:54.000Z",
-      planID: 6,
-      plan: "prod_KvGd6YSTJyR3AP",
-      name: "Plan Small",
-      user_limit: "10",
-      products_limit: "1000",
-      type: "Enterprise"
+      id: 47,
+      start_date: "2022-05-25T14:31:12.000Z",
+      end_date: "2023-05-25T14:31:12.000Z",
+      planID: 5,
+      plan: "prod_Ktl6B5Ou2gqTB2",
+      name: "Plan Pro",
+      user_limit: "5",
+      products_limit: "500",
+      type: "PyMES"
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-426/426.png?1667321494598"
+    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1671735033010"
   }
 };

package/dist/components/pages/RetailerProductEdition/index.js

@@ -77,8 +77,6 @@ var _VersionSelector = require("../../organisms/VersionSelector");
 
 var _customHooks = require("../../../global-files/customHooks");
 
-var _CreateVersion = require("../../organisms/CreateVersion");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -190,8 +188,8 @@ var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 var REGION = "us-east-1";
 
 _awsSdk.default.config.update({
-  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
-  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3
 });
 
 var myBucket = new _awsSdk.default.S3({
@@ -320,7 +318,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   })),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
       percentages = _useState24[0],
-      setPercentages = _useState24[1];
+      setPercentages = _useState24[1]; // const [percentages, setPercentages] = useState([{ retailers: {} }]);
+
 
   var _useState25 = (0, _react.useState)(0),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
@@ -433,22 +432,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       socketType = _useState66[0],
       setSocketType = _useState66[1];
 
-  var _useState67 = (0, _react.useState)([]),
+  var _useState67 = (0, _react.useState)(loading),
       _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      servicesStatus = _useState68[0],
-      setServicesStatus = _useState68[1];
-
-  var _useState69 = (0, _react.useState)(loading),
-      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      saving = _useState70[0],
-      setSaving = _useState70[1];
-
-  var isAuditor = user.id_role === 6;
-
-  var _useState71 = (0, _react.useState)(false),
-      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      showCreateVersion = _useState72[0],
-      setShowCreateVersion = _useState72[1];
+      saving = _useState68[0],
+      setSaving = _useState68[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
@@ -476,8 +463,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               _services = _context.sent;
               //Converts the data inside the datasheets object to array
               setServices(_services);
-              getServices(); // setActiveRetailer(product?.retailers[0]);
-
+              getServices();
               setImages({
                 action: "init",
                 init: _services[2]
@@ -486,7 +472,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               (0, _data.getPercentage)({
                 data: [product]
               }).then(function (res) {
-                return setPercentages(res);
+                return setPercentages(res[0]);
               });
               setLoading(false);
               _context.next = 15;
@@ -695,16 +681,17 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     loadAssignations(product);
   }, [userGroups]);
   (0, _react.useEffect)(function () {
-    var _product$retailers2, _product$retailers$;
+    var _Object$keys, _percentages$retailer, _retailers$;
 
-    product === null || product === void 0 ? void 0 : (_product$retailers2 = product.retailers) === null || _product$retailers2 === void 0 ? void 0 : _product$retailers2.forEach(function (retailer) {
-      var _percentages$filter$;
+    var retailers = (product === null || product === void 0 ? void 0 : product.retailersAvailable) || (product === null || product === void 0 ? void 0 : product.retailers);
 
-      retailer["percentage"] = percentages === null || percentages === void 0 ? void 0 : (_percentages$filter$ = percentages.filter(function (percent) {
-        return (retailer === null || retailer === void 0 ? void 0 : retailer.id) === (percent === null || percent === void 0 ? void 0 : percent.id_retailer);
-      })[0]) === null || _percentages$filter$ === void 0 ? void 0 : _percentages$filter$.percentage;
-    });
-    setActivePercentage(product === null || product === void 0 ? void 0 : (_product$retailers$ = product.retailers[0]) === null || _product$retailers$ === void 0 ? void 0 : _product$retailers$.percentage);
+    if (((_Object$keys = Object.keys((_percentages$retailer = percentages === null || percentages === void 0 ? void 0 : percentages.retailers) !== null && _percentages$retailer !== void 0 ? _percentages$retailer : {})) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0) {
+      retailers === null || retailers === void 0 ? void 0 : retailers.forEach(function (retailer) {
+        retailer["percentage"] = Number(percentages === null || percentages === void 0 ? void 0 : percentages.retailers[retailer.id].percentageRequired);
+      });
+    }
+
+    setActivePercentage((_retailers$ = retailers[0]) === null || _retailers$ === void 0 ? void 0 : _retailers$.percentage);
   }, [percentages]);
   (0, _react.useEffect)(function () {
     if (services.length > 0) {
@@ -2053,13 +2040,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setVersion: setVersion,
       companyName: product.article.company_name,
       currentVersion: version,
-      setShowCreateVersion: setShowCreateVersion,
       setShowVersionSelector: setShowVersionSelector,
       jwt: token
-    }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
-      idArticle: product.article.id_article,
-      version: version,
-      setShowCreateVersion: setShowCreateVersion
     })]
   });
 };

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.4",
+  "version": "21.3.6",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
     "@aws-amplify/ui-react": "^2.17.0",
     "@babel/runtime": "^7.17.2",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/material": "^5.10.8",
     "@mui/styled-engine-sc": "^5.10.6",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",

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

@@ -15,7 +15,10 @@ export const Button = ({
       id={id}
       className={buttonType}
       buttonFont={buttonFont}
-      onClick={onClick}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(e);
+      }}
       key={`button-${buttonType}`}
       disabled={buttonType === "general-button-disabled"}
     >

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

@@ -1,9 +1,42 @@
-import { Container } from "./styles";
+import { Container, ContainerIcon } from "./styles";
+import { Tooltip } from "../Tooltip";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, progressBarType, percentRequired }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
-      <p>{percent}%</p>
-    </Container>
+    <>
+      {percentRequired && (
+        <>
+          <Tooltip
+            componentTooltip={
+              <>
+                <p>
+                  <b>Campos requeridos</b>
+                </p>
+                <p>
+                  Este nuevo icono te indicará cuando <br></br> completes todos
+                  los campos requeridos
+                </p>
+              </>
+            }
+            children={
+              <ContainerIcon
+                className="fondo"
+                percentageRequired={percentRequired}
+              >
+                <span class="hola">local_police</span>
+              </ContainerIcon>
+            }
+            classNameTooltip={"container-tooltip"}
+            position={undefined}
+            addArrow={undefined}
+            transitionType={undefined}
+            followCursor={undefined}
+          ></Tooltip>
+        </>
+      )}
+      <Container className={`status-${progressBarType}`}>
+        <p>{percent}%</p>
+      </Container>
+    </>
   );
 };

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

@@ -68,3 +68,26 @@ export const Container = styled.div`
     color: ${GlobalColors.s4};
   }
 `;
+export const ContainerIcon = styled.div`
+  @font-face {
+    font-family: "Material Symbols Outlined";
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+      format("woff2");
+  }
+
+  .hola {
+    font-family: "Material Symbols Outlined";
+    font-size: 30px;
+    //line-height: 1;
+    margin-top: 10px;
+  }
+  .hola {
+    font-variation-settings: "FILL"
+        ${(props) => (props.percentageRequired < 100 ? 0 : 1)},
+      "wght" 400, "GRAD" 0, "opsz" 48;
+    color: ${(props) =>
+      props.percentageRequired < 100 ? "#d4d1d7" : "#e33aa9"};
+  }
+`;

package/src/components/atoms/Select/VersionSelect.js

@@ -13,11 +13,13 @@ export const VersionSelect = ({
       <select
         id={id}
         name={id}
-        value={`Version ${selectedVersions[id]}`}
+        value={selectedVersions[id]}
         onChange={onChange}
       >
         {versions.map((item, index) => (
-          <option key={`${id}-${index}`}>Version {item.version}</option>
+          <option key={`${id}-${index}`} value={item.version}>
+            Version {item.version}
+          </option>
         ))}
       </select>
     </VrsnSelect>

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

@@ -10,12 +10,17 @@ export const ProductNameHeader = ({
   percent,
   priority,
   date,
+  percentRequired,
 }) => {
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <Status statusType={statusType} />
-      <ProgressBar percent={percent} progressBarType={statusType} />
+      <ProgressBar
+        percent={percentRequired}
+        progressBarType={statusType}
+        percentRequired={percentRequired}
+      />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

package/src/components/organisms/CreateVersion/RenderChilds.js

@@ -21,27 +21,25 @@ export const Children = (
           <img src={createVersionImg} alt="create version icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={"Crea una nueva versión"}
+            text="Crea una nueva versión"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
-            }
+            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
           />
           <div className="buttons-container">
             <Button
-              label={"Versión desde cero"}
-              buttonType={"general-transparent-button"}
+              label="Versión desde cero"
+              buttonType="general-transparent-button"
               onClick={() => setStep("empty-version")}
             />
             <Button
-              label={"Versión personalizada"}
-              buttonType={"general-default-button"}
+              label="Versión personalizada"
+              buttonType="general-default-button"
               onClick={() => setStep("create-version")}
             />
           </div>
@@ -53,27 +51,25 @@ export const Children = (
           <img src={genericModalWarning} alt="warning icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={
-              "Si creas una versión desde cero perderas la información actual"
-            }
+            text="Si creas una versión desde cero perderas la información actual"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={"¿Deseas Continuar?"}
+            text="¿Deseas Continuar?"
           />
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion(true)}
             />
           </div>
@@ -84,18 +80,16 @@ export const Children = (
         <CreateVersion>
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Elige el contenido que deseas utilizar de versiones anteriores"
-            }
+            text="Elige el contenido que deseas utilizar de versiones anteriores"
           />
           <div className="version-selector">
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Ficha técnica"}
-                id={"datasheet"}
+                label="Ficha técnica"
+                id="datasheet"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -103,8 +97,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Descripción"}
-                id={"description"}
+                label="Descripción"
+                id="description"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -112,8 +106,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Imágenes"}
-                id={"image"}
+                label="Imágenes"
+                id="image"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -121,13 +115,13 @@ export const Children = (
           </div>
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion()}
             />
           </div>