@paypal/checkout-components 5.0.245 → 5.0.246-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.245",
+  "version": "5.0.246-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -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/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 (