@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,99 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { formatTime, formatDate } from "./utils.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+const MeetingDetailsCard = (param)=>{
+    let { timeSlot, timeZone, timeLabel, dateLabel, locale } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "MeetingDetailsCard.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(Item, {
+                "data-component-name": "MeetingDetailsCard.Item",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(Title, {
+                        "data-component-name": "MeetingDetailsCard.Title",
+                        children: "Time"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Value, {
+                        "data-component-name": "MeetingDetailsCard.Value",
+                        children: formatTime(timeSlot.startsAt, timeZone, locale)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Item, {
+                "data-component-name": "MeetingDetailsCard.Item",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(Title, {
+                        "data-component-name": "MeetingDetailsCard.Title",
+                        children: "Date"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Value, {
+                        "data-component-name": "MeetingDetailsCard.Value",
+                        children: formatDate(timeSlot.startsAt, timeZone, locale)
+                    })
+                ]
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        padding: "[16px]",
+        alignItems: "flex-start",
+        gap: "$md",
+        alignSelf: "stretch",
+        borderRadius: "[8px]",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "[#E6E9EC]",
+        background: "[#FAFAFA]"
+    }
+});
+Container.displayName = "Container";
+const Item = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "$none",
+        flex: "1 0 0"
+    }
+});
+Item.displayName = "Item";
+// "Time" and "Date" name the values under them; at the same size and weight as a
+// third body line they read as content in their own right. Dropped to the micro
+// label of the ramp so the pair reads as a field and its value.
+const Title = styled("div", {
+    base: {
+        alignSelf: "stretch",
+        color: "$text.secondary",
+        fontFamily: "$inter",
+        fontSize: "10px",
+        fontStyle: "normal",
+        fontWeight: "$medium",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        textTransform: "uppercase"
+    }
+});
+Title.displayName = "Title";
+const Value = styled("div", {
+    base: {
+        alignSelf: "stretch",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: "$semibold",
+        lineHeight: "24px"
+    }
+});
+Value.displayName = "Value";
+
+export { MeetingDetailsCard };

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

@@ -0,0 +1,62 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { AlertIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const MeetingErrorBanner = (param)=>{
+    let { errorMessage } = param;
+    const error = errorMessage.value;
+    if (!error) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "MeetingErrorBanner.Container",
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(IconWrapper, {
+                "data-component-name": "MeetingErrorBanner.IconWrapper",
+                children: /*#__PURE__*/ jsxRuntime_module_u(AlertIcon, {})
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Message, {
+                "data-component-name": "MeetingErrorBanner.Message",
+                children: error
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        paddingBlock: "$xs",
+        paddingInline: "$md",
+        borderRadius: "[4px]",
+        backgroundColor: "[rgba(255, 133, 88, 0.15)]",
+        width: "[100%]"
+    }
+});
+Container.displayName = "Container";
+const IconWrapper = styled("span", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "[#D97706]",
+        flexShrink: 0
+    }
+});
+IconWrapper.displayName = "IconWrapper";
+const Message = styled("span", {
+    base: {
+        fontSize: "12px",
+        lineHeight: "18px",
+        color: "[#92400E]",
+        fontWeight: "$medium"
+    }
+});
+Message.displayName = "Message";
+
+export { MeetingErrorBanner };

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

