@beamimpact/web-sdk/dist/components/community-impact.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 x,g as d,t as I,h as v,k as u,y as g,m as b}from"../chunks/lit-WqMxC_PA.esm.js";import{p as $}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{partnerLogosConfigDefaults as T}from"./beam-partner-logos.js";import{c as k,d as w,e as S}from"../chunks/enforce-config-Ba1JkOHs.esm.js";import{u as n,A as L,i as s,_ as f,d as m,a as A}from"../chunks/localize-C25pEGnx.esm.js";import{D as F,g as z,W as D,S as M}from"../chunks/routes-BvX92EDq.esm.js";import{_ as E}from"../chunks/loading-template-DG4lkIIc.esm.js";import{B}from"../chunks/beam-errors-Ci0d3926.esm.js";import{c as C}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import"../utils/logger.js";import"../chunks/promo-types-DKAOFHJr.esm.js";const y={en:{fundedTimes:({times:e=0})=>`Funded <b>${e}</b> ${e>1?"times":"time"} so far`,learnMore:()=>"Learn more",seeAll:()=>"See All"},fr:{fundedTimes:({times:e=0})=>`Financ\xE9 <b>${e}</b> fois pour l'instant`,learnMore:()=>"En savoir plus",seeAll:()=>"Voir tout"},de:{fundedTimes:({times:e=0})=>`<b>${e}</b> Mal finanziert`,learnMore:()=>"Mehr erfahren",seeAll:()=>"Alle anzeigen"},es:{fundedTimes:({times:e=0})=>`Financiado <b>${e}</b> ${e>1?"vez":"veces"}`,learnMore:()=>"Saber m\xE1s",seeAll:()=>"Ver Todo"},it:{fundedTimes:({times:e=0})=>`Finanziato <b>${e}</b> ${e>1?"volta":"volte"}`,learnMore:()=>"Scopri di pi\xF9",seeAll:()=>"Vedi Tutto"},pl:{fundedTimes:({times:e=0})=>`Udzielono wsparcia <b>${e}</b> ${e>1?"razy":"raz"}`,learnMore:()=>"Dowiedz si\u0119 wi\u0119cej",seeAll:()=>"Zobacz wszystko"},ja:{fundedTimes:({times:e=0})=>`\u73FE\u5728\u307E\u3067\u306B<b>${e}</b>\u56DE\u3001\u3092\u9054\u6210`,learnMore:()=>"\u8A73\u3057\u304F\u898B\u308B",seeAll:()=>"\u3059\u3079\u3066\u898B\u308B"}};var U=Object.defineProperty,l=(e,a,t,r)=>{for(var o=void 0,i=e.length-1,p;i>=0;i--)(p=e[i])&&(o=p(a,t,o)||o);return o&&U(a,t,o),o};class c extends v{constructor(){super(...arguments),this.baseUrl=F,this.cardStyle="image",this.lang="en",this.debug=!1,this.draftConfig=!1,this.selectedFilter=null,this.getImpactData=async()=>(S(["apiKey","chainId"],this),z({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{chainId:this.chainId,personalImpactLimit:0,widgetName:D.community_impact,version:"1.0.0",lang:this.configLang,draftConfig:this.draftConfig}})),this.impactDataController=new L(this,this.getImpactData),this.renderImageCard=a=>{const t=`${a.nonprofit?.name} image`,r=`Learn more about ${a.nonprofit?.name}`;return g`
      <div class="image-card" part="nonprofit-card" style="display: flex; flex-direction: column;">
        <div
          class="image-card-image-box"
          style="background-image: url('${a.imageUrl}');"
          aria-label="${t}"
        >
          <p class="image-card-cause">${s(this.configLang,a.nonprofit?.cause||"")}</p>
          <h2 class="image-card-name">${s(this.configLang,a.nonprofit?.name)}</h2>
        </div>
        <div
          style="padding: 5px 15px 15px; flex: 1 1 auto; border-radius: 0px; border: none; display: flex; flex-direction: column;"
        >
          <div class="image-card-progress" style="display: flex; align-items: center;">
            <beam-progress-bar style="flex-grow: 1;" value="${a.impact?.goalProgressPercentage}"></beam-progress-bar>
            <span class="image-card-progressText" style="margin-left: 20px;"
              >${s(this.configLang,a.impact?.goalProgressText)}</span
            >
          </div>
          <div class="image-card-description">
            ${u(s(this.configLang,a.impact?.description||""))}
          </div>
          <div style="display: flex; align-items: end; flex-wrap: wrap; gap: 10px; flex: 1;" class="image-card-footer">
            <div class="image-card-goal-completion" style="flex-grow: 1;">
              ${u(s(this.configLang,a.impact?.goalCompletionText))}
            </div>
            <a
              href="${a.nonprofit?.website}"
              target="_blank"
              class="image-card-link"
              style="color: var(--beam-CommunityImpact-imageCard-link-color, inherit); white-space: nowrap"
              aria-label="${r}"
            >
              ${s(this.configLang,a.nonprofit?.websiteLinkText)}<span class="image-card-link-arrow"
                >&nbsp;&rsaquo;</span
              >
            </a>
          </div>
        </div>
      </div>
    `},this.renderIconCard=a=>{const t=`${a.nonprofit?.name} icon`,r=`Learn more about ${a.nonprofit?.name}`;return g`
      <div class="icon-card" part="nonprofit-card" style="display: flex; flex-direction: column;">
        <img class="icon-card-icon" src="${a.nonprofit?.causeIconUrl}" alt="${t}" />
        <p class="icon-card-cause">${s(this.configLang,a.nonprofit?.cause??"")}</p>
        <h2 class="icon-card-name">${s(this.configLang,a.nonprofit?.name??"")}</h2>
        <div class="icon-card-description" part="nonprofit-card-description" style="flex: 1;">
          ${u(s(this.configLang,a.impact?.description||""))}
        </div>
        <div class="icon-card-footer" style="width: 100%; text-align: center;">
          <div class="icon-card-progress" style="display: flex; align-items: center; width: 100%;">
            <beam-progress-bar style="flex: 1 0;" value="${a.impact?.goalProgressPercentage}"></beam-progress-bar>
            <span style="text-align: right; flex: 0 1; white-space: nowrap" class="icon-card-progressText"
              >${s(this.configLang,a.impact?.goalProgressText)}</span
            >
          </div>
          <div class="icon-card-goal-completion">
            ${u(s(this.configLang,a.impact?.goalCompletionText))}
          </div>
          <a
            href="${a.nonprofit?.website}"
            target="_blank"
            class="icon-card-link"
            style="color: var(--beam-CommunityImpact-iconCard-link-color, inherit); display: block"
            aria-label="${r}"
            >${s(this.configLang,a.nonprofit?.websiteLinkText)||y[this.configLang].learnMore()}<span class="icon-card-link-arrow">&nbsp;&rsaquo;</span>
          </a>
          ${a.impact?.goalCompletionText===""?g`<div class="icon-card-goal-completion">&nbsp;</div>`:""}
        </div>
      </div>
    `},this.renderCards=({nonprofits:a})=>g`
      <div class="beam-nonprofit-${this.cardStyle}-cards" part="nonprofit-cards">
        ${a?.map(this.cardStyle==="image"?this.renderImageCard:this.renderIconCard)}
      </div>
    `}get configLang(){return M[this.lang]||"en"}async updated(a){const t=["chainId","baseUrl","lang"];for(const r of t)if(a.has(r)){this.impactDataController.exec();break}}renderFilterTabs({nonprofits:a}){const t=Array.from(new Set(a.flatMap(i=>i.filters||[])));if(t.length===0)return"";const r=()=>{this.selectedFilter=null},o=i=>{this.selectedFilter===i?this.selectedFilter=null:this.selectedFilter=i};return g` <div
      class="beam-filter-tabs"
      part="filters"
      style="display: inline-flex; flex-wrap: wrap; gap: 0.5em 1em"
    >
      <span
        tabindex="0"
        style="${b({"padding-bottom":"1px","border-bottom-width":"2px","border-bottom-style":"solid","border-bottom-color":this.selectedFilter===null?"currentColor":"transparent",cursor:"pointer"})}"
        @click=${r}
        @keydown=${i=>{["Enter"," "].includes(i.key)&&(i.preventDefault(),r())}}
        >${y[this.configLang].seeAll()}</span
      >
      ${t.map(i=>g`<span
            tabindex="0"
            @click=${()=>o(i)}
            @keydown=${p=>{["Enter"," "].includes(p.key)&&(p.preventDefault(),o(i))}}
            style="${b({"padding-bottom":"1px","border-bottom-width":"2px","border-bottom-style":"solid","border-bottom-color":this.selectedFilter===i?"currentColor":"transparent",cursor:"pointer"})}"
            >${i}</span
          >`)}
    </div>`}render(){const{selectedFilter:a}=this,{data:t,error:r,loading:o}=this.impactDataController;if(o)return E();if(r)return this.debug?f({error:r}):"";if(t==null)return this.debug?f({error:new B("Missing data")}):"";const{community:i}=t,p=a?i.filter(h=>h.filters?.includes(a)):i;return g`
      <style>
        :host {
          ${this.cssVariables.toCSS()}
        }
      </style>
      <beam-partner-logos
        part="logos"
        partnerLogoUrl="${t.chain.logoUrl}"
        partnerName="${t.chain.name}"
      ></beam-partner-logos>

      ${this.renderFilterTabs({nonprofits:i})} ${this.renderCards({nonprofits:p})}
    `}get cssVariables(){const a={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"14px","--beam-lineHeight":"1","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...T,...$,"--beam-CommunityImpact-filterTabs-textalign":"left","--beam-CommunityImpact-filterTabs-marginBottom":"20px","--beam-CommunityImpact-imageCard-borderColor":"currentColor","--beam-CommunityImpact-imageCard-borderRadius":"0","--beam-CommunityImpact-imageCard-borderWidth":"1px","--beam-CommunityImpact-imageCard-backgroundColor":"inherit","--beam-CommunityImpact-imageCard-foregroundColor":"inherit",...m("--beam-CommunityImpact-filterTabs",{fontSize:"16px",marginTop:"10px",fontWeight:"bold"}),...m("--beam-CommunityImpact-imageCard-cause",{fontSize:"14px",textTransform:"uppercase",color:"#fff"}),...m("--beam-CommunityImpact-imageCard-name",{fontSize:"22px",marginTop:"0",color:"#fff"}),...m("--beam-CommunityImpact-imageCard-description",{marginTop:"10px",lineHeight:"1.3"}),"--beam-CommunityImpact-imageCard-link-color":"inherit","--beam-CommunityImpact-imageCard-linkArrow-display":"none",...m("--beam-CommunityImpact-imageCard-link",{fontSize:"12px"}),...m("--beam-CommunityImpact-imageCard-goalCompletion",{fontSize:"12px"}),"--beam-CommunityImpact-imageCard-goalCompletion-fontStyle":"italic","--beam-CommunityImpact-imageCard-progress-marginTop":"10px",...m("--beam-CommunityImpact-imageCard-progressText"),"--beam-CommunityImpact-imageCard-footer-marginTop":"10px",...m("--beam-CommunityImpact-iconCard-cause",{marginTop:"10px"}),...m("--beam-CommunityImpact-iconCard-name",{marginTop:"5px",fontWeight:"bold"}),"--beam-CommunityImpact-iconCard-progress-marginTop":"10px",...m("--beam-CommunityImpact-iconCard-progressText"),...m("--beam-CommunityImpact-iconCard-description",{marginTop:"10px",lineHeight:"1.3"}),"--beam-CommunityImpact-iconCard-description-textAlign":"left",...m("--beam-CommunityImpact-iconCard-goalCompletion",{marginTop:"10px"}),"--beam-CommunityImpact-iconCard-link-color":"inherit","--beam-CommunityImpact-iconCard-linkArrow-display":"none",...m("--beam-CommunityImpact-iconCard-link",{marginTop:"5px"})},t=(this.impactDataController.data?.community.length||0)===3?3:this.cardStyle==="icon"?4:2;a["--beam-CommunityImpact-columns"]=t.toString(),a["--beam-CommunityImpact-columns-minWidth"]=this.cardStyle==="image"?"300px":"200px";const r=this.impactDataController?.data?.config?.web?.theme||{},o={...a,...r};return Object.assign(Object.create({toCSS(){return A(this)}}),o)}}c.tagName="beam-community-impact",c.styles=[k,x`
      :host {
        display: block;
        font-family: var(--beam-fontFamily, inherit);
        font-style: var(--beam-fontStyle, inherit);
        font-size: var(--beam-fontSize, inherit);
        color: var(--beam-textColor, inherit);
        background-color: var(--beam-backgroundColor, inherit);
        line-height: var(--beam-lineHeight, 1);
        word-break: normal;
      }

      .beam-filter-tabs {
        ${n("--beam-CommunityImpact-filterTabs")}
        margin-bottom: var(--beam-CommunityImpact-filterTabs-marginBottom, 10px);
        text-align: var(--beam-CommunityImpact-filterTabs-textalign, left);
      }

      .beam-nonprofit-image-cards,
      .beam-nonprofit-icon-cards {
        margin-top: 10px;
      }

      ${C({gap:"20px",className:"beam-nonprofit-image-cards",columnCount:"var(--beam-CommunityImpact-columns)",itemMinWidth:"var(--beam-CommunityImpact-columns-minWidth)"})}

      ${C({gap:"40px",className:"beam-nonprofit-icon-cards",columnCount:"var(--beam-CommunityImpact-columns)",itemMinWidth:"var(--beam-CommunityImpact-columns-minWidth)"})}

      /* Image Style Cards */

      .image-card {
        overflow-wrap: break-word;
        border-color: var(--beam-CommunityImpact-imageCard-borderColor);
        border-style: solid;
        border-width: var(--beam-CommunityImpact-imageCard-borderWidth);
        border-radius: var(--beam-CommunityImpact-imageCard-borderRadius);
        overflow: hidden;
        background-color: var(--beam-CommunityImpact-imageCard-backgroundColor);
        color: var(--beam-CommunityImpact-imageCard-foregroundColor);
      }

      .image-card-image-box {
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 24px 16px;
        overflow-wrap: break-word;
        background-color: #555;
        background-blend-mode: overlay;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .image-card-cause {
        ${n("--beam-CommunityImpact-imageCard-cause")}
      }

      .image-card-name {
        ${n("--beam-CommunityImpact-imageCard-name")}
      }

      .image-card-progress {
        margin-top: var(--beam-CommunityImpact-imageCard-progress-marginTop);
      }

      .image-card-progressText {
        ${n("--beam-CommunityImpact-imageCard-progressText")}
      }

      .image-card-description {
        ${n("--beam-CommunityImpact-imageCard-description")}
      }

      .image-card-link {
        ${n("--beam-CommunityImpact-imageCard-link")}
      }

      .image-card-link-arrow {
        display: var(--beam-CommunityImpact-imageCard-linkArrow-display, "none");
      }

      .image-card-goal-completion {
        ${n("--beam-CommunityImpact-imageCard-goalCompletion")}
        font-style: var(--beam-CommunityImpact-imageCard-goalCompletion-fontStyle, italic);
      }

      .image-card-footer {
        margin-top: var(--beam-CommunityImpact-imageCard-footer-marginTop);
      }

      /* Icon Style Cards */

      .icon-card {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
      }

      .icon-card-icon {
        height: 50px;
      }

      .icon-card-cause {
        ${n("--beam-CommunityImpact-iconCard-cause")}
      }

      .icon-card-name {
        ${n("--beam-CommunityImpact-iconCard-name")}
      }

      .icon-card-progress {
        margin-top: var(--beam-CommunityImpact-iconCard-progress-marginTop);
      }

      .icon-card-progressText {
        ${n("--beam-CommunityImpact-iconCard-progressText")}
        margin-left: 10px;
      }

      .icon-card-description {
        ${n("--beam-CommunityImpact-iconCard-description")}
        text-align: var(--beam-CommunityImpact-iconCard-description-textAlign, left);
      }

      .icon-card-link {
        ${n("--beam-CommunityImpact-iconCard-link")}
      }

      .icon-card-link-arrow {
        display: var(--beam-CommunityImpact-iconCard-linkArrow-display, "none");
      }

      .icon-card-goal-completion {
        ${n("--beam-CommunityImpact-iconCard-goalCompletion")}
        font-style: var(--beam-CommunityImpact-iconCard-goalCompletion-fontStyle, italic);
      }

      .icon-card-footer {
        margin-top: var(--beam-CommunityImpact-iconCard-footer-marginTop);
      }
    `],l([d({type:String})],c.prototype,"apiKey"),l([d({type:Number})],c.prototype,"chainId"),l([d({type:String})],c.prototype,"baseUrl"),l([d({type:String})],c.prototype,"cardStyle"),l([d({type:String})],c.prototype,"lang"),l([d({type:Boolean})],c.prototype,"debug"),l([d({type:Boolean})],c.prototype,"draftConfig"),l([I()],c.prototype,"selectedFilter"),w(c);export{c as BeamCommunityImpact};
//# sourceMappingURL=community-impact.js.map