contentoh-components-library 21.5.3 → 21.5.4

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

@@ -0,0 +1,105 @@
+import { Container } from "./styles";
+import { useState, useEffect } from "react";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { Button } from "../../atoms/GeneralButton/index";
+import { ProductImagev2 } from "../../atoms/ProductImagev2";
+import { ImageSelectorv2 } from "../../molecules/ImageSelectorv2";
+import { ImageDataTablev2 } from "../ImageDataTablev2";
+
+export const ProductImageModalv2 = ({
+  images = [],
+  headerInfo,
+  validation,
+  setShowModal,
+  sendToFacilitator,
+  approveRejectButtons = false,
+}) => {
+  const [activeImage, setActiveImage] = useState(0);
+  const [buttonType, setButtonType] = useState(
+    validation ? validation : "null-button"
+  );
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+
+  return (
+    <Container>
+      <div className="modal-container">
+        <div className="modal-image-container">
+          <ProductImagev2
+            img={
+              "https://" +
+              process.env.REACT_APP_IMAGES_BUCKET +
+              ".s3.amazonaws.com/" +
+              images?.values[activeImage]?.srcDB
+            }
+            altText={images?.values[activeImage]?.name}
+            imageType={"expanded-modal-image"}
+          />
+        </div>
+        <div className="modal-data-container">
+          <div className="validation-and-table-container">
+            <div className="validation-panel">
+              {/* {approveRejectButtons && (
+                <Button
+                  buttonType={`circular-button ${buttonType}`}
+                  onClick={() => setShowValidationPanel(true)}
+                />
+              )} */}
+              <Button
+                buttonType="general-white-button close-button-white"
+                onClick={() => {
+                  setShowModal(false);
+                }}
+              />
+
+        {/* <Button
+          buttonType="general-white-button close-buttonv2"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        /> */}
+
+              {/* {showValidationPanel && (
+                <ValidationPanel
+                  id="validation-panel"
+                  setOptionClicked={setButtonType}
+                  setShowValidationPanel={setShowValidationPanel}
+                  approve={() => sendToFacilitator && sendToFacilitator("A")}
+                  reject={() => sendToFacilitator && sendToFacilitator("R")}
+                />
+              )} */}
+            </div>
+
+            <ImageDataTablev2
+              imageData={images?.values[activeImage]?.data}
+              headerInfo={headerInfo}
+              activeImage={images?.values[activeImage]}
+              darkMode={true}
+              lists={images}
+            />
+          </div>
+          <ImageSelectorv2
+            images={images}
+            setActiveImage={setActiveImage}
+            modalSelector={true}
+          />
+        </div>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  overflow: auto;
+  position: fixed;
+  background-color: rgba(59, 59, 59, 0.53);
+  backdrop-filter: blur(4px);
+  left: 0;
+  top: 0;
+  z-index: 100;
+
+  .modal-container {
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .modal-data-container {
+      display: flex;
+      flex-direction: column;
+      gap: 25px;
+      align-items: center;
+      padding: 15px;
+      min-width: 375px;
+      
+      h2 {
+        color: ${GlobalColors.gray};
+      }
+
+      .validation-and-table-container {
+        .validation-panel {
+          width: 100%;
+          height: 44px;
+          background-color: rgba(38,38,38,0.3);
+          padding: 0 10px;
+          position: absolute;
+          top:0;
+          right:0;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .circular-button {
+            & + * {
+              margin-left: 10px;
+            }
+          }
+
+          button{
+            width: 24px;
+            height: 24px;
+            border: 1px solid #f0f0f0;
+            background-size: 12px;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          // & + * {
+          //   margin-top: 25px;
+          // }
+        }
+      }
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,30 @@
+import { InputImages } from "../../atoms/InputImages";
+import { NumberMandatory } from "../../atoms/NumberMandatory";
+import { InputGroupv2 } from "../InputGroupv2";
+import { Container } from "./styles";
+
+export const RenameImagesBar = ({
+  description,
+  number,
+}) => {
+ 
+  return (
+    <Container>
+      <InputImages
+      required={true}
+      description_small={"Descripción del campo."}
+        placeHolder={"UPC"}
+        ></InputImages>
+      <InputImages
+       required={false}
+       description_small={"Descripción del campo."}
+        placeHolder={"Modelo"}
+        ></InputImages>
+        <InputImages
+         required={true}
+         description_small={"Descripción del campo."}
+        placeHolder={"Item"}
+        ></InputImages>
+    </Container>
+);
+}  

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  height:60px;
+  display: flex;
+  gap: 10px;
+  padding:22px 15px;
+  border:1px solid ${GlobalColors.gray_light};
+  border-radius:10px;
+`;