swoop-common 2.2.153 → 2.2.155

package/dist/api/generated/core/services/ComponentService.d.ts

@@ -49,6 +49,14 @@ export declare class ComponentService {
      * @throws ApiError
      */
     static componentBatchGet(requestBody: ComponentBatchRequest): CancelablePromise<ComponentBatchResponse>;
+    /**
+     * List Component Types
+     * Returns a deduplicated list of type strings from componentFields for all components matching the given templateId.
+     * @param templateId The template ID to filter components and componentFields by.
+     * @returns string A deduplicated list of type strings
+     * @throws ApiError
+     */
+    static componentListTypes(templateId: string): CancelablePromise<Array<string>>;
     /**
      * Get Component
      * Get Component via ID

package/dist/api/generated/core/services/ComponentService.js

@@ -84,6 +84,27 @@ export class ComponentService {
             },
         });
     }
+    /**
+     * List Component Types
+     * Returns a deduplicated list of type strings from componentFields for all components matching the given templateId.
+     * @param templateId The template ID to filter components and componentFields by.
+     * @returns string A deduplicated list of type strings
+     * @throws ApiError
+     */
+    static componentListTypes(templateId) {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/component/types',
+            query: {
+                'templateId': templateId,
+            },
+            errors: {
+                400: `If the templateId parameter is missing or malformed`,
+                401: `When the client is not authorised`,
+                500: `When an unexpected error occurs`,
+            },
+        });
+    }
     /**
      * Get Component
      * Get Component via ID

package/dist/api/generated/core/services/CoreService.d.ts

@@ -287,6 +287,14 @@ export declare class CoreService {
      * @throws ApiError
      */
     componentBatchGet(requestBody: ComponentBatchRequest): CancelablePromise<ComponentBatchResponse>;
