@paypal/checkout-components 5.0.245 → 5.0.246

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.245",
+  "version": "5.0.246",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "debug": "cross-env NODE_ENV=debug",
     "delete-size": "rm dist/size.* dist/report.html",
     "demo": "serve ./demo -l 1337",
-    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false",
+    "dev": "npm run check-node-version && babel-node $(npm bin)/webpack-dev-server --config webpack.config.dev.js --port 9001 --host localhost.paypal.com --open demo/dev/index.htm --https --hot=false --static './'",
     "eslint-find-rules": "eslint-find-rules --current .eslintrc.js --unused --plugin",
     "flow": "flow",
     "flow-typed": "rm -rf flow-typed && flow-typed install && rm flow-typed/npm/puppeteer_*",
@@ -25,11 +25,12 @@
     "preversion": "./scripts/preversion.sh",
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && flow-typed install",
     "release": "./scripts/publish.sh",
+    "start": "npm run webpack -- --progress --watch",
     "test": "npm run jest-ssr && npm run karma && npm run jest-screenshot",
     "typecheck": "npm run flow-typed && npm run flow",
     "version": "./scripts/version.sh",
-    "webpack": "babel-node $(npm bin)/webpack --progress",
-    "webpack-size": "babel-node $(npm bin)/webpack --progress --config webpack.config.size",
+    "webpack": "babel-node $(npm bin)/webpack",
+    "webpack-size": "npm run webpack -- --config webpack.config.size",
     "prepare": "husky install"
   },
   "files": [

package/src/interface/button.js

@@ -1,10 +1,9 @@
 /* @flow */
 
-import { isPayPalDomain } from '@paypal/sdk-client/src';
 import { PopupOpenError as _PopupOpenError, destroy as zoidDestroy, destroyComponents } from '@krakenjs/zoid/src';
 
 import type { LazyExport, LazyProtectedExport } from '../types';
-import { allowIframe as _allowIframe } from '../lib';
+import { allowIframe as _allowIframe, protectedExport } from '../lib';
 import { getCheckoutComponent, type CheckoutComponent } from '../zoid/checkout';
 import { getButtonsComponent, type ButtonsComponent } from '../zoid/buttons';
 import { getCardFormComponent, type CardFormComponent } from '../zoid/card-form';
@@ -15,12 +14,6 @@ import { Buttons as _ButtonsTemplate } from '../ui/buttons';
 import { getQRCodeComponent, type QRCodeComponent } from '../zoid/qr-code';
 import { getModalComponent, type ModalComponent } from '../zoid/modal/component';
 
-function protectedExport<T>(xport : T) : ?T {
-    if (isPayPalDomain()) {
-        return xport;
-    }
-}
-
 export const Buttons : LazyExport<ButtonsComponent> = {
     __get__: () => getButtonsComponent()
 };

package/src/interface/card-fields.js

@@ -2,7 +2,8 @@
 
 import type { LazyExport } from '../types';
 import { getCardFieldsComponent, type CardFieldsComponent } from '../zoid/card-fields/component';
+import { protectedExport } from '../lib';
 
 export const CardFields : LazyExport<CardFieldsComponent> = {
-    __get__: () => getCardFieldsComponent()
+    __get__: () => protectedExport(getCardFieldsComponent())
 };

package/src/lib/security.js

@@ -21,3 +21,6 @@ export function allowIframe() : boolean {
 
     return false;
 }
+
+// $FlowIssue
+export const protectedExport = (unprotectedExport) => (isPayPalDomain() ? unprotectedExport : undefined);

package/src/types.js

@@ -46,7 +46,8 @@ export type ContentType = {|
     payWith : string,
     payLater : string,
     flex : string,
-    payPalBalance: string
+    payPalBalance: string,
+    moreOptions: string
 |};
 
 export type Experiment = {|

package/src/ui/buttons/button.jsx

@@ -99,8 +99,18 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
             preventClickFocus(el);
         }
     };
-    
-    const labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+
+    function getAriaLabel() : string {
+        let labelText = typeof fundingConfig.labelText === 'function' ?  fundingConfig.labelText({ content, fundingEligibility }) : (fundingConfig.labelText || fundingSource);
+
+        if (!showPayLabel && instrument?.vendor && instrument.label) {
+            labelText = instrument.secondaryInstruments ? `${instrument.secondaryInstruments[0].type} & ${instrument.vendor} ${instrument.label}` : `${instrument.vendor} ${instrument.label}`;
+        }
+
+        return labelText;
+    }
+
+    const labelText = getAriaLabel();
 
     const logoNode = (
         <Logo
@@ -253,7 +263,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 <Spinner />
             </div>
 
-            { shouldShowWalletMenu ? <MenuButton textColor={ textColor } /> : null }
+            { shouldShowWalletMenu ? <MenuButton textColor={ textColor } content={ content } /> : null }
         </div>
     );
 }

package/src/ui/buttons/menu-button/menu-button.jsx

@@ -5,10 +5,12 @@ import { node, type ChildType, Style } from '@krakenjs/jsx-pragmatic/src';
 
 import { ATTRIBUTE, TEXT_COLOR } from '../../../constants';
 import { Chevron } from '../../chevron';
+import type { ContentType } from '../../../types';
 
 import css from './menu-button.scoped.scss';
 
