contentoh-components-library 21.5.99 → 21.6.1

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx

@@ -0,0 +1,575 @@
+import { createContext, useContext, useReducer } from "react";
+import PropTypes from "prop-types";
+import {
+  initialState,
+  productEditionReducer,
+  ACTIONS,
+} from "./provider-product-edition.reducer";
+import AWS from "aws-sdk";
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+
+import successIcon from "../../../../assets/images/genericModal/genericModalCheck.svg";
+import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
+import { getConceptByTab } from "../utils";
+
+const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+const REGION = "us-east-1";
+
+AWS.config.update({
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3,
+});
+
+const myBucket = new AWS.S3({
+  params: { Bucket: S3_BUCKET },
+  region: REGION,
+});
+
+// Create context
+const ProductEditionContext = createContext();
+
+// Provider component
+export const ProviderProductEditionProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(productEditionReducer, initialState);
+
+  const saveDescriptions = async (token) => {
+    if (state.updated_descriptions_inputs.length === 0) return;
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const dataObject = {
+      articleId: state.product?.id_article,
+      articleData: state.updated_descriptions_inputs,
+    };
+
+    // console.log({dataObject});
+
+    if (state.product?.id_order) {
+      dataObject.orderId = state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        dataObject,
+        {
+          params: {
+            description: true,
+            version: state.product.version,
+          },
+          headers: {
+            Authorization: token,
+          },
+        },
+      );
+
+      if (
+        res.data.statusCode === 200 &&
+        JSON.parse(res.data.body).message.toLowerCase() === "ok"
+      ) {
+        // Limpiar las descripciones actualizadas
+        dispatch({
+          type: "SET_UPDATED_DESCRIPTIONS_INPUTS",
+          payload: [],
+        });
+        dispatch({
+          type: "UPDATE_DESCRIPTIONS_INPUTS",
+          payload: state.updated_descriptions_inputs,
+        });
+
+        // Contar cuántos campos requeridos que antes estaban vacíos ahora tienen valor
+        const inputs = state.descriptions_inputs[0].inputs;
+        let filledRequiredCount = 0;
+
+        state.updated_descriptions_inputs.forEach((updatedInput) => {
+          const originalInput = inputs.find(
+            (input) => input.id === updatedInput.attributeId,
+          );
+          // Si es requerido, antes no tenía valor, y ahora sí tiene valor
+          if (
+            originalInput?.required &&
+            !originalInput.value &&
+            updatedInput.value &&
+            updatedInput.value.trim() !== ""
+          ) {
+            filledRequiredCount += 1;
+          }
+        });
+
+        dispatch({
+          type: "SET_MISSING_REQUIRED_FIELDS",
+          payload: {
+            ...state.missing_required_fields,
+            Descripción:
+              state.missing_required_fields["Descripción"] -
+              filledRequiredCount,
+          },
+        });
+
+        // Mostrar modal de éxito
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Descripciones guardadas con éxito",
+            image: successIcon,
+          },
+        });
+      }
+    } catch (error) {
+      console.log("Error saving descriptions:", error);
+      // Mostrar modal de error
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message:
+            "Hubo un error al guardar las descripciones. Por favor, intenta nuevamente.",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
+  const saveDatasheets = async (token) => {
+    if (state.updated_datasheets_inputs.length === 0) return;
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const dataObject = {
+      articleId: state.product?.id_article,
+      articleData: state.updated_datasheets_inputs,
+    };
+
+    if (state.product?.id_order) {
+      dataObject.orderId = state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        dataObject,
+        {
+          headers: {
+            Authorization: token,
+          },
+          params: {
+            datasheet: true,
+            version: state.product.version,
+          },
+        },
+      );
+
+      if (
+        res.data.statusCode === 200 &&
+        JSON.parse(res.data.body).message.toLowerCase() === "ok"
+      ) {
+        // Limpiar las fichas técnicas actualizadas
+        dispatch({
+          type: "SET_UPDATED_DATASHEETS_INPUTS",
+          payload: [],
+        });
+        dispatch({
+          type: "UPDATE_DATASHEETS_INPUTS",
+          payload: state.updated_datasheets_inputs,
+        });
+
+        // Contar cuántos campos requeridos que antes estaban vacíos ahora tienen valor
+        const datasheetInputs = state.datasheets_inputs[1];
+        const retailerId = state.active_retailer?.id_retailer;
+        let filledRequiredCount = 0;
+
+        state.updated_datasheets_inputs.forEach((updatedInput) => {
+          const key = `${updatedInput.attributeId}_${retailerId}`;
+          const originalInput = datasheetInputs[key];
+          // Si es requerido, antes no tenía valor, y ahora sí tiene valor
+          if (
+            originalInput?.required &&
+            !originalInput.value &&
+            updatedInput.value &&
+            String(updatedInput.value).trim() !== ""
+          ) {
+            filledRequiredCount += 1;
+          }
+        });
+
+        dispatch({
+          type: "SET_MISSING_REQUIRED_FIELDS",
+          payload: {
+            ...state.missing_required_fields,
+            "Ficha técnica":
+              state.missing_required_fields["Ficha técnica"] -
+              filledRequiredCount,
+          },
+        });
+
+        // Mostrar modal de éxito
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Ficha técnica guardada con éxito",
+            image: successIcon,
+          },
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      dispatch({
+        type: "SET_ERRORS",
+        payload: [...state.errors, error],
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
+  const updateImages = async (token) => {
+    if (state.updated_images_values.length === 0) return;
+    const updatedImages = state.updated_images_values;
+
+    const attrForImgs = state.images_values?.attrForImgs || {};
+    const generalAttrs = attrForImgs.general || [];
+    const retailerKey = Object.keys(attrForImgs).find(
+      (key) => key !== "general",
+    );
+    const retailerAttrs = retailerKey ? attrForImgs[retailerKey] : [];
+
+    const mergedAttrs = retailerAttrs.map((retailerAttr) => {
+      const generalAttr = generalAttrs.find((g) => g.id === retailerAttr.id);
+      if (generalAttr && generalAttr.value !== retailerAttr.value) {
+        return { ...retailerAttr, value: generalAttr.value };
+      }
+      return retailerAttr;
+    });
+
+    const data = {
+      articleId: state.product?.id_article,
+      attrReqImgs: mergedAttrs.map((e) => ({
+        attrId: e.id,
+        value: e.value ?? "",
+      })),
+      articleData: state.images_values.values.filter((e) => !e.id),
+      updateImages: state.images_values.values.filter((e) => e.id),
+    };
+
+    if (state.product?.orderId) data["orderId"] = state.product?.orderId;
+
+    const valid =
+      data?.articleData?.every((e) => e?.image_id) &&
+      data?.updateImages?.every((e) => e?.image_id);
+
+    // console.log({ data });
+
+    if (valid) {
+      dispatch({ type: "SET_SAVING", payload: true });
+
+      data.articleData = data.articleData.map((e) => ({
+        ...e,
+        uuid: uuidv4(),
+        isApproved: true,
+      }));
+
+      data.updateImages = data.updateImages.map((image) => ({
+        ...image,
+        isApproved: true,
+      }));
+
+      try {
+        const promiseArray = data.articleData.map((e) => {
+          const file = Buffer.from(
+            e.src.replace(/^data:image\/\w+;base64,/, ""),
+            "base64",
+          );
+          const params = {
+            ACL: "public-read",
+            Body: file,
+            Bucket: S3_BUCKET,
+            Key: `id-${data.articleId}/${state.product.version}/${e?.image_id}-${e?.uuid}.${e?.ext}`,
+          };
+          return myBucket.putObject(params).promise();
+        });
+
+        await Promise.all(promiseArray);
+
+        // Eliminar el buffer base64 antes de enviar al endpoint para evitar error 413
+        data.articleData = data.articleData.map(({ src, ...rest }) => rest);
+        data.updateImages = data.updateImages.map(({ src, ...rest }) => rest);
+
+        const res = await axios.put(
+          process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+          data,
+          {
+            params: {
+              image: true,
+              version: state.product.version,
+            },
+            headers: {
+              Authorization: token,
+            },
+          },
+        );
+
+        if (res.data.statusCode === 200) {
+          // Limpiar las imágenes actualizadas
+          dispatch({
+            type: "SET_UPDATED_IMAGES_VALUES",
+            payload: [],
+          });
+          // Mostrar modal de éxito
+          dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: true,
+              title: "",
+              message: "Imágenes guardadas con éxito",
+              image: successIcon,
+            },
+          });
+        }
+      } catch (error) {
+        console.log(error);
+        dispatch({
+          type: "SET_ERRORS",
+          payload: [...state.errors, error],
+        });
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "Error",
+            message: "Hubo un error al actualizar las imágenes",
+            image: errorIcon,
+          },
+        });
+      } finally {
+        dispatch({ type: "SET_SAVING", payload: false });
+      }
+    } else {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Campos incompletos o duplicados",
+          message:
+            "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma. Recuerda hay campos obligatorios y no podras avanzar si no estan completos.",
+          image: warningIcon,
+        },
+      });
+    }
+  };
+
+  const saveImageAttrs = async (token) => {
+    if (state.updated_attr_for_imgs.length === 0) return;
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const activeImage = state.images_values.values[state.current_image];
+
+    const attrForImgs = state.images_values?.attrForImgs?.general ?? [];
+
+    const data = {
+      articleId: state.product?.id_article,
+      attrReqImgs: attrForImgs.map((e) => ({
+        attrId: e.id,
+        value: e.value ?? "-",
+      })),
+      articleData: [],
+      updateImages: activeImage ? [activeImage] : [],
+    };
+
+    if (state.product?.orderId || state.product?.id_order) {
+      data.orderId = state.product?.orderId || state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        data,
+        {
+          params: {
+            image: true,
+            version: state.product.version,
+          },
+          headers: {
+            Authorization: token,
+          },
+        },
+      );
+
+      if (res.data.statusCode === 200) {
+        dispatch({
+          type: "SET_UPDATED_ATTR_FOR_IMGS",
+          payload: [],
+        });
+
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Atributos de imagen guardados con éxito",
+            image: successIcon,
+          },
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      dispatch({
+        type: "SET_ERRORS",
+        payload: [...state.errors, error],
+      });
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al guardar los atributos de imagen",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
+  const handleOnDownloadImages = () => {
+    const upc = state.product?.upc || state.product?.article?.upc;
+    state.selected_images.length > 0
+      ? state.selected_images.forEach((e) => {
+          if (e.id) {
+            saveAs(
+              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
+              `${upc}_${e.name}.${e.ext}`,
+            );
+          }
+        })
+      : state.images_values?.values?.forEach((e) => {
+          if (e.id) {
+            saveAs(
+              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
+              `${upc}_${e.name}.${e.ext}`,
+            );
+          }
+        });
+  };
+
+  const deleteImages = async (token) => {
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    // Filtrar las imágenes que ya existen en el backend (tienen id)
+    const imgsInBack = state.selected_images.filter((img) => img.id);
+
+    // Hacer el request al backend si hay imágenes que eliminar
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: state.product?.id_article,
+        deleteImages: imgsInBack,
+      };
+
+      try {
+        await axios.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
+          params: {
+            image: true,
+            version: state.product.version,
+          },
+          headers: {
+            Authorization: token,
+          },
+        });
+
+        // Mostrar modal de éxito
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Imágenes eliminadas con éxito",
+            image: successIcon,
+          },
+        });
+      } catch (err) {
+        console.log(err);
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "Error",
+            message: "Hubo un error al eliminar las imágenes",
+            image: errorIcon,
+          },
+        });
+        return;
+      } finally {
+        dispatch({ type: "SET_SAVING", payload: false });
+      }
+    }
+
+    // Actualizar el estado eliminando las imágenes seleccionadas
+    dispatch({
+      type: "DELETE_IMAGES",
+      payload: { selectedImages: state.selected_images },
+    });
+
+    dispatch({ type: "SET_SAVING", payload: false });
+  };
+
+  const createComment = async (body, token) => {
+    const concept = getConceptByTab(state.active_tab);
+    const data = {
+      articleId: state.product?.id_article,
+      orderId: state.product?.orderId || state.product?.id_order,
+      message: body,
+      concept: concept,
+      version: state.product.version,
+    };
+    try {
+      await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+        headers: {
+          Authorization: token,
+        },
+      });
+    } catch (error) {
+      console.log("Error creating comment:", error);
+    }
+  };
+
+  const value = {
+    state,
+    dispatch,
+    saveDatasheets,
+    saveDescriptions,
+    updateImages,
+    saveImageAttrs,
+    deleteImages,
+    handleOnDownloadImages,
+    createComment,
+  };
+  return (
+    <ProductEditionContext.Provider value={value}>
+      {children}
+    </ProductEditionContext.Provider>
+  );
+};
+
+ProviderProductEditionProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+// Custom hook to use the context
+export const useProviderProductEdition = () => {
+  const context = useContext(ProductEditionContext);
+
+  if (!context) {
+    throw new Error(
+      "useProviderProductEdition must be used within a ProviderProductEditionProvider",
+    );
+  }
+
+  return context;
+};

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js

