@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/qualified_form/qualified_form_api.js

@@ -0,0 +1,471 @@
+import { __webpack_require__ } from "../../js/runtime.js";
+import { isValidFullName } from "../../components/helpers/entriesStringValidations.js";
+import { isIn } from "../../src/utils.js";
+import { QUALIFIED_FORM_CONVERSATION_ALLOWED_MESSAGES } from "./constants.js";
+import { QualifiedFormAction } from "./qualified_form_action.js";
+import { esm_browser_v4, _extends } from "../../js/4101.js";
+import { QualifiedFormActionOrchestrator } from "./qualified_form_action_orchestrator.js";
+import { validateEmail } from "../../src/validation.js.js";
+import "../utils/native_globals.js";
+import { isValidPhoneNumber, formatPhoneNumber } from "./phone_utils.js";
+
+/* provided dependency */ var qualified_form_api_setTimeout = __webpack_require__(68034).pS;
+
+
+
+
+
+
+
+
+
+var qualified_form_api_QualifiedFormSource = /*#__PURE__*/ function(QualifiedFormSource) {
+    QualifiedFormSource["OFFERS"] = "offers";
+    QualifiedFormSource["EMBEDDED"] = "embedded";
+    return QualifiedFormSource;
+}({});
+var qualified_form_api_EmailError = /*#__PURE__*/ function(EmailError) {
+    EmailError["INVALID"] = "invalid";
+    EmailError["EMPTY"] = "empty";
+    EmailError["NON_BUSINESS"] = "non_business";
+    return EmailError;
+}({});
+var qualified_form_api_EntryErrorType = /*#__PURE__*/ function(EntryErrorType) {
+    EntryErrorType["INVALID"] = "invalid";
+    EntryErrorType["EMPTY"] = "empty";
+    EntryErrorType["NOT_FULL_NAME"] = "not_full_name";
+    EntryErrorType["MUST_CHECK"] = "must_check";
+    return EntryErrorType;
+}({});
+var qualified_form_api_EndActionType = /*#__PURE__*/ function(EndActionType) {
+    EndActionType["WIDGET"] = "widget";
+    EndActionType["REDIRECT"] = "redirect";
+    EndActionType["NONE"] = "none";
+    return EndActionType;
+}({});
+class QualifiedFormApi {
+    async getFormConfig() {
+        if (this.props.source !== "embedded") {
+            return Promise.reject();
+        }
+        const { formApiName } = this.props;
+        return new Promise((resolve, reject)=>{
+            const messageHandler = (payload)=>{
+                if (payload.form_transaction_id !== this.formTransactionId) {
+                    return; // Ignore messages for other form transactions
+                }
+                this.props.channel.off("getQualifiedFormConfig", messageHandler);
+                if ("qualified_form_config" in payload) {
+                    resolve({
+                        qualifiedFormConfig: {
+                            assetUrl: payload.qualified_form_config.asset_url,
+                            emailField: {
+                                label: payload.qualified_form_config.email_field.label,
+                                placeholder: payload.qualified_form_config.email_field.placeholder
+                            },
+                            validateBusinessEmail: payload.qualified_form_config.validate_business_email
+                        },
+                        success: true
+                    });
+                } else {
+                    resolve({
+                        error: payload.error,
+                        success: false
+                    });
+                }
+            };
+            this.props.channel.on("getQualifiedFormConfig", messageHandler);
+            this.props.channel.send({
+                event: "getQualifiedFormConfig",
+                payload: {
+                    bot_api_name: formApiName,
+                    form_transaction_id: this.formTransactionId
+                }
+            });
+        });
+    }
+    submitEmail(email) {
+        this.conversation = null;
+        this.message = null;
+        const { valid, reason } = this.validateEmail(email);
+        if (!valid) {
+            return {
+                success: false,
+                error: reason
+            };
+        }
+        this._submitEmail(email);
+        return {
+            success: true,
+            result: this.waitForForm()
+        };
+    }
+    /**
+   * @param entries - Must be in the same order as the input fields in the followup questions form.
+   */ submitFollowUpQuestions(entries) {
+        if (!this.message) {
+            throw new Error("Cannot submit followup questions without an active conversation.");
+        }
+        if (entries.length !== this.message.inputFields.length) {
+            throw new Error("Entries must match the number of input fields.");
+        }
+        const errors = this.validateEntries(entries);
+        if (Object.keys(errors).length > 0) {
+            return {
+                success: false,
+                errors
+            };
+        }
+        const payload = {
+            type: "field_entries",
+            botStep: this.message.botStep,
+            executionStep: [
+                this.message.scriptId,
+                this.message.botStep
+            ],
+            entries: this.formatEntries(entries),
+            conversationId: this.message.conversationId
+        };
+        if (this.props.iframeManager) {
+            this.props.iframeManager.sendMessage(payload);
+        } else {
+            // V2 path: no iframe, send directly over WebSocket.
+            // Server's build_message_attrs reads snake_case keys only (bot_step,
+            // execution_step, conversation_id). Mirror the snakify() pattern used by
+            // root_store.submitLightboxGather for the multimodal channel.
+            void this.props.channel.perform("send_message", _extends({}, payload, {
+                bot_step: this.message.botStep,
+                botStep: undefined,
+                execution_step: payload.executionStep,
+                executionStep: undefined,
+                conversation_id: this.message.conversationId,
+                conversationId: undefined
+            }));
+        }
+        return {
+            success: true,
+            action: new QualifiedFormActionOrchestrator(this.createEndActions()).race()
+        };
+    }
+    validateEmail(email) {
+        if (!email || email.trim() === "") {
+            return {
+                valid: false,
+                reason: "empty"
+            };
+        }
+        if (!this.props.config) {
+            throw new Error("Cannot submit email without a form config.");
+        }
+        const [valid, reason] = validateEmail(email, this.props.config.validateBusinessEmail);
+        if (valid) return {
+            valid
+        };
+        switch(reason){
+            case "personal":
+                return {
+                    valid,
+                    reason: "non_business"
+                };
+            case "invalid":
+            default:
+                return {
+                    valid,
+                    reason: "invalid"
+                };
+        }
+    }
+    _submitEmail(email) {
+        if (this.props.source === "offers") {
+            this.props.channel.send({
+                event: "submitQualifiedForm",
+                payload: {
+                    email,
+                    offer_id: this.props.offerId,
+                    form_transaction_id: this.formTransactionId,
+                    source: this.props.source
+                }
+            });
+        }
+        if (this.props.source === "embedded") {
+            this.props.channel.send({
+                event: "submitQualifiedForm",
+                payload: {
+                    email,
+                    bot_api_name: this.props.formApiName,
+                    form_transaction_id: this.formTransactionId,
+                    source: this.props.source
+                }
+            });
+        }
+    }
+    waitForForm() {
+        // We want to listen for the redirect action at the same time as we listen for the form
+        // because the event will be sent in the same payload if there is no followup questions
+        const orchestrator = new QualifiedFormActionOrchestrator(this.createEndActions("redirect"));
+        const resolver = (resolve, dispose)=>{
+            if (this.message && this.message.inputFields.length > 0) {
+                orchestrator.dispose();
+                resolve({
+                    form: {
+                        title: this.message.title,
+                        subtitle: this.message.subtitle,
+                        buttonText: this.message.buttonText,
+                        inputFields: this.message.inputFields
+                    },
+                    action: null
+                });
+            } else {
+                resolve({
+                    form: null,
+                    action: orchestrator.addActions(this.createEndActions("widget", "end", "timeout")).race()
+                });
+            }
+            dispose();
+        };
+        const onMessage = (conversation)=>{
+            var _conversation_messages_find;
+            if (conversation.formTransactionId !== this.formTransactionId) return;
+            this.conversation = conversation;
+            this.message = (_conversation_messages_find = conversation.messages.find((m)=>m.type === "lightbox_gather")) != null ? _conversation_messages_find : null;
+        };
+        const action = this.createAction({
+            type: "custom-event-resolver",
+            event: "initQualifiedFormElementConversation",
+            resolver,
+            onMessage,
+            shouldResolve: ()=>!!this.conversation
+        });
+        // Start listening for redirect message
+        orchestrator.race();
+        return action.wait();
+    }
+    createEndActions() {
+        for(var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++){
+            names[_key] = arguments[_key];
+        }
+        const actions = [];
+        if (names.length === 0) {
+            names = [
+                "redirect",
+                "widget",
+                "end",
+                "timeout"
+            ];
+        }
+        for (const name of names){
+            switch(name){
+                case "redirect":
+                    actions.push(this.createRedirectAction());
+                    break;
+                case "widget":
+                    actions.push(this.createWidgetAction());
+                    break;
+                case "end":
+                    actions.push(this.createQualifiedFormEndAction());
+                    break;
+                case "timeout":
+                    actions.push(this.createTimeoutAction());
+                    break;
+            }
+        }
+        return actions;
+    }
+    createTimeoutAction() {
+        const action = this.createAction({
+            type: "timeout",
+            timeout: (/* inlined export .QUALIFIED_FORM_END_TIMEOUT */30000),
+            result: {
+                type: "none"
+            }
+        });
+        return action;
+    }
+    createQualifiedFormEndAction() {
+        const action = this.createAction({
+            type: "basic-event-resolver",
+            event: "qualifiedFormEnd",
+            resolver: ()=>({
+                    type: "none"
+                })
+        });
+        return action;
+    }
+    createRedirectAction() {
+        const action = this.createAction({
+            type: "basic-event-resolver",
+            event: "qualifiedFormRedirect",
+            resolver: (payload)=>{
+                if (this.props.source === "embedded") {
+                    window.location.href = payload.url;
+                }
+                return {
+                    type: "redirect",
+                    url: payload.url
+                };
+            }
+        });
+        return action;
+    }
+    createWidgetAction() {
+        const isWidgetMessage = (message)=>{
+            return isIn(QUALIFIED_FORM_CONVERSATION_ALLOWED_MESSAGES, message.type);
+        };
+        const passControlToWidget = ()=>{
+            this.props.channel.emit("received", "initQualifiedFormElementConversation", this.conversation);
+        };
+        const resolver = (resolve, dispose)=>{
+            resolve({
+                type: "widget"
+            });
+            // Wait for form/offers ending transition
+            qualified_form_api_setTimeout(()=>{
+                passControlToWidget();
+                dispose();
+            }, (/* inlined export .WIDGET_PASS_CONTROL_DELAY */500));
+        };
+        const onMessage = (message, dispose)=>{
+            if (!this.conversation || message.conversationId !== this.conversation.id) {
+                dispose();
+                return;
+            }
+            this.conversation.messages.push(message);
+        };
+        const action = this.createAction({
+            type: "custom-event-resolver",
+            event: "elementMessage",
+            resolver,
+            onMessage,
+            shouldResolve: ()=>{
+                var _this_conversation_messages, _this_conversation;
+                return !!((_this_conversation = this.conversation) == null ? void 0 : (_this_conversation_messages = _this_conversation.messages) == null ? void 0 : _this_conversation_messages.find(isWidgetMessage));
+            }
+        });
+        return action;
+    }
+    validateEntries(entries) {
+        if (!this.message) {
+            throw new Error("Cannot validate entries without an active conversation.");
+        }
+        const errors = {};
+        for (const [i, entry] of entries.entries()){
+            const field = this.message.inputFields[i];
+            const { valid, error } = this.validateEntry(entry, field);
+            if (!valid) {
+                errors[field.name] = error;
+            }
+        }
+        return errors;
+    }
+    validateEntry(entry, field) {
+        var _field_validation;
+        if (!entry || entry.trim() === "") {
+            return field.optional ? {
+                valid: true
+            } : {
+                valid: false,
+                error: {
+                    type: "empty"
+                }
+            };
+        }
+        if (field.type === "name" && field.validateFullName) {
+            if (!isValidFullName(entry)) {
+                return {
+                    valid: false,
+                    error: {
+                        type: "not_full_name"
+                    }
+                };
+            }
+        }
+        if (field.type === "boolean") {
+            if (entry !== "true" && entry !== "false") {
+                return {
+                    valid: false,
+                    error: {
+                        type: "invalid"
+                    }
+                };
+            }
+            if (field.mustCheck && entry !== "true") {
+                return {
+                    valid: false,
+                    error: {
+                        type: "must_check"
+                    }
+                };
+            }
+        }
+        if (field.type === "decimal") {
+            if (Number.isNaN(parseFloat(entry))) {
+                return {
+                    valid: false,
+                    error: {
+                        type: "invalid"
+                    }
+                };
+            }
+        }
+        if (field.type === "phone") {
+            if (!isValidPhoneNumber(entry)) {
+                return {
+                    valid: false,
+                    error: {
+                        type: "invalid"
+                    }
+                };
+            }
+        }
+        if (field.type === "picklist") {
+            var _field_fieldValues;
+            if (!((_field_fieldValues = field.fieldValues) == null ? void 0 : _field_fieldValues.some((fv)=>fv.value === entry))) {
+                return {
+                    valid: false,
+                    error: {
+                        type: "invalid"
+                    }
+                };
+            }
+        }
+        if (field.type === "string" && ((_field_validation = field.validation) == null ? void 0 : _field_validation.regex)) {
+            const regex = new RegExp(field.validation.regex, field.validation.caseSensitive ? "g" : "gi");
+            if (!regex.test(entry)) {
+                return {
+                    valid: false,
+                    error: {
+                        type: "invalid",
+                        message: field.validation.error
+                    }
+                };
+            }
+        }
+        return {
+            valid: true
+        };
+    }
+    formatEntries(entries) {
+        if (!this.message) {
+            throw new Error("Cannot validate entries without an active conversation.");
+        }
+        return entries.map((entry, index)=>this.formatEntry(entry, this.message.inputFields[index]));
+    }
+    formatEntry(entry, field) {
+        if (field.type === "phone") {
+            return formatPhoneNumber(entry);
+        }
+        return entry;
+    }
+    createAction(options) {
+        return new QualifiedFormAction(this.props.channel, options);
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props){
+        this.props = props;
+        this.conversation = null;
+        this.message = null;
+        this.formTransactionId = esm_browser_v4();
+    }
+}
+
+export { QualifiedFormApi, qualified_form_api_EmailError as EmailError, qualified_form_api_EndActionType as EndActionType, qualified_form_api_EntryErrorType as EntryErrorType, qualified_form_api_QualifiedFormSource as QualifiedFormSource };

