kupos-ui-components-lib 10.4.13 → 10.4.15

package/dist/ui/PaymentCardMobile/PaymentCardMobile.js

@@ -17,8 +17,8 @@ class ModalTabStateWrapper extends React.Component {
     }
 }
 export const PaymentCardMobile = (props) => {
-    const { serviceNameOnward, serviceNameReturn, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, renderDiscount, discountAmount, currency, insuranceData, isPeru, showDetails = false, setShowDetails, } = props;
-    console.log("🚀 ~ PaymentCardMobile ~ selectSeatOnward:", selectSeatOnward);
+    var _a, _b;
+    const { serviceNameOnward, serviceNameReturn, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, renderDiscount, discountAmount, currency, insuranceData, isPeru, walletMoney, walletLabel, virtualMoney, virtualLimit, creditosLabel, showDetails = false, setShowDetails, } = props;
     // We use a Class component wrapper below to hold the state,
     // avoiding Invalid Hook Call issues when linked in external apps with multiple React instances.
     // These will be derived inside the render prop of ModalTabStateWrapper
@@ -32,8 +32,8 @@ export const PaymentCardMobile = (props) => {
         ? droppingStageReturn
         : droppingStageOnward;
     const activeDroppingTime = isReturn ? droppingTimeReturn : droppingTimeOnward;
-    const activeSource = isReturn ? sourceReturn : sourceOnward;
-    const activeDest = isReturn ? destinationReturn : destinationOnward;
+    const activeSource = (_a = (isReturn ? sourceReturn : sourceOnward)) === null || _a === void 0 ? void 0 : _a.replace(/,\s*/g, ", ");
+    const activeDest = (_b = (isReturn ? destinationReturn : destinationOnward)) === null || _b === void 0 ? void 0 : _b.replace(/,\s*/g, ", ");
     const activeServiceName = isReturn ? serviceNameReturn : serviceNameOnward;
     const activeDate = isReturn ? dateReturn : dateOnward;
     const activeDuration = isReturn ? durationReturn : durationOnward;
@@ -120,7 +120,7 @@ export const PaymentCardMobile = (props) => {
                                 : "2px solid transparent",
                             transition: "all 0.2s ease",
                         } }, (translation === null || translation === void 0 ? void 0 : translation.return) || "Vuelta"))) : null,
