@qite/tide-booking-component 1.4.33 → 1.4.34

package/build/build-cjs/index.js

@@ -13345,15 +13345,16 @@ var Product = function (_a) {
     var _m = React.useState(false), hasTransfer = _m[0], setHasTransfer = _m[1];
     var _o = React.useState([{ adults: 2, children: 0, childAges: [] }]), rooms = _o[0], setRooms = _o[1];
     var _p = React.useState([]), searchResponse = _p[0], setSearchResponse = _p[1];
-    var _q = React.useState(), dateRange = _q[0], setDateRange = _q[1];
-    var _r = React.useState(productName), packageProductName = _r[0], setPackageProductName = _r[1];
-    var _s = React.useState(''), currencyCode = _s[0], setCurrencyCode = _s[1];
-    var _t = React.useState([]), searchResults = _t[0], setSearchResults = _t[1];
+    var _q = React.useState(), detailResponse = _q[0], setDetailResponse = _q[1];
+    var _r = React.useState(), dateRange = _r[0], setDateRange = _r[1];
+    var _s = React.useState(productName), packageProductName = _s[0], setPackageProductName = _s[1];
+    var _t = React.useState(''), currencyCode = _t[0], setCurrencyCode = _t[1];
+    var _u = React.useState([]), searchResults = _u[0], setSearchResults = _u[1];
     var skipNextFetchRef = React.useRef(false);
     var fetchPackage = function (signal) { return __awaiter(void 0, void 0, void 0, function () {
-        var apiSettingsState, startDate, endDate, requestRooms, detailsRequest, searchRequest, detailResponse, _a, selectedOption, hasFlight_1, hasTranfer;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var apiSettingsState, startDate, endDate, requestRooms, detailsRequest, searchRequest, _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     if (displayMode === 'list' && searchType !== 1) {
                         console.error('The combination of searchType and displayMode is not supported.' + " Please set searchType to 1 when using displayMode 'list'.");
@@ -13415,40 +13416,22 @@ var Product = function (_a) {
                         }
                     };
                     setIsLoading(true);
-                    detailResponse = void 0;
                     if (!(displayMode === 'calendar' && searchType === 0)) return [3 /*break*/, 2];
+                    _a = setDetailResponse;
                     return [4 /*yield*/, packageApi$1.fetchDetails(detailsRequest, signal, language, apiSettingsState)];
                 case 1:
-                    detailResponse = _b.sent();
-                    _b.label = 2;
+                    _a.apply(void 0, [_c.sent()]);
+                    _c.label = 2;
                 case 2:
                     if (!(searchType === 1)) return [3 /*break*/, 4];
-                    _a = setSearchResponse;
+                    _b = setSearchResponse;
                     return [4 /*yield*/, packageApi$1.fetchSearch(searchRequest, signal, apiSettingsState)];
                 case 3:
-                    _a.apply(void 0, [_b.sent()]);
-                    _b.label = 4;
+                    _b.apply(void 0, [_c.sent()]);
+                    _c.label = 4;
                 case 4:
-                    if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
-                        selectedOption = detailResponse.payload.options.find(function (x) { return x.isSelected; });
-                        if (selectedOption) {
-                            hasFlight_1 = selectedOption.includedServiceTypes.some(function (x) { return x === 7; });
-                            hasTranfer = selectedOption.includedServiceTypes.some(function (x) { return x === 13; });
-                            setPrice(selectedOption.price);
-                            setHasFlight(hasFlight_1);
-                            setHasTransfer(hasTranfer);
-                            setCurrencyCode(detailResponse.payload.currencyCode);
-                            setPackageProductName(selectedOption.name);
-                        }
-                    }
-                    else {
-                        setPrice(undefined);
-                        setHasFlight(false);
-                        setHasTransfer(false);
-                        setCurrencyCode('');
-                    }
                     setIsLoading(false);
-                    _b.label = 5;
+                    _c.label = 5;
                 case 5: return [2 /*return*/];
             }
         });
@@ -13519,10 +13502,12 @@ var Product = function (_a) {
             if (selectedItem) {
                 setPrice(selectedItem.price);
                 setPackageProductName(selectedItem.name);
+                setCurrencyCode(selectedItem.currencyCode);
             }
             else {
                 setPrice(searchResponse[0].price);
                 setPackageProductName(searchResponse[0].name);
+                setCurrencyCode(searchResponse[0].currencyCode);
             }
         }
         else {
@@ -13531,6 +13516,26 @@ var Product = function (_a) {
             setPackageProductName(translations.PRODUCT.NOT_AVAILABLE);
         }
     }, [searchResponse]);
