@paypal/checkout-components 5.0.240 → 5.0.241-kitty

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.240",
+  "version": "5.0.241-kitty",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -94,7 +94,7 @@
     "@paypal/common-components": "^1.0.33",
     "@paypal/funding-components": "^1.0.27",
     "@paypal/sdk-client": "^4.0.166",
-    "@paypal/sdk-constants": "^1.0.123",
+    "@paypal/sdk-constants": "1.0.124-kitty-2",
     "@paypal/sdk-logos": "^2.0.0"
   },
   "lint-staged": {

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/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 = {|

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

@@ -68,6 +68,14 @@
         margin-left: auto;
     }
 
+    .show-pay-label {
+        all: inherit;
+    }
+
+    .no-pay-label {
+        margin: auto;
+    }
+
     @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 NoPayLabel(opts) : ?ChildType {
+    const { instrument, textColor, logo, label, content } = opts;
+
+    return (
+        <div class='no-pay-label'>
+            {
+                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='no-paypal-balance'>
+                            <div class='fi-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>
+                    )
+            }
+        </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 }
+                        />
+                        : <NoPayLabel
+                            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 = {|
+    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 &&
         (instrument || (__WEB__ && userIDToken && (fundingSource === FUNDING.PAYPAL || fundingSource === FUNDING.VENMO)))
     ) {
         labelNode = (
@@ -189,6 +190,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 vault={ vault }
                 textColor={ textColor }
                 fundingSource={ fundingSource }
+                showPayLabel={ showPayLabel }
             />
         );
 
@@ -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

@@ -393,7 +393,8 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 |};
 
 export type PrerenderDetails = {|
@@ -488,7 +489,8 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string
+    experience : string,
+    showPayLabel : boolean
 };
 
 export const DEFAULT_STYLE = {
@@ -658,7 +660,8 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        experience = ''
+        experience = '',
+        showPayLabel
     } = props;
 
     const { country, lang } = locale;
@@ -701,5 +704,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 };
 }