contentoh-components-library 0.1.1 → 6.0.0

package/src/components/pages/RetailerProductEdition/styles.js

@@ -13,7 +13,7 @@ export const Container = styled.div`
       width: 340px;
 
       & + * {
-        margin-left: 7px;
+        margin-left: 10px;
       }
     }
 
@@ -23,15 +23,64 @@ export const Container = styled.div`
       flex-direction: column;
 
       .services-information-container {
+        height: 100%;
         overflow: auto;
       }
 
       .image-services {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 179px);
-        column-gap: 15px;
-        row-gap: 15px;
+        aside {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, 179px);
+          column-gap: 15px;
+          row-gap: 15px;
+          padding: 20px;
+        }
       }
+
+      .commentary-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: 10px;
+        padding-left: 0;
+
+        .commentary {
+          display: flex;
+          align-items: flex-end;
+
+          .input-container {
+            & + * {
+              margin-left: 5px;
+            }
+          }
+
+          .buttons-box {
+            display: flex;
+            max-width: 201px;
+            flex-wrap: wrap;
+
+            .general-transparent-button {
+              & + * {
+                margin-top: 5px;
+              }
+            }
+
+            .general-transparent-button,
+            .general-green-button {
+              width: 201px;
+              height: 40px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .container {
+    width: 100%;
+    height: 100%;
+    .dropzone {
+      height: 100%;
+      width: 100%;
     }
   }
 `;

package/src/global-files/data.js

@@ -0,0 +1,152 @@
+import axios from "axios";
+import { Base64 } from "js-base64";
+import { v4 as uuidv4 } from "uuid";
+
+export const getRetailerServices = async (articleId, category, version) => {
+  const responseArray = await Promise.all([
+    axios.post(
+      `${process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+    ),
+    axios.get(
+      `${process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+    ),
+    axios.post(
+      `${process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+    ),
+  ]);
+
+  console.log(JSON.parse(responseArray[0].data.body).data);
+
+  const datasheets = JSON.parse(responseArray[0].data.body).data;
+  const descriptions = JSON.parse(responseArray[1].data.body).data;
+  const images = JSON.parse(responseArray[2].data.body).data;
+
+  images.values = images?.values?.map((value) => {
+    value.name = images.inputs.find((e) => e.id === value.image_id).name;
+    return getImage(value);
+  });
+
+  return [datasheets, descriptions, images];
+};
+
+export const getImage = (imageGeneral, width = 250, height = 250) => {
+  try {
+    const image = imageGeneral;
+    const ext = image.src.split(".");
+    const uuid = ext[0].split("-");
+    return {
+      ...image,
+      version: image.id_version,
+      ext: ext[ext.length - 1],
+      uuid:
+        uuid.reduce((prevVal, currVal, idx) => {
+          if (idx < 2) return "";
+          else return idx === 2 ? currVal : prevVal + "-" + currVal;
+        }, "") || uuidv4(),
+      srcDB: image.src,
+      src: image.image_id
+        ? "https://d24s337exbt5zr.cloudfront.net/" +
+          Base64.encode(
+            JSON.stringify({
+              bucket: process.env.REACT_APP_IMAGES_BUCKET,
+              key: image.src,
+              edits: {
+                resize: {
+                  width: width * 4,
+                  height: height * 4,
+                  fit: "contain",
+                  background: {
+                    r: 255,
+                    g: 255,
+                    b: 255,
+                    alpha: 1,
+                  },
+                },
+              },
+            })
+          )
+        : image.src,
+    };
+  } catch (err) {
+    console.log("err", err);
+    return (imageGeneral["error"] = err);
+  }
+};
+
+export const getPercentage = async (params = {}) => {
+  const func = async () => {
+    const dataToSend = [];
+    params.data.forEach((product) => {
+      params.data[0].retailers.forEach((retailer) => {
+        dataToSend.push(
+          product.article
+            ? {
+                id_article: product.article.id_article,
+                id_category: product.article.id_category,
+                id_retailer: retailer.id,
+                version: product.version,
+                upc: product.article.upc,
+                name: product.article.name,
+                retailerName: retailer.name,
+              }
+            : {
+                id_article: product.product.id_article,
+                id_category: product.product.id_category,
+                id_retailer: retailer.id,
+                version: product.product.version,
+                upc: product.product.upc,
+                name: product.product.name,
+                retailerName: retailer.name,
+              }
+        );
+      });
+    });
+
+    return await axios
+      .post(
+        process.env.REACT_APP_VALID_EXPORT_ENDPOINT,
+        { data: dataToSend },
+        {
+          headers: {
+            Authorization: sessionStorage.getItem("jwt"),
+          },
+        }
+      )
+      .then((response) => {
+        return response.data;
+      })
+      .catch((err) => console.log(err, "Errror"));
+  };
+
+  return await func();
+};
+
+export const getProfilePicture = (userId, width, height) => {
+  try {
+    return (
+      "https://d24s337exbt5zr.cloudfront.net/" +
+      Base64.encode(
+        JSON.stringify({
+          bucket: process.env.REACT_APP_IMAGES_PROFILE_BUCKET,
+          key: `id-${userId}/${userId}.png`,
+          edits: {
+            resize: {
+              width: width,
+              height: height,
+              fit: "contain",
+              background: {
+                r: 255,
+                g: 255,
+                b: 255,
+                alpha: 0,
+              },
+            },
+          },
+        })
+      )
+    );
+  } catch (err) {
+    console.log("err", err);
+    return defaultUpdate;
+  }
+};

package/src/global-files/global-styles.css

@@ -8,6 +8,16 @@
   box-sizing: border-box;
 }
 
