appfunnel 0.12.0 → 0.14.0

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

@@ -1,48 +0,0 @@
-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>
-  )
-}

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

@@ -1,191 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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,10 +0,0 @@
-{
-  "name": "Default",
-  "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" },
-    { "id": "plan_3", "label": "Plan 3", "description": "Premium plan — typically quarterly or annual, highest value" },
-    { "id": "upsell_1", "label": "Upsell", "description": "One-time or add-on offer shown after the main purchase" }
-  ]
-}

package/templates/default/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "baseUrl": "."
-  },
-  "include": ["src"]
-}