@beamimpact/web-sdk 1.40.0 → 1.42.1

package/dist/components/product-details-page.js.map

@@ -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/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","import { LitElement, css, html } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { getProductDetailsPage } 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 { makeApiKeyHeader } from \"../../utils/makeApiKeyHeader\";\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 { _info } from \"../../shared/fragments/info\";\n\ntype RequiredConfig = {\n  apiKey: string;\n  storeId: number;\n};\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 debug = false;\n\n  get configLang() {\n    return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n  }\n\n  getProductDetailsPageData = async () => {\n    if (!enforceConfig<RequiredConfig>([\"apiKey\", \"storeId\"], this)) throw new MissingConfig();\n\n    const res = await getProductDetailsPage({\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      },\n    });\n    return res;\n  };\n\n  private productDetailsPageDataController = new AsyncController<typeof this.getProductDetailsPageData>(\n    this,\n    this.getProductDetailsPageData\n  );\n\n  async updated(changedProperties: Map<string, unknown>) {\n    const requireNewDataProps = [\"storeId\", \"baseUrl\", \"lang\", \"apiKey\"];\n    for (const prop of requireNewDataProps) {\n      if (changedProperties.has(prop)) {\n        await this.productDetailsPageDataController.exec();\n        break;\n      }\n    }\n  }\n\n  renderWidgetIcon() {\n    const imageUrl = this.cssVariables[IMAGE_URL_REMOTE_CONFIG_KEY];\n\n    return imageUrl\n      ? html`\n    <span class=\"icon-container\">\n      <img src=${imageUrl} alt=\"Widget Icon\"></img>\n    </span>\n    `\n      : html``;\n  }\n\n  render() {\n    const { data, loading } = this.productDetailsPageDataController;\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 class=\"root\">\n        ${this.renderWidgetIcon()}\n        <span class=\"info-container\">\n          <div class=\"title-block\">\n            <h3 class=\"title\">${localizeUserString(this.configLang, data.config?.web?.title)}</h3>\n          </div>\n          <div class=\"description-block\">\n            <span class=\"description\"> ${localizeUserString(this.configLang, data.config?.web?.description)}</span\n            >${this.renderDisclosureTooltip()}\n          </div>\n        </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      tooltip.open = false;\n    };\n    const ppgfDisclosure = this.productDetailsPageDataController.data?.ppgfDisclosure;\n    return ppgfDisclosure\n      ? html`<sl-tooltip class=\"ppgf-disclosure-tooltip\">\n          <div class=\"ppgf-disclosure-tooltip-content\" slot=\"content\">\n            <button class=\"ppgf-disclosure-close\" aria-label=\"Close tooltip\" @click=\"${onClickClose}\">\n              ${this.renderCloseTooltipIcon()}\n            </button>\n            <div class=\"ppgf-disclosure-tooltip-copy\">${unsafeHTML(ppgfDisclosure.copy)}</div>\n          </div>\n          <span class=\"ppgf-disclosure-tooltip-trigger\">\n            <div class=\"ppgf-disclosure-tooltip-trigger-mask d-lg-none\"></div>\n            ${_info()}\n          </span>\n        </sl-tooltip>`\n      : html``;\n  }\n\n  renderDisclosureTooltipHyperlink() {\n    const ppgfHyperlink = this.productDetailsPageDataController.data?.ppgfDisclosureHyperlink;\n    return ppgfHyperlink\n      ? html`<a class=\"ppgf-disclosure-hyperlink\" href=\"${ppgfHyperlink.url}\" target=\"_blank\">${ppgfHyperlink.copy}</a>`\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-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: \"4px\",\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    };\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        display: flex;\n        align-items: center;\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        ${useCustomBorder(\"--beam-ProductDetailsPage\")}\n      }\n      .icon-container {\n        width: var(--beam-ProductDetailsPage-imageWidth);\n        height: var(--beam-ProductDetailsPage-imageHeight);\n        flex-shrink: 0;\n      }\n      .icon-container > img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n      .info-container {\n        margin-left: var(--beam-ProductDetailsPage-InfoContainer-marginLeft);\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      .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      }\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        vertical-align: middle;\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","IMAGE_URL_REMOTE_CONFIG_KEY","BeamProductDetailsPage","LitElement","DEFAULT_BASE_URL","enforceConfig","getProductDetailsPage","makeApiKeyHeader","WIDGET_NAMES","AsyncController","SUPPORTED_LANGUAGES","changedProperties","requireNewDataProps","prop","imageUrl","data","loading","_errorMessage","localizeUserString","onClickClose","tooltip","ppgfDisclosure","unsafeHTML","ppgfHyperlink","defaults","defineCustomText","remoteConfig","config","_cssVariableMap","cssReset","cssResponsiveUtils","css","useCustomText","__decorateClass","property","defineCustomElement"],"mappings":"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"}
+{"version":3,"file":"product-details-page.js","sources":["../../src/shared/fragments/custom-border.ts","../../src/shared/fragments/info.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","import { LitElement, css, html } from \"lit\";\nimport { property } from \"lit/decorators/property.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { AsyncController } from \"../../shared/controllers/async-controller\";\nimport { getProductDetailsPage } 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 { makeApiKeyHeader } from \"../../utils/makeApiKeyHeader\";\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 { _info } from \"../../shared/fragments/info\";\n\ntype RequiredConfig = {\n  apiKey: string;\n  storeId: number;\n};\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 debug = false;\n\n  get configLang() {\n    return SUPPORTED_LANGUAGES[this.lang] || \"en\";\n  }\n\n  getProductDetailsPageData = async () => {\n    if (!enforceConfig<RequiredConfig>([\"apiKey\", \"storeId\"], this)) throw new MissingConfig();\n\n    const res = await getProductDetailsPage({\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      },\n    });\n    return res;\n  };\n\n  private productDetailsPageDataController = new AsyncController<typeof this.getProductDetailsPageData>(\n    this,\n    this.getProductDetailsPageData\n  );\n\n  async updated(changedProperties: Map<string, unknown>) {\n    const requireNewDataProps = [\"storeId\", \"baseUrl\", \"lang\", \"apiKey\"];\n    for (const prop of requireNewDataProps) {\n      if (changedProperties.has(prop)) {\n        await this.productDetailsPageDataController.exec();\n        break;\n      }\n    }\n  }\n\n  renderWidgetIcon() {\n    const imageUrl = this.cssVariables[IMAGE_URL_REMOTE_CONFIG_KEY];\n\n    return imageUrl\n      ? html`\n    <span class=\"icon-container\">\n      <img src=${imageUrl} alt=\"Widget Icon\"></img>\n    </span>\n    `\n      : html``;\n  }\n\n  render() {\n    const { data, loading } = this.productDetailsPageDataController;\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 class=\"root\">\n        ${this.renderWidgetIcon()}\n        <span class=\"info-container\">\n          <div class=\"title-block\">\n            <h3 class=\"title\">${localizeUserString(this.configLang, data.config?.web?.title)}</h3>\n          </div>\n          <div class=\"description-block\">\n            <span class=\"description\"> ${localizeUserString(this.configLang, data.config?.web?.description)}</span\n            >${this.renderDisclosureTooltip()}\n          </div>\n        </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      tooltip.open = false;\n    };\n    const ppgfDisclosure = this.productDetailsPageDataController.data?.ppgfDisclosure;\n    return ppgfDisclosure\n      ? html`<sl-tooltip class=\"ppgf-disclosure-tooltip\">\n          <div class=\"ppgf-disclosure-tooltip-content\" slot=\"content\">\n            <button class=\"ppgf-disclosure-close\" aria-label=\"Close tooltip\" @click=\"${onClickClose}\">\n              ${this.renderCloseTooltipIcon()}\n            </button>\n            <div class=\"ppgf-disclosure-tooltip-copy\">${unsafeHTML(ppgfDisclosure.copy)}</div>\n          </div>\n          <span class=\"ppgf-disclosure-tooltip-trigger\">\n            <div class=\"ppgf-disclosure-tooltip-trigger-mask d-lg-none\"></div>\n            ${_info()}\n          </span>\n        </sl-tooltip>`\n      : html``;\n  }\n\n  renderDisclosureTooltipHyperlink() {\n    const ppgfHyperlink = this.productDetailsPageDataController.data?.ppgfDisclosureHyperlink;\n    return ppgfHyperlink\n      ? html`<a class=\"ppgf-disclosure-hyperlink\" href=\"${ppgfHyperlink.url}\" target=\"_blank\">${ppgfHyperlink.copy}</a>`\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-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: \"4px\",\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    };\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        display: flex;\n        align-items: center;\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        ${useCustomBorder(\"--beam-ProductDetailsPage\")}\n      }\n      .icon-container {\n        width: var(--beam-ProductDetailsPage-imageWidth);\n        height: var(--beam-ProductDetailsPage-imageHeight);\n        flex-shrink: 0;\n      }\n      .icon-container > img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n      .info-container {\n        margin-left: var(--beam-ProductDetailsPage-InfoContainer-marginLeft);\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      .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      }\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        vertical-align: middle;\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","IMAGE_URL_REMOTE_CONFIG_KEY","BeamProductDetailsPage","LitElement","DEFAULT_BASE_URL","enforceConfig","getProductDetailsPage","makeApiKeyHeader","WIDGET_NAMES","AsyncController","SUPPORTED_LANGUAGES","changedProperties","requireNewDataProps","prop","imageUrl","data","loading","_errorMessage","localizeUserString","onClickClose","tooltip","ppgfDisclosure","unsafeHTML","ppgfHyperlink","defaults","defineCustomText","remoteConfig","config","_cssVariableMap","cssReset","cssResponsiveUtils","css","useCustomText","__decorateClass","property","defineCustomElement"],"mappings":"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"}