package/widget/scroll_disabler.js

@@ -0,0 +1,109 @@
+const NO_OP_CSS_VARIABLE = "--qualified-widget-no-scroll";
+class ScrollDisabler {
+    static get locks() {
+        var _this__locks;
+        return (_this__locks = this._locks) != null ? _this__locks : this._locks = new Set();
+    }
+    static get scrollTarget() {
+        var _this__scrollTarget;
+        return (_this__scrollTarget = this._scrollTarget) != null ? _this__scrollTarget : this._scrollTarget = this.getScrollTarget();
+    }
+    static get observers() {
+        var _this__observers;
+        return (_this__observers = this._observers) != null ? _this__observers : this._observers = new Map();
+    }
+    static disableScroll(lock, watchOptions) {
+        if (this.locks.has(lock)) return;
+        this.locks.add(lock);
+        if (watchOptions) {
+            this.watch(lock, watchOptions);
+        }
+        if (this.locks.size > 1) return;
+        this.makePageUnscrollable();
+    }
+    static restoreScroll(lock) {
+        if (!this.locks.has(lock)) return;
+        this.locks.delete(lock);
+        this.unwatch(lock);
+        if (this.locks.size > 0) return;
+        this.restorePageScrollability();
+        this.scrollTargetOverflow = null;
+    }
+    static watch(lock, param) {
+        let { overlayElement } = param;
+        if (this.observers.has(lock)) return;
+        const cleanup = ()=>{
+            this.restoreScroll(lock);
+            this.unwatch(lock);
+        };
+        // Restore scroll when the overlay element is removed from the DOM
+        const changeListener = ()=>{
+            if (!overlayElement.isConnected) {
+                cleanup();
+            }
+        };
+        const observer = new MutationObserver(changeListener);
+        if (overlayElement.parentElement) {
+            observer.observe(overlayElement.parentElement, {
+                childList: true
+            });
+        }
+        // Restore scroll when a click happens outside of the overlay element
+        const clickListener = (event)=>{
+            if (!overlayElement.contains(event.target)) {
+                cleanup();
+            }
+        };
+        document.body.addEventListener("click", clickListener);
+        const dispose = ()=>{
+            document.body.removeEventListener("click", clickListener);
+            observer.disconnect();
+        };
+        this.observers.set(lock, dispose);
+    }
+    static unwatch(lock) {
+        var _this_observers_get;
+        if (!this.observers.has(lock)) return;
+        (_this_observers_get = this.observers.get(lock)) == null ? void 0 : _this_observers_get();
+        this.observers.delete(lock);
+    }
+    static makePageUnscrollable() {
+        this.scrollTargetOverflow = this.getOverflow(this.scrollTarget);
+        this.setOverflow(this.scrollTarget, this.getOverflowProperty());
+    }
+    static restorePageScrollability() {
+        if (!this.scrollTargetOverflow) return;
+        this.setOverflow(this.scrollTarget, this.scrollTargetOverflow);
+        this.scrollTargetOverflow = null;
+    }
+    static setOverflow(element, overflow) {
+        element.style.setProperty("overflow", overflow.value, overflow.priority);
+    }
+    static getOverflow(element) {
+        const value = element.style.getPropertyValue("overflow");
+        const priority = element.style.getPropertyPriority("overflow");
+        return {
+            value,
+            priority
+        };
+    }
+    static getScrollTarget() {
+        // If the body is scrollable, we need to disable scrolling on the body
+        if (document.body.clientHeight < document.body.scrollHeight) {
+            return document.body;
+        }
+        return document.documentElement;
+    }
+    static getOverflowProperty() {
+        return {
+            value: "var(" + NO_OP_CSS_VARIABLE + ", hidden)",
+            priority: "important"
+        };
+    }
+}
+ScrollDisabler._scrollTarget = null;
+ScrollDisabler._locks = null;
+ScrollDisabler._observers = null;
+ScrollDisabler.scrollTargetOverflow = null;
+
+export { ScrollDisabler };