@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/chat/PostCallSurvey.js

@@ -0,0 +1,359 @@
+import { jsxRuntime_module_u, signals_module_useSignal, useComputed } from "../../../../js/multimodal_v2.js";
+import { ThumbsUpIcon, CrossIcon, ThumbsDownIcon } from "../../images/icons.js";
+import "../../styled-system/css/index.js";
+import "../../styled-system/jsx/index.js";
+import { Button } from "../shared/Button.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+
+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 FEEDBACK_MAX_LENGTH = 500;
+const PostCallSurvey = (param)=>{
+    let { rootStore } = param;
+    const store = useComputed(()=>rootStore.postCallSurveyStore.value);
+    const surveyState = useComputed(()=>{
+        var _ref;
+        var _store_value;
+        return (_ref = (_store_value = store.value) == null ? void 0 : _store_value.state.value) != null ? _ref : "hidden";
+    });
+    const { t } = rootStore.translationStore;
+    if (surveyState.value === "feedback") {
+        return /*#__PURE__*/ jsxRuntime_module_u(FeedbackForm, {
+            store: store.value,
+            t: t
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(RatingPrompt, {
+        store: store.value,
+        t: t
+    });
+};
+const RatingPrompt = (param)=>{
+    let { store, t } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(RatingPill, {
+        "data-component-name": "PostCallSurvey.RatingPrompt",
+        role: "region",
+        "aria-label": t("postCallSurvey.howWasTheCall"),
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(PromptText, {
+                children: t("postCallSurvey.howWasTheCall")
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Actions, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(RatingButton, {
+                        variant: "minimal",
+                        size: "sm",
+                        iconOnly: true,
+                        ariaLabel: t("postCallSurvey.thumbsUp"),
+                        "aria-pressed": store.selectedRating.value === "positive",
+                        onClick: ()=>store.ratePositive(),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ThumbsUpIcon, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(RatingButton, {
+                        variant: "minimal",
+                        size: "sm",
+                        iconOnly: true,
+                        ariaLabel: t("postCallSurvey.thumbsDown"),
+                        "aria-pressed": store.selectedRating.value === "negative",
+                        onClick: ()=>store.rateNegative(),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ThumbsDownIcon, {})
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(DismissButton, {
+                        context: "pill",
+                        type: "button",
+                        "aria-label": t("postCallSurvey.dismiss"),
+                        onClick: ()=>store.dismiss(),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                    })
+                ]
+            })
+        ]
+    });
+};
+const FeedbackForm = (param)=>{
+    let { store, t } = param;
+    const feedbackText = signals_module_useSignal("");
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "PostCallSurvey.FeedbackForm",
+        role: "region",
+        "aria-label": t("postCallSurvey.whatWentWrong"),
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(FormHeader, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(FormTitle, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(PromptText, {
+                                children: t("postCallSurvey.whatWentWrong")
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(OptionalLabel, {
+                                children: t("postCallSurvey.optional")
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(DismissButton, {
+                        context: "form",
+                        type: "button",
+                        "aria-label": t("postCallSurvey.dismiss"),
+                        onClick: ()=>store.dismiss(),
+                        children: /*#__PURE__*/ jsxRuntime_module_u(FormCloseIconWrapper, {
+                            children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Textarea, {
+                placeholder: t("postCallSurvey.feedbackPlaceholder"),
+                maxLength: FEEDBACK_MAX_LENGTH,
+                value: feedbackText,
+                onInput: (e)=>{
+                    feedbackText.value = e.target.value;
+                },
+                rows: 3
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(FormFooter, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(DismissText, {
+                        type: "button",
+                        "data-selected": store.selectedFeedbackAction.value === "dismiss",
+                        onClick: ()=>store.dismissFeedback(),
+                        children: t("postCallSurvey.dismiss")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "primary",
+                        size: "xs",
+                        "data-selected": store.selectedFeedbackAction.value === "submit",
+                        onClick: ()=>store.submitFeedback(feedbackText.value),
+                        css: {
+                            height: "[22px]",
+                            fontSize: "[12px]",
+                            "&[data-selected='true']": {
+                                boxShadow: "[inset 0 0 0 1px rgba(0, 0, 0, 0.18)]",
+                                transform: "[scale(1.04)]"
+                            }
+                        },
+                        children: t("postCallSurvey.submit")
+                    })
+                ]
+            })
+        ]
+    });
+};
+const RatingPill = styled("div", {
+    base: {
+        display: "inline-flex",
+        paddingBlock: "[8px]",
+        paddingLeft: "[20px]",
+        paddingRight: "[12px]",
+        alignItems: "center",
+        gap: "[32px]",
+        whiteSpace: "nowrap",
+        borderRadius: "[100px]",
+        border: "[1px solid #E6E9EC]",
+        backgroundColor: "$white.solid",
+        fontFamily: "$inter",
+        boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]"
+    }
+});
+RatingPill.displayName = "PostCallSurvey.RatingPill";
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        padding: "[16px]",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        gap: "[8px]",
+        width: "[100%]",
+        fontFamily: "$inter",
+        borderRadius: "[8px]",
+        border: "[1px solid #E6E9EC]",
+        backgroundColor: "$white.solid",
+        boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]"
+    }
+});
+Container.displayName = "PostCallSurvey.Container";
+const PromptText = styled("span", {
+    base: {
+        color: "[#000]",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontStyle: "normal",
+        fontWeight: "$semibold",
+        lineHeight: "22px"
+    }
+});
+PromptText.displayName = "PostCallSurvey.PromptText";
+const Actions = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "[16px]"
+    }
+});
+Actions.displayName = "PostCallSurvey.Actions";
+const RatingButton = styled(Button, {
+    base: {
+        transition: "[background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease]",
+        "&[aria-pressed='true']": {
+            background: "[#E6E9EC]",
+            boxShadow: "[inset 0 0 0 1px rgba(0, 0, 0, 0.08)]",
+            color: "[#000]",
+            transform: "[scale(1.08)]"
+        }
+    }
+});
+RatingButton.displayName = "PostCallSurvey.RatingButton";
+const DismissButton = styled("button", {
+    base: {
+        background: "$transparent",
+        border: "none",
+        padding: "$2xs",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "[4px]"
+    },
+    variants: {
+        context: {
+            pill: {
+                color: "[#000]",
+                "&:hover": {
+                    background: "[#E6E9EC]"
+                },
+                "& svg": {
+                    width: "[20px]",
+                    height: "[20px]"
+                }
+            },
+            form: {}
+        }
+    }
+});
+DismissButton.displayName = "PostCallSurvey.DismissButton";
+const FormCloseIconWrapper = styled("span", {
+    base: {
+        color: "[#8A9394]",
+        width: "[12px]",
+        height: "[12px]",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "& svg": {
+            width: "[12px]",
+            height: "[12px]"
+        }
+    }
+});
+FormCloseIconWrapper.displayName = "PostCallSurvey.FormCloseIconWrapper";
+const FormHeader = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        alignSelf: "stretch"
+    }
+});
+FormHeader.displayName = "PostCallSurvey.FormHeader";
+const FormTitle = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: "[8px]"
+    }
+});
+FormTitle.displayName = "PostCallSurvey.FormTitle";
+const OptionalLabel = styled("span", {
+    base: {
+        color: "$text.muted",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$normal",
+        lineHeight: "22px"
+    }
+});
+OptionalLabel.displayName = "PostCallSurvey.OptionalLabel";
+const textareaStyles = css_css({
+    display: "flex",
+    height: "[64px]",
+    padding: "[9px 16px 10px 16px]",
+    alignItems: "flex-start",
+    gap: "[10px]",
+    alignSelf: "stretch",
+    width: "[100%]",
+    fontFamily: "$inter",
+    fontSize: "13px",
+    lineHeight: "20px",
+    color: "$text.dark",
+    backgroundColor: "$white.solid",
+    border: "[1px solid rgba(200, 206, 208, 0.93)]",
+    borderRadius: "[4px]",
+    boxShadow: "[0 1px 3px 0 rgba(0, 0, 0, 0.06)]",
+    resize: "none",
+    outline: "none",
+    "&:focus": {
+        borderColor: "$primary"
+    },
+    "&::placeholder": {
+        color: "$text.muted"
+    }
+});
+const Textarea = (props)=>/*#__PURE__*/ jsxRuntime_module_u("textarea", _extends({
+        className: textareaStyles
+    }, props));
+const FormFooter = styled("div", {
+    base: {
+        display: "flex",
+        paddingTop: "[8px]",
+        justifyContent: "flex-end",
+        alignItems: "flex-start",
+        gap: "[16px]",
+        alignSelf: "stretch"
+    }
+});
+FormFooter.displayName = "PostCallSurvey.FormFooter";
+const DismissText = styled("button", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontStyle: "normal",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        color: "[#6E7879]",
+        cursor: "pointer",
+        background: "$transparent",
+        border: "none",
+        padding: "$none",
+        transition: "[color 0.15s ease, font-weight 0.15s ease, transform 0.15s ease]",
+        "&:hover": {
+            color: "$text.dark"
+        },
+        "&[data-selected='true']": {
+            color: "$text.dark",
+            fontWeight: "$semibold",
+            transform: "[scale(1.04)]"
+        }
+    }
+});
+DismissText.displayName = "PostCallSurvey.DismissText";
+
+export { PostCallSurvey };

