@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.76 kB
JavaScript
import{f as m,g as o,t as n,h as g,y as f}from"../chunks/lit-WqMxC_PA.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";import"../chunks/_share-dialog-dependencies-dHlBUqo0.esm.js";import"../chunks/progress-bar-DF7UuuHb.esm.js";import"./beam-partner-logos.esm.js";import{c as b,d as y,e as u}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{D as w,S as x,g as I,W as U}from"../chunks/routes-DguZveS3.esm.js";import{_ as S}from"../chunks/loading-template-DG4lkIIc.esm.js";import{u as d,s as r,p}from"../chunks/share-button-M8cMa6ol.esm.js";import"../chunks/beam-errors-Ci0d3926.esm.js";import"../utils/logger.esm.js";import"../chunks/promo-types-DKAOFHJr.esm.js";var k=Object.defineProperty,a=(l,t,i,v)=>{for(var s=void 0,c=l.length-1,h;c>=0;c--)(h=l[c])&&(s=h(t,i,s)||s);return s&&k(t,i,s),s};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 I({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},queryParams:{storeId:this.storeId,personalImpactLimit:0,nonprofitId:this.nonprofitId,widgetName:U.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 i=await d(this.shareImageUrl);this.file=i,this.dataUrl=URL.createObjectURL(i)}}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 i=await d(t);navigator.share&&this.brandName&&await navigator.share({files:[i],title:r[this.lang].impactShareTitle(),text:r[this.lang].impactShareText({brandName:this.brandName})})}catch(i){this.debug&&console.error("Failed to open share sheet",i)}}async handleClickCopy(){if(this.file)try{this.apiKey&&this.transactionId?p({baseUrl:this.baseUrl,apiKey:this.apiKey||"",requestBody:{eventName:"ExtensibilityCopyImageButtonClick",nonprofitId:this.nonprofitId,storeId:this.storeId,timestamp:Date.now(),transactionId:Number(this.transactionId)}}).catch(()=>null):console.error("Missing data for social share analytics. Skipping send"),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){this.apiKey&&this.transactionId?p({baseUrl:this.baseUrl,apiKey:this.apiKey||"",requestBody:{eventName:"ExtensibilityDownloadImageButtonClick",nonprofitId:this.nonprofitId,storeId:this.storeId,timestamp:Date.now(),transactionId:Number(this.transactionId)}}).catch(()=>null):console.error("Missing data for social share analytics. Skipping send");const i=t.currentTarget;this.isMobile&&this.shareImageUrl?(t.preventDefault(),this.openSystemShareSheet(this.shareImageUrl)):this.dataUrl&&(i.href=this.dataUrl,i.download=r[this.lang].impactShareTitle())}render(){return!this.brandName||!this.shareImageUrl||!this.dataUrl?S():f`
<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=[b,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;
}
}
`],a([o({type:String})],e.prototype,"apiKey"),a([o({type:Number})],e.prototype,"storeId"),a([o({type:Number})],e.prototype,"nonprofitId"),a([o({type:String})],e.prototype,"baseUrl"),a([o({type:String})],e.prototype,"lang"),a([o({type:Boolean})],e.prototype,"debug"),a([o({type:String})],e.prototype,"transactionId"),a([n()],e.prototype,"brandName"),a([n()],e.prototype,"shareImageUrl"),a([n()],e.prototype,"dataUrl"),a([n()],e.prototype,"file"),a([n()],e.prototype,"isMobile"),a([n()],e.prototype,"windowResized"),y(e);export{e as BeamSocialShare};
//# sourceMappingURL=social-share.esm.js.map