@paypal/checkout-components 5.0.366 → 5.0.367

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 (6) 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/ui/buttons/buttons.jsx +8 -1
  5. package/src/ui/buttons/content.jsx +232 -76
  6. package/src/ui/buttons/poweredBy.jsx +78 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paypal/checkout-components",
3
- "version": "5.0.366",
3
+ "version": "5.0.367",
4
4
  "description": "PayPal Checkout components, for integrating checkout products.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/ui/buttons/buttons.jsx CHANGED
@@ -315,7 +315,14 @@ export function Buttons(props: ButtonsProps): ElementNode {
315
315
  />
316
316
  ) : null}
317
317
 
318
- {showPoweredBy ? <PoweredByPayPal locale={locale} nonce={nonce} /> : null}
318
+ {showPoweredBy ? (
319
+ <PoweredByPayPal
320
+ locale={locale}
321
+ nonce={nonce}
322
+ buttonColor={style.color}
323
+ shouldApplyRebrandedStyles={style.shouldApplyRebrandedStyles}
324
+ />
325
+ ) : null}
319
326
 
320
327
  {message && message.position === MESSAGE_POSITION.BOTTOM ? (
321
328
  <Message markup={messageMarkup} position={message.position} />
package/src/ui/buttons/content.jsx CHANGED
@@ -4,310 +4,466 @@
4
4
 
5
5
  import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
6
6
  import { LANG } from "@paypal/sdk-constants/src";
7
- import { PayPalLogo, LOGO_COLOR } from "@paypal/sdk-logos/src";
7
+ import {
8
+ PayPalRebrandLogo,
9
+ PayPalLogo,
10
+ LOGO_COLOR,
11
+ } from "@paypal/sdk-logos/src";
8
12
 
9
13
  import { Text } from "../text";
10
14
 
11
15
  type ButtonContentMap = {
12
16
  [$Values<typeof LANG>]: {|
13
- PoweredBy: ({| logoColor: $Values<typeof LOGO_COLOR> |}) => ChildType,
17
+ PoweredBy: ({|
18
+ logoColor: $Values<typeof LOGO_COLOR>,
19
+ shouldApplyRebrandedStyles?: boolean,
20
+ |}) => ChildType,
14
21
  |},
15
22
  };
16
23
 
17
24
  export const buttonContent: ButtonContentMap = {
18
25
  ar: {
19
- PoweredBy: ({ logoColor }) => (
26
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
20
27
  <Fragment>
21
28
  <Text>مدعوم من </Text>
22
- <PayPalLogo logoColor={logoColor} />
29
+ {shouldApplyRebrandedStyles ? (
30
+ <PayPalRebrandLogo logoColor={logoColor} />
31
+ ) : (
32
+ <PayPalLogo logoColor={logoColor} />
33
+ )}
23
34
  </Fragment>
24
35
  ),
25
36
  },
26
37
  bg: {
27
- PoweredBy: ({ logoColor }) => (
38
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
28
39
  <Fragment>
29
40
  <Text>С подкрепата на </Text>
30
- <PayPalLogo logoColor={logoColor} />
41
+ {shouldApplyRebrandedStyles ? (
42
+ <PayPalRebrandLogo logoColor={logoColor} />
43
+ ) : (
44
+ <PayPalLogo logoColor={logoColor} />
45
+ )}
31
46
  </Fragment>
32
47
  ),
33
48
  },
34
49
  cs: {
35
- PoweredBy: ({ logoColor }) => (
50
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
36
51
  <Fragment>
37
52
  <Text>Využívá službu </Text>
38
- <PayPalLogo logoColor={logoColor} />
53
+ {shouldApplyRebrandedStyles ? (
54
+ <PayPalRebrandLogo logoColor={logoColor} />
55
+ ) : (
56
+ <PayPalLogo logoColor={logoColor} />
57
+ )}
39
58
  </Fragment>
40
59
  ),
41
60
  },
42
61
  da: {
43
- PoweredBy: ({ logoColor }) => (
62
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
44
63
  <Fragment>
45
64
  <Text>Leveret af </Text>
46
- <PayPalLogo logoColor={logoColor} />
65
+ {shouldApplyRebrandedStyles ? (
66
+ <PayPalRebrandLogo logoColor={logoColor} />
67
+ ) : (
68
+ <PayPalLogo logoColor={logoColor} />
69
+ )}
47
70
  </Fragment>
48
71
  ),
49
72
  },
50
73
  de: {
51
- PoweredBy: ({ logoColor }) => (
74
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
52
75
  <Fragment>
53
76
  <Text>Abgewickelt durch </Text>
54
- <PayPalLogo logoColor={logoColor} />
77
+ {shouldApplyRebrandedStyles ? (
78
+ <PayPalRebrandLogo logoColor={logoColor} />
79
+ ) : (
80
+ <PayPalLogo logoColor={logoColor} />
81
+ )}
55
82
  </Fragment>
56
83
  ),
57
84
  },
58
85
  el: {
59
- PoweredBy: ({ logoColor }) => (
86
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
60
87
  <Fragment>
61
88
  <Text>Με την υποστήριξη του </Text>
62
- <PayPalLogo logoColor={logoColor} />
89
+ {shouldApplyRebrandedStyles ? (
90
+ <PayPalRebrandLogo logoColor={logoColor} />
91
+ ) : (
92
+ <PayPalLogo logoColor={logoColor} />
93
+ )}
63
94
  </Fragment>
64
95
  ),
65
96
  },
66
97
  en: {
67
- PoweredBy: ({ logoColor }) => (
98
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
68
99
  <Fragment>
69
100
  <Text>Powered by </Text>
70
- <PayPalLogo logoColor={logoColor} />
101
+ {shouldApplyRebrandedStyles ? (
102
+ <PayPalRebrandLogo logoColor={logoColor} />
103
+ ) : (
104
+ <PayPalLogo logoColor={logoColor} />
105
+ )}
71
106
  </Fragment>
72
107
  ),
73
108
  },
74
109
  es: {
75
- PoweredBy: ({ logoColor }) => (
110
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
76
111
  <Fragment>
77
112
  <Text>Desarrollado por </Text>
78
- <PayPalLogo logoColor={logoColor} />
113
+ {shouldApplyRebrandedStyles ? (
114
+ <PayPalRebrandLogo logoColor={logoColor} />
115
+ ) : (
116
+ <PayPalLogo logoColor={logoColor} />
117
+ )}
79
118
  </Fragment>
80
119
  ),
81
120
  },
82
121
  et: {
83
- PoweredBy: ({ logoColor }) => (
122
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
84
123
  <Fragment>
85
124
  <Text>Powered by </Text>
86
- <PayPalLogo logoColor={logoColor} />
125
+ {shouldApplyRebrandedStyles ? (
126
+ <PayPalRebrandLogo logoColor={logoColor} />
127
+ ) : (
128
+ <PayPalLogo logoColor={logoColor} />
129
+ )}
87
130
  </Fragment>
88
131
  ),
89
132
  },
90
133
  fi: {
91
- PoweredBy: ({ logoColor }) => (
134
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
92
135
  <Fragment>
93
136
  <Text>Palvelun tarjoaa </Text>
94
- <PayPalLogo logoColor={logoColor} />
137
+ {shouldApplyRebrandedStyles ? (
138
+ <PayPalRebrandLogo logoColor={logoColor} />
139
+ ) : (
140
+ <PayPalLogo logoColor={logoColor} />
141
+ )}
95
142
  </Fragment>
96
143
  ),
97
144
  },
98
145
  fr: {
99
- PoweredBy: ({ logoColor }) => (
146
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
100
147
  <Fragment>
101
148
  <Text>Optimisé par </Text>
102
- <PayPalLogo logoColor={logoColor} />
149
+ {shouldApplyRebrandedStyles ? (
150
+ <PayPalRebrandLogo logoColor={logoColor} />
151
+ ) : (
152
+ <PayPalLogo logoColor={logoColor} />
153
+ )}
103
154
  </Fragment>
104
155
  ),
105
156
  },
106
157
  he: {
107
- PoweredBy: ({ logoColor }) => (
158
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
108
159
  <Fragment>
109
- <PayPalLogo logoColor={logoColor} /> מופעל על-ידי
160
+ {shouldApplyRebrandedStyles ? (
161
+ <PayPalRebrandLogo logoColor={logoColor} />
162
+ ) : (
163
+ <PayPalLogo logoColor={logoColor} />
164
+ )}{" "}
165
+ מופעל על-ידי
110
166
  </Fragment>
111
167
  ),
112
168
  },
113
169
  hu: {
114
- PoweredBy: ({ logoColor }) => (
170
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
115
171
  <Fragment>
116
172
  <Text>Üzemeltető: </Text>
117
- <PayPalLogo logoColor={logoColor} />
173
+ {shouldApplyRebrandedStyles ? (
174
+ <PayPalRebrandLogo logoColor={logoColor} />
175
+ ) : (
176
+ <PayPalLogo logoColor={logoColor} />
177
+ )}
118
178
  </Fragment>
119
179
  ),
120
180
  },
121
181
  id: {
122
- PoweredBy: ({ logoColor }) => (
182
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
123
183
  <Fragment>
124
184
  <Text>Ditunjang teknologi </Text>
125
- <PayPalLogo logoColor={logoColor} />
185
+ {shouldApplyRebrandedStyles ? (
186
+ <PayPalRebrandLogo logoColor={logoColor} />
187
+ ) : (
188
+ <PayPalLogo logoColor={logoColor} />
189
+ )}
126
190
  </Fragment>
127
191
  ),
128
192
  },
129
193
  it: {
130
- PoweredBy: ({ logoColor }) => (
194
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
131
195
  <Fragment>
132
196
  <Text>Con tecnologia </Text>
133
- <PayPalLogo logoColor={logoColor} />
197
+ {shouldApplyRebrandedStyles ? (
198
+ <PayPalRebrandLogo logoColor={logoColor} />
199
+ ) : (
200
+ <PayPalLogo logoColor={logoColor} />
201
+ )}
134
202
  </Fragment>
135
203
  ),
136
204
  },
137
205
  ja: {
138
- PoweredBy: ({ logoColor }) => (
206
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
139
207
  <Fragment>
140
208
  <Text>Powered by </Text>
141
- <PayPalLogo logoColor={logoColor} />
209
+ {shouldApplyRebrandedStyles ? (
210
+ <PayPalRebrandLogo logoColor={logoColor} />
211
+ ) : (
212
+ <PayPalLogo logoColor={logoColor} />
213
+ )}
142
214
  </Fragment>
143
215
  ),
144
216
  },
145
217
  ko: {
146
- PoweredBy: ({ logoColor }) => (
218
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
147
219
  <Fragment>
148
220
  <Text>제공: </Text>
149
- <PayPalLogo logoColor={logoColor} />
221
+ {shouldApplyRebrandedStyles ? (
222
+ <PayPalRebrandLogo logoColor={logoColor} />
223
+ ) : (
224
+ <PayPalLogo logoColor={logoColor} />
225
+ )}
150
226
  </Fragment>
151
227
  ),
152
228
  },
153
229
  lt: {
154
- PoweredBy: ({ logoColor }) => (
230
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
155
231
  <Fragment>
156
232
  <Text>Sukurta </Text>
157
- <PayPalLogo logoColor={logoColor} />
233
+ {shouldApplyRebrandedStyles ? (
234
+ <PayPalRebrandLogo logoColor={logoColor} />
235
+ ) : (
236
+ <PayPalLogo logoColor={logoColor} />
237
+ )}
158
238
  </Fragment>
159
239
  ),
160
240
  },
161
241
  lv: {
162
- PoweredBy: ({ logoColor }) => (
242
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
163
243
  <Fragment>
164
244
  <Text>Darbojas ar </Text>
165
- <PayPalLogo logoColor={logoColor} />
245
+ {shouldApplyRebrandedStyles ? (
246
+ <PayPalRebrandLogo logoColor={logoColor} />
247
+ ) : (
248
+ <PayPalLogo logoColor={logoColor} />
249
+ )}
166
250
  </Fragment>
167
251
  ),
168
252
  },
169
253
  ms: {
170
- PoweredBy: ({ logoColor }) => (
254
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
171
255
  <Fragment>
172
256
  <Text>Dikuasakan oleh </Text>
173
- <PayPalLogo logoColor={logoColor} />
257
+ {shouldApplyRebrandedStyles ? (
258
+ <PayPalRebrandLogo logoColor={logoColor} />
259
+ ) : (
260
+ <PayPalLogo logoColor={logoColor} />
261
+ )}
174
262
  </Fragment>
175
263
  ),
176
264
  },
177
265
  nl: {
178
- PoweredBy: ({ logoColor }) => (
266
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
179
267
  <Fragment>
180
268
  <Text>Mogelijk gemaakt door </Text>
181
- <PayPalLogo logoColor={logoColor} />
269
+ {shouldApplyRebrandedStyles ? (
270
+ <PayPalRebrandLogo logoColor={logoColor} />
271
+ ) : (
272
+ <PayPalLogo logoColor={logoColor} />
273
+ )}
182
274
  </Fragment>
183
275
  ),
184
276
  },
185
277
  no: {
186
- PoweredBy: ({ logoColor }) => (
278
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
187
279
  <Fragment>
188
280
  <Text>Leveres av </Text>
189
- <PayPalLogo logoColor={logoColor} />
281
+ {shouldApplyRebrandedStyles ? (
282
+ <PayPalRebrandLogo logoColor={logoColor} />
283
+ ) : (
284
+ <PayPalLogo logoColor={logoColor} />
285
+ )}
190
286
  </Fragment>
191
287
  ),
192
288
  },
193
289
  pl: {
194
- PoweredBy: ({ logoColor }) => (
290
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
195
291
  <Fragment>
196
292
  <Text>Powered by </Text>
197
- <PayPalLogo logoColor={logoColor} />
293
+ {shouldApplyRebrandedStyles ? (
294
+ <PayPalRebrandLogo logoColor={logoColor} />
295
+ ) : (
296
+ <PayPalLogo logoColor={logoColor} />
297
+ )}
198
298
  </Fragment>
199
299
  ),
200
300
  },
201
301
  pt: {
202
- PoweredBy: ({ logoColor }) => (
302
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
203
303
  <Fragment>
204
304
  <Text>Powered by </Text>
205
- <PayPalLogo logoColor={logoColor} />
305
+ {shouldApplyRebrandedStyles ? (
306
+ <PayPalRebrandLogo logoColor={logoColor} />
307
+ ) : (
308
+ <PayPalLogo logoColor={logoColor} />
309
+ )}
206
310
  </Fragment>
207
311
  ),
208
312
  },
209
313
  ro: {
210
- PoweredBy: ({ logoColor }) => (
314
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
211
315
  <Fragment>
212
316
  <Text>Cu tehnologia </Text>
213
- <PayPalLogo logoColor={logoColor} />
317
+ {shouldApplyRebrandedStyles ? (
318
+ <PayPalRebrandLogo logoColor={logoColor} />
319
+ ) : (
320
+ <PayPalLogo logoColor={logoColor} />
321
+ )}
214
322
  </Fragment>
215
323
  ),
216
324
  },
217
325
  ru: {
218
- PoweredBy: ({ logoColor }) => (
326
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
219
327
  <Fragment>
220
328
  <Text>Обработано </Text>
221
- <PayPalLogo logoColor={logoColor} />
329
+ {shouldApplyRebrandedStyles ? (
330
+ <PayPalRebrandLogo logoColor={logoColor} />
331
+ ) : (
332
+ <PayPalLogo logoColor={logoColor} />
333
+ )}
222
334
  </Fragment>
223
335
  ),
224
336
  },
225
337
  si: {
226
- PoweredBy: ({ logoColor }) => (
338
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
227
339
  <Fragment>
228
340
  <Text>බලගන්වන්නේ </Text>
229
- <PayPalLogo logoColor={logoColor} />
341
+ {shouldApplyRebrandedStyles ? (
342
+ <PayPalRebrandLogo logoColor={logoColor} />
343
+ ) : (
344
+ <PayPalLogo logoColor={logoColor} />
345
+ )}
230
346
  <Text> විසිනි</Text>
231
347
  </Fragment>
232
348
  ),
233
349
  },
234
350
  sk: {
235
- PoweredBy: ({ logoColor }) => (
351
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
236
352
  <Fragment>
237
353
  <Text>Používa technológiu </Text>
238
- <PayPalLogo logoColor={logoColor} />
354
+ {shouldApplyRebrandedStyles ? (
355
+ <PayPalRebrandLogo logoColor={logoColor} />
356
+ ) : (
357
+ <PayPalLogo logoColor={logoColor} />
358
+ )}
239
359
  </Fragment>
240
360
  ),
241
361
  },
242
362
  sl: {
243
- PoweredBy: ({ logoColor }) => (
363
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
244
364
  <Fragment>
245
365
  <Text>Powered by </Text>
246
- <PayPalLogo logoColor={logoColor} />
366
+ {shouldApplyRebrandedStyles ? (
367
+ <PayPalRebrandLogo logoColor={logoColor} />
368
+ ) : (
369
+ <PayPalLogo logoColor={logoColor} />
370
+ )}
247
371
  </Fragment>
248
372
  ),
249
373
  },
250
374
  sq: {
251
- PoweredBy: ({ logoColor }) => (
375
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
252
376
  <Fragment>
253
377
  <Text>Mundësuar nga </Text>
254
- <PayPalLogo logoColor={logoColor} />
378
+ {shouldApplyRebrandedStyles ? (
379
+ <PayPalRebrandLogo logoColor={logoColor} />
380
+ ) : (
381
+ <PayPalLogo logoColor={logoColor} />
382
+ )}
255
383
  </Fragment>
256
384
  ),
257
385
  },
258
386
  sv: {
259
- PoweredBy: ({ logoColor }) => (
387
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
260
388
  <Fragment>
261
389
  <Text>Tillhandahålls av </Text>
262
- <PayPalLogo logoColor={logoColor} />
390
+ {shouldApplyRebrandedStyles ? (
391
+ <PayPalRebrandLogo logoColor={logoColor} />
392
+ ) : (
393
+ <PayPalLogo logoColor={logoColor} />
394
+ )}
263
395
  </Fragment>
264
396
  ),
265
397
  },
266
398
  th: {
267
- PoweredBy: ({ logoColor }) => (
399
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
268
400
  <Fragment>
269
401
  <Text>ให้บริการโดย </Text>
270
- <PayPalLogo logoColor={logoColor} />
402
+ {shouldApplyRebrandedStyles ? (
403
+ <PayPalRebrandLogo logoColor={logoColor} />
404
+ ) : (
405
+ <PayPalLogo logoColor={logoColor} />
406
+ )}
271
407
  </Fragment>
272
408
  ),
273
409
  },
274
410
  tl: {
275
- PoweredBy: ({ logoColor }) => (
411
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
276
412
  <Fragment>
277
413
  <Text>Pinapagana ng </Text>
278
- <PayPalLogo logoColor={logoColor} />
414
+ {shouldApplyRebrandedStyles ? (
415
+ <PayPalRebrandLogo logoColor={logoColor} />
416
+ ) : (
417
+ <PayPalLogo logoColor={logoColor} />
418
+ )}
279
419
  </Fragment>
280
420
  ),
281
421
  },
282
422
  tr: {
283
- PoweredBy: ({ logoColor }) => (
423
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
284
424
  <Fragment>
285
425
  <Text>Çalıştıran </Text>
286
- <PayPalLogo logoColor={logoColor} />
426
+ {shouldApplyRebrandedStyles ? (
427
+ <PayPalRebrandLogo logoColor={logoColor} />
428
+ ) : (
429
+ <PayPalLogo logoColor={logoColor} />
430
+ )}
287
431
  </Fragment>
288
432
  ),
289
433
  },
290
434
  vi: {
291
- PoweredBy: ({ logoColor }) => (
435
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
292
436
  <Fragment>
293
437
  <Text>Được hỗ trợ bởi </Text>
294
- <PayPalLogo logoColor={logoColor} />
438
+ {shouldApplyRebrandedStyles ? (
439
+ <PayPalRebrandLogo logoColor={logoColor} />
440
+ ) : (
441
+ <PayPalLogo logoColor={logoColor} />
442
+ )}
295
443
  </Fragment>
296
444
  ),
297
445
  },
298
446
  zh: {
299
- PoweredBy: ({ logoColor }) => (
447
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
300
448
  <Fragment>
301
449
  <Text>技术支持提供方： </Text>
302
- <PayPalLogo logoColor={logoColor} />
450
+ {shouldApplyRebrandedStyles ? (
451
+ <PayPalRebrandLogo logoColor={logoColor} />
452
+ ) : (
453
+ <PayPalLogo logoColor={logoColor} />
454
+ )}
303
455
  </Fragment>
304
456
  ),
305
457
  },
306
458
  zh_Hant: {
307
- PoweredBy: ({ logoColor }) => (
459
+ PoweredBy: ({ logoColor, shouldApplyRebrandedStyles = false }) => (
308
460
  <Fragment>
309
461
  <Text>技術支持： </Text>
310
- <PayPalLogo logoColor={logoColor} />
462
+ {shouldApplyRebrandedStyles ? (
463
+ <PayPalRebrandLogo logoColor={logoColor} />
464
+ ) : (
465
+ <PayPalLogo logoColor={logoColor} />
466
+ )}
311
467
  </Fragment>
312
468
  ),
313
469
  },
package/src/ui/buttons/poweredBy.jsx CHANGED
@@ -5,7 +5,7 @@ import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
5
5
  import { type LocaleType } from "@paypal/sdk-constants/src";
6
6
  import { LOGO_COLOR, LOGO_CLASS } from "@paypal/sdk-logos/src";
7
7
 
8
- import { CLASS } from "../../constants";
8
+ import { CLASS, BUTTON_COLOR_REBRAND } from "../../constants";
9
9
  import { Text } from "../text";
10
10
 
11
11
  import { buttonContent } from "./content";
@@ -15,7 +15,7 @@ const POWERED_BY_PAYPAL_STYLE = `
15
15
  text-align: center;
16
16
  margin: 10px auto;
17
17
  height: 14px;
18
- font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
18
+ font-family: system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
19
19
  font-size: 11px;
20
20
  font-weight: 400;
21
21
  font-style: italic;
@@ -39,18 +39,91 @@ const POWERED_BY_PAYPAL_STYLE = `
39
39
  type PoweredByPayPalProps = {|
40
40
  locale: LocaleType,
41
41
  nonce: string,
42
+ buttonColor?: string,
43
+ shouldApplyRebrandedStyles?: boolean,
42
44
  |};
43
45
 
46
+ function getPoweredByConfig(): {|
47
+ logoColors: { [string]: $Values<typeof LOGO_COLOR> },
48
+ textColors: { [string]: string },
49
+ |} {
50
+ return {
51
+ logoColors: {
52
+ [BUTTON_COLOR_REBRAND.REBRAND_BLUE]: LOGO_COLOR.BLACK,
53
+ [BUTTON_COLOR_REBRAND.REBRAND_BLACK]: LOGO_COLOR.BLACK,
54
+ [BUTTON_COLOR_REBRAND.REBRAND_WHITE]: LOGO_COLOR.WHITE,
55
+ },
56
+
57
+ textColors: {
58
+ [BUTTON_COLOR_REBRAND.REBRAND_BLUE]: "#000000",
59
+ [BUTTON_COLOR_REBRAND.REBRAND_BLACK]: "#000000",
60
+ [BUTTON_COLOR_REBRAND.REBRAND_WHITE]: "#FFFFFF",
61
+ },
62
+ };
63
+ }
64
+
44
65
  export function PoweredByPayPal({
45
66
  locale: { lang },
46
67
  nonce,
68
+ buttonColor = BUTTON_COLOR_REBRAND.REBRAND_BLUE,
69
+ shouldApplyRebrandedStyles = false,
47
70
  }: PoweredByPayPalProps): ChildType {
48
71
  const { PoweredBy } = buttonContent[lang];
72
+ const config = getPoweredByConfig();
73
+
74
+ // get appropriate logo and text color based on button color
75
+ const rebrandLogoColor = config.logoColors[buttonColor] || LOGO_COLOR.BLACK;
76
+ const textColor = config.textColors[buttonColor] || "#000000";
77
+
78
+ const POWERED_BY_PAYPAL_REBRAND_STYLE = `
79
+ .${CLASS.POWERED_BY} {
80
+ text-align: center;
81
+ margin: 10px auto;
82
+ height: 14px;
83
+ font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
84
+ font-size: 10px;
85
+ font-weight: 400;
86
+ color: ${textColor};
87
+ font-stretch: normal;
88
+ position: relative;
89
+ margin-right: 2px;
90
+ bottom: 1px;
91
+ }
92
+
93
+ .${CLASS.POWERED_BY} > .${CLASS.TEXT},
94
+ .${CLASS.POWERED_BY} > .${LOGO_CLASS.LOGO} {
95
+ display: inline-block;
96
+ vertical-align: middle;
97
+ height: 16px;
98
+ line-height: 16px;
99
+ font-size: 10px;
100
+ }
101
+ `;
102
+
103
+ const POWERED_BY_STYLE = shouldApplyRebrandedStyles
104
+ ? POWERED_BY_PAYPAL_REBRAND_STYLE
105
+ : POWERED_BY_PAYPAL_STYLE;
106
+
107
+ const logoColor = shouldApplyRebrandedStyles
108
+ ? rebrandLogoColor
109
+ : LOGO_COLOR.BLUE;
110
+
111
+ // additional class added for rebranded styles for testing purposes
112
+ const isRebrandClass = shouldApplyRebrandedStyles
113
+ ? "powered-by-paypal-rebrand"
114
+ : "powered-by-paypal-legacy";
49
115
 
50
116
  return (
51
- <div class={CLASS.POWERED_BY}>
52
- <style nonce={nonce} innerHTML={POWERED_BY_PAYPAL_STYLE} />
53
- {__WEB__ ? <Text /> : <PoweredBy logoColor={LOGO_COLOR.BLUE} />}
117
+ <div class={`${CLASS.POWERED_BY} ${isRebrandClass}`}>
118
+ <style nonce={nonce} innerHTML={POWERED_BY_STYLE} />
119
+ {__WEB__ ? (
120
+ <Text />
121
+ ) : (
122
+ <PoweredBy
123
+ logoColor={logoColor}
124
+ shouldApplyRebrandedStyles={shouldApplyRebrandedStyles}
125
+ />
126
+ )}
54
127
  </div>
55
128
  );
56
129
  }