From eb42400128d0c7fb172ee4815e11cedce7824b8d Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Tue, 2 Sep 2025 20:19:08 -0700 Subject: [PATCH 1/9] Updated card button for redesign --- src/funding/card/config.jsx | 25 +++++++++++++++++++++---- src/ui/buttons/props.js | 2 +- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/funding/card/config.jsx b/src/funding/card/config.jsx index f91e9d9e8..1ebc66b3c 100644 --- a/src/funding/card/config.jsx +++ b/src/funding/card/config.jsx @@ -6,6 +6,8 @@ import { CARD, COUNTRY, COMPONENTS, FUNDING } from "@paypal/sdk-constants/src"; import { GlyphCardExternalImage, GlyphCardInlineSVG, + GlyphCardRebrandExternalImage, + GlyphCardRebrandInlineSVG, } from "@paypal/sdk-logos/src"; import { @@ -129,7 +131,12 @@ export function getCardConfig(): FundingSourceConfig { vendors, - colors: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE], + colors: [ + BUTTON_COLOR.BLACK, + BUTTON_COLOR.WHITE, + BUTTON_COLOR.REBRAND_WHITE, + BUTTON_COLOR.REBRAND_BLACK, + ], secondaryColors: { ...DEFAULT_FUNDING_CONFIG.secondaryColors, @@ -138,6 +145,8 @@ export function getCardConfig(): FundingSourceConfig { logoColors: { [BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK, + [BUTTON_COLOR.REBRAND_WHITE]: BUTTON_COLOR.BLACK, + [BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.WHITE, [DEFAULT]: BUTTON_COLOR.WHITE, }, @@ -148,11 +157,19 @@ export function getCardConfig(): FundingSourceConfig { return FUNDING.CARD; }, - Logo: ({ logoColor }) => { + Logo: ({ logoColor, shouldApplyRebrandedStyles }) => { + if (!shouldApplyRebrandedStyles) { + return __WEB__ ? ( + + ) : ( + + ); + } + return __WEB__ ? ( - + ) : ( - + ); }, diff --git a/src/ui/buttons/props.js b/src/ui/buttons/props.js index 33c626b10..050a6ba31 100644 --- a/src/ui/buttons/props.js +++ b/src/ui/buttons/props.js @@ -753,7 +753,7 @@ export function hasInvalidScriptOptionsForFullRedesign({ }: {| fundingSource?: ?$Values, |}): boolean { - const validFundingSourcesForRedesign = [FUNDING.PAYPAL]; + const validFundingSourcesForRedesign = [FUNDING.PAYPAL, FUNDING.CARD]; if (validFundingSourcesForRedesign.includes(fundingSource)) { return false; From 28b3faddccda092b9b724e335f48d8d82a528125 Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Wed, 3 Sep 2025 17:36:44 -0700 Subject: [PATCH 2/9] Removed flex-shrink property from button label text --- src/ui/buttons/styles/button.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/buttons/styles/button.js b/src/ui/buttons/styles/button.js index 36b9a0a46..3d389d546 100644 --- a/src/ui/buttons/styles/button.js +++ b/src/ui/buttons/styles/button.js @@ -189,7 +189,6 @@ export const buttonRebrandStyle = ` display: flex; align-items: center; line-height: 1.1; - flex-shrink: 1; min-width: 0; } From 3693c6e989cb5b19997e693449ac00bd36b2738c Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Wed, 3 Sep 2025 18:21:06 -0700 Subject: [PATCH 3/9] Updated valid redesigned funding sources on test --- src/ui/buttons/props.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/ui/buttons/props.test.js b/src/ui/buttons/props.test.js index 0069254ea..a47fed541 100644 --- a/src/ui/buttons/props.test.js +++ b/src/ui/buttons/props.test.js @@ -129,9 +129,8 @@ describe("determineRandomButtonColor", () => { }); describe("hasInvalidScriptOptionsForFullRedesign", () => { - const validFundingSources = [FUNDING.PAYPAL]; + const validFundingSources = [FUNDING.PAYPAL, FUNDING.CARD]; const invalidFundingSources = [ - FUNDING.CARD, FUNDING.VENMO, FUNDING.PAYLATER, FUNDING.CREDIT, From 3f0ce2ca870c1af532970b041cc56a6390540d55 Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores <47202670+AleGastelum@users.noreply.github.com> Date: Thu, 4 Sep 2025 09:28:40 -0700 Subject: [PATCH 4/9] Update main.yml Added an `npm ls` command to verify sdk-logos installed version --- .github/workflows/main.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 6da05b26c..ff7ddcc2f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -28,6 +28,10 @@ jobs: uses: bahmutov/npm-install@v1 with: useLockFile: false + + # Just temporary, remove before merging + - name: LS deps + run: npm ls - name: ▶️ Run Lint run: npm run lint From bc5edb0f7b768063bb20991321f00d4d31ba6e77 Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Thu, 4 Sep 2025 14:08:53 -0700 Subject: [PATCH 5/9] Updated @paypal/sdk-logos package.json version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 13a418b6c..365e4eba6 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@paypal/funding-components": "^1.0.31", "@paypal/sdk-client": "^4.0.199", "@paypal/sdk-constants": "^1.0.156", - "@paypal/sdk-logos": "^2.2.8" + "@paypal/sdk-logos": "^2.2.16" }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" From 1b426edbbda974eaa1929b93c5001153175c8d40 Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Thu, 4 Sep 2025 14:28:40 -0700 Subject: [PATCH 6/9] Updated sdk-logos dependency version once more --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 365e4eba6..1f29db12b 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@paypal/funding-components": "^1.0.31", "@paypal/sdk-client": "^4.0.199", "@paypal/sdk-constants": "^1.0.156", - "@paypal/sdk-logos": "^2.2.16" + "@paypal/sdk-logos": "2.2.16" }, "lint-staged": { "**/*": "prettier --write --ignore-unknown" From 3202fd6cc09f86028389434fc8f006a5d94fa0fa Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Thu, 4 Sep 2025 18:16:46 -0700 Subject: [PATCH 7/9] Updated karma test coverage for card button redesign --- test/integration/tests/button/style.js | 103 ++++++++++++++----------- 1 file changed, 59 insertions(+), 44 deletions(-) diff --git a/test/integration/tests/button/style.js b/test/integration/tests/button/style.js index 9d7b2d9e7..a6a5cd4c0 100644 --- a/test/integration/tests/button/style.js +++ b/test/integration/tests/button/style.js @@ -552,78 +552,95 @@ describe("Button Redesign", () => { }); }); - describe("unsupported funding sources", () => { - describe("funding source = Venmo", () => { - const fundingSource = "venmo"; + describe("funding source = Card", () => { + const fundingSource = "card"; - beforeEach(() => { - enableFundingSource(fundingSource); - window.navigator.mockUserAgent = IPHONE6_USER_AGENT; + describe("supported rebranded colors", () => { + // This test fails because the sdk-logo card rebrand component does not append paypal-logo-color-white class currently. + it.skip("should render the rebranded black when color is black and isPaypalRebrandEnabled is true", () => { + const mockPaypalRebrandExperiment = + setMockPaypalRebrandExperiment(true); + + const button = window.paypal.Buttons({ + fundingSource, + style: { + color: "black", + }, + }); + + return button.render("#testContainer").then(() => { + validateBlackRebrandButton(fundingSource); + + mockPaypalRebrandExperiment.cancel(); + }); }); - it("should render the legacy venmo button when isPaypalRebrandEnabled is true", () => { + // This test fails because the sdk-logo card rebrand component does not append paypal-logo-color-black class currently. + it.skip("should render the rebranded white button when color is white and isPaypalRebrandEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); const button = window.paypal.Buttons({ fundingSource, + style: { + color: "white", + }, }); return button.render("#testContainer").then(() => { - // blue is the default color for Venmo - validateLegacyBlueButton(fundingSource); + validateWhiteRebrandButton(); mockPaypalRebrandExperiment.cancel(); }); }); + }); - it("should render the legacy venmo button when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + describe("supported legacy colors", () => { + it("should render the legacy black card button when isPaypalRebrandEnabled is false", () => { const mockPaypalRebrandExperiment = - setMockPaypalRebrandExperiment(true); - const mockPaypalRebrandABTestExperiment = - setMockPaypalRebrandABTestExperiment(true); + setMockPaypalRebrandExperiment(false); const button = window.paypal.Buttons({ fundingSource, }); return button.render("#testContainer").then(() => { - // blue is the default color for Venmo + validateLegacyBlackCardButton(fundingSource); + mockPaypalRebrandExperiment.cancel(); - mockPaypalRebrandABTestExperiment.cancel(); }); }); - it("should render the legacy venmo button in black color is black & when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + it("should render the legacy white card button when color is white and isPaypalRebrandEnabled is false", () => { const mockPaypalRebrandExperiment = - setMockPaypalRebrandExperiment(true); - const mockPaypalRebrandABTestExperiment = - setMockPaypalRebrandABTestExperiment(true); + setMockPaypalRebrandExperiment(false); const button = window.paypal.Buttons({ fundingSource, style: { - color: "black", + color: "white", }, }); return button.render("#testContainer").then(() => { - validateLegacyBlackButton(fundingSource); + validateLegacyWhiteCardButton(fundingSource); mockPaypalRebrandExperiment.cancel(); - mockPaypalRebrandABTestExperiment.cancel(); }); }); }); + }); - describe("funding source = PayLater", () => { - const fundingSource = "paylater"; + describe("unsupported funding sources", () => { + describe("funding source = Venmo", () => { + const fundingSource = "venmo"; beforeEach(() => { enableFundingSource(fundingSource); + window.navigator.mockUserAgent = IPHONE6_USER_AGENT; }); - it("should render the legacy PayLater button when isPaypalRebrandEnabled is true", () => { + it("should render the legacy venmo button when isPaypalRebrandEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); @@ -632,14 +649,14 @@ describe("Button Redesign", () => { }); return button.render("#testContainer").then(() => { - // white is the default color for Pay Later - validateLegacyWhiteButton("pp"); + // blue is the default color for Venmo + validateLegacyBlueButton(fundingSource); mockPaypalRebrandExperiment.cancel(); }); }); - it("should render the legacy PayLater button when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + it("should render the legacy venmo button when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); const mockPaypalRebrandABTestExperiment = @@ -650,15 +667,13 @@ describe("Button Redesign", () => { }); return button.render("#testContainer").then(() => { - // white is the default color for Pay Later - validateLegacyWhiteButton("pp"); - + // blue is the default color for Venmo mockPaypalRebrandExperiment.cancel(); mockPaypalRebrandABTestExperiment.cancel(); }); }); - it("should render the legacy PayLater button in black color is black & when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + it("should render the legacy venmo button in black color is black & when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); const mockPaypalRebrandABTestExperiment = @@ -672,7 +687,7 @@ describe("Button Redesign", () => { }); return button.render("#testContainer").then(() => { - validateLegacyBlackButton("pp"); + validateLegacyBlackButton(fundingSource); mockPaypalRebrandExperiment.cancel(); mockPaypalRebrandABTestExperiment.cancel(); @@ -680,14 +695,14 @@ describe("Button Redesign", () => { }); }); - describe("funding source = Card", () => { - const fundingSource = "card"; + describe("funding source = PayLater", () => { + const fundingSource = "paylater"; beforeEach(() => { enableFundingSource(fundingSource); }); - it("should render the legacy card button when isPaypalRebrandEnabled is true", () => { + it("should render the legacy PayLater button when isPaypalRebrandEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); @@ -696,14 +711,14 @@ describe("Button Redesign", () => { }); return button.render("#testContainer").then(() => { - // black is the default color for Card - validateLegacyBlackCardButton(); + // white is the default color for Pay Later + validateLegacyWhiteButton("pp"); mockPaypalRebrandExperiment.cancel(); }); }); - it("should render the legacy card button when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + it("should render the legacy PayLater button when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); const mockPaypalRebrandABTestExperiment = @@ -714,15 +729,15 @@ describe("Button Redesign", () => { }); return button.render("#testContainer").then(() => { - // black is the default color for Card - validateLegacyBlackCardButton(); + // white is the default color for Pay Later + validateLegacyWhiteButton("pp"); mockPaypalRebrandExperiment.cancel(); mockPaypalRebrandABTestExperiment.cancel(); }); }); - it("should render the legacy card button in white color is white & when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { + it("should render the legacy PayLater button in black color is black & when isPaypalRebrandEnabled is true & isPaypalRebrandABTestEnabled is true", () => { const mockPaypalRebrandExperiment = setMockPaypalRebrandExperiment(true); const mockPaypalRebrandABTestExperiment = @@ -731,12 +746,12 @@ describe("Button Redesign", () => { const button = window.paypal.Buttons({ fundingSource, style: { - color: "white", + color: "black", }, }); return button.render("#testContainer").then(() => { - validateLegacyWhiteCardButton(); + validateLegacyBlackButton("pp"); mockPaypalRebrandExperiment.cancel(); mockPaypalRebrandABTestExperiment.cancel(); From c691192689a98dc863f76093a02ce5a14701a640 Mon Sep 17 00:00:00 2001 From: Alejandro Gastelum Flores Date: Thu, 4 Sep 2025 18:45:16 -0700 Subject: [PATCH 8/9] Updated test coverage for rebrand card button config file --- src/funding/card/config.test.jsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/funding/card/config.test.jsx b/src/funding/card/config.test.jsx index ff5beaab5..ae3d630e2 100644 --- a/src/funding/card/config.test.jsx +++ b/src/funding/card/config.test.jsx @@ -2,7 +2,7 @@ import { describe, test, expect } from "vitest"; import { FUNDING, COMPONENTS } from "@paypal/sdk-constants/src"; -import { BUTTON_FLOW } from "../../constants"; +import { BUTTON_COLOR, BUTTON_FLOW } from "../../constants"; import { getCardConfig } from "./config"; @@ -140,3 +140,25 @@ describe("card eligibility", () => { ).toEqual(true); }); }); + +describe("rebrand card config", () => { + test("should have rebrand colors", () => { + const colors = getCardConfig().colors; + expect(colors).toEqual( + expect.arrayContaining([ + BUTTON_COLOR.REBRAND_WHITE, + BUTTON_COLOR.REBRAND_BLACK, + ]) + ); + }); + + test("should have rebrand logo colors", () => { + const logoColors = getCardConfig().logoColors; + expect(logoColors).toEqual( + expect.objectContaining({ + [BUTTON_COLOR.REBRAND_WHITE]: BUTTON_COLOR.BLACK, + [BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.WHITE, + }) + ); + }); +}); From a83e2ad3c510311e10410928b02301542ee422c1 Mon Sep 17 00:00:00 2001 From: nikrom17 Date: Fri, 5 Sep 2025 09:29:40 -0500 Subject: [PATCH 9/9] add carrat --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f29db12b..365e4eba6 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "@paypal/funding-components": "^1.0.31", "@paypal/sdk-client": "^4.0.199", "@paypal/sdk-constants": "^1.0.156", - "@paypal/sdk-logos": "2.2.16" + "@paypal/sdk-logos": "^2.2.16" }, "lint-staged": { "**/*": "prettier --write --ignore-unknown"