@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
390 lines (355 loc) • 30.9 kB
JavaScript
import{m as $,y as i,f as P,g as c,t as v,h as D,q as C,k as z,u as E}from"./lit-WqMxC_PA.esm.js";import{d as I}from"./lodash-D3TLHRR_.esm.js";import{u as g,A as B,d as h,a as N,i as m,_ as x}from"./localize-Btu9xYcE.esm.js";import{m as R,D as L,d as M,W as y,S as A}from"./routes-DguZveS3.esm.js";import{p as F}from"./progress-bar-DF7UuuHb.esm.js";import{p as U}from"./promo-pill-label-WGLW3bql.esm.js";import{partnerLogosConfigDefaults as W}from"../components/beam-partner-logos.esm.js";import{c as O,d as j,e as w,a as _}from"./enforce-config-CZ3ToOgr.esm.js";import{_ as K}from"./loading-template-DG4lkIIc.esm.js";import{M as V,B as H}from"./beam-errors-Ci0d3926.esm.js";import{createScopedLocalStorage as q}from"../utils/local-storage.esm.js";import{c as G}from"./css-card-grid-CvoGpsJH.esm.js";import{c as J}from"./events-Dki0ka4F.esm.js";const Q=R("/v4/transaction","post"),X=R("/v4/transaction/redeem/{transactionId}","put"),Y=({height:t="1em",width:e="1em"}={})=>i`
<svg
style="${$({height:t,width:e,position:"relative",bottom:"0"})}"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<!-- Filled Circle -->
<circle cx="12" cy="12" r="10" fill="currentColor" />
</svg>
`,b={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`select a nonprofit and ${t}% will be donated there for you.`,ctaMessage:({donationPercentage:t="1"}={})=>`At no extra cost, select a nonprofit and ${t}% will be donated there for you.`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose a nonprofit"},fr:{beamAttribution:()=>"Optimis\xE9 par Beam",ctaTitle:()=>"Choisissez votre cause",ctaPromoPrefixMessage:()=>"Sans frais suppl\xE9mentaires,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`s\xE9lectionnez une association et ${t} % sera revers\xE9 en votre nom.`,ctaMessage:({donationPercentage:t="1"}={})=>`Sans frais suppl\xE9mentaires, choisissez une association et ${t} % de votre commande lui sera revers\xE9 en votre nom.`,submitButtonText:()=>"Confirmer",submitButtonTextCompleted:()=>"Confirm\xE9 !",chooseButtonText:()=>"Choisir une association"},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deine Wirkung",ctaPromoPrefixMessage:()=>"Ohne zus\xE4tzliche Kosten,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`w\xE4hle eine gemeinn\xFCtzige Organisation und ${t}% werden in deinem Namen gespendet.`,ctaMessage:({donationPercentage:t="1"}={})=>`Ohne zus\xE4tzliche Kosten kannst du eine Organisation ausw\xE4hlen, und ${t}% deiner Bestellung werden gespendet.`,submitButtonText:()=>"Best\xE4tigen",submitButtonTextCompleted:()=>"Best\xE4tigt!",chooseButtonText:()=>"W\xE4hle eine Organisation"},es:{beamAttribution:()=>"Ofrecido por Beam",ctaTitle:()=>"Elige tu impacto",ctaPromoPrefixMessage:()=>"Sin coste adicional,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`elige una organizaci\xF3n y donaremos el ${t}% en tu nombre.`,ctaMessage:({donationPercentage:t="1"}={})=>`Sin coste adicional, elige una organizaci\xF3n sin \xE1nimo de lucro y donaremos el ${t}% de tu compra en tu nombre.`,submitButtonText:()=>"Confirmar",submitButtonTextCompleted:()=>"\xA1Confirmado!",chooseButtonText:()=>"Elige una organizaci\xF3n"},it:{beamAttribution:()=>"Promosso da Beam",ctaTitle:()=>"Scegli il tuo impatto",ctaPromoPrefixMessage:()=>"Senza costi aggiuntivi,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`scegli un'organizzazione e doneremo l\u2019${t}% per te.`,ctaMessage:({donationPercentage:t="1"}={})=>`Senza costi aggiuntivi, scegli un'organizzazione no profit e doneremo l\u2019${t}% del tuo acquisto a suo favore.`,submitButtonText:()=>"Conferma",submitButtonTextCompleted:()=>"Confermato!",chooseButtonText:()=>"Scegli un'organizzazione"},pl:{beamAttribution:()=>"Obs\u0142ugiwane przez Beam",ctaTitle:()=>"Wybierz sw\xF3j wp\u0142yw",ctaPromoPrefixMessage:()=>"Bez dodatkowych koszt\xF3w,",ctaPromoMessage:({donationPercentage:t="1"}={})=>`wybierz organizacj\u0119, a ${t}% zostanie przekazane w Twoim imieniu.`,ctaMessage:({donationPercentage:t="1"}={})=>`Bez dodatkowych koszt\xF3w mo\u017Cesz wybra\u0107 organizacj\u0119, kt\xF3rej przeka\u017Cemy ${t}% warto\u015Bci Twojego zam\xF3wienia w Twoim imieniu.`,submitButtonText:()=>"Potwierd\u017A",submitButtonTextCompleted:()=>"Potwierdzono!",chooseButtonText:()=>"Wybierz organizacj\u0119"},ja:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"\u5BC4\u4ED8\u5148\u3092\u304A\u9078\u3073\u304F\u3060\u3055\u3044\u3002",ctaPromoPrefixMessage:()=>"\u8FFD\u52A0\u8CBB\u7528\u306A\u3057\u3067\u3001",ctaPromoMessage:({donationPercentage:t="1"}={})=>`\u975E\u55B6\u5229\u56E3\u4F53\u3092\u9078\u3076\u3068\u3001${t}%\u304C\u305D\u306E\u56E3\u4F53\u306B\u5BC4\u4ED8\u3055\u308C\u307E\u3059\u3002`,ctaMessage:({donationPercentage:t="1"}={})=>`\u8FFD\u52A0\u8CBB\u7528\u306A\u3057\u3067\u975E\u55B6\u5229\u56E3\u4F53\u3092\u304A\u9078\u3073\u3044\u305F\u3060\u304F\u3068\u3001\u3054\u8CFC\u5165\u91D1\u984D\u306E${t}%\u304C\u5BC4\u4ED8\u3055\u308C\u307E\u3059\u3002`,submitButtonText:()=>"\u78BA\u8A8D\u3059\u308B",submitButtonTextCompleted:()=>"\u78BA\u8A8D\u6E08\u307F",chooseButtonText:()=>"\u975E\u55B6\u5229\u56E3\u4F53\u3092\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}};var Z=Object.defineProperty,d=(t,e,o,a)=>{for(var n=void 0,u=t.length-1,l;u>=0;u--)(l=t[u])&&(n=l(e,o,n)||n);return n&&Z(e,o,n),n};class r extends D{constructor(){super(...arguments),this.baseUrl=L,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<768,this.didUserExpandNonprofits=!1,this.shouldUsePromoUI=!1,this.getChainNonprofits=async()=>{if(!this.hasCorrectTransactionConfig)throw new V;const e=await M({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,postalCode:this.postalCode,countryCode:this.countryCode,transactionId:String(this.transactionId),cart:this.cart??void 0,widgetName:y.redeem_transaction,options:{config:{draftConfig:this.draftConfig}},version:"2.0.0",lang:this.configLang}});return e.store?.id&&e.store.id!==this.storeId&&(this.storeId=e.store.id),this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:e}),e},this.updateNonprofitIdForRecord=async({selectedNonprofitId:e})=>this.transactionId?this.putTransaction({selectedNonprofitId:e}):null,this.putTransaction=async({selectedNonprofitId:e})=>(w(["apiKey","transactionId"],this),X({baseUrl:this.baseUrl,apiRoot:"/api",headers:{authorization:`Api-Key ${this.apiKey}`},pathParams:{transactionId:this.transactionId},requestBody:{nonprofitId:e}})),this.nonprofitListDataController=new B(this,this.getChainNonprofits),this.selectionDataController=new B(this,this.updateNonprofitIdForRecord),this.localStorage=q(this),this.makeHandleSelect=(e,o,a)=>async n=>{if(!this.allowChange)return;const u=this.selectedNonprofitId;if(n instanceof KeyboardEvent){let l=null;switch(n.key){case"ArrowUp":case"ArrowLeft":o===0?l=a[a.length-1]:l=a[o-1],n.preventDefault();break;case"ArrowRight":case"ArrowDown":o===a.length-1?l=a[0]:l=a[o+1],n.preventDefault();break;case"Enter":case" ":n.preventDefault();break;default:return}if(l){const p=this.renderRoot.querySelector(`[data-value="${l.nonprofit.id}"]`);p!==null&&(p.tabIndex=0,p.focus());return}}if(n.currentTarget instanceof HTMLElement){if(u===e)return;this.selectedNonprofitId=e}},this.handleSubmit=async()=>{const{selectedNonprofitId:e}=this;if(!this.allowSubmit||e==null)return;await this.selectionDataController.exec({selectedNonprofitId:e}),this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString());const o=this.nonprofitListDataController?.data?.nonprofits.find(a=>a.nonprofit.id===e);this.dispatchEvent(new J({selectedNonprofitId:e,nonprofitName:o?.nonprofit.name,source:y.redeem_transaction,timestamp:new Date}))},this.evaluateBreakPoints=I(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return A[this.lang]||"en"}get hasCorrectTransactionConfig(){return _(["apiKey","transactionId"],this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(e){await this.restoreStateFromCache()}async updated(e){const o=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const a of o)if(e.has(a)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){w(["apiKey"],this),this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||void 0;try{const{createdAt:e=0,data:o}=this.localStorage.getItemJson("chainNonprofits")||{},a=2*60*60*1e3;new Date(e).valueOf()+a>new Date().valueOf()&&(this.nonprofitListDataController.data=o,this.nonprofitListDataController.loading=!1)}catch{}}get allowChange(){return this.selectionDataController.data==null&&!this.selectionDataController.loading}get allowSubmit(){return!!(this.selectedNonprofitId&&this.allowChange)}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...h("--beam-RedeemTransaction-title",{fontSize:"1.25em",fontWeight:"bold"}),...h("--beam-RedeemTransaction-description",{marginTop:"0.5em",lineHeight:"normal"}),...W,...F,"--beam-RedeemTransaction-maxWidth":"1000px","--beam-RedeemTransaction-submitButton-fontSize":"14px","--beam-RedeemTransaction-submitButton-fontWeight":"inherit","--beam-RedeemTransaction-submitButton-fontFamily":"inherit","--beam-RedeemTransaction-submitButton-textTransform":"uppercase","--beam-RedeemTransaction-submitButton-color":"#fff","--beam-RedeemTransaction-submitButton-backgroundColor":"#000000","--beam-RedeemTransaction-submitButton-borderRadius":"0px","--beam-RedeemTransaction-submitButton-borderColor":"#000000","--beam-RedeemTransaction-submitButton-padding":"16px 0px","--beam-RedeemTransaction-submitButton-width":"100%","--beam-RedeemTransaction-submitButton-marginTop":"10px","--beam-RedeemTransaction-submitButton-marginBottom":"10px","--beam-RedeemTransaction-submitButtonContainer-display":"flex","--beam-RedeemTransaction-submitButtonContainer-backgroundColor":"#fff","--beam-RedeemTransaction-submitButton-hover-backgroundColor":"#000000","--beam-RedeemTransaction-submitButton-hover-borderColor":"#000000","--beam-RedeemTransaction-submitButton-hover-color":"#fff","--beam-RedeemTransaction-submitButton-disabled-borderColor":"#767676","--beam-RedeemTransaction-submitButton-disabled-backgroundColor":"#767676","--beam-RedeemTransaction-submitButton-disabled-color":"#fff","--beam-RedeemTransaction-radioButton-color":"transparent","--beam-RedeemTransaction-radioButton-borderColor":"#707070","--beam-RedeemTransaction-radioButton-backgroundColor":"#fff","--beam-RedeemTransaction-radioButton-hover-color":"#fff","--beam-RedeemTransaction-radioButton-hover-backgroundColor":"#000","--beam-RedeemTransaction-radioButton-hover-borderColor":"#000","--beam-RedeemTransaction-radioButton-selected-borderColor":"#000","--beam-RedeemTransaction-radioButton-selected-backgroundColor":"#000","--beam-RedeemTransaction-radioButton-selected-color":"#fff","--beam-RedeemTransaction-options-minWidth":"0px","--beam-RedeemTransaction-options-columnCount":"1","--beam-RedeemTransaction-options-borderWidth":"1px","--beam-RedeemTransaction-options-image-borderRadius":"8px","--beam-RedeemTransaction-options-image-height":"70px","--beam-RedeemTransaction-options-image-height-mobile":"75px","--beam-RedeemTransaction-options-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-backgroundColor":"transparent","--beam-RedeemTransaction-options-marginTop":"15px","--beam-RedeemTransaction-options-hover-backgroundColor":"#f1f1f1","--beam-RedeemTransaction-options-hover-borderWidth":".5px","--beam-RedeemTransaction-options-hover-borderColor":"#000000","--beam-RedeemTransaction-options-selected-borderColor":"#000000","--beam-RedeemTransaction-options-selected-borderWidth":".5px","--beam-RedeemTransaction-options-selected-backgroundColor":"#eee",...h("--beam-RedeemTransaction-options-details",{fontSize:"0.85em",marginTop:"0px",lineHeight:"normal",letterSpacing:"-0.45px"}),...h("--beam-RedeemTransaction-options-details-cause",{fontSize:"1em",fontWeight:"bold"}),"--beam-RedeemTransaction-options-details-nonprofitName-fontWeight":"normal","--beam-RedeemTransaction-options-details-nonprofitName-fontStyle":"inherit","--beam-RedeemTransaction-options-details-fundingProgress-marginTop":"3px",...h("--beam-RedeemTransaction-options-details-fundingProgressLabel",{fontSize:"0.85em",textTransform:"capitalize"}),"--beam-RedeemTransaction-cardStyle":"'image'","--beam-RedeemTransaction-options-icon-padding":"0px","--beam-RedeemTransaction-options-icon-backgroundColor":"#F3F3F3","--beam-RedeemTransaction-options-collapseNonprofits-mobile":"false","--beam-RedeemTransaction-options-collapseNonprofits-desktop":"false","--beam-RedeemTransaction-image-width":"13%","--beam-RedeemTransaction-image-height":"50%","--beam-RedeemTransaction-image-width-mobile":"16%",...U},o=this.nonprofitListDataController?.data?.config?.web?.theme||{},a={...e,...o};return Object.assign(Object.create({toCSS(){return N(this)}}),a)}handleChooseClick(){this.didUserExpandNonprofits=!0}get shouldCollapse(){const e=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-mobile"],o=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-desktop"],a=e?.toLowerCase()==="true",n=o?.toLowerCase()==="true";return this.isMobile&&a||!this.isMobile&&n}renderSubmitButton(e){return i`
${this.didUserExpandNonprofits||!this.shouldCollapse?i` <button
type="button"
?aria-disabled=${!this.allowSubmit}
@click="${this.handleSubmit}"
class="${C({isDisabled:!this.allowSubmit,submitButton:!0})}"
part="submitButton"
>
${this.selectionDataController.data!==null?m(this.configLang,e?.config?.web?.confirmedButton||b[this.configLang].submitButtonTextCompleted()):m(this.configLang,e?.config?.web?.confirmButton||b[this.configLang].submitButtonText())}
</button>`:i`
<button type="button" @click="${this.handleChooseClick}" class="submitButton" part="submitButton">
${m(this.configLang,e?.config?.web?.collapsedButton||b[this.configLang].chooseButtonText())}
</button>
`}
`}renderRadioButton(){return i`
<div class="radioButtonContainer">
<span part="radioButton" class="radioButton">
<span style="line-height: 0;"> ${Y({height:"7px",width:"7px"})} </span>
</span>
</div>
`}renderNonprofitImage(e,o){const a=this.cssVariables["--beam-RedeemTransaction-cardStyle"],n=o?a==="'icon'"?e.nonprofit.causeIconUrl:a==="'selected_icon'"?e.nonprofit.causeIconSelectedUrl:e.imageUrl:e.imageUrl;return i`
${o?i` <div class="icon-container">
<div class="icon-background">
<img src="${n}" alt="" role="presentation" class="icon" />
</div>
</div>`:i` <div
class="image-container"
style="${this.isMobile?"flex: 1 0 var(--beam-RedeemTransaction-image-width-mobile)":"flex: 1 0 var(--beam-RedeemTransaction-image-width)"}"
>
<img
src="${n}"
alt=""
role="presentation"
class="image"
style="
width: 100%;
height: ${this.isMobile?"var(--beam-RedeemTransaction-options-image-height-mobile)":"var(--beam-RedeemTransaction-options-image-height)"};
object-fit: cover;
border-radius: var(--beam-RedeemTransaction-options-image-borderRadius);}
"
/>
</div>`}
`}renderOptionDetail(e){return i`
<div class="detailsCause" style="${g("--beam-RedeemTransaction-options-details-cause")}">
${m(this.configLang,e.nonprofit.cause||"")}
</div>
<p class="detailsDescription">${z(m(this.configLang,e.impact.description||""))}</p>
`}renderProgressBar(e){return i`
<div class="progressBarContainer">
<beam-progress-bar value="${e.impact.goalProgressPercentage}" style="flex: 1;"></beam-progress-bar>
<span class="details-progressBarLabel">
${m(this.configLang,e.impact.goalProgressText)}
</span>
</div>
`}renderNonprofitDetails(e,o,a){return i`
<div class="details" part="details">
${this.renderOptionDetail(e)} ${this.renderPromoPill(e,o,a)}
</div>
`}renderPromoPill(e,o,a){return i`
${e.promo?.isActive&&this.shouldUsePromoUI&&o?i`<beam-promo-info-pill .promo=${a?.config?.web?.promo} shortVersion></beam-promo-info-pill>`:i``}
`}render(){const{selectedNonprofitId:e}=this,{data:o,loading:a}=this.nonprofitListDataController;if(a&&!o)return K();if(this.nonprofitListDataController.error)return this.debug?x({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return x({error:this.selectionDataController.error});if(o==null)return this.debug?x({error:new H("No data")}):"";const n=o?.nonprofits||[],u=n.find(s=>s.nonprofit.id===e)||null,l=this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'icon'"||this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'selected_icon'",p=o?.config?.web?.promo;this.shouldUsePromoUI=!!p;const k=n.some(s=>!s.promo||!s.promo.isActive);return i`
<style>
:host {
${this.cssVariables.toCSS()}
}
</style>
<!-- Custom flex order fixes tab cycling so submit button is after content -->
<div style="display: flex; flex-direction: column;" class="root">
<div
style="order: 3;"
tabindex="-1"
class="options cardGrid ${C({isHidden:!this.didUserExpandNonprofits&&this.shouldCollapse})}"
part="options"
role="radiogroup"
aria-labelledby="beam-RedeemTransaction-title"
?aria-disabled=${!this.allowChange}
>
${E(n,s=>s.nonprofit.id,(s,f)=>{const T=e===s.nonprofit.id,S=T||u==null&&f===0;return i`
<div
class="option ${C({isSelected:T,isDisabled:!this.allowChange})}"
part="option"
role="radio"
tabindex="${S?0:-1}"
data-value=${s.nonprofit.id}
?aria-checked=${T}
@click=${this.makeHandleSelect(s.nonprofit.id,f,n)}
@keydown=${this.makeHandleSelect(s.nonprofit.id,f,n)}
aria-label="${m(this.configLang,s.nonprofit.cause||"")}"
style="display: flex; flex-direction: column; padding: 11px; justify-content:center;"
>
<div class="optionContainer" style="display: flex; align-items: flex-start; gap: 8px;">
${this.renderRadioButton()}
<div
class="nonprofitInfoContainer"
style="flex: 1; display: flex; flex-direction: column; gap: 5px;"
>
<div class="imageDetailContainer" style="display: flex; gap: 8px;">
${this.renderNonprofitImage(s,l)}
${this.renderNonprofitDetails(s,k,o)}
</div>
${this.renderProgressBar(s)}
</div>
</div>
</div>
`})}
</div>
<div class="submitButtonContainer" part="submit-button-container">${this.renderSubmitButton(o)}</div>
<div class="headerContainer" part="header-container">
<div>
<div
class="header-promo-pill-container"
style="display: flex; ${this.isMobile&&"flex-direction: column; align-items: flex-start;"}"
>
<h3
class="title"
part="title"
id="beam-RedeemTransaction-title"
style="${g("--beam-RedeemTransaction-title")}; margin-right: 8px;"
>
${m(this.configLang,o?.config?.web?.title)||b[this.configLang].ctaTitle()}
</h3>
${this.shouldUsePromoUI?i`<beam-promo-info-pill
.promo=${p}
style="${this.isMobile&&"order: -1; margin-bottom:10px;"}"
></beam-promo-info-pill>`:i``}
</div>
<p class="description" part="description" style="${g("--beam-RedeemTransaction-description")}">
${this.shouldUsePromoUI?i`<span style="font-weight:bold">
${m(this.configLang,o?.config?.web?.promoDescriptionPrefix||"")||b[this.configLang].ctaPromoPrefixMessage()}
</span>
<span>
${m(this.configLang,o?.config?.web?.promoDescription||"")||b[this.configLang].ctaPromoMessage()}
</span>`:i`<span
>${m(this.configLang,o?.config?.web?.description||"")||b[this.configLang].ctaMessage()}
</span>`}
</p>
</div>
</div>
<beam-partner-logos
partnerName="${o.chain.name}"
partnerLogoUrl="${o.chain.logoUrl}"
style="order: 1"
part="logos"
></beam-partner-logos>
</div>
`}}r.tagName="beam-redeem-transaction",r.styles=[O,P`
:host {
display: block;
max-width: var(--beam-RedeemTransaction-maxWidth);
font-family: var(--beam-fontFamily);
font-style: var(--beam-fontStyle);
font-size: var(--beam-fontSize);
background-color: var(--beam-backgroundColor);
color: var(--beam-textColor);
word-break: normal;
}
.headerContainer {
align-items: flex-start;
justify-content: space-between;
display: flex;
order: 2;
}
.submitButtonContainer {
margin-top: var(--beam-RedeemTransaction-submitButton-marginTop);
margin-bottom: var(--beam-RedeemTransaction-submitButton-marginBottom);
background-color: var(--beam-RedeemTransaction-submitButtonContainer-backgroundColor);
display: var(--beam-RedeemTransaction-submitButtonContainer-display);
}
.submitButton {
color: var(--beam-RedeemTransaction-submitButton-color);
background-color: var(--beam-RedeemTransaction-submitButton-backgroundColor);
border: 1px solid var(--beam-RedeemTransaction-submitButton-borderColor);
font-size: var(--beam-RedeemTransaction-submitButton-fontSize);
font-weight: var(--beam-RedeemTransaction-submitButton-fontWeight);
font-family: var(--beam-RedeemTransaction-submitButton-fontFamily);
text-transform: var(--beam-RedeemTransaction-submitButton-textTransform);
border-radius: var(--beam-RedeemTransaction-submitButton-borderRadius);
padding: var(--beam-RedeemTransaction-submitButton-padding);
width: var(--beam-RedeemTransaction-submitButton-width);
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
cursor: pointer;
}
.submitButton:not(.isDisabled):focus-visible,
.submitButton:not(.isDisabled):hover {
background-color: var(--beam-RedeemTransaction-submitButton-hover-backgroundColor);
border-color: var(--beam-RedeemTransaction-submitButton-hover-borderColor);
color: var(--beam-RedeemTransaction-submitButton-hover-color);
}
.submitButton.isDisabled {
color: var(--beam-RedeemTransaction-submitButton-disabled-color);
background-color: var(--beam-RedeemTransaction-submitButton-disabled-backgroundColor);
border-color: var(--beam-RedeemTransaction-submitButton-disabled-borderColor);
cursor: not-allowed;
}
.options {
margin-top: var(--beam-RedeemTransaction-options-marginTop);
order: 3;
flex-grow: 1;
}
.options.isHidden {
display: none;
}
.option {
border: var(--beam-RedeemTransaction-options-borderWidth) solid
var(--beam-RedeemTransaction-options-borderColor);
border-bottom: none;
background-color: var(--beam-RedeemTransaction-options-backgroundColor);
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s, outline 0.2s;
}
.option:first-child {
border-radius: 8px 8px 0 0; /* Top corners rounded */
}
.option:last-child {
border-bottom: var(--beam-RedeemTransaction-options-borderWidth) solid
var(--beam-RedeemTransaction-options-borderColor);
border-radius: 0 0 8px 8px; /* Bottom corners rounded */
}
.option:not(.isDisabled):not(:last-child):focus-visible,
.option:not(.isDisabled):not(:last-child):hover,
.option:not(.isSelected):not(:last-child):focus-visible,
.option:not(.isSelected):not(:last-child):hover {
background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);
outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid
var(--beam-RedeemTransaction-options-hover-borderColor);
border-bottom: var(--beam-RedeemTransaction-options-hover-borderWidth) solid
var(--beam-RedeemTransaction-options-hover-borderColor);
}
.option:not(.isDisabled):focus-visible,
.option:not(.isDisabled):hover,
.option:not(.isSelected):focus-visible,
.option:not(.isSelected):hover {
background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);
outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid
var(--beam-RedeemTransaction-options-hover-borderColor);
}
.option.isDisabled {
cursor: not-allowed;
}
.option.isSelected {
outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid
var(--beam-RedeemTransaction-options-selected-borderColor);
background-color: var(--beam-RedeemTransaction-options-selected-backgroundColor);
border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid
var(--beam-RedeemTransaction-options-selected-borderColor);
}
.option.isSelected:focus-visible,
.option.isSelected:hover {
outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid
var(--beam-RedeemTransaction-options-selected-borderColor);
border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid
var(--beam-RedeemTransaction-options-selected-borderColor);
}
.option .radioButton {
border-width: 1px;
border-style: solid;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
color: var(--beam-RedeemTransaction-radioButton-color);
background-color: var(--beam-RedeemTransaction-radioButton-backgroundColor);
border-color: var(--beam-RedeemTransaction-radioButton-borderColor);
}
.option.isSelected .radioButton,
.option.isSelected:focus-visible .radioButton,
.option.isSelected:hover .radioButton {
color: var(--beam-RedeemTransaction-radioButton-selected-color);
background-color: var(--beam-RedeemTransaction-radioButton-selected-backgroundColor);
border-color: var(--beam-RedeemTransaction-radioButton-selected-borderColor);
}
.option:not(.isSelected):focus-visible .radioButton,
.option:not(.isSelected):hover .radioButton {
color: var(--beam-RedeemTransaction-radioButton-hover-color);
background-color: var(--beam-RedeemTransaction-radioButton-hover-backgroundColor);
border-color: var(--beam-RedeemTransaction-radioButton-hover-borderColor);
}
.detailsDescription {
${g("--beam-RedeemTransaction-options-details")}
}
.detailsDescription .nonprofitName {
font-weight: var(--beam-RedeemTransaction-options-details-nonprofitName-fontWeight);
font-style: var(--beam-RedeemTransaction-options-details-nonprofitName-fontStyle);
}
.radioButtonContainer {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.radioButton {
padding: 5px;
border-radius: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.imageContainer {
flex: 1 0 var(--beam-RedeemTransaction-image-width);
display: flex;
flex-direction: column;
}
.progressBarContainer {
display: flex;
align-items: center;
}
.details-progressBarLabel {
${g("--beam-RedeemTransaction-options-details-fundingProgressLabel")}
white-space: nowrap;
text-align: right;
margin-left: 15px;
}
.details {
flex: 1 1 100%;
display: flex;
flex-direction: column;
gap: 5px;
}
.root {
display: flex;
flex-direction: column;
}
.submitButtonContainer {
order: 4;
position: sticky;
bottom: 0;
z-index: 999;
}
.icon-background {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: var(--beam-RedeemTransaction-options-icon-backgroundColor);
display: flex;
justify-content: center;
align-items: center;
}
.icon {
height: var(--beam-RedeemTransaction-image-height);
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
}
`,G({gap:"0px",itemMinWidth:"var(--beam-RedeemTransaction-options-minWidth, 0px)",columnCount:"var(--beam-RedeemTransaction-options-columnCount, 1)"})],d([c({type:String})],r.prototype,"baseUrl"),d([c({type:String})],r.prototype,"apiKey"),d([c({type:Number})],r.prototype,"transactionId"),d([c({type:Number})],r.prototype,"storeId"),d([c({type:String})],r.prototype,"countryCode"),d([c({type:String})],r.prototype,"postalCode"),d([c({type:Object})],r.prototype,"cart"),d([c({type:Number,reflect:!0})],r.prototype,"selectedNonprofitId"),d([c({type:String})],r.prototype,"lang"),d([c({type:Boolean})],r.prototype,"debug"),d([c({type:Boolean})],r.prototype,"draftConfig"),d([v()],r.prototype,"isMobile"),d([v()],r.prototype,"didUserExpandNonprofits"),d([v()],r.prototype,"shouldUsePromoUI"),j(r);export{r as B,Q as p};
//# sourceMappingURL=index-C5gnsl34.esm.js.map