TypeScript updates and fixes

.github/workflows/dt.yaml

@@ -30,7 +30,7 @@ jobs:
       - name: Add DefinitelyTyped header
         run: |
           version=$(cat recurly-js/package.json | jq '.version' -r | sed -ne 's/^\([0-9]*\.[0-9]*\).*/\1/p')
-          echo "// Type definitions for non-npm package recurly__recurly-js $version
+          echo "// Type definitions for non-npm package @recurly/recurly-js $version
           // Project: https://github.com/recurly/recurly-js
           // Definitions by: Dave Brudner <https://github.com/dbrudner>
           //                 Chris Rogers <https://github.com/chrissrogers>

test/types/bank-account.ts

@@ -1,4 +1,4 @@
-import { TokenHandler, BacsBillingInfo, BecsBillingInfo } from 'recurly__recurly-js';
+import { TokenHandler, BacsBillingInfo, BecsBillingInfo } from '@recurly/recurly-js';
 
 export default function bankAccount() {
   const handleToken: TokenHandler = (err, token) => {

test/types/configure.ts

@@ -19,6 +19,53 @@ export default function configure() {
     timeout: 60000
   });
 
+  const elementOptions = {
+    selector: 'my-selector',
+    format: true,
+    inputType: 'text',
+    tabIndex: '1',
+    style: {
+      invalid: {
+        fontSize: '16px'
+      },
+      padding: '10px',
+      placeholder: {
+        color: 'red',
+        content: 'content'
+      }
+    }
+  };
+
+  window.recurly.configure({
+    publicKey: 'my-public-key',
+    fields: {
+      all: elementOptions,
+      number: elementOptions,
+      month: elementOptions,
+      year: elementOptions,
+      cvv: elementOptions,
+      card: {
+        selector: 'my-card-element-selector',
+        inputType: 'mobileSelect',
+        displayIcon: true,
+        style: {
+          fontSize: '1em',
+          placeholder: {
+            color: 'gray !important',
+            fontWeight: 'bold',
+            content: {
+              number: 'Card number',
+              cvv: 'CVC'
+            }
+          },
+          invalid: {
+            fontColor: 'red'
+          }
+        }
+      }
+    }
+  });
+
   // $ExpectError
   window.recurly.configure({
     cors: true,

test/types/paypal.ts

@@ -18,6 +18,8 @@ export default function paypal() {
 
   paypal.on('token', () => {});
   paypal.on('error', () => {});
+  paypal.on('cancel', () => {});
+  paypal.on('ready', () => {});
   // $ExpectError
   paypal.on('fake-event', () => {});
 

test/types/recurly-error.ts

@@ -1,4 +1,4 @@
-import { RecurlyError } from 'recurly__recurly-js';
+import { RecurlyError } from '@recurly/recurly-js';
 
 const recurlyError: RecurlyError = {
   code: 'code',

test/types/tsconfig.json

@@ -9,7 +9,7 @@
     "types": [],
     "baseUrl": "../../types",
     "paths": {
-      "recurly__recurly-js": ["./"]
+      "@recurly/recurly-js": ["./"]
     }
   }
 }

types/lib/configure.d.ts

@@ -1,3 +1,5 @@
+import { CardElementOptions, IndividualElementOptions } from './elements';
+
 export type RecurlyOptions = {
   cors?: boolean;
   publicKey: string;
@@ -15,6 +17,18 @@ export type RecurlyOptions = {
       sessionId?: string;
     };
   };
+
+  /**
+   * @deprecated Use {@link https://developers.recurly.com/reference/recurly-js/index.html#elements|Elements} instead.
+   */
+  fields?: {
+    all?: IndividualElementOptions;
+    number?: IndividualElementOptions & { selector?: string };
+    month?: IndividualElementOptions & { selector?: string };
+    year?: IndividualElementOptions & { selector?: string };
+    cvv?: IndividualElementOptions & { selector?: string };
+    card?: CardElementOptions & { selector?: string }
+  };
 };
 
 export type Configure = (recurlyConfig: RecurlyOptions | string) => void;

types/lib/elements.d.ts

@@ -181,7 +181,7 @@ export type IndividualElementOptions = {
      *
      * @see {@link https://developers.recurly.com/reference/recurly-js/index.html#styling-the-individual-card-elements|Styling the invididual card elements}
      */
-    invalid: CommonElementStyle;
+    invalid?: CommonElementStyle;
 
     /**
      * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding}

types/lib/paypal.d.ts

@@ -14,7 +14,7 @@ export type DirectConfig = {
 
 export type PayPalConfig = BraintreeConfig | DirectConfig;
 
-export type PayPalEvent = 'error' | 'token';
+export type PayPalEvent = 'error' | 'token' | 'cancel' | 'ready';
 
 export type PayPalStartOptions = {
   options: {