feat: better schema

src/app/(dashboard)/onboarding/_components/connect-stripe.tsx

@@ -4,6 +4,7 @@ import React from "react"
 import { useRouter } from "next/navigation"
 import { motion } from "framer-motion"
 
+import { Button } from "@/components/ui/button"
 import { ConnectStoreToStripeButton } from "@/components/connect-store-to-stripe-button"
 
 interface ConnectStripeProps {
@@ -48,10 +49,11 @@ export function ConnectStripe({ storeId }: ConnectStripeProps) {
             },
           }}
         >
-          Now connect your store to Stripe
+          Now let's connect your store to Stripe
         </motion.h1>
         {storeId && (
           <motion.div
+            className="flex flex-col-reverse gap-2 pt-2.5 sm:flex-row sm:justify-end"
             variants={{
               hidden: { opacity: 0, x: 100 },
               show: {
@@ -61,7 +63,14 @@ export function ConnectStripe({ storeId }: ConnectStripeProps) {
               },
             }}
           >
-            <ConnectStoreToStripeButton storeId={storeId} />
+            <ConnectStoreToStripeButton storeId={storeId} className="w-full" />
+            <Button
+              variant="outline"
+              onClick={() => router.push(`/store/${storeId}`)}
+              className="w-full"
+            >
+              Skip for now
+            </Button>
           </motion.div>
         )}
       </motion.div>

src/app/(dashboard)/store/[storeId]/_components/create-store-form.tsx

@@ -45,7 +45,11 @@ export function CreateStoreForm({
             <FormItem>
               <FormLabel>Name</FormLabel>
               <FormControl>
-                <Input placeholder="Type store name here." {...field} />
+                <Input
+                  placeholder="Type store name here."
+                  autoFocus
+                  {...field}
+                />
               </FormControl>
               <FormMessage />
             </FormItem>

src/components/connect-store-to-stripe-button.tsx

@@ -4,21 +4,25 @@ import * as React from "react"
 import { toast } from "sonner"
 
 import { createAccountLink } from "@/lib/actions/stripe"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { Button, type ButtonProps } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
 
-interface ConnectToStripeButtonProps {
+interface ConnectToStripeButtonProps extends ButtonProps {
   storeId: string
 }
 
 export function ConnectStoreToStripeButton({
   storeId,
+  className,
+  ...props
 }: ConnectToStripeButtonProps) {
   const [loading, setLoading] = React.useState(false)
 
   return (
     <Button
       aria-label="Connect to Stripe"
+      className={cn(className)}
       onClick={async () => {
         setLoading(true)
 
@@ -38,6 +42,7 @@ export function ConnectStoreToStripeButton({
         }
       }}
       disabled={loading}
+      {...props}
     >
       {loading && (
         <Icons.spinner

src/db/schema/index.ts

@@ -6,8 +6,8 @@ export * from "./notifications"
 export * from "./orders"
 export * from "./payments"
 export * from "./products"
-export * from "./stores"
 export * from "./stocks"
+export * from "./stores"
 export * from "./subcategories"
 export * from "./tags"
-// export * from "./variants"
+export * from "./variants"

src/db/schema/stocks.ts

@@ -13,7 +13,7 @@ export const stocks = pgTable(
       .$defaultFn(() => generateId())
       .primaryKey(),
     productVariantId: varchar("product_variant_id", { length: 30 })
-      .references(() => productVariants.variantId, { onDelete: "cascade" })
+      .references(() => productVariants.id, { onDelete: "cascade" })
       .notNull(),
     quantity: integer("quantity").notNull().default(0),
     ...lifecycleDates,
@@ -28,7 +28,7 @@ export const stocks = pgTable(
 export const stocksRelations = relations(stocks, ({ one }) => ({
   productVariant: one(productVariants, {
     fields: [stocks.productVariantId],
-    references: [productVariants.variantId],
+    references: [productVariants.id],
   }),
   productVariantValues: one(productVariantValues, {
     fields: [stocks.productVariantId],

src/db/schema/variants.ts

@@ -47,6 +47,9 @@ export type NewVariant = typeof variants.$inferInsert
 export const productVariants = pgTable(
   "product_variants",
   {
+    id: varchar("id", { length: 30 })
+      .$defaultFn(() => generateId())
+      .primaryKey(),
     productId: varchar("product_id", { length: 30 })
       .references(() => products.id, { onDelete: "cascade" })
       .notNull(),
@@ -56,10 +59,6 @@ export const productVariants = pgTable(
     ...lifecycleDates,
   },
   (table) => ({
-    pk: primaryKey({
-      name: "product_variants_pk",
-      columns: [table.productId, table.variantId],
-    }),
     productIdIdx: index("product_variants_product_id_idx").on(table.productId),
     variantIdIdx: index("product_variants_variant_id_idx").on(table.variantId),
   })
@@ -87,7 +86,7 @@ export const productVariantValues = pgTable(
   "product_variant_values",
   {
     productVariantId: varchar("product_variant_id", { length: 30 })
-      .references(() => productVariants.productId, { onDelete: "cascade" })
+      .references(() => productVariants.id, { onDelete: "cascade" })
       .notNull(),
     value: text("value").notNull(),
     price: decimal("price", { precision: 10, scale: 2 }).notNull(),

src/lib/actions/seed.ts

@@ -6,7 +6,6 @@ import {
   type Product,
   type Subcategory,
 } from "@/db/schema"
-import { auth } from "@clerk/nextjs/server"
 import { faker } from "@faker-js/faker"
 import { eq } from "drizzle-orm"
 
@@ -70,12 +69,6 @@ export async function seedProducts({
   storeId: string
   count?: number
 }) {
-  const { userId } = auth()
-
-  if (!userId) {
-    throw new Error("User not found")
-  }
-
   const productCount = count ?? 10
 
   const data: Product[] = []