fix: typeerrors

package.json

@@ -105,6 +105,7 @@
     "@faker-js/faker": "^8.4.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@tailwindcss/typography": "^0.5.12",
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/eslint": "^8.56.7",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.75",

reset.d.ts

@@ -0,0 +1 @@
+import "@total-typescript/ts-reset"

src/app/(checkout)/checkout/[storeId]/loading.tsx

@@ -5,7 +5,7 @@ import { Icons } from "@/components/icons"
 
 export default function CheckoutLoading() {
   return (
-    <section className="relative flex h-full min-h-[100dvh] flex-col items-start justify-center lg:h-[100dvh] lg:flex-row lg:overflow-hidden">
+    <section className="relative flex h-full min-h-dvh flex-col items-start justify-center lg:h-dvh lg:flex-row lg:overflow-hidden">
       <div className="w-full space-y-12 pt-8 lg:pt-16">
         <div className="fixed top-0 z-40 h-16 w-full bg-[#09090b] py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
           <div className="container flex max-w-xl items-center justify-between space-x-2 lg:ml-auto lg:mr-0 lg:pr-[4.5rem]">

src/app/(checkout)/checkout/[storeId]/page.tsx

@@ -93,7 +93,7 @@ export default async function CheckoutPage({ params }: CheckoutPageProps) {
   }
 
   return (
-    <section className="relative flex h-full min-h-[100dvh] flex-col items-start justify-center lg:h-[100dvh] lg:flex-row lg:overflow-hidden">
+    <section className="relative flex h-full min-h-dvh flex-col items-start justify-center lg:h-dvh lg:flex-row lg:overflow-hidden">
       <div className="w-full space-y-12 pt-8 lg:pt-16">
         <div className="fixed top-0 z-40 h-16 w-full bg-[#09090b] py-4 lg:static lg:top-auto lg:z-0 lg:h-0 lg:py-0">
           <div className="container flex max-w-xl items-center justify-between space-x-2 lg:ml-auto lg:mr-0 lg:pr-[4.5rem]">

src/app/(checkout)/checkout/[storeId]/success/loading.tsx

@@ -10,7 +10,7 @@ import {
 
 export default function OrderSuccessLoading() {
   return (
-    <div className="flex size-full max-h-[100dvh] flex-col gap-10 overflow-hidden pb-8 pt-6 md:py-8">
+    <div className="flex size-full max-h-dvh flex-col gap-10 overflow-hidden pb-8 pt-6 md:py-8">
       <div className="grid gap-10 overflow-auto">
         <PageHeader className="container flex max-w-7xl flex-col">
           <PageHeaderHeading>Thank you for your order</PageHeaderHeading>

src/app/(checkout)/checkout/[storeId]/success/page.tsx

@@ -68,7 +68,7 @@ export default async function OrderSuccessPage({
       : []
 
   return (
-    <div className="flex size-full max-h-[100dvh] flex-col gap-10 overflow-hidden pb-8 pt-6 md:py-8">
+    <div className="flex size-full max-h-dvh flex-col gap-10 overflow-hidden pb-8 pt-6 md:py-8">
       {isVerified ? (
         <div className="grid gap-10 overflow-auto">
           <PageHeader

src/app/(dashboard)/dashboard/stores/[storeId]/customers/[customerId]/page.tsx

@@ -10,7 +10,7 @@ import { and, asc, desc, eq, gte, inArray, lte, sql } from "drizzle-orm"
 import { customerSearchParamsSchema } from "@/lib/validations/params"
 import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
 import { DateRangePicker } from "@/components/date-range-picker"
-import { OrdersTableShell } from "@/components/tables/orders-table"
+import { OrdersTable } from "@/components/tables/orders-table"
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),
@@ -157,7 +157,7 @@ export default async function CustomerPage({
         <DateRangePicker align="end" />
       </div>
       <React.Suspense fallback={<DataTableSkeleton columnCount={6} />}>
-        <OrdersTableShell
+        <OrdersTable
           promise={ordersPromise}
           storeId={storeId}
           isSearchable={false}

src/app/(dashboard)/dashboard/stores/[storeId]/orders/page.tsx

@@ -11,7 +11,7 @@ import { and, asc, desc, eq, gte, inArray, like, lte, sql } from "drizzle-orm"
 import { ordersSearchParamsSchema } from "@/lib/validations/params"
 import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"
 import { DateRangePicker } from "@/components/date-range-picker"
-import { OrdersTableShell } from "@/components/tables/orders-table"
+import { OrdersTable } from "@/components/tables/orders-table"
 
 export const metadata: Metadata = {
   metadataBase: new URL(env.NEXT_PUBLIC_APP_URL),
@@ -157,7 +157,7 @@ export default async function OrdersPage({
         <DateRangePicker align="end" />
       </div>
       <React.Suspense fallback={<DataTableSkeleton columnCount={6} />}>
-        <OrdersTableShell promise={ordersPromise} storeId={storeId} />
+        <OrdersTable promise={ordersPromise} storeId={storeId} />
       </React.Suspense>
     </div>
   )

src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/_components/update-product-form.tsx

@@ -16,7 +16,7 @@ import {
 import { getErrorMessage } from "@/lib/handle-error"
 import {
   updateProductSchema,
-  type UpdateProductInput,
+  type UpdateProductSchema,
 } from "@/lib/validations/product"
 import { useUploadFile } from "@/hooks/use-upload-file"
 import { Button } from "@/components/ui/button"
@@ -75,7 +75,7 @@ export function UpdateProductForm({
     }
   )
 
-  const form = useForm<UpdateProductInput>({
+  const form = useForm<UpdateProductSchema>({
     resolver: zodResolver(updateProductSchema),
     defaultValues: {
       name: product.name,
@@ -87,7 +87,7 @@ export function UpdateProductForm({
     },
   })
 
-  function onSubmit(input: UpdateProductInput) {
+  function onSubmit(input: UpdateProductSchema) {
     setIsUpdating(true)
 
     toast.promise(

src/app/(dashboard)/dashboard/stores/[storeId]/products/[productId]/page.tsx

@@ -5,6 +5,7 @@ import { products } from "@/db/schema"
 import { env } from "@/env.js"
 import { and, eq } from "drizzle-orm"
 
+import { getCategories, getSubcategories } from "@/lib/actions/product"
 import {
   Card,
   CardContent,
@@ -42,6 +43,10 @@ export default async function UpdateProductPage({
     notFound()
   }
 
+  const promises = Promise.all([getCategories(), getSubcategories()]).then(
+    ([categories, subcategories]) => ({ categories, subcategories })
+  )
+
   return (
     <Card>
       <CardHeader className="space-y-1">
@@ -53,7 +58,7 @@ export default async function UpdateProductPage({
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <UpdateProductForm product={product} />
+        <UpdateProductForm promises={promises} product={product} />
       </CardContent>
     </Card>
   )

src/app/(dashboard)/dashboard/stores/[storeId]/products/new/_components/add-product-form.tsx

@@ -14,7 +14,7 @@ import {
 import { getErrorMessage } from "@/lib/handle-error"
 import {
   addProductSchema,
-  type AddProductInput,
+  type AddProductSchema,
 } from "@/lib/validations/product"
 import { useUploadFile } from "@/hooks/use-upload-file"
 import { Button } from "@/components/ui/button"
@@ -63,7 +63,7 @@ export function AddProductForm({ storeId, promises }: AddProductFormProps) {
   const { uploadFiles, progresses, uploadedFiles, isUploading } =
     useUploadFile("productImage")
 
-  const form = useForm<AddProductInput>({
+  const form = useForm<AddProductSchema>({
     resolver: zodResolver(addProductSchema),
     defaultValues: {
       name: "",
@@ -76,7 +76,7 @@ export function AddProductForm({ storeId, promises }: AddProductFormProps) {
     },
   })
 
-  function onSubmit(input: AddProductInput) {
+  function onSubmit(input: AddProductSchema) {
     setLoading(true)
 
     toast.promise(

src/app/(lobby)/_components/lobby-skeleton.tsx

@@ -18,7 +18,7 @@ export function LobbySkeleton() {
         <h1 className="text-balance font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
           An e-commerce skateshop built with everything new in Next.js
         </h1>
-        <p className="max-w-[42rem] text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+        <p className="max-w-2xl text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8">
           Buy and sell skateboarding gears from independent brands and stores
           around the world with ease
         </p>

src/app/(lobby)/_components/lobby.tsx

@@ -71,7 +71,7 @@ export async function Lobby({
           An e-commerce skateshop built with everything new in Next.js
         </h1>
         <p
-          className="max-w-[42rem] animate-fade-up text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8"
+          className="max-w-2xl animate-fade-up text-balance leading-normal text-muted-foreground sm:text-xl sm:leading-8"
           style={{ animationDelay: "0.30s", animationFillMode: "both" }}
         >
           Buy and sell skateboarding gears from independent brands and stores

src/app/api/email/newsletter/route.ts

@@ -51,7 +51,8 @@ export async function POST(req: Request) {
           token: input.token,
           newsletter: true,
         })
-        .onDuplicateKeyUpdate({
+        .onConflictDoUpdate({
+          target: [notifications.email],
           set: {
             newsletter: true,
           },

src/app/api/webhooks/stripe/route.ts

@@ -3,14 +3,16 @@ import { headers } from "next/headers"
 import { db } from "@/db"
 import { addresses, carts, orders, payments, products } from "@/db/schema"
 import { env } from "@/env.js"
-import type { CheckoutItem } from "@/types"
 import { clerkClient } from "@clerk/nextjs"
 import { eq } from "drizzle-orm"
 import type Stripe from "stripe"
 import { z } from "zod"
 
 import { stripe } from "@/lib/stripe"
-import { checkoutItemSchema } from "@/lib/validations/cart"
+import {
+  checkoutItemSchema,
+  type CheckoutItemSchema,
+} from "@/lib/validations/cart"
 
 export async function POST(req: Request) {
   const body = await req.text()
@@ -110,7 +112,7 @@ export async function POST(req: Request) {
       const paymentIntentId = paymentIntentSucceeded?.id
       const orderAmount = paymentIntentSucceeded?.amount
       const checkoutItems = paymentIntentSucceeded?.metadata
-        ?.items as unknown as CheckoutItem[]
+        ?.items as unknown as CheckoutItemSchema[]
 
       // If there are items in metadata, then create order
       if (checkoutItems) {

src/components/board-builder.tsx

@@ -3,13 +3,14 @@
 import * as React from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { type Product } from "@/db/schema"
-import type { CartItem } from "@/types"
 import { ChevronDownIcon } from "@radix-ui/react-icons"
 import { toast } from "sonner"
 
-import { sortOptions } from "@/config/product"
+import { queryConfig } from "@/config/query"
 import { addToCart, deleteCartItem } from "@/lib/actions/cart"
-import { catchError, cn } from "@/lib/utils"
+import { showErrorToast } from "@/lib/handle-error"
+import { cn } from "@/lib/utils"
+import { type CartItemSchema } from "@/lib/validations/cart"
 import { useDebounce } from "@/hooks/use-debounce"
 import { Button } from "@/components/ui/button"
 import { Card, CardDescription } from "@/components/ui/card"
@@ -41,7 +42,7 @@ interface BoardBuilderProps {
   products: Product[]
   pageCount: number
   subcategory: string | null
-  cartItems: CartItem[]
+  cartItems: CartItemSchema[]
 }
 
 export function BoardBuilder({
@@ -110,7 +111,7 @@ export function BoardBuilder({
         // Only allow one product per subcategory in cart
         if (!hasProductInCart) {
           const productWithSameSubcategory = cartItems.find(
-            (item) => item.subcategory === product.subcategory
+            (item) => item.subcategoryId === product.subcategoryId
           )
 
           if (productWithSameSubcategory) {
@@ -122,7 +123,6 @@ export function BoardBuilder({
           await addToCart({
             productId: product.id,
             quantity: 1,
-            subcategory: product.subcategory ?? subcategory,
           })
 
           toast.success("Added to cart.")
@@ -134,10 +134,10 @@ export function BoardBuilder({
         })
         toast.success("Removed from cart.")
       } catch (err) {
-        catchError(err)
+        showErrorToast(err)
       }
     },
-    [subcategory, cartItems]
+    [cartItems]
   )
 
   return (
@@ -263,7 +263,7 @@ export function BoardBuilder({
           <DropdownMenuContent align="start" className="w-48">
             <DropdownMenuLabel>Sort by</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            {sortOptions.map((option) => (
+            {queryConfig.store.sortOptions.map((option) => (
               <DropdownMenuItem
                 key={option.label}
                 className={cn(option.value === sort && "font-bold")}
@@ -295,7 +295,7 @@ export function BoardBuilder({
         </div>
       ) : null}
       <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        {products.map((product) => (
+        {/* {products.map((product) => (
           <ProductCard
             key={product.id}
             variant="switchable"
@@ -305,7 +305,7 @@ export function BoardBuilder({
               .includes(product.id)}
             onSwitch={() => addProductToCart(product)}
           />
-        ))}
+        ))} */}
       </div>
       {products.length ? (
         <PaginationButton

src/components/cards/store-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link"
-import { type CuratedStore } from "@/types"
 
+import { type getFeaturedStores } from "@/lib/actions/store"
 import { getRandomPatternStyle } from "@/lib/generate-pattern"
 import { cn } from "@/lib/utils"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/card"
 
 interface StoreCardProps {
-  store: CuratedStore
+  store: Awaited<ReturnType<typeof getFeaturedStores>>[number]
   href: string
 }
 

src/components/checkout/cart-line-items.tsx

@@ -1,15 +1,15 @@
 import Image from "next/image"
-import type { CartLineItem } from "@/types"
 import { Slot } from "@radix-ui/react-slot"
 
 import { cn, formatPrice } from "@/lib/utils"
+import { type CartLineItemSchema } from "@/lib/validations/cart"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 import { UpdateCart } from "@/components/checkout/update-cart"
 import { Icons } from "@/components/icons"
 
 interface CartLineItemsProps extends React.HTMLAttributes<HTMLDivElement> {
-  items: CartLineItem[]
+  items: CartLineItemSchema[]
   isScrollable?: boolean
   isEditable?: boolean
   variant?: "default" | "minimal"