@qite/tide-components 1.0.14-preview.1 → 1.0.14-preview.2

package/build/build-cjs/index.js

@@ -29746,7 +29746,9 @@ const TrajectItinerary = ({ trajectEntry, packagingEntry, translations }) => {
             .map((node) => {
             const guids = node.lineGuids?.length ? node.lineGuids : [node.lineGuid];
             const lines = guids.map((guid) => linesByGuid.get(guid)).filter((x) => !!x);
-            return { node, lines };
+            const groupKey = lines.length ? getLineGroupKey(lines[0]) : '';
+            const active = groupKey ? getGroupLines(packagingEntry.lines ?? [], groupKey)[0] : undefined;
+            return { node, lines: active ?? lines };
         });
         const claimed = new Set(nodes.flatMap((item) => item.lines.map((line) => line.guid)));
         const extras = (packagingEntry.lines ?? []).filter((line) => !claimed.has(line.guid)).filter(isMeaningfulItineraryLine);
@@ -35696,6 +35698,25 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
             React__default["default"].createElement(WLSidebar, { activeSearchSeed: activeSearchSeed, packagingAccoResult: selectedPackagingAccoResult }))));
 };
 
+// A horizontally scrolling row of cards whose selected cards sit first. Choosing a card moves it to the front of the row
+const TrajectCardRow = ({ selectionKey, children }) => {
+    const ref = React.useRef(null);
+    const previousKey = React.useRef(selectionKey);
+    React.useEffect(() => {
+        if (previousKey.current === selectionKey)
+            return;
+        previousKey.current = selectionKey;
+        const row = ref.current;
+        if (!row || row.scrollLeft === 0)
+            return;
+        if (typeof row.scrollTo === 'function')
+            row.scrollTo({ left: 0, behavior: 'smooth' });
+        else
+            row.scrollLeft = 0;
+    }, [selectionKey]);
+    return (React__default["default"].createElement("div", { ref: ref, className: "search__results__cards search__results__cards--scroll" }, children));
+};
+
 const useTrajectDayActivities = () => {
     const context = React.useContext(SearchResultsConfigurationContext);
     const dispatch = reactRedux.useDispatch();
@@ -35897,7 +35918,7 @@ const TrajectResults = ({ isLoading }) => {
                         node.preferredAccommodationName,
                         " \u2014 ",
                         translations.SRP.NO_RESULTS))),
