@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/routes/app/offers/scripts/rendering/variations/FormModal.js

@@ -0,0 +1,325 @@
+import { MODAL_PADDING, MODAL_WIDTHS } from "../../constants.js";
+import { getFormId } from "../../utils.js";
+import { FormComponent } from "../lib/FormComponent.js";
+import { ScrollbarWidth } from "../lib/ScrollbarWidth.js";
+import { Body } from "./components/Body.js";
+import { Button } from "./components/Button.js";
+import { DismissButton } from "./components/DismissButton.js";
+import { ForegroundImageModal } from "./components/ForegroundImageModal.js";
+import { Headline } from "./components/Headline.js";
+import { MultiFieldForm } from "./components/MultiFieldForm.js";
+import { _tagged_template_literal_loose, _extends, __decorate } from "../../../../../../js/4101.js";
+import { LocationEnum, ContentVariationTypeEnum } from "../../../../../../src/graphql-types.js";
+import { LOADING_SVG_STRING_SPINNER } from "../../../../../../src/personalizations/utils.js";
+import { escapeHtml } from "../../../../../../src/embedded_forms/utils.js";
+import { AlertIcon } from "./icons.js";
+import { autoRender } from "../lib/decorators.js";
+
+
+
+
+function FormModal_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div\n        class="container"\n        role="dialog"\n        aria-modal="true"\n      >\n        <div class="image-container">\n          ',
+        "\n          ",
+        '\n            <div class="content-container">\n              ',
+        '\n              <div class="scrollable-section">\n                ',
+        "\n                ",
+        "\n              </div>\n              ",
+        "\n              ",
+        "\n            </div>\n          ",
+        "\n          ",
+        "\n        </div>\n        ",
+        "\n      </div>\n    "
+    ]);
+    FormModal_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        '\n      <form id="',
+        '" class="form">\n        ',
+        "\n      </form>\n    "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        '\n        <div class="',
+        '">\n          <input\n            class="',
+        '"\n            type="email"\n            name="email"\n            placeholder="',
+        '"\n            ',
+        '\n            aria-invalid="true"\n          />\n          <div class="',
+        '">\n            ',
+        '\n            <div class="',
+        '">\n              ',
+        "\n            </div>\n          </div>\n        </div>\n      "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal_loose([
+        '\n      <input\n        class="',
+        '"\n        type="email"\n        name="email"\n        placeholder="',
+        '"\n        ',
+        "\n        required\n      />\n    "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const PRVIACY_DISCLOSURE_TEXT_OPACITY = 0.75;
+const FORM_MODAL_TEXT = {
+    followupQuestionsHeadlineText: "We need some more info.",
+    followupQuestionsBodyText: "Please provide the following information",
+    followupQuestionsSubmitText: "Submit",
+    thankYouHeadlineText: "Thank you!",
+    thankYouBodyText: "We appreciate you taking the time to complete this form.",
+    thankYouSubmitText: "Close"
+};
+class FormModal extends FormComponent {
+    get style() {
+        var _variation_headlineStyle_backgroundColor, _variation_headlineStyle_fontFamily, _variation_headlineStyle_fontFamily1, _variation_headlineStyle_fontFamily2;
+        const { variation } = this.props;
+        return /* css */ "\n      .container {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        align-items: center;\n        border-radius: 8px;\n        background: " + ((_variation_headlineStyle_backgroundColor = variation.headlineStyle.backgroundColor) != null ? _variation_headlineStyle_backgroundColor : "#FFF") + ";\n        margin: 0;\n        overflow: hidden;\n        box-shadow: 0px 2px 8px 1px #00000033;\n        p {\n          margin: 0;\n        }\n        max-width: 90vw;\n        max-height: 90dvh;\n      }\n\n      .content-container {\n        display: flex;\n        width: " + MODAL_WIDTHS[this.device][this.location] + "px;\n        flex-direction: column;\n        align-items: flex-start;\n        justify-content: center;\n        padding: " + MODAL_PADDING[this.device][this.location] + ";\n        gap: 24px;\n        box-sizing: border-box;\n        align-self: center;\n        height: 100%;\n        max-height: 90dvh;\n      }\n\n      .image-container {\n        width: 100%;\n        height: 100%;\n        max-height: 90dvh;\n        max-width: 90vw;\n        display: flex;\n        flex-direction: " + (this.foregroundImage.isPlacementHorizontal ? "row" : "column") + ";\n        align-items: stretch;\n      }\n\n      .scrollable-section {\n        display: flex;\n        flex-direction: column;\n        gap: 24px;\n        flex: 1;\n        box-sizing: content-box;\n        scrollbar-width: thin;\n        scrollbar-gutter: stable;\n        overflow-y: auto;\n        margin: -4px -8px -4px -4px;\n        padding: 4px 8px 4px 4px;\n        width: calc(100% + " + ScrollbarWidth.thin + ");\n      }\n\n      .background-image-wrapper {\n        " + (this.backgroundImageUrl ? "\n              background-image: url(" + this.backgroundImageUrl + ");\n              background-size: cover;\n              background-position: center;\n              display: flex;\n              align-items: center;\n            " : "") + "\n      }\n\n      .end-icon {\n        position: relative;\n      }\n\n      .end-icon-check {\n        position: absolute;\n        left: 14px;\n        top: 14px;\n      }\n\n      .form {\n        display: flex;\n        gap: 8px;\n        flex-direction: column;\n        width: 100%;\n      }\n\n      ." + this.cx.input + " {\n        font-family: " + ((_variation_headlineStyle_fontFamily = variation.headlineStyle.fontFamily) != null ? _variation_headlineStyle_fontFamily : "inherit") + ';\n        font-size: 14px;\n        height: 40px;\n        width: 100%;\n        box-sizing: border-box;\n        border: 1px solid #C8CED0ED;\n        border-radius: 4px;\n        padding: 8px 16px;\n        color: #1B1B1B;\n        font-weight: 400;\n        background-color: white;\n\n        &:is(:focus, :focus-visible):not(&[readonly]):not(&[aria-invalid="true"]) {\n          border-color: ' + (variation.buttonStyle.backgroundColor || variation.bodyStyle.color) + ";\n          outline: 2px solid " + (variation.buttonStyle.backgroundColor || variation.bodyStyle.color) + ";\n          outline-offset: 2px;\n        }\n      }\n\n      ." + this.cx.input + '[aria-invalid="true"] {\n        border-color: #E4251B;\n        outline: 2px solid #E4251B;\n      }\n\n      .' + this.cx.inputErrorContainer + " {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n        align-self: stretch;\n      }\n\n      ." + this.cx.errorMessageContainer + " {\n        display: flex;\n        padding: 0px 4px;\n        align-items: center;\n        gap: 4px;\n        align-self: stretch;\n        border-radius: 4px;\n        background: #FCEDEC;\n\n        & svg {\n          width: 16px;\n          height: 16px;\n          fill: #E4251B;\n        }\n      }\n\n      ." + this.cx.errorMessage + " {\n        color: #E4251B;\n        font-family: " + ((_variation_headlineStyle_fontFamily1 = variation.headlineStyle.fontFamily) != null ? _variation_headlineStyle_fontFamily1 : "inherit") + ";\n        font-size: 12px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 18px;\n      }\n\n      .privacy-disclosure-text {\n        color: " + this.privacyDisclosureTextColor + ";\n        font-family: " + ((_variation_headlineStyle_fontFamily2 = variation.headlineStyle.fontFamily) != null ? _variation_headlineStyle_fontFamily2 : "inherit") + ";\n        font-size: 12px;\n        line-height: 18px;\n        text-align: left;\n      }\n\n      .privacy-disclosure-text a {\n        /* Prevent links from using the browser's default blue color */\n        color: inherit;\n        /* Ensure links are underlined to clearly indicate they are click-able */\n        text-decoration: underline;\n      }\n    ";
+    }
+    get content() {
+        return this.html /* html */ (FormModal_templateObject(), this.foregroundImage.prependedContent, this.backgroundImageUrl ? '<div class="background-image-wrapper">' : "", this.headline, this.body, this.form, this.submitButton, this.privacyDisclosureText, this.backgroundImageUrl ? "</div>" : "", this.foregroundImage.appendedContent, this.dismissButton);
+    }
+    get headlineText() {
+        switch(this.state.current){
+            case (/* inlined export .FormState.EmailCapture */"emailCapture"):
+                return this.props.variation.headlineText;
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _this_props_variation_followUpStepOverrides;
+                return ((_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.title) || FORM_MODAL_TEXT.followupQuestionsHeadlineText;
+            case (/* inlined export .FormState.End */"end"):
+                var _this_props_variation_thankYouStepOverrides;
+                return ((_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.title) || FORM_MODAL_TEXT.thankYouHeadlineText;
+        }
+    }
+    get headlineStyle() {
+        switch(this.state.current){
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _ref;
+                var _this_props_variation_followUpStepOverrides;
+                return (_ref = (_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.titleStyle) != null ? _ref : this.props.variation.headlineStyle;
+            case (/* inlined export .FormState.End */"end"):
+                var _ref1;
+                var _this_props_variation_thankYouStepOverrides;
+                return (_ref1 = (_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.titleStyle) != null ? _ref1 : this.props.variation.headlineStyle;
+            default:
+                return this.props.variation.headlineStyle;
+        }
+    }
+    get headline() {
+        const type = this.location === LocationEnum.Sidebar ? "sidebar-modal" : "modal";
+        return new Headline(_extends({}, this.headlineStyle, {
+            text: this.headlineText,
+            type,
+            offerId: this.id
+        }), this.hasOffersFontEnhancements);
+    }
+    get bodyText() {
+        switch(this.state.current){
+            case (/* inlined export .FormState.EmailCapture */"emailCapture"):
+                return this.props.variation.bodyText;
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _this_props_variation_followUpStepOverrides;
+                return ((_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.description) || FORM_MODAL_TEXT.followupQuestionsBodyText;
+            case (/* inlined export .FormState.End */"end"):
+                var _this_props_variation_thankYouStepOverrides;
+                return ((_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.description) || FORM_MODAL_TEXT.thankYouBodyText;
+        }
+    }
+    get bodyStyle() {
+        switch(this.state.current){
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _ref;
+                var _this_props_variation_followUpStepOverrides;
+                return (_ref = (_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.descriptionStyle) != null ? _ref : this.props.variation.bodyStyle;
+            case (/* inlined export .FormState.End */"end"):
+                var _ref1;
+                var _this_props_variation_thankYouStepOverrides;
+                return (_ref1 = (_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.descriptionStyle) != null ? _ref1 : this.props.variation.bodyStyle;
+            default:
+                return this.props.variation.bodyStyle;
+        }
+    }
+    get body() {
+        return new Body(_extends({}, this.bodyStyle, {
+            text: this.bodyText,
+            allowScroll: false
+        }));
+    }
+    get form() {
+        if (this.state.current === (/* inlined export .FormState.FollowupQuestions */"followupQuestions")) {
+            return this.multiFieldForm;
+        }
+        return this.html /* html */ (_templateObject1(), getFormId(this.id), this.emailInput);
+    }
+    get buttonText() {
+        if (this.state.loading) {
+            var _this_props_variation_buttonStyle_color;
+            return LOADING_SVG_STRING_SPINNER((_this_props_variation_buttonStyle_color = this.props.variation.buttonStyle.color) != null ? _this_props_variation_buttonStyle_color : "#FFF", 11);
+        }
+        switch(this.state.current){
+            case (/* inlined export .FormState.EmailCapture */"emailCapture"):
+                return this.props.variation.buttonText;
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _this_props_variation_followUpStepOverrides;
+                return ((_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.buttonText) || FORM_MODAL_TEXT.followupQuestionsSubmitText;
+            case (/* inlined export .FormState.End */"end"):
+                var _this_props_variation_thankYouStepOverrides;
+                return ((_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.buttonText) || FORM_MODAL_TEXT.thankYouSubmitText;
+        }
+    }
+    get buttonStyle() {
+        switch(this.state.current){
+            case (/* inlined export .FormState.FollowupQuestions */"followupQuestions"):
+                var _ref;
+                var _this_props_variation_followUpStepOverrides;
+                return (_ref = (_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.buttonStyle) != null ? _ref : this.props.variation.buttonStyle;
+            case (/* inlined export .FormState.End */"end"):
+                var _ref1;
+                var _this_props_variation_thankYouStepOverrides;
+                return (_ref1 = (_this_props_variation_thankYouStepOverrides = this.props.variation.thankYouStepOverrides) == null ? void 0 : _this_props_variation_thankYouStepOverrides.buttonStyle) != null ? _ref1 : this.props.variation.buttonStyle;
+            default:
+                return this.props.variation.buttonStyle;
+        }
+    }
+    get submitButton() {
+        return new Button(_extends({}, this.buttonStyle, {
+            id: this.id,
+            type: "modal-submit",
+            text: this.buttonText,
+            focusRingColor: this.headlineStyle.color,
+            formId: getFormId(this.id)
+        }), this.hasOffersFontEnhancements);
+    }
+    get dismissButton() {
+        var _this_props_variation_headlineStyle_color, _ref, _ref1;
+        if (!this.props.allowDismiss) {
+            return null;
+        }
+        const { headlineStyle, buttonStyle } = this.props.variation;
+        return new DismissButton({
+            id: this.id,
+            isModal: true,
+            color: (_this_props_variation_headlineStyle_color = this.props.variation.headlineStyle.color) != null ? _this_props_variation_headlineStyle_color : "#1B1B1B",
+            focusRingColor: (_ref = headlineStyle == null ? void 0 : headlineStyle.color) != null ? _ref : null,
+            borderRadius: (_ref1 = buttonStyle == null ? void 0 : buttonStyle.borderRadius) != null ? _ref1 : "0px",
+            hasDismissButtonAccessibilityEnabled: this.hasDismissButtonAccessibilityEnabled
+        });
+    }
+    get location() {
+        return this.props.location;
+    }
+    get emailInput() {
+        var _ref;
+        var _this_props_variation_emailField;
+        if (this.state.current === (/* inlined export .FormState.End */"end")) {
+            return null;
+        }
+        if (this.state.current === (/* inlined export .FormState.EmailCapture */"emailCapture") && this.state.error) {
+            var _ref1;
+            var _this_props_variation_emailField1;
+            return this.html /* html */ (_templateObject2(), this.cx.inputErrorContainer, this.cx.input, escapeHtml((_ref1 = (_this_props_variation_emailField1 = this.props.variation.emailField) == null ? void 0 : _this_props_variation_emailField1.placeholder) != null ? _ref1 : "name@business.com"), this.state.email && "value=" + this.state.email, this.cx.errorMessageContainer, AlertIcon, this.cx.errorMessage, this.state.error);
+        }
+        return this.html /* html */ (_templateObject3(), this.cx.input, escapeHtml((_ref = (_this_props_variation_emailField = this.props.variation.emailField) == null ? void 0 : _this_props_variation_emailField.placeholder) != null ? _ref : "name@business.com"), this.state.email && "value=" + this.state.email);
+    }
+    get privacyDisclosureText() {
+        if (!this.props.privacyDisclosureText || this.state.current !== (/* inlined export .FormState.EmailCapture */"emailCapture")) {
+            return null;
+        }
+        return /* html */ '\n      <div\n        class="privacy-disclosure-text"\n        aria-label="' + FormModal.privacyDisclosureAriaLabel(this.props.privacyDisclosureText) + '"\n      >\n        ' + this.props.privacyDisclosureText + "\n      </div>\n    ";
+    }
+    setState(state, param) {
+        let { animate = false } = param === void 0 ? {} : param;
+        var _this_elements;
+        if (state.current === (/* inlined export .FormState.End */"end")) {
+            this.multiFieldForm = null;
+        }
+        if (state.current !== (/* inlined export .FormState.FollowupQuestions */"followupQuestions")) {
+            return super.setState(state, {
+                animate
+            });
+        }
+        if (state.form) {
+            this.state = state;
+            this.multiFieldForm = this.createMultiFieldForm(state.form);
+            super.setState(state, {
+                animate
+            });
+        }
+        if (state.errors) {
+            var _this_root_shadowRoot;
+            const form = (_this_root_shadowRoot = this.root.shadowRoot) == null ? void 0 : _this_root_shadowRoot.querySelector("form");
+            if (form && this.multiFieldForm) {
+                var _state_errors;
+                this.multiFieldForm.setErrors(form, (_state_errors = state.errors) != null ? _state_errors : {});
+            }
+        }
+        if (state.loading && ((_this_elements = this.elements) == null ? void 0 : _this_elements.ctaButton)) {
+            var _this_props_variation_buttonStyle_color;
+            this.elements.ctaButton.innerHTML = LOADING_SVG_STRING_SPINNER((_this_props_variation_buttonStyle_color = this.props.variation.buttonStyle.color) != null ? _this_props_variation_buttonStyle_color : "#FFF", 11);
+        }
+    }
+    createMultiFieldForm(form) {
+        var _ref;
+        var _this_props_variation_followUpStepOverrides;
+        return new MultiFieldForm({
+            id: this.id,
+            inputFields: form.inputFields,
+            inputFieldsOverrides: (_ref = (_this_props_variation_followUpStepOverrides = this.props.variation.followUpStepOverrides) == null ? void 0 : _this_props_variation_followUpStepOverrides.additionalFields) != null ? _ref : [],
+            css: {
+                inputLabel: "\n          " + (this.props.variation.bodyStyle.fontFamily ? "font-family: " + this.props.variation.bodyStyle.fontFamily + ";" : "") + "\n          " + (this.props.variation.bodyStyle.color ? "color: " + this.props.variation.bodyStyle.color + ";" : "") + "\n        ",
+                input: '\n          &:is(:focus, :focus-visible):not(&[readonly]):not(&[aria-invalid="true"]) {\n            border-color: ' + (this.props.variation.buttonStyle.backgroundColor || this.props.variation.headlineStyle.color) + ";\n            outline: 2px solid " + (this.props.variation.buttonStyle.backgroundColor || this.props.variation.headlineStyle.color) + ";\n            outline-offset: 2px;\n          }\n        "
+            }
+        });
+    }
+    get privacyDisclosureTextColor() {
+        var _this_props_variation_headlineStyle_color;
+        const colorHex = ((_this_props_variation_headlineStyle_color = this.props.variation.headlineStyle.color) == null ? void 0 : _this_props_variation_headlineStyle_color.replace(/^#/, "")) || "000000";
+        // Convert opacity percentage to 2-digit hex
+        const opacityHex = Math.round(255 * PRVIACY_DISCLOSURE_TEXT_OPACITY).toString(16).toUpperCase();
+        return "#" + colorHex + opacityHex;
+    }
+    constructor(...args){
+        super(...args), this.displayName = "FormModal", this.type = ContentVariationTypeEnum.HeadlineBodyForm, this.foregroundImage = new ForegroundImageModal({
+            location: this.location,
+            foregroundImageConfig: this.props.foregroundImageConfig,
+            foregroundImageUrl: this.props.foregroundImageUrl
+        }), this.multiFieldForm = null;
+    }
+}
+FormModal = __decorate([
+    autoRender
+], FormModal);
+
+var FormModal_FORM_MODAL_TEXT = /* unused export */ undefined;
+export { FormModal, FormModal_FORM_MODAL_TEXT as FORM_MODAL_TEXT };

package/routes/app/offers/scripts/rendering/variations/LinkBanner.js

@@ -0,0 +1,105 @@
+import "../../constants.js";
+import { OfferComponent } from "../lib/OfferComponent.js";
+import { Button } from "./components/Button.js";
+import { DismissButton } from "./components/DismissButton.js";
+import { ForegroundImageBanner } from "./components/ForegroundImageBanner.js";
+import { Headline } from "./components/Headline.js";
+import { __metadata, _tagged_template_literal_loose, _extends, __decorate } from "../../../../../../js/4101.js";
+import { CtaTypeEnum, ContentVariationTypeEnum } from "../../../../../../src/graphql-types.js";
+import { autoRender } from "../lib/decorators.js";
+
+/* eslint-disable rulesdir/css-units */ 
+
+
+
+function LinkBanner_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <span class="container ',
+        '">\n        ',
+        "\n        ",
+        "\n        ",
+        "\n        ",
+        "\n      </span>\n    "
+    ]);
+    LinkBanner_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+
+
+
+
+
+
+
+
+class LinkBanner extends OfferComponent {
+    get style() {
+        var _variation_headlineStyle_backgroundColor, _variation_headlineStyle_color;
+        const { variation } = this.props;
+        let mobileStyle = "";
+        if (this.isMobile) {
+            mobileStyle = /* css */ "\n        .container {\n          padding: 20px 32px;\n\n          .headline.banner.link {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 12px;\n            justify-content: space-between;\n            max-width: 100%;\n            text-align: left;\n            padding: 0;\n\n            p {\n              margin-right: 4px;\n              max-width: 100%;\n            }\n\n            a {\n              margin-right: auto;\n            }\n          }\n        }\n\n      ";
+        }
+        return /* css */ "\n      .container {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        gap: 32px;\n        align-items: center;\n        background: " + ((_variation_headlineStyle_backgroundColor = variation.headlineStyle.backgroundColor) != null ? _variation_headlineStyle_backgroundColor : "#000") + ";\n        box-shadow: 0px -1px 28px 0px rgba(0, 0, 0, 0.00);\n        margin: 0;\n        padding: 0 36px;\n        height: auto;\n        max-height: " + (/* inlined export .MAX_BANNER_HEIGHT */"200px") + ";\n\n        p {\n          margin: 0;\n        }\n      }\n\n      .background-image-wrapper {\n        " + (this.backgroundImageUrl ? "\n              background-image: url(" + this.backgroundImageUrl + ");\n              background-position: center;\n              background-size: cover;\n            " : "") + "\n      }\n\n      .banner {\n        text-align: left;\n      }\n\n      .banner-link{\n        " + (this.hasDismissButtonAccessibilityEnabled && "\n            &:is(:focus, :focus-visible) {\n              outline: 2px solid " + ((_variation_headlineStyle_color = variation.headlineStyle.color) != null ? _variation_headlineStyle_color : "black") + ";\n              outline-offset: 2px;\n            }\n          ") + "\n      }\n\n      .headline.banner.link {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n        justify-content: center;\n        padding: " + (this.hasDismissButtonAccessibilityEnabled ? "14px 4px" : "14px 0") + ";\n      }\n      " + mobileStyle;
+    }
+    get content() {
+        return this.html /* html */ (LinkBanner_templateObject(), this.backgroundImageUrl ? "background-image-wrapper" : "", this.foregroundImage.prependedContent, this.headline, this.dismissButton, this.foregroundImage.appendedContent);
+    }
+    get cta() {
+        const { buttonStyle, buttonText, buttonUrl, assetDeliveryType, headlineStyle } = this.props.variation;
+        return new Button(_extends({}, buttonStyle, {
+            id: this.id,
+            text: buttonText,
+            href: buttonUrl,
+            deliveryType: assetDeliveryType,
+            type: "banner-link",
+            color: headlineStyle.color
+        }), this.hasOffersFontEnhancements);
+    }
+    get headline() {
+        const { headlineStyle, headlineText } = this.props.variation;
+        return new Headline(_extends({}, headlineStyle, {
+            text: headlineText,
+            type: "banner-link",
+            link: this.cta
+        }), this.hasOffersFontEnhancements);
+    }
+    get dismissButton() {
+        var _ref, _ref1;
+        if (!this.props.allowDismiss) {
+            return null;
+        }
+        const { headlineStyle, buttonStyle } = this.props.variation;
+        return new DismissButton({
+            id: this.id,
+            color: this.props.variation.headlineStyle.color,
+            focusRingColor: (_ref = headlineStyle == null ? void 0 : headlineStyle.color) != null ? _ref : null,
+            borderRadius: (_ref1 = buttonStyle == null ? void 0 : buttonStyle.borderRadius) != null ? _ref1 : "0px",
+            hasDismissButtonAccessibilityEnabled: this.hasDismissButtonAccessibilityEnabled
+        });
+    }
+    get location() {
+        return this.props.location;
+    }
+    constructor(props, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled){
+        super(props, null, host, hasOffersFontEnhancements, hasDismissButtonAccessibilityEnabled), this.displayName = "LinkBanner", this.type = ContentVariationTypeEnum.HeadlineLink, this.ctaType = CtaTypeEnum.Link, this.foregroundImage = new ForegroundImageBanner({
+            location: this.location,
+            foregroundImageConfig: this.props.foregroundImageConfig,
+            foregroundImageUrl: this.props.foregroundImageUrl
+        });
+    }
+}
+LinkBanner = __decorate([
+    autoRender,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [
+        typeof LinkBannerProps === "undefined" ? Object : LinkBannerProps,
+        typeof HTMLElement === "undefined" ? Object : HTMLElement,
+        Boolean,
+        Boolean
+    ])
+], LinkBanner);
+
+export { LinkBanner };

package/routes/app/offers/scripts/rendering/variations/components/Body.js

@@ -0,0 +1,29 @@
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+
+/* eslint-disable rulesdir/css-units */ 
+function Body_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <div class="body">\n        ',
+        "\n      </div>\n    "
+    ]);
+    Body_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+
+class Body extends BaseComponent {
+    get style() {
+        const { color, fontFamily, allowScroll } = this.props;
+        return /* css */ "\n      .body {\n        color: " + (color != null ? color : "#1B1B1B") + ";\n        font-size: 14px;\n        line-height: 22px;\n        " + (fontFamily ? "font-family: '" + fontFamily + "';" : "") + "\n        margin: 0;\n        padding: 0;\n        text-align: left;\n        max-height: 60vh;\n        " + (allowScroll ? "overflow-y: auto;" : "") + "\n        overflow-wrap: anywhere;\n      }\n    ";
+    }
+    get content() {
+        return this.html /* html */ (Body_templateObject(), this.props.text);
+    }
+    constructor(props){
+        super(props, null), this.displayName = "Body";
+    }
+}
+
+export { Body };

package/routes/app/offers/scripts/rendering/variations/components/Button.js

@@ -0,0 +1,128 @@
+import { getCtaButtonId } from "../../../utils.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+import { AssetDeliveryTypeEnum } from "../../../../../../../src/graphql-types.js";
+
+/* eslint-disable rulesdir/css-units */ 
+function Button_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <a id="',
+        '" class="cta modal" href="',
+        '" target="',
+        '">\n        ',
+        "\n      </a>\n    "
+    ]);
+    Button_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        '\n      <button id="',
+        '" class="cta modal" type="submit" form="',
+        '">\n        ',
+        "\n      </button>\n    "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        '\n      <a id="',
+        '" class="cta banner-button" href="',
+        '" target="',
+        '">\n        ',
+        "\n      </a>\n    "
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    const data = _tagged_template_literal_loose([
+        '\n      <a id="',
+        '" class="banner-link" href="',
+        '" target="',
+        '">\n        ',
+        "\n      </a>\n    "
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    const data = _tagged_template_literal_loose([
+        '\n      <button id="',
+        '" class="cta banner-button submit" type="submit">\n        ',
+        "\n      </button>\n    "
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+
+
+
+class Button extends BaseComponent {
+    get style() {
+        var _ref, _this_props_focusRingColor, _ref1, _this_props_focusRingColor1;
+        const { borderColor, borderRadius, backgroundColor, color, fontFamily } = this.props;
+        return /* css */ "\n      .cta {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        gap: 10px;\n        line-height: 150%;\n        text-decoration: none;\n        " + (fontFamily ? "font-family: '" + fontFamily + "';" : "") + "\n        margin: 0;\n        font-size: 14px;\n        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06);\n        color: " + (color != null ? color : "#FFF") + ";\n        text-align: center;\n        border: 1px solid " + (borderColor != null ? borderColor : "transparent") + ";\n        border-radius: " + (borderRadius != null ? borderRadius : "0px") + ";\n      }\n\n      .cta.modal {\n        height: 40px;\n        padding: 4px 16px;\n        align-self: stretch;\n        background: " + (backgroundColor != null ? backgroundColor : "#000") + ";\n        " + (this.shouldSetDefaultFontWeight ? "font-weight: 600;" : "font-weight: unset;") + "\n        flex-shrink: 0;\n\n        &:is(:focus-visible) {\n          outline: 2px solid " + ((_ref = (_this_props_focusRingColor = this.props.focusRingColor) != null ? _this_props_focusRingColor : color) != null ? _ref : "#FFF") + ";\n          outline-offset: 2px;\n          filter: brightness(0.9);\n        }\n\n        &:is(:active:not(:disabled)) {\n          scale: 0.97;\n        }\n      }\n\n      .cta.banner-button {\n        height: 32px;\n        padding: 0px 24px;\n        background: " + (backgroundColor != null ? backgroundColor : "#4E55FD") + ";\n        " + (this.shouldSetDefaultFontWeight ? "font-weight: 500;" : "font-weight: unset;") + "\n\n        /* Set width to max-content to prevent line break in button text */\n        max-width: max-content;\n        min-width: max-content;\n        width: max-content;\n\n        &:is(:focus-visible) {\n          outline: 2px solid " + ((_ref1 = (_this_props_focusRingColor1 = this.props.focusRingColor) != null ? _this_props_focusRingColor1 : color) != null ? _ref1 : "#FFF") + ";\n          outline-offset: 2px;\n          filter: brightness(0.9);\n        }\n\n        &:is(:active:not(:disabled)) {\n          scale: 0.97;\n        }\n      }\n\n      .cta.banner-button.submit {\n        height: 32px;\n      }\n\n      .banner-link {\n        text-decoration: underline;\n        color: " + (color != null ? color : "#FFF") + ";\n        font-size: 16px;\n        " + (this.shouldSetDefaultFontWeight ? "font-weight: 600;" : "font-weight: unset;") + "\n        flex: none;\n      }\n    ";
+    }
+    get content() {
+        switch(this.props.type){
+            case "modal-button":
+                return this.modalButton;
+            case "modal-submit":
+                return this.modalSubmit;
+            case "banner-button":
+                return this.bannerButton;
+            case "banner-link":
+                return this.bannerLink;
+            case "banner-submit":
+                return this.bannerSubmit;
+        }
+    }
+    get buttonId() {
+        return getCtaButtonId(this.props.id);
+    }
+    get modalButton() {
+        return this.html /* html */ (Button_templateObject(), this.buttonId, this.props.href, this.target, this.props.text);
+    }
+    get modalSubmit() {
+        return this.html /* html */ (_templateObject1(), this.buttonId, this.props.formId, this.props.text);
+    }
+    get bannerButton() {
+        return this.html /* html */ (_templateObject2(), this.buttonId, this.props.href, this.target, this.props.text);
+    }
+    get bannerLink() {
+        return this.html /* html */ (_templateObject3(), this.buttonId, this.props.href, this.target, this.props.text);
+    }
+    get bannerSubmit() {
+        return this.html /* html */ (_templateObject4(), this.buttonId, this.props.text);
+    }
+    get target() {
+        switch(this.props.deliveryType){
+            case AssetDeliveryTypeEnum.NewPage:
+                return "_blank";
+            default:
+                return "_self";
+        }
+    }
+    constructor(props, hasOffersFontEnhancements){
+        var _this_props_text;
+        super(props, null), this.hasOffersFontEnhancements = hasOffersFontEnhancements, this.displayName = "Button", this.shouldSetDefaultFontWeight = true;
+        // This handles offers that weren't updated after the font enhancements were added
+        if (((_this_props_text = this.props.text) == null ? void 0 : _this_props_text.includes("<p>")) && this.hasOffersFontEnhancements) {
+            this.shouldSetDefaultFontWeight = false;
+        }
+    }
+}
+
+export { Button };

package/routes/app/offers/scripts/rendering/variations/components/DismissButton.js

@@ -0,0 +1,39 @@
+import "../../../constants.js";
+import { getDismissButtonId } from "../../../utils.js";
+import { BaseComponent } from "../../lib/BaseComponent.js";
+import { _tagged_template_literal_loose } from "../../../../../../../js/4101.js";
+
+
+function DismissButton_templateObject() {
+    const data = _tagged_template_literal_loose([
+        '\n      <button aria-label="Close" id="',
+        '" class="dismiss-button">\n        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 12 13" fill="none">\n          <path\n            fill-rule="evenodd"\n            clip-rule="evenodd"\n            d="M3.41421 2.5L2 3.91421L4.82843 6.74264L2 9.57107L3.41422 10.9853L6.24264 8.15686L9.07107 10.9853L10.4853 9.57107L7.65685 6.74264L10.4853 3.91421L9.07107 2.5L6.24264 5.32843L3.41421 2.5Z"\n            fill="',
+        '"\n          />\n        </svg>\n      </button>\n    '
+    ]);
+    DismissButton_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */ 
+
+
+class DismissButton extends BaseComponent {
+    get style() {
+        const { focusRingColor, color, borderRadius, isModal, hasDismissButtonAccessibilityEnabled } = this.props;
+        if (hasDismissButtonAccessibilityEnabled) {
+            var _ref;
+            return /* css */ "\n      .dismiss-button {\n        position: absolute;\n        top: 8px;\n        right: 6px;\n        background: none;\n        border: 1px solid transparent;\n        border-radius: " + (borderRadius != null ? borderRadius : "0px") + ";\n        cursor: pointer;\n        margin: 0;\n        padding: 10px;\n\n        @media (max-width: " + (/* inlined export .MOBILE_THRESHOLD */540) + "px) {\n          top: 12px;\n          right: 6px;\n        }\n\n        &:is(:focus-visible) {\n          outline: 2px solid " + ((_ref = focusRingColor != null ? focusRingColor : color) != null ? _ref : "#FFF") + ";\n        }\n      }\n\n      .dismiss-button > svg {\n        display: block;\n        margin: 0;\n        width: " + (isModal ? "16px" : "12px") + ";\n        height: " + (isModal ? "16px" : "12px") + ";\n        padding: 0;\n      }\n    ";
+        }
+        return /* css */ "\n      .dismiss-button {\n        position: absolute;\n        top: 18px;\n        right: " + (isModal ? "16px" : "12px") + ";\n        width: " + (isModal ? "16px" : "12px") + ";\n        height: " + (isModal ? "16px" : "12px") + ";\n        background: none;\n        border: none;\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n\n        @media (max-width: " + (/* inlined export .MOBILE_THRESHOLD */540) + "px) {\n          top: 22px;\n          right: 16px;\n        }\n\n        &:is(:focus, :focus-visible) {\n          outline: 2px solid " + (color != null ? color : "white") + ";\n          outline-offset: 2px;\n        }\n      }\n\n      .dismiss-button > svg {\n        display: block;\n        margin: 0;\n        padding: 0;\n      }\n    ";
+    }
+    get content() {
+        const { id, color } = this.props;
+        return this.html /* html */ (DismissButton_templateObject(), getDismissButtonId(id), color != null ? color : "white");
+    }
+    constructor(props){
+        super(props, null), this.displayName = "DismissButton";
+    }
+}
+
+export { DismissButton };