@tripian/react 9.1.74 → 9.1.75

package/components/PoiInfo/PoiInfo.d.ts

@@ -38,6 +38,7 @@ interface IPoiInfo {
     sendFeedback: (value: Model.FeedbackRequest) => Promise<void>;
     placeInfoCallBack: () => void;
     redeemClicked?: () => void;
+    onImageModalChange?: (isOpen: boolean) => void;
     t: (value: Model.TranslationKey) => string;
 }
 declare const PoiInfo: React.FC<IPoiInfo>;

package/components/PoiInfo/PoiInfoImage/PoiInfoImageDesktop/PoiInfoImageDesktop.d.ts

@@ -5,6 +5,7 @@ import 'slick-carousel/slick/slick-theme.css';
 interface IPoiInfoImageDesktop {
     poi: Model.Poi;
     t: (key: Model.TranslationKey) => string;
+    onImageModalChange?: (isOpen: boolean) => void;
 }
 declare const PoiInfoImageDesktop: React.FC<IPoiInfoImageDesktop>;
 export default PoiInfoImageDesktop;

package/components/StepInfo/StepInfo.d.ts

@@ -35,6 +35,7 @@ interface IStepInfo {
     showStepScoreDetails: boolean;
     isBookingClicked: boolean;
     timezone?: string;
+    onImageModalChange?: (isOpen: boolean) => void;
     t: (value: Model.TranslationKey) => string;
 }
 declare const StepInfo: React.FC<IStepInfo>;

package/index.js

@@ -27535,7 +27535,7 @@ const DestinationSelect = ({ options, selectedOptionId, onSelectedOptionChange,
             react_1.default.createElement(react_select_1.default, { ref: selectRef, options: (0, match_sorter_1.matchSorter)(options, destinationSearchInput, { keys: ['label'] }), defaultValue: selectedOption, value: selectedOption, onChange: handleChange, onInputChange: (e) => setDestinationSearchInput(e), placeholder: placeHolder, className: "destinationSelect", classNamePrefix: "destinationSelect", isDisabled: disabled, isOptionDisabled: (option) => option.isSelected === true, isOptionSelected: (option) => option.isSelected === true, onFocus: () => onFocus && onFocus(), onBlur: () => onBlur && onBlur(), noOptionsMessage: noOptionsMessage, formatOptionLabel: formatOptionLabel, menuPlacement: "auto", components: { DropdownIndicator: null }, menuPortalTarget: document.body, styles: {
                     menuPortal: (base) => ({ ...base, zIndex: 9999 }),
                 } }),
-            showAiSuggestions && (react_1.default.createElement(Button_1.default, { onClick: handleOpenSuggestionsModal, className: "absolute top-0 right-0 mt-3 mr-12 px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-sm rounded-full shadow-md hover:shadow-lg transition-all flex items-center md:text-sm md:px-3 md:py-1 sm:text-xs sm:px-2 sm:py-0.5 sm:top-[50%] sm:transform sm:-translate-y-1/2 sm:mt-0 sm:mr-8", style: { zIndex: 1 }, text: t('destination.ai.buttonText'), type: ButtonTypes_1.default.CONTAINED }))),
+            showAiSuggestions && (react_1.default.createElement(Button_1.default, { onClick: handleOpenSuggestionsModal, className: `px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-sm rounded-full shadow-md hover:shadow-lg transition-all flex items-center md:text-sm md:px-3 md:py-1 sm:text-xs sm:px-2 sm:py-0.5 ${DestinationSelect_scss_1.default.aiSuggestionsButton}`, style: { zIndex: 1 }, text: t('destination.ai.buttonText'), type: ButtonTypes_1.default.CONTAINED }))),
         showAiSuggestions &&
             isSuggestionsModalOpen &&
             (0, react_dom_1.createPortal)(react_1.default.createElement(CitySearchModal_1.default, { isOpen: isSuggestionsModalOpen, onClose: () => setSuggestionsModalOpen(false), suggestions: suggestions || [], onSelectCity: handleSuggestedCitySelect, searchText: lastSearchText, handleSearchChange: handleSearchChange, isSearching: isSearching, onClearSuggestions: onClearSuggestions, t: t }), document.body)));