+    /**
+     * List Component Types
+     * Returns a deduplicated list of type strings from componentFields for all components matching the given templateId.
+     * @param templateId The template ID to filter components and componentFields by.
+     * @returns string A deduplicated list of type strings
+     * @throws ApiError
+     */
+    componentListTypes(templateId: string): CancelablePromise<Array<string>>;
     /**
      * Get Component
      * Get Component via ID

package/dist/api/generated/core/services/CoreService.js

@@ -628,6 +628,27 @@ export class CoreService {
             },
         });
     }
+    /**
+     * List Component Types
+     * Returns a deduplicated list of type strings from componentFields for all components matching the given templateId.
+     * @param templateId The template ID to filter components and componentFields by.
+     * @returns string A deduplicated list of type strings
+     * @throws ApiError
+     */
+    componentListTypes(templateId) {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/component/types',
+            query: {
+                'templateId': templateId,
+            },
+            errors: {
+                400: `If the templateId parameter is missing or malformed`,
+                401: `When the client is not authorised`,
+                500: `When an unexpected error occurs`,
+            },
+        });
+    }
     /**
      * Get Component
      * Get Component via ID

package/dist/lib/config/templateStructure.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Template names as const for type-safe usage
+ */
+export declare const TEMPLATE_NAMES: {
+    readonly FLIGHT: "Flight";
+    readonly JOURNEYS: "Journeys";
+    readonly CRUISE: "Cruise";
+    readonly CRUISE_ACTIVITY: "Cruise Activity";
+    readonly GROUND_ACCOMMODATION: "Ground Accommodation";
+    readonly TRANSFER: "Transfer";
+    readonly INDEPENDENT_ARRANGEMENTS: "Independent Arrangements";
+    readonly ACCOMMODATION: "Accommodation";
+    readonly EXCURSIONS: "Excursions";
+    readonly GUIDED_MULTIDAY_ACTIVITY: "GuidedMultidayActivity";
+    readonly SHIP_ACCOMMODATION: "Ship Accommodation";
+    readonly ALL_INCLUSIVE_HOTEL: "AllInclusiveHotel";
+    readonly PACKAGES: "Packages";
+    readonly LOCATION: "Location";
+    readonly PRIVATE_TOUR: "Private Tour";
+    readonly ACTIVITY: "Activity";
+    readonly FEE: "Fee";
+    readonly PACKAGE: "Package";
+    readonly ROOM: "Room";
+};
+/**
+ * Template Name to Template ID mapping
+ * This configuration maps template names to their IDs
+ */
+export declare const templateStructure: {
+    readonly Package: "template_c3307de1e53640c4b4d1bb8fa99c4c7a";
+    readonly Flight: "template_4aec70add8e74467814fe7337f4e41b3";
+    readonly Journeys: "template_14cc18c1408a4b73a16d4e1dad2efca9";
+    readonly Cruise: "template_63a57a90570c47b89f830d2c7618324f";
+    readonly "Ground Accommodation": "template_68c8d409a9f7462aa528a1216cadf2b5";
+    readonly Transfer: "template_901d40ac12214820995880915c5b62f5";
+    readonly "Independent Arrangements": "template_932b514e6d804e248bf04a9fa1f836de";
+    readonly Accommodation: "template_7546d5da287241629b5190f95346840e";
+    readonly Excursions: "template_a6a2dbfd478143de994dca40dc07e054";
+    readonly GuidedMultidayActivity: "template_a64e161de5824fcb9515274b0f67d698";
+    readonly "Ship Accommodation": "template_bb8caab1d3104257a75b7cb7dd958136";
+    readonly AllInclusiveHotel: "template_ba7999ff957c4ca3a5e61496df6178ac";
+    readonly Location: "template_0c105b25350647b096753b4f863ab06c";
+    readonly "Private Tour": "template_d9081bfcc3b7461987a3728e57ca7363";
+    readonly Activity: "template_e2f0e9e5343349358037a0564a3366a0";
+    readonly Fee: "template_d15cc4ab72034fb8a098d9a9ec791a7d";
+    readonly "Cruise Activity": "template_12345678123456781234567812345678";
+    readonly Room: "template_bb0b09c544d242c9a9ef38147966979f";
+};
+export declare const packagesTemplateStructure: {
+    readonly Cruise: "template_63a57a90570c47b89f830d2c7618324f";
+    readonly Excursions: "template_a6a2dbfd478143de994dca40dc07e054";
+    readonly GuidedMultidayActivity: "template_a64e161de5824fcb9515274b0f67d698";
+    readonly AllInclusiveHotel: "template_ba7999ff957c4ca3a5e61496df6178ac";
+    readonly "Private Tour": "template_d9081bfcc3b7461987a3728e57ca7363";
+};
+export declare const topLevelTemplates: {
+    readonly Activity: "template_e2f0e9e5343349358037a0564a3366a0";
+    readonly Flight: "template_4aec70add8e74467814fe7337f4e41b3";
+    readonly "Ground Accommodation": "template_68c8d409a9f7462aa528a1216cadf2b5";
+    readonly "Ship Accommodation": "template_bb8caab1d3104257a75b7cb7dd958136";
+    readonly Transfer: "template_901d40ac12214820995880915c5b62f5";
+    readonly "Independent Arrangements": "template_932b514e6d804e248bf04a9fa1f836de";
+    readonly Cruise: "template_63a57a90570c47b89f830d2c7618324f";
+    readonly Excursions: "template_a6a2dbfd478143de994dca40dc07e054";
+    readonly GuidedMultidayActivity: "template_a64e161de5824fcb9515274b0f67d698";
+    readonly AllInclusiveHotel: "template_ba7999ff957c4ca3a5e61496df6178ac";
+    readonly "Private Tour": "template_d9081bfcc3b7461987a3728e57ca7363";
+};
+export type TemplateName = keyof typeof templateStructure;
+export type TemplateId = typeof templateStructure[TemplateName];
+/**
+ * Get template ID by template name
+ */
+export declare function getTemplateId(templateName: string): string | undefined;
+/**
+ * Get template name by template ID
+ */
+export declare function getTemplateNameById(templateId: string): TemplateName | undefined;
+/**
+ * Check if a template name exists in the structure
+ */
+export declare function isValidTemplateName(templateName: string): templateName is TemplateName;
+/**
+ * Find and return the data object for a given template name within a componentInstanceFields array.
+ * Returns undefined if the template name is unknown or no matching entry exists.
+ */
+export declare function getComponentDataByTemplateName(templateName: string, componentInstanceFields: {
+    templateId: string;
+    data: Record<string, any>;
+}[]): Record<string, any> | undefined;

package/dist/lib/config/templateStructure.js

