@tripian/react 9.3.28 → 9.3.30

package/components/PoiInfo/PoiInfo.d.ts

@@ -34,6 +34,7 @@ interface IPoiInfo {
     loadingFeedback: boolean;
     feedbackSubjects: Model.FeedbackSubjects[];
     isBookingClicked: boolean;
+    onBookableTabClick?: () => void;
     timezone?: string;
     sendFeedback: (value: Model.FeedbackRequest) => Promise<void>;
     placeInfoCallBack: () => void;

package/components/PoiInfo/PoiInfoText/PoiInfoText.d.ts

@@ -22,6 +22,7 @@ interface IPoiInfoText {
     ticketProducts: Model.BookingProduct[];
     isBookingClicked?: boolean;
     getTourInfo?: (productId: string, poi: Model.Poi) => void;
+    onBookableTabClick?: () => void;
     sendFeedback: (value: Model.FeedbackRequest) => Promise<void>;
     t: (value: Model.TranslationKey) => string;
     plans?: Model.Plan[];

package/components/StepInfo/StepInfo.d.ts

@@ -34,6 +34,7 @@ interface IStepInfo {
     placeInfoCallBack: () => void;
     showStepScoreDetails: boolean;
     isBookingClicked: boolean;
+    onBookableTabClick?: () => void;
     timezone?: string;
     onImageModalChange?: (isOpen: boolean) => void;
     t: (value: Model.TranslationKey) => string;

package/index.js

@@ -59919,7 +59919,7 @@ const PoiInfo = ({ poi, favorite, toggleFavorite, close, addRemoveReplacePoi, da
 // TICKET_PROVIDER_IDS,
 RESTAURANT_RESERVATION_PROVIDER_IDS, myOffers, isLoadingOffer, offerButtonClick, offerCardClicked, hideOffers, 
 // offerClicked,
-loadingFeedback, feedbackSubjects, isBookingClicked, timezone = 'UTC', sendFeedback, redeemClicked, onImageModalChange, stepType, t, plans, currentDayIndex, onTimelineAdd, }) => {
+loadingFeedback, feedbackSubjects, isBookingClicked, onBookableTabClick, timezone = 'UTC', sendFeedback, redeemClicked, onImageModalChange, stepType, t, plans, currentDayIndex, onTimelineAdd, }) => {
     var _a, _b, _c;
     const [optInModalWarningMessage, setOptInModalWarningMessage] = (0, react_1.useState)([]);
     const [showShareModal, setShowShareModal] = (0, react_1.useState)(false);
@@ -59972,7 +59972,7 @@ loadingFeedback, feedbackSubjects, isBookingClicked, timezone = 'UTC', sendFeedb
             react_1.default.createElement("div", { className: PoiInfo_scss_1.default.content },
                 react_1.default.createElement("div", { className: PoiInfo_scss_1.default.gallery },
                     react_1.default.createElement(PoiInfoImageDesktop_1.default, { poi: poi, onImageModalChange: onImageModalChange, t: t, stepType: stepType }))),
-            react_1.default.createElement(PoiInfoText_1.default, { poi: poi, hideFeatures: hideFeatures, hideCuisine: hideCuisine, hideTours: hideTours, reservationUrl: reservationUrl, hideBookingButton: hideBookingButton, reservationButtonClick: reservationButtonClick, tourProducts: tourProducts, ticketProducts: ticketProducts, addRemoveReplacePoi: addRemoveReplacePoi, partOfDay: partOfDay, hideActionButtons: hideActionButtons, replace: replace, stepOrder: stepOrder, getTourInfo: getTourInfo, tourTicketProductsLoading: tourTicketProductsLoading, RESTAURANT_RESERVATION_PROVIDER_IDS: RESTAURANT_RESERVATION_PROVIDER_IDS, loadingFeedback: loadingFeedback, feedbackSubjects: feedbackSubjects, sendFeedback: sendFeedback, isBookingClicked: isBookingClicked, t: t, plans: plans, currentDayIndex: currentDayIndex, onTimelineAdd: onTimelineAdd }),
+            react_1.default.createElement(PoiInfoText_1.default, { poi: poi, hideFeatures: hideFeatures, hideCuisine: hideCuisine, hideTours: hideTours, reservationUrl: reservationUrl, hideBookingButton: hideBookingButton, reservationButtonClick: reservationButtonClick, tourProducts: tourProducts, ticketProducts: ticketProducts, addRemoveReplacePoi: addRemoveReplacePoi, partOfDay: partOfDay, hideActionButtons: hideActionButtons, replace: replace, stepOrder: stepOrder, getTourInfo: getTourInfo, tourTicketProductsLoading: tourTicketProductsLoading, RESTAURANT_RESERVATION_PROVIDER_IDS: RESTAURANT_RESERVATION_PROVIDER_IDS, loadingFeedback: loadingFeedback, feedbackSubjects: feedbackSubjects, sendFeedback: sendFeedback, isBookingClicked: isBookingClicked, onBookableTabClick: onBookableTabClick, t: t, plans: plans, currentDayIndex: currentDayIndex, onTimelineAdd: onTimelineAdd }),
             !hideOffers && poi.offers && poi.offers.length > 0 && (react_1.default.createElement("div", { className: "col col12 px5 pb5" },
                 poi.offers.map((offer, i) => {
                     var _a, _b;
@@ -60271,7 +60271,7 @@ const PoiActionButton_1 = __importDefault(__webpack_require__(169));
 const TourCard_1 = __importDefault(__webpack_require__(443));
 const PreLoading_1 = __importDefault(__webpack_require__(15));
 const PoiInfoText_scss_1 = __importDefault(__webpack_require__(1029));
-const PoiInfoText = ({ poi, hideFeatures, hideCuisine, reservationUrl, hideBookingButton = false, hideActionButtons = false, replace = false, stepOrder = -1, addRemoveReplacePoi, partOfDay, reservationButtonClick, tourTicketProductsLoading, hideFeedback = false, loadingFeedback, feedbackSubjects, tourProducts, ticketProducts, isBookingClicked = false, getTourInfo, hideTours, sendFeedback, RESTAURANT_RESERVATION_PROVIDER_IDS, t, plans, currentDayIndex, onTimelineAdd, }) => {
+const PoiInfoText = ({ poi, hideFeatures, hideCuisine, reservationUrl, hideBookingButton = false, hideActionButtons = false, replace = false, stepOrder = -1, addRemoveReplacePoi, partOfDay, reservationButtonClick, tourTicketProductsLoading, hideFeedback = false, loadingFeedback, feedbackSubjects, tourProducts, ticketProducts, isBookingClicked = false, getTourInfo, hideTours, sendFeedback, onBookableTabClick, RESTAURANT_RESERVATION_PROVIDER_IDS, t, plans, currentDayIndex, onTimelineAdd, }) => {
     var _a, _b;
     const [activeTab, setActiveTab] = (0, react_1.useState)('overview');
     const [activeBookableTab, setActiveBookableTab] = (0, react_1.useState)('tickets');
@@ -60418,7 +60418,7 @@ const PoiInfoText = ({ poi, hideFeatures, hideCuisine, reservationUrl, hideBooki
         react_1.default.createElement("div", { className: `hide-m ${PoiInfoText_scss_1.default.dot}` }),
         react_1.default.createElement("div", { className: PoiInfoText_scss_1.default.tabs, role: "tablist", ref: tabsRef },
             react_1.default.createElement("button", { className: `${PoiInfoText_scss_1.default.tab} ${activeTab === 'overview' ? PoiInfoText_scss_1.default.active : ''}`, onClick: () => setActiveTab('overview'), role: "tab", "aria-selected": activeTab === 'overview', type: "button" }, t('overview.desktop')),
-            react_1.default.createElement("button", { className: `${PoiInfoText_scss_1.default.tab} ${activeTab === 'bookable' ? PoiInfoText_scss_1.default.active : ''}`, onClick: () => setActiveTab('bookable'), role: "tab", "aria-selected": activeTab === 'bookable', type: "button" }, t('bookable.desktop'))),
+            react_1.default.createElement("button", { className: `${PoiInfoText_scss_1.default.tab} ${activeTab === 'bookable' ? PoiInfoText_scss_1.default.active : ''}`, onClick: () => { setActiveTab('bookable'); onBookableTabClick === null || onBookableTabClick === void 0 ? void 0 : onBookableTabClick(); }, role: "tab", "aria-selected": activeTab === 'bookable', type: "button" }, t('bookable.desktop'))),
         activeTab === 'overview' && (react_1.default.createElement(react_1.default.Fragment, null,
             poi.description && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { className: PoiInfoText_scss_1.default.description, dangerouslySetInnerHTML: { __html: dompurify_1.default.sanitize(poi.description) } }),
@@ -92307,14 +92307,14 @@ const StepInfo = ({ step, favorite, toggleFavorite, removeStep, close, dayNumber
 hidePartOfDay, hideFeatures, hideCuisine, reservationButtonClick, planDate, favoriteLoading, reservationUrl, hideBookingButton, hideTours, getTourInfo, tourProducts, ticketProducts, tourTicketProductsLoading, 
 // TOUR_PROVIDER_IDS,
 // TICKET_PROVIDER_IDS,
-RESTAURANT_RESERVATION_PROVIDER_IDS, myOffers, isLoadingOffer, offerButtonClick, offerCardClicked, hideOffers, loadingFeedback, feedbackSubjects, sendFeedback, placeInfoCallBack, isBookingClicked, timezone, onImageModalChange, t, }) => (react_1.default.createElement(PoiInfo_1.default, { dayNumbers: dayNumbers, poi: step.poi, favorite: favorite, toggleFavorite: toggleFavorite, close: close, addRemoveReplacePoi: () => {
+RESTAURANT_RESERVATION_PROVIDER_IDS, myOffers, isLoadingOffer, offerButtonClick, offerCardClicked, hideOffers, loadingFeedback, feedbackSubjects, sendFeedback, placeInfoCallBack, isBookingClicked, onBookableTabClick, timezone, onImageModalChange, t, }) => (react_1.default.createElement(PoiInfo_1.default, { dayNumbers: dayNumbers, poi: step.poi, favorite: favorite, toggleFavorite: toggleFavorite, close: close, addRemoveReplacePoi: () => {
         removeStep(step.id);
     }, stepOrder: step.order, hideActionButtons: hideActionButtons, hideFavoriteIcon: hideFavoriteIcon, 
     // hideScore={hideScore}
     hidePartOfDay: hidePartOfDay, hideFeatures: hideFeatures, hideCuisine: hideCuisine, reservationButtonClick: reservationButtonClick, planDate: planDate, favoriteLoading: favoriteLoading, reservationUrl: reservationUrl, hideBookingButton: hideBookingButton, square: false, hideTours: hideTours, getTourInfo: getTourInfo, tourProducts: tourProducts, ticketProducts: ticketProducts, tourTicketProductsLoading: tourTicketProductsLoading, 
     // TOUR_PROVIDER_IDS={TOUR_PROVIDER_IDS}
     // TICKET_PROVIDER_IDS={TICKET_PROVIDER_IDS}
-    RESTAURANT_RESERVATION_PROVIDER_IDS: RESTAURANT_RESERVATION_PROVIDER_IDS, myOffers: myOffers, isLoadingOffer: isLoadingOffer, offerButtonClick: offerButtonClick, offerCardClicked: offerCardClicked, hideOffers: hideOffers, loadingFeedback: loadingFeedback, feedbackSubjects: feedbackSubjects, sendFeedback: sendFeedback, placeInfoCallBack: placeInfoCallBack, isBookingClicked: isBookingClicked, timezone: timezone, onImageModalChange: onImageModalChange, stepType: step.stepType, t: t }));
+    RESTAURANT_RESERVATION_PROVIDER_IDS: RESTAURANT_RESERVATION_PROVIDER_IDS, myOffers: myOffers, isLoadingOffer: isLoadingOffer, offerButtonClick: offerButtonClick, offerCardClicked: offerCardClicked, hideOffers: hideOffers, loadingFeedback: loadingFeedback, feedbackSubjects: feedbackSubjects, sendFeedback: sendFeedback, placeInfoCallBack: placeInfoCallBack, isBookingClicked: isBookingClicked, onBookableTabClick: onBookableTabClick, timezone: timezone, onImageModalChange: onImageModalChange, stepType: step.stepType, t: t }));
 exports.default = StepInfo;
 
 
@@ -93684,7 +93684,13 @@ const KiwiHotelCard_scss_1 = __importDefault(__webpack_require__(1134));
 const KiwiHotelCardImage_1 = __importDefault(__webpack_require__(1135));
 const KiwiVisaBenefitsModal_1 = __importDefault(__webpack_require__(450));
 const currencySymbol_1 = __webpack_require__(123);
-const KiwiHotelCard = ({ hotel, isFavorite, onFavoriteToggle, showVisaBadge, onHover, onSpecialOffersClick, t }) => {
+const buildBookingUrl = (catalogUrl, checkIn, checkOut, adults, children) => {
+    const base = catalogUrl.replace(/\/$/, '');
+    if (!checkIn || !checkOut)
+        return base;
+    return `${base}/${checkIn}/${checkOut}/${adults !== null && adults !== void 0 ? adults : 2}/${children !== null && children !== void 0 ? children : 0}/1`;
+};
+const KiwiHotelCard = ({ hotel, isFavorite, onFavoriteToggle, showVisaBadge, onHover, onSpecialOffersClick, onCardClick, checkIn, checkOut, adults, children, t }) => {
     const [visaModalOpen, setVisaModalOpen] = (0, react_1.useState)(false);
     const starCount = Math.min(5, Math.round(parseFloat(hotel.starRating) || 0));
     const score = parseFloat(hotel.kiwiOverallScore) || 0;
@@ -93709,10 +93715,7 @@ const KiwiHotelCard = ({ hotel, isFavorite, onFavoriteToggle, showVisaBadge, onH
     const hasInfoTable = perks.length > 0 || hasSpecialOffer || roomCount || settings || styles;
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { className: KiwiHotelCard_scss_1.default.card, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(hotel.code), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(null), onClick: () => {
-            if (hotel.catalogUrl)
-                window.open(hotel.catalogUrl, '_blank', 'noopener,noreferrer');
-        }, role: hotel.websiteURL ? 'button' : undefined, tabIndex: hotel.websiteURL ? 0 : undefined },
+    react_1.default.createElement("div", { className: KiwiHotelCard_scss_1.default.card, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(hotel.code), onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(null), onClick: () => onCardClick === null || onCardClick === void 0 ? void 0 : onCardClick(hotel), role: onCardClick ? 'button' : undefined, tabIndex: onCardClick ? 0 : undefined },
         react_1.default.createElement("div", { className: KiwiHotelCard_scss_1.default.imageArea },
             react_1.default.createElement(KiwiHotelCardImage_1.default, { images: imageUrls, alt: hotel.title, isFavorite: isFavorite, onFavoriteToggle: onFavoriteToggle ? () => onFavoriteToggle(hotel) : undefined })),
         react_1.default.createElement("div", { className: KiwiHotelCard_scss_1.default.content },
@@ -93729,7 +93732,7 @@ const KiwiHotelCard = ({ hotel, isFavorite, onFavoriteToggle, showVisaBadge, onH
                     react_1.default.createElement("button", { type: "button", className: KiwiHotelCard_scss_1.default.bookBtn, onClick: (e) => {
                             e.stopPropagation();
                             if (hotel.catalogUrl)
-                                window.open(hotel.catalogUrl, '_blank', 'noopener,noreferrer');
+                                window.open(buildBookingUrl(hotel.catalogUrl, checkIn, checkOut, adults, children), '_blank', 'noopener,noreferrer');
                         } }, t('kiwi.card.book')))),
             react_1.default.createElement("div", { className: KiwiHotelCard_scss_1.default.row2 },
                 react_1.default.createElement("span", { className: KiwiHotelCard_scss_1.default.name }, hotel.title),
@@ -94806,15 +94809,14 @@ const KiwiHotelInfoModal = ({ hotel, onClose, fetchPropertyDetail, fetchProperty
                                                         react_1.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                                                         react_1.default.createElement("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
                                                         react_1.default.createElement("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" }))))),
-                                            (onCreateReservation || onBookNow) && (react_1.default.createElement("button", { type: "button", className: KiwiHotelInfoModal_scss_1.default.bookNowBtn, onClick: () => {
+                                            hotel.catalogUrl && (react_1.default.createElement("button", { type: "button", className: KiwiHotelInfoModal_scss_1.default.bookNowBtn, onClick: () => {
                                                     if (onBookNowClick)
                                                         onBookNowClick(hotel, room, rate);
-                                                    if (onCreateReservation) {
-                                                        setBookingModal({ room, rate, currency: rateCurrency });
-                                                    }
-                                                    else if (onBookNow) {
-                                                        onBookNow(hotel, room, rate);
-                                                    }
+                                                    const base = hotel.catalogUrl.replace(/\/$/, '');
+                                                    const url = internalCheckIn && internalCheckOut
+                                                        ? `${base}/${internalCheckIn}/${internalCheckOut}/${internalAdults}/${internalChildren}/1`
+                                                        : base;
+                                                    window.open(url, '_blank', 'noopener,noreferrer');
                                                 } }, t('kiwi.common.bookNow'))))),
                                     (rate.description || (rate.policies && Object.values(rate.policies).some(Boolean))) && (react_1.default.createElement("button", { type: "button", className: KiwiHotelInfoModal_scss_1.default.seeMoreBtn, onClick: () => { setRoomRateModal({ roomTitle: room.title, rate, currency: rateCurrency }); if (onSeeMoreDetails)
                                             onSeeMoreDetails(hotel, room, rate); } },
@@ -94889,17 +94891,13 @@ const KiwiHotelInfoModal = ({ hotel, onClose, fetchPropertyDetail, fetchProperty
                                 react_1.default.createElement("polyline", { points: "9 18 15 12 9 6" })))))))),
         visaModalOpen && react_1.default.createElement(KiwiVisaBenefitsModal_1.default, { onClose: () => setVisaModalOpen(false), t: t }),
         offersModalOpen && (react_1.default.createElement(KiwiSpecialOffersModal_1.default, { hotelName: data.title, specialOffers: loadingDetail ? undefined : ((_b = propertyDetail === null || propertyDetail === void 0 ? void 0 : propertyDetail.specialOffers) !== null && _b !== void 0 ? _b : []), onClose: () => setOffersModalOpen(false), t: t })),
-        roomRateModal && (react_1.default.createElement(KiwiRoomRateModal_1.default, { roomTitle: roomRateModal.roomTitle, rate: roomRateModal.rate, currency: roomRateModal.currency, nightCount: nightCount, onClose: () => setRoomRateModal(undefined), t: t, onBookNow: onCreateReservation || onBookNow ? () => {
-                const { rate: rr, currency: rc } = roomRateModal;
-                const matchingRoom = availabilityData === null || availabilityData === void 0 ? void 0 : availabilityData.rooms.find((r) => { var _a; return (_a = r.rates) === null || _a === void 0 ? void 0 : _a.some((rt) => rt.code === rr.code); });
+        roomRateModal && (react_1.default.createElement(KiwiRoomRateModal_1.default, { roomTitle: roomRateModal.roomTitle, rate: roomRateModal.rate, currency: roomRateModal.currency, nightCount: nightCount, onClose: () => setRoomRateModal(undefined), t: t, onBookNow: hotel.catalogUrl ? () => {
                 setRoomRateModal(undefined);
-                if (onCreateReservation) {
-                    if (matchingRoom)
-                        setBookingModal({ room: matchingRoom, rate: rr, currency: rc });
-                }
-                else if (onBookNow && matchingRoom) {
-                    onBookNow(hotel, matchingRoom, rr);
-                }
+                const base = hotel.catalogUrl.replace(/\/$/, '');
+                const url = internalCheckIn && internalCheckOut
+                    ? `${base}/${internalCheckIn}/${internalCheckOut}/${internalAdults}/${internalChildren}/1`
+                    : base;
+                window.open(url, '_blank', 'noopener,noreferrer');
             } : undefined })),
         bookingModal && onCreateReservation && (react_1.default.createElement(KiwiBookingModal_1.default, { hotelName: data.title, roomTitle: bookingModal.room.title, rate: bookingModal.rate, currency: bookingModal.currency, checkIn: internalCheckIn, checkOut: internalCheckOut, nightCount: nightCount, adults: internalAdults, children: internalChildren, propertyCode: hotel.code, roomCode: bookingModal.room.code, generateExternalId: generateExternalId || (() => `${hotel.code}-${Date.now()}`), onClose: () => setBookingModal(undefined), onCreateReservation: async (req) => {
                 const res = await onCreateReservation(req);