appfunnel 0.7.0 → 0.8.0

package/templates/default/src/components/ConsentDrawer.tsx

@@ -0,0 +1,70 @@
+import { Drawer, type DrawerHandle, motion } from '@appfunnel-dev/sdk/elements'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+
+export interface ConsentDrawerHandle {
+  open: () => void
+  close: () => void
+}
+
+interface ConsentDrawerProps {
+  onAccept: () => void
+  onDecline: () => void
+}
+
+export const ConsentDrawer = forwardRef<ConsentDrawerHandle, ConsentDrawerProps>(
+  function ConsentDrawer({ onAccept, onDecline }, ref) {
+    const drawerRef = useRef<DrawerHandle>(null)
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: () => drawerRef.current?.open(),
+        close: () => drawerRef.current?.close(),
+      }),
+      []
+    )
+
+    return (
+      <Drawer
+        ref={drawerRef}
+        height="95dvh"
+        borderRadius={24}
+        closeOnOverlayClick={false}
+        showHandle={false}
+      >
+        <div className="p-6 h-full flex flex-col justify-between max-w-[672px] mx-auto w-full">
+          <div>
+            <h2 className="text-[28px] font-semibold mt-4">
+              May we send product updates to your email?
+            </h2>
+            <p className="text-lg font-semibold mt-4">
+              Tips, promotions, and special offers
+            </p>
+            <p className="text-[15px] text-[#727272] mt-2">
+              You can change your mind at any time by clicking the unsubscribe
+              link in the footer of any email you receive from us.
+            </p>
+          </div>
+          <div className="flex flex-col gap-2 mt-auto pt-4">
+            <motion.button
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.15 }}
+              onClick={onAccept}
+              className="w-full py-4 bg-blue-600 text-white font-bold rounded-2xl text-xl"
+            >
+              Yes, keep me updated
+            </motion.button>
+            <motion.button
+              whileTap={{ scale: 0.95 }}
+              transition={{ duration: 0.15 }}
+              onClick={onDecline}
+              className="w-full py-3 text-lg font-bold text-black/50"
+            >
+              No thanks
+            </motion.button>
+          </div>
+        </div>
+      </Drawer>
+    )
+  }
+)

package/templates/default/src/components/Header.tsx

