implement subscription payment for /create-profile

package.json

@@ -58,11 +58,14 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@react-three/drei": "^9.108.4",
+    "@react-three/fiber": "^8.16.8",
     "@snyk/protect": "latest",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.26.3",
     "@tanstack/react-table": "^8.13.2",
     "@tanstack/react-virtual": "^3.5.0",
+    "@types/three": "^0.166.0",
     "@vercel/kv": "^1.0.1",
     "@vercel/postgres": "^0.7.2",
     "@visx/curve": "^3.3.0",
@@ -76,6 +79,8 @@
     "clsx": "^2.1.1",
     "color": "^4.2.3",
     "colorthief": "^2.3.2",
+    "embla-carousel-autoplay": "^8.1.6",
+    "embla-carousel-react": "^8.1.6",
     "events": "^3.3.0",
     "framer-motion": "^7.10.3",
     "fuels": "^0.89.1",
@@ -108,6 +113,7 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.166.1",
     "usehooks-ts": "^3.1.0",
     "uuidv7": "^0.6.3",
     "viem": "^2.17.0",

src/app/(marketing)/create-profile/_components/Benefits.tsx

@@ -0,0 +1,52 @@
+import { Card } from "@/components/ui/Card"
+import { cn } from "@/lib/utils"
+import Image from "next/image"
+import { BENEFITS } from "../constants"
+
+export const Benefits = () => {
+  return (
+    <>
+      <h2 className="text-center font-bold text-muted-foreground text-xl leading-none tracking-tighter">
+        Benefits
+      </h2>
+      <p className="pb-4 text-center text-muted-foreground">
+        All passes provide the same benefits
+      </p>
+      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+        {BENEFITS.map(({ title, description, isAvailable, image }) => (
+          <Card
+            className={cn(
+              "flex items-center gap-4 border-2 border-transparent p-5",
+              {
+                "relative border-border border-dotted bg-transparent shadow-none":
+                  !isAvailable,
+              }
+            )}
+            key={title}
+          >
+            {isAvailable || (
+              <div className="absolute top-2 right-1 w-24 translate-x-1/3 rotate-45 select-none bg-card py-1 text-center font-semibold text-xs">
+                Soon
+              </div>
+            )}
+            <div
+              className={cn(
+                "flex aspect-square min-w-12 items-center justify-center rounded-xl bg-card-secondary",
+                { "bg-muted": !isAvailable }
+              )}
+            >
+              <Image src={image} alt="" width={28} height={28} />
+            </div>
+            <div className="space-y-1">
+              <h3 className="font-semibold">{title}</h3>
+              <p className="text-muted-foreground">{description}</p>
+            </div>
+          </Card>
+        ))}
+      </div>
+      <p className="pt-10 text-center text-muted-foreground">
+        Prices are subject to change in the future
+      </p>
+    </>
+  )
+}

src/app/(marketing)/create-profile/_components/ChoosePass.tsx

