@paypal/checkout-components 5.0.243 → 5.0.245

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.243",
+  "version": "5.0.245",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open-page demo/dev/index.htm --https --hot=false --inline=false",
+    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",
@@ -61,16 +61,19 @@
   "license": "Apache-2.0",
   "readmeFilename": "README.md",
   "devDependencies": {
-    "@krakenjs/grumbler-scripts": "^7.0.0",
+    "@krakenjs/grumbler-scripts": "^8.0.7",
     "@krakenjs/sync-browser-mocks": "^3.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "bundlemon": "^1.1.0",
     "conventional-changelog-cli": "^2.0.34",
+    "cross-env": "^7.0.3",
     "flow-bin": "0.155.0",
+    "flow-typed": "^3.8.0",
     "fs-extra": "^10.0.0",
     "husky": "^7.0.4",
     "imagemagick": "^0.1.3",
     "imgur": "^0.3.1",
+    "jest": "^29.3.1",
     "karma": "^6.0.0",
     "karma-coverage": "^2.0.3",
     "lint-staged": "^12.3.4",

package/src/constants/misc.js

@@ -1,16 +1,17 @@
 /* @flow */
 
 export const ATTRIBUTE = {
-    BUTTON:            ('data-button' : 'data-button'),
-    FUNDING_SOURCE:    ('data-funding-source' : 'data-funding-source'),
-    PAYMENT_METHOD_ID: ('data-payment-method-id' : 'data-payment-method-id'),
-    INSTRUMENT_ID:     ('data-instrument-id' : 'data-instrument-id'),
-    INSTRUMENT_TYPE:   ('data-instrument-type' : 'data-instrument-type'),
-    VERSION:           ('data-paypal-smart-button-version' : 'data-paypal-smart-button-version'),
-    CARD:              ('data-card' : 'data-card'),
-    MENU:              ('data-menu' : 'data-menu'),
-    OPTIONAL:          ('optional' : 'optional'),
-    PAY_NOW:           ('data-pay-now' : 'data-pay-now')
+    BUTTON:                    ('data-button' : 'data-button'),
+    FUNDING_SOURCE:            ('data-funding-source' : 'data-funding-source'),
+    PAYMENT_METHOD_ID:         ('data-payment-method-id' : 'data-payment-method-id'),
+    INSTRUMENT_ID:             ('data-instrument-id' : 'data-instrument-id'),
+    INSTRUMENT_TYPE:           ('data-instrument-type' : 'data-instrument-type'),
+    SECONDARY_INSTRUMENT_TYPE: ('data-secondary-instrument-type' : 'data-secondary-instrument-type'),
+    VERSION:                   ('data-paypal-smart-button-version' : 'data-paypal-smart-button-version'),
+    CARD:                      ('data-card' : 'data-card'),
+    MENU:                      ('data-menu' : 'data-menu'),
+    OPTIONAL:                  ('optional' : 'optional'),
+    PAY_NOW:                   ('data-pay-now' : 'data-pay-now')
 };
 
 export const DEFAULT = ('default' : 'default');

package/src/declarations.js

@@ -16,7 +16,7 @@ declare var __PAYPAL_CHECKOUT__ : {|
         __MODAL__ : string,
         __QRCODE__ : string,
         __WALLET__ : string,
-        __PAYMENT_FIELDS__ : string
+        __PAYMENT_FIELDS__ : string,
     |}
 |};
 
@@ -24,3 +24,6 @@ declare var __INLINE_CHECKOUT_ELIGIBILITY__ : {|
     eligible : boolean,
     ineligibilityReason : string
 |};
+
+declare var __WEB__: boolean;
+declare var __TREE_SHAKE__: boolean;

package/src/funding/card/config.jsx

