@paypal/checkout-components 5.0.204 → 5.0.205

package/package.json

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

package/src/constants/class.js

@@ -38,5 +38,7 @@ export const CLASS = {
 
     HIDDEN:  ('hidden' : 'hidden'),
 
-    IMMEDIATE: ('immediate' : 'immediate')
+    IMMEDIATE: ('immediate' : 'immediate'),
+
+    CUSTOM: ('custom' : 'custom')
 };

package/src/funding/card/config.jsx

@@ -121,7 +121,15 @@ export function getCardConfig() : FundingSourceConfig {
             );
         },
 
-        Label: ({ logo, locale, content }) => {
+        Label: ({ logo, locale, content, custom }) => {
+            if (custom && custom.label) {
+                return (
+                    <Fragment>
+                        <Text>{ custom.label }</Text>
+                        <Space />
+                    </Fragment>
+                );
+            }
             const { lang } = locale;
             const isRTL = isRTLLanguage(lang);
             return (

package/src/funding/common.jsx

@@ -7,7 +7,7 @@ import type { FundingEligibilityType } from '@paypal/sdk-client/src';
 import { PLATFORM, type LocaleType, COUNTRY, CARD, COMPONENTS, FUNDING, ENV } from '@paypal/sdk-constants/src';
 import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 
-import type { ContentType, WalletInstrument, Experiment, Requires, Wallet } from '../types';
+import type { ContentType, CustomStyle, WalletInstrument, Experiment, Requires, Wallet } from '../types';
 import { BUTTON_COLOR, BUTTON_SHAPE, BUTTON_LAYOUT, DEFAULT, BUTTON_LABEL, BUTTON_FLOW, TEXT_COLOR } from '../constants';
 import type { Personalization } from '../ui/buttons/props';
 
@@ -47,7 +47,8 @@ export type LabelOptions = {|
     nonce : ?string,
     tagline : ?boolean,
     content : ?ContentType,
-    experiment? : Experiment
+    experiment? : Experiment,
+    custom? : ?CustomStyle
 |};
 
 export type DesignExperimentLabelOptions = {|

package/src/types.js

@@ -53,6 +53,13 @@ export type Requires = {|
     native? : boolean
 |};
 
+export type CustomStyle = {|
+    css : {|
+        [string] : string
+    |},
+    label : string
+|};
+
 export type LazyExport<T> = {|
     __get__ : () => T
 |};

package/src/ui/buttons/button.jsx

@@ -38,11 +38,12 @@ type IndividualButtonProps = {|
     flow : $Values<typeof BUTTON_FLOW>,
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
-    instrument : ?WalletInstrument
+    instrument : ?WalletInstrument,
+    inline? : boolean
 |};
 
 export function Button({ fundingSource, style, multiple, locale, env, fundingEligibility, i, nonce, flow, vault,
-    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, inline } : IndividualButtonProps) : ElementNode {
 
     const fundingConfig = getFundingConfig()[fundingSource];
 
@@ -94,9 +95,9 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
         }
     };
 
-    const { layout, shape } = style;
+    const { custom, layout, shape } = style;
     
-    const labelText =  typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+    const labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
 
     const logoNode = (
         <Logo
@@ -129,6 +130,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             personalization={ personalization }
             tagline={ tagline }
             content={ content }
+            custom={ inline ? custom : null }
             experiment={ experiment }
         />
     );
@@ -221,6 +223,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 } }
                 class={ [
                     CLASS.BUTTON,
+                    inline && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
                     `${ CLASS.NUMBER }-${ i }`,
                     `${ CLASS.LAYOUT }-${ layout }`,
                     `${ CLASS.SHAPE }-${ shape }`,

package/src/ui/buttons/buttons.jsx

@@ -97,7 +97,7 @@ export function validateButtonProps(props : ButtonPropsInputs) {
 }
 
 export function Buttons(props : ButtonsProps) : ElementNode {
-    const { onClick = noop } = props;
+    const { onClick = noop, inline } = props;
     const { wallet, fundingSource, style, locale, remembered, env, fundingEligibility, platform, commit, vault,
         nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport, supportsPopups, supportedNativeBrowser } = normalizeButtonProps(props);
     const { layout, shape, tagline } = style;
@@ -162,6 +162,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         flow={ flow }
                         vault={ vault }
                         instrument={ instruments[source] }
+                        inline={ inline }
                     />
                 ))
             }

package/src/ui/buttons/props.js

@@ -12,7 +12,7 @@ import { LOGO_COLOR } from '@paypal/sdk-logos/src';
 import { SUPPORTED_FUNDING_SOURCES } from '@paypal/funding-components/src';
 import type { ComponentFunctionType } from 'jsx-pragmatic/src';
 
-import type { ContentType, Wallet, Experiment } from '../../types';
+import type { ContentType, CustomStyle, Wallet, Experiment } from '../../types';
 import { BUTTON_LABEL, BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_SHAPE, BUTTON_SIZE, BUTTON_FLOW, MENU_PLACEMENT } from '../../constants';
 import { getFundingConfig, isFundingEligible } from '../../funding';
 
@@ -130,7 +130,8 @@ export type ButtonStyle = {|
     layout : $Values<typeof BUTTON_LAYOUT>,
     menuPlacement : $Values<typeof MENU_PLACEMENT>,
     period? : number,
-    height? : number
+    height? : number,
+    custom? : CustomStyle
 |};
 
 export type ButtonStyleInputs = {|
@@ -140,7 +141,8 @@ export type ButtonStyleInputs = {|
     tagline? : boolean | void,
     layout? : $Values<typeof BUTTON_LAYOUT> | void,
     period? : number | void,
-    height? : number | void
+    height? : number | void,
+    custom? : CustomStyle
 |};
 
 type PersonalizationComponentProps = {|
@@ -397,7 +399,8 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         tagline = (layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource),
         height,
         period,
-        menuPlacement = MENU_PLACEMENT.BELOW
+        menuPlacement = MENU_PLACEMENT.BELOW,
+        custom
     } = style;
 
     // $FlowFixMe
@@ -443,7 +446,7 @@ export function normalizeButtonStyle(props : ?ButtonPropsInputs, style : ButtonS
         }
     }
 
-    return { label, layout, color, shape, tagline, height, period, menuPlacement };
+    return { custom, label, layout, color, shape, tagline, height, period, menuPlacement };
 }
 
 const COUNTRIES = values(COUNTRY);

