swoop-common 2.2.210 → 2.2.211

package/dist/rendering/components/ComponentListItem.d.ts

@@ -2,6 +2,12 @@ import React from "react";
 import { DTOComponentRead, DTORegionRead, DTOTemplateRead } from "../../api/generated/core/exports";
 import { PartnerSwoop } from "../../api/generated/swoop/exports";
 import { ComponentSystem } from "../consts/system";
+export type ComponentLookupMap = Record<string, DTOComponentRead>;
+interface InlineContentDefinition {
+    getRequiredComponentIds?: (component: DTOComponentRead, lookups: ComponentLookupMap) => string[];
+    render: (component: DTOComponentRead, lookups: ComponentLookupMap, isTemplateEditor: boolean) => React.ReactNode | null;
+}
+export declare const getInlineContentDefinition: (templateId: string | undefined) => InlineContentDefinition | undefined;
 export interface ComponentListItemProps {
     component: DTOComponentRead;
     isSelected: boolean;
@@ -13,6 +19,7 @@ export interface ComponentListItemProps {
     onSelect: (component: DTOComponentRead) => void;
     showDivider: boolean;
     system?: ComponentSystem;
+    lookups?: ComponentLookupMap;
 }
 declare const ComponentListItem: React.FC<ComponentListItemProps>;
 export default ComponentListItem;

package/dist/rendering/components/ComponentListItem.js

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Box, Button, Chip, Divider, ListItem, ListItemButton, ListItemText, Typography, } from "@mui/material";
-import { getComponentDataByTemplateName, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
-import { getComponentsByIds } from "../util/api";
+import { getComponentDataByTemplateName, packagesTemplateStructure, templateStructure, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
 import { COMPONENT_SYSTEMS } from "../consts/system";
 import { getTemplateChipStyle } from "../consts/templateChipStyles";
+import { convertToTitleCase } from "../util/text";
 /*
     Content per item type from ticket:
     Package: Trip ID (hide on IB), Start city, Private, Guided
@@ -24,51 +24,135 @@ import { getTemplateChipStyle } from "../consts/templateChipStyles";
 
     When Private or Guided is false or unpopulated, the field is omitted entirely
 */
-const INLINE_CONTENT_BY_TEMPLATE = {
-    [TEMPLATE_NAMES.SHIP_ACCOMMODATION]: {
+// Shared by every child of Package (Cruise, Excursions, Guided Multiday Activity, All Inclusive
+// Hotel, Private Tour, Group Tour - see packagesTemplateStructure) - they all surface the same
+// Trip ID / Start City / Private / Guided fields, sourced from the Package componentFields entry
+// that's present on all of them.
+const PACKAGE_CHILD_INLINE_CONTENT = {
+    getRequiredComponentIds: (component) => {
+        var _a;
+        const startCityId = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.PACKAGE, component.componentFields)) === null || _a === void 0 ? void 0 : _a.startCity;
+        return startCityId ? [startCityId] : [];
+    },
+    render: (component, lookups, isTemplateEditor) => {
+        var _a;
+        const packageData = getComponentDataByTemplateName(TEMPLATE_NAMES.PACKAGE, component.componentFields);
+        const tripId = isTemplateEditor ? component === null || component === void 0 ? void 0 : component.tripId : undefined;
+        const isPrivate = packageData === null || packageData === void 0 ? void 0 : packageData.private;
+        const guided = packageData === null || packageData === void 0 ? void 0 : packageData.guided;
+        const startCity = (packageData === null || packageData === void 0 ? void 0 : packageData.startCity) ? (_a = lookups[packageData.startCity]) === null || _a === void 0 ? void 0 : _a.name : undefined;
+        const parts = [
+            tripId && `Trip ID: ${tripId}`,
+            isPrivate && "Private ✓",
+            guided && "Guided ✓",
+            startCity && `Start City: ${startCity}`,
+        ].filter(Boolean);
+        if (!parts.length)
+            return null;
+        return (React.createElement(Typography, { variant: "body2", color: "text.secondary" }, parts.join(" | ")));
+    },
+};
+// Keyed by templateId, not template name/label. Names come back from the API in inconsistent
+// casing (and some, like GuidedMultidayActivity, have no whitespace at all so title-casing can't
+// reliably normalize them) - templateId is the one thing guaranteed to match exactly.
+const INLINE_CONTENT_BY_TEMPLATE = Object.assign(Object.assign({ [templateStructure[TEMPLATE_NAMES.SHIP_ACCOMMODATION]]: {
         render: (component, _lookups, isTemplateEditor) => {
             var _a;
             if (!isTemplateEditor)
                 return null;
-            const vesselId = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.SHIP_ACCOMMODATION, component.componentFields)) === null || _a === void 0 ? void 0 : _a.vesselID;
+            const vesselId = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.SHIP_ACCOMMODATION, component.componentFields)) === null || _a === void 0 ? void 0 : _a.vesselId;
             if (!vesselId)
                 return null;
             return (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
                 "Vessel ID: ",
                 vesselId));
         },
-    },
-    // plus the rest in from there...
-};
-const getInlineContentDefinition = (templateName) => templateName ? INLINE_CONTENT_BY_TEMPLATE[templateName] : undefined;
-const ComponentListItem = ({ component, isSelected, details, onSelect, showDivider, system, }) => {
-    var _a, _b, _c, _d, _e;
+    } }, Object.fromEntries(Object.values(packagesTemplateStructure).map((templateId) => [templateId, PACKAGE_CHILD_INLINE_CONTENT]))), { [templateStructure[TEMPLATE_NAMES.TRANSFER]]: {
+        getRequiredComponentIds: (component, lookups) => {
+            var _a;
+            const journeyId = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.TRANSFER, component.componentFields)) === null || _a === void 0 ? void 0 : _a.journey;
+            if (!journeyId)
+                return [];
+            const ids = [journeyId];
+            // Journey hasn't resolved yet - come back for start/end Location once it has.
+            const journeyComponent = lookups[journeyId];
+            if (!journeyComponent)
+                return ids;
+            const journeyData = getComponentDataByTemplateName(TEMPLATE_NAMES.JOURNEYS, journeyComponent.componentFields);
+            if (journeyData === null || journeyData === void 0 ? void 0 : journeyData.startLocation)
+                ids.push(journeyData.startLocation);
+            if (journeyData === null || journeyData === void 0 ? void 0 : journeyData.endLocation)
+                ids.push(journeyData.endLocation);
+            return ids;
+        },
+        render: (component, lookups) => {
+            var _a, _b;
+            const transferData = getComponentDataByTemplateName(TEMPLATE_NAMES.TRANSFER, component.componentFields);
+            const driver = transferData === null || transferData === void 0 ? void 0 : transferData.driver;
+            const guided = transferData === null || transferData === void 0 ? void 0 : transferData.guided;
+            const type = Array.isArray(transferData === null || transferData === void 0 ? void 0 : transferData.type) ? transferData.type : [];
+            const journeyId = transferData === null || transferData === void 0 ? void 0 : transferData.journey;
+            const journeyComponent = journeyId ? lookups[journeyId] : undefined;
+            const journeyData = journeyComponent
+                ? getComponentDataByTemplateName(TEMPLATE_NAMES.JOURNEYS, journeyComponent.componentFields)
+                : undefined;
+            const startLocation = (journeyData === null || journeyData === void 0 ? void 0 : journeyData.startLocation) ? (_a = lookups[journeyData.startLocation]) === null || _a === void 0 ? void 0 : _a.name : undefined;
+            const endLocation = (journeyData === null || journeyData === void 0 ? void 0 : journeyData.endLocation) ? (_b = lookups[journeyData.endLocation]) === null || _b === void 0 ? void 0 : _b.name : undefined;
+            const parts = [
+                driver && `Driver ✓`,
+                guided && "Guided ✓",
+                type.length > 0 && `Type: ${type.join(", ")}`,
+                startLocation && `Start: ${startLocation}`,
+                endLocation && `End: ${endLocation}`,
+            ].filter(Boolean);
+            if (!parts.length)
+                return null;
+            return (React.createElement(Typography, { variant: "body2", color: "text.secondary" }, parts.join(" | ")));
+        },
+    }, [templateStructure[TEMPLATE_NAMES.ACTIVITY]]: {
+        getRequiredComponentIds: (component) => {
+            const activityData = getComponentDataByTemplateName(TEMPLATE_NAMES.ACTIVITY, component.componentFields);
+            return [activityData === null || activityData === void 0 ? void 0 : activityData.startLocation, activityData === null || activityData === void 0 ? void 0 : activityData.endLocation].filter((id) => Boolean(id));
+        },
+        render: (component, lookups) => {
+            var _a, _b;
+            const activityData = getComponentDataByTemplateName(TEMPLATE_NAMES.ACTIVITY, component.componentFields);
+            const startLocation = (activityData === null || activityData === void 0 ? void 0 : activityData.startLocation) ? (_a = lookups[activityData.startLocation]) === null || _a === void 0 ? void 0 : _a.name : undefined;
+            const endLocation = (activityData === null || activityData === void 0 ? void 0 : activityData.endLocation) ? (_b = lookups[activityData.endLocation]) === null || _b === void 0 ? void 0 : _b.name : undefined;
+            const type = activityData === null || activityData === void 0 ? void 0 : activityData.type;
+            const guided = activityData === null || activityData === void 0 ? void 0 : activityData.guided;
+            const parts = [
+                startLocation && `Start: ${startLocation}`,
+                endLocation && `End: ${endLocation}`,
+                type && `Type: ${type}`,
+                guided && "Guided ✓",
+            ].filter(Boolean);
+            if (!parts.length)
+                return null;
+            return (React.createElement(Typography, { variant: "body2", color: "text.secondary" }, parts.join(" | ")));
+        },
+    }, [templateStructure[TEMPLATE_NAMES.CRUISE_ACTIVITY]]: {
+        render: (component) => {
+            var _a;
+            const type = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.CRUISE_ACTIVITY, component.componentFields)) === null || _a === void 0 ? void 0 : _a.type;
+            if (!type)
+                return null;
+            return (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                "Type: ",
+                type));
+        },
+    } });
+export const getInlineContentDefinition = (templateId) => templateId ? INLINE_CONTENT_BY_TEMPLATE[templateId] : undefined;
+const ComponentListItem = ({ component, isSelected, details, onSelect, showDivider, system, lookups, }) => {
+    var _a, _b, _c;
     const activityData = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.CRUISE_ACTIVITY, component.componentFields)) !== null && _a !== void 0 ? _a : getComponentDataByTemplateName(TEMPLATE_NAMES.ACTIVITY, component.componentFields);
     const displayName = (activityData === null || activityData === void 0 ? void 0 : activityData.type)
         ? `${activityData.type} - ${component.name}`
         : component.name;