@@ -0,0 +1,87 @@
+/**
+ * Template names as const for type-safe usage
+ */
+export const TEMPLATE_NAMES = {
+    FLIGHT: "Flight",
+    JOURNEYS: "Journeys",
+    CRUISE: "Cruise",
+    CRUISE_ACTIVITY: "Cruise Activity",
+    GROUND_ACCOMMODATION: "Ground Accommodation",
+    TRANSFER: "Transfer",
+    INDEPENDENT_ARRANGEMENTS: "Independent Arrangements",
+    ACCOMMODATION: "Accommodation",
+    EXCURSIONS: "Excursions",
+    GUIDED_MULTIDAY_ACTIVITY: "GuidedMultidayActivity",
+    SHIP_ACCOMMODATION: "Ship Accommodation",
+    ALL_INCLUSIVE_HOTEL: "AllInclusiveHotel",
+    PACKAGES: "Packages",
+    LOCATION: "Location",
+    PRIVATE_TOUR: "Private Tour",
+    ACTIVITY: "Activity",
+    FEE: "Fee",
+    PACKAGE: "Package",
+    ROOM: "Room"
+};
+/**
+ * Template Name to Template ID mapping
+ * This configuration maps template names to their IDs
+ */
+export const templateStructure = {
+    [TEMPLATE_NAMES.PACKAGE]: "template_c3307de1e53640c4b4d1bb8fa99c4c7a",
+    [TEMPLATE_NAMES.FLIGHT]: "template_4aec70add8e74467814fe7337f4e41b3",
+    [TEMPLATE_NAMES.JOURNEYS]: "template_14cc18c1408a4b73a16d4e1dad2efca9",
+    [TEMPLATE_NAMES.CRUISE]: "template_63a57a90570c47b89f830d2c7618324f",
+    [TEMPLATE_NAMES.GROUND_ACCOMMODATION]: "template_68c8d409a9f7462aa528a1216cadf2b5",
+    [TEMPLATE_NAMES.TRANSFER]: "template_901d40ac12214820995880915c5b62f5",
+    [TEMPLATE_NAMES.INDEPENDENT_ARRANGEMENTS]: "template_932b514e6d804e248bf04a9fa1f836de",
+    [TEMPLATE_NAMES.ACCOMMODATION]: "template_7546d5da287241629b5190f95346840e",
+    [TEMPLATE_NAMES.EXCURSIONS]: "template_a6a2dbfd478143de994dca40dc07e054",
+    [TEMPLATE_NAMES.GUIDED_MULTIDAY_ACTIVITY]: "template_a64e161de5824fcb9515274b0f67d698",
+    [TEMPLATE_NAMES.SHIP_ACCOMMODATION]: "template_bb8caab1d3104257a75b7cb7dd958136",
+    [TEMPLATE_NAMES.ALL_INCLUSIVE_HOTEL]: "template_ba7999ff957c4ca3a5e61496df6178ac",
+    [TEMPLATE_NAMES.LOCATION]: "template_0c105b25350647b096753b4f863ab06c",
+    [TEMPLATE_NAMES.PRIVATE_TOUR]: "template_d9081bfcc3b7461987a3728e57ca7363",
+    [TEMPLATE_NAMES.ACTIVITY]: "template_e2f0e9e5343349358037a0564a3366a0",
+    [TEMPLATE_NAMES.FEE]: "template_d15cc4ab72034fb8a098d9a9ec791a7d",
+    [TEMPLATE_NAMES.CRUISE_ACTIVITY]: "template_12345678123456781234567812345678",
+    [TEMPLATE_NAMES.ROOM]: "template_bb0b09c544d242c9a9ef38147966979f"
+};
+export const packagesTemplateStructure = {
+    [TEMPLATE_NAMES.CRUISE]: templateStructure[TEMPLATE_NAMES.CRUISE],
+    [TEMPLATE_NAMES.EXCURSIONS]: templateStructure[TEMPLATE_NAMES.EXCURSIONS],
+    [TEMPLATE_NAMES.GUIDED_MULTIDAY_ACTIVITY]: templateStructure[TEMPLATE_NAMES.GUIDED_MULTIDAY_ACTIVITY],
+    [TEMPLATE_NAMES.ALL_INCLUSIVE_HOTEL]: templateStructure[TEMPLATE_NAMES.ALL_INCLUSIVE_HOTEL],
+    [TEMPLATE_NAMES.PRIVATE_TOUR]: templateStructure[TEMPLATE_NAMES.PRIVATE_TOUR],
+};
+export const topLevelTemplates = Object.assign(Object.assign({}, packagesTemplateStructure), { [TEMPLATE_NAMES.ACTIVITY]: templateStructure[TEMPLATE_NAMES.ACTIVITY], [TEMPLATE_NAMES.FLIGHT]: templateStructure[TEMPLATE_NAMES.FLIGHT], [TEMPLATE_NAMES.GROUND_ACCOMMODATION]: templateStructure[TEMPLATE_NAMES.GROUND_ACCOMMODATION], [TEMPLATE_NAMES.SHIP_ACCOMMODATION]: templateStructure[TEMPLATE_NAMES.SHIP_ACCOMMODATION], [TEMPLATE_NAMES.TRANSFER]: templateStructure[TEMPLATE_NAMES.TRANSFER], [TEMPLATE_NAMES.INDEPENDENT_ARRANGEMENTS]: templateStructure[TEMPLATE_NAMES.INDEPENDENT_ARRANGEMENTS] });
+/**
+ * Get template ID by template name
+ */
+export function getTemplateId(templateName) {
+    return templateStructure[templateName];
+}
+/**
+ * Get template name by template ID
+ */
+export function getTemplateNameById(templateId) {
+    var _a;
+    return (_a = Object.entries(templateStructure)
+        .find(([, id]) => id === templateId)) === null || _a === void 0 ? void 0 : _a[0];
+}
+/**
+ * Check if a template name exists in the structure
+ */
+export function isValidTemplateName(templateName) {
+    return templateName in templateStructure;
+}
+/**
+ * Find and return the data object for a given template name within a componentInstanceFields array.
+ * Returns undefined if the template name is unknown or no matching entry exists.
+ */
+export function getComponentDataByTemplateName(templateName, componentInstanceFields) {
+    var _a;
+    const templateId = getTemplateId(templateName);
+    if (!templateId)
+        return undefined;
+    return (_a = componentInstanceFields.find((f) => f.templateId === templateId)) === null || _a === void 0 ? void 0 : _a.data;
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { DTOComponentRead, DTORegionRead, DTOTemplateRead } from "../../api/generated/core/exports";
+import { PartnerSwoop } from "../../api/generated/swoop/exports";
+export interface ComponentListItemProps {
+    component: DTOComponentRead;
+    isSelected: boolean;
+    details: {
+        template: DTOTemplateRead | undefined;
+        partners: PartnerSwoop[];
+        regions: DTORegionRead[];
+    };
+    onSelect: (component: DTOComponentRead) => void;
+    showDivider: boolean;
+}
+declare const ComponentListItem: React.FC<ComponentListItemProps>;
+export default ComponentListItem;

package/dist/rendering/components/ComponentListItem.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Box, Chip, Divider, ListItem, ListItemButton, ListItemText, Typography, } from "@mui/material";
+import { PARTNER_REGION_READABLE } from "../consts/region";
+import { getComponentDataByTemplateName, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
+const ComponentListItem = ({ component, isSelected, details, onSelect, showDivider, }) => {
+    var _a;
+    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;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItem, { disablePadding: true },
+            React.createElement(ListItemButton, { onClick: () => onSelect(component), selected: isSelected, sx: {
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    py: 2,
+                    "&.Mui-selected": {
+                        backgroundColor: "primary.50",
+                        borderLeft: "4px solid",
+                        borderColor: "primary.main",
+                    },
+                } },
+                React.createElement(Box, { width: "100%" },
+                    React.createElement(ListItemText, { primary: React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, displayName), secondary: React.createElement(Box, { mt: 1 },
+                            details.template && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                "Type: ",
+                                details.template.name)),
+                            details.regions.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
+                                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Regions:"),
+                                details.regions.map((region) => (React.createElement(Chip, { key: region.id, label: region.name, size: "small", variant: "outlined" }))))),
+                            details.partners.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
+                                React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Partners:"),
+                                details.partners.slice(0, 3).map((partner) => (React.createElement(Chip, { key: partner.id, label: `${partner.name} - ${PARTNER_REGION_READABLE[partner.id || "".split("-")[0]]}`, size: "small", variant: "outlined", color: "secondary" }))),
+                                details.partners.length > 3 && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                    "+",
+                                    details.partners.length - 3,
+                                    " more"))))) })))),
+        showDivider && React.createElement(Divider, null)));
+};
+export default ComponentListItem;