-                React__default["default"].createElement("div", { className: "search__results__cards search__results__cards--scroll" }, [selected, ...configured, ...fill].map((result) => (React__default["default"].createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE, selectedLabel: bookedMode && matchesCode(result, node.code ?? '') ? translations.SHARED.BOOKED : undefined })))),
+                React__default["default"].createElement(TrajectCardRow, { selectionKey: selected.code }, [selected, ...configured, ...fill].map((result) => (React__default["default"].createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE })))),
                 remaining > 0 && !hideShowMoreResults && (React__default["default"].createElement("div", { className: "search__results__cards__actions" },
                     React__default["default"].createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleShowMore(item) },
                         translations.SRP.SHOW_MORE,
@@ -35944,6 +35965,7 @@ const TrajectResults = ({ isLoading }) => {
     };
     /** The lines a suggested activity put on the entry, which is also how we know it was added. */
     const getAddedExcursionLines = (result) => (editablePackagingEntry?.lines ?? []).filter((line) => line.serviceType === EXCURSION_SERVICE_TYPE && line.productCode === result.code && dateFns.isSameDay(new Date(line.from), new Date(result.fromDate)));
+    const isActivitySelected = ({ result, item }) => item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedExcursionLines(result).length > 0;
     const handleToggleActivity = (result) => {
         const added = getAddedExcursionLines(result);
         if (added.length) {
@@ -35982,7 +36004,9 @@ const TrajectResults = ({ isLoading }) => {
     const renderDayActivities = (day) => {
         const items = getDayExcursionItems(day.order);
         const suggestions = trajectDaySuggestions[day.order];
-        const cards = buildDayActivityCards(items, trajectNodeAvailability, suggestions?.results ?? []);
+        const allCards = buildDayActivityCards(items, trajectNodeAvailability, suggestions?.results ?? []);
+        const selectedCards = allCards.filter(isActivitySelected);
+        const cards = [...selectedCards, ...allCards.filter((card) => !isActivitySelected(card))];
         const nodesResolving = items.some((item) => (trajectNodeAvailability[item.line.guid]?.status ?? 'loading') === 'loading');
         const isSearching = suggestions?.status === 'loading';
         // A day is worth filling only if the party is staying somewhere that night. The day they fly
@@ -36001,7 +36025,7 @@ const TrajectResults = ({ isLoading }) => {
                     React__default["default"].createElement("h3", null,
                         React__default["default"].createElement("strong", null, translations.SRP.ACTIVITIES)))),
             (nodesResolving || isSearching) && !cards.length && React__default["default"].createElement(Spinner, { label: translations.SRP.LOADING_ACTIVITIES }),
-            !!cards.length && React__default["default"].createElement("div", { className: "search__results__cards search__results__cards--scroll" }, visible.map(renderActivityCard)),
+            !!cards.length && (React__default["default"].createElement(TrajectCardRow, { selectionKey: selectedCards.map((card) => card.result.code).join('|') }, visible.map(renderActivityCard))),
             !nodesResolving && !isSearching && !cards.length && (!!items.length || !!suggestions) && (React__default["default"].createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS)),
             React__default["default"].createElement("div", { className: "search__results__cards__actions" },
                 awaitsRequest && (React__default["default"].createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => loadDay(day) }, translations.SRP.SHOW_ACTIVITIES)),
@@ -36016,7 +36040,7 @@ const TrajectResults = ({ isLoading }) => {
      * found for themselves is added to the trip or taken back off it.
      */
     const renderActivityCard = ({ result, item }) => {
-        const isSelected = item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedExcursionLines(result).length > 0;
+        const isSelected = isActivitySelected({ result, item });
         const isBookedCard = !!item && bookedMode && matchesCode(result, item.node.code ?? '');
         return (React__default["default"].createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(item, result.code) : handleToggleActivity(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? (isBookedCard ? translations.SHARED.BOOKED : undefined) : translations.SRP.REMOVE }));
     };

package/build/build-cjs/src/search-results/components/traject/traject-card-row.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TrajectCardRowProps {
+    selectionKey: string;
+    children: React.ReactNode;
+}
+declare const TrajectCardRow: React.FC<TrajectCardRowProps>;
+export default TrajectCardRow;

package/build/build-esm/index.js

@@ -29717,7 +29717,9 @@ const TrajectItinerary = ({ trajectEntry, packagingEntry, translations }) => {
             .map((node) => {
             const guids = node.lineGuids?.length ? node.lineGuids : [node.lineGuid];
             const lines = guids.map((guid) => linesByGuid.get(guid)).filter((x) => !!x);
-            return { node, lines };
+            const groupKey = lines.length ? getLineGroupKey(lines[0]) : '';
+            const active = groupKey ? getGroupLines(packagingEntry.lines ?? [], groupKey)[0] : undefined;
+            return { node, lines: active ?? lines };
         });
         const claimed = new Set(nodes.flatMap((item) => item.lines.map((line) => line.guid)));
         const extras = (packagingEntry.lines ?? []).filter((line) => !claimed.has(line.guid)).filter(isMeaningfulItineraryLine);
@@ -35667,6 +35669,25 @@ const BookPackagingEntry = ({ activeSearchSeed, isLoading, isConfirmationPage })
             React__default.createElement(WLSidebar, { activeSearchSeed: activeSearchSeed, packagingAccoResult: selectedPackagingAccoResult }))));
 };
 
+// A horizontally scrolling row of cards whose selected cards sit first. Choosing a card moves it to the front of the row
+const TrajectCardRow = ({ selectionKey, children }) => {
+    const ref = useRef(null);
+    const previousKey = useRef(selectionKey);
+    useEffect(() => {
+        if (previousKey.current === selectionKey)
+            return;
+        previousKey.current = selectionKey;
+        const row = ref.current;
+        if (!row || row.scrollLeft === 0)
+            return;
+        if (typeof row.scrollTo === 'function')
+            row.scrollTo({ left: 0, behavior: 'smooth' });
+        else
+            row.scrollLeft = 0;
+    }, [selectionKey]);
+    return (React__default.createElement("div", { ref: ref, className: "search__results__cards search__results__cards--scroll" }, children));
+};
+
 const useTrajectDayActivities = () => {
     const context = useContext(SearchResultsConfigurationContext);
     const dispatch = useDispatch();
@@ -35868,7 +35889,7 @@ const TrajectResults = ({ isLoading }) => {
                         node.preferredAccommodationName,
                         " \u2014 ",
                         translations.SRP.NO_RESULTS))),