@@ -0,0 +1,239 @@
+import { jsxRuntime_module_u, preact_module_k, utils_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { isMobile } from "../../utils/media_queries.js";
+import { Button } from "../shared/Button.js";
+import { MeetingAdditionalAttendees } from "./MeetingAdditionalAttendees.js";
+import { MeetingDetailsCard } from "./MeetingDetailsCard.js";
+import { MeetingErrorBanner } from "./MeetingErrorBanner.js";
+import { MeetingFooterBar, MeetingFooterActions, MeetingFooterDuration } from "./MeetingOfferFooter.js";
+import { StepRoot, StepContent } from "./MeetingStepShell.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+const MeetingOfferEmailStep = (props)=>{
+    const { state, handlers } = useEmailStep(props);
+    const { message, meetingStore, t, context = "artifact" } = props;
+    const { showAdditionalAttendees } = message;
+    // Only read selectedTimeSlot once for the early return
+    if (!state.selectedTimeSlot) {
+        return null;
+    }
+    // On a phone the artifact's card draws a header naming the step in place of its
+    // summary rail (see ArtifactEntryPoint), so this step neither repeats that title nor
+    // leaves the chosen slot to a rail that is not there. Read from the viewport rather
+    // than passed down, so the two decide it the same way for the same reason.
+    const mobileHeader = context === "artifact" && isMobile.value;
+    return /*#__PURE__*/ jsxRuntime_module_u(StepRoot, {
+        card: context === "lightbox" ? "outlined" : "none",
+        "data-component-name": "MeetingOfferEmailStep.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(StepContent, {
+                "data-component-name": "MeetingOfferEmailStep.StepContent",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingErrorBanner, {
+                        errorMessage: meetingStore.error
+                    }),
+                    !mobileHeader && /*#__PURE__*/ jsxRuntime_module_u(EmailTitle, {
+                        "data-component-name": "MeetingOfferEmailStep.EmailTitle",
+                        children: t("meetings.confirmMeetingTime")
+                    }),
+                    (context === "lightbox" || mobileHeader) && /*#__PURE__*/ jsxRuntime_module_u(MeetingDetailsCard, {
+                        timeSlot: state.selectedTimeSlot,
+                        timeZone: state.timeZone,
+                        timeLabel: t("meetings.time"),
+                        dateLabel: t("meetings.date"),
+                        locale: state.locale
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(EmailInputSection, {
+                        "data-component-name": "MeetingOfferEmailStep.EmailInputSection",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(EmailInputLabel, {
+                                "data-component-name": "MeetingOfferEmailStep.EmailInputLabel",
+                                htmlFor: "meeting-email-input",
+                                children: t("meetings.whereToSendInvite")
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(EmailInput, {
+                                "data-component-name": "MeetingOfferEmailStep.EmailInput",
+                                id: "meeting-email-input",
+                                type: "email",
+                                placeholder: "name@company.com",
+                                value: state.emailSignal,
+                                onInput: handlers.handleEmailChange,
+                                onKeyDown: handlers.handleKeyDown,
+                                "aria-label": t("meetings.emailForInvite")
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                                when: state.errorSignal,
+                                children: (error)=>/*#__PURE__*/ jsxRuntime_module_u(ErrorText, {
+                                        "data-component-name": "MeetingOfferEmailStep.ErrorText",
+                                        children: error
+                                    })
+                            })
+                        ]
+                    }),
+                    showAdditionalAttendees && /*#__PURE__*/ jsxRuntime_module_u(MeetingAdditionalAttendees, {
+                        meetingStore: meetingStore,
+                        t: t
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterBar, {
+                "data-component-name": "MeetingOfferEmailStep.EmailFooter",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterDuration, {
+                        durationLabel: meetingStore.durationLabel
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterActions, {
+                        "data-component-name": "MeetingOfferEmailStep.Actions",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                variant: "tertiary",
+                                size: "sm",
+                                onClick: handlers.handleBack,
+                                children: t("meetings.back")
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                variant: "primary",
+                                size: "md",
+                                onClick: handlers.handleConfirm,
+                                disabled: state.submitDisabled,
+                                children: /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                                    when: state.loadingSignal,
+                                    fallback: /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                                        children: t("meetings.confirm")
+                                    }),
+                                    children: ()=>/*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                                            children: t("meetings.confirming")
+                                        })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+function useEmailStep(param) {
+    let { meetingStore } = param;
+    // Read infrequent values at the top (these rarely change)
+    const selectedTimeSlot = meetingStore.selectedTimeSlot.value;
+    const timeZone = meetingStore.timeZone.value;
+    const locale = meetingStore.rootStore.translationStore.effectiveLocale.value;
+    // Handlers - simple wrappers around store actions
+    const handleEmailChange = (e)=>{
+        const target = e.currentTarget;
+        meetingStore.setEmail(target.value);
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter") {
+            meetingStore.confirmBooking();
+        }
+    };
+    return {
+        state: {
+            selectedTimeSlot,
+            timeZone,
+            locale,
+            emailSignal: meetingStore.email,
+            loadingSignal: meetingStore.loading,
+            errorSignal: meetingStore.error,
+            submitDisabled: meetingStore.submitDisabled
+        },
+        handlers: {
+            handleEmailChange,
+            handleKeyDown,
+            handleBack: ()=>meetingStore.gotoPrevStep(),
+            handleConfirm: ()=>meetingStore.confirmBooking()
+        }
+    };
+}
+const EmailTitle = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$md",
+        alignSelf: "stretch",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        // A step title, at the size the ramp gives titles. At 14px it was the same
+        // size as the field label under it, so the step read as two labels.
+        fontSize: "16px",
+        fontStyle: "normal",
+        fontWeight: "$semibold",
+        lineHeight: "24px"
+    }
+});
+EmailTitle.displayName = "EmailTitle";
+const EmailInputSection = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "$sm",
+        alignSelf: "stretch"
+    }
+});
+EmailInputSection.displayName = "EmailInputSection";
+const EmailInputLabel = styled("label", {
+    base: {
+        alignSelf: "stretch",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: "$semibold",
+        lineHeight: "22px"
+    }
+});
+EmailInputLabel.displayName = "EmailInputLabel";
+const EmailInput = styled("input", {
+    base: {
+        display: "flex",
+        height: "[40px]",
+        paddingTop: "$sm1",
+        paddingRight: "$lg",
+        paddingBottom: "$sm2",
+        paddingLeft: "$lg",
+        alignItems: "center",
+        gap: "$sm2",
+        alignSelf: "stretch",
+        borderRadius: "[8px]",
+        background: "$white.solid",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        border: "none",
+        outline: "1px solid rgba(200, 206, 208, 0.93)",
+        outlineOffset: "-1px",
+        "&:focus": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        }
+    }
+});
+EmailInput.displayName = "EmailInput";
+const ErrorText = styled("div", {
+    base: {
+        color: "$text.error",
+        fontSize: "14px",
+        textAlign: "center",
+        fontFamily: "$inter",
+        fontStyle: "normal"
+    }
+});
+ErrorText.displayName = "ErrorText";
+
+export { MeetingOfferEmailStep };

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

@@ -0,0 +1,104 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { ClockIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { Button } from "../shared/Button.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * The selection step's action bar. The email step draws its own actions but wears
+ * the same bar, composed from the three pieces exported below.
+ */ const MeetingOfferFooter = (param)=>{
+    let { continueButtonDisabled, durationLabel, gotoNextStep, onCancel, t } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterBar, {
+        "data-component-name": "MeetingOfferFooter.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterDuration, {
+                durationLabel: durationLabel
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MeetingFooterActions, {
+                "data-component-name": "MeetingOfferFooter.Actions",
+                children: [
+                    onCancel && /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "tertiary",
+                        size: "sm",
+                        onClick: onCancel,
+                        children: t("meetings.cancel")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "primary",
+                        size: "md",
+                        onClick: gotoNextStep,
+                        disabled: continueButtonDisabled,
+                        children: t("meetings.continue")
+                    })
+                ]
+            })
+        ]
+    });
+};
+const MeetingFooterDuration = (param)=>{
+    let { durationLabel } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(Duration, {
+        "data-component-name": "MeetingOfferFooter.Duration",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(ClockIcon, {}),
+            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                children: durationLabel
+            })
+        ]
+    });
+};
+/**
+ * The dialog's action bar: pinned below StepContent rather than flowing after it,
+ * which is what puts the actions on the card's bottom edge instead of leaving dead
+ * space under a short calendar. `flexShrink: 0` keeps it there when the content
+ * above wants more room than the card has.
+ */ const MeetingFooterBar = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexShrink: 0,
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: "[#E6E9EC]",
+        background: "$white.solid",
+        paddingBlock: "[14px]",
+        paddingInline: "[24px]",
+        // Tightened on a phone in step with StepContent above it, so the bar's gutters
+        // stay flush with the fields'.
+        _mobile: {
+            paddingBlock: "[12px]",
+            paddingInline: "[16px]"
+        }
+    }
+});
+MeetingFooterBar.displayName = "MeetingFooterBar";
+const Duration = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        color: "$text.secondary",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$normal",
+        lineHeight: "18px"
+    }
+});
+Duration.displayName = "Duration";
+const MeetingFooterActions = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm"
+    }
+});
+MeetingFooterActions.displayName = "MeetingFooterActions";
+
+export { MeetingFooterActions, MeetingFooterBar, MeetingFooterDuration, MeetingOfferFooter };

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

