swoop-common 2.2.206 → 2.2.207

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

@@ -1,6 +1,7 @@
 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 interface ComponentListItemProps {
     component: DTOComponentRead;
     isSelected: boolean;
@@ -11,6 +12,7 @@ export interface ComponentListItemProps {
     };
     onSelect: (component: DTOComponentRead) => void;
     showDivider: boolean;
+    system?: ComponentSystem;
 }
 declare const ComponentListItem: React.FC<ComponentListItemProps>;
 export default ComponentListItem;

package/dist/rendering/components/ComponentListItem.js

@@ -1,13 +1,83 @@
-import React from "react";
-import { Box, Chip, Divider, ListItem, ListItemButton, ListItemText, Typography, } from "@mui/material";
-import { PARTNER_REGION_READABLE } from "../consts/region";
+import React, { useEffect, useState } from "react";
+import { Box, Button, Chip, Divider, ListItem, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import { getComponentDataByTemplateName, TEMPLATE_NAMES } from "../../lib/config/templateStructure";
-const ComponentListItem = ({ component, isSelected, details, onSelect, showDivider, }) => {
-    var _a;
+import { getComponentsByIds } from "../util/api";
+import { COMPONENT_SYSTEMS } from "../consts/system";
+const TEMPLATE_CHIP_STYLES = {
+    [TEMPLATE_NAMES.PACKAGE]: { backgroundColor: "#E3F2FD", color: "#1565C0" }, // blue
+    [TEMPLATE_NAMES.PACKAGES]: { backgroundColor: "#E3F2FD", color: "#1565C0" }, // blue
+    [TEMPLATE_NAMES.TRANSFER]: { backgroundColor: "#F3E5F5", color: "#7B1FA2" }, // purple
+    [TEMPLATE_NAMES.ACTIVITY]: { backgroundColor: "#E8F5E9", color: "#2E7D32" }, // green
+    [TEMPLATE_NAMES.CRUISE_ACTIVITY]: { backgroundColor: "#DCEDC8", color: "#558B2F" }, // different shade of green
+    [TEMPLATE_NAMES.GROUND_ACCOMMODATION]: { backgroundColor: "#FFF9C4", color: "#F9A825" }, // yellow
+    [TEMPLATE_NAMES.SHIP_ACCOMMODATION]: { backgroundColor: "#FCE4EC", color: "#C2185B" }, // red/pink
+};
+const getTemplateChipStyle = (templateName) => { var _a; return (_a = TEMPLATE_CHIP_STYLES[templateName]) !== null && _a !== void 0 ? _a : { backgroundColor: "grey.200", color: "text.secondary" }; };
+/*
+    Content per item type from ticket:
+    Package: Trip ID (hide on IB), Start city, Private, Guided
+
+    Transfer: Private, Guided, Transfer type, Start location (from journey), End location (from journey)
+        // lookup journey from component.componentFields.0.data.journey which contains a componentID, e.g. component_5a51acc53ab0b16da19f875c8cc148f2
+        // journey will contain a couple more componentFields which are start and end locations. These will need looking up and outputting.
+
+    Activity: Start location, End location, Type, Guided
+
+    Cruise activity: Type
+
+    Ground accommodation: City
+
+    Ship accommodation: Vessel ID (hide on IB)
+
+    Private and Guided render as a tick (✓) when true
+
+    When Private or Guided is false or unpopulated, the field is omitted entirely
+*/
+const INLINE_CONTENT_BY_TEMPLATE = {
+    [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;
+            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;
     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 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;
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItem, { disablePadding: true },
             React.createElement(ListItemButton, { onClick: () => onSelect(component), selected: isSelected, sx: {
@@ -20,21 +90,23 @@ const ComponentListItem = ({ component, isSelected, details, onSelect, showDivid
                         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.title} (${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"))))) })))),
+                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(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" },
+                                    "Partner: ",
+                                    details.partners[0].title)),
+                                (component === null || component === void 0 ? void 0 : component.destination) && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                    "Destination: ",
+                                    convertToTitleCase(component.destination))),
+                                details.regions.length > 0 && (React.createElement(Typography, { variant: "body2", color: "text.secondary" },
+                                    "Region: ",
+                                    details.regions[0].name))),
+                            inlineContent && (React.createElement(Box, { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap" }, inlineContent))) }),
+                    isTemplateEditor && (React.createElement(Button, { component: "a", href: `${window.location.origin}/components/${component.id}`, target: "_blank", rel: "noopener noreferrer", variant: "outlined", size: "small", onClick: (e) => e.stopPropagation(), sx: { flexShrink: 0 } }, "View"))))),
         showDivider && React.createElement(Divider, null)));
 };
 export default ComponentListItem;

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

@@ -1,11 +1,13 @@
 import React from "react";
 import { DTOComponentRead } from "../../api/generated/core/exports";
+import { ComponentSystem } from "../consts/system";
 interface ComponentPickerModalProps {
     open: boolean;
     onClose: () => void;
     onSelect: (component: DTOComponentRead) => void;
     selectedComponent?: DTOComponentRead | null;
     parentIdsFilter?: Array<string>;
+    system?: ComponentSystem;
 }
-export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter, }: ComponentPickerModalProps): React.JSX.Element;
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter, system, }: ComponentPickerModalProps): React.JSX.Element;
 export {};