package/src/ui/buttons/style.jsx

@@ -15,8 +15,8 @@ type StyleProps = {|
 
 export function Style({ style, nonce, fundingEligibility } : StyleProps) : ElementNode {
 
-    const { height } = style;
-    const css = componentStyle({ height, fundingEligibility });
+    const { custom, height } = style;
+    const css = componentStyle({ custom, height, fundingEligibility });
 
     return (
         <style nonce={ nonce } innerHTML={ css } />

package/src/ui/buttons/styles/base.js

@@ -2,18 +2,22 @@
 
 import { type FundingEligibilityType } from '@paypal/sdk-constants/src';
 
+import type { CustomStyle } from '../../../types';
+
 import { pageStyle } from './page';
 import { buttonStyle } from './button';
 import { labelStyle } from './labels';
 import { buttonResponsiveStyle } from './responsive';
 import { buttonColorStyle } from './color';
+import { customStyle } from './custom';
 
-export function componentStyle({ height, fundingEligibility } : {| height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
+export function componentStyle({ custom, height, fundingEligibility } : {| custom? : CustomStyle, height? : ?number, fundingEligibility : FundingEligibilityType |}) : string {
     return `
         ${ pageStyle }
         ${ buttonStyle }
         ${ buttonColorStyle }
         ${ labelStyle }
         ${ buttonResponsiveStyle({ height, fundingEligibility }) }
+        ${ customStyle({ custom }) }
     `;
 }

package/src/ui/buttons/styles/button.js

@@ -1,9 +1,9 @@
 /* @flow */
 
-import { ENV, FUNDING } from '@paypal/sdk-constants/src';
+import { ENV } from '@paypal/sdk-constants/src';
 import { LOGO_CLASS } from '@paypal/sdk-logos/src';
 
-import { CLASS, ATTRIBUTE } from '../../../constants';
+import { CLASS } from '../../../constants';
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -126,11 +126,6 @@ export const buttonStyle = `
         margin-top: 10px;
     }
 
-    .${ CLASS.BUTTON }[${ ATTRIBUTE.FUNDING_SOURCE }=${ FUNDING.VENMO }] .${ CLASS.BUTTON_LABEL } .${ CLASS.TEXT } {
-        font-size: 18px;
-        font-weight: 500;
-    }
-
     @media only screen and (max-width: ${ MIN_VAULT_BUTTON_WIDTH }px) {
         .menu-button {
             display: none;

package/src/ui/buttons/styles/custom.js

@@ -0,0 +1,20 @@
+/* @flow */
+
+import type { CustomStyle } from '../../../types';
+import { CLASS } from '../../../constants';
+
+export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string => {
+    if (!custom) {
+        return '';
+    }
+
+    const { css } = custom || {};
+
+    let style = Object.keys(css).reduce((acc, key) => {
+        acc += `${ key }: ${ css[key] };`;
+        return acc;
+    }, '');
+    style = `.${ CLASS.BUTTON }.${ CLASS.CUSTOM } { ${ style } } `;
+
+    return style;
+};

package/src/zoid/buttons/component.jsx

@@ -600,7 +600,11 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
             inline: {
                 queryParam: true,
                 required:   false,
-                type:       'boolean'
+                type:       'boolean',
+                value:      ({ props }) => {
+                    const { style: { custom }, fundingEligibility } = props;
+                    return custom && fundingEligibility[FUNDING.CARD]?.eligible;
+                }
             },
 
             // allowBillingPayments prop is used by Honey Extension to render the one-click button