@beamimpact/web-sdk 1.44.2 → 1.45.3

package/dist/components/redeem-transaction.js

@@ -1,21 +1,73 @@
-import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../chunks/lit-3QHn3fwl.esm.js";import{d as z}from"../chunks/lodash-P8OIs-at.esm.js";import{u as h,A as k,d as f,a as M,_ as C,i as m}from"../chunks/localize-SsJbTmMj.esm.js";import{D as L,f as E,W as B,h as W,u as A,S as F}from"../chunks/routes-eIRRJ7c1.esm.js";import{p as K}from"../chunks/progress-bar-HVG_n8_6.esm.js";import{p as _}from"../chunks/promo-pill-label-81dVN7VY.esm.js";import{partnerLogosConfigDefaults as O}from"./beam-partner-logos.js";import{c as j,d as V,a as q,e as y,b as w}from"../chunks/enforce-config-er6B5Gkj.esm.js";import{_ as G}from"../chunks/loading-template-mLjOGXMj.esm.js";import{M as H,B as J}from"../chunks/beam-errors-P-Lu07Ce.esm.js";import{createScopedLocalStorage as Z}from"../utils/local-storage.js";import{c as Q}from"../chunks/css-card-grid-r6wxRbPV.esm.js";import{_ as X}from"../chunks/checkbox-P2JYPqxl.esm.js";import{c as Y}from"../chunks/events-_4nImo3u.esm.js";import"../utils/logger.js";import"../chunks/vendor--f7lkyBk.esm.js";const u={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:n="1"}={})=>`select a nonprofit and ${n}% of your purchase will be donated.`,ctaMessage:({donationPercentage:n="1%"}={})=>`Select a nonprofit and ${n} of your purchase will be donated, at no extra cost.`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},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 ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,s=(n,e,t,o)=>{for(var i=o>1?void 0:o?te(e,t):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(o?c(e,t,i):c(i))||i);return o&&i&&ee(e,t,i),i};class r extends N{constructor(){super(...arguments),this.baseUrl=L,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<768,this.didUserExpandNonprofits=!1,this.shouldUseNewPromoUI=!1,this.getChainNonprofits=async()=>{if(q(["transactionId","subscriptionId"],this),!this.hasCorrectTransactionConfig&&!this.hasCorrectSubscriptionConfig)throw new H;const e=await E({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:"1.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})=>(y(["apiKey","transactionId"],this),W({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},pathParams:{transactionId:Number(this.transactionId)},requestBody:{nonprofitId:e}})),this.putSubscription=async({selectedNonprofitId:e})=>(y(["apiKey","subscriptionId"],this),A({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:e}})),this.nonprofitListDataController=new k(this,this.getChainNonprofits),this.selectionDataController=new k(this,this.updateNonprofitIdForRecord),this.localStorage=Z(this),this.makeHandleSelect=(e,t,o)=>async i=>{if(!this.allowChange)return;const p=this.selectedNonprofitId;if(i instanceof KeyboardEvent){let c=null;switch(i.key){case"ArrowUp":case"ArrowLeft":t===0?c=o[o.length-1]:c=o[t-1],i.preventDefault();break;case"ArrowRight":case"ArrowDown":t===o.length-1?c=o[0]:c=o[t+1],i.preventDefault();break;case"Enter":case" ":i.preventDefault();break;default:return}if(c){const b=this.renderRoot.querySelector(`[data-value="${c.nonprofit.id}"]`);b!==null&&(b.tabIndex=0,b.focus());return}}if(i.currentTarget instanceof HTMLElement){if(p===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 t=this.nonprofitListDataController?.data?.nonprofits.find(o=>o.nonprofit.id===e);this.dispatchEvent(new Y({selectedNonprofitId:e,nonprofitName:t?.nonprofit.name,source:B.redeem_transaction}))},this.evaluateBreakPoints=z(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return F[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 t=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const o of t)if(e.has(o)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){y(["apiKey"],this),this.shouldUseStoredSelection&&(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||void 0);try{const{createdAt:e=0,data:t}=this.localStorage.getItemJson("chainNonprofits")||{},o=2*60*60*1e3;new Date(e).valueOf()+o>new Date().valueOf()&&(this.nonprofitListDataController.data=t,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",...O,...K,"--beam-RedeemTransaction-maxWidth":"1000px","--beam-RedeemTransaction-submitButton-color":"#fff","--beam-RedeemTransaction-submitButton-hover-color":"#fff","--beam-RedeemTransaction-submitButton-disabled-color":"#fff","--beam-RedeemTransaction-submitButton-backgroundColor":"#333","--beam-RedeemTransaction-submitButton-hover-backgroundColor":"#222","--beam-RedeemTransaction-submitButton-disabled-backgroundColor":"#767676","--beam-RedeemTransaction-submitButton-borderColor":"#333","--beam-RedeemTransaction-submitButton-hover-borderColor":"#222","--beam-RedeemTransaction-submitButton-disabled-borderColor":"#767676","--beam-RedeemTransaction-submitButton-fontSize":"14px","--beam-RedeemTransaction-submitButton-fontWeight":"inherit","--beam-RedeemTransaction-submitButton-fontFamily":"inherit","--beam-RedeemTransaction-submitButton-textTransform":"none","--beam-RedeemTransaction-submitButton-borderRadius":"0px","--beam-RedeemTransaction-submitButton-padding":"15px 30px","--beam-RedeemTransaction-submitButton-position":"right","--beam-RedeemTransaction-submitButton-positionRight-width":"auto","--beam-RedeemTransaction-submitButton-positionBottom-width":"100%","--beam-RedeemTransaction-submitButton-positionBottom-marginTop":"10px","--beam-RedeemTransaction-checkmark-color":"transparent","--beam-RedeemTransaction-checkmark-selected-color":"#fff","--beam-RedeemTransaction-checkmark-hover-color":"#fff","--beam-RedeemTransaction-checkmark-backgroundColor":"transparent","--beam-RedeemTransaction-checkmark-selected-backgroundColor":"#333","--beam-RedeemTransaction-checkmark-hover-backgroundColor":"#d9d9d9","--beam-RedeemTransaction-checkmark-borderColor":"transparent","--beam-RedeemTransaction-checkmark-selected-borderColor":"#333","--beam-RedeemTransaction-checkmark-hover-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-minWidth":"250px","--beam-RedeemTransaction-options-columnCount":"2","--beam-RedeemTransaction-options-borderRadius":"0px","--beam-RedeemTransaction-options-borderWidth":"1px","--beam-RedeemTransaction-options-selected-borderWidth":"2px","--beam-RedeemTransaction-options-focus-borderWidth":"1px","--beam-RedeemTransaction-options-image-borderRadius":"0px","--beam-RedeemTransaction-options-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-selected-borderColor":"currentColor","--beam-RedeemTransaction-options-hover-borderColor":"#ccc","--beam-RedeemTransaction-options-backgroundColor":"transparent","--beam-RedeemTransaction-options-selected-backgroundColor":"transparent","--beam-RedeemTransaction-options-hover-backgroundColor":"#f1f1f1","--beam-RedeemTransaction-options-marginTop":"15px",...f("--beam-RedeemTransaction-title",{fontSize:"1.25em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-description",{marginTop:"0.5em"}),...f("--beam-RedeemTransaction-details-cause",{fontSize:"1em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-details-impactDescription",{fontSize:"0.85em",marginTop:"10px"}),"--beam-RedeemTransaction-details-nonprofitName-fontWeight":"bold","--beam-RedeemTransaction-details-nonprofitName-fontStyle":"inherit","--beam-RedeemTransaction-details-fundingProgress-marginTop":"10px",...f("--beam-RedeemTransaction-details-fundingProgressLabel",{fontSize:"0.85em"}),"--beam-RedeemTransaction-cardStyle":"'image'","--beam-RedeemTransaction-options-icon-padding":"0px","--beam-RedeemTransaction-options-collapseNonprofits-mobile":"false","--beam-RedeemTransaction-options-collapseNonprofits-desktop":"false",..._},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},o={...e,...t};return Object.assign(Object.create({toCSS(){return M(this)}}),o)}handleChooseClick(){this.didUserExpandNonprofits=!0}get shouldCollapse(){const e=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-mobile"]==="true",t=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-desktop"]==="true";return this.isMobile&&e||!this.isMobile&&t}renderSubmitButton(e){return d`
-      ${this.didUserExpandNonprofits||!this.shouldCollapse?d` <button
+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-kK10CmJz.esm.js";import{p as A}from"../chunks/progress-bar-PMU_xI3L.esm.js";import{p as F}from"../chunks/promo-pill-label-58PJRvSl.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{c as Z}from"../chunks/events-_4nImo3u.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 Free Donation",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-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="${v({isDisabled:!this.allowSubmit,[e]:!0,submitButton:!0})}"
+            class="${C({isDisabled:!this.allowSubmit,submitButton:!0})}"
             part="submitButton"
           >
-            ${this.selectionDataController.data!==null?u[this.configLang].submitButtonTextCompleted():u[this.configLang].submitButtonText()}
-          </button>`:d` <button
-            type="button"
-            @click="${this.handleChooseClick}"
-            class="submitButton ${e}"
-            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)"}"
           >
-            ${u[this.configLang].chooseButtonText()}
-          </button>`}
-    `}render(){const{selectedNonprofitId:e}=this,{data:t,loading:o}=this.nonprofitListDataController;if(o&&!t)return G();if(this.nonprofitListDataController.error)return this.debug?C({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return C({error:this.selectionDataController.error});if(t==null)return this.debug?C({error:new J("No data")}):"";const i=t?.nonprofits||[],p=i.find(a=>a.nonprofit.id===e)||null,c=this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'icon'",b=this.cssVariables["--beam-RedeemTransaction-submitButton-position"],R=this.isMobile&&this.shouldUseNewPromoUI||this.isMobile&&b==="bottom"?"positionBottom":"positionRight";this.shouldUseNewPromoUI=!!(t?.config?.web?.promo&&!this.subscriptionId);const S=i.some(a=>!a.promo||!a.promo.isActive);return d`
+            <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()}
@@ -26,121 +78,45 @@ import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../ch
         <div
           style="order: 3;"
           tabindex="-1"
-          class="options cardGrid ${v({isHidden:!this.didUserExpandNonprofits&&this.shouldCollapse})}"
+          class="options cardGrid ${C({isHidden:!this.didUserExpandNonprofits&&this.shouldCollapse})}"
           part="options"
           role="radiogroup"
           aria-labelledby="beam-RedeemTransaction-title"
           ?aria-disabled=${!this.allowChange}
         >
-          ${P(i,a=>a.nonprofit.id,(a,g)=>{const T=e===a.nonprofit.id,$=T||p==null&&g===0;return d`
+          ${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 ${v({isSelected:T,isDisabled:!this.allowChange})}"
+                  class="option ${C({isSelected:T,isDisabled:!this.allowChange})}"
                   part="option"
                   role="radio"
-                  tabindex="${$?0:-1}"
-                  data-value=${a.nonprofit.id}
+                  tabindex="${S?0:-1}"
+                  data-value=${s.nonprofit.id}
                   ?aria-checked=${T}
-                  @click=${this.makeHandleSelect(a.nonprofit.id,g,i)}
-                  @keydown=${this.makeHandleSelect(a.nonprofit.id,g,i)}
-                  aria-label="${m(this.configLang,a.nonprofit.cause||"")}"
-                  style="${D({display:"flex",gap:"15px",padding:"10px"})}"
+                  @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;"
                 >
-                  ${c?d` <div style="height: 100%; flex: 1; flex-direction: column;">
-                        <img
-                          src="${a.nonprofit.causeIconUrl}"
-                          alt=""
-                          role="presentation"
-                          style="
-                            flex: 1;
-                            height: auto;
-                            width: 100%;
-                            display: block;
-                            padding: var(--beam-RedeemTransaction-options-icon-padding);
-                            border-radius: var(--beam-RedeemTransaction-options-image-borderRadius, 0);
-                          "
-                        />
-                      </div>`:d` <div style="height: 100%; flex: 1 0 33%; display: flex; flex-direction: column;">
-                        <img
-                          src="${a.imageUrl}"
-                          alt=""
-                          role="presentation"
-                          style="
-                            flex: 1;
-                            height: auto;
-                            width: 100%;
-                            object-fit: cover;
-                            border-radius: var(--beam-RedeemTransaction-options-image-borderRadius, 0);
-                         "
-                        />
-                      </div>`}
-                  <div
-                    class="details"
-                    part="details"
-                    style="
-                        flex: 1 1 67%;
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        flex-wrap: nowrap;
-                        justify-content: space-between;
-                        align-content: stretch;
-                        align-items: stretch;
-                        position: relative;
-                     "
-                  >
+                  <div class="optionContainer" style="display: flex; align-items: flex-start; gap: 8px;">
+                    ${this.renderRadioButton()}
                     <div
-                      class="details-cause"
-                      style="flex: 0 1; ${h("--beam-RedeemTransaction-details-cause")}"
+                      class="nonprofitInfoContainer"
+                      style="flex: 1; display: flex; flex-direction: column; gap: 5px;"
                     >
-                      <span
-                        part="checkbox"
-                        class="checkbox"
-                        style="
-                            margin-left: 5px;
-                            float: right;
-                            padding: 4px;
-                            border-radius: 100%;
-                            display: inline-flex;
-                            align-items: center;
-                            justify-content: center;
-                          "
-                      >
-                        <span style="line-height: 0;"> ${X({height:"10px",width:"10px"})} </span>
-                      </span>
-                      ${m(this.configLang,a.nonprofit.cause||"")}
-                    </div>
-                    <p class="details-impactDescription" style="flex: 1 1;">
-                      ${U(m(this.configLang,a.impact.description||""))}
-                    </p>
-                    <div class="details-promo-pill-container" style="margin-top: 5px">
-                      ${a.promo?.isActive&&this.shouldUseNewPromoUI&&S?d`<beam-promo-info-pill
-                            .promo=${t?.config?.web?.promo}
-                            shortVersion
-                          ></beam-promo-info-pill>`:d``}
-                    </div>
-                    <div
-                      style="display: flex; margin-top: var(--beam-RedeemTransaction-details-fundingProgress-marginTop); align-items: center;"
-                    >
-                      <beam-progress-bar
-                        value="${a.impact.goalProgressPercentage}"
-                        style="flex: 1 0;"
-                      ></beam-progress-bar>
-                      <span
-                        class="details-fundingProgressLabel"
-                        style="${h("--beam-RedeemTransaction-details-fundingProgressLabel")} white-space: nowrap; text-align: right; flex: 0 1; margin-left: 15px;"
-                      >
-                        ${m(this.configLang,a.impact.goalProgressText)}
-                      </span>
+                      <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
-          style="order: 2; flex-direction: ${this.isMobile&&b==="bottom"?"column":"row"}; ${this.isMobile&&b==="right"&&t?.config?.web?.promo?"align-items: center;":""}"
-          class="headerContainer"
-        >
+        <div class="submitButtonContainer">${this.renderSubmitButton(o)}</div>
+
+        <div class="headerContainer">
           <div>
             <div
               class="header-promo-pill-container"
@@ -152,39 +128,36 @@ import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../ch
                 id="beam-RedeemTransaction-title"
                 style="${h("--beam-RedeemTransaction-title")}; margin-right: 8px;"
               >
-                ${m(this.configLang,t?.config?.web?.title)||u[this.configLang].ctaTitle()}
+                ${m(this.configLang,o?.config?.web?.title)||p[this.configLang].ctaTitle()}
               </h3>
-              ${this.shouldUseNewPromoUI?d`<beam-promo-info-pill
-                    .promo=${t?.config?.web?.promo}
+              ${this.shouldUsePromoUI?a`<beam-promo-info-pill
+                    .promo=${o?.config?.web?.promo}
                     style="${this.isMobile&&"order: -1; margin-bottom:10px;"}"
-                  ></beam-promo-info-pill>`:d``}
+                  ></beam-promo-info-pill>`:a``}
             </div>
             <p class="description" part="description" style="${h("--beam-RedeemTransaction-description")}">
-              ${this.shouldUseNewPromoUI?d`<span style="font-weight:bold">
-                      ${m(this.configLang,t?.config?.web?.promoDescriptionPrefix||"")||u[this.configLang].ctaPromoPrefixMessage()}
+              ${this.shouldUsePromoUI?a`<span style="font-weight:bold">
+                      ${m(this.configLang,o?.config?.web?.promoDescriptionPrefix||"")||p[this.configLang].ctaPromoPrefixMessage()}
                     </span>
                     <span>
-                      ${m(this.configLang,t?.config?.web?.promoDescription||"")||u[this.configLang].ctaPromoMessage()}
-                    </span>`:d`<span
-                    >${m(this.configLang,t?.config?.web?.description||"")||u[this.configLang].ctaMessage()}
+                      ${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>
-          ${!this.isMobile&&this.shouldUseNewPromoUI||!this.shouldUseNewPromoUI?this.renderSubmitButton(R):null}
         </div>
 
-        ${this.isMobile&&this.shouldUseNewPromoUI?d` <div style="order: 4;">${this.renderSubmitButton(R)}</div> `:null}
-
         <beam-partner-logos
-          partnerName="${t.chain.name}"
-          partnerLogoUrl="${t.chain.logoUrl}"
+          partnerName="${o.chain.name}"
+          partnerLogoUrl="${o.chain.logoUrl}"
           style="order: 1"
         ></beam-partner-logos>
       </div>
-    `}}r.tagName="beam-redeem-transaction",r.styles=[j,I`
+    `}}r.tagName="beam-redeem-transaction",r.styles=[K,$`
       :host {
         display: block;
-        max-width: var(--beam-RedeemTransaction-maxWidth, 1000px);
+        max-width: var(--beam-RedeemTransaction-maxWidth);
         font-family: var(--beam-fontFamily);
         font-style: var(--beam-fontStyle);
         font-size: var(--beam-fontSize);
@@ -197,48 +170,48 @@ import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../ch
         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);
       }
 
       .submitButton {
-        color: var(--beam-RedeemTransaction-submitButton-color, #fff);
-        background-color: var(--beam-RedeemTransaction-submitButton-backgroundColor, #333);
-        border: 1px solid var(--beam-RedeemTransaction-submitButton-borderColor, #333);
-        font-size: var(--beam-RedeemTransaction-submitButton-fontSize, 14px);
-        font-weight: var(--beam-RedeemTransaction-submitButton-fontWeight, inherit);
-        font-family: var(--beam-RedeemTransaction-submitButton-fontFamily, inherit);
-        text-transform: var(--beam-RedeemTransaction-submitButton-textTransform, none);
-        border-radius: var(--beam-RedeemTransaction-submitButton-borderRadius, 0);
-        padding: var(--beam-RedeemTransaction-submitButton-padding, 15px 30px);
+        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.positionRight {
-        width: var(--beam-RedeemTransaction-submitButton-positionRight-width, auto);
-        margin-left: 30px;
-      }
-
-      .submitButton.positionBottom {
-        width: var(--beam-RedeemTransaction-submitButton-positionBottom-width, 100%);
-        margin-top: var(--beam-RedeemTransaction-submitButton-positionBottom-marginTop, 10px);
-      }
-
       .submitButton:not(.isDisabled):focus-visible,
       .submitButton:not(.isDisabled):hover {
-        background-color: var(--beam-RedeemTransaction-submitButton-hover-backgroundColor, #222);
-        border-color: var(--beam-RedeemTransaction-submitButton-hover-borderColor, #222);
-        color: var(--beam-RedeemTransaction-submitButton-hover-color, #fff);
+        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, #fff);
-        background-color: var(--beam-RedeemTransaction-submitButton-disabled-backgroundColor, #767676);
-        border-color: var(--beam-RedeemTransaction-submitButton-disabled-borderColor, #767676);
+        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, 15px);
+        margin-top: var(--beam-RedeemTransaction-options-marginTop);
+        order: 3;
+        flex-grow: 1;
       }
 
       .options.isHidden {
@@ -246,22 +219,42 @@ import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../ch
       }
 
       .option {
-        /* outline is used to prevent layer shift if changing border width */
-        outline: var(--beam-RedeemTransaction-options-borderWidth, 1px) solid
-          var(--beam-RedeemTransaction-options-borderColor, #d9d9d9);
-        border-radius: var(--beam-RedeemTransaction-options-borderRadius);
-        background-color: var(--beam-RedeemTransaction-options-backgroundColor, transparent);
+        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, #f1f1f1);
-        outline: var(--beam-RedeemTransaction-options-hover-borderWidth, 1px) solid
-          var(--beam-RedeemTransaction-options-hover-borderColor, #ccc);
+        background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);
+        outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid
+          var(--beam-RedeemTransaction-options-hover-borderColor);
       }
 
       .option.isDisabled {
@@ -269,48 +262,126 @@ import{f as I,g as l,t as x,h as N,y as d,q as v,u as P,k as D,m as U}from"../ch
       }
 
       .option.isSelected {
-        outline: var(--beam-RedeemTransaction-options-selected-borderWidth, 1px) solid
-          var(--beam-RedeemTransaction-options-selected-borderColor, #333);
-        background-color: var(--beam-RedeemTransaction-options-selected-backgroundColor, transparent);
+        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, 1px) solid
-          var(--beam-RedeemTransaction-options-selected-borderColor, #333);
+        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 .checkbox {
+      .option .radioButton {
         border-width: 1px;
         border-style: solid;
         transition: background-color 0.2s, color 0.2s, border-color 0.2s;
-        color: var(--beam-RedeemTransaction-checkmark-color, transparent);
-        background-color: var(--beam-RedeemTransaction-checkmark-backgroundColor, transparent);
-        border-color: var(--beam-RedeemTransaction-checkmark-borderColor, transparent);
+        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;
       }
 
-      .option.isSelected .checkbox,
-      .option.isSelected:focus-visible .checkbox,
-      .option.isSelected:hover .checkbox {
-        color: var(--beam-RedeemTransaction-checkmark-selected-color, #fff);
-        background-color: var(--beam-RedeemTransaction-checkmark-selected-backgroundColor, #333);
-        border-color: var(--beam-RedeemTransaction-checkmark-selected-borderColor, #333);
+      .root {
+        display: flex;
+        flex-direction: column;
       }
 
-      .option:not(.isSelected):focus-visible .checkbox,
-      .option:not(.isSelected):hover .checkbox {
-        color: var(--beam-RedeemTransaction-checkmark-hover-color, #fff);
-        background-color: var(--beam-RedeemTransaction-checkmark-hover-backgroundColor, #d9d9d9);
-        border-color: var(--beam-RedeemTransaction-checkmark-hover-borderColor, #d9d9d9);
+      .submitButtonContainer {
+        order: 4;
+        position: sticky;
+        bottom: 0;
+        z-index: 999;
       }
 
-      .details-impactDescription {
-        ${h("--beam-RedeemTransaction-details-impactDescription")}
+      .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;
       }
 
-      .details-impactDescription .nonprofitName {
-        font-weight: var(--beam-RedeemTransaction-details-nonprofitName-fontWeight, bold);
-        font-style: var(--beam-RedeemTransaction-details-nonprofitName-fontStyle, inherit);
+      .icon {
+        height: var(--beam-RedeemTransaction-image-height);
+      }
+
+      .icon-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
-    `,Q({gap:"20px",itemMinWidth:"var(--beam-RedeemTransaction-options-minWidth, 250px)",columnCount:"var(--beam-RedeemTransaction-options-columnCount, 2)"})],s([l({type:String})],r.prototype,"baseUrl",2),s([l({type:String})],r.prototype,"apiKey",2),s([l({type:Number})],r.prototype,"transactionId",2),s([l({type:String})],r.prototype,"subscriptionId",2),s([l({type:Number})],r.prototype,"storeId",2),s([l({type:String})],r.prototype,"countryCode",2),s([l({type:String})],r.prototype,"postalCode",2),s([l({type:Object})],r.prototype,"cart",2),s([l({type:Number,reflect:!0})],r.prototype,"selectedNonprofitId",2),s([l({type:String})],r.prototype,"lang",2),s([l({type:Boolean})],r.prototype,"debug",2),s([l({type:Boolean})],r.prototype,"draftConfig",2),s([x()],r.prototype,"isMobile",2),s([x()],r.prototype,"didUserExpandNonprofits",2),s([x()],r.prototype,"shouldUseNewPromoUI",2),V(r);export{r as BeamRedeemTransaction};
+    `,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