@@ -0,0 +1,118 @@
+import { Button } from "@/components/ui/Button"
+import {
+  Carousel,
+  CarouselApi,
+  CarouselContent,
+  CarouselDotButton,
+  CarouselItem,
+  useCarouselDotButton,
+} from "@/components/ui/Carousel"
+import { Separator } from "@/components/ui/Separator"
+import { ToggleGroup, ToggleGroupItem } from "@radix-ui/react-toggle-group"
+import { useEffect, useState } from "react"
+import { SUBSCRIPTIONS } from "../constants"
+import { OnboardingChain } from "../types"
+import { Benefits } from "./Benefits"
+import { GuildPassScene } from "./GuildPassScene"
+
+export const ChoosePass: OnboardingChain = ({ dispatchChainAction }) => {
+  const [api, setApi] = useState<CarouselApi>()
+  const [subscriptionIndex, setSubscriptionIndex] = useState<number>()
+  const { selectedIndex, scrollSnaps, onCarouselDotButtonClick } =
+    useCarouselDotButton(api)
+  useEffect(() => {
+    if (subscriptionIndex === undefined) return
+    dispatchChainAction("next", {
+      chosenSubscription: SUBSCRIPTIONS[subscriptionIndex],
+    })
+  }, [subscriptionIndex])
+
+  return (
+    <div className="max-w-screen-lg">
+      <h1 className="mt-8 mb-4 h-10 text-center font-bold font-display text-2xl leading-none tracking-tight ">
+        Choose your pass
+      </h1>
+      <Carousel
+        className={"cursor-pointer active:cursor-grabbing lg:hidden"}
+        setApi={setApi}
+        opts={{
+          startIndex: 1,
+        }}
+      >
+        <CarouselContent>
+          {SUBSCRIPTIONS.map(({ title, description, pricing }, i) => (
+            <CarouselItem className="select-none" key={title}>
+              <article className="flex h-full flex-col items-center pb-6 text-center">
+                <div className="mb-2 h-48 w-full">
+                  <GuildPassScene />{" "}
+                </div>
+                <div className="px-4">
+                  <h2 className="font-extrabold text-lg">{title}</h2>
+                  <strong className="font-extrabold text-lg text-orange-500">
+                    {pricing}
+                  </strong>
+                  <p className="max-w-xs text-balance pt-2 text-muted-foreground text-sm">
+                    {description}
+                  </p>
+                  <Button
+                    colorScheme="primary"
+                    className="mt-6 w-full"
+                    onClick={() => setSubscriptionIndex(i)}
+                  >
+                    Purchase
+                  </Button>
+                </div>
+              </article>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="mb-4 space-x-3 self-center lg:hidden">
+        {scrollSnaps.map((_, i) => (
+          <CarouselDotButton
+            key={i}
+            onClick={() => onCarouselDotButtonClick(i)}
+            isActive={i === selectedIndex}
+          />
+        ))}
+      </div>
+
+      <ToggleGroup type="single" className="relative hidden items-end lg:flex">
+        {SUBSCRIPTIONS.map(({ title, description, pricing }, i) => (
+          <ToggleGroupItem
+            value={title}
+            onClick={() => setSubscriptionIndex(i)}
+            className={
+              "relative w-full select-none from-accent outline-none hover:bg-gradient-to-t focus-visible:bg-gradient-to-t focus-visible:ring-4 focus-visible:ring-ring"
+            }
+            key={title}
+          >
+            <article className="flex flex-col items-center pb-6 text-center">
+              <div className="mb-2 h-48">
+                <GuildPassScene />
+              </div>
+              <div className="px-8">
+                <h2 className="font-extrabold text-lg">{title}</h2>
+                <strong className="font-extrabold text-lg text-orange-500">
+                  {pricing}
+                </strong>
+                <p className="max-w-xs text-balance pt-2 text-muted-foreground text-sm">
+                  {description}
+                </p>
+              </div>
+              {i < SUBSCRIPTIONS.length - 1 && (
+                <Separator
+                  orientation="vertical"
+                  className="absolute right-0 block bg-[none] bg-gradient-to-t from-border to-60%"
+                />
+              )}
+            </article>
+          </ToggleGroupItem>
+        ))}
+      </ToggleGroup>
+      <div className="space-y-4 border-border border-t bg-background p-8">
+        <Benefits />
+      </div>
+    </div>
+  )
+}

src/app/(marketing)/create-profile/_components/ClaimPass.tsx

@@ -0,0 +1,67 @@
+import { Button } from "@/components/ui/Button"
+import {
+  FormControl,
+  FormDescription,
+  FormErrorMessage,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@/components/ui/Form"
+import { Input } from "@/components/ui/Input"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { FormProvider, useForm } from "react-hook-form"
+import { z } from "zod"
+import { OnboardingChain } from "../types"
+import { GuildPassScene } from "./GuildPassScene"
+
+const formSchema = z.object({
+  inviteHandle: z.string(),
+})
+
+export const ClaimPass: OnboardingChain = ({ dispatchChainAction }) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      inviteHandle: "",
+    },
+  })
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+    dispatchChainAction("next")
+  }
+
+  return (
+    <div className="max-w-md p-8">
+      <div className="mb-12 h-48 w-full">
+        <GuildPassScene />
+      </div>
+      <h1 className="mb-14 text-pretty text-center font-extrabold text-2xl leading-none tracking-tighter">
+        Claim your Guild Pass and begin an epic adventure!
+      </h1>
+
+      <FormProvider {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <FormField
+            control={form.control}
+            name="inviteHandle"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Invite handle</FormLabel>
+                <FormControl>
+                  <Input placeholder="" {...field} />
+                </FormControl>
+                <FormDescription>Guild Pass is invite only</FormDescription>
+                <FormErrorMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" colorScheme="success" className="w-full">
+            Continue
+            <ArrowRight weight="bold" />
+          </Button>
+        </form>
+      </FormProvider>
+    </div>
+  )
+}

