@paypal/checkout-components 5.0.395 → 5.0.396

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.395",
+  "version": "5.0.396",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/funding/common.jsx

@@ -144,6 +144,7 @@ export type FundingSourceConfig = {|
         fundingEligibility: ?FundingEligibilityType,
         label?: string,
         period?: number,
+        locale?: LocaleType,
       |}) => string),
   showWalletMenu: ({|
     instrument: WalletInstrument,

package/src/funding/paylater/config.jsx

@@ -2,7 +2,7 @@
 /** @jsx node */
 
 import type { FundingEligibilityType } from "@paypal/sdk-client/src";
-import { FUNDING } from "@paypal/sdk-constants/src";
+import { FUNDING, type LocaleType } from "@paypal/sdk-constants/src";
 import { node, Style } from "@krakenjs/jsx-pragmatic/src";
 import {
   PPLogoExternalImage,
@@ -22,9 +22,11 @@ import css from "./style.scoped.scss";
 
 function getLabelText(
   fundingEligibility: FundingEligibilityType,
+  locale?: LocaleType,
   shouldApplyRebrandedStyles?: boolean
 ): ?string {
   const { paylater } = fundingEligibility;
+  const { lang } = locale || {};
 
   let labelText;
 
@@ -53,6 +55,14 @@ function getLabelText(
     labelText = "Paga a rate";
   }
 
+  if (
+    paylater?.products?.paylater?.eligible &&
+    paylater?.products?.paylater?.variant === "CA" &&
+    lang === "fr"
+  ) {
+    labelText = "Payer en 4";
+  }
+
   if (paylater?.products?.payIn4?.eligible) {
     labelText = "Pay in 4";
   }
@@ -104,7 +114,9 @@ export function getPaylaterConfig(): FundingSourceConfig {
             ) : (
               <PPLogoInlineSVG logoColor={logoColor} />
             )}
-            <Text>{getLabelText(fundingEligibility) || "Pay Later"}</Text>
+            <Text>
+              {getLabelText(fundingEligibility, locale) || "Pay Later"}
+            </Text>
           </Style>
         );
       }
@@ -125,8 +137,11 @@ export function getPaylaterConfig(): FundingSourceConfig {
             <PPRebrandLogoInlineSVG logoColor={logoColorPP} />
           )}
           <Text>
-            {getLabelText(fundingEligibility, shouldApplyRebrandedStyles) ||
-              "Pay Later"}
+            {getLabelText(
+              fundingEligibility,
+              locale,
+              shouldApplyRebrandedStyles
+            ) || "Pay Later"}
           </Text>
         </Style>
       );
@@ -175,9 +190,9 @@ export function getPaylaterConfig(): FundingSourceConfig {
       [BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
     },
 
-    labelText: ({ fundingEligibility }) => {
+    labelText: ({ fundingEligibility, locale }) => {
       return (
-        (fundingEligibility && getLabelText(fundingEligibility)) ||
+        (fundingEligibility && getLabelText(fundingEligibility, locale)) ||
         `${FUNDING.PAYPAL} ${FUNDING.PAYLATER}`
       );
     },

package/src/ui/buttons/button.jsx

@@ -185,6 +185,7 @@ export function Button({
             fundingEligibility,
             label: eligibleLabel,
             period,
+            locale,
           })
         : fundingConfig.labelText || fundingSource;