@beamimpact/web-sdk 1.52.2 → 1.52.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{_share-dialog-dependencies-CFBQaddH.esm.js → _share-dialog-dependencies-Cry6mcdg.esm.js} +2 -2
- package/dist/chunks/{_share-dialog-dependencies-CFBQaddH.esm.js.map → _share-dialog-dependencies-Cry6mcdg.esm.js.map} +1 -1
- package/dist/chunks/{_share-dialog-dependencies-x5pyLsew.esm.js → _share-dialog-dependencies-DSYemenF.esm.js} +2 -2
- package/dist/chunks/{_share-dialog-dependencies-x5pyLsew.esm.js.map → _share-dialog-dependencies-DSYemenF.esm.js.map} +1 -1
- package/dist/chunks/{index-CXJEBQUg.esm.js → index--lGfTDwX.esm.js} +2 -2
- package/dist/chunks/{index-CXJEBQUg.esm.js.map → index--lGfTDwX.esm.js.map} +1 -1
- package/dist/chunks/index-1hlAGQPk.esm.js +2 -0
- package/dist/chunks/index-1hlAGQPk.esm.js.map +1 -0
- package/dist/chunks/{index-DhtZDPvk.esm.js → index-AEnQH-so.esm.js} +2 -2
- package/dist/chunks/index-AEnQH-so.esm.js.map +1 -0
- package/dist/chunks/{index-BNVaWVJi.esm.js → index-B-uw46_j.esm.js} +2 -2
- package/dist/chunks/{index-BNVaWVJi.esm.js.map → index-B-uw46_j.esm.js.map} +1 -1
- package/dist/chunks/{index-DoF3KFUY.esm.js → index-BTYU0dxk.esm.js} +2 -2
- package/dist/chunks/index-BTYU0dxk.esm.js.map +1 -0
- package/dist/chunks/{index-C-beNpP0.esm.js → index-CtYbieoH.esm.js} +2 -2
- package/dist/chunks/index-CtYbieoH.esm.js.map +1 -0
- package/dist/chunks/index-D2Ox_xyE.esm.js +2 -0
- package/dist/chunks/index-D2Ox_xyE.esm.js.map +1 -0
- package/dist/chunks/{index-utCqipvB.esm.js → index-D8jCSss3.esm.js} +2 -2
- package/dist/chunks/index-D8jCSss3.esm.js.map +1 -0
- package/dist/chunks/index-DE2QManY.esm.js +2 -0
- package/dist/chunks/index-DE2QManY.esm.js.map +1 -0
- package/dist/chunks/{index-GcpuX_TZ.esm.js → index-DhhPQ773.esm.js} +2 -2
- package/dist/chunks/index-DhhPQ773.esm.js.map +1 -0
- package/dist/chunks/{index-CbWdmBet.esm.js → index-DtfQd6C4.esm.js} +2 -2
- package/dist/chunks/index-DtfQd6C4.esm.js.map +1 -0
- package/dist/chunks/index-GmNTlVv2.esm.js +2 -0
- package/dist/chunks/index-GmNTlVv2.esm.js.map +1 -0
- package/dist/chunks/{lodash-7H4x2457.esm.js → lodash-D3TLHRR_.esm.js} +2 -2
- package/dist/chunks/lodash-D3TLHRR_.esm.js.map +1 -0
- package/dist/chunks/{order-page-CTpjnsoe.esm.js → order-page-BRpixGl8.esm.js} +2 -2
- package/dist/chunks/{order-page-CTpjnsoe.esm.js.map → order-page-BRpixGl8.esm.js.map} +1 -1
- package/dist/chunks/{order-page-BH3Qr433.esm.js → order-page-CW5aw6Kh.esm.js} +2 -2
- package/dist/chunks/{order-page-BH3Qr433.esm.js.map → order-page-CW5aw6Kh.esm.js.map} +1 -1
- package/dist/chunks/{routes-Bgj1HGgx.esm.js → routes-D-AQPRne.esm.js} +2 -2
- package/dist/chunks/{routes-Bgj1HGgx.esm.js.map → routes-D-AQPRne.esm.js.map} +1 -1
- package/dist/chunks/{routes-Be8scSEK.esm.js → routes-Lvj2SXN4.esm.js} +2 -2
- package/dist/chunks/{routes-Be8scSEK.esm.js.map → routes-Lvj2SXN4.esm.js.map} +1 -1
- package/dist/chunks/{share-button-BuneDluf.esm.js → share-button-Bj6RA_H6.esm.js} +2 -2
- package/dist/chunks/{share-button-BuneDluf.esm.js.map → share-button-Bj6RA_H6.esm.js.map} +1 -1
- package/dist/chunks/{share-button-BX-kWAd0.esm.js → share-button-DNgyupow.esm.js} +2 -2
- package/dist/chunks/{share-button-BX-kWAd0.esm.js.map → share-button-DNgyupow.esm.js.map} +1 -1
- package/dist/chunks/{share-button-DK30KQ6n.esm.js → share-button-DUn-zC5t.esm.js} +2 -2
- package/dist/chunks/{share-button-DK30KQ6n.esm.js.map → share-button-DUn-zC5t.esm.js.map} +1 -1
- package/dist/chunks/{share-button-CcD-wBHE.esm.js → share-button-XJxSyBaT.esm.js} +2 -2
- package/dist/chunks/{share-button-CcD-wBHE.esm.js.map → share-button-XJxSyBaT.esm.js.map} +1 -1
- package/dist/chunks/{update-cart-Cih70sgI.esm.js → update-cart-Kt4NGuYW.esm.js} +2 -2
- package/dist/chunks/{update-cart-Cih70sgI.esm.js.map → update-cart-Kt4NGuYW.esm.js.map} +1 -1
- package/dist/chunks/{update-cart-C8ufWemL.esm.js → update-cart-y9guItUM.esm.js} +2 -2
- package/dist/chunks/{update-cart-C8ufWemL.esm.js.map → update-cart-y9guItUM.esm.js.map} +1 -1
- package/dist/components/community-impact.esm.js +17 -17
- package/dist/components/community-impact.esm.js.map +1 -1
- package/dist/components/community-impact.js +17 -17
- package/dist/components/community-impact.js.map +1 -1
- package/dist/components/cumulative-impact.esm.js +1 -1
- package/dist/components/cumulative-impact.js +1 -1
- package/dist/components/impact-overview.esm.js +4 -4
- package/dist/components/impact-overview.esm.js.map +1 -1
- package/dist/components/impact-overview.js +4 -4
- package/dist/components/impact-overview.js.map +1 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/post-purchase.d.ts +1 -1
- package/dist/components/post-purchase.esm.js +1 -1
- package/dist/components/post-purchase.js +1 -1
- package/dist/components/product-details-page.d.ts +1 -1
- package/dist/components/product-details-page.esm.js +16 -15
- package/dist/components/product-details-page.esm.js.map +1 -1
- package/dist/components/product-details-page.js +16 -15
- package/dist/components/product-details-page.js.map +1 -1
- package/dist/components/redeem-transaction.d.ts +1 -1
- package/dist/components/redeem-transaction.esm.js +4 -3
- package/dist/components/redeem-transaction.esm.js.map +1 -1
- package/dist/components/redeem-transaction.js +4 -3
- package/dist/components/redeem-transaction.js.map +1 -1
- package/dist/components/select-nonprofit.d.ts +1 -1
- package/dist/components/select-nonprofit.esm.js +2 -2
- package/dist/components/select-nonprofit.esm.js.map +1 -1
- package/dist/components/select-nonprofit.js +2 -2
- package/dist/components/select-nonprofit.js.map +1 -1
- package/dist/components/select-subscription-nonprofit.d.ts +1 -1
- package/dist/components/select-subscription-nonprofit.esm.js +1 -1
- package/dist/components/select-subscription-nonprofit.js +1 -1
- package/dist/components/shopify.esm.js +1 -1
- package/dist/components/shopify.js +1 -1
- package/dist/components/social-share.esm.js +1 -1
- package/dist/components/social-share.js +1 -1
- package/dist/components/subscription-impact.d.ts +1 -1
- package/dist/components/subscription-impact.esm.js +15 -15
- package/dist/components/subscription-impact.esm.js.map +1 -1
- package/dist/components/subscription-impact.js +15 -15
- package/dist/components/subscription-impact.js.map +1 -1
- package/dist/components/subscription-management.d.ts +31 -1
- package/dist/components/subscription-management.esm.js +56 -56
- package/dist/components/subscription-management.esm.js.map +1 -1
- package/dist/components/subscription-management.js +56 -56
- package/dist/components/subscription-management.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/integrations/beam.esm.js +1 -1
- package/dist/integrations/beam.js +1 -1
- package/dist/integrations/cart.esm.js +1 -1
- package/dist/integrations/cart.js +1 -1
- package/dist/integrations/index.esm.js +1 -1
- package/dist/integrations/index.js +1 -1
- package/dist/integrations/logs.esm.js +1 -1
- package/dist/integrations/logs.js +1 -1
- package/dist/integrations/shopify.esm.js +1 -1
- package/dist/integrations/shopify.js +1 -1
- package/dist/integrations/statsig.esm.js +1 -1
- package/dist/integrations/statsig.js +1 -1
- package/dist/integrations/utils.esm.js +1 -1
- package/dist/integrations/utils.js +1 -1
- package/dist/react/community-impact.esm.js +1 -1
- package/dist/react/community-impact.js +1 -1
- package/dist/react/cumulative-impact.esm.js +1 -1
- package/dist/react/cumulative-impact.js +1 -1
- package/dist/react/impact-overview.esm.js +1 -1
- package/dist/react/impact-overview.js +1 -1
- package/dist/react/index.esm.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/post-purchase.esm.js +1 -1
- package/dist/react/post-purchase.js +1 -1
- package/dist/react/product-details-page.esm.js +1 -1
- package/dist/react/product-details-page.js +1 -1
- package/dist/react/redeem-transaction.esm.js +1 -1
- package/dist/react/redeem-transaction.js +1 -1
- package/dist/react/select-nonprofit.esm.js +1 -1
- package/dist/react/select-nonprofit.js +1 -1
- package/dist/react/select-subscription-nonprofit.esm.js +1 -1
- package/dist/react/select-subscription-nonprofit.js +1 -1
- package/dist/react/social-share.esm.js +1 -1
- package/dist/react/social-share.js +1 -1
- package/dist/react/subscription-impact.esm.js +1 -1
- package/dist/react/subscription-impact.js +1 -1
- package/dist/react/subscription-management.esm.js +1 -1
- package/dist/react/subscription-management.js +1 -1
- package/dist/utils/debounce.esm.js +1 -1
- package/dist/utils/debounce.js +1 -1
- package/dist/utils/index.esm.js +1 -1
- package/dist/utils/index.js +1 -1
- package/dist/utils/is-equal.esm.js +1 -1
- package/dist/utils/is-equal.js +1 -1
- package/dist/utils/memoize-last.esm.js +1 -1
- package/dist/utils/memoize-last.js +1 -1
- package/package.json +1 -1
- package/dist/chunks/index-C-beNpP0.esm.js.map +0 -1
- package/dist/chunks/index-CbWdmBet.esm.js.map +0 -1
- package/dist/chunks/index-DGQ-LQxP.esm.js +0 -2
- package/dist/chunks/index-DGQ-LQxP.esm.js.map +0 -1
- package/dist/chunks/index-DI43alE-.esm.js +0 -2
- package/dist/chunks/index-DI43alE-.esm.js.map +0 -1
- package/dist/chunks/index-DhtZDPvk.esm.js.map +0 -1
- package/dist/chunks/index-DoF3KFUY.esm.js.map +0 -1
- package/dist/chunks/index-GcpuX_TZ.esm.js.map +0 -1
- package/dist/chunks/index-NrjNZmBX.esm.js +0 -2
- package/dist/chunks/index-NrjNZmBX.esm.js.map +0 -1
- package/dist/chunks/index-VCyr24SS.esm.js +0 -2
- package/dist/chunks/index-VCyr24SS.esm.js.map +0 -1
- package/dist/chunks/index-utCqipvB.esm.js.map +0 -1
- package/dist/chunks/lodash-7H4x2457.esm.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redeem-transaction.js","sources":["../../src/shared/fragments/radioButton.ts","../../src/components/redeem-transaction/strings.ts","../../src/components/redeem-transaction/index.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nexport const _radioButton = ({ height = \"1em\", width = \"1em\" } = {}) =>\n html`\n <svg\n style=\"${styleMap({ height, width, position: \"relative\", bottom: \"0\" })}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <!-- Filled Circle -->\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n </svg>\n `;\n","export const strings = {\n en: {\n beamAttribution: () => `Powered by Beam`,\n ctaTitle: () => `Choose your impact`,\n ctaPromoPrefixMessage: () => `At no extra cost,`,\n ctaPromoMessage: ({ donationPercentage = \"1\" } = {}) =>\n `At no extra cost, select a nonprofit and ${donationPercentage}% will be donated there for you.`,\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `At no extra cost, select a nonprofit and ${donationPercentage}% will be donated there for you.`,\n submitButtonText: () => `Confirm`,\n submitButtonTextCompleted: () => `Confirmed!`,\n chooseButtonText: () => `Choose a nonprofit`,\n },\n fr: {\n beamAttribution: () => `Optimisé par Beam`,\n ctaTitle: () => `Choisissez votre cause`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Choisissez un organisme à but non lucratif et ${donationPercentage} % lui sera versé en votre nom, sans frais supplémentaires.`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => `Confirmer`, // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Confirmé!`,\n chooseButtonText: () => `Choisissez`, // TODO: Update translation copy SDK-2210\n },\n de: {\n beamAttribution: () => `Unterstützt von Beam`,\n ctaTitle: () => `Wähle deinen Impact`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Wähle eine der gemeinnützigen Organisationen und spende ${donationPercentage}% deines Einkaufs ohne zusätzliche Kosten`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => \"Bestätigen\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Bestätigt!`,\n chooseButtonText: () => `Wählen`, // TODO: Update translation copy SDK-2210\n },\n es: {\n ctaTitle: () => \"Elige tu contribución\",\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Elige una organización sin fines de lucro y donaremos ${donationPercentage}% de tu compra sin coste adicional.`, // TODO: Update translation copy SDK-2210\n beamAttribution: () => \"Ofrecido por Beam\",\n submitButtonText: () => \"Confirmar\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => \"¡Confirmado!\",\n chooseButtonText: () => `Elige`, // TODO: Update translation copy SDK-2210\n },\n it: {\n ctaTitle: () => \"Scegli dove fare la differenza\",\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Seleziona un'organizzazione no-profit a cui devolvere l’${donationPercentage}% del tuo acquisto, senza costi aggiuntivi`, // TODO: Update translation copy SDK-2210\n beamAttribution: () => \"Gestito da Beam\",\n submitButtonText: () => \"Confermare\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => \"Confermato!\",\n chooseButtonText: () => `Scegli`, // TODO: Update translation copy SDK-2210\n },\n pl: {\n beamAttribution: () => `Wspierany przez Beam`,\n ctaTitle: () => `Wybierz inicjatywę, którą chcesz wesprzeć`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Wybierz organizację, której przekażesz ${donationPercentage}% wartości Twoich zakupów – bez żadnych dodatkowych kosztów!`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => `Zatwierdź`, // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Zatwierdzono!`,\n chooseButtonText: () => `Wybierz`, // TODO: Update translation copy SDK-2210\n },\n};\n","import { css, html, LitElement, PropertyValues } from \"lit\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { property } from \"lit/decorators/property.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { state } from \"lit/decorators/state.js\";\nimport debounce from \"lodash-es/debounce\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { DEFAULT_BASE_URL, SUPPORTED_LANGUAGES, WIDGET_NAMES } from \"../../api-sdk/constants\";\nimport \"../../shared/components/progress-bar\";\nimport \"../../shared/components/promo-pill-label\";\nimport \"../beam-partner-logos\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { _loading } from \"../../shared/fragments/loading-template\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { enforceConfig, areRequiredKeysDefined } from \"../../shared/enforce-config\";\nimport { BeamError, MissingConfig } from \"../../utils/beam-errors\";\nimport { TId, TNumericId } from \"../../shared/types\";\nimport { TCart } from \"../../shared/cart-contents\";\nimport { createScopedLocalStorage } from \"../../utils/local-storage\";\nimport { cssCardGrid } from \"../../shared/fragments/css-card-grid\";\nimport { postChainEligibleNonprofitsForCart, putTransaction } from \"../../api-sdk/v3/routes\";\nimport { LANGUAGES } from \"../../api-sdk/types\";\nimport { BeamNonprofitSelectEvent } from \"../../utils/events\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { progressBarConfigDefaults } from \"../../shared/components/progress-bar\";\nimport { partnerLogosConfigDefaults } from \"../beam-partner-logos\";\nimport { promoPillLabelConfigDefaults } from \"../../shared/components/promo-pill-label\";\nimport { _radioButton } from \"../../shared/fragments/radioButton\";\nimport { strings } from \"./strings\";\n\ninterface TRequiredConfig {\n apiKey: string;\n transactionId: TId;\n}\n\ntype TIAPIV3GetChainNonprofits = Awaited<ReturnType<typeof import(\"../../api-sdk/v3/routes\").getChainNonprofits>>;\ntype TIAPIV3EligibleNonprofits = Awaited<\n ReturnType<typeof import(\"../../api-sdk/v3/routes\").getChainNonprofits>\n>[\"nonprofits\"];\ntype TIAPIV3Nonprofit = TIAPIV3EligibleNonprofits[number];\nexport class BeamRedeemTransaction extends LitElement {\n static tagName = \"beam-redeem-transaction\";\n\n @property({ type: String }) public baseUrl: string = DEFAULT_BASE_URL;\n\n @property({ type: String }) public apiKey?: TRequiredConfig[\"apiKey\"];\n\n @property({ type: Number }) public transactionId?: TRequiredConfig[\"transactionId\"];\n\n @property({ type: Number }) public storeId?: TNumericId;\n\n @property({ type: String }) public countryCode?: string;\n\n @property({ type: String }) public postalCode?: string;\n\n @property({ type: Object }) public cart?: TCart;\n\n @property({ type: Number, reflect: true })\n public selectedNonprofitId?: TNumericId;\n\n @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n @property({ type: Boolean }) public debug = false;\n\n @property({ type: Boolean }) public draftConfig = false;\n\n @state() private isMobile = window.innerWidth < 768;\n\n @state() private didUserExpandNonprofits = false;\n\n @state() private shouldUsePromoUI = false;\n\n get configLang() {\n return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n }\n\n private get hasCorrectTransactionConfig(): boolean {\n const requiredKeys: (keyof TRequiredConfig)[] = [\"apiKey\", \"transactionId\"];\n const isTransactionConfigCorrect = areRequiredKeysDefined(requiredKeys, this);\n return isTransactionConfigCorrect;\n }\n\n private getChainNonprofits = async () => {\n if (!this.hasCorrectTransactionConfig) {\n throw new MissingConfig();\n }\n\n const res = await postChainEligibleNonprofitsForCart({\n baseUrl: this.baseUrl,\n headers: { authorization: `Api-Key ${this.apiKey}` },\n requestBody: {\n storeId: this.storeId,\n postalCode: this.postalCode,\n countryCode: this.countryCode,\n transactionId: String(this.transactionId),\n cart: this.cart ?? undefined,\n widgetName: WIDGET_NAMES.redeem_transaction,\n options: {\n config: {\n draftConfig: this.draftConfig,\n },\n },\n version: \"2.0.0\",\n lang: this.configLang,\n },\n });\n\n // If store ID was not provided, get the store ID from response here\n if (res.store?.id && res.store.id !== this.storeId) {\n this.storeId = res.store.id;\n }\n\n this.localStorage.setItemJson(\"chainNonprofits\", {\n createdAt: new Date(),\n data: res,\n });\n\n return res;\n };\n\n private updateNonprofitIdForRecord = async ({ selectedNonprofitId }: { selectedNonprofitId: TNumericId }) => {\n if (this.transactionId) {\n return this.putTransaction({ selectedNonprofitId });\n }\n return null;\n };\n private putTransaction = async ({ selectedNonprofitId }: { selectedNonprofitId: TNumericId }) => {\n if (!enforceConfig<TRequiredConfig>([\"apiKey\", \"transactionId\"], this)) {\n throw new MissingConfig();\n }\n return putTransaction({\n baseUrl: this.baseUrl,\n headers: {\n authorization: `Api-Key ${this.apiKey}`,\n },\n pathParams: {\n transactionId: Number(this.transactionId), // TODO SDK-2388: fix api spec for PUT transaction/:id to use string\n },\n requestBody: {\n nonprofitId: selectedNonprofitId,\n },\n });\n };\n\n private nonprofitListDataController = new AsyncController<typeof this.getChainNonprofits>(\n this,\n this.getChainNonprofits\n );\n\n private selectionDataController = new AsyncController<typeof this.updateNonprofitIdForRecord>(\n this,\n this.updateNonprofitIdForRecord\n );\n\n private localStorage = createScopedLocalStorage(this as LitElement & TRequiredConfig);\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\"resize\", this.evaluateBreakPoints);\n }\n\n async firstUpdated(_changedProperties: PropertyValues) {\n await this.restoreStateFromCache();\n }\n\n async updated(previousPropertyValues: PropertyValues) {\n // Reload nonprofit list on change of any of these props:\n // Also fires on first load as props go from undefined => value\n const requireNewDataProps = [\"baseUrl\", \"storeId\", \"apiKey\", \"countryCode\", \"postalCode\", \"lang\"];\n for (const prop of requireNewDataProps) {\n if (previousPropertyValues.has(prop)) {\n await this.nonprofitListDataController.exec();\n break;\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n private restoreStateFromCache() {\n if (!enforceConfig<TRequiredConfig>([\"apiKey\"], this)) throw new MissingConfig();\n\n this.selectedNonprofitId = parseInt(this.localStorage.getItem(\"nonprofit\") || \"\") || undefined;\n try {\n // try to restore nonprofit list if we have data and it's not too old\n // list will continue to refresh async and replace this data when ready\n const { createdAt = 0, data } =\n this.localStorage.getItemJson<{ createdAt: string; data: any }>(\"chainNonprofits\") || {};\n const cacheTtl = 2 * 60 * 60 * 1000;\n if (new Date(createdAt).valueOf() + cacheTtl > new Date().valueOf()) {\n this.nonprofitListDataController.data = data;\n this.nonprofitListDataController.loading = false;\n }\n } catch (err) {\n // ignore cache retrieval error and continue to fetch data\n }\n }\n\n /**\n * Factory for selection event handler\n *\n * Nonprofit selector implements radio-button semantics:\n * * If nothing is selected, tabbing into selector selects first card\n * * Arrow keys changes focus between cards, but doesn't select\n * * Enter/Space sets selection\n * * If a nonprofit is selected, arrow keys change focus AND selection\n * * Click sets selection\n * @param {number} id\n * @param {number} index\n * @param {{id: number}[]} nonprofits\n * @returns {(evt: Event) => void}\n */\n private makeHandleSelect =\n (id: number, index: number, nonprofits: { nonprofit: { id: number } }[]): ((event: Event) => void) =>\n async (event: Event) => {\n if (!this.allowChange) return;\n const currentId = this.selectedNonprofitId;\n if (event instanceof KeyboardEvent) {\n let nextFocus = null;\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowLeft\":\n if (index === 0) {\n nextFocus = nonprofits[nonprofits.length - 1];\n } else {\n nextFocus = nonprofits[index - 1];\n }\n event.preventDefault();\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n if (index === nonprofits.length - 1) {\n nextFocus = nonprofits[0];\n } else {\n nextFocus = nonprofits[index + 1];\n }\n event.preventDefault();\n break;\n case \"Enter\":\n case \" \":\n event.preventDefault();\n break; // continue to toggle-selection block below\n default:\n return;\n }\n if (nextFocus) {\n const focusTarget = this.renderRoot.querySelector(`[data-value=\"${nextFocus.nonprofit.id}\"]`) as HTMLElement;\n if (focusTarget !== null) {\n focusTarget.tabIndex = 0;\n focusTarget.focus();\n }\n return;\n }\n }\n // Handle selection with click or Enter/Space key\n const targetEl = event.currentTarget;\n if (targetEl instanceof HTMLElement) {\n if (currentId === id) {\n // this[\"selected-nonprofit-id\"] = undefined; // unset (not supported)\n return; // no API call or localStorage change needed\n } else {\n this.selectedNonprofitId = id;\n }\n }\n };\n\n get allowChange() {\n // Disallow change if already submitted\n return this.selectionDataController.data == null && !this.selectionDataController.loading;\n }\n\n get allowSubmit() {\n // Disabled if no nonprofit has been selected yet or if submission was already received\n return Boolean(this.selectedNonprofitId && this.allowChange);\n }\n\n handleSubmit = async () => {\n const { selectedNonprofitId } = this;\n if (!this.allowSubmit || selectedNonprofitId == null) return;\n await this.selectionDataController.exec({ selectedNonprofitId });\n\n this.localStorage.setItem(\"nonprofit\", selectedNonprofitId);\n this.localStorage.setItem(\"nonprofit_selected_at\", new Date().toISOString());\n\n const selectedNonprofit = this.nonprofitListDataController?.data?.nonprofits.find(\n (np) => np.nonprofit.id === selectedNonprofitId\n );\n\n this.dispatchEvent(\n new BeamNonprofitSelectEvent({\n selectedNonprofitId,\n nonprofitName: selectedNonprofit?.nonprofit.name,\n source: WIDGET_NAMES.redeem_transaction,\n })\n );\n };\n\n evaluateBreakPoints = debounce(\n () => {\n this.isMobile = window.innerWidth < 768;\n },\n 50,\n { maxWait: 50, leading: true }\n );\n\n public get cssVariables() {\n const defaults = {\n \"--beam-fontFamily\": \"inherit\",\n \"--beam-fontStyle\": \"inherit\",\n \"--beam-fontSize\": \"inherit\",\n \"--beam-textColor\": \"inherit\",\n \"--beam-backgroundColor\": \"inherit\",\n ...defineCustomText(\"--beam-RedeemTransaction-title\", {\n fontSize: \"1.25em\",\n fontWeight: \"bold\",\n }),\n ...defineCustomText(\"--beam-RedeemTransaction-description\", {\n marginTop: \"0.5em\",\n lineHeight: \"normal\",\n }),\n ...partnerLogosConfigDefaults,\n ...progressBarConfigDefaults,\n \"--beam-RedeemTransaction-maxWidth\": \"1000px\",\n \"--beam-RedeemTransaction-submitButton-fontSize\": \"14px\",\n \"--beam-RedeemTransaction-submitButton-fontWeight\": \"inherit\",\n \"--beam-RedeemTransaction-submitButton-fontFamily\": \"inherit\",\n \"--beam-RedeemTransaction-submitButton-textTransform\": \"uppercase\",\n \"--beam-RedeemTransaction-submitButton-color\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-backgroundColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-borderRadius\": \"0px\",\n \"--beam-RedeemTransaction-submitButton-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-padding\": \"16px 0px\",\n \"--beam-RedeemTransaction-submitButton-width\": \"100%\",\n \"--beam-RedeemTransaction-submitButton-marginTop\": \"10px\",\n \"--beam-RedeemTransaction-submitButton-marginBottom\": \"10px\",\n \"--beam-RedeemTransaction-submitButtonContainer-display\": \"flex\",\n \"--beam-RedeemTransaction-submitButtonContainer-backgroundColor\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-hover-backgroundColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-hover-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-hover-color\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-disabled-borderColor\": \"#767676\",\n \"--beam-RedeemTransaction-submitButton-disabled-backgroundColor\": \"#767676\",\n \"--beam-RedeemTransaction-submitButton-disabled-color\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-color\": \"transparent\",\n \"--beam-RedeemTransaction-radioButton-borderColor\": \"#707070\",\n \"--beam-RedeemTransaction-radioButton-backgroundColor\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-hover-color\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-hover-backgroundColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-hover-borderColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-borderColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-backgroundColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-color\": \"#fff\",\n \"--beam-RedeemTransaction-options-minWidth\": \"0px\",\n \"--beam-RedeemTransaction-options-columnCount\": \"1\",\n \"--beam-RedeemTransaction-options-borderWidth\": \"1px\",\n \"--beam-RedeemTransaction-options-image-borderRadius\": \"8px\",\n \"--beam-RedeemTransaction-options-image-height\": \"70px\",\n \"--beam-RedeemTransaction-options-image-height-mobile\": \"75px\",\n \"--beam-RedeemTransaction-options-borderColor\": \"#d9d9d9\",\n \"--beam-RedeemTransaction-options-backgroundColor\": \"transparent\",\n \"--beam-RedeemTransaction-options-marginTop\": \"15px\",\n \"--beam-RedeemTransaction-options-hover-backgroundColor\": \"#f1f1f1\",\n \"--beam-RedeemTransaction-options-hover-borderWidth\": \".5px\",\n \"--beam-RedeemTransaction-options-hover-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-options-selected-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-options-selected-borderWidth\": \".5px\",\n \"--beam-RedeemTransaction-options-selected-backgroundColor\": \"#eee\",\n ...defineCustomText(\"--beam-RedeemTransaction-options-details\", {\n fontSize: \"0.85em\",\n marginTop: \"0px\",\n lineHeight: \"normal\",\n letterSpacing: \"-0.45px\",\n }),\n ...defineCustomText(\"--beam-RedeemTransaction-options-details-cause\", {\n fontSize: \"1em\",\n fontWeight: \"bold\",\n }),\n \"--beam-RedeemTransaction-options-details-nonprofitName-fontWeight\": \"normal\",\n \"--beam-RedeemTransaction-options-details-nonprofitName-fontStyle\": \"inherit\",\n \"--beam-RedeemTransaction-options-details-fundingProgress-marginTop\": \"3px\", // update after class name addition\n ...defineCustomText(\"--beam-RedeemTransaction-options-details-fundingProgressLabel\", {\n fontSize: \"0.85em\",\n textTransform: \"capitalize\",\n }),\n \"--beam-RedeemTransaction-cardStyle\": \"'image'\", // icon, selected_icon, image\n \"--beam-RedeemTransaction-options-icon-padding\": \"0px\",\n \"--beam-RedeemTransaction-options-icon-backgroundColor\": \"#F3F3F3\",\n \"--beam-RedeemTransaction-options-collapseNonprofits-mobile\": \"false\",\n \"--beam-RedeemTransaction-options-collapseNonprofits-desktop\": \"false\",\n \"--beam-RedeemTransaction-image-width\": \"13%\",\n \"--beam-RedeemTransaction-image-height\": \"50%\",\n \"--beam-RedeemTransaction-image-width-mobile\": \"16%\",\n ...promoPillLabelConfigDefaults,\n };\n\n const remoteConfig = this.nonprofitListDataController?.data?.config?.web?.theme || {};\n\n const config = { ...defaults, ...remoteConfig };\n\n const serializable = Object.create({\n toCSS() {\n return _cssVariableMap(this as Record<string, string>);\n },\n });\n\n return Object.assign(serializable, config);\n }\n\n static styles = [\n cssReset,\n css`\n :host {\n display: block;\n max-width: var(--beam-RedeemTransaction-maxWidth);\n font-family: var(--beam-fontFamily);\n font-style: var(--beam-fontStyle);\n font-size: var(--beam-fontSize);\n background-color: var(--beam-backgroundColor);\n color: var(--beam-textColor);\n word-break: normal;\n }\n\n .headerContainer {\n align-items: flex-start;\n justify-content: space-between;\n display: flex;\n order: 2;\n }\n\n .submitButtonContainer {\n margin-top: var(--beam-RedeemTransaction-submitButton-marginTop);\n margin-bottom: var(--beam-RedeemTransaction-submitButton-marginBottom);\n background-color: var(--beam-RedeemTransaction-submitButtonContainer-backgroundColor);\n display: var(--beam-RedeemTransaction-submitButtonContainer-display);\n }\n\n .submitButton {\n color: var(--beam-RedeemTransaction-submitButton-color);\n background-color: var(--beam-RedeemTransaction-submitButton-backgroundColor);\n border: 1px solid var(--beam-RedeemTransaction-submitButton-borderColor);\n font-size: var(--beam-RedeemTransaction-submitButton-fontSize);\n font-weight: var(--beam-RedeemTransaction-submitButton-fontWeight);\n font-family: var(--beam-RedeemTransaction-submitButton-fontFamily);\n text-transform: var(--beam-RedeemTransaction-submitButton-textTransform);\n border-radius: var(--beam-RedeemTransaction-submitButton-borderRadius);\n padding: var(--beam-RedeemTransaction-submitButton-padding);\n width: var(--beam-RedeemTransaction-submitButton-width);\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n cursor: pointer;\n }\n\n .submitButton:not(.isDisabled):focus-visible,\n .submitButton:not(.isDisabled):hover {\n background-color: var(--beam-RedeemTransaction-submitButton-hover-backgroundColor);\n border-color: var(--beam-RedeemTransaction-submitButton-hover-borderColor);\n color: var(--beam-RedeemTransaction-submitButton-hover-color);\n }\n\n .submitButton.isDisabled {\n color: var(--beam-RedeemTransaction-submitButton-disabled-color);\n background-color: var(--beam-RedeemTransaction-submitButton-disabled-backgroundColor);\n border-color: var(--beam-RedeemTransaction-submitButton-disabled-borderColor);\n cursor: not-allowed;\n }\n\n .options {\n margin-top: var(--beam-RedeemTransaction-options-marginTop);\n order: 3;\n flex-grow: 1;\n }\n\n .options.isHidden {\n display: none;\n }\n\n .option {\n border: var(--beam-RedeemTransaction-options-borderWidth) solid\n var(--beam-RedeemTransaction-options-borderColor);\n border-bottom: none;\n background-color: var(--beam-RedeemTransaction-options-backgroundColor);\n cursor: pointer;\n transition: border-color 0.2s, background-color 0.2s, outline 0.2s;\n }\n\n .option:first-child {\n border-radius: 8px 8px 0 0; /* Top corners rounded */\n }\n\n .option:last-child {\n border-bottom: var(--beam-RedeemTransaction-options-borderWidth) solid\n var(--beam-RedeemTransaction-options-borderColor);\n border-radius: 0 0 8px 8px; /* Bottom corners rounded */\n }\n\n .option:not(.isDisabled):not(:last-child):focus-visible,\n .option:not(.isDisabled):not(:last-child):hover,\n .option:not(.isSelected):not(:last-child):focus-visible,\n .option:not(.isSelected):not(:last-child):hover {\n background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);\n outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n border-bottom: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n }\n\n .option:not(.isDisabled):focus-visible,\n .option:not(.isDisabled):hover,\n .option:not(.isSelected):focus-visible,\n .option:not(.isSelected):hover {\n background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);\n outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n }\n\n .option.isDisabled {\n cursor: not-allowed;\n }\n\n .option.isSelected {\n outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n background-color: var(--beam-RedeemTransaction-options-selected-backgroundColor);\n border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n }\n\n .option.isSelected:focus-visible,\n .option.isSelected:hover {\n outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n }\n\n .option .radioButton {\n border-width: 1px;\n border-style: solid;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s;\n color: var(--beam-RedeemTransaction-radioButton-color);\n background-color: var(--beam-RedeemTransaction-radioButton-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-borderColor);\n }\n\n .option.isSelected .radioButton,\n .option.isSelected:focus-visible .radioButton,\n .option.isSelected:hover .radioButton {\n color: var(--beam-RedeemTransaction-radioButton-selected-color);\n background-color: var(--beam-RedeemTransaction-radioButton-selected-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-selected-borderColor);\n }\n\n .option:not(.isSelected):focus-visible .radioButton,\n .option:not(.isSelected):hover .radioButton {\n color: var(--beam-RedeemTransaction-radioButton-hover-color);\n background-color: var(--beam-RedeemTransaction-radioButton-hover-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-hover-borderColor);\n }\n\n .detailsDescription {\n ${useCustomText(\"--beam-RedeemTransaction-options-details\")}\n }\n\n .detailsDescription .nonprofitName {\n font-weight: var(--beam-RedeemTransaction-options-details-nonprofitName-fontWeight);\n font-style: var(--beam-RedeemTransaction-options-details-nonprofitName-fontStyle);\n }\n\n .radioButtonContainer {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n }\n\n .radioButton {\n padding: 5px;\n border-radius: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .imageContainer {\n flex: 1 0 var(--beam-RedeemTransaction-image-width);\n display: flex;\n flex-direction: column;\n }\n\n .progressBarContainer {\n display: flex;\n align-items: center;\n }\n\n .details-progressBarLabel {\n ${useCustomText(\"--beam-RedeemTransaction-options-details-fundingProgressLabel\")}\n white-space: nowrap;\n text-align: right;\n margin-left: 15px;\n }\n\n .details {\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n\n .root {\n display: flex;\n flex-direction: column;\n }\n\n .submitButtonContainer {\n order: 4;\n position: sticky;\n bottom: 0;\n z-index: 999;\n }\n\n .icon-background {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n overflow: hidden;\n background: var(--beam-RedeemTransaction-options-icon-backgroundColor);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .icon {\n height: var(--beam-RedeemTransaction-image-height);\n }\n\n .icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n `,\n cssCardGrid({\n gap: \"0px\",\n itemMinWidth: \"var(--beam-RedeemTransaction-options-minWidth, 0px)\",\n columnCount: \"var(--beam-RedeemTransaction-options-columnCount, 1)\",\n }),\n ];\n\n private handleChooseClick() {\n this.didUserExpandNonprofits = true;\n }\n\n get shouldCollapse() {\n const enableMobileCollapse = this.cssVariables[\"--beam-RedeemTransaction-options-collapseNonprofits-mobile\"];\n const enableDesktopCollapse = this.cssVariables[\"--beam-RedeemTransaction-options-collapseNonprofits-desktop\"];\n const isMobileCollapseEnabled = enableMobileCollapse?.toLowerCase() === \"true\";\n const isDesktopCollapseEnabled = enableDesktopCollapse?.toLowerCase() === \"true\";\n\n return (this.isMobile && isMobileCollapseEnabled) || (!this.isMobile && isDesktopCollapseEnabled);\n }\n\n private renderSubmitButton(data: TIAPIV3GetChainNonprofits) {\n return html`\n ${this.didUserExpandNonprofits || !this.shouldCollapse\n ? html` <button\n type=\"button\"\n ?aria-disabled=${!this.allowSubmit}\n @click=\"${this.handleSubmit}\"\n class=\"${classMap({\n isDisabled: !this.allowSubmit,\n submitButton: true,\n })}\"\n part=\"submitButton\"\n >\n ${this.selectionDataController.data !== null\n ? localizeUserString(\n this.configLang,\n data?.config?.web?.confirmedButton || strings[this.configLang].submitButtonTextCompleted()\n )\n : localizeUserString(\n this.configLang,\n data?.config?.web?.confirmButton || strings[this.configLang].submitButtonText()\n )}\n </button>`\n : html`\n <button type=\"button\" @click=\"${this.handleChooseClick}\" class=\"submitButton\" part=\"submitButton\">\n ${localizeUserString(\n this.configLang,\n data?.config?.web?.collapsedButton || strings[this.configLang].chooseButtonText()\n )}\n </button>\n `}\n `;\n }\n\n private renderRadioButton() {\n return html`\n <div class=\"radioButtonContainer\">\n <span part=\"radioButton\" class=\"radioButton\">\n <span style=\"line-height: 0;\"> ${_radioButton({ height: \"7px\", width: \"7px\" })} </span>\n </span>\n </div>\n `;\n }\n\n private renderNonprofitImage(np: TIAPIV3Nonprofit, displayIcon: boolean) {\n const cardStyle = this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"];\n\n const imageUrl = displayIcon\n ? cardStyle === \"'icon'\"\n ? np.nonprofit.causeIconUrl\n : cardStyle === \"'selected_icon'\"\n ? np.nonprofit.causeIconSelectedUrl\n : np.imageUrl\n : np.imageUrl;\n\n return html`\n ${displayIcon\n ? html` <div class=\"icon-container\">\n <div class=\"icon-background\">\n <img src=\"${imageUrl}\" alt=\"\" role=\"presentation\" class=\"icon\" />\n </div>\n </div>`\n : html` <div\n class=\"image-container\"\n style=\"${this.isMobile\n ? \"flex: 1 0 var(--beam-RedeemTransaction-image-width-mobile)\"\n : \"flex: 1 0 var(--beam-RedeemTransaction-image-width)\"}\"\n >\n <img\n src=\"${imageUrl}\"\n alt=\"\"\n role=\"presentation\"\n class=\"image\"\n style=\"\n width: 100%;\n height: ${this.isMobile\n ? \"var(--beam-RedeemTransaction-options-image-height-mobile)\"\n : \"var(--beam-RedeemTransaction-options-image-height)\"};\n object-fit: cover;\n border-radius: var(--beam-RedeemTransaction-options-image-borderRadius);}\n \"\n />\n </div>`}\n `;\n }\n\n private renderOptionDetail(np: TIAPIV3Nonprofit) {\n return html`\n <div class=\"detailsCause\" style=\"${useCustomText(\"--beam-RedeemTransaction-options-details-cause\")}\">\n ${localizeUserString(this.configLang, np.nonprofit.cause || \"\")}\n </div>\n <p class=\"detailsDescription\">${unsafeHTML(localizeUserString(this.configLang, np.impact.description || \"\"))}</p>\n `;\n }\n\n private renderProgressBar(np: TIAPIV3Nonprofit) {\n return html`\n <div class=\"progressBarContainer\">\n <beam-progress-bar value=\"${np.impact.goalProgressPercentage}\" style=\"flex: 1;\"></beam-progress-bar>\n <span class=\"details-progressBarLabel\">\n ${localizeUserString(this.configLang, np.impact.goalProgressText)}\n </span>\n </div>\n `;\n }\n\n private renderNonprofitDetails(\n np: TIAPIV3Nonprofit,\n hasNonprofitWithInactivePromo: boolean,\n data: TIAPIV3GetChainNonprofits\n ) {\n return html`\n <div class=\"details\" part=\"details\">\n ${this.renderOptionDetail(np)} ${this.renderPromoPill(np, hasNonprofitWithInactivePromo, data)}\n </div>\n `;\n }\n\n private renderPromoPill(\n np: TIAPIV3Nonprofit,\n hasNonprofitWithInactivePromo: boolean,\n data: TIAPIV3GetChainNonprofits\n ) {\n return html`\n ${np.promo?.isActive && this.shouldUsePromoUI && hasNonprofitWithInactivePromo\n ? html`<beam-promo-info-pill .promo=${data?.config?.web?.promo} shortVersion></beam-promo-info-pill>`\n : html``}\n `;\n }\n\n protected render() {\n const { selectedNonprofitId } = this;\n const { data, loading } = this.nonprofitListDataController;\n\n if (loading && !data) {\n return _loading();\n }\n if (this.nonprofitListDataController.error) {\n if (this.debug) {\n return _errorMessage({ error: this.nonprofitListDataController.error });\n }\n return \"\";\n }\n if (this.selectionDataController.error) {\n if (this.debug) {\n return _errorMessage({ error: this.selectionDataController.error });\n }\n // do not show error screen for interactive errors by default\n }\n if (data == null) {\n if (this.debug) {\n return _errorMessage({ error: new BeamError(\"No data\") });\n }\n return \"\";\n }\n const nonprofits = data?.nonprofits || [];\n const selectedNonprofit = nonprofits.find((np) => np.nonprofit.id === selectedNonprofitId) || null;\n // changes images in widget to icons\n const displayIcon =\n this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"] === \"'icon'\" ||\n this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"] === \"'selected_icon'\";\n this.shouldUsePromoUI = data?.config?.web?.promo ? true : false; // new promo UI\n const hasNonprofitWithInactivePromo = nonprofits.some((nonprofit) => !nonprofit.promo || !nonprofit.promo.isActive);\n\n return html`\n <style>\n :host {\n ${this.cssVariables.toCSS()}\n }\n </style>\n <!-- Custom flex order fixes tab cycling so submit button is after content -->\n <div style=\"display: flex; flex-direction: column;\" class=\"root\">\n <div\n style=\"order: 3;\"\n tabindex=\"-1\"\n class=\"options cardGrid ${classMap({ isHidden: !this.didUserExpandNonprofits && this.shouldCollapse })}\"\n part=\"options\"\n role=\"radiogroup\"\n aria-labelledby=\"beam-RedeemTransaction-title\"\n ?aria-disabled=${!this.allowChange}\n >\n ${repeat(\n nonprofits,\n (i) => i.nonprofit.id,\n (np, index) => {\n const isSelected = selectedNonprofitId === np.nonprofit.id;\n const isFocusable = isSelected || (selectedNonprofit == null && index === 0);\n return html`\n <div\n class=\"option ${classMap({\n isSelected: isSelected,\n isDisabled: !this.allowChange,\n })}\"\n part=\"option\"\n role=\"radio\"\n tabindex=\"${isFocusable ? 0 : -1}\"\n data-value=${np.nonprofit.id}\n ?aria-checked=${isSelected}\n @click=${this.makeHandleSelect(np.nonprofit.id, index, nonprofits)}\n @keydown=${this.makeHandleSelect(np.nonprofit.id, index, nonprofits)}\n aria-label=\"${localizeUserString(this.configLang, np.nonprofit.cause || \"\")}\"\n style=\"display: flex; flex-direction: column; padding: 11px; justify-content:center;\"\n >\n <div class=\"optionContainer\" style=\"display: flex; align-items: flex-start; gap: 8px;\">\n ${this.renderRadioButton()}\n <div\n class=\"nonprofitInfoContainer\"\n style=\"flex: 1; display: flex; flex-direction: column; gap: 5px;\"\n >\n <div class=\"imageDetailContainer\" style=\"display: flex; gap: 8px;\">\n ${this.renderNonprofitImage(np, displayIcon)}\n ${this.renderNonprofitDetails(np, hasNonprofitWithInactivePromo, data)}\n </div>\n ${this.renderProgressBar(np)}\n </div>\n </div>\n </div>\n `;\n }\n )}\n </div>\n\n <div class=\"submitButtonContainer\">${this.renderSubmitButton(data)}</div>\n\n <div class=\"headerContainer\">\n <div>\n <div\n class=\"header-promo-pill-container\"\n style=\"display: flex; ${this.isMobile && \"flex-direction: column; align-items: flex-start;\"}\"\n >\n <h3\n class=\"title\"\n part=\"title\"\n id=\"beam-RedeemTransaction-title\"\n style=\"${useCustomText(\"--beam-RedeemTransaction-title\")}; margin-right: 8px;\"\n >\n ${localizeUserString(this.configLang, data?.config?.web?.title) || strings[this.configLang].ctaTitle()}\n </h3>\n ${this.shouldUsePromoUI\n ? html`<beam-promo-info-pill\n .promo=${data?.config?.web?.promo}\n style=\"${this.isMobile && \"order: -1; margin-bottom:10px;\"}\"\n ></beam-promo-info-pill>`\n : html``}\n </div>\n <p class=\"description\" part=\"description\" style=\"${useCustomText(\"--beam-RedeemTransaction-description\")}\">\n ${this.shouldUsePromoUI\n ? html`<span style=\"font-weight:bold\">\n ${localizeUserString(this.configLang, data?.config?.web?.promoDescriptionPrefix || \"\") ||\n strings[this.configLang].ctaPromoPrefixMessage()}\n </span>\n <span>\n ${localizeUserString(this.configLang, data?.config?.web?.promoDescription || \"\") ||\n strings[this.configLang].ctaPromoMessage()}\n </span>`\n : html`<span\n >${localizeUserString(this.configLang, data?.config?.web?.description || \"\") ||\n strings[this.configLang].ctaMessage()}\n </span>`}\n </p>\n </div>\n </div>\n\n <beam-partner-logos\n partnerName=\"${data.chain.name}\"\n partnerLogoUrl=\"${data.chain.logoUrl}\"\n style=\"order: 1\"\n ></beam-partner-logos>\n </div>\n `;\n }\n}\n\ndefineCustomElement(BeamRedeemTransaction);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"beam-redeem-transaction\": BeamRedeemTransaction;\n }\n}\n"],"names":["_radioButton","height","width","html","styleMap","strings","donationPercentage","BeamRedeemTransaction","LitElement","DEFAULT_BASE_URL","MissingConfig","res","postChainEligibleNonprofitsForCart","WIDGET_NAMES","selectedNonprofitId","enforceConfig","putTransaction","AsyncController","createScopedLocalStorage","id","index","nonprofits","event","currentId","nextFocus","focusTarget","selectedNonprofit","np","BeamNonprofitSelectEvent","debounce","SUPPORTED_LANGUAGES","areRequiredKeysDefined","_changedProperties","previousPropertyValues","requireNewDataProps","prop","createdAt","data","cacheTtl","defaults","defineCustomText","partnerLogosConfigDefaults","progressBarConfigDefaults","promoPillLabelConfigDefaults","remoteConfig","config","_cssVariableMap","enableMobileCollapse","enableDesktopCollapse","isMobileCollapseEnabled","isDesktopCollapseEnabled","classMap","localizeUserString","displayIcon","cardStyle","imageUrl","useCustomText","unsafeHTML","hasNonprofitWithInactivePromo","loading","_loading","_errorMessage","BeamError","nonprofit","repeat","i","isSelected","isFocusable","cssReset","css","cssCardGrid","__decorateClass","property","state","defineCustomElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"redeem-transaction.js","sources":["../../src/shared/fragments/radioButton.ts","../../src/components/redeem-transaction/strings.ts","../../src/components/redeem-transaction/index.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nexport const _radioButton = ({ height = \"1em\", width = \"1em\" } = {}) =>\n html`\n <svg\n style=\"${styleMap({ height, width, position: \"relative\", bottom: \"0\" })}\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <!-- Filled Circle -->\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n </svg>\n `;\n","export const strings = {\n en: {\n beamAttribution: () => `Powered by Beam`,\n ctaTitle: () => `Choose your impact`,\n ctaPromoPrefixMessage: () => `At no extra cost,`,\n ctaPromoMessage: ({ donationPercentage = \"1\" } = {}) =>\n `At no extra cost, select a nonprofit and ${donationPercentage}% will be donated there for you.`,\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `At no extra cost, select a nonprofit and ${donationPercentage}% will be donated there for you.`,\n submitButtonText: () => `Confirm`,\n submitButtonTextCompleted: () => `Confirmed!`,\n chooseButtonText: () => `Choose a nonprofit`,\n },\n fr: {\n beamAttribution: () => `Optimisé par Beam`,\n ctaTitle: () => `Choisissez votre cause`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Choisissez un organisme à but non lucratif et ${donationPercentage} % lui sera versé en votre nom, sans frais supplémentaires.`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => `Confirmer`, // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Confirmé!`,\n chooseButtonText: () => `Choisissez`, // TODO: Update translation copy SDK-2210\n },\n de: {\n beamAttribution: () => `Unterstützt von Beam`,\n ctaTitle: () => `Wähle deinen Impact`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Wähle eine der gemeinnützigen Organisationen und spende ${donationPercentage}% deines Einkaufs ohne zusätzliche Kosten`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => \"Bestätigen\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Bestätigt!`,\n chooseButtonText: () => `Wählen`, // TODO: Update translation copy SDK-2210\n },\n es: {\n ctaTitle: () => \"Elige tu contribución\",\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Elige una organización sin fines de lucro y donaremos ${donationPercentage}% de tu compra sin coste adicional.`, // TODO: Update translation copy SDK-2210\n beamAttribution: () => \"Ofrecido por Beam\",\n submitButtonText: () => \"Confirmar\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => \"¡Confirmado!\",\n chooseButtonText: () => `Elige`, // TODO: Update translation copy SDK-2210\n },\n it: {\n ctaTitle: () => \"Scegli dove fare la differenza\",\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Seleziona un'organizzazione no-profit a cui devolvere l’${donationPercentage}% del tuo acquisto, senza costi aggiuntivi`, // TODO: Update translation copy SDK-2210\n beamAttribution: () => \"Gestito da Beam\",\n submitButtonText: () => \"Confermare\", // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => \"Confermato!\",\n chooseButtonText: () => `Scegli`, // TODO: Update translation copy SDK-2210\n },\n pl: {\n beamAttribution: () => `Wspierany przez Beam`,\n ctaTitle: () => `Wybierz inicjatywę, którą chcesz wesprzeć`,\n ctaPromoPrefixMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaPromoMessage: () => ``, // TODO: Update translation copy SDK-2210\n ctaMessage: ({ donationPercentage = \"1\" } = {}) =>\n `Wybierz organizację, której przekażesz ${donationPercentage}% wartości Twoich zakupów – bez żadnych dodatkowych kosztów!`, // TODO: Update translation copy SDK-2210\n submitButtonText: () => `Zatwierdź`, // TODO: Update translation copy SDK-2210\n submitButtonTextCompleted: () => `Zatwierdzono!`,\n chooseButtonText: () => `Wybierz`, // TODO: Update translation copy SDK-2210\n },\n};\n","import { css, html, LitElement, PropertyValues } from \"lit\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { property } from \"lit/decorators/property.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { state } from \"lit/decorators/state.js\";\nimport debounce from \"lodash-es/debounce\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { DEFAULT_BASE_URL, SUPPORTED_LANGUAGES, WIDGET_NAMES } from \"../../api-sdk/constants\";\nimport \"../../shared/components/progress-bar\";\nimport \"../../shared/components/promo-pill-label\";\nimport \"../beam-partner-logos\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { _loading } from \"../../shared/fragments/loading-template\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { enforceConfig, areRequiredKeysDefined } from \"../../shared/enforce-config\";\nimport { BeamError, MissingConfig } from \"../../utils/beam-errors\";\nimport { TId, TNumericId } from \"../../shared/types\";\nimport { TCart } from \"../../shared/cart-contents\";\nimport { createScopedLocalStorage } from \"../../utils/local-storage\";\nimport { cssCardGrid } from \"../../shared/fragments/css-card-grid\";\nimport { postChainEligibleNonprofitsForCart, putTransaction } from \"../../api-sdk/v3/routes\";\nimport { LANGUAGES } from \"../../api-sdk/types\";\nimport { BeamNonprofitSelectEvent } from \"../../utils/events\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { progressBarConfigDefaults } from \"../../shared/components/progress-bar\";\nimport { partnerLogosConfigDefaults } from \"../beam-partner-logos\";\nimport { promoPillLabelConfigDefaults } from \"../../shared/components/promo-pill-label\";\nimport { _radioButton } from \"../../shared/fragments/radioButton\";\nimport { strings } from \"./strings\";\n\ninterface TRequiredConfig {\n apiKey: string;\n transactionId: TId;\n}\n\ntype TIAPIV3GetChainNonprofits = Awaited<ReturnType<typeof import(\"../../api-sdk/v3/routes\").getChainNonprofits>>;\ntype TIAPIV3EligibleNonprofits = Awaited<\n ReturnType<typeof import(\"../../api-sdk/v3/routes\").getChainNonprofits>\n>[\"nonprofits\"];\ntype TIAPIV3Nonprofit = TIAPIV3EligibleNonprofits[number];\nexport class BeamRedeemTransaction extends LitElement {\n static tagName = \"beam-redeem-transaction\";\n\n @property({ type: String }) public baseUrl: string = DEFAULT_BASE_URL;\n\n @property({ type: String }) public apiKey?: TRequiredConfig[\"apiKey\"];\n\n @property({ type: Number }) public transactionId?: TRequiredConfig[\"transactionId\"];\n\n @property({ type: Number }) public storeId?: TNumericId;\n\n @property({ type: String }) public countryCode?: string;\n\n @property({ type: String }) public postalCode?: string;\n\n @property({ type: Object }) public cart?: TCart;\n\n @property({ type: Number, reflect: true })\n public selectedNonprofitId?: TNumericId;\n\n @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n @property({ type: Boolean }) public debug = false;\n\n @property({ type: Boolean }) public draftConfig = false;\n\n @state() private isMobile = window.innerWidth < 768;\n\n @state() private didUserExpandNonprofits = false;\n\n @state() private shouldUsePromoUI = false;\n\n get configLang() {\n return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n }\n\n private get hasCorrectTransactionConfig(): boolean {\n const requiredKeys: (keyof TRequiredConfig)[] = [\"apiKey\", \"transactionId\"];\n const isTransactionConfigCorrect = areRequiredKeysDefined(requiredKeys, this);\n return isTransactionConfigCorrect;\n }\n\n private getChainNonprofits = async () => {\n if (!this.hasCorrectTransactionConfig) {\n throw new MissingConfig();\n }\n\n const res = await postChainEligibleNonprofitsForCart({\n baseUrl: this.baseUrl,\n headers: { authorization: `Api-Key ${this.apiKey}` },\n requestBody: {\n storeId: this.storeId,\n postalCode: this.postalCode,\n countryCode: this.countryCode,\n transactionId: String(this.transactionId),\n cart: this.cart ?? undefined,\n widgetName: WIDGET_NAMES.redeem_transaction,\n options: {\n config: {\n draftConfig: this.draftConfig,\n },\n },\n version: \"2.0.0\",\n lang: this.configLang,\n },\n });\n\n // If store ID was not provided, get the store ID from response here\n if (res.store?.id && res.store.id !== this.storeId) {\n this.storeId = res.store.id;\n }\n\n this.localStorage.setItemJson(\"chainNonprofits\", {\n createdAt: new Date(),\n data: res,\n });\n\n return res;\n };\n\n private updateNonprofitIdForRecord = async ({ selectedNonprofitId }: { selectedNonprofitId: TNumericId }) => {\n if (this.transactionId) {\n return this.putTransaction({ selectedNonprofitId });\n }\n return null;\n };\n private putTransaction = async ({ selectedNonprofitId }: { selectedNonprofitId: TNumericId }) => {\n if (!enforceConfig<TRequiredConfig>([\"apiKey\", \"transactionId\"], this)) {\n throw new MissingConfig();\n }\n return putTransaction({\n baseUrl: this.baseUrl,\n headers: {\n authorization: `Api-Key ${this.apiKey}`,\n },\n pathParams: {\n transactionId: Number(this.transactionId), // TODO SDK-2388: fix api spec for PUT transaction/:id to use string\n },\n requestBody: {\n nonprofitId: selectedNonprofitId,\n },\n });\n };\n\n private nonprofitListDataController = new AsyncController<typeof this.getChainNonprofits>(\n this,\n this.getChainNonprofits\n );\n\n private selectionDataController = new AsyncController<typeof this.updateNonprofitIdForRecord>(\n this,\n this.updateNonprofitIdForRecord\n );\n\n private localStorage = createScopedLocalStorage(this as LitElement & TRequiredConfig);\n\n connectedCallback() {\n super.connectedCallback();\n window.addEventListener(\"resize\", this.evaluateBreakPoints);\n }\n\n async firstUpdated(_changedProperties: PropertyValues) {\n await this.restoreStateFromCache();\n }\n\n async updated(previousPropertyValues: PropertyValues) {\n // Reload nonprofit list on change of any of these props:\n // Also fires on first load as props go from undefined => value\n const requireNewDataProps = [\"baseUrl\", \"storeId\", \"apiKey\", \"countryCode\", \"postalCode\", \"lang\"];\n for (const prop of requireNewDataProps) {\n if (previousPropertyValues.has(prop)) {\n await this.nonprofitListDataController.exec();\n break;\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n private restoreStateFromCache() {\n if (!enforceConfig<TRequiredConfig>([\"apiKey\"], this)) throw new MissingConfig();\n\n this.selectedNonprofitId = parseInt(this.localStorage.getItem(\"nonprofit\") || \"\") || undefined;\n try {\n // try to restore nonprofit list if we have data and it's not too old\n // list will continue to refresh async and replace this data when ready\n const { createdAt = 0, data } =\n this.localStorage.getItemJson<{ createdAt: string; data: any }>(\"chainNonprofits\") || {};\n const cacheTtl = 2 * 60 * 60 * 1000;\n if (new Date(createdAt).valueOf() + cacheTtl > new Date().valueOf()) {\n this.nonprofitListDataController.data = data;\n this.nonprofitListDataController.loading = false;\n }\n } catch (err) {\n // ignore cache retrieval error and continue to fetch data\n }\n }\n\n /**\n * Factory for selection event handler\n *\n * Nonprofit selector implements radio-button semantics:\n * * If nothing is selected, tabbing into selector selects first card\n * * Arrow keys changes focus between cards, but doesn't select\n * * Enter/Space sets selection\n * * If a nonprofit is selected, arrow keys change focus AND selection\n * * Click sets selection\n * @param {number} id\n * @param {number} index\n * @param {{id: number}[]} nonprofits\n * @returns {(evt: Event) => void}\n */\n private makeHandleSelect =\n (id: number, index: number, nonprofits: { nonprofit: { id: number } }[]): ((event: Event) => void) =>\n async (event: Event) => {\n if (!this.allowChange) return;\n const currentId = this.selectedNonprofitId;\n if (event instanceof KeyboardEvent) {\n let nextFocus = null;\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowLeft\":\n if (index === 0) {\n nextFocus = nonprofits[nonprofits.length - 1];\n } else {\n nextFocus = nonprofits[index - 1];\n }\n event.preventDefault();\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n if (index === nonprofits.length - 1) {\n nextFocus = nonprofits[0];\n } else {\n nextFocus = nonprofits[index + 1];\n }\n event.preventDefault();\n break;\n case \"Enter\":\n case \" \":\n event.preventDefault();\n break; // continue to toggle-selection block below\n default:\n return;\n }\n if (nextFocus) {\n const focusTarget = this.renderRoot.querySelector(`[data-value=\"${nextFocus.nonprofit.id}\"]`) as HTMLElement;\n if (focusTarget !== null) {\n focusTarget.tabIndex = 0;\n focusTarget.focus();\n }\n return;\n }\n }\n // Handle selection with click or Enter/Space key\n const targetEl = event.currentTarget;\n if (targetEl instanceof HTMLElement) {\n if (currentId === id) {\n // this[\"selected-nonprofit-id\"] = undefined; // unset (not supported)\n return; // no API call or localStorage change needed\n } else {\n this.selectedNonprofitId = id;\n }\n }\n };\n\n get allowChange() {\n // Disallow change if already submitted\n return this.selectionDataController.data == null && !this.selectionDataController.loading;\n }\n\n get allowSubmit() {\n // Disabled if no nonprofit has been selected yet or if submission was already received\n return Boolean(this.selectedNonprofitId && this.allowChange);\n }\n\n handleSubmit = async () => {\n const { selectedNonprofitId } = this;\n if (!this.allowSubmit || selectedNonprofitId == null) return;\n await this.selectionDataController.exec({ selectedNonprofitId });\n\n this.localStorage.setItem(\"nonprofit\", selectedNonprofitId);\n this.localStorage.setItem(\"nonprofit_selected_at\", new Date().toISOString());\n\n const selectedNonprofit = this.nonprofitListDataController?.data?.nonprofits.find(\n (np) => np.nonprofit.id === selectedNonprofitId\n );\n\n this.dispatchEvent(\n new BeamNonprofitSelectEvent({\n selectedNonprofitId,\n nonprofitName: selectedNonprofit?.nonprofit.name,\n source: WIDGET_NAMES.redeem_transaction,\n })\n );\n };\n\n evaluateBreakPoints = debounce(\n () => {\n this.isMobile = window.innerWidth < 768;\n },\n 50,\n { maxWait: 50, leading: true }\n );\n\n public get cssVariables() {\n const defaults = {\n \"--beam-fontFamily\": \"inherit\",\n \"--beam-fontStyle\": \"inherit\",\n \"--beam-fontSize\": \"inherit\",\n \"--beam-textColor\": \"inherit\",\n \"--beam-backgroundColor\": \"inherit\",\n ...defineCustomText(\"--beam-RedeemTransaction-title\", {\n fontSize: \"1.25em\",\n fontWeight: \"bold\",\n }),\n ...defineCustomText(\"--beam-RedeemTransaction-description\", {\n marginTop: \"0.5em\",\n lineHeight: \"normal\",\n }),\n ...partnerLogosConfigDefaults,\n ...progressBarConfigDefaults,\n \"--beam-RedeemTransaction-maxWidth\": \"1000px\",\n \"--beam-RedeemTransaction-submitButton-fontSize\": \"14px\",\n \"--beam-RedeemTransaction-submitButton-fontWeight\": \"inherit\",\n \"--beam-RedeemTransaction-submitButton-fontFamily\": \"inherit\",\n \"--beam-RedeemTransaction-submitButton-textTransform\": \"uppercase\",\n \"--beam-RedeemTransaction-submitButton-color\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-backgroundColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-borderRadius\": \"0px\",\n \"--beam-RedeemTransaction-submitButton-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-padding\": \"16px 0px\",\n \"--beam-RedeemTransaction-submitButton-width\": \"100%\",\n \"--beam-RedeemTransaction-submitButton-marginTop\": \"10px\",\n \"--beam-RedeemTransaction-submitButton-marginBottom\": \"10px\",\n \"--beam-RedeemTransaction-submitButtonContainer-display\": \"flex\",\n \"--beam-RedeemTransaction-submitButtonContainer-backgroundColor\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-hover-backgroundColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-hover-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-submitButton-hover-color\": \"#fff\",\n \"--beam-RedeemTransaction-submitButton-disabled-borderColor\": \"#767676\",\n \"--beam-RedeemTransaction-submitButton-disabled-backgroundColor\": \"#767676\",\n \"--beam-RedeemTransaction-submitButton-disabled-color\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-color\": \"transparent\",\n \"--beam-RedeemTransaction-radioButton-borderColor\": \"#707070\",\n \"--beam-RedeemTransaction-radioButton-backgroundColor\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-hover-color\": \"#fff\",\n \"--beam-RedeemTransaction-radioButton-hover-backgroundColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-hover-borderColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-borderColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-backgroundColor\": \"#000\",\n \"--beam-RedeemTransaction-radioButton-selected-color\": \"#fff\",\n \"--beam-RedeemTransaction-options-minWidth\": \"0px\",\n \"--beam-RedeemTransaction-options-columnCount\": \"1\",\n \"--beam-RedeemTransaction-options-borderWidth\": \"1px\",\n \"--beam-RedeemTransaction-options-image-borderRadius\": \"8px\",\n \"--beam-RedeemTransaction-options-image-height\": \"70px\",\n \"--beam-RedeemTransaction-options-image-height-mobile\": \"75px\",\n \"--beam-RedeemTransaction-options-borderColor\": \"#d9d9d9\",\n \"--beam-RedeemTransaction-options-backgroundColor\": \"transparent\",\n \"--beam-RedeemTransaction-options-marginTop\": \"15px\",\n \"--beam-RedeemTransaction-options-hover-backgroundColor\": \"#f1f1f1\",\n \"--beam-RedeemTransaction-options-hover-borderWidth\": \".5px\",\n \"--beam-RedeemTransaction-options-hover-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-options-selected-borderColor\": \"#000000\",\n \"--beam-RedeemTransaction-options-selected-borderWidth\": \".5px\",\n \"--beam-RedeemTransaction-options-selected-backgroundColor\": \"#eee\",\n ...defineCustomText(\"--beam-RedeemTransaction-options-details\", {\n fontSize: \"0.85em\",\n marginTop: \"0px\",\n lineHeight: \"normal\",\n letterSpacing: \"-0.45px\",\n }),\n ...defineCustomText(\"--beam-RedeemTransaction-options-details-cause\", {\n fontSize: \"1em\",\n fontWeight: \"bold\",\n }),\n \"--beam-RedeemTransaction-options-details-nonprofitName-fontWeight\": \"normal\",\n \"--beam-RedeemTransaction-options-details-nonprofitName-fontStyle\": \"inherit\",\n \"--beam-RedeemTransaction-options-details-fundingProgress-marginTop\": \"3px\", // update after class name addition\n ...defineCustomText(\"--beam-RedeemTransaction-options-details-fundingProgressLabel\", {\n fontSize: \"0.85em\",\n textTransform: \"capitalize\",\n }),\n \"--beam-RedeemTransaction-cardStyle\": \"'image'\", // icon, selected_icon, image\n \"--beam-RedeemTransaction-options-icon-padding\": \"0px\",\n \"--beam-RedeemTransaction-options-icon-backgroundColor\": \"#F3F3F3\",\n \"--beam-RedeemTransaction-options-collapseNonprofits-mobile\": \"false\",\n \"--beam-RedeemTransaction-options-collapseNonprofits-desktop\": \"false\",\n \"--beam-RedeemTransaction-image-width\": \"13%\",\n \"--beam-RedeemTransaction-image-height\": \"50%\",\n \"--beam-RedeemTransaction-image-width-mobile\": \"16%\",\n ...promoPillLabelConfigDefaults,\n };\n\n const remoteConfig = this.nonprofitListDataController?.data?.config?.web?.theme || {};\n\n const config = { ...defaults, ...remoteConfig };\n\n const serializable = Object.create({\n toCSS() {\n return _cssVariableMap(this as Record<string, string>);\n },\n });\n\n return Object.assign(serializable, config);\n }\n\n static styles = [\n cssReset,\n css`\n :host {\n display: block;\n max-width: var(--beam-RedeemTransaction-maxWidth);\n font-family: var(--beam-fontFamily);\n font-style: var(--beam-fontStyle);\n font-size: var(--beam-fontSize);\n background-color: var(--beam-backgroundColor);\n color: var(--beam-textColor);\n word-break: normal;\n }\n\n .headerContainer {\n align-items: flex-start;\n justify-content: space-between;\n display: flex;\n order: 2;\n }\n\n .submitButtonContainer {\n margin-top: var(--beam-RedeemTransaction-submitButton-marginTop);\n margin-bottom: var(--beam-RedeemTransaction-submitButton-marginBottom);\n background-color: var(--beam-RedeemTransaction-submitButtonContainer-backgroundColor);\n display: var(--beam-RedeemTransaction-submitButtonContainer-display);\n }\n\n .submitButton {\n color: var(--beam-RedeemTransaction-submitButton-color);\n background-color: var(--beam-RedeemTransaction-submitButton-backgroundColor);\n border: 1px solid var(--beam-RedeemTransaction-submitButton-borderColor);\n font-size: var(--beam-RedeemTransaction-submitButton-fontSize);\n font-weight: var(--beam-RedeemTransaction-submitButton-fontWeight);\n font-family: var(--beam-RedeemTransaction-submitButton-fontFamily);\n text-transform: var(--beam-RedeemTransaction-submitButton-textTransform);\n border-radius: var(--beam-RedeemTransaction-submitButton-borderRadius);\n padding: var(--beam-RedeemTransaction-submitButton-padding);\n width: var(--beam-RedeemTransaction-submitButton-width);\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\n cursor: pointer;\n }\n\n .submitButton:not(.isDisabled):focus-visible,\n .submitButton:not(.isDisabled):hover {\n background-color: var(--beam-RedeemTransaction-submitButton-hover-backgroundColor);\n border-color: var(--beam-RedeemTransaction-submitButton-hover-borderColor);\n color: var(--beam-RedeemTransaction-submitButton-hover-color);\n }\n\n .submitButton.isDisabled {\n color: var(--beam-RedeemTransaction-submitButton-disabled-color);\n background-color: var(--beam-RedeemTransaction-submitButton-disabled-backgroundColor);\n border-color: var(--beam-RedeemTransaction-submitButton-disabled-borderColor);\n cursor: not-allowed;\n }\n\n .options {\n margin-top: var(--beam-RedeemTransaction-options-marginTop);\n order: 3;\n flex-grow: 1;\n }\n\n .options.isHidden {\n display: none;\n }\n\n .option {\n border: var(--beam-RedeemTransaction-options-borderWidth) solid\n var(--beam-RedeemTransaction-options-borderColor);\n border-bottom: none;\n background-color: var(--beam-RedeemTransaction-options-backgroundColor);\n cursor: pointer;\n transition: border-color 0.2s, background-color 0.2s, outline 0.2s;\n }\n\n .option:first-child {\n border-radius: 8px 8px 0 0; /* Top corners rounded */\n }\n\n .option:last-child {\n border-bottom: var(--beam-RedeemTransaction-options-borderWidth) solid\n var(--beam-RedeemTransaction-options-borderColor);\n border-radius: 0 0 8px 8px; /* Bottom corners rounded */\n }\n\n .option:not(.isDisabled):not(:last-child):focus-visible,\n .option:not(.isDisabled):not(:last-child):hover,\n .option:not(.isSelected):not(:last-child):focus-visible,\n .option:not(.isSelected):not(:last-child):hover {\n background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);\n outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n border-bottom: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n }\n\n .option:not(.isDisabled):focus-visible,\n .option:not(.isDisabled):hover,\n .option:not(.isSelected):focus-visible,\n .option:not(.isSelected):hover {\n background-color: var(--beam-RedeemTransaction-options-hover-backgroundColor);\n outline: var(--beam-RedeemTransaction-options-hover-borderWidth) solid\n var(--beam-RedeemTransaction-options-hover-borderColor);\n }\n\n .option.isDisabled {\n cursor: not-allowed;\n }\n\n .option.isSelected {\n outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n background-color: var(--beam-RedeemTransaction-options-selected-backgroundColor);\n border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n }\n\n .option.isSelected:focus-visible,\n .option.isSelected:hover {\n outline: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n border-bottom: var(--beam-RedeemTransaction-options-selected-borderWidth) solid\n var(--beam-RedeemTransaction-options-selected-borderColor);\n }\n\n .option .radioButton {\n border-width: 1px;\n border-style: solid;\n transition: background-color 0.2s, color 0.2s, border-color 0.2s;\n color: var(--beam-RedeemTransaction-radioButton-color);\n background-color: var(--beam-RedeemTransaction-radioButton-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-borderColor);\n }\n\n .option.isSelected .radioButton,\n .option.isSelected:focus-visible .radioButton,\n .option.isSelected:hover .radioButton {\n color: var(--beam-RedeemTransaction-radioButton-selected-color);\n background-color: var(--beam-RedeemTransaction-radioButton-selected-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-selected-borderColor);\n }\n\n .option:not(.isSelected):focus-visible .radioButton,\n .option:not(.isSelected):hover .radioButton {\n color: var(--beam-RedeemTransaction-radioButton-hover-color);\n background-color: var(--beam-RedeemTransaction-radioButton-hover-backgroundColor);\n border-color: var(--beam-RedeemTransaction-radioButton-hover-borderColor);\n }\n\n .detailsDescription {\n ${useCustomText(\"--beam-RedeemTransaction-options-details\")}\n }\n\n .detailsDescription .nonprofitName {\n font-weight: var(--beam-RedeemTransaction-options-details-nonprofitName-fontWeight);\n font-style: var(--beam-RedeemTransaction-options-details-nonprofitName-fontStyle);\n }\n\n .radioButtonContainer {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n }\n\n .radioButton {\n padding: 5px;\n border-radius: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .imageContainer {\n flex: 1 0 var(--beam-RedeemTransaction-image-width);\n display: flex;\n flex-direction: column;\n }\n\n .progressBarContainer {\n display: flex;\n align-items: center;\n }\n\n .details-progressBarLabel {\n ${useCustomText(\"--beam-RedeemTransaction-options-details-fundingProgressLabel\")}\n white-space: nowrap;\n text-align: right;\n margin-left: 15px;\n }\n\n .details {\n flex: 1 1 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n }\n\n .root {\n display: flex;\n flex-direction: column;\n }\n\n .submitButtonContainer {\n order: 4;\n position: sticky;\n bottom: 0;\n z-index: 999;\n }\n\n .icon-background {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n overflow: hidden;\n background: var(--beam-RedeemTransaction-options-icon-backgroundColor);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .icon {\n height: var(--beam-RedeemTransaction-image-height);\n }\n\n .icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n `,\n cssCardGrid({\n gap: \"0px\",\n itemMinWidth: \"var(--beam-RedeemTransaction-options-minWidth, 0px)\",\n columnCount: \"var(--beam-RedeemTransaction-options-columnCount, 1)\",\n }),\n ];\n\n private handleChooseClick() {\n this.didUserExpandNonprofits = true;\n }\n\n get shouldCollapse() {\n const enableMobileCollapse = this.cssVariables[\"--beam-RedeemTransaction-options-collapseNonprofits-mobile\"];\n const enableDesktopCollapse = this.cssVariables[\"--beam-RedeemTransaction-options-collapseNonprofits-desktop\"];\n const isMobileCollapseEnabled = enableMobileCollapse?.toLowerCase() === \"true\";\n const isDesktopCollapseEnabled = enableDesktopCollapse?.toLowerCase() === \"true\";\n\n return (this.isMobile && isMobileCollapseEnabled) || (!this.isMobile && isDesktopCollapseEnabled);\n }\n\n private renderSubmitButton(data: TIAPIV3GetChainNonprofits) {\n return html`\n ${this.didUserExpandNonprofits || !this.shouldCollapse\n ? html` <button\n type=\"button\"\n ?aria-disabled=${!this.allowSubmit}\n @click=\"${this.handleSubmit}\"\n class=\"${classMap({\n isDisabled: !this.allowSubmit,\n submitButton: true,\n })}\"\n part=\"submitButton\"\n >\n ${this.selectionDataController.data !== null\n ? localizeUserString(\n this.configLang,\n data?.config?.web?.confirmedButton || strings[this.configLang].submitButtonTextCompleted()\n )\n : localizeUserString(\n this.configLang,\n data?.config?.web?.confirmButton || strings[this.configLang].submitButtonText()\n )}\n </button>`\n : html`\n <button type=\"button\" @click=\"${this.handleChooseClick}\" class=\"submitButton\" part=\"submitButton\">\n ${localizeUserString(\n this.configLang,\n data?.config?.web?.collapsedButton || strings[this.configLang].chooseButtonText()\n )}\n </button>\n `}\n `;\n }\n\n private renderRadioButton() {\n return html`\n <div class=\"radioButtonContainer\">\n <span part=\"radioButton\" class=\"radioButton\">\n <span style=\"line-height: 0;\"> ${_radioButton({ height: \"7px\", width: \"7px\" })} </span>\n </span>\n </div>\n `;\n }\n\n private renderNonprofitImage(np: TIAPIV3Nonprofit, displayIcon: boolean) {\n const cardStyle = this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"];\n\n const imageUrl = displayIcon\n ? cardStyle === \"'icon'\"\n ? np.nonprofit.causeIconUrl\n : cardStyle === \"'selected_icon'\"\n ? np.nonprofit.causeIconSelectedUrl\n : np.imageUrl\n : np.imageUrl;\n\n return html`\n ${displayIcon\n ? html` <div class=\"icon-container\">\n <div class=\"icon-background\">\n <img src=\"${imageUrl}\" alt=\"\" role=\"presentation\" class=\"icon\" />\n </div>\n </div>`\n : html` <div\n class=\"image-container\"\n style=\"${this.isMobile\n ? \"flex: 1 0 var(--beam-RedeemTransaction-image-width-mobile)\"\n : \"flex: 1 0 var(--beam-RedeemTransaction-image-width)\"}\"\n >\n <img\n src=\"${imageUrl}\"\n alt=\"\"\n role=\"presentation\"\n class=\"image\"\n style=\"\n width: 100%;\n height: ${this.isMobile\n ? \"var(--beam-RedeemTransaction-options-image-height-mobile)\"\n : \"var(--beam-RedeemTransaction-options-image-height)\"};\n object-fit: cover;\n border-radius: var(--beam-RedeemTransaction-options-image-borderRadius);}\n \"\n />\n </div>`}\n `;\n }\n\n private renderOptionDetail(np: TIAPIV3Nonprofit) {\n return html`\n <div class=\"detailsCause\" style=\"${useCustomText(\"--beam-RedeemTransaction-options-details-cause\")}\">\n ${localizeUserString(this.configLang, np.nonprofit.cause || \"\")}\n </div>\n <p class=\"detailsDescription\">${unsafeHTML(localizeUserString(this.configLang, np.impact.description || \"\"))}</p>\n `;\n }\n\n private renderProgressBar(np: TIAPIV3Nonprofit) {\n return html`\n <div class=\"progressBarContainer\">\n <beam-progress-bar value=\"${np.impact.goalProgressPercentage}\" style=\"flex: 1;\"></beam-progress-bar>\n <span class=\"details-progressBarLabel\">\n ${localizeUserString(this.configLang, np.impact.goalProgressText)}\n </span>\n </div>\n `;\n }\n\n private renderNonprofitDetails(\n np: TIAPIV3Nonprofit,\n hasNonprofitWithInactivePromo: boolean,\n data: TIAPIV3GetChainNonprofits\n ) {\n return html`\n <div class=\"details\" part=\"details\">\n ${this.renderOptionDetail(np)} ${this.renderPromoPill(np, hasNonprofitWithInactivePromo, data)}\n </div>\n `;\n }\n\n private renderPromoPill(\n np: TIAPIV3Nonprofit,\n hasNonprofitWithInactivePromo: boolean,\n data: TIAPIV3GetChainNonprofits\n ) {\n return html`\n ${np.promo?.isActive && this.shouldUsePromoUI && hasNonprofitWithInactivePromo\n ? html`<beam-promo-info-pill .promo=${data?.config?.web?.promo} shortVersion></beam-promo-info-pill>`\n : html``}\n `;\n }\n\n protected render() {\n const { selectedNonprofitId } = this;\n const { data, loading } = this.nonprofitListDataController;\n\n if (loading && !data) {\n return _loading();\n }\n if (this.nonprofitListDataController.error) {\n if (this.debug) {\n return _errorMessage({ error: this.nonprofitListDataController.error });\n }\n return \"\";\n }\n if (this.selectionDataController.error) {\n if (this.debug) {\n return _errorMessage({ error: this.selectionDataController.error });\n }\n // do not show error screen for interactive errors by default\n }\n if (data == null) {\n if (this.debug) {\n return _errorMessage({ error: new BeamError(\"No data\") });\n }\n return \"\";\n }\n const nonprofits = data?.nonprofits || [];\n const selectedNonprofit = nonprofits.find((np) => np.nonprofit.id === selectedNonprofitId) || null;\n // changes images in widget to icons\n const displayIcon =\n this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"] === \"'icon'\" ||\n this.cssVariables[\"--beam-RedeemTransaction-cardStyle\"] === \"'selected_icon'\";\n this.shouldUsePromoUI = data?.config?.web?.promo ? true : false; // new promo UI\n const hasNonprofitWithInactivePromo = nonprofits.some((nonprofit) => !nonprofit.promo || !nonprofit.promo.isActive);\n\n return html`\n <style>\n :host {\n ${this.cssVariables.toCSS()}\n }\n </style>\n <!-- Custom flex order fixes tab cycling so submit button is after content -->\n <div style=\"display: flex; flex-direction: column;\" class=\"root\">\n <div\n style=\"order: 3;\"\n tabindex=\"-1\"\n class=\"options cardGrid ${classMap({ isHidden: !this.didUserExpandNonprofits && this.shouldCollapse })}\"\n part=\"options\"\n role=\"radiogroup\"\n aria-labelledby=\"beam-RedeemTransaction-title\"\n ?aria-disabled=${!this.allowChange}\n >\n ${repeat(\n nonprofits,\n (i) => i.nonprofit.id,\n (np, index) => {\n const isSelected = selectedNonprofitId === np.nonprofit.id;\n const isFocusable = isSelected || (selectedNonprofit == null && index === 0);\n return html`\n <div\n class=\"option ${classMap({\n isSelected: isSelected,\n isDisabled: !this.allowChange,\n })}\"\n part=\"option\"\n role=\"radio\"\n tabindex=\"${isFocusable ? 0 : -1}\"\n data-value=${np.nonprofit.id}\n ?aria-checked=${isSelected}\n @click=${this.makeHandleSelect(np.nonprofit.id, index, nonprofits)}\n @keydown=${this.makeHandleSelect(np.nonprofit.id, index, nonprofits)}\n aria-label=\"${localizeUserString(this.configLang, np.nonprofit.cause || \"\")}\"\n style=\"display: flex; flex-direction: column; padding: 11px; justify-content:center;\"\n >\n <div class=\"optionContainer\" style=\"display: flex; align-items: flex-start; gap: 8px;\">\n ${this.renderRadioButton()}\n <div\n class=\"nonprofitInfoContainer\"\n style=\"flex: 1; display: flex; flex-direction: column; gap: 5px;\"\n >\n <div class=\"imageDetailContainer\" style=\"display: flex; gap: 8px;\">\n ${this.renderNonprofitImage(np, displayIcon)}\n ${this.renderNonprofitDetails(np, hasNonprofitWithInactivePromo, data)}\n </div>\n ${this.renderProgressBar(np)}\n </div>\n </div>\n </div>\n `;\n }\n )}\n </div>\n\n <div class=\"submitButtonContainer\" part=\"submit-button-container\">${this.renderSubmitButton(data)}</div>\n\n <div class=\"headerContainer\" part=\"header-container\">\n <div>\n <div\n class=\"header-promo-pill-container\"\n style=\"display: flex; ${this.isMobile && \"flex-direction: column; align-items: flex-start;\"}\"\n >\n <h3\n class=\"title\"\n part=\"title\"\n id=\"beam-RedeemTransaction-title\"\n style=\"${useCustomText(\"--beam-RedeemTransaction-title\")}; margin-right: 8px;\"\n >\n ${localizeUserString(this.configLang, data?.config?.web?.title) || strings[this.configLang].ctaTitle()}\n </h3>\n ${this.shouldUsePromoUI\n ? html`<beam-promo-info-pill\n .promo=${data?.config?.web?.promo}\n style=\"${this.isMobile && \"order: -1; margin-bottom:10px;\"}\"\n ></beam-promo-info-pill>`\n : html``}\n </div>\n <p class=\"description\" part=\"description\" style=\"${useCustomText(\"--beam-RedeemTransaction-description\")}\">\n ${this.shouldUsePromoUI\n ? html`<span style=\"font-weight:bold\">\n ${localizeUserString(this.configLang, data?.config?.web?.promoDescriptionPrefix || \"\") ||\n strings[this.configLang].ctaPromoPrefixMessage()}\n </span>\n <span>\n ${localizeUserString(this.configLang, data?.config?.web?.promoDescription || \"\") ||\n strings[this.configLang].ctaPromoMessage()}\n </span>`\n : html`<span\n >${localizeUserString(this.configLang, data?.config?.web?.description || \"\") ||\n strings[this.configLang].ctaMessage()}\n </span>`}\n </p>\n </div>\n </div>\n\n <beam-partner-logos\n partnerName=\"${data.chain.name}\"\n partnerLogoUrl=\"${data.chain.logoUrl}\"\n style=\"order: 1\"\n part=\"logos\"\n ></beam-partner-logos>\n </div>\n `;\n }\n}\n\ndefineCustomElement(BeamRedeemTransaction);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"beam-redeem-transaction\": BeamRedeemTransaction;\n }\n}\n"],"names":["_radioButton","height","width","html","styleMap","strings","donationPercentage","BeamRedeemTransaction","LitElement","DEFAULT_BASE_URL","MissingConfig","res","postChainEligibleNonprofitsForCart","WIDGET_NAMES","selectedNonprofitId","enforceConfig","putTransaction","AsyncController","createScopedLocalStorage","id","index","nonprofits","event","currentId","nextFocus","focusTarget","selectedNonprofit","np","BeamNonprofitSelectEvent","debounce","SUPPORTED_LANGUAGES","areRequiredKeysDefined","_changedProperties","previousPropertyValues","requireNewDataProps","prop","createdAt","data","cacheTtl","defaults","defineCustomText","partnerLogosConfigDefaults","progressBarConfigDefaults","promoPillLabelConfigDefaults","remoteConfig","config","_cssVariableMap","enableMobileCollapse","enableDesktopCollapse","isMobileCollapseEnabled","isDesktopCollapseEnabled","classMap","localizeUserString","displayIcon","cardStyle","imageUrl","useCustomText","unsafeHTML","hasNonprofitWithInactivePromo","loading","_loading","_errorMessage","BeamError","nonprofit","repeat","i","isSelected","isFocusable","cssReset","css","cssCardGrid","__decorateClass","property","state","defineCustomElement"],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ declare class BeamSelectNonprofit extends LitElement {
|
|
|
78
78
|
evaluateBreakPoints: lodash.DebouncedFuncLeading<() => void>;
|
|
79
79
|
get cssVariables(): any;
|
|
80
80
|
static styles: lit.CSSResult[];
|
|
81
|
-
protected render(): lit_html.TemplateResult<1
|
|
81
|
+
protected render(): "" | lit_html.TemplateResult<1>;
|
|
82
82
|
}
|
|
83
83
|
declare global {
|
|
84
84
|
interface HTMLElementTagNameMap {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as k,f as $,y as d,g as f,t as L,q as v,u as H,m as D,k as q}from"../chunks/lit-WqMxC_PA.esm.js";import{i as V,d as J}from"../chunks/lodash-
|
|
1
|
+
import{h as k,f as $,y as d,g as f,t as L,q as v,u as H,m as D,k as q}from"../chunks/lit-WqMxC_PA.esm.js";import{i as V,d as J}from"../chunks/lodash-D3TLHRR_.esm.js";import{u as S,A as E,d as h,a as G,_ as z,i as m}from"../chunks/localize-Btu9xYcE.esm.js";import{D as Q,W as C,e as X,i as Y,S as Z}from"../chunks/routes-Lvj2SXN4.esm.js";import{p as ee}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{p as te}from"../chunks/promo-pill-label-CbW_Vcru.esm.js";import{c as oe,d as ie,e as P}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{_ as ne}from"../chunks/loading-template-DG4lkIIc.esm.js";import{f as A,c as M,i as re,g as T,a as B}from"../chunks/events-BohmT6Lp.esm.js";import{logger as ae}from"../utils/logger.esm.js";import{createScopedLocalStorage as se}from"../utils/local-storage.esm.js";import{f as le,i as ce,e as pe,h as de,k as fe,s as me}from"../chunks/promoManager-fl54hq13.esm.js";import{c as ge}from"../chunks/responsive-BR8qUfBa.esm.js";import{B as F}from"../chunks/cart-contents-DkoytiZh.esm.js";import{getBeamCartId as K,getExternalCartId as _}from"../utils/cart.esm.js";import"../chunks/beam-errors-Ci0d3926.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";import"../utils/cookies.esm.js";class he extends k{static get styles(){return $`
|
|
2
2
|
:host {
|
|
3
3
|
}
|
|
4
4
|
|
|
@@ -18,7 +18,7 @@ import{h as k,f as $,y as d,g as f,t as L,q as v,u as H,m as D,k as q}from"../ch
|
|
|
18
18
|
aria-label="Notification Blip"
|
|
19
19
|
>
|
|
20
20
|
<span class="notification-blip" part="notification-blip" role="button" tabindex="0" aria-hidden="true"></span>
|
|
21
|
-
</div>`}}customElements.get("beam-notification-blip")||customElements.define("beam-notification-blip",he);const be={"--beam-notificationBlip-color-background":"#000"},g={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:r="1"}={})=>`select a nonprofit and ${r}% of your purchase will be donated.`,ctaMessage:({donationPercentage:r="1"}={})=>`At no extra cost, select a nonprofit and ${r}% of your purchase will be donated.`,inlineSeparator:()=>": "},fr:{beamAttribution:()=>"Optimis\xE9 par Beam",ctaTitle:()=>"Choisissez votre cause",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Sans frais suppl\xE9mentaires, choisissez un organisme \xE0 but non lucratif et ${r} % lui sera vers\xE9 en votre nom.`,inlineSeparator:()=>" : "},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deinen Impact",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Ohne zus\xE4tzliche Kosten, w\xE4hle eine der gemeinn\xFCtzigen Organisationen und spende ${r}% deines Einkaufs`,inlineSeparator:()=>": "},es:{beamAttribution:()=>"Ofrecido por Beam",ctaTitle:()=>"Elige tu contribuci\xF3n",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Sin coste adicional, elige una organizaci\xF3n sin fines de lucro y donaremos ${r}% de tu compra.`,inlineSeparator:()=>": "},it:{beamAttribution:()=>"Gestito da Beam",ctaTitle:()=>"Scegli dove fare la differenza",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Senza costi aggiuntivi, seleziona un'organizzazione no-profit a cui devolvere l\u2019${r}% del tuo acquisto`,inlineSeparator:()=>": "},pl:{beamAttribution:()=>"Wspierany przez Beam",ctaTitle:()=>"Wybierz inicjatyw\u0119, kt\xF3r\u0105 chcesz wesprze\u0107",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Bez \u017Cadnych dodatkowych koszt\xF3w wybierz organizacj\u0119, kt\xF3rej przeka\u017Cesz ${r}% warto\u015Bci Twoich zakup\xF3w!`,inlineSeparator:()=>": "}};var ue=Object.defineProperty,p=(r,e,t,n)=>{for(var o=void 0,i=r.length-1,s;i>=0;i--)(s=r[i])&&(o=s(e,t,o)||o);return o&&ue(e,t,o),o};class l extends k{constructor(){super(...arguments),this.baseUrl=Q,this.selectedNonprofitId=null,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<768,this.enableNonprofitDeselection=!1,this.didTryToCreateNewSelectionFromCache=!1,this.pluginPromoCodes=[],this.handlePromoCodesStored=e=>{const t=(e.detail.promoCodes?.unvalidatedPromoCodes??[]).map(n=>n.attributes?.value??n.attributes?.url??"").sort();this.pluginPromoCodes=t},this.getChainNonprofits=async()=>{P(["apiKey"],this);const e=K(F,{apiKey:this.apiKey}),t=_("cart",{apiKey:this.apiKey}),n=this.cart?.content?{schema:this.cart?.schema,content:this.cart?.content}:void 0,o=this.getManualPromoCodes(),i=le(o.map(b=>({value:b})),this.apiKey),s=i&&!ce(i);s&&this.dispatchEvent(new A({source:C.select_nonprofit}));const c=await X({baseUrl:this.baseUrl,apiRoot:"/api/v3",headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,widgetName:C.select_nonprofit,postalCode:this.postalCode,countryCode:this.countryCode,beamCartId:e||void 0,cartId:t||void 0,version:"1.0.0",lang:this.configLang,...s&&{promos:i},options:{config:{draftConfig:this.draftConfig}},cart:n}});return this.enableNonprofitDeselection=!!c.config.enableNonprofitDeselection,this.selectedNonprofitId!==null&&this.selectedNonprofitId&&!c.nonprofits.map(b=>b.nonprofit.id).includes(this.selectedNonprofitId)&&(this.selectedNonprofitId=null,await this.postSelectNonprofit({selectedNonprofitId:null}),this.localStorage.setItem("nonprofit",null)),c.store?.id&&c.store.id!==this.storeId&&(this.storeId=c.store.id),await this.createNewSelectionForCachedNonprofit(),this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:c}),this.handleValidatedPromoCodes(c),c},this.postSelectNonprofit=async({selectedNonprofitId:e})=>{P(["apiKey","storeId"],this);const t=_("cart",{apiKey:this.apiKey}),n=K(F,{apiKey:this.apiKey}),o=await Y({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{nonprofitId:e,selectionId:this.selectionId,storeId:this.storeId,cartId:t||void 0,beamCartId:n||void 0,postalCode:this.postalCode,countryCode:this.countryCode}});this.selectionId=o?.selectionId,this.localStorage.setItem("transaction",this.selectionId),this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString()),await this.updateComplete;const i=this.getNonprofitById(e);e!==null&&this.dispatchEvent(new M({selectedNonprofitId:e,selectionId:this.selectionId,nonprofitName:i?.nonprofit?.name??null,source:C.select_nonprofit})),e===null&&this.dispatchEvent(new re({newNonprofitId:null,selectionId:this.selectionId}))},this.nonprofitListDataController=new E(this,this.getChainNonprofits),this.selectionDataController=new E(this,this.postSelectNonprofit),this.localStorage=se(this),this.handleCartChange=e=>{this.cart=e.detail},this.makeHandleSelect=(e,t,n)=>async o=>{const i=this.selectedNonprofitId;if(o instanceof KeyboardEvent){let s=null;switch(o.key){case"ArrowUp":case"ArrowLeft":t===0?s=n[n.length-1]:s=n[t-1],o.preventDefault();break;case"ArrowRight":case"ArrowDown":t===n.length-1?s=n[0]:s=n[t+1],o.preventDefault();break;case"Enter":case" ":o.preventDefault();break;default:return}if(s){i!=null&&(this.selectedNonprofitId=s.nonprofit.id);const c=this.renderRoot.querySelector(`[data-value="${s.nonprofit.id}"]`);c!==null&&(c.tabIndex=0,c.focus());return}}if(o.currentTarget instanceof HTMLElement)if(i===e)if(this.enableNonprofitDeselection)this.selectedNonprofitId=null,this.localStorage.setItem("nonprofit",null);else return;else this.selectedNonprofitId=e;await this.selectionDataController.exec({selectedNonprofitId:this.selectedNonprofitId})},this.evaluateBreakPoints=J(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return Z[this.lang]||"en"}get parsedPromoCodes(){return pe(this.promoCodes)}getManualPromoCodes(){if(this.parsedPromoCodes&&this.parsedPromoCodes.length>0)return this.parsedPromoCodes;const e=this.localStorage.getItemJson("cart");return e?de(e):[]}async handleValidatedPromoCodes(e){e.promos?.validatedPromoCodes&&(await Promise.all([fe({apiKey:this.apiKey,promoCodes:{validatedPromoCodes:e.promos.validatedPromoCodes,unvalidatedPromoCodes:[]}}),me({validatedPromoCodes:e.promos.validatedPromoCodes,domain:this.domain})]),this.dispatchEvent(new A({source:C.select_nonprofit})))}getNonprofitById(e){return e?this.nonprofitListDataController?.data?.nonprofits.find(t=>t.nonprofit.id===e):null}async connectedCallback(){super.connectedCallback(),this.nonprofitListDataController.loading=!0,window.addEventListener(T.eventName,this.handleCartChange),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(){await this.restoreStateFromCache(),window.addEventListener(B.eventName,this.handlePromoCodesStored)}async updated(e){const t=["baseUrl","storeId","apiKey","countryCode","postalCode","cart","lang","pluginPromoCodes"];this.pluginPromoCodes;for(const n of t)if(e.has(n)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){window.removeEventListener(T.eventName,this.handleCartChange),window.removeEventListener("resize",this.evaluateBreakPoints),window.removeEventListener(B.eventName,this.handlePromoCodesStored),super.disconnectedCallback()}async restoreStateFromCache(){try{const e=new Date().valueOf();this.cart=this.localStorage.getItemJson("cart")??void 0;const t=30*24*60*60*1e3,n=this.localStorage.getItem("nonprofit_selected_at")??0,o=e>new Date(n).valueOf()+t;o?o&&this.selectedNonprofitId!==null&&(await this.postSelectNonprofit({selectedNonprofitId:null}),this.localStorage.setItem("nonprofit",null)):(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||null,this.selectionId=this.localStorage.getItem("transaction")??void 0);const{createdAt:i=0,data:s}=this.localStorage.getItemJson("chainNonprofits")||{},c=2*60*60*1e3;!(e>new Date(i).valueOf()+c)&&this.nonprofitListDataController.loading&&(this.nonprofitListDataController.data=s,this.nonprofitListDataController.loading=!1)}catch(e){ae.error(e)}}async createNewSelectionForCachedNonprofit(){if(P(["apiKey"],this),!(!this.storeId||this.didTryToCreateNewSelectionFromCache))try{if(this.didTryToCreateNewSelectionFromCache=!0,this.selectedNonprofitId){this.selectionId||await this.selectionDataController.exec({selectedNonprofitId:this.selectedNonprofitId});const e=this.getNonprofitById(this.selectedNonprofitId);this.dispatchEvent(new M({selectedNonprofitId:this.selectedNonprofitId,selectionId:this.selectionId,nonprofitName:e?.nonprofit?.name,source:C.select_nonprofit}))}}catch{}}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...ee,"--beam-SelectNonprofit-title-textAlign":"inherit","--beam-SelectNonprofit-description-textAlign":"inherit","--beam-SelectNonprofit-maxWidth":"800px","--beam-SelectNonprofit-options-marginTop":"0px","--beam-SelectNonprofit-options-iconHeight":"24px","--beam-SelectNonprofit-options-padding":"10px","--beam-SelectNonprofit-options-borderRadius":"0px","--beam-SelectNonprofit-options-borderColor":"currentColor","--beam-SelectNonprofit-options--selected-borderColor":"currentColor","--beam-SelectNonprofit-options-backgroundColor":"transparent","--beam-SelectNonprofit-options-gap":"8px","--beam-SelectNonprofit-options--selected-backgroundColor":"currentColor","--beam-SelectNonprofit-details-marginTop":"10px","--beam-SelectNonprofit-details-borderRadius":"0px","--beam-SelectNonprofit-details-borderColor":"currentColor","--beam-SelectNonprofit-details-backgroundColor":"inherit","--beam-SelectNonprofit-details-padding":"10px",...h("--beam-SelectNonprofit-title",{fontSize:"1.25em",fontWeight:"bold"}),"--beam-SelectNonprofit-header-inline-lineHeight":"inherit",...h("--beam-SelectNonprofit-title-inline",{fontWeight:"bold"}),"--beam-SelectNonprofit-title-inline-textTransform":"none","--beam-SelectNonprofit-title-block-margin-right":"8px",...h("--beam-SelectNonprofit-description",{marginTop:"0.5em"}),...h("--beam-SelectNonprofit-description-inline"),...h("--beam-SelectNonprofit-details-cause",{fontSize:"0.85em",fontWeight:"bold"}),...h("--beam-SelectNonprofit-details-beamAttribution",{fontSize:"0.85em"}),...h("--beam-SelectNonprofit-details-impactDescription",{fontSize:"1em",marginTop:"10px"}),"--beam-SelectNonprofit-details-nonprofitName-fontWeight":"bold","--beam-SelectNonprofit-details-nonprofitName-fontStyle":"inherit","--beam-SelectNonprofit-details-fundingProgress-marginTop":"10px",...h("--beam-SelectNonprofit-details-fundingProgressLabel",{fontSize:"0.85em"}),...be,...te,"--beam-SelectNonprofit-promo-block-header-justifyContent":"initial","--beam-SelectNonprofit-notification-blip-top":"4px","--beam-SelectNonprofit-notification-blip-left":"50%","--beam-SelectNonprofit-display-notification-blip":"true","--beam-SelectNonprofit-enable-inline-header":"false"},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},n={...e,...t};return Object.assign(Object.create({toCSS(){return G(this)}}),n)}render(){const{selectedNonprofitId:e}=this,{data:t,loading:n}=this.nonprofitListDataController;if(n&&!t)return ne();if(this.nonprofitListDataController.error)return this.debug?z({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return z({error:this.selectionDataController.error});const o=t?.nonprofits||[],i=o.find(a=>a.nonprofit.id===e)||null,s=!!t?.config?.web?.promo,c=o.some(a=>!a.promo||!a.promo.isActive),b=a=>this.cssVariables[a],W=b("--beam-SelectNonprofit-display-notification-blip")==="true",y=b("--beam-SelectNonprofit-title-textAlign")==="center",u=b("--beam-SelectNonprofit-enable-inline-header")==="true"||this.isMobile,I=d`<h3
|
|
21
|
+
</div>`}}customElements.get("beam-notification-blip")||customElements.define("beam-notification-blip",he);const be={"--beam-notificationBlip-color-background":"#000"},g={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:r="1"}={})=>`select a nonprofit and ${r}% of your purchase will be donated.`,ctaMessage:({donationPercentage:r="1"}={})=>`At no extra cost, select a nonprofit and ${r}% of your purchase will be donated.`,inlineSeparator:()=>": "},fr:{beamAttribution:()=>"Optimis\xE9 par Beam",ctaTitle:()=>"Choisissez votre cause",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Sans frais suppl\xE9mentaires, choisissez un organisme \xE0 but non lucratif et ${r} % lui sera vers\xE9 en votre nom.`,inlineSeparator:()=>" : "},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deinen Impact",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Ohne zus\xE4tzliche Kosten, w\xE4hle eine der gemeinn\xFCtzigen Organisationen und spende ${r}% deines Einkaufs`,inlineSeparator:()=>": "},es:{beamAttribution:()=>"Ofrecido por Beam",ctaTitle:()=>"Elige tu contribuci\xF3n",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Sin coste adicional, elige una organizaci\xF3n sin fines de lucro y donaremos ${r}% de tu compra.`,inlineSeparator:()=>": "},it:{beamAttribution:()=>"Gestito da Beam",ctaTitle:()=>"Scegli dove fare la differenza",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Senza costi aggiuntivi, seleziona un'organizzazione no-profit a cui devolvere l\u2019${r}% del tuo acquisto`,inlineSeparator:()=>": "},pl:{beamAttribution:()=>"Wspierany przez Beam",ctaTitle:()=>"Wybierz inicjatyw\u0119, kt\xF3r\u0105 chcesz wesprze\u0107",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:r="1"}={})=>`Bez \u017Cadnych dodatkowych koszt\xF3w wybierz organizacj\u0119, kt\xF3rej przeka\u017Cesz ${r}% warto\u015Bci Twoich zakup\xF3w!`,inlineSeparator:()=>": "}};var ue=Object.defineProperty,p=(r,e,t,n)=>{for(var o=void 0,i=r.length-1,s;i>=0;i--)(s=r[i])&&(o=s(e,t,o)||o);return o&&ue(e,t,o),o};class l extends k{constructor(){super(...arguments),this.baseUrl=Q,this.selectedNonprofitId=null,this.lang="en",this.debug=!1,this.draftConfig=!1,this.isMobile=window.innerWidth<768,this.enableNonprofitDeselection=!1,this.didTryToCreateNewSelectionFromCache=!1,this.pluginPromoCodes=[],this.handlePromoCodesStored=e=>{const t=(e.detail.promoCodes?.unvalidatedPromoCodes??[]).map(n=>n.attributes?.value??n.attributes?.url??"").sort();this.pluginPromoCodes=t},this.getChainNonprofits=async()=>{P(["apiKey"],this);const e=K(F,{apiKey:this.apiKey}),t=_("cart",{apiKey:this.apiKey}),n=this.cart?.content?{schema:this.cart?.schema,content:this.cart?.content}:void 0,o=this.getManualPromoCodes(),i=le(o.map(b=>({value:b})),this.apiKey),s=i&&!ce(i);s&&this.dispatchEvent(new A({source:C.select_nonprofit}));const c=await X({baseUrl:this.baseUrl,apiRoot:"/api/v3",headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,widgetName:C.select_nonprofit,postalCode:this.postalCode,countryCode:this.countryCode,beamCartId:e||void 0,cartId:t||void 0,version:"1.0.0",lang:this.configLang,...s&&{promos:i},options:{config:{draftConfig:this.draftConfig}},cart:n}});return this.enableNonprofitDeselection=!!c.config.enableNonprofitDeselection,this.selectedNonprofitId!==null&&this.selectedNonprofitId&&!c.nonprofits.map(b=>b.nonprofit.id).includes(this.selectedNonprofitId)&&(this.selectedNonprofitId=null,await this.postSelectNonprofit({selectedNonprofitId:null}),this.localStorage.setItem("nonprofit",null)),c.store?.id&&c.store.id!==this.storeId&&(this.storeId=c.store.id),await this.createNewSelectionForCachedNonprofit(),this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:c}),this.handleValidatedPromoCodes(c),c},this.postSelectNonprofit=async({selectedNonprofitId:e})=>{P(["apiKey","storeId"],this);const t=_("cart",{apiKey:this.apiKey}),n=K(F,{apiKey:this.apiKey}),o=await Y({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{nonprofitId:e,selectionId:this.selectionId,storeId:this.storeId,cartId:t||void 0,beamCartId:n||void 0,postalCode:this.postalCode,countryCode:this.countryCode}});this.selectionId=o?.selectionId,this.localStorage.setItem("transaction",this.selectionId),this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString()),await this.updateComplete;const i=this.getNonprofitById(e);e!==null&&this.dispatchEvent(new M({selectedNonprofitId:e,selectionId:this.selectionId,nonprofitName:i?.nonprofit?.name??null,source:C.select_nonprofit})),e===null&&this.dispatchEvent(new re({newNonprofitId:null,selectionId:this.selectionId}))},this.nonprofitListDataController=new E(this,this.getChainNonprofits),this.selectionDataController=new E(this,this.postSelectNonprofit),this.localStorage=se(this),this.handleCartChange=e=>{this.cart=e.detail},this.makeHandleSelect=(e,t,n)=>async o=>{const i=this.selectedNonprofitId;if(o instanceof KeyboardEvent){let s=null;switch(o.key){case"ArrowUp":case"ArrowLeft":t===0?s=n[n.length-1]:s=n[t-1],o.preventDefault();break;case"ArrowRight":case"ArrowDown":t===n.length-1?s=n[0]:s=n[t+1],o.preventDefault();break;case"Enter":case" ":o.preventDefault();break;default:return}if(s){i!=null&&(this.selectedNonprofitId=s.nonprofit.id);const c=this.renderRoot.querySelector(`[data-value="${s.nonprofit.id}"]`);c!==null&&(c.tabIndex=0,c.focus());return}}if(o.currentTarget instanceof HTMLElement)if(i===e)if(this.enableNonprofitDeselection)this.selectedNonprofitId=null,this.localStorage.setItem("nonprofit",null);else return;else this.selectedNonprofitId=e;await this.selectionDataController.exec({selectedNonprofitId:this.selectedNonprofitId})},this.evaluateBreakPoints=J(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return Z[this.lang]||"en"}get parsedPromoCodes(){return pe(this.promoCodes)}getManualPromoCodes(){if(this.parsedPromoCodes&&this.parsedPromoCodes.length>0)return this.parsedPromoCodes;const e=this.localStorage.getItemJson("cart");return e?de(e):[]}async handleValidatedPromoCodes(e){e.promos?.validatedPromoCodes&&(await Promise.all([fe({apiKey:this.apiKey,promoCodes:{validatedPromoCodes:e.promos.validatedPromoCodes,unvalidatedPromoCodes:[]}}),me({validatedPromoCodes:e.promos.validatedPromoCodes,domain:this.domain})]),this.dispatchEvent(new A({source:C.select_nonprofit})))}getNonprofitById(e){return e?this.nonprofitListDataController?.data?.nonprofits.find(t=>t.nonprofit.id===e):null}async connectedCallback(){super.connectedCallback(),this.nonprofitListDataController.loading=!0,window.addEventListener(T.eventName,this.handleCartChange),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(){await this.restoreStateFromCache(),window.addEventListener(B.eventName,this.handlePromoCodesStored)}async updated(e){const t=["baseUrl","storeId","apiKey","countryCode","postalCode","cart","lang","promoCodes","pluginPromoCodes"];this.pluginPromoCodes;for(const n of t)if(e.has(n)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){window.removeEventListener(T.eventName,this.handleCartChange),window.removeEventListener("resize",this.evaluateBreakPoints),window.removeEventListener(B.eventName,this.handlePromoCodesStored),super.disconnectedCallback()}async restoreStateFromCache(){try{const e=new Date().valueOf();this.cart=this.localStorage.getItemJson("cart")??void 0;const t=30*24*60*60*1e3,n=this.localStorage.getItem("nonprofit_selected_at")??0,o=e>new Date(n).valueOf()+t;o?o&&this.selectedNonprofitId!==null&&(await this.postSelectNonprofit({selectedNonprofitId:null}),this.localStorage.setItem("nonprofit",null)):(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||null,this.selectionId=this.localStorage.getItem("transaction")??void 0);const{createdAt:i=0,data:s}=this.localStorage.getItemJson("chainNonprofits")||{},c=2*60*60*1e3;!(e>new Date(i).valueOf()+c)&&this.nonprofitListDataController.loading&&(this.nonprofitListDataController.data=s,this.nonprofitListDataController.loading=!1)}catch(e){ae.error(e)}}async createNewSelectionForCachedNonprofit(){if(P(["apiKey"],this),!(!this.storeId||this.didTryToCreateNewSelectionFromCache))try{if(this.didTryToCreateNewSelectionFromCache=!0,this.selectedNonprofitId){this.selectionId||await this.selectionDataController.exec({selectedNonprofitId:this.selectedNonprofitId});const e=this.getNonprofitById(this.selectedNonprofitId);this.dispatchEvent(new M({selectedNonprofitId:this.selectedNonprofitId,selectionId:this.selectionId,nonprofitName:e?.nonprofit?.name,source:C.select_nonprofit}))}}catch{}}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...ee,"--beam-SelectNonprofit-title-textAlign":"inherit","--beam-SelectNonprofit-description-textAlign":"inherit","--beam-SelectNonprofit-maxWidth":"800px","--beam-SelectNonprofit-options-marginTop":"0px","--beam-SelectNonprofit-options-iconHeight":"24px","--beam-SelectNonprofit-options-padding":"10px","--beam-SelectNonprofit-options-borderRadius":"0px","--beam-SelectNonprofit-options-borderColor":"currentColor","--beam-SelectNonprofit-options--selected-borderColor":"currentColor","--beam-SelectNonprofit-options-backgroundColor":"transparent","--beam-SelectNonprofit-options-gap":"8px","--beam-SelectNonprofit-options--selected-backgroundColor":"currentColor","--beam-SelectNonprofit-details-marginTop":"10px","--beam-SelectNonprofit-details-borderRadius":"0px","--beam-SelectNonprofit-details-borderColor":"currentColor","--beam-SelectNonprofit-details-backgroundColor":"inherit","--beam-SelectNonprofit-details-padding":"10px",...h("--beam-SelectNonprofit-title",{fontSize:"1.25em",fontWeight:"bold"}),"--beam-SelectNonprofit-header-inline-lineHeight":"inherit",...h("--beam-SelectNonprofit-title-inline",{fontWeight:"bold"}),"--beam-SelectNonprofit-title-inline-textTransform":"none","--beam-SelectNonprofit-title-block-margin-right":"8px",...h("--beam-SelectNonprofit-description",{marginTop:"0.5em"}),...h("--beam-SelectNonprofit-description-inline"),...h("--beam-SelectNonprofit-details-cause",{fontSize:"0.85em",fontWeight:"bold"}),...h("--beam-SelectNonprofit-details-beamAttribution",{fontSize:"0.85em"}),...h("--beam-SelectNonprofit-details-impactDescription",{fontSize:"1em",marginTop:"10px"}),"--beam-SelectNonprofit-details-nonprofitName-fontWeight":"bold","--beam-SelectNonprofit-details-nonprofitName-fontStyle":"inherit","--beam-SelectNonprofit-details-fundingProgress-marginTop":"10px",...h("--beam-SelectNonprofit-details-fundingProgressLabel",{fontSize:"0.85em"}),...be,...te,"--beam-SelectNonprofit-promo-block-header-justifyContent":"initial","--beam-SelectNonprofit-notification-blip-top":"4px","--beam-SelectNonprofit-notification-blip-left":"50%","--beam-SelectNonprofit-display-notification-blip":"true","--beam-SelectNonprofit-enable-inline-header":"false"},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},n={...e,...t};return Object.assign(Object.create({toCSS(){return G(this)}}),n)}render(){const{selectedNonprofitId:e}=this,{data:t,loading:n}=this.nonprofitListDataController;if(n&&!t)return ne();if(this.nonprofitListDataController.error)return this.debug?z({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return z({error:this.selectionDataController.error});const o=t?.nonprofits||[],i=o.find(a=>a.nonprofit.id===e)||null,s=!!t?.config?.web?.promo,c=o.some(a=>!a.promo||!a.promo.isActive),b=a=>this.cssVariables[a],W=b("--beam-SelectNonprofit-display-notification-blip")==="true",y=b("--beam-SelectNonprofit-title-textAlign")==="center",u=b("--beam-SelectNonprofit-enable-inline-header")==="true"||this.isMobile,I=d`<h3
|
|
22
22
|
class=${v({"title-block":!0,"d-none":!0,"d-block":!u})}
|
|
23
23
|
part="title"
|
|
24
24
|
id="beam-SelectNonprofit-title"
|