contentoh-components-library 21.4.32 → 21.4.34

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

@@ -24,20 +24,15 @@ import descriptionSent from "../../../assets/images/modalsSVGs/descriptionSent.s
 import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 import { Button } from "../../atoms/GeneralButton";
+import { Commentary } from "../../atoms/Commentary";
 import { GenericModal } from "../../atoms/GenericModal";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { Loading } from "../../atoms/Loading";
 import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
+import errorModal from "../../../assets/images/genericModal/errorModal.svg";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
-import {
-  getAuditVersion,
-  getInputsData,
-  createMessage,
-  sendMessage,
-} from "./utils";
-import { Modal } from "../../organisms/Modal";
-import { ButtonV2 } from "../../atoms/ButtonV2";
+import { getAuditVersion, getInputsData } from "./utils";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -137,7 +132,6 @@ export const RetailerProductEdition = ({
   const [datasheets, setDatasheets] = useState([]);
   const [images, setImages] = useReducer(reducerImages, {});
   const [showModal, setShowModal] = useState(false);
-  const [showRejectModal, setShowRejectModal] = useState(false);
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     noKeyboard: true,
@@ -224,11 +218,6 @@ export const RetailerProductEdition = ({
   const [auditDescriptions, setAuditDescriptions] = useState([]);
   const [auditImages, setAuditImages] = useState([]);
   const [compare, setCompare] = useState(false);
-  const [valRejAll, setValRejAll] = useState(false);
-
-  const [desc, setDesc] = useState([]);
-  const [fich, setFich] = useState([]);
-  const [imag, setImag] = useState([]);
 
   useEffect(async () => {
     const { id_article } = product?.article || {};
@@ -572,7 +561,6 @@ export const RetailerProductEdition = ({
       active: images?.values?.some((value) => value?.image_id === e?.id),
     }));
     setSocketType(imageInputs);
-    console.log(images);
   }, [images]);
 
   const updateImages = useCallback(async () => {
@@ -871,30 +859,11 @@ export const RetailerProductEdition = ({
         );
       }
       if (res.data.statusCode === 200) {
-        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
-          res.data.body
-        );
-        const messageToChat = createMessage(
-          product.retailers,
-          activeRetailer.id,
-          evalStatus,
-          newStatus,
-          activeTab
-        );
-
-        const data = {
-          paramsBody: {
-            id: product.article.id_article,
-            version: version,
-            items: [{ type: "status", value: messageToChat }],
-            retailerId: activeRetailer.id,
-            status: product.status,
-          },
-          paramsHeader: { Authorization: token },
-        };
-        await sendMessage(data);
-        if (newOrderStatus) productTemp.status = newArticleStatus[articleId];
-        productTemp[`${concept}_status`] = newStatus;
+        const response = JSON.parse(res.data.body)?.successfulData;
+        const statusObject =
+          response[`${orderId}-${articleId}-${activeRetailer.id}`];
+        productTemp.status = statusObject["generalStatus"];
+        productTemp[`${concept}_status`] = statusObject[`${concept}Status`];
         await loadData();
         if (message) setMessage(message);
         sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
@@ -935,19 +904,35 @@ export const RetailerProductEdition = ({
     return product?.article[`id_auditor`] === user.id_user;
   };
 
-  const createComment = async (messages = [], retailerId) => {
+  const createComment = async (e, body, tab) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
     const data = {
-      paramsBody: {
-        id: product.article.id_article,
-        version: version,
-        items: messages,
-        retailerId: retailerId,
-        status: product.status,
-      },
-      paramsHeader: { Authorization: token },
+      articleId: product?.article?.id_article,
+      orderId: product?.orderId,
+      message: body?.replace(/<.*?\/?>/gm, ""),
+      concept: concept,
+      version: version,
     };
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    await getComments(tab);
     setMessage("");
-    return sendMessage(data);
+    setComponentsArray([]);
   };
 
   const getRequired = (services) => {
@@ -1199,7 +1184,6 @@ export const RetailerProductEdition = ({
   };
 
   useEffect(() => {
-    console.log(servicesData, "servicesData");
     let status = getRetailerStatus(servicesData, activeTab);
     setRetailerStatus(status);
   }, [activeTab, servicesData, activeRetailer]);
@@ -1230,8 +1214,8 @@ export const RetailerProductEdition = ({
           break;
       }
 
-      const messages = [];
-
+      const isAproved = result === "A";
+      const retailersIds = [];
       servicesData?.forEach((ret) => {
         if (!retailersIds.includes(ret.id_retailer))
           retailersIds.push(ret.id_retailer);
@@ -1256,19 +1240,19 @@ export const RetailerProductEdition = ({
           })
         );
       });
+
       await Promise.all(evaluationArray);
 
       const productTemp = product;
       productTemp.status = `${result}A`;
       productTemp.datasheet_status =
-        productTemp.datasheet_status === "NS" ? "NS" : `${result}A`;
+        productTemp.datasheet_status === "NA" ? "NA" : `${result}A`;
       productTemp.description_status =
-        productTemp.description_status === "NS" ? "NS" : `${result}A`;
+        productTemp.description_status === "NA" ? "NA" : `${result}A`;
       productTemp.images_status =
-        productTemp.images_status === "NS" ? "NS" : `${result}A`;
+        productTemp.images_status === "NA" ? "NA" : `${result}A`;
       sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
       setProduct(productTemp);
-      const messagesResponse = await Promise.all(messages);
 
       await loadData();
     } catch (error) {
@@ -1284,10 +1268,8 @@ export const RetailerProductEdition = ({
         setCompare={setCompare}
         isAuditor={[1, 6].includes(user.id_role)}
         withChat={location?.state?.withChat}
-        chatType={location?.state?.chatType}
-        productSelected={product}
+        productSelected={productSelected}
         token={token}
-        activeRetailer={activeRetailer}
       />
       <div className="data-container">
         <div className="image-data-panel">
@@ -1327,7 +1309,36 @@ export const RetailerProductEdition = ({
               sendToFacilitator("A");
             }}
             reject={() => {
-              setShowRejectModal(true);
+              sendToFacilitator("R");
+              setMessage("Rechazado");
+              setComponentsArray([
+                <img src={errorModal} />,
+                <ScreenHeader
+                  text={"Agrega tu comentarios para enviar el rechazo"}
+                  headerType={"input-name-header"}
+                  color={"white"}
+                />,
+                <TagAndInput
+                  label={"Caja de Comentario"}
+                  inputType={"textarea"}
+                  inputId={"modal-commentary-box"}
+                  index={0}
+                  color={"white"}
+                />,
+                <Button
+                  buttonType={"general-default-button"}
+                  label={"Enviar comentario"}
+                  onClick={(e) =>
+                    createComment(
+                      e,
+                      document.querySelector(
+                        "#modal-commentary-box .ql-container .ql-editor > p"
+                      ).innerHTML,
+                      activeTab
+                    )
+                  }
+                />,
+              ]);
             }}
             showApproveRejectAll={
               approveRejectAllButtons() && (auditorAssigned() || userAssigned())
@@ -1337,8 +1348,36 @@ export const RetailerProductEdition = ({
             }
             approveAll={() => validateAll("A")}
             rejectAll={() => {
-              setShowRejectModal(true);
-              setValRejAll(true);
+              validateAll("R");
+              setMessage("Rechazado");
+              setComponentsArray([
+                <img src={errorModal} />,
+                <ScreenHeader
+                  text={"Agrega tu comentarios para enviar el rechazo"}
+                  headerType={"input-name-header"}
+                  color={"white"}
+                />,
+                <TagAndInput
+                  label={"Caja de Comentario"}
+                  inputType={"textarea"}
+                  inputId={"modal-commentary-box"}
+                  index={0}
+                  color={"white"}
+                />,
+                <Button
+                  buttonType={"general-default-button"}
+                  label={"Enviar comentario"}
+                  onClick={(e) =>
+                    createComment(
+                      e,
+                      document.querySelector(
+                        "#modal-commentary-box .ql-container .ql-editor > p"
+                      ).innerHTML,
+                      activeTab
+                    )
+                  }
+                />,
+              ]);
             }}
           />
           <FullTabsMenu
@@ -1354,12 +1393,6 @@ export const RetailerProductEdition = ({
             isRetailer={isRetailer}
             showSaveButton={auditorAssigned() || userAssigned()}
             version={version}
-            desc={desc}
-            setDesc={setDesc}
-            fich={fich}
-            setFich={setFich}
-            imag={imag}
-            setImag={setImag}
             updatedDescriptions={updatedDescriptions}
             setUpdatedDescriptions={setUpdatedDescriptions}
             updatedDatasheets={updatedDatasheets}
@@ -1474,6 +1507,47 @@ export const RetailerProductEdition = ({
           {(userAssigned(activeTab) || auditorAssigned()) &&
             product[`${getConcept(activeTab)}_status`] !== "NS" && (
               <div className="commentary-box">
+                {!comment ? (
+                  <div className="commentary">
+                    <TagAndInput
+                      label={"Caja de Comentario"}
+                      inputType={"textarea"}
+                      inputCols={80}
+                      inputRows={4}
+                      inputId={"commentary-box"}
+                      index={0}
+                    />
+                    <div className="buttons-box">
+                      <Button
+                        buttonType={"general-transparent-button"}
+                        label={"Enviar comentario"}
+                        onClick={(e) =>
+                          createComment(
+                            e,
+                            document.querySelector(
+                              "#commentary-box .ql-container .ql-editor > p"
+                            ).innerHTML,
+                            activeTab
+                          )
+                        }
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="feedback-box">
+                    <Commentary
+                      comment={comment?.message?.replace(/<.*?\/?>/gm, "")}
+                      reviewed={crossComment}
+                    />
+                    <Button
+                      buttonType={"circular-button accept-button"}
+                      onClick={async () => {
+                        setCrossComment(true);
+                        commentRevised();
+                      }}
+                    />
+                  </div>
+                )}
                 {[7, 8].includes(user.id_role) && (
                   <Button
                     buttonType={
@@ -1531,49 +1605,6 @@ export const RetailerProductEdition = ({
           jwt={token}
         />
       )}
-      {showRejectModal && (
-        <Modal
-          title={`Agregar mensaje de rechazo para ${activeTab?.toLowerCase()}`}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async () => {
-                const body = document.querySelector(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                ).innerHTML;
-                const messages = [
-                  { type: "message", value: body?.replace(/<.*?\/?>/gm, "") },
-                ];
-                await createComment(messages, activeRetailer.id);
-                valRejAll ? validateAll("R") : sendToFacilitator("R");
-                setMessage("Rechazado");
-                setShowRejectModal(false);
-              }}
-            />,
-          ]}
-        />
-      )}
     </Container>
   );
 };

package/src/components/pages/RetailerProductEdition/styles.js

@@ -89,10 +89,6 @@ export const Container = styled.div`
       }
     }
   }
-  #modal-message-box {
-    width: 400px;
-    height: 100px;
-  }
   .container {
     width: 100%;
     height: 100%;

package/src/components/pages/RetailerProductEdition/utils.js

@@ -1,5 +1,4 @@
 import axios from "axios";
-import { fetchPOST } from "../../../global-files/handle_http";
 
 export const getAuditVersion = async (articleId, setState, token) => {
   const auditResponse = await axios.get(
@@ -33,39 +32,3 @@ export const getInputsData = (
     setDescriptionState(descriptions);
   }
 };
-
-export const translateService = (tab) => {
-  switch (tab) {
-    case "description":
-    case "Descripción":
-      return "Descripciones";
-    case "datasheet":
-    case "Ficha técnica":
-      return "Fichas técnicas";
-    case "images":
-    case "Imágenes":
-      return "Imágenes";
-  }
-};
-
-export const createMessage = (
-  retailers,
-  idRetailer,
-  oldStatus,
-  newStatus,
-  service
-) => {
-  const [retailer] = retailers?.filter((ret) => ret.id === idRetailer) || [];
-  return `${translateService(service)} de ${
-    retailer.name
-  } |${oldStatus}| a |${newStatus}`;
-};
-
-export const sendMessage = async (data) => {
-  const { paramsBody, paramsHeader } = data;
-  return fetchPOST(
-    process.env.REACT_APP_CREATE_MESSAGES,
-    paramsBody,
-    paramsHeader
-  );
-};

package/src/index.js

@@ -33,13 +33,6 @@ export * from "./components/atoms/ImagePreview/index";
 export * from "./components/atoms/InputText/index";
 export * from "./components/atoms/NotFound/index";
 export * from "./components/atoms/Tooltip/index";
-export * from "./components/atoms/UserOption/index";
-export * from "./components/atoms/UserCatalog/index";
-export * from "./components/atoms/UserSelector/index";
-export * from "./components/atoms/ImageCarousel/index";
-export * from "./components/atoms/RetailersList/index";
-export * from "./components/atoms/RetailerOption/index";
-export * from "./components/atoms/RetailerCatalog/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";
@@ -70,11 +63,6 @@ export * from "./components/molecules/ButtonDownloadFile/index";
 export * from "./components/molecules/ImageTooltip/index";
 export * from "./components/molecules/SelectV2/index";
 export * from "./components/molecules/Dropdown/index";
-export * from "./components/molecules/StripeCardForm/index";
-export * from "./components/molecules/StripeCardSelector/index";
-export * from "./components/molecules/GridItem/index";
-export * from "./components/molecules/HeaderItem/index";
-export * from "./components/molecules/RowItem/index";
 
 //organisms
 export * from "./components/organisms/ChangePassword/index";
@@ -91,9 +79,6 @@ export * from "./components/organisms/Modal/index";
 export * from "./components/organisms/OrderDetail/index";
 export * from "./components/organisms/RangeCalendar";
 export * from "./components/organisms/TableResizable";
-export * from "./components/organisms/SideModal/index";
-export * from "./components/organisms/GridProducts/index";
-export * from "./components/organisms/PanelLayout";
 
 //pages
 export * from "./components/pages/ChangePasswordLogin";

package/src/assets/images/defaultImages/check_circle.svg

@@ -1,10 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="check_circle">
-<mask id="mask0_204_774" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
-<rect id="Bounding box" width="14" height="14" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_204_774)">
-<path id="check_circle_2" d="M5.9675 10.185L10.92 5.2325L10.115 4.445L5.9675 8.5925L3.8675 6.4925L3.08 7.28L5.9675 10.185ZM7 14C6.04333 14 5.13917 13.8162 4.2875 13.4487C3.43583 13.0812 2.69208 12.5796 2.05625 11.9437C1.42042 11.3079 0.91875 10.5642 0.55125 9.7125C0.18375 8.86083 0 7.95667 0 7C0 6.03167 0.18375 5.12167 0.55125 4.27C0.91875 3.41833 1.42042 2.6775 2.05625 2.0475C2.69208 1.4175 3.43583 0.91875 4.2875 0.55125C5.13917 0.18375 6.04333 0 7 0C7.96833 0 8.87833 0.18375 9.73 0.55125C10.5817 0.91875 11.3225 1.4175 11.9525 2.0475C12.5825 2.6775 13.0812 3.41833 13.4487 4.27C13.8162 5.12167 14 6.03167 14 7C14 7.95667 13.8162 8.86083 13.4487 9.7125C13.0812 10.5642 12.5825 11.3079 11.9525 11.9437C11.3225 12.5796 10.5817 13.0812 9.73 13.4487C8.87833 13.8162 7.96833 14 7 14Z" fill="#8A6CAA"/>
-</g>
-</g>
-</svg>

package/src/components/atoms/ImageCarousel/ImgeSlider.stories.js

@@ -1,76 +0,0 @@
-import { ImageCarousel } from ".";
-
-export default {
-  title: "Components/atoms/ImageCarousel",
-  component: ImageCarousel,
-};
-
-const Template = (args) => <ImageCarousel {...args} />;
-export const ImageCarouselDefault = Template.bind({});
-ImageCarouselDefault.args = {
-  imageArray: [
-    {
-      id: 35596,
-      status: null,
-      image_id: 1,
-      packing_type: "3",
-      image_type: "1",
-      article_id: "38443",
-      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMS1kNDQ2ZjIwNy0wYTkzLTQyNzgtYWZjNi01MTY2ZjIyY2EzNDMucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
-      timestamp: "2023-05-30T03:01:12.000Z",
-      id_version: 15,
-      width: null,
-      height: null,
-      scene_type: null,
-      image_shot_type: null,
-      last_modified: "2023-06-05T23:49:49.000Z",
-      name: "Central (Frente Comercial)",
-      version: 15,
-      ext: "png",
-      uuid: "d446f207-0a93-4278-afc6-5166f22ca343",
-      srcDB: "id-38443/15/1-d446f207-0a93-4278-afc6-5166f22ca343.png",
-    },
-    {
-      id: 35597,
-      status: null,
-      image_id: 3,
-      packing_type: "3",
-      image_type: "1",
-      article_id: "38443",
-      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMy0yOTZkMzU3ZC00OTUzLTRiMzktYjFjMy04YWZmZDI2NDgwMWIucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
-      timestamp: "2023-05-30T03:01:12.000Z",
-      id_version: 15,
-      width: null,
-      height: null,
-      scene_type: null,
-      image_shot_type: null,
-      last_modified: "2023-06-05T23:49:49.000Z",
-      name: "Trasera (Back)",
-      version: 15,
-      ext: "png",
-      uuid: "296d357d-4953-4b39-b1c3-8affd264801b",
-      srcDB: "id-38443/15/3-296d357d-4953-4b39-b1c3-8affd264801b.png",
-    },
-    {
-      id: 35598,
-      status: null,
-      image_id: 16,
-      packing_type: "3",
-      image_type: "1",
-      article_id: "38443",
-      src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMTYtOGMzNDIzM2YtZTRiMC00MjU0LWFlYzUtZjEyN2ZiYjhkYmVkLnBuZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjoxMDAwLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=",
-      timestamp: "2023-05-30T03:01:12.000Z",
-      id_version: 15,
-      width: null,
-      height: null,
-      scene_type: null,
-      image_shot_type: null,
-      last_modified: "2023-06-05T23:49:49.000Z",
-      name: "Detalle / Características 1",
-      version: 15,
-      ext: "png",
-      uuid: "8c34233f-e4b0-4254-aec5-f127fbb8dbed",
-      srcDB: "id-38443/15/16-8c34233f-e4b0-4254-aec5-f127fbb8dbed.png",
-    },
-  ],
-};

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

@@ -1,103 +0,0 @@
-import { Container } from "./styles";
-import { useState, useEffect } from "react";
-import ReactImageFallback from "react-image-fallback";
-import spinner from "../../../assets/images/Icons/Spinner.gif";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import productImage from "../../../assets/images/defaultImages/defaultProductImage.png";
-
-export const ImageCarousel = ({ imageArray = [] }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const [transitioning, setTransitioning] = useState(false);
-  const [isHover, setIsHover] = useState(false);
-
-  const goToNextSlide = () => {
-    if (!transitioning) {
-      setTransitioning(true);
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % imageArray.length);
-
-      setTimeout(() => {
-        setTransitioning(false);
-      }, 500); // Adjust the transition duration to match your CSS
-    }
-  };
-
-  const goToPrevSlide = () => {
-    if (!transitioning) {
-      setTransitioning(true);
-      setCurrentIndex(
-        (prevIndex) => (prevIndex - 1 + imageArray.length) % imageArray.length
-      );
-
-      setTimeout(() => {
-        setTransitioning(false);
-      }, 500); // Adjust the transition duration to match your CSS
-    }
-  };
-
-  // useEffect(() => {
-  //   const delay = 0;
-  //   let repeat;
-  //   setTimeout(() => {
-  //     repeat = setInterval(() => {
-  //       if (!isHover && imageArray.length > 1) goToNextSlide();
-  //     }, 10000);
-  //   }, delay);
-  //   return () => {
-  //     clearInterval(repeat);
-  //   };
-  // }, [isHover]);
-
-  return (
-    <Container
-    // onMouseEnter={() => setIsHover(true)}
-    // onMouseLeave={() => setIsHover(false)}
-    >
-      {imageArray.length > 1 && (
-        <button
-          className="prev"
-          onClick={(e) => {
-            e.stopPropagation();
-            goToPrevSlide();
-          }}
-        >
-          <ArrowBackIosIcon />
-        </button>
-      )}
-      <div className="slide-container">
-        {imageArray.length ? (
-          imageArray.map((img, index) => (
-            <div
-              key={index}
-              className={`image-container slide ${
-                index === currentIndex ? "active" : ""
-              }`}
-            >
-              <ReactImageFallback
-                key={index}
-                src={`https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${img.src}`}
-                fallbackImage={spinner}
-                alt={img?.name}
-                style={{
-                  transform: `translateX(-${currentIndex * 100}%)`,
-                }}
-              />
-            </div>
-          ))
-        ) : (
-          <img src={productImage} alt="not image" />
-        )}
-      </div>
-      {imageArray.length > 1 && (
-        <button
-          className="next"
-          onClick={(e) => {
-            e.stopPropagation();
-            goToNextSlide();
-          }}
-        >
-          <ArrowBackIosIcon />
-        </button>
-      )}
-    </Container>
-  );
-};