@paypal/checkout-components 5.0.248 → 5.0.249

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.248",
+  "version": "5.0.249",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -26,7 +26,8 @@
     "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",
+    "test": "npm run test:unit && npm run jest-ssr && npm run karma && npm run jest-screenshot",
+    "test:unit": "vitest",
     "typecheck": "npm run flow-typed && npm run flow",
     "version": "./scripts/version.sh",
     "webpack": "babel-node $(npm bin)/webpack",
@@ -62,6 +63,7 @@
   "license": "Apache-2.0",
   "readmeFilename": "README.md",
   "devDependencies": {
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@krakenjs/grumbler-scripts": "^8.0.7",
     "@krakenjs/sync-browser-mocks": "^3.0.0",
     "babel-core": "^7.0.0-bridge.0",
@@ -86,7 +88,9 @@
     "prettier": "^2.5.1",
     "prettier-plugin-sh": "^0.10.0",
     "puppeteer": "^1.20.0",
-    "serve": "^13.0.0"
+    "serve": "^13.0.0",
+    "vite": "^3.2.4",
+    "vitest": "^0.25.3"
   },
   "dependencies": {
     "@krakenjs/belter": "^2.0.0",

package/src/actions/save/index.js

@@ -0,0 +1,40 @@
+/* @flow */
+
+import { ZalgoPromise } from '@krakenjs/zalgo-promise/src';
+
+import { ValidationError } from "../../lib"
+
+type SaveActionConfig = {|
+  createVaultSetupToken: () => ZalgoPromise<string>,
+  onApprove: ({| vaultSetupToken: string |}) => void,
+|};
+
+export type CreateSaveAction = (config: SaveActionConfig) => {|type: 'SAVE', ... SaveActionConfig|}
+
+/**
+ * These are the input configurations required from the merchant.
+ */
+const REQUIRED_INPUTS = {
+  onApprove: 'function',
+  createVaultSetupToken: 'function'
+}
+
+const validateSaveConfig = (config: SaveActionConfig): void => {
+  for (const [inputProp, inputType] of Object.entries(REQUIRED_INPUTS)) {
+    if (!config[inputProp] || typeof config[inputProp] !== inputType) {
+      throw new ValidationError(`Save action is missing the required '${inputProp}' callback`)  
+    }
+  }
+}
+
+/**
+ * Creating a Save action allows us to validate initial inputs from the merchant, and then return the resulting object. 
+ */
+export const createSaveAction: CreateSaveAction = (config)  => {
+  validateSaveConfig(config)
+
+  return {
+    type: "SAVE",
+    ...config,
+  }
+};

package/src/funding/paypal/template.jsx

@@ -291,7 +291,7 @@ function ShowInstrumentsOnFile(opts) : ?ChildType {
                     )
                     : (
                         <div class='fi-container'>
-                            <div class='fi-logo' optional={ 1 }>
+                            <div class='fi-logo'>
                                 {
                                     (instrument && logo)
                                         ? logo

package/src/interface/actions.js

@@ -0,0 +1,21 @@
+/* @flow */
+
+import { isPayPalDomain } from "@paypal/sdk-client/src";
+
+import type { LazyProtectedExport } from "../types";
+import { createSaveAction, type CreateSaveAction } from "../actions/save";
+
+function protectedExport<T>(xport: T): ?T {
+  if (isPayPalDomain()) {
+    return xport;
+  }
+}
+
+export const actions: LazyProtectedExport<{|
+  Save: CreateSaveAction,
+|}> = {
+  __get__: () =>
+    protectedExport({
+      Save: createSaveAction,
+    }),
+};

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

@@ -126,10 +126,7 @@ export const buttonStyle = `
         margin-top: 10px;
     }
 
-    @media only screen and (max-width: ${ MIN_VAULT_BUTTON_WIDTH }px) {
-        .menu-button {
-            display: none;
-        }
+    @media only screen and (max-width: ${ MIN_VAULT_BUTTON_WIDTH - 1 }px) {
         .${ CLASS.CONTAINER } .${ CLASS.BUTTON_ROW }.${ CLASS.WALLET }.${ CLASS.WALLET_MENU } .${ CLASS.BUTTON }  {
             border-top-right-radius: 4px;
             border-bottom-right-radius: 4px;