+    React.useEffect(function () {
+        if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+            var selectedOption = detailResponse.payload.options.find(function (x) { return x.isSelected; });
+            if (selectedOption) {
+                var hasFlight_1 = selectedOption.includedServiceTypes.some(function (x) { return x === 7; });
+                var hasTranfer = selectedOption.includedServiceTypes.some(function (x) { return x === 13; });
+                setPrice(selectedOption.price);
+                setHasFlight(hasFlight_1);
+                setHasTransfer(hasTranfer);
+                setCurrencyCode(detailResponse.payload.currencyCode);
+                setPackageProductName(selectedOption.name);
+            }
+        }
+        else if (detailResponse !== undefined) {
+            setPrice(undefined);
+            setHasFlight(false);
+            setHasTransfer(false);
+            setCurrencyCode('');
+        }
+    }, [detailResponse]);
     React.useEffect(function () {
         if (searchType === 1 && skipNextFetchRef.current) {
             skipNextFetchRef.current = false;
@@ -20846,7 +20851,7 @@ var QSMContainer = function () {
     var isMobile = useMediaQuery('(max-width: 768px)');
     var qsmState = reactRedux.useSelector(function (state) { return state.qsm; });
     var mobileFilterType = qsmState.mobileFilterType, fromDate = qsmState.fromDate, toDate = qsmState.toDate;
-    var _a = React.useContext(QSMConfigurationContext), searchFields = _a.searchFields, askTravelers = _a.askTravelers, submitIcon = _a.submitIcon, submitLabel = _a.submitLabel, onSubmit = _a.onSubmit;
+    var _a = React.useContext(QSMConfigurationContext), searchFields = _a.searchFields, askTravelers = _a.askTravelers, submitIcon = _a.submitIcon, submitLabel = _a.submitLabel, onSubmit = _a.onSubmit, travelTypes = _a.travelTypes;
     React.useEffect(function () {
         if (fromDate || toDate)
             return;
@@ -20871,19 +20876,15 @@ var QSMContainer = function () {
     var handleSubmit = function () {
         if (!onSubmit)
             return;
-        var fromDate = qsmState.fromDate, toDate = qsmState.toDate, travelers = qsmState.travelers, selectedTravelClass = qsmState.selectedTravelClass, selectedTravelType = qsmState.selectedTravelType, selectedNationality = qsmState.selectedNationality, adults = qsmState.adults, kids = qsmState.kids, babies = qsmState.babies, rooms = qsmState.rooms, selectedFlexRange = qsmState.selectedFlexRange;
+        var fromDate = qsmState.fromDate, toDate = qsmState.toDate; qsmState.travelers; var selectedTravelClass = qsmState.selectedTravelClass, selectedTravelType = qsmState.selectedTravelType, selectedNationality = qsmState.selectedNationality; qsmState.adults; qsmState.kids; qsmState.babies; var rooms = qsmState.rooms; qsmState.selectedFlexRange;
+        var selectedTravelTypeValue = travelTypes.find(function (t) { return t.label === selectedTravelType; });
         var payload = {
             fromDate: fromDate,
             toDate: toDate,
-            travelers: travelers,
             travelClass: selectedTravelClass,
-            travelType: selectedTravelType,
+            travelType: selectedTravelTypeValue,
             nationality: selectedNationality,
-            adults: adults,
-            kids: kids,
-            babies: babies,
-            rooms: rooms,
-            dateFlexibility: selectedFlexRange
+            rooms: rooms
         };
         addSearchFieldsToPayload(payload, searchFields, qsmState);
         onSubmit(payload);
@@ -22016,7 +22017,7 @@ var SearchResultsContainer = function () {
     var _g = React.useState([]); _g[0]; var setInitialFilters = _g[1];
     React.useEffect(function () {
         var runSearch = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var params, from, to, rooms, country, region, oord, city, destinationId, destinationIsCountry, destinationIsRegion, destinationIsOord, destinationIsLocation, searchRequest, config, packageSearchResults, enrichedFilters, err_1;
+            var params, from, to, rooms, country, region, oord, city, hotel, tagId, destinationId, destinationIsCountry, destinationIsRegion, destinationIsOord, destinationIsLocation, searchRequest, config, packageSearchResults, enrichedFilters, err_1;
             var _a, _b, _c, _d, _e;
             return __generator(this, function (_f) {
                 switch (_f.label) {
@@ -22036,6 +22037,8 @@ var SearchResultsContainer = function () {
                         region = getNumberFromParams(params, 'region');
                         oord = getNumberFromParams(params, 'oord');
                         city = getNumberFromParams(params, 'location');
+                        hotel = getNumberFromParams(params, 'hotel');
+                        tagId = getNumberFromParams(params, 'tagId');
                         // temp hardcoded params
                         if (!from || !to) {
                             from = '2026-04-07';
@@ -22093,7 +22096,9 @@ var SearchResultsContainer = function () {
                                 maxPrice: (_e = filters.find(function (f) { return f.property === 'price'; })) === null || _e === void 0 ? void 0 : _e.selectedMax,
                                 useExactDates: true,
                                 onlyCachedResults: false,
-                                includeAllAllotments: true
+                                includeAllAllotments: true,
+                                productIds: hotel ? [hotel] : [],
+                                productTagIds: tagId ? [tagId] : []
                             }
                         };
                         config = {

package/build/build-esm/index.js

@@ -13334,15 +13334,16 @@ var Product = function (_a) {
     var _m = useState(false), hasTransfer = _m[0], setHasTransfer = _m[1];
     var _o = useState([{ adults: 2, children: 0, childAges: [] }]), rooms = _o[0], setRooms = _o[1];
     var _p = useState([]), searchResponse = _p[0], setSearchResponse = _p[1];
-    var _q = useState(), dateRange = _q[0], setDateRange = _q[1];
-    var _r = useState(productName), packageProductName = _r[0], setPackageProductName = _r[1];
-    var _s = useState(''), currencyCode = _s[0], setCurrencyCode = _s[1];
-    var _t = useState([]), searchResults = _t[0], setSearchResults = _t[1];
+    var _q = useState(), detailResponse = _q[0], setDetailResponse = _q[1];
+    var _r = useState(), dateRange = _r[0], setDateRange = _r[1];
+    var _s = useState(productName), packageProductName = _s[0], setPackageProductName = _s[1];
+    var _t = useState(''), currencyCode = _t[0], setCurrencyCode = _t[1];
+    var _u = useState([]), searchResults = _u[0], setSearchResults = _u[1];
     var skipNextFetchRef = useRef(false);
     var fetchPackage = function (signal) { return __awaiter(void 0, void 0, void 0, function () {
-        var apiSettingsState, startDate, endDate, requestRooms, detailsRequest, searchRequest, detailResponse, _a, selectedOption, hasFlight_1, hasTranfer;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        var apiSettingsState, startDate, endDate, requestRooms, detailsRequest, searchRequest, _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     if (displayMode === 'list' && searchType !== 1) {
                         console.error('The combination of searchType and displayMode is not supported.' + " Please set searchType to 1 when using displayMode 'list'.");
@@ -13404,40 +13405,22 @@ var Product = function (_a) {
                         }
                     };
                     setIsLoading(true);
-                    detailResponse = void 0;
                     if (!(displayMode === 'calendar' && searchType === 0)) return [3 /*break*/, 2];
+                    _a = setDetailResponse;
                     return [4 /*yield*/, packageApi$1.fetchDetails(detailsRequest, signal, language, apiSettingsState)];
                 case 1:
-                    detailResponse = _b.sent();
-                    _b.label = 2;
+                    _a.apply(void 0, [_c.sent()]);
+                    _c.label = 2;
                 case 2:
                     if (!(searchType === 1)) return [3 /*break*/, 4];
-                    _a = setSearchResponse;
+                    _b = setSearchResponse;
                     return [4 /*yield*/, packageApi$1.fetchSearch(searchRequest, signal, apiSettingsState)];
                 case 3:
-                    _a.apply(void 0, [_b.sent()]);
-                    _b.label = 4;
+                    _b.apply(void 0, [_c.sent()]);
+                    _c.label = 4;
                 case 4:
-                    if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
-                        selectedOption = detailResponse.payload.options.find(function (x) { return x.isSelected; });
-                        if (selectedOption) {
-                            hasFlight_1 = selectedOption.includedServiceTypes.some(function (x) { return x === 7; });
-                            hasTranfer = selectedOption.includedServiceTypes.some(function (x) { return x === 13; });
-                            setPrice(selectedOption.price);
-                            setHasFlight(hasFlight_1);
-                            setHasTransfer(hasTranfer);
-                            setCurrencyCode(detailResponse.payload.currencyCode);
-                            setPackageProductName(selectedOption.name);
-                        }
-                    }
-                    else {
-                        setPrice(undefined);
-                        setHasFlight(false);
-                        setHasTransfer(false);
-                        setCurrencyCode('');
-                    }
                     setIsLoading(false);
-                    _b.label = 5;
+                    _c.label = 5;
                 case 5: return [2 /*return*/];
             }
         });
@@ -13508,10 +13491,12 @@ var Product = function (_a) {
             if (selectedItem) {
                 setPrice(selectedItem.price);
                 setPackageProductName(selectedItem.name);
+                setCurrencyCode(selectedItem.currencyCode);
             }
             else {
                 setPrice(searchResponse[0].price);
                 setPackageProductName(searchResponse[0].name);
+                setCurrencyCode(searchResponse[0].currencyCode);
             }
         }
         else {
@@ -13520,6 +13505,26 @@ var Product = function (_a) {
             setPackageProductName(translations.PRODUCT.NOT_AVAILABLE);
         }
     }, [searchResponse]);
+    useEffect(function () {
+        if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+            var selectedOption = detailResponse.payload.options.find(function (x) { return x.isSelected; });
+            if (selectedOption) {
+                var hasFlight_1 = selectedOption.includedServiceTypes.some(function (x) { return x === 7; });
+                var hasTranfer = selectedOption.includedServiceTypes.some(function (x) { return x === 13; });
+                setPrice(selectedOption.price);
+                setHasFlight(hasFlight_1);
+                setHasTransfer(hasTranfer);
+                setCurrencyCode(detailResponse.payload.currencyCode);
+                setPackageProductName(selectedOption.name);
+            }
+        }
+        else if (detailResponse !== undefined) {
+            setPrice(undefined);
+            setHasFlight(false);
+            setHasTransfer(false);
+            setCurrencyCode('');
+        }
+    }, [detailResponse]);
     useEffect(function () {
         if (searchType === 1 && skipNextFetchRef.current) {
             skipNextFetchRef.current = false;
@@ -20835,7 +20840,7 @@ var QSMContainer = function () {
     var isMobile = useMediaQuery('(max-width: 768px)');
     var qsmState = useSelector(function (state) { return state.qsm; });
     var mobileFilterType = qsmState.mobileFilterType, fromDate = qsmState.fromDate, toDate = qsmState.toDate;
-    var _a = useContext(QSMConfigurationContext), searchFields = _a.searchFields, askTravelers = _a.askTravelers, submitIcon = _a.submitIcon, submitLabel = _a.submitLabel, onSubmit = _a.onSubmit;
+    var _a = useContext(QSMConfigurationContext), searchFields = _a.searchFields, askTravelers = _a.askTravelers, submitIcon = _a.submitIcon, submitLabel = _a.submitLabel, onSubmit = _a.onSubmit, travelTypes = _a.travelTypes;
     useEffect(function () {
         if (fromDate || toDate)
             return;
@@ -20860,19 +20865,15 @@ var QSMContainer = function () {
     var handleSubmit = function () {
         if (!onSubmit)
             return;
-        var fromDate = qsmState.fromDate, toDate = qsmState.toDate, travelers = qsmState.travelers, selectedTravelClass = qsmState.selectedTravelClass, selectedTravelType = qsmState.selectedTravelType, selectedNationality = qsmState.selectedNationality, adults = qsmState.adults, kids = qsmState.kids, babies = qsmState.babies, rooms = qsmState.rooms, selectedFlexRange = qsmState.selectedFlexRange;
+        var fromDate = qsmState.fromDate, toDate = qsmState.toDate; qsmState.travelers; var selectedTravelClass = qsmState.selectedTravelClass, selectedTravelType = qsmState.selectedTravelType, selectedNationality = qsmState.selectedNationality; qsmState.adults; qsmState.kids; qsmState.babies; var rooms = qsmState.rooms; qsmState.selectedFlexRange;
+        var selectedTravelTypeValue = travelTypes.find(function (t) { return t.label === selectedTravelType; });
         var payload = {
             fromDate: fromDate,
             toDate: toDate,
-            travelers: travelers,
             travelClass: selectedTravelClass,
-            travelType: selectedTravelType,
+            travelType: selectedTravelTypeValue,
             nationality: selectedNationality,
-            adults: adults,
-            kids: kids,
-            babies: babies,
-            rooms: rooms,
-            dateFlexibility: selectedFlexRange
+            rooms: rooms
         };
         addSearchFieldsToPayload(payload, searchFields, qsmState);
         onSubmit(payload);
@@ -22005,7 +22006,7 @@ var SearchResultsContainer = function () {
     var _g = useState([]); _g[0]; var setInitialFilters = _g[1];
     useEffect(function () {
         var runSearch = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var params, from, to, rooms, country, region, oord, city, destinationId, destinationIsCountry, destinationIsRegion, destinationIsOord, destinationIsLocation, searchRequest, config, packageSearchResults, enrichedFilters, err_1;
+            var params, from, to, rooms, country, region, oord, city, hotel, tagId, destinationId, destinationIsCountry, destinationIsRegion, destinationIsOord, destinationIsLocation, searchRequest, config, packageSearchResults, enrichedFilters, err_1;
             var _a, _b, _c, _d, _e;
             return __generator(this, function (_f) {
                 switch (_f.label) {
@@ -22025,6 +22026,8 @@ var SearchResultsContainer = function () {
                         region = getNumberFromParams(params, 'region');
                         oord = getNumberFromParams(params, 'oord');
                         city = getNumberFromParams(params, 'location');
+                        hotel = getNumberFromParams(params, 'hotel');
+                        tagId = getNumberFromParams(params, 'tagId');
                         // temp hardcoded params
                         if (!from || !to) {
                             from = '2026-04-07';
@@ -22082,7 +22085,9 @@ var SearchResultsContainer = function () {
                                 maxPrice: (_e = filters.find(function (f) { return f.property === 'price'; })) === null || _e === void 0 ? void 0 : _e.selectedMax,
                                 useExactDates: true,
                                 onlyCachedResults: false,
-                                includeAllAllotments: true
+                                includeAllAllotments: true,
+                                productIds: hotel ? [hotel] : [],
+                                productTagIds: tagId ? [tagId] : []
                             }
                         };
                         config = {

package/package.json

@@ -1,77 +1,77 @@
-{
-  "name": "@qite/tide-booking-component",
-  "version": "1.4.33",
-  "description": "React Booking wizard & Booking product component for Tide",
-  "main": "build/build-cjs/index.js",
-  "module": "build/build-esm/index.js",
-  "scripts": {
-    "start": "rollup -c -w",
-    "build": "rollup -c",
-    "tsc": "tsc --noEmit",
-    "format": "prettier --write .",
-    "prepare": "husky"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
-  },
-  "keywords": [
-    "tide",
-    "booking",
-    "react",
-    "component"
-  ],
-  "author": "Qite",
-  "license": "OBSD",
-  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
-  "devDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@qite/tide-client": "^1.1.123",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "@rollup/plugin-commonjs": "^19.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/flat": "^5.0.2",
-    "@types/lodash": "^4.14.171",
-    "@types/reach__router": "^1.3.9",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
-    "@types/uuid": "^8.3.1",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "husky": "^9.1.7",
-    "lodash": "^4.17.21",
-    "prettier": "^2.3.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "rollup": "^2.53.2",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "0.36.0",
-    "tslib": "^2.3.1",
-    "typescript": "^4.3.5",
-    "uuid": "^8.3.2"
-  },
-  "peerDependencies": {
-    "@jsonurl/jsonurl": "^1.1.4",
-    "@popperjs/core": "^2.10.2",
-    "@reach/router": "^1.3.4",
-    "@reduxjs/toolkit": "^1.6.0",
-    "date-fns": "^2.22.1",
-    "flat": "^5.0.2",
-    "formik": "^2.2.9",
-    "immer": "^9.0.5",
-    "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-popper": "^2.2.5",
-    "react-redux": "^7.2.4",
-    "uuid": "^8.3.2"
-  },
-  "dependencies": {
-    "react-html-comment": "^2.0.16"
-  }
-}
+{
+  "name": "@qite/tide-booking-component",
+  "version": "1.4.34",
+  "description": "React Booking wizard & Booking product component for Tide",
+  "main": "build/build-cjs/index.js",
+  "module": "build/build-esm/index.js",
+  "scripts": {
+    "start": "rollup -c -w",
+    "build": "rollup -c",
+    "tsc": "tsc --noEmit",
+    "format": "prettier --write .",
+    "prepare": "husky"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/qitegeneral/tide-booking-component.git"
+  },
+  "keywords": [
+    "tide",
+    "booking",
+    "react",
+    "component"
+  ],
+  "author": "Qite",
+  "license": "OBSD",
+  "homepage": "https://bitbucket.org/qitegeneral/tide-booking-component#readme",
+  "devDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@qite/tide-client": "^1.1.123",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.2",
+    "@types/flat": "^5.0.2",
+    "@types/lodash": "^4.14.171",
+    "@types/reach__router": "^1.3.9",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "@types/uuid": "^8.3.1",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "husky": "^9.1.7",
+    "lodash": "^4.17.21",
+    "prettier": "^2.3.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "rollup": "^2.53.2",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "0.36.0",
+    "tslib": "^2.3.1",
+    "typescript": "^4.3.5",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@jsonurl/jsonurl": "^1.1.4",
+    "@popperjs/core": "^2.10.2",
+    "@reach/router": "^1.3.4",
+    "@reduxjs/toolkit": "^1.6.0",
+    "date-fns": "^2.22.1",
+    "flat": "^5.0.2",
+    "formik": "^2.2.9",
+    "immer": "^9.0.5",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5",
+    "react-redux": "^7.2.4",
+    "uuid": "^8.3.2"
+  },
+  "dependencies": {
+    "react-html-comment": "^2.0.16"
+  }
+}

package/src/booking-product/components/product.tsx

@@ -57,6 +57,7 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
   const [hasTransfer, setHasTransfer] = useState<boolean>(false);
   const [rooms, setRooms] = useState<ProductRoom[]>([{ adults: 2, children: 0, childAges: [] }]);
   const [searchResponse, setSearchResponse] = useState<BookingPackageItem[]>([]);
+  const [detailResponse, setDetailResponse] = useState<any>();
   const [dateRange, setDateRange] = useState<DateRange>();
   const [packageProductName, setPackageProductName] = useState<string>(productName);
   const [currencyCode, setCurrencyCode] = useState<string>('');
@@ -135,35 +136,14 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
 
       setIsLoading(true);
 
-      let detailResponse;
       if (displayMode === 'calendar' && searchType === 0) {
-        detailResponse = await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState);
+        setDetailResponse(await packageApi.fetchDetails(detailsRequest, signal, language, apiSettingsState));
       }
 
       if (searchType === 1) {
         setSearchResponse(await packageApi.fetchSearch(searchRequest, signal, apiSettingsState));
       }
 
-      if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
-        const selectedOption = detailResponse.payload.options.find((x) => x.isSelected);
-
-        if (selectedOption) {
-          const hasFlight = selectedOption.includedServiceTypes.some((x) => x === 7);
-          const hasTranfer = selectedOption.includedServiceTypes.some((x) => x === 13);
-
-          setPrice(selectedOption.price);
-          setHasFlight(hasFlight);
-          setHasTransfer(hasTranfer);
-          setCurrencyCode(detailResponse.payload.currencyCode);
-          setPackageProductName(selectedOption.name);
-        }
-      } else {
-        setPrice(undefined);
-        setHasFlight(false);
-        setHasTransfer(false);
-        setCurrencyCode('');
-      }
-
       setIsLoading(false);
     }
   };
@@ -256,9 +236,11 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
       if (selectedItem) {
         setPrice(selectedItem.price);
         setPackageProductName(selectedItem.name);
+        setCurrencyCode(selectedItem.currencyCode);
       } else {
         setPrice(searchResponse[0].price);
         setPackageProductName(searchResponse[0].name);
+        setCurrencyCode(searchResponse[0].currencyCode);
       }
     } else {
       setSearchResults([]);
@@ -267,6 +249,28 @@ const Product: React.FC<ProductProps> = ({ productCode, productName, duration, r
     }
   }, [searchResponse]);
 
+  useEffect(() => {
+    if (detailResponse && !detailResponse.errorCode && detailResponse.payload) {
+      const selectedOption = detailResponse.payload.options.find((x: any) => x.isSelected);
+
+      if (selectedOption) {
+        const hasFlight = selectedOption.includedServiceTypes.some((x: any) => x === 7);
+        const hasTranfer = selectedOption.includedServiceTypes.some((x: any) => x === 13);
+
+        setPrice(selectedOption.price);
+        setHasFlight(hasFlight);
+        setHasTransfer(hasTranfer);
+        setCurrencyCode(detailResponse.payload.currencyCode);
+        setPackageProductName(selectedOption.name);
+      }
+    } else if (detailResponse !== undefined) {
+      setPrice(undefined);
+      setHasFlight(false);
+      setHasTransfer(false);
+      setCurrencyCode('');
+    }
+  }, [detailResponse]);
+
   useEffect(() => {
     if (searchType === 1 && skipNextFetchRef.current) {
       skipNextFetchRef.current = false;