@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/lib/FormComponent.js

@@ -0,0 +1,134 @@
+import { PRIVACY_DISCLOSURE_ARIA_LABEL_PREFIX } from "../../constants.js";
+import { getPrivacyDisclosureTooltipId } from "../../utils.js";
+import { OfferComponent } from "./OfferComponent.js";
+import { stripHTMLTags } from "../../../utils/HTMLUtils.js";
+import { CtaTypeEnum } from "../../../../../../src/graphql-types.js";
+
+
+
+
+
+
+var FormComponent_FormState = /*#__PURE__*/ function(FormState) {
+    FormState["EmailCapture"] = "emailCapture";
+    FormState["FollowupQuestions"] = "followupQuestions";
+    FormState["End"] = "end";
+    return FormState;
+}({});
+class FormComponent extends OfferComponent {
+    disableForm() {
+        var _this_elements, _this_elements1;
+        const form = (_this_elements = this.elements) == null ? void 0 : _this_elements.form;
+        const cta = (_this_elements1 = this.elements) == null ? void 0 : _this_elements1.ctaButton;
+        if (form) {
+            const elements = form == null ? void 0 : form.querySelectorAll("input, button");
+            elements == null ? void 0 : elements.forEach((el)=>el.disabled = true);
+        }
+        if (cta && cta instanceof HTMLButtonElement) {
+            cta.disabled = true;
+        }
+    }
+    enableForm() {
+        var _this_elements, _this_elements1;
+        const form = (_this_elements = this.elements) == null ? void 0 : _this_elements.form;
+        const cta = (_this_elements1 = this.elements) == null ? void 0 : _this_elements1.ctaButton;
+        if (form) {
+            const elements = form == null ? void 0 : form.querySelectorAll("input, button");
+            elements == null ? void 0 : elements.forEach((el)=>el.disabled = false);
+        }
+        if (cta && cta instanceof HTMLButtonElement) {
+            cta.disabled = false;
+        }
+    }
+    getEmailInputValue() {
+        var _ref;
+        var _this_getFormValues;
+        if (this.state.current !== "emailCapture") {
+            return null;
+        }
+        return (_ref = (_this_getFormValues = this.getFormValues("email")) == null ? void 0 : _this_getFormValues[0]) != null ? _ref : null;
+    }
+    getEmailFormInput() {
+        var _this_elements_form, _this_elements;
+        return (_this_elements = this.elements) == null ? void 0 : (_this_elements_form = _this_elements.form) == null ? void 0 : _this_elements_form.querySelector("input[name=email]");
+    }
+    getPrivacyDisclosureTooltip() {
+        var _this_elements_form, _this_elements;
+        return (_this_elements = this.elements) == null ? void 0 : (_this_elements_form = _this_elements.form) == null ? void 0 : _this_elements_form.querySelector("div[id=" + getPrivacyDisclosureTooltipId(this.props.id) + "]");
+    }
+    // Takes an HTML string and returns a plain text version of it, including any links in the text.
+    static privacyDisclosureAriaLabel(htmlString) {
+        try {
+            const { strippedValue, doc } = stripHTMLTags(htmlString);
+            // Clearly denote any links include in the text for screen readers.
+            const linksWithHref = Array.from(doc.querySelectorAll("a")).map((link)=>link.href);
+            let linksText = "";
+            if (linksWithHref.length > 0) {
+                linksText = " Included links: ";
+                linksWithHref.forEach((linkHref, index)=>{
+                    linksText += "Link " + (index + 1) + " " + linkHref + ". ";
+                });
+            }
+            return PRIVACY_DISCLOSURE_ARIA_LABEL_PREFIX + strippedValue + linksText;
+        } catch (e) {
+            return PRIVACY_DISCLOSURE_ARIA_LABEL_PREFIX + " " + htmlString;
+        }
+    }
+    getFormValues() {
+        for(var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++){
+            names[_key] = arguments[_key];
+        }
+        var _this_elements;
+        const form = (_this_elements = this.elements) == null ? void 0 : _this_elements.form;
+        if (!form) {
+            return null;
+        }
+        const values = [];
+        for (const name of names){
+            const input = form.querySelector('[name="' + name + '"]');
+            if (!input) {
+                return null;
+            }
+            if (input.type === "checkbox") {
+                values.push(input.checked.toString());
+            } else {
+                values.push(input.value);
+            }
+        }
+        return values;
+    }
+    render() {
+        var _this_elements;
+        const root = super.render();
+        const form = (_this_elements = this.elements) == null ? void 0 : _this_elements.form;
+        if (!form) {
+            return root;
+        }
+        const emailInput = form.querySelector("input[name=email]");
+        if (emailInput) {
+            emailInput.addEventListener("invalid", ()=>{
+                const validityState = emailInput.validity;
+                if (validityState.valueMissing) {
+                    emailInput.setCustomValidity("You must enter a valid email");
+                }
+            });
+            emailInput.addEventListener("input", ()=>{
+                emailInput.setCustomValidity("");
+                const validityState = emailInput.validity;
+                if (validityState.valueMissing) {
+                    emailInput.setCustomValidity("You must enter a valid email");
+                } else {
+                    emailInput.setCustomValidity("");
+                }
+            });
+        }
+        return root;
+    }
+    constructor(props, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled, hasOffersFormBannerMobileImprovements){
+        super(props, {
+            current: "emailCapture"
+        }, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled, hasOffersFormBannerMobileImprovements), this.ctaType = CtaTypeEnum.Form;
+    }
+}
+
+export { FormComponent, FormComponent_FormState as FormState };

