kupos-ui-components-lib 8.0.4 → 8.0.5

package/dist/KuposUIComponent.js

@@ -14,6 +14,7 @@ import ResponsiveServiceItem from "./components/ServiceItem/ResponsiveServiceIte
 import { ResponsivePaymentSideBar } from "./components/PaymentSideBar";
 import { ResponsiveServiceList } from "./components/ServiceList";
 import { ResponsiveFilterBar } from "./components/FilterBar";
+import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
 // Using imported ResponsivePaymentSideBar component instead
 export default function KuposUIComponent(props) {
     const { typeOfComponent } = props, restProps = __rest(props, ["typeOfComponent"]);
@@ -26,6 +27,8 @@ export default function KuposUIComponent(props) {
             return (React.createElement(ResponsiveServiceList, Object.assign({}, restProps)));
         case "filterbar":
             return (React.createElement(ResponsiveFilterBar, Object.assign({}, restProps)));
+        case "cuponerafilterbar":
+            return (React.createElement(ResponsiveCuponeraFilterBar, Object.assign({}, restProps)));
         default:
             return (React.createElement("div", { className: "error-message" },
                 "Invalid component type: ",

package/dist/components/CuponeraFilterBar/FilterBarDesktop.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CuponeraFilterBarProps } from "./types";
+declare const FilterBarDesktop: ({ t, seats, filters, setFilters, expandedFilters, setExpandedFilters, translation, colors, icons, }: CuponeraFilterBarProps) => React.JSX.Element;
+export default FilterBarDesktop;

package/dist/components/CuponeraFilterBar/FilterBarDesktop.js

@@ -0,0 +1,111 @@
+import React from "react";
+import commonService from "../../utils/CommonService";
+const FilterBarDesktop = ({ t, seats, filters, setFilters, expandedFilters, setExpandedFilters, translation, colors, icons, }) => {
+    const uniqueCouponCounts = [
+        ...new Set(seats.map((seat) => {
+            var _a;
+            return ((_a = seat === null || seat === void 0 ? void 0 : seat.coupon_details) === null || _a === void 0 ? void 0 : _a.ticketNumbers)
+                ? seat.no_of_coupons * 2
+                : seat.no_of_coupons;
+        })),
+    ].sort((a, b) => a - b);
+    const uniqueOperators = [
+        ...new Set(seats
+            .map((seat) => {
+            var _a;
+            return ((_a = seat === null || seat === void 0 ? void 0 : seat.coupon_details) === null || _a === void 0 ? void 0 : _a.company) || seat.operator_name;
+        })
+            .filter(Boolean)),
+    ];
+    const uniqueSeatTypes = [
+        ...new Set(seats
+            .map((seat) => {
+            var _a;
+            return ((_a = seat === null || seat === void 0 ? void 0 : seat.coupon_details) === null || _a === void 0 ? void 0 : _a.seatType) ||
+                ((seat === null || seat === void 0 ? void 0 : seat.seat_type_name)
+                    ? commonService.capitalize(seat === null || seat === void 0 ? void 0 : seat.seat_type_name)
+                    : null);
+        })
+            .filter(Boolean)),
+    ];
+    const toggleFilterSection = (section) => {
+        setExpandedFilters((prev) => (Object.assign(Object.assign({}, prev), { [section]: !prev[section] })));
+    };
+    const applyFilter = (type, value) => {
+        setFilters((prev) => {
+            const currentValues = [...prev[type]];
+            const valueIndex = currentValues.indexOf(value);
+            if (valueIndex !== -1) {
+                currentValues.splice(valueIndex, 1);
+            }
+            else {
+                currentValues.push(value);
+            }
+            return Object.assign(Object.assign({}, prev), { [type]: currentValues });
+        });
+    };
+    const removeAllFilters = () => {
+        setFilters({
+            couponCount: [],
+            operator: [],
+            seatType: [],
+        });
+    };
+    const hasActiveFilters = filters.couponCount.length > 0 ||
+        filters.operator.length > 0 ||
+        filters.seatType.length > 0;
+    const renderFilterSection = (title, sectionKey, items, filterType) => {
+        if (items.length === 0)
+            return null;
+        const isOpen = expandedFilters[sectionKey];
+        return (React.createElement("div", null,
+            React.createElement("div", { onClick: () => toggleFilterSection(sectionKey), className: "bold-text flex items-center justify-between mt-[13px] mb-[5px]" },
+                title,
+                React.createElement("img", { src: isOpen ? icons === null || icons === void 0 ? void 0 : icons.iconUp : icons === null || icons === void 0 ? void 0 : icons.iconDown, alt: "toggle", className: `w-[auto] h-[9px] transition-all duration-300 cursor-pointer` })),
+            React.createElement("div", { className: `transition-all duration-300 ease-in-out ${isOpen
+                    ? "opacity-100 translate-y-0"
+                    : "max-h-0 opacity-0 -translate-y-1"}` }, isOpen &&
+                items.map((item, i) => {
+                    var _a;
+                    const isActive = (_a = filters[filterType]) === null || _a === void 0 ? void 0 : _a.includes(item);
+                    const displayLabel = filterType === "couponCount"
+                        ? `${item} pasajes`
+                        : typeof item === "string"
+                            ? item.toLowerCase()
+                            : item;
+                    return (React.createElement("div", { key: i, onClick: () => applyFilter(filterType, item), style: {
+                            margin: isActive ? "3px 0" : "0",
+                            backgroundColor: isActive
+                                ? (colors === null || colors === void 0 ? void 0 : colors.selectedBackgroundColor) || "#ffdede"
+                                : "",
+                            padding: "2px 0px",
+                            paddingLeft: isActive ? "11px" : "",
+                            marginLeft: isActive ? "-10px" : "",
+                            color: isActive
+                                ? (colors === null || colors === void 0 ? void 0 : colors.selectedFontColor) || "#ff5c60"
+                                : (colors === null || colors === void 0 ? void 0 : colors.fontColor) || "",
+                            transition: "background-color 0.25s ease, padding-left 0.25s ease, margin-left 0.25s ease",
+                        }, className: `flex items-center h-[24px] rounded-[15px] cursor-pointer pt-[4px] ${isActive ? "bold-text" : ""}` },
+                        React.createElement("span", { style: { textTransform: "capitalize" } }, displayLabel)));
+                }))));
+    };
+    return (React.createElement("div", { className: "relative" },
+        React.createElement("div", { style: {
+                overflowY: "scroll",
+                scrollbarWidth: "none",
+                boxShadow: "none",
+                border: "1px solid #ddd",
+                zIndex: "9",
+            }, className: "p-[16px_20px] relative mb-[20px] max-h-[66vh] rounded-[20px] bg-[#fff]" },
+            React.createElement("span", { className: "text-[17.33px] bold-text flex justify-center mt-[20px]" }, translation === null || translation === void 0 ? void 0 : translation.filterHeading),
+            React.createElement("div", { className: "text-[13.33px] pb-[10px]" },
+                renderFilterSection((t === null || t === void 0 ? void 0 : t("CUPONERA.NUMBER_OF_TICKETS")) || "", "couponCount", uniqueCouponCounts, "couponCount"),
+                renderFilterSection((t === null || t === void 0 ? void 0 : t("CUPONERA.COMPANY")) || "", "operator", uniqueOperators, "operator"),
+                renderFilterSection((t === null || t === void 0 ? void 0 : t("CUPONERA.SEAT_TYPE")) || "", "seatType", uniqueSeatTypes, "seatType"))),
+        React.createElement("div", { onClick: removeAllFilters, className: `group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${hasActiveFilters
+                ? "translate-y-0 opacity-100"
+                : "translate-y-[-10px] opacity-0 pointer-events-none"}` },
+            React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.crossIcon, alt: "removeFilterIcon", className: "w-[16px] h-[16px] mr-[10px] transition-transform duration-300 group-hover:scale-110" }),
+            (translation === null || translation === void 0 ? void 0 : translation.removeFilters) || (t === null || t === void 0 ? void 0 : t("RESULTS_PAGE.REMOVE_FILTERS")))));
+};
+export default FilterBarDesktop;

package/dist/components/CuponeraFilterBar/FilterBarMobile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CuponeraFilterBarProps } from "./types";
+declare const FilterBarMobile: (props: CuponeraFilterBarProps) => React.JSX.Element;
+export default FilterBarMobile;