@@ -0,0 +1,62 @@
+import {
+  SYSTEM_ACTIONS,
+  systemInitialState,
+  systemReducer,
+} from "./reducers/system";
+import {
+  PRODUCT_ACTIONS,
+  productInitialState,
+  productReducer,
+} from "./reducers/product";
+import {
+  INPUTS_ACTIONS,
+  inputsInitialState,
+  inputsReducer,
+} from "./reducers/inputs";
+import {
+  ACTIVE_STATE_ACTIONS,
+  activeStateInitialState,
+  activeStateReducer,
+} from "./reducers/active-state";
+
+// Initial state
+export const initialState = {
+  ...systemInitialState,
+  ...productInitialState,
+  ...inputsInitialState,
+  ...activeStateInitialState,
+};
+
+// Action types
+export const ACTIONS = {
+  ...SYSTEM_ACTIONS,
+  ...PRODUCT_ACTIONS,
+  ...INPUTS_ACTIONS,
+  ...ACTIVE_STATE_ACTIONS,
+};
+
+// Reducer function
+export const productEditionReducer = (state, action) => {
+  // Delegar las acciones a sus respectivos reducers
+  const systemResult = systemReducer(state, action, initialState);
+  if (systemResult !== null) {
+    return systemResult;
+  }
+
+  const productResult = productReducer(state, action);
+  if (productResult !== null) {
+    return productResult;
+  }
+
+  const inputsResult = inputsReducer(state, action);
+  if (inputsResult !== null) {
+    return inputsResult;
+  }
+
+  const activeStateResult = activeStateReducer(state, action);
+  if (activeStateResult !== null) {
+    return activeStateResult;
+  }
+
+  return state;
+};