package/widget/multimodal_v2/components/chat/preview/FieldRequestRenderer.js

@@ -0,0 +1,41 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const FieldRequestRenderer = (param)=>{
+    let { message } = param;
+    // If hideText is true, we don't show the message text
+    const showMessage = !message.hideText && message.text;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "FieldRequestRenderer.Container",
+        children: showMessage && /*#__PURE__*/ jsxRuntime_module_u(MessageText, {
+            children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                text: message.text
+            })
+        })
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        width: "[100%]"
+    }
+});
+Container.displayName = "Container";
+const MessageText = styled("div", {
+    base: {
+        wordBreak: "break-word",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark"
+    }
+});
+MessageText.displayName = "MessageText";
+
+export { FieldRequestRenderer };

package/widget/multimodal_v2/components/chat/preview/PreviewMessageRenderer.js

@@ -0,0 +1,60 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { FieldRequestRenderer } from "./FieldRequestRenderer.js";
+import { SharedOfferRenderer } from "./SharedOfferRenderer.js";
+import { TextRenderer } from "./TextRenderer.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+const MESSAGE_RENDERERS = {
+    text: TextRenderer,
+    shared_offer: SharedOfferRenderer,
+    field_request: FieldRequestRenderer
+};
+const PreviewMessageRenderer = (param)=>{
+    let { rootStore } = param;
+    const message = rootStore.messages.preview.value;
+    const horizontal = rootStore.displayMode.collapsedCenter;
+    if (!message) return null;
+    const Renderer = MESSAGE_RENDERERS[message.type];
+    if (!Renderer) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(ContentWrapper, {
+        "data-component-name": "PreviewMessageRenderer.ContentWrapper",
+        children: /*#__PURE__*/ jsxRuntime_module_u(MessageContent, {
+            "data-component-name": "PreviewMessageRenderer.MessageContent",
+            horizontal: horizontal,
+            children: /*#__PURE__*/ jsxRuntime_module_u(Renderer, {
+                rootStore: rootStore,
+                message: message
+            })
+        })
+    });
+};
+const ContentWrapper = styled("div", {
+    base: {
+        display: "flex",
+        width: "[auto]"
+    }
+});
+ContentWrapper.displayName = "ContentWrapper";
+const MessageContent = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$lg"
+    },
+    variants: {
+        horizontal: {
+            true: {
+                flexDirection: "row"
+            }
+        }
+    }
+});
+MessageContent.displayName = "MessageContent";
+
+export { PreviewMessageRenderer };

