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
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"
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/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,
+ })
+ );
+ });
+});
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;
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,
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;
}
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();