-    const convertToTitleCase = (str) => {
-        return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
-    };
-    const inlineContentDefinition = getInlineContentDefinition((_b = details.template) === null || _b === void 0 ? void 0 : _b.name);
-    const requiredComponentIds = (_d = (_c = inlineContentDefinition === null || inlineContentDefinition === void 0 ? void 0 : inlineContentDefinition.getRequiredComponentIds) === null || _c === void 0 ? void 0 : _c.call(inlineContentDefinition, component)) !== null && _d !== void 0 ? _d : [];
-    const requiredComponentIdsKey = requiredComponentIds.join(",");
-    const [lookups, setLookups] = useState({});
+    const templateName = ((_b = details.template) === null || _b === void 0 ? void 0 : _b.name) ? convertToTitleCase(details.template.name) : undefined;
+    const inlineContentDefinition = getInlineContentDefinition(component.templateId);
     const isTemplateEditor = system === COMPONENT_SYSTEMS.TEMPLATE_EDITOR;
-    useEffect(() => {
-        const missingIds = requiredComponentIds.filter((id) => !lookups[id]);
-        if (!missingIds.length)
-            return;
-        let cancelled = false;
-        getComponentsByIds(missingIds).then((fetched) => {
-            if (cancelled)
-                return;
-            setLookups((prev) => (Object.assign(Object.assign({}, prev), Object.fromEntries(fetched.map((c) => [c.id, c])))));
-        });
-        return () => { cancelled = true; };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [requiredComponentIdsKey]);
-    const inlineContent = (_e = inlineContentDefinition === null || inlineContentDefinition === void 0 ? void 0 : inlineContentDefinition.render(component, lookups, isTemplateEditor)) !== null && _e !== void 0 ? _e : null;
+    const inlineContent = (_c = inlineContentDefinition === null || inlineContentDefinition === void 0 ? void 0 : inlineContentDefinition.render(component, lookups !== null && lookups !== void 0 ? lookups : {}, isTemplateEditor)) !== null && _c !== void 0 ? _c : null;
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItem, { disablePadding: true },
             React.createElement(ListItemButton, { onClick: () => onSelect(component), selected: isSelected, sx: {
@@ -84,7 +168,7 @@ const ComponentListItem = ({ component, isSelected, details, onSelect, showDivid
                 React.createElement(Box, { width: "100%", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2 },
                     React.createElement(ListItemText, { primary: React.createElement(Box, { display: "flex", flexDirection: "column", gap: 0.5 },
                             details.template && (React.createElement(Box, null,
-                                React.createElement(Chip, { label: convertToTitleCase(details.template.name), size: "small", sx: Object.assign(Object.assign({}, getTemplateChipStyle(details.template.name)), { fontWeight: 500 }) }))),
+                                React.createElement(Chip, { label: templateName, size: "small", style: getTemplateChipStyle(templateName || ""), sx: { fontWeight: 500 } }))),
                             React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, displayName)), secondary: React.createElement(Box, { display: "flex", flexDirection: "column", gap: 0.5, mt: 1 },
                             React.createElement(Box, { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" },
                                 details.partners.length > 0 && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },

package/dist/rendering/components/ComponentPicker.js

@@ -11,9 +11,9 @@ import React, { useState, useEffect, useMemo } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Box, List, Typography, InputAdornment, IconButton, CircularProgress, Pagination, Autocomplete, Checkbox, FormControlLabel, } from "@mui/material";
 import { Search as SearchIcon, Clear as ClearIcon, FilterList as FilterIcon, } from "@mui/icons-material";
 import { PARTNER_REGION_READABLE } from "../consts/region";
-import { fetchComponents, getAllPartners } from "../util/api";
+import { fetchComponents, getAllPartners, getComponentsByIds } from "../util/api";
 import { InternalServices } from "../../api/init";
-import ComponentListItem from "./ComponentListItem";
+import ComponentListItem, { getInlineContentDefinition } from "./ComponentListItem";
 import { TEMPLATE_NAMES, templateStructure, } from "../../lib/config/templateStructure";
 export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter, system, }) {
     const [searchTerm, setSearchTerm] = useState("");
@@ -24,6 +24,7 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
     const [templates, setTemplates] = useState([]);
     const [partners, setPartners] = useState([]);
     const [regions, setRegions] = useState([]);
+    const [lookups, setLookups] = useState({});
     const [loading, setLoading] = useState(false);
     const [initialLoading, setInitialLoading] = useState(false);
     const [page, setPage] = useState(1);
@@ -74,6 +75,27 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
         citiesOnly,
         page,
     ]);
+    useEffect(() => {
+        // Depends on `lookups` so multi-hop chains (Transfer -> Journey -> start/end Location)
+        // converge: each round's fetch feeds getRequiredComponentIds the next hop's ids, until a
+        // round finds nothing missing and this becomes a no-op.
+        const idsNeeded = new Set();
+        components.forEach((component) => {
+            var _a, _b, _c;
+            const requiredIds = (_c = (_b = (_a = getInlineContentDefinition(component.templateId)) === null || _a === void 0 ? void 0 : _a.getRequiredComponentIds) === null || _b === void 0 ? void 0 : _b.call(_a, component, lookups)) !== null && _c !== void 0 ? _c : [];
+            requiredIds.forEach((id) => idsNeeded.add(id));
+        });
+        const missingIds = Array.from(idsNeeded).filter((id) => !lookups[id]);
+        if (!missingIds.length)
+            return;
+        let cancelled = false;
+        getComponentsByIds(missingIds).then((fetched) => {
+            if (cancelled)
+                return;
+            setLookups((prev) => (Object.assign(Object.assign({}, prev), Object.fromEntries(fetched.map((c) => [c.id, c])))));
+        });
+        return () => { cancelled = true; };
+    }, [components, lookups]);
     useEffect(() => {
         if (open) {
             setPage(1);
@@ -240,7 +262,7 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
                 React.createElement(Typography, { variant: "body1", color: "text.secondary" }, "Loading components..."))) : components.length === 0 ? (React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", py: 4 },
                 React.createElement(FilterIcon, { sx: { fontSize: 48, color: "text.secondary", mb: 2 } }),
                 React.createElement(Typography, { variant: "body1", color: "text.secondary" }, "No components match your search criteria"),
-                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Try adjusting your filters or search term"))) : (components.map((component, index) => (React.createElement(ComponentListItem, { key: component.id, component: component, isSelected: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === component.id, details: getComponentDetails(component), onSelect: handleSelect, showDivider: index < components.length - 1, system: system }))))),
+                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Try adjusting your filters or search term"))) : (components.map((component, index) => (React.createElement(ComponentListItem, { key: component.id, component: component, isSelected: (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === component.id, details: getComponentDetails(component), onSelect: handleSelect, showDivider: index < components.length - 1, system: system, lookups: lookups }))))),
             components.length > 0 && (React.createElement(Box, { display: "flex", justifyContent: "center", mt: 2 },
                 React.createElement(Pagination, { count: Math.ceil(totalCount / pageSize), page: page, onChange: (_, newPage) => setPage(newPage), color: "primary" })))),
         React.createElement(DialogActions, null,

package/dist/rendering/consts/templateChipStyles.js

@@ -21,4 +21,4 @@ export const TEMPLATE_CHIP_STYLES = {
     [TEMPLATE_NAMES.ROOM]: { backgroundColor: "#FCE9DA", color: "#B5651D" }, // peach
     [TEMPLATE_NAMES.GROUP_TOUR]: { backgroundColor: "#F0E6FB", color: "#7A3FA0" }, // violet
 };
-export const getTemplateChipStyle = (templateName) => { var _a; return (_a = TEMPLATE_CHIP_STYLES[templateName]) !== null && _a !== void 0 ? _a : { backgroundColor: "grey.200", color: "text.secondary" }; };
+export const getTemplateChipStyle = (templateName) => { var _a; return (_a = TEMPLATE_CHIP_STYLES[templateName]) !== null && _a !== void 0 ? _a : { backgroundColor: "#EEEEEE", color: "#616161" }; };

package/dist/rendering/util/text.d.ts

@@ -0,0 +1 @@
+export declare const convertToTitleCase: (str: string) => string;

package/dist/rendering/util/text.js

@@ -0,0 +1 @@
+export const convertToTitleCase = (str) => str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "2.2.210",
+    "version": "2.2.211",
     "main": "dist/api/index.js",
     "types": "dist/api/index.d.ts",
     "exports": {