@@ -0,0 +1,60 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { MeetingAdditionalAttendees } from "./MeetingAdditionalAttendees.js";
+import { MeetingErrorBanner } from "./MeetingErrorBanner.js";
+import { MeetingOfferFooter } from "./MeetingOfferFooter.js";
+import { StepRoot, StepContent } from "./MeetingStepShell.js";
+import { MeetingTimeSelector } from "./MeetingTimeSelector.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+const MeetingOfferSelectionStep = (props)=>{
+    const { meetingStore, message, t, context = "artifact" } = props;
+    const hasAvailableSlots = Boolean(message.availableSlots && message.availableSlots.length > 0);
+    // The lightbox already knows the visitor's email from its gather step, so
+    // confirming straight from the selection step spares it a step that would only
+    // echo that email back. The artifact always walks the two steps, even when the
+    // offer arrives with an invite email, so the visitor gets a chance to see and
+    // change the address the invite is going to.
+    const canConfirmFromSelection = context === "lightbox" && meetingStore.email.value.trim().length > 0;
+    // Cancel on every surface that walks the two steps. `close()` routes through
+    // rootStore.closeMeetingBooker(), which tears down the artifact overlay. The
+    // lightbox is left out: it books from this step, so the only thing to back out of
+    // is the whole element conversation, which its own frame owns.
+    const onCancel = context === "lightbox" ? undefined : ()=>meetingStore.close();
+    return /*#__PURE__*/ jsxRuntime_module_u(StepRoot, {
+        "data-component-name": "MeetingOfferSelectionStep.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(StepContent, {
+                "data-component-name": "MeetingOfferSelectionStep.StepContent",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingErrorBanner, {
+                        errorMessage: meetingStore.error
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(MeetingTimeSelector, {
+                        meetingStore: meetingStore,
+                        hasAvailableSlots: hasAvailableSlots,
+                        t: t,
+                        context: context
+                    }),
+                    context === "lightbox" && (message.showAdditionalAttendees || Boolean(message.calendarEventInviteEmail)) && /*#__PURE__*/ jsxRuntime_module_u(MeetingAdditionalAttendees, {
+                        meetingStore: meetingStore,
+                        t: t
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MeetingOfferFooter, {
+                continueButtonDisabled: canConfirmFromSelection ? meetingStore.submitDisabled.value : !meetingStore.selectedTimeSlot.value,
+                durationLabel: meetingStore.durationLabel,
+                gotoNextStep: canConfirmFromSelection ? ()=>meetingStore.confirmBooking() : ()=>meetingStore.gotoNextStep(),
+                onCancel: onCancel,
+                t: t
+            })
+        ]
+    });
+};
+
+export { MeetingOfferSelectionStep };