package/dist/components/CuponeraFilterBar/FilterBarMobile.js

@@ -0,0 +1,5 @@
+import React from "react";
+const FilterBarMobile = (props) => {
+    return React.createElement("div", null, "FilterBarMobile");
+};
+export default FilterBarMobile;

package/dist/components/CuponeraFilterBar/ResponsiveCuponeraFilterBar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CuponeraFilterBarProps } from "../CuponeraFilterBar/types";
+export default function ResponsiveCuponeraFilterBar(props: CuponeraFilterBarProps): React.JSX.Element;

package/dist/components/CuponeraFilterBar/ResponsiveCuponeraFilterBar.js

@@ -0,0 +1,10 @@
+import React from "react";
+import FilterBarMobile from "../CuponeraFilterBar/FilterBarMobile";
+import FilterBarDesktop from "../CuponeraFilterBar/FilterBarDesktop";
+export default function ResponsiveCuponeraFilterBar(props) {
+    const { variant } = props;
+    if (variant === "mobile") {
+        return (React.createElement(FilterBarMobile, Object.assign({}, props)));
+    }
+    return React.createElement(FilterBarDesktop, Object.assign({}, props));
+}

package/dist/components/CuponeraFilterBar/index.d.ts

@@ -0,0 +1,5 @@
+import FilterBarDesktop from "../CuponeraFilterBar/FilterBarDesktop";
+import FilterBarMobile from "../CuponeraFilterBar/FilterBarMobile";
+import ResponsiveFilterBar from "../CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+export { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar };
+export type { CuponeraFilterBarProps } from "../CuponeraFilterBar/types";

