contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { ServiceDataValidator } from "../../molecules/ServiceDataValidator";
+import { Button } from "../../atoms/GeneralButton";
+import { IconInfo } from "@aws-amplify/ui-react";
+
+export const DragPrueba = ({
+
+}) => {
+  const [items, setItems] = useState(["🍰 Cake", "🍩 Donut", "🍎 Apple", "🍕 Pizza"]);
+  const [draggedItem, setDraggedItem] = useState(null);
+
+  const onDragStart = (e, idx) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/html", e.target.parentNode);
+    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
+    setDraggedItem(items[idx]);
+  };
+
+  const onDragOver = (index) => {
+    if (!draggedItem) {
+      return;
+    }
+    if (draggedItem === items[index]) {
+      return;
+    }
+    let updatedItems = items.filter((item) => item !== draggedItem);
+    updatedItems.splice(index, 0, draggedItem);
+    setItems(updatedItems);
+  };
+
+  const onDragEnd = () => {
+    setDraggedItem(null);
+  };
+
+  return (
+    <Container>
+      <h3>List of items</h3>
+      <ul>
+        {items.map((item, idx) => (
+          <li className="item" key={item} onDragOver={() => onDragOver(idx)}>
+            <div
+              className="drag"
+              draggable
+              onDragStart={(e) => onDragStart(e, idx)}
+              onDragEnd={onDragEnd}
+            >
+              <IconInfo />
+            </div>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </Container>
+  );
+};

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

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .item{
+    display:flex;
+  }
+`;

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

@@ -0,0 +1,28 @@
+import { FullProductNamev2 } from "./index";
+
+export default {
+  title: "Components/organisms/FullProductNamev2",
+  component: FullProductNamev2,
+};
+
+const Template = (args) => <FullProductNamev2 {...args} />;
+export const FullProductNamev2Default = Template.bind({});
+
+FullProductNamev2Default.args = {
+  headerData: {
+    name: "Nombre del producto",
+    status: "P",
+    percent: 20,
+    backgroundColor: "in_progress",
+    priority: "low",
+    date: new Date().toLocaleDateString(),
+    features: [
+      { feature: "Prov", value: "Unilever" },
+      { feature: "Vendor", value: "1234567890" },
+      { feature: "SKU", value: "1234567890" },
+      { feature: "UPC", value: "1234567890" },
+      { feature: "Categoría", value: "Desodorantes Caballero y Dama" },
+    ],
+    validation: "null-button",
+  },
+};

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

@@ -0,0 +1,101 @@
+import { Container } from "./styles";
+import { ProductNameHeaderv2 } from "../../molecules/ProductNameHeaderv2";
+import { FeaturesBarv2 } from "../../molecules/FeaturesBarv2";
+import { Button } from "../../atoms/GeneralButton/index";
+import { useState } from "react";
+import { useEffect } from "react";
+import { ProductSkuStatus } from "../../molecules/ProductSkuStatus";
+import { PriorityFlagv2 } from "../../atoms/PriorityFlagv2";
+
+
+export const FullProductNamev2 = ({
+  headerData,
+  percent,
+  servicesData,
+  version,
+  setShowVersionSelector,
+}) => {
+  const [retailers, setRetailers] = useState([]);
+  
+
+  useEffect(() => {
+    const rtls = headerData?.retailers || headerData?.retailersAvailable;
+    servicesData &&
+      rtls?.forEach((rt) => {
+        const element = [];
+        servicesData.forEach((sd) => {
+          if (sd.id_retailer === rt.id) {
+            element.push(sd.status ? sd.status : "R");
+          } else element.push("NA");
+          rt["services"] = element;
+        });
+      });
+    setRetailers(rtls);
+  }, [servicesData]);
+
+  const getTime = (date) => {
+    if (!date) return "";
+    return new Date(date).toLocaleDateString();
+  };
+
+  return (
+    <Container>
+      <div className="top-product-close">
+        <ProductNameHeaderv2
+        productName={headerData?.article?.name || headerData?.name}
+      />
+        <Button
+          buttonType="general-white-button close-buttonv2"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        />
+      </div>
+      
+      <div className="features-bar-container">
+        <FeaturesBarv2
+          containerClassName="bar-container"
+          features={[
+            {
+              feature: "Categoría",
+              value: headerData?.article?.category || headerData?.categoryName,
+            },
+            {
+              feature: "Proveedor",
+              value: headerData?.article?.company_name,
+            },
+          ]}
+        />
+      </div> 
+      <div className="features-bar-sku">
+        <PriorityFlagv2 priority={headerData?.prio}/>
+        <FeaturesBarv2
+        containerClassName="bar-sku"
+        contClassName="bar-sku-cont"
+        features={[
+              {
+                feature: "SKU",
+                value: headerData?.article?.upc || headerData?.upc,
+              },
+            ]}
+            />
+        <ProductSkuStatus
+          productName={headerData?.article?.name || headerData?.name}
+          statusType={
+            headerData?.version_status ||
+            headerData?.status ||
+            headerData?.article_status
+          }
+          setShowVersionSelector={setShowVersionSelector}
+          percentRequired={percent}
+          showShield={true}
+          percent={percent?.toFixed(0)}
+          date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
+          containerClassName="bar-sku"
+          contClassName="bar-sku-cont"
+              version={version}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+    background: ${GlobalColors.blue_light};
+    padding: 16px 20px 15px 20px;
+    border-radius: 10px;
+    width: 100%;
+  .features-bar-container {
+    display: flex;
+    flex-direction:column;
+    justify-content: space-between;
+    margin:10px 0px;
+  }
+  .features-bar-sku {
+    margin:10px 5px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    
+  }
+
+  & + * {
+    margin-top: 0px;
+  }
+
+  .top-product-close{
+    display:flex;
+    justify-content:space-between;
+    button {
+      width: 34px;
+      height: 34px;
+      border: 1px solid #f0f0f0;
+      background-size: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        height: 15px;
+      }
+  
+      & + * {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+`;

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

@@ -0,0 +1,22 @@
+import { FullTabsMenuv2 } from "./index";
+
+export default {
+  title: "Components/organisms/FullTabsMenuv2",
+  component: FullTabsMenuv2,
+};
+
+const Template = (args) => <FullTabsMenuv2 {...args} />;
+
+export const FullTabsMenuv2Default = Template.bind({});
+FullTabsMenuv2Default.args = {
+  status: "AA",
+  image: {
+    src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+  },
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

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

@@ -0,0 +1,142 @@
+import { Container } from "./styles";
+import { StatusAsignationInfo } from "../../molecules/StatusAsignationInfo/index";
+import { useState, useEffect } from "react";
+import { BarButtons } from "../BarButtons";
+import { AsignationInfo } from "../../molecules/AsignationInfo";
+import { StatusRetailer } from "../../molecules/StatusRetailer";
+import { TabsMenuv2 } from "../../molecules/TabsMenuv2";
+
+export const FullTabsMenuv2 = ({
+  tabsSections,
+  status = "",
+  activeTab,
+  setActiveTab,
+  setImageLayout,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
+  canAssign,
+  version,
+  setShowVersionSelector,
+  images,
+  updatedDescriptions,
+  updatedDatasheets,
+  selectedImages,
+  setSelectedImages,
+  setUpdatedDescriptions,
+  setUpdatedDatasheets,
+  setImages,
+  activeRetailer,
+  setActiveRetailer,
+  servicesData,
+  headerData,
+  statusType,
+  percentRequired,
+  withChat,
+  chatType,
+  productSelected,
+  token,
+}) => {
+  const [imagesSection, setImagesSection] = useState(false);
+  const [retailers, setRetailers] = useState([]);
+  useEffect(() => {
+    const rtls = headerData?.retailers || headerData?.retailersAvailable;
+    servicesData &&
+      rtls?.forEach((rt) => {
+        const element = [];
+        servicesData.forEach((sd) => {
+          if (sd.id_retailer === rt.id) {
+            element.push(sd.status ? sd.status : "R");
+          } else element.push("NA");
+          rt["services"] = element;
+        });
+      });
+    setRetailers(rtls);
+  }, [servicesData]);
+
+  const getTabClass = () => {
+    if (activeTab === "Descripción") {
+      return "izquierda";
+    } else if (activeTab === "Ficha Técnica") {
+      return "centro";
+    } else if (activeTab === "Imágenes") {
+      return "derecha";
+    }
+    return ""; // Si no coincide con ninguno de los valores anteriores
+  };
+
+  const classname = getTabClass(); 
+
+  return (
+    <Container>
+      <div className="bars-cont">
+  <div className="tabs-cont">
+          <TabsMenuv2
+          className={classname}
+            tabsSections={tabsSections}
+            setImagesSection={setImagesSection}
+            setActiveTab={setActiveTab}
+            activeTab={activeTab}
+            images={images}
+            updatedDescriptions={updatedDescriptions}
+            updatedDatasheets={updatedDatasheets}
+            selectedImages={selectedImages}
+            setUpdatedDescriptions={setUpdatedDescriptions}
+            setUpdatedDatasheets={setUpdatedDatasheets}
+            setImages={setImages}
+            setSelectedImages={setSelectedImages}
+          />
+        </div>
+        <StatusRetailer
+          canAssign={canAssign}
+          status={status}
+          activeTab={activeTab}
+          setImageLayout={setImageLayout}
+          imagesSection={imagesSection}
+          assignationsImages={assig}
+          setAssignation={setAssignation}
+          isRetailer={isRetailer}
+          downloadImages={downloadImages}
+          onClickSave={onClickSave}
+          askToDeleteImages={askToDeleteImages}
+          showSaveButton={showSaveButton}
+          version={false}
+          setShowVersionSelector={false}
+          showProgressBar={true}
+          retailers={retailers}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          showRetailer={true}
+          statusType={statusType}
+          headerData={headerData}
+          percent={percentRequired}
+        />
+        <AsignationInfo
+          canAssign={canAssign}
+          status={status}
+          activeTab={activeTab}
+          assignationsImages={assig}
+          setAssignation={setAssignation}
+          isRetailer={isRetailer}
+        />
+      </div>
+      
+      <BarButtons
+        showSaveButton={showSaveButton}
+        imagesSection={imagesSection}
+        onClickSave={onClickSave}
+        withChat={withChat}
+        chatType={chatType}
+        productSelected={productSelected}
+        token={token}
+        activeRetailer={activeRetailer}
+        setImageLayout={setImageLayout}
+        setShowVersionSelector={setShowVersionSelector}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width:100%;
+  display: flex;
+  text-align: center;
+  align-self: center;
+  justify-content: space-between;
+  margin-top: 15px;
+  margin-right:auto;
+  gap:15px;
+  .bars-cont{
+    display: flex;
+    gap: 15px;
+  }
+  .tabs-cont {
+    background: #F0F0F0;
+    border-radius: 17px;
+    height: 34px;
+  }
+  .active {
+    height: 34px;
+    border-bottom: none;
+    font-size: 12px;
+    color: #FFFFFF;
+    background: #8A6CAA;
+    display:flex;
+    align-items: center;
+    justify-content: center;
+    &.izquierda{
+      border-top-left-radius: 17px;
+      border-bottom-left-radius: 17px;
+    }
+    &.centro{
+      border-radius: 0px;
+    }
+    &.derecha{
+      border-top-right-radius: 17px;
+      border-bottom-right-radius: 17px;
+    }
+}
+ 
+
+  & + * {
+    margin-top: 14px;
+  }
+`;

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>
+  );
+};