contentoh-components-library 21.5.3 → 21.5.4

package/src/components/organisms/ImageDataTablev2/ImageDataTablev2.stories.js

@@ -0,0 +1,24 @@
+import { ImageDataTablev2 } from "./index";
+
+export default {
+  title: "Components/organisms/ImageDataTablev2",
+  component: ImageDataTablev2,
+};
+
+const Template = (args) => <ImageDataTablev2 {...args} />;
+
+export const ImageDataTablev2Default = Template.bind({});
+ImageDataTablev2Default.args = {
+  headerInfo: {
+    src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
+    name: "Hero.jpg",
+    status: "AA",
+  },
+  imageData: [
+    { feature: "Tipo de imagen", value: "Tipo de imagen" },
+    { feature: "Identificador", value: "F26" },
+    { feature: "Formato", value: "jpg" },
+    { feature: "Resolución", value: "300dpi" },
+    { feature: "Tamaño de imagen", value: "1000x10000" },
+  ],
+};

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

@@ -0,0 +1,124 @@
+import { Container } from "./styles";
+import { TableHeader } from "../../molecules/TableHeader";
+import { Container as Row } from "../../molecules/TableRow/styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import LabelToInput from "../../atoms/LabelToInput";
+
+export const ImageDataTablev2 = ({
+  activeImage,
+  darkMode,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
+  version,
+  setShowVersionSelector,
+  shotThd,
+}) => {
+  return (
+    <Container darkMode={darkMode}>
+      <TableHeader
+        imagesStatus={imagesStatus}
+        activeImage={activeImage}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        showSaveButton={showSaveButton}
+        onClickSave={onClickSave}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
+      />
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imagePackagingType?.find(
+              (f) => f.id === +activeImage?.packing_type
+            )?.name || "-"
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
+              ?.name || "-"
+          }
+        />
+      </Row>
+      {shotThd && (
+        <Row>
+          <ScreenHeader
+            headerType={"table-row-text"}
+            text="Tipo de imagen THD"
+          />
+          <ScreenHeader
+            headerType={"table-row-text gray-table-row"}
+            text={
+              lists?.imageShotType?.find(
+                (f) => f.id === +activeImage?.image_shot_type
+              )?.type_shot || "-"
+            }
+          />
+        </Row>
+      )}
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Formato" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={activeImage?.ext || "-"}
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={
+            activeImage?.width && activeImage.height
+              ? `${activeImage?.width}x${activeImage?.height}px`
+              : "-"
+          }
+        />
+      </Row>
+      {retailerSelected &&
+        lists?.attrForImgs &&
+        lists?.attrForImgs?.general?.map((attr, index) => (
+          <Row key={"row-" + index + "-" + attr?.name}>
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
+            <LabelToInput
+              width="100px"
+              defaultValue={attr?.value}
+              onChange={(e) => {
+                setImages({
+                  action: "changeAttrValue",
+                  value: e.target.value || "-",
+                  id: attr.id,
+                });
+              }}
+            />
+          </Row>
+        ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 377px;
+  padding: 10px;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 10px;
+  background-color:${GlobalColors.white};
+
+  .input-name-header,
+  .table-row-text {
+    color: ${({ darkMode }) => darkMode && GlobalColors.s1};
+  }
+  .gray-table-row {
+    background-color: ${({ darkMode }) => darkMode && GlobalColors.white};
+  }
+`;

package/src/components/organisms/ImagePreviewerv2/ImagePreviewerv2.stories.js

@@ -0,0 +1,38 @@
+import { ImagePreviewer } from "./index";
+
+export default {
+  title: "Components/organisms/ImagePreviewer",
+  component: ImagePreviewer,
+};
+
+const Template = (args) => <ImagePreviewer {...args} />;
+
+export const ImagePreviewerDefault = Template.bind({});
+ImagePreviewerDefault.args = {
+  imagesArray: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+      alt: "img",
+    },
+    {
+      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://memegenerator.net/img/images/72798198.jpg",
+      alt: "img",
+    },
+    {
+      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+      alt: "img",
+    },
+  ],
+};

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

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+import { ImageSelectorv2 } from "../../molecules/ImageSelectorv2";
+import { EditionActiveImagev2 } from "../../molecules/EditionActiveImagev2";
+
+export const ImagePreviewerv2 = ({
+  imagesArray = [],
+  activeImage,
+  setActiveImage,
+  setShowModal,
+  showSelector = true
+}) => {
+  return (
+    <Container>
+      <EditionActiveImagev2
+        img={activeImage?.src}
+        altText={activeImage?.name}
+        setShowModal={setShowModal}
+      />
+      {showSelector && <ImageSelectorv2 images={imagesArray} setActiveImage={setActiveImage} />}
+    </Container>
+  );
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & + * {
+    margin-top: 10px;
+  }
+`;

package/src/components/organisms/ImageUploader/ImageUploader.stories.js

@@ -0,0 +1,15 @@
+import { ImageUploader  } from "./index";
+
+export default {
+  title: "Components/organisms/ImageUploader ",
+  component: ImageUploader ,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => <ImageUploader  {...args} />;
+
+export const ImageUploaderDefault = Template.bind({});
+ImageUploaderDefault.args = {
+};

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

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { ImageUploaderContainer } from "./styles";
+import uploadFile from "../../../assets/images/Icons/upload_file.svg";
+
+const ImageUploader = ({ handleNewImage }) => {
+  const [image, setImage] = useState(null);
+
+  const onDrop = (acceptedFiles) => {
+    if (acceptedFiles.length === 1) {
+      showImage(acceptedFiles[0]);
+    }
+  };
+
+  const showImage = (file) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      setImage(reader.result);
+      getImageDimensions(reader.result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const getImageDimensions = (dataURL) => {
+    const img = new Image();
+    img.onload = () => {
+      const image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height,
+      };
+      handleNewImage(image);
+    };
+    img.src = dataURL;
+  };
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  return (
+    <ImageUploaderContainer {...getRootProps()}>
+      <input {...getInputProps()} />
+      {image ? (
+        <img className="imageLoaded" src={image} alt="Imagen Cargada" />
+      ) : (
+        <>
+          <img src={uploadFile} alt="Subir imágen" />
+          {isDragActive ? (
+            <p>Suelta la imagen aquí</p>
+          ) : (
+            <div>
+              <p>Da clic aquí o arrastra la foto para subirla a Content-oh!</p>
+              <span>Tamaño de imagen recomendando 3000x3000 pixeles</span>
+            </div>
+          )}
+        </>
+      )}
+    </ImageUploaderContainer>
+  );
+};
+
+export default ImageUploader;

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

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const ImageUploaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  color: var(--magenta-main, #e33aa9);
+  text-align: center;
+  font-family: Roboto;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: 49px 32px;
+  & > div {
+    & > p {
+      margin-bottom: 10px;
+    }
+    & > span {
+      color: var(--grey-medium, #cbcbcb);
+      font-size: 10px;
+      font-weight: 400;
+    }
+  }
+`;

package/src/components/organisms/ImageVisor/ImageVisor.stories.js

@@ -0,0 +1,15 @@
+import { ImageVisor } from "./index";
+
+export default {
+  title: "Components/organisms/ImageVisor",
+  component: ImageVisor,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => <ImageVisor {...args} />;
+
+export const ImageVisorDefault = Template.bind({});
+ImageVisorDefault.args = {
+};

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

@@ -0,0 +1,143 @@
+import { useState, useEffect } from "react";
+import ReactImageFallback from "react-image-fallback";
+import { ImageContainer, ImageView } from "./styles.js";
+import ImageUploader from "../ImageUploader";
+import { getImageURL } from "../../../global-files/utils.js";
+import defaultProductImage from "../../../assets/images/defaultImages/defaultProductImage.png";
+import fullscreen from "../../../assets/images/Icons/fullscreen.svg";
+import close from "../../../assets/images/Icons/close.svg";
+import uploadFile from "../../../assets/images/Icons/upload-file.svg";
+import deleteForever from "../../../assets/images/Icons/delete-forever-white.svg";
+
+export const ImageVisor = ({
+  value,
+  name,
+  setModalFromTable,
+  setDataServices,
+  setModal,
+  ...props
+}) => {
+  const [smallSrc, setSmallSrc] = useState("");
+  function handleNewImage(imageFile) {
+    const payload = { ...props, ...imageFile };
+    setDataServices({ type: "updateImage", payload });
+  }
+
+  function handleUpdateImage(file) {
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        getImageDimensions(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  const getImageDimensions = (dataURL) => {
+    const img = new Image();
+    img.onload = () => {
+      const image = {
+        src: dataURL,
+        ext: img.src.includes("image/jpeg") ? "jpg" : "png",
+        width: img.width,
+        height: img.height,
+      };
+      handleNewImage(image);
+      changeVisor();
+    };
+    img.src = dataURL;
+  };
+
+  function changeVisor(view) {
+    if (!view) {
+      setModalFromTable(null);
+      return;
+    }
+    const isSmall = view === "small";
+    let src = isSmall
+      ? smallSrc
+      : `${process.env.REACT_APP_IMAGES_ENDPOINT}/${value?.src}`;
+    setModalFromTable(
+      <ImageView visorView={view}>
+        <div className="header">
+          <p>{name}</p>
+          <div className="buttons">
+            {isSmall ? (
+              <>
+                {value?.src ? (
+                  <img
+                    src={fullscreen}
+                    alt="Ver en pantalla completa"
+                    onClick={() => changeVisor("fullscreen")}
+                  />
+                ) : null}
+                <img src={close} alt="Cerrar" onClick={() => changeVisor()} />
+              </>
+            ) : (
+              <>
+                <label className="borderCircle" htmlFor="fileInput">
+                  <img src={uploadFile} alt="Actualizar imagen" />
+                  <input
+                    type="file"
+                    id="fileInput"
+                    accept="image/png, image/jpeg"
+                    style={{ display: "none" }}
+                    onChange={(e) => handleUpdateImage(e.target.files[0])}
+                  />
+                </label>
+                <img
+                  className="borderCircle"
+                  src={deleteForever}
+                  alt="Eliminar imágen"
+                  onClick={() => {
+                    setModal({
+                      type: "delete",
+                      functions: { setModal, setDataServices },
+                      payload: props,
+                    });
+                    changeVisor();
+                  }}
+                />
+                <img
+                  className="borderCircle"
+                  src={close}
+                  alt="Cerrar"
+                  onClick={() => changeVisor("small")}
+                />
+              </>
+            )}
+          </div>
+        </div>
+        <div className="body">
+          <ReactImageFallback
+            className="imageLoaded"
+            src={src}
+            fallbackImage={<ImageUploader handleNewImage={handleNewImage} />}
+            alt={name ?? "Imagen del producto"}
+          />
+        </div>
+      </ImageView>
+    );
+  }
+
+  useEffect(() => {
+    let src = value?.src?.includes("image/")
+      ? value?.src
+      : getImageURL(process.env.REACT_APP_IMAGES_BUCKET, value?.src, 250, 250);
+    setSmallSrc(src);
+  }, [value]);
+
+  return (
+    <>
+      <ImageContainer onClick={() => changeVisor("small")}>
+        <ReactImageFallback
+          src={smallSrc}
+          fallbackImage={defaultProductImage}
+          alt={name ?? "Imagen del producto"}
+        />
+      </ImageContainer>
+    </>
+  );
+};
+
+export default ImageVisor;

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

@@ -0,0 +1,106 @@
+import styled, { css } from "styled-components";
+import uploadFile from "../../../assets/images/Icons/upload-file.svg";
+
+export const ImageContainer = styled.div`
+  align-items: center;
+  background: var(--white-main, #fff);
+  border-radius: 7px;
+  border: 1px solid var(--grey-medium, #cbcbcb);
+  cursor: pointer;
+  display: flex;
+  height: 52px;
+  justify-content: center;
+  width: 52px;
+  & > img {
+    border-radius: 7px;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+`;
+
+export const ImageView = styled.div`
+  background: var(--white-main, #fff);
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  height: 280px;
+  left: calc(50% - 125px);
+  position: absolute;
+  top: calc(50% - 140px);
+  width: 250px;
+  z-index: 10;
+  .header {
+    align-items: center;
+    background: var(--grey-medium, #cbcbcb);
+    border-radius: 5px 5px 0px 0px;
+    color: var(--white-main, #fff);
+    display: flex;
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    height: 30px;
+    justify-content: space-between;
+    line-height: normal;
+    overflow: hidden;
+    padding: 0 9px 0 10px;
+    text-overflow: ellipsis;
+    width: 100%;
+    .buttons {
+      display: flex;
+      gap: 10px;
+      img {
+        cursor: pointer;
+      }
+      label {
+        display: flex;
+        align-items: center;
+        padding: 3px;
+      }
+      .borderCircle {
+        border-radius: 20px;
+        border: 1px solid var(--white-main, #fff);
+      }
+    }
+  }
+  .body {
+    width: 100%;
+    height: calc(100% - 30px);
+    .imageLoaded {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  ${({ visorView }) =>
+    visorView === "fullscreen" &&
+    css`
+      background: var(--black-main, #262626d9);
+      height: 100%;
+      left: 0;
+      top: 0;
+      width: 100%;
+      .header {
+        background: var(--black-main, #262626);
+        font-size: 14px;
+        height: 45px;
+        .buttons > img {
+          border-radius: 20px;
+          border: 1px solid var(--white-main, #fff);
+          padding: 3px;
+        }
+      }
+      > div {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+        & > img {
+          border-radius: 5px;
+          height: 500px;
+          width: 500px;
+        }
+      }
+    `}
+`;