appfunnel 0.7.0 → 0.8.0

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

@@ -0,0 +1,191 @@
+import {
+	definePage,
+	useProducts,
+	useNavigation,
+	usePayment,
+} from '@appfunnel-dev/sdk'
+import { motion } from '@appfunnel-dev/sdk/elements'
+import {
+	PaymentCheckoutDialog,
+	type PaymentCheckoutDialogHandle,
+} from '../components/paywall/PaymentCheckoutDialog'
+import { useRef } from 'react'
+
+export const page = definePage({
+	name: 'Paywall',
+	type: 'paywall',
+	routes: [{ to: 'upsell' }],
+})
+
+export default function Paywall() {
+	const { products, selected, select } = useProducts()
+	const { goToNextPage } = useNavigation()
+	const { loading } = usePayment()
+	const checkoutRef = useRef<PaymentCheckoutDialogHandle>(null)
+
+	const plans = products.filter((p) => !p.id.startsWith('upsell'))
+
+	const handleContinue = () => {
+		checkoutRef.current?.open()
+	}
+
+	const canContinue = selected && !loading
+
+	return (
+		<div className="min-h-screen bg-white flex flex-col items-center">
+			<div className="flex flex-col max-w-[672px] mx-auto w-full px-4 pb-32">
+				{/* Header */}
+				<div className="pt-8 pb-6 text-center">
+					<h1 className="text-[28px] font-bold text-[#171717]">
+						Choose your plan
+					</h1>
+					<p className="text-base text-[#727272] mt-2">
+						Start your journey today
+					</p>
+				</div>
+
+				{/* Features */}
+				<div className="flex flex-col gap-3 mb-8">
+					{[
+						'Personalized plan based on your answers',
+						'Track your progress over time',
+						'Access to all premium features',
+						'Cancel anytime, no questions asked',
+					].map((text) => (
+						<div key={text} className="flex items-center gap-3">
+							<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center shrink-0">
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="white"
+									strokeWidth="2.75"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								>
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+							</div>
+							<span className="text-[#171717] text-[15px]">
+								{text}
+							</span>
+						</div>
+					))}
+				</div>
+
+				{/* Plan cards */}
+				<div className="space-y-3 mb-6">
+					{plans.map((product) => {
+						const isSelected = selected?.id === product.id
+
+						return (
+							<button
+								key={product.id}
+								onClick={() => select(product.id)}
+								className={`w-full flex items-center justify-between text-left transition-all rounded-2xl px-5 py-4 border-2 ${
+									isSelected
+										? 'border-blue-600 bg-blue-50'
+										: 'border-gray-200 bg-transparent'
+								}`}
+							>
+								<div className="flex items-center gap-3">
+									<div
+										className={`w-[22px] h-[22px] rounded-full border-2 flex items-center justify-center shrink-0 ${
+											isSelected
+												? 'border-blue-600 bg-blue-600'
+												: 'border-gray-300 bg-transparent'
+										}`}
+									>
+										{isSelected && (
+											<svg
+												width="14"
+												height="14"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="white"
+												strokeWidth="2.75"
+												strokeLinecap="round"
+												strokeLinejoin="round"
+											>
+												<polyline points="20 6 9 17 4 12" />
+											</svg>
+										)}
+									</div>
+									<div className="flex flex-col">
+										<span className="text-[#171717] text-base font-bold">
+											{product.displayName}
+										</span>
+										<span className="text-[#727272] text-sm">
+											{product.price}
+											{product.period
+												? ` / ${product.period}`
+												: ''}
+										</span>
+									</div>
+								</div>
+								{product.hasTrial && (
+									<span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
+										{product.trialDays}-day trial
+									</span>
+								)}
+							</button>
+						)
+					})}
+				</div>
+
+				{/* Legal text */}
+				<p className="text-center text-gray-400 text-[11px] leading-4 mb-6">
+					By continuing, you agree that your subscription will
+					automatically renew at the regular price at the end of your
+					plan period. You can cancel at any time.
+				</p>
+
+				{/* Money-back guarantee */}
+				<div className="flex items-center gap-3 justify-center py-4">
+					<svg
+						width="28"
+						height="28"
+						viewBox="0 0 24 24"
+						fill="#2563EB"
+						stroke="none"
+					>
+						<path d="M12 2L3 5v6.09c0 5.05 3.41 9.76 9 10.91 5.59-1.15 9-5.86 9-10.91V5l-9-3zm-2 15l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z" />
+					</svg>
+					<div className="flex flex-col">
+						<span className="font-bold text-[#171717] text-sm">
+							Money-back guarantee
+						</span>
+						<span className="text-[#727272] text-xs">
+							Not satisfied? Get a full refund within 30 days.
+						</span>
+					</div>
+				</div>
+			</div>
+
+			{/* Sticky continue */}
+			<div className="fixed bottom-0 left-0 right-0 z-30 bg-white px-4 py-3 pb-[max(12px,env(safe-area-inset-bottom))] border-t border-gray-200">
+				<div className="max-w-[672px] mx-auto">
+					<motion.button
+						whileTap={canContinue ? { scale: 0.95 } : {}}
+						transition={{ duration: 0.15 }}
+						onClick={handleContinue}
+						disabled={!canContinue}
+						className={`w-full py-4 rounded-2xl text-lg font-bold border-none ${
+							canContinue
+								? 'bg-blue-600 text-white cursor-pointer'
+								: 'bg-gray-400 text-white cursor-not-allowed'
+						}`}
+					>
+						Continue
+					</motion.button>
+				</div>
+			</div>
+
+			<PaymentCheckoutDialog
+				ref={checkoutRef}
+				onSuccess={goToNextPage}
+			/>
+		</div>
+	)
+}

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

