contentoh-components-library 21.4.74 → 21.4.75

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