- {/* Main toggle button */}
- {/* Dropdown menu */}
{isOpen && (
@@ -118,4 +113,4 @@ export function LanguageToggle() {
)}
);
-}
\ No newline at end of file
+}
diff --git a/app/components/PremiumCheckout.tsx b/app/components/PremiumCheckout.tsx
new file mode 100644
index 0000000..11756cf
--- /dev/null
+++ b/app/components/PremiumCheckout.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { appConfig } from '../config/app';
+import { SkinId } from '../types';
+import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
+import { usePrices } from '../hooks/usePrices';
+import { useFeature } from '../providers/FeatureProvider';
+
+interface PremiumCheckoutProps {
+ skinId: SkinId;
+ onClose: () => void;
+}
+
+export function PremiumCheckout({ skinId, onClose }: PremiumCheckoutProps) {
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState
(null);
+ const params = useParams();
+ const getLocalizedSkinName = useLocalizedSkinName();
+ const paymentsEnabled = useFeature('paymentsEnabled');
+ const { getPrice, loading: pricesLoading } = usePrices();
+
+ const skin = appConfig.skins[skinId];
+ const skinName = getLocalizedSkinName(skinId);
+ const price = getPrice(skinId);
+ const locale = params.locale as string;
+
+ // Guard: never render if payments are disabled or skin is not premium
+ if (!paymentsEnabled || !skin?.isPremium) {
+ return null;
+ }
+
+ const handlePurchase = async () => {
+ setIsLoading(true);
+ setError(null);
+
+ try {
+ const response = await fetch('/api/checkout', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ skinId, locale }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Failed to create checkout');
+ }
+
+ // Redirect to Lemon Squeezy checkout
+ if (data.checkoutUrl) {
+ window.location.href = data.checkoutUrl;
+ } else {
+ throw new Error('No checkout URL received');
+ }
+ } catch (err) {
+ console.error('Checkout error:', err);
+ setError(err instanceof Error ? err.message : 'An error occurred');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+ Premium Skin
+
+
+
+
+
+
+
+
+
+ {skinName}
+
+
+ Unlock this premium skin to customize your experience!
+
+
+ {pricesLoading ? '...' : (price ?? '')}
+
+
+
+ {error && (
+
+ )}
+
+
+
+
+
+
+
+ Secure payment powered by Lemon Squeezy
+
+
+
- {skinOptions.map((option) => (
-
- ))}
+ {skinOptions.map((option) => {
+ const skin = appConfig.skins[option.id];
+ const isPremium = skin.isPremium;
+
+ return (
+
+ );
+ })}
)}
+
+ {/* Premium Checkout Modal */}
+ {showCheckout && (
+
+ )}
);
}
\ No newline at end of file
diff --git a/app/components/SpeechBubble.tsx b/app/components/SpeechBubble.tsx
index 28f0656..38a59b8 100644
--- a/app/components/SpeechBubble.tsx
+++ b/app/components/SpeechBubble.tsx
@@ -2,9 +2,8 @@ import { useEffect, useState, useCallback, useRef } from 'react';
import { useMessages } from 'next-intl';
import { getRandomEmoji } from '../config/emojis';
-// Increase visibility duration for speech bubbles
-const VISIBILITY_MS = 3000; // 3 seconds for message visibility
-const COOLDOWN_MS = 2000; // 2 seconds between new messages
+const VISIBILITY_MS = 3000;
+const COOLDOWN_MS = 2000;
interface SpeechBubbleProps {
isShaken: boolean;
@@ -21,17 +20,13 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
const showTimeRef = useRef
(0);
const lastFadeTime = useRef(0);
- // Load messages when component mounts or language changes
useEffect(() => {
- // Only run if we haven't loaded messages yet
if (messagesRef.current.length > 0) return;
- // Get the character messages from the messages object
try {
const characterMessages = allMessages.character;
if (characterMessages && typeof characterMessages === 'object') {
- // Convert object values to array
const messageArray = Object.values(characterMessages) as string[];
if (messageArray.length === 0) {
@@ -47,24 +42,22 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
} catch (error) {
console.error(`Error loading character messages:`, error);
}
- }, [allMessages]); // Depend on allMessages to reload when they change
+ }, [allMessages]);
const getRandomMessage = useCallback(() => {
const currentMessages = messagesRef.current;
if (currentMessages.length === 0) return '';
const randomIndex = Math.floor(Math.random() * currentMessages.length);
- const message = currentMessages[randomIndex];
- return `${message} ${getRandomEmoji()}`;
- }, []); // No dependencies needed since we use ref
+ const messageValue = currentMessages[randomIndex];
+ return `${messageValue} ${getRandomEmoji()}`;
+ }, []);
- // Handle new trigger events
useEffect(() => {
if (triggerCount === 0 || messagesRef.current.length === 0) return;
const now = Date.now();
const timeSinceLastFade = now - lastFadeTime.current;
- // If we're in cooldown, or a message is visible, queue the new message
if (timeSinceLastFade < COOLDOWN_MS || isVisible) {
const newMessage = getRandomMessage();
if (newMessage) {
@@ -73,7 +66,6 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
return;
}
- // Otherwise, show the message immediately
lastTriggerTime.current = now;
showTimeRef.current = now;
const newMessage = getRandomMessage();
@@ -83,17 +75,15 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
}
}, [triggerCount, isVisible, getRandomMessage]);
- // Handle message queue
useEffect(() => {
if (messageQueue.length === 0 || isVisible) return;
const now = Date.now();
const timeSinceLastFade = now - lastFadeTime.current;
- // Only show next message if cooldown has expired
if (timeSinceLastFade >= COOLDOWN_MS) {
const nextMessage = messageQueue[0];
- setMessageQueue(prev => prev.slice(1)); // Remove the message from queue
+ setMessageQueue(prev => prev.slice(1));
lastTriggerTime.current = now;
showTimeRef.current = now;
setMessage(nextMessage);
@@ -101,7 +91,6 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
}
}, [messageQueue, isVisible]);
- // Handle visibility duration
useEffect(() => {
if (!isVisible) return;
diff --git a/app/config/app.ts b/app/config/app.ts
index 53f63d0..f0a8eec 100644
--- a/app/config/app.ts
+++ b/app/config/app.ts
@@ -16,20 +16,25 @@ export const appConfig = {
id: 'frog',
name: 'Frog',
normal: '/images/frog.svg',
- shaken: '/images/frog-shaken.svg'
+ shaken: '/images/frog-shaken.svg',
+ isPremium: false
},
mandarin: {
id: 'mandarin',
name: 'Mandarin',
normal: '/images/mandarin.svg',
// TODO: Create a proper shaken version of the mandarin skin
- shaken: '/images/mandarin.svg' // Using the same image for both states until a shaken version is created
+ shaken: '/images/mandarin.svg', // Using the same image for both states until a shaken version is created
+ isPremium: false,
+ variantId: 'your_mandarin_variant_id_here' // Replace with actual variant ID when created
},
beaver: {
id: 'beaver',
name: 'Beaver',
normal: '/images/beaver.svg',
- shaken: '/images/beaver-shaken.svg'
+ shaken: '/images/beaver-shaken.svg',
+ isPremium: true,
+ variantId: '1047017'
}
},
defaultSkin: 'frog'
diff --git a/app/config/features.ts b/app/config/features.ts
new file mode 100644
index 0000000..afa58d5
--- /dev/null
+++ b/app/config/features.ts
@@ -0,0 +1,20 @@
+/**
+ * Server-side feature flag definitions.
+ *
+ * Flags are read from environment variables. The abstraction is kept thin
+ * so a runtime provider (Flipt, Unleash, Flags SDK adapter, etc.) can be
+ * swapped in later without changing any consumer code.
+ *
+ * Convention: FEATURE_=1 → enabled
+ * anything else → disabled
+ */
+
+export interface FeatureFlags {
+ paymentsEnabled: boolean;
+}
+
+export function getFeatureFlags(): FeatureFlags {
+ return {
+ paymentsEnabled: process.env.FEATURE_PAYMENTS === '1',
+ };
+}
diff --git a/app/config/lemonsqueezy.ts b/app/config/lemonsqueezy.ts
new file mode 100644
index 0000000..adc3a64
--- /dev/null
+++ b/app/config/lemonsqueezy.ts
@@ -0,0 +1,45 @@
+import { lemonSqueezySetup } from '@lemonsqueezy/lemonsqueezy.js';
+
+// Initialize Lemon Squeezy SDK
+export function initializeLemonSqueezy() {
+ const apiKey = process.env.LEMONSQUEEZY_API_KEY;
+
+ if (!apiKey) {
+ throw new Error('LEMONSQUEEZY_API_KEY is required');
+ }
+
+ lemonSqueezySetup({
+ apiKey,
+ onError: (error) => {
+ throw error; // Fail fast instead of just logging
+ },
+ });
+}
+
+// Lemon Squeezy configuration with lazy validation.
+// Config is only resolved on first access so the module can be safely
+// imported even when payment env vars are absent (e.g. payments disabled).
+let _config: { storeId: string; webhookSecret: string; baseUrl: string } | null = null;
+
+export function getLemonSqueezyConfig() {
+ if (_config) return _config;
+
+ const storeId = process.env.LEMONSQUEEZY_STORE_ID;
+ const webhookSecret = process.env.LEMONSQUEEZY_WEBHOOK_SECRET;
+ const baseUrl = process.env.NEXT_PUBLIC_APP_URL;
+
+ if (!storeId) {
+ throw new Error('LEMONSQUEEZY_STORE_ID is required');
+ }
+
+ if (!webhookSecret) {
+ throw new Error('LEMONSQUEEZY_WEBHOOK_SECRET is required');
+ }
+
+ if (!baseUrl) {
+ throw new Error('NEXT_PUBLIC_APP_URL is required');
+ }
+
+ _config = { storeId, webhookSecret, baseUrl };
+ return _config;
+}
\ No newline at end of file
diff --git a/app/hooks/usePrices.ts b/app/hooks/usePrices.ts
new file mode 100644
index 0000000..0e263e9
--- /dev/null
+++ b/app/hooks/usePrices.ts
@@ -0,0 +1,60 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useFeature } from '../providers/FeatureProvider';
+
+interface PricesData {
+ prices: Record;
+}
+
+export function usePrices() {
+ const paymentsEnabled = useFeature('paymentsEnabled');
+ const [prices, setPrices] = useState>({});
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!paymentsEnabled) {
+ setLoading(false);
+ return;
+ }
+
+ const fetchPrices = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+
+ const response = await fetch('/api/prices');
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch prices');
+ }
+
+ const data: PricesData = await response.json();
+ setPrices(data.prices);
+ } catch (err) {
+ console.error('Error fetching prices:', err);
+ setError(err instanceof Error ? err.message : 'Failed to fetch prices');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchPrices();
+ }, [paymentsEnabled]);
+
+ const getPrice = (skinId: string): string | null => {
+ if (!paymentsEnabled || loading) {
+ return null;
+ }
+ return prices[skinId] ?? null;
+ };
+
+ return {
+ prices,
+ loading,
+ error,
+ enabled: paymentsEnabled,
+ getPrice
+ };
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 5168ad2..d816ed9 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,8 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { ThemeProvider } from './providers/ThemeProvider'
+import { FeatureProvider } from './providers/FeatureProvider'
+import { getFeatureFlags } from './config/features'
import { appConfig } from './config/app'
import { Suspense } from 'react'
import './globals.css'
@@ -41,18 +43,22 @@ export default function RootLayout({
}: {
children: React.ReactNode
}) {
+ const features = getFeatureFlags();
+
return (
-
-
- Loading...
-