@@ -0,0 +1,61 @@
+import { definePage } from '@appfunnel-dev/sdk'
+import { SingleSelect } from '@appfunnel-dev/sdk/elements'
+import { Header } from '../components/Header'
+
+export const page = definePage({
+  name: 'Goal',
+  routes: [{ to: 'multi-select' }],
+})
+
+export default function Goal() {
+  return (
+    <div className="min-h-screen bg-white flex flex-col max-w-[672px] mx-auto w-full">
+      <Header showBack={false} />
+      <div className="flex-1 flex flex-col px-4 pt-8 pb-6">
+        <h1 className="text-[30px] leading-tight font-bold text-[#171717] mb-6">
+          What's your main goal?
+        </h1>
+        <SingleSelect
+          responseKey="goal"
+          className="flex flex-col gap-3"
+          options={[
+            { label: 'Get started quickly', sublabel: 'Jump right in', value: 'get_started' },
+            { label: 'Learn something new', sublabel: 'Explore and grow', value: 'learn' },
+            { label: 'Improve my routine', sublabel: 'Level up daily habits', value: 'improve' },
+            { label: 'Track my progress', sublabel: 'Stay on top of goals', value: 'track' },
+            { label: 'Something else', sublabel: 'Tell us more later', value: 'other' },
+          ]}
+          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-full 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>
+                <div>
+                  <div className="text-base font-semibold text-[#171717]">{item.label}</div>
+                  {item.sublabel && (
+                    <div className="text-sm text-[#727272]">{item.sublabel}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,158 @@
+import {
+	definePage,
+	useProducts,
+	useNavigation,
+	usePayment,
+} from '@appfunnel-dev/sdk'
+import { Loading, motion } from '@appfunnel-dev/sdk/elements'
+
+export const page = definePage({
+	name: 'Upsell',
+	type: 'upsell',
+	routes: [{ to: 'download' }],
+})
+
+export default function Upsell() {
+	const { products } = useProducts()
+	const { goToNextPage } = useNavigation()
+	const { loading, purchase } = usePayment()
+
+	const upsellProduct = products.find((p) => p.id.startsWith('upsell'))
+
+	const handleAdd = () => {
+		if (!upsellProduct) return
+		purchase(upsellProduct.id, {
+			onSuccess: goToNextPage,
+		})
+	}
+
+	return (
+		<div className="min-h-screen bg-white flex flex-col items-center">
+			{/* Skip header */}
+			<div className="w-full max-w-[672px] flex justify-end px-4 pt-4">
+				<button
+					onClick={goToNextPage}
+					className="p-2 text-gray-400 hover:text-gray-600"
+				>
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<line x1="18" y1="6" x2="6" y2="18" />
+						<line x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
+			</div>
+
+			{/* Content */}
+			<div className="max-w-[672px] w-full flex flex-col gap-6 px-4 pb-32">
+				{/* Badge */}
+				<div className="flex justify-center">
+					<span className="bg-blue-50 text-blue-600 text-sm font-bold px-4 py-1.5 rounded-full">
+						Special one-time offer
+					</span>
+				</div>
+
+				{/* Title */}
+				<div className="text-center">
+					<h1 className="text-[28px] font-bold text-[#171717]">
+						Unlock the full experience
+					</h1>
+					<p className="text-base text-[#727272] mt-2">
+						Add premium features to supercharge your results
+					</p>
+				</div>
+
+				{/* Features */}
+				<div className="flex flex-col gap-4">
+					{[
+						{
+							title: 'Advanced analytics',
+							desc: 'Get detailed insights into your progress',
+						},
+						{
+							title: 'Priority support',
+							desc: 'Get help when you need it most',
+						},
+						{
+							title: 'Exclusive content',
+							desc: 'Access members-only resources',
+						},
+					].map((item) => (
+						<div
+							key={item.title}
+							className="flex items-start gap-3"
+						>
+							<div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center shrink-0 mt-0.5">
+								<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>
+							<div>
+								<span className="text-[15px] font-bold text-[#171717]">
+									{item.title}
+								</span>
+								<p className="text-sm text-[#727272]">
+									{item.desc}
+								</p>
+							</div>
+						</div>
+					))}
+				</div>
+
+				{/* Price */}
+				{upsellProduct && (
+					<div className="text-center py-4">
+						<span className="text-3xl font-bold text-[#171717]">
+							{upsellProduct.price}
+						</span>
+						{upsellProduct.period && (
+							<span className="text-base text-[#727272]">
+								{' '}
+								/ {upsellProduct.period}
+							</span>
+						)}
+					</div>
+				)}
+
+				{/* Legal */}
+				<p className="text-center text-gray-400 text-[11px] leading-4">
+					By continuing, you agree to be charged the amount shown
+					above. Cancel anytime.
+				</p>
+			</div>
+
+			{/* Sticky button */}
+			<div className="fixed bottom-0 left-0 right-0 z-30 bg-white px-4 py-3 pb-[max(12px,env(safe-area-inset-bottom))] border-t border-gray-200">
+				<div className="max-w-[672px] mx-auto flex flex-col gap-2">
+					<motion.button
+						whileTap={!loading ? { scale: 0.95 } : {}}
+						transition={{ duration: 0.15 }}
+						onClick={handleAdd}
+						disabled={loading}
+						className={`w-full py-4 rounded-2xl text-lg font-bold border-none ${
+							loading
+								? 'bg-gray-400 text-white cursor-not-allowed'
+								: 'bg-blue-600 text-white cursor-pointer'
+						}`}
+					>
+						{loading ? <Loading size="sm" color="#fff" /> : 'Add to my plan'}
+					</motion.button>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/default/template.json

@@ -1,6 +1,6 @@
 {
   "name": "Default",
-  "description": "Simple 3-page funnel with loading screen and results",
+  "description": "9-page funnel with quiz, account creation, paywall, upsell, and download screens",
   "products": [
     { "id": "plan_1", "label": "Plan 1", "description": "The cheapest plan — typically a short-term or weekly option" },
     { "id": "plan_2", "label": "Plan 2", "description": "Mid-tier plan — typically monthly, best balance of value and price" },

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

@@ -1,37 +0,0 @@
-import { definePage, useResponse, useNavigation } from '@appfunnel-dev/sdk'
-
-export const page = definePage({
-  name: 'Landing',
-  type: 'default',
-  routes: [{ to: 'loading' }],
-})
-
-export default function Landing() {
-  const [goal, setGoal] = useResponse<string>('goal')
-  const { goToNextPage } = useNavigation()
-
-  return (
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <div className="w-full max-w-md space-y-6">
-        <h1 className="text-3xl font-bold text-center">Welcome</h1>
-        <p className="text-center text-gray-500">
-          Tell us about your goal to get started.
-        </p>
-        <input
-          type="text"
-          value={goal}
-          onChange={(e) => setGoal(e.target.value)}
-          placeholder="What's your goal?"
-          className="w-full rounded-xl border p-4 text-lg"
-        />
-        <button
-          onClick={goToNextPage}
-          disabled={!goal.trim()}
-          className="w-full rounded-xl bg-blue-600 py-4 text-lg font-bold text-white disabled:opacity-50"
-        >
-          Continue
-        </button>
-      </div>
-    </div>
-  )
-}

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

@@ -1,76 +0,0 @@
-import { definePage, useNavigation } from '@appfunnel-dev/sdk'
-import { ProgressCircle } from '@appfunnel-dev/sdk/elements'
-import { useState } from 'react'
-
-export const page = definePage({
-  name: 'Loading',
-  routes: [{ to: 'result' }],
-})
-
-const STEPS = [
-  'Analyzing your answers',
-  'Preparing your plan',
-  'Finalizing results',
-]
-
-export default function Loading() {
-  const { goToNextPage } = useNavigation()
-  const [progress, setProgress] = useState(0)
-
-  const currentStep = Math.min(Math.floor(progress / 34), STEPS.length - 1)
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-4">
-      <h1 className="text-2xl font-bold text-center">
-        Preparing your results...
-      </h1>
-
-      <div className="w-40 h-40">
-        <ProgressCircle
-          duration={3000}
-          animation="easeOut"
-          trackColor="#e5e7eb"
-          fillColor="#3b82f6"
-          trackWidth={8}
-          fillWidth={8}
-          autoStart
-          onProgress={setProgress}
-          onComplete={() => setTimeout(goToNextPage, 400)}
-          renderInner={(p) => (
-            <span className="text-2xl font-bold">{p}%</span>
-          )}
-        />
-      </div>
-
-      <div className="flex flex-col gap-3 w-full max-w-xs">
-        {STEPS.map((step, i) => (
-          <div key={i} className="flex items-center gap-3">
-            <div
-              className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 ${
-                i <= currentStep ? 'bg-blue-600' : 'bg-gray-200'
-              }`}
-            >
-              {i <= currentStep && (
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="white"
-                  strokeWidth="2.5"
-                >
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-              )}
-            </div>
-            <span
-              className={`text-sm ${i <= currentStep ? 'text-gray-900' : 'text-gray-400'}`}
-            >
-              {step}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,38 +0,0 @@
-import { definePage, useResponse } from '@appfunnel-dev/sdk'
-import { CountUp } from '@appfunnel-dev/sdk/elements'
-
-export const page = definePage({
-  name: 'Result',
-  routes: [],
-})
-
-export default function Result() {
-  const [goal] = useResponse<string>('goal')
-
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-center gap-8 p-4">
-      <h1 className="text-3xl font-bold text-center">
-        Your plan is ready!
-      </h1>
-
-      <p className="text-gray-500 text-center max-w-md">
-        Based on your goal "{goal}", here's what we found:
-      </p>
-
-      <div className="flex gap-6">
-        <div className="flex flex-col items-center gap-2 rounded-xl bg-gray-50 p-6">
-          <CountUp from={0} to={94} duration={1500} suffix="%" />
-          <span className="text-sm text-gray-500">Match score</span>
-        </div>
-        <div className="flex flex-col items-center gap-2 rounded-xl bg-gray-50 p-6">
-          <CountUp from={0} to={12} duration={1500} suffix=" days" />
-          <span className="text-sm text-gray-500">Estimated time</span>
-        </div>
-      </div>
-
-      <button className="w-full max-w-md rounded-xl bg-blue-600 py-4 text-lg font-bold text-white">
-        Get Started
-      </button>
-    </div>
-  )
-}