@paypal/checkout-components 5.0.205 → 5.0.206

package/package.json

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

package/src/constants/button.js

@@ -61,3 +61,7 @@ export const MENU_PLACEMENT = {
     ABOVE:   ('above' : 'above'),
     BELOW: ('below' : 'below')
 };
+
+export const EXPERIENCE = {
+    INLINE: ('inline' : 'inline')
+};

package/src/ui/buttons/button.jsx

@@ -8,7 +8,7 @@ import { LOGO_COLOR, LOGO_CLASS } from '@paypal/sdk-logos/src';
 import { noop, preventClickFocus, isBrowser, isElement } from 'belter/src';
 
 import type { ContentType, Wallet, Experiment, WalletInstrument } from '../../types';
-import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, TEXT_COLOR, BUTTON_FLOW } from '../../constants';
+import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, EXPERIENCE, TEXT_COLOR, BUTTON_FLOW } from '../../constants';
 import { getFundingConfig } from '../../funding';
 import { DesignExperimentLabel } from '../../funding/paypal/template';
 
@@ -39,12 +39,13 @@ type IndividualButtonProps = {|
     vault : boolean,
     merchantFundingSource : ?$Values<typeof FUNDING>,
     instrument : ?WalletInstrument,
-    inline? : 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, inline } : IndividualButtonProps) : ElementNode {
+    userIDToken, personalization, onClick = noop, content, tagline, commit, experiment, instrument, experience } : IndividualButtonProps) : ElementNode {
 
+    const inlineExperience = experience === EXPERIENCE.INLINE;
     const fundingConfig = getFundingConfig()[fundingSource];
 
     if (!fundingConfig) {
@@ -130,7 +131,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             personalization={ personalization }
             tagline={ tagline }
             content={ content }
-            custom={ inline ? custom : null }
+            custom={ inlineExperience ? custom : null }
             experiment={ experiment }
         />
     );
@@ -199,6 +200,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
         <div
             class={ [
                 CLASS.BUTTON_ROW,
+                inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
                 `${ CLASS.NUMBER }-${ i }`,
                 `${ CLASS.LAYOUT }-${ layout }`,
                 `${ CLASS.SHAPE }-${ shape }`,
@@ -223,7 +225,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 } }
                 class={ [
                     CLASS.BUTTON,
-                    inline && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
+                    inlineExperience && fundingSource === FUNDING.CARD ? CLASS.CUSTOM : '',
                     `${ CLASS.NUMBER }-${ i }`,
                     `${ CLASS.LAYOUT }-${ layout }`,
                     `${ CLASS.SHAPE }-${ shape }`,

package/src/ui/buttons/buttons.jsx

@@ -6,7 +6,7 @@ import { FUNDING, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
 import { noop } from 'belter/src';
 
 import type { Wallet, WalletInstrument } from '../../types';
-import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT, BUTTON_FLOW } from '../../constants';
+import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT, BUTTON_FLOW, EXPERIENCE } from '../../constants';
 import { determineEligibleFunding, isWalletFundingEligible } from '../../funding';
 import { ValidationError } from '../../lib';
 
@@ -97,10 +97,12 @@ export function validateButtonProps(props : ButtonPropsInputs) {
 }
 
 export function Buttons(props : ButtonsProps) : ElementNode {
-    const { onClick = noop, inline } = props;
+    const { onClick = noop } = 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);
+        nonce, components, onShippingChange, personalization, userIDToken, content, flow, experiment, applePaySupport,
+        supportsPopups, supportedNativeBrowser, experience } = normalizeButtonProps(props);
     const { layout, shape, tagline } = style;
+    const inlineExperience = experience === EXPERIENCE.INLINE;
 
     let fundingSources = determineEligibleFunding({ fundingSource, layout, remembered, platform, fundingEligibility, components, onShippingChange, flow, wallet, applePaySupport, supportsPopups, supportedNativeBrowser, experiment });
     const multiple = fundingSources.length > 1;
@@ -110,7 +112,11 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     }
 
     if (fundingSources.indexOf(FUNDING.CARD) !== -1) {
-        fundingSources = [ ...fundingSources.filter(src => src !== FUNDING.CARD),  FUNDING.CARD ];
+        if (inlineExperience) {
+            fundingSources = [ FUNDING.CARD, ...fundingSources.filter(src => src !== FUNDING.CARD) ];
+        } else {
+            fundingSources = [ ...fundingSources.filter(src => src !== FUNDING.CARD),  FUNDING.CARD ];
+        }
     }
 
     const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange });
