@paypal/checkout-components 5.0.331 → 5.0.332

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@paypal/checkout-components",
3
- "version": "5.0.331",
3
+ "version": "5.0.332",
4
4
  "description": "PayPal Checkout components, for integrating checkout products.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -107,7 +107,12 @@ export function Button({
107
107
  const colors = fundingConfig.colors;
108
108
  const secondaryColors = fundingConfig.secondaryColors || {};
109
109
 
110
- let { color = colors[0], period, label } = style;
110
+ let { color, period, label } = style;
111
+
112
+ // if no color option is passed in via style props, use the default color value from the funding source config
113
+ if (color === "" || typeof color === "undefined") {
114
+ color = colors[0];
115
+ }
111
116
 
112
117
  if (multiple && i > 0) {
113
118
  if (
@@ -317,7 +317,7 @@ export type OnClick = (OnClickData, OnClickActions) => void;
317
317
 
318
318
  export type ButtonStyle = {|
319
319
  label: $Values<typeof BUTTON_LABEL> | void,
320
- color: $Values<typeof BUTTON_COLOR>,
320
+ color?: $Values<typeof BUTTON_COLOR>,
321
321
  shape: $Values<typeof BUTTON_SHAPE>,
322
322
  tagline: boolean,
323
323
  layout: $Values<typeof BUTTON_LAYOUT>,
@@ -644,6 +644,7 @@ export function normalizeButtonStyle(
644
644
  }
645
645
 
646
646
  let {
647
+ color,
647
648
  label,
648
649
  layout = fundingSource
649
650
  ? BUTTON_LAYOUT.HORIZONTAL
@@ -664,9 +665,6 @@ export function normalizeButtonStyle(
664
665
  tagline = false;
665
666
  }
666
667
 
667
- // if color is a falsy value, set it to the default color from the funding config
668
- const color = style.color ? style.color : fundingConfig.colors[0];
669
-
670
668
  if (values(BUTTON_LAYOUT).indexOf(layout) === -1) {
671
669
  throw new Error(`Invalid layout: ${layout}`);
672
670
  }
@@ -52,6 +52,9 @@ type CardFieldsProps = {|
52
52
  height: number,
53
53
  input: {| height: number |},
54
54
  |},
55
+ styleOptions?: {|
56
+ disablePrerender?: boolean,
57
+ |},
55
58
  env?: string,
56
59
  locale?: string,
57
60
  nonce: string,
@@ -130,9 +133,13 @@ const url = () =>
130
133
 
131
134
  const prerenderTemplate = ({ props, doc }) => {
132
135
  const height = props.style?.height ?? props.style?.input?.height ?? null;
133
- return (<CardPrerender nonce={props.nonce} height={height} />).render(
134
- dom({ doc })
135
- );
136
+ return (
137
+ <CardPrerender
138
+ nonce={props.nonce}
139
+ height={height}
140
+ isDisabled={Boolean(props.styleOptions?.disablePrerender)}
141
+ />
142
+ ).render(dom({ doc }));
136
143
  };
137
144
 
138
145
  export type CardFieldsComponent = ZoidComponent<
@@ -296,6 +303,19 @@ export const getCardFieldsComponent: () => CardFieldsComponent = memoize(
296
303
  },
297
304
  },
298
305
 
306
+ styleOptions: {
307
+ type: "object",
308
+ required: false,
309
+ queryParam: true,
310
+ value: ({ props }) => {
311
+ return {
312
+ ...props.parent.props.styleOptions,
313
+ // $FlowFixMe
314
+ ...props.styleOptions,
315
+ };
316
+ },
317
+ },
318
+
299
319
  onChange: {
300
320
  type: "function",
301
321
  required: false,
@@ -1,11 +1,12 @@
1
1
  /* @flow */
2
2
  /** @jsx node */
3
3
 
4
- import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
4
+ import { node, type NullableChildType } from "@krakenjs/jsx-pragmatic/src";
5
5
 
6
6
  type PrerenderedCardProps = {|
7
7
  nonce: ?string,
8
8
  height: ?number,
9
+ isDisabled: ?boolean,
9
10
  |};
10
11
 
11
12
  const DEFAULT_HEIGHT = 78;
@@ -13,7 +14,11 @@ const DEFAULT_HEIGHT = 78;
13
14
  export function CardPrerender({
14
15
  nonce,
15
16
  height,
16
- }: PrerenderedCardProps): ChildType {
17
+ isDisabled,
18
+ }: PrerenderedCardProps): NullableChildType {
19
+ if (isDisabled) {
20
+ return null;
21
+ }
17
22
  return (
18
23
  <html>
19
24
  <body>