package/dist/rendering/components/ComponentPicker.js

@@ -7,12 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useState, useEffect } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Box, List, ListItem, ListItemButton, ListItemText, Typography, Chip, InputAdornment, IconButton, Divider, CircularProgress, Pagination, Autocomplete, } from "@mui/material";
+import React, { useState, useEffect, useMemo } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, MenuItem, Box, List, Typography, InputAdornment, IconButton, CircularProgress, Pagination, Autocomplete, } 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 { InternalServices } from "../../api/init";
+import ComponentListItem from "./ComponentListItem";
+import { TEMPLATE_NAMES, templateStructure } from "../../lib/config/templateStructure";
 export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter, }) {
     const [searchTerm, setSearchTerm] = useState("");
     const [selectedRegion, setSelectedRegion] = useState("");
@@ -28,7 +29,14 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
     const [pageSize] = useState(10);
     const [totalCount, setTotalCount] = useState(0);
     const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-    //test
+    const [activityTypes, setActivityTypes] = useState([]);
+    const [selectedActivityType, setSelectedActivityType] = useState("");
+    const activityTemplateId = useMemo(() => {
+        var _a;
+        const cruiseActivityId = templateStructure[TEMPLATE_NAMES.CRUISE_ACTIVITY];
+        const activityId = templateStructure[TEMPLATE_NAMES.ACTIVITY];
+        return (_a = parentIdsFilter === null || parentIdsFilter === void 0 ? void 0 : parentIdsFilter.find((id) => id === cruiseActivityId || id === activityId)) !== null && _a !== void 0 ? _a : null;
+    }, [parentIdsFilter]);
     useEffect(() => {
         const timer = setTimeout(() => {
             setDebouncedSearchTerm(searchTerm);
@@ -40,6 +48,16 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
             loadInitialData();
         }
     }, [open]);
+    useEffect(() => {
+        if (open && activityTemplateId) {
+            InternalServices.CoreService.componentListTypes(activityTemplateId)
+                .then(setActivityTypes)
+                .catch(console.error);
+        }
+        else {
+            setActivityTypes([]);
+        }
+    }, [open, activityTemplateId]);
     useEffect(() => {
         if (open) {
             fetchFilteredComponents();
@@ -50,19 +68,21 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
         selectedRegion,
         selectedPartner,
         selectedTemplate,
+        selectedActivityType,
         page,
     ]);
     useEffect(() => {
         if (open) {
             setPage(1);
         }
-    }, [debouncedSearchTerm, selectedRegion, selectedPartner, selectedTemplate]);
+    }, [debouncedSearchTerm, selectedRegion, selectedPartner, selectedTemplate, selectedActivityType]);
     useEffect(() => {
         if (open) {
             setSearchTerm("");
             setSelectedRegion("");
             setSelectedPartner("");
             setSelectedTemplate("");
+            setSelectedActivityType("");
         }
     }, [open]);
     const loadInitialData = () => __awaiter(this, void 0, void 0, function* () {
@@ -101,6 +121,8 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
                 query.templateId = selectedTemplate;
             if (query.search)
                 query.on = "name";
+            if (selectedActivityType)
+                query["componentFields.data.type"] = selectedActivityType;
             // Parent ids overwrites templateid filter
             if (parentIdsFilter === null || parentIdsFilter === void 0 ? void 0 : parentIdsFilter.length)
                 query.templateId = parentIdsFilter.join(",");
@@ -124,6 +146,7 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
         setSelectedRegion("");
         setSelectedPartner("");
         setSelectedTemplate("");
+        setSelectedActivityType("");
     };
     const handleClearSearch = () => setSearchTerm("");
     const handleSelect = (component) => {
@@ -136,7 +159,7 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
         const componentRegions = regions.filter((r) => { var _a; return (_a = component.regions) === null || _a === void 0 ? void 0 : _a.includes(r.id); });
         return { template, partners: componentPartners, regions: componentRegions };
     };
-    const hasActiveFilters = selectedRegion || selectedPartner || selectedTemplate;
+    const hasActiveFilters = selectedRegion || selectedPartner || selectedTemplate || selectedActivityType;
     if (initialLoading) {
         return (React.createElement(Dialog, { open: open, onClose: onClose, maxWidth: "md", fullWidth: true, PaperProps: { sx: { height: "80vh", maxHeight: "800px" } } },
             React.createElement(DialogContent, null,
@@ -167,7 +190,10 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
                     usedTemplates.map((template) => (React.createElement(MenuItem, { key: template.id, value: template.id },
                         template.name,
                         " v",
-                        template.revision)))))),
+                        template.revision))))),
+                activityTypes.length > 0 && (React.createElement(TextField, { select: true, size: "small", label: "Activity Type", value: selectedActivityType, onChange: (e) => setSelectedActivityType(e.target.value), sx: { minWidth: 160 } },
+                    React.createElement(MenuItem, { value: "" }, "All Activity Types"),
+                    activityTypes.map((type) => (React.createElement(MenuItem, { key: type, value: type }, type)))))),
             React.createElement(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1 },
                 React.createElement(Typography, { variant: "body2", color: "text.secondary" },
                     totalCount,
@@ -185,40 +211,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) => {
-                const details = getComponentDetails(component);
-                const isSelected = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === component.id;
-                return (React.createElement(React.Fragment, { key: component.id },
-                    React.createElement(ListItem, { disablePadding: true },
-                        React.createElement(ListItemButton, { onClick: () => handleSelect(component), selected: isSelected, sx: {
-                                flexDirection: "column",
-                                alignItems: "flex-start",
-                                py: 2,
-                                "&.Mui-selected": {
-                                    backgroundColor: "primary.50",
-                                    borderLeft: "4px solid",
-                                    borderColor: "primary.main",
-                                },
-                            } },
-                            React.createElement(Box, { width: "100%" },
-                                React.createElement(ListItemText, { primary: React.createElement(Typography, { variant: "subtitle1", fontWeight: "medium" }, component.name), secondary: React.createElement(Box, { mt: 1 },
-                                        details.template && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
-                                            "Type: ",
-                                            details.template.name)),
-                                        details.regions.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
-                                            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Regions:"),
-                                            details.regions.map((region) => (React.createElement(Chip, { key: region.id, label: region.name, size: "small", variant: "outlined" }))))),
-                                        details.partners.length > 0 && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 1, mt: 0.5 },
-                                            React.createElement(Typography, { variant: "body2", color: "text.secondary" }, "Partners:"),
-                                            details.partners
-                                                .slice(0, 3)
-                                                .map((partner) => (React.createElement(Chip, { key: partner.id, label: `${partner.name} - ${PARTNER_REGION_READABLE[partner.id || "".split("-")[0]]}`, size: "small", variant: "outlined", color: "secondary" }))),
-                                            details.partners.length > 3 && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
-                                                "+",
-                                                details.partners.length - 3,
-                                                " more"))))) })))),
-                    index < components.length - 1 && React.createElement(Divider, null)));
-            }))),
+                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 }))))),
             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/renderers/ComponentPicker.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Paper, Button, } from "@mui/material";
 import { useLocalErrors } from "../hooks/errors";
 import { ComponentPool } from "../registry/types";