package/routes/app/offers/scripts/rendering/lib/OfferComponent.js

@@ -0,0 +1,144 @@
+import { __webpack_require__ } from "../../../../../../js/runtime.js";
+import { getCtaButtonId, getFormId, getDismissButtonId, getPrivacyDisclosureTooltipTargetId } from "../../utils.js";
+import { BaseComponent } from "./BaseComponent.js";
+import { buildImageTransformationUrl, buildCropSettings } from "../../../../../../components/shared/controls/imageCropperHelpers.js";
+import { CtaTypeEnum, BackgroundTypeEnum } from "../../../../../../src/graphql-types.js";
+import "../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+
+
+
+
+class OfferComponent extends BaseComponent {
+    static withState(state) {
+        var _this = this;
+        return function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            // @ts-expect-error this should only be used with concrete classes
+            const instance = new _this(...args);
+            if (state) {
+                instance.setState(state);
+            }
+            return instance;
+        };
+    }
+    get id() {
+        return this.props.id;
+    }
+    registerListeners(listeners) {
+        this.listeners = listeners;
+        this.handleListeners();
+    }
+    dismiss() {
+        var _this_listeners_onDismissClick, _this_listeners;
+        (_this_listeners = this.listeners) == null ? void 0 : (_this_listeners_onDismissClick = _this_listeners.onDismissClick) == null ? void 0 : _this_listeners_onDismissClick.call(_this_listeners);
+    }
+    render(param) {
+        let { animate = false } = param === void 0 ? {} : param;
+        if (animate) {
+            return this.renderWithHeightTransition();
+        }
+        super.render();
+        this.computeElements();
+        this.handleListeners();
+        return this.root;
+    }
+    setState(state, param) {
+        let { animate = false } = param === void 0 ? {} : param;
+        this.state = state;
+        this.render({
+            animate
+        });
+    }
+    copyListeners(offerComponent) {
+        if (offerComponent.listeners) {
+            this.registerListeners(offerComponent.listeners);
+        }
+    }
+    get backgroundImageCropSettings() {
+        return buildCropSettings(this.props.backgroundImageConfig.cropPxX, this.props.backgroundImageConfig.cropPxY, this.props.backgroundImageConfig.cropPxWidth, this.props.backgroundImageConfig.cropPxHeight, this.props.backgroundImageConfig.originalPxWidth, this.props.backgroundImageConfig.originalPxHeight);
+    }
+    get backgroundImageUrl() {
+        if (this.props.backgroundImageUrl && this.backgroundImageCropSettings && this.props.backgroundType === BackgroundTypeEnum.Image) {
+            return buildImageTransformationUrl(this.props.backgroundImageUrl, this.backgroundImageCropSettings);
+        } else {
+            return null;
+        }
+    }
+    computeElements() {
+        this.elements = {
+            host: this.host,
+            dismissButton: this.shadowRoot.querySelector("#" + getDismissButtonId(this.id)),
+            form: this.shadowRoot.querySelector("#" + getFormId(this.id)),
+            ctaButton: this.shadowRoot.querySelector("#" + getCtaButtonId(this.id)),
+            privacyDisclosureTooltipTarget: this.props.privacyDisclosureId ? this.shadowRoot.querySelector("#" + getPrivacyDisclosureTooltipTargetId(this.id)) : null
+        };
+    }
+    handleListeners() {
+        if (!this.listeners || !this.elements) {
+            return;
+        }
+        const { onDismissClick, onCtaClick, onFormSubmit, onPrivacyDisclosureShown } = this.listeners;
+        const { dismissButton, form, ctaButton, privacyDisclosureTooltipTarget } = this.elements;
+        if (dismissButton && onDismissClick) {
+            this.bindListener(dismissButton, "click", onDismissClick);
+        }
+        if (ctaButton && onCtaClick && this.ctaType !== CtaTypeEnum.Form) {
+            this.bindListener(ctaButton, "click", onCtaClick, false);
+        }
+        if (form && onFormSubmit && this.ctaType === CtaTypeEnum.Form) {
+            this.bindListener(form, "submit", onFormSubmit);
+        }
+        if (privacyDisclosureTooltipTarget && onPrivacyDisclosureShown && this.ctaType === CtaTypeEnum.Form) {
+            this.bindListener(privacyDisclosureTooltipTarget, "focus", onPrivacyDisclosureShown);
+        }
+    }
+    bindListener(element, event, listener, preventDefault) {
+        if (preventDefault === void 0) preventDefault = true;
+        element.addEventListener(event, (e)=>{
+            if (preventDefault) {
+                // Prevent default behaviour and stop bubbling
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
+            listener(e);
+        });
+    }
+    renderWithHeightTransition() {
+        var _this_shadowRoot, _this_shadowRoot1;
+        let container = (_this_shadowRoot = this.shadowRoot) == null ? void 0 : _this_shadowRoot.querySelector(".container");
+        const oldHeight = container == null ? void 0 : container.scrollHeight;
+        super.render();
+        this.computeElements();
+        this.handleListeners();
+        container = (_this_shadowRoot1 = this.shadowRoot) == null ? void 0 : _this_shadowRoot1.querySelector(".container");
+        if (!container || !oldHeight) return this.root;
+        const newHeight = container.scrollHeight;
+        const originalHeight = container.style.height;
+        const originalTransition = container.style.transition;
+        container.style.height = "" + oldHeight + "px";
+        container.style.transition = "height 0.3s ease-out";
+        container.addEventListener("transitionend", ()=>{
+            if (container) {
+                container.style.height = originalHeight;
+                container.style.transition = originalTransition;
+            }
+        }, {
+            once: true
+        });
+        requestAnimationFrame(()=>{
+            if (newHeight && oldHeight && container) {
+                container.style.height = "" + newHeight + "px";
+            }
+        });
+        return this.root;
+    }
+    constructor(props, state, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled, hasOffersFormBannerMobileImprovements){
+        super(props, state), this.host = host, this.hasOffersFontEnhancements = hasOffersFontEnhancements, this.hasDismissButtonAccessibilityEnabled = hasDismissButtonAccessibilityEnabled, this.hasOffersFormBannerMobileImprovements = hasOffersFormBannerMobileImprovements;
+    }
+}
+
+export { OfferComponent };

