@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
168 lines (167 loc) • 11.6 kB
JavaScript
import{i as y}from"./is-all-html-elements-fcB7UUA1.esm.js";import{h as x,y as d,Z as v,g as s}from"./lit-WqMxC_PA.esm.js";import{p as m,u as p,s as r}from"./share-button-DPNNnXeM.esm.js";import{D as S}from"./routes-BvX92EDq.esm.js";import"./vendor-KKSARHWL.esm.js";const I=(l,{source:e="contentLength"}={})=>{const a=l instanceof NodeList?Array.from(l):l;if(a.length===0||!y(a))return;const i=(e==="contentLength"?a.sort((t,o)=>o.innerText.length-t.innerText.length)[0]:a.sort((t,o)=>o.clientHeight-t.clientHeight)[0])?.clientHeight||0;for(const t of a)t.clientHeight!==i&&(t.style.height=i+"px")};function w(){return/Android|iPhone/i.test(navigator.userAgent)}var C=Object.defineProperty,h=(l,e,a,i)=>{for(var t=void 0,o=l.length-1,c;o>=0;o--)(c=l[o])&&(t=c(e,a,t)||t);return t&&C(e,a,t),t};class n extends x{constructor(){super(...arguments),this.shareIcon=null,this.imageUrl=null,this.brandName=null,this.buttonText=null,this.configLang="en",this.baseUrl=S,this.nonprofitId=null,this.storeId=null,this.transactionId=null}connectedCallback(){super.connectedCallback()}async handleShareClick(){try{if(!this.imageUrl||!this.brandName||!this.configLang)return;await import("./_share-dialog-dependencies-BG0p8uUr.esm.js");const{nonprofitId:e,storeId:a,transactionId:i,baseUrl:t,apiKey:o}=this;m({baseUrl:t,apiKey:o,requestBody:{eventName:"shareImageButtonClick",nonprofitId:e,storeId:a,timestamp:Date.now(),transactionId:i}}).catch(()=>null),w()?this.openSystemShareSheet(this.imageUrl):this.handleShareDialog(this.imageUrl,this.brandName)}catch(e){console.error("Error sharing impact:",e)}}async handleShareDialog(e,a){if(!e)return;const i=this.shadowRoot?.querySelector("sl-dialog");if(i){i.show();return}await import("./_share-dialog-dependencies-BG0p8uUr.esm.js");const t=this.shadowRoot?.querySelector("#modal-root"),o=await p(e),c=URL.createObjectURL(o),b=()=>{this.shadowRoot?.querySelector("sl-dialog")?.hide()},g=async()=>{m({baseUrl:this.baseUrl,apiKey:this.apiKey,requestBody:{eventName:"copyImageButtonClick",nonprofitId:this.nonprofitId,storeId:this.storeId,timestamp:Date.now(),transactionId:this.transactionId}}).catch(()=>null),await navigator.clipboard.write([new ClipboardItem({"image/png":o})]),setTimeout(b,250)},u=()=>{m({baseUrl:this.baseUrl,apiKey:this.apiKey,requestBody:{eventName:"downloadImageButtonClick",nonprofitId:this.nonprofitId,storeId:this.storeId,timestamp:Date.now(),transactionId:this.transactionId}}).catch(()=>null),setTimeout(b,250)},f=d`
<style>
.plain-button {
border: none;
background: none;
font-size: inherit;
font-family: inherit;
}
.share-dialog::part(panel) {
padding: var(--beam-share-dialog-padding);
text-align: center;
}
.share-title {
font-size: var(--beam-share-title-fontSize);
font-weight: var(--beam-share-title-fontWeight);
}
.share-text {
font-size: var(--beam-share-text-fontSize);
line-height: var(--beam-share-text-lineHeight);
margin-top: var(--beam-share-text-marginTop);
}
.share-image {
border-radius: var(--beam-share-image-borderRadius);
width: var(--beam-share-image-width);
display: block;
margin: var(--beam-share-image-margin) auto;
}
.share-actions {
margin: var(--beam-share-actions-margin);
}
.share-action-button {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 5px;
}
.share-action-icon {
font-size: var(--beam-share-action-icon-size);
}
.share-action-button:hover .share-action-icon {
scale: 1.1;
}
.share-action-text {
font-size: var(--beam-share-action-text-fontSize);
line-height: var(--beam-share-action-text-lineHeight);
margin-top: var(--beam-share-text-action-marginTop);
}
.plain-button {
border: none;
background: none;
font-size: inherit;
font-family: inherit;
}
.plain-link {
text-decoration: none;
color: inherit;
}
.share-close {
display: block;
background-color: var(--beam-share-close-backgroundColor);
color: var(--beam-share-close-text-color);
justify-content: center;
padding: var(--beam-share-close-padding);
border-radius: var(--beam-share-close-borderRadius);
width: 100%;
font-size: var(--beam-share-close-fontSize);
font-weight: var(--beam-share-close-fontWeight);
}
.share-close:hover {
outline: 2px solid var(--beam-share-close-focus-borderColor);
}
</style>
<sl-dialog open label="${r[this.configLang].impactShareTitle()}" no-header class="share-dialog">
<h2 class="share-title">${r[this.configLang].impactShareTitle()}</h2>
<p class="share-text">${r[this.configLang].impactShareText({brandName:a})}</p>
<img src="${e}" alt="${r[this.configLang].impactShareTitle()}" class="share-image" />
<div class="share-actions" style="display: flex; justify-content: space-evenly">
<div style="flex: 1; text-align: center">
<button class="plain-button button share-action-button" ="${g}">
<sl-icon
library="lucide"
name="copy"
label="${r[this.configLang].impactShareCopy()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${r[this.configLang].impactShareCopy()}</div>
</button>
</div>
<div style="flex: 1; text-align: center">
<a
class="plain-button button share-action-button plain-link"
download="${r[this.configLang].impactShareTitle()}"
href="${c}"
="${u}"
>
<sl-icon
library="lucide"
name="download"
label="${r[this.configLang].impactShareDownload()}"
class="share-action-icon"
></sl-icon>
<div class="share-action-text">${r[this.configLang].impactShareDownload()}</div>
</a>
</div>
</div>
<button class="plain-button button share-close" ="${b}">
${r[this.configLang].impactShareClose()}
</button>
</sl-dialog>
`;t&&v(f,t)}async openSystemShareSheet(e){if(!e)return;const a=await p(e);navigator.share&&await navigator.share({files:[a]}).then(()=>{const{nonprofitId:i,storeId:t,transactionId:o,baseUrl:c,apiKey:b}=this;m({baseUrl:c,apiKey:b,requestBody:{eventName:"shareSheetShare",nonprofitId:i,storeId:t,timestamp:Date.now(),transactionId:o}}).catch(()=>null)}).catch(()=>null)}disconnectedCallback(){super.disconnectedCallback()}render(){return!this.imageUrl||!this.brandName||!this.configLang?d``:d`
<style>
.share-button {
font-family: var(--beam-share-button-fontFamily);
font-size: var(--beam-share-button-fontSize);
font-weight: var(--beam-share-button-fontWeight);
margin-top: var(--beam-share-button-marginTop);
margin-bottom: var(--beam-share-button-marginBottom);
text-transform: var(--beam-share-button-textTransform);
line-height: var(--beam-share-button-lineHeight);
background-color: var(--beam-share-button-backgroundColor);
color: var(--beam-share-button-color, inherit);
border-radius: var(--beam-share-button-borderRadius);
border-color: var(--beam-share-button-borderColor);
border-width: var(--beam-share-button-borderWidth);
/* add extra padding on side without icon for optical alignment */
padding: var(--beam-share-button-padding);
width: var(--beam-share-button-width);
transition: 0.15s;
}
.share-button:hover {
background-color: var(--beam-share-button-hover-backgroundColor);
color: var(--beam-share-button-hover-color);
border-color: var(--beam-share-button-hover-borderColor);
}
.share-button-text {
text-decoration: var(--beam-share-button-text-textDecoration);
margin-left: 0.33em;
}
.share-button-icon {
font-size: var(--beam-share-button-icon-size);
}
.button {
cursor: pointer;
}
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
<button
="${this.handleShareClick}"
baseUrl="${this.baseUrl}"
class="share-button share-button-inline button icon-button"
>
<sl-icon
name="${this.shareIcon}"
library="lucide"
label="${r[this.configLang].impactShareButton()}"
class="share-button-icon"
></sl-icon>
<span class="share-button-text">${this.buttonText||r[this.configLang].impactShareButton()}</span>
</button>
<div id="modal-root"></div>
`}}h([s({type:String})],n.prototype,"shareIcon"),h([s({type:String})],n.prototype,"imageUrl"),h([s({type:String})],n.prototype,"brandName"),h([s({type:String})],n.prototype,"buttonText"),h([s({type:String})],n.prototype,"configLang"),h([s({type:String})],n.prototype,"baseUrl"),h([s({type:String})],n.prototype,"nonprofitId"),h([s({type:String})],n.prototype,"storeId"),h([s({type:String})],n.prototype,"transactionId"),h([s({type:String})],n.prototype,"apiKey"),customElements.get("beam-share-button")||customElements.define("beam-share-button",n);const k={"--beam-share-button-fontFamily":"inherit","--beam-share-button-fontSize":"14px","--beam-share-button-fontWeight":"600","--beam-share-button-textTransform":"none","--beam-share-button-marginTop":"10px","--beam-share-button-marginBottom":"10px","--beam-share-button-padding":"8px 18px 8px 16px","--beam-share-button-lineHeight":"inherit","--beam-share-button-color":"#0A323C","--beam-share-button-backgroundColor":"#fff","--beam-share-button-borderRadius":"30px","--beam-share-button-borderColor":"#0A323C","--beam-share-button-borderWidth":"1px","--beam-share-button-width":"auto","--beam-share-button-hover-borderColor":"transparent","--beam-share-button-hover-backgroundColor":"#0A323C","--beam-share-button-hover-color":"#fff","--beam-share-button-icon-size":"16px","--beam-share-button-text-textDecoration":"none","--beam-share-dialog-padding":"30px 30px","--beam-share-title-fontSize":"30px","--beam-share-title-fontWeight":"bold","--beam-share-text-fontSize":"16px","--beam-share-text-lineHeight":"1.3","--beam-share-text-marginTop":"10px","--beam-share-image-borderRadius":"4px","--beam-share-image-width":"200px","--beam-share-image-margin":"20px","--beam-share-actions-margin":"30px 60px","--beam-share-action-icon-size":"32px","--beam-share-action-text-fontSize":"16px","--beam-share-action-text-lineHeight":"1.3","--beam-share-text-action-marginTop":"10px","--beam-share-close-backgroundColor":"#ffd522","--beam-share-close-text-color":"#000","--beam-share-close-padding":"12px","--beam-share-close-borderRadius":"4px","--beam-share-close-fontSize":"16px","--beam-share-close-fontWeight":"bold","--beam-share-close-focus-borderColor":"#c2dcff"};export{k as a,I as s};
//# sourceMappingURL=share-button-BRjKJc5L.esm.js.map