@paypal/checkout-components 5.0.239-alpha.1 → 5.0.240

package/package.json

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

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';
 
-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? : $ReadOnlyArray<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;
@@ -190,7 +189,6 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 vault={ vault }
                 textColor={ textColor }
                 fundingSource={ fundingSource }
-                showPayLabel={ showPayLabel }
             />
         );
 

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