@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
389 lines (354 loc) • 30 kB
JavaScript
import{y as a,m as k,f as $,g as c,t as v,h as I,u as C,k as P,q as D}from"../chunks/lit-iNN5L_Qk.esm.js";import{d as N}from"../chunks/lodash-P8OIs-at.esm.js";import{u as h,A as y,d as f,a as L,i as m,_ as x}from"../chunks/localize-m-_ESmpk.esm.js";import{D as z,f as U,W as B,j as M,u as E,S as W}from"../chunks/routes-o1QpF40R.esm.js";import{p as A}from"../chunks/progress-bar-PMU_xI3L.esm.js";import{p as F}from"../chunks/promo-pill-label-P1X4xeAx.esm.js";import{partnerLogosConfigDefaults as j}from"./beam-partner-logos.js";import{c as K,d as _,a as O,e as R,b as w}from"../chunks/enforce-config-ZyPq_4CF.esm.js";import{_ as V}from"../chunks/loading-template-t4fFsYtr.esm.js";import{M as H,B as q}from"../chunks/beam-errors-P-Lu07Ce.esm.js";import{createScopedLocalStorage as G}from"../utils/local-storage.js";import{c as J}from"../chunks/css-card-grid-nEc--M5M.esm.js";import{b as Z}from"../chunks/events-6Z5MkCRr.esm.js";import"../utils/logger.js";import"../chunks/vendor-GKiOHg2N.esm.js";const Q=({height:n="1em",width:e="1em"}={})=>a`
<svg
style="${k({height:n,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>
`,p={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:n="1"}={})=>`At no extra cost, select a nonprofit and ${n}% will be donated there for you.`,ctaMessage:({donationPercentage:n="1"}={})=>`At no extra cost, select a nonprofit and ${n}% 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:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1"}={})=>`Choisissez un organisme \xE0 but non lucratif et ${n} % lui sera vers\xE9 en votre nom, sans frais suppl\xE9mentaires.`,submitButtonText:()=>"Confirmer",submitButtonTextCompleted:()=>"Confirm\xE9!",chooseButtonText:()=>"Choisissez"},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deinen Impact",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1"}={})=>`W\xE4hle eine der gemeinn\xFCtzigen Organisationen und spende ${n}% deines Einkaufs ohne zus\xE4tzliche Kosten`,submitButtonText:()=>"Best\xE4tigen",submitButtonTextCompleted:()=>"Best\xE4tigt!",chooseButtonText:()=>"W\xE4hlen"},es:{ctaTitle:()=>"Elige tu contribuci\xF3n",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1"}={})=>`Elige una organizaci\xF3n sin fines de lucro y donaremos ${n}% de tu compra sin coste adicional.`,beamAttribution:()=>"Ofrecido por Beam",submitButtonText:()=>"Confirmar",submitButtonTextCompleted:()=>"\xA1Confirmado!",chooseButtonText:()=>"Elige"},it:{ctaTitle:()=>"Scegli dove fare la differenza",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1"}={})=>`Seleziona un'organizzazione no-profit a cui devolvere l\u2019${n}% del tuo acquisto, senza costi aggiuntivi`,beamAttribution:()=>"Gestito da Beam",submitButtonText:()=>"Confermare",submitButtonTextCompleted:()=>"Confermato!",chooseButtonText:()=>"Scegli"},pl:{beamAttribution:()=>"Wspierany przez Beam",ctaTitle:()=>"Wybierz inicjatyw\u0119, kt\xF3r\u0105 chcesz wesprze\u0107",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1"}={})=>`Wybierz organizacj\u0119, kt\xF3rej przeka\u017Cesz ${n}% warto\u015Bci Twoich zakup\xF3w \u2013 bez \u017Cadnych dodatkowych koszt\xF3w!`,submitButtonText:()=>"Zatwierd\u017A",submitButtonTextCompleted:()=>"Zatwierdzono!",chooseButtonText:()=>"Wybierz"}};var X=Object.defineProperty,Y=Object.getOwnPropertyDescriptor,d=(n,e,o,t)=>{for(var i=t>1?void 0:t?Y(e,o):e,b=n.length-1,l;b>=0;b--)(l=n[b])&&(i=(t?l(e,o,i):l(i))||i);return t&&i&&X(e,o,i),i};class r extends I{constructor(){super(...arguments),this.baseUrl=z,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<768,this.didUserExpandNonprofits=!1,this.shouldUsePromoUI=!1,this.getChainNonprofits=async()=>{if(O(["transactionId","subscriptionId"],this),!this.hasCorrectTransactionConfig&&!this.hasCorrectSubscriptionConfig)throw new H;const e=await U({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,postalCode:this.postalCode,countryCode:this.countryCode,cart:this.cart??void 0,widgetName:B.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}):this.subscriptionId?this.putSubscription({selectedNonprofitId:e}):null,this.putTransaction=async({selectedNonprofitId:e})=>(R(["apiKey","transactionId"],this),M({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},pathParams:{transactionId:Number(this.transactionId)},requestBody:{nonprofitId:e}})),this.putSubscription=async({selectedNonprofitId:e})=>(R(["apiKey","subscriptionId"],this),E({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:e}})),this.nonprofitListDataController=new y(this,this.getChainNonprofits),this.selectionDataController=new y(this,this.updateNonprofitIdForRecord),this.localStorage=G(this),this.makeHandleSelect=(e,o,t)=>async i=>{if(!this.allowChange)return;const b=this.selectedNonprofitId;if(i instanceof KeyboardEvent){let l=null;switch(i.key){case"ArrowUp":case"ArrowLeft":o===0?l=t[t.length-1]:l=t[o-1],i.preventDefault();break;case"ArrowRight":case"ArrowDown":o===t.length-1?l=t[0]:l=t[o+1],i.preventDefault();break;case"Enter":case" ":i.preventDefault();break;default:return}if(l){const u=this.renderRoot.querySelector(`[data-value="${l.nonprofit.id}"]`);u!==null&&(u.tabIndex=0,u.focus());return}}if(i.currentTarget instanceof HTMLElement){if(b===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.shouldUseStoredSelection&&(this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString()));const o=this.nonprofitListDataController?.data?.nonprofits.find(t=>t.nonprofit.id===e);this.dispatchEvent(new Z({selectedNonprofitId:e,nonprofitName:o?.nonprofit.name,source:B.redeem_transaction}))},this.evaluateBreakPoints=N(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return W[this.lang]||"en"}get hasCorrectTransactionConfig(){return w(["apiKey","transactionId"],this)}get hasCorrectSubscriptionConfig(){return w(["apiKey","subscriptionId"],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 t of o)if(e.has(t)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){R(["apiKey"],this),this.shouldUseStoredSelection&&(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||void 0);try{const{createdAt:e=0,data:o}=this.localStorage.getItemJson("chainNonprofits")||{},t=2*60*60*1e3;new Date(e).valueOf()+t>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 shouldUseStoredSelection(){return!this.subscriptionId}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...f("--beam-RedeemTransaction-title",{fontSize:"1.25em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-description",{marginTop:"0.5em",lineHeight:"normal"}),...j,...A,"--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",...f("--beam-RedeemTransaction-options-details",{fontSize:"0.85em",marginTop:"0px",lineHeight:"normal",letterSpacing:"-0.45px"}),...f("--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",...f("--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%",...F},o=this.nonprofitListDataController?.data?.config?.web?.theme||{},t={...e,...o};return Object.assign(Object.create({toCSS(){return L(this)}}),t)}handleChooseClick(){this.didUserExpandNonprofits=!0}get shouldCollapse(){const e=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-mobile"],o=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-desktop"],t=e?.toLowerCase()==="true",i=o?.toLowerCase()==="true";return this.isMobile&&t||!this.isMobile&&i}renderSubmitButton(e){return a`
${this.didUserExpandNonprofits||!this.shouldCollapse?a` <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||p[this.configLang].submitButtonTextCompleted()):m(this.configLang,e?.config?.web?.confirmButton||p[this.configLang].submitButtonText())}
</button>`:a`
<button type="button" @click="${this.handleChooseClick}" class="submitButton" part="submitButton">
${m(this.configLang,e?.config?.web?.collapsedButton||p[this.configLang].chooseButtonText())}
</button>
`}
`}renderRadioButton(){return a`
<div class="radioButtonContainer">
<span part="radioButton" class="radioButton">
<span style="line-height: 0;"> ${Q({height:"7px",width:"7px"})} </span>
</span>
</div>
`}renderNonprofitImage(e,o){const t=this.cssVariables["--beam-RedeemTransaction-cardStyle"],i=o?t==="'icon'"?e.nonprofit.causeIconUrl:t==="'selected_icon'"?e.nonprofit.causeIconSelectedUrl:e.imageUrl:e.imageUrl;return a`
${o?a` <div class="icon-container">
<div class="icon-background">
<img src="${i}" alt="" role="presentation" class="icon" />
</div>
</div>`:a` <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="${i}"
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 a`
<div class="detailsCause" style="${h("--beam-RedeemTransaction-options-details-cause")}">
${m(this.configLang,e.nonprofit.cause||"")}
</div>
<p class="detailsDescription">${P(m(this.configLang,e.impact.description||""))}</p>
`}renderProgressBar(e){return a`
<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,t){return a`
<div class="details" part="details">
${this.renderOptionDetail(e)} ${this.renderPromoPill(e,o,t)}
</div>
`}renderPromoPill(e,o,t){return a`
${e.promo?.isActive&&this.shouldUsePromoUI&&o?a`<beam-promo-info-pill .promo=${t?.config?.web?.promo} shortVersion></beam-promo-info-pill>`:a``}
`}render(){const{selectedNonprofitId:e}=this,{data:o,loading:t}=this.nonprofitListDataController;if(t&&!o)return V();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 q("No data")}):"";const i=o?.nonprofits||[],b=i.find(s=>s.nonprofit.id===e)||null,l=this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'icon'"||this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'selected_icon'";this.shouldUsePromoUI=!!o?.config?.web?.promo;const u=i.some(s=>!s.promo||!s.promo.isActive);return a`
<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}
>
${D(i,s=>s.nonprofit.id,(s,g)=>{const T=e===s.nonprofit.id,S=T||b==null&&g===0;return a`
<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,g,i)}
@keydown=${this.makeHandleSelect(s.nonprofit.id,g,i)}
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,u,o)}
</div>
${this.renderProgressBar(s)}
</div>
</div>
</div>
`})}
</div>
<div class="submitButtonContainer">${this.renderSubmitButton(o)}</div>
<div class="headerContainer">
<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="${h("--beam-RedeemTransaction-title")}; margin-right: 8px;"
>
${m(this.configLang,o?.config?.web?.title)||p[this.configLang].ctaTitle()}
</h3>
${this.shouldUsePromoUI?a`<beam-promo-info-pill
.promo=${o?.config?.web?.promo}
style="${this.isMobile&&"order: -1; margin-bottom:10px;"}"
></beam-promo-info-pill>`:a``}
</div>
<p class="description" part="description" style="${h("--beam-RedeemTransaction-description")}">
${this.shouldUsePromoUI?a`<span style="font-weight:bold">
${m(this.configLang,o?.config?.web?.promoDescriptionPrefix||"")||p[this.configLang].ctaPromoPrefixMessage()}
</span>
<span>
${m(this.configLang,o?.config?.web?.promoDescription||"")||p[this.configLang].ctaPromoMessage()}
</span>`:a`<span
>${m(this.configLang,o?.config?.web?.description||"")||p[this.configLang].ctaMessage()}
</span>`}
</p>
</div>
</div>
<beam-partner-logos
partnerName="${o.chain.name}"
partnerLogoUrl="${o.chain.logoUrl}"
style="order: 1"
></beam-partner-logos>
</div>
`}}r.tagName="beam-redeem-transaction",r.styles=[K,$`
: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 {
${h("--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 {
${h("--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;
}
`,J({gap:"0px",itemMinWidth:"var(--beam-RedeemTransaction-options-minWidth, 0px)",columnCount:"var(--beam-RedeemTransaction-options-columnCount, 1)"})],d([c({type:String})],r.prototype,"baseUrl",2),d([c({type:String})],r.prototype,"apiKey",2),d([c({type:Number})],r.prototype,"transactionId",2),d([c({type:String})],r.prototype,"subscriptionId",2),d([c({type:Number})],r.prototype,"storeId",2),d([c({type:String})],r.prototype,"countryCode",2),d([c({type:String})],r.prototype,"postalCode",2),d([c({type:Object})],r.prototype,"cart",2),d([c({type:Number,reflect:!0})],r.prototype,"selectedNonprofitId",2),d([c({type:String})],r.prototype,"lang",2),d([c({type:Boolean})],r.prototype,"debug",2),d([c({type:Boolean})],r.prototype,"draftConfig",2),d([v()],r.prototype,"isMobile",2),d([v()],r.prototype,"didUserExpandNonprofits",2),d([v()],r.prototype,"shouldUsePromoUI",2),_(r);export{r as BeamRedeemTransaction};
//# sourceMappingURL=redeem-transaction.js.map