@@ -0,0 +1,37 @@
+import { useNavigation } from '@appfunnel-dev/sdk'
+
+export function Header({ showBack = true }: { showBack?: boolean }) {
+  const { progress, goBack } = useNavigation()
+
+  return (
+    <div className="flex flex-col gap-2 px-4 pt-4 pb-2">
+      <div className="flex items-center justify-between">
+        <div className="w-10 flex items-center">
+          {showBack && (
+            <button onClick={goBack} className="p-2 -ml-2">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#171717"
+                strokeWidth="2"
+              >
+                <path d="M15 18l-6-6 6-6" />
+              </svg>
+            </button>
+          )}
+        </div>
+        <span className="text-xs font-semibold text-blue-600 whitespace-nowrap">
+          {progress.current} / {progress.total}
+        </span>
+      </div>
+      <div className="h-1 bg-gray-100 rounded-full overflow-hidden">
+        <div
+          className="h-full bg-blue-600 rounded-full transition-all duration-300"
+          style={{ width: `${progress.percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}

package/templates/default/src/components/paywall/PaymentCheckoutDialog.tsx

@@ -0,0 +1,76 @@
+import {
+	StripePaymentForm,
+	type StripePaymentHandle,
+	usePayment,
+} from '@appfunnel-dev/sdk'
+import { Dialog, type DialogHandle, Loading, motion } from '@appfunnel-dev/sdk/elements'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+
+export interface PaymentCheckoutDialogHandle {
+	open: () => void
+	close: () => void
+}
+
+interface PaymentCheckoutDialogProps {
+	onSuccess: () => void
+}
+
+export const PaymentCheckoutDialog = forwardRef<
+	PaymentCheckoutDialogHandle,
+	PaymentCheckoutDialogProps
+>(function PaymentCheckoutDialog({ onSuccess }, ref) {
+	const dialogRef = useRef<DialogHandle>(null)
+	const paymentRef = useRef<StripePaymentHandle>(null)
+	const { loading, error } = usePayment()
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			open: () => dialogRef.current?.open(),
+			close: () => dialogRef.current?.close(),
+		}),
+		[]
+	)
+
+	return (
+		<Dialog
+			ref={dialogRef}
+			title="Complete payment"
+			maxWidth={400}
+			borderRadius={16}
+		>
+			<div className="flex flex-col gap-4 mt-4">
+				{error && <p className="text-sm text-red-500">{error}</p>}
+
+				<StripePaymentForm
+					ref={paymentRef}
+					onSuccess={() => {
+						dialogRef.current?.close()
+						onSuccess()
+					}}
+					appearance={{
+						theme: 'flat',
+						variables: {
+							colorPrimary: '#2563EB',
+							borderRadius: '12px',
+						},
+					}}
+				/>
+
+				<motion.button
+					whileTap={!loading ? { scale: 0.95 } : {}}
+					transition={{ duration: 0.15 }}
+					onClick={() => paymentRef.current?.submit()}
+					disabled={loading}
+					className={`w-full py-4 rounded-2xl text-base font-bold ${
+						loading
+							? 'bg-gray-400 text-white cursor-not-allowed'
+							: 'bg-blue-600 text-white cursor-pointer'
+					}`}
+				>
+					{loading ? <Loading size="xs" color="#fff" /> : 'Pay now'}
+				</motion.button>
+			</div>
+		</Dialog>
+	)
+})

package/templates/default/src/pages/birthday.tsx

@@ -0,0 +1,66 @@
+import { definePage, useDateOfBirth, useNavigation } from '@appfunnel-dev/sdk'
+import { motion } from '@appfunnel-dev/sdk/elements'
+import { Header } from '../components/Header'
+import { useState } from 'react'
+
+export const page = definePage({
+  name: 'Birthday',
+  routes: [{ to: 'email' }],
+})
+
+export default function Birthday() {
+  const [dob, setDob] = useDateOfBirth()
+  const [display, setDisplay] = useState('')
+  const { goToNextPage } = useNavigation()
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value.replace(/[^\d]/g, '')
+    if (val.length > 8) val = val.slice(0, 8)
+
+    let formatted = ''
+    if (val.length > 0) formatted = val.slice(0, 2)
+    if (val.length > 2) formatted += ' / ' + val.slice(2, 4)
+    if (val.length > 4) formatted += ' / ' + val.slice(4, 8)
+
+    setDisplay(formatted)
+
+    if (val.length === 8) {
+      setDob(val)
+    }
+  }
+
+  const enabled = !!dob?.trim()
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col max-w-[672px] mx-auto w-full">
+      <Header />
+      <div className="flex-1 flex flex-col justify-between px-4 pt-6 pb-6">
+        <div>
+          <h1 className="text-[30px] leading-tight font-bold text-[#171717] mb-6">
+            What's your date of birth?
+          </h1>
+          <input
+            type="text"
+            value={display}
+            onChange={handleChange}
+            placeholder="MM / DD / YYYY"
+            className="w-full px-4 py-4 rounded-2xl border border-gray-200 text-base text-[#171717] placeholder-gray-400 outline-none focus:border-blue-600 transition-colors"
+          />
+        </div>
+        <motion.button
+          whileTap={enabled ? { scale: 0.95 } : {}}
+          transition={{ duration: 0.15 }}
+          onClick={goToNextPage}
+          disabled={!enabled}
+          className={`w-full py-4 rounded-2xl text-base font-bold transition-colors ${
+            enabled
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-100 text-gray-400'
+          }`}
+        >
+          Continue
+        </motion.button>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/download.tsx

@@ -0,0 +1,67 @@
+import { definePage } from '@appfunnel-dev/sdk'
+
+export const page = definePage({
+  name: 'Download',
+  type: 'finish',
+})
+
+export default function Download() {
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center justify-center p-6">
+      <div className="w-full max-w-[672px] flex flex-col items-center gap-8">
+        {/* Success icon */}
+        <div className="w-20 h-20 rounded-full bg-blue-600 flex items-center justify-center">
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </div>
+
+        {/* Title */}
+        <div className="text-center">
+          <h1 className="text-[28px] font-bold text-[#171717]">
+            You're all set!
+          </h1>
+          <p className="text-base text-[#727272] mt-2">
+            Download the app to get started with your personalized plan.
+          </p>
+        </div>
+
+        {/* Store buttons */}
+        <div className="flex flex-col gap-3 w-full">
+          <a
+            href="#"
+            className="w-full flex items-center justify-center gap-3 py-4 rounded-2xl bg-[#171717] text-white font-bold text-base"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
+              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+            </svg>
+            Download on the App Store
+          </a>
+          <a
+            href="#"
+            className="w-full flex items-center justify-center gap-3 py-4 rounded-2xl border-2 border-[#171717] text-[#171717] font-bold text-base"
+          >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="#171717">
+              <path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z" />
+            </svg>
+            Get it on Google Play
+          </a>
+        </div>
+
+        {/* Footer */}
+        <p className="text-sm text-[#9CA3AF] text-center">
+          Check your email for your account details and download links.
+        </p>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/email.tsx

@@ -0,0 +1,95 @@
+import {
+  definePage,
+  useUser,
+  useNavigation,
+} from '@appfunnel-dev/sdk'
+import { motion } from '@appfunnel-dev/sdk/elements'
+import { Header } from '../components/Header'
+import {
+  ConsentDrawer,
+  type ConsentDrawerHandle,
+} from '../components/ConsentDrawer'
+import { useRef } from 'react'
+
+export const page = definePage({
+  name: 'Email',
+  routes: [{ to: 'paywall' }],
+})
+
+export default function Email() {
+  const { email, setEmail, identify, setMarketingConsent } = useUser()
+  const { goToNextPage } = useNavigation()
+  const consentRef = useRef<ConsentDrawerHandle>(null)
+
+  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email || '')
+
+  const handleSubmit = () => {
+    if (!isValid) return
+    identify(email!)
+    consentRef.current?.open()
+  }
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col max-w-[672px] mx-auto w-full">
+      <Header />
+      <div className="flex-1 flex flex-col justify-between px-4 pt-6 pb-6">
+        <div>
+          <h1 className="text-[30px] leading-tight font-bold text-[#171717] mb-6">
+            What's your email?
+          </h1>
+          <input
+            type="email"
+            value={email || ''}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="name@example.com"
+            className="w-full px-4 py-4 rounded-2xl border border-gray-200 text-base text-[#171717] placeholder-gray-400 outline-none focus:border-blue-600 transition-colors"
+          />
+
+          <div className="flex items-start gap-3 bg-gray-100 rounded-xl px-4 py-3 mt-4">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#171717"
+              strokeWidth="2"
+              className="mt-0.5 shrink-0"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+            </svg>
+            <span className="text-sm text-[#171717]">
+              We respect your privacy and take it seriously. No spam, ever.
+            </span>
+          </div>
+        </div>
+
+        <motion.button
+          whileTap={isValid ? { scale: 0.95 } : {}}
+          transition={{ duration: 0.15 }}
+          onClick={handleSubmit}
+          disabled={!isValid}
+          className={`w-full py-4 rounded-2xl text-base font-bold transition-colors ${
+            isValid
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-100 text-gray-400'
+          }`}
+        >
+          Continue
+        </motion.button>
+      </div>
+
+      <ConsentDrawer
+        ref={consentRef}
+        onAccept={() => {
+          setMarketingConsent(true)
+          goToNextPage()
+        }}
+        onDecline={() => {
+          setMarketingConsent(false)
+          goToNextPage()
+        }}
+      />
+    </div>
+  )
+}

package/templates/default/src/pages/intro.tsx

@@ -0,0 +1,109 @@
+import { definePage, useNavigation } from '@appfunnel-dev/sdk'
+import { motion } from '@appfunnel-dev/sdk/elements'
+
+export const page = definePage({
+  name: 'Intro',
+  type: 'default',
+  routes: [{ to: 'single-select' }],
+})
+
+export default function Intro() {
+  const { goToNextPage } = useNavigation()
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center justify-center p-6">
+      <div className="w-full max-w-[672px] flex flex-col items-center gap-8">
+        {/* Icon */}
+        <div className="w-20 h-20 rounded-2xl bg-blue-600 flex items-center justify-center">
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+          </svg>
+        </div>
+
+        {/* Text */}
+        <div className="flex flex-col items-center gap-3 text-center">
+          <h1 className="text-3xl font-bold text-[#171717]">
+            Get your personalized plan
+          </h1>
+          <p className="text-lg text-[#727272] leading-relaxed">
+            Answer a few quick questions so we can create a plan tailored just
+            for you.
+          </p>
+        </div>
+
+        {/* Features */}
+        <div className="flex flex-col gap-4 w-full">
+          {[
+            { icon: 'clock', text: 'Takes less than 2 minutes' },
+            { icon: 'target', text: 'Personalized to your goals' },
+            { icon: 'shield', text: 'Your data stays private' },
+          ].map((item) => (
+            <div key={item.icon} className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
+                {item.icon === 'clock' && (
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#2563EB"
+                    strokeWidth="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                )}
+                {item.icon === 'target' && (
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#2563EB"
+                    strokeWidth="2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <circle cx="12" cy="12" r="6" />
+                    <circle cx="12" cy="12" r="2" />
+                  </svg>
+                )}
+                {item.icon === 'shield' && (
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#2563EB"
+                    strokeWidth="2"
+                  >
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                  </svg>
+                )}
+              </div>
+              <span className="text-base text-[#171717]">{item.text}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* CTA */}
+        <motion.button
+          whileTap={{ scale: 0.95 }}
+          transition={{ duration: 0.15 }}
+          onClick={goToNextPage}
+          className="w-full py-4 rounded-2xl bg-blue-600 text-white text-lg font-bold"
+        >
+          Get Started
+        </motion.button>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/multi-select.tsx

@@ -0,0 +1,79 @@
+import { definePage, useResponse, useNavigation } from '@appfunnel-dev/sdk'
+import { MultiSelect, motion } from '@appfunnel-dev/sdk/elements'
+import { Header } from '../components/Header'
+
+export const page = definePage({
+  name: 'Interests',
+  routes: [{ to: 'name' }],
+})
+
+export default function Interests() {
+  const [interests] = useResponse<string[]>('interests')
+  const { goToNextPage } = useNavigation()
+
+  const hasSelection = interests && interests.length > 0
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col max-w-[672px] mx-auto w-full">
+      <Header />
+      <div className="flex-1 flex flex-col px-4 pt-8 pb-6">
+        <h1 className="text-[30px] leading-tight font-bold text-[#171717] mb-2">
+          What are you most interested in?
+        </h1>
+        <p className="text-lg text-[#727272] mb-6">Select all that apply</p>
+
+        <MultiSelect
+          responseKey="interests"
+          className="flex flex-col gap-3"
+          min={1}
+          options={[
+            { label: 'Fitness & Health', value: 'fitness' },
+            { label: 'Nutrition & Diet', value: 'nutrition' },
+            { label: 'Mindfulness', value: 'mindfulness' },
+            { label: 'Productivity', value: 'productivity' },
+            { label: 'Finance', value: 'finance' },
+            { label: 'Learning', value: 'learning' },
+          ]}
+          renderItem={({ item, active }) => (
+            <div
+              className={`w-full px-4 py-4 rounded-2xl text-left transition-all border-2 ${
+                active
+                  ? 'border-blue-600 bg-blue-50'
+                  : 'border-transparent bg-[#F5F5F5]'
+              }`}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className={`w-5 h-5 rounded-lg border-2 flex items-center justify-center shrink-0 ${
+                    active ? 'border-blue-600 bg-blue-600' : 'border-gray-300'
+                  }`}
+                >
+                  {active && (
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </div>
+                <span className="text-base font-semibold text-[#171717]">{item.label}</span>
+              </div>
+            </div>
+          )}
+        />
+
+        <motion.button
+          whileTap={hasSelection ? { scale: 0.95 } : {}}
+          transition={{ duration: 0.15 }}
+          onClick={goToNextPage}
+          disabled={!hasSelection}
+          className={`w-full py-4 rounded-2xl text-base font-bold transition-colors mt-6 ${
+            hasSelection
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-100 text-gray-400'
+          }`}
+        >
+          Continue
+        </motion.button>
+      </div>
+    </div>
+  )
+}

package/templates/default/src/pages/name.tsx

@@ -0,0 +1,48 @@
+import { definePage, useUser, useNavigation } from '@appfunnel-dev/sdk'
+import { motion } from '@appfunnel-dev/sdk/elements'
+import { Header } from '../components/Header'
+
+export const page = definePage({
+  name: 'Name',
+  routes: [{ to: 'birthday' }],
+})
+
+export default function Name() {
+  const { name, setName } = useUser()
+  const { goToNextPage } = useNavigation()
+
+  const enabled = !!name?.trim()
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col max-w-[672px] mx-auto w-full">
+      <Header />
+      <div className="flex-1 flex flex-col justify-between px-4 pt-6 pb-6">
+        <div>
+          <h1 className="text-[30px] leading-tight font-bold text-[#171717] mb-6">
+            What's your name?
+          </h1>
+          <input
+            type="text"
+            value={name || ''}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Your name"
+            className="w-full px-4 py-4 rounded-2xl border border-gray-200 text-base text-[#171717] placeholder-gray-400 outline-none focus:border-blue-600 transition-colors"
+          />
+        </div>
+        <motion.button
+          whileTap={enabled ? { scale: 0.95 } : {}}
+          transition={{ duration: 0.15 }}
+          onClick={goToNextPage}
+          disabled={!enabled}
+          className={`w-full py-4 rounded-2xl text-base font-bold transition-colors ${
+            enabled
+              ? 'bg-blue-600 text-white'
+              : 'bg-gray-100 text-gray-400'
+          }`}
+        >
+          Continue
+        </motion.button>
+      </div>
+    </div>
+  )
+}