@beamimpact/web-sdk 1.52.1 → 1.52.5
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-BwdvNwrJ.esm.js → _share-dialog-dependencies-BvevL0CH.esm.js} +2 -2
- package/dist/chunks/{_share-dialog-dependencies-BwdvNwrJ.esm.js.map → _share-dialog-dependencies-BvevL0CH.esm.js.map} +1 -1
- package/dist/chunks/{_share-dialog-dependencies-QaTONkKb.esm.js → _share-dialog-dependencies-Dt4WMt_y.esm.js} +2 -2
- package/dist/chunks/{_share-dialog-dependencies-QaTONkKb.esm.js.map → _share-dialog-dependencies-Dt4WMt_y.esm.js.map} +1 -1
- package/dist/chunks/index-BYnzONl8.esm.js +2 -0
- package/dist/chunks/index-BYnzONl8.esm.js.map +1 -0
- package/dist/chunks/{index-BsuCVFh-.esm.js → index-BZlgN66e.esm.js} +2 -2
- package/dist/chunks/index-BZlgN66e.esm.js.map +1 -0
- package/dist/chunks/{index-C9SnlT_2.esm.js → index-BlE3m0uQ.esm.js} +2 -2
- package/dist/chunks/index-BlE3m0uQ.esm.js.map +1 -0
- package/dist/chunks/index-CNPuQxhN.esm.js +2 -0
- package/dist/chunks/index-CNPuQxhN.esm.js.map +1 -0
- package/dist/chunks/{index-DElVAjg2.esm.js → index-CWZ6mszB.esm.js} +2 -2
- package/dist/chunks/{index-DElVAjg2.esm.js.map → index-CWZ6mszB.esm.js.map} +1 -1
- package/dist/chunks/index-DMbz_yfr.esm.js +2 -0
- package/dist/chunks/index-DMbz_yfr.esm.js.map +1 -0
- package/dist/chunks/{index-DTGB86pM.esm.js → index-DVOp4ShL.esm.js} +2 -2
- package/dist/chunks/{index-DTGB86pM.esm.js.map → index-DVOp4ShL.esm.js.map} +1 -1
- package/dist/chunks/index-DtPf9NaI.esm.js +2 -0
- package/dist/chunks/index-DtPf9NaI.esm.js.map +1 -0
- package/dist/chunks/{order-page-stMlaqKK.esm.js → order-page-D5xI18DI.esm.js} +2 -2
- package/dist/chunks/{order-page-stMlaqKK.esm.js.map → order-page-D5xI18DI.esm.js.map} +1 -1
- package/dist/chunks/{order-page-BbrDKYmJ.esm.js → order-page-DrOzbzU8.esm.js} +2 -2
- package/dist/chunks/{order-page-BbrDKYmJ.esm.js.map → order-page-DrOzbzU8.esm.js.map} +1 -1
- package/dist/chunks/{routes-CAhDCFDX.esm.js → routes-S0vKQTft.esm.js} +2 -2
- package/dist/chunks/{routes-CAhDCFDX.esm.js.map → routes-S0vKQTft.esm.js.map} +1 -1
- package/dist/chunks/{routes-pcL-CUiQ.esm.js → routes-TtLdALcf.esm.js} +2 -2
- package/dist/chunks/{routes-pcL-CUiQ.esm.js.map → routes-TtLdALcf.esm.js.map} +1 -1
- package/dist/chunks/{share-button-BYVId0-U.esm.js → share-button-Ck4hnQPC.esm.js} +2 -2
- package/dist/chunks/{share-button-BYVId0-U.esm.js.map → share-button-Ck4hnQPC.esm.js.map} +1 -1
- package/dist/chunks/{share-button-BvUcpOcx.esm.js → share-button-Cq3aCOGt.esm.js} +2 -2
- package/dist/chunks/{share-button-BvUcpOcx.esm.js.map → share-button-Cq3aCOGt.esm.js.map} +1 -1
- package/dist/chunks/{share-button-C-DXj68Z.esm.js → share-button-DBLPdobK.esm.js} +2 -2
- package/dist/chunks/{share-button-C-DXj68Z.esm.js.map → share-button-DBLPdobK.esm.js.map} +1 -1
- package/dist/chunks/{share-button-CtklpZOO.esm.js → share-button-P726e8AH.esm.js} +2 -2
- package/dist/chunks/{share-button-CtklpZOO.esm.js.map → share-button-P726e8AH.esm.js.map} +1 -1
- package/dist/chunks/{update-cart-BLsw_Faz.esm.js → update-cart-DMO5uiQX.esm.js} +2 -2
- package/dist/chunks/{update-cart-BLsw_Faz.esm.js.map → update-cart-DMO5uiQX.esm.js.map} +1 -1
- package/dist/chunks/{update-cart-ciJaz8li.esm.js → update-cart-g_YbHKJQ.esm.js} +2 -2
- package/dist/chunks/{update-cart-ciJaz8li.esm.js.map → update-cart-g_YbHKJQ.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 +2 -2
- package/dist/components/impact-overview.esm.js.map +1 -1
- package/dist/components/impact-overview.js +2 -2
- 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.esm.js +1 -1
- package/dist/components/post-purchase.js +1 -1
- package/dist/components/product-details-page.esm.js +12 -1
- package/dist/components/product-details-page.esm.js.map +1 -1
- package/dist/components/product-details-page.js +12 -1
- package/dist/components/product-details-page.js.map +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.esm.js +1 -1
- package/dist/components/select-nonprofit.js +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.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 +30 -0
- 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/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/package.json +1 -1
- package/dist/chunks/index-B5vRxWI3.esm.js +0 -2
- package/dist/chunks/index-B5vRxWI3.esm.js.map +0 -1
- package/dist/chunks/index-BsuCVFh-.esm.js.map +0 -1
- package/dist/chunks/index-C9SnlT_2.esm.js.map +0 -1
- package/dist/chunks/index-CFZqe2Wn.esm.js +0 -2
- package/dist/chunks/index-CFZqe2Wn.esm.js.map +0 -1
- package/dist/chunks/index-CTt5RnKY.esm.js +0 -2
- package/dist/chunks/index-CTt5RnKY.esm.js.map +0 -1
- package/dist/chunks/index-DZt3Lbb4.esm.js +0 -2
- package/dist/chunks/index-DZt3Lbb4.esm.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-details-page.js","sources":["../../src/shared/fragments/custom-border.ts","../../src/shared/fragments/info.ts","../../src/components/product-details-page/strings.ts","../../src/components/product-details-page/index.ts"],"sourcesContent":["import { CSSResult, unsafeCSS } from \"lit\";\n\nexport const defineCustomBorder = (\n namespace = \"\",\n { borderRadius = \"0px\", borderStyle = \"unset\", borderColor = \"#000000\", borderWidth = \"1px\" } = {}\n): Record<string, string> => {\n const prefix = namespace.startsWith(\"--beam-\") ? namespace : `--beam-${namespace}`;\n return {\n [`${prefix}-borderRadius`]: borderRadius,\n [`${prefix}-borderStyle`]: borderStyle,\n [`${prefix}-borderColor`]: borderColor,\n [`${prefix}-borderWidth`]: borderWidth,\n };\n};\n\nexport const useCustomBorder = (\n namespace = \"\",\n { borderRadius = \"0px\", borderStyle = \"unset\", borderColor = \"#000000\", borderWidth = \"1px\" } = {}\n): CSSResult => {\n const prefix = namespace.startsWith(\"--beam-\") ? namespace : `--beam-${namespace}`;\n return unsafeCSS(`\\\n border-radius: var(${prefix}-borderRadius, ${borderRadius});\n border-style: var(${prefix}-borderStyle, ${borderStyle});\n border-color: var(${prefix}-borderColor, ${borderColor});\n border-width: var(${prefix}-borderWidth, ${borderWidth});\n `);\n};\n","import { html } from \"lit\";\n\nexport const _info = () => html` <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n part=\"svg\"\n>\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M12 16v-4\"></path>\n <path d=\"M12 8h.01\"></path>\n</svg>`;\n","export const strings = {\n en: {\n ctaTitle: () => `Choose your impact`,\n ctaMessage: () => `At no extra cost, 1% of every order is donated to a nonprofit you choose. Powered by Beam`,\n inlineSeparator: () => `:`,\n },\n fr: {\n ctaTitle: () => `Choisissez l'impact de votre choix`,\n ctaMessage: () =>\n `Sans frais supplémentaires, 1% de chaque commande est reversé à l'organisation caritative de votre choix. Développé par Beam`,\n inlineSeparator: () => `:`,\n },\n es: {\n ctaTitle: () => `Elige el impacto que deseas`,\n ctaMessage: () =>\n `Sin coste adicional, el 1% de cada pedido se dona a la organización sin ánimo de lucro que tú elijas. Desarrollado por Beam`,\n inlineSeparator: () => `:`,\n },\n de: {\n ctaTitle: () => `Wählen Sie Ihren Einfluss`,\n ctaMessage: () =>\n `Ohne zusätzliche Kosten wird 1 % jeder Bestellung an eine von Ihnen gewählte gemeinnützige Organisation gespendet. Von Beam unterstützt`,\n inlineSeparator: () => `:`,\n },\n it: {\n ctaTitle: () => `Scegliete chi sostenere`,\n ctaMessage: () =>\n `L'1% di ogni vostro acquisto viene donato, senza alcun costo aggiuntivo, a un'organizzazione no-profit a libera scelta. Promosso da Beam`,\n inlineSeparator: () => `:`,\n },\n pl: {\n ctaTitle: () => `Masz wpływ, dokonaj wyboru`,\n ctaMessage: () =>\n `1% kwoty każdego zamówienia jest przekazywane na rzecz wybranej przez Ciebie organizacji non-profit – bez dodatkowych kosztów. Obsługiwane przez Beam`,\n inlineSeparator: () => `:`,\n },\n};\n","import { LitElement, css, html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { postProductDetailsPage } from \"../../api-sdk/v3/routes\";\nimport { DEFAULT_BASE_URL, SUPPORTED_LANGUAGES, WIDGET_NAMES } from \"../../api-sdk/constants\";\nimport { LANGUAGES, TUrl } from \"../../api-sdk/types\";\nimport { MissingConfig } from \"../../utils/beam-errors\";\nimport { enforceConfig } from \"../../shared/enforce-config\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { cssResponsiveUtils } from \"../../shared/responsive\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { defineCustomBorder, useCustomBorder } from \"../../shared/fragments/custom-border\";\n// shoelace html tag imports\nimport \"@shoelace-style/shoelace/dist/components/tooltip/tooltip.js\";\nimport \"@shoelace-style/shoelace/dist/components/button/button.js\";\nimport { _info } from \"../../shared/fragments/info\";\nimport { promoPillLabelConfigDefaults } from \"../../shared/components/promo-pill-label\";\nimport {\n getPromoCodesFromCart,\n setPromoCodeInCookie,\n parseJsonStringArray,\n formatStoreAndReturnPromoCodes,\n setPromoCodesInLocalStorage,\n isEmptyPromoData,\n} from \"../../utils/promoManager\";\nimport \"../../shared/components/promo-pill-label\";\nimport { BEAM_CART_COOKIE_NAME, TBeamCartLocalStorage } from \"../../shared/cart-contents\";\nimport { createScopedLocalStorage } from \"../../utils/local-storage\";\nimport { makeApiKeyHeader } from \"../../utils/makeApiKeyHeader\";\nimport { BeamPromoCodesStoredEvent, BeamWidgetStoredPromoCodesEvent } from \"../../utils/events\";\nimport { getBeamCartId } from \"../../utils/cart\";\nimport { strings } from \"./strings\";\n\ntype RequiredConfig = {\n apiKey: string;\n storeId: number;\n};\ntype IAPIV3PostProductDetailsPage = Awaited<ReturnType<typeof postProductDetailsPage>>;\n\nconst IMAGE_URL_REMOTE_CONFIG_KEY = \"--beam-ProductDetailsPage-imageUrl\";\n\nexport class BeamProductDetailsPage extends LitElement {\n static tagName = \"beam-product-details-page\";\n\n @property({ type: String, reflect: true }) public baseUrl: TUrl = DEFAULT_BASE_URL;\n\n @property({ type: String, reflect: false }) apiKey?: RequiredConfig[\"apiKey\"];\n\n @property({ type: Number }) storeId?: number;\n\n @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n @property({ type: Boolean }) public draftConfig = false;\n\n @property({ type: Boolean }) public debug = false;\n\n @property({ type: String }) remoteProductIdentifier?: string;\n\n @property({ type: String }) public promoCodes?: string;\n\n @property({ type: String }) public domain?: string;\n\n private localStorage = createScopedLocalStorage(this as LitElement & RequiredConfig);\n\n @state() private pluginPromoCodes: string[] = [];\n\n get configLang() {\n return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n }\n\n get parsedPromoCodes(): string[] {\n return parseJsonStringArray(this.promoCodes);\n }\n\n private handlePromoCodesStored = (evt: BeamPromoCodesStoredEvent) => {\n const promoCodesFromPlugin = (evt.detail.promoCodes?.unvalidatedPromoCodes ?? [])\n .map((c) => c.attributes?.value ?? c.attributes?.url ?? \"\")\n .sort();\n this.pluginPromoCodes = promoCodesFromPlugin;\n };\n\n private getManualPromoCodes(): string[] {\n // Priority 1: Widget passed discount codes\n if (this.parsedPromoCodes && this.parsedPromoCodes.length > 0) {\n return this.parsedPromoCodes;\n }\n\n // Priority 2: Cart fallback\n const cart = this.localStorage.getItemJson<TBeamCartLocalStorage>(\"cart\");\n return cart ? getPromoCodesFromCart(cart) : [];\n }\n\n private async handleValidatedPromoCodes(response: IAPIV3PostProductDetailsPage) {\n if (response.promos?.validatedPromoCodes) {\n await Promise.all([\n setPromoCodesInLocalStorage({\n apiKey: this.apiKey,\n promoCodes: { validatedPromoCodes: response.promos.validatedPromoCodes, unvalidatedPromoCodes: [] },\n }),\n setPromoCodeInCookie({\n validatedPromoCodes: response.promos.validatedPromoCodes,\n domain: this.domain,\n }),\n ]);\n this.dispatchEvent(\n new BeamWidgetStoredPromoCodesEvent({\n source: WIDGET_NAMES.product_details_page,\n })\n );\n }\n }\n\n async firstUpdated() {\n window.addEventListener(BeamPromoCodesStoredEvent.eventName, this.handlePromoCodesStored as EventListener);\n }\n\n disconnectedCallback() {\n window.removeEventListener(BeamPromoCodesStoredEvent.eventName, this.handlePromoCodesStored as EventListener);\n super.disconnectedCallback();\n }\n\n postProductDetailsPageData = async () => {\n if (!enforceConfig<RequiredConfig>([\"apiKey\", \"storeId\"], this)) throw new MissingConfig();\n const beamCartId = getBeamCartId(BEAM_CART_COOKIE_NAME, { apiKey: this.apiKey });\n\n const manualPromoCodes = this.getManualPromoCodes();\n const formattedPromos = formatStoreAndReturnPromoCodes(\n manualPromoCodes.map((code) => ({ value: code })),\n this.apiKey\n );\n const shouldSendPromos = formattedPromos && !isEmptyPromoData(formattedPromos);\n\n if (shouldSendPromos) {\n this.dispatchEvent(\n new BeamWidgetStoredPromoCodesEvent({\n source: WIDGET_NAMES.product_details_page,\n })\n );\n }\n const res = await postProductDetailsPage({\n baseUrl: this.baseUrl,\n headers: makeApiKeyHeader(this.apiKey),\n queryParams: {\n version: \"1.0.0\",\n lang: this.configLang,\n storeId: this.storeId,\n widgetName: WIDGET_NAMES.product_details_page,\n draftConfig: this.draftConfig,\n remoteProductIdentifier: this.remoteProductIdentifier,\n },\n requestBody: {\n ...(shouldSendPromos && { promos: formattedPromos }),\n beamCartId: beamCartId ? beamCartId : undefined,\n },\n });\n this.handleValidatedPromoCodes(res);\n return res;\n };\n\n private productDetailsPageDataController = new AsyncController<typeof this.postProductDetailsPageData>(\n this,\n this.postProductDetailsPageData\n );\n\n async updated(changedProperties: Map<string, unknown>) {\n const requireNewDataProps = [\"storeId\", \"baseUrl\", \"lang\", \"apiKey\", \"pluginPromoCodes\"];\n void this.pluginPromoCodes;\n for (const prop of requireNewDataProps) {\n if (changedProperties.has(prop)) {\n await this.productDetailsPageDataController.exec();\n break;\n }\n }\n }\n\n render() {\n const { data, loading } = this.productDetailsPageDataController;\n const iconDisplay = this.cssVariables[\"--beam-ProductDetailsPage-image-placement\"];\n const isNonZero = (value: string) => value !== \"0px\" && value !== \"0\";\n const shouldDisplayPromoPill = this.cssVariables[\"--beam-ProductDetailsPage-shouldDisplayPromoPill\"] === \"true\";\n const isPromoActive = !!data?.config?.web?.promo;\n const hasValidImageHeight = isNonZero(this.cssVariables[\"--beam-ProductDetailsPage-imageHeight\"]);\n const hasValidTitleFontSize = isNonZero(this.cssVariables[\"--beam-ProductDetailsPage-title-fontSize\"]);\n const isPromoPillVisible =\n shouldDisplayPromoPill && // Determines if the promo pill is enabled for the marketing version of the PDP\n isPromoActive && // Is promo currently active\n hasValidImageHeight && // Ensures the promo pill is not displayed for the subtext version of the PDP\n hasValidTitleFontSize; // Ensures the promo pill is not displayed for the subtext version of the PDP\n const shouldShowPunctuation = this.cssVariables[\"--beam-ProductDetailsPage-shouldDisplayColon\"] === \"true\"; // Determines if a colon should be displayed in promo display\n if (loading) {\n return html``;\n }\n if (data == null) {\n if (this.debug) {\n return _errorMessage({ error: new Error(\"No data\") });\n }\n return \"\";\n }\n return html`\n <style>\n :host {\n ${this.cssVariables.toCSS()}\n }\n </style>\n <div\n class=\"root ${iconDisplay === \"block-center\" ? \"block-display\" : \"inline-display\"}\"\n aria-label=\"product detail page Beam component\"\n >\n ${iconDisplay === \"block-center\"\n ? html`\n ${this.renderWidgetIcon(iconDisplay)}\n ${isPromoPillVisible\n ? html`\n <div class=\"promo-container\">\n <beam-promo-info-pill .promo=${data?.config?.web?.promo}></beam-promo-info-pill>\n </div>\n `\n : html``}\n <div class=\"info-container\">${this.renderContent(isPromoPillVisible, shouldShowPunctuation, data)}</div>\n `\n : html`\n ${isPromoPillVisible\n ? html`\n <div class=\"promo-container\">\n <beam-promo-info-pill .promo=${data?.config?.web?.promo}></beam-promo-info-pill>\n </div>\n `\n : html``}\n <div class=\"content-inline\">\n ${this.renderWidgetIcon(iconDisplay)}\n <div class=\"info-container\">${this.renderContent(isPromoPillVisible, shouldShowPunctuation, data)}</div>\n </div>\n `}\n </div>\n `;\n }\n\n renderWidgetIcon(iconDisplay: string) {\n const imageUrl = this.cssVariables[IMAGE_URL_REMOTE_CONFIG_KEY];\n\n if (!imageUrl) return html``;\n\n const isBlockDisplay = iconDisplay === \"block-center\";\n const containerStyle = isBlockDisplay ? 'style=\"order:1\"' : \"\";\n\n return html`\n <span class=\"icon-container\" part=\"icon\" ${containerStyle}>\n <img src=${imageUrl} part=\"icon\" aria-hidden=\"true\" />\n </span>\n `;\n }\n\n renderContent(isPromoPillVisible: boolean, shouldDisplayColon: boolean, data: IAPIV3PostProductDetailsPage) {\n const title = localizeUserString(this.configLang, data?.config?.web?.title) || strings[this.configLang].ctaTitle();\n const description =\n localizeUserString(this.configLang, data?.config?.web?.description) || strings[this.configLang].ctaMessage();\n return isPromoPillVisible\n ? html`\n <div class=\"info-inline-promo\">\n <span class=\"title\">${title + (shouldDisplayColon ? strings[this.configLang].inlineSeparator() : \"\")}</span>\n <span class=\"description\"> ${description} ${this.renderDisclosureTooltip()} </span>\n </div>\n `\n : html`\n <div class=\"title-block\">\n <h3 class=\"title\">${title}</h3>\n </div>\n <div class=\"description-block\">\n <span class=\"description\"> ${description} ${this.renderDisclosureTooltip()} </span>\n </div>\n `;\n }\n\n renderCloseTooltipIcon() {\n return html`<svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.40836 5.40811L1.48828 1.48804M5.40836 5.40811L9.32843 9.32819M5.40836 5.40811L9.32843 1.48804M5.40836 5.40811L1.48828 9.32819\"\n stroke=\"white\"\n stroke-width=\"1.56803\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg> `;\n }\n\n /* PayPal Giving Fund Disclosure */\n renderDisclosureTooltip() {\n const onClickClose = () => {\n // due to being strictly html, we need to assume any when overriding shoelace properties\n const tooltip = this.renderRoot.querySelector(\".ppgf-disclosure-tooltip\") as any;\n if (tooltip?.open) {\n tooltip.open = false;\n }\n };\n const ppgfDisclosure = this.productDetailsPageDataController.data?.ppgfDisclosure;\n return ppgfDisclosure\n ? html`<sl-tooltip class=\"ppgf-disclosure-tooltip\" part=\"tooltip\">\n <div class=\"ppgf-disclosure-tooltip-content\" slot=\"content\" part=\"tooltip-content\">\n <button\n class=\"ppgf-disclosure-close\"\n aria-label=\"Close tooltip\"\n part=\"tooltip-close-button\"\n @click=\"${onClickClose}\"\n >\n ${this.renderCloseTooltipIcon()}\n </button>\n <div class=\"ppgf-disclosure-tooltip-copy\" part=\"tooltip-disclosure-copy\">\n ${unsafeHTML(ppgfDisclosure.copy)}\n </div>\n </div>\n <span class=\"ppgf-disclosure-tooltip-trigger\" part=\"tooltip-disclosure-icon\">\n <div class=\"ppgf-disclosure-tooltip-trigger-mask d-lg-none\"></div>\n <sl-button\n variant=\"text\"\n size=\"small\"\n class=\"ppgf-disclosure-tooltip-trigger\"\n part=\"tooltip-disclosure-button\"\n aria-label=\"More information\"\n tabindex=\"0\"\n circle\n >\n ${_info()}\n </sl-button>\n </span>\n </sl-tooltip>`\n : html``;\n }\n /* End PayPal Giving Fund Disclosure */\n\n public get cssVariables() {\n const defaults = {\n \"--beam-ProductDetailsPage-imageWidth\": \"24px\",\n \"--beam-ProductDetailsPage-imageHeight\": \"24px\",\n \"--beam-ProductDetailsPage-maxWidth\": \"346px\",\n \"--beam-ProductDetailsPage-paddingTop\": \"8px\",\n \"--beam-ProductDetailsPage-paddingRight\": \"12px\",\n \"--beam-ProductDetailsPage-paddingBottom\": \"8px\",\n \"--beam-ProductDetailsPage-paddingLeft\": \"15px\",\n \"--beam-ProductDetailsPage-InfoContainer-marginLeft\": \"8px\",\n \"--beam-ProductDetailsPage-InfoContainer-textAlign\": \"inherit\",\n \"--beam-ProductDetailsPage-InfoContainer-lineHeight\": \"15px\",\n \"--beam-ProductDetailsPage-InfoContainer-marginTop\": \"4px\",\n \"--beam-ProductDetailsPage-backgroundColor\": \"unset\",\n \"--beam-ProductDetailsPage-TooltipIcon-width\": \"10px\",\n \"--beam-ProductDetailsPage-TooltipIcon-color\": \"inherit\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor\": \"#000000\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingTop\": \"10px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingRight\": \"8px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom\": \"10px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft\": \"8px\",\n \"--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color\": \"#5CA3FF\",\n ...defineCustomText(\"--beam-ProductDetailsPage-title\", {\n fontSize: \"12px\",\n fontWeight: \"bold\",\n }),\n \"--beam-ProductDetailsPage-title-textAlign\": \"left\",\n ...defineCustomText(\"--beam-ProductDetailsPage-description\", {\n marginTop: \"0px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n }),\n \"--beam-ProductDetailsPage-description-textAlign\": \"left\",\n ...defineCustomText(\"--beam-ProductDetailsPage-PPGFDisclosureTooltipContent\", {\n fontSize: \"12px\",\n lineHeight: \"16px\",\n color: \"#FFFFFF\",\n }),\n ...defineCustomBorder(\"--beam-ProductDetailsPage\"),\n \"--beam-ProductDetailsPage-close-display\": \"initial\",\n \"--beam-ProductDetailsPage-close-padding\": \"0\",\n \"--beam-ProductDetailsPage-image-placement\": \"inline-left\", // options: \"inline-left\" || \"block-center\"\n \"--beam-ProductDetailsPage-blockImage-alignSelf\": \"center\",\n \"--beam-ProductDetailsPage-promoPill-marginTop\": \"4px\",\n \"--beam-ProductDetailsPage-promoPill-alignSelf\": \"left\",\n \"--beam-ProductDetailsPage-shouldDisplayColon\": \"true\",\n \"--beam-ProductDetailsPage-shouldDisplayPromoPill\": \"true\",\n ...promoPillLabelConfigDefaults,\n };\n const remoteConfig = this.productDetailsPageDataController?.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 cssResponsiveUtils,\n css`\n :host {\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 max-width: var(--beam-ProductDetailsPage-maxWidth);\n word-break: normal;\n display: block;\n }\n .root {\n padding-top: var(--beam-ProductDetailsPage-paddingTop);\n padding-right: var(--beam-ProductDetailsPage-paddingRight);\n padding-bottom: var(--beam-ProductDetailsPage-paddingBottom);\n padding-left: var(--beam-ProductDetailsPage-paddingLeft);\n width: 100%;\n background-color: var(--beam-ProductDetailsPage-backgroundColor);\n display: flex;\n flex-direction: column;\n ${useCustomBorder(\"--beam-ProductDetailsPage\")}\n }\n /* When iconDisplay is inline-center */\n .inline-display {\n display: flex;\n }\n /* When iconDisplay is block-center */\n .block-display {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .promo-container {\n order: 2;\n display: flex;\n margin-top: var(--beam-ProductDetailsPage-promoPill-marginTop);\n align-self: var(--beam-ProductDetailsPage-promoPill-alignSelf);\n }\n .content-inline {\n order: 3;\n display: flex;\n align-items: center;\n }\n /* Info block for both inline and block layout */\n .info-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: var(--beam-ProductDetailsPage-InfoContainer-textAlign);\n line-height: var(--beam-ProductDetailsPage-InfoContainer-lineHeight);\n margin-top: var(--beam-ProductDetailsPage-InfoContainer-marginTop);\n margin-left: var(--beam-ProductDetailsPage-InfoContainer-marginLeft);\n }\n .block-display .info-container {\n order: 3;\n }\n .root.inline-display .icon-container,\n .root.inline-display .info-container {\n display: inline-flex;\n }\n .root.inline-display {\n flex-direction: column;\n }\n .icon-container {\n width: var(--beam-ProductDetailsPage-imageWidth);\n height: var(--beam-ProductDetailsPage-imageHeight);\n align-self: var(--beam-ProductDetailsPage-blockImage-alignSelf);\n flex-shrink: 0;\n }\n .icon-container > img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .title {\n ${useCustomText(\"--beam-ProductDetailsPage-title\")}\n }\n .title-block {\n text-align: var(--beam-ProductDetailsPage-title-textAlign);\n line-height: var(--beam-ProductDetailsPage-title-lineHeight);\n }\n .info-inline-promo {\n margin-top: var(--beam-ProductDetailsPage-description-marginTop, 0px);\n }\n .description {\n ${useCustomText(\"--beam-ProductDetailsPage-description\")}\n }\n .description-block {\n text-align: var(--beam-ProductDetailsPage-description-textAlign);\n line-height: var(--beam-ProductDetailsPage-description-lineHeight);\n ${useCustomText(\"--beam-ProductDetailsPage-description\")}\n }\n .ppgf-disclosure-tooltip {\n --max-width: 268px;\n }\n .ppgf-disclosure-tooltip::part(body) {\n background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);\n padding-top: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingTop);\n padding-right: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingRight);\n padding-bottom: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom);\n padding-left: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft);\n }\n .ppgf-disclosure-tooltip::part(base__arrow) {\n background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);\n }\n .ppgf-disclosure-tooltip-content {\n display: flex;\n flex-direction: column;\n ${useCustomText(\"--beam-ProductDetailsPage-PPGFDisclosureTooltipContent\")}\n }\n .ppgf-disclosure-tooltip-copy > a,\n .ppgf-disclosure-close {\n pointer-events: auto;\n color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);\n }\n .ppgf-disclosure-close {\n display: var(--beam-ProductDetailsPage-close-display);\n padding: var(--beam-ProductDetailsPage-close-padding);\n height: 12px;\n background: none;\n border: none;\n margin-left: auto;\n }\n .ppgf-disclosure-tooltip-copy > a:visited {\n color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);\n }\n .ppgf-disclosure-tooltip-trigger {\n position: relative;\n }\n .ppgf-disclosure-tooltip-trigger-mask {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);\n height: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);\n }\n .ppgf-disclosure-tooltip-trigger > svg {\n width: var(--beam-ProductDetailsPage-TooltipIcon-width);\n color: var(--beam-ProductDetailsPage-TooltipIcon-color);\n height: auto;\n }\n `,\n ];\n}\n\ndefineCustomElement(BeamProductDetailsPage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"beam-product-details-page\": BeamProductDetailsPage;\n }\n}\n"],"names":["defineCustomBorder","namespace","borderRadius","borderStyle","borderColor","borderWidth","prefix","useCustomBorder","unsafeCSS","_info","html","strings","x","s","p","n","e","o","r","IMAGE_URL_REMOTE_CONFIG_KEY","BeamProductDetailsPage","LitElement","DEFAULT_BASE_URL","createScopedLocalStorage","evt","promoCodesFromPlugin","c","enforceConfig","beamCartId","getBeamCartId","BEAM_CART_COOKIE_NAME","manualPromoCodes","formattedPromos","formatStoreAndReturnPromoCodes","code","shouldSendPromos","isEmptyPromoData","BeamWidgetStoredPromoCodesEvent","WIDGET_NAMES","res","postProductDetailsPage","makeApiKeyHeader","AsyncController","SUPPORTED_LANGUAGES","parseJsonStringArray","cart","getPromoCodesFromCart","response","setPromoCodesInLocalStorage","setPromoCodeInCookie","BeamPromoCodesStoredEvent","changedProperties","requireNewDataProps","prop","data","loading","iconDisplay","isNonZero","value","shouldDisplayPromoPill","isPromoActive","hasValidImageHeight","hasValidTitleFontSize","isPromoPillVisible","shouldShowPunctuation","_errorMessage","imageUrl","shouldDisplayColon","title","localizeUserString","description","onClickClose","tooltip","ppgfDisclosure","unsafeHTML","defaults","defineCustomText","promoPillLabelConfigDefaults","remoteConfig","config","_cssVariableMap","cssReset","cssResponsiveUtils","css","useCustomText","__decorateClass","property","state","defineCustomElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"product-details-page.js","sources":["../../src/shared/fragments/custom-border.ts","../../src/shared/fragments/info.ts","../../src/components/product-details-page/strings.ts","../../src/components/product-details-page/index.ts"],"sourcesContent":["import { CSSResult, unsafeCSS } from \"lit\";\n\nexport const defineCustomBorder = (\n namespace = \"\",\n { borderRadius = \"0px\", borderStyle = \"unset\", borderColor = \"#000000\", borderWidth = \"1px\" } = {}\n): Record<string, string> => {\n const prefix = namespace.startsWith(\"--beam-\") ? namespace : `--beam-${namespace}`;\n return {\n [`${prefix}-borderRadius`]: borderRadius,\n [`${prefix}-borderStyle`]: borderStyle,\n [`${prefix}-borderColor`]: borderColor,\n [`${prefix}-borderWidth`]: borderWidth,\n };\n};\n\nexport const useCustomBorder = (\n namespace = \"\",\n { borderRadius = \"0px\", borderStyle = \"unset\", borderColor = \"#000000\", borderWidth = \"1px\" } = {}\n): CSSResult => {\n const prefix = namespace.startsWith(\"--beam-\") ? namespace : `--beam-${namespace}`;\n return unsafeCSS(`\\\n border-radius: var(${prefix}-borderRadius, ${borderRadius});\n border-style: var(${prefix}-borderStyle, ${borderStyle});\n border-color: var(${prefix}-borderColor, ${borderColor});\n border-width: var(${prefix}-borderWidth, ${borderWidth});\n `);\n};\n","import { html } from \"lit\";\n\nexport const _info = () => html` <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n part=\"svg\"\n>\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M12 16v-4\"></path>\n <path d=\"M12 8h.01\"></path>\n</svg>`;\n","export const strings = {\n en: {\n ctaTitle: () => `Choose your impact`,\n ctaMessage: () => `At no extra cost, 1% of every order is donated to a nonprofit you choose. Powered by Beam`,\n inlineSeparator: () => `:`,\n },\n fr: {\n ctaTitle: () => `Choisissez l'impact de votre choix`,\n ctaMessage: () =>\n `Sans frais supplémentaires, 1% de chaque commande est reversé à l'organisation caritative de votre choix. Développé par Beam`,\n inlineSeparator: () => `:`,\n },\n es: {\n ctaTitle: () => `Elige el impacto que deseas`,\n ctaMessage: () =>\n `Sin coste adicional, el 1% de cada pedido se dona a la organización sin ánimo de lucro que tú elijas. Desarrollado por Beam`,\n inlineSeparator: () => `:`,\n },\n de: {\n ctaTitle: () => `Wählen Sie Ihren Einfluss`,\n ctaMessage: () =>\n `Ohne zusätzliche Kosten wird 1 % jeder Bestellung an eine von Ihnen gewählte gemeinnützige Organisation gespendet. Von Beam unterstützt`,\n inlineSeparator: () => `:`,\n },\n it: {\n ctaTitle: () => `Scegliete chi sostenere`,\n ctaMessage: () =>\n `L'1% di ogni vostro acquisto viene donato, senza alcun costo aggiuntivo, a un'organizzazione no-profit a libera scelta. Promosso da Beam`,\n inlineSeparator: () => `:`,\n },\n pl: {\n ctaTitle: () => `Masz wpływ, dokonaj wyboru`,\n ctaMessage: () =>\n `1% kwoty każdego zamówienia jest przekazywane na rzecz wybranej przez Ciebie organizacji non-profit – bez dodatkowych kosztów. Obsługiwane przez Beam`,\n inlineSeparator: () => `:`,\n },\n};\n","import { LitElement, css, html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { postProductDetailsPage } from \"../../api-sdk/v3/routes\";\nimport { DEFAULT_BASE_URL, SUPPORTED_LANGUAGES, WIDGET_NAMES } from \"../../api-sdk/constants\";\nimport { LANGUAGES, TUrl } from \"../../api-sdk/types\";\nimport { MissingConfig } from \"../../utils/beam-errors\";\nimport { enforceConfig } from \"../../shared/enforce-config\";\nimport { _cssVariableMap } from \"../../shared/fragments/css-variable-map\";\nimport { localizeUserString } from \"../../shared/localize\";\nimport { _errorMessage } from \"../../shared/fragments/error-message-template\";\nimport { cssResponsiveUtils } from \"../../shared/responsive\";\nimport { defineCustomElement } from \"../../shared/defineCustomElement\";\nimport { cssReset } from \"../../shared/css-reset\";\nimport { defineCustomText, useCustomText } from \"../../shared/fragments/custom-text\";\nimport { defineCustomBorder, useCustomBorder } from \"../../shared/fragments/custom-border\";\n// shoelace html tag imports\nimport \"@shoelace-style/shoelace/dist/components/tooltip/tooltip.js\";\nimport \"@shoelace-style/shoelace/dist/components/button/button.js\";\nimport { _info } from \"../../shared/fragments/info\";\nimport { promoPillLabelConfigDefaults } from \"../../shared/components/promo-pill-label\";\nimport {\n getPromoCodesFromCart,\n setPromoCodeInCookie,\n parseJsonStringArray,\n formatStoreAndReturnPromoCodes,\n setPromoCodesInLocalStorage,\n isEmptyPromoData,\n} from \"../../utils/promoManager\";\nimport \"../../shared/components/promo-pill-label\";\nimport { BEAM_CART_COOKIE_NAME, TBeamCartLocalStorage } from \"../../shared/cart-contents\";\nimport { createScopedLocalStorage } from \"../../utils/local-storage\";\nimport { makeApiKeyHeader } from \"../../utils/makeApiKeyHeader\";\nimport { BeamPromoCodesStoredEvent, BeamWidgetStoredPromoCodesEvent } from \"../../utils/events\";\nimport { getBeamCartId } from \"../../utils/cart\";\nimport { strings } from \"./strings\";\n\ntype RequiredConfig = {\n apiKey: string;\n storeId: number;\n};\ntype IAPIV3PostProductDetailsPage = Awaited<ReturnType<typeof postProductDetailsPage>>;\n\nconst IMAGE_URL_REMOTE_CONFIG_KEY = \"--beam-ProductDetailsPage-imageUrl\";\n\nexport class BeamProductDetailsPage extends LitElement {\n static tagName = \"beam-product-details-page\";\n\n @property({ type: String, reflect: true }) public baseUrl: TUrl = DEFAULT_BASE_URL;\n\n @property({ type: String, reflect: false }) apiKey?: RequiredConfig[\"apiKey\"];\n\n @property({ type: Number }) storeId?: number;\n\n @property({ type: String }) public lang: LANGUAGES = \"en\";\n\n @property({ type: Boolean }) public draftConfig = false;\n\n @property({ type: Boolean }) public debug = false;\n\n @property({ type: String }) remoteProductIdentifier?: string;\n\n @property({ type: String }) public promoCodes?: string;\n\n @property({ type: String }) public domain?: string;\n\n private localStorage = createScopedLocalStorage(this as LitElement & RequiredConfig);\n\n @state() private pluginPromoCodes: string[] = [];\n\n get configLang() {\n return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n }\n\n get parsedPromoCodes(): string[] {\n return parseJsonStringArray(this.promoCodes);\n }\n\n private handlePromoCodesStored = (evt: BeamPromoCodesStoredEvent) => {\n const promoCodesFromPlugin = (evt.detail.promoCodes?.unvalidatedPromoCodes ?? [])\n .map((c) => c.attributes?.value ?? c.attributes?.url ?? \"\")\n .sort();\n this.pluginPromoCodes = promoCodesFromPlugin;\n };\n\n private getManualPromoCodes(): string[] {\n // Priority 1: Widget passed discount codes\n if (this.parsedPromoCodes && this.parsedPromoCodes.length > 0) {\n return this.parsedPromoCodes;\n }\n\n // Priority 2: Cart fallback\n const cart = this.localStorage.getItemJson<TBeamCartLocalStorage>(\"cart\");\n return cart ? getPromoCodesFromCart(cart) : [];\n }\n\n private async handleValidatedPromoCodes(response: IAPIV3PostProductDetailsPage) {\n if (response.promos?.validatedPromoCodes) {\n await Promise.all([\n setPromoCodesInLocalStorage({\n apiKey: this.apiKey,\n promoCodes: { validatedPromoCodes: response.promos.validatedPromoCodes, unvalidatedPromoCodes: [] },\n }),\n setPromoCodeInCookie({\n validatedPromoCodes: response.promos.validatedPromoCodes,\n domain: this.domain,\n }),\n ]);\n this.dispatchEvent(\n new BeamWidgetStoredPromoCodesEvent({\n source: WIDGET_NAMES.product_details_page,\n })\n );\n }\n }\n\n async firstUpdated() {\n window.addEventListener(BeamPromoCodesStoredEvent.eventName, this.handlePromoCodesStored as EventListener);\n }\n\n disconnectedCallback() {\n window.removeEventListener(BeamPromoCodesStoredEvent.eventName, this.handlePromoCodesStored as EventListener);\n super.disconnectedCallback();\n }\n\n postProductDetailsPageData = async () => {\n if (!enforceConfig<RequiredConfig>([\"apiKey\", \"storeId\"], this)) throw new MissingConfig();\n const beamCartId = getBeamCartId(BEAM_CART_COOKIE_NAME, { apiKey: this.apiKey });\n\n const manualPromoCodes = this.getManualPromoCodes();\n const formattedPromos = formatStoreAndReturnPromoCodes(\n manualPromoCodes.map((code) => ({ value: code })),\n this.apiKey\n );\n const shouldSendPromos = formattedPromos && !isEmptyPromoData(formattedPromos);\n\n if (shouldSendPromos) {\n this.dispatchEvent(\n new BeamWidgetStoredPromoCodesEvent({\n source: WIDGET_NAMES.product_details_page,\n })\n );\n }\n const res = await postProductDetailsPage({\n baseUrl: this.baseUrl,\n headers: makeApiKeyHeader(this.apiKey),\n queryParams: {\n version: \"1.0.0\",\n lang: this.configLang,\n storeId: this.storeId,\n widgetName: WIDGET_NAMES.product_details_page,\n draftConfig: this.draftConfig,\n remoteProductIdentifier: this.remoteProductIdentifier,\n },\n requestBody: {\n ...(shouldSendPromos && { promos: formattedPromos }),\n beamCartId: beamCartId ? beamCartId : undefined,\n },\n });\n this.handleValidatedPromoCodes(res);\n return res;\n };\n\n private productDetailsPageDataController = new AsyncController<typeof this.postProductDetailsPageData>(\n this,\n this.postProductDetailsPageData\n );\n\n async updated(changedProperties: Map<string, unknown>) {\n const requireNewDataProps = [\"storeId\", \"baseUrl\", \"lang\", \"apiKey\", \"pluginPromoCodes\"];\n void this.pluginPromoCodes;\n for (const prop of requireNewDataProps) {\n if (changedProperties.has(prop)) {\n await this.productDetailsPageDataController.exec();\n break;\n }\n }\n }\n\n render() {\n const { data, loading } = this.productDetailsPageDataController;\n const iconDisplay = this.cssVariables[\"--beam-ProductDetailsPage-image-placement\"];\n const isNonZero = (value: string) => value !== \"0px\" && value !== \"0\";\n const shouldDisplayPromoPill = this.cssVariables[\"--beam-ProductDetailsPage-shouldDisplayPromoPill\"] === \"true\";\n const isPromoActive = !!data?.config?.web?.promo;\n const hasValidImageHeight = isNonZero(this.cssVariables[\"--beam-ProductDetailsPage-imageHeight\"]);\n const hasValidTitleFontSize = isNonZero(this.cssVariables[\"--beam-ProductDetailsPage-title-fontSize\"]);\n const isPromoPillVisible =\n shouldDisplayPromoPill && // Determines if the promo pill is enabled for the marketing version of the PDP\n isPromoActive && // Is promo currently active\n hasValidImageHeight && // Ensures the promo pill is not displayed for the subtext version of the PDP\n hasValidTitleFontSize; // Ensures the promo pill is not displayed for the subtext version of the PDP\n const shouldShowPunctuation = this.cssVariables[\"--beam-ProductDetailsPage-shouldDisplayColon\"] === \"true\"; // Determines if a colon should be displayed in promo display\n if (loading) {\n return html``;\n }\n if (data == null) {\n if (this.debug) {\n return _errorMessage({ error: new Error(\"No data\") });\n }\n return \"\";\n }\n return html`\n <style>\n :host {\n ${this.cssVariables.toCSS()}\n }\n </style>\n <div\n class=\"root ${iconDisplay === \"block-center\" ? \"block-display\" : \"inline-display\"}\"\n aria-label=\"product detail page Beam component\"\n >\n ${iconDisplay === \"block-center\"\n ? html`\n ${this.renderWidgetIcon(iconDisplay)}\n ${isPromoPillVisible\n ? html`\n <div class=\"promo-container\">\n <beam-promo-info-pill .promo=${data?.config?.web?.promo}></beam-promo-info-pill>\n </div>\n `\n : html``}\n <div class=\"info-container\">${this.renderContent(isPromoPillVisible, shouldShowPunctuation, data)}</div>\n `\n : html`\n ${isPromoPillVisible\n ? html`\n <div class=\"promo-container\">\n <beam-promo-info-pill .promo=${data?.config?.web?.promo}></beam-promo-info-pill>\n </div>\n `\n : html``}\n <div class=\"content-inline\">\n ${this.renderWidgetIcon(iconDisplay)}\n <div class=\"info-container\">${this.renderContent(isPromoPillVisible, shouldShowPunctuation, data)}</div>\n </div>\n `}\n </div>\n `;\n }\n\n renderWidgetIcon(iconDisplay: string) {\n const imageUrl = this.cssVariables[IMAGE_URL_REMOTE_CONFIG_KEY];\n\n if (!imageUrl) return html``;\n\n const isBlockDisplay = iconDisplay === \"block-center\";\n const containerStyle = isBlockDisplay ? 'style=\"order:1\"' : \"\";\n\n return html`\n <span class=\"icon-container\" part=\"icon\" ${containerStyle}>\n <img src=${imageUrl} part=\"icon\" aria-hidden=\"true\" />\n </span>\n `;\n }\n\n renderContent(isPromoPillVisible: boolean, shouldDisplayColon: boolean, data: IAPIV3PostProductDetailsPage) {\n const title = localizeUserString(this.configLang, data?.config?.web?.title) || strings[this.configLang].ctaTitle();\n const description =\n localizeUserString(this.configLang, data?.config?.web?.description) || strings[this.configLang].ctaMessage();\n return isPromoPillVisible\n ? html`\n <div class=\"info-inline-promo\">\n <span class=\"title\">${title + (shouldDisplayColon ? strings[this.configLang].inlineSeparator() : \"\")}</span>\n <span class=\"description\"> ${description} ${this.renderDisclosureTooltip()} </span>\n </div>\n `\n : html`\n <div class=\"title-block\">\n <h3 class=\"title\">${title}</h3>\n </div>\n <div class=\"description-block\">\n <span class=\"description\"> ${description} ${this.renderDisclosureTooltip()} </span>\n </div>\n `;\n }\n\n renderCloseTooltipIcon() {\n return html`<svg width=\"11\" height=\"11\" viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.40836 5.40811L1.48828 1.48804M5.40836 5.40811L9.32843 9.32819M5.40836 5.40811L9.32843 1.48804M5.40836 5.40811L1.48828 9.32819\"\n stroke=\"white\"\n stroke-width=\"1.56803\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg> `;\n }\n\n /* PayPal Giving Fund Disclosure */\n renderDisclosureTooltip() {\n const onClickClose = () => {\n // due to being strictly html, we need to assume any when overriding shoelace properties\n const tooltip = this.renderRoot.querySelector(\".ppgf-disclosure-tooltip\") as any;\n if (tooltip?.open) {\n tooltip.open = false;\n }\n };\n const ppgfDisclosure = this.productDetailsPageDataController.data?.ppgfDisclosure;\n return ppgfDisclosure\n ? html`<sl-tooltip class=\"ppgf-disclosure-tooltip\" part=\"tooltip\">\n <div class=\"ppgf-disclosure-tooltip-content\" slot=\"content\" part=\"tooltip-content\">\n <button\n class=\"ppgf-disclosure-close\"\n aria-label=\"Close tooltip\"\n part=\"tooltip-close-button\"\n @click=\"${onClickClose}\"\n >\n ${this.renderCloseTooltipIcon()}\n </button>\n <div class=\"ppgf-disclosure-tooltip-copy\" part=\"tooltip-disclosure-copy\">\n ${unsafeHTML(ppgfDisclosure.copy)}\n </div>\n </div>\n <span class=\"ppgf-disclosure-tooltip-trigger\" part=\"tooltip-disclosure-icon\">\n <div class=\"ppgf-disclosure-tooltip-trigger-mask d-lg-none\"></div>\n <sl-button\n variant=\"text\"\n size=\"small\"\n class=\"ppgf-disclosure-tooltip-trigger\"\n part=\"tooltip-disclosure-button\"\n aria-label=\"More information\"\n tabindex=\"0\"\n circle\n >\n ${_info()}\n </sl-button>\n </span>\n </sl-tooltip>`\n : html``;\n }\n /* End PayPal Giving Fund Disclosure */\n\n public get cssVariables() {\n const defaults = {\n \"--beam-ProductDetailsPage-imageWidth\": \"24px\",\n \"--beam-ProductDetailsPage-imageHeight\": \"24px\",\n \"--beam-ProductDetailsPage-maxWidth\": \"346px\",\n \"--beam-ProductDetailsPage-paddingTop\": \"8px\",\n \"--beam-ProductDetailsPage-paddingRight\": \"12px\",\n \"--beam-ProductDetailsPage-paddingBottom\": \"8px\",\n \"--beam-ProductDetailsPage-paddingLeft\": \"15px\",\n \"--beam-ProductDetailsPage-InfoContainer-marginLeft\": \"8px\",\n \"--beam-ProductDetailsPage-InfoContainer-textAlign\": \"inherit\",\n \"--beam-ProductDetailsPage-InfoContainer-lineHeight\": \"15px\",\n \"--beam-ProductDetailsPage-InfoContainer-marginTop\": \"4px\",\n \"--beam-ProductDetailsPage-backgroundColor\": \"unset\",\n \"--beam-ProductDetailsPage-TooltipIcon-width\": \"10px\",\n \"--beam-ProductDetailsPage-TooltipIcon-color\": \"inherit\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor\": \"#000000\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingTop\": \"10px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingRight\": \"8px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom\": \"10px\",\n \"--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft\": \"8px\",\n \"--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color\": \"#5CA3FF\",\n ...defineCustomText(\"--beam-ProductDetailsPage-title\", {\n fontSize: \"12px\",\n fontWeight: \"bold\",\n }),\n \"--beam-ProductDetailsPage-title-textAlign\": \"left\",\n ...defineCustomText(\"--beam-ProductDetailsPage-description\", {\n marginTop: \"0px\",\n fontSize: \"12px\",\n lineHeight: \"15px\",\n }),\n \"--beam-ProductDetailsPage-description-textAlign\": \"left\",\n ...defineCustomText(\"--beam-ProductDetailsPage-PPGFDisclosureTooltipContent\", {\n fontSize: \"12px\",\n lineHeight: \"16px\",\n color: \"#FFFFFF\",\n }),\n ...defineCustomBorder(\"--beam-ProductDetailsPage\"),\n \"--beam-ProductDetailsPage-close-display\": \"initial\",\n \"--beam-ProductDetailsPage-close-padding\": \"0\",\n \"--beam-ProductDetailsPage-image-placement\": \"inline-left\", // options: \"inline-left\" || \"block-center\"\n \"--beam-ProductDetailsPage-blockImage-alignSelf\": \"center\",\n \"--beam-ProductDetailsPage-promoPill-marginTop\": \"4px\",\n \"--beam-ProductDetailsPage-promoPill-alignSelf\": \"left\",\n \"--beam-ProductDetailsPage-shouldDisplayColon\": \"true\",\n \"--beam-ProductDetailsPage-shouldDisplayPromoPill\": \"true\",\n ...promoPillLabelConfigDefaults,\n };\n const remoteConfig = this.productDetailsPageDataController?.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 cssResponsiveUtils,\n css`\n :host {\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 max-width: var(--beam-ProductDetailsPage-maxWidth);\n word-break: normal;\n display: block;\n }\n .root {\n padding-top: var(--beam-ProductDetailsPage-paddingTop);\n padding-right: var(--beam-ProductDetailsPage-paddingRight);\n padding-bottom: var(--beam-ProductDetailsPage-paddingBottom);\n padding-left: var(--beam-ProductDetailsPage-paddingLeft);\n width: 100%;\n background-color: var(--beam-ProductDetailsPage-backgroundColor);\n display: flex;\n flex-direction: column;\n ${useCustomBorder(\"--beam-ProductDetailsPage\")}\n }\n /* When iconDisplay is inline-center */\n .inline-display {\n display: flex;\n }\n /* When iconDisplay is block-center */\n .block-display {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n .promo-container {\n order: 2;\n display: flex;\n margin-top: var(--beam-ProductDetailsPage-promoPill-marginTop);\n align-self: var(--beam-ProductDetailsPage-promoPill-alignSelf);\n }\n .content-inline {\n order: 3;\n display: flex;\n align-items: center;\n }\n /* Info block for both inline and block layout */\n .info-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: var(--beam-ProductDetailsPage-InfoContainer-textAlign);\n line-height: var(--beam-ProductDetailsPage-InfoContainer-lineHeight);\n margin-top: var(--beam-ProductDetailsPage-InfoContainer-marginTop);\n margin-left: var(--beam-ProductDetailsPage-InfoContainer-marginLeft);\n }\n .block-display .info-container {\n order: 3;\n }\n .root.inline-display .icon-container,\n .root.inline-display .info-container {\n display: inline-flex;\n }\n .root.inline-display {\n flex-direction: column;\n }\n .icon-container {\n width: var(--beam-ProductDetailsPage-imageWidth);\n height: var(--beam-ProductDetailsPage-imageHeight);\n align-self: var(--beam-ProductDetailsPage-blockImage-alignSelf);\n flex-shrink: 0;\n }\n .icon-container > img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n .title {\n ${useCustomText(\"--beam-ProductDetailsPage-title\")}\n }\n .title-block {\n text-align: var(--beam-ProductDetailsPage-title-textAlign);\n line-height: var(--beam-ProductDetailsPage-title-lineHeight);\n }\n .info-inline-promo {\n margin-top: var(--beam-ProductDetailsPage-description-marginTop, 0px);\n }\n .description {\n ${useCustomText(\"--beam-ProductDetailsPage-description\")}\n }\n .description-block {\n text-align: var(--beam-ProductDetailsPage-description-textAlign);\n line-height: var(--beam-ProductDetailsPage-description-lineHeight);\n ${useCustomText(\"--beam-ProductDetailsPage-description\")}\n }\n .ppgf-disclosure-tooltip {\n --max-width: 268px;\n }\n .ppgf-disclosure-tooltip::part(body) {\n background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);\n padding-top: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingTop);\n padding-right: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingRight);\n padding-bottom: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingBottom);\n padding-left: var(--beam-ProductDetailsPage-PPGFDisclosure-paddingLeft);\n }\n .ppgf-disclosure-tooltip::part(base__arrow) {\n background-color: var(--beam-ProductDetailsPage-PPGFDisclosure-backgroundColor);\n }\n .ppgf-disclosure-tooltip-content {\n display: flex;\n flex-direction: column;\n ${useCustomText(\"--beam-ProductDetailsPage-PPGFDisclosureTooltipContent\")}\n }\n .ppgf-disclosure-tooltip-copy > a,\n .ppgf-disclosure-close {\n pointer-events: auto;\n color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);\n }\n .ppgf-disclosure-close {\n display: var(--beam-ProductDetailsPage-close-display);\n padding: var(--beam-ProductDetailsPage-close-padding);\n height: 12px;\n background: none;\n border: none;\n margin-left: auto;\n }\n .ppgf-disclosure-tooltip-copy > a:visited {\n color: var(--beam-ProductDetailsPage-PPGFDisclosureHyperlink-color);\n }\n .ppgf-disclosure-tooltip-trigger {\n position: relative;\n }\n .ppgf-disclosure-tooltip-trigger-mask {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);\n height: calc(var(--beam-ProductDetailsPage-TooltipIcon-width) + 20px);\n }\n .ppgf-disclosure-tooltip-trigger::part(base) {\n line-height: 1;\n border: none;\n min-height: 0;\n min-width: 0;\n width: auto;\n color: var(--beam-ProductDetailsPage-TooltipIcon-color);\n }\n .ppgf-disclosure-tooltip-trigger::part(label) {\n padding: 0;\n }\n .ppgf-disclosure-tooltip-trigger > svg {\n width: var(--beam-ProductDetailsPage-TooltipIcon-width);\n color: var(--beam-ProductDetailsPage-TooltipIcon-color);\n height: auto;\n }\n `,\n ];\n}\n\ndefineCustomElement(BeamProductDetailsPage);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"beam-product-details-page\": BeamProductDetailsPage;\n }\n}\n"],"names":["defineCustomBorder","namespace","borderRadius","borderStyle","borderColor","borderWidth","prefix","useCustomBorder","unsafeCSS","_info","html","strings","x","s","p","n","e","o","r","IMAGE_URL_REMOTE_CONFIG_KEY","BeamProductDetailsPage","LitElement","DEFAULT_BASE_URL","createScopedLocalStorage","evt","promoCodesFromPlugin","c","enforceConfig","beamCartId","getBeamCartId","BEAM_CART_COOKIE_NAME","manualPromoCodes","formattedPromos","formatStoreAndReturnPromoCodes","code","shouldSendPromos","isEmptyPromoData","BeamWidgetStoredPromoCodesEvent","WIDGET_NAMES","res","postProductDetailsPage","makeApiKeyHeader","AsyncController","SUPPORTED_LANGUAGES","parseJsonStringArray","cart","getPromoCodesFromCart","response","setPromoCodesInLocalStorage","setPromoCodeInCookie","BeamPromoCodesStoredEvent","changedProperties","requireNewDataProps","prop","data","loading","iconDisplay","isNonZero","value","shouldDisplayPromoPill","isPromoActive","hasValidImageHeight","hasValidTitleFontSize","isPromoPillVisible","shouldShowPunctuation","_errorMessage","imageUrl","shouldDisplayColon","title","localizeUserString","description","onClickClose","tooltip","ppgfDisclosure","unsafeHTML","defaults","defineCustomText","promoPillLabelConfigDefaults","remoteConfig","config","_cssVariableMap","cssReset","cssResponsiveUtils","css","useCustomText","__decorateClass","property","state","defineCustomElement"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../chunks/lit-WqMxC_PA.esm.js";import{d as I}from"../chunks/lodash-7H4x2457.esm.js";import{u as h,A as R,d as f,a as N,i as m,_ as x}from"../chunks/localize-Btu9xYcE.esm.js";import{D as L,e as z,W as B,j as M,S as U}from"../chunks/routes-
|
|
1
|
+
import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../chunks/lit-WqMxC_PA.esm.js";import{d as I}from"../chunks/lodash-7H4x2457.esm.js";import{u as h,A as R,d as f,a as N,i as m,_ as x}from"../chunks/localize-Btu9xYcE.esm.js";import{D as L,e as z,W as B,j as M,S as U}from"../chunks/routes-TtLdALcf.esm.js";import{p as E}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{p as W}from"../chunks/promo-pill-label-CbW_Vcru.esm.js";import{partnerLogosConfigDefaults as A}from"./beam-partner-logos.esm.js";import{c as F,d as _,e as y,a as j}from"../chunks/enforce-config-CZ3ToOgr.esm.js";import{_ as O}from"../chunks/loading-template-DG4lkIIc.esm.js";import{M as K,B as V}from"../chunks/beam-errors-Ci0d3926.esm.js";import{createScopedLocalStorage as H}from"../utils/local-storage.esm.js";import{c as q}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import{c as G}from"../chunks/events-BohmT6Lp.esm.js";import"../utils/logger.esm.js";import"../chunks/vendor-KKSARHWL.esm.js";const J=({height:n="1em",width:e="1em"}={})=>i`
|
|
2
2
|
<svg
|
|
3
3
|
style="${k({height:n,width:e,position:"relative",bottom:"0"})}"
|
|
4
4
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -114,9 +114,9 @@ import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../ch
|
|
|
114
114
|
`})}
|
|
115
115
|
</div>
|
|
116
116
|
|
|
117
|
-
<div class="submitButtonContainer">${this.renderSubmitButton(o)}</div>
|
|
117
|
+
<div class="submitButtonContainer" part="submit-button-container">${this.renderSubmitButton(o)}</div>
|
|
118
118
|
|
|
119
|
-
<div class="headerContainer">
|
|
119
|
+
<div class="headerContainer" part="header-container">
|
|
120
120
|
<div>
|
|
121
121
|
<div
|
|
122
122
|
class="header-promo-pill-container"
|
|
@@ -152,6 +152,7 @@ import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../ch
|
|
|
152
152
|
partnerName="${o.chain.name}"
|
|
153
153
|
partnerLogoUrl="${o.chain.logoUrl}"
|
|
154
154
|
style="order: 1"
|
|
155
|
+
part="logos"
|
|
155
156
|
></beam-partner-logos>
|
|
156
157
|
</div>
|
|
157
158
|
`}}r.tagName="beam-redeem-transaction",r.styles=[F,S`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"redeem-transaction.esm.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.esm.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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../chunks/lit-WqMxC_PA.esm.js";import{d as I}from"../chunks/lodash-7H4x2457.esm.js";import{u as h,A as R,d as f,a as N,i as m,_ as x}from"../chunks/localize-C25pEGnx.esm.js";import{D as L,e as z,W as B,j as M,S as U}from"../chunks/routes-
|
|
1
|
+
import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../chunks/lit-WqMxC_PA.esm.js";import{d as I}from"../chunks/lodash-7H4x2457.esm.js";import{u as h,A as R,d as f,a as N,i as m,_ as x}from"../chunks/localize-C25pEGnx.esm.js";import{D as L,e as z,W as B,j as M,S as U}from"../chunks/routes-S0vKQTft.esm.js";import{p as E}from"../chunks/progress-bar-DF7UuuHb.esm.js";import{p as W}from"../chunks/promo-pill-label-CbW_Vcru.esm.js";import{partnerLogosConfigDefaults as A}from"./beam-partner-logos.js";import{c as F,d as _,e as y,a as j}from"../chunks/enforce-config-Ba1JkOHs.esm.js";import{_ as O}from"../chunks/loading-template-DG4lkIIc.esm.js";import{M as K,B as V}from"../chunks/beam-errors-Ci0d3926.esm.js";import{createScopedLocalStorage as H}from"../utils/local-storage.js";import{c as q}from"../chunks/css-card-grid-CvoGpsJH.esm.js";import{c as G}from"../chunks/events-BohmT6Lp.esm.js";import"../utils/logger.js";import"../chunks/vendor-KKSARHWL.esm.js";const J=({height:n="1em",width:e="1em"}={})=>i`
|
|
2
2
|
<svg
|
|
3
3
|
style="${k({height:n,width:e,position:"relative",bottom:"0"})}"
|
|
4
4
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -114,9 +114,9 @@ import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../ch
|
|
|
114
114
|
`})}
|
|
115
115
|
</div>
|
|
116
116
|
|
|
117
|
-
<div class="submitButtonContainer">${this.renderSubmitButton(o)}</div>
|
|
117
|
+
<div class="submitButtonContainer" part="submit-button-container">${this.renderSubmitButton(o)}</div>
|
|
118
118
|
|
|
119
|
-
<div class="headerContainer">
|
|
119
|
+
<div class="headerContainer" part="header-container">
|
|
120
120
|
<div>
|
|
121
121
|
<div
|
|
122
122
|
class="header-promo-pill-container"
|
|
@@ -152,6 +152,7 @@ import{m as k,y as i,f as S,g as c,t as v,h as $,q as C,k as P,u as D}from"../ch
|
|
|
152
152
|
partnerName="${o.chain.name}"
|
|
153
153
|
partnerLogoUrl="${o.chain.logoUrl}"
|
|
154
154
|
style="order: 1"
|
|
155
|
+
part="logos"
|
|
155
156
|
></beam-partner-logos>
|
|
156
157
|
</div>
|
|
157
158
|
`}}r.tagName="beam-redeem-transaction",r.styles=[F,S`
|