kupos-ui-components-lib 10.4.11 → 10.4.13

package/src/components/FilterSortBar/FilterSortBarMobile.tsx

@@ -0,0 +1,236 @@
+import React, { useEffect, useRef, useState } from "react";
+import FilterChip from "./FilterChip";
+import SingleFilterSheet from "./SingleFilterSheet";
+import FiltersMasterSheet from "./FiltersMasterSheet";
+import { DEFAULT_ICONS } from "./defaultIcons";
+import { FilterCategory, FilterCategoryKey, FilterSortBarMobileProps } from "./types";
+
+const DEFAULT_COLORS = {
+  primaryColor: "#FF5C60",
+  primaryTextColor: "#FFFFFF",
+  chipBorderColor: "#C0C0C0",
+  chipTextColor: "#464647",
+  badgeBackgroundColor: "#FFCBCC",
+  badgeTextColor: "#FF5C60",
+  // Falls back to primaryColor/primaryTextColor below when the consumer
+  // doesn't pass a dedicated CTA button color.
+  buttonColor: "#FF5C60",
+  buttonTextColor: "#FFFFFF",
+};
+
+const getCategoryActiveCount = (category: FilterCategory) => {
+  if (category.kind === "price" && category.priceRange) {
+    return category.priceRange.currentMin > category.priceRange.min ||
+      category.priceRange.currentMax < category.priceRange.max
+      ? 1
+      : 0;
+  }
+  return category.options?.filter((o) => o.selected).length || 0;
+};
+
+const isCategoryActive = (category: FilterCategory) => getCategoryActiveCount(category) > 0;
+
+/**
+ * Checkbox/slider interactions inside an open sheet only ever touch this
+ * local draft. Nothing outside the sheet — chip color, badge counts, the
+ * consumer's list — sees a change until Aplicar commits the draft via
+ * onApply. Closing the sheet without applying discards it.
+ */
+const FilterSortBarMobile = ({
+  categories,
+  onApply,
+  onClearFilter,
+  currencySign = "$",
+  colors,
+  icons,
+}: FilterSortBarMobileProps) => {
+  const [openSheet, setOpenSheet] = useState<FilterCategoryKey | "all" | null>(null);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [draftCategories, setDraftCategories] = useState<FilterCategory[]>(categories);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const resolvedColors = { ...DEFAULT_COLORS, ...colors };
+  const resolvedIcons = {
+    ...DEFAULT_ICONS,
+    ...icons,
+    categoryIcons: { ...DEFAULT_ICONS.categoryIcons, ...icons?.categoryIcons },
+    categoryIconsActive: { ...DEFAULT_ICONS.categoryIconsActive, ...icons?.categoryIconsActive },
+    timeOfDayIcons: { ...DEFAULT_ICONS.timeOfDayIcons, ...icons?.timeOfDayIcons },
+  };
+
+  // Re-sync the draft whenever the committed categories change from the
+  // outside (a real Aplicar/Borrar filtro commit, or fresh search results).
+  useEffect(() => {
+    setDraftCategories(categories);
+  }, [categories]);
+
+  const openCategory = draftCategories.find((c) => c.key === openSheet) || null;
+  const isMasterOpen = openSheet === "all";
+  const totalActiveCategories = categories.filter(isCategoryActive).length;
+
+  const handleScroll = () => {
+    setIsScrolled((scrollRef.current?.scrollLeft ?? 0) > 4);
+  };
+
+  const openSheetFor = (key: FilterCategoryKey | "all") => {
+    setDraftCategories(categories); // discard any leftover draft from a cancelled interaction
+    setOpenSheet(key);
+  };
+
+  const closeSheet = () => setOpenSheet(null);
+
+  const handleDraftToggleOption = (categoryKey: FilterCategoryKey, optionId: string) => {
+    setDraftCategories((prev) =>
+      prev.map((cat) =>
+        cat.key === categoryKey
+          ? {
+              ...cat,
+              options: (cat.options || []).map((o) =>
+                o.id === optionId ? { ...o, selected: !o.selected } : o,
+              ),
+            }
+          : cat,
+      ),
+    );
+  };
+
+  const handleDraftPriceRangeChange = (categoryKey: FilterCategoryKey, currentMin: number, currentMax: number) => {
+    setDraftCategories((prev) =>
+      prev.map((cat) =>
+        cat.key === categoryKey && cat.priceRange
+          ? { ...cat, priceRange: { ...cat.priceRange, currentMin, currentMax } }
+          : cat,
+      ),
+    );
+  };
+
+  const handleApplySingle = () => {
+    if (openSheet && openSheet !== "all") onApply(openSheet, draftCategories);
+    closeSheet();
+  };
+
+  const handleClearSingle = () => {
+    if (openSheet && openSheet !== "all") onClearFilter(openSheet);
+  };
+
+  const handleApplyAll = () => {
+    onApply("all", draftCategories);
+    closeSheet();
+  };
+
+  const handleClearAll = () => {
+    onClearFilter("all");
+  };
+
+  // Inline option chips (e.g. the four Horarios buckets) skip the sheet
+  // entirely — tapping one toggles it and applies immediately.
+  const handleInlineOptionToggle = (categoryKey: FilterCategoryKey, optionId: string) => {
+    const updated = categories.map((cat) =>
+      cat.key === categoryKey
+        ? {
+            ...cat,
+            options: (cat.options || []).map((o) =>
+              o.id === optionId ? { ...o, selected: !o.selected } : o,
+            ),
+          }
+        : cat,
+    );
+    onApply(categoryKey, updated);
+  };
+
+  return (
+    <div>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <FilterChip
+          label="Filtros"
+          active={totalActiveCategories > 0}
+          isOpen={isMasterOpen}
+          onClick={() => openSheetFor("all")}
+          isFiltersButton
+          badgeCount={totalActiveCategories}
+          collapsed={isScrolled}
+          colors={resolvedColors}
+          icons={resolvedIcons}
+        />
+        <div
+          style={{
+            width: 1,
+            alignSelf: "stretch",
+            backgroundColor: resolvedColors.chipBorderColor,
+            opacity: 0.5,
+            flexShrink: 0,
+          }}
+        />
+        <div
+          ref={scrollRef}
+          onScroll={handleScroll}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            overflowX: "auto",
+            scrollbarWidth: "none",
+            paddingBottom: 2,
+          }}
+        >
+          {categories.map((category) => (
+            <FilterChip
+              key={category.key}
+              label={category.label}
+              active={isCategoryActive(category)}
+              isOpen={openSheet === category.key}
+              onClick={() => openSheetFor(category.key)}
+              iconSrc={resolvedIcons.categoryIcons?.[category.key]}
+              activeIconSrc={resolvedIcons.categoryIconsActive?.[category.key]}
+              badgeCount={getCategoryActiveCount(category)}
+              colors={resolvedColors}
+              icons={resolvedIcons}
+            />
+          ))}
+          {categories
+            .filter((category) => category.inlineOptions && category.options?.length)
+            .flatMap((category) =>
+              (category.options || []).map((option) => (
+                <FilterChip
+                  key={`${category.key}:${option.id}`}
+                  label={option.label}
+                  active={option.selected}
+                  isOpen={false}
+                  onClick={() => handleInlineOptionToggle(category.key, option.id)}
+                  iconSrc={option.icon ? resolvedIcons.timeOfDayIcons?.[option.icon] : undefined}
+                  colors={resolvedColors}
+                  icons={resolvedIcons}
+                />
+              )),
+            )}
+        </div>
+      </div>
+
+      <SingleFilterSheet
+        category={openCategory}
+        onClose={closeSheet}
+        onToggleOption={(optionId) => openSheet && openSheet !== "all" && handleDraftToggleOption(openSheet, optionId)}
+        onPriceRangeChange={(min, max) => openSheet && openSheet !== "all" && handleDraftPriceRangeChange(openSheet, min, max)}
+        onClear={handleClearSingle}
+        onApply={handleApplySingle}
+        currencySign={currencySign}
+        colors={resolvedColors}
+        icons={resolvedIcons}
+      />
+
+      <FiltersMasterSheet
+        isOpen={isMasterOpen}
+        categories={draftCategories}
+        onClose={closeSheet}
+        onToggleOption={handleDraftToggleOption}
+        onPriceRangeChange={handleDraftPriceRangeChange}
+        onClearAll={handleClearAll}
+        onApplyAll={handleApplyAll}
+        currencySign={currencySign}
+        colors={resolvedColors}
+        icons={resolvedIcons}
+      />
+    </div>
+  );
+};
+
+export default FilterSortBarMobile;

