diff --git a/src/funding/common.jsx b/src/funding/common.jsx index 133c9de70d..772b4bd620 100644 --- a/src/funding/common.jsx +++ b/src/funding/common.jsx @@ -150,6 +150,8 @@ export type FundingSourceConfig = {| | (({| content: ?ContentType, fundingEligibility: ?FundingEligibilityType, + label?: string, + period?: number, |}) => string), showWalletMenu: ({| instrument: WalletInstrument, diff --git a/src/funding/paypal/config.jsx b/src/funding/paypal/config.jsx index 6763dfed15..fdaacd2a34 100644 --- a/src/funding/paypal/config.jsx +++ b/src/funding/paypal/config.jsx @@ -4,7 +4,12 @@ import { LOGO_COLOR } from "@paypal/sdk-logos/src"; import { FUNDING_BRAND_LABEL } from "@paypal/sdk-constants/src"; -import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_FLOW } from "../../constants"; +import { + BUTTON_COLOR, + BUTTON_LAYOUT, + BUTTON_FLOW, + BUTTON_LABEL, +} from "../../constants"; import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common"; import { Logo, Label, WalletLabel, Tag } from "./template"; @@ -38,8 +43,22 @@ export function getPayPalConfig(): FundingSourceConfig { [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE, }, - labelText: `${FUNDING_BRAND_LABEL.PAYPAL}`, - + labelText: ({ content, label, period }) => { + let text = `${FUNDING_BRAND_LABEL.PAYPAL}`; + if (content && label === BUTTON_LABEL.INSTALLMENT) { + if (period) { + text = content["label.installment.withPeriod"].replace( + "{period}", + String(period) + ); + } else { + text = content["label.installment.withoutPeriod"]; + } + } else if (content && label) { + text = content[`label.${label}`]; + } + return text; + }, Logo, Label, WalletLabel, diff --git a/src/types.js b/src/types.js index 8a73a346ee..192e61e924 100644 --- a/src/types.js +++ b/src/types.js @@ -48,6 +48,12 @@ export type ContentType = {| flex: string, payPalBalance: string, moreOptions: string, + "label.paypal": string, + "label.checkout": string, + "label.buynow": string, + "label.pay": string, + "label.installment.withPeriod": string, + "label.installment.withoutPeriod": string, |}; export type Experiment = {| diff --git a/src/ui/buttons/button.jsx b/src/ui/buttons/button.jsx index 389c020f93..a1c4bd30c4 100644 --- a/src/ui/buttons/button.jsx +++ b/src/ui/buttons/button.jsx @@ -144,7 +144,12 @@ export function Button({ function getAriaLabel(): string { let labelText = typeof fundingConfig.labelText === "function" - ? fundingConfig.labelText({ content, fundingEligibility }) + ? fundingConfig.labelText({ + content, + fundingEligibility, + label, + period, + }) : fundingConfig.labelText || fundingSource; if (!showPayLabel && instrument?.vendor && instrument.label) { diff --git a/test/content.js b/test/content.js index 568fa15ed8..94f78958db 100644 --- a/test/content.js +++ b/test/content.js @@ -17,4 +17,10 @@ export const testContent = { balance: "Balance", payPalBalance: "PayPal balance", moreOptions: "More options", + "label.checkout": "Checkout", + "label.paypal": "PayPal", + "label.buynow": "Buy Now", + "label.pay": "Pay with PayPal", + "label.installment.withPeriod": "Pay up to {period}x without interest", + "label.installment.withoutPeriod": "Interest free payments", }; diff --git a/test/integration/tests/button/style.js b/test/integration/tests/button/style.js index 58c71453bf..546986fe99 100644 --- a/test/integration/tests/button/style.js +++ b/test/integration/tests/button/style.js @@ -135,3 +135,52 @@ describe("paypal button color", () => { .render("#testContainer"); }); }); + +describe("paypal button aria-label", () => { + it("uses style.label and style.period", () => { + window.paypal + .Buttons({ + content: { + "label.installment.withPeriod": + "Pay up to {period}x without interest", + }, + style: { + label: "installment", + period: 3, + }, + }) + .render("#testContainer") + .then(() => { + assert.ok( + getElementRecursive("[aria-label='Pay up to 3x without interest']") + ); + }); + }); + it("handles style.label == 'installment' without style.period", () => { + window.paypal + .Buttons({ + content: { + "label.installment.withoutPeriod": "Interest free payments", + }, + style: { + label: "installment", + }, + }) + .render("#testContainer") + .then(() => { + assert.ok(getElementRecursive("[aria-label='Interest free payments']")); + }); + }); + it("falls back to the funding source if content is unavailable", () => { + window.paypal + .Buttons({ + style: { + label: "buynow", + }, + }) + .render("#testContainer") + .then(() => { + assert.ok(getElementRecursive("[aria-label='PayPal']")); + }); + }); +}); diff --git a/test/percy/content.js b/test/percy/content.js index bd361f07c6..657e1380db 100644 --- a/test/percy/content.js +++ b/test/percy/content.js @@ -14,4 +14,10 @@ export const testContent = { credit: "Credit", balance: "Balance", payPalBalance: "PayPal balance", + "label.checkout": "Checkout", + "label.paypal": "PayPal", + "label.buynow": "Buy Now", + "label.pay": "Pay with PayPal", + "label.installment.withPeriod": "Pay up to {period}x without interest", + "label.installment.withoutPeriod": "Interest free payments", };