diff --git a/src/constants/button.js b/src/constants/button.js index b796c32c9f..2755621f42 100644 --- a/src/constants/button.js +++ b/src/constants/button.js @@ -118,3 +118,9 @@ export const MESSAGE_ALIGN = { LEFT: ("left": "left"), RIGHT: ("right": "right"), }; + +// Alternative mark for the PayPal funding source (monogram icon). +// Not a real funding source - only used in rebrand marks rendering. +export const MARKS_FUNDING = { + PP: ("pp": "pp"), +}; diff --git a/src/funding/config.js b/src/funding/config.js index 6a5712dc7f..a73673e055 100644 --- a/src/funding/config.js +++ b/src/funding/config.js @@ -3,6 +3,8 @@ import { FUNDING } from "@paypal/sdk-constants/src"; import { inlineMemoize } from "@krakenjs/belter/src"; +import { MARKS_FUNDING } from "../constants"; + import { type FundingSourceConfig } from "./common"; import { getPayPalConfig } from "./paypal"; import { getVenmoConfig } from "./venmo"; @@ -29,6 +31,7 @@ import { getMercadopagoConfig } from "./mercadopago"; import { getMultibancoConfig } from "./multibanco"; import { getSatispayConfig } from "./satispay"; import { getPaidyConfig } from "./paidy"; +import { getPPConfig } from "./pp"; export function getFundingConfig(): { [$Values]: ?FundingSourceConfig, @@ -64,3 +67,15 @@ export function getFundingConfig(): { }; }); } + +export function getMarksFundingConfig(): {| + [$Values]: ?FundingSourceConfig, +|} { + // $FlowFixMe - intentionally adding MARKS_FUNDING.PP key beyond standard FUNDING enum keys + return inlineMemoize(getMarksFundingConfig, () => { + return { + ...getFundingConfig(), + [MARKS_FUNDING.PP]: getPPConfig(), + }; + }); +} diff --git a/src/funding/pp/config.jsx b/src/funding/pp/config.jsx new file mode 100644 index 0000000000..87ba16eae1 --- /dev/null +++ b/src/funding/pp/config.jsx @@ -0,0 +1,15 @@ +/* @flow */ +/** @jsx node */ + +import { node } from "@krakenjs/jsx-pragmatic/src"; +import { PPRebrandLogoExternalImage } from "@paypal/sdk-logos/src"; +import { LOGO_COLOR } from "@paypal/sdk-logos/src/constants"; + +import { type FundingSourceConfig } from "../common"; + +export function getPPConfig(): FundingSourceConfig { + // $FlowFixMe - pp is a marks-only config, only needs Mark component + return { + Mark: () => , + }; +} diff --git a/src/funding/pp/index.js b/src/funding/pp/index.js new file mode 100644 index 0000000000..8e4d77ba5c --- /dev/null +++ b/src/funding/pp/index.js @@ -0,0 +1,3 @@ +/* @flow */ + +export * from "./config"; diff --git a/src/marks/component.jsx b/src/marks/component.jsx index 061287c9aa..b465b6069d 100644 --- a/src/marks/component.jsx +++ b/src/marks/component.jsx @@ -29,7 +29,7 @@ import type { OnShippingAddressChange, OnShippingOptionsChange, } from "../ui/buttons/props"; -import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants"; +import { BUTTON_LAYOUT, BUTTON_FLOW, MARKS_FUNDING } from "../constants"; import { determineEligibleFunding, isFundingEligible } from "../funding"; import { supportsVenmoPopups, @@ -97,6 +97,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => { const hasShippingCallback = Boolean( onShippingChange || onShippingAddressChange || onShippingOptionsChange ); + const isRebrandEnabled = experiment?.isPaypalRebrandEnabled; const fundingSources = determineEligibleFunding({ fundingSource, fundingEligibility, @@ -126,6 +127,10 @@ export const getMarksComponent: () => MarksComponent = memoize(() => { return true; } + if (fundingSource === MARKS_FUNDING.PP) { + return Boolean(isRebrandEnabled); + } + return isFundingEligible(fundingSource, { layout, platform, @@ -154,8 +159,6 @@ export const getMarksComponent: () => MarksComponent = memoize(() => { throw new Error(`${fundingSource || "marks"} not eligible`); } - const isRebrandEnabled = experiment?.isPaypalRebrandEnabled; - getElement(container).appendChild( (
diff --git a/src/marks/templateRebrand.jsx b/src/marks/templateRebrand.jsx index 9ef0011cdc..940bbc1492 100644 --- a/src/marks/templateRebrand.jsx +++ b/src/marks/templateRebrand.jsx @@ -11,7 +11,7 @@ import { getLocale, type FundingEligibilityType } from "@paypal/sdk-client/src"; import { toPx } from "@krakenjs/belter/src"; import type { Experiment } from "../types"; -import { getFundingConfig } from "../funding"; +import { getMarksFundingConfig } from "../funding"; import { CLASS } from "../constants"; type MarkOptions = {| @@ -27,7 +27,7 @@ function Mark({ experiment, env, }: MarkOptions): ChildNodeType { - const fundingConfig = getFundingConfig()[fundingSource]; + const fundingConfig = getMarksFundingConfig()[fundingSource]; if (!fundingConfig) { throw new Error(`Can not find funding config for ${fundingSource}`);