contentoh-components-library 21.4.71 → 21.4.73

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

@@ -1,57 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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;
-  }
-`;