package/src/components/FilterSortBar/FiltersMasterSheet.tsx

@@ -0,0 +1,208 @@
+import React, { useMemo, useState } from "react";
+import { BottomSheet } from "../../ui/BottomSheet";
+import { CloseIcon, SearchIcon } from "./icons";
+import OptionCheckboxList from "./OptionCheckboxList";
+import PriceRangeSlider from "./PriceRangeSlider";
+import SheetFooter from "./SheetFooter";
+import { FilterCategory, FilterCategoryKey, FilterSortBarColors, FilterSortBarIcons } from "./types";
+
+interface FiltersMasterSheetProps {
+  isOpen: boolean;
+  categories: FilterCategory[];
+  onClose: () => void;
+  onToggleOption: (categoryKey: FilterCategoryKey, optionId: string) => void;
+  onPriceRangeChange: (categoryKey: FilterCategoryKey, currentMin: number, currentMax: number) => void;
+  onClearAll: () => void;
+  onApplyAll: () => void;
+  currencySign: string;
+  colors: Required<FilterSortBarColors>;
+  icons?: FilterSortBarIcons;
+}
+
+const FiltersMasterSheet = ({
+  isOpen,
+  categories,
+  onClose,
+  onToggleOption,
+  onPriceRangeChange,
+  onClearAll,
+  onApplyAll,
+  currencySign,
+  colors,
+  icons,
+}: FiltersMasterSheetProps) => {
+  const [activeKey, setActiveKey] = useState<FilterCategoryKey>(categories[0]?.key ?? "time");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const activeCategory = categories.find((c) => c.key === activeKey) || categories[0];
+
+  const filteredOptions = useMemo(() => {
+    if (!activeCategory?.options) return [];
+    if (!searchQuery.trim()) return activeCategory.options;
+    const q = searchQuery.trim().toLowerCase();
+    return activeCategory.options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [activeCategory, searchQuery]);
+
+  if (!isOpen) return null;
+
+  return (
+    <BottomSheet isOpen={isOpen} onClose={onClose} showBackdrop height="75vh" padding="20px 0 0px">
+      <div style={{ display: "flex", flexDirection: "column", height: "calc(75vh - 40px)" }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0 20px 14px",
+          }}
+        >
+          <span style={{ fontSize: 16, fontWeight: 700, color: "#464647" }}>Filtros</span>
+          <div
+            onClick={onClose}
+            style={{ cursor: "pointer", padding: 4, WebkitTapHighlightColor: "transparent" }}
+          >
+            <CloseIcon size={14} src={icons?.closeIcon} />
+          </div>
+        </div>
+
+        <div style={{ padding: "0 20px 14px" }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              border: "1px solid #E5E5E5",
+              borderRadius: 10,
+              padding: "9px 12px",
+            }}
+          >
+            <SearchIcon size={15} src={icons?.searchIcon} />
+            <input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Buscar filtro"
+              style={{
+                border: "none",
+                outline: "none",
+                fontSize: 13,
+                flex: 1,
+                color: "#464647",
+                background: "transparent",
+              }}
+            />
+          </div>
+        </div>
+
+        <div style={{ display: "flex", flex: 1, overflow: "hidden", position: "relative", borderTop: "1px solid #E5E5E5", borderBottom: "1px solid #E5E5E5" }}>
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: 130,
+              backgroundColor: "#F3F4F6",
+              zIndex: 0,
+            }}
+          />
+          <div
+            style={{
+              width: 130,
+              flexShrink: 0,
+              position: "relative",
+              zIndex: 1,
+            }}
+          >
+            {categories.map((cat) => {
+              const isActive = cat.key === activeKey;
+              return (
+                <div
+                  key={cat.key}
+                  onClick={() => setActiveKey(cat.key)}
+                  style={{
+                    position: "relative",
+                    display: "flex",
+                    alignItems: "center",
+                    minHeight: 44,
+                    boxSizing: "border-box",
+                    padding: "8px 8px 8px 20px",
+                    fontSize: 13,
+                    lineHeight: 1.25,
+                    fontWeight: isActive ? 700 : 400,
+                    color: isActive ? colors.primaryColor : "#464647",
+                    backgroundColor: isActive ? "#fff" : "transparent",
+                    cursor: "pointer",
+                    WebkitTapHighlightColor: "transparent",
+                    userSelect: "none",
+                    WebkitUserSelect: "none",
+                  }}
+                >
+                  {isActive && (
+                    <div
+                      style={{
+                        position: "absolute",
+                        left: 0,
+                        top: 8,
+                        bottom: 8,
+                        width: 4,
+                        borderTopRightRadius: 4,
+                        borderBottomRightRadius: 4,
+                        backgroundColor: colors.primaryColor,
+                      }}
+                    />
+                  )}
+                  {cat.label}
+                </div>
+              );
+            })}
+          </div>
+
+          <div
+            style={{ flex: 1, overflowY: "auto", paddingLeft: 16, paddingRight: 20, position: "relative", zIndex: 1, backgroundColor: "#fff" }}
+          >
+            {activeCategory && (
+              <div
+                style={{
+                  fontSize: 11,
+                  fontWeight: 700,
+                  color: "#9B9B9B",
+                  textTransform: "uppercase",
+                  letterSpacing: 0.4,
+                  marginBottom: 5,
+                  marginTop: 15,
+                }}
+              >
+                {activeCategory.sectionLabel || activeCategory.label}
+              </div>
+            )}
+            {activeCategory?.kind === "price" && activeCategory.priceRange ? (
+              <PriceRangeSlider
+                value={activeCategory.priceRange}
+                onChange={(min, max) => onPriceRangeChange(activeCategory.key, min, max)}
+                currencySign={currencySign}
+                primaryColor={colors.primaryColor}
+                minLabel="Mínimo"
+                maxLabel="Máximo"
+              />
+            ) : (
+              <OptionCheckboxList
+                options={filteredOptions}
+                kind={activeCategory?.kind || "checkbox"}
+                onToggle={(optionId) => onToggleOption(activeCategory.key, optionId)}
+                primaryColor={colors.primaryColor}
+                starColor={colors.buttonColor || colors.primaryColor}
+                icons={icons}
+              />
+            )}
+          </div>
+        </div>
+
+        <div style={{ padding: "0px 20px 0" }}>
+          <SheetFooter onClear={onClearAll} onApply={onApplyAll} colors={colors} />
+        </div>
+      </div>
+    </BottomSheet>
+  );
+};
+
+export default FiltersMasterSheet;

