feat: convert to ts

package.json

@@ -28,13 +28,15 @@
     "react-hot-toast": "^2.1.1",
     "react-redux": "^7.2.4",
     "react-responsive-carousel": "^3.2.21",
-    "stripe": "^8.174.0"
+    "stripe": "^8.179.0"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.172",
-    "@types/node": "^16.10.2",
+    "@types/lodash": "^4.14.175",
+    "@types/micro": "^7.3.6",
+    "@types/node": "^16.10.3",
     "@types/react": "^17.0.19",
     "@types/react-currency-formatter": "^1.1.4",
+    "@types/stripe": "^8.0.417",
     "autoprefixer": "^10.3.3",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",

src/pages/api/create-checkout-session.ts

@@ -2,9 +2,13 @@ import { groupBy } from "lodash";
 import path from "path";
 import stripelib from "stripe";
 
-const stripe = stripelib(process.env.STRIPE_SECRET_KEY)
+// @ts-ignore: ENV vars would be present
+const stripe = new stripelib.Stripe(process.env.STRIPE_SECRET_KEY, {
+  apiVersion: '2020-08-27',
+  typescript: true
+})
 
-const handler = async (req, res) => {
+const handler = async (req: { body: { items: any; email: any; name: any; }; }, res: { status: (arg0: number) => { (): any; new(): any; json: { (arg0: { id: any; }): void; new(): any; }; }; }) => {
   const { items, email, name } = req.body;
 
   const groupedItems = Object.values(groupBy(items, "id"));
@@ -23,12 +27,13 @@ const handler = async (req, res) => {
   }));
 
   const groupedImages = Object.values(
-    groupBy(items.map((item) => path.basename(item.image)))
+    groupBy(items.map((item: { image: string; }) => path.basename(item.image)))
   ).map((group) => [group.length, group[0]]);
 
   const session = await stripe.checkout.sessions.create({
     payment_method_types: ["card"],
     shipping_rates: [
+      // @ts-ignore: ENV vars would be present
       process.env.HOST === "http://localhost:3000"
         ? process.env.STRIPE_SHIPPING_RATE
         : "shr_1JLoNhSFCeAarzuF943bcl3G",

src/pages/api/webhook.ts

@@ -1,4 +1,5 @@
 import * as admin from "firebase-admin";
+import { IncomingMessage } from "http";
 import { buffer } from "micro";
 import stripelib from "stripe";
 
@@ -9,10 +10,14 @@ const app = !admin.apps.length
   })
   : admin.app();
 
-const stripe = stripelib(process.env.STRIPE_SECRET_KEY)
+// @ts-ignore: ENV vars would be present
+const stripe = new stripelib.Stripe(process.env.STRIPE_SECRET_KEY, {
+  apiVersion: '2020-08-27',
+  typescript: true
+})
 const endpointSecret = process.env.STRIPE_SIGNING_SECRET;
-const fulfillOrder = async (session) => {
-  const images = JSON.parse(session.metadata.images).map((image) =>
+const fulfillOrder = async (session: any) => {
+  const images = JSON.parse(session.metadata.images).map((image: any) =>
     JSON.stringify(image)
   );
 
@@ -30,7 +35,7 @@ const fulfillOrder = async (session) => {
     });
 };
 
-const handler = async (req, res) => {
+const handler = async (req: IncomingMessage, res: { status: (arg0: number) => { (): any; new(): any; send: { (arg0: string): any; new(): any; }; json: { (arg0: { ok: boolean; }): any; new(): any; }; }; json: (arg0: { ok: boolean; }) => void; }) => {
   if (req.method === "POST") {
     const requestBuffer = await buffer(req);
     const payload = requestBuffer.toString();
@@ -39,8 +44,9 @@ const handler = async (req, res) => {
     let event;
 
     try {
+      // @ts-ignore
       event = stripe.webhooks.constructEvent(payload, sig, endpointSecret);
-    } catch (err) {
+    } catch (err: any) {
       return res.status(400).send(`Webhook error: ${err.message}`);
     }
 

src/pages/books/index.tsx

@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import Header from "../../components/Header";
-import requests from "../../utils/requests.ts";
+import requests from "../../utils/requests";
 
 const Index = ({ books, routertitle }) => {
   const router = useRouter();