-                React.createElement("div", { style: { padding: "16px 16px 0 16px" } },
+                React.createElement("div", { style: { padding: "16px 10px 0 10px" } },
                     React.createElement("div", { style: {
                             display: "flex",
                             alignItems: "flex-start",
@@ -160,27 +160,14 @@ export const PaymentCardMobile = (props) => {
                         } },
                         React.createElement("div", { style: {
                                 flexShrink: 0,
-                                width: "28px",
-                                height: "28px",
+                                width: "20px",
+                                height: "20px",
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 marginTop: "2px",
-                            } }, (icons === null || icons === void 0 ? void 0 : icons.origin) ? (React.createElement("img", { src: icons.origin, style: { width: "18px", height: "18px" }, alt: "origin" })) : (React.createElement("div", { style: {
-                                width: "22px",
-                                height: "22px",
-                                borderRadius: "50%",
-                                border: "2.5px solid #e0321c",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
                             } },
-                            React.createElement("div", { style: {
-                                    width: "8px",
-                                    height: "8px",
-                                    borderRadius: "50%",
-                                    backgroundColor: "#e0321c",
-                                } })))),
+                            React.createElement("img", { src: icons.origin, style: { width: "18px", height: "18px" }, alt: "origin" })),
                         React.createElement("div", { style: { flex: 1 } },
                             React.createElement("div", { style: {
                                     fontSize: "15px",
@@ -188,7 +175,7 @@ export const PaymentCardMobile = (props) => {
                                     color: "#464647",
                                     textTransform: "capitalize",
                                     lineHeight: 1.3,
-                                } }, activeSource),
+                                }, className: "bold-text" }, activeSource),
                             formatSubText(activeBoardingStage, activeBoardingTime) && (React.createElement("div", { style: {
                                     fontSize: "12px",
                                     color: "#464647",
@@ -198,25 +185,18 @@ export const PaymentCardMobile = (props) => {
                     React.createElement("div", { style: {
                             display: "flex",
                             alignItems: "flex-start",
-                            gap: "8px",
+                            gap: "7px",
                         } },
                         React.createElement("div", { style: {
                                 flexShrink: 0,
-                                width: "28px",
-                                height: "28px",
+                                width: "20px",
+                                height: "20px",
                                 display: "flex",
                                 alignItems: "center",
                                 justifyContent: "center",
                                 marginTop: "2px",
-                            } }, (icons === null || icons === void 0 ? void 0 : icons.destination) ? (React.createElement("img", { src: icons.destination, style: { width: "18px", height: "18px" }, alt: "destination" })) : (React.createElement("div", { style: {
-                                width: "22px",
-                                height: "22px",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
                             } },
-                            React.createElement("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "none" },
-                                React.createElement("path", { d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z", fill: "#e05252" }))))),
+                            React.createElement("img", { src: icons.destination, style: { width: "18px", height: "18px" }, alt: "destination" })),
                         React.createElement("div", { style: { flex: 1 } },
                             React.createElement("div", { style: {
                                     fontSize: "15px",
@@ -224,7 +204,7 @@ export const PaymentCardMobile = (props) => {
                                     color: "#464647",
                                     textTransform: "capitalize",
                                     lineHeight: 1.3,
-                                } }, activeDest),
+                                }, className: "bold-text" }, activeDest),
                             formatSubText(activeDroppingStage, activeDroppingTime) && (React.createElement("div", { style: {
                                     fontSize: "12px",
                                     color: "#464647",
@@ -269,7 +249,7 @@ export const PaymentCardMobile = (props) => {
                         zIndex: 20,
                     } })),
             React.createElement(ModalTabStateWrapper, { initialTab: journeyTypeActive || 1, showDetails: showDetails, render: (modalTab, setModalTab) => {
-                    var _a, _b, _c, _d, _e, _f, _g;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                     const modalIsReturn = modalTab === 2;
                     const modalBoardingStage = modalIsReturn
                         ? boardingStageReturn
@@ -283,10 +263,8 @@ export const PaymentCardMobile = (props) => {
                     const modalDroppingTime = modalIsReturn
                         ? droppingTimeReturn
                         : droppingTimeOnward;
-                    const modalSource = modalIsReturn ? sourceReturn : sourceOnward;
-                    const modalDest = modalIsReturn
-                        ? destinationReturn
-                        : destinationOnward;
+                    const modalSource = (_a = (modalIsReturn ? sourceReturn : sourceOnward)) === null || _a === void 0 ? void 0 : _a.replace(/,\s*/g, ", ");
+                    const modalDest = (_b = (modalIsReturn ? destinationReturn : destinationOnward)) === null || _b === void 0 ? void 0 : _b.replace(/,\s*/g, ", ");
                     const modalServiceName = modalIsReturn
                         ? serviceNameReturn
                         : serviceNameOnward;
@@ -385,6 +363,7 @@ export const PaymentCardMobile = (props) => {
                                     ? selectedReturn[0]
                                     : selectedOnward[0]).map((val, idx) => {
                                     var _a, _b;
+                                    console.log("🚀 ~ PaymentCardMobile ~ val:", val);
                                     return (React.createElement("span", { key: idx, style: {
                                             display: "inline-flex",
                                             alignItems: "center",
@@ -402,11 +381,6 @@ export const PaymentCardMobile = (props) => {
                                                 marginLeft: "4px",
                                             } }, (_b = (_a = val.type) === null || _a === void 0 ? void 0 : _a.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()))));
                                 }))))),
-                        React.createElement("div", { style: S.section, className: "mt-[30px]" },
-                            React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Pol\u00EDtica"),
-                            React.createElement("div", { style: S.sectionRow },
-                                React.createElement("span", { style: { flex: 1 } }, "Cancelaci\u00F3n"),
-                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { fontSize: "13px" }), className: "bold-text" }, "Gratis hasta 24h antes"))),
                         React.createElement("div", { style: S.section, className: "mt-[30px]" },
                             React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Tarifa"),
                             selectSeatOnward && selectedOnward && selectedOnward[0]
@@ -437,18 +411,19 @@ export const PaymentCardMobile = (props) => {
                                 : null,
                             (insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_enabled) ? (React.createElement("div", { style: S.sectionRow },
                                 React.createElement("span", { style: { flex: 1 } },
-                                    ((_b = (_a = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _a === void 0 ? void 0 : _a.reduce((acc, qty) => acc + qty, 0)) !== null && _b !== void 0 ? _b : 0) +
-                                        ((_d = (_c = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0),
+                                    ((_d = (_c = selectedOnward === null || selectedOnward === void 0 ? void 0 : selectedOnward[1]) === null || _c === void 0 ? void 0 : _c.reduce((acc, qty) => acc + qty, 0)) !== null && _d !== void 0 ? _d : 0) +
+                                        ((_f = (_e = selectedReturn === null || selectedReturn === void 0 ? void 0 : selectedReturn[1]) === null || _e === void 0 ? void 0 : _e.reduce((acc, qty) => acc + qty, 0)) !== null && _f !== void 0 ? _f : 0),
                                     " ",
                                     "x Viajero Seguro"),
-                                React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null,
-                            ((_f = props.serviceFeeDataStateValue) === null || _f === void 0 ? void 0 : _f.service_fee) > 0 && (React.createElement("div", { style: S.sectionRow },
+                                React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency((_g = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _g !== void 0 ? _g : 0, currencySign)))) : null,
+                            ((_h = props.serviceFeeDataStateValue) === null || _h === void 0 ? void 0 : _h.total_convenience_fee_amount) && (React.createElement("div", { style: S.sectionRow },
                                 React.createElement("span", { style: { flex: 1 } }, "Cargo por servicio"),
-                                React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(props.serviceFeeDataStateValue.service_fee, currencySign)))),
+                                React.createElement("span", { style: S.sectionRowValue, className: "bold-text" }, CommonService.currency(props.serviceFeeDataStateValue
+                                    .total_convenience_fee_amount, currencySign)))),
                             (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
                                 React.createElement("div", { style: S.sectionRow },
                                     React.createElement("span", { style: { flex: 1 } }, (translation === null || translation === void 0 ? void 0 : translation.promotionalCode) || "Código promocional"),
-                                    React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }), className: "bold-text" }, CommonService.currency((_g = promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) !== null && _g !== void 0 ? _g : 0, currencySign))),
+                                    React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }), className: "bold-text" }, CommonService.currency((_j = promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) !== null && _j !== void 0 ? _j : 0, currencySign))),
                                 (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { style: {
                                         display: "flex",
                                         alignItems: "center",
@@ -489,6 +464,19 @@ export const PaymentCardMobile = (props) => {
                     }
                   `),
                                     renderDiscount && renderDiscount(discountAmount)))) : null,
+                            removeDiscountAtomValue && (React.createElement("div", { style: S.sectionRow },
+                                React.createElement("span", { style: { flex: 1 } }, "Cup\u00F3n"),
+                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: "var(--secondary-color)" }), className: "bold-text" }, `- ${CommonService.currency((netFare !== null && netFare !== void 0 ? netFare : 0) - (discountAmount !== null && discountAmount !== void 0 ? discountAmount : 0), currencySign)}`))),
+                            walletMoney ? (React.createElement("div", { style: S.sectionRow },
+                                React.createElement("span", { style: { flex: 1 } }, walletLabel),
+                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: "var(--secondary-color)" }), className: "bold-text" }, isPeru
+                                    ? CommonService.currencyFixed(walletMoney, currencySign)
+                                    : CommonService.currency(walletMoney, currencySign)))) : null,
+                            virtualMoney ? (React.createElement("div", { style: S.sectionRow },
+                                React.createElement("span", { style: { flex: 1 } },
+                                    React.createElement("span", { style: { color: "var(--secondary-color)" } }, `${creditosLabel}(${virtualLimit}%)`)),
+                                React.createElement("span", { style: Object.assign(Object.assign({}, S.sectionRowValue), { color: "var(--secondary-color)" }), className: "bold-text" }, CommonService.currency(((virtualLimit !== null && virtualLimit !== void 0 ? virtualLimit : 0) / 100) *
+                                    Number(virtualMoney !== null && virtualMoney !== void 0 ? virtualMoney : 0), currencySign)))) : null,
                             React.createElement("div", { style: {
                                     borderTop: "1.5px dashed #464647",
                                     margin: "14px 0",
@@ -516,9 +504,10 @@ export const PaymentCardMobile = (props) => {
                     alignItems: "center",
                     justifyContent: "center",
                     gap: "6px",
-                    paddingBottom: "14px",
+                    paddingBottom: "8px",
                     cursor: "pointer",
                     userSelect: "none",
+                    marginTop: "-5px",
                 }, onClick: () => setShowDetails && setShowDetails(!showDetails) },
                 React.createElement("span", { style: { fontSize: "14px", fontWeight: 700, color: "#464647" } }, "Ver todos los detalles"),
                 React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", style: {

package/dist/ui/TopAmenities/PromoCountdown.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+interface PromoCountdownProps {
+    countdownSeconds: number;
+}
+interface PromoCountdownState {
+    remaining: number;
+}
+declare class PromoCountdown extends React.Component<PromoCountdownProps, PromoCountdownState> {
+    private timer;
+    constructor(props: PromoCountdownProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PromoCountdownProps): void;
+    componentWillUnmount(): void;
+    private clearTimer;
+    private startTimer;
+    render(): React.JSX.Element;
+}
+export default PromoCountdown;

package/dist/ui/TopAmenities/PromoCountdown.js

@@ -0,0 +1,55 @@
+import React from "react";
+class PromoCountdown extends React.Component {
+    constructor(props) {
+        super(props);
+        this.timer = null;
+        this.state = { remaining: props.countdownSeconds };
+    }
+    componentDidMount() {
+        this.startTimer();
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.countdownSeconds !== this.props.countdownSeconds) {
+            this.setState({ remaining: this.props.countdownSeconds }, () => {
+                this.startTimer();
+            });
+        }
+    }
+    componentWillUnmount() {
+        this.clearTimer();
+    }
+    clearTimer() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    startTimer() {
+        this.clearTimer();
+        if (this.state.remaining <= 0)
+            return;
+        this.timer = setInterval(() => {
+            this.setState((prev) => {
+                if (prev.remaining <= 1) {
+                    this.clearTimer();
+                    return { remaining: 0 };
+                }
+                return { remaining: prev.remaining - 1 };
+            });
+        }, 1000);
+    }
+    render() {
+        const { remaining } = this.state;
+        const hrs = Math.floor(remaining / 3600);
+        const mins = Math.floor((remaining % 3600) / 60);
+        const secs = remaining % 60;
+        const pad = (n) => String(n).padStart(2, "0");
+        return (React.createElement("span", { className: "bold-text" },
+            pad(hrs),
+            ":",
+            pad(mins),
+            ":",
+            pad(secs)));
+    }
+}
+export default PromoCountdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.13",
+  "version": "10.4.15",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
   "author": "Zahid Dar",
   "license": "MIT",
   "dependencies": {
-    "kupos-ui-components-lib": "^9.0.7",
+    "kupos-ui-components-lib": "^10.4.15",
     "lottie-react": "^2.4.1",
     "lottie-web": "^5.13.0",
     "moment": "^2.30.1",

package/src/assets/images/filter/rapido.svg

@@ -0,0 +1,14 @@
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.26471 1.41528C9.92084 1.41532 12.0821 3.57653 12.0821 6.23267C12.0821 8.88878 9.92082 11.05 7.26471 11.05C4.60857 11.05 2.44735 8.8888 2.44733 6.23267C2.44733 3.57651 4.60855 1.41528 7.26471 1.41528ZM7.26471 1.9895C4.92362 1.9895 3.02155 3.89158 3.02155 6.23267C3.02157 8.57373 4.92364 10.4758 7.26471 10.4758C9.60575 10.4758 11.5078 8.57371 11.5079 6.23267C11.5079 3.8916 9.60577 1.98953 7.26471 1.9895Z" fill="#464647" stroke="#464647" stroke-width="0.1"/>
+<path d="M7.26425 2.51123C9.31779 2.51134 10.9859 4.17935 10.9859 6.23291C10.9858 8.28638 9.31772 9.95448 7.26425 9.95459C5.21449 9.95459 3.54268 8.28648 3.54257 6.23291C3.54257 4.17928 5.21063 2.51123 7.26425 2.51123ZM7.26425 3.08545C5.52946 3.08545 4.11679 4.49812 4.11679 6.23291C4.1169 7.96761 5.52953 9.38037 7.26425 9.38037C8.99888 9.38026 10.4116 7.96754 10.4117 6.23291C10.4117 4.49819 8.99895 3.08556 7.26425 3.08545Z" fill="#464647" stroke="#464647" stroke-width="0.1"/>
+<path d="M7.26443 5.56592C6.89538 5.56592 6.5979 5.86341 6.5979 6.23246C6.5979 6.60151 6.89538 6.89901 7.26443 6.89901C7.63349 6.89901 7.93099 6.60151 7.93099 6.23246C7.93099 5.86341 7.63349 5.56592 7.26443 5.56592Z" fill="#464647"/>
+<path d="M6.53391 1.12598L6.75233 1.27284C6.71467 1.18246 6.63182 1.12598 6.53391 1.12598Z" fill="#464647"/>
+<path d="M7.99449 1.12598H7.22627L6.87982 1.35946H6.53334H6.29987V1.7511C6.29987 1.87914 6.40531 1.98458 6.53334 1.98458C6.56724 1.98458 6.59736 1.97705 6.62749 1.96575C6.66891 1.95822 6.82333 1.94316 7.27899 1.94316C7.7083 1.94316 7.85515 1.95822 7.89657 1.96575C8.01331 2.01847 8.15265 1.96575 8.20914 1.84901C8.2242 1.81889 8.23173 1.785 8.23173 1.7511V1.35946C8.23173 1.23142 8.12629 1.12598 7.99825 1.12598H7.99449ZM6.74423 1.85278C6.74423 1.85278 6.75931 1.82265 6.76308 1.80383C6.75931 1.81889 6.75176 1.83771 6.74423 1.85278ZM6.76308 1.80383C6.76308 1.80383 6.76306 1.78876 6.76682 1.77746C6.76682 1.78499 6.76684 1.79629 6.76308 1.80383ZM7.76854 1.80383C7.76854 1.80383 7.77607 1.83771 7.7836 1.85278C7.77607 1.83771 7.77231 1.82265 7.76854 1.80383ZM7.76478 1.77746C7.76478 1.77746 7.76478 1.79252 7.76854 1.80006C7.76854 1.79252 7.76854 1.78499 7.76478 1.77746Z" fill="#464647"/>
+<path d="M7.99439 1.46867H6.53324C6.12654 1.46867 5.79891 1.13351 5.80267 0.73057C5.80267 0.331393 6.13407 0.00376582 6.53324 0H7.99815C8.19398 0 8.3785 0.0790829 8.51784 0.218418C8.65717 0.357754 8.72872 0.542281 8.72872 0.738103C8.72872 1.13728 8.39733 1.46491 7.99815 1.46867H7.99439ZM7.99439 0.474497H6.53324C6.39391 0.474497 6.27717 0.591235 6.27717 0.73057C6.27717 0.873671 6.39014 0.990413 6.53324 0.990413H7.99062C8.12995 0.990413 8.24669 0.873675 8.24669 0.73434C8.24669 0.666555 8.22035 0.598768 8.17139 0.549812C8.12243 0.500857 8.05842 0.474493 7.98687 0.470728L7.99439 0.474497Z" fill="#464647"/>
+<path d="M3.63795 3.72449H1.86426C1.73246 3.72449 1.62701 3.61905 1.62701 3.48725C1.62701 3.35544 1.73246 3.25 1.86426 3.25H3.63795C3.76975 3.25 3.8752 3.35544 3.8752 3.48725C3.8752 3.61905 3.76975 3.72449 3.63795 3.72449Z" fill="#464647"/>
+<path d="M2.67736 6.5487H1.45347C1.32166 6.5487 1.21622 6.44326 1.21622 6.31146C1.21622 6.17965 1.32166 6.07422 1.45347 6.07422H2.67736C2.80916 6.07422 2.91461 6.17965 2.91461 6.31146C2.91461 6.44326 2.80916 6.5487 2.67736 6.5487Z" fill="#464647"/>
+<path d="M2.86165 7.93493H1.20847C1.07667 7.93493 0.971222 7.8295 0.971222 7.6977C0.971222 7.56589 1.07667 7.46045 1.20847 7.46045H2.86165C2.99345 7.46045 3.0989 7.56589 3.0989 7.6977C3.0989 7.8295 2.99345 7.93493 2.86165 7.93493Z" fill="#464647"/>
+<path d="M2.91474 5.13636H0.237249C0.105445 5.13636 0 5.03091 0 4.89911C0 4.7673 0.105445 4.66187 0.237249 4.66187H2.91474C3.04655 4.66187 3.15199 4.7673 3.15199 4.89911C3.15199 5.03091 3.04655 5.13636 2.91474 5.13636Z" fill="#464647"/>
+<path d="M7.09121 6.21729C7.03096 6.21729 6.97071 6.19469 6.92552 6.1495L5.97652 5.21558C5.88238 5.1252 5.88238 4.97457 5.97652 4.88042C6.0669 4.78628 6.21754 4.78628 6.31169 4.88042L7.26066 5.81435C7.3548 5.90473 7.3548 6.05536 7.26066 6.1495C7.21547 6.19846 7.15147 6.22105 7.09121 6.22105V6.21729Z" fill="#464647"/>
+<path d="M7.51304 6.28133C7.45279 6.28133 7.39253 6.25874 7.34734 6.21355C7.2532 6.1194 7.2532 5.97253 7.34734 5.87838L8.9591 4.25909C9.05325 4.16494 9.20012 4.16494 9.29427 4.25909C9.38841 4.35323 9.38841 4.5001 9.29427 4.59424L7.68248 6.21355C7.63729 6.25874 7.57706 6.2851 7.51304 6.2851V6.28133Z" fill="#464647"/>
+</svg>

package/src/components/FilterSortBar/FilterChip.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ChevronDownIcon, FilterIcon } from "./icons";
-import { FilterSortBarColors, FilterSortBarIcons } from "./types";
+import { ChevronDownIcon, FilterIcon, SortArrowIcon } from "./icons";
+import { FilterSortBarColors, FilterSortBarIcons, SortDirection } from "./types";
 
 interface FilterChipProps {
   label: string;
@@ -16,6 +16,10 @@ interface FilterChipProps {
   badgeCount?: number;
   /** When true, the label text is hidden and only the icon + badge + chevron show (used for the Filtros button once the strip is scrolled). */
   collapsed?: boolean;
+  /** Renders a directional arrow instead of the dropdown chevron — used for base sort chips (Horario, Precio, Rápido). */
+  sortDirection?: SortDirection;
+  /** Suppresses the trailing chevron/arrow entirely — used for cohort sort chips (Después de las 6 PM, Salón Cama), which just toggle on/off. */
+  hideTrailingIcon?: boolean;
   colors: Required<
     Pick<
       FilterSortBarColors,
@@ -35,6 +39,8 @@ const FilterChip = ({
   activeIconSrc,
   badgeCount = 0,
   collapsed,
+  sortDirection,
+  hideTrailingIcon,
   colors,
   icons,
 }: FilterChipProps) => {
@@ -43,22 +49,11 @@ const FilterChip = ({
   return (
     <button
       onClick={onClick}
+      className="flex flex-shrink-0 items-center gap-[6px] px-[14px] py-[9px] rounded-[20px] text-[13px] font-medium whitespace-nowrap cursor-pointer transition-[padding] duration-200 ease-in-out [-webkit-tap-highlight-color:transparent]"
       style={{
-        flexShrink: 0,
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "9px 14px",
-        borderRadius: 20,
         border: `1px solid ${isHighlighted ? colors.primaryColor : colors.chipBorderColor}`,
         backgroundColor: isHighlighted ? colors.primaryColor : "#fff",
         color: isHighlighted ? colors.primaryTextColor : colors.chipTextColor,
-        fontSize: 13,
-        fontWeight: 500,
-        whiteSpace: "nowrap",
-        cursor: "pointer",
-        transition: "padding 0.2s ease",
-        WebkitTapHighlightColor: "transparent",
       }}
     >
       {isFiltersButton && (
@@ -75,37 +70,38 @@ const FilterChip = ({
           width={14}
           height={14}
           alt=""
-          style={isHighlighted && !activeIconSrc ? { filter: "brightness(0) invert(1)" } : undefined}
+          className={isHighlighted && !activeIconSrc ? "brightness-0 invert" : undefined}
         />
       )}
+      {!collapsed && <span>{label}</span>}
       {badgeCount > 0 && (
         <span
+          className="inline-flex flex-shrink-0 items-center justify-center w-[18px] h-[18px] rounded-full box-border text-[10px] font-bold leading-none"
           style={{
-            display: "inline-flex",
-            flexShrink: 0,
-            alignItems: "center",
-            justifyContent: "center",
-            width: 16,
-            height: 16,
-            borderRadius: "50%",
-            boxSizing: "border-box",
-            fontSize: 10,
-            fontWeight: 700,
-            lineHeight: 1,
-            backgroundColor: colors.badgeBackgroundColor,
-            color: colors.badgeTextColor,
+            backgroundColor: !isFiltersButton && isHighlighted ? "#FFFFFF" : colors.badgeBackgroundColor,
+            color: !isFiltersButton && isHighlighted ? colors.primaryColor : colors.badgeTextColor,
           }}
         >
           {badgeCount}
         </span>
       )}
-      {!collapsed && <span>{label}</span>}
-      <ChevronDownIcon
-        size={8}
-        color={isHighlighted ? colors.primaryTextColor : colors.chipTextColor}
-        open={isOpen}
-        src={icons?.chevronDownIcon}
-      />
+      {!hideTrailingIcon &&
+        (sortDirection ? (
+          <SortArrowIcon
+            size={9}
+            color={isHighlighted ? colors.primaryTextColor : colors.chipTextColor}
+            direction={sortDirection}
+            src={icons?.sortArrowIcon}
+            active={isHighlighted}
+          />
+        ) : (
+          <ChevronDownIcon
+            size={8}
+            color={isHighlighted ? colors.primaryTextColor : colors.chipTextColor}
+            open={isOpen}
+            src={icons?.chevronDownIcon}
+          />
+        ))}
     </button>
   );
 };