@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
202 lines (196 loc) • 17.8 kB
JavaScript
import{f as O,g as c,p as b,h as D,y as T,k as $}from"../chunks/lit-iNN5L_Qk.esm.js";import{d as N}from"../chunks/lodash-P8OIs-at.esm.js";import{D as R,g as j,W as F,S as P}from"../chunks/routes-Dmf2ZNnZ.esm.js";import{p as A}from"../chunks/progress-bar-PMU_xI3L.esm.js";import{u as l,A as _,i as v,_ as S,d as u,a as V}from"../chunks/localize-o-cYvHQf.esm.js";import{c as W,d as q,e as G}from"../chunks/enforce-config-ZAI7WYAd.esm.js";import{_ as K}from"../chunks/loading-template-t4fFsYtr.esm.js";import{logger as M}from"../utils/logger.esm.js";import"../chunks/shoelace-components-xrhk189_.esm.js";import{s as h,a as H}from"../chunks/share-button-k_Xn5956.esm.js";import{partnerLogosConfigDefaults as Y}from"./beam-partner-logos.esm.js";import{c as J}from"../chunks/responsive-2lC2Wrtg.esm.js";import"../chunks/beam-errors-P-Lu07Ce.esm.js";import"../chunks/vendor-GKiOHg2N.esm.js";import"../chunks/is-all-html-elements-SdSkxirh.esm.js";import"../chunks/share-button-SNvuFDC9.esm.js";const g={en:{descriptionTitle:({nonprofitName:e="a nonprofit"})=>`You've just made an impact for ${e}`,descriptionSubtitle:()=>"Check out the impact your purchase made below.",yourImpactTitle:()=>"You\u2019ve Funded",communityImpactTitle:()=>"Together we\u2019re funding",personalImpactLinkCopy:({name:e=""})=>`Learn about ${e}`,communityImpactLinkCopy:({name:e=""})=>`See all of the impact by the ${e} community`,impactShareButton:()=>"Share to Grow Your Impact"},fr:{descriptionTitle:({nonprofitName:e=""})=>`Vous avez eu un impact positif sur ${e}`,descriptionSubtitle:({causeName:e=""})=>`D\xE9couvrez quel est l'impact de votre achat chez ${e} ci-dessous.`,yourImpactTitle:()=>"Vous avez financ\xE9",communityImpactTitle:()=>"Ensemble, nous finan\xE7ons",personalImpactLinkCopy:({name:e=""})=>`En savoir sur ${e}`,communityImpactLinkCopy:({name:e=""})=>`Voir toutes les contributions de la communaut\xE9 de ${e}`,impactShareButton:()=>"Partagez pour augmentez notre cause"},de:{descriptionTitle:({nonprofitName:e=""})=>`Du hast soeben einen Beitrag geleistet f\xFCr ${e}`,descriptionSubtitle:({causeName:e=""})=>`Erfahre mehr \xFCber den Beitrag, den du mit deinem ${e} Kauf geleistet hast`,yourImpactTitle:()=>"Sie haben finanziert",communityImpactTitle:()=>"Gemeinsam finanzieren wir",personalImpactLinkCopy:({name:e=""})=>`Mehr \xFCber ${e} lernen`,communityImpactLinkCopy:({name:e=""})=>`Informiere dich \xFCber den bisher geleisteten Beitrag der ${e} community`,impactShareButton:()=>"Teil, um unserem Beitrag zu erh\xF6hen"},es:{descriptionTitle:({nonprofitName:e=""})=>`Acabas de contribuir con ${e}`,descriptionSubtitle:({causeName:e=""})=>`Comprueba la contribuci\xF3n que has hecho con tu compra ${e} a continuaci\xF3n`,yourImpactTitle:()=>"Has financiado",communityImpactTitle:()=>"Juntos estamos financiando",personalImpactLinkCopy:({name:e=""})=>`Saber de ${e}`,communityImpactLinkCopy:({name:e=""})=>`Mira lo que ha conseguido la comunidad ${e}`,impactShareButton:()=>"Comparte para aumentar nuestro impacto"},it:{descriptionTitle:({nonprofitName:e=""})=>`Hai appena fatto la differenza per ${e}`,descriptionSubtitle:({causeName:e=""})=>`Guarda qui sotto l'impatto del tuo acquisto ${e}`,yourImpactTitle:()=>"Hai finanziato",communityImpactTitle:()=>"Insieme stiamo finanziando",personalImpactLinkCopy:({name:e=""})=>`Scopri su ${e}`,communityImpactLinkCopy:({name:e=""})=>`Guarda come la comunit\xE0 di ${e} fa la differenza`,impactShareButton:()=>"Condividi, aiutaci a fare la differenza"},pl:{descriptionTitle:({nonprofitName:e=""})=>`W\u0142a\u015Bnie wspar\u0142a\u015B_e\u015B ${e}!`,descriptionSubtitle:({causeName:e=""})=>`Sprawd\u017A ni\u017Cej, jakiego wsparcia udzieli\u0142a\u015B_e\u015B kupuj\u0105c w ${e} `,yourImpactTitle:()=>"Sfinansowa\u0142e\u015B(a) ",communityImpactTitle:()=>"Razem finansujemy",personalImpactLinkCopy:({name:e=""})=>`Dowiedz si\u0119 o ${e}`,communityImpactLinkCopy:({name:e=""})=>`Zobacz, ile dobrego zrobi\u0142a do tej pory spo\u0142eczno\u015B\u0107 ${e}`,impactShareButton:()=>"Udost\u0119pnij, by szerzy\u0107 nasz\u0105 misj\u0119"}};var Z=Object.defineProperty,Q=Object.getOwnPropertyDescriptor,r=(e,a,i,o)=>{for(var n=o>1?void 0:o?Q(a,i):a,s=e.length-1,m;s>=0;s--)(m=e[s])&&(n=(o?m(a,i,n):m(n))||n);return o&&n&&Z(a,i,n),n};class t extends D{constructor(){super(...arguments),this.baseUrl=R,this.lang="en",this.debug=!1,this.draftConfig=!1,this.getImpactData=async()=>(G(["apiKey","userId","nonprofitId"],this),await j({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{nonprofitId:this.nonprofitId,beamUserId:this.userId,personalImpactLimit:1,communityImpactLimit:1,storeId:this.storeId,widgetName:F.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 _(this,this.getImpactData),this.resizeElements=N(()=>{h(this.impactTitleRefs),h(this.impactDescriptionRefs),h(this.impactLinkRefs),h(this.goalCompletionTextRefs)},50,{maxWait:50,leading:!0})}get configLang(){return P[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.resizeElements)}async updated(a){const i=["baseUrl","storeId","apiKey","userId","lang","discountCodes"];for(const o of i)if(a.has(o)){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(a){if(document.fonts.status==="loading")return await document.fonts.ready.catch(i=>M.error(i)),a()}renderCard({imageUrl:a,title:i,percentFunded:o,goalProgressText:n,description:s,urlCopy:m,impactUrl:p,isImage:d,cardType:f,goalCompletionText:y}){return T`
<div class="impact-card ${d?"":"icon"}" part="impact-card">
<div class="${d?"":"icon-background "}">
<img src="${a}" alt="${i}" class="${d?"impact-card-image":"impact-card-icon"}" />
</div>
<div class="${d?"":"impact-icon-card-content"}" style="margin: 12px;">
<div class="impact-card-title">${i}</div>
<p class="impact-card-description">${$(s)}</p>
<div class="impact-card-goalCompletionText">
<p>${$(y)}</p>
</div>
<div class="impact-card-progress" style="display: flex; align-items: center;">
<beam-progress-bar
value="${o}"
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;"
>${v(this.configLang,n)}</span
>
</div>
<p class="impact-link" part="impact-link">
<a href="${p}" target="_blank" rel="noopener noreferrer">
${f==="personal"?g[this.configLang].personalImpactLinkCopy({name:m}):g[this.configLang].communityImpactLinkCopy({name:m})}<span class="impact-link-arrow"> ›</span>
</a>
</p>
</div>
</div>
`}render(){const{data:a,loading:i,error:o}=this.impactDataController;if(i)return K();if(o)return this.debug?S({error:o}):"";if(a==null)return this.debug?S({error:new Error("No data")}):"";const n=this.impactDataController.data?.chain.name,s=v(this.configLang,a.personal[0].nonprofit.cause||""),m=this.cssVariables["--beam-ImpactOverview-cardStyle"],p=m==="'image'",d=m==="'selected_icon'",f=a.personal[0]?.imageUrl||"",y=a.community[0].imageUrl||"",C=a.personal[0]?.nonprofit.causeIconUrl,w=a.personal[0]?.nonprofit.causeIconSelectedUrl,L=p?f:d?w:C,z=p?y:d?w:C,B=this.impactDataController.data?.promoAssetUrl||this.impactDataController.data?.personalImpactAssetUrl,x=this.cssVariables["--beam-ImpactOverview-share-button-display"]!=="none",U=x&&this.cssVariables["--beam-ImpactOverview-share-button-display-mobile"]!=="none",k=x&&this.cssVariables["--beam-ImpactOverview-share-button-display-desktop"]!=="none",E=this.cssVariables["--beam-ImpactOverview-share-button-icon-name"]||"share-2";let I="d-none";return U?I=k?"d-block":"d-lg-none":I=k?"d-none d-lg-block":"d-none",T`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<div>
<beam-partner-logos
partnerLogoUrl="${a.chain.logoUrl}"
partnerName="${a.chain.name}"
part="logos"
></beam-partner-logos>
</div>
<div class="description">
<div class="title" part="title">
${v(this.configLang,a.config?.web?.title)||g[this.configLang].descriptionTitle({nonprofitName:a.personal[0].nonprofit.name})}
</div>
<div class="subtitle" part="subtitle">
${v(this.configLang,a.config?.web?.description)||g[this.configLang].descriptionSubtitle({causeName:s})}
</div>
</div>
<div class="${p?"impact-image-cards":"impact-icon-cards"}">
<div class="impact your-impact ${p?"image-card-container":"icon-card-container"}">
${this.renderCard({isImage:p,imageUrl:L||"",title:g[this.configLang].yourImpactTitle(),percentFunded:a.personal[0]?.impact?.goalProgressPercentage||0,goalProgressText:a.personal[0]?.impact?.goalProgressText,description:v(this.configLang,a.personal[0]?.impact?.description||""),urlCopy:a.personal[0].nonprofit?.name,impactUrl:a.personal[0].nonprofit?.website||"",cardType:"personal",goalCompletionText:a.personal[0].impact.goalCompletionText})}
</div>
<div class="impact community-impact ${p?"image-card-container":"icon-card-container"}">
${this.renderCard({isImage:p,imageUrl:z||"",title:g[this.configLang].communityImpactTitle(),percentFunded:a.community[0].impact?.goalProgressPercentage||0,goalProgressText:a.community[0]?.impact?.goalProgressText,description:v(this.configLang,a.community[0].impact?.description||""),urlCopy:a.chain.name,impactUrl:a.chain.communityImpactUrl||a.community[0].nonprofit.website||"",cardType:"community",goalCompletionText:a.community[0].impact.goalCompletionText})}
</div>
</div>
<div class="footer ${I} shareButtonContainer" part="social-share">
<beam-share-button
imageUrl="${B}"
brandName="${n}"
shareIcon="${E}"
buttonText="${g[this.configLang].impactShareButton()}"
configLang="${this.configLang}"
></beam-share-button>
</div>
<div id="modal-root"></div>
`}get cssVariables(){const a={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...Y,...A,...H,...u("--beam-ImpactOverview-title",{fontSize:"16px",fontWeight:"bold",marginTop:"10px",textTransform:"capitalize"}),...u("--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",...u("--beam-ImpactOverview-impactCard-title",{fontSize:"15px",fontWeight:"bold",letterSpacing:"0.36px"}),"--beam-ImpactOverview-impactCard-progress-marginTop":"8px",...u("--beam-ImpactOverview-impactCard-progressText"),...u("--beam-ImpactOverview-impactCard-description",{marginTop:"10px"}),"--beam-ImpactOverview-impactCard-linkArrow-display":"inline","--beam-ImpactOverview-impactCard-link-color":"inherit",...u("--beam-ImpactOverview-impactCard-link",{marginTop:"10px",textDecoration:"underline",textTransform:"capitalize"}),...u("--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%)"},i=this.impactDataController?.data?.config?.web?.theme||{},o={...a,...i};return Object.assign(Object.create({toCSS(){return V(this)}}),o)}}t.tagName="beam-impact-overview",t.styles=[W,J,O`
: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 {
${l("--beam-ImpactOverview-title")}
}
.subtitle {
${l("--beam-ImpactOverview-subtitle")}
}
.impact-card-title {
${l("--beam-ImpactOverview-impactCard-title")}
}
.impact-card-progressText {
${l("--beam-ImpactOverview-impactCard-progressText")}
}
.impact-card-description {
${l("--beam-ImpactOverview-impactCard-description")}
}
.impact-link {
${l("--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 {
${l("--beam-ImpactOverview-goalCompletionText")}
}
.footer {
text-align: center;
}
`,O`
.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;
}
`],r([c({type:String,reflect:!0})],t.prototype,"baseUrl",2),r([c({type:String,reflect:!1})],t.prototype,"apiKey",2),r([c({type:Number})],t.prototype,"storeId",2),r([c({type:String,reflect:!0})],t.prototype,"nonprofitId",2),r([c({type:String,reflect:!0})],t.prototype,"userId",2),r([c({type:String})],t.prototype,"lang",2),r([c({type:Boolean})],t.prototype,"debug",2),r([c({type:Boolean})],t.prototype,"draftConfig",2),r([c({type:Object})],t.prototype,"discountCodes",2),r([c({type:String})],t.prototype,"transactionId",2),r([b(".impact-card-title")],t.prototype,"impactTitleRefs",2),r([b(".impact-card-description")],t.prototype,"impactDescriptionRefs",2),r([b(".impact-link")],t.prototype,"impactLinkRefs",2),r([b(".impact-card-goalCompletionText")],t.prototype,"goalCompletionTextRefs",2),q(t);export{t as BeamImpactOverview};
//# sourceMappingURL=impact-overview.esm.js.map