package/routes/app/offers/scripts/rendering/lib/ScrollbarWidth.js

@@ -0,0 +1,27 @@
+class ScrollbarWidth {
+    static get thin() {
+        var _this__thin;
+        return (_this__thin = this._thin) != null ? _this__thin : this._thin = "" + ScrollbarWidth.getScrollBarWidth("thin") + "px";
+    }
+    static get auto() {
+        var _this__auto;
+        return (_this__auto = this._auto) != null ? _this__auto : this._auto = "" + ScrollbarWidth.getScrollBarWidth("auto") + "px";
+    }
+    static getScrollBarWidth(size) {
+        const element = document.createElement("div");
+        element.style.width = "100px";
+        element.style.height = "100px";
+        element.style.overflow = "scroll";
+        element.style.position = "absolute";
+        element.style.top = "-9999px";
+        element.style.setProperty("scrollbar-width", size);
+        document.body.appendChild(element);
+        const scrollbarWidth = element.offsetWidth - element.clientWidth;
+        document.body.removeChild(element);
+        return scrollbarWidth;
+    }
+}
+ScrollbarWidth._thin = null;
+ScrollbarWidth._auto = null;
+
+export { ScrollbarWidth };

package/routes/app/offers/scripts/rendering/lib/decorators.js

@@ -0,0 +1,20 @@
+/**
+ * Decorator that automatically renders the component inside the provided host when it is created
+ */ function autoRender(Constructor) {
+    const { name } = Constructor.prototype.constructor;
+    return ({
+        // Since the OfferComponent is an abstract class it complains about the class not being abstract as well
+        // But this decorator is only meant to be used with concrete classes
+        // Also Maintain the original class name
+        // @ts-expect-error
+        [name]: class extends Constructor {
+            constructor(...args){
+                super(...args);
+                this.host.innerHTML = "";
+                this.host.appendChild(this.render());
+            }
+        }
+    })[name];
+}
+
+export { autoRender };