@@ -121,6 +127,18 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     );
 
     const { buttonDesignScript = '' } = getButtonDesign(personalization);
+    const index = (i) => {
+        if (!inlineExperience) {
+            return i;
+        }
+
+        // InlineXO: Need to change color indexing because we bring Cards to the top
+        if (i === 0) {
+            return fundingSources.length - 1;
+        } else {
+            return i - 1;
+        }
+    };
 
     return (
         <div class={ [
@@ -142,7 +160,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                 fundingSources.map((source, i) => (
                     <Button
                         content={ content }
-                        i={ i }
+                        i={ index(i) }
                         style={ style }
                         merchantFundingSource={ fundingSource }
                         fundingSource={ source }
@@ -162,7 +180,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
                         flow={ flow }
                         vault={ vault }
                         instrument={ instruments[source] }
-                        inline={ inline }
+                        experience={ experience }
                     />
                 ))
             }

package/src/ui/buttons/props.js

@@ -264,7 +264,7 @@ export type RenderButtonProps = {|
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    inline : boolean | void
+    experience : string
 |};
 
 export type PrerenderDetails = {|
@@ -313,7 +313,7 @@ export type ButtonProps = {|
     applePay : ApplePaySessionConfigRequest,
     meta : {||},
     renderedButtons : $ReadOnlyArray<$Values<typeof FUNDING>>,
-    inline : boolean | void
+    experience : string
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -351,7 +351,7 @@ export type ButtonPropsInputs = {
     applePaySupport : boolean,
     supportsPopups : boolean,
     supportedNativeBrowser : boolean,
-    inline : boolean | void
+    experience : string
 };
 
 export const DEFAULT_STYLE = {
@@ -497,7 +497,7 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
         applePaySupport = false,
         supportsPopups = false,
         supportedNativeBrowser = false,
-        inline = false
+        experience = ''
     } = props;
 
     const { country, lang } = locale;
@@ -540,5 +540,5 @@ export function normalizeButtonProps(props : ?ButtonPropsInputs) : RenderButtonP
 
     return { clientID, fundingSource, style, locale, remembered, env, fundingEligibility, platform, clientAccessToken,
         buttonSessionID, commit, sessionID, nonce, components, onShippingChange, personalization, content, wallet, flow,
-        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, inline };
+        experiment, vault, userIDToken, applePay, applePaySupport, supportsPopups, supportedNativeBrowser, experience };
 }

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

@@ -10,11 +10,22 @@ export const customStyle = ({ custom } : {| custom? : CustomStyle |}) : string =
 
     const { css } = custom || {};
 
+    let heightStyle = '';
+    let marginStyle = '';
     let style = Object.keys(css).reduce((acc, key) => {
+        if (key === 'height') {
+            heightStyle = `
+                    height: ${ css[key] };
+                    max-height: ${ css[key] };
+            `;
+        } else if (key.indexOf('margin') !== -1) {
+            marginStyle = `${ key }: ${ css[key] };`;
+        }
+        
         acc += `${ key }: ${ css[key] };`;
         return acc;
     }, '');
-    style = `.${ CLASS.BUTTON }.${ CLASS.CUSTOM } { ${ style } } `;
+    style = `.${ CLASS.BUTTON }.${ CLASS.CUSTOM } { ${ style } } .${ CLASS.BUTTON_ROW }.${ CLASS.CUSTOM } { ${ heightStyle + marginStyle }}`;
 
     return style;
 };

package/src/zoid/buttons/component.jsx

@@ -16,6 +16,7 @@ import { node, dom } from 'jsx-pragmatic/src';
 import { getSessionID, storageState, sessionState } from '../../lib';
 import { normalizeButtonStyle, type ButtonProps } from '../../ui/buttons/props';
 import { isFundingEligible } from '../../funding';
+import { EXPERIENCE } from '../../constants';
 
 import { containerTemplate } from './container';
 import { PrerenderedButtons } from './prerender';
@@ -597,13 +598,15 @@ export const getButtonsComponent : () => ButtonsComponent = memoize(() => {
                 value:      applePaySession
             },
 
-            inline: {
+            experience: {
                 queryParam: true,
                 required:   false,
-                type:       'boolean',
+                type:       'string',
                 value:      ({ props }) => {
                     const { style: { custom }, fundingEligibility } = props;
-                    return custom && fundingEligibility[FUNDING.CARD]?.eligible;
+                    const isInlineXO = (custom && (custom.label || custom.css)) && fundingEligibility[FUNDING.CARD]?.eligible;
+
+                    return isInlineXO ? EXPERIENCE.INLINE : '';
                 }
             },