contentoh-components-library 21.5.3 → 21.5.4

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

@@ -0,0 +1,80 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption";
+
+export const RetailerSelectorv2 = ({
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+  showStatus,
+}) => {
+  const [retailersPanel, setRetailersPanel] = useState(false);
+
+  const closeRetailersPanel = (e) => {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  const getRetailerImage = async () => {
+    activeRetailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${activeRetailer.id}.png`;
+    retailers.forEach(
+      (retailer) =>
+        (retailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${retailer.id}.png`)
+    );
+  };
+
+  useEffect(() => {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+
+  useEffect(() => {
+    getRetailerImage();
+  }, [activeRetailer]);
+
+  return (
+    <Container id="retailers-assignation">
+      <Avatar
+        image={activeRetailer?.image}
+        altText={activeRetailer?.name}
+        imageType={"medium-image"}
+        onClick={() => {
+          retailers?.length > 0 && setRetailersPanel(!retailersPanel);
+          if (retailersPanel)
+            document.removeEventListener("click", closeRetailersPanel, false);
+        }}
+      />
+      
+      {retailersPanel && (
+        <div className="retailers-panel">
+          {retailers.map((retailer, index) => (
+            <AsignationOption
+              key={`${index}-${retailer?.name}`}
+              profileImage={retailer?.image}
+              imageType={"medium-image"}
+              asignationType={null}
+              name={retailer?.name}
+              team={retailer?.team}
+              services={retailer?.services}
+              onClick={() => {
+                setActiveRetailer(retailer);
+                document.removeEventListener(
+                  "click",
+                  closeRetailersPanel,
+                  false
+                );
+                setRetailersPanel(false);
+              }}
+              active={retailer.id === activeRetailer.id}
+              showStatus={showStatus}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+
+  .retailers-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+  }
+`;

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

@@ -0,0 +1,90 @@
+import { ServiceDataValidator } from "./index";
+
+export default {
+  title: "Components/molecules/ServiceDataValidator",
+  component: ServiceDataValidator,
+};
+
+const Template = (args) => <ServiceDataValidator {...args} />;
+
+export const ServiceDataValidatorDefault = Template.bind({});
+ServiceDataValidatorDefault.args = {
+ activeRetailer:{
+    id:34,
+    image:"https://content-management-images.s3.amazonaws.com/retailers/34.png",
+    name:"San Pablo",
+    services:["AA", "AP", "AA"]
+  },
+  headerData:{
+    "orderId": 15275,
+    "status": "AA",
+    "datasheet_status": "AA",
+    "prio": "none",
+    "version": 3,
+    "description_status": "AA",
+    "images_status": "AA",
+    "brand": null,
+    "retailerOrder": 0,
+    "missing": {
+      "datasheet": null,
+      "descriptions": null,
+      "images": null
+    },
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
+    },
+    "article": {
+      "category": "Abarrotes|Abarrotes Secos|Frutos Secos",
+      "company_name": "GRUPO BRAHMA",
+      "country": "México",
+      "id_category": "11",
+      "id_datasheet_especialist": 54,
+      "id_datasheet_facilitator": 52,
+      "id_description_especialist": 54,
+      "id_description_facilitator": 52,
+      "id_images_especialist": 55,
+      "id_images_facilitator": 53,
+      "id_order": 15275,
+      "id_article": 39485,
+      "id_auditor": 37,
+      "name": "Mix de nueces",
+      "timestamp": "2023-07-14T21:03:19.000Z",
+      "upc": "7543453453"
+    },
+    "retailers": [
+      {
+        "id": 34,
+        "name": "San Pablo",
+        "services": [
+          "AA",
+          "AP",
+          "AA"
+        ],
+        "image": "https://content-management-images.s3.amazonaws.com/retailers/34.png"
+      }
+    ],
+    "statusByRetailer": {
+      "34": {
+        "datasheet": "AA",
+        "description": "AA",
+        "images": "AA"
+      }
+    },
+    "retailersAvailable": [
+      {
+        "id": 34,
+        "name": "San Pablo"
+      }
+    ],
+    "categoryName": "Abarrotes|Abarrotes Secos|Frutos Secos",
+    "upc": "7543453453",
+    "id_article": 39485,
+    "id_order": 15275
+  },
+  showApproveRejectAll:true,
+  showValidationButtons:true,
+  text:"Descripción",
+  missingData:1,
+}

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

@@ -0,0 +1,49 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect, useRef, useState } from "react";
+import { Validation } from "../Validation";
+
+export const ServiceDataValidator = ({
+  headerData,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  showApproveRejectAll,
+  approveAll,
+  rejectAll,
+  approve,
+  reject,
+  text,
+  complete,
+  showValidation,
+  missingData,
+}) => {
+  const headerTop = useRef();
+  return (
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+      ref={headerTop}
+    >
+        <span className="service-text">
+          {text}:{" "}
+          <span className="service-complete">
+            {complete ? "Completado" : `${missingData} ${missingData > 1 ? 'Faltantes' : 'Faltante'}`}
+          </span>
+        </span>
+     { showValidation &&  (
+     <Validation
+           headerData={headerData}
+           activeRetailer={activeRetailer}
+           setActiveRetailer={setActiveRetailer}
+           showValidationButtons={showValidationButtons}
+           showApproveRejectAll={showApproveRejectAll}
+           approveAll={approveAll}
+           rejectAll={rejectAll}
+           approve={approve}
+           reject={reject}
+          ></Validation>
+        )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+display:flex;
+padding:7px 15px;
+justify-content: space-between;
+background:${GlobalColors.blue_light};
+width: auto;
+height:34px;
+align-items: center;
+max-width:300px;
+border-radius:5px;
+
+
+  * + * {
+    margin-left: 10px;
+  }
+
+  .btn-gral{
+    min-width: 34px;
+    min-height:34px;
+  }
+  .images-buttons{
+    display:flex;
+  }
+  .service-text{
+    font-family:${FontFamily.RobotoMedium}, sans-serif;
+    font-size:12px;
+    font-weight: 500;
+    color:${GlobalColors.gray};
+  }
+  .service-complete{
+    color:${GlobalColors.black};
+  }
+`;

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

@@ -54,25 +54,25 @@ export const SignInLogin = (props) => {
         } else {
           const userGroup =
             session.signInUserSession.accessToken.payload["cognito:groups"];
-          const response = await axios.get(
-            process.env.REACT_APP_USER_ENDPOINT,
-            {
-              headers: {
-                Authorization: session.signInUserSession.idToken.jwtToken,
-              },
-            }
-          );
-          if (userGroup[0] === props.users) {
+          if (userGroup.includes(props.users)) {
             sessionStorage.setItem("auth", true);
             sessionStorage.setItem(
               "jwt",
               session.signInUserSession.idToken.jwtToken
             );
+            const response = await axios.get(
+              process.env.REACT_APP_USER_ENDPOINT,
+              {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken,
+                },
+              }
+            );
             const user = JSON.parse(response.data.body).data[0];
             const company = JSON.parse(response.data.body).data[1];
             caches.keys().then((names) => {
               names.forEach((name) => {
-                caches.delete(name);
+                caches?.delete(name);
               });
             });
             user.src = `https://${
@@ -89,7 +89,7 @@ export const SignInLogin = (props) => {
           }
         }
       } catch (error) {
-        console.log(error.code);
+        console.log(error);
         setLoading(false);
         if (error.code === "NotAuthorizedException") {
           setSignInError("NotAuthorizedException");