{"version":3,"file":"couponWidgetSlimControllerChunk.js?v=23.134.0+20261102.30.bbbf8652390b5ce306040b1cece1df0dd99fac01&h=5be059d6b2a3aab7245d","mappings":"iJAQA,MAAMA,EAWJ,YAAmBC,GARF,KAAAC,eAAyB,CACxCC,aAAc,KACdC,MAAO,KACPC,YAAa,KACbC,mBAAoB,8CACpBC,WAAY,MAIZC,KAAKC,SAAWR,CAClB,CAEO,IAAAS,GACLF,KAAKG,YACP,CAEO,UAAAA,GACL,MAAMC,EAAKJ,KAAKC,SAASI,aAAa,MAChCC,EAAMN,KAAKC,SAASI,aAAa,OAEvCE,EAAEC,KAAKF,EAAK,CACVG,QAASL,EACTM,UAAW,CACTD,QAASL,EACTO,eAAgB,aAEjBC,KACD,SAAUC,GACR,MAAMC,EAAUD,EAASE,QACpBF,EAASE,QACV,IAAIC,MACRhB,KAAKiB,WAAWH,EAClB,EAAEI,KAAKlB,MAEX,CAEO,UAAAiB,CAAWH,GAChB,MAAMK,EAASL,EAAQM,OAASN,EAAQ,GAAKd,KAAKN,eAC5C2B,EAAU,uBACVC,EAAcC,SAASC,qBAAqB,QAAQ,GACpDC,EAAMF,SAASG,cAAc,SAS7BC,EACJR,EAAOtB,aAAeG,KAAKN,eAAeI,mBACtC8B,EAAU5B,KAAKC,SAAS4B,aAAa,cACvC,+DAA+DV,EAAOvB,iFACnB+B,QACnD,+DAA+DA,kBAC7DG,EAAO,qDAEThB,EAAQM,OAAS,GAAK,wKAKZQ,4vBAMZT,EAAOvB,gCACkBuB,EAAOpB,sRAIZoB,EAAOpB,sDAE3BoB,EAAOpB,mMAQT0B,EAAIM,UAAY,+aAmBXV,guBAsCAA,8UAQAA,kGAKAA,wEAIAA,iFAEAA,yJAOAA,oKAOAA,sSAYAA,+HAKAA,qFAIAA,sIAKAA,2UAcAA,6HAKAA,4EAILrB,KAAKC,SAAS8B,UAAYD,EAC1B9B,KAAKgC,uBAAuBb,GACxBG,GACFA,EAAYW,YAAYR,EAE5B,CAEO,sBAAAO,CAAuBb,GAC5B,MAAMe,EAAQX,SAASG,cAAc,OACrCQ,EAAMH,UAAY,iJAEaZ,EAAOpB,4GAEMoB,EAAOpB,+YAMhBoB,EAAOpB,eAAeoB,EAAOtB,gHAG1DsB,EAAOgB,gTASbnC,KAAKC,SAASgC,YAAYC,EAC5B,EAGa,MAAME,EAInB,YAAmB3C,GACjBO,KAAKP,QAAUA,EACfO,KAAKqC,QAAUrC,KAAKP,SAChBO,KAAKP,QAAQY,aAAa,YAC1B,GACJL,KAAKsC,YACP,CAEQ,UAAAA,G,MAC8B,SAApB,QAAZ,EAAAtC,KAAKqC,eAAO,eAAEE,gBACD,IAAI/C,EAAwBQ,KAAKP,SACzCS,MAEX,E","sources":["webpack://site-client-side/./ClientApp/components/couponWidget/couponWidgetSlimController.ts"],"sourcesContent":["type Coupon = {\n  PrimaryImage: string;\n  Title: string;\n  Description: string;\n  DefaultDescription: string;\n  CampaignID: string;\n};\n\nclass HearthAndHomeSlimCoupon {\n  private readonly _element: HTMLElement;\n\n  private readonly _defaultCoupon: Coupon = {\n    PrimaryImage: null,\n    Title: null,\n    Description: null,\n    DefaultDescription: \"SAVE ON SELECT GAS AND ELECTRIC FIREPLACES!\",\n    CampaignID: null,\n  };\n\n  public constructor(element: HTMLElement) {\n    this._element = element;\n  }\n\n  public init() {\n    this.getCoupons();\n  }\n\n  public getCoupons() {\n    const id = this._element.getAttribute(\"id\");\n    const url = this._element.getAttribute(\"url\");\n\n    $.post(url, {\n      SiteKey: id,\n      HHTConfig: {\n        SiteKey: id,\n        Implementation: \"Catalog\",\n      },\n    }).then(\n      function (response) {\n        const coupons = response.Coupons\n          ? (response.Coupons as Coupon[])\n          : new Array<Coupon>();\n        this.createHtml(coupons);\n      }.bind(this)\n    );\n  }\n\n  public createHtml(coupons: Coupon[]) {\n    const coupon = coupons.length ? coupons[0] : this._defaultCoupon;\n    const modalId = \"its-lit-coupon-modal\";\n    const headElement = document.getElementsByTagName(\"head\")[0];\n    const css = document.createElement(\"style\");\n    const taggingAttributes = `      \n          data-dotagging-event='cta_interaction'\n          data-dotagging-event-action='click'\n          data-dotagging-event-action-result='open'\n          data-dotagging-event-owner='dealeron'\n          data-dotagging-element-order='0'\n          data-dotagging-element-type='item_details'\n          data-dotagging-element-subtype='cta_button'`;\n    const description =\n      coupon.Description || this._defaultCoupon.DefaultDescription;\n    const heading = this._element.hasAttribute(\"show-title\")\n      ? `<h2 class=\"text-white text-uppercase margin-top_5x\"><strong>${coupon.Title}</strong></h2>\n                <p class=\"coupon-description text-white\">${description}</p>`\n      : `<h2 class=\"text-white text-uppercase margin-top_5x\"><strong>${description}</strong></h2>`;\n    const html = `\n      <div class=\"pencilBanner margin-bottom-4x ${\n        coupons.length ? \"\" : \"hidden\"\n      }\">\n        <div class=\"coupon-content-container container\">\n          <div class=\"coupon-content\">\n            <div class=\"text-center\">\n                ${heading}\n            </div>\n            <div class=\"\">\n                <div class=\"cta-buttons-container\">\n                    <div class=\"cta-button left\">\n                        <button type=\"button\" ${taggingAttributes} class=\"btn btn-main btn-cta offer-btn btn-block btn-lg margin-vert_5x\" onclick=\"SetupCouponModal(this)\" data-toggle=\"modal\" data-target=\"#its-lit-coupon-modal\" data-form-type=\"coupon\" data-form-title=\"${\n      coupon.Title\n    }\" data-coupon-campaign=\"${coupon.CampaignID}\">Get this offer!</button>\n                    </div>\n                    <div class=\"cta-button right\">\n                        <button type=\"button\" class=\"btn btn-main btn-block btn-lg margin-vert_5x\" data-toggle=\"modal\" data-target=\"#coupon-disclaimer-modal-${\n                          coupon.CampaignID\n                        }\" aria-controls=\"coupon-disclaimer-modal-${\n      coupon.CampaignID\n    }\" data-form-type=\"coupon\" data-form-title=\"Offer Details\">Offer Details</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n      </div>`;\n\n    css.innerHTML = `\n\n      @media (min-width: 1441px){\n        .pencilBanner > .container{\n          width: 1440px;\n          max-width: 100%;\n        }\n      }\n\n      .pencilBanner{ background-color:#ff7319; padding: 25px 0; }\n\n      .pencilBanner .coupon-description { font-size: 18px; }\n\n      .cta-button {\n        margin: 0 auto;\n        max-width: 300px;\n      }\n\n      @media only screen and (min-width: 768px) { \n      #${modalId} .modal-content { \n          margin-top: 10vh; \n        } \n\n        h2 {\n          margin-right: 1em;\n          margin-left: 1em;\n        }\n\n        .coupon-content-container {\n          width: fit-content;\n        }\n\n        .coupon-content {\n          display: grid;\n          grid-template-rows: 1fr 1fr;\n        }\n\n        .cta-buttons-container {\n          display: grid;\n          grid-template-columns: 1fr 1fr;\n          column-gap: 10px;\n        }\n\n        .cta-button {\n          margin: unset;\n          width: 100%;\n        }\n\n        .cta-button.left {\n          justify-self: right;\n        }\n  \n        .cta-button.right {\n          justify-self: left;\n        }\n      }\n\n      #${modalId} .modal-header {\n        background: linear-gradient(175deg,rgba(0,0,0,.4),rgba(0,0,0,.9)), url('static/industry-fireplace/hero/gas-and-electric-fireplaces.png') no-repeat center / cover;\n        padding: 3em 2em;\n        color: white;\n        text-align: center;\n        border-radius: 5px 5px 0 0;\n      }\n      \n      #${modalId} .modal-header hr {\n        width: 40px;\n        margin: 1em auto;\n      }\n      \n      #${modalId} #progressbar {\n        overflow: hidden;\n      }\n      \n      #${modalId} #progressbar li .bg-cta { background: #e87033 !important; }\n      \n      #${modalId} #progressbar li {\n        list-style-type: none;\n        width: 100%;\n        float: left;\n        position: relative;\n      }\n      \n      #${modalId} #progressbar li a {\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-size: 12px;\n        color: #fff;\n      }\n      \n      #${modalId} #progressbar li a span {\n        width: 24px;\n        height: 24px;\n        line-height: 24px;\n        display: block;\n        font-size: 12px;\n        color: #333;\n        background: white;\n        border-radius: 25px;\n        margin: 0 auto 10px auto;\n      }\n      \n      #${modalId} #progressbar li a span::after {\n        content:\"\"\\f040\"\";\n        font-family: 'fontawesome';\n      }\n      \n      #${modalId} #progressbar li a span.bg-cta {\n        color: white;\n      }\n      \n      #${modalId} #progressbar li a span.bg-cta::after {\n        content:\"\"\\f00c\"\";\n        font-family: 'fontawesome';\n      }\n      \n      #${modalId} #progressbar li::after {\n        content: '';\n        width: 75%;\n        height: 2px;\n        background: white;\n        position: absolute;\n        left: 0;\n        transform: translateX(-50%);\n        top: 11px;\n        opacity: .1;\n        z-index: 1;\n        transition: all .3s ease;\n      }\n      \n      #${modalId} #progressbar li.edit-success::after {\n        opacity: 1;\n        background-color: #e87033;\n      }\n      \n      #${modalId} #progressbar li:first-child::after {\n          content: none;\n      }`;\n\n    this._element.innerHTML = html;\n    this.setupOfferDetailsModal(coupon);\n    if (headElement) {\n      headElement.appendChild(css);\n    }\n  }\n\n  public setupOfferDetailsModal(coupon) {\n    const modal = document.createElement(\"div\");\n    modal.innerHTML = `<!-- Begin Coupon Disclaimer Modal -->\n\t\t\t\t<div class=\"modal fade coupon-disclaimer-modal\" \n\t\t\t\t\tid=\"coupon-disclaimer-modal-${coupon.CampaignID}\" \n\t\t\t\t\ttabindex=\"-1\" role=\"dialog\" \n\t\t\t\t\taria-labelledby=\"coupon-disclaimer-title-${coupon.CampaignID}\">\n\t\t\t\t\t<div class=\"modal-dialog\" role=\"document\" style=\"width: 80%;\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t\t\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\n\t\t\t\t\t\t\t\t<h4 class=\"hidden\" \n\t\t\t\t\t\t\t\t\tid=\"coupon-disclaimer-title-${coupon.CampaignID}\">${coupon.Description}</h4>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"modal-body text-justify\">\n\t\t\t\t\t\t\t\t${coupon.Disclaimer}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"modal-footer\">\n\t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<!-- End Coupon Disclaimer Modal -->`;\n    this._element.appendChild(modal);\n  }\n}\n\nexport default class CouponWidgetSlimController {\n  private readonly element: HTMLElement;\n  private readonly program: string;\n\n  public constructor(element: HTMLElement) {\n    this.element = element;\n    this.program = this.element\n      ? this.element.getAttribute(\"program\") || \"\"\n      : \"\";\n    this.initialize();\n  }\n\n  private initialize() {\n    if (this.program?.toLowerCase() === \"hht\") {\n      const coupon = new HearthAndHomeSlimCoupon(this.element);\n      coupon.init();\n    }\n  }\n}\n"],"names":["HearthAndHomeSlimCoupon","element","_defaultCoupon","PrimaryImage","Title","Description","DefaultDescription","CampaignID","this","_element","init","getCoupons","id","getAttribute","url","$","post","SiteKey","HHTConfig","Implementation","then","response","coupons","Coupons","Array","createHtml","bind","coupon","length","modalId","headElement","document","getElementsByTagName","css","createElement","description","heading","hasAttribute","html","innerHTML","setupOfferDetailsModal","appendChild","modal","Disclaimer","CouponWidgetSlimController","program","initialize","toLowerCase"],"sourceRoot":""}