src/app/(marketing)/create-profile/_components/GuildPassScene.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { Float } from "@react-three/drei"
+import { Canvas, ThreeElements } from "@react-three/fiber"
+import * as THREE from "three"
+
+function GuildPass(props: ThreeElements["mesh"]) {
+  return (
+    <mesh {...props} scale={4} rotation={new THREE.Euler(0.0, 0.1, 0.0)}>
+      <boxGeometry args={[1.4, 0.6, 0.1]} />
+      <meshStandardMaterial color="orange" wireframe />
+    </mesh>
+  )
+}
+
+export const GuildPassScene = () => {
+  return (
+    <Canvas>
+      <ambientLight intensity={Math.PI / 2} />
+      <spotLight
+        position={[10, 10, 10]}
+        angle={0.15}
+        penumbra={1}
+        decay={0}
+        intensity={Math.PI}
+      />
+      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+      <Float floatIntensity={6} speed={2.4}>
+        <GuildPass position={[0, 0, 0]} />
+      </Float>
+    </Canvas>
+  )
+}

src/app/(marketing)/create-profile/_components/OnboardingDriver.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { Button } from "@/components/ui/Button"
+import { cardClassName } from "@/components/ui/Card"
+import { cn } from "@/lib/utils"
+import { useState } from "react"
+import { SUBSCRIPTIONS } from "../constants"
+import { ChainData, DispatchChainAction, OnboardingChain } from "../types"
+import { ChoosePass } from "./ChoosePass"
+import { ClaimPass } from "./ClaimPass"
+import { PurchasePass } from "./PurchasePass"
+import { StartProfile } from "./StartProfile"
+
+const chains: OnboardingChain[] = [
+  ClaimPass,
+  ChoosePass,
+  PurchasePass,
+  StartProfile,
+] as const
+
+export const OnboardingDriver = () => {
+  const [chainIndex, setChainIndex] = useState(1)
+  // TODO: remove default chosen subscription, as it is only there for debug
+  // purposes
+  const [chainData, setChainData] = useState<Partial<ChainData>>({
+    chosenSubscription: SUBSCRIPTIONS[0],
+  })
+  const OnboardingCard = chains[chainIndex]
+
+  const dispatchChainAction: DispatchChainAction = (action, data) => {
+    setChainData((prev) => ({ ...prev, ...data }))
+    if (action === "next" && chains.length > chainIndex + 1) {
+      setChainIndex((prev) => prev + 1)
+      return
+    }
+    if (action === "previous" && 0 < chainIndex) {
+      setChainIndex((prev) => prev - 1)
+    }
+  }
+
+  return (
+    <>
+      <div className="fixed bottom-4 left-4 z-10 space-x-2">
+        <Button onClick={() => dispatchChainAction("previous")}>previous</Button>
+        <Button onClick={() => dispatchChainAction("next")}>next</Button>
+      </div>
+
+      <div
+        className={cn(
+          cardClassName,
+          "mx-auto max-w-max bg-gradient-to-b from-card to-card-secondary shadow-2xl"
+        )}
+        // layout
+        // style={{
+        //   borderRadius: "16px",
+        // }}
+      >
+        {/* <AnimatePresence mode="popLayout" initial={false}>
+          <motion.div
+            key={chainIndex}
+            initial={{
+              opacity: 0,
+            }}
+            animate={{
+              opacity: 1,
+            }}
+            exit={{
+              opacity: 0,
+            }}
+            transition={{
+              duration: 0.24,
+            }}
+            className="overflow-hidden"
+          > */}
+        <OnboardingCard
+          dispatchChainAction={dispatchChainAction}
+          chainData={chainData}
+        />
+        {/* </motion.div>
+        </AnimatePresence> */}
+      </div>
+    </>
+  )
+}