@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/meetings/MeetingSummaryRail.js

@@ -0,0 +1,515 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { ClockIcon, CalendarIcon, GlobeIcon } from "../../images/icons.js";
+import { Step as meeting_store_Step } from "../../stores/meeting_store.js";
+import "../../styled-system/jsx/index.js";
+import { isMobile } from "../../utils/media_queries.js";
+import { AvatarGroup } from "../shared/AvatarGroup.js";
+import { AVAILABLE_TIME_ZONES } from "./constants.js";
+import { pickPrimaryUser, getMultiRepAvatarUrls, primaryAvatarUrl } from "./MeetingRepHeader.js";
+import { formatTimeShort, formatDateCompact } from "./utils.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+/**
+ * The left column of the artifact's booking card: who the meeting is with, what it
+ * is, and — once a slot is chosen — when.
+ *
+ * Replaces LightboxMeetingInfo on this surface. That component is a block that sits
+ * at the top of its column and stops; this is a full-height rail with a border down
+ * its right edge and its meta pinned to the bottom, so the card reads as two panes
+ * rather than as a paragraph next to a calendar. It is declared here rather than as
+ * another variant of the shared one because the element-conversation lightbox is
+ * meant to keep rendering exactly as it does.
+ *
+ * Where the panel is too narrow to stand the rail beside the step — which happens to
+ * a desktop panel with the messenger open beside it — the container query below lays
+ * it down as a band across the top of the card instead. It goes on naming the same
+ * three things there, which is what lets the steps below leave the rep and the chosen
+ * slot to it rather than drawing their own copy when the card gets small.
+ *
+ * On a phone it gives all of that up for a one-line step title (MobileHeader). A
+ * narrow desktop panel is only narrow, but a phone's is also short, and there the
+ * avatar, name and meta rows come off the calendar — the one thing on the card the
+ * visitor came for. What they said survives elsewhere: the duration in the step's
+ * footer bar, the time zone in the calendar's own picker, the chosen slot in the day
+ * strip and, on the email step, in its details card. What is left over is which step
+ * the visitor is on, which is what the title says.
+ *
+ * Both narrow forms are decided here rather than by the card, so the card can hand
+ * this column the space and let it choose what is worth putting in it.
+ */ const MeetingSummaryRail = (param)=>{
+    let { offer, meetingStore, t } = param;
+    var _ref, _ref1, _offer_title, _offer_subtitle, _ref2;
+    var _offer_users, _AVAILABLE_TIME_ZONES_find;
+    // Keyed on the viewport rather than on the `bookerPanel` container the band's styling
+    // queries, because this decides what is rendered and only CSS can ask how wide a
+    // container ended up. The two agree in practice: a panel on a phone is always inside
+    // that breakpoint.
+    if (isMobile.value) {
+        return /*#__PURE__*/ jsxRuntime_module_u(MobileHeader, {
+            "data-component-name": "MeetingSummaryRail.MobileHeader",
+            children: meetingStore.step.value === meeting_store_Step.Email ? t("meetings.confirmMeetingTime") : t("meetings.scheduleMeeting")
+        });
+    }
+    const hasMultipleUsers = ((_ref = (_offer_users = offer.users) == null ? void 0 : _offer_users.length) != null ? _ref : 0) > 1;
+    const rep = hasMultipleUsers ? null : pickPrimaryUser(offer);
+    const avatarUrls = getMultiRepAvatarUrls(offer);
+    const avatarUrl = hasMultipleUsers ? null : primaryAvatarUrl(offer);
+    const name = (rep == null ? void 0 : rep.name) || t("meetings.aTeamMember");
+    const job = (rep == null ? void 0 : rep.jobTitle) || null;
+    // The same title the lightbox shows, fallback included: an offer that carries only
+    // a calendar event type name still has a title to give, and treating it as
+    // untitled would put those offers into the centred variant below by accident.
+    const title = (_ref1 = (_offer_title = offer.title) != null ? _offer_title : offer.calendarEventTitle) != null ? _ref1 : null;
+    const description = (_offer_subtitle = offer.subtitle) != null ? _offer_subtitle : null;
+    const timeZone = meetingStore.timeZone.value;
+    const timeZoneLabel = (_ref2 = (_AVAILABLE_TIME_ZONES_find = AVAILABLE_TIME_ZONES.find((tz)=>tz.value === timeZone)) == null ? void 0 : _AVAILABLE_TIME_ZONES_find.label) != null ? _ref2 : timeZone;
+    const slot = meetingStore.selectedTimeSlot.value;
+    const locale = meetingStore.rootStore.translationStore.effectiveLocale.value;
+    const meta = /*#__PURE__*/ jsxRuntime_module_u(Meta, {
+        "data-component-name": "MeetingSummaryRail.Meta",
+        children: [
+            meetingStore.durationLabel.value && /*#__PURE__*/ jsxRuntime_module_u(MetaRow, {
+                "data-component-name": "MeetingSummaryRail.Duration",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MetaIcon, {
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ClockIcon, {})
+                    }),
+                    meetingStore.durationLabel
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MetaRow, {
+                "data-component-name": "MeetingSummaryRail.Timezone",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MetaIcon, {
+                        children: /*#__PURE__*/ jsxRuntime_module_u(GlobeIcon, {})
+                    }),
+                    timeZoneLabel
+                ]
+            }),
+            slot && /*#__PURE__*/ jsxRuntime_module_u(SelectionRow, {
+                "data-component-name": "MeetingSummaryRail.Selection",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MetaIcon, {
+                        children: /*#__PURE__*/ jsxRuntime_module_u(CalendarIcon, {})
+                    }),
+                    formatDateCompact(slot.startsAt, timeZone, locale) + " \xb7 " + formatTimeShort(slot.startsAt, timeZone, locale)
+                ]
+            })
+        ]
+    });
+    // Without a title there is nothing for the eye to start on, so the rail stops
+    // being top-aligned-with-meta-at-the-foot and becomes one block sitting slightly
+    // above centre — the spacers below are 7:13 rather than 1:1 because a block
+    // centred by measurement reads as low.
+    if (!title && !description) {
+        return /*#__PURE__*/ jsxRuntime_module_u(Rail, {
+            centred: true,
+            "data-component-name": "MeetingSummaryRail.Rail",
+            children: /*#__PURE__*/ jsxRuntime_module_u(Centred, {
+                "data-component-name": "MeetingSummaryRail.Centred",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(RepGroup, {
+                        spaced: true,
+                        "data-component-name": "MeetingSummaryRail.RepGroup",
+                        children: [
+                            hasMultipleUsers ? /*#__PURE__*/ jsxRuntime_module_u(AvatarGroup, {
+                                id: "meeting-summary-rep",
+                                urls: avatarUrls,
+                                size: "lg"
+                            }) : /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                                large: true,
+                                avatarUrl: avatarUrl,
+                                name: name
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(NameBlock, {
+                                "data-component-name": "MeetingSummaryRail.NameBlock",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime_module_u(RepName, {
+                                        prominent: true,
+                                        children: hasMultipleUsers ? name : t("meetings.meetWithName", {
+                                            name
+                                        })
+                                    }),
+                                    job && /*#__PURE__*/ jsxRuntime_module_u(RepJob, {
+                                        children: job
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    meta
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(Rail, {
+        "data-component-name": "MeetingSummaryRail.Rail",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(TopGroup, {
+                "data-component-name": "MeetingSummaryRail.TopGroup",
+                children: [
+                    hasMultipleUsers ? /*#__PURE__*/ jsxRuntime_module_u(AvatarGroup, {
+                        id: "meeting-summary-rep",
+                        urls: avatarUrls,
+                        size: "lg"
+                    }) : /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                        avatarUrl: avatarUrl,
+                        name: name
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(NameBlock, {
+                        "data-component-name": "MeetingSummaryRail.NameBlock",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(RepName, {
+                                children: name
+                            }),
+                            job && /*#__PURE__*/ jsxRuntime_module_u(RepJob, {
+                                children: job
+                            })
+                        ]
+                    }),
+                    title && /*#__PURE__*/ jsxRuntime_module_u(MeetingTitle, {
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ jsxRuntime_module_u(Description, {
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Spacer, {
+                "aria-hidden": "true"
+            }),
+            meta
+        ]
+    });
+};
+const Avatar = (param)=>{
+    let { avatarUrl, name, large = false } = param;
+    var _name_;
+    return /*#__PURE__*/ jsxRuntime_module_u(AvatarCircle, {
+        large: large,
+        "data-component-name": "MeetingSummaryRail.Avatar",
+        children: avatarUrl ? /*#__PURE__*/ jsxRuntime_module_u("img", {
+            src: avatarUrl,
+            alt: ""
+        }) : (_name_ = name[0]) == null ? void 0 : _name_.toUpperCase()
+    });
+};
+/**
+ * The phone card's title, standing in for everything above (see the note on the
+ * component). A heading rather than a styled div because it is the only thing naming
+ * the card there, and giving up the meeting title would otherwise leave it with no
+ * heading at all.
+ *
+ * No bottom padding: the step's own top padding sets the gap to the calendar, so the
+ * two do not each contribute one.
+ */ const MobileHeader = styled("h2", {
+    base: {
+        flex: "[0 0 auto]",
+        paddingTop: "[16px]",
+        paddingInline: "[16px]",
+        paddingBottom: "[0]",
+        // The close button is pinned to the card frame's top-right corner, and with no
+        // band under it this is what it lands on, so the title stops short of it.
+        paddingRight: "[56px]",
+        fontFamily: "$inter",
+        fontSize: "16px",
+        fontWeight: "$semibold",
+        lineHeight: "24px",
+        color: "$text.dark",
+        margin: "$none"
+    }
+});
+MobileHeader.displayName = "MobileHeader";
+const Rail = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        flex: "[0 0 264px]",
+        borderRightWidth: "1px",
+        borderRightStyle: "solid",
+        borderRightColor: "[#E6E9EC]",
+        borderRadius: "[12px 0 0 12px]",
+        paddingTop: "[28px]",
+        paddingInline: "[24px]",
+        paddingBottom: "[20px]",
+        minWidth: "[0]",
+        // Below this the card stacks (see ArtifactEntryPoint), and a 264px column with a
+        // border down one side becomes a band across the top with the border underneath.
+        "@container bookerPanel (max-width: 720px)": {
+            flex: "[0 0 auto]",
+            width: "[100%]",
+            borderRightWidth: "0",
+            borderBottomWidth: "1px",
+            borderBottomStyle: "solid",
+            borderBottomColor: "[#E6E9EC]",
+            borderRadius: "[12px 12px 0 0]",
+            padding: "[20px]",
+            // Beside a wide card the close button lands on the step's column, which has
+            // padding of its own to spare. The band runs the full width of the card, so
+            // the button lands here instead and the meeting title would otherwise run
+            // underneath it.
+            paddingRight: "[56px]"
+        }
+    },
+    variants: {
+        centred: {
+            true: {
+                "&::before": {
+                    content: "''",
+                    flex: "[7]"
+                },
+                "&::after": {
+                    content: "''",
+                    flex: "[13]"
+                },
+                // Nothing to centre against once the rail is a band: it is as tall as its
+                // content, so spacers would only add empty rows above and below it.
+                "@container bookerPanel (max-width: 720px)": {
+                    "&::before": {
+                        content: "none"
+                    },
+                    "&::after": {
+                        content: "none"
+                    }
+                }
+            }
+        }
+    }
+});
+Rail.displayName = "Rail";
+const Centred = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "[24px]"
+    }
+});
+Centred.displayName = "Centred";
+const TopGroup = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "[12px]",
+        minWidth: "[0]",
+        // The band has width to spare and no height to spare, so the avatar moves beside
+        // the name rather than above it. max-content (not 44px): a multi-rep AvatarGroup
+        // is wider than one circle (72px for two, 100px for three at size lg), and a fixed
+        // first column would let the facepile spill into the name.
+        "@container bookerPanel (max-width: 720px)": {
+            display: "grid",
+            gridTemplateColumns: "[max-content 1fr]",
+            alignItems: "center",
+            columnGap: "[12px]",
+            rowGap: "[12px]"
+        }
+    }
+});
+TopGroup.displayName = "TopGroup";
+const RepGroup = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "[12px]",
+        minWidth: "[0]",
+        "@container bookerPanel (max-width: 720px)": {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "[12px]"
+        }
+    },
+    variants: {
+        // The untitled rail leans on the space under the avatar to carry the moment the
+        // title would otherwise carry.
+        spaced: {
+            true: {
+                gap: "[32px]",
+                "@container bookerPanel (max-width: 720px)": {
+                    gap: "[12px]"
+                }
+            }
+        }
+    }
+});
+RepGroup.displayName = "RepGroup";
+const NameBlock = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "[4px]",
+        minWidth: "[0]"
+    }
+});
+NameBlock.displayName = "NameBlock";
+const AvatarCircle = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        width: "[64px]",
+        height: "[64px]",
+        borderRadius: "[50%]",
+        overflow: "hidden",
+        backgroundColor: "$primary",
+        color: "$white.solid",
+        fontFamily: "$inter",
+        fontWeight: "$semibold",
+        fontSize: "[26px]",
+        "& img": {
+            width: "[100%]",
+            height: "[100%]",
+            objectFit: "cover"
+        },
+        "@container bookerPanel (max-width: 720px)": {
+            width: "[44px]",
+            height: "[44px]",
+            fontSize: "[17px]"
+        }
+    },
+    variants: {
+        large: {
+            true: {
+                width: "[72px]",
+                height: "[72px]",
+                fontSize: "[30px]",
+                "@container bookerPanel (max-width: 720px)": {
+                    width: "[44px]",
+                    height: "[44px]",
+                    fontSize: "[17px]"
+                }
+            }
+        }
+    }
+});
+AvatarCircle.displayName = "AvatarCircle";
+const RepName = styled("div", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontWeight: "$semibold",
+        lineHeight: "22px",
+        color: "$text.dark",
+        margin: "$none"
+    },
+    variants: {
+        // The untitled rail's name line is the card's title, so it takes the title size.
+        prominent: {
+            true: {
+                fontSize: "16px",
+                lineHeight: "24px"
+            }
+        }
+    }
+});
+RepName.displayName = "RepName";
+const RepJob = styled("div", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$normal",
+        lineHeight: "18px",
+        color: "$text.secondary"
+    }
+});
+RepJob.displayName = "RepJob";
+const MeetingTitle = styled("h2", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "20px",
+        fontWeight: "$semibold",
+        lineHeight: "28px",
+        color: "$text.dark",
+        margin: "$none",
+        // Spans the avatar/name grid the band puts above it.
+        "@container bookerPanel (max-width: 720px)": {
+            gridColumn: "[1 / -1]"
+        }
+    }
+});
+MeetingTitle.displayName = "MeetingTitle";
+const Description = styled("p", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        color: "$text.secondary",
+        margin: "$none",
+        // Dropped from the band, where it is the one thing that can run to several lines
+        // and the height it takes comes straight off the calendar.
+        "@container bookerPanel (max-width: 720px)": {
+            display: "none"
+        }
+    }
+});
+Description.displayName = "Description";
+const Spacer = styled("div", {
+    base: {
+        flex: "1",
+        minHeight: "[0]"
+    }
+});
+Spacer.displayName = "Spacer";
+const Meta = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "[10px]",
+        "@container bookerPanel (max-width: 720px)": {
+            flexDirection: "row",
+            flexWrap: "wrap",
+            rowGap: "[8px]",
+            columnGap: "[16px]"
+        }
+    }
+});
+Meta.displayName = "Meta";
+const MetaRow = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "[8px]",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$normal",
+        lineHeight: "18px",
+        color: "$text.secondary"
+    }
+});
+MetaRow.displayName = "MetaRow";
+/** The chosen slot, restated. Darker than the rest of the meta because it is the
+ *  one line here that answers a question the visitor just asked. */ const SelectionRow = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "[8px]",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$medium",
+        lineHeight: "18px",
+        color: "$text.dark"
+    }
+});
+SelectionRow.displayName = "SelectionRow";
+const MetaIcon = styled("span", {
+    base: {
+        display: "flex",
+        flexShrink: 0,
+        "& svg": {
+            width: "[14px]",
+            height: "[14px]"
+        }
+    }
+});
+MetaIcon.displayName = "MetaIcon";
+
+export { MeetingSummaryRail };