@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,603 @@
+import { hooks_module_, hooks_module_y, preact_module_k, useComputed, jsxRuntime_module_u, utils_module_e } from "../../../../js/multimodal_v2.js";
+import { RightArrowIcon, LeftArrowIcon } from "../../images/icons.js";
+import "../../styled-system/css/index.js";
+import "../../styled-system/jsx/index.js";
+import { isMobile } from "../../utils/media_queries.js";
+import { AVAILABLE_TIME_ZONES } from "./constants.js";
+import { TimeSlotHeader } from "./TimeSlotHeader.js";
+import { WeekViewHeader } from "./WeekViewHeader.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+
+const MeetingTimeSelector = (props)=>{
+    var _ref, _ref1;
+    var _props_meetingStore_activeOfferMessage_value, _state_calendarDays_value_, _state_displayedTimeSlotItems_value_;
+    const { t } = props;
+    const { state, handlers } = useMeetingTimeSelector(props);
+    // The booker has "shown" once its content renders — whether that is the slot
+    // grid or the no-availability empty state. Empty availability is a successful
+    // render (backend responded, no one is free); it is not a booker failure.
+    // Keyed by the active offer id so a subsequent offer (the store instance is
+    // stable across offers) also marks itself shown rather than being logged failed.
+    // Reading `.value` here is a render-time snapshot, not reactive.
+    //
+    // The snapshot is passed into markShown rather than re-read there: effects run
+    // after paint, so a second offer arriving in between would otherwise make the
+    // store report the newer id for a render that showed the older one, and the
+    // intent tracker would drop that timing as belonging to a different intent.
+    const shownOfferMessageId = (_props_meetingStore_activeOfferMessage_value = props.meetingStore.activeOfferMessage.value) == null ? void 0 : _props_meetingStore_activeOfferMessage_value.id;
+    hooks_module_y(()=>{
+        props.meetingStore.markShown(shownOfferMessageId);
+    }, [
+        props.meetingStore,
+        shownOfferMessageId
+    ]);
+    // Show empty state if no slots available
+    if (!props.hasAvailableSlots) {
+        return /*#__PURE__*/ jsxRuntime_module_u(EmptyStateContainer, {
+            "data-component-name": "MeetingTimeSelector.EmptyStateContainer",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(EmptyStateTitle, {
+                    "data-component-name": "MeetingTimeSelector.EmptyStateTitle",
+                    children: t("meetings.noTimesAvailable")
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(EmptyStateDescription, {
+                    "data-component-name": "MeetingTimeSelector.EmptyStateDescription",
+                    children: t("meetings.noTimesDescription")
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(WeekViewSection, {
+                "data-component-name": "MeetingTimeSelector.WeekViewSection",
+                children: [
+                    state.layout.value === "small" ? /*#__PURE__*/ jsxRuntime_module_u(WeekViewTopRow, {
+                        "data-component-name": "MeetingTimeSelector.WeekViewTopRow",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(WeekViewHeader, {
+                                monthTitle: state.monthTitle,
+                                minDate: state.minDate,
+                                maxDate: state.maxDate,
+                                availableDateStrings: state.availableDateStrings,
+                                selectedDateString: state.selectedDateString,
+                                onSelectDate: handlers.handleSelectDate,
+                                locale: state.locale.value,
+                                openDatePickerLabel: t("meetings.openDatePicker")
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(WeekNavGroup, {
+                                "data-component-name": "MeetingTimeSelector.WeekNavGroup",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                        type: "button",
+                                        className: weekNavButtonStyle,
+                                        "aria-label": t("meetings.previousWeek"),
+                                        onClick: handlers.handlePrevWeek,
+                                        disabled: !state.hasPrevWeek.value,
+                                        "data-component-name": "MeetingTimeSelector.PrevWeekButton",
+                                        children: /*#__PURE__*/ jsxRuntime_module_u(LeftArrowIcon, {})
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                        type: "button",
+                                        className: weekNavButtonStyle,
+                                        "aria-label": t("meetings.nextWeek"),
+                                        onClick: handlers.handleNextWeek,
+                                        disabled: !state.hasNextWeek.value,
+                                        "data-component-name": "MeetingTimeSelector.NextWeekButton",
+                                        children: /*#__PURE__*/ jsxRuntime_module_u(RightArrowIcon, {})
+                                    })
+                                ]
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsxRuntime_module_u(WeekViewHeader, {
+                        monthTitle: state.monthTitle,
+                        minDate: state.minDate,
+                        maxDate: state.maxDate,
+                        availableDateStrings: state.availableDateStrings,
+                        selectedDateString: state.selectedDateString,
+                        onSelectDate: handlers.handleSelectDate,
+                        locale: state.locale.value,
+                        openDatePickerLabel: t("meetings.openDatePicker")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(DayStripRow, {
+                        "data-component-name": "MeetingTimeSelector.DayStripRow",
+                        children: [
+                            state.layout.value === "large" && /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                type: "button",
+                                className: weekNavButtonStyle,
+                                "aria-label": t("meetings.previousWeek"),
+                                onClick: handlers.handlePrevWeek,
+                                disabled: !state.hasPrevWeek.value,
+                                "data-component-name": "MeetingTimeSelector.PrevWeekButton",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(LeftArrowIcon, {})
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(WeekViewDays, {
+                                "data-component-name": "MeetingTimeSelector.WeekViewDays",
+                                layout: state.layout,
+                                children: /*#__PURE__*/ jsxRuntime_module_u(utils_module_e, {
+                                    each: state.calendarDays,
+                                    children: (day)=>/*#__PURE__*/ jsxRuntime_module_u(DayCard, {
+                                            "data-component-name": "MeetingTimeSelector.DayCard",
+                                            type: "button",
+                                            onClick: ()=>!day.isDisabled && handlers.handleSelectTimeSlot(day.slots[0]),
+                                            disabled: day.isDisabled,
+                                            selected: day.isSelected,
+                                            "aria-pressed": day.isSelected,
+                                            children: /*#__PURE__*/ jsxRuntime_module_u(InnerDayCard, {
+                                                "data-component-name": "MeetingTimeSelector.InnerDayCard",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime_module_u(DayString, {
+                                                        "data-component-name": "MeetingTimeSelector.DayString",
+                                                        disabled: day.isDisabled,
+                                                        children: day.day
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime_module_u(DayNumber, {
+                                                        "data-component-name": "MeetingTimeSelector.DayNumber",
+                                                        disabled: day.isDisabled,
+                                                        children: day.value
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                })
+                            }, state.monthTitle.value + "-" + ((_ref = (_state_calendarDays_value_ = state.calendarDays.value[0]) == null ? void 0 : _state_calendarDays_value_.value) != null ? _ref : "")),
+                            state.layout.value === "large" && /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                type: "button",
+                                className: weekNavButtonStyle,
+                                "aria-label": t("meetings.nextWeek"),
+                                onClick: handlers.handleNextWeek,
+                                disabled: !state.hasNextWeek.value,
+                                "data-component-name": "MeetingTimeSelector.NextWeekButton",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(RightArrowIcon, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(SlotsSection, {
+                "data-component-name": "MeetingTimeSelector.SlotsSection",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(TimeSlotHeader, {
+                        timeZones: AVAILABLE_TIME_ZONES,
+                        timeZone: state.timeZone,
+                        onSelectTimeZone: handlers.handleSelectTimeZone,
+                        hasPrev: state.hasPrevSlotPage,
+                        hasNext: state.hasNextSlotPage,
+                        onPrevPage: handlers.handlePrevPage,
+                        onNextPage: handlers.handleNextPage,
+                        selectTimezoneLabel: t("meetings.selectTimezone"),
+                        filterTimezonesLabel: t("meetings.filterTimezones"),
+                        previousTimesLabel: t("meetings.previousTimes"),
+                        nextTimesLabel: t("meetings.nextTimes"),
+                        layout: state.layout.value
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(SlotsGrid, {
+                        "data-component-name": "MeetingTimeSelector.SlotsGrid",
+                        layout: state.layout,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(utils_module_e, {
+                                each: state.displayedTimeSlotItems,
+                                children: (item)=>/*#__PURE__*/ jsxRuntime_module_u(SlotButton, {
+                                        "data-component-name": "MeetingTimeSelector.SlotButton",
+                                        type: "button",
+                                        onClick: ()=>handlers.handleSelectTimeSlot(item.slot),
+                                        selected: item.isSelected,
+                                        "aria-pressed": item.isSelected,
+                                        children: item.label
+                                    })
+                            }),
+                            Array.from({
+                                length: Math.max(0, state.slotPageSize.value - state.displayedTimeSlotItems.value.length)
+                            }).map((_, index)=>/*#__PURE__*/ jsxRuntime_module_u(PlaceholderSlot, {
+                                    "data-component-name": "MeetingTimeSelector.PlaceholderSlot",
+                                    "aria-hidden": "true"
+                                }, "placeholder-" + index))
+                        ]
+                    }, (_ref1 = (_state_displayedTimeSlotItems_value_ = state.displayedTimeSlotItems.value[0]) == null ? void 0 : _state_displayedTimeSlotItems_value_.slot.startsAt) != null ? _ref1 : "")
+                ]
+            })
+        ]
+    });
+};
+function useMeetingTimeSelector(param) {
+    let { meetingStore, context = "artifact" } = param;
+    // Annotated rather than inferred so that leaving a context unhandled is a type
+    // error here instead of a silently undefined layout.
+    const layout = useComputed(()=>{
+        switch(context){
+            case "lightbox":
+                // The element-conversation overlay covers the viewport, so there is always
+                // room for the full week strip.
+                return "large";
+            case "artifact":
+                // The artifact panel is only a slice of the viewport, so unlike the lightbox
+                // it cannot assume there is room. On a mobile viewport the panel spans the
+                // whole (narrow) viewport, and the arrows flanking the day cards cost width
+                // the seven cards need — so the week strip compacts, lifting them up beside
+                // the month title as the docked messenger does.
+                //
+                // A narrow panel on a *wide* viewport is handled by the container queries in
+                // the styles below, which tighten density against the panel's own width.
+                // They cannot move the arrows (that is a change of structure, not of style),
+                // which is why this stays a JS decision.
+                return isMobile.value ? "small" : "large";
+        }
+    });
+    // The store pages the slot list, and how many slots fit on a page is a question
+    // about the grid on screen — four across in a card with 500px to fill, three
+    // across in a narrow one. So the layout decided above has to reach it. Before
+    // paint rather than after, so the first frame already draws the right number of
+    // cells instead of a compact grid that grows a moment later.
+    hooks_module_(()=>{
+        meetingStore.slotLayout.value = layout.value;
+    }, [
+        meetingStore,
+        layout.value
+    ]);
+    // Handlers - simple wrappers around store actions
+    const handleSelectTimeSlot = (slot)=>{
+        meetingStore.selectTimeSlot(slot);
+    };
+    const handleSelectTimeZone = (tz)=>{
+        meetingStore.selectTimeZone(tz);
+    };
+    return {
+        state: {
+            monthTitle: meetingStore.monthTitle,
+            minDate: meetingStore.minDate,
+            maxDate: meetingStore.maxDate,
+            availableDateStrings: meetingStore.availableDateStrings,
+            selectedDateString: meetingStore.selectedDateString,
+            hasPrevWeek: meetingStore.hasPrevWeek,
+            hasNextWeek: meetingStore.hasNextWeek,
+            calendarDays: meetingStore.calendarDays,
+            timeZone: meetingStore.timeZone,
+            hasPrevSlotPage: meetingStore.hasPrevSlotPage,
+            hasNextSlotPage: meetingStore.hasNextSlotPage,
+            displayedTimeSlotItems: meetingStore.displayedTimeSlotItems,
+            slotPageSize: meetingStore.slotPageSize,
+            layout,
+            locale: meetingStore.rootStore.translationStore.effectiveLocale
+        },
+        handlers: {
+            handleSelectTimeSlot,
+            handleSelectTimeZone,
+            handlePrevWeek: ()=>meetingStore.navigateToPrevWeek(),
+            handleNextWeek: ()=>meetingStore.navigateToNextWeek(),
+            handleSelectDate: (date)=>meetingStore.selectDate(date),
+            handlePrevPage: ()=>meetingStore.navigateToPrevPage(),
+            handleNextPage: ()=>meetingStore.navigateToNextPage()
+        }
+    };
+}
+const WeekViewTopRow = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch"
+    }
+});
+WeekViewTopRow.displayName = "WeekViewTopRow";
+const WeekNavGroup = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        flexShrink: 0
+    }
+});
+WeekNavGroup.displayName = "WeekNavGroup";
+const WeekViewSection = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "$lg",
+        alignSelf: "stretch",
+        position: "relative"
+    }
+});
+WeekViewSection.displayName = "WeekViewSection";
+const DayStripRow = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        alignSelf: "stretch",
+        gap: "$sm"
+    }
+});
+DayStripRow.displayName = "DayStripRow";
+const weekNavButtonStyle = css_css({
+    display: "flex",
+    width: "[24px]",
+    height: "[24px]",
+    flexShrink: 0,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "$transparent",
+    border: "none",
+    cursor: "pointer",
+    padding: "$none",
+    margin: "$none",
+    borderRadius: "[6px]",
+    transition: "[background-color 150ms ease]",
+    "&:is(:hover, :focus-visible):not(:disabled)": {
+        backgroundColor: "[rgba(0, 0, 0, 0.05)]"
+    },
+    "&:disabled": {
+        opacity: "[0.3]",
+        cursor: "not-allowed"
+    }
+});
+const WeekViewDays = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        alignSelf: "stretch",
+        flex: "1",
+        animation: "[q-bookerPaneIn 180ms ease]",
+        "@media (prefers-reduced-motion: reduce)": {
+            animation: "[none]"
+        },
+        // Panel-relative density for the booker rendered as an artifact: that panel can
+        // be only a few hundred pixels wide on a wide desktop viewport, where the 16px
+        // "large" gap leaves the seven day cards too little room to read. Inert on every
+        // other surface — only ArtifactEntryPoint registers a `bookerPanel` container,
+        // and a named container query never matches without one.
+        "@container bookerPanel (max-width: 480px)": {
+            gap: "$xs"
+        }
+    },
+    variants: {
+        layout: {
+            small: {
+                gap: "$xs"
+            },
+            large: {
+                gap: "$lg"
+            }
+        }
+    },
+    defaultVariants: {
+        layout: "large"
+    }
+});
+WeekViewDays.displayName = "WeekViewDays";
+const DayCard = styled("button", {
+    base: {
+        display: "flex",
+        height: "[56px]",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        flex: "1 0 0",
+        borderRadius: "[var(--q-control-border-radius, 8px)]",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "$gray",
+        background: "$white",
+        cursor: "pointer",
+        padding: "$none",
+        transition: "[border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease]",
+        // A day that is already chosen does not lift: the raised state would read as
+        // "not yet chosen, click me", competing with the brand border that says it is.
+        "&:is(:hover, :focus-visible):not(:disabled):not([aria-pressed='true'])": {
+            borderColor: "[#E6E9EC]",
+            transform: "[translateY(-1px)]",
+            boxShadow: "[0 2px 6px rgba(0, 0, 0, 0.06)]"
+        },
+        "&:disabled": {
+            background: "[#FAFAFA]",
+            cursor: "not-allowed"
+        }
+    },
+    variants: {
+        selected: {
+            true: {
+                borderWidth: "1.5px",
+                borderColor: "$primary",
+                // Brand at 5% rather than a token: the tint has to be derived from whatever
+                // colour the customer set, and only the brand's own variable knows it. The
+                // fallback is the one the $primary token carries — without it an unthemed
+                // widget hands color-mix an empty value and loses the whole declaration.
+                background: "[color-mix(in srgb, var(--q-primary-color, #0070d2) 5%, white)]"
+            }
+        }
+    }
+});
+DayCard.displayName = "DayCard";
+const InnerDayCard = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "$xs"
+    }
+});
+InnerDayCard.displayName = "InnerDayCard";
+const DayString = styled("div", {
+    base: {
+        color: "$text.secondary",
+        fontSize: "10px",
+        fontWeight: "$medium",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        textTransform: "uppercase",
+        fontFamily: "$inter"
+    },
+    variants: {
+        disabled: {
+            true: {
+                color: "$gray.dark"
+            }
+        }
+    }
+});
+DayString.displayName = "DayString";
+const DayNumber = styled("div", {
+    base: {
+        color: "$text.dark",
+        fontSize: "16px",
+        fontWeight: "$semibold",
+        lineHeight: "24px",
+        letterSpacing: "-0.12px",
+        fontFamily: "$inter"
+    },
+    variants: {
+        disabled: {
+            true: {
+                color: "$gray.dark"
+            }
+        }
+    }
+});
+DayNumber.displayName = "DayNumber";
+const SlotsSection = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "$lg",
+        alignSelf: "stretch"
+    }
+});
+SlotsSection.displayName = "SlotsSection";
+const SlotsGrid = styled("div", {
+    base: {
+        display: "grid",
+        gap: "$md",
+        alignSelf: "stretch",
+        animation: "[q-bookerPaneIn 180ms ease]",
+        "@media (prefers-reduced-motion: reduce)": {
+            animation: "[none]"
+        },
+        // Four time slots across stop fitting once the artifact panel is this narrow;
+        // drop to the three-across grid the compact layout uses. Same container as
+        // WeekViewDays above, so this is likewise inert on every other surface.
+        "@container bookerPanel (max-width: 480px)": {
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gridTemplateRows: "repeat(4, auto)"
+        }
+    },
+    variants: {
+        layout: {
+            small: {
+                gridTemplateColumns: "repeat(3, 1fr)",
+                gridTemplateRows: "repeat(4, auto)"
+            },
+            large: {
+                gridTemplateColumns: "repeat(4, 1fr)",
+                gridTemplateRows: "repeat(5, auto)"
+            }
+        }
+    },
+    defaultVariants: {
+        layout: "large"
+    }
+});
+SlotsGrid.displayName = "SlotsGrid";
+const SlotButton = styled("button", {
+    base: {
+        height: "[36px]",
+        borderRadius: "[var(--q-control-border-radius, 8px)]",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "$gray",
+        background: "$white.solid",
+        boxShadow: "[0 1px 3px 0 rgba(0, 0, 0, 0.06)]",
+        cursor: "pointer",
+        color: "$text.dark",
+        textAlign: "center",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        transition: "[border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease]",
+        "&:is(:hover, :focus-visible):not([aria-pressed='true'])": {
+            borderColor: "[#E6E9EC]",
+            transform: "[translateY(-1px)]",
+            boxShadow: "[0 2px 6px rgba(0, 0, 0, 0.08)]"
+        },
+        "&:active": {
+            transform: "[scale(0.98)]"
+        }
+    },
+    variants: {
+        selected: {
+            true: {
+                borderWidth: "1.5px",
+                borderColor: "$primary",
+                background: "[color-mix(in srgb, var(--q-primary-color, #0070d2) 6%, white)]",
+                fontWeight: "$semibold"
+            }
+        }
+    }
+});
+SlotButton.displayName = "SlotButton";
+/**
+ * The filler that keeps a sparse day's grid the same height as a full one. It used
+ * to be `visibility: hidden`, which left a ragged half-grid with an unexplained
+ * void beneath it; drawn as a faint empty cell instead, the grid reads as a fixed
+ * board with some of its squares unavailable. Still `aria-hidden` — there is
+ * nothing here to announce either way.
+ */ const PlaceholderSlot = styled("div", {
+    base: {
+        height: "[36px]",
+        borderRadius: "[var(--q-control-border-radius, 8px)]",
+        background: "[#FAFAFA]",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "[rgba(230, 233, 236, 0.55)]"
+    }
+});
+PlaceholderSlot.displayName = "PlaceholderSlot";
+const EmptyStateContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "[100%]",
+        height: "[100%]",
+        padding: "$xl",
+        gap: "$md",
+        textAlign: "center"
+    }
+});
+EmptyStateContainer.displayName = "EmptyStateContainer";
+const EmptyStateTitle = styled("div", {
+    base: {
+        fontSize: "16px",
+        lineHeight: "24px",
+        fontWeight: "$semibold",
+        color: "$text.dark"
+    }
+});
+EmptyStateTitle.displayName = "EmptyStateTitle";
+const EmptyStateDescription = styled("div", {
+    base: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        color: "$text.secondary",
+        maxWidth: "[320px]"
+    }
+});
+EmptyStateDescription.displayName = "EmptyStateDescription";
+
+var MeetingTimeSelector_WeekNavGroup = /* unused export */ undefined;
+var MeetingTimeSelector_WeekViewTopRow = /* unused export */ undefined;
+export { DayCard, DayNumber, DayString, DayStripRow, InnerDayCard, MeetingTimeSelector, MeetingTimeSelector_WeekNavGroup as WeekNavGroup, MeetingTimeSelector_WeekViewTopRow as WeekViewTopRow, SlotButton, SlotsGrid, SlotsSection, WeekViewDays, WeekViewSection, weekNavButtonStyle };