contentoh-components-library 21.4.135 → 21.4.136

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

@@ -0,0 +1,129 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 175px;
+  border: 1px solid #f0f0f0;
+  position: relative;
+  height: fit-content;
+
+  .chk-container {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 5;
+    height: 16px;
+  }
+
+  .data-body {
+    padding: 10px;
+    border-bottom: 1px solid #f0f0f0;
+
+    & > h3,
+    & > p {
+      color: #262626;
+      font-family: ${FontFamily.Lato};
+      font-size: 12px;
+      line-height: 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      & + p {
+        margin-top: 5px;
+      }
+    }
+    p {
+      font-size: 10px;
+      line-height: 12px;
+      color: #808080;
+    }
+  }
+
+  .status-slider {
+    display: flex;
+    padding: 5px 10px;
+    overflow: auto;
+    border-bottom: 1px solid #f0f0f0;
+    flex-wrap: nowrap;
+
+    .status-element {
+      display: flex;
+
+      .srv-name {
+        background-color: #808080;
+        padding: 0 10px;
+        border-radius: 5px;
+        p {
+          font-family: ${FontFamily.AvenirNext};
+          font-size: 12px;
+          line-height: 20px;
+          font-weight: 700;
+          color: #fff;
+        }
+      }
+    }
+
+    * + * {
+      margin-left: 10px;
+    }
+  }
+
+  .cart-and-raiting,
+  .retailers-and-user {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 10px;
+    .star-button {
+      button {
+        padding: 3px;
+        color: transparent;
+        -webkit-text-stroke: 1px #808080;
+      }
+    }
+  }
+
+  .retailers-and-user {
+    padding: 0;
+    > * {
+      flex: 1 0 50%;
+      display: flex;
+      padding: 5px;
+      height: 36px;
+    }
+    .retailers-container {
+      border-right: 1px solid #f0f0f0;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 1px 2px 5px black;
+  }
+`;
+
+export const StateReview = styled.div`
+  background: ${(props) => {
+    switch (props.backgroundColor) {
+      case "rejected_to_provider":
+        return "#d90202";
+      case "approved":
+        return "#28e602";
+      case "in_progress":
+        return "rgb(24, 160, 251)";
+      case "onboarding_flow":
+        return "#e6b802";
+      default:
+        return "gray";
+    }
+  }};
+  display: inline-block;
+  padding: 0 10px;
+  border-radius: 5px;
+  font-family: ${FontFamily.Lato};
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 20px;
+  color: white;
+`;

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

@@ -0,0 +1,35 @@
+import { GroupSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
+
+export default {
+  title: "Components/molecules/GroupSelect",
+  component: GroupSelect,
+};
+
+const Template = (args) => <GroupSelect {...args} />;
+export const GroupSelectDefault = Template.bind({});
+GroupSelectDefault.args = {
+  // selectLabel: "Todos los departamentos",
+  defaultOption: "Todos los departamentos",
+  options: [
+    {
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
+    },
+  ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
+};

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

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const SelecItem = ({
+  option,
+  customSelectId,
+  setParameterArray,
+  activeFilters,
+  setActiveFilters,
+  onClickItem,
+}) => {
+  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}
+          typeColor="purple"
+          onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
+            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 (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
+                  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/GroupSelect/index.js

@@ -0,0 +1,190 @@
+import { Container } from "./styles";
+import { useEffect, useState } from "react";
+import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
+import { useCloseModal } from "../../../global-files/customHooks";
+import { Calendar } from "../../organisms/Calendar";
+import { CustomSelectItem } from "../../atoms/CustomSelectItem";
+import add from "../../../assets/images/Icons/addv2.svg";
+
+export const GroupSelect = ({
+  options,
+  showSearchBar,
+  placeHolder = "Buscar departamento",
+  selectLabel = "",
+  customSelectId = "defaultSelectId",
+  defaultOption,
+  parameterArray,
+  setParameterArray,
+  onClickItem,
+  customOptions,
+  isSingleSelect = false,
+}) => {
+  const [filters, setFilters] = useState([]);
+  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 [filtersString, setFiltersString] = useState(selectLabel);
+  const [filtersCounter, setFiltersCounter] = useState(0);
+
+  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 obj = {};
+    options.forEach((o) => {
+      const { name, isSelected, subOptions } = o;
+      if (isSelected) obj[name] = {};
+      subOptions?.forEach((so) => {
+        const { name: nameSO, isSelected: isSelectedSO } = so;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
+
+  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]);
+
+  useEffect(async () => {
+    let newFiltersString = selectLabel;
+    let counter = 0;
+    const filtersArray = Object.keys(activeFilters);
+    filtersArray.length &&
+      filtersArray.forEach((key, index) => {
+        if (index === 0) newFiltersString = key;
+        else {
+          counter++;
+        }
+      });
+    setFiltersCounter(counter);
+    setFiltersString(newFiltersString);
+  }, [activeFilters]);
+
+  return (
+    <Container
+      id={customSelectId}
+      selectLabel={selectLabel}
+      filterActive={
+        Object.keys(activeFilters).length > 0 ||
+        (customSelectId === "dates-select" &&
+          filtersString !== "Todo el tiempo")
+      }
+    >
+      <div className="button-list" onClick={() => setShowList(!showList)}>
+        <p>{filtersString} </p>
+        <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
+        <img src={add} alt="Favorite" width={"20px"} />
+      </div>
+      {showList &&
+        (customOptions ? (
+          customOptions
+        ) : (
+          <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 && setParameterArray([]);
+                  setActiveFilters({});
+                  setShowList(false);
+                  setFiltersString(selectLabel);
+                  setFiltersCounter(0);
+                }}
+              >
+                <p>{defaultOption}</p>
+              </div>
+            )}
+            <div className="filters-container">
+              {filters?.map((option) =>
+                isSingleSelect ? (
+                  <div
+                    className="dates-select-item"
+                    key={customSelectId + option.id}
+                    onClick={() => {
+                      option.function
+                        ? option.function(setShowDatePicker)
+                        : setShowDatePicker(true);
+                      setFiltersString(option.name);
+                    }}
+                  >
+                    <p>{option.name}</p>
+                  </div>
+                ) : (
+                  <CustomSelectItem
+                    className={"main-option"}
+                    key={customSelectId + option.id}
+                    option={option}
+                    customSelectId={customSelectId}
+                    setParameterArray={setParameterArray}
+                    activeFilters={activeFilters}
+                    globalFilters={activeFilters}
+                    parameterArray={parameterArray}
+                    setActiveFilters={setActiveFilters}
+                    onClickItem={onClickItem}
+                    route={option.name}
+                  />
+                )
+              )}
+            </div>
+          </div>
+        ))}
+      {showDatePicker && (
+        <Calendar
+          onChange={onChangeDatePicker}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,124 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  position: relative;
+
+  .button-list {
+    font-family: ${FontFamily.RobotoRegular}, sans-serif;
+    font-size: 12px;
+    display: flex;
+    width:30px;
+    height:30px;
+    padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "7px 7px")};
+    justify-content: space-between;
+    border-radius: 50px;
+    background-color: ${({ filterActive }) =>
+      filterActive ? "#F7F7FC" : "#fff"};
+    border: 1px solid ${GlobalColors.magenta_s2};
+    cursor: pointer;
+
+    & > p {
+      max-width: 140px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+    img{
+      width:14px;
+      height:14px;
+    }
+  }
+
+  .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 {
+          margin-top: 10px;
+          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/molecules/HeaderItem/ColumnItem.js

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

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

@@ -0,0 +1,24 @@
+import { HeaderItem } from ".";
+
+export default {
+  title: "Components/molecules/HeaderItem",
+  component: HeaderItem,
+};
+
+const Template = (args) => <HeaderItem {...args} />;
+export const HeaderItemDefault = Template.bind({});
+
+HeaderItemDefault.args = {
+  columnsArray: [
+    { name: "Reg", flex: 1, minWidth: 100 },
+    { name: "Orden", flex: 1, minWidth: 100 },
+    { name: "UPC", flex: 1, minWidth: 100 },
+    { name: "Nombre", flex: 1, minWidth: 100 },
+    { name: "Marca", flex: 1, minWidth: 100 },
+    { name: "Estatus", flex: 1, minWidth: 100 },
+    { name: "Cadenas", flex: 1, minWidth: 100 },
+    { name: "Prio", flex: 1, minWidth: 100 },
+    { name: "E.D", flex: 1, minWidth: 100 },
+    { name: "Cont.", flex: 1, minWidth: 100 },
+  ],
+};

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

@@ -0,0 +1,26 @@
+import { Container } from "./styles";
+import { ColumnItem } from "./ColumnItem";
+import { CheckBox } from "../../atoms/CheckBox";
+
+export const HeaderItem = ({ columnsArray = [], checkAll, chkCheckedAll }) => {
+  return (
+    <Container>
+      <div className="chk-global-container">
+        <CheckBox
+          id={"chk-global"}
+          name={"chk-global"}
+          onChange={(e) => checkAll && checkAll(e)}
+          checked={chkCheckedAll && chkCheckedAll()}
+        />
+      </div>
+      {columnsArray.map((col, i) => (
+        <ColumnItem
+          key={i}
+          flex={col.flex}
+          name={col.name}
+          minWidth={col.minWidth}
+        />
+      ))}
+    </Container>
+  );
+};

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

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: #f0f0f0;
+  display: flex;
+  width: 100%;
+  min-width: fit-content;
+
+  .chk-global-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 30px;
+  }
+`;
+
+export const Column = styled.div`
+  flex: ${({ flex }) => (flex ? flex : 1)};
+  min-width: ${({ minWidth }) => (minWidth ? minWidth : 100)}px;
+  text-align: center;
+  color: #262626;
+  font-family: ${FontFamily.Lato};
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px 5px;
+`;