@beamimpact/web-sdk/dist/components/subscription-management.esm.js

The Beam SDK enables brands to connect with their customers over shared values, not transactional discounts, to build stronger loyalty. Our integration achieves this by allowing customers to (a) choose a nonprofit where the brand will donate part of their

import{f as z,g as r,t as d,h as H,y as o,k as E}from"../chunks/lit-WqMxC_PA.esm.js";import{D as R,S as j,d as _,W as B,e as K,g as F}from"../chunks/routes-DguZveS3.esm.js";import{p as O}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{c as V,d as Y,e as S}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{u as l,A as y,d as c,a as G,i as p,_ as v}from"../chunks/localize-Btu9xYcE.esm.js";import{c as N}from"../chunks/events-Dki0ka4F.esm.js";import{M as q}from"../chunks/beam-errors-Ci0d3926.esm.js";import"./select-subscription-nonprofit.esm.js";import"./subscription-impact.esm.js";import{partnerLogosConfigDefaults as J}from"./beam-partner-logos.esm.js";import{makeApiKeyHeader as x}from"../utils/makeApiKeyHeader.esm.js";import{_ as D}from"../chunks/loading-template-DG4lkIIc.esm.js";import{c as Q}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import"../chunks/promo-types-DKAOFHJr.esm.js";import"../utils/logger.esm.js";import"../chunks/lodash-D3TLHRR_.esm.js";import"../utils/local-storage.esm.js";import"../chunks/share-button-DmjRJmXh.esm.js";import"../chunks/is-all-html-elements-fcB7UUA1.esm.js";import"../chunks/share-button-M8cMa6ol.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";import"../chunks/_share-dialog-dependencies-dHlBUqo0.esm.js";import"../chunks/responsive-BR8qUfBa.esm.js";const g={en:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},fr:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},de:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},es:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},it:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},pl:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"},ja:{changeNonprofitButton:()=>"Change Nonprofit",previousImpactHeader:()=>"Your Previous Impact",previousNonprofitButton:()=>"Back to Previous Nonprofit",supportAgainButton:()=>"Support Again",via:()=>"via",showAllButton:()=>"Show All",showLessButton:()=>"Show Less"}};var X=Object.defineProperty,i=(M,t,n,s)=>{for(var a=void 0,b=M.length-1,u;b>=0;b--)(u=M[b])&&(a=u(t,n,a)||a);return a&&X(t,n,a),a};const $=3,Z=0,tt=1,et=98;class e extends H{constructor(){super(...arguments),this.baseUrl=R,this.lang="en",this.debug=!1,this.draftConfig=!1,this.activeWidget=null,this.nonprofitId=null,this.beamUserId=null,this.eligibleNonprofits=[],this.showAllTiles=!1,this.isMobile=window.innerWidth<720,this.dropdownVisible=!1,this.emojis=["\u{1F44F}","\u{1F4AA}","\u{1F64C}","\u2728","\u{1F947}"],this.subscriptionDataController=new y(this,this.fetchSubscription),this.eligibleNonprofitsDataController=new y(this,this.fetchEligibleNonprofits),this.personalImpactDataController=new y(this,this.fetchImpact)}get configLang(){return j[this.lang]||"en"}async firstUpdated(){if(!this.email&&!this.partnerUserId)throw new q(["email","partnerUserId"],"One of the following properties needs to be specified: email, partnerUserId ");S(["apiKey","subscriptionId"],this),await this.loadWidget()}async loadWidget(){await Promise.all([this.fetchEligibleNonprofits(),this.fetchSubscription()]),await this.fetchImpact(),this.activeWidget=this.nonprofitId?"subscription-impact":"select-subscription-nonprofit"}async fetchEligibleNonprofits(){S(["apiKey","subscriptionId"],this);const t=await _({baseUrl:this.baseUrl,headers:x(this.apiKey),requestBody:{storeId:this.storeId||void 0,postalCode:this.postalCode||void 0,countryCode:this.countryCode||void 0,widgetName:B.subscription_management,version:"1.0.0"}});return this.storeId=t.store.id,this.eligibleNonprofits=t.nonprofits,this.eligibleNonprofitsDataController.data=t,t}async fetchSubscription(){S(["apiKey","subscriptionId"],this);const t=await K({baseUrl:this.baseUrl,headers:x(this.apiKey),requestBody:{remoteSubscriptionId:this.subscriptionId,email:this.email,partnerUserId:this.partnerUserId}});return this.beamUserId=t.beamUserId,this.nonprofitId=t.nonprofit?.id||null,t}async fetchImpact(){S(["apiKey"],this);const t=await F({baseUrl:this.baseUrl,headers:x(this.apiKey),queryParams:{beamUserId:this.beamUserId?this.beamUserId:void 0,widgetName:"subscription-management",version:"1.0.0",lang:this.configLang}});return this.personalImpactDataController.data=t,t}getDisplayablePreviousImpacts(){const t=this.personalImpactDataController.data?.personal;return!t||t?.length<1?[]:t.filter(n=>!(!n.nonprofit.includeInPersonalImpact||n.nonprofit.id===this.nonprofitId&&(!n.impact.goalCompletionText||n.impact.goalCompletionText?.length<1)))}handleSwapNonprofitButtonClick(){this.activeWidget="select-subscription-nonprofit"}handleBackToSubscriptionImpactButtonClick(){this.activeWidget="subscription-impact"}handleSupportAgainButtonClick(t,n){this.activeWidget="select-subscription-nonprofit",this.selectedNonprofitId=t;const s=new N({selectedNonprofitId:t,nonprofitName:n,source:B.subscription_management,timestamp:new Date});this.dispatchEvent(s)}handleNonprofitSelect(t){if(!(t instanceof N))return;const{selectedNonprofitId:n}=t.detail;this.nonprofitId=n??null,this.activeWidget="subscription-impact"}isNonprofitEligible(t){return this.eligibleNonprofits.some(n=>n.nonprofit.id===t)}shouldDisplayProgressBar(t){return t>tt&&t<et}get cssVariables(){const t={...J,...O,"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit","--beam-SubscriptionManagement-widgetContainer-borderColor":"#d5d5d5","--beam-SubscriptionManagement-widgetContainer-borderRadius":"4px","--beam-SubscriptionManagement-widgetContainer-padding":"8px 20px","--beam-SubscriptionManagement-widgetContainer-backgroundColor":"inherit","--beam-SubscriptionManagement-widgetContainer-maxWidth":"820px","--beam-SubscriptionManagement-logo-align-desktop":"left","--beam-SubscriptionManagement-logo-align-mobile":"center","--beam-SubscriptionManagement-previousImpact-cardStyle":"'selected_icon'","--beam-SubscriptionManagement-header-padding":"10px 20px 10px 0px","--beam-SubscriptionManagement-header-borderRadius":"0px","--beam-SubscriptionManagement-header-backgroundColor":"#fff","--beam-SubscriptionManagement-header-meatballsMenu-fontSize":"24px","--beam-SubscriptionManagement-header-meatballsMenu-color":"24px","--beam-SubscriptionManagement-lineBreak-color":"#ddd","--beam-SubscriptionManagement-lineBreak-width":"1px","--beam-SubscriptionManagement-lineBreak-margin":"10px 0 20px 0","--beam-SubscriptionManagement-tile-marginBottom":"20px","--beam-SubscriptionManagement-tile-border-width":"0px","--beam-SubscriptionManagement-tile-border-color":"#ddd","--beam-SubscriptionManagement-tile-padding":"12.5px","--beam-SubscriptionManagement-tile-borderRadius":"8px","--beam-SubscriptionManagement-tile-background":"#f8fbfb","--beam-SubscriptionManagement-tileContent-gap":" 15px","--beam-SubscriptionManagement-tileContent-padding":"5px 0px","--beam-SubscriptionManagement-tile-icon-borderRadius":"4px","--beam-SubscriptionManagement-tile-icon-height":"28px","--beam-SubscriptionManagement-tile-icon-background-borderRadius":"50%","--beam-SubscriptionManagement-tile-icon-background-width":"50px","--beam-SubscriptionManagement-tile-icon-background-height":"50px","--beam-SubscriptionManagement-tile-icon-background-backgroundColor":"#0a323c","--beam-SubscriptionManagement-tile-icon-background-padding":"10px","--beam-SubscriptionManagement-blockTileDescription-gap":"5px","--beam-SubscriptionManagement-blockTileDescription-padding":"0px","--beam-SubscriptionManagement-blockTileDescription-lineHeight":"130%","--beam-SubscriptionManagement-blockTileDescription-progressBar-width-desktop":"60%","--beam-SubscriptionManagement-blockTileDescription-progressBar-width-mobile":"100%","--beam-SubscriptionManagement-subWidgetContainer-padding":"0px 0px 10px","--beam-SubscriptionManagement-previousImpactContainer-padding-desktop":"10px 24px 10px 0px","--beam-SubscriptionManagement-previousImpactContainer-padding-mobile":"0px","--beam-SubscriptionManagement-dropDown-padding":"15px 8px","--beam-SubscriptionManagement-dropDown-borderRadius":"8px","--beam-SubscriptionManagement-dropDown-backgroundColor":"#f8fbfb","--beam-SubscriptionManagement-dropDown-boxShadow":"0px 4px 28px 0px rgba(0, 0, 0, 0.04)","--beam-SubscriptionManagement-dropDown-width":"128px","--beam-SubscriptionManagement-dropDown-hover-backgroundColor":"#E1F1EE","--beam-SubscriptionManagement-dropDownOptions-textDecoration":"underline",...c("--beam-SubscriptionManagement-dropDownOptions",{fontSize:"12px",fontWeight:"400",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),"--beam-SubscriptionManagement-yourPreviousImpactTitle-marginBottom":"15px",...c("--beam-SubscriptionManagement-yourPreviousImpactTitle",{fontSize:"18px",fontWeight:"bold",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),"--beam-SubscriptionManagement-yourPreviousImpact-showAllButton-textDecoration":"underline",...c("--beam-SubscriptionManagement-yourPreviousImpact-showAllButton",{fontSize:"12px",fontWeight:"bold",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),"--beam-SubscriptionManagement-tile-title-letterSpacing":"0.36px",...c("--beam-SubscriptionManagement-tile-title",{fontSize:"12px",fontWeight:"bold",lineHeight:"120%",textTransform:"uppercase",fontStyle:"normal",color:"#0a323c"}),...c("--beam-SubscriptionManagement-tile-description",{fontSize:"14px",lineHeight:"120%",fontStyle:"normal",color:"#454a47"}),...c("--beam-SubscriptionManagement-tile-via",{fontSize:"14px",lineHeight:"120%",fontStyle:"normal",color:"#454a47"}),"--beam-SubscriptionManagement-tile-nonprofitLink-textDecoration":"underline",...c("--beam-SubscriptionManagement-tile-nonprofitLink",{fontSize:"14px",fontWeight:"400",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),"--beam-SubscriptionManagement-tile-supportAgainButton-textDecoration":"underline",...c("--beam-SubscriptionManagement-tile-supportAgainButton",{fontSize:"14px",fontWeight:"400",lineHeight:"120%",textTransform:"capitalize",fontStyle:"normal",color:"#0a323c"}),"--beam-SubscriptionManagement-tile-progressBarLabel-marginLeft":"8px",...c("--beam-SubscriptionManagement-tile-progressBarLabel",{fontSize:"10px",fontWeight:"bold",fontStyle:"normal",color:"#878a92"}),"--beam-SubscriptionManagement-tile-fundedAmount-lineHeight":"16px",...c("--beam-SubscriptionManagement-tile-fundedAmount",{fontSize:"14px",fontWeight:"400",lineHeight:"120%",fontStyle:"italic",color:"#0a323c"})},n=this.eligibleNonprofitsDataController?.data?.config?.web?.theme||{},s={...t,...n};return Object.assign(Object.create({toCSS(){return G(this)}}),s)}renderPreviousImpactTiles({personalImpact:t,cardStyle:n,eligibleNonprofitConfig:s}){if(!t)return o``;if(!s)return o``;const a=this.showAllTiles?t:t.slice(0,$);let b=0;return o`
      ${a.map(u=>{const{impact:{goalCompletionText:m,description:h,goalProgressPercentage:f,goalProgressText:A},nonprofit:{cause:C,causeIconSelectedUrl:L,causeIconUrl:T,website:P,name:I,id:w}}=u,k=this.nonprofitId!==w&&this.isNonprofitEligible(w),U=k&&this.shouldDisplayProgressBar(f),W=m?`${this.emojis[b]} `:"";return b=(b+1)%this.emojis.length,o`
          <div class="tile">
            <div class="tile-header">
              <div class="tile-title">${p(this.configLang,C||"")}</div>
              ${k?o` <button
                    class="tile-support-again button"
                    @click="${()=>this.handleSupportAgainButtonClick(w,I)}"
                  >
                    ${p(this.configLang,s?.web?.additionalStrings?.supportAgainButton||"")||g[this.configLang].supportAgainButton()}
                  </button>`:o``}
            </div>
            <div class="tile-content">
              <div class="icon-background">
                <img
                  src="${n==="'selected_icon'"?L:T}"
                  alt="${C}"
                  class="icon"
                />
              </div>
              <div class="tile-description-block-container">
                <div class="tile-description-container">
                  <span class="tile-description">${p(this.configLang,h||"")}</span>
                  <span class="via"
                    >${p(this.configLang,s?.web?.additionalStrings?.via||"")||g[this.configLang].via()}</span
                  >
                  <a href="${P}" target="_blank" class="previous-impact-nonprofit-link">
                    ${p(this.configLang,I||"")}
                  </a>
                </div>
                ${U?o` <div
                      class="${this.isMobile?"tile-progress-bar-container-mobile":"tile-progress-bar-container-desktop"}"
                    >
                      <beam-progress-bar value="${f}" style="flex: 1 0;"></beam-progress-bar>
                      <span class="details-funding-progress-label">${A}</span>
                    </div>`:o``}
                <div class="funded-times">
                  ${W}${E(p(this.configLang,m))}
                </div>
              </div>
            </div>
          </div>
        `})}
    `}render(){const{data:t,loading:n,error:s}=this.eligibleNonprofitsDataController;if(n)return D();if(t?.settings?.excludeDonationsForRecurringTransactions)return o``;if(s||t==null)return this.debug?v({error:s||new Error("No data")}):"";let a;const b=this.cssVariables["--beam-SubscriptionManagement-previousImpact-cardStyle"],u=this.cssVariables["--beam-SubscriptionManagement-logo-align-desktop"],m=this.cssVariables["--beam-SubscriptionManagement-logo-align-mobile"],h=this.getDisplayablePreviousImpacts().length??0;if((this.subscriptionDataController.loading||this.eligibleNonprofitsDataController.loading||this.personalImpactDataController.loading)&&D(),(this.subscriptionDataController.error||this.eligibleNonprofitsDataController.error||this.personalImpactDataController.error)&&this.debug){if(this.subscriptionDataController.error!==null)return v({error:this.subscriptionDataController.error});if(this.eligibleNonprofitsDataController.error!==null)return v({error:this.eligibleNonprofitsDataController.error});if(this.personalImpactDataController.error!==null)return v({error:this.personalImpactDataController.error})}else a="";return this.activeWidget==="select-subscription-nonprofit"?a=o` <beam-select-subscription-nonprofit
        part="subscription-nonprofit"
        storeId="${this.storeId}"
        subscriptionId="${this.subscriptionId}"
        nonprofitId=${this.nonprofitId}
        selectedNonprofitId=${this.selectedNonprofitId}
        baseUrl="${this.baseUrl}"
        apiKey="${this.apiKey}"
        postalCode="${this.postalCode}"
        countryCode="${this.countryCode}"
        lang="${this.lang}"
        ?draftConfig="${this.draftConfig}"
        ?debug="${this.debug}"
        @beamnonprofitselect="${f=>this.handleNonprofitSelect(f)}"
      ></beam-select-subscription-nonprofit>`:this.activeWidget==="subscription-impact"&&(a=o`
        <beam-subscription-impact
          part="subscription-impact"
          baseUrl="${this.baseUrl}"
          apiKey="${this.apiKey}"
          storeId="${this.storeId}"
          beamUserId="${this.beamUserId}"
          nonprofitId="${this.nonprofitId}"
          lang="${this.lang}"
          ?draftConfig="${this.draftConfig}"
          ?debug="${this.debug}"
        ></beam-subscription-impact>
      `),o`
      <style>
        :host {
          ${this.cssVariables.toCSS()}
        }
      </style>
      <div class="widget-container">
        <div class="header">
          <div class="header-content">
            <div
              class="logo ${this.isMobile?m==="center"?"center-align-logo":"left-align-logo":u==="center"?"center-align-logo":"left-align-logo"}"
            >
              <beam-partner-logos
                partnerName="${this.eligibleNonprofitsDataController.data?.chain.name}"
                partnerLogoUrl="${this.eligibleNonprofitsDataController.data?.chain.logoUrl}"
              ></beam-partner-logos>
            </div>
            ${this.nonprofitId?o` <div class="meatballsMenu" @click="${()=>this.dropdownVisible=!this.dropdownVisible}">
                  <span>&#8230;</span>
                  <div class="dropdown-container ${this.dropdownVisible?"visible":""}">
                    ${this.activeWidget==="select-subscription-nonprofit"?o`<button
                          @click="${this.handleBackToSubscriptionImpactButtonClick}"
                          class="drop-down-options button"
                        >
                          ${p(this.configLang,t?.config?.web?.additionalStrings?.previousNonprofitButtonText||"")||g[this.configLang].previousNonprofitButton()}
                        </button>`:this.activeWidget==="subscription-impact"?o`<button @click="${this.handleSwapNonprofitButtonClick}" class="drop-down-options button">
                          ${p(this.configLang,t?.config?.web?.additionalStrings?.changeNonprofitButtonText||"")||g[this.configLang].changeNonprofitButton()}
                        </button>`:""}
                  </div>
                </div>`:o``}
          </div>
        </div>
        <div class="sub-widget-container" part="previous-impact">${a}</div>
        ${h>Z?o` <div class="line-break"></div>

              <div
                class="previous-impact-container ${this.isMobile?"--beam-SubscriptionManagement-previousImpactContainer-padding-mobile":"--beam-SubscriptionManagement-previousImpactContainer-padding-desktop"}"
              >
                <h2 class="previous-impact-title">
                  ${p(this.configLang,t?.config?.web?.additionalStrings?.previousImpactHeader||"")||g[this.configLang].previousImpactHeader()}
                </h2>
                <div class="cardGrid">
                  ${this.renderPreviousImpactTiles({personalImpact:this.getDisplayablePreviousImpacts(),cardStyle:b,eligibleNonprofitConfig:this.eligibleNonprofitsDataController.data?.config})}
                </div>
                ${h>$?o`
                      <div class="previous-impact-link-container">
                        <button
                          @click="${()=>this.showAllTiles=!this.showAllTiles}"
                          class="previous-impact-link button"
                        >
                          ${this.showAllTiles?p(this.configLang,t?.config?.web?.additionalStrings?.showLessButton||"")||g[this.configLang].showLessButton():p(this.configLang,t?.config?.web?.additionalStrings?.showAllButton||"")||g[this.configLang].showAllButton()}
                        </button>
                      </div>
                    `:o``}
              </div>`:o``}
      </div>
    `}}e.tagName="beam-subscription-management",e.styles=[V,z`
      :host {
        display: block;
        font-family: var(--beam-fontFamily);
        font-style: var(--beam-fontStyle);
        font-size: var(--beam-fontSize);
        background-color: var(--beam-backgroundColor);
        color: var(--beam-textColor);
        word-break: normal;
      }
      .drop-down-options {
        text-decoration: var(--beam-SubscriptionManagement-dropDownOptions-textDecoration);
        ${l("--beam-SubscriptionManagement-dropDownOptions")};
      }
      .widget-container {
        background-color: var(--beam-SubscriptionManagement-widgetContainer-backgroundColor);
        border: 1px solid var(--beam-SubscriptionManagement-widgetContainer-borderColor);
        border-radius: var(--beam-SubscriptionManagement-widgetContainer-borderRadius);
        padding: var(--beam-SubscriptionManagement-widgetContainer-padding);
        max-width: var(--beam-SubscriptionManagement-widgetContainer-maxWidth);
      }
      .header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: var(--beam-SubscriptionManagement-header-padding);
        border-radius: var(--beam-SubscriptionManagement-header-borderRadius);
        background-color: var(--beam-SubscriptionManagement-header-backgroundColor);
      }
      .header-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
      .button {
        cursor: pointer;
        background: none;
        border: none;
      }
      .header .meatballsMenu {
        position: relative;
        cursor: pointer;
      }
      .header .meatballsMenu span {
        font-size: var(--beam-SubscriptionManagement-header-meatballsMenu-fontSize);
        color: var(--beam-SubscriptionManagement-header-meatballsMenu-color);
      }
      .dropdown-container {
        display: none;
        position: absolute;
        right: 0;
        z-index: 1;
        padding: var(--beam-SubscriptionManagement-dropDown-padding);
        border-radius: var(--beam-SubscriptionManagement-dropDown-borderRadius);
        background: var(--beam-SubscriptionManagement-dropDown-backgroundColor);
        box-shadow: var(--beam-SubscriptionManagement-dropDown-boxShadow);
        width: var(--beam-SubscriptionManagement-dropDown-width);
      }
      .dropdown-container.visible {
        display: block;
      }
      .dropdown-container:hover {
        background-color: var(--beam-SubscriptionManagement-dropDown-hover-backgroundColor);
      }
      .line-break {
        border-top: var(--beam-SubscriptionManagement-lineBreak-width) solid
          var(--beam-SubscriptionManagement-lineBreak-color);
        margin: var(--beam-SubscriptionManagement-lineBreak-margin);
      }
      .tile {
        border: var(--beam-SubscriptionManagement-tile-border-width) solid
          var(--beam-SubscriptionManagement-tile-border-color);
        padding: var(--beam-SubscriptionManagement-tile-padding);
        border-radius: var(--beam-SubscriptionManagement-tile-borderRadius);
        background: var(--beam-SubscriptionManagement-tile-background);
      }
      .tile-title {
        letter-spacing: var(--beam-SubscriptionManagement-tile-title-letterSpacing);
        ${l("--beam-SubscriptionManagement-tile-title")};
      }
      .tile-content {
        display: flex;
        flex-direction: row;
        gap: var(--beam-SubscriptionManagement-tileContent-gap);
        padding: var(--beam-SubscriptionManagement-tileContent-padding);
      }
      .tile-description-block-container {
        flex: 1 1 67%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--beam-SubscriptionManagement-blockTileDescription-gap);
        padding: var(--beam-SubscriptionManagement-blockTileDescription-padding);
        line-height: var(--beam-SubscriptionManagement-blockTileDescription-lineHeight);
      }
      .sub-widget-container {
        padding: var(--beam-SubscriptionManagement-subWidgetContainer-padding);
      }
      .previous-impact-title {
        margin-bottom: var(--beam-SubscriptionManagement-yourPreviousImpactTitle-marginBottom);
        ${l("--beam-SubscriptionManagement-yourPreviousImpactTitle")};
      }
      .tile-description {
        ${l("--beam-SubscriptionManagement-tile-description")};
      }
      .via {
        ${l("--beam-SubscriptionManagement-tile-via")};
      }
      .center-align-logo {
        margin-left: auto;
        margin-right: auto;
      }
      .left-align-logo {
        margin-left: 0;
        margin-right: auto;
      }
      .previous-impact-link-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .previous-impact-link {
        text-decoration-line: var(--beam-SubscriptionManagement-yourPreviousImpact-showAllButton-textDecoration);
        ${l("--beam-SubscriptionManagement-yourPreviousImpact-showAllButton")};
      }
      .icon-background {
        width: var(--beam-SubscriptionManagement-tile-icon-background-width);
        height: var(--beam-SubscriptionManagement-tile-icon-background-height);
        border-radius: var(--beam-SubscriptionManagement-tile-icon-background-borderRadius);
        padding: var(--beam-SubscriptionManagement-tile-icon-background-padding);
        overflow: hidden;
        background: var(--beam-SubscriptionManagement-tile-icon-background-backgroundColor);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .icon {
        display: block;
        margin: auto;
        border-radius: var(--beam-SubscriptionManagement-tile-icon-borderRadius);
        height: var(--beam-SubscriptionManagement-tile-icon-height);
      }
      .tile-progress-bar-container-desktop {
        display: flex;
        align-items: center;
        width: var(--beam-SubscriptionManagement-blockTileDescription-progressBar-width-desktop);
      }
      .tile-progress-bar-container-mobile {
        display: flex;
        align-items: center;
        width: var(--beam-SubscriptionManagement-blockTileDescription-progressBar-width-mobile);
      }
      .previous-impact-nonprofit-link {
        text-decoration-line: var(--beam-SubscriptionManagement-tile-nonprofitLink-textDecoration);
        ${l("--beam-SubscriptionManagement-tile-nonprofitLink")};
      }
      .details-funding-progress-label {
        white-space: nowrap;
        flex: 0 1;
        margin-left: var(--beam-SubscriptionManagement-tile-progressBarLabel-marginLeft);
        ${l("--beam-SubscriptionManagement-tile-progressBarLabel")};
      }
      .funded-times {
        line-height: var(--beam-SubscriptionManagement-tile-fundedAmount-lineHeight);
        ${l("--beam-SubscriptionManagement-tile-fundedAmount")};
      }
      .tile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tile-support-again {
        text-decoration-line: var(--beam-SubscriptionManagement-tile-supportAgainButton-textDecoration);
        ${l("--beam-SubscriptionManagement-tile-supportAgainButton")};
      }
    `,Q({gap:"var(--beam-SubscriptionManagement-tile-marginBottom)",itemMinWidth:"250px",columnCount:"1"})],i([r({type:String})],e.prototype,"baseUrl"),i([r({type:String})],e.prototype,"apiKey"),i([r({type:String})],e.prototype,"subscriptionId"),i([r({type:Number,reflect:!0})],e.prototype,"storeId"),i([r({type:String})],e.prototype,"email"),i([r({type:String})],e.prototype,"partnerUserId"),i([r({type:String})],e.prototype,"postalCode"),i([r({type:String})],e.prototype,"countryCode"),i([r({type:Number,reflect:!0})],e.prototype,"selectedNonprofitId"),i([r({type:String})],e.prototype,"lang"),i([r({type:Object})],e.prototype,"cart"),i([r({type:Boolean})],e.prototype,"debug"),i([r({type:Boolean})],e.prototype,"draftConfig"),i([d()],e.prototype,"activeWidget"),i([d()],e.prototype,"nonprofitId"),i([d()],e.prototype,"beamUserId"),i([d()],e.prototype,"eligibleNonprofits"),i([d()],e.prototype,"showAllTiles"),i([d()],e.prototype,"isMobile"),i([d()],e.prototype,"dropdownVisible"),i([d()],e.prototype,"emojis"),Y(e);export{e as BeamSubscriptionManagement};
//# sourceMappingURL=subscription-management.esm.js.map