contentoh-components-library 21.4.133 → 21.4.134

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

@@ -1,128 +0,0 @@
-import { Container, StateReview } from "./styles";
-import { ImageCarousel } from "../../atoms/ImageCarousel";
-import { Status } from "../../atoms/Status";
-import { PercentTag } from "../../atoms/PercentTag";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { faStar as starIcon } from "@fortawesome/free-regular-svg-icons";
-import { faCartPlus as cartIcon } from "@fortawesome/free-solid-svg-icons";
-import { RatingStars } from "../../atoms/RatingStars";
-import { CheckBox } from "../../atoms/CheckBox";
-import high from "../../../assets/images/flags/highPriority.svg";
-import low from "../../../assets/images/flags/lowPriority.svg";
-
-export const GridItem = ({
-  gridElement = {},
-  product,
-  id,
-  isMerchans = false,
-  chkOnChange,
-  onGridClick,
-  chkChecked,
-  index,
-}) => {
-  const { images, info, status, catalogs, observations } = gridElement;
-  const getSrvName = (srv) => {
-    switch (srv) {
-      case "datasheet":
-        return "F.T.";
-      case "description":
-        return "D.C.";
-      case "images":
-        return "IMG";
-      case "general":
-        return "S.G.";
-      default:
-        return srv;
-    }
-  };
-
-  return (
-    <Container onClick={(e) => onGridClick && onGridClick(e, product, index)}>
-      <div className="chk-container" onClick={(e) => e.stopPropagation()}>
-        <CheckBox
-          id={"chk-" + id}
-          name={"chk-" + id}
-          className="chk-absolute"
-          onChange={(e) => chkOnChange && chkOnChange(e, product)}
-          defaultChecked={chkChecked && chkChecked(product)}
-        />
-      </div>
-      <ImageCarousel imageArray={images} />
-      <div className="data-body">
-        {info?.map((item, i) =>
-          i === 0 ? <h3 key={i}>{item.value}</h3> : <p key={i}>{item.value}</p>
-        )}
-      </div>
-      <div className="status-slider">
-        {product.observations && (
-          <figure>
-            <img
-              style={{
-                height: 15,
-                width: 15,
-                objectFit: "scale-down",
-              }}
-              src={
-                product.observations !== null && product.observations !== ""
-                  ? high
-                  : low
-              }
-              alt={""}
-            />
-          </figure>
-        )}
-        {product.reviewState && (
-          <StateReview backgroundColor={`${product.reviewState}`}>
-            {product.reviewState}
-          </StateReview>
-        )}
-        {status?.map(({ title, value, percent }) => (
-          <div className="status-element">
-            {title && (
-              <div className="srv-name">
-                <p>{getSrvName(title)}</p>
-              </div>
-            )}
-            {value && <Status statusType={value} />}
-            {percent && (
-              <PercentTag percent={percent} progressBarType={value} />
-            )}
-          </div>
-        ))}
-      </div>
-      {isMerchans ? (
-        <div className="cart-and-raiting">
-          <ButtonV2
-            borderType="circle"
-            type="whiteS2"
-            icon={starIcon}
-            size={10}
-            className="star-button"
-          />
-          <ButtonV2
-            borderType="circle"
-            type="whiteS2"
-            icon={cartIcon}
-            size={10}
-            className="star-button"
-          />
-          <ButtonV2
-            borderType="circle"
-            type="whiteS2"
-            icon={cartIcon}
-            size={10}
-            className="star-button"
-          />
-          <RatingStars ratingValue={4} />
-        </div>
-      ) : (
-        catalogs && (
-          <div className="retailers-and-user">
-            <div className="retailers-container">{catalogs.leftSide}</div>
-            <div className="users-container">{catalogs.rightSide}</div>
-          </div>
-        )
-      )}
-    </Container>
-  );
-};

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

@@ -1,129 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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;
-        }
-      }
-    }
-  }
-`;