@paypal/checkout-components 5.0.426-alpha-ea5d1e6.0 → 5.0.427
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button.js +1 -1
- package/dist/test/button.js +1 -1
- package/package.json +8 -8
- package/src/connect/component.jsx +1 -1
- package/src/connect/component.test.js +2 -2
- package/src/funding/card/config.jsx +3 -3
- package/src/funding/card/config.test.jsx +10 -10
- package/src/funding/funding.js +6 -6
- package/src/funding/funding.test.js +3 -3
- package/src/funding/paylater/config.jsx +2 -2
- package/src/funding/paypal/template.jsx +8 -8
- package/src/funding/util.js +2 -2
- package/src/funding/util.test.js +16 -16
- package/src/hosted-buttons/index.test.js +9 -9
- package/src/hosted-buttons/types.js +3 -3
- package/src/hosted-buttons/utils.js +8 -8
- package/src/hosted-buttons/utils.test.js +43 -43
- package/src/lib/api.js +2 -2
- package/src/lib/appSwitchResume.js +1 -1
- package/src/lib/perceived-latency-instrumentation.js +1 -1
- package/src/lib/security.js +1 -1
- package/src/marks/component.jsx +4 -4
- package/src/marks/templateRebrand.test.jsx +1 -1
- package/src/shopper-insights/shopperSession.js +13 -13
- package/src/shopper-insights/shopperSession.test.js +25 -25
- package/src/three-domain-secure/api.js +1 -1
- package/src/three-domain-secure/api.test.js +4 -4
- package/src/three-domain-secure/component.jsx +3 -3
- package/src/three-domain-secure/component.test.js +14 -14
- package/src/ui/buttons/buttons.jsx +2 -2
- package/src/ui/buttons/buttons.test.js +4 -4
- package/src/ui/buttons/config.js +1 -1
- package/src/ui/buttons/poweredBy.jsx +1 -1
- package/src/ui/buttons/props.bnpl.test.js +1 -1
- package/src/ui/buttons/props.js +43 -43
- package/src/ui/buttons/props.test.js +8 -8
- package/src/ui/buttons/script.jsx +10 -10
- package/src/ui/buttons/styles/button.js +2 -2
- package/src/ui/buttons/styles/disableMaxHeightConfig.test.js +1 -1
- package/src/ui/buttons/styles/labelContainerHeight.test.js +5 -5
- package/src/ui/buttons/styles/labels.js +7 -7
- package/src/ui/buttons/styles/page.js +1 -1
- package/src/ui/buttons/styles/responsive.js +137 -137
- package/src/ui/buttons/styles/styleUtils.js +14 -12
- package/src/ui/buttons/styles/styleUtils.test.constants.js +731 -0
- package/src/ui/buttons/styles/styleUtils.test.js +198 -610
- package/src/ui/buttons/util.js +4 -4
- package/src/ui/overlay/paypal-app-switch/style.jsx +1 -1
- package/src/ui/overlay/three-domain-secure/overlay.jsx +1 -1
- package/src/ui/overlay/three-domain-secure/style.jsx +1 -1
- package/src/ui/saved-payment-methods/template.jsx +1 -1
- package/src/ui/text/text.jsx +1 -1
- package/src/zoid/buttons/component.jsx +13 -13
- package/src/zoid/buttons/container.jsx +2 -2
- package/src/zoid/buttons/prerender.jsx +3 -3
- package/src/zoid/buttons/util.js +10 -10
- package/src/zoid/buttons/util.test.js +2 -2
- package/src/zoid/card-fields/component.jsx +8 -9
- package/src/zoid/card-form/component.js +3 -3
- package/src/zoid/checkout/component.jsx +2 -2
- package/src/zoid/payment-fields/component.jsx +1 -1
- package/src/zoid/qr-code/container.test.jsx +2 -2
- package/src/zoid/qr-code/prerender.test.jsx +1 -1
- package/src/zoid/saved-payment-methods/component.jsx +8 -8
- package/src/zoid/saved-payment-methods/util.js +2 -2
- package/src/zoid/saved-payment-methods/util.test.js +14 -14
- package/src/zoid/wallet/component.jsx +1 -1
package/src/ui/buttons/util.js
CHANGED
|
@@ -9,7 +9,7 @@ export function isBorderRadiusNumber(borderRadius?: number): boolean {
|
|
|
9
9
|
|
|
10
10
|
export function calculateShowPoweredBy(
|
|
11
11
|
layout: $Values<typeof BUTTON_LAYOUT>,
|
|
12
|
-
fundingSources: $ReadOnlyArray<$Values<typeof FUNDING
|
|
12
|
+
fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
13
13
|
): boolean {
|
|
14
14
|
return (
|
|
15
15
|
layout === BUTTON_LAYOUT.VERTICAL && fundingSources.includes(FUNDING.CARD)
|
|
@@ -19,14 +19,14 @@ export function calculateShowPoweredBy(
|
|
|
19
19
|
export function calculateMessagePosition(
|
|
20
20
|
fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
21
21
|
layout: $Values<typeof BUTTON_LAYOUT>,
|
|
22
|
-
position?: $Values<typeof MESSAGE_POSITION
|
|
22
|
+
position?: $Values<typeof MESSAGE_POSITION>,
|
|
23
23
|
): $Values<typeof MESSAGE_POSITION> {
|
|
24
24
|
const showPoweredBy = calculateShowPoweredBy(layout, fundingSources);
|
|
25
25
|
|
|
26
26
|
if (showPoweredBy && position === MESSAGE_POSITION.BOTTOM) {
|
|
27
27
|
// eslint-disable-next-line no-console
|
|
28
28
|
console.warn(
|
|
29
|
-
"PayPal Button Message cannot be positioned at bottom when displaying the Debit or Credit Card button."
|
|
29
|
+
"PayPal Button Message cannot be positioned at bottom when displaying the Debit or Credit Card button.",
|
|
30
30
|
);
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -42,7 +42,7 @@ export function calculateMessagePosition(
|
|
|
42
42
|
|
|
43
43
|
export function checkLabelEligibility(
|
|
44
44
|
label?: $Values<typeof BUTTON_LABEL>,
|
|
45
|
-
buyerCountry: $Values<typeof COUNTRY
|
|
45
|
+
buyerCountry: $Values<typeof COUNTRY>,
|
|
46
46
|
): $Values<typeof BUTTON_LABEL> | typeof undefined {
|
|
47
47
|
const eligibleCountriesForInstallmentLabel = ["BR", "MX"];
|
|
48
48
|
|
|
@@ -91,7 +91,7 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
|
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
#${uid} .paypal-checkout-modal {
|
|
94
|
-
font-family:
|
|
94
|
+
font-family: PayPalOpen-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
|
|
95
95
|
font-size: 14px;
|
|
96
96
|
text-align: center;
|
|
97
97
|
|
|
@@ -67,7 +67,7 @@ export function Overlay({
|
|
|
67
67
|
document.getElementsByName(overlayIframeName)?.[0];
|
|
68
68
|
const iframeDocument = overlayIframe?.contentWindow.document;
|
|
69
69
|
const warningElement = iframeDocument?.getElementsByClassName(
|
|
70
|
-
"paypal-checkout-focus-warning"
|
|
70
|
+
"paypal-checkout-focus-warning",
|
|
71
71
|
)?.[0];
|
|
72
72
|
|
|
73
73
|
if (!warningElement) {
|
|
@@ -113,7 +113,7 @@ export function getContainerStyle({ uid }: {| uid: string |}): string {
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
#${uid} .paypal-checkout-modal {
|
|
116
|
-
font-family:
|
|
116
|
+
font-family: PayPalOpen-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
|
|
117
117
|
font-size: 14px;
|
|
118
118
|
text-align: center;
|
|
119
119
|
|
|
@@ -70,7 +70,7 @@ function getStyleConfig(style?: SavedPaymentMethodsStyleInputs): Object {
|
|
|
70
70
|
* shared by zoid prerender and server SSR and must match the first client paint.
|
|
71
71
|
*/
|
|
72
72
|
export function SavedPaymentMethods(
|
|
73
|
-
props: SavedPaymentMethodsServerRenderProps
|
|
73
|
+
props: SavedPaymentMethodsServerRenderProps,
|
|
74
74
|
): ElementNode {
|
|
75
75
|
const { nonce, style } = props;
|
|
76
76
|
const styleConfig = getStyleConfig(style);
|
package/src/ui/text/text.jsx
CHANGED
|
@@ -116,7 +116,7 @@ export type ButtonsComponent = ZoidComponent<
|
|
|
116
116
|
ButtonProps,
|
|
117
117
|
void,
|
|
118
118
|
void,
|
|
119
|
-
ButtonExtensions
|
|
119
|
+
ButtonExtensions,
|
|
120
120
|
>;
|
|
121
121
|
|
|
122
122
|
// $FlowIssue
|
|
@@ -195,7 +195,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
195
195
|
try {
|
|
196
196
|
const cplPhases = prepareInstrumentationPayload(
|
|
197
197
|
buttonSessionID,
|
|
198
|
-
"buttons"
|
|
198
|
+
"buttons",
|
|
199
199
|
);
|
|
200
200
|
const cplLatencyMetrics = {
|
|
201
201
|
[FPTI_KEY.STATE]: "CPL_LATENCY_METRICS",
|
|
@@ -262,11 +262,11 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
262
262
|
supportsVenmoPopups = supportsVenmoPopupsUtil(
|
|
263
263
|
buttonExperiments,
|
|
264
264
|
userAgentSupportsPopups(),
|
|
265
|
-
getUserAgent()
|
|
265
|
+
getUserAgent(),
|
|
266
266
|
),
|
|
267
267
|
supportedNativeVenmoBrowser = isSupportedNativeVenmoBrowser(
|
|
268
268
|
buttonExperiments,
|
|
269
|
-
getUserAgent()
|
|
269
|
+
getUserAgent(),
|
|
270
270
|
),
|
|
271
271
|
experiment = buttonExperiments,
|
|
272
272
|
createBillingAgreement,
|
|
@@ -380,7 +380,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
380
380
|
({ props: { buttonSessionID } }) =>
|
|
381
381
|
({ close }) => {
|
|
382
382
|
const overlay = document.getElementsByName(
|
|
383
|
-
`paypal-overlay-${buttonSessionID}
|
|
383
|
+
`paypal-overlay-${buttonSessionID}`,
|
|
384
384
|
)?.[0];
|
|
385
385
|
|
|
386
386
|
if (overlay) {
|
|
@@ -456,7 +456,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
456
456
|
() => {
|
|
457
457
|
window.addEventListener(
|
|
458
458
|
"visibilitychange",
|
|
459
|
-
props.visibilityChangeHandler
|
|
459
|
+
props.visibilityChangeHandler,
|
|
460
460
|
);
|
|
461
461
|
},
|
|
462
462
|
},
|
|
@@ -469,7 +469,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
469
469
|
() => {
|
|
470
470
|
window.removeEventListener(
|
|
471
471
|
"visibilitychange",
|
|
472
|
-
props.visibilityChangeHandler
|
|
472
|
+
props.visibilityChangeHandler,
|
|
473
473
|
);
|
|
474
474
|
},
|
|
475
475
|
},
|
|
@@ -956,7 +956,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
956
956
|
// $FlowFixMe
|
|
957
957
|
value,
|
|
958
958
|
layout,
|
|
959
|
-
fundingSources
|
|
959
|
+
fundingSources,
|
|
960
960
|
);
|
|
961
961
|
},
|
|
962
962
|
},
|
|
@@ -1041,7 +1041,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
1041
1041
|
const modalInstance = await getModal(
|
|
1042
1042
|
clientID,
|
|
1043
1043
|
merchantID,
|
|
1044
|
-
buttonSessionID
|
|
1044
|
+
buttonSessionID,
|
|
1045
1045
|
);
|
|
1046
1046
|
return modalInstance?.show({
|
|
1047
1047
|
amount,
|
|
@@ -1137,8 +1137,8 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
1137
1137
|
value: ({ props }) => {
|
|
1138
1138
|
return Boolean(
|
|
1139
1139
|
props.onShippingChange ||
|
|
1140
|
-
|
|
1141
|
-
|
|
1140
|
+
props.onShippingAddressChange ||
|
|
1141
|
+
props.onShippingOptionsChange,
|
|
1142
1142
|
);
|
|
1143
1143
|
},
|
|
1144
1144
|
},
|
|
@@ -1372,7 +1372,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
1372
1372
|
value: ({ props }) => {
|
|
1373
1373
|
return isSupportedNativeVenmoBrowser(
|
|
1374
1374
|
props.experiment,
|
|
1375
|
-
props.userAgent
|
|
1375
|
+
props.userAgent,
|
|
1376
1376
|
);
|
|
1377
1377
|
},
|
|
1378
1378
|
queryParam: true,
|
|
@@ -1393,7 +1393,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
|
|
|
1393
1393
|
return supportsVenmoPopupsUtil(
|
|
1394
1394
|
props.experiment,
|
|
1395
1395
|
userAgentSupportsPopups(),
|
|
1396
|
-
props.userAgent
|
|
1396
|
+
props.userAgent,
|
|
1397
1397
|
);
|
|
1398
1398
|
},
|
|
1399
1399
|
queryParam: true,
|
|
@@ -86,13 +86,13 @@ export function containerTemplate({
|
|
|
86
86
|
possibleSizes.sort(
|
|
87
87
|
(
|
|
88
88
|
sizeA: $Values<typeof BUTTON_SIZE>,
|
|
89
|
-
sizeB: $Values<typeof BUTTON_SIZE
|
|
89
|
+
sizeB: $Values<typeof BUTTON_SIZE>,
|
|
90
90
|
): number => {
|
|
91
91
|
return (
|
|
92
92
|
BUTTON_SIZE_STYLE[sizeA].defaultWidth -
|
|
93
93
|
BUTTON_SIZE_STYLE[sizeB].defaultWidth
|
|
94
94
|
);
|
|
95
|
-
}
|
|
95
|
+
},
|
|
96
96
|
);
|
|
97
97
|
|
|
98
98
|
minimumSize = possibleSizes[0];
|
|
@@ -39,7 +39,7 @@ export function PrerenderedButtons({
|
|
|
39
39
|
props,
|
|
40
40
|
}: PrerenderedButtonsProps): ChildType {
|
|
41
41
|
const eagerOrderCreation = isEagerOrderCreationEnabled(
|
|
42
|
-
props.appSwitchWhenAvailable
|
|
42
|
+
props.appSwitchWhenAvailable,
|
|
43
43
|
);
|
|
44
44
|
let win;
|
|
45
45
|
const handleClick = (
|
|
@@ -51,7 +51,7 @@ export function PrerenderedButtons({
|
|
|
51
51
|
}: {|
|
|
52
52
|
fundingSource: $Values<typeof FUNDING>,
|
|
53
53
|
card: ?$Values<typeof CARD>,
|
|
54
|
-
|}
|
|
54
|
+
|},
|
|
55
55
|
) => {
|
|
56
56
|
getLogger()
|
|
57
57
|
.info("paypal_js_sdk_v5_button_prerender_click", {
|
|
@@ -84,7 +84,7 @@ export function PrerenderedButtons({
|
|
|
84
84
|
popup("", {
|
|
85
85
|
width: DEFAULT_POPUP_SIZE.WIDTH,
|
|
86
86
|
height: DEFAULT_POPUP_SIZE.HEIGHT,
|
|
87
|
-
})
|
|
87
|
+
}),
|
|
88
88
|
);
|
|
89
89
|
}
|
|
90
90
|
|
package/src/zoid/buttons/util.js
CHANGED
|
@@ -79,7 +79,7 @@ const logNativeScreenInformation = once(() => {
|
|
|
79
79
|
});
|
|
80
80
|
|
|
81
81
|
export function determineFlow(
|
|
82
|
-
props: DetermineFlowOptions
|
|
82
|
+
props: DetermineFlowOptions,
|
|
83
83
|
): $Values<typeof BUTTON_FLOW> {
|
|
84
84
|
if (props.createVaultSetupToken) {
|
|
85
85
|
return BUTTON_FLOW.VAULT_WITHOUT_PURCHASE;
|
|
@@ -135,7 +135,7 @@ export function getVenmoEligibility(): EligibilityExperiment {
|
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
export function getRenderedButtons(
|
|
138
|
-
props: ButtonProps
|
|
138
|
+
props: ButtonProps,
|
|
139
139
|
): $ReadOnlyArray<$Values<typeof FUNDING>> {
|
|
140
140
|
const {
|
|
141
141
|
fundingSource,
|
|
@@ -206,8 +206,8 @@ export function applePaySession(): ?ApplePaySessionConfigRequest {
|
|
|
206
206
|
new window.ApplePayError(
|
|
207
207
|
error.code,
|
|
208
208
|
error.contactField,
|
|
209
|
-
error.message
|
|
210
|
-
)
|
|
209
|
+
error.message,
|
|
210
|
+
),
|
|
211
211
|
),
|
|
212
212
|
};
|
|
213
213
|
};
|
|
@@ -280,7 +280,7 @@ export function getButtonExperiments(): EligibilityExperiment {
|
|
|
280
280
|
|
|
281
281
|
export function getButtonSize(
|
|
282
282
|
props: ButtonProps,
|
|
283
|
-
container: string | HTMLElement | void
|
|
283
|
+
container: string | HTMLElement | void,
|
|
284
284
|
): string | void {
|
|
285
285
|
if (!container) {
|
|
286
286
|
return;
|
|
@@ -341,7 +341,7 @@ function buildModalBundleUrl(): string {
|
|
|
341
341
|
export const getModal: (
|
|
342
342
|
clientID: string,
|
|
343
343
|
merchantID: $ReadOnlyArray<string> | void,
|
|
344
|
-
buttonSessionID: string
|
|
344
|
+
buttonSessionID: string,
|
|
345
345
|
) => Object = memoize(async (clientID, merchantID, buttonSessionID) => {
|
|
346
346
|
try {
|
|
347
347
|
const namespace = getNamespace();
|
|
@@ -418,14 +418,14 @@ export const sendPostRobotMessageToButtonIframe = ({
|
|
|
418
418
|
};
|
|
419
419
|
|
|
420
420
|
export const isEagerOrderCreationEnabled = (
|
|
421
|
-
appSwitchWhenAvailable: boolean
|
|
421
|
+
appSwitchWhenAvailable: boolean,
|
|
422
422
|
): boolean => {
|
|
423
423
|
const experiment = getButtonExperiments();
|
|
424
424
|
return Boolean(
|
|
425
425
|
!isWebView() &&
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
426
|
+
isDevice() &&
|
|
427
|
+
appSwitchWhenAvailable &&
|
|
428
|
+
experiment.spbEagerOrderCreation,
|
|
429
429
|
);
|
|
430
430
|
};
|
|
431
431
|
|
|
@@ -14,7 +14,7 @@ describe("resolveMerchantDomain", () => {
|
|
|
14
14
|
vi.mocked(isPayPalDomain).mockReturnValue(true);
|
|
15
15
|
|
|
16
16
|
expect(resolveMerchantDomain("https://merchant.example.com")).toBe(
|
|
17
|
-
"https://merchant.example.com"
|
|
17
|
+
"https://merchant.example.com",
|
|
18
18
|
);
|
|
19
19
|
});
|
|
20
20
|
|
|
@@ -34,7 +34,7 @@ describe("resolveMerchantDomain", () => {
|
|
|
34
34
|
vi.mocked(isPayPalDomain).mockReturnValue(false);
|
|
35
35
|
|
|
36
36
|
expect(() => resolveMerchantDomain("https://merchant.example.com")).toThrow(
|
|
37
|
-
"merchantDomain can only be passed on PayPal-hosted flows"
|
|
37
|
+
"merchantDomain can only be passed on PayPal-hosted flows",
|
|
38
38
|
);
|
|
39
39
|
});
|
|
40
40
|
});
|
|
@@ -95,16 +95,16 @@ type CardFieldsProps = {|
|
|
|
95
95
|
createVaultSetupToken: () => ZalgoPromise<string>,
|
|
96
96
|
onApprove: (
|
|
97
97
|
{| returnUrl?: string, vaultSetupToken?: string |},
|
|
98
|
-
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
|
|
98
|
+
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |},
|
|
99
99
|
) => ?ZalgoPromise<void>,
|
|
100
100
|
onError?: () => ZalgoPromise<Object> | Object,
|
|
101
101
|
onComplete: (
|
|
102
102
|
{| returnUrl: string |},
|
|
103
|
-
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
|
|
103
|
+
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |},
|
|
104
104
|
) => ?ZalgoPromise<void>,
|
|
105
105
|
onCancel?: (
|
|
106
106
|
{| cancelUrl: string |},
|
|
107
|
-
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
|
|
107
|
+
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |},
|
|
108
108
|
) => ?ZalgoPromise<void>,
|
|
109
109
|
action: Object,
|
|
110
110
|
sdkCorrelationID: string,
|
|
@@ -114,8 +114,7 @@ type CardFieldsProps = {|
|
|
|
114
114
|
sdkToken?: string,
|
|
115
115
|
installments?: {|
|
|
116
116
|
onInstallmentsRequested: () =>
|
|
117
|
-
| InstallmentsConfiguration
|
|
118
|
-
| ZalgoPromise<InstallmentsConfiguration>,
|
|
117
|
+
InstallmentsConfiguration | ZalgoPromise<InstallmentsConfiguration>,
|
|
119
118
|
onInstallmentsAvailable: (Object) => void,
|
|
120
119
|
onInstallmentsError?: (Object) => void,
|
|
121
120
|
|},
|
|
@@ -164,7 +163,7 @@ const prerenderTemplate = ({ props, doc }) => {
|
|
|
164
163
|
export type CardFieldsComponent = ZoidComponent<
|
|
165
164
|
CardFieldsProps,
|
|
166
165
|
CardFieldsExports,
|
|
167
|
-
CardFieldsChildren
|
|
166
|
+
CardFieldsChildren,
|
|
168
167
|
>;
|
|
169
168
|
|
|
170
169
|
export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
|
|
@@ -269,7 +268,7 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
|
|
|
269
268
|
!props.parent.props.sdkToken
|
|
270
269
|
) {
|
|
271
270
|
throw new ValidationError(
|
|
272
|
-
`SDK Token must be passed in for createSubscription
|
|
271
|
+
`SDK Token must be passed in for createSubscription`,
|
|
273
272
|
);
|
|
274
273
|
}
|
|
275
274
|
return props.parent.props.createSubscription;
|
|
@@ -616,7 +615,7 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
|
|
|
616
615
|
value: ({ props }) => {
|
|
617
616
|
if (props.createSubscription && !props.sdkToken) {
|
|
618
617
|
throw new ValidationError(
|
|
619
|
-
`SDK Token must be passed in for createSubscription
|
|
618
|
+
`SDK Token must be passed in for createSubscription`,
|
|
620
619
|
);
|
|
621
620
|
}
|
|
622
621
|
return props.createSubscription;
|
|
@@ -795,5 +794,5 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
|
|
|
795
794
|
});
|
|
796
795
|
|
|
797
796
|
return CardFields;
|
|
798
|
-
}
|
|
797
|
+
},
|
|
799
798
|
);
|
|
@@ -33,11 +33,11 @@ type CardProps = {|
|
|
|
33
33
|
awaitPopupBridge: Function,
|
|
34
34
|
onAuthorize: (
|
|
35
35
|
{| returnUrl: string |},
|
|
36
|
-
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
|
|
36
|
+
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |},
|
|
37
37
|
) => ?ZalgoPromise<void>,
|
|
38
38
|
onCancel?: (
|
|
39
39
|
{| cancelUrl: string |},
|
|
40
|
-
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}
|
|
40
|
+
{| redirect: (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |},
|
|
41
41
|
) => ?ZalgoPromise<void>,
|
|
42
42
|
onEvent?: ({| type: string, payload: Object |}) => void,
|
|
43
43
|
meta: Object,
|
|
@@ -106,7 +106,7 @@ export function getCardFormComponent(): CardFormComponent {
|
|
|
106
106
|
queryParam: true,
|
|
107
107
|
value: ({ props }) => {
|
|
108
108
|
return Boolean(
|
|
109
|
-
props.onShippingAddressChange || props.onShippingOptionsChange
|
|
109
|
+
props.onShippingAddressChange || props.onShippingOptionsChange,
|
|
110
110
|
);
|
|
111
111
|
},
|
|
112
112
|
},
|
|
@@ -298,8 +298,8 @@ export function getCheckoutComponent(): CheckoutComponent {
|
|
|
298
298
|
value: ({ props }) => {
|
|
299
299
|
return Boolean(
|
|
300
300
|
props.onShippingChange ||
|
|
301
|
-
|
|
302
|
-
|
|
301
|
+
props.onShippingAddressChange ||
|
|
302
|
+
props.onShippingOptionsChange,
|
|
303
303
|
);
|
|
304
304
|
},
|
|
305
305
|
},
|
|
@@ -74,7 +74,7 @@ describe("containerTemplate", () => {
|
|
|
74
74
|
} else {
|
|
75
75
|
expect(getCSPNonce).not.toHaveBeenCalled();
|
|
76
76
|
}
|
|
77
|
-
}
|
|
77
|
+
},
|
|
78
78
|
);
|
|
79
79
|
|
|
80
80
|
test.each([
|
|
@@ -131,7 +131,7 @@ describe("QRCodeContainer", () => {
|
|
|
131
131
|
const mocks = createMocks();
|
|
132
132
|
// $FlowIssue - intentionally passing null for error test
|
|
133
133
|
expect(() =>
|
|
134
|
-
QRCodeContainer({ uid: TEST_UID, ...modifyMocks(mocks) })
|
|
134
|
+
QRCodeContainer({ uid: TEST_UID, ...modifyMocks(mocks) }),
|
|
135
135
|
).toThrow("Expected frame and prerenderframe");
|
|
136
136
|
});
|
|
137
137
|
|
|
@@ -77,7 +77,7 @@ describe("prerenderTemplate", () => {
|
|
|
77
77
|
// Verify SpinnerPage receives correct nonce prop
|
|
78
78
|
expect(result).toBeDefined();
|
|
79
79
|
expect(capturedSpinnerPageProps).toEqual({ nonce: expectedNonce });
|
|
80
|
-
}
|
|
80
|
+
},
|
|
81
81
|
);
|
|
82
82
|
|
|
83
83
|
test("should apply cspNonce to style element in children", () => {
|
|
@@ -77,7 +77,7 @@ export type SavedPaymentMethodsComponent = ZoidComponent<
|
|
|
77
77
|
SavedPaymentMethodsProps,
|
|
78
78
|
void,
|
|
79
79
|
void,
|
|
80
|
-
void
|
|
80
|
+
void,
|
|
81
81
|
>;
|
|
82
82
|
|
|
83
83
|
// $FlowIssue
|
|
@@ -129,7 +129,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
129
129
|
try {
|
|
130
130
|
const cplPhases = prepareInstrumentationPayload(
|
|
131
131
|
buttonSessionID,
|
|
132
|
-
"saved-payment-methods"
|
|
132
|
+
"saved-payment-methods",
|
|
133
133
|
);
|
|
134
134
|
const cplLatencyMetrics = {
|
|
135
135
|
[FPTI_KEY.STATE]: "CPL_LATENCY_METRICS",
|
|
@@ -138,7 +138,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
138
138
|
[FPTI_KEY.PAGE]:
|
|
139
139
|
"main:xo:paypal-components:saved-payment-methods",
|
|
140
140
|
[FPTI_KEY.CPL_COMP_METRICS]: JSON.stringify(
|
|
141
|
-
cplPhases?.comp || {}
|
|
141
|
+
cplPhases?.comp || {},
|
|
142
142
|
),
|
|
143
143
|
};
|
|
144
144
|
getLogger().track(cplLatencyMetrics);
|
|
@@ -202,7 +202,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
202
202
|
({ props: { buttonSessionID } }) =>
|
|
203
203
|
({ close }) => {
|
|
204
204
|
const overlay = document.getElementsByName(
|
|
205
|
-
`paypal-overlay-${buttonSessionID}
|
|
205
|
+
`paypal-overlay-${buttonSessionID}`,
|
|
206
206
|
)?.[0];
|
|
207
207
|
|
|
208
208
|
if (overlay) {
|
|
@@ -257,7 +257,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
257
257
|
() => {
|
|
258
258
|
window.addEventListener(
|
|
259
259
|
"visibilitychange",
|
|
260
|
-
props.visibilityChangeHandler
|
|
260
|
+
props.visibilityChangeHandler,
|
|
261
261
|
);
|
|
262
262
|
},
|
|
263
263
|
},
|
|
@@ -270,7 +270,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
270
270
|
() => {
|
|
271
271
|
window.removeEventListener(
|
|
272
272
|
"visibilitychange",
|
|
273
|
-
props.visibilityChangeHandler
|
|
273
|
+
props.visibilityChangeHandler,
|
|
274
274
|
);
|
|
275
275
|
},
|
|
276
276
|
},
|
|
@@ -563,7 +563,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
563
563
|
queryParam: true,
|
|
564
564
|
value: ({ props }) => {
|
|
565
565
|
return Boolean(
|
|
566
|
-
props.onShippingAddressChange || props.onShippingOptionsChange
|
|
566
|
+
props.onShippingAddressChange || props.onShippingOptionsChange,
|
|
567
567
|
);
|
|
568
568
|
},
|
|
569
569
|
},
|
|
@@ -737,7 +737,7 @@ export const getSavedPaymentMethodsComponent: () => SavedPaymentMethodsComponent
|
|
|
737
737
|
value: ({ props }) => {
|
|
738
738
|
return isSupportedNativeVenmoBrowser(
|
|
739
739
|
props.experiment,
|
|
740
|
-
props.userAgent
|
|
740
|
+
props.userAgent,
|
|
741
741
|
);
|
|
742
742
|
},
|
|
743
743
|
queryParam: true,
|
|
@@ -62,7 +62,7 @@ export function validateSavedPaymentMethodsStyle(style: mixed): void {
|
|
|
62
62
|
for (const key of topKeys) {
|
|
63
63
|
if (!allowedTop.has(key)) {
|
|
64
64
|
throw new Error(
|
|
65
|
-
`Invalid style key: ${key}. Expected only root, component, and layout
|
|
65
|
+
`Invalid style key: ${key}. Expected only root, component, and layout`,
|
|
66
66
|
);
|
|
67
67
|
}
|
|
68
68
|
}
|
|
@@ -107,7 +107,7 @@ export function validateSavedPaymentMethodsStyle(style: mixed): void {
|
|
|
107
107
|
const actual = typeof layout[key];
|
|
108
108
|
if (actual !== expected) {
|
|
109
109
|
throw new TypeError(
|
|
110
|
-
`Expected style.layout.${key} to be a ${expected}, got: ${layout[key]}
|
|
110
|
+
`Expected style.layout.${key} to be a ${expected}, got: ${layout[key]}`,
|
|
111
111
|
);
|
|
112
112
|
}
|
|
113
113
|
}
|
|
@@ -39,7 +39,7 @@ describe("validateSavedPaymentMethodsStyle", () => {
|
|
|
39
39
|
fiTextFontSize: "14px",
|
|
40
40
|
iconSize: "28px",
|
|
41
41
|
},
|
|
42
|
-
})
|
|
42
|
+
}),
|
|
43
43
|
).not.toThrow();
|
|
44
44
|
});
|
|
45
45
|
|
|
@@ -47,17 +47,17 @@ describe("validateSavedPaymentMethodsStyle", () => {
|
|
|
47
47
|
expect(() =>
|
|
48
48
|
validateSavedPaymentMethodsStyle({
|
|
49
49
|
root: { backgroundColor: "transparent" },
|
|
50
|
-
})
|
|
50
|
+
}),
|
|
51
51
|
).not.toThrow();
|
|
52
52
|
expect(() =>
|
|
53
53
|
validateSavedPaymentMethodsStyle({
|
|
54
54
|
component: { height: "40px" },
|
|
55
|
-
})
|
|
55
|
+
}),
|
|
56
56
|
).not.toThrow();
|
|
57
57
|
expect(() =>
|
|
58
58
|
validateSavedPaymentMethodsStyle({
|
|
59
59
|
layout: { logo: false },
|
|
60
|
-
})
|
|
60
|
+
}),
|
|
61
61
|
).not.toThrow();
|
|
62
62
|
});
|
|
63
63
|
|
|
@@ -69,49 +69,49 @@ describe("validateSavedPaymentMethodsStyle", () => {
|
|
|
69
69
|
|
|
70
70
|
it("rejects unknown top-level keys", () => {
|
|
71
71
|
expect(() => validateSavedPaymentMethodsStyle({ color: "red" })).toThrow(
|
|
72
|
-
/Invalid style key: color
|
|
72
|
+
/Invalid style key: color/,
|
|
73
73
|
);
|
|
74
74
|
});
|
|
75
75
|
|
|
76
76
|
it("rejects non-object root", () => {
|
|
77
77
|
expect(() => validateSavedPaymentMethodsStyle({ root: [] })).toThrow(
|
|
78
|
-
/Expected style\.root to be a plain object
|
|
78
|
+
/Expected style\.root to be a plain object/,
|
|
79
79
|
);
|
|
80
80
|
expect(() => validateSavedPaymentMethodsStyle({ root: "x" })).toThrow(
|
|
81
|
-
/Expected style\.root to be a plain object
|
|
81
|
+
/Expected style\.root to be a plain object/,
|
|
82
82
|
);
|
|
83
83
|
});
|
|
84
84
|
|
|
85
85
|
it("rejects unknown root keys and non-string root values", () => {
|
|
86
86
|
expect(() =>
|
|
87
|
-
validateSavedPaymentMethodsStyle({ root: { unknown: "a" } })
|
|
87
|
+
validateSavedPaymentMethodsStyle({ root: { unknown: "a" } }),
|
|
88
88
|
).toThrow(/Invalid style\.root key: unknown/);
|
|
89
89
|
expect(() =>
|
|
90
|
-
validateSavedPaymentMethodsStyle({ root: { backgroundColor: 1 } })
|
|
90
|
+
validateSavedPaymentMethodsStyle({ root: { backgroundColor: 1 } }),
|
|
91
91
|
).toThrow(/Expected style\.root\.backgroundColor to be a string/);
|
|
92
92
|
});
|
|
93
93
|
|
|
94
94
|
it("rejects unknown component keys and non-string component values", () => {
|
|
95
95
|
expect(() =>
|
|
96
|
-
validateSavedPaymentMethodsStyle({ component: { width: "1" } })
|
|
96
|
+
validateSavedPaymentMethodsStyle({ component: { width: "1" } }),
|
|
97
97
|
).toThrow(/Invalid style\.component key: width/);
|
|
98
98
|
expect(() =>
|
|
99
|
-
validateSavedPaymentMethodsStyle({ component: { height: true } })
|
|
99
|
+
validateSavedPaymentMethodsStyle({ component: { height: true } }),
|
|
100
100
|
).toThrow(/Expected style\.component\.height to be a string/);
|
|
101
101
|
});
|
|
102
102
|
|
|
103
103
|
it("rejects unknown layout keys", () => {
|
|
104
104
|
expect(() =>
|
|
105
|
-
validateSavedPaymentMethodsStyle({ layout: { extra: true } })
|
|
105
|
+
validateSavedPaymentMethodsStyle({ layout: { extra: true } }),
|
|
106
106
|
).toThrow(/Invalid style\.layout key: extra/);
|
|
107
107
|
});
|
|
108
108
|
|
|
109
109
|
it("rejects layout fields with wrong types", () => {
|
|
110
110
|
expect(() =>
|
|
111
|
-
validateSavedPaymentMethodsStyle({ layout: { logo: "yes" } })
|
|
111
|
+
validateSavedPaymentMethodsStyle({ layout: { logo: "yes" } }),
|
|
112
112
|
).toThrow(/Expected style\.layout\.logo to be a boolean/);
|
|
113
113
|
expect(() =>
|
|
114
|
-
validateSavedPaymentMethodsStyle({ layout: { logoWidth: true } })
|
|
114
|
+
validateSavedPaymentMethodsStyle({ layout: { logoWidth: true } }),
|
|
115
115
|
).toThrow(/Expected style\.layout\.logoWidth to be a string/);
|
|
116
116
|
});
|
|
117
117
|
});
|
|
@@ -235,7 +235,7 @@ export function getWalletComponent(): WalletComponent {
|
|
|
235
235
|
type: "function",
|
|
236
236
|
value: () => {
|
|
237
237
|
return (
|
|
238
|
-
fundingSources: $ReadOnlyArray<$Values<typeof FUNDING
|
|
238
|
+
fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
|
|
239
239
|
) => {
|
|
240
240
|
rememberFunding(fundingSources, { cookie: false });
|
|
241
241
|
};
|