contentoh-components-library 21.2.26 → 21.2.29

package/src/components/molecules/CustomSelect/SelectItem.js

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const SelecItem = ({
+  option,
+  customSelectId,
+  setParameterArray,
+  activeFilters,
+  setActiveFilters,
+}) => {
+  const [showSubOptions, setShowSubOptions] = useState(false);
+  const [chkGlobal, setChkGlobal] = useState(false);
+  return (
+    <div className="option-container" key={customSelectId + option.id}>
+      <div className="main-item">
+        <CheckBox
+          id={"main-item-" + option.id}
+          label={option.name}
+          onChange={(e) => {
+            const subOptions = option.subOptions;
+            const filtersCopy = { ...activeFilters };
+            if (subOptions) {
+              setChkGlobal(e.target.checked);
+              if (e.target.checked) {
+                subOptions.forEach((element) => {
+                  if (!filtersCopy[option.name]) filtersCopy[option.name] = {};
+                  filtersCopy[option.name][element.name] = 1;
+                });
+                setParameterArray((current) => [
+                  ...current,
+                  ...subOptions.map((element) => element.id),
+                ]);
+              } else {
+                setParameterArray((current) =>
+                  current.filter(
+                    (item) => !subOptions.map((opt) => opt.id).includes(item)
+                  )
+                );
+                delete filtersCopy[option.name];
+              }
+            } else {
+              if (e.target.checked) {
+                filtersCopy[option.name] = 1;
+                setParameterArray((current) => [...current, option.id]);
+              } else {
+                delete filtersCopy[option.name];
+                setParameterArray((current) =>
+                  current.filter((item) => option.id !== item)
+                );
+              }
+            }
+            setActiveFilters(filtersCopy);
+          }}
+          defaultChecked={activeFilters[option.name]}
+        />
+        {option.subOptions && (
+          <div
+            onClick={() => setShowSubOptions(!showSubOptions)}
+            className="arrow-item"
+          >
+            &#9664;
+          </div>
+        )}
+      </div>
+      {showSubOptions && (
+        <div className="sub-menu">
+          {option?.subOptions?.map((sub) => (
+            <div
+              className="sub-filter"
+              key={customSelectId + "-" + option.id + "-" + sub.id}
+            >
+              <CheckBox
+                id={"sub-item-" + sub.id}
+                label={sub.name}
+                defaultChecked={
+                  activeFilters[option.name] &&
+                  activeFilters[option.name][sub.name]
+                }
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setParameterArray((current) =>
+                      [...current, sub.id].sort((a, b) => a - b)
+                    );
+                  } else {
+                    setParameterArray((current) =>
+                      current.filter((item) => sub.id !== item)
+                    );
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,134 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { SelecItem } from "./SelectItem";
+import { Calendar } from "../../organisms/Calendar";
+
+export const CustomSelect = ({
+  options,
+  showSearchBar,
+  placeHolder = "Buscar departamento",
+  selectLabel = "",
+  customSelectId = "defaultSelectId",
+  defaultOption,
+  setParameterArray,
+}) => {
+  const [filters, setFilters] = useState(options || []);
+  const [showList, setShowList] = useCloseModal(customSelectId);
+  const [text, setText] = useState("");
+  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  const [activeFilters, setActiveFilters] = useState({});
+
+  const onChange = (evt) => {
+    setText(evt.target.value);
+  };
+
+  useEffect(() => {
+    const today = new Date();
+    const diff = today.getDate() - today.getDay();
+    const start = new Date(today.setDate(diff));
+    const end = new Date();
+    setStartDate(start);
+    setEndDate(end);
+  }, []);
+
+  const onChangeDatePicker = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+    if (end)
+      setParameterArray((current) => {
+        return {
+          ...current,
+          startDate: `${start.getFullYear()}-${
+            start.getMonth() + 1
+          }-${start.getDate()}`,
+          endDate: `${end.getFullYear()}-${
+            end.getMonth() + 1
+          }-${end.getDate()}`,
+        };
+      });
+  };
+
+  useEffect(() => {
+    let filteredArray = options?.slice() || [];
+    if (text.length > 0) {
+      filteredArray = filteredArray.filter((option) =>
+        option?.name.toLowerCase().includes(text.toLocaleLowerCase())
+      );
+    }
+    setFilters(filteredArray);
+  }, [text]);
+
+  return (
+    <Container id={customSelectId}>
+      <div className="button-list" onClick={() => setShowList(true)}>
+        <p>{selectLabel}</p>
+        <div className="arrow-item">&#9664;</div>
+      </div>
+      {showList && (
+        <div className="select-container">
+          {showSearchBar && (
+            <div className="search-bar-filter">
+              <img src={searchIcon} alt="search icon" />
+              <input
+                type="text"
+                placeholder={placeHolder}
+                value={text}
+                onChange={onChange}
+              />
+            </div>
+          )}
+          {defaultOption && (
+            <div
+              className="default-option"
+              onClick={() => {
+                setParameterArray([]);
+                setActiveFilters({});
+                setShowList(false);
+              }}
+            >
+              <p>{defaultOption}</p>
+            </div>
+          )}
+          <div className="filters-container">
+            {filters?.map((option) =>
+              customSelectId === "dates-select" ? (
+                <div
+                  className="dates-select-item"
+                  key={customSelectId + option.id}
+                  onClick={() => {
+                    option.function
+                      ? option.function(setShowDatePicker)
+                      : setShowDatePicker(true);
+                  }}
+                >
+                  <p>{option.name}</p>
+                </div>
+              ) : (
+                <SelecItem
+                  key={customSelectId + option.id}
+                  option={option}
+                  customSelectId={customSelectId}
+                  setParameterArray={setParameterArray}
+                  activeFilters={activeFilters}
+                  setActiveFilters={setActiveFilters}
+                />
+              )
+            )}
+          </div>
+        </div>
+      )}
+      {showDatePicker && (
+        <Calendar
+          onChange={onChangeDatePicker}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  position: relative;
+
+  .button-list {
+    font-family: ${FontFamily.Raleway};
+    font-size: 13px;
+    display: flex;
+    padding: 10px 15px;
+    justify-content: space-between;
+    border-radius: 50px;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    cursor: pointer;
+
+    .arrow-item {
+      transform: rotate(-90deg);
+      cursor: pointer;
+      font-size: 10px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
+  .select-container {
+    box-shadow: 0px 2px 4px #00000040;
+    border-radius: 5px;
+    background-color: #fff;
+    padding-bottom: 10px;
+    position: absolute;
+    z-index: 10;
+    .search-bar-filter {
+      display: flex;
+      align-items: center;
+      border: 1px solid #f0f0f0;
+      padding-left: 10px;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+
+      input {
+        background-color: transparent;
+        padding: 10px 10px;
+        outline: none;
+        border: none;
+      }
+    }
+    .default-option {
+      padding-top: 5px;
+      cursor: pointer;
+      padding: 5px 10px;
+      color: #817393;
+      font-family: Avenir Next;
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 21px;
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+    .filters-container {
+      overflow: auto;
+      max-height: 500px;
+      .option-container,
+      .default-option {
+        cursor: pointer;
+        padding: 5px 10px;
+        .main-item {
+          display: flex;
+          justify-content: space-between;
+
+          .arrow-item {
+            transform: rotate(-90deg);
+            cursor: pointer;
+            font-size: 10px;
+          }
+        }
+        .sub-menu {
+          padding-left: 20px;
+          .sub-filter {
+            & + * {
+              margin-top: 10px;
+            }
+          }
+        }
+
+        &:hover {
+          background-color: #f0f0f0;
+        }
+        label {
+          white-space: nowrap;
+        }
+      }
+
+      .dates-select-item {
+        cursor: pointer;
+        padding: 5px 10px;
+        color: #817393;
+        font-family: Avenir Next;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 21px;
+        &:hover {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+  }
+`;

package/src/components/organisms/Calendar/styles.js

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  z-index: 20;
+  position: absolute;
   @charset "UTF-8";
   .react-datepicker__year-read-view--down-arrow,
   .react-datepicker__month-read-view--down-arrow,

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

@@ -1,64 +1,18 @@
 import { Container } from "./styles";
-import { MetricSelect } from "../../atoms/MetricSelect";
 import { Graphic } from "../../atoms/Graphic";
-import { Calendar } from "../Calendar";
-import { useEffect, useState } from "react";
 
 export const DashboardMetric = ({
   label,
   description,
-  retailerSelected,
   dataObject = { AA: 89 },
   indexAxis = "y",
   type = "bar",
   scale = "x",
   displayScale = false,
-  retailers = [],
-  setQueryObject,
-  queryObject,
+  displayLegend = false,
 }) => {
-  const onChangeRetailer = (e) => {
-    setQueryObject({ ...queryObject, retailerId: e.target.value });
-  };
-
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-
-  useEffect(() => {
-    const today = new Date();
-    const diff = today.getDate() - today.getDay();
-    const start = new Date(today.setDate(diff));
-    const end = new Date();
-    setStartDate(start);
-    setEndDate(end);
-  }, []);
-
-  const onChange = (dates) => {
-    const [start, end] = dates;
-    setStartDate(start);
-    setEndDate(end);
-    if (end)
-      setQueryObject({
-        ...queryObject,
-        startDate: `${start.getFullYear()}-${
-          start.getMonth() + 1
-        }-${start.getDate()}`,
-        endDate: `${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`,
-      });
-  };
-
   const labels = Object.keys(dataObject);
   const values = Object.values(dataObject);
-  const retailersArray = Object.values(retailers).sort((a, b) => {
-    if (a.name > b.name) {
-      return 1;
-    }
-    if (a.name < b.name) {
-      return -1;
-    }
-    // a must be equal to b
-    return 0;
-  });
   const colorsArray = values.map(
     () => `#${Math.floor(Math.random() * 16777215).toString(16)}`
   );
@@ -86,7 +40,7 @@ export const DashboardMetric = ({
     plugins: {
       legend: {
         position: "right",
-        display: false,
+        display: displayLegend,
       },
       title: {
         display: false,
@@ -107,16 +61,7 @@ export const DashboardMetric = ({
         <p>{label}</p>
         <p>{description}</p>
       </div>
-      <div className="select-container">
-        <Calendar onChange={onChange} startDate={startDate} endDate={endDate} />
-        <MetricSelect
-          className={"select"}
-          label={"Cadena comercial"}
-          optionSelected={retailerSelected}
-          options={retailersArray}
-          onChange={onChangeRetailer}
-        />
-      </div>
+      <div className="select-container"></div>
       <div className="graphic-cotainer">
         <Graphic data={data} options={options} type={type} />
       </div>

package/src/components/pages/Dashboard/Dashboard.stories.js

@@ -7,4 +7,39 @@ export default {
 
 const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
-DashboardDeafult.args = {};
+DashboardDeafult.args = {
+  user: {
+    id_user: 28,
+    name: "Proveedor",
+    last_name: "Colgate",
+    email: "ilopez@contentoh.com",
+    position: "Prueba Admin",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    email_notify: 1,
+    membership: {
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "20",
+      products_limit: "5000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777",
+  },
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
+};

package/src/components/pages/Dashboard/dashboardUtils.js

@@ -0,0 +1,62 @@
+import axios from "axios";
+
+export const getProviders = async (jwt, companyId) => {
+  const query = companyId ? `?companyId=${companyId}` : "";
+  const companies = await axios.get(
+    `${process.env.REACT_APP_READ_PROVIDERS}${query}`,
+    {
+      headers: {
+        Authorization: jwt,
+      },
+    }
+  );
+  const finalArray = transformProvidersArray(
+    JSON.parse(companies.data.body || "{}")?.providers || []
+  );
+  return finalArray;
+};
+
+const transformProvidersArray = (array) => {
+  const newArray = [];
+  array.forEach((element) => {
+    newArray.push({ id: element.id_company, name: element.trade_name });
+  });
+  return newArray;
+};
+
+export const getCategories = async () => {
+  const response = await axios.get(
+    `${process.env.REACT_APP_CATEGORY_ENDPOINT}`
+  );
+  const categories = JSON.parse(response.data.body)?.data;
+  const categoriesKeys = Object.keys(categories || {});
+  const subCategories = categoriesKeys?.map(
+    (key) => categories[key].sub_category
+  );
+  const finalArray = [];
+  let index = 0;
+  subCategories?.forEach((element) => {
+    element &&
+      Object.keys(element || {}).forEach((key) => {
+        const subCategory = element[key]?.sub_category || {};
+        const subOptions = [];
+        Object.keys(subCategory)?.forEach((subKey) => {
+          subOptions.push({
+            id: subCategory[subKey].id_category,
+            name: subKey,
+          });
+        });
+        finalArray.push({ id: index++, name: key, subOptions });
+      });
+  });
+
+  return finalArray;
+};
+
+export const formatDate = (date) => {
+  const newDate = new Date(date);
+  const year = newDate.getFullYear();
+  const month = newDate.getMonth() + 1;
+  const day = newDate.getDate();
+  return `${year}-${month}-${day}`;
+};