package/widget/multimodal_v2/components/chat/preview/SharedOfferRenderer.js

@@ -0,0 +1,143 @@
+import { jsxRuntime_module_u, preact_module_k } from "../../../../../js/multimodal_v2.js";
+import { Persisted } from "../../helpers/Persisted.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+
+
+
+const SharedOfferRenderer = (param)=>{
+    let { rootStore, message } = param;
+    var _offerContent_variation;
+    const { t } = rootStore.translationStore;
+    const { text, offerContent } = message;
+    const textContent = text || (offerContent == null ? void 0 : (_offerContent_variation = offerContent.variation) == null ? void 0 : _offerContent_variation.textContent);
+    if (!textContent) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(MessageText, {
+                children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                    text: textContent
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(OfferContent, {
+                message: message,
+                rootStore: rootStore,
+                offerAlt: t("chat.offer")
+            })
+        ]
+    });
+};
+const OfferContent = (param)=>{
+    let { message, rootStore, offerAlt } = param;
+    const { id, messengerImageUrl, buttonUrl, headlineText } = message;
+    if (!buttonUrl || !headlineText) {
+        return null;
+    }
+    if (rootStore.displayMode.collapsedCenter.value) {
+        return /*#__PURE__*/ jsxRuntime_module_u(OfferImage, {
+            "data-component-name": "SharedOfferRenderer.OfferImage",
+            elementType: "img",
+            id: "shared-offer-image-" + id,
+            src: messengerImageUrl,
+            alt: offerAlt
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime_module_u(SharedOfferCard, {
+        "data-component-name": "SharedOfferRenderer.SharedOfferCard",
+        href: buttonUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        tabIndex: 0,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(OfferImage, {
+                "data-component-name": "SharedOfferRenderer.OfferImage",
+                elementType: "img",
+                id: "shared-offer-image-" + id,
+                src: messengerImageUrl,
+                alt: offerAlt
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(SharedOfferContent, {
+                "data-component-name": "SharedOfferRenderer.SharedOfferContent",
+                children: /*#__PURE__*/ jsxRuntime_module_u(SharedOfferTitle, {
+                    "data-component-name": "SharedOfferRenderer.SharedOfferTitle",
+                    children: headlineText
+                })
+            })
+        ]
+    });
+};
+const SharedOfferCard = styled("a", {
+    base: {
+        display: "flex",
+        borderRadius: "[8px]",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px",
+        backgroundColor: "$white.solid",
+        cursor: "pointer",
+        overflow: "hidden",
+        transition: "all 0.2s ease",
+        textDecoration: "none",
+        height: "[72px]",
+        "&:hover": {
+            transform: "translateY(-1px)"
+        },
+        "&:focus": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        }
+    }
+});
+SharedOfferCard.displayName = "SharedOfferCard";
+const SharedOfferContent = styled("div", {
+    base: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        paddingInline: "$md",
+        paddingBlock: "$sm",
+        minWidth: "[0]"
+    }
+});
+SharedOfferContent.displayName = "SharedOfferContent";
+const SharedOfferTitle = styled("div", {
+    base: {
+        fontSize: "13px",
+        fontWeight: "$semibold",
+        lineHeight: "18px",
+        color: "$text.dark",
+        lineClamp: 3,
+        overflow: "hidden",
+        textOverflow: "ellipsis"
+    }
+});
+SharedOfferTitle.displayName = "SharedOfferTitle";
+const OfferImage = styled(Persisted, {
+    base: {
+        objectFit: "cover",
+        width: "[100px]",
+        height: "[72px]",
+        flexShrink: 0,
+        display: "none",
+        "&[src]:not([src=''])": {
+            display: "block"
+        }
+    }
+});
+OfferImage.displayName = "OfferImage";
+const MessageText = styled("div", {
+    base: {
+        wordBreak: "break-word",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark"
+    }
+});
+MessageText.displayName = "MessageText";
+
+export { SharedOfferRenderer };

package/widget/multimodal_v2/components/chat/preview/TextRenderer.js

@@ -0,0 +1,27 @@
+import { jsxRuntime_module_u } from "../../../../../js/multimodal_v2.js";
+import "../../../styled-system/jsx/index.js";
+import { RichText } from "../../helpers/RichText.js";
+import { styled } from "../../../styled-system/jsx/factory.js";
+
+
+
+
+const TextRenderer = (param)=>{
+    let { message } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(MessageText, {
+        children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+            text: message.text
+        })
+    });
+};
+const MessageText = styled("div", {
+    base: {
+        wordBreak: "break-word",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark"
+    }
+});
+MessageText.displayName = "MessageText";
+
+export { TextRenderer };