Add Issuing/Treasury components (#142)

* Update connect-js version dependency

* Add Issuing/Treasury components

Author: anojh-stripe

package.json

@@ -49,7 +49,7 @@
     "@babel/preset-react": "7.18.6",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-replace": "^2.3.1",
-    "@stripe/connect-js": "3.3.17",
+    "@stripe/connect-js": "3.3.20",
     "@types/jest": "^24.0.25",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
@@ -85,7 +85,7 @@
     "zx": "^4.2.0"
   },
   "peerDependencies": {
-    "@stripe/connect-js": ">=3.3.16",
+    "@stripe/connect-js": ">=3.3.20",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   }

src/Components.tsx

@@ -1,11 +1,12 @@
+import {FetchEphemeralKeyFunction} from './types';
 import {useCreateComponent} from './useCreateComponent';
 import {useUpdateWithSetter} from './utils/useUpdateWithSetter';
 import {
   LoadError,
   LoaderStart,
   NotificationCount,
   StepChange,
-  PaymentsListDefaultFilters
+  PaymentsListDefaultFilters,
 } from '@stripe/connect-js';
 
 export type CommonComponentProps = {
@@ -17,7 +18,9 @@ export const ConnectPayments = ({
   defaultFilters,
   onLoadError,
   onLoaderStart,
-}: {defaultFilters?: PaymentsListDefaultFilters} & CommonComponentProps): JSX.Element => {
+}: {
+  defaultFilters?: PaymentsListDefaultFilters;
+} & CommonComponentProps): JSX.Element => {
   const {wrapper, component: payments} = useCreateComponent('payments');
 
   useUpdateWithSetter(payments, onLoaderStart, (comp, val) => {
@@ -187,6 +190,134 @@ export const ConnectNotificationBanner = ({
   return wrapper;
 };
 
+export const ConnectIssuingCard = ({
+  defaultCard,
+  cardSwitching,
+  showSpendControls,
+  fetchEphemeralKey,
+  onLoadError,
+  onLoaderStart,
+}: {
+  defaultCard?: string;
+  cardSwitching?: boolean;
+  showSpendControls?: boolean;
+  fetchEphemeralKey?: FetchEphemeralKeyFunction;
+} & CommonComponentProps): JSX.Element => {
+  const {wrapper, component: issuingCard} = useCreateComponent('issuing-card');
+
+  useUpdateWithSetter(issuingCard, defaultCard, (comp, val) =>
+    comp.setDefaultCard(val)
+  );
+  useUpdateWithSetter(issuingCard, cardSwitching, (comp, val) =>
+    comp.setCardSwitching(val)
+  );
+  useUpdateWithSetter(issuingCard, showSpendControls, (comp, val) =>
+    comp.setShowSpendControls(val)
+  );
+  useUpdateWithSetter(issuingCard, fetchEphemeralKey, (comp, val) =>
+    comp.setFetchEphemeralKey(val)
+  );
+  useUpdateWithSetter(issuingCard, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(issuingCard, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+
+  return wrapper;
+};
+
+export const ConnectIssuingCardsList = ({
+  showSpendControls,
+  issuingProgram,
+  fetchEphemeralKey,
+  onLoadError,
+  onLoaderStart,
+}: {
+  showSpendControls?: boolean;
+  issuingProgram?: string;
+  fetchEphemeralKey?: FetchEphemeralKeyFunction;
+} & CommonComponentProps): JSX.Element => {
+  const {wrapper, component: issuingCardsList} =
+    useCreateComponent('issuing-cards-list');
+
+  useUpdateWithSetter(issuingCardsList, showSpendControls, (comp, val) =>
+    comp.setShowSpendControls(val)
+  );
+  useUpdateWithSetter(issuingCardsList, issuingProgram, (comp, val) =>
+    comp.setIssuingProgram(val)
+  );
+  useUpdateWithSetter(issuingCardsList, fetchEphemeralKey, (comp, val) =>
+    comp.setFetchEphemeralKey(val)
+  );
+  useUpdateWithSetter(issuingCardsList, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(issuingCardsList, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+
+  return wrapper;
+};
+
+export const ConnectFinancialAccount = ({
+  financialAccount,
+  onLoadError,
+  onLoaderStart,
+}: {
+  financialAccount: string;
+} & CommonComponentProps): JSX.Element => {
+  const {wrapper, component: financialAccountComponent} =
+    useCreateComponent('financial-account');
+
+  useUpdateWithSetter(
+    financialAccountComponent,
+    financialAccount,
+    (comp, val) => comp.setFinancialAccount(val)
+  );
+  useUpdateWithSetter(financialAccountComponent, onLoaderStart, (comp, val) => {
+    comp.setOnLoaderStart(val);
+  });
+  useUpdateWithSetter(financialAccountComponent, onLoadError, (comp, val) => {
+    comp.setOnLoadError(val);
+  });
+
+  return wrapper;
+};
+
+export const ConnectFinancialAccountTransactions = ({
+  financialAccount,
+  onLoadError,
+  onLoaderStart,
+}: {
+  financialAccount: string;
+} & CommonComponentProps): JSX.Element => {
+  const {wrapper, component: financialAccountTransactionsComponent} =
+    useCreateComponent('financial-account-transactions');
+
+  useUpdateWithSetter(
+    financialAccountTransactionsComponent,
+    financialAccount,
+    (comp, val) => comp.setFinancialAccount(val)
+  );
+  useUpdateWithSetter(
+    financialAccountTransactionsComponent,
+    onLoaderStart,
+    (comp, val) => {
+      comp.setOnLoaderStart(val);
+    }
+  );
+  useUpdateWithSetter(
+    financialAccountTransactionsComponent,
+    onLoadError,
+    (comp, val) => {
+      comp.setOnLoadError(val);
+    }
+  );
+
+  return wrapper;
+};
+
 export const ConnectDocuments = ({
   onLoadError,
   onLoaderStart,

src/types.ts

@@ -0,0 +1,8 @@
+export type FetchEphemeralKeyFunction = (fetchParams: {
+  issuingCard: string;
+  nonce: string;
+}) => Promise<{
+  issuingCard: string;
+  nonce: string;
+  ephemeralKeySecret: string;
+}>;

src/utils/useUpdateWithSetter.ts

@@ -5,8 +5,9 @@ import {
   LoaderStart,
   NotificationCount,
   StepChange,
-  PaymentsListDefaultFilters
+  PaymentsListDefaultFilters,
 } from '@stripe/connect-js';
+import {FetchEphemeralKeyFunction} from '../types';
 
 export const useUpdateWithSetter = <
   T extends HTMLElement,
@@ -16,6 +17,7 @@ export const useUpdateWithSetter = <
     | string[]
     | PaymentsListDefaultFilters
     | (() => void)
+    | FetchEphemeralKeyFunction
     | CollectionOptions
     | ((notificationCount: NotificationCount) => void)
     | ((loaderStart: LoaderStart) => void)

yarn.lock

@@ -1521,10 +1521,10 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
-"@stripe/connect-js@3.3.17":
-  version "3.3.17"
-  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.3.17.tgz#2c1f11ec88ba57677ddb549cbee140af848009f9"
-  integrity sha512-ooowpsc8rsmkVE9i/HcnvyDuPdRNvKAHVoKkWuj4oU9m8EdAGKWFTD/nbnFldlz/nI+2UITx8U0Z+B11sLjNzw==
+"@stripe/connect-js@3.3.20":
+  version "3.3.20"
+  resolved "https://registry.yarnpkg.com/@stripe/connect-js/-/connect-js-3.3.20.tgz#ffa508f62effcadf7e0774ca222dbc9d60704141"
+  integrity sha512-4GingsjdQDJomIMAmTWFJSBifLygc5xWCcYzdcL5nYiePBuHEfYwFKKq7tOO1SIR2jsuHpn6R18xKVijToblWQ==
 
 "@tootallnate/once@2":
   version "2.0.0"