Feature/update and convert to ts

.npmrc

@@ -0,0 +1,3 @@
+# Use force for installations to handle TypeScript 5 + react-scripts peer dependency conflicts
+# Preferred over legacy-peer-deps to avoid ajv version conflicts
+force=true

.nvmrc

@@ -0,0 +1 @@
+20

package.json

@@ -3,20 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@paypal/react-paypal-js": "^7.6.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "web-vitals": "^1.0.1"
+    "@paypal/react-paypal-js": "^8.9.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.5.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "tsc --noEmit --watch"
   },
   "eslintConfig": {
     "extends": [
@@ -35,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "^5.6.3"
   }
 }

src/App.css

@@ -14,14 +14,13 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: black;
 }
 
 .App-link {

src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders buy an atom text', () => {
+  render(<App />);
+  const textElement = screen.getByText(/buy an atom/i);
+  expect(textElement).toBeInTheDocument();
+});

src/App.js → src/App.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
 import { PayPalScriptProvider } from '@paypal/react-paypal-js';
 import logo from './logo.svg';
 import './App.css';
 import Checkout from './Checkout';
 
-function App() {
+const App: React.FC = () => {
   const CLIENT_ID = 'test';
 
   return (

src/Checkout.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { PayPalButtons } from '@paypal/react-paypal-js';
+
+interface PayPalOrder {
+  payer: {
+    name: {
+      given_name: string;
+      surname?: string;
+    };
+    email_address?: string;
+    payer_id?: string;
+  };
+  purchase_units?: Array<any>;
+  status?: string;
+}
+
+interface OnApproveData {
+  orderID: string;
+  payerID?: string;
+  paymentID?: string;
+  billingToken?: string;
+  facilitatorAccessToken?: string;
+}
+
+interface OnApproveActions {
+  order: {
+    capture: () => Promise<PayPalOrder>;
+    get: () => Promise<PayPalOrder>;
+  };
+  redirect: (url: string) => void;
+}
+
+const Checkout: React.FC = () => {
+  return (
+    <div style={{ width: '75%', maxWidth: '500px' }}>
+      <PayPalButtons
+        onApprove={(data: OnApproveData, actions: OnApproveActions) => {
+          return actions.order.capture().then((details: PayPalOrder) => {
+            const name = details.payer.name.given_name;
+            alert(`Transaction completed by ${name}`);
+          });
+        }}
+      />
+    </div>
+  );
+}
+
+export default Checkout;

src/index.js → src/index.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/react-app-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react-scripts" />
+
+declare module '*.svg' {
+  import * as React from 'react';
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

src/reportWebVitals.js → src/reportWebVitals.ts

@@ -1,4 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

src/types/paypal.d.ts

@@ -0,0 +1,49 @@
+declare module '@paypal/react-paypal-js' {
+  import { FC, ReactNode } from 'react';
+
+  export interface PayPalScriptOptions {
+    'client-id': string;
+    currency?: string;
+    intent?: string;
+    locale?: string;
+    'disable-funding'?: string;
+    'data-client-token'?: string;
+    components?: string;
+    [key: string]: any;
+  }
+
+  export interface PayPalScriptProviderProps {
+    options: PayPalScriptOptions;
+    children: ReactNode;
+    deferLoading?: boolean;
+  }
+
+  export const PayPalScriptProvider: FC<PayPalScriptProviderProps>;
+
+  export interface PayPalButtonsProps {
+    createOrder?: (data: any, actions: any) => Promise<string>;
+    onApprove?: (data: any, actions: any) => Promise<void> | void;
+    onCancel?: (data: any) => void;
+    onError?: (err: any) => void;
+    style?: {
+      layout?: 'vertical' | 'horizontal';
+      color?: 'gold' | 'blue' | 'silver' | 'white' | 'black';
+      shape?: 'rect' | 'pill';
+      height?: number;
+      label?: 'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment';
+      tagline?: boolean;
+    };
+    disabled?: boolean;
+    forceReRender?: any[];
+  }
+
+  export const PayPalButtons: FC<PayPalButtonsProps>;
+
+  export const usePayPalScriptReducer: () => [any, any];
+  export const SCRIPT_LOADING_STATE: {
+    INITIAL: string;
+    PENDING: string;
+    REJECTED: string;
+    RESOLVED: string;
+  };
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}