package/routes/app/offers/scripts/rendering/locations/CSSVarsManager.js

@@ -0,0 +1,66 @@
+import { _debugLog } from "../../../../../../src/smart_website/utils.js";
+
+
+const SCOPES = (/* unused pure expression or super */ null && ([
+    "header",
+    "footer"
+]));
+// class used to manage global CSS variables
+class CSSVarsManager {
+    static get(scope) {
+        var _this_instances_scope;
+        return (_this_instances_scope = this.instances[scope]) != null ? _this_instances_scope : this.instances[scope] = new CSSVarsManager(scope);
+    }
+    static requestOwnership(key, scope) {
+        const owner = this.ownerships.get(key);
+        if (owner && owner !== scope) {
+            _debugLog("[CSSVarsManager] " + scope + " requested ownership of " + key + " but it is already owned by " + owner);
+            return false;
+        }
+        this.ownerships.set(key, scope);
+        return true;
+    }
+    static removeOwnership(key, scope) {
+        const owner = this.ownerships.get(key);
+        if (owner && owner !== scope) {
+            _debugLog("[CSSVarsManager] " + scope + " requested to remove ownership of " + key + " but it is owned by " + owner);
+            return false;
+        }
+        this.ownerships.delete(key);
+        return true;
+    }
+    set(key, value) {
+        if (!CSSVarsManager.requestOwnership(key, this.scope)) return;
+        // Avoid a reflow if the value is the same
+        if (this.map.get(key) === value) return;
+        this.root.style.setProperty(key, value);
+        this.map.set(key, value);
+    }
+    remove(key) {
+        if (!CSSVarsManager.removeOwnership(key, this.scope)) return;
+        // Avoid a reflow if the value is not set
+        if (!this.map.has(key)) return;
+        this.root.style.removeProperty(key);
+        this.map.delete(key);
+    }
+    get(key) {
+        return this.map.get(key);
+    }
+    dispose() {
+        for (const key of this.map.keys()){
+            this.remove(key);
+        }
+        this.map.clear();
+        delete CSSVarsManager.instances[this.scope];
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(scope){
+        this.scope = scope;
+        this.root = document.documentElement;
+        this.map = new Map();
+    }
+}
+CSSVarsManager.instances = {};
+CSSVarsManager.ownerships = new Map();
+
+export { CSSVarsManager };

package/routes/app/offers/scripts/rendering/locations/ElementResizeObserver.js

@@ -0,0 +1,49 @@
+import { throttle } from "./header/utils.js";
+
+
+// Class used to watch for element resize events
+class ElementResizeObserver {
+    init(target) {
+        this.isDisposed = false;
+        this.target = target;
+        this.lastWidth = target.offsetWidth;
+        this.lastHeight = target.offsetHeight;
+        this.observer.observe(target, {
+            box: "border-box"
+        });
+    }
+    dispose() {
+        this.isDisposed = true;
+        this.observer.disconnect();
+        this.target = null;
+        this.lastHeight = null;
+        this.lastWidth = null;
+    }
+    _callback(target) {
+        if (this.isDisposed) return;
+        this.callback(target);
+    }
+    constructor(callback, watch = "both", throttleLimit = 0){
+        this.callback = callback;
+        this.watch = watch;
+        this.lastWidth = null;
+        this.lastHeight = null;
+        this.target = null;
+        this.isDisposed = true;
+        this._onResize = (entries)=>{
+            if (!this.target) return;
+            const widthChanged = this.target.offsetWidth !== this.lastWidth;
+            if (this.watch === "width" && !widthChanged) return;
+            const heightChanged = this.target.offsetHeight !== this.lastHeight;
+            if (this.watch === "height" && !heightChanged) return;
+            if (!widthChanged && !heightChanged) return;
+            this.lastWidth = this.target.offsetWidth;
+            this.lastHeight = this.target.offsetHeight;
+            this._callback(this.target);
+        };
+        this.onResize = throttleLimit > 0 ? throttle(this._onResize, throttleLimit) : this._onResize;
+        this.observer = new ResizeObserver(this.onResize);
+    }
+}
+
+export { ElementResizeObserver };

package/routes/app/offers/scripts/rendering/locations/footer.js

@@ -0,0 +1,53 @@
+import { FOOTER_HEIGHT_CSS_VARIABLE, DEFAULT_OFFERS_Z_INDEX } from "../../constants.js";
+import { getHostId, toHTMLElement } from "../../utils.js";
+import { CSSVarsManager } from "./CSSVarsManager.js";
+import { ElementResizeObserver } from "./ElementResizeObserver.js";
+
+/* eslint-disable rulesdir/enforce-comment */ /* eslint-disable rulesdir/css-units */ 
+
+
+
+class Footer {
+    static setup() {
+        if (this.isInitialized) return;
+        if ("registerProperty" in window.CSS) {
+            window.CSS.registerProperty({
+                name: FOOTER_HEIGHT_CSS_VARIABLE,
+                syntax: "<length>",
+                inherits: true,
+                initialValue: "0px"
+            });
+        }
+        this.isInitialized = true;
+    }
+    createHost(id) {
+        // Style is inline because the host is directly inserted into the DOM. (no shadow root)
+        const hostId = getHostId(id);
+        const html = /* html */ '\n      <div id="' + hostId + '" style="position:fixed;left:0;bottom:0;width:100%;height:fit-content;z-index:' + DEFAULT_OFFERS_Z_INDEX + '"></div>\n    ';
+        return toHTMLElement(html);
+    }
+    insertHost(host) {
+        document.body.appendChild(host);
+    }
+    afterInsertAnimation(host) {
+        this.updateFooterHeight(host);
+        this.hostResizeObserver.init(host);
+    }
+    beforeRemoveAnimation() {
+        this.hostResizeObserver.dispose();
+    }
+    removeHost(host) {
+        host.remove();
+        this.cssVars.dispose();
+    }
+    constructor(){
+        this.cssVars = CSSVarsManager.get("footer");
+        this.updateFooterHeight = (host)=>{
+            this.cssVars.set(FOOTER_HEIGHT_CSS_VARIABLE, "" + host.offsetHeight + "px");
+        };
+        this.hostResizeObserver = new ElementResizeObserver(this.updateFooterHeight, "height", (/* inlined export .RESIZE_THROTTLE_MS */250));
+    }
+}
+Footer.isInitialized = false;
+
+export { Footer };

package/routes/app/offers/scripts/rendering/locations/header/AsyncBatchProcessor.js

@@ -0,0 +1,70 @@
+import { __webpack_require__ } from "../../../../../../../js/runtime.js";
+import "../../../../../../../widget/utils/native_globals.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* provided dependency */ var cancelAnimationFrame = __webpack_require__(68034).pP;
+// Class used to batch process items asynchronously
+// Useful for batching css changes to avoid layout thrashing
+class AsyncBatchProcessor {
+    /**
+   * Add items to the batch processor.
+   */ add() {
+        for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+            items[_key] = arguments[_key];
+        }
+        this.pendingItems.push(...items);
+    }
+    /**
+   * Add items to the batch processor and schedule the next execution.
+   */ addAndSchedule() {
+        for(var _len = arguments.length, items = new Array(_len), _key = 0; _key < _len; _key++){
+            items[_key] = arguments[_key];
+        }
+        this.pendingItems.push(...items);
+        this.scheduleExecution();
+    }
+    /**
+   * Schedule the next execution of the batch processor.
+   */ scheduleExecution() {
+        if (this.scheduledExecution === null) {
+            this.scheduledExecution = this.scheduleNextExecution();
+        }
+    }
+    /**
+   * Clear the pending items and cancel the scheduled execution.
+   */ clearAndCancel() {
+        this.pendingItems.length = 0;
+        this.cancelScheduledExecution();
+    }
+    /**
+   * Execute the batch processor immediately and cancel any scheduled execution.
+   */ executeImmediately() {
+        this.cancelScheduledExecution();
+        this.executeBatch();
+    }
+    scheduleNextExecution() {
+        return requestAnimationFrame(()=>this.executeBatch());
+    }
+    cancelScheduledExecution() {
+        if (this.scheduledExecution === null) return;
+        if (this.scheduledExecution) {
+            cancelAnimationFrame(this.scheduledExecution);
+        }
+        this.scheduledExecution = null;
+    }
+    executeBatch() {
+        this.processBatch([
+            ...this.pendingItems
+        ]);
+        this.pendingItems.length = 0;
+        this.scheduledExecution = null;
+    }
+    // eslint-disable-next-line no-useless-constructor
+    constructor(processBatch){
+        this.processBatch = processBatch;
+        this.pendingItems = [];
+        this.scheduledExecution = null;
+    }
+}
+
+export { AsyncBatchProcessor };