@@ -170,10 +170,14 @@ export function getCardConfig() : FundingSourceConfig {
 
         WalletLabel,
 
-        showWalletMenu: ({ instrument }) => {
+        showWalletMenu: ({ instrument, userIDToken }) => {
             if (instrument.branded) {
                 return false;
             } else {
+                if (!instrument.tokenID?.match(/-/) && userIDToken) {
+                    return false
+                }
+
                 return true;
             }
         }

package/src/funding/common.jsx

@@ -81,7 +81,8 @@ export type WalletLabelOptions = {|
     vault : boolean,
     nonce? : ?string,
     textColor : $Values<typeof TEXT_COLOR>,
-    fundingSource : $Values<typeof FUNDING>
+    fundingSource : $Values<typeof FUNDING>,
+    showPayLabel : boolean
 |};
 
 export type TagOptions = {|
@@ -120,7 +121,7 @@ export type FundingSourceConfig = {|
     logoColors : { [$Values<typeof BUTTON_COLOR>] : $Values<typeof LOGO_COLOR> },
     shapes : $ReadOnlyArray<$Values<typeof BUTTON_SHAPE>>,
     labelText? : string | (({| content : ?ContentType, fundingEligibility : ?FundingEligibilityType |}) => string),
-    showWalletMenu : ({| instrument : WalletInstrument |}) => boolean
+    showWalletMenu : ({| instrument : WalletInstrument, userIDToken : ?string |}) => boolean
 |};
 
 export function BasicLabel({ logo, label, period, locale: { lang } } : LabelOptions) : ChildType {

package/src/funding/paypal/style.scoped.scss

@@ -68,6 +68,24 @@
         margin-left: auto;
     }
 
+    .show-pay-label {
+        all: inherit;
+    }
+
+    .show-instruments-on-file {
+        margin: auto;
+        display: flex;
+    }
+
+    .fi-container {
+        display: flex;
+    }
+
+    .balance, .fi-logo, .fi-label {
+        display: flex;
+        align-items: center;
+    }
+
     @media only screen and (max-width: 150px) {
         text-align: center;
         display: inline-block;

package/src/funding/paypal/template.jsx

@@ -234,8 +234,87 @@ export function WalletLabelOld(opts : WalletLabelOptions) : ?ChildType {
     );
 }
 
+function ShowPayLabel(opts) : ?ChildType {
+    const {instrument, content, payNow, textColor, logo, label } = opts;
+
+    return (
+        <div class='show-pay-label'>
+            <div class='pay-label' optional={ 2 }>
+                <Space />
+                {
+                    (instrument && content)
+                        ? <Text>{ payNow ? content.payNow : content.payWith }</Text>
+                        : <Text><PlaceHolder chars={ 7 } color={ textColor } /></Text>
+                }
+                <Space />
+            </div>
+            <div class='logo' optional={ 1 }>
+                {
+                    (instrument && logo)
+                        ? logo
+                        : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
+                }
+            </div>
+            <div class='label'>
+                <Space />
+                {
+                    (instrument && label)
+                        ? <Text>{ label }</Text>
+                        : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
+                }
+            </div>
+        </div>
+    );
+}
+
+function ShowInstrumentsOnFile(opts) : ?ChildType {
+    const { instrument, textColor, logo, label, content } = opts;
+
+    return (
+        <div class='show-instruments-on-file'>
+            {
+                instrument?.secondaryInstruments?.[0]
+                    ? (
+                        <div class='balance'>
+                            <Text>{ content?.balance } &</Text>
+                            <Space />
+                        </div>
+                    )
+                    : null
+            }
+            {
+                (instrument?.type === "balance")
+                    ? (
+                        <div class='paypal-balance'>
+                            <Text>{ content?.payPalBalance }</Text>
+                        </div>
+                    )
+                    : (
+                        <div class='fi-container'>
+                            <div class='fi-logo' optional={ 1 }>
+                                {
+                                    (instrument && logo)
+                                        ? logo
+                                        : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
+                                }
+                            </div>
+                            <div class='fi-label'>
+                                <Space />
+                                {
+                                    (instrument && label)
+                                        ? <Text>{ label }</Text>
+                                        : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
+                                }
+                            </div>
+                        </div>
+                    )
+            }
+        </div>
+    );
+}
+
 export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
-    const { logoColor, instrument, content, commit, vault, textColor, fundingSource } = opts;
+    const { logoColor, instrument, content, commit, vault, textColor, fundingSource, showPayLabel } = opts;
 
     if (instrument && !instrument.type) {
         return WalletLabelOld(opts);
@@ -305,31 +384,24 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
                         )
                         : null
                 }
-
-                <div class='pay-label' optional={ 2 }>
-                    <Space />
-                    {
-                        (instrument && content)
-                            ? <Text>{ payNow ? content.payNow : content.payWith }</Text>
-                            : <Text><PlaceHolder chars={ 7 } color={ textColor } /></Text>
-                    }
-                    <Space />
-                </div>
-                <div class='logo' optional={ 1 }>
-                    {
-                        (instrument && logo)
-                            ? logo
-                            : <Text><PlaceHolder chars={ 4 } color={ textColor } /></Text>
-                    }
-                </div>
-                <div class='label'>
-                    <Space />
-                    {
-                        (instrument && label)
-                            ? <Text>{ label }</Text>
-                            : <Text><PlaceHolder chars={ 6 } color={ textColor } /></Text>
-                    }
-                </div>
+                {
+                    showPayLabel
+                        ? <ShowPayLabel
+                            instrument={ instrument }
+                            content={ content }
+                            payNow={ payNow }
+                            textColor={ textColor }
+                            logo={ logo }
+                            label={ label }
+                        />
+                        : <ShowInstrumentsOnFile
+                            instrument={ instrument }
+                            textColor={ textColor }
+                            logo={ logo }
+                            label={ label }
+                            content={ content }
+                        />
+                }
             </div>
         </Style>
     );

package/src/types.js

@@ -2,6 +2,12 @@
 
 import { CARD, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
 
+export type SecondaryInstruments = $ReadOnlyArray<{|
+    type : string,
+    label : string,
+    instrumentID : string
+|}>;
+
 export type WalletInstrument = {|
     type? : $Values<typeof WALLET_INSTRUMENT>,
     label? : string,
@@ -10,7 +16,8 @@ export type WalletInstrument = {|
     tokenID? : string,
     vendor? : $Values<typeof CARD>,
     oneClick : boolean,
-    branded : boolean
+    branded : boolean,
+    secondaryInstruments? : SecondaryInstruments
 |};
 
 export type WalletPaymentType = {|
@@ -38,7 +45,8 @@ export type ContentType = {|
     credit : string,
     payWith : string,
     payLater : string,
-    flex : string
+    flex : string,
+    payPalBalance: string
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -41,11 +41,12 @@ type IndividualButtonProps = {|
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
     instrument : ?WalletInstrument,
-    experience? : string
+    experience? : string,
+    showPayLabel : boolean
 |};
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
-    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience, showPayLabel } : IndividualButtonProps) : ElementNode {
     
     const { custom, layout, shape } = style;
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
@@ -174,7 +175,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
 
     if (
         WalletLabel &&
-        flow === BUTTON_FLOW.PURCHASE &&
+        (!showPayLabel || flow === BUTTON_FLOW.PURCHASE) &&
         (instrument || (__WEB__ && userIDToken && (fundingSource === FUNDING.PAYPAL || fundingSource === FUNDING.VENMO)))
     ) {
         labelNode = (
@@ -189,13 +190,14 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 vault={ vault }
                 textColor={ textColor }
                 fundingSource={ fundingSource }
+                showPayLabel={ showPayLabel }
             />
         );
 
         isWallet = true;
     }
 
-    const shouldShowWalletMenu = isWallet && instrument && showWalletMenu({ instrument });
+    const shouldShowWalletMenu = isWallet && instrument && showWalletMenu({ instrument, userIDToken });
 
     return (
         <div
@@ -218,11 +220,12 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             <div
                 role='link'
                 { ...{
-                    [ ATTRIBUTE.BUTTON ]:            true,
-                    [ ATTRIBUTE.FUNDING_SOURCE ]:    fundingSource,
-                    [ ATTRIBUTE.PAYMENT_METHOD_ID ]: instrument ? instrument.tokenID : null,
-                    [ ATTRIBUTE.INSTRUMENT_ID ]:     instrument ? instrument.instrumentID : null,
-                    [ ATTRIBUTE.INSTRUMENT_TYPE ]:   instrument ? instrument.type : null
+                    [ ATTRIBUTE.BUTTON ]:                    true,
+                    [ ATTRIBUTE.FUNDING_SOURCE ]:            fundingSource,
+                    [ ATTRIBUTE.PAYMENT_METHOD_ID ]:         instrument ? instrument.tokenID : null,
+                    [ ATTRIBUTE.INSTRUMENT_ID ]:             instrument ? instrument.instrumentID : null,
+                    [ ATTRIBUTE.INSTRUMENT_TYPE ]:           instrument ? instrument.type : null,
+                    [ ATTRIBUTE.SECONDARY_INSTRUMENT_TYPE ]: instrument?.secondaryInstruments ? instrument.secondaryInstruments[0].type : null
                 } }
                 class={ [
                     CLASS.BUTTON,

package/src/ui/buttons/buttons.jsx

@@ -104,7 +104,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     const { onClick = noop } = props;
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
         nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
-        supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
+        supportsPopups, supportedNativeBrowser, experience, showPayLabel } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
  
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label && custom.label.length !== 0;
@@ -192,6 +192,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         vault={ vault }
                         instrument={ instruments[source] }
                         experience={ experience }
+                        showPayLabel={ showPayLabel }
                     />
                 ))
             }

package/src/ui/buttons/props.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, eslint-comments/disable-enable-pair  */
+/* eslint-disable eslint-comments/disable-enable-pair  */
 /* @flow */
 
 import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
@@ -393,7 +393,8 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 |};
 
 export type PrerenderDetails = {|
@@ -489,7 +490,8 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 };
 
 export const DEFAULT_STYLE = {
@@ -659,7 +661,8 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        experience = ''
+        experience = '',
+        showPayLabel = true
     } = props;
 
     const { country, lang } = locale;
@@ -702,5 +705,5 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
 
     return { clientID, fundingSource, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
         buttonSessionID, commit, sessionID, nonce, components, onShippingChange, onShippingAddressChange, onShippingOptionsChange, personalization, content, wallet, flow,
-        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
+        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience, showPayLabel };
 }

package/src/zoid/checkout/component.jsx

@@ -225,6 +225,12 @@ export function getCheckoutComponent() : CheckoutComponent {
                     sameDomain: true
                 },
         
+                onSmartWalletEligible: {
+                    type:       'function',
+                    required:   false,
+                    sameDomain: true
+                },
+        
                 accessToken: {
                     type:     'string',
                     required: false