package/src/components/FilterSortBar/OptionCheckboxList.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { FilterOptionItem, FilterCategoryKind, FilterSortBarIcons } from "./types";
+import { CheckboxIcon, StarIcon, TimeOfDayIcon } from "./icons";
+
+interface OptionCheckboxListProps {
+  options: FilterOptionItem[];
+  kind: FilterCategoryKind;
+  onToggle: (optionId: string) => void;
+  primaryColor: string;
+  /** Filled-star color for rating options — the app's button/CTA color, not the chip accent. */
+  starColor: string;
+  icons?: FilterSortBarIcons;
+}
+
+const RatingLabel = ({
+  stars,
+  label,
+  starColor,
+  icons,
+}: {
+  stars?: number;
+  label: string;
+  starColor: string;
+  icons?: FilterSortBarIcons;
+}) => (
+  <div style={{ display: "flex", alignItems: "center", gap: 1, whiteSpace: "nowrap" }}>
+    {Array.from({ length: 5 }, (_, i) => (
+      <StarIcon
+        key={i}
+        size={10}
+        filled={stars != null && i < stars}
+        color={starColor}
+        filledSrc={icons?.starFilledIcon}
+        emptySrc={icons?.starEmptyIcon}
+      />
+    ))}
+    <span style={{ marginLeft: 6 }}>{label}</span>
+  </div>
+);
+
+const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor, icons }: OptionCheckboxListProps) => {
+  if (!options?.length) {
+    return (
+      <div style={{ padding: "24px 0", textAlign: "center", color: "#9B9B9B", fontSize: 13 }}>
+        No hay opciones disponibles
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {options.map((option) => (
+        <div
+          key={option.id}
+          onClick={() => onToggle(option.id)}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 2px",
+            cursor: "pointer",
+            fontSize: 13,
+            color: "#464647",
+            WebkitTapHighlightColor: "transparent",
+            userSelect: "none",
+            WebkitUserSelect: "none",
+          }}
+        >
+          {kind === "rating" ? (
+            <RatingLabel stars={option.stars} label={option.label} starColor={starColor} icons={icons} />
+          ) : option.icon ? (
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <TimeOfDayIcon variant={option.icon} size={16} src={icons?.timeOfDayIcons?.[option.icon]} />
+              <span>{option.label}</span>
+            </div>
+          ) : (
+            <span>{option.label}</span>
+          )}
+          <CheckboxIcon checked={option.selected} color={primaryColor} spriteSrc={icons?.checkBoxIcon} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OptionCheckboxList;