contentoh-components-library 21.5.94 → 21.5.95

package/src/components/pages/RetailerProductEdition/context/reducers/active-state.js

@@ -0,0 +1,344 @@
+export const activeStateInitialState = {
+  active_retailer: null,
+  active_percentage: null,
+  active_tab: "Descripción",
+  comments: {},
+  comment: null,
+  collaborator_assignations: {},
+  selected_images: [],
+  all_image_checked: false,
+  images_values: null,
+  datasheets_inputs: null,
+  descriptions_inputs: null,
+  current_image: 0,
+  current_percentage: 0,
+  missing_required_fields: {
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0,
+  },
+};
+
+export const ACTIVE_STATE_ACTIONS = {
+  SET_ACTIVE_RETAILER: "SET_ACTIVE_RETAILER",
+  SET_ACTIVE_PERCENTAGES: "SET_ACTIVE_PERCENTAGES",
+  SET_ACTIVE_TAB: "SET_ACTIVE_TAB",
+  SET_COMMENTS: "SET_COMMENTS",
+  SET_COMMENT: "SET_COMMENT",
+  SET_COLLABORATOR_ASSIGNATIONS: "SET_COLLABORATOR_ASSIGNATIONS",
+  SET_CURRENT_IMAGE: "SET_CURRENT_IMAGE",
+  SET_SELECTED_IMAGE: "SET_SELECTED_IMAGE",
+  SET_DATASHEETS_INPUTS: "SET_DATASHEETS_INPUTS",
+  SET_DESCRIPTIONS_INPUTS: "SET_DESCRIPTIONS_INPUTS",
+  SET_IMAGES_VALUES: "SET_IMAGES_VALUES",
+  ADD_IMAGE_VALUE: "ADD_IMAGE_VALUE",
+  UPDATE_IMAGE_VALUE: "UPDATE_IMAGE_VALUE",
+  DELETE_IMAGES: "DELETE_IMAGES",
+  TOGGLE_CHECK_ALL_IMAGES: "TOGGLE_CHECK_ALL_IMAGES",
+  TOGGLE_CHECKBOX_IMAGE: "TOGGLE_CHECKBOX_IMAGE",
+  SET_MISSING_REQUIRED_FIELDS: "SET_MISSING_REQUIRED_FIELDS",
+  CHANGE_ATTR_VALUE: "CHANGE_ATTR_VALUE",
+};
+
+export const activeStateReducer = (state, action) => {
+  switch (action.type) {
+    case ACTIVE_STATE_ACTIONS.SET_ACTIVE_RETAILER: {
+      return {
+        ...state,
+        active_retailer: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_ACTIVE_PERCENTAGES: {
+      return {
+        ...state,
+        active_percentage: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_ACTIVE_TAB: {
+      return {
+        ...state,
+        active_tab: action.payload,
+        comment: state.comments[action.payload] || null,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_COMMENTS: {
+      return {
+        ...state,
+        comments: action.payload,
+        comment: action.payload[state.active_tab] || null,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_COMMENT: {
+      return {
+        ...state,
+        comment: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_COLLABORATOR_ASSIGNATIONS: {
+      return {
+        ...state,
+        collaborator_assignations: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_CURRENT_IMAGE: {
+      return {
+        ...state,
+        current_image: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_SELECTED_IMAGE: {
+      return {
+        ...state,
+        selected_images: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_DATASHEETS_INPUTS: {
+      return {
+        ...state,
+        datasheets_inputs: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_DESCRIPTIONS_INPUTS: {
+      return {
+        ...state,
+        descriptions_inputs: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_IMAGES_VALUES: {
+      return {
+        ...state,
+        images_values: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.ADD_IMAGE_VALUE: {
+      return {
+        ...state,
+        images_values: {
+          ...state.images_values,
+          values: [...state.images_values.values, action.payload],
+        },
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.UPDATE_IMAGE_VALUE: {
+      const { index, attribute, value } = action.payload;
+
+      // Paso 1. Crear una copia del array de valores de imágenes
+      const updatedValues = [...state.images_values.values];
+
+      // Paso 2. Buscar la imagen por su index
+      const imageToUpdate = updatedValues[index];
+
+      // Paso 3. Buscar si ya existe dentro de updated_images_values
+      const existingUpdatedIndex = state.updated_images_values.findIndex(
+        (img) => img.id === imageToUpdate.id,
+      );
+
+      // Paso 4. Actualizar el valor en images_values
+      const newImageValues = updatedValues.map((img, i) =>
+        i === index
+          ? {
+              ...img,
+              [attribute]: value,
+              ...(attribute === "image_id" && { imageID: value }),
+            }
+          : img,
+      );
+
+      // Paso 5. Actualizar updated_images_values
+      let newUpdatedImagesValues;
+      if (existingUpdatedIndex === -1) {
+        const {
+          status,
+          image_shot_type,
+          onb_comentarios,
+          onb_estatus,
+          scene_type,
+          ...rest
+        } = imageToUpdate;
+
+        // Si no existe, agregarlo a updated_images_values con el valor original
+        newUpdatedImagesValues = [
+          ...state.updated_images_values,
+          {
+            ...rest,
+            originalValue: imageToUpdate[attribute],
+            newValue: value,
+            [attribute]: value,
+          },
+        ];
+      } else {
+        // Si existe, actualizar su newValue
+        newUpdatedImagesValues = state.updated_images_values.map((img, i) =>
+          i === existingUpdatedIndex ? { ...img, newValue: value } : img,
+        );
+
+        // Verificar si el nuevo valor es igual al valor original
+        // Normalizar valores booleanos (0/1 a true/false) para comparación correcta
+        const originalValue =
+          newUpdatedImagesValues[existingUpdatedIndex].originalValue;
+        const normalizedOriginal =
+          typeof originalValue === "number" &&
+          (originalValue === 0 || originalValue === 1)
+            ? Boolean(originalValue)
+            : originalValue;
+        const normalizedNew =
+          typeof value === "number" && (value === 0 || value === 1)
+            ? Boolean(value)
+            : value;
+
+        const isOriginalValue = normalizedOriginal === normalizedNew;
+
+        // Si el nuevo valor es igual al original, eliminar la imagen de updated_images_values
+        if (isOriginalValue) {
+          newUpdatedImagesValues = state.updated_images_values.filter(
+            (_, i) => i !== existingUpdatedIndex,
+          );
+        }
+      }
+
+      return {
+        ...state,
+        images_values: {
+          ...state.images_values,
+          values: newImageValues,
+        },
+        updated_images_values: newUpdatedImagesValues,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.DELETE_IMAGES: {
+      const { selectedImages } = action.payload;
+
+      // Filtrar las imágenes que no están seleccionadas
+      const remainingImages = state.images_values.values.filter((image) => {
+        // Comparar por image_id o id dependiendo de cuál exista
+        const imageIdentifier = image.image_id || image.id;
+        return !selectedImages.some((selected) => {
+          const selectedIdentifier = selected.image_id || selected.id;
+          return imageIdentifier === selectedIdentifier;
+        });
+      });
+
+      // También actualizar services.images.values
+      const remainingServicesImages = state.services.images.values.filter(
+        (image) => {
+          const imageIdentifier = image.image_id || image.id;
+          return !selectedImages.some((selected) => {
+            const selectedIdentifier = selected.image_id || selected.id;
+            return imageIdentifier === selectedIdentifier;
+          });
+        },
+      );
+
+      return {
+        ...state,
+        images_values: {
+          ...state.images_values,
+          values: remainingImages,
+        },
+        services: {
+          ...state.services,
+          images: {
+            ...state.services.images,
+            values: remainingServicesImages,
+          },
+        },
+        selected_images: [],
+        all_image_checked: false,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.TOGGLE_CHECK_ALL_IMAGES: {
+      const isChecked = action.payload;
+
+      return {
+        ...state,
+        selected_images: isChecked ? [...state.images_values.values] : [],
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.TOGGLE_CHECKBOX_IMAGE: {
+      return {
+        ...state,
+        all_image_checked: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.SET_MISSING_REQUIRED_FIELDS: {
+      return {
+        ...state,
+        missing_required_fields: action.payload,
+      };
+    }
+
+    case ACTIVE_STATE_ACTIONS.CHANGE_ATTR_VALUE: {
+      const { id, value } = action.payload;
+      const attrForImgs = state.images_values?.attrForImgs;
+
+      if (!attrForImgs?.general) return state;
+
+      const attrIndex = attrForImgs.general.findIndex((f) => f.id === id);
+      if (attrIndex === -1) return state;
+
+      const originalAttr = attrForImgs.general[attrIndex];
+
+      const updatedGeneral = attrForImgs.general.map((attr, i) =>
+        i === attrIndex ? { ...attr, value } : attr,
+      );
+
+      // Tracking de cambios en updated_attr_for_imgs
+      const existingIndex = state.updated_attr_for_imgs.findIndex(
+        (attr) => attr.attrId === id,
+      );
+
+      let newUpdatedAttrForImgs;
+      if (existingIndex === -1) {
+        // Agregar nuevo cambio con valor original
+        newUpdatedAttrForImgs = [
+          ...state.updated_attr_for_imgs,
+          { attrId: id, value, originalValue: originalAttr.value },
+        ];
+      } else {
+        // Actualizar valor existente
+        const updated = state.updated_attr_for_imgs.map((attr, i) =>
+          i === existingIndex ? { ...attr, value } : attr,
+        );
+        // Si el valor vuelve al original, eliminarlo del tracking
+        const originalValue = updated[existingIndex].originalValue;
+        if (String(value) === String(originalValue)) {
+          newUpdatedAttrForImgs = updated.filter((_, i) => i !== existingIndex);
+        } else {
+          newUpdatedAttrForImgs = updated;
+        }
+      }
+
+      return {
+        ...state,
+        images_values: {
+          ...state.images_values,
+          attrForImgs: {
+            ...attrForImgs,
+            general: updatedGeneral,
+          },
+        },
+        updated_attr_for_imgs: newUpdatedAttrForImgs,
+      };
+    }
+
+    default: {
+      return null;
+    }
+  }
+};

package/src/components/pages/RetailerProductEdition/context/reducers/inputs.js

@@ -0,0 +1,155 @@
+export const inputsInitialState = {
+  updated_datasheets_inputs: [],
+  updated_descriptions_inputs: [],
+  updated_images_values: [],
+  updated_attr_for_imgs: [],
+};
+
+export const INPUTS_ACTIONS = {
+  SET_UPDATED_DATASHEETS_INPUTS: "SET_UPDATED_DATASHEETS_INPUTS",
+  SET_UPDATED_DESCRIPTIONS_INPUTS: "SET_UPDATED_DESCRIPTIONS_INPUTS",
+  SET_UPDATED_IMAGES_VALUES: "SET_UPDATED_IMAGES_VALUES",
+  SET_UPDATED_ATTR_FOR_IMGS: "SET_UPDATED_ATTR_FOR_IMGS",
+  UPDATE_DESCRIPTIONS_INPUTS: "UPDATE_DESCRIPTIONS_INPUTS",
+  UPDATE_DATASHEETS_INPUTS: "UPDATE_DATASHEETS_INPUTS",
+};
+
+export const inputsReducer = (state, action) => {
+  switch (action.type) {
+    case INPUTS_ACTIONS.SET_UPDATED_DESCRIPTIONS_INPUTS: {
+      return {
+        ...state,
+        updated_descriptions_inputs: action.payload,
+      };
+    }
+
+    case INPUTS_ACTIONS.SET_UPDATED_DATASHEETS_INPUTS: {
+      return {
+        ...state,
+        updated_datasheets_inputs: action.payload,
+      };
+    }
+
+    case INPUTS_ACTIONS.SET_UPDATED_IMAGES_VALUES: {
+      return {
+        ...state,
+        updated_images_values: action.payload,
+      };
+    }
+
+    case INPUTS_ACTIONS.SET_UPDATED_ATTR_FOR_IMGS: {
+      return {
+        ...state,
+        updated_attr_for_imgs: action.payload,
+      };
+    }
+
+    case INPUTS_ACTIONS.UPDATE_DESCRIPTIONS_INPUTS: {
+      // Validar que la posicion [0] de descriptions_inputs corresponda al retailer actual
+      const retailerId = state.active_retailer.id_retailer;
+      if (state.descriptions_inputs[0]?.id !== retailerId) {
+        console.warn(
+          `Warning: The first element's retailer ID (${state.descriptions_inputs[0]?.id_retailer}) does not match the active retailer ID (${retailerId}). Update aborted.`
+        );
+        return state;
+      }
+
+      // action.payload es un array de los inputs que se van a actualizar
+      // debemos de recorrer descriptions_inputs y actualizar solo el value de los que vienen en el payload
+      const updatedDescriptionsInputs = state.descriptions_inputs[0].inputs.map(
+        (input) => {
+          const updatedInput = action.payload.find(
+            (updated) => updated.attributeId === input.id
+          );
+          return updatedInput ? { ...input, value: updatedInput.value } : input;
+        }
+      );
+
+      // Tambien actualizarlo dentro de services.descriptions
+      // buscar el index del retailer activo en services
+      const retailerIndex = state.services.descriptions.findIndex(
+        (retailer) => retailer.id === retailerId
+      );
+
+      return {
+        ...state,
+        descriptions_inputs: [
+          {
+            ...state.descriptions_inputs[0],
+            inputs: updatedDescriptionsInputs,
+          },
+        ],
+        services: {
+          ...state.services,
+          descriptions: state.services.descriptions.map((retailer, index) =>
+            index === retailerIndex
+              ? {
+                  ...retailer,
+                  inputs: updatedDescriptionsInputs,
+                }
+              : retailer
+          ),
+        },
+      };
+    }
+
+    case INPUTS_ACTIONS.UPDATE_DATASHEETS_INPUTS: {
+      const retailerId = state.active_retailer.id_retailer;
+
+      /* ---------- 1. Actualizar services.datasheets.inputs ---------- */
+      const updatedServiceInputs = {
+        ...state.services.datasheets.inputs,
+      };
+
+      action.payload.forEach(({ attributeId, value }) => {
+        const key = `${attributeId}_${retailerId}`;
+
+        if (!updatedServiceInputs[key]) return;
+
+        updatedServiceInputs[key] = {
+          ...updatedServiceInputs[key],
+          value,
+        };
+      });
+
+      /* ---------- 2. Actualizar datasheets_inputs ---------- */
+      const updatedDatasheetsInputs = state.datasheets_inputs.map(
+        (group, index) => {
+          if (index !== 1) return group;
+
+          return {
+            ...group,
+            ...action.payload.reduce((acc, { attributeId, value }) => {
+              const key = `${attributeId}_${retailerId}`;
+
+              if (!group[key]) return acc;
+
+              acc[key] = {
+                ...group[key],
+                value,
+              };
+
+              return acc;
+            }, {}),
+          };
+        }
+      );
+
+      return {
+        ...state,
+        datasheets_inputs: updatedDatasheetsInputs,
+        services: {
+          ...state.services,
+          datasheets: {
+            ...state.services.datasheets,
+            inputs: updatedServiceInputs,
+          },
+        },
+      };
+    }
+
+    default: {
+      return null;
+    }
+  }
+};

package/src/components/pages/RetailerProductEdition/context/reducers/product.js

@@ -0,0 +1,114 @@
+import { STATUS_DICTIONARY } from "../../../../../global-files/statusDictionary";
+
+export const productInitialState = {
+  product: null,
+  services: null,
+  services_data: null,
+};
+
+export const PRODUCT_ACTIONS = {
+  SET_PRODUCT: "SET_PRODUCT",
+  SET_SERVICES: "SET_SERVICES",
+  SET_SERVICES_DATA: "SET_SERVICES_DATA",
+  SET_PRODUCT_VERSION: "SET_PRODUCT_VERSION",
+  SET_PERCENTAGES: "SET_PERCENTAGES",
+  SET_RETAILER_STATUS: "SET_RETAILER_STATUS",
+};
+
+export const productReducer = (state, action) => {
+  switch (action.type) {
+    case PRODUCT_ACTIONS.SET_PRODUCT: {
+      return {
+        ...state,
+        product: action.payload,
+      };
+    }
+
+    case PRODUCT_ACTIONS.SET_SERVICES: {
+      return {
+        ...state,
+        services: action.payload,
+      };
+    }
+
+    case PRODUCT_ACTIONS.SET_RETAILER_STATUS: {
+      return {
+        ...state,
+        product: {
+          ...state.product,
+          status: getMinorStatus(
+            action.payload.map((status) => status?.status),
+          ),
+          description_status:
+            action.payload.find(
+              (status) =>
+                status?.service === "description" &&
+                status?.retailer_id === state?.active_retailer?.id_retailer,
+            )?.status || "NS",
+          datasheet_status:
+            action.payload.find(
+              (status) =>
+                status?.service === "datasheet" &&
+                status?.retailer_id === state?.active_retailer?.id_retailer,
+            )?.status || "NS",
+          images_status:
+            action.payload.find(
+              (status) =>
+                status?.service === "images" &&
+                status?.retailer_id === state?.active_retailer?.id_retailer,
+            )?.status || "NS",
+          statusByRetailer: action.payload,
+        },
+      };
+    }
+
+    case PRODUCT_ACTIONS.SET_SERVICES_DATA: {
+      return {
+        ...state,
+        services_data: action.payload,
+      };
+    }
+
+    case PRODUCT_ACTIONS.SET_PRODUCT_VERSION: {
+      return {
+        ...state,
+        product: {
+          ...state.product,
+          version: action.payload,
+        },
+      };
+    }
+
+    case PRODUCT_ACTIONS.SET_PERCENTAGES: {
+      return {
+        ...state,
+        product: { ...state.product, percentages: action.payload },
+      };
+    }
+
+    default: {
+      return null;
+    }
+  }
+};
+
+function getMinorStatus(servicesStatus = []) {
+  if (!servicesStatus || servicesStatus.length === 0)
+    return STATUS_DICTIONARY.NS.name;
+
+  console.log({ servicesStatus });
+
+  const winner = servicesStatus.reduce((minor, current) => {
+    const currentObj =
+      typeof current === "string" ? STATUS_DICTIONARY[current] : current;
+    const minorObj =
+      typeof minor === "string" ? STATUS_DICTIONARY[minor] : minor;
+
+    if (!currentObj || typeof currentObj.weight === "undefined") return minor;
+    if (!minorObj || typeof minorObj.weight === "undefined") return current;
+
+    return currentObj.weight < minorObj.weight ? currentObj : minorObj;
+  }, servicesStatus[0] || STATUS_DICTIONARY.NS);
+
+  return winner?.status || STATUS_DICTIONARY.NS?.status;
+}

package/src/components/pages/RetailerProductEdition/context/reducers/system.js

@@ -0,0 +1,60 @@
+export const systemInitialState = {
+  loading: false,
+  saving: false,
+  errors: [],
+  modal: {
+    show: false,
+    title: "",
+    message: "",
+    image: null,
+    buttons: [],
+  },
+};
+
+export const SYSTEM_ACTIONS = {
+  SET_ERRORS: "SET_ERRORS",
+  SET_LOADING: "SET_LOADING",
+  SET_SAVING: "SET_SAVING",
+  SET_MODAL: "SET_MODAL",
+  RESET: "RESET",
+};
+
+export const systemReducer = (state, action, initialState) => {
+  switch (action.type) {
+    case SYSTEM_ACTIONS.SET_ERRORS: {
+      return {
+        ...state,
+        errors: action.payload,
+      };
+    }
+
+    case SYSTEM_ACTIONS.SET_LOADING: {
+      return {
+        ...state,
+        loading: action.payload,
+      };
+    }
+
+    case SYSTEM_ACTIONS.SET_SAVING: {
+      return {
+        ...state,
+        saving: action.payload,
+      };
+    }
+
+    case SYSTEM_ACTIONS.SET_MODAL: {
+      return {
+        ...state,
+        modal: action.payload,
+      };
+    }
+
+    case SYSTEM_ACTIONS.RESET: {
+      return initialState;
+    }
+
+    default: {
+      return null;
+    }
+  }
+};