contentoh-components-library 21.4.74 → 21.4.75

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

@@ -0,0 +1,35 @@
+import { RetailerSelectorv2 } from "./index";
+
+export default {
+  title: "Components/molecules/RetailerSelectorv2",
+  component: RetailerSelectorv2,
+};
+
+const Template = (args) => <RetailerSelectorv2 {...args} />;
+
+export const RetailerSelectorDefault = Template.bind({});
+RetailerSelectorDefault.args = {
+  retailers: [
+    {
+      id: 2,
+      name: "Walmart Mercancías Generales",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 3,
+      name: "Sam´s Club",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 14,
+      name: "Maskota y Petsy",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+  ],
+};

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/RowItem/ColumnItem.js

@@ -0,0 +1,9 @@
+import { Column } from "./styles";
+
+export const ColumnItem = ({ element, flex, minWidth }) => {
+  return (
+    <Column flex={flex} minWidth={minWidth}>
+      {element}
+    </Column>
+  );
+};