@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
171 lines (152 loc) • 8.1 kB
JavaScript
import{f as m,g as s,t as n,h as g,y as b}from"../chunks/lit-iNN5L_Qk.esm.js";import"../chunks/vendor-GKiOHg2N.esm.js";import"../chunks/shoelace-components-xrhk189_.esm.js";import"../chunks/progress-bar-PMU_xI3L.esm.js";import"./beam-partner-logos.esm.js";import{c as f,d as y,e as u}from"../chunks/enforce-config-ZAI7WYAd.esm.js";import{D as w,S as x,W as I,g as U}from"../chunks/routes-Dmf2ZNnZ.esm.js";import{_ as S}from"../chunks/loading-template-t4fFsYtr.esm.js";import{u as p,s as r}from"../chunks/share-button-SNvuFDC9.esm.js";import"../chunks/beam-errors-P-Lu07Ce.esm.js";import"../utils/logger.esm.js";var v=Object.defineProperty,k=Object.getOwnPropertyDescriptor,i=(c,t,a,l)=>{for(var o=l>1?void 0:l?k(t,a):t,h=c.length-1,d;h>=0;h--)(d=c[h])&&(o=(l?d(t,a,o):d(o))||o);return l&&o&&v(t,a,o),o};class e extends g{constructor(){super(...arguments),this.baseUrl=w,this.lang="en",this.debug=!1,this.brandName=null,this.shareImageUrl=null,this.isMobile=!1,this.windowResized=!1,this.checkViewport=()=>{this.windowResized=window.innerWidth<=768}}get configLang(){return x[this.lang]||"en"}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.checkViewport),this.checkViewport()}disconnectedCallback(){window.removeEventListener("resize",this.checkViewport),super.disconnectedCallback()}async fetchImpactData(){u(["apiKey","storeId","nonprofitId"],this);try{return await U({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{storeId:this.storeId,personalImpactLimit:0,nonprofitId:this.nonprofitId,widgetName:I.community_impact,version:"1.0.0",lang:this.configLang,transactionId:this.transactionId??void 0}})}catch(t){throw this.debug&&console.error("Failed to fetch impact data",t),t}}async updateImpactData(){try{const t=await this.fetchImpactData();if(t&&(this.brandName=t.chain.name,this.shareImageUrl=t.promoAssetUrl||t.personalImpactAssetUrl||t.community[0].share.imageUrl,this.shareImageUrl)){const a=await p(this.shareImageUrl);this.file=a,this.dataUrl=URL.createObjectURL(a)}}catch(t){this.debug&&console.error("Error updating impact data:",t)}}async firstUpdated(){await this.updateImpactData(),this.isMobile=/Mobi|Android/i.test(navigator.userAgent)||"ontouchstart"in window||navigator.maxTouchPoints>0}async openSystemShareSheet(t){if(t)try{const a=await p(t);navigator.share&&this.brandName&&await navigator.share({files:[a],title:r[this.lang].impactShareTitle(),text:r[this.lang].impactShareText({brandName:this.brandName})})}catch(a){this.debug&&console.error("Failed to open share sheet",a)}}async handleClickCopy(){if(this.file)try{await navigator.clipboard.write([new ClipboardItem({"image/png":this.file})])}catch(t){this.debug&&console.error("Failed to copy image to clipboard:",t)}}handleClickDownload(t){const a=t.currentTarget;this.isMobile&&this.shareImageUrl?(t.preventDefault(),this.openSystemShareSheet(this.shareImageUrl)):this.dataUrl&&(a.href=this.dataUrl,a.download=r[this.lang].impactShareTitle())}render(){return!this.brandName||!this.shareImageUrl||!this.dataUrl?S():b`
<div class="share-container ${this.windowResized||this.isMobile?"mobile":"desktop"}">
<h2 class="share-title">${r[this.lang].impactShareTitle()}</h2>
<p class="share-text">${r[this.lang].impactShareText({brandName:this.brandName})}</p>
<img src="${this.shareImageUrl}" alt="${r[this.lang].impactShareTitle()}" class="share-image" />
<div class="share-actions">
<button class="plain-button button share-action-button" ="${this.handleClickCopy}">
<sl-icon
library="lucide"
name="copy"
label="${r[this.lang].impactShareCopy()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${r[this.lang].impactShareCopy()}</div>
</button>
<a
class="plain-button button share-action-button plain-link"
download="${r[this.lang].impactShareTitle()}"
href="${this.dataUrl}"
="${this.handleClickDownload}"
>
<sl-icon
library="lucide"
name="download"
label="${r[this.lang].impactShareDownload()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${r[this.lang].impactShareDownload()}</div>
</a>
</div>
</div>
`}}e.tagName="beam-social-share",e.styles=[f,m`
-face {
font-family: "Mabry-Bold";
src: url("../../../assets/fonts/mabry-bold.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
-face {
font-family: "Mabry-Medium";
src: url("../../../assets/fonts/mabry-medium.otf") format("opentype");
font-weight: bold;
font-style: normal;
}
:host {
align-items: center;
justify-content: center;
display: flex;
box-sizing: border-box;
width: 100%;
}
.share-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 700px;
text-align: center;
}
.share-container.mobile {
padding: 1rem;
max-width: 100%;
}
.share-title {
font-family: "Mabry-Bold", sans-serif;
font-size: 2.5rem;
font-weight: bold;
word-break: break-word;
margin: 10px 0;
}
.share-title.mobile {
font-size: 1.5rem;
}
.share-text {
font-family: "Mabry-Medium", sans-serif;
font-size: 1.25rem;
line-height: 1.4;
word-break: break-word;
margin: 10px 0;
max-width: 500px;
}
.share-text.mobile {
font-size: 1rem;
}
.share-image {
border-radius: 8px;
width: 100%;
max-width: 300px;
height: auto;
display: block;
margin: 20px auto;
}
.share-actions {
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
align-items: center;
margin: 20px 0;
}
.share-actions.mobile {
flex-direction: column;
}
.share-action-button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
text-decoration: none;
color: #333;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.share-action-button:hover {
background-color: #f0f0f0;
border-color: #bbb;
}
.share-action-icon {
font-size: 1.25rem;
margin-right: 8px;
}
.share-action-text {
font-family: "Mabry-Medium", sans-serif;
font-size: 1rem;
line-height: 1.4;
margin-top: 5px;
}
(max-width: 600px) {
.share-title {
font-size: 1.5rem;
}
.share-text {
font-size: 1rem;
}
.share-image {
max-width: 240px;
}
.share-actions {
flex-direction: row;
width: 50%;
margin: 10px 0;
}
.share-action-button {
width: 100%;
margin: 5px 0;
}
}
`],i([s({type:String})],e.prototype,"apiKey",2),i([s({type:Number})],e.prototype,"storeId",2),i([s({type:Number})],e.prototype,"nonprofitId",2),i([s({type:String})],e.prototype,"baseUrl",2),i([s({type:String})],e.prototype,"lang",2),i([s({type:Boolean})],e.prototype,"debug",2),i([s({type:String})],e.prototype,"transactionId",2),i([n()],e.prototype,"brandName",2),i([n()],e.prototype,"shareImageUrl",2),i([n()],e.prototype,"dataUrl",2),i([n()],e.prototype,"file",2),i([n()],e.prototype,"isMobile",2),i([n()],e.prototype,"windowResized",2),y(e);export{e as BeamSocialShare};
//# sourceMappingURL=social-share.esm.js.map