package/dist/rendering/components/ComponentPicker.js

@@ -15,7 +15,7 @@ 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, }) {
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter, system, }) {
     const [searchTerm, setSearchTerm] = useState("");
     const [selectedRegion, setSelectedRegion] = useState("");
     const [selectedPartner, setSelectedPartner] = useState("");
@@ -240,7 +240,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 }))))),
+                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 }))))),
             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/system.d.ts

@@ -0,0 +1,5 @@
+export declare const COMPONENT_SYSTEMS: {
+    readonly TEMPLATE_EDITOR: "template-editor";
+    readonly ITINERARY_BUILDER: "itinerary-builder";
+};
+export type ComponentSystem = typeof COMPONENT_SYSTEMS[keyof typeof COMPONENT_SYSTEMS];

package/dist/rendering/consts/system.js

@@ -0,0 +1,4 @@
+export const COMPONENT_SYSTEMS = {
+    TEMPLATE_EDITOR: "template-editor",
+    ITINERARY_BUILDER: "itinerary-builder",
+};

package/dist/rendering/contexts/ComponentPickerContext.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { DTOComponentRead } from '../../api/generated/core/exports';
+import { ComponentSystem } from '../consts/system';
 interface ComponentPickerExports {
     get: (parentIds?: Array<string>) => Promise<DTOComponentRead>;
 }
 interface Props {
     children?: React.ReactNode;
+    system?: ComponentSystem;
 }
 export declare const useComponentPicker: () => ComponentPickerExports;
 export declare const ComponentPickerProvider: React.FC<Props>;

package/dist/rendering/contexts/ComponentPickerContext.js

@@ -16,7 +16,7 @@ export const useComponentPicker = () => {
         throw new Error("useComponentPicker used from outside selector context");
     return picker;
 };
-export const ComponentPickerProvider = ({ children }) => {
+export const ComponentPickerProvider = ({ children, system }) => {
     const [open, setOpen] = useState(false);
     const changeProp = useRef(() => { });
     const closeProp = useRef(() => { });
@@ -44,6 +44,6 @@ export const ComponentPickerProvider = ({ children }) => {
         });
     });
     return (React.createElement(ComponentSelectorContext.Provider, { value: { get: getSelectedComponent } },
-        React.createElement(ComponentPickerModal, { parentIdsFilter: parentIds.length ? parentIds : undefined, open: open, onClose: closeProp.current, onSelect: changeProp.current }),
+        React.createElement(ComponentPickerModal, { parentIdsFilter: parentIds.length ? parentIds : undefined, open: open, onClose: closeProp.current, onSelect: changeProp.current, system: system }),
         children));
 };

package/dist/rendering/index.d.ts

@@ -10,3 +10,4 @@ export { MasterSchema, Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
 export * from "./contexts/ComponentPickerContext";
+export * from "./consts/system";

package/dist/rendering/index.js

@@ -10,3 +10,4 @@ export { Stage } from "./schema/formSchemaTypes";
 export { FORM_BUILDER_JSON_SCHEMA } from "./schema/formBuilders/formBuilderJsonSchema";
 export { FORM_BUILDER_UI_SCHEMA } from "./schema/formBuilders/formBuilderUiSchema";
 export * from "./contexts/ComponentPickerContext";
+export * from "./consts/system";

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

@@ -6,3 +6,4 @@ export declare const fetchComponents: (filters?: Record<string, string>) => Prom
     }>;
     pagination: Pagination;
 }>;
+export declare const getComponentsByIds: (componentIds: string[]) => Promise<DTOComponentRead[]>;

package/dist/rendering/util/api.js

@@ -50,3 +50,18 @@ export const fetchComponents = (filters) => __awaiter(void 0, void 0, void 0, fu
     });
     return { data: latestComponents, pagination: data.pagination };
 });
+export const getComponentsByIds = (componentIds) => __awaiter(void 0, void 0, void 0, function* () {
+    const uniqueIds = Array.from(new Set(componentIds.filter(Boolean)));
+    if (!uniqueIds.length)
+        return [];
+    try {
+        const response = yield InternalServices.CoreService.componentBatchGet({
+            componentIds: uniqueIds,
+        });
+        return response.data || [];
+    }
+    catch (error) {
+        console.error("Failed to fetch components by id:", error);
+        return [];
+    }
+});

package/package.json

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