+body.sb-main-padded.sb-show-main {
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sb-main-padded.sb-show-main #root {
+  height: 100%;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 6px;

package/src/global-files/variables.js

@@ -6,6 +6,7 @@ export const GlobalColors = {
   s5: "#503D66",
   original_magenta: "#B12D84",
   secondary_magenta: "#BA0070",
+  rejected_status: "#D74DED",
   magenta_s2: "#E33AA9",
   original_purpura: "#603888",
   in_progress: "#ED9A4D",

package/src/components/molecules/TextAndGradient/TextAndGradient.stories.js

@@ -1,23 +0,0 @@
-import { TextAndGradient } from "./index";
-import Cadena from '../../../assets/images/providerAndCadena/Cadena.svg';
-
-export default {
-    title: "Components/molecules/TextAndGradient",
-    component: TextAndGradient,
-};
-  
-  const Template = (args) => <TextAndGradient {...args} />;
-  
-  export const TextAndGradientDefault = Template.bind({});
-
-TextAndGradientDefault.args = {
-  title:"Beneficios de cadenas",
-  containerList: {
-    content:[      
-      "Crea proveedores y agregalos a tu cadena",
-      "Valida los proveedores",
-      "Solicita actualización a proveedores",
-      "Analiza el número de productos totales",
-    ],
-  },
-};

package/src/components/molecules/TextAndGradient/index.js

@@ -1,23 +0,0 @@
-import { Container } from "./styles";
-import { AtomList } from "../../atoms/AtomList";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { GlobalColors } from "../../../global-files/variables";
-
-export const TextAndGradient = ({ title, image, containerList }) => {
-  return (
-    <Container>
-      <div className="title">
-        <ScreenHeader
-          className="title"
-          headerType={"with-bold-text"}
-          text={title}
-          color={GlobalColors.s1}
-        />
-      </div>
-      {image && <img src={image}/>}
-      <div className="list">
-        <AtomList content={containerList.content} />
-      </div>
-    </Container>
-  );
-};

package/src/components/molecules/TextAndGradient/styles.js

@@ -1,37 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.button`
-
-    position: absolute;
-    width: 720px;
-    height: 720px;
-    left: 0px;
-    top: 0px;
-    background: linear-gradient(180deg, #E33AA9 0%, #3B1366 100%);
-    align-content: center;
-
-    .title{
-        position: absolute;
-        width: 475px;
-        height: 36px;
-        left: 110px;
-        top: 140px;
-        letter-spacing: -0.015em;
-        font-feature-settings: 'pnum' on, 'lnum' on;
-    }
-    .list{
-        position: absolute;
-        height: 160px;
-        left: 180px;
-        top: 219px;
-        font-family: Raleway;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 18px;
-        line-height: 40px;
-        letter-spacing: -0.015em;
-        text-align: left;
-        
-    }
-
-`;