package/dist/components/CuponeraFilterBar/index.js

@@ -0,0 +1,4 @@
+import FilterBarDesktop from "../CuponeraFilterBar/FilterBarDesktop";
+import FilterBarMobile from "../CuponeraFilterBar/FilterBarMobile";
+import ResponsiveFilterBar from "../CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+export { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar };

package/dist/components/CuponeraFilterBar/types.d.ts

@@ -0,0 +1,22 @@
+export interface CuponeraFilterBarProps {
+    variant?: "mobile" | "desktop";
+    t?: (key: string) => string;
+    seats: any;
+    filters: any;
+    setFilters: any;
+    expandedFilters: any;
+    setExpandedFilters: any;
+    translation?: {
+        [key: string]: string;
+    };
+    colors: {
+        fontColor?: string;
+        selectedFontColor?: string;
+        selectedBackgroundColor?: string;
+    };
+    icons?: {
+        iconUp?: string;
+        iconDown?: string;
+        crossIcon?: string;
+    };
+}

package/dist/components/CuponeraFilterBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/FilterBar/ServiceFilter.js

@@ -240,7 +240,12 @@ class ServiceFilter extends React.Component {
                             ? `text-[${this.props.colors.selectedTextColor}]`
                             : ""} ${val.active ? "bold-text" : ""}` },
                         val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px] " })),
-                        React.createElement("span", { className: "capitalize" }, label.toLowerCase())));
+                        React.createElement("span", { style: {
+                                textTransform: option.type !== "time" ? "capitalize" : "none",
+                            } }, option.type === "time"
+                            ? label.charAt(0).toUpperCase() +
+                                label.slice(1).toLowerCase()
+                            : label.toLowerCase())));
                 }))));
     }
     render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/KuposUIComponent.tsx

@@ -6,7 +6,9 @@ import { ResponsiveServiceList } from "./components/ServiceList";
 import { PaymentSideBarProps } from "./components/PaymentSideBar/types";
 import { ServiceListProps } from "./components/ServiceList/types";
 import { FilterBarProps } from "./components/FilterBar/tyoes";
+import { CuponeraFilterBarProps } from "./components/CuponeraFilterBar/types";
 import { ResponsiveFilterBar } from "./components/FilterBar";
+import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
 
 interface KuposUIComponentProps {
   typeOfComponent:
@@ -105,7 +107,7 @@ interface KuposUIComponentProps {
 // Using imported ResponsivePaymentSideBar component instead
 
 export default function KuposUIComponent(
-  props: KuposUIComponentProps
+  props: KuposUIComponentProps,
 ): React.ReactElement {
   const { typeOfComponent, ...restProps } = props;
 
@@ -132,6 +134,13 @@ export default function KuposUIComponent(
         <ResponsiveFilterBar {...(restProps as unknown as FilterBarProps)} />
       );
 
+    case "cuponerafilterbar":
+      return (
+        <ResponsiveCuponeraFilterBar
+          {...(restProps as unknown as CuponeraFilterBarProps)}
+        />
+      );
+
     default:
       return (
         <div className="error-message">

package/src/components/CuponeraFilterBar/FilterBarDesktop.tsx

@@ -0,0 +1,216 @@
+import React from "react";
+import { CuponeraFilterBarProps } from "./types";
+import commonService from "../../utils/CommonService";
+
+const FilterBarDesktop = ({
+  t,
+  seats,
+  filters,
+  setFilters,
+  expandedFilters,
+  setExpandedFilters,
+  translation,
+  colors,
+  icons,
+}: CuponeraFilterBarProps) => {
+  const uniqueCouponCounts: number[] = (
+    [
+      ...new Set(
+        seats.map((seat: any) => {
+          return seat?.coupon_details?.ticketNumbers
+            ? seat.no_of_coupons * 2
+            : seat.no_of_coupons;
+        }),
+      ),
+    ] as number[]
+  ).sort((a, b) => a - b);
+
+  const uniqueOperators: string[] = [
+    ...new Set<string>(
+      seats
+        .map((seat: any) => {
+          return seat?.coupon_details?.company || seat.operator_name;
+        })
+        .filter(Boolean),
+    ),
+  ];
+
+  const uniqueSeatTypes: string[] = [
+    ...new Set<string>(
+      seats
+        .map(
+          (seat: any) =>
+            seat?.coupon_details?.seatType ||
+            (seat?.seat_type_name
+              ? commonService.capitalize(seat?.seat_type_name)
+              : null),
+        )
+        .filter(Boolean),
+    ),
+  ];
+
+  const toggleFilterSection = (section: string) => {
+    setExpandedFilters((prev: any) => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  const applyFilter = (type: string, value: any) => {
+    setFilters((prev: any) => {
+      const currentValues = [...prev[type]];
+      const valueIndex = currentValues.indexOf(value);
+      if (valueIndex !== -1) {
+        currentValues.splice(valueIndex, 1);
+      } else {
+        currentValues.push(value);
+      }
+      return {
+        ...prev,
+        [type]: currentValues,
+      };
+    });
+  };
+
+  const removeAllFilters = () => {
+    setFilters({
+      couponCount: [],
+      operator: [],
+      seatType: [],
+    });
+  };
+
+  const hasActiveFilters =
+    filters.couponCount.length > 0 ||
+    filters.operator.length > 0 ||
+    filters.seatType.length > 0;
+
+  const renderFilterSection = (
+    title: string,
+    sectionKey: string,
+    items: any[],
+    filterType: string,
+  ) => {
+    if (items.length === 0) return null;
+    const isOpen = expandedFilters[sectionKey];
+
+    return (
+      <div>
+        <div
+          onClick={() => toggleFilterSection(sectionKey)}
+          className="bold-text flex items-center justify-between mt-[13px] mb-[5px]"
+        >
+          {title}
+          <img
+            src={isOpen ? icons?.iconUp : icons?.iconDown}
+            alt="toggle"
+            className={`w-[auto] h-[9px] transition-all duration-300 cursor-pointer`}
+          />
+        </div>
+        <div
+          className={`transition-all duration-300 ease-in-out ${
+            isOpen
+              ? "opacity-100 translate-y-0"
+              : "max-h-0 opacity-0 -translate-y-1"
+          }`}
+        >
+          {isOpen &&
+            items.map((item, i) => {
+              const isActive = filters[filterType]?.includes(item);
+              const displayLabel =
+                filterType === "couponCount"
+                  ? `${item} pasajes`
+                  : typeof item === "string"
+                    ? item.toLowerCase()
+                    : item;
+
+              return (
+                <div
+                  key={i}
+                  onClick={() => applyFilter(filterType, item)}
+                  style={{
+                    margin: isActive ? "3px 0" : "0",
+                    backgroundColor: isActive
+                      ? colors?.selectedBackgroundColor || "#ffdede"
+                      : "",
+                    padding: "2px 0px",
+                    paddingLeft: isActive ? "11px" : "",
+                    marginLeft: isActive ? "-10px" : "",
+                    color: isActive
+                      ? colors?.selectedFontColor || "#ff5c60"
+                      : colors?.fontColor || "",
+                    transition:
+                      "background-color 0.25s ease, padding-left 0.25s ease, margin-left 0.25s ease",
+                  }}
+                  className={`flex items-center h-[24px] rounded-[15px] cursor-pointer pt-[4px] ${
+                    isActive ? "bold-text" : ""
+                  }`}
+                >
+                  <span style={{ textTransform: "capitalize" }}>
+                    {displayLabel}
+                  </span>
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="relative">
+      <div
+        style={{
+          overflowY: "scroll",
+          scrollbarWidth: "none",
+          boxShadow: "none",
+          border: "1px solid #ddd",
+          zIndex: "9",
+        }}
+        className="p-[16px_20px] relative mb-[20px] max-h-[66vh] rounded-[20px] bg-[#fff]"
+      >
+        <span className="text-[17.33px] bold-text flex justify-center mt-[20px]">
+          {translation?.filterHeading}
+        </span>
+        <div className="text-[13.33px] pb-[10px]">
+          {renderFilterSection(
+            t?.("CUPONERA.NUMBER_OF_TICKETS") || "",
+            "couponCount",
+            uniqueCouponCounts,
+            "couponCount",
+          )}
+          {renderFilterSection(
+            t?.("CUPONERA.COMPANY") || "",
+            "operator",
+            uniqueOperators,
+            "operator",
+          )}
+          {renderFilterSection(
+            t?.("CUPONERA.SEAT_TYPE") || "",
+            "seatType",
+            uniqueSeatTypes,
+            "seatType",
+          )}
+        </div>
+      </div>
+
+      <div
+        onClick={removeAllFilters}
+        className={`group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${
+          hasActiveFilters
+            ? "translate-y-0 opacity-100"
+            : "translate-y-[-10px] opacity-0 pointer-events-none"
+        }`}
+      >
+        <img
+          src={icons?.crossIcon}
+          alt="removeFilterIcon"
+          className="w-[16px] h-[16px] mr-[10px] transition-transform duration-300 group-hover:scale-110"
+        />
+        {translation?.removeFilters || t?.("RESULTS_PAGE.REMOVE_FILTERS")}
+      </div>
+    </div>
+  );
+};
+
+export default FilterBarDesktop;

package/src/components/CuponeraFilterBar/FilterBarMobile.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { CuponeraFilterBarProps } from "./types";
+
+const FilterBarMobile = (props: CuponeraFilterBarProps) => {
+  return <div>FilterBarMobile</div>;
+};
+
+export default FilterBarMobile;

package/src/components/CuponeraFilterBar/ResponsiveCuponeraFilterBar.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import FilterBarMobile from "../CuponeraFilterBar/FilterBarMobile";
+import FilterBarDesktop from "../CuponeraFilterBar/FilterBarDesktop";
+import { CuponeraFilterBarProps } from "../CuponeraFilterBar/types";
+
+export default function ResponsiveCuponeraFilterBar(
+  props: CuponeraFilterBarProps,
+) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return (
+      <FilterBarMobile {...(props as unknown as CuponeraFilterBarProps)} />
+    );
+  }
+
+  return <FilterBarDesktop {...props} />;
+}

package/src/components/CuponeraFilterBar/index.ts

@@ -0,0 +1,5 @@
+import FilterBarDesktop from "../CuponeraFilterBar/FilterBarDesktop";
+import FilterBarMobile from "../CuponeraFilterBar/FilterBarMobile";
+import ResponsiveFilterBar from "../CuponeraFilterBar/ResponsiveCuponeraFilterBar";
+export { FilterBarDesktop, FilterBarMobile, ResponsiveFilterBar };
+export type { CuponeraFilterBarProps } from "../CuponeraFilterBar/types";

package/src/components/CuponeraFilterBar/types.ts

@@ -0,0 +1,20 @@
+export interface CuponeraFilterBarProps {
+  variant?: "mobile" | "desktop";
+  t?: (key: string) => string;
+  seats: any;
+  filters: any;
+  setFilters: any;
+  expandedFilters: any;
+  setExpandedFilters: any;
+  translation?: { [key: string]: string };
+  colors: {
+    fontColor?: string;
+    selectedFontColor?: string;
+    selectedBackgroundColor?: string;
+  };
+  icons?: {
+    iconUp?: string;
+    iconDown?: string;
+    crossIcon?: string;
+  };
+}

package/src/components/FilterBar/ServiceFilter.tsx

@@ -337,7 +337,17 @@ class ServiceFilter extends React.Component<
                       className="w-[20px] h-[20px] mr-[10px] "
                     />
                   )}
-                  <span className="capitalize">{label.toLowerCase()}</span>
+                  <span
+                    style={{
+                      textTransform:
+                        option.type !== "time" ? "capitalize" : "none",
+                    }}
+                  >
+                    {option.type === "time"
+                      ? label.charAt(0).toUpperCase() +
+                        label.slice(1).toLowerCase()
+                      : label.toLowerCase()}
+                  </span>
                 </div>
               );
             })}