@paypal/checkout-components - npm Package Compare versions

Comparing version 5.0.329 to 5.0.330

package.json

 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.329",
+  "version": "5.0.330",
   "description": "PayPal Checkout components, for integrating checkout products.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/funding/common.jsx

@@ -139,2 +139,3 @@ /* @flow */
     | (({|
+        buyerCountry: $Values<typeof COUNTRY>,
         content: ?ContentType,
@@ -141,0 +142,0 @@ fundingEligibility: ?FundingEligibilityType,

src/funding/paypal/config.jsx

@@ -48,8 +48,10 @@ /* @flow */
       let text = `${FUNDING_BRAND_LABEL.PAYPAL}`;
+
       if (content && label === BUTTON_LABEL.INSTALLMENT) {
         if (period) {
-          text = content["label.installment.withPeriod"].replace(
-            "{period}",
-            String(period)
-          );
+          const rawLabel = content["label.installment.withPeriod"];
+
+          if (typeof rawLabel === "string") {
+            text = rawLabel.replace("{period}", String(period));
+          }
         } else {
@@ -61,2 +63,3 @@ text = content["label.installment.withoutPeriod"];
       }
+
       return text;
@@ -63,0 +66,0 @@ },

src/ui/buttons/button.jsx

@@ -5,3 +5,8 @@ /* @flow */
 import type { FundingEligibilityType } from "@paypal/sdk-client/src";
-import { FUNDING, ENV, type LocaleType } from "@paypal/sdk-constants/src";
+import {
+  COUNTRY,
+  FUNDING,
+  ENV,
+  type LocaleType,
+} from "@paypal/sdk-constants/src";
 import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
@@ -41,3 +46,3 @@ import { LOGO_COLOR, LOGO_CLASS } from "@paypal/sdk-logos/src";
 import { MenuButton } from "./menu-button";
-import { isBorderRadiusNumber } from "./util";
+import { isBorderRadiusNumber, checkLabelEligibility } from "./util";
 
@@ -48,2 +53,3 @@ type IndividualButtonProps = {|
   multiple: boolean,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale: LocaleType,
@@ -74,22 +80,23 @@ onClick?: Function,
 export function Button({
-  fundingSource,
-  style,
-  multiple,
-  locale,
+  buyerCountry,
+  commit,
+  content,
+  customerId,
   env,
+  experiment,
+  flow,
   fundingEligibility,
+  fundingSource,
   i,
+  instrument,
+  locale,
+  multiple,
   nonce,
-  flow,
-  vault,
-  userIDToken,
-  customerId,
+  onClick = noop,
   personalization,
-  onClick = noop,
-  content,
+  showPayLabel,
+  style,
   tagline,
-  commit,
-  experiment,
-  instrument,
-  showPayLabel,
+  userIDToken,
+  vault,
 }: IndividualButtonProps): ElementNode {
@@ -149,2 +156,4 @@ const { layout, shape, borderRadius } = style;
 
+  const eligibleLabel = checkLabelEligibility(label, buyerCountry);
+
   function getAriaLabel(): string {
@@ -154,5 +163,6 @@ let labelText =
         ? fundingConfig.labelText({
+            buyerCountry,
             content,
             fundingEligibility,
-            label,
+            label: eligibleLabel,
             period,
@@ -175,3 +185,3 @@ })
     <Logo
-      label={label}
+      label={eligibleLabel}
       locale={locale}
@@ -192,3 +202,3 @@ logoColor={logoColor}
       logo={logoNode}
-      label={label}
+      label={eligibleLabel}
       nonce={nonce}
@@ -195,0 +205,0 @@ locale={locale}

src/ui/buttons/buttons.jsx

@@ -139,32 +139,33 @@ /* @flow */
   const {
-    wallet,
+    applePaySupport,
+    buyerCountry,
+    commit,
+    components,
+    content,
+    customerId,
+    displayOnly,
+    enableFunding,
+    env,
+    experiment,
+    flow,
+    fundingEligibility,
     fundingSource,
-    style,
+    hasShippingCallback,
     locale,
-    remembered,
-    env,
-    fundingEligibility,
-    platform,
-    commit,
-    vault,
+    message,
+    messageMarkup,
     nonce,
-    enableFunding,
-    components,
+    onShippingAddressChange,
     onShippingChange,
-    onShippingAddressChange,
     onShippingOptionsChange,
-    hasShippingCallback,
     personalization,
+    platform,
+    remembered,
+    showPayLabel,
+    style,
+    supportedNativeBrowser,
+    supportsPopups,
     userIDToken,
-    customerId,
-    content,
-    flow,
-    experiment,
-    applePaySupport,
-    supportsPopups,
-    supportedNativeBrowser,
-    showPayLabel,
-    displayOnly,
-    message,
-    messageMarkup,
+    vault,
+    wallet,
   } = normalizeButtonProps(props);
@@ -272,2 +273,3 @@ const { layout, shape, tagline } = style;
           env={env}
+          buyerCountry={buyerCountry}
           locale={locale}
@@ -274,0 +276,0 @@ nonce={nonce}

src/ui/buttons/props.js

@@ -453,2 +453,3 @@ /* eslint-disable eslint-comments/disable-enable-pair  */
   locale: LocaleType,
+  buyerCountry: $Values<typeof COUNTRY>,
   commit: boolean,
@@ -559,2 +560,3 @@ fundingSource: ?$Values<typeof FUNDING>,
   style?: ButtonStyleInputs | void,
+  buyerCountry: $Values<typeof COUNTRY>,
   locale?: $PropertyType<ButtonProps, "locale"> | void,
@@ -873,2 +875,3 @@ commit?: $PropertyType<ButtonProps, "commit"> | void,
   let {
+    buyerCountry,
     clientID,
@@ -976,2 +979,3 @@ fundingSource,
   return {
+    buyerCountry,
     clientID,
@@ -978,0 +982,0 @@ fundingSource,

src/ui/buttons/util.js

 /* @flow */
-import { FUNDING } from "@paypal/sdk-constants/src";
+import { COUNTRY, FUNDING } from "@paypal/sdk-constants/src";
 
-import { BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
+import { BUTTON_LABEL, BUTTON_LAYOUT, MESSAGE_POSITION } from "../../constants";
 import { ValidationError } from "../../lib";
@@ -42,1 +42,18 @@
 }
+
+export function checkLabelEligibility(
+  label?: $Values<typeof BUTTON_LABEL>,
+  buyerCountry: $Values<typeof COUNTRY>
+): $Values<typeof BUTTON_LABEL> | typeof undefined {
+  const eligibleCountriesForInstallmentLabel = ["BR", "MX"];
+
+  // Don't render the installment label if buyerCountry is not eligible for installment product
+  if (
+    label === BUTTON_LABEL.INSTALLMENT &&
+    !eligibleCountriesForInstallmentLabel.includes(buyerCountry)
+  ) {
+    return BUTTON_LABEL.PAYPAL;
+  }
+
+  return label;
+}

src/zoid/card-fields/component.jsx

@@ -53,2 +53,3 @@ /* @flow */
     height: number,
+    input: {| height: number |},
   |},
@@ -132,5 +133,6 @@ env?: string,
 const prerenderTemplate = ({ props, doc }) => {
-  return (
-    <CardPrerender nonce={props.nonce} height={props.style?.height} />
-  ).render(dom({ doc }));
+  const height = props.style?.height ?? props.style?.input?.height ?? null;
+  return (<CardPrerender nonce={props.nonce} height={height} />).render(
+    dom({ doc })
+  );
 };
@@ -137,0 +139,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1211497

increased by0.13%

Lines of code

16744

increased by0.19%

Worsened metrics

Published versions last months

14

decreased by-6.67%

Published versions last two months

25

decreased by-3.85%

Published versions last week

2

decreased by-33.33%

Published versions last year

159

decreased by-0.62%

No dependency changes