@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.
Files changed (67) hide show
  1. package/dist/button.js +1 -1
  2. package/dist/test/button.js +1 -1
  3. package/package.json +8 -8
  4. package/src/connect/component.jsx +1 -1
  5. package/src/connect/component.test.js +2 -2
  6. package/src/funding/card/config.jsx +3 -3
  7. package/src/funding/card/config.test.jsx +10 -10
  8. package/src/funding/funding.js +6 -6
  9. package/src/funding/funding.test.js +3 -3
  10. package/src/funding/paylater/config.jsx +2 -2
  11. package/src/funding/paypal/template.jsx +8 -8
  12. package/src/funding/util.js +2 -2
  13. package/src/funding/util.test.js +16 -16
  14. package/src/hosted-buttons/index.test.js +9 -9
  15. package/src/hosted-buttons/types.js +3 -3
  16. package/src/hosted-buttons/utils.js +8 -8
  17. package/src/hosted-buttons/utils.test.js +43 -43
  18. package/src/lib/api.js +2 -2
  19. package/src/lib/appSwitchResume.js +1 -1
  20. package/src/lib/perceived-latency-instrumentation.js +1 -1
  21. package/src/lib/security.js +1 -1
  22. package/src/marks/component.jsx +4 -4
  23. package/src/marks/templateRebrand.test.jsx +1 -1
  24. package/src/shopper-insights/shopperSession.js +13 -13
  25. package/src/shopper-insights/shopperSession.test.js +25 -25
  26. package/src/three-domain-secure/api.js +1 -1
  27. package/src/three-domain-secure/api.test.js +4 -4
  28. package/src/three-domain-secure/component.jsx +3 -3
  29. package/src/three-domain-secure/component.test.js +14 -14
  30. package/src/ui/buttons/buttons.jsx +2 -2
  31. package/src/ui/buttons/buttons.test.js +4 -4
  32. package/src/ui/buttons/config.js +1 -1
  33. package/src/ui/buttons/poweredBy.jsx +1 -1
  34. package/src/ui/buttons/props.bnpl.test.js +1 -1
  35. package/src/ui/buttons/props.js +43 -43
  36. package/src/ui/buttons/props.test.js +8 -8
  37. package/src/ui/buttons/script.jsx +10 -10
  38. package/src/ui/buttons/styles/button.js +2 -2
  39. package/src/ui/buttons/styles/disableMaxHeightConfig.test.js +1 -1
  40. package/src/ui/buttons/styles/labelContainerHeight.test.js +5 -5
  41. package/src/ui/buttons/styles/labels.js +7 -7
  42. package/src/ui/buttons/styles/page.js +1 -1
  43. package/src/ui/buttons/styles/responsive.js +137 -137
  44. package/src/ui/buttons/styles/styleUtils.js +14 -12
  45. package/src/ui/buttons/styles/styleUtils.test.constants.js +731 -0
  46. package/src/ui/buttons/styles/styleUtils.test.js +198 -610
  47. package/src/ui/buttons/util.js +4 -4
  48. package/src/ui/overlay/paypal-app-switch/style.jsx +1 -1
  49. package/src/ui/overlay/three-domain-secure/overlay.jsx +1 -1
  50. package/src/ui/overlay/three-domain-secure/style.jsx +1 -1
  51. package/src/ui/saved-payment-methods/template.jsx +1 -1
  52. package/src/ui/text/text.jsx +1 -1
  53. package/src/zoid/buttons/component.jsx +13 -13
  54. package/src/zoid/buttons/container.jsx +2 -2
  55. package/src/zoid/buttons/prerender.jsx +3 -3
  56. package/src/zoid/buttons/util.js +10 -10
  57. package/src/zoid/buttons/util.test.js +2 -2
  58. package/src/zoid/card-fields/component.jsx +8 -9
  59. package/src/zoid/card-form/component.js +3 -3
  60. package/src/zoid/checkout/component.jsx +2 -2
  61. package/src/zoid/payment-fields/component.jsx +1 -1
  62. package/src/zoid/qr-code/container.test.jsx +2 -2
  63. package/src/zoid/qr-code/prerender.test.jsx +1 -1
  64. package/src/zoid/saved-payment-methods/component.jsx +8 -8
  65. package/src/zoid/saved-payment-methods/util.js +2 -2
  66. package/src/zoid/saved-payment-methods/util.test.js +14 -14
  67. package/src/zoid/wallet/component.jsx +1 -1
@@ -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: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
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: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
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);
@@ -22,7 +22,7 @@ type TextProps = {|
22
22
 
23
23
  export function Text(
24
24
  { optional, className = [], animate, ...rest }: TextProps,
25
- children: NullableChildrenType
25
+ children: NullableChildrenType,
26
26
  ): ChildType {
27
27
  return (
28
28
  <span
@@ -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
- props.onShippingAddressChange ||
1141
- props.onShippingOptionsChange
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
 
@@ -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
- isDevice() &&
427
- appSwitchWhenAvailable &&
428
- experiment.spbEagerOrderCreation
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
- props.onShippingAddressChange ||
302
- props.onShippingOptionsChange
301
+ props.onShippingAddressChange ||
302
+ props.onShippingOptionsChange,
303
303
  );
304
304
  },
305
305
  },
@@ -76,7 +76,7 @@ export function getPaymentFieldsComponent(): PaymentFieldsComponent {
76
76
 
77
77
  prerenderTemplate: ({ props, doc }) => {
78
78
  return (<PaymentFieldsPrerender nonce={props.nonce} />).render(
79
- dom({ doc })
79
+ dom({ doc }),
80
80
  );
81
81
  },
82
82
 
@@ -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
  };