package/dist/components/redeem-transaction.d.ts

@@ -5,10 +5,10 @@ import * as lodash from 'lodash';
 import '../chunks/progress-bar-0VS_AmEf.esm.js';
 import '../chunks/promo-pill-label-3bA1z-la.esm.js';
 import './beam-partner-logos.js';
-import { b as TNumericId, c as TId } from '../chunks/types-CfbVJRfU.esm.js';
-import { T as TCart } from '../chunks/cart-contents-3-9fB-7m.esm.js';
+import { T as TNumericId, a as TId } from '../chunks/types-zbTZ8-KP.esm.js';
+import { T as TCart } from '../chunks/cart-contents-sUhfwLAz.esm.js';
 import { L as LANGUAGES } from '../chunks/types-aju0qrRe.esm.js';
-import '../chunks/openapi-spec--MzXvfCC.esm.js';
+import '../chunks/openapi-spec--WoGcZgR.esm.js';
 
 interface TransactionRequiredConfig {
     apiKey: string;
@@ -74,6 +74,7 @@ declare class BeamRedeemTransaction extends LitElement {
     static styles: lit.CSSResult[];
     private handleChooseClick;
     get shouldCollapse(): boolean;
+    private renderSubmitButton;
     protected render(): lit_html.TemplateResult<1> | "";
 }
 declare global {

package/dist/components/redeem-transaction.esm.js

@@ -1,19 +1,21 @@
-import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../chunks/lit-qtGbjGnK.esm.js";import{d as L}from"../chunks/lodash-P8OIs-at.esm.js";import{c as U,u as h,d as M,f as E,e as C,A as B,g as w,a as f,b as W,_ as y,i as m}from"../chunks/localize-F31ae3j6.esm.js";import{D as A,e as F,W as S,i as K,u as _,S as O}from"../chunks/routes-31m626dW.esm.js";import{p as j}from"../chunks/progress-bar-Sn2QspHy.esm.js";import{p as V}from"../chunks/promo-pill-label-j0A8qZ0c.esm.js";import{partnerLogosConfigDefaults as q}from"./beam-partner-logos.esm.js";import{_ as G}from"../chunks/loading-template-Av0IUyKF.esm.js";import{M as H,B as J}from"../chunks/beam-errors-P-Lu07Ce.esm.js";import{createScopedLocalStorage as Z}from"../utils/local-storage.esm.js";import{c as Q}from"../chunks/css-card-grid-7tObtoJx.esm.js";import{c as X}from"../chunks/events-Y8fYvSqM.esm.js";import"../utils/logger.esm.js";import"../chunks/vendor-jQ8cxMpw.esm.js";const Y=({height:i="1em",width:e="1em"}={})=>c`
-    <svg
-      style="${k({height:i,width:e,position:"relative",bottom:"0"})}"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 78.369 78.369"
-    >
-      <g>
-        <path
-          d="M78.049,19.015L29.458,67.606c-0.428,0.428-1.121,0.428-1.548,0L0.32,40.015c-0.427-0.426-0.427-1.119,0-1.547l6.704-6.704
-   c0.428-0.427,1.121-0.427,1.548,0l20.113,20.112l41.113-41.113c0.429-0.427,1.12-0.427,1.548,0l6.703,6.704
-   C78.477,17.894,78.477,18.586,78.049,19.015z"
-          style="fill: currentColor"
-        />
-      </g>
-    </svg>
-  `,u={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:i="1"}={})=>`select a nonprofit and ${i}% of your purchase will be donated.`,ctaMessage:({donationPercentage:i="1%"}={})=>`Select a nonprofit and ${i} of your purchase will be donated, at no extra cost.`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},fr:{beamAttribution:()=>"Optimis\xE9 par Beam",ctaTitle:()=>"Choisissez votre cause",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:i="1%"}={})=>`Choisissez un organisme \xE0 but non lucratif et ${i}% lui sera vers\xE9 en votre nom, sans frais suppl\xE9mentaires.`,submitButtonText:()=>"Confirmer",submitButtonTextCompleted:()=>"Confirm\xE9!",chooseButtonText:()=>"Choisissez"},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deinen Impact",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:i="1%"}={})=>`W\xE4hle eine der gemeinn\xFCtzigen Organisationen und spende ${i} deines Einkaufs ohne zus\xE4tzliche Kosten`,submitButtonText:()=>"Best\xE4tigen",submitButtonTextCompleted:()=>"Best\xE4tigt!",chooseButtonText:()=>"W\xE4hlen"},es:{ctaTitle:()=>"Elige tu contribuci\xF3n",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:i="1%"}={})=>`Elige una organizaci\xF3n sin fines de lucro y donaremos ${i} de tu compra sin coste adicional.`,beamAttribution:()=>"Ofrecido por Beam",submitButtonText:()=>"Confirmar",submitButtonTextCompleted:()=>"\xA1Confirmado!",chooseButtonText:()=>"Elige"},it:{ctaTitle:()=>"Scegli dove fare la differenza",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:i="1%"}={})=>`Seleziona un'organizzazione no-profit a cui devolvere l\u2019${i} del tuo acquisto, senza costi aggiuntivi`,beamAttribution:()=>"Gestito da Beam",submitButtonText:()=>"Confermare",submitButtonTextCompleted:()=>"Confermato!",chooseButtonText:()=>"Scegli"},pl:{beamAttribution:()=>"Wspierany przez Beam",ctaTitle:()=>"Wybierz inicjatyw\u0119, kt\xF3r\u0105 chcesz wesprze\u0107",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:i="1%"}={})=>`Wybierz organizacj\u0119, kt\xF3rej przeka\u017Cesz ${i} warto\u015Bci Twoich zakup\xF3w \u2013 bez \u017Cadnych dodatkowych koszt\xF3w!`,submitButtonText:()=>"Zatwierd\u017A",submitButtonTextCompleted:()=>"Zatwierdzono!",chooseButtonText:()=>"Wybierz"}};var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,s=(i,e,t,o)=>{for(var a=o>1?void 0:o?te(e,t):e,p=i.length-1,d;p>=0;p--)(d=i[p])&&(a=(o?d(e,t,a):d(a))||a);return o&&a&&ee(e,t,a),a};class r extends P{constructor(){super(...arguments),this.baseUrl=A,this.lang="en",this.debug=!1,this.isMobile=window.innerWidth<768,this.didUserExpandNonprofits=!1,this.shouldUseNewPromoUI=!1,this.getChainNonprofits=async()=>{if(E(["transactionId","subscriptionId"],this),!this.hasCorrectTransactionConfig&&!this.hasCorrectSubscriptionConfig)throw new H;const e=await F({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,postalCode:this.postalCode,countryCode:this.countryCode,cart:this.cart??void 0,widgetName:S.redeem_transaction,version:"1.0.0",lang:this.configLang}});return e.store?.id&&e.store.id!==this.storeId&&(this.storeId=e.store.id),this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:e}),e},this.updateNonprofitIdForRecord=async({selectedNonprofitId:e})=>this.transactionId?this.putTransaction({selectedNonprofitId:e}):this.subscriptionId?this.putSubscription({selectedNonprofitId:e}):null,this.putTransaction=async({selectedNonprofitId:e})=>(C(["apiKey","transactionId"],this),K({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},pathParams:{transactionId:Number(this.transactionId)},requestBody:{nonprofitId:e}})),this.putSubscription=async({selectedNonprofitId:e})=>(C(["apiKey","subscriptionId"],this),_({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:e}})),this.nonprofitListDataController=new B(this,this.getChainNonprofits),this.selectionDataController=new B(this,this.updateNonprofitIdForRecord),this.localStorage=Z(this),this.makeHandleSelect=(e,t,o)=>async a=>{if(!this.allowChange)return;const p=this.selectedNonprofitId;if(a instanceof KeyboardEvent){let d=null;switch(a.key){case"ArrowUp":case"ArrowLeft":t===0?d=o[o.length-1]:d=o[t-1],a.preventDefault();break;case"ArrowRight":case"ArrowDown":t===o.length-1?d=o[0]:d=o[t+1],a.preventDefault();break;case"Enter":case" ":a.preventDefault();break;default:return}if(d){const b=this.renderRoot.querySelector(`[data-value="${d.nonprofit.id}"]`);b!==null&&(b.tabIndex=0,b.focus());return}}if(a.currentTarget instanceof HTMLElement){if(p===e)return;this.selectedNonprofitId=e}},this.handleSubmit=async()=>{const{selectedNonprofitId:e}=this;if(!this.allowSubmit||e==null)return;await this.selectionDataController.exec({selectedNonprofitId:e}),this.shouldUseStoredSelection&&(this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString()));const t=this.nonprofitListDataController?.data?.nonprofits.find(o=>o.nonprofit.id===e);this.dispatchEvent(new X({selectedNonprofitId:e,nonprofitName:t?.nonprofit.name,source:S.redeem_transaction}))},this.evaluateBreakPoints=L(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return O[this.lang]||"en"}get hasCorrectTransactionConfig(){return w(["apiKey","transactionId"],this)}get hasCorrectSubscriptionConfig(){return w(["apiKey","subscriptionId"],this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(e){await this.restoreStateFromCache()}async updated(e){const t=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const o of t)if(e.has(o)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){C(["apiKey"],this),this.shouldUseStoredSelection&&(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||void 0);try{const{createdAt:e=0,data:t}=this.localStorage.getItemJson("chainNonprofits")||{},o=2*60*60*1e3;new Date(e).valueOf()+o>new Date().valueOf()&&(this.nonprofitListDataController.data=t,this.nonprofitListDataController.loading=!1)}catch{}}get allowChange(){return this.selectionDataController.data==null&&!this.selectionDataController.loading}get allowSubmit(){return!!(this.selectedNonprofitId&&this.allowChange)}get shouldUseStoredSelection(){return!this.subscriptionId}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...q,...j,"--beam-RedeemTransaction-maxWidth":"1000px","--beam-RedeemTransaction-submitButton-color":"#fff","--beam-RedeemTransaction-submitButton-hover-color":"#fff","--beam-RedeemTransaction-submitButton-disabled-color":"#fff","--beam-RedeemTransaction-submitButton-backgroundColor":"#333","--beam-RedeemTransaction-submitButton-hover-backgroundColor":"#222","--beam-RedeemTransaction-submitButton-disabled-backgroundColor":"#767676","--beam-RedeemTransaction-submitButton-borderColor":"#333","--beam-RedeemTransaction-submitButton-hover-borderColor":"#222","--beam-RedeemTransaction-submitButton-disabled-borderColor":"#767676","--beam-RedeemTransaction-submitButton-fontSize":"14px","--beam-RedeemTransaction-submitButton-fontWeight":"inherit","--beam-RedeemTransaction-submitButton-fontFamily":"inherit","--beam-RedeemTransaction-submitButton-textTransform":"none","--beam-RedeemTransaction-submitButton-borderRadius":"0px","--beam-RedeemTransaction-submitButton-padding":"15px 30px","--beam-RedeemTransaction-submitButton-position":"right","--beam-RedeemTransaction-submitButton-positionRight-width":"auto","--beam-RedeemTransaction-submitButton-positionBottom-width":"100%","--beam-RedeemTransaction-submitButton-positionBottom-marginTop":"10px","--beam-RedeemTransaction-checkmark-color":"transparent","--beam-RedeemTransaction-checkmark-selected-color":"#fff","--beam-RedeemTransaction-checkmark-hover-color":"#fff","--beam-RedeemTransaction-checkmark-backgroundColor":"transparent","--beam-RedeemTransaction-checkmark-selected-backgroundColor":"#333","--beam-RedeemTransaction-checkmark-hover-backgroundColor":"#d9d9d9","--beam-RedeemTransaction-checkmark-borderColor":"transparent","--beam-RedeemTransaction-checkmark-selected-borderColor":"#333","--beam-RedeemTransaction-checkmark-hover-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-minWidth":"250px","--beam-RedeemTransaction-options-columnCount":"2","--beam-RedeemTransaction-options-borderRadius":"0px","--beam-RedeemTransaction-options-borderWidth":"1px","--beam-RedeemTransaction-options-selected-borderWidth":"2px","--beam-RedeemTransaction-options-focus-borderWidth":"1px","--beam-RedeemTransaction-options-image-borderRadius":"0px","--beam-RedeemTransaction-options-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-selected-borderColor":"currentColor","--beam-RedeemTransaction-options-hover-borderColor":"#ccc","--beam-RedeemTransaction-options-backgroundColor":"transparent","--beam-RedeemTransaction-options-selected-backgroundColor":"transparent","--beam-RedeemTransaction-options-hover-backgroundColor":"#f1f1f1","--beam-RedeemTransaction-options-marginTop":"15px",...f("--beam-RedeemTransaction-title",{fontSize:"1.25em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-description",{marginTop:"0.5em"}),...f("--beam-RedeemTransaction-details-cause",{fontSize:"1em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-details-impactDescription",{fontSize:"0.85em",marginTop:"10px"}),"--beam-RedeemTransaction-details-nonprofitName-fontWeight":"bold","--beam-RedeemTransaction-details-nonprofitName-fontStyle":"inherit","--beam-RedeemTransaction-details-fundingProgress-marginTop":"10px",...f("--beam-RedeemTransaction-details-fundingProgressLabel",{fontSize:"0.85em"}),"--beam-RedeemTransaction-cardStyle":"'image'","--beam-RedeemTransaction-options-icon-padding":"0px","--beam-RedeemTransaction-options-collapseNonprofits-mobile":"false","--beam-RedeemTransaction-options-collapseNonprofits-desktop":"false",...V},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},o={...e,...t};return Object.assign(Object.create({toCSS(){return W(this)}}),o)}handleChooseClick(){this.didUserExpandNonprofits=!0}get shouldCollapse(){const e=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-mobile"]==="true",t=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-desktop"]==="true";return this.isMobile&&e||!this.isMobile&&t}render(){const{selectedNonprofitId:e}=this,{data:t,loading:o}=this.nonprofitListDataController;if(o&&!t)return G();if(this.nonprofitListDataController.error)return this.debug?y({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return y({error:this.selectionDataController.error});if(t==null)return this.debug?y({error:new J("No data")}):"";const a=t?.nonprofits||[],p=a.find(n=>n.nonprofit.id===e)||null,d=this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'icon'",b=this.cssVariables["--beam-RedeemTransaction-submitButton-position"],R=this.isMobile&&b==="bottom"?"positionBottom":"positionRight";this.shouldUseNewPromoUI=!!(t?.config?.web?.promo&&!this.subscriptionId);const I=a.some(n=>!n.promo||!n.promo.isActive);return c`
+import{f as I,g as l,t as x,h as N,y as s,q as v,u as P,k as D,m as U}from"../chunks/lit-3QHn3fwl.esm.js";import{d as z}from"../chunks/lodash-P8OIs-at.esm.js";import{u as h,A as k,d as f,a as M,_ as C,i as m}from"../chunks/localize-IRs8JglT.esm.js";import{D as L,f as E,W as B,h as W,u as A,S as F}from"../chunks/routes-zzEfDMIn.esm.js";import{p as K}from"../chunks/progress-bar-HVG_n8_6.esm.js";import{p as _}from"../chunks/promo-pill-label-3Xtr5ALT.esm.js";import{partnerLogosConfigDefaults as O}from"./beam-partner-logos.esm.js";import{c as j,d as V,a as q,e as y,b as w}from"../chunks/enforce-config-HksNiOMu.esm.js";import{_ as G}from"../chunks/loading-template-mLjOGXMj.esm.js";import{M as H,B as J}from"../chunks/beam-errors-P-Lu07Ce.esm.js";import{createScopedLocalStorage as Z}from"../utils/local-storage.esm.js";import{c as Q}from"../chunks/css-card-grid-r6wxRbPV.esm.js";import{_ as X}from"../chunks/checkbox-P2JYPqxl.esm.js";import{c as Y}from"../chunks/events-_4nImo3u.esm.js";import"../utils/logger.esm.js";import"../chunks/vendor--f7lkyBk.esm.js";const u={en:{beamAttribution:()=>"Powered by Beam",ctaTitle:()=>"Choose your impact",ctaPromoPrefixMessage:()=>"At no extra cost,",ctaPromoMessage:({donationPercentage:n="1"}={})=>`select a nonprofit and ${n}% of your purchase will be donated.`,ctaMessage:({donationPercentage:n="1%"}={})=>`Select a nonprofit and ${n} of your purchase will be donated, at no extra cost.`,submitButtonText:()=>"Confirm",submitButtonTextCompleted:()=>"Confirmed!",chooseButtonText:()=>"Choose"},fr:{beamAttribution:()=>"Optimis\xE9 par Beam",ctaTitle:()=>"Choisissez votre cause",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1%"}={})=>`Choisissez un organisme \xE0 but non lucratif et ${n}% lui sera vers\xE9 en votre nom, sans frais suppl\xE9mentaires.`,submitButtonText:()=>"Confirmer",submitButtonTextCompleted:()=>"Confirm\xE9!",chooseButtonText:()=>"Choisissez"},de:{beamAttribution:()=>"Unterst\xFCtzt von Beam",ctaTitle:()=>"W\xE4hle deinen Impact",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1%"}={})=>`W\xE4hle eine der gemeinn\xFCtzigen Organisationen und spende ${n} deines Einkaufs ohne zus\xE4tzliche Kosten`,submitButtonText:()=>"Best\xE4tigen",submitButtonTextCompleted:()=>"Best\xE4tigt!",chooseButtonText:()=>"W\xE4hlen"},es:{ctaTitle:()=>"Elige tu contribuci\xF3n",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1%"}={})=>`Elige una organizaci\xF3n sin fines de lucro y donaremos ${n} de tu compra sin coste adicional.`,beamAttribution:()=>"Ofrecido por Beam",submitButtonText:()=>"Confirmar",submitButtonTextCompleted:()=>"\xA1Confirmado!",chooseButtonText:()=>"Elige"},it:{ctaTitle:()=>"Scegli dove fare la differenza",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1%"}={})=>`Seleziona un'organizzazione no-profit a cui devolvere l\u2019${n} del tuo acquisto, senza costi aggiuntivi`,beamAttribution:()=>"Gestito da Beam",submitButtonText:()=>"Confermare",submitButtonTextCompleted:()=>"Confermato!",chooseButtonText:()=>"Scegli"},pl:{beamAttribution:()=>"Wspierany przez Beam",ctaTitle:()=>"Wybierz inicjatyw\u0119, kt\xF3r\u0105 chcesz wesprze\u0107",ctaPromoPrefixMessage:()=>"",ctaPromoMessage:()=>"",ctaMessage:({donationPercentage:n="1%"}={})=>`Wybierz organizacj\u0119, kt\xF3rej przeka\u017Cesz ${n} warto\u015Bci Twoich zakup\xF3w \u2013 bez \u017Cadnych dodatkowych koszt\xF3w!`,submitButtonText:()=>"Zatwierd\u017A",submitButtonTextCompleted:()=>"Zatwierdzono!",chooseButtonText:()=>"Wybierz"}};var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,d=(n,e,t,o)=>{for(var i=o>1?void 0:o?te(e,t):e,p=n.length-1,c;p>=0;p--)(c=n[p])&&(i=(o?c(e,t,i):c(i))||i);return o&&i&&ee(e,t,i),i};class r extends N{constructor(){super(...arguments),this.baseUrl=L,this.lang="en",this.debug=!1,this.isMobile=window.innerWidth<768,this.didUserExpandNonprofits=!1,this.shouldUseNewPromoUI=!1,this.getChainNonprofits=async()=>{if(q(["transactionId","subscriptionId"],this),!this.hasCorrectTransactionConfig&&!this.hasCorrectSubscriptionConfig)throw new H;const e=await E({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{storeId:this.storeId,postalCode:this.postalCode,countryCode:this.countryCode,cart:this.cart??void 0,widgetName:B.redeem_transaction,version:"1.0.0",lang:this.configLang}});return e.store?.id&&e.store.id!==this.storeId&&(this.storeId=e.store.id),this.localStorage.setItemJson("chainNonprofits",{createdAt:new Date,data:e}),e},this.updateNonprofitIdForRecord=async({selectedNonprofitId:e})=>this.transactionId?this.putTransaction({selectedNonprofitId:e}):this.subscriptionId?this.putSubscription({selectedNonprofitId:e}):null,this.putTransaction=async({selectedNonprofitId:e})=>(y(["apiKey","transactionId"],this),W({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},pathParams:{transactionId:Number(this.transactionId)},requestBody:{nonprofitId:e}})),this.putSubscription=async({selectedNonprofitId:e})=>(y(["apiKey","subscriptionId"],this),A({baseUrl:this.baseUrl,headers:{authorization:`Api-Key ${this.apiKey}`},requestBody:{remoteSubscriptionId:this.subscriptionId,nonprofitId:e}})),this.nonprofitListDataController=new k(this,this.getChainNonprofits),this.selectionDataController=new k(this,this.updateNonprofitIdForRecord),this.localStorage=Z(this),this.makeHandleSelect=(e,t,o)=>async i=>{if(!this.allowChange)return;const p=this.selectedNonprofitId;if(i instanceof KeyboardEvent){let c=null;switch(i.key){case"ArrowUp":case"ArrowLeft":t===0?c=o[o.length-1]:c=o[t-1],i.preventDefault();break;case"ArrowRight":case"ArrowDown":t===o.length-1?c=o[0]:c=o[t+1],i.preventDefault();break;case"Enter":case" ":i.preventDefault();break;default:return}if(c){const b=this.renderRoot.querySelector(`[data-value="${c.nonprofit.id}"]`);b!==null&&(b.tabIndex=0,b.focus());return}}if(i.currentTarget instanceof HTMLElement){if(p===e)return;this.selectedNonprofitId=e}},this.handleSubmit=async()=>{const{selectedNonprofitId:e}=this;if(!this.allowSubmit||e==null)return;await this.selectionDataController.exec({selectedNonprofitId:e}),this.shouldUseStoredSelection&&(this.localStorage.setItem("nonprofit",e),this.localStorage.setItem("nonprofit_selected_at",new Date().toISOString()));const t=this.nonprofitListDataController?.data?.nonprofits.find(o=>o.nonprofit.id===e);this.dispatchEvent(new Y({selectedNonprofitId:e,nonprofitName:t?.nonprofit.name,source:B.redeem_transaction}))},this.evaluateBreakPoints=z(()=>{this.isMobile=window.innerWidth<768},50,{maxWait:50,leading:!0})}get configLang(){return F[this.lang]||"en"}get hasCorrectTransactionConfig(){return w(["apiKey","transactionId"],this)}get hasCorrectSubscriptionConfig(){return w(["apiKey","subscriptionId"],this)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.evaluateBreakPoints)}async firstUpdated(e){await this.restoreStateFromCache()}async updated(e){const t=["baseUrl","storeId","apiKey","countryCode","postalCode","lang"];for(const o of t)if(e.has(o)){await this.nonprofitListDataController.exec();break}}disconnectedCallback(){super.disconnectedCallback()}restoreStateFromCache(){y(["apiKey"],this),this.shouldUseStoredSelection&&(this.selectedNonprofitId=parseInt(this.localStorage.getItem("nonprofit")||"")||void 0);try{const{createdAt:e=0,data:t}=this.localStorage.getItemJson("chainNonprofits")||{},o=2*60*60*1e3;new Date(e).valueOf()+o>new Date().valueOf()&&(this.nonprofitListDataController.data=t,this.nonprofitListDataController.loading=!1)}catch{}}get allowChange(){return this.selectionDataController.data==null&&!this.selectionDataController.loading}get allowSubmit(){return!!(this.selectedNonprofitId&&this.allowChange)}get shouldUseStoredSelection(){return!this.subscriptionId}get cssVariables(){const e={"--beam-fontFamily":"inherit","--beam-fontStyle":"inherit","--beam-fontSize":"inherit","--beam-textColor":"inherit","--beam-backgroundColor":"inherit",...O,...K,"--beam-RedeemTransaction-maxWidth":"1000px","--beam-RedeemTransaction-submitButton-color":"#fff","--beam-RedeemTransaction-submitButton-hover-color":"#fff","--beam-RedeemTransaction-submitButton-disabled-color":"#fff","--beam-RedeemTransaction-submitButton-backgroundColor":"#333","--beam-RedeemTransaction-submitButton-hover-backgroundColor":"#222","--beam-RedeemTransaction-submitButton-disabled-backgroundColor":"#767676","--beam-RedeemTransaction-submitButton-borderColor":"#333","--beam-RedeemTransaction-submitButton-hover-borderColor":"#222","--beam-RedeemTransaction-submitButton-disabled-borderColor":"#767676","--beam-RedeemTransaction-submitButton-fontSize":"14px","--beam-RedeemTransaction-submitButton-fontWeight":"inherit","--beam-RedeemTransaction-submitButton-fontFamily":"inherit","--beam-RedeemTransaction-submitButton-textTransform":"none","--beam-RedeemTransaction-submitButton-borderRadius":"0px","--beam-RedeemTransaction-submitButton-padding":"15px 30px","--beam-RedeemTransaction-submitButton-position":"right","--beam-RedeemTransaction-submitButton-positionRight-width":"auto","--beam-RedeemTransaction-submitButton-positionBottom-width":"100%","--beam-RedeemTransaction-submitButton-positionBottom-marginTop":"10px","--beam-RedeemTransaction-checkmark-color":"transparent","--beam-RedeemTransaction-checkmark-selected-color":"#fff","--beam-RedeemTransaction-checkmark-hover-color":"#fff","--beam-RedeemTransaction-checkmark-backgroundColor":"transparent","--beam-RedeemTransaction-checkmark-selected-backgroundColor":"#333","--beam-RedeemTransaction-checkmark-hover-backgroundColor":"#d9d9d9","--beam-RedeemTransaction-checkmark-borderColor":"transparent","--beam-RedeemTransaction-checkmark-selected-borderColor":"#333","--beam-RedeemTransaction-checkmark-hover-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-minWidth":"250px","--beam-RedeemTransaction-options-columnCount":"2","--beam-RedeemTransaction-options-borderRadius":"0px","--beam-RedeemTransaction-options-borderWidth":"1px","--beam-RedeemTransaction-options-selected-borderWidth":"2px","--beam-RedeemTransaction-options-focus-borderWidth":"1px","--beam-RedeemTransaction-options-image-borderRadius":"0px","--beam-RedeemTransaction-options-borderColor":"#d9d9d9","--beam-RedeemTransaction-options-selected-borderColor":"currentColor","--beam-RedeemTransaction-options-hover-borderColor":"#ccc","--beam-RedeemTransaction-options-backgroundColor":"transparent","--beam-RedeemTransaction-options-selected-backgroundColor":"transparent","--beam-RedeemTransaction-options-hover-backgroundColor":"#f1f1f1","--beam-RedeemTransaction-options-marginTop":"15px",...f("--beam-RedeemTransaction-title",{fontSize:"1.25em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-description",{marginTop:"0.5em"}),...f("--beam-RedeemTransaction-details-cause",{fontSize:"1em",fontWeight:"bold"}),...f("--beam-RedeemTransaction-details-impactDescription",{fontSize:"0.85em",marginTop:"10px"}),"--beam-RedeemTransaction-details-nonprofitName-fontWeight":"bold","--beam-RedeemTransaction-details-nonprofitName-fontStyle":"inherit","--beam-RedeemTransaction-details-fundingProgress-marginTop":"10px",...f("--beam-RedeemTransaction-details-fundingProgressLabel",{fontSize:"0.85em"}),"--beam-RedeemTransaction-cardStyle":"'image'","--beam-RedeemTransaction-options-icon-padding":"0px","--beam-RedeemTransaction-options-collapseNonprofits-mobile":"false","--beam-RedeemTransaction-options-collapseNonprofits-desktop":"false",..._},t=this.nonprofitListDataController?.data?.config?.web?.theme||{},o={...e,...t};return Object.assign(Object.create({toCSS(){return M(this)}}),o)}handleChooseClick(){this.didUserExpandNonprofits=!0}get shouldCollapse(){const e=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-mobile"]==="true",t=this.cssVariables["--beam-RedeemTransaction-options-collapseNonprofits-desktop"]==="true";return this.isMobile&&e||!this.isMobile&&t}renderSubmitButton(e){return s`
+      ${this.didUserExpandNonprofits||!this.shouldCollapse?s` <button
+            type="button"
+            ?aria-disabled=${!this.allowSubmit}
+            @click="${this.handleSubmit}"
+            class="${v({isDisabled:!this.allowSubmit,[e]:!0,submitButton:!0})}"
+            part="submitButton"
+          >
+            ${this.selectionDataController.data!==null?u[this.configLang].submitButtonTextCompleted():u[this.configLang].submitButtonText()}
+          </button>`:s` <button
+            type="button"
+            @click="${this.handleChooseClick}"
+            class="submitButton ${e}"
+            part="submitButton"
+          >
+            ${u[this.configLang].chooseButtonText()}
+          </button>`}
+    `}render(){const{selectedNonprofitId:e}=this,{data:t,loading:o}=this.nonprofitListDataController;if(o&&!t)return G();if(this.nonprofitListDataController.error)return this.debug?C({error:this.nonprofitListDataController.error}):"";if(this.selectionDataController.error&&this.debug)return C({error:this.selectionDataController.error});if(t==null)return this.debug?C({error:new J("No data")}):"";const i=t?.nonprofits||[],p=i.find(a=>a.nonprofit.id===e)||null,c=this.cssVariables["--beam-RedeemTransaction-cardStyle"]==="'icon'",b=this.cssVariables["--beam-RedeemTransaction-submitButton-position"],R=this.isMobile&&this.shouldUseNewPromoUI||this.isMobile&&b==="bottom"?"positionBottom":"positionRight";this.shouldUseNewPromoUI=!!(t?.config?.web?.promo&&!this.subscriptionId);const S=i.some(a=>!a.promo||!a.promo.isActive);return s`
       <style>
         :host {
           ${this.cssVariables.toCSS()}
@@ -30,22 +32,22 @@ import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../ch
           aria-labelledby="beam-RedeemTransaction-title"
           ?aria-disabled=${!this.allowChange}
         >
-          ${D(a,n=>n.nonprofit.id,(n,g)=>{const T=e===n.nonprofit.id,$=T||p==null&&g===0;return c`
+          ${P(i,a=>a.nonprofit.id,(a,g)=>{const T=e===a.nonprofit.id,$=T||p==null&&g===0;return s`
                 <div
                   class="option ${v({isSelected:T,isDisabled:!this.allowChange})}"
                   part="option"
                   role="radio"
                   tabindex="${$?0:-1}"
-                  data-value=${n.nonprofit.id}
+                  data-value=${a.nonprofit.id}
                   ?aria-checked=${T}
-                  @click=${this.makeHandleSelect(n.nonprofit.id,g,a)}
-                  @keydown=${this.makeHandleSelect(n.nonprofit.id,g,a)}
-                  aria-label="${m(this.configLang,n.nonprofit.cause||"")}"
-                  style="${k({display:"flex",gap:"15px",padding:"10px"})}"
+                  @click=${this.makeHandleSelect(a.nonprofit.id,g,i)}
+                  @keydown=${this.makeHandleSelect(a.nonprofit.id,g,i)}
+                  aria-label="${m(this.configLang,a.nonprofit.cause||"")}"
+                  style="${D({display:"flex",gap:"15px",padding:"10px"})}"
                 >
-                  ${d?c` <div style="height: 100%; flex: 1; flex-direction: column;">
+                  ${c?s` <div style="height: 100%; flex: 1; flex-direction: column;">
                         <img
-                          src="${n.nonprofit.causeIconUrl}"
+                          src="${a.nonprofit.causeIconUrl}"
                           alt=""
                           role="presentation"
                           style="
@@ -57,9 +59,9 @@ import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../ch
                             border-radius: var(--beam-RedeemTransaction-options-image-borderRadius, 0);
                           "
                         />
-                      </div>`:c` <div style="height: 100%; flex: 1 0 33%; display: flex; flex-direction: column;">
+                      </div>`:s` <div style="height: 100%; flex: 1 0 33%; display: flex; flex-direction: column;">
                         <img
-                          src="${n.imageUrl}"
+                          src="${a.imageUrl}"
                           alt=""
                           role="presentation"
                           style="
@@ -103,31 +105,31 @@ import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../ch
                             justify-content: center;
                           "
                       >
-                        <span style="line-height: 0;"> ${Y({height:"10px",width:"10px"})} </span>
+                        <span style="line-height: 0;"> ${X({height:"10px",width:"10px"})} </span>
                       </span>
-                      ${m(this.configLang,n.nonprofit.cause||"")}
+                      ${m(this.configLang,a.nonprofit.cause||"")}
                     </div>
                     <p class="details-impactDescription" style="flex: 1 1;">
-                      ${z(m(this.configLang,n.impact.description||""))}
+                      ${U(m(this.configLang,a.impact.description||""))}
                     </p>
                     <div class="details-promo-pill-container" style="margin-top: 5px">
-                      ${n.promo?.isActive&&this.shouldUseNewPromoUI&&I?c`<beam-promo-info-pill
+                      ${a.promo?.isActive&&this.shouldUseNewPromoUI&&S?s`<beam-promo-info-pill
                             .promo=${t?.config?.web?.promo}
                             shortVersion
-                          ></beam-promo-info-pill>`:c``}
+                          ></beam-promo-info-pill>`:s``}
                     </div>
                     <div
                       style="display: flex; margin-top: var(--beam-RedeemTransaction-details-fundingProgress-marginTop); align-items: center;"
                     >
                       <beam-progress-bar
-                        value="${n.impact.goalProgressPercentage}"
+                        value="${a.impact.goalProgressPercentage}"
                         style="flex: 1 0;"
                       ></beam-progress-bar>
                       <span
                         class="details-fundingProgressLabel"
                         style="${h("--beam-RedeemTransaction-details-fundingProgressLabel")} white-space: nowrap; text-align: right; flex: 0 1; margin-left: 15px;"
                       >
-                        ${m(this.configLang,n.impact.goalProgressText)}
+                        ${m(this.configLang,a.impact.goalProgressText)}
                       </span>
                     </div>
                   </div>
@@ -152,47 +154,34 @@ import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../ch
               >
                 ${m(this.configLang,t?.config?.web?.title)||u[this.configLang].ctaTitle()}
               </h3>
-              ${this.shouldUseNewPromoUI?c`<beam-promo-info-pill
+              ${this.shouldUseNewPromoUI?s`<beam-promo-info-pill
                     .promo=${t?.config?.web?.promo}
                     style="${this.isMobile&&"order: -1; margin-bottom:10px;"}"
-                  ></beam-promo-info-pill>`:c``}
+                  ></beam-promo-info-pill>`:s``}
             </div>
             <p class="description" part="description" style="${h("--beam-RedeemTransaction-description")}">
-              ${this.shouldUseNewPromoUI?c`<span style="font-weight:bold">
+              ${this.shouldUseNewPromoUI?s`<span style="font-weight:bold">
                       ${m(this.configLang,t?.config?.web?.promoDescriptionPrefix||"")||u[this.configLang].ctaPromoPrefixMessage()}
                     </span>
                     <span>
                       ${m(this.configLang,t?.config?.web?.promoDescription||"")||u[this.configLang].ctaPromoMessage()}
-                    </span>`:c`<span
+                    </span>`:s`<span
                     >${m(this.configLang,t?.config?.web?.description||"")||u[this.configLang].ctaMessage()}
                   </span>`}
             </p>
           </div>
-          ${this.didUserExpandNonprofits||!this.shouldCollapse?c`<button
-                type="button"
-                ?aria-disabled=${!this.allowSubmit}
-                @click="${this.handleSubmit}"
-                class="${v({isDisabled:!this.allowSubmit,[R]:!0,submitButton:!0})}"
-                part="submitButton"
-              >
-                ${this.selectionDataController.data!==null?u[this.configLang].submitButtonTextCompleted():u[this.configLang].submitButtonText()}
-              </button>`:c`<button
-                type="button"
-                @click="${this.handleChooseClick}"
-                class="submitButton ${R}"
-                part="submitButton"
-              >
-                ${u[this.configLang].chooseButtonText()}
-              </button>`}
+          ${!this.isMobile&&this.shouldUseNewPromoUI||!this.shouldUseNewPromoUI?this.renderSubmitButton(R):null}
         </div>
 
+        ${this.isMobile&&this.shouldUseNewPromoUI?s` <div style="order: 4;">${this.renderSubmitButton(R)}</div> `:null}
+
         <beam-partner-logos
           partnerName="${t.chain.name}"
           partnerLogoUrl="${t.chain.logoUrl}"
           style="order: 1"
         ></beam-partner-logos>
       </div>
-    `}}r.tagName="beam-redeem-transaction",r.styles=[U,N`
+    `}}r.tagName="beam-redeem-transaction",r.styles=[j,I`
       :host {
         display: block;
         max-width: var(--beam-RedeemTransaction-maxWidth, 1000px);
@@ -323,5 +312,5 @@ import{y as c,m as k,f as N,g as l,t as x,h as P,q as v,p as D,k as z}from"../ch
         font-weight: var(--beam-RedeemTransaction-details-nonprofitName-fontWeight, bold);
         font-style: var(--beam-RedeemTransaction-details-nonprofitName-fontStyle, inherit);
       }
-    `,Q({gap:"20px",itemMinWidth:"var(--beam-RedeemTransaction-options-minWidth, 250px)",columnCount:"var(--beam-RedeemTransaction-options-columnCount, 2)"})],s([l({type:String})],r.prototype,"baseUrl",2),s([l({type:String})],r.prototype,"apiKey",2),s([l({type:Number})],r.prototype,"transactionId",2),s([l({type:String})],r.prototype,"subscriptionId",2),s([l({type:Number})],r.prototype,"storeId",2),s([l({type:String})],r.prototype,"countryCode",2),s([l({type:String})],r.prototype,"postalCode",2),s([l({type:Object})],r.prototype,"cart",2),s([l({type:Number,reflect:!0})],r.prototype,"selectedNonprofitId",2),s([l({type:String})],r.prototype,"lang",2),s([l({type:Boolean})],r.prototype,"debug",2),s([x()],r.prototype,"isMobile",2),s([x()],r.prototype,"didUserExpandNonprofits",2),s([x()],r.prototype,"shouldUseNewPromoUI",2),M(r);export{r as BeamRedeemTransaction};
+    `,Q({gap:"20px",itemMinWidth:"var(--beam-RedeemTransaction-options-minWidth, 250px)",columnCount:"var(--beam-RedeemTransaction-options-columnCount, 2)"})],d([l({type:String})],r.prototype,"baseUrl",2),d([l({type:String})],r.prototype,"apiKey",2),d([l({type:Number})],r.prototype,"transactionId",2),d([l({type:String})],r.prototype,"subscriptionId",2),d([l({type:Number})],r.prototype,"storeId",2),d([l({type:String})],r.prototype,"countryCode",2),d([l({type:String})],r.prototype,"postalCode",2),d([l({type:Object})],r.prototype,"cart",2),d([l({type:Number,reflect:!0})],r.prototype,"selectedNonprofitId",2),d([l({type:String})],r.prototype,"lang",2),d([l({type:Boolean})],r.prototype,"debug",2),d([x()],r.prototype,"isMobile",2),d([x()],r.prototype,"didUserExpandNonprofits",2),d([x()],r.prototype,"shouldUseNewPromoUI",2),V(r);export{r as BeamRedeemTransaction};
 //# sourceMappingURL=redeem-transaction.esm.js.map