@paypal/checkout-components 5.0.371 → 5.0.372

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 (7) hide show
  1. package/dist/button.js +1 -1
  2. package/dist/test/button.js +1 -1
  3. package/package.json +1 -1
  4. package/src/funding/venmo/config.jsx +11 -18
  5. package/src/funding/venmo/config.test.js +108 -49
  6. package/src/ui/overlay/paypal-app-switch/overlay.jsx +11 -15
  7. package/src/zoid/buttons/util.js +5 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paypal/checkout-components",
3
- "version": "5.0.371",
3
+ "version": "5.0.372",
4
4
  "description": "PayPal Checkout components, for integrating checkout products.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/funding/venmo/config.jsx CHANGED
@@ -22,17 +22,13 @@ export function getVenmoConfig(): FundingSourceConfig {
22
22
  layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
23
23
 
24
24
  eligible: ({ experiment, shippingChange, displayOnly, flow }) => {
25
+ // funding-eligiblity and enable-funding is truthy
25
26
  if (experiment?.enableVenmo === false) {
26
27
  return false;
27
28
  }
28
29
 
29
- /**
30
- * Shipping callbacks will not work with Venmo unless venmo web is enabled.
31
- */
32
- if (!experiment?.venmoWebEnabled && shippingChange) {
33
- return false;
34
- }
35
-
30
+ // shipping change is not supported for native app switch and qr code flows,
31
+ // and vaulting is only supported for native app switch and qr code flows
36
32
  if (
37
33
  shippingChange &&
38
34
  displayOnly?.includes(DISPLAY_ONLY_VALUES.VAULTABLE)
@@ -51,21 +47,18 @@ export function getVenmoConfig(): FundingSourceConfig {
51
47
  },
52
48
 
53
49
  requires: ({ experiment, platform }) => {
54
- if (
55
- platform === PLATFORM.MOBILE &&
56
- experiment &&
57
- experiment.venmoWebEnabled !== true &&
58
- experiment.venmoEnableWebOnNonNativeBrowser !== true
59
- ) {
50
+ const isNonNativeSupported =
51
+ experiment?.venmoEnableWebOnNonNativeBrowser === true ||
52
+ experiment?.isWebViewEnabled;
53
+
54
+ if (platform === PLATFORM.MOBILE) {
60
55
  return {
61
- native: experiment.isWebViewEnabled ? false : true,
62
- popup: experiment.isWebViewEnabled ? false : true,
56
+ native: isNonNativeSupported ? false : true,
57
+ popup: isNonNativeSupported ? false : true,
63
58
  };
64
59
  }
65
60
 
66
- return {
67
- popup: experiment?.isWebViewEnabled ? false : true,
68
- };
61
+ return {};
69
62
  },
70
63
 
71
64
  Logo: ({ logoColor, optional }) => {
package/src/funding/venmo/config.test.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* @flow */
2
2
 
3
3
  import { describe, expect } from "vitest";
4
+ import { DISPLAY_ONLY_VALUES, PLATFORM } from "@paypal/sdk-constants/src";
4
5
 
5
6
  import { BUTTON_FLOW } from "../../constants";
6
7
 
@@ -21,77 +22,135 @@ describe("Venmo eligibility", () => {
21
22
  };
22
23
  const venmoConfig = getVenmoConfig();
23
24
 
24
- test("should not be eligible if a shipping callback is passed and displayOnly=['vaultable']", () => {
25
- const isVenmoEligible = venmoConfig.eligible?.({
26
- ...baseEligibilityProps,
27
- shippingChange: true,
28
- displayOnly: ["vaultable"],
25
+ describe("eligible", () => {
26
+ test("should be eligible if fundingEligibility is true and enable-funding is set", () => {
27
+ const isVenmoEligible = venmoConfig.eligible?.({
28
+ ...baseEligibilityProps,
29
+ experiment: {
30
+ enableVenmo: true,
31
+ },
32
+ });
33
+
34
+ expect(isVenmoEligible).toEqual(true);
29
35
  });
30
36
 
31
- expect(isVenmoEligible).toEqual(false);
32
- });
37
+ test("should be not eligible if fundingEligibility is false || enable-funding is not set", () => {
38
+ const isVenmoEligible = venmoConfig.eligible?.({
39
+ ...baseEligibilityProps,
40
+ experiment: {
41
+ enableVenmo: false,
42
+ },
43
+ });
33
44
 
34
- test("should be eligible if a shipping callback is present but not displayOnly", () => {
35
- const isVenmoEligible = venmoConfig.eligible?.({
36
- ...baseEligibilityProps,
37
- shippingChange: true,
45
+ expect(isVenmoEligible).toEqual(false);
38
46
  });
39
47
 
40
- expect(isVenmoEligible).toEqual(true);
41
- });
48
+ test("should not be eligible if a shipping callback is passed and displayOnly=['vaultable']", () => {
49
+ const isVenmoEligible = venmoConfig.eligible?.({
50
+ ...baseEligibilityProps,
51
+ shippingChange: true,
52
+ displayOnly: [DISPLAY_ONLY_VALUES.VAULTABLE],
53
+ });
42
54
 
43
- test("should be eligible if displayOnly=['vaultable'] but no shipping callback is present", () => {
44
- const isVenmoEligible = venmoConfig.eligible?.({
45
- ...baseEligibilityProps,
46
- displayOnly: ["vaultable"],
55
+ expect(isVenmoEligible).toEqual(false);
47
56
  });
48
57
 
49
- expect(isVenmoEligible).toEqual(true);
50
- });
58
+ test("should be eligible if a shipping callback is present but not displayOnly", () => {
59
+ const isVenmoEligible = venmoConfig.eligible?.({
60
+ ...baseEligibilityProps,
61
+ shippingChange: true,
62
+ });
51
63
 
52
- test("should be eligible if neither a shipping callback nor displayOnly is present", () => {
53
- const isVenmoEligible = venmoConfig.eligible?.(baseEligibilityProps);
64
+ expect(isVenmoEligible).toEqual(true);
65
+ });
54
66
 
55
- expect(isVenmoEligible).toEqual(true);
56
- });
67
+ test("should be eligible if displayOnly=['vaultable'] but no shipping callback is present", () => {
68
+ const isVenmoEligible = venmoConfig.eligible?.({
69
+ ...baseEligibilityProps,
70
+ displayOnly: [DISPLAY_ONLY_VALUES.VAULTABLE],
71
+ });
57
72
 
58
- test("should not be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is false", () => {
59
- const isVenmoEligible = venmoConfig.eligible?.({
60
- ...baseEligibilityProps,
61
- flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
73
+ expect(isVenmoEligible).toEqual(true);
62
74
  });
63
75
 
64
- expect(isVenmoEligible).toEqual(false);
65
- });
76
+ test("should be eligible if neither a shipping callback nor displayOnly is present", () => {
77
+ const isVenmoEligible = venmoConfig.eligible?.(baseEligibilityProps);
66
78
 
67
- test("should be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is true", () => {
68
- const isVenmoEligible = venmoConfig.eligible?.({
69
- ...baseEligibilityProps,
70
- flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
71
- experiment: {
72
- venmoVaultWithoutPurchase: true,
73
- },
79
+ expect(isVenmoEligible).toEqual(true);
74
80
  });
75
81
 
76
- expect(isVenmoEligible).toEqual(true);
77
- });
82
+ test("should not be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is false", () => {
83
+ const isVenmoEligible = venmoConfig.eligible?.({
84
+ ...baseEligibilityProps,
85
+ flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
86
+ });
78
87
 
79
- test("should not be eligible if a shipping callback is passed & experiment does not include venmoWebEnabled or venmoEnableWebOnNonNativeBrowser", () => {
80
- const isVenmoEligible = venmoConfig.eligible?.({
81
- ...baseEligibilityProps,
82
- experiment: {},
83
- shippingChange: true,
88
+ expect(isVenmoEligible).toEqual(false);
84
89
  });
85
90
 
86
- expect(isVenmoEligible).toEqual(false);
91
+ test("should be eligible if flow is VAULT_WITHOUT_PURCHASE and venmoVaultWithoutPurchase is true", () => {
92
+ const isVenmoEligible = venmoConfig.eligible?.({
93
+ ...baseEligibilityProps,
94
+ flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
95
+ experiment: {
96
+ venmoVaultWithoutPurchase: true,
97
+ },
98
+ });
99
+
100
+ expect(isVenmoEligible).toEqual(true);
101
+ });
87
102
  });
88
103
 
89
- test("should be eligible if shipping callback exists & experiment includes venmoWebEnabled or venmoEnableWebOnNonNativeBrowser", () => {
90
- const isVenmoEligible = venmoConfig.eligible?.({
91
- ...baseEligibilityProps,
92
- shippingChange: true,
104
+ describe("requires", () => {
105
+ test("should not check for native or popup eligibility if platform is mobile and isWebViewEnabled is true", () => {
106
+ const isVenmoEligible = venmoConfig.requires?.({
107
+ experiment: {
108
+ isWebViewEnabled: true,
109
+ },
110
+ platform: PLATFORM.MOBILE,
111
+ });
112
+
113
+ expect(isVenmoEligible).toEqual({
114
+ native: false,
115
+ popup: false,
116
+ });
117
+ });
118
+
119
+ test("should not check for native or popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is true", () => {
120
+ const isVenmoEligible = venmoConfig.requires?.({
121
+ experiment: {
122
+ venmoEnableWebOnNonNativeBrowser: true,
123
+ },
124
+ platform: PLATFORM.MOBILE,
125
+ });
126
+
127
+ expect(isVenmoEligible).toEqual({
128
+ native: false,
129
+ popup: false,
130
+ });
93
131
  });
94
132
 
95
- expect(isVenmoEligible).toEqual(true);
133
+ test("should check for native and popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is false and isWebViewEnabled is false", () => {
134
+ const isVenmoEligible = venmoConfig.requires?.({
135
+ experiment: {
136
+ isWebViewEnabled: false,
137
+ venmoEnableWebOnNonNativeBrowser: false,
138
+ },
139
+ platform: PLATFORM.MOBILE,
140
+ });
141
+
142
+ expect(isVenmoEligible).toEqual({
143
+ native: true,
144
+ popup: true,
145
+ });
146
+ });
147
+
148
+ test("should not check for native and popup eligibility if platform is not mobile", () => {
149
+ const isVenmoEligible = venmoConfig.requires?.({
150
+ platform: PLATFORM.DESKTOP,
151
+ });
152
+
153
+ expect(isVenmoEligible).toEqual({});
154
+ });
96
155
  });
97
156
  });
package/src/ui/overlay/paypal-app-switch/overlay.jsx CHANGED
@@ -87,21 +87,17 @@ export function PayPalAppSwitchOverlay({
87
87
  <div class="paypal-checkout-logo" dir="ltr">
88
88
  <PayPalRebrandLogo logoColor={LOGO_COLOR.WHITE} />
89
89
  </div>
90
- {content.windowMessage && (
91
- <div class="paypal-checkout-message">
92
- {content.windowMessage}
93
- </div>
94
- )}
95
- {content.continueMessage && (
96
- <div class="paypal-checkout-continue">
97
- {/* This handler should be guarded with e.stopPropagation.
98
- This will stop the event from bubbling up to the overlay click handler
99
- and causing unexpected behavior. */}
100
- <a onClick={focusCheckout} href="#">
101
- {content.continueMessage}
102
- </a>
103
- </div>
104
- )}
90
+ <div class="paypal-checkout-message">
91
+ {content.windowMessage}
92
+ </div>
93
+ <div class="paypal-checkout-continue">
94
+ {/* This handler should be guarded with e.stopPropagation.
95
+ This will stop the event from bubbling up to the overlay click handler
96
+ and causing unexpected behavior. */}
97
+ <a onClick={focusCheckout} href="#">
98
+ {content.continueMessage}
99
+ </a>
100
+ </div>
105
101
  </div>
106
102
  <style nonce={nonce}>{getContainerStyle({ uid })}</style>
107
103
  </div>
package/src/zoid/buttons/util.js CHANGED
@@ -126,16 +126,11 @@ export function getVenmoEligibility(): EligibilityExperiment {
126
126
 
127
127
  const isVenmoFundingEnabled =
128
128
  enableFunding && enableFunding.indexOf(FUNDING.VENMO) !== -1;
129
- const isNativeSupported = isSupportedNativeBrowser();
130
- if (isDevice()) {
131
- return {
132
- enableVenmo: isVenmoFundingEnabled && isNativeSupported,
133
- };
134
- } else {
135
- return {
136
- enableVenmo: fundingEligibility?.venmo?.eligible || false,
137
- };
138
- }
129
+
130
+ return {
131
+ enableVenmo:
132
+ (fundingEligibility?.venmo?.eligible || false) && isVenmoFundingEnabled,
133
+ };
139
134
  }
140
135
 
141
136
  export function getRenderedButtons(