@@ -15,6 +15,7 @@ import { registerComponent } from "../registry/components";
 import { CoreService } from "../../api/generated/core";
 import { useComponentPicker } from "../contexts/ComponentPickerContext";
 import { InternalServices } from "../../api/init";
+import { getComponentDataByTemplateName, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
 export const FormComponentPicker = ({ selectedComponent, onChange, templateIds, getError, label, enabled, }) => {
     const [selected, setSelected] = useState();
     const { get } = useComponentPicker();
@@ -24,6 +25,17 @@ export const FormComponentPicker = ({ selectedComponent, onChange, templateIds,
         else
             setSelected(undefined);
     }, [selectedComponent]);
+    const displayLabel = useMemo(() => {
+        var _a;
+        if (!selectedComponent)
+            return "Select " + label + " Component";
+        if (!selected)
+            return "";
+        const activityData = (_a = getComponentDataByTemplateName(TEMPLATE_NAMES.CRUISE_ACTIVITY, selected.componentFields)) !== null && _a !== void 0 ? _a : getComponentDataByTemplateName(TEMPLATE_NAMES.ACTIVITY, selected.componentFields);
+        return (activityData === null || activityData === void 0 ? void 0 : activityData.type)
+            ? `${activityData.type} - ${selected.name}`
+            : selected.name;
+    }, [selected, selectedComponent, label]);
     return (React.createElement(Paper, { component: "form", sx: { display: "flex", flexDirection: "column", gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
         React.createElement(Button, { disabled: !enabled, onClick: () => {
                 get(templateIds)
@@ -48,7 +60,7 @@ export const FormComponentPicker = ({ selectedComponent, onChange, templateIds,
                         ? "rgba(211, 47, 47, 0.04)"
                         : undefined,
                 },
-            } }, selectedComponent ? selected === null || selected === void 0 ? void 0 : selected.name : "Select " + label + " Component")));
+            } }, displayLabel)));
 };
 const FormRendererComponentPicker = ({ data, handleChange, path, label, enabled, schema, }) => {
     const getError = useLocalErrors(path);

package/package.json

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