-                React__default.createElement("div", { className: "search__results__cards search__results__cards--scroll" }, [selected, ...configured, ...fill].map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE, selectedLabel: bookedMode && matchesCode(result, node.code ?? '') ? translations.SHARED.BOOKED : undefined })))),
+                React__default.createElement(TrajectCardRow, { selectionKey: selected.code }, [selected, ...configured, ...fill].map((result) => (React__default.createElement(TrajectNodeCard, { key: result.code, node: node, result: result, isSelected: result.code === selected.code, languageCode: context.languageCode, translations: translations, onSelect: () => handleSelect(item, result.code), onEditOptions: node.serviceType === ACCOMMODATION_SERVICE_TYPE ? () => handleEditOptions(item) : undefined, showNights: node.serviceType === ACCOMMODATION_SERVICE_TYPE })))),
                 remaining > 0 && !hideShowMoreResults && (React__default.createElement("div", { className: "search__results__cards__actions" },
                     React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => handleShowMore(item) },
                         translations.SRP.SHOW_MORE,
@@ -35915,6 +35936,7 @@ const TrajectResults = ({ isLoading }) => {
     };
     /** The lines a suggested activity put on the entry, which is also how we know it was added. */
     const getAddedExcursionLines = (result) => (editablePackagingEntry?.lines ?? []).filter((line) => line.serviceType === EXCURSION_SERVICE_TYPE && line.productCode === result.code && isSameDay(new Date(line.from), new Date(result.fromDate)));
+    const isActivitySelected = ({ result, item }) => item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedExcursionLines(result).length > 0;
     const handleToggleActivity = (result) => {
         const added = getAddedExcursionLines(result);
         if (added.length) {
@@ -35953,7 +35975,9 @@ const TrajectResults = ({ isLoading }) => {
     const renderDayActivities = (day) => {
         const items = getDayExcursionItems(day.order);
         const suggestions = trajectDaySuggestions[day.order];
-        const cards = buildDayActivityCards(items, trajectNodeAvailability, suggestions?.results ?? []);
+        const allCards = buildDayActivityCards(items, trajectNodeAvailability, suggestions?.results ?? []);
+        const selectedCards = allCards.filter(isActivitySelected);
+        const cards = [...selectedCards, ...allCards.filter((card) => !isActivitySelected(card))];
         const nodesResolving = items.some((item) => (trajectNodeAvailability[item.line.guid]?.status ?? 'loading') === 'loading');
         const isSearching = suggestions?.status === 'loading';
         // A day is worth filling only if the party is staying somewhere that night. The day they fly
@@ -35972,7 +35996,7 @@ const TrajectResults = ({ isLoading }) => {
                     React__default.createElement("h3", null,
                         React__default.createElement("strong", null, translations.SRP.ACTIVITIES)))),
             (nodesResolving || isSearching) && !cards.length && React__default.createElement(Spinner, { label: translations.SRP.LOADING_ACTIVITIES }),
-            !!cards.length && React__default.createElement("div", { className: "search__results__cards search__results__cards--scroll" }, visible.map(renderActivityCard)),
+            !!cards.length && (React__default.createElement(TrajectCardRow, { selectionKey: selectedCards.map((card) => card.result.code).join('|') }, visible.map(renderActivityCard))),
             !nodesResolving && !isSearching && !cards.length && (!!items.length || !!suggestions) && (React__default.createElement("div", { className: "no-results" }, translations.SRP.NO_RESULTS)),
             React__default.createElement("div", { className: "search__results__cards__actions" },
                 awaitsRequest && (React__default.createElement("button", { type: "button", className: "cta cta--secondary", onClick: () => loadDay(day) }, translations.SRP.SHOW_ACTIVITIES)),
@@ -35987,7 +36011,7 @@ const TrajectResults = ({ isLoading }) => {
      * found for themselves is added to the trip or taken back off it.
      */
     const renderActivityCard = ({ result, item }) => {
-        const isSelected = item ? trajectNodeAvailability[item.line.guid]?.selectedCode === result.code : getAddedExcursionLines(result).length > 0;
+        const isSelected = isActivitySelected({ result, item });
         const isBookedCard = !!item && bookedMode && matchesCode(result, item.node.code ?? '');
         return (React__default.createElement(TrajectNodeCard, { key: `activity-${result.code}`, node: item?.node, result: result, isSelected: isSelected, languageCode: context.languageCode, translations: translations, onSelect: () => (item ? handleSelect(item, result.code) : handleToggleActivity(result)), selectLabel: item ? undefined : translations.SRP.ADD, selectedLabel: item ? (isBookedCard ? translations.SHARED.BOOKED : undefined) : translations.SRP.REMOVE }));
     };

package/build/build-esm/src/search-results/components/traject/traject-card-row.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TrajectCardRowProps {
+    selectionKey: string;
+    children: React.ReactNode;
+}
+declare const TrajectCardRow: React.FC<TrajectCardRowProps>;
+export default TrajectCardRow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-components",
-  "version": "1.0.14-preview.1",
+  "version": "1.0.14-preview.2",
   "description": "React components for Tide (booking, product availability, form, ...)",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",