contentoh-components-library 21.6.25 → 21.6.27

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

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import axios from "axios";
 
 import { readPayload, ApiError } from "./api";
+import { SingleSelect } from "../../molecules/SingleSelect";
 import { getProductImage, getRetailerPicture } from "../../../_utils/helper";
 
 import {
@@ -303,6 +304,19 @@ export const LinkVariantsModal = ({
   };
 
   const toggleChoice = (dimension, id) => {
+    // Marcar un elemento ES elegir cuáles, así que el radio se pone solo. Antes
+    // se podían marcar atributos con los dos radios en blanco: la pantalla decía
+    // una cosa y el estado era otra.
+    //
+    // Se hace así y no dejando "elegir cuáles" marcado de entrada porque eso
+    // daría las cuatro dimensiones por decididas desde el principio y habilitaría
+    // Ligar sin que nadie hubiera revisado nada.
+    setModes((current) =>
+      current[dimension] === null
+        ? { ...current, [dimension]: "some" }
+        : current
+    );
+
     setChosen((current) => {
       const lista = current[dimension];
       return {
@@ -360,11 +374,15 @@ export const LinkVariantsModal = ({
               categories: [],
             };
           }
+          // El tercer nivel no viene como {id, name} sino como
+          // {category_id, subcategory}: con el mapeo de los otros dos, la
+          // categoría salía en la lista pero sin texto. Mismo criterio que usa
+          // el alta de productos, incluido el separador legible.
           return {
             ...current,
             categories: lista.map((item) => ({
-              value: item.id,
-              label: item.name,
+              value: item.category_id,
+              label: (item.subcategory ?? "").replace("|", " > "),
             })),
           };
         });
@@ -385,6 +403,22 @@ export const LinkVariantsModal = ({
     }
   }, [step, filters.retailers.length, loadFilters]);
 
+  /*
+    Quita una cadena agregada a mano. Solo esas: las del padre se desmarcan con
+    su casilla, pero siguen existiendo y volverán a aparecer.
+  */
+  const removeExtraRetailer = (clave) => {
+    setExtraRetailers((current) =>
+      current.filter((item) => item.clave !== clave)
+    );
+    setChosen((current) => ({
+      ...current,
+      categoryRetailers: current.categoryRetailers.filter(
+        (item) => item !== clave
+      ),
+    }));
+  };
+
   const addRetailer = () => {
     const retailerId = Number(newRetailer);
     const categoryId = Number(newCategory);
@@ -555,7 +589,9 @@ export const LinkVariantsModal = ({
   const decidida = (dimension) => {
     if (modes[dimension] !== null) return true;
     if (dimension === "categoryRetailers") {
-      return offered.categoryRetailers.length === 0 && extraRetailers.length === 0;
+      return (
+        offered.categoryRetailers.length === 0 && extraRetailers.length === 0
+      );
     }
     // Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
     return dimension === "images"
@@ -874,63 +910,66 @@ export const LinkVariantsModal = ({
                           </span>
                         </span>
                       </label>
+
+                      {/* Solo las agregadas a mano se pueden quitar. Las del
+                          padre se desmarcan con su casilla, pero siguen ahí. */}
+                      {!item.delPadre && (
+                        <button
+                          type="button"
+                          className="quitar"
+                          title="Quitar esta cadena"
+                          aria-label={`Quitar ${item.retailerName}`}
+                          onClick={() => removeExtraRetailer(item.clave)}
+                        >
+                          ×
+                        </button>
+                      )}
                     </li>
                   ))}
                 </List>
 
                 <AddRetailer>
-                  <select
+                  <SingleSelect
+                    id="link-variants-retailer"
+                    placeholder="Agregar otra cadena…"
+                    options={filters.retailers}
                     value={newRetailer}
-                    onChange={(event) => {
-                      const valor = event.target.value;
-                      setNewRetailer(valor);
+                    loading={loadingFilters && !filters.retailers.length}
+                    onChange={(valor) => {
+                      setNewRetailer(valor ?? "");
                       setNewDepartment("");
                       setNewCategory("");
                       if (valor) loadFilters(valor, null);
                     }}
-                  >
-                    <option value="">Agregar otra cadena…</option>
-                    {filters.retailers.map((item) => (
-                      <option key={item.value} value={item.value}>
-                        {item.label}
-                      </option>
-                    ))}
-                  </select>
-                  <select
+                  />
+                  <SingleSelect
+                    id="link-variants-department"
+                    placeholder="Departamento…"
+                    options={filters.departments}
                     value={newDepartment}
-                    disabled={!newRetailer || !filters.departments.length}
-                    onChange={(event) => {
-                      const valor = event.target.value;
-                      setNewDepartment(valor);
+                    disabled={!newRetailer}
+                    loading={loadingFilters && !!newRetailer}
+                    onChange={(valor) => {
+                      setNewDepartment(valor ?? "");
                       setNewCategory("");
                       if (valor) loadFilters(newRetailer, valor);
                     }}
-                  >
-                    <option value="">Departamento…</option>
-                    {filters.departments.map((item) => (
-                      <option key={item.value} value={item.value}>
-                        {item.label}
-                      </option>
-                    ))}
-                  </select>
-                  <select
+                  />
+                  <SingleSelect
+                    id="link-variants-category"
+                    placeholder="Categoría…"
+                    options={filters.categories}
                     value={newCategory}
-                    disabled={!newDepartment || !filters.categories.length}
-                    onChange={(event) => setNewCategory(event.target.value)}
-                  >
-                    <option value="">Categoría…</option>
-                    {filters.categories.map((item) => (
-                      <option key={item.value} value={item.value}>
-                        {item.label}
-                      </option>
-                    ))}
-                  </select>
+                    disabled={!newDepartment}
+                    loading={loadingFilters && !!newDepartment}
+                    onChange={(valor) => setNewCategory(valor ?? "")}
+                  />
                   <button
                     type="button"
                     onClick={addRetailer}
                     disabled={!newRetailer || !newCategory || loadingFilters}
                   >
-                    {loadingFilters ? "…" : "Agregar"}
+                    Agregar
                   </button>
                 </AddRetailer>
               </Block>
@@ -1111,89 +1150,85 @@ export const LinkVariantsModal = ({
                 )}
               </Block>
 
-              <Block>
-                <h3>
-                  <span className="paso">4</span> Imágenes
-                </h3>
-                {imagenesUtiles.length ? (
-                  <>
-                    <Choices>
-                      <label>
+              {/* Sin imágenes utilizables el bloque no se dibuja: un paso que
+                  solo sirve para decir que no hay nada es ruido, y ademas ya no
+                  hay decision que tomar ahi. */}
+              {imagenesUtiles.length > 0 && (
+                <Block>
+                  <h3>
+                    <span className="paso">4</span> Imágenes
+                  </h3>
+                  <Choices>
+                    <label>
+                      <input
+                        type="radio"
+                        name={`images-${activeChild ?? "todos"}`}
+                        checked={modes.images === "all"}
+                        onChange={() =>
+                          chooseMode(
+                            "images",
+                            "all",
+                            imagenesUtiles.map((item) => item.id)
+                          )
+                        }
+                      />
+                      <span>
+                        Todas
+                        <span className="hint">
+                          {imagenesUtiles.length} imagen(es) en el padre.
+                        </span>
+                      </span>
+                    </label>
+                    <label>
+                      <input
+                        type="radio"
+                        name={`images-${activeChild ?? "todos"}`}
+                        checked={modes.images === "some"}
+                        onChange={() => chooseMode("images", "some", [])}
+                      />
+                      <span>
+                        Elegir cuáles
+                        <span className="hint">
+                          Útil cuando la variante cambia de color o de empaque.
+                        </span>
+                      </span>
+                    </label>
+                  </Choices>
+
+                  <ImageGrid>
+                    {imagenesUtiles.map((image) => (
+                      <label
+                        key={image.id}
+                        className={[
+                          chosen.images.includes(image.id) ? "picked" : "",
+                          modes.images === "all" ? "locked" : "",
+                        ]
+                          .filter(Boolean)
+                          .join(" ")}
+                      >
                         <input
-                          type="radio"
-                          name={`images-${activeChild ?? "todos"}`}
-                          checked={modes.images === "all"}
-                          onChange={() =>
-                            chooseMode(
-                              "images",
-                              "all",
-                              imagenesUtiles.map((item) => item.id)
+                          type="checkbox"
+                          disabled={modes.images === "all"}
+                          checked={chosen.images.includes(image.id)}
+                          onChange={() => toggleChoice("images", image.id)}
+                        />
+                        <img
+                          src={getProductImage(image.src)}
+                          alt=""
+                          onError={() =>
+                            setBrokenImages((current) =>
+                              current.includes(image.id)
+                                ? current
+                                : [...current, image.id]
                             )
                           }
                         />
-                        <span>
-                          Todas
-                          <span className="hint">
-                            {imagenesUtiles.length} imagen(es) en el padre.
-                          </span>
-                        </span>
+                        <span>{image.imageType || "Sin tipo de toma"}</span>
                       </label>
-                      <label>
-                        <input
-                          type="radio"
-                          name={`images-${activeChild ?? "todos"}`}
-                          checked={modes.images === "some"}
-                          onChange={() => chooseMode("images", "some", [])}
-                        />
-                        <span>
-                          Elegir cuáles
-                          <span className="hint">
-                            Útil cuando la variante cambia de color o de
-                            empaque.
-                          </span>
-                        </span>
-                      </label>
-                    </Choices>
-
-                    <ImageGrid>
-                      {imagenesUtiles.map((image) => (
-                        <label
-                          key={image.id}
-                          className={[
-                            chosen.images.includes(image.id) ? "picked" : "",
-                            modes.images === "all" ? "locked" : "",
-                          ]
-                            .filter(Boolean)
-                            .join(" ")}
-                        >
-                          <input
-                            type="checkbox"
-                            disabled={modes.images === "all"}
-                            checked={chosen.images.includes(image.id)}
-                            onChange={() => toggleChoice("images", image.id)}
-                          />
-                          <img
-                            src={getProductImage(image.src)}
-                            alt=""
-                            onError={() =>
-                              setBrokenImages((current) =>
-                                current.includes(image.id)
-                                  ? current
-                                  : [...current, image.id]
-                              )
-                            }
-                          />
-                          <span>{image.imageType || "Sin tipo de toma"}</span>
-                        </label>
-                      ))}
-                    </ImageGrid>
-                  </>
-                ) : (
-                  <Message>
-                    El producto padre no tiene imágenes que heredar.
-                  </Message>
-                )}
-              </Block>
+                    ))}
+                  </ImageGrid>
+                </Block>
+              )}
 
               {/* Es la diferencia entre link y propagate, y es la que sorprende:
                   aquí lo elegido se escribe encima aunque la variante lo hubiera
@@ -1212,7 +1247,10 @@ export const LinkVariantsModal = ({
               ? selectionLabel
               : todoDecidido
               ? "Todo revisado. Puedes ligar."
-              : !applyToAll && mode === "children"
+              : /* Contar productos solo tiene sentido cuando hay varios y cada
+                   uno lleva su propia selección. Con uno, lo útil es decir qué
+                   falta, no repetir que falta "1 producto". */
+              !applyToAll && mode === "children" && selected.length > 1
               ? `Faltan ${
                   selected.filter((id) => !decididoPara(id)).length
                 } producto(s) por revisar.`

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

@@ -192,6 +192,32 @@ export const List = styled.ul`
     flex-shrink: 0;
   }
 
+  li {
+    display: flex;
+    align-items: center;
+  }
+
+  li > label {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .quitar {
+    flex-shrink: 0;
+    margin-right: 10px;
+    border: none;
+    background: none;
+    padding: 2px 6px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: ${GlobalColors.gray};
+  }
+
+  .quitar:hover {
+    color: ${PINK};
+  }
+
   .count {
     margin-left: auto;
     font-size: 12px;
@@ -363,24 +389,12 @@ export const ImageGrid = styled.div`
 export const AddRetailer = styled.div`
   display: flex;
   flex-wrap: wrap;
+  align-items: flex-end;
   gap: 8px;
   margin-bottom: 16px;
 
-  select {
-    flex: 1 1 140px;
-    min-width: 0;
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid ${GlobalColors.s2};
-    border-radius: 6px;
-    font-family: ${FontFamily.Raleway};
-    font-size: 13px;
-    color: ${GlobalColors.deep_gray};
-    background-color: ${GlobalColors.white};
-  }
-
   button {
-    height: 32px;
+    height: 38px;
     padding: 0 14px;
     border: 1px solid ${PINK};
     border-radius: 6px;
@@ -389,11 +403,7 @@ export const AddRetailer = styled.div`
     font-size: 13px;
     color: ${PINK};
     cursor: pointer;
-  }
-
-  select:disabled {
-    opacity: 0.5;
-    cursor: default;
+    flex-shrink: 0;
   }
 
   button:disabled {

package/src/index.js

@@ -67,6 +67,7 @@ export * from "./components/molecules/TagAndInput/index";
 export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
 export * from "./components/molecules/RetailerSelector/index";
 export * from "./components/molecules/CustomSelect/index";
+export * from "./components/molecules/SingleSelect/index";
 export * from "./components/molecules/ButtonDownloadFile/index";
 export * from "./components/molecules/ImageTooltip/index";
 export * from "./components/molecules/SelectV2/index";