@@ -57792,7 +57792,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, t, }) => {
+loadingFeedback, feedbackSubjects, isBookingClicked, timezone = 'UTC', sendFeedback, redeemClicked, onImageModalChange, t, }) => {
     const [optInModalWarningMessage, setOptInModalWarningMessage] = (0, react_1.useState)([]);
     const [showShareModal, setShowShareModal] = (0, react_1.useState)(false);
     const offerRef = react_1.default.createRef();
@@ -57835,7 +57835,7 @@ loadingFeedback, feedbackSubjects, isBookingClicked, timezone = 'UTC', sendFeedb
                 react_1.default.createElement("div", { className: PoiInfo_scss_1.default.hours },
                     react_1.default.createElement(OpenedHours_1.default, { hourStr: poi.hours || '', planDate: planDate, timezone: timezone, t: t })))),
             react_1.default.createElement("div", { className: PoiInfo_scss_1.default.content },
-                react_1.default.createElement("div", { className: PoiInfo_scss_1.default.gallery }, !isNaN(parseFloat(poi.id)) && react_1.default.createElement(PoiInfoImageDesktop_1.default, { poi: poi, t: t }))),
+                react_1.default.createElement("div", { className: PoiInfo_scss_1.default.gallery }, !isNaN(parseFloat(poi.id)) && react_1.default.createElement(PoiInfoImageDesktop_1.default, { poi: poi, onImageModalChange: onImageModalChange, t: t }))),
             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 }),
             !hideOffers && poi.offers && poi.offers.length > 0 && (react_1.default.createElement("div", { className: "col col12 px5 pb5" },
                 poi.offers.map((offer, i) => {
@@ -57884,6 +57884,8 @@ exports.default = PoiInfo;
 
 "use strict";
 
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable import/no-extraneous-dependencies */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -57911,7 +57913,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable import/no-extraneous-dependencies */
 const react_1 = __importStar(__webpack_require__(0));
 const model_1 = __webpack_require__(9);
 const react_dom_1 = __importDefault(__webpack_require__(14));
@@ -57922,10 +57923,28 @@ const ImgLazy_1 = __importDefault(__webpack_require__(16));
 const CloseIconButton_1 = __importDefault(__webpack_require__(20));
 const Icons_1 = __webpack_require__(11);
 const PoiInfoImageDesktop_scss_1 = __importDefault(__webpack_require__(1005));
-const PoiInfoImageDesktop = ({ poi, t }) => {
+const PoiInfoImageDesktop = ({ poi, t, onImageModalChange }) => {
     var _a;
     const [imageZoomed, setImageZoomed] = (0, react_1.useState)({ clicked: false, url: '' });
     const [selectedImage, setSelectedImage] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (onImageModalChange)
+            onImageModalChange(imageZoomed.clicked);
+    }, [imageZoomed.clicked]);
+    (0, react_1.useEffect)(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape') {
+                setImageZoomed({ clicked: false, url: '' });
+                setSelectedImage('');
+            }
+        };
+        if (imageZoomed.clicked) {
+            document.addEventListener('keydown', handleEsc);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEsc);
+        };
+    }, [imageZoomed.clicked]);
     const images = poi.gallery.length === 0 ? [{ url: emptyImage_1.default, imageOwner: null }] : poi.gallery.map((img) => ({ url: model_1.helper.imgUrl(img.url, 1200), imageOwner: img.imageOwner }));
     const mainImage = images[0];
     if (!(mainImage === null || mainImage === void 0 ? void 0 : mainImage.url))
@@ -57982,8 +58001,19 @@ const PoiInfoImageDesktop = ({ poi, t }) => {
     });
     return (react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.container },
         imageZoomed.clicked &&
-            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalWrapper },
-                react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalContent },
+            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalWrapper, role: "button", "aria-label": "Close image modal", tabIndex: 0, onClick: (e) => {
+                    if (e.target === e.currentTarget) {
+                        setImageZoomed({ clicked: false, url: '' });
+                        setSelectedImage('');
+                    }
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setImageZoomed({ clicked: false, url: '' });
+                        setSelectedImage('');
+                    }
+                } },
+                react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalContent, role: "dialog", "aria-modal": "true", tabIndex: -1 },
                     react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalHeader, style: { position: 'relative' } },
                         react_1.default.createElement("div", { className: PoiInfoImageDesktop_scss_1.default.modalCloseIcon, style: { position: 'absolute', top: '0.5rem', right: '0.5rem' } },
                             react_1.default.createElement(CloseIconButton_1.default, { fill: "#333", clicked: () => {
@@ -78442,7 +78472,7 @@ exports.default = CitySearchModal;
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"optionLabel":"components-DestinationSelect-DestinationSelect__optionLabel--2Gare","optionLabelText":"components-DestinationSelect-DestinationSelect__optionLabelText--2CoVy"};
+module.exports = {"optionLabel":"components-DestinationSelect-DestinationSelect__optionLabel--2Gare","optionLabelText":"components-DestinationSelect-DestinationSelect__optionLabelText--2CoVy","aiSuggestionsButton":"components-DestinationSelect-DestinationSelect__aiSuggestionsButton--13IWJ"};
 
 /***/ }),
 /* 829 */
@@ -89204,14 +89234,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, 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, 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, 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, timezone: timezone, onImageModalChange: onImageModalChange, t: t }));
 exports.default = StepInfo;