-export function MenuButton({ textColor = TEXT_COLOR.BLACK } : {| textColor? : $Values<typeof TEXT_COLOR> |} = { }) : ChildType {
+export function MenuButton({ textColor = TEXT_COLOR.BLACK, content } : {| textColor? : $Values<typeof TEXT_COLOR>, content : ?ContentType |} = { }) : ChildType {
+    const labelText = content?.moreOptions;
     return (
         <Style css={ css }>
             <div
@@ -16,7 +18,10 @@ export function MenuButton({ textColor = TEXT_COLOR.BLACK } : {| textColor? : $V
                     [ATTRIBUTE.MENU]: true
                 } }
                 tabindex='0'
-                class='menu-button'>
+                class='menu-button'
+                role='button'
+                aria-label={ labelText }
+                aria-haspopup='menu'>
                 <Chevron color={ textColor } />
             </div>
         </Style>

package/src/zoid/card-fields/component.jsx

@@ -21,7 +21,8 @@ const CARD_FIELD_TYPE = {
     NUMBER: 'number',
     CVV:    'cvv',
     EXPIRY: 'expiry',
-    NAME:   'name'
+    NAME:   'name',
+    POSTAL: 'postal'
 };
 
 type CardFieldsProps = {|
@@ -44,6 +45,8 @@ type CardFieldsProps = {|
     commit : boolean,
     vault : boolean,
     branded? : boolean,
+    minLength?: number,
+    maxLength?: number,
 
     createOrder : () => ZalgoPromise<string> | string,
     onApprove : ({| returnUrl : string |}, {| redirect : (?CrossDomainWindowType, ?string) => ZalgoPromise<void> |}) => ?ZalgoPromise<void>,
@@ -62,14 +65,20 @@ type CardFieldProps = {|
 export type CardFieldComponent = ZoidComponent<CardFieldProps>;
 
 type CardFieldsExports = {|
-    submit : () => ZalgoPromise<void>
+    submit : () => ZalgoPromise<void>,
+    setAttribute : () => ZalgoPromise<void>,
+    removeAttribute : () => ZalgoPromise<void>,
+    addClass : () => ZalgoPromise<void>,
+    removeClass : () => ZalgoPromise<void>,
+    getState : () => ZalgoPromise<Object>
 |};
 
 type CardFieldsChildren = {|
     NumberField : CardFieldComponent,
     CVVField : CardFieldComponent,
     ExpiryField : CardFieldComponent,
-    NameField : CardFieldComponent
+    NameField : CardFieldComponent,
+    PostalCodeField: CardFieldComponent
 |};
 
 const url = () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__CARD_FIELD__ }`;
@@ -110,6 +119,30 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
 
             prerenderTemplate,
 
+            exports: {
+                setAttribute: {
+                    type: 'function'
+                },
+                removeAttribute: {
+                    type: 'function'
+                },
+                addClass: {
+                    type: 'function'
+                },
+                removeClass: {
+                    type: 'function'
+                },
+                clear: {
+                    type: 'function'
+                },
+                focus: {
+                    type: 'function'
+                },
+                setMessage: {
+                    type: 'function'
+                }
+            },
+
             props: {
                 type: {
                     type:       'string',
@@ -197,6 +230,18 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                     }
                 },
 
+                minLength: {
+                    type: 'number',
+                    required: false,
+                    value: ({props}) => props.minLength
+                },
+
+                maxLength: {
+                    type: 'number',
+                    required: false,
+                    value: ({props}) => props.maxLength
+                },
+
                 fundingEligibility: {
                     type:  'object',
                     value: ({ props }) => props.parent.props.fundingEligibility
@@ -250,6 +295,7 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
     const CVVField = genericCardField(CARD_FIELD_TYPE.CVV);
     const ExpiryField = genericCardField(CARD_FIELD_TYPE.EXPIRY);
     const NameField = genericCardField(CARD_FIELD_TYPE.NAME);
+    const PostalCodeField = genericCardField(CARD_FIELD_TYPE.POSTAL);
 
     const CardFields = create({
         tag: 'paypal-card-fields',
@@ -278,14 +324,49 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                 NumberField,
                 CVVField,
                 ExpiryField,
-                NameField
+                NameField,
+                PostalCodeField
             };
         },
 
         exports: {
             submit: {
                 type: 'function'
+            },
+            setAttribute: {
+                type: 'function'
+            },
+            removeAttribute: {
+                type: 'function'
+            },
+            addClass: {
+                type: 'function'
+            },
+            removeClass: {
+                type: 'function'
+            },
+            clear: {
+                type: 'function'
+            },
+            focus: {
+                type: 'function'
+            },
+            getState: {
+                type: 'function'
+            },
+        },
+
+        eligible: () => {
+            const fundingEligibility = getRefinedFundingEligibility();
+            if (fundingEligibility?.card?.eligible) {
+                return {
+                    eligible: true
+                };
             }
+            return {
+                eligible: false,
+                reason: 'card payments are not eligible'
+            };
         },
 
         props: {
@@ -365,6 +446,18 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
                 queryParam: true
             },
 
+            minLength: {
+                type: 'number',
+                required: false,
+                value: ({props}) => props.minLength
+            },
+
+            maxLength: {
+                type: 'number',
+                required: false,
+                value: ({props}) => props.maxLength
+            },
+
             fundingEligibility: {
                 type:  'object',
                 value: getRefinedFundingEligibility

package/src/zoid/card-fields/prerender.jsx

@@ -8,7 +8,7 @@ type PrerenderedCardProps = {|
     height : ?number
 |};
 
-const DEFAULT_HEIGHT = 30;
+const DEFAULT_HEIGHT = 78;
 
 export function CardPrerender({ nonce, height } : PrerenderedCardProps) : ChildType {
     return (