@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,357 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_T, hooks_module_y, hooks_module_d, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { ChevronUpIcon, ChevronDownIcon } from "../../images/icons.js";
+import "../../styled-system/css/index.js";
+import "../../styled-system/jsx/index.js";
+import { NavigationButtons } from "./NavigationButtons.js";
+import "../../../utils/native_globals.js";
+import { cx } from "../../styled-system/css/cx.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* provided dependency */ var __nativeDocumentAddEventListener = __webpack_require__(68034).Qj;
+/* provided dependency */ var __nativeDocumentRemoveEventListener = __webpack_require__(68034).LA;
+/** @jsxImportSource preact */ function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+
+
+
+
+
+const TimeSlotHeader = (param)=>{
+    let { timeZones, timeZone, onSelectTimeZone, hasPrev, hasNext, onPrevPage, onNextPage, selectTimezoneLabel, filterTimezonesLabel, previousTimesLabel, nextTimesLabel, layout = "large" } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "TimeSlotHeader.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(TimeZoneDropdown, {
+                timeZones: timeZones,
+                timeZone: timeZone,
+                onSelectTimeZone: onSelectTimeZone,
+                selectTimezoneLabel: selectTimezoneLabel,
+                filterTimezonesLabel: filterTimezonesLabel,
+                layout: layout
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(NavigationButtons, {
+                hasPrev: hasPrev,
+                hasNext: hasNext,
+                onPrevious: onPrevPage,
+                onNext: onNextPage,
+                prevAriaLabel: previousTimesLabel,
+                nextAriaLabel: nextTimesLabel
+            })
+        ]
+    });
+};
+const TimeZoneDropdown = (param)=>{
+    let { timeZones, timeZone, onSelectTimeZone, selectTimezoneLabel, filterTimezonesLabel, layout } = param;
+    var _ref;
+    var _timeZones_find;
+    const [isOpen, setIsOpen] = hooks_module_d(false);
+    const [filter, setFilter] = hooks_module_d("");
+    const [focusedIndex, setFocusedIndex] = hooks_module_d(-1);
+    const wrapperRef = hooks_module_A(null);
+    const inputRef = hooks_module_A(null);
+    const listRef = hooks_module_A(null);
+    const filtered = hooks_module_T(()=>{
+        setFocusedIndex(-1);
+        if (!filter.trim()) return timeZones;
+        const q = filter.toLowerCase();
+        return timeZones.filter((tz)=>tz.label.toLowerCase().includes(q));
+    }, [
+        timeZones,
+        filter
+    ]);
+    const openDropdown = ()=>{
+        setFilter("");
+        setFocusedIndex(-1);
+        setIsOpen(true);
+    };
+    const closeDropdown = ()=>setIsOpen(false);
+    hooks_module_y(()=>{
+        if (isOpen) {
+            // Focus the filter input when dropdown opens
+            requestAnimationFrame(()=>{
+                var _inputRef_current;
+                return (_inputRef_current = inputRef.current) == null ? void 0 : _inputRef_current.focus();
+            });
+        }
+    }, [
+        isOpen
+    ]);
+    hooks_module_y(()=>{
+        if (focusedIndex < 0 || !listRef.current) return;
+        const item = listRef.current.children[focusedIndex];
+        item == null ? void 0 : item.scrollIntoView({
+            block: "nearest"
+        });
+    }, [
+        focusedIndex
+    ]);
+    hooks_module_y(()=>{
+        if (!isOpen) return;
+        const handleMouseDown = (e)=>{
+            if (wrapperRef.current && !e.composedPath().includes(wrapperRef.current)) {
+                closeDropdown();
+            }
+        };
+        const handleKeyDown = (e)=>{
+            if (e.key === "Escape") closeDropdown();
+        };
+        __nativeDocumentAddEventListener("mousedown", handleMouseDown);
+        __nativeDocumentAddEventListener("keydown", handleKeyDown);
+        return ()=>{
+            __nativeDocumentRemoveEventListener("mousedown", handleMouseDown);
+            __nativeDocumentRemoveEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        isOpen
+    ]);
+    const handleSelect = (value)=>{
+        onSelectTimeZone(value);
+        closeDropdown();
+    };
+    const handleFilterKeyDown = (e)=>{
+        if (e.key === "ArrowDown") {
+            // Prevent arrow keys from moving the text cursor in the input
+            e.preventDefault();
+            setFocusedIndex((prev)=>Math.min(prev + 1, filtered.length - 1));
+        } else if (e.key === "ArrowUp") {
+            // Prevent arrow keys from moving the text cursor in the input
+            e.preventDefault();
+            setFocusedIndex((prev)=>Math.max(prev - 1, -1));
+        } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filtered.length) {
+            // Prevent form submission when selecting via keyboard
+            e.preventDefault();
+            handleSelect(filtered[focusedIndex].value);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        ref: wrapperRef,
+        className: tzDropdownWrapperStyle,
+        "data-component-name": "TimeSlotHeader.TimeZoneDropdown",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                type: "button",
+                className: tzTriggerStyle,
+                onClick: isOpen ? closeDropdown : openDropdown,
+                "aria-label": selectTimezoneLabel,
+                "aria-expanded": isOpen,
+                "data-component-name": "TimeSlotHeader.TimeZoneTrigger",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: layout === "small" ? tzTriggerLabelSmallStyle : tzTriggerLabelLargeStyle,
+                        children: (_ref = (_timeZones_find = timeZones.find((tz)=>tz.value === timeZone.value)) == null ? void 0 : _timeZones_find.label) != null ? _ref : timeZone.value
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: tzTriggerIconStyle,
+                        "aria-hidden": "true",
+                        children: isOpen ? /*#__PURE__*/ jsxRuntime_module_u(ChevronUpIcon, {}) : /*#__PURE__*/ jsxRuntime_module_u(ChevronDownIcon, {})
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: layout === "small" ? tzPanelSmallStyle : tzPanelLargeStyle,
+                "data-component-name": "TimeSlotHeader.TimeZonePanel",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: tzFilterRowStyle,
+                        children: /*#__PURE__*/ jsxRuntime_module_u("input", {
+                            ref: inputRef,
+                            type: "text",
+                            className: tzFilterInputStyle,
+                            value: filter,
+                            onInput: (e)=>setFilter(e.target.value),
+                            onKeyDown: handleFilterKeyDown,
+                            placeholder: "" + filterTimezonesLabel + "…",
+                            "aria-label": filterTimezonesLabel
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("ul", {
+                        ref: listRef,
+                        className: tzListStyle,
+                        role: "listbox",
+                        "aria-label": selectTimezoneLabel,
+                        children: [
+                            filtered.map((tz, i)=>/*#__PURE__*/ jsxRuntime_module_u("li", {
+                                    role: "option",
+                                    "aria-selected": tz.value === timeZone.value,
+                                    children: /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                        type: "button",
+                                        className: cx(tzOptionStyle, tz.value === timeZone.value ? tzOptionSelectedStyle : null, i === focusedIndex ? tzOptionFocusedStyle : null),
+                                        onClick: ()=>handleSelect(tz.value),
+                                        "data-component-name": "TimeSlotHeader.TimeZoneOption",
+                                        children: tz.label
+                                    })
+                                }, tz.value)),
+                            filtered.length === 0 && /*#__PURE__*/ jsxRuntime_module_u("li", {
+                                className: tzNoResultsStyle,
+                                children: "No timezones match"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch",
+        gap: "$md"
+    }
+});
+Container.displayName = "Container";
+const tzDropdownWrapperStyle = css_css({
+    position: "relative",
+    display: "inline-block"
+});
+const tzTriggerStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    gap: "$xs",
+    paddingBlock: "[4px]",
+    paddingInline: "[0]",
+    border: "none",
+    background: "$transparent",
+    cursor: "pointer",
+    fontFamily: "$inter",
+    // Secondary size, so the month title above it owns the section: this is a
+    // control for a setting most visitors never change, not a heading.
+    fontSize: "12px",
+    lineHeight: "18px",
+    color: "$text.secondary",
+    fontWeight: "$normal",
+    "&:hover": {
+        color: "$text.dark"
+    },
+    "&:focus": {
+        outline: "none"
+    }
+});
+const tzTriggerLabelBaseStyle = {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+};
+const tzTriggerLabelLargeStyle = css_css(_extends({}, tzTriggerLabelBaseStyle, {
+    maxWidth: "[280px]"
+}));
+const tzTriggerLabelSmallStyle = css_css(_extends({}, tzTriggerLabelBaseStyle, {
+    maxWidth: "[170px]"
+}));
+const tzTriggerIconStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    color: "$text.muted",
+    "& svg": {
+        width: "[14px]",
+        height: "[14px]"
+    }
+});
+const tzPanelBaseStyles = {
+    position: "absolute",
+    top: "[calc(100%+4px)]",
+    zIndex: "[9999]",
+    backgroundColor: "[white]",
+    borderRadius: "[8px]",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "$gray",
+    boxShadow: "[0_8px_24px_rgba(0,0,0,0.12)]",
+    overflow: "hidden"
+};
+// Large: left-aligned, wide enough to show full timezone names
+const tzPanelLargeStyle = css_css(_extends({}, tzPanelBaseStyles, {
+    left: "[0]",
+    minWidth: "[360px]"
+}));
+// Small: left-aligned with narrower min-width to fit inside the messenger container
+const tzPanelSmallStyle = css_css(_extends({}, tzPanelBaseStyles, {
+    left: "[0]",
+    minWidth: "[220px]"
+}));
+const tzFilterRowStyle = css_css({
+    paddingBlock: "[8px]",
+    paddingInline: "[12px]",
+    borderBottomWidth: "1px",
+    borderBottomStyle: "solid",
+    borderBottomColor: "$gray"
+});
+const tzFilterInputStyle = css_css({
+    width: "[100%]",
+    paddingBlock: "[4px]",
+    paddingInline: "[8px]",
+    border: "[1px solid token(colors.$gray)]",
+    borderRadius: "[8px]",
+    fontFamily: "$inter",
+    fontSize: "12px",
+    lineHeight: "18px",
+    color: "$text.dark",
+    outline: "none",
+    "&:focus": {
+        borderColor: "$primary"
+    }
+});
+const tzListStyle = css_css({
+    listStyle: "none",
+    margin: "[0]",
+    paddingBlock: "[4px]",
+    paddingInline: "[0]",
+    maxHeight: "[200px]",
+    overflowY: "auto"
+});
+const tzOptionStyle = css_css({
+    display: "block",
+    width: "[100%]",
+    textAlign: "left",
+    paddingBlock: "[6px]",
+    paddingInline: "[12px]",
+    border: "none",
+    background: "$transparent",
+    fontFamily: "$inter",
+    fontSize: "12px",
+    lineHeight: "18px",
+    color: "$text.dark",
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    "&:hover": {
+        backgroundColor: "[rgba(0,0,0,0.05)]"
+    }
+});
+const tzOptionSelectedStyle = css_css({
+    color: "$primary",
+    fontWeight: "$semibold"
+});
+const tzOptionFocusedStyle = css_css({
+    backgroundColor: "[rgba(0,0,0,0.08)]"
+});
+const tzNoResultsStyle = css_css({
+    paddingBlock: "[8px]",
+    paddingInline: "[12px]",
+    fontFamily: "$inter",
+    fontSize: "12px",
+    lineHeight: "18px",
+    color: "$text.secondary"
+});
+
+export { TimeSlotHeader };

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

@@ -0,0 +1,20 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { MonthDatePicker } from "./MonthDatePicker.js";
+
+/** @jsxImportSource preact */ 
+
+const WeekViewHeader = (param)=>{
+    let { monthTitle, minDate, maxDate, availableDateStrings, selectedDateString, onSelectDate, locale, openDatePickerLabel } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(MonthDatePicker, {
+        monthTitle: monthTitle,
+        minDate: minDate,
+        maxDate: maxDate,
+        availableDateStrings: availableDateStrings,
+        selectedDateString: selectedDateString,
+        onSelectDate: onSelectDate,
+        locale: locale,
+        openDatePickerLabel: openDatePickerLabel
+    });
+};
+
+export { WeekViewHeader };

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

@@ -0,0 +1,7 @@
+import { TIME_ZONES } from "../../../../constants.generated.js";
+
+
+// Sort timezones alphabetically by label for better UX
+const AVAILABLE_TIME_ZONES = TIME_ZONES.slice(0).sort((tz1, tz2)=>tz1.label.localeCompare(tz2.label));
+
+export { AVAILABLE_TIME_ZONES };

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

@@ -0,0 +1,47 @@
+import { jsxRuntime_module_u, hooks_module_y } from "../../../../js/multimodal_v2.js";
+import { Step as meeting_store_Step } from "../../stores/meeting_store.js";
+import { MeetingOfferEmailStep } from "./MeetingOfferEmailStep.js";
+import { MeetingOfferSelectionStep } from "./MeetingOfferSelectionStep.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+const MeetingBooker = (param)=>{
+    let { rootStore, context = "artifact", closeOnBooked = true } = param;
+    var _ref;
+    var _meetingStore_value, _meetingStore_value1;
+    const { meetingStore, translationStore: { t } } = rootStore;
+    const booked = (_ref = (_meetingStore_value = meetingStore.value) == null ? void 0 : _meetingStore_value.booked.value) != null ? _ref : false;
+    hooks_module_y(()=>{
+        if (booked && closeOnBooked) {
+            var _meetingStore_value;
+            (_meetingStore_value = meetingStore.value) == null ? void 0 : _meetingStore_value.close();
+        }
+    }, [
+        booked,
+        closeOnBooked,
+        meetingStore.value
+    ]);
+    if (!((_meetingStore_value1 = meetingStore.value) == null ? void 0 : _meetingStore_value1.activeOfferMessage.value)) {
+        return null;
+    }
+    const StepComponent = StepComponents[meetingStore.value.step.value];
+    // Renders the step as its own root: each step already stretches to its container
+    // and lays its content out in a column, so a wrapper here would only be a second
+    // node doing the same thing inside whichever card the surface put around it.
+    return /*#__PURE__*/ jsxRuntime_module_u(StepComponent, {
+        meetingStore: meetingStore.value,
+        message: meetingStore.value.activeOfferMessage.value,
+        t: t,
+        context: context
+    });
+};
+const StepComponents = {
+    [meeting_store_Step.Select]: MeetingOfferSelectionStep,
+    [meeting_store_Step.Email]: MeetingOfferEmailStep
+};
+/* export default */ const meetings = (MeetingBooker);
+
+export default meetings;