fix: typescript bundling issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-square-web-payments-sdk",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "homepage": "https://weareseeed.github.io/react-square-web-payments-sdk/",
   "bugs": {
     "url": "https://github.com/weareseeed/react-square-web-payments-sdk/issues"
@@ -25,14 +25,28 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs.js",
-      "import": "./dist/index.es.mjs"
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.mjs"
+      }
+    },
+    "./@square/web-sdk": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.es.mjs"
+      }
     }
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.mjs",
-  "types": "dist/index.d.ts",
   "directories": {
     "src": "src"
   },
@@ -45,6 +59,7 @@
   "scripts": {
     "prebuild": "yarn clean",
     "build": "run-p build:*",
+    "prepare": "npm run build",
     "build:scripts": "vite build",
     "build:types": "tsc --emitDeclarationOnly -p ./tsconfig.build.json && tsc-alias",
     "clean": "rimraf dist",
@@ -63,33 +78,33 @@
     "@stitches/react": "^1.2.8"
   },
   "devDependencies": {
-    "@size-limit/preset-big-lib": "^8.0.0",
-    "@size-limit/webpack-why": "^8.0.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/node": "^18.6.3",
-    "@types/react": "^18.0.15",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
-    "@vitejs/plugin-react": "^2.0.0",
-    "c8": "^7.12.0",
-    "eslint": "^8.20.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
-    "jsdom": "^20.0.0",
+    "@size-limit/preset-big-lib": "^8.2.6",
+    "@size-limit/webpack-why": "^8.2.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "^18.19.39",
+    "@types/react": "^18.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^2.2.0",
+    "c8": "^7.14.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
+    "jsdom": "^20.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.8",
     "prettier-plugin-jsdoc": "^0.3.38",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^3.0.2",
     "size-limit": "^8.0.0",
-    "tsc-alias": "^1.7.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-tsconfig-paths": "^3.5.0",
-    "vitest": "^0.20.2"
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5",
+    "vite": "^3.2.10",
+    "vite-tsconfig-paths": "^3.6.0",
+    "vitest": "^0.20.3"
   },
   "peerDependencies": {
     "react": "^16 || ^17 || ^18"

src/components/ach/ach.tsx

@@ -1,13 +1,13 @@
 // Dependencies
-import * as React from 'react';
 import type * as Square from '@square/web-sdk';
+import * as React from 'react';
 
 // Internals
 import { useForm } from '~/contexts/form';
 import { useEventListener } from '~/hooks/use-event-listener';
 import { PayButton, SvgIcon } from './ach.styles';
+import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps } from './ach.types';
 import { transformPlaidEventName } from './ach.utils';
-import type { AchProps, AchWithChildrenProps, AchWithoutChildrenProps, PlaidLinkOnEventMetadata } from './ach.types';
 
 /**
  * Renders a ACH button to use in the Square Web Payment SDK, pre-styled to meet
@@ -31,6 +31,8 @@ export function Ach(props: AchWithChildrenProps): React.ReactElement;
 export function Ach(props: AchWithoutChildrenProps): React.ReactElement;
 export function Ach({
   accountHolderName,
+  intent,
+  total,
   redirectURI,
   transactionId,
   callbacks,
@@ -49,7 +51,7 @@ export function Ach({
    * @param e An event which takes place in the DOM.
    * @returns The data be sended to `cardTokenizeResponseReceived()` function, or an error
    */
-  const handlePayment = async (e: Event) => {
+  const handleClick = async (e: Event) => {
     e.stopPropagation();
 
     if (!ach) {
@@ -58,33 +60,46 @@ export function Ach({
       return;
     }
 
-    setIsSubmitting(true);
-
     try {
-      const result = await ach.tokenize({
+      await ach.tokenize({
         accountHolderName,
+        intent,
+        total,
       });
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-      if (result.status === 'OK') {
+  const handlePayment = async (e: Square.SqEvent<Square.TokenizationEvent>) => {
+    setIsSubmitting(true);
+    try {
+      const { tokenResult: result } = e.detail;
+      if (result && result.status === 'OK') {
         const tokenizedResult = await cardTokenizeResponseReceived(result);
         return tokenizedResult;
       }
 
-      let message = `Tokenization failed with status: ${result.status}`;
+      let message = `Tokenization failed with status: ${result?.status}`;
       if (result?.errors) {
         message += ` and errors: ${JSON.stringify(result?.errors)}`;
 
         throw new Error(message);
       }
-
-      console.warn(message);
     } catch (error) {
       console.error(error);
     } finally {
       setIsSubmitting(false);
     }
   };
 
+  React.useEffect(() => {
+    ach?.addEventListener('ontokenization' as Square.PlaidEventName, handlePayment);
+    return () => {
+      ach?.removeEventListener('ontokenization' as Square.PlaidEventName, handlePayment);
+    };
+  }, [ach]);
+
   React.useEffect(() => {
     const abortController = new AbortController();
     const { signal } = abortController;
@@ -120,14 +135,14 @@ export function Ach({
   if (callbacks) {
     for (const callback of Object.keys(callbacks)) {
       ach?.addEventListener(
-        transformPlaidEventName(callback),
-        (callbacks as Record<string, (event: Square.SqEvent<PlaidLinkOnEventMetadata>) => void>)[callback]
+        transformPlaidEventName(callback) as Square.PlaidEventName,
+        (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
       );
     }
   }
 
   useEventListener({
-    listener: handlePayment,
+    listener: handleClick,
     type: 'click',
     element: buttonRef,
     options: {

src/components/ach/ach.types.ts

@@ -1,7 +1,7 @@
 // Dependencies
-import type * as React from 'react';
 import type * as Square from '@square/web-sdk';
 import type * as Stitches from '@stitches/react';
+import type * as React from 'react';
 
 // Internals
 import { PayButton, SvgIcon } from './ach.styles';
@@ -75,7 +75,7 @@ export type SvgProps = React.ComponentPropsWithRef<'svg'> & {
   css?: Stitches.ComponentProps<typeof SvgIcon>['css'];
 };
 
-export interface AchBase extends Square.AchOptions, Square.AchTokenOptions {
+export interface AchBase extends Square.AchOptions, Square.AchChargeTokenOptions {
   callbacks?: {
     /** The user has completed the Assets and Bank Income Insights flow. */
     bankIncomeInsightsCompleted?(event: Square.SqEvent<PlaidLinkOnEventMetadata>): void;

src/components/cash-app-pay/cash-app-pay.tsx

@@ -1,6 +1,6 @@
 // Dependencies
-import * as React from 'react';
 import type * as Square from '@square/web-sdk';
+import * as React from 'react';
 
 // Internals
 import { useForm } from '~/contexts/form';
@@ -91,7 +91,7 @@ function CashAppPay({
     for (const callback of Object.keys(callbacks)) {
       cashApp?.addEventListener(
         callback.toLowerCase() as 'ontokenization',
-        (callbacks as Record<string, (event: Square.SqEvent<Square.TokenizationEvent>) => void>)[callback]
+        (callbacks as Record<string, (event: Square.SqEvent<Square.CashAppPayEventData>) => void>)[callback]
       );
     }
   }

src/hooks/use-event-listener.ts

@@ -1,8 +1,8 @@
 // Dependencies
 import * as React from 'react';
 
-export const getRefElement = <T>(
-  element?: React.RefObject<Element> | T
+export const getRefElement = <T extends object>(
+  element?: React.RefObject<Element> | T | null
 ): Element | T | undefined | null | React.RefObject<Element> => {
   if (element && 'current' in element) {
     return element.current;

tsconfig.json

@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react",