@paypal/checkout-components 5.0.241-kitty → 5.0.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.241-kitty",
+  "version": "5.0.242",
   "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.124-kitty-2",
+    "@paypal/sdk-constants": "^1.0.123",
     "@paypal/sdk-logos": "^2.0.0"
   },
   "lint-staged": {

package/src/constants/misc.js

@@ -1,17 +1,16 @@
 /* @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'),
-    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')
+    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')
 };
 
 export const DEFAULT = ('default' : 'default');

package/src/funding/common.jsx

@@ -81,8 +81,7 @@ export type WalletLabelOptions = {|
     vault : boolean,
     nonce? : ?string,
     textColor : $Values<typeof TEXT_COLOR>,
-    fundingSource : $Values<typeof FUNDING>,
-    showPayLabel : boolean
+    fundingSource : $Values<typeof FUNDING>
 |};
 
 export type TagOptions = {|

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

@@ -68,14 +68,6 @@
         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,87 +234,8 @@ 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, showPayLabel } = opts;
+    const { logoColor, instrument, content, commit, vault, textColor, fundingSource } = opts;
 
     if (instrument && !instrument.type) {
         return WalletLabelOld(opts);
@@ -384,24 +305,31 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
                         )
                         : null
                 }
-                {
-                    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 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>
         </Style>
     );

package/src/types.js

@@ -2,12 +2,6 @@
 
 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,
@@ -16,8 +10,7 @@ export type WalletInstrument = {|
     tokenID? : string,
     vendor? : $Values<typeof CARD>,
     oneClick : boolean,
-    branded : boolean,
-    secondaryInstruments? : SecondaryInstruments
+    branded : boolean
 |};
 
 export type WalletPaymentType = {|
@@ -45,8 +38,7 @@ export type ContentType = {|
     credit : string,
     payWith : string,
     payLater : string,
-    flex : string,
-    payPalBalance: string
+    flex : string
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -41,12 +41,11 @@ type IndividualButtonProps = {|
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
     instrument : ?WalletInstrument,
-    experience? : string,
-    showPayLabel : boolean
+    experience? : string
 |};
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
-    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience, showPayLabel } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
     
     const { custom, layout, shape } = style;
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label;
@@ -175,7 +174,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
 
     if (
         WalletLabel &&
-        !showPayLabel &&
+        flow === BUTTON_FLOW.PURCHASE &&
         (instrument || (__WEB__ && userIDToken && (fundingSource === FUNDING.PAYPAL || fundingSource === FUNDING.VENMO)))
     ) {
         labelNode = (
@@ -190,7 +189,6 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 vault={ vault }
                 textColor={ textColor }
                 fundingSource={ fundingSource }
-                showPayLabel={ showPayLabel }
             />
         );
 
@@ -220,12 +218,11 @@ 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.SECONDARY_INSTRUMENT_TYPE ]: instrument?.secondaryInstruments ? instrument.secondaryInstruments[0].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
                 } }
                 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, showPayLabel } = normalizeButtonProps(props);
+        supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { custom, layout, shape, tagline } = style;
  
     const inlineExperience = experience === EXPERIENCE.INLINE && custom && custom.label && custom.label.length !== 0;
@@ -192,7 +192,6 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         vault={ vault }
                         instrument={ instruments[source] }
                         experience={ experience }
-                        showPayLabel={ showPayLabel }
                     />
                 ))
             }

package/src/ui/buttons/props.js

@@ -393,8 +393,7 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string,
-    showPayLabel : boolean
+    experience : string
 |};
 
 export type PrerenderDetails = {|
@@ -430,6 +429,7 @@ export type ButtonProps = {|
     remember : ($ReadOnlyArray<$Values<typeof FUNDING>>) => void,
     clientID : string,
     sessionID : string,
+    buttonLocation : string,
     buttonSessionID : string,
     onShippingChange : ?OnShippingChange,
     onShippingAddressChange : ?OnShippingAddressChange,
@@ -489,8 +489,7 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    experience : string,
-    showPayLabel : boolean
+    experience : string
 };
 
 export const DEFAULT_STYLE = {
@@ -660,8 +659,7 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        experience = '',
-        showPayLabel
+        experience = ''
     } = props;
 
     const { country, lang } = locale;
@@ -704,5 +702,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, showPayLabel };
+        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
 }

package/src/zoid/buttons/component.jsx

@@ -386,6 +386,12 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 queryParam: true
             },
 
+            buttonLocation: {
+                type: 'string',
+                value: () => window.location.hostname,
+                queryParam: false
+            },
+
             buttonSessionID: {
                 type:       'string',
                 value:      uniqueID,