@beamimpact/web-sdk
Version:
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
207 lines (201 loc) • 19.1 kB
JavaScript
import{f as k,g as c,p as f,h as N,k as $,y as T}from"../chunks/lit-WqMxC_PA.esm.js";import{d as F}from"../chunks/lodash-D3TLHRR_.esm.js";import{D as U,g as D,W as A,S as R}from"../chunks/routes-DguZveS3.esm.js";import{p as j}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{u as s,A as P,i as g,_ as O,d,a as _}from"../chunks/localize-Btu9xYcE.esm.js";import{c as V,d as W,e as G}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{_ as K}from"../chunks/loading-template-DG4lkIIc.esm.js";import{logger as M}from"../utils/logger.esm.js";import"../chunks/_share-dialog-dependencies-dHlBUqo0.esm.js";import{s as h,a as q}from"../chunks/share-button-DmjRJmXh.esm.js";import{partnerLogosConfigDefaults as Y}from"./beam-partner-logos.esm.js";import{c as H}from"../chunks/responsive-BR8qUfBa.esm.js";import"../chunks/promo-types-DKAOFHJr.esm.js";import"../chunks/beam-errors-Ci0d3926.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";import"../chunks/is-all-html-elements-fcB7UUA1.esm.js";import"../chunks/share-button-M8cMa6ol.esm.js";const l={en:{descriptionTitle:({nonprofitName:a="a nonprofit"})=>`You just made an impact for ${a}`,descriptionSubtitle:({brandName:a=""})=>`Check out the impact your ${a} purchase made below.`,yourImpactTitle:()=>"You\u2019re funding",communityImpactTitle:()=>"Together we\u2019re funding",personalImpactLinkCopy:({nonprofitName:a=""})=>`Learn about ${a}`,communityImpactLinkCopy:({brandName:a=""})=>`See all of the ${a} community's impact`,impactShareButton:()=>"Share to Grow Your Impact"},fr:{descriptionTitle:({nonprofitName:a="une organisation"})=>`Vous avez cr\xE9\xE9 un impact pour ${a}`,descriptionSubtitle:({brandName:a=""})=>`D\xE9couvrez ci-dessous l'impact de votre achat ${a}.`,yourImpactTitle:()=>"Vous financez",communityImpactTitle:()=>"Ensemble, nous finan\xE7ons",personalImpactLinkCopy:({nonprofitName:a=""})=>`En savoir plus sur ${a}`,communityImpactLinkCopy:({brandName:a=""})=>`Voir tout l'impact de la communaut\xE9 ${a}`,impactShareButton:()=>"Partagez pour d\xE9velopper votre impact"},de:{descriptionTitle:({nonprofitName:a="eine Organisation"})=>`Du hast einen Beitrag f\xFCr ${a} geleistet`,descriptionSubtitle:({brandName:a=""})=>`Sieh dir unten den Beitrag an, den dein ${a} Einkauf gemacht hat.`,yourImpactTitle:()=>"Du finanzierst",communityImpactTitle:()=>"Gemeinsam finanzieren wir",personalImpactLinkCopy:({nonprofitName:a=""})=>`Mehr \xFCber ${a} erfahren`,communityImpactLinkCopy:({brandName:a=""})=>`Sieh dir den gesamten Beitrag der ${a}-Community an`,impactShareButton:()=>"Teile, um deinen Beitrag zu vergr\xF6\xDFern"},es:{descriptionTitle:({nonprofitName:a="una organizaci\xF3n"})=>`Generaste un impacto para ${a}`,descriptionSubtitle:({brandName:a=""})=>`Mira a continuaci\xF3n el impacto que tu compra de ${a} ha generado.`,yourImpactTitle:()=>"Est\xE1s financiando",communityImpactTitle:()=>"Juntos estamos financiando",personalImpactLinkCopy:({nonprofitName:a=""})=>`Conoce m\xE1s sobre ${a}`,communityImpactLinkCopy:({brandName:a=""})=>`Mira todo el impacto de la comunidad ${a}`,impactShareButton:()=>"Comparte para hacer crecer tu impacto"},it:{descriptionTitle:({nonprofitName:a="un'organizzazione"})=>`Hai creato un impatto per ${a}`,descriptionSubtitle:({brandName:a=""})=>`Scopri qui sotto l'impatto del tuo acquisto ${a}.`,yourImpactTitle:()=>"Stai finanziando",communityImpactTitle:()=>"Insieme stiamo finanziando",personalImpactLinkCopy:({nonprofitName:a=""})=>`Scopri di pi\xF9 su ${a}`,communityImpactLinkCopy:({brandName:a=""})=>`Guarda tutto l'impatto della comunit\xE0 ${a}`,impactShareButton:()=>"Condividi per far crescere il tuo impatto"},pl:{descriptionTitle:({nonprofitName:a="organizacj\u0119"})=>`Wywar\u0142a\u015B_e\u015B wp\u0142yw na ${a}`,descriptionSubtitle:({brandName:a=""})=>`Sprawd\u017A poni\u017Cej, jaki wp\u0142yw mia\u0142 Tw\xF3j zakup ${a}.`,yourImpactTitle:()=>"Finansujesz",communityImpactTitle:()=>"Razem finansujemy",personalImpactLinkCopy:({nonprofitName:a=""})=>`Dowiedz si\u0119 wi\u0119cej o ${a}`,communityImpactLinkCopy:({brandName:a=""})=>`Zobacz ca\u0142y wp\u0142yw spo\u0142eczno\u015Bci ${a}`,impactShareButton:()=>"Udost\u0119pnij, aby powi\u0119kszy\u0107 sw\xF3j wp\u0142yw"},ja:{descriptionTitle:({nonprofitName:a=""})=>`\u3042\u308A\u304C\u3068\u3046\u3054\u3056\u3044\u307E\u3059\uFF01${a}\u3078\u306E\u5BC4\u4ED8\u306B\u3088\u308A\u3001\u4E16\u754C\u306B\u78BA\u304B\u306A\u5909\u5316\u3092\u3082\u305F\u3089\u3057\u307E\u3057\u305F\u3002`,descriptionSubtitle:({brandName:a=""})=>`${a}\u3067\u306E\u3054\u8CFC\u5165\u304C\u3001\u3069\u306E\u3088\u3046\u306B\u4EBA\u3005\u306E\u5F79\u306B\u7ACB\u3064\u304B\u3092\u3054\u78BA\u8A8D\u304F\u3060\u3055\u3044\u3002`,yourImpactTitle:()=>"\u3042\u306A\u305F\u306E\u652F\u63F4\u5B9F\u7E3E",communityImpactTitle:()=>"\u79C1\u305F\u3061\u306F\u5171\u306B\u652F\u63F4\u3057\u3066\u3044\u307E\u3059",personalImpactLinkCopy:({nonprofitName:a=""})=>`${a} \u306B\u3064\u3044\u3066\u8A73\u3057\u304F\u898B\u308B`,communityImpactLinkCopy:({brandName:a=""})=>`${a}\u30B3\u30DF\u30E5\u30CB\u30C6\u30A3\u306E\u6D3B\u52D5\u5B9F\u7E3E\u3092\u3059\u3079\u3066\u898B\u308B `,impactShareButton:()=>"SNS\u3067\u30B7\u30A7\u30A2\u3059\u308B"}};var J=Object.defineProperty,i=(a,e,r,p)=>{for(var n=void 0,m=a.length-1,o;m>=0;m--)(o=a[m])&&(n=o(e,r,n)||n);return n&&J(e,r,n),n};class t extends N{constructor(){super(...arguments),this.baseUrl=U,this.lang="en",this.debug=!1,this.draftConfig=!1,this.getImpactData=async()=>(G(["apiKey","userId","nonprofitId"],this),await D({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{nonprofitId:this.nonprofitId,beamUserId:this.userId,personalImpactLimit:1,communityImpactLimit:1,storeId:this.storeId,widgetName:A.impact_overview,version:"1.0.0",draftConfig:this.draftConfig,lang:this.configLang,discountCodes:this.discountCodes&&this.discountCodes.length>0?this.discountCodes:void 0,transactionId:this.transactionId??void 0}})),this.impactDataController=new P(this,this.getImpactData),this.resizeElements=F(()=>{h(this.impactTitleRefs),h(this.impactDescriptionRefs),h(this.impactLinkRefs),h(this.goalCompletionTextRefs)},50,{maxWait:50,leading:!0})}get configLang(){return R[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.resizeElements)}async updated(e){const r=["baseUrl","storeId","apiKey","userId","lang","discountCodes"];for(const p of r)if(e.has(p)){await this.impactDataController.exec();break}this.resizeElements(),await this.handleFontLoad(this.resizeElements)}disconnectedCallback(){window.removeEventListener("resize",this.resizeElements),document.fonts.removeEventListener("loadingdone",this.resizeElements),super.disconnectedCallback()}async handleFontLoad(e){if(document.fonts.status==="loading")return await document.fonts.ready.catch(r=>M.error(r)),e()}renderCard({imageUrl:e,title:r,percentFunded:p,goalProgressText:n,description:m,urlCopy:o,impactUrl:b,isImage:u,cardType:y,goalCompletionText:v}){return T`
<div class="impact-card ${u?"":"icon"}" part="impact-card">
<div class="${u?"":"icon-background "}">
<img src="${e}" alt="${r}" class="${u?"impact-card-image":"impact-card-icon"}" />
</div>
<div class="${u?"":"impact-icon-card-content"}" style="margin: 12px;">
<div class="impact-card-title">${r}</div>
<p class="impact-card-description">${$(m)}</p>
<div class="impact-card-goalCompletionText">
<p>${$(v)}</p>
</div>
<div class="impact-card-progress" style="display: flex; align-items: center;">
<beam-progress-bar
value="${p}"
style="flex: 1 0;"
class="impact-card-progressbar"
></beam-progress-bar>
<span class="impact-card-progressText" style="flex: 0 1; margin-left: 10px; white-space: nowrap;"
>${g(this.configLang,n)}</span
>
</div>
<p class="impact-link" part="impact-link">
<a href="${b}" target="_blank" rel="noopener noreferrer">
${y==="personal"?l[this.configLang].personalImpactLinkCopy({nonprofitName:o}):l[this.configLang].communityImpactLinkCopy({brandName:o})}<span class="impact-link-arrow"> ›</span>
</a>
</p>
</div>
</div>
`}render(){const{data:e,loading:r,error:p}=this.impactDataController;if(r)return K();if(p)return this.debug?O({error:p}):"";if(e==null)return this.debug?O({error:new Error("No data")}):"";const n=this.impactDataController.data?.chain.name,m=this.cssVariables["--beam-ImpactOverview-cardStyle"],o=m==="'image'",b=m==="'selected_icon'",u=e.personal[0]?.imageUrl||"",y=e.community[0].imageUrl||"",v=e.personal[0]?.nonprofit.causeIconUrl,C=e.personal[0]?.nonprofit.causeIconSelectedUrl,B=o?u:b?C:v,S=o?y:b?C:v,E=this.impactDataController.data?.promoAssetUrl||this.impactDataController.data?.personalImpactAssetUrl,w=this.cssVariables["--beam-ImpactOverview-share-button-display"]!=="none",L=w&&this.cssVariables["--beam-ImpactOverview-share-button-display-mobile"]!=="none",x=w&&this.cssVariables["--beam-ImpactOverview-share-button-display-desktop"]!=="none",z=this.cssVariables["--beam-ImpactOverview-share-button-icon-name"]||"share-2";let I="d-none";return L?I=x?"d-block":"d-lg-none":I=x?"d-none d-lg-block":"d-none",T`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<div>
<beam-partner-logos
partnerLogoUrl="${e.chain.logoUrl}"
partnerName="${e.chain.name}"
part="logos"
></beam-partner-logos>
</div>
<div class="description">
<div class="title" part="title">
${g(this.configLang,e.config?.web?.title)||l[this.configLang].descriptionTitle({nonprofitName:e.personal[0].nonprofit.name})}
</div>
<div class="subtitle" part="subtitle">
${g(this.configLang,e.config?.web?.description)||l[this.configLang].descriptionSubtitle({brandName:e.chain.name})}
</div>
</div>
<div class="${o?"impact-image-cards":"impact-icon-cards"}" part="impact-cards">
<div class="impact your-impact ${o?"image-card-container":"icon-card-container"}">
${this.renderCard({isImage:o,imageUrl:B||"",title:l[this.configLang].yourImpactTitle(),percentFunded:e.personal[0]?.impact?.goalProgressPercentage||0,goalProgressText:e.personal[0]?.impact?.goalProgressText,description:g(this.configLang,e.personal[0]?.impact?.description||""),urlCopy:e.personal[0].nonprofit?.name,impactUrl:e.personal[0].nonprofit?.website||"",cardType:"personal",goalCompletionText:e.personal[0].impact.goalCompletionText})}
</div>
<div class="impact community-impact ${o?"image-card-container":"icon-card-container"}">
${this.renderCard({isImage:o,imageUrl:S||"",title:l[this.configLang].communityImpactTitle(),percentFunded:e.community[0].impact?.goalProgressPercentage||0,goalProgressText:e.community[0]?.impact?.goalProgressText,description:g(this.configLang,e.community[0].impact?.description||""),urlCopy:e.chain.name,impactUrl:e.store.communityPageURL||e.chain.communityImpactUrl||e.personal[0].nonprofit.website||"",cardType:"community",goalCompletionText:e.community[0].impact.goalCompletionText})}
</div>
</div>
<div class="footer ${I} shareButtonContainer" part="social-share">
<beam-share-button
imageUrl="${E}"
brandName="${n}"
shareIcon="${z}"
buttonText="${l[this.configLang].impactShareButton()}"
configLang="${this.configLang}"
baseUrl="${this.baseUrl}"
storeId="${this.storeId}"
nonprofitId="${this.nonprofitId}"
transactionId="${this.transactionId}"
apiKey="${this.apiKey}"
></beam-share-button>
</div>
<div id="modal-root"></div>
`}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...Y,...j,...q,...d("--beam-ImpactOverview-title",{fontSize:"16px",fontWeight:"bold",marginTop:"10px",textTransform:"capitalize"}),...d("--beam-ImpactOverview-subtitle",{marginTop:"5px"}),"--beam-ImpactOverview-impactCards-maxWidth":"650px","--beam-ImpactOverview-impactCard-backgroundColor":"inherit","--beam-ImpactOverview-impactCard-foregroundColor":"currentColor","--beam-ImpactOverview-impactCard-borderColor":"currentColor","--beam-ImpactOverview-impactCard-borderRadius":"5px","--beam-ImpactOverview-impactCard-marginTop":"10px",...d("--beam-ImpactOverview-impactCard-title",{fontSize:"15px",fontWeight:"bold",letterSpacing:"0.36px"}),"--beam-ImpactOverview-impactCard-progress-marginTop":"8px",...d("--beam-ImpactOverview-impactCard-progressText"),...d("--beam-ImpactOverview-impactCard-description",{marginTop:"10px"}),"--beam-ImpactOverview-impactCard-linkArrow-display":"inline","--beam-ImpactOverview-impactCard-link-color":"inherit",...d("--beam-ImpactOverview-impactCard-link",{marginTop:"10px",textDecoration:"underline",textTransform:"capitalize"}),...d("--beam-ImpactOverview-goalCompletionText",{marginTop:"5px",fontWeight:"600",textTransform:"capitalize",fontSize:"13px"}),"--beam-ImpactOverview-share-button-display":"none","--beam-ImpactOverview-share-button-display-mobile":"inherit","--beam-ImpactOverview-share-button-display-desktop":"inherit","--beam-ImpactOverview-image-display":"block","--beam-ImpactOverview-cardStyle":"'image'","--beam-ImpactOverview-iconBackground-width":"75px","--beam-ImpactOverview-iconBackground-height":"75px","--beam-ImpactOverview-iconBackground-borderRadius":"50px","--beam-ImpactOverview-icon-padding":"0px","--beam-ImpactOverview-iconBackground-background":"#f3f3f3","--beam-ImpactOverview-impactCard-shareButton-background":"#fff","--beam-ImpactOverview-impactCard-shareButton-boxShadow":"0px -20px 20px 0px rgb(0 0 0 / 2%)"},r=this.impactDataController?.data?.config?.web?.theme||{},p={...e,...r};return Object.assign(Object.create({toCSS(){return _(this)}}),p)}}t.tagName="beam-impact-overview",t.styles=[V,H,k`
: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);
max-width: var(--beam-ImpactOverview-impactCards-maxWidth, 650px);
word-break: normal;
}
.icon {
display: flex;
align-items: center;
}
.icon-background {
width: var(--beam-ImpactOverview-iconBackground-width, 75px);
height: var(--beam-ImpactOverview-iconBackground-height, 75px);
border-radius: var(--beam-ImpactOverview-iconBackground-borderRadius, 50px);
padding: var(--beam-ImpactOverview-icon-padding, 0px);
margin: 8px;
overflow: hidden;
background: var(--beam-ImpactOverview-iconBackground-background, #f3f3f3);
display: flex;
justify-content: center;
align-items: center;
}
.impact-icon-card-content {
flex: 3 1 75%;
}
.impact-image-cards {
max-width: var(--beam-ImpactOverview-impactCards-maxWidth);
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 10px 0;
}
.impact-icon-cards {
max-width: var(--beam-ImpactOverview-impactCards-maxWidth);
margin: 10px 0;
}
.impact-card {
padding-bottom: 5px;
margin-top: var(--beam-ImpactOverview-impactCard-marginTop);
background-color: var(--beam-ImpactOverview-impactCard-backgroundColor);
border: 1px solid var(--beam-ImpactOverview-impactCard-borderColor);
border-radius: var(--beam-ImpactOverview-impactCard-borderRadius);
overflow: hidden; /* maintain clean border-radius */
color: var(--beam-ImpactOverview-impactCard-foregroundColor);
}
.impact-card-image {
object-fit: cover;
height: 110px;
width: 100%;
display: var(--beam-ImpactOverview-image-display);
}
.impact-card-icon {
flex: 1 1 10%;
max-width: 50%;
display: var(--beam-ImpactOverview-image-display);
}
.image-card-container {
flex: 1 1;
display: inline-block;
min-width: 200px;
max-width: 100%;
}
.icon-card-container {
max-width: 100%;
min-width: 299px;
}
.impact-card-progress {
margin-top: var(--beam-ImpactOverview-impactCard-progress-marginTop);
}
.shareButtonContainer {
position: sticky;
bottom: 0;
z-index: 999;
background-color: var(--beam-ImpactOverview-impactCard-shareButton-background);
box-shadow: var(--beam-ImpactOverview-impactCard-shareButton-boxShadow);
}
.title {
${s("--beam-ImpactOverview-title")}
}
.subtitle {
${s("--beam-ImpactOverview-subtitle")}
}
.impact-card-title {
${s("--beam-ImpactOverview-impactCard-title")}
}
.impact-card-progressText {
${s("--beam-ImpactOverview-impactCard-progressText")}
}
.impact-card-description {
${s("--beam-ImpactOverview-impactCard-description")}
}
.impact-link {
${s("--beam-ImpactOverview-impactCard-link")}
}
.impact-link-arrow {
display: var(--beam-ImpactOverview-impactCard-linkArrow-display, "inline");
}
.impact-link a,
.impact-link a:visited {
color: var(--beam-ImpactOverview-impactCard-link-color, inherit);
}
.impact-card-goalCompletionText {
${s("--beam-ImpactOverview-goalCompletionText")}
}
.footer {
text-align: center;
}
`,k`
.button {
cursor: pointer;
}
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
.plain-button {
border: none;
background: none;
font-size: inherit;
font-family: inherit;
}
`],i([c({type:String,reflect:!0})],t.prototype,"baseUrl"),i([c({type:String,reflect:!1})],t.prototype,"apiKey"),i([c({type:Number})],t.prototype,"storeId"),i([c({type:String,reflect:!0})],t.prototype,"nonprofitId"),i([c({type:String,reflect:!0})],t.prototype,"userId"),i([c({type:String})],t.prototype,"lang"),i([c({type:Boolean})],t.prototype,"debug"),i([c({type:Boolean})],t.prototype,"draftConfig"),i([c({type:String})],t.prototype,"transactionId"),i([c({type:Object})],t.prototype,"discountCodes"),i([f(".impact-card-title")],t.prototype,"impactTitleRefs"),i([f(".impact-card-description")],t.prototype,"impactDescriptionRefs"),i([f(".impact-link")],t.prototype,"impactLinkRefs"),i([f(".impact-card-goalCompletionText")],t.prototype,"goalCompletionTextRefs"),W(t);export{t as BeamImpactOverview};
//# sourceMappingURL=impact-overview.esm.js.map