@paypal/checkout-components 5.0.416 → 5.0.420
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 +2 -2
- package/src/constants/button.js +0 -8
- package/src/funding/applepay/config.jsx +19 -1
- package/src/funding/card/config.jsx +15 -9
- package/src/funding/card/config.test.jsx +4 -8
- package/src/funding/common.jsx +51 -14
- package/src/funding/credit/config.jsx +16 -17
- package/src/funding/index.js +1 -0
- package/src/funding/itau/config.jsx +23 -5
- package/src/funding/paylater/config.jsx +9 -13
- package/src/funding/paypal/config.jsx +13 -8
- package/src/funding/sepa/config.jsx +11 -8
- package/src/funding/util.js +37 -0
- package/src/funding/util.test.js +84 -1
- package/src/funding/venmo/config.jsx +22 -12
- package/src/ui/buttons/button.jsx +9 -12
- package/src/ui/buttons/poweredBy.jsx +8 -8
- package/src/ui/buttons/props.js +55 -40
- package/src/ui/buttons/props.test.js +139 -77
- package/src/ui/buttons/styles/color.js +30 -26
- package/src/zoid/buttons/component.jsx +4 -3
- package/src/zoid/buttons/prerender.jsx +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paypal/checkout-components",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.420",
|
|
4
4
|
"description": "PayPal Checkout components, for integrating checkout products.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
"@paypal/common-components": "^1.0.35",
|
|
123
123
|
"@paypal/funding-components": "^1.0.31",
|
|
124
124
|
"@paypal/sdk-client": "^4.0.199",
|
|
125
|
-
"@paypal/sdk-constants": "^1.0.
|
|
125
|
+
"@paypal/sdk-constants": "^1.0.158",
|
|
126
126
|
"@paypal/sdk-logos": "^2.3.7"
|
|
127
127
|
},
|
|
128
128
|
"lint-staged": {
|
package/src/constants/button.js
CHANGED
|
@@ -10,13 +10,6 @@ export const BUTTON_LABEL = {
|
|
|
10
10
|
DONATE: ("donate": "donate"),
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
export const BUTTON_COLOR_REBRAND = {
|
|
14
|
-
REBRAND_BLUE: ("rebrand_blue": "rebrand_blue"),
|
|
15
|
-
REBRAND_DARKBLUE: ("rebrand_darkblue": "rebrand_darkblue"),
|
|
16
|
-
REBRAND_BLACK: ("rebrand_black": "rebrand_black"),
|
|
17
|
-
REBRAND_WHITE: ("rebrand_white": "rebrand_white"),
|
|
18
|
-
};
|
|
19
|
-
|
|
20
13
|
export const BUTTON_COLOR = {
|
|
21
14
|
DEFAULT: ("default": "default"),
|
|
22
15
|
GOLD: ("gold": "gold"),
|
|
@@ -25,7 +18,6 @@ export const BUTTON_COLOR = {
|
|
|
25
18
|
DARKBLUE: ("darkblue": "darkblue"),
|
|
26
19
|
BLACK: ("black": "black"),
|
|
27
20
|
WHITE: ("white": "white"),
|
|
28
|
-
...BUTTON_COLOR_REBRAND,
|
|
29
21
|
};
|
|
30
22
|
|
|
31
23
|
export const TEXT_COLOR = {
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
LOGO_COLOR,
|
|
9
9
|
} from "@paypal/sdk-logos/src";
|
|
10
10
|
|
|
11
|
-
import { BUTTON_COLOR, BUTTON_LAYOUT } from "../../constants";
|
|
11
|
+
import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from "../../constants";
|
|
12
12
|
import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
|
|
13
13
|
|
|
14
14
|
import { Mark } from "./template";
|
|
@@ -51,12 +51,30 @@ export function getApplePayConfig(): FundingSourceConfig {
|
|
|
51
51
|
Mark: ({ ...props }) => Mark({ ...props }),
|
|
52
52
|
|
|
53
53
|
colors: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
54
|
+
colorsRebrand: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
54
55
|
|
|
55
56
|
logoColors: {
|
|
56
57
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
57
58
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
58
59
|
},
|
|
59
60
|
|
|
61
|
+
logoColorsRebrand: {
|
|
62
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
63
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
textColorsRebrand: {
|
|
67
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.WHITE,
|
|
68
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
secondaryColorsRebrand: {
|
|
72
|
+
[DEFAULT]: BUTTON_COLOR.BLACK,
|
|
73
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLACK,
|
|
74
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
75
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
76
|
+
},
|
|
77
|
+
|
|
60
78
|
shippingChange: true,
|
|
61
79
|
};
|
|
62
80
|
}
|
|
@@ -58,6 +58,8 @@ export function getCardConfig(): FundingSourceConfig {
|
|
|
58
58
|
return {
|
|
59
59
|
...DEFAULT_FUNDING_CONFIG,
|
|
60
60
|
|
|
61
|
+
colorsRebrand: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
62
|
+
|
|
61
63
|
eligible: ({ components, fundingSource, fundingEligibility, wallet }) => {
|
|
62
64
|
const cardEligibility = fundingEligibility.card;
|
|
63
65
|
|
|
@@ -131,26 +133,30 @@ export function getCardConfig(): FundingSourceConfig {
|
|
|
131
133
|
|
|
132
134
|
vendors,
|
|
133
135
|
|
|
134
|
-
colors: [
|
|
135
|
-
BUTTON_COLOR.BLACK,
|
|
136
|
-
BUTTON_COLOR.WHITE,
|
|
137
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
138
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
139
|
-
],
|
|
136
|
+
colors: [BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
140
137
|
|
|
141
138
|
secondaryColors: {
|
|
142
139
|
...DEFAULT_FUNDING_CONFIG.secondaryColors,
|
|
143
140
|
[DEFAULT]: BUTTON_COLOR.BLACK,
|
|
144
|
-
|
|
141
|
+
},
|
|
142
|
+
|
|
143
|
+
secondaryColorsRebrand: {
|
|
144
|
+
...DEFAULT_FUNDING_CONFIG.secondaryColorsRebrand,
|
|
145
|
+
[DEFAULT]: BUTTON_COLOR.BLACK,
|
|
146
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLACK,
|
|
145
147
|
},
|
|
146
148
|
|
|
147
149
|
logoColors: {
|
|
148
150
|
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
|
|
149
|
-
[BUTTON_COLOR.REBRAND_WHITE]: BUTTON_COLOR.BLACK,
|
|
150
|
-
[BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.WHITE,
|
|
151
151
|
[DEFAULT]: BUTTON_COLOR.WHITE,
|
|
152
152
|
},
|
|
153
153
|
|
|
154
|
+
logoColorsRebrand: {
|
|
155
|
+
[DEFAULT]: BUTTON_COLOR.WHITE,
|
|
156
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.WHITE,
|
|
157
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
|
|
158
|
+
},
|
|
159
|
+
|
|
154
160
|
labelText: ({ content }) => {
|
|
155
161
|
if (!__WEB__ && content) {
|
|
156
162
|
return content.payWithDebitOrCreditCard;
|
|
@@ -142,22 +142,18 @@ describe("card eligibility", () => {
|
|
|
142
142
|
});
|
|
143
143
|
|
|
144
144
|
describe("rebrand card config", () => {
|
|
145
|
-
test("should have
|
|
145
|
+
test("should have standard colors", () => {
|
|
146
146
|
const colors = getCardConfig().colors;
|
|
147
147
|
expect(colors).toEqual(
|
|
148
|
-
expect.arrayContaining([
|
|
149
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
150
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
151
|
-
])
|
|
148
|
+
expect.arrayContaining([BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE])
|
|
152
149
|
);
|
|
153
150
|
});
|
|
154
151
|
|
|
155
|
-
test("should have
|
|
152
|
+
test("should have standard logo colors", () => {
|
|
156
153
|
const logoColors = getCardConfig().logoColors;
|
|
157
154
|
expect(logoColors).toEqual(
|
|
158
155
|
expect.objectContaining({
|
|
159
|
-
[BUTTON_COLOR.
|
|
160
|
-
[BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.WHITE,
|
|
156
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
|
|
161
157
|
})
|
|
162
158
|
);
|
|
163
159
|
});
|
package/src/funding/common.jsx
CHANGED
|
@@ -127,14 +127,24 @@ export type FundingSourceConfig = {|
|
|
|
127
127
|
WalletLabel?: (WalletLabelOptions) => ?ChildType,
|
|
128
128
|
Tag?: (TagOptions) => ?ChildType,
|
|
129
129
|
colors: $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
|
|
130
|
+
colorsRebrand?: $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
|
|
130
131
|
textColors: { [$Values<typeof BUTTON_COLOR>]: $Values<typeof TEXT_COLOR> },
|
|
132
|
+
textColorsRebrand: {
|
|
133
|
+
[$Values<typeof BUTTON_COLOR>]: $Values<typeof TEXT_COLOR>,
|
|
134
|
+
},
|
|
131
135
|
secondaryColors: {
|
|
132
136
|
[$Values<typeof BUTTON_COLOR>]: $Values<typeof BUTTON_COLOR>,
|
|
133
137
|
},
|
|
138
|
+
secondaryColorsRebrand: {
|
|
139
|
+
[$Values<typeof BUTTON_COLOR>]: $Values<typeof BUTTON_COLOR>,
|
|
140
|
+
},
|
|
134
141
|
secondaryVaultColors: {
|
|
135
142
|
[$Values<typeof BUTTON_COLOR>]: $Values<typeof BUTTON_COLOR>,
|
|
136
143
|
},
|
|
137
144
|
logoColors: { [$Values<typeof BUTTON_COLOR>]: $Values<typeof LOGO_COLOR> },
|
|
145
|
+
logoColorsRebrand: {
|
|
146
|
+
[$Values<typeof BUTTON_COLOR>]: $Values<typeof LOGO_COLOR>,
|
|
147
|
+
},
|
|
138
148
|
logoColorsPP?: { [$Values<typeof BUTTON_COLOR>]: $Values<typeof LOGO_COLOR> },
|
|
139
149
|
shapes: $ReadOnlyArray<$Values<typeof BUTTON_SHAPE>>,
|
|
140
150
|
labelText?:
|
|
@@ -206,10 +216,17 @@ export const DEFAULT_FUNDING_CONFIG: FundingSourceConfig = {
|
|
|
206
216
|
|
|
207
217
|
colors: [BUTTON_COLOR.SILVER, BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
208
218
|
|
|
219
|
+
colorsRebrand: [BUTTON_COLOR.BLUE, BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
220
|
+
|
|
209
221
|
logoColors: {
|
|
210
222
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
211
223
|
},
|
|
212
224
|
|
|
225
|
+
logoColorsRebrand: {
|
|
226
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
227
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
228
|
+
},
|
|
229
|
+
|
|
213
230
|
shapes: [BUTTON_SHAPE.RECT, BUTTON_SHAPE.PILL, BUTTON_SHAPE.SHARP],
|
|
214
231
|
|
|
215
232
|
textColors: {
|
|
@@ -217,20 +234,28 @@ export const DEFAULT_FUNDING_CONFIG: FundingSourceConfig = {
|
|
|
217
234
|
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.WHITE,
|
|
218
235
|
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.WHITE,
|
|
219
236
|
[BUTTON_COLOR.DARKBLUE]: BUTTON_COLOR.WHITE,
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
[
|
|
237
|
+
},
|
|
238
|
+
|
|
239
|
+
textColorsRebrand: {
|
|
240
|
+
[DEFAULT]: BUTTON_COLOR.BLACK,
|
|
241
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLACK, // maybe delete me and only have white/black in default
|
|
242
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.WHITE,
|
|
243
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
|
|
224
244
|
},
|
|
225
245
|
|
|
226
246
|
secondaryColors: {
|
|
227
247
|
[DEFAULT]: BUTTON_COLOR.SILVER,
|
|
228
248
|
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
229
249
|
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
230
|
-
[BUTTON_COLOR.REBRAND_WHITE]: BUTTON_COLOR.REBRAND_WHITE,
|
|
231
|
-
[BUTTON_COLOR.REBRAND_BLACK]: BUTTON_COLOR.REBRAND_BLACK,
|
|
232
250
|
},
|
|
233
251
|
|
|
252
|
+
secondaryColorsRebrand: {
|
|
253
|
+
[DEFAULT]: BUTTON_COLOR.WHITE,
|
|
254
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
255
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
256
|
+
},
|
|
257
|
+
|
|
258
|
+
// todo where is this used?
|
|
234
259
|
secondaryVaultColors: {
|
|
235
260
|
[DEFAULT]: BUTTON_COLOR.SILVER,
|
|
236
261
|
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
@@ -256,17 +281,21 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
|
|
|
256
281
|
BUTTON_COLOR.SILVER,
|
|
257
282
|
BUTTON_COLOR.WHITE,
|
|
258
283
|
BUTTON_COLOR.BLACK,
|
|
259
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
260
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
261
284
|
],
|
|
262
285
|
|
|
286
|
+
colorsRebrand: [BUTTON_COLOR.DEFAULT, BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
287
|
+
|
|
263
288
|
logoColors: {
|
|
264
289
|
[BUTTON_COLOR.DEFAULT]: LOGO_COLOR.DEFAULT,
|
|
265
290
|
[BUTTON_COLOR.SILVER]: LOGO_COLOR.BLACK,
|
|
266
291
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
267
292
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
268
|
-
|
|
269
|
-
|
|
293
|
+
},
|
|
294
|
+
|
|
295
|
+
logoColorsRebrand: {
|
|
296
|
+
[BUTTON_COLOR.DEFAULT]: LOGO_COLOR.DEFAULT,
|
|
297
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
298
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
270
299
|
},
|
|
271
300
|
|
|
272
301
|
textColors: {
|
|
@@ -274,8 +303,12 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
|
|
|
274
303
|
[BUTTON_COLOR.BLACK]: TEXT_COLOR.WHITE,
|
|
275
304
|
[BUTTON_COLOR.SILVER]: TEXT_COLOR.BLACK,
|
|
276
305
|
[BUTTON_COLOR.WHITE]: TEXT_COLOR.BLACK,
|
|
277
|
-
|
|
278
|
-
|
|
306
|
+
},
|
|
307
|
+
|
|
308
|
+
textColorsRebrand: {
|
|
309
|
+
[BUTTON_COLOR.DEFAULT]: TEXT_COLOR.WHITE,
|
|
310
|
+
[BUTTON_COLOR.BLACK]: TEXT_COLOR.WHITE,
|
|
311
|
+
[BUTTON_COLOR.WHITE]: TEXT_COLOR.BLACK,
|
|
279
312
|
},
|
|
280
313
|
|
|
281
314
|
secondaryColors: {
|
|
@@ -283,7 +316,11 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
|
|
|
283
316
|
[BUTTON_COLOR.SILVER]: BUTTON_COLOR.SILVER,
|
|
284
317
|
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
285
318
|
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
286
|
-
|
|
287
|
-
|
|
319
|
+
},
|
|
320
|
+
|
|
321
|
+
secondaryColorsRebrand: {
|
|
322
|
+
[DEFAULT]: BUTTON_COLOR.DEFAULT,
|
|
323
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
324
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
288
325
|
},
|
|
289
326
|
};
|
|
@@ -134,35 +134,34 @@ export function getCreditConfig(): FundingSourceConfig {
|
|
|
134
134
|
|
|
135
135
|
WalletLabel,
|
|
136
136
|
|
|
137
|
-
colors: [
|
|
138
|
-
BUTTON_COLOR.DARKBLUE,
|
|
139
|
-
BUTTON_COLOR.BLACK,
|
|
140
|
-
BUTTON_COLOR.WHITE,
|
|
141
|
-
BUTTON_COLOR.REBRAND_BLUE,
|
|
142
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
143
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
144
|
-
],
|
|
137
|
+
colors: [BUTTON_COLOR.DARKBLUE, BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE],
|
|
145
138
|
|
|
146
139
|
secondaryColors: {
|
|
147
140
|
...DEFAULT_FUNDING_CONFIG.secondaryColors,
|
|
148
141
|
[DEFAULT]: BUTTON_COLOR.DARKBLUE,
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
142
|
+
},
|
|
143
|
+
|
|
144
|
+
secondaryColorsRebrand: {
|
|
145
|
+
...DEFAULT_FUNDING_CONFIG.secondaryColorsRebrand,
|
|
146
|
+
[DEFAULT]: BUTTON_COLOR.BLUE,
|
|
147
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
|
|
152
148
|
},
|
|
153
149
|
|
|
154
150
|
logoColors: {
|
|
155
151
|
[DEFAULT]: LOGO_COLOR.WHITE,
|
|
156
152
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
|
|
157
|
-
[BUTTON_COLOR.REBRAND_BLUE]: LOGO_COLOR.BLACK,
|
|
158
|
-
[BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLACK,
|
|
159
|
-
[BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
|
|
160
153
|
},
|
|
161
154
|
|
|
162
155
|
logoColorsPP: {
|
|
163
|
-
[BUTTON_COLOR.
|
|
164
|
-
[BUTTON_COLOR.
|
|
165
|
-
[BUTTON_COLOR.
|
|
156
|
+
[BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
|
|
157
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
|
|
158
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
159
|
+
},
|
|
160
|
+
|
|
161
|
+
logoColorsRebrand: {
|
|
162
|
+
...DEFAULT_FUNDING_CONFIG.logoColorsRebrand,
|
|
163
|
+
[DEFAULT]: LOGO_COLOR.BLACK,
|
|
164
|
+
[BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
|
|
166
165
|
},
|
|
167
166
|
|
|
168
167
|
labelText: FUNDING_BRAND_LABEL.CREDIT,
|
package/src/funding/index.js
CHANGED
|
@@ -7,7 +7,12 @@ import {
|
|
|
7
7
|
LOGO_COLOR,
|
|
8
8
|
} from "@paypal/sdk-logos/src";
|
|
9
9
|
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
BUTTON_COLOR,
|
|
12
|
+
BUTTON_LAYOUT,
|
|
13
|
+
DEFAULT,
|
|
14
|
+
TEXT_COLOR,
|
|
15
|
+
} from "../../constants";
|
|
11
16
|
import {
|
|
12
17
|
DEFAULT_APM_FUNDING_CONFIG,
|
|
13
18
|
type FundingSourceConfig,
|
|
@@ -32,17 +37,30 @@ export function getItauConfig(): FundingSourceConfig {
|
|
|
32
37
|
BUTTON_COLOR.DARKBLUE,
|
|
33
38
|
BUTTON_COLOR.BLUE,
|
|
34
39
|
BUTTON_COLOR.BLACK,
|
|
35
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
36
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
37
40
|
],
|
|
38
41
|
|
|
42
|
+
secondaryColorsRebrand: {
|
|
43
|
+
...DEFAULT_APM_FUNDING_CONFIG.secondaryColorsRebrand,
|
|
44
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.DARKBLUE,
|
|
45
|
+
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
46
|
+
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.DEFAULT,
|
|
47
|
+
},
|
|
48
|
+
|
|
39
49
|
logoColors: {
|
|
40
50
|
[BUTTON_COLOR.DEFAULT]: LOGO_COLOR.WHITE,
|
|
41
51
|
[BUTTON_COLOR.DARKBLUE]: LOGO_COLOR.WHITE,
|
|
42
52
|
[BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
|
|
43
53
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
44
|
-
|
|
45
|
-
|
|
54
|
+
},
|
|
55
|
+
|
|
56
|
+
logoColorsRebrand: {
|
|
57
|
+
...DEFAULT_APM_FUNDING_CONFIG.logoColorsRebrand,
|
|
58
|
+
[BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
|
|
59
|
+
},
|
|
60
|
+
|
|
61
|
+
textColorsRebrand: {
|
|
62
|
+
...DEFAULT_APM_FUNDING_CONFIG.textColorsRebrand,
|
|
63
|
+
[BUTTON_COLOR.BLUE]: TEXT_COLOR.BLACK,
|
|
46
64
|
},
|
|
47
65
|
|
|
48
66
|
secondaryColors: {
|
|
@@ -151,9 +151,6 @@ export function getPaylaterConfig(): FundingSourceConfig {
|
|
|
151
151
|
BUTTON_COLOR.GOLD,
|
|
152
152
|
BUTTON_COLOR.BLUE,
|
|
153
153
|
BUTTON_COLOR.SILVER,
|
|
154
|
-
BUTTON_COLOR.REBRAND_BLUE,
|
|
155
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
156
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
157
154
|
],
|
|
158
155
|
|
|
159
156
|
secondaryColors: {
|
|
@@ -163,9 +160,12 @@ export function getPaylaterConfig(): FundingSourceConfig {
|
|
|
163
160
|
[BUTTON_COLOR.SILVER]: BUTTON_COLOR.SILVER,
|
|
164
161
|
[BUTTON_COLOR.BLACK]: BUTTON_COLOR.BLACK,
|
|
165
162
|
[BUTTON_COLOR.WHITE]: BUTTON_COLOR.WHITE,
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
163
|
+
},
|
|
164
|
+
|
|
165
|
+
secondaryColorsRebrand: {
|
|
166
|
+
...DEFAULT_FUNDING_CONFIG.secondaryColorsRebrand,
|
|
167
|
+
[DEFAULT]: BUTTON_COLOR.BLUE,
|
|
168
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
|
|
169
169
|
},
|
|
170
170
|
|
|
171
171
|
logoColors: {
|
|
@@ -174,15 +174,11 @@ export function getPaylaterConfig(): FundingSourceConfig {
|
|
|
174
174
|
[BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
|
|
175
175
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
176
176
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
|
|
177
|
-
[BUTTON_COLOR.REBRAND_BLUE]: LOGO_COLOR.BLACK,
|
|
178
|
-
[BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLACK,
|
|
179
|
-
[BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
|
|
180
177
|
},
|
|
181
178
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
[BUTTON_COLOR.
|
|
185
|
-
[BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
|
|
179
|
+
logoColorsRebrand: {
|
|
180
|
+
...DEFAULT_FUNDING_CONFIG.logoColorsRebrand,
|
|
181
|
+
[BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
|
|
186
182
|
},
|
|
187
183
|
|
|
188
184
|
labelText: ({ fundingEligibility, locale }) => {
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
BUTTON_LAYOUT,
|
|
10
10
|
BUTTON_FLOW,
|
|
11
11
|
BUTTON_LABEL,
|
|
12
|
+
DEFAULT,
|
|
12
13
|
} from "../../constants";
|
|
13
14
|
import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
|
|
14
15
|
|
|
@@ -34,10 +35,6 @@ export function getPayPalConfig(): FundingSourceConfig {
|
|
|
34
35
|
BUTTON_COLOR.SILVER,
|
|
35
36
|
BUTTON_COLOR.BLACK,
|
|
36
37
|
BUTTON_COLOR.WHITE,
|
|
37
|
-
BUTTON_COLOR.REBRAND_BLUE,
|
|
38
|
-
BUTTON_COLOR.REBRAND_DARKBLUE,
|
|
39
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
40
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
41
38
|
],
|
|
42
39
|
|
|
43
40
|
logoColors: {
|
|
@@ -46,10 +43,18 @@ export function getPayPalConfig(): FundingSourceConfig {
|
|
|
46
43
|
[BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
|
|
47
44
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
48
45
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLUE,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
[BUTTON_COLOR.
|
|
46
|
+
},
|
|
47
|
+
|
|
48
|
+
logoColorsRebrand: {
|
|
49
|
+
[BUTTON_COLOR.BLUE]: LOGO_COLOR.BLACK,
|
|
50
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
51
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
52
|
+
},
|
|
53
|
+
|
|
54
|
+
secondaryColorsRebrand: {
|
|
55
|
+
...DEFAULT_FUNDING_CONFIG.secondaryColorsRebrand,
|
|
56
|
+
[DEFAULT]: BUTTON_COLOR.BLUE,
|
|
57
|
+
[BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
|
|
53
58
|
},
|
|
54
59
|
|
|
55
60
|
labelText: ({ content, label, period }) => {
|
|
@@ -8,11 +8,14 @@ import {
|
|
|
8
8
|
} from "@paypal/sdk-logos/src";
|
|
9
9
|
|
|
10
10
|
import { BUTTON_COLOR, BUTTON_LAYOUT, TEXT_COLOR } from "../../constants";
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
DEFAULT_APM_FUNDING_CONFIG,
|
|
13
|
+
type FundingSourceConfig,
|
|
14
|
+
} from "../common";
|
|
12
15
|
|
|
13
16
|
export function getSepaConfig(): FundingSourceConfig {
|
|
14
17
|
return {
|
|
15
|
-
...
|
|
18
|
+
...DEFAULT_APM_FUNDING_CONFIG,
|
|
16
19
|
|
|
17
20
|
layouts: [BUTTON_LAYOUT.VERTICAL],
|
|
18
21
|
|
|
@@ -21,8 +24,6 @@ export function getSepaConfig(): FundingSourceConfig {
|
|
|
21
24
|
BUTTON_COLOR.SILVER,
|
|
22
25
|
BUTTON_COLOR.BLACK,
|
|
23
26
|
BUTTON_COLOR.WHITE,
|
|
24
|
-
BUTTON_COLOR.REBRAND_BLACK,
|
|
25
|
-
BUTTON_COLOR.REBRAND_WHITE,
|
|
26
27
|
],
|
|
27
28
|
|
|
28
29
|
logoColors: {
|
|
@@ -30,8 +31,12 @@ export function getSepaConfig(): FundingSourceConfig {
|
|
|
30
31
|
[BUTTON_COLOR.SILVER]: LOGO_COLOR.BLACK,
|
|
31
32
|
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
32
33
|
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
},
|
|
35
|
+
|
|
36
|
+
logoColorsRebrand: {
|
|
37
|
+
[BUTTON_COLOR.DEFAULT]: LOGO_COLOR.BLACK,
|
|
38
|
+
[BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
|
|
39
|
+
[BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
|
|
35
40
|
},
|
|
36
41
|
|
|
37
42
|
textColors: {
|
|
@@ -39,8 +44,6 @@ export function getSepaConfig(): FundingSourceConfig {
|
|
|
39
44
|
[BUTTON_COLOR.SILVER]: TEXT_COLOR.BLACK,
|
|
40
45
|
[BUTTON_COLOR.WHITE]: TEXT_COLOR.BLACK,
|
|
41
46
|
[BUTTON_COLOR.BLACK]: TEXT_COLOR.WHITE,
|
|
42
|
-
[BUTTON_COLOR.REBRAND_BLACK]: TEXT_COLOR.WHITE,
|
|
43
|
-
[BUTTON_COLOR.REBRAND_WHITE]: TEXT_COLOR.BLACK,
|
|
44
47
|
},
|
|
45
48
|
|
|
46
49
|
Logo: ({ logoColor, optional }) => {
|
package/src/funding/util.js
CHANGED
|
@@ -17,9 +17,13 @@ import {
|
|
|
17
17
|
isChrome,
|
|
18
18
|
isFirefox,
|
|
19
19
|
} from "@krakenjs/belter/src";
|
|
20
|
+
import { LOGO_COLOR } from "@paypal/sdk-logos/src";
|
|
20
21
|
|
|
22
|
+
import { BUTTON_COLOR, TEXT_COLOR } from "../constants";
|
|
21
23
|
import type { Experiment } from "../types";
|
|
22
24
|
|
|
25
|
+
import type { FundingSourceConfig } from "./common";
|
|
26
|
+
|
|
23
27
|
const isMacOsCna = (userAgent: string): boolean => {
|
|
24
28
|
return /Macintosh.*AppleWebKit(?!.*Safari)/i.test(userAgent);
|
|
25
29
|
};
|
|
@@ -45,6 +49,39 @@ const venmoUserAgentSupportsPopups = (userAgent: string): boolean => {
|
|
|
45
49
|
);
|
|
46
50
|
};
|
|
47
51
|
|
|
52
|
+
type ActiveFundingColors = {|
|
|
53
|
+
colors: $ReadOnlyArray<$Values<typeof BUTTON_COLOR>>,
|
|
54
|
+
logoColors: { [$Values<typeof BUTTON_COLOR>]: $Values<typeof LOGO_COLOR> },
|
|
55
|
+
secondaryColors: {
|
|
56
|
+
[$Values<typeof BUTTON_COLOR>]: $Values<typeof BUTTON_COLOR>,
|
|
57
|
+
},
|
|
58
|
+
textColors: { [$Values<typeof BUTTON_COLOR>]: $Values<typeof TEXT_COLOR> },
|
|
59
|
+
|};
|
|
60
|
+
|
|
61
|
+
export function getFundingSourceColors({
|
|
62
|
+
fundingConfig,
|
|
63
|
+
shouldApplyRebrandedStyles,
|
|
64
|
+
}: {|
|
|
65
|
+
fundingConfig: FundingSourceConfig,
|
|
66
|
+
shouldApplyRebrandedStyles: boolean,
|
|
67
|
+
|}): ActiveFundingColors {
|
|
68
|
+
return {
|
|
69
|
+
colors:
|
|
70
|
+
shouldApplyRebrandedStyles && fundingConfig.colorsRebrand
|
|
71
|
+
? fundingConfig.colorsRebrand
|
|
72
|
+
: fundingConfig.colors,
|
|
73
|
+
logoColors: shouldApplyRebrandedStyles
|
|
74
|
+
? fundingConfig.logoColorsRebrand
|
|
75
|
+
: fundingConfig.logoColors,
|
|
76
|
+
secondaryColors: shouldApplyRebrandedStyles
|
|
77
|
+
? fundingConfig.secondaryColorsRebrand
|
|
78
|
+
: fundingConfig.secondaryColors,
|
|
79
|
+
textColors: shouldApplyRebrandedStyles
|
|
80
|
+
? fundingConfig.textColorsRebrand
|
|
81
|
+
: fundingConfig.textColors,
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
|
|
48
85
|
export function supportsVenmoPopups(
|
|
49
86
|
experiment?: Experiment,
|
|
50
87
|
supportsPopups: boolean,
|
package/src/funding/util.test.js
CHANGED
|
@@ -20,7 +20,11 @@ import {
|
|
|
20
20
|
isFirefox,
|
|
21
21
|
} from "@krakenjs/belter/src";
|
|
22
22
|
|
|
23
|
-
import {
|
|
23
|
+
import {
|
|
24
|
+
getFundingSourceColors,
|
|
25
|
+
supportsVenmoPopups,
|
|
26
|
+
isSupportedNativeVenmoBrowser,
|
|
27
|
+
} from "./util";
|
|
24
28
|
|
|
25
29
|
// Mock all the browser detection functions from belter
|
|
26
30
|
vi.mock("@krakenjs/belter/src", () => ({
|
|
@@ -76,6 +80,85 @@ describe("funding/util", () => {
|
|
|
76
80
|
vi.resetAllMocks();
|
|
77
81
|
});
|
|
78
82
|
|
|
83
|
+
describe("getFundingSourceColors", () => {
|
|
84
|
+
const mockFundingConfig = {
|
|
85
|
+
colors: ["gold", "blue", "silver"],
|
|
86
|
+
colorsRebrand: ["blue", "black", "white"],
|
|
87
|
+
logoColors: { default: "blue", white: "blue" },
|
|
88
|
+
logoColorsRebrand: { blue: "black", black: "white", white: "black" },
|
|
89
|
+
secondaryColors: { default: "silver", black: "black" },
|
|
90
|
+
secondaryColorsRebrand: { default: "white", black: "black" },
|
|
91
|
+
textColors: { gold: "black", blue: "white" },
|
|
92
|
+
textColorsRebrand: { default: "black", blue: "black", black: "white" },
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
it("should return legacy color fields when shouldApplyRebrandedStyles is false", () => {
|
|
96
|
+
const result = getFundingSourceColors({
|
|
97
|
+
// $FlowFixMe
|
|
98
|
+
fundingConfig: mockFundingConfig,
|
|
99
|
+
shouldApplyRebrandedStyles: false,
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
expect(result.colors).toBe(mockFundingConfig.colors);
|
|
103
|
+
expect(result.logoColors).toBe(mockFundingConfig.logoColors);
|
|
104
|
+
expect(result.secondaryColors).toBe(mockFundingConfig.secondaryColors);
|
|
105
|
+
expect(result.textColors).toBe(mockFundingConfig.textColors);
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
it("should return rebrand color fields when shouldApplyRebrandedStyles is true", () => {
|
|
109
|
+
const result = getFundingSourceColors({
|
|
110
|
+
// $FlowFixMe
|
|
111
|
+
fundingConfig: mockFundingConfig,
|
|
112
|
+
shouldApplyRebrandedStyles: true,
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
expect(result.colors).toBe(mockFundingConfig.colorsRebrand);
|
|
116
|
+
expect(result.logoColors).toBe(mockFundingConfig.logoColorsRebrand);
|
|
117
|
+
expect(result.secondaryColors).toBe(
|
|
118
|
+
mockFundingConfig.secondaryColorsRebrand
|
|
119
|
+
);
|
|
120
|
+
expect(result.textColors).toBe(mockFundingConfig.textColorsRebrand);
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
it("should fall back to legacy colors array when shouldApplyRebrandedStyles is true but colorsRebrand is not defined", () => {
|
|
124
|
+
const configWithoutColorsRebrand = {
|
|
125
|
+
...mockFundingConfig,
|
|
126
|
+
colorsRebrand: undefined,
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
const result = getFundingSourceColors({
|
|
130
|
+
// $FlowFixMe
|
|
131
|
+
fundingConfig: configWithoutColorsRebrand,
|
|
132
|
+
shouldApplyRebrandedStyles: true,
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
expect(result.colors).toBe(configWithoutColorsRebrand.colors);
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
it("should still return rebrand logo/secondary/text colors even when colorsRebrand is not defined", () => {
|
|
139
|
+
const configWithoutColorsRebrand = {
|
|
140
|
+
...mockFundingConfig,
|
|
141
|
+
colorsRebrand: undefined,
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
const result = getFundingSourceColors({
|
|
145
|
+
// $FlowFixMe
|
|
146
|
+
fundingConfig: configWithoutColorsRebrand,
|
|
147
|
+
shouldApplyRebrandedStyles: true,
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
expect(result.logoColors).toBe(
|
|
151
|
+
configWithoutColorsRebrand.logoColorsRebrand
|
|
152
|
+
);
|
|
153
|
+
expect(result.secondaryColors).toBe(
|
|
154
|
+
configWithoutColorsRebrand.secondaryColorsRebrand
|
|
155
|
+
);
|
|
156
|
+
expect(result.textColors).toBe(
|
|
157
|
+
configWithoutColorsRebrand.textColorsRebrand
|
|
158
|
+
);
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
|
|
79
162
|
describe("supportsVenmoPopups", () => {
|
|
80
163
|
describe("when in supported webview", () => {
|
|
81
164
|
beforeEach(() => {
|