@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
236 lines (235 loc) • 16 kB
JavaScript
import{j as v,y as i,f as y,g as n,h as x,k as C}from"../chunks/lit-iNN5L_Qk.esm.js";import{u as g,A as k,_ as w,i as f,d as u,a as $}from"../chunks/localize-m-_ESmpk.esm.js";import{D as S,l as T,W as I,S as F}from"../chunks/routes-o1QpF40R.esm.js";import{makeApiKeyHeader as z}from"../utils/makeApiKeyHeader.js";import{c as L,d as W,e as B}from"../chunks/enforce-config-ZyPq_4CF.esm.js";import{c as E}from"../chunks/responsive-2lC2Wrtg.esm.js";import"../chunks/vendor-GKiOHg2N.esm.js";import{p as G}from"../chunks/promo-pill-label-P1X4xeAx.esm.js";import"../chunks/beam-errors-P-Lu07Ce.esm.js";import"../utils/logger.js";const A=(s="",{borderRadius:e="0px",borderStyle:o="unset",borderColor:t="#000000",borderWidth:r="1px"}={})=>{const a=s.startsWith("--beam-")?s:`--beam-${s}`;return{[`${a}-borderRadius`]:e,[`${a}-borderStyle`]:o,[`${a}-borderColor`]:t,[`${a}-borderWidth`]:r}},M=(s="",{borderRadius:e="0px",borderStyle:o="unset",borderColor:t="#000000",borderWidth:r="1px"}={})=>{const a=s.startsWith("--beam-")?s:`--beam-${s}`;return v(` border-radius: var(${a}-borderRadius, ${e});
border-style: var(${a}-borderStyle, ${o});
border-color: var(${a}-borderColor, ${t});
border-width: var(${a}-borderWidth, ${r});
`)},j=()=>i` <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
part="svg"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>`,P={en:{ctaTitle:()=>"Choose your impact",ctaMessage:()=>"At no extra cost, 1% of every order is donated to a nonprofit you choose. Powered by Beam",inlineSeparator:()=>":"},fr:{ctaTitle:()=>"Choisissez l'impact de votre choix",ctaMessage:()=>"Sans frais suppl\xE9mentaires, 1% de chaque commande est revers\xE9 \xE0 l'organisation caritative de votre choix. D\xE9velopp\xE9 par Beam",inlineSeparator:()=>":"},es:{ctaTitle:()=>"Elige el impacto que deseas",ctaMessage:()=>"Sin coste adicional, el 1% de cada pedido se dona a la organizaci\xF3n sin \xE1nimo de lucro que t\xFA elijas. Desarrollado por Beam",inlineSeparator:()=>":"},de:{ctaTitle:()=>"W\xE4hlen Sie Ihren Einfluss",ctaMessage:()=>"Ohne zus\xE4tzliche Kosten wird 1 % jeder Bestellung an eine von Ihnen gew\xE4hlte gemeinn\xFCtzige Organisation gespendet. Von Beam unterst\xFCtzt",inlineSeparator:()=>":"},it:{ctaTitle:()=>"Scegliete chi sostenere",ctaMessage:()=>"L'1% di ogni vostro acquisto viene donato, senza alcun costo aggiuntivo, a un'organizzazione no-profit a libera scelta. Promosso da Beam",inlineSeparator:()=>":"},pl:{ctaTitle:()=>"Masz wp\u0142yw, dokonaj wyboru",ctaMessage:()=>"1% kwoty ka\u017Cdego zam\xF3wienia jest przekazywane na rzecz wybranej przez Ciebie organizacji non-profit \u2013 bez dodatkowych koszt\xF3w. Obs\u0142ugiwane przez Beam",inlineSeparator:()=>":"}};var H=Object.defineProperty,R=Object.getOwnPropertyDescriptor,c=(s,e,o,t)=>{for(var r=t>1?void 0:t?R(e,o):e,a=s.length-1,d;a>=0;a--)(d=s[a])&&(r=(t?d(e,o,r):d(r))||r);return t&&r&&H(e,o,r),r};const _="--beam-ProductDetailsPage-imageUrl";class l extends x{constructor(){super(...arguments),this.baseUrl=S,this.lang="en",this.draftConfig=!1,this.debug=!1,this.getProductDetailsPageData=async()=>(B(["apiKey","storeId"],this),await T({baseUrl:this.baseUrl,headers:z(this.apiKey),queryParams:{version:"1.0.0",lang:this.configLang,storeId:this.storeId,widgetName:I.product_details_page,draftConfig:this.draftConfig,remoteProductIdentifier:this.remoteProductIdentifier}})),this.productDetailsPageDataController=new k(this,this.getProductDetailsPageData)}get configLang(){return F[this.lang]||"en"}async updated(e){const o=["storeId","baseUrl","lang","apiKey"];for(const t of o)if(e.has(t)){await this.productDetailsPageDataController.exec();break}}render(){const{data:e,loading:o}=this.productDetailsPageDataController,t=this.cssVariables["--beam-ProductDetailsPage-image-placement"],r=b=>b!=="0px"&&b!=="0",a=this.cssVariables["--beam-ProductDetailsPage-shouldDisplayPromoPill"]==="true",d=!!e?.config?.web?.promo,h=r(this.cssVariables["--beam-ProductDetailsPage-imageHeight"]),D=r(this.cssVariables["--beam-ProductDetailsPage-title-fontSize"]),p=a&&d&&h&&D,m=this.cssVariables["--beam-ProductDetailsPage-shouldDisplayColon"]==="true";return o?i``:e==null?this.debug?w({error:new Error("No data")}):"":i`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<div class="root ${t==="block-center"?"block-display":"inline-display"}">
${t==="block-center"?i`
${this.renderWidgetIcon(t)}
${p?i`
<div class="promo-container">
<beam-promo-info-pill .promo=${e?.config?.web?.promo}></beam-promo-info-pill>
</div>
`:i``}
<div class="info-container">${this.renderContent(p,m,e)}</div>
`:i`
${p?i`
<div class="promo-container">
<beam-promo-info-pill .promo=${e?.config?.web?.promo}></beam-promo-info-pill>
</div>
`:i``}
<div class="content-inline">
${this.renderWidgetIcon(t)}
<div class="info-container">${this.renderContent(p,m,e)}</div>
</div>
`}
</div>
`}renderWidgetIcon(e){const o=this.cssVariables[_];return o?i`
<span class="icon-container" part="icon" ${e==="block-center"?'style="order:1"':""}>
<img src=${o} alt="Widget Icon" />
</span>
`:i``}renderContent(e,o,t){const r=f(this.configLang,t?.config?.web?.title)||P[this.configLang].ctaTitle(),a=f(this.configLang,t?.config?.web?.description)||P[this.configLang].ctaMessage();return e?i`
<div class="info-inline-promo">
<span class="title">${r+(o?P[this.configLang].inlineSeparator():"")}</span>
<span class="description"> ${a} ${this.renderDisclosureTooltip()} </span>
</div>
`:i`
<div class="title-block">
<h3 class="title">${r}</h3>
</div>
<div class="description-block">
<span class="description"> ${a} ${this.renderDisclosureTooltip()} </span>
</div>
`}renderCloseTooltipIcon(){return i`<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.40836 5.40811L1.48828 1.48804M5.40836 5.40811L9.32843 9.32819M5.40836 5.40811L9.32843 1.48804M5.40836 5.40811L1.48828 9.32819"
stroke="white"
stroke-width="1.56803"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> `}renderDisclosureTooltip(){const e=()=>{const t=this.renderRoot.querySelector(".ppgf-disclosure-tooltip");t.open=!1},o=this.productDetailsPageDataController.data?.ppgfDisclosure;return o?i`<sl-tooltip class="ppgf-disclosure-tooltip" part="tooltip">
<div class="ppgf-disclosure-tooltip-content" slot="content" part="tooltip-content">
<button
class="ppgf-disclosure-close"
aria-label="Close tooltip"
part="tooltip-close-button"
="${e}"
>
${this.renderCloseTooltipIcon()}
</button>
<div class="ppgf-disclosure-tooltip-copy" part="tooltip-disclosure-copy">
${C(o.copy)}
</div>
</div>
<span class="ppgf-disclosure-tooltip-trigger" part="tooltip-disclosure-icon">
<div class="ppgf-disclosure-tooltip-trigger-mask d-lg-none"></div>
${j()}
</span>
</sl-tooltip>`:i``}renderDisclosureTooltipHyperlink(){const e=this.productDetailsPageDataController.data?.ppgfDisclosureHyperlink;return e?i`<a class="ppgf-disclosure-hyperlink" href="${e.url}" target="_blank">${e.copy}</a>`:i``}get cssVariables(){const e={"--beam-ProductDetailsPage-imageWidth":"24px","--beam-ProductDetailsPage-imageHeight":"24px","--beam-ProductDetailsPage-maxWidth":"346px","--beam-ProductDetailsPage-paddingTop":"8px","--beam-ProductDetailsPage-paddingRight":"12px","--beam-ProductDetailsPage-paddingBottom":"8px","--beam-ProductDetailsPage-paddingLeft":"15px","--beam-ProductDetailsPage-InfoContainer-marginLeft":"8px","--beam-ProductDetailsPage-InfoContainer-textAlign":"inherit","--beam-ProductDetailsPage-InfoContainer-lineHeight":"15px","--beam-ProductDetailsPage-InfoContainer-marginTop":"4px","--beam-ProductDetailsPage-backgroundColor":"unset","--beam-ProductDetailsPage-TooltipIcon-width":"10px","--beam-ProductDetailsPage-TooltipIcon-color":"inherit","--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor":"#000000","--beam-ProductDetailsPage-PPGFDisclosure-paddingTop":"10px","--beam-ProductDetailsPage-PPGFDisclosure-paddingRight":"8px","--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom":"10px","--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft":"8px","--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color":"#5CA3FF",...u("--beam-ProductDetailsPage-title",{fontSize:"12px",fontWeight:"bold"}),"--beam-ProductDetailsPage-title-textAlign":"left",...u("--beam-ProductDetailsPage-description",{marginTop:"0px",fontSize:"12px",lineHeight:"15px"}),"--beam-ProductDetailsPage-description-textAlign":"left",...u("--beam-ProductDetailsPage-PPGFDisclosureTooltipContent",{fontSize:"12px",lineHeight:"16px",color:"#FFFFFF"}),...A("--beam-ProductDetailsPage"),"--beam-ProductDetailsPage-close-display":"initial","--beam-ProductDetailsPage-close-padding":"0","--beam-ProductDetailsPage-image-placement":"inline-left","--beam-ProductDetailsPage-blockImage-alignSelf":"center","--beam-ProductDetailsPage-promoPill-marginTop":"4px","--beam-ProductDetailsPage-promoPill-alignSelf":"left","--beam-ProductDetailsPage-shouldDisplayColon":"true","--beam-ProductDetailsPage-shouldDisplayPromoPill":"true",...G},o=this.productDetailsPageDataController?.data?.config?.web?.theme||{},t={...e,...o};return Object.assign(Object.create({toCSS(){return $(this)}}),t)}}l.tagName="beam-product-details-page",l.styles=[L,E,y`
:host {
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-ProductDetailsPage-maxWidth);
word-break: normal;
display: block;
}
.root {
padding-top: var(--beam-ProductDetailsPage-paddingTop);
padding-right: var(--beam-ProductDetailsPage-paddingRight);
padding-bottom: var(--beam-ProductDetailsPage-paddingBottom);
padding-left: var(--beam-ProductDetailsPage-paddingLeft);
width: 100%;
background-color: var(--beam-ProductDetailsPage-backgroundColor);
display: flex;
flex-direction: column;
${M("--beam-ProductDetailsPage")}
}
/* When iconDisplay is inline-center */
.inline-display {
display: flex;
}
/* When iconDisplay is block-center */
.block-display {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.promo-container {
order: 2;
display: flex;
margin-top: var(--beam-ProductDetailsPage-promoPill-marginTop);
align-self: var(--beam-ProductDetailsPage-promoPill-alignSelf);
}
.content-inline {
order: 3;
display: flex;
align-items: center;
}
/* Info block for both inline and block layout */
.info-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: var(--beam-ProductDetailsPage-InfoContainer-textAlign);
line-height: var(--beam-ProductDetailsPage-InfoContainer-lineHeight);
margin-top: var(--beam-ProductDetailsPage-InfoContainer-marginTop);
margin-left: var(--beam-ProductDetailsPage-InfoContainer-marginLeft);
}
.block-display .info-container {
order: 3;
}
.root.inline-display .icon-container,
.root.inline-display .info-container {
display: inline-flex;
}
.root.inline-display {
flex-direction: column;
}
.icon-container {
width: var(--beam-ProductDetailsPage-imageWidth);
height: var(--beam-ProductDetailsPage-imageHeight);
align-self: var(--beam-ProductDetailsPage-blockImage-alignSelf);
flex-shrink: 0;
}
.icon-container > img {
width: 100%;
height: 100%;
object-fit: contain;
}
.title {
${g("--beam-ProductDetailsPage-title")}
}
.title-block {
text-align: var(--beam-ProductDetailsPage-title-textAlign);
line-height: var(--beam-ProductDetailsPage-title-lineHeight);
}
.info-inline-promo {
margin-top: var(--beam-ProductDetailsPage-description-marginTop, 0px);
}
.description {
${g("--beam-ProductDetailsPage-description")}
}
.description-block {
text-align: var(--beam-ProductDetailsPage-description-textAlign);
line-height: var(--beam-ProductDetailsPage-description-lineHeight);
${g("--beam-ProductDetailsPage-description")}
}
.ppgf-disclosure-tooltip {
--max-width: 268px;
}
.ppgf-disclosure-tooltip::part(body) {
background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);
padding-top: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingTop);
padding-right: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingRight);
padding-bottom: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom);
padding-left: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft);
}
.ppgf-disclosure-tooltip::part(base__arrow) {
background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);
}
.ppgf-disclosure-tooltip-content {
display: flex;
flex-direction: column;
${g("--beam-ProductDetailsPage-PPGFDisclosureTooltipContent")}
}
.ppgf-disclosure-tooltip-copy > a,
.ppgf-disclosure-close {
pointer-events: auto;
color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);
}
.ppgf-disclosure-close {
display: var(--beam-ProductDetailsPage-close-display);
padding: var(--beam-ProductDetailsPage-close-padding);
height: 12px;
background: none;
border: none;
margin-left: auto;
}
.ppgf-disclosure-tooltip-copy > a:visited {
color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);
}
.ppgf-disclosure-tooltip-trigger {
position: relative;
vertical-align: text-bottom;
}
.ppgf-disclosure-tooltip-trigger-mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);
height: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);
}
.ppgf-disclosure-tooltip-trigger > svg {
width: var(--beam-ProductDetailsPage-TooltipIcon-width);
color: var(--beam-ProductDetailsPage-TooltipIcon-color);
height: auto;
vertical-align: middle;
}
`],c([n({type:String,reflect:!0})],l.prototype,"baseUrl",2),c([n({type:String,reflect:!1})],l.prototype,"apiKey",2),c([n({type:Number})],l.prototype,"storeId",2),c([n({type:String})],l.prototype,"lang",2),c([n({type:Boolean})],l.prototype,"draftConfig",2),c([n({type:Boolean})],l.prototype,"debug",2),c([n({type:String})],l.prototype,"remoteProductIdentifier",2),W(l);export{l as BeamProductDetailsPage};
//# sourceMappingURL=product-details-page.js.map