Fuckaway Windows line endings

.cursor/rules/snyk_rules.mdc

@@ -0,0 +1,14 @@
+---
+alwaysApply: true
+always_on: true
+trigger: always_on
+applyTo: "**"
+description: Snyk Security At Inception
+---
+
+# Project security best practices
+
+- Always run snyk_code_scan tool for new first party code that is generated in a Snyk-supported language.
+- If any security issues are found based on newly introduced or modified code or dependencies, attempt to fix the issues using the results context from Snyk.
+- Rescan the code after fixing the issues to ensure that the issues were fixed and that there are no newly introduced issues.
+- Repeat this process until no new issues are found.

.gitattributes

@@ -0,0 +1,39 @@
+# Force LF line endings for all text files
+* text=auto eol=lf
+
+# Ensure common text files are always LF
+*.js text eol=lf
+*.jsx text eol=lf
+*.ts text eol=lf
+*.tsx text eol=lf
+*.json text eol=lf
+*.css text eol=lf
+*.scss text eol=lf
+*.html text eol=lf
+*.md text eol=lf
+*.yml text eol=lf
+*.yaml text eol=lf
+*.xml text eol=lf
+*.svg text eol=lf
+*.sh text eol=lf
+*.env text eol=lf
+*.config text eol=lf
+*.mjs text eol=lf
+*.cjs text eol=lf
+*.mdc text eol=lf
+
+# Ensure these are treated as binary and not modified
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.webp binary
+*.woff binary
+*.woff2 binary
+*.ttf binary
+*.eot binary
+*.mp3 binary
+*.mp4 binary
+*.ogg binary
+*.wav binary

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    }
+  }
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "snyk.advanced.organization": "512ef4a1-6034-4537-a391-9692d282122a",
+    "snyk.advanced.autoSelectOrganization": true,
+    "i18n-ally.localesPaths": [
+        "i18n",
+        "messages"
+    ]
+}

app/[locale]/checkout/cancel/page.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useFeature } from '../../../providers/FeatureProvider';
+
+export default function CheckoutCancelPage() {
+  const router = useRouter();
+  const t = useTranslations('ui');
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const [countdown, setCountdown] = useState(5);
+
+  // Redirect home immediately if payments are disabled
+  useEffect(() => {
+    if (!paymentsEnabled) {
+      router.replace('/');
+    }
+  }, [paymentsEnabled, router]);
+
+  useEffect(() => {
+    if (!paymentsEnabled) return;
+
+    // Countdown timer to redirect to home
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          router.push('/');
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [router, paymentsEnabled]);
+
+  if (!paymentsEnabled) {
+    return null;
+  }
+
+  const handleGoBack = () => {
+    router.push('/');
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 text-center">
+        {/* Cancel Icon */}
+        <div className="w-16 h-16 mx-auto mb-6 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
+          <svg className="w-8 h-8 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+
+        {/* Cancel Message */}
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          {t('checkout.cancel.title')}
+        </h1>
+
+        <p className="text-gray-600 dark:text-gray-300 mb-6">
+          {t('checkout.cancel.message')}
+        </p>
+
+        <p className="text-gray-500 dark:text-gray-400 mb-6">
+          {t('checkout.cancel.tryAgain')}
+        </p>
+
+        {/* Action Buttons */}
+        <div className="space-y-3">
+          <button
+            onClick={handleGoBack}
+            className="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
+          >
+            {t('checkout.cancel.backToApp')}
+          </button>
+          
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {t('checkout.cancel.redirecting', { countdown })}
+          </p>
+        </div>
+
+        {/* Help Info */}
+        <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {t('checkout.cancel.needHelp')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/checkout/success/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { appConfig } from '../../../config/app';
+import { SkinId } from '../../../types';
+import { useLocalizedSkinName } from '../../../hooks/useLocalizedSkinName';
+import { useFeature } from '../../../providers/FeatureProvider';
+
+export default function CheckoutSuccessPage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const t = useTranslations('ui');
+  const getLocalizedSkinName = useLocalizedSkinName();
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const [countdown, setCountdown] = useState(5);
+
+  const skinId = searchParams.get('skin') as SkinId;
+  const skin = skinId ? appConfig.skins[skinId] : null;
+  const skinName = skinId ? getLocalizedSkinName(skinId) : '';
+
+  // Redirect home immediately if payments are disabled
+  useEffect(() => {
+    if (!paymentsEnabled) {
+      router.replace('/');
+    }
+  }, [paymentsEnabled, router]);
+
+  useEffect(() => {
+    if (!paymentsEnabled) return;
+
+    // Countdown timer to redirect to home
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          // Redirect to home with the purchased skin
+          const params = new URLSearchParams();
+          if (skinId && skinId !== appConfig.defaultSkin) {
+            params.set('skin', skinId);
+          }
+          const newUrl = `/${params.toString() ? '?' + params.toString() : ''}`;
+          router.push(newUrl);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [skinId, router, paymentsEnabled]);
+
+  if (!paymentsEnabled) {
+    return null;
+  }
+
+  const handleGoToApp = () => {
+    const params = new URLSearchParams();
+    if (skinId && skinId !== appConfig.defaultSkin) {
+      params.set('skin', skinId);
+    }
+    const newUrl = `/${params.toString() ? '?' + params.toString() : ''}`;
+    router.push(newUrl);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
+      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 text-center">
+        {/* Success Icon */}
+        <div className="w-16 h-16 mx-auto mb-6 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
+          <svg className="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+
+        {/* Success Message */}
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+          {t('checkout.success.title')}
+        </h1>
+
+        {skin && (
+          <div className="mb-6">
+            <div className="w-20 h-20 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+              <img
+                src={skin.normal}
+                alt={skinName}
+                className="w-16 h-16"
+              />
+            </div>
+            <p className="text-gray-600 dark:text-gray-300">
+              {t('checkout.success.unlockedSkin', { skinName })}
+            </p>
+          </div>
+        )}
+
+        <p className="text-gray-500 dark:text-gray-400 mb-6">
+          {t('checkout.success.thankYou')}
+        </p>
+
+        {/* Action Buttons */}
+        <div className="space-y-3">
+          <button
+            onClick={handleGoToApp}
+            className="w-full px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-medium"
+          >
+            {t('checkout.success.goToApp')}
+          </button>
+          
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {t('checkout.success.redirecting', { countdown })}
+          </p>
+        </div>
+
+        {/* Receipt Info */}
+        <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {t('checkout.success.receiptSent')}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/page.tsx

@@ -31,17 +31,14 @@ export default function Home() {
   const getLocalizedSkinName = useLocalizedSkinName();
   const t = useTranslations('ui');
 
-  // Check if device motion is available and handle permissions
   const requestMotionPermission = async () => {
     if (typeof window === 'undefined') return;
 
-    // Check if device motion is available
     if (!('DeviceMotionEvent' in window)) {
       setMotionPermission('denied');
       return;
     }
 
-    // Request permission on iOS devices
     if ('requestPermission' in DeviceMotionEvent) {
       try {
         // @ts-expect-error - TypeScript doesn't know about requestPermission
@@ -52,39 +49,32 @@ export default function Home() {
         setMotionPermission('denied');
       }
     } else {
-      // Android or desktop - no permission needed
       setMotionPermission('granted');
     }
   };
 
   const triggerShake = useCallback((intensity: number) => {
-    // Use ref instead of state to prevent race conditions
     if (!isAnimatingRef.current) {
-      // Clear any existing timeout
       if (animationTimeoutRef.current) {
         clearTimeout(animationTimeoutRef.current);
       }
 
-      // Start shake animation
       isAnimatingRef.current = true;
-      animationStartTimeRef.current = Date.now(); // Track when animation starts
+      animationStartTimeRef.current = Date.now();
       setIsAnimating(true);
       setIsShaken(true);
       setShakeIntensity(intensity);
       setShakeCount(count => count + 1);
       
-      // Reset shake after configured duration
       animationTimeoutRef.current = setTimeout(() => {
         setIsShaken(false);
         setShakeIntensity(0);
         setIsAnimating(false);
         isAnimatingRef.current = false;
         
-        // Process next shake in queue if any
         setShakeQueue(prev => {
           if (prev.length > 0) {
             const [nextIntensity, ...rest] = prev;
-            // Small delay before triggering next shake to ensure clean transition
             setTimeout(() => {
               triggerShake(nextIntensity);
             }, 16);
@@ -94,17 +84,15 @@ export default function Home() {
         });
       }, shakeConfig.animations.shakeReset);
     } else {
-      // Only queue if we're not at the start of the animation
       const timeSinceStart = Date.now() - animationStartTimeRef.current;
-      if (timeSinceStart > 100) { // Only queue if animation has been running for a bit
+      if (timeSinceStart > 100) {
         setShakeQueue(prev => {
-          // Hard limit at 1 item
           if (prev.length >= 1) return prev;
           return [...prev, intensity];
         });
       }
     }
-  }, []); // Remove isAnimating from dependencies since we're using ref
+  }, []);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -133,7 +121,6 @@ export default function Home() {
       }
     };
 
-    // Only add motion listener if permission is granted
     if (typeof window !== 'undefined') {
       if (motionPermission === 'granted' && 'DeviceMotionEvent' in window) {
         window.addEventListener('devicemotion', handleMotion);
@@ -151,20 +138,17 @@ export default function Home() {
     };
   }, [lastUpdate, motionPermission, triggerShake]);
 
-  // Initial permission check
   useEffect(() => {
     requestMotionPermission();
   }, []);
 
   const handleClick = () => {
-    // Trigger haptic feedback for tap interaction
     if ('vibrate' in navigator) {
       navigator.vibrate(50); // Short 50ms vibration
     }
     triggerShake(shakeConfig.defaultTriggerIntensity);
   };
 
-  // Add cleanup in the component
   useEffect(() => {
     return () => {
       if (animationTimeoutRef.current) {
@@ -249,3 +233,4 @@ export default function Home() {
     </div>
   );
 }
+

app/api/checkout/route.ts

@@ -0,0 +1,107 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createCheckout } from '@lemonsqueezy/lemonsqueezy.js';
+import { initializeLemonSqueezy, getLemonSqueezyConfig } from '../../config/lemonsqueezy';
+import { getFeatureFlags } from '../../config/features';
+import { appConfig } from '../../config/app';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { paymentsEnabled } = getFeatureFlags();
+    if (!paymentsEnabled) {
+      return NextResponse.json(
+        { error: 'Payments are currently disabled' },
+        { status: 503 }
+      );
+    }
+
+    // Initialize Lemon Squeezy SDK
+    initializeLemonSqueezy();
+
+    const { skinId, locale } = await request.json();
+
+    if (!skinId) {
+      return NextResponse.json(
+        { error: 'Skin ID is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!locale) {
+      return NextResponse.json(
+        { error: 'Locale is required' },
+        { status: 400 }
+      );
+    }
+
+    // Get skin configuration
+    const skin = appConfig.skins[skinId as keyof typeof appConfig.skins];
+    
+    if (!skin) {
+      return NextResponse.json(
+        { error: 'Invalid skin ID' },
+        { status: 400 }
+      );
+    }
+
+    if (!skin.isPremium) {
+      return NextResponse.json(
+        { error: 'This skin is not premium' },
+        { status: 400 }
+      );
+    }
+
+    if (!skin.variantId) {
+      return NextResponse.json(
+        { error: 'Variant ID not configured for this skin' },
+        { status: 500 }
+      );
+    }
+
+    // Create checkout session
+    const config = getLemonSqueezyConfig();
+    const checkout = await createCheckout(config.storeId, skin.variantId!, {
+      productOptions: {
+        name: `Premium ${skin.name} Skin`,
+        description: `Unlock the premium ${skin.name} skin for Shake the Frog!`,
+        redirectUrl: `${config.baseUrl}/${locale}/checkout/success?skin=${skinId}`,
+        receiptButtonText: 'Go to App',
+        receiptThankYouNote: 'Thank you for your purchase! Your premium skin is now available.',
+      },
+      checkoutOptions: {
+        embed: false,
+        media: false,
+        logo: true,
+        desc: true,
+        discount: true,
+        subscriptionPreview: true,
+        buttonColor: '#16a34a'
+      },
+      checkoutData: {
+        custom: {
+          skin_id: skinId,
+        },
+      },
+      testMode: process.env.NODE_ENV !== 'production',
+    });
+
+    if (checkout.error) {
+      console.error('Checkout creation error:', checkout.error);
+      return NextResponse.json(
+        { error: 'Failed to create checkout session' },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({
+      checkoutUrl: checkout.data?.data.attributes.url,
+      checkoutId: checkout.data?.data.id,
+    });
+
+  } catch (error) {
+    console.error('Checkout API error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

app/api/prices/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from 'next/server';
+import { getVariant } from '@lemonsqueezy/lemonsqueezy.js';
+import { initializeLemonSqueezy } from '../../config/lemonsqueezy';
+import { getFeatureFlags } from '../../config/features';
+import { appConfig } from '../../config/app';
+
+export async function GET() {
+  const { paymentsEnabled } = getFeatureFlags();
+  if (!paymentsEnabled) {
+    return NextResponse.json({ prices: {}, enabled: false });
+  }
+
+  // Initialize Lemon Squeezy SDK
+  initializeLemonSqueezy();
+
+  const prices: Record<string, string> = {};
+
+  // Fetch prices for all premium skins
+  for (const [skinId, skin] of Object.entries(appConfig.skins)) {
+    if (skin.isPremium && skin.variantId) {
+      const variant = await getVariant(skin.variantId);
+      
+      if (!variant.data) {
+        throw new Error(`No variant data found for ${skinId}`);
+      }
+
+      const priceInCents = variant.data.data.attributes.price;
+      prices[skinId] = `$${(priceInCents / 100).toFixed(2)}`;
+    }
+  }
+
+  return NextResponse.json({ prices });
+}

app/api/webhooks/lemonsqueezy/route.ts

@@ -0,0 +1,148 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { createHmac } from 'crypto';
+import { getLemonSqueezyConfig } from '../../../config/lemonsqueezy';
+
+// Webhook payload interface using proper typing
+interface WebhookPayload {
+  meta: {
+    event_name: string;
+    custom_data?: Record<string, unknown>;
+  };
+  data: {
+    type: string;
+    id: string;
+    attributes: Record<string, unknown>;
+    relationships?: Record<string, unknown>;
+  };
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.text();
+    const signature = request.headers.get('x-signature');
+
+    if (!signature) {
+      return NextResponse.json(
+        { error: 'Missing signature' },
+        { status: 400 }
+      );
+    }
+
+    // Verify webhook signature
+    const config = getLemonSqueezyConfig();
+    const secret = config.webhookSecret;
+
+    const hmac = createHmac('sha256', secret);
+    hmac.update(body);
+    const digest = hmac.digest('hex');
+
+    if (signature !== digest) {
+      console.error('Invalid webhook signature');
+      return NextResponse.json(
+        { error: 'Invalid signature' },
+        { status: 401 }
+      );
+    }
+
+    // Parse webhook payload
+    const payload = JSON.parse(body);
+    const eventName = payload.meta?.event_name;
+
+    console.log('Received webhook:', eventName);
+
+    // Handle different webhook events
+    switch (eventName) {
+      case 'order_created':
+        await handleOrderCreated(payload);
+        break;
+      case 'subscription_created':
+        await handleSubscriptionCreated(payload);
+        break;
+      case 'subscription_updated':
+        await handleSubscriptionUpdated(payload);
+        break;
+      case 'subscription_cancelled':
+        await handleSubscriptionCancelled(payload);
+        break;
+      default:
+        console.log('Unhandled webhook event:', eventName);
+    }
+
+    return NextResponse.json({ received: true });
+
+  } catch (error) {
+    console.error('Webhook processing error:', error);
+    return NextResponse.json(
+      { error: 'Webhook processing failed' },
+      { status: 500 }
+    );
+  }
+}
+
+async function handleOrderCreated(payload: WebhookPayload) {
+  const order = payload.data;
+  const attributes = order.attributes as Record<string, unknown>;
+  const firstOrderItem = attributes.first_order_item as Record<string, unknown> | undefined;
+  const customData = firstOrderItem?.product_name;
+  
+  console.log('Order created:', {
+    orderId: order.id,
+    customerEmail: attributes.user_email,
+    total: attributes.total_formatted,
+    status: attributes.status,
+    customData: customData,
+  });
+
+  // Here you could:
+  // - Send confirmation email
+  // - Update user permissions in your database
+  // - Log the purchase for analytics
+  // - Grant access to premium features
+}
+
+async function handleSubscriptionCreated(payload: WebhookPayload) {
+  const subscription = payload.data;
+  const attributes = subscription.attributes as Record<string, unknown>;
+  
+  console.log('Subscription created:', {
+    subscriptionId: subscription.id,
+    customerEmail: attributes.user_email,
+    status: attributes.status,
+    productName: attributes.product_name,
+  });
+
+  // Handle subscription creation
+  // - Update user subscription status
+  // - Send welcome email
+  // - Grant premium access
+}
+
+async function handleSubscriptionUpdated(payload: WebhookPayload) {
+  const subscription = payload.data;
+  const attributes = subscription.attributes as Record<string, unknown>;
+  
+  console.log('Subscription updated:', {
+    subscriptionId: subscription.id,
+    status: attributes.status,
+    endsAt: attributes.ends_at,
+  });
+
+  // Handle subscription updates
+  // - Update user access based on status
+  // - Handle plan changes
+}
+
+async function handleSubscriptionCancelled(payload: WebhookPayload) {
+  const subscription = payload.data;
+  const attributes = subscription.attributes as Record<string, unknown>;
+  
+  console.log('Subscription cancelled:', {
+    subscriptionId: subscription.id,
+    customerEmail: attributes.user_email,
+    endsAt: attributes.ends_at,
+  });
+
+  // Handle subscription cancellation
+  // - Schedule access removal for end date
+  // - Send cancellation confirmation
+}

app/components/LanguageToggle.tsx

@@ -18,7 +18,6 @@ export function LanguageToggle() {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Define the available locales
   const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
 
   const languageOptions: LanguageOption[] = locales.map((code) => ({
@@ -28,7 +27,6 @@ export function LanguageToggle() {
 
   const currentLanguage = languageOptions.find(lang => lang.code === locale) || languageOptions[0];
 
-  // Handle clicking outside to close dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -45,7 +43,6 @@ export function LanguageToggle() {
     };
   }, [isOpen]);
 
-  // Handle escape key to close dropdown
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -68,7 +65,6 @@ export function LanguageToggle() {
 
   return (
     <div className="relative" ref={dropdownRef}>
-      {/* Main toggle button */}
       <button
         onClick={toggleDropdown}
         className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
@@ -87,7 +83,6 @@ export function LanguageToggle() {
         />
       </button>
 
-      {/* Dropdown menu */}
       {isOpen && (
         <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
           <div className="py-1">

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<string | null>(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 (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+            Premium Skin
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            disabled={isLoading}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="text-center mb-6">
+          <div className="w-24 h-24 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+            <img
+              src={skin.normal}
+              alt={skinName}
+              className="w-16 h-16"
+            />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            {skinName}
+          </h3>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            Unlock this premium skin to customize your experience!
+          </p>
+          <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+            {pricesLoading ? '...' : (price ?? '')}
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 dark:bg-red-900 border border-red-300 dark:border-red-700 rounded-md">
+            <p className="text-red-700 dark:text-red-300 text-sm">{error}</p>
+          </div>
+        )}
+
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handlePurchase}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+          >
+            {isLoading ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Processing...
+              </>
+            ) : (
+              'Purchase'
+            )}
+          </button>
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
+          Secure payment powered by Lemon Squeezy
+        </p>
+      </div>
+    </div>
+  );
+}

app/components/SkinSelector.tsx

@@ -6,7 +6,10 @@ import Image from 'next/image';
 import { appConfig } from '../config/app';
 import { SkinId } from '../types';
 import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { usePrices } from '../hooks/usePrices';
+import { useFeature } from '../providers/FeatureProvider';
+import { ChevronDownIcon, LockClosedIcon } from '@heroicons/react/24/outline';
+import { PremiumCheckout } from './PremiumCheckout';
 
 interface SkinOption {
   id: SkinId;
@@ -18,10 +21,16 @@ export function SkinSelector() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const getLocalizedSkinName = useLocalizedSkinName();
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const { getPrice, loading: pricesLoading } = usePrices();
   const [isOpen, setIsOpen] = useState(false);
+  const [showCheckout, setShowCheckout] = useState<SkinId | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const skinOptions: SkinOption[] = Object.entries(appConfig.skins).map(([id, skin]) => ({
+  // When payments are disabled, filter out premium skins entirely
+  const skinOptions: SkinOption[] = Object.entries(appConfig.skins)
+    .filter(([, skin]) => paymentsEnabled || !skin.isPremium)
+    .map(([id, skin]) => ({
       id: id as SkinId,
       name: getLocalizedSkinName(id),
       image: skin.normal
@@ -37,6 +46,16 @@ export function SkinSelector() {
   const currentSkinOption = skinOptions.find(skin => skin.id === currentSkin) || skinOptions[0];
 
   const handleSkinChange = useCallback((newSkin: SkinId) => {
+    const skin = appConfig.skins[newSkin];
+    
+    // If it's a premium skin, show checkout modal
+    if (skin.isPremium) {
+      setShowCheckout(newSkin);
+      setIsOpen(false);
+      return;
+    }
+
+    // For free skins, change immediately
     const params = new URLSearchParams(searchParams.toString());
     
     if (newSkin === appConfig.defaultSkin) {
@@ -50,6 +69,10 @@ export function SkinSelector() {
     setIsOpen(false);
   }, [router, searchParams]);
 
+  const handleCheckoutClose = useCallback(() => {
+    setShowCheckout(null);
+  }, []);
+
   // Handle clicking outside to close dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -119,7 +142,11 @@ export function SkinSelector() {
       {isOpen && (
         <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
           <div className="py-1">
-            {skinOptions.map((option) => (
+            {skinOptions.map((option) => {
+              const skin = appConfig.skins[option.id];
+              const isPremium = skin.isPremium;
+              
+              return (
                 <button
                   key={option.id}
                   onClick={() => handleSkinChange(option.id)}
@@ -130,6 +157,7 @@ export function SkinSelector() {
                   }`}
                   role="menuitem"
                 >
+                  <div className="relative">
                     <Image
                       src={option.image}
                       alt={option.name}
@@ -137,15 +165,33 @@ export function SkinSelector() {
                       height={16}
                       className="rounded"
                     />
-                <span>{option.name}</span>
+                    {isPremium && (
+                      <LockClosedIcon className="absolute -top-1 -right-1 w-3 h-3 text-yellow-500" />
+                    )}
+                  </div>
+                  <span className="flex-1">{option.name}</span>
+                  {isPremium && paymentsEnabled && (
+                    <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+                      {pricesLoading ? '...' : (getPrice(option.id) ?? '')}
+                    </span>
+                  )}
                   {currentSkin === option.id && (
-                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                    <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
                   )}
                 </button>
-            ))}
+              );
+            })}
           </div>
         </div>
       )}
+
+      {/* Premium Checkout Modal */}
+      {showCheckout && (
+        <PremiumCheckout
+          skinId={showCheckout}
+          onClose={handleCheckoutClose}
+        />
+      )}
     </div>
   );
 }

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;
-const VISIBILITY_MS = 3000; // 3 seconds for message visibility
+const COOLDOWN_MS = 2000;
-const COOLDOWN_MS = 2000;   // 2 seconds between new messages
 
 interface SpeechBubbleProps {
   isShaken: boolean;
@@ -21,17 +20,13 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   const showTimeRef = useRef<number>(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];
+    const messageValue = currentMessages[randomIndex];
-    return `${message} ${getRandomEmoji()}`;
+    return `${messageValue} ${getRandomEmoji()}`;
-  }, []); // No dependencies needed since we use ref
+  }, []);
 
-  // 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;
 

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'

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_<NAME>=1  → enabled
+ *             anything else     → disabled
+ */
+
+export interface FeatureFlags {
+  paymentsEnabled: boolean;
+}
+
+export function getFeatureFlags(): FeatureFlags {
+  return {
+    paymentsEnabled: process.env.FEATURE_PAYMENTS === '1',
+  };
+}

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;
+}

app/hooks/usePrices.ts

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useFeature } from '../providers/FeatureProvider';
+
+interface PricesData {
+  prices: Record<string, string>;
+}
+
+export function usePrices() {
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const [prices, setPrices] = useState<Record<string, string>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(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
+  };
+}

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,9 +43,12 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
+  const features = getFeatureFlags();
+
   return (
     <html suppressHydrationWarning>
       <body className={`${inter.className} transition-colors`}>
+        <FeatureProvider features={features}>
           <ThemeProvider>
             <Suspense fallback={
               <div className="flex h-[100dvh] items-center justify-center bg-green-50 dark:bg-slate-900">
@@ -53,6 +58,7 @@ export default function RootLayout({
               {children}
             </Suspense>
           </ThemeProvider>
+        </FeatureProvider>
       </body>
     </html>
   )

app/providers/FeatureProvider.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { FeatureFlags } from '../config/features';
+
+const FeatureContext = createContext<FeatureFlags | undefined>(undefined);
+
+interface FeatureProviderProps {
+  features: FeatureFlags;
+  children: React.ReactNode;
+}
+
+export function FeatureProvider({ features, children }: FeatureProviderProps) {
+  return (
+    <FeatureContext.Provider value={features}>
+      {children}
+    </FeatureContext.Provider>
+  );
+}
+
+export function useFeature<K extends keyof FeatureFlags>(key: K): FeatureFlags[K] {
+  const context = useContext(FeatureContext);
+  if (context === undefined) {
+    throw new Error('useFeature must be used within a FeatureProvider');
+  }
+  return context[key];
+}

docker-compose.yml

@@ -19,6 +19,11 @@ services:
       start_period: 20s
     environment:
       - NODE_ENV=production
+      - FEATURE_PAYMENTS=${FEATURE_PAYMENTS:-1}
+      - LEMONSQUEEZY_API_KEY=${LEMONSQUEEZY_API_KEY}
+      - LEMONSQUEEZY_STORE_ID=${LEMONSQUEEZY_STORE_ID}
+      - LEMONSQUEEZY_WEBHOOK_SECRET=${LEMONSQUEEZY_WEBHOOK_SECRET}
+      - NEXT_PUBLIC_APP_URL=${NEXT_PUBLIC_APP_URL:-http://localhost:3000}
     deploy:
       resources:
         limits:

i18n/request.ts

@@ -16,8 +16,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
   }
 
   // Load messages from both ui and character directories
-  // Read how to split localization files here:
-  // https://next-intl.dev/docs/usage/configuration#messages-split-files
   const messages = {
     ui: (await import(`../messages/ui/${locale}.json`)).default,
     character: (await import(`../messages/character/${locale}.json`)).default
@@ -28,3 +26,4 @@ export default getRequestConfig(async ({ requestLocale }) => {
     messages
   };
 });
+

messages/ui/ar.json

@@ -1,4 +1,22 @@
 {
+  "checkout": {
+    "cancel": {
+      "title": "تم إلغاء الشراء",
+      "message": "تم إلغاء عملية الشراء. لم يتم خصم أي رسوم من حسابك.",
+      "tryAgain": "يمكنك المحاولة مرة أخرى في أي وقت لإلغاء قفل الأشكال المميزة.",
+      "backToApp": "العودة إلى التطبيق",
+      "redirecting": "إعادة التوجيه تلقائياً خلال {countdown} ثانية...",
+      "needHelp": "تحتاج مساعدة؟ اتصل بفريق الدعم لدينا."
+    },
+    "success": {
+      "title": "تم الشراء بنجاح!",
+      "unlockedSkin": "لقد قمت بإلغاء قفل شكل {skinName} بنجاح!",
+      "thankYou": "شكراً لك على الشراء. الشكل المميز متاح الآن.",
+      "goToApp": "الذهاب إلى التطبيق",
+      "redirecting": "إعادة التوجيه تلقائياً خلال {countdown} ثانية...",
+      "receiptSent": "تم إرسال إيصال إلى عنوان بريدك الإلكتروني."
+    }
+  },
   "enableDeviceShake": "تفعيل هز الجهاز",
   "languages": {
     "ar": "العربية",

messages/ui/de.json

@@ -1,4 +1,22 @@
 {
+  "checkout": {
+    "cancel": {
+      "title": "Kauf abgebrochen",
+      "message": "Ihr Kauf wurde abgebrochen. Es wurden keine Gebühren von Ihrem Konto abgebucht.",
+      "tryAgain": "Sie können jederzeit erneut versuchen, Premium-Skins freizuschalten.",
+      "backToApp": "Zurück zur App",
+      "redirecting": "Automatische Weiterleitung in {countdown} Sekunden...",
+      "needHelp": "Brauchen Sie Hilfe? Kontaktieren Sie unser Support-Team."
+    },
+    "success": {
+      "title": "Kauf erfolgreich!",
+      "unlockedSkin": "Sie haben erfolgreich den {skinName} Skin freigeschaltet!",
+      "thankYou": "Vielen Dank für Ihren Kauf. Ihr Premium-Skin ist jetzt verfügbar.",
+      "goToApp": "Zur App",
+      "redirecting": "Automatische Weiterleitung in {countdown} Sekunden...",
+      "receiptSent": "Eine Quittung wurde an Ihre E-Mail-Adresse gesendet."
+    }
+  },
   "enableDeviceShake": "Geräte-Schütteln aktivieren",
   "languages": {
     "ar": "Arabisch",

messages/ui/en.json

@@ -1,4 +1,22 @@
 {
+  "checkout": {
+    "cancel": {
+      "title": "Purchase Cancelled",
+      "message": "Your purchase was cancelled. No charges were made to your account.",
+      "tryAgain": "You can try again anytime to unlock premium skins.",
+      "backToApp": "Back to App",
+      "redirecting": "Redirecting automatically in {countdown} seconds...",
+      "needHelp": "Need help? Contact our support team."
+    },
+    "success": {
+      "title": "Purchase Successful!",
+      "unlockedSkin": "You've successfully unlocked the {skinName} skin!",
+      "thankYou": "Thank you for your purchase. Your premium skin is now available.",
+      "goToApp": "Go to App",
+      "redirecting": "Redirecting automatically in {countdown} seconds...",
+      "receiptSent": "A receipt has been sent to your email address."
+    }
+  },
   "enableDeviceShake": "Enable device shake",
   "languages": {
     "ar": "Arabic",

messages/ui/ka.json

@@ -1,4 +1,22 @@
 {
+  "checkout": {
+    "cancel": {
+      "title": "შეძენა გაუქმდა",
+      "message": "თქვენი შეძენა გაუქმდა. თქვენი ანგარიშიდან არანაირი თანხა არ ჩამოწერილა.",
+      "tryAgain": "შეგიძლიათ ნებისმიერ დროს სცადოთ ხელახლა პრემიუმ სკინების განბლოკვა.",
+      "backToApp": "აპში დაბრუნება",
+      "redirecting": "ავტომატური გადამისამართება {countdown} წამში...",
+      "needHelp": "გჭირდებათ დახმარება? დაუკავშირდით ჩვენს მხარდაჭერის გუნდს."
+    },
+    "success": {
+      "title": "შეძენა წარმატებულია!",
+      "unlockedSkin": "თქვენ წარმატებით განბლოკეთ {skinName} სკინი!",
+      "thankYou": "გმადლობთ შეძენისთვის. თქვენი პრემიუმ სკინი ახლა ხელმისაწვდომია.",
+      "goToApp": "აპში გადასვლა",
+      "redirecting": "ავტომატური გადამისამართება {countdown} წამში...",
+      "receiptSent": "ქვითარი გაიგზავნა თქვენს ელ-ფოსტის მისამართზე."
+    }
+  },
   "enableDeviceShake": "მოწყობილობის შერყევის ჩართვა",
   "languages": {
     "ar": "არაბული",

messages/ui/ru.json

@@ -1,4 +1,22 @@
 {
+  "checkout": {
+    "cancel": {
+      "title": "Покупка отменена",
+      "message": "Ваша покупка была отменена. С вашего счета не было списано никаких средств.",
+      "tryAgain": "Вы можете попробовать снова в любое время, чтобы разблокировать премиум-скины.",
+      "backToApp": "Вернуться в приложение",
+      "redirecting": "Автоматическое перенаправление через {countdown} секунд...",
+      "needHelp": "Нужна помощь? Свяжитесь с нашей службой поддержки."
+    },
+    "success": {
+      "title": "Покупка успешна!",
+      "unlockedSkin": "Вы успешно разблокировали скин {skinName}!",
+      "thankYou": "Спасибо за покупку. Ваш премиум-скин теперь доступен.",
+      "goToApp": "Перейти в приложение",
+      "redirecting": "Автоматическое перенаправление через {countdown} секунд...",
+      "receiptSent": "Чек был отправлен на ваш адрес электронной почты."
+    }
+  },
   "enableDeviceShake": "Включить встряску устройства",
   "languages": {
     "ar": "Арабский",

package.json

@@ -12,23 +12,24 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "next": "^16.0.10",
+    "@lemonsqueezy/lemonsqueezy.js": "^4.0.0",
-    "next-intl": "^4.5.8",
+    "next": "^16.1.6",
-    "react": "^19.2.3",
+    "next-intl": "^4.8.2",
-    "react-dom": "^19.2.3"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.0.1",
+    "@types/node": "^25.2.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.49.0",
+    "@typescript-eslint/parser": "^8.54.0",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
-    "eslint-config-next": "16.0.10",
+    "eslint-config-next": "16.1.6",
-    "globals": "^16.5.0",
+    "globals": "^17.3.0",
     "postcss": "^8.5.6",
     "postcss-load-config": "^6.0.1",
     "tailwindcss": "^4.1.18",

scripts/sortMessages.mts

@@ -6,7 +6,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const messagesBaseDir = join(__dirname, '..', 'messages');
 
-// Define supported languages
 type SupportedLanguage = 'en' | 'de' | 'ru' | 'ka' | 'ar';
 
 function stripEmojis(str: string): string {
@@ -14,30 +13,22 @@ function stripEmojis(str: string): string {
 }
 
 function sortCharacterMessages(messagesObj: Record<string, string>, lang: SupportedLanguage): Record<string, string> {
-  // Convert object to array of [key, value] pairs, sort by value, then convert back
   const entries = Object.entries(messagesObj);
   const sortedEntries = entries.sort(([, a], [, b]) => a.localeCompare(b, lang));
-  
-  // Rebuild object with sorted values but preserve original numeric keys
   const result: Record<string, string> = {};
   sortedEntries.forEach(([, value], index) => {
     result[index.toString()] = value;
   });
-  
   return result;
 }
 
 function sortUIMessages(messagesObj: Record<string, unknown>): Record<string, unknown> {
-  // For UI messages, sort by key (semantic names) to maintain consistent order
   const entries = Object.entries(messagesObj);
   const sortedEntries = entries.sort(([a], [b]) => a.localeCompare(b));
-  
-  // Rebuild object maintaining original semantic keys
   const result: Record<string, unknown> = {};
   sortedEntries.forEach(([key, value]) => {
     result[key] = value;
   });
-  
   return result;
 }
 
@@ -61,7 +52,6 @@ function sortMessages() {
     const warnings: string[] = [];
     const CHARACTER_LIMIT = 41;
     
-    // Process both character and ui message directories
     const messageTypes = ['character', 'ui'];
     
     messageTypes.forEach(messageType => {
@@ -72,32 +62,25 @@ function sortMessages() {
         return;
       }
       
-      // Get all JSON files in the messages directory
       const files = readdirSync(messagesDir).filter(file => file.endsWith('.json'));
 
       files.forEach(file => {
         const lang = file.replace('.json', '') as SupportedLanguage;
         const filePath = join(messagesDir, file);
         
-        // Read and parse JSON
         const messagesData = JSON.parse(readFileSync(filePath, 'utf8'));
         
-        // Handle both object format (character messages) and direct object format (ui messages)
         let messages: string[];
         let isObjectFormat = false;
         let needsConversion = false;
         
         if (Array.isArray(messagesData)) {
-          // Array format - needs conversion to object format for character messages
           messages = messagesData;
           needsConversion = messageType === 'character';
         } else if (typeof messagesData === 'object') {
-          // Object format with numeric keys or direct key-value pairs
           if (messageType === 'ui') {
-            // For UI messages, extract all string values from nested objects
             messages = extractStringsFromObject(messagesData);
           } else {
-            // For character messages, simple object values
             messages = Object.values(messagesData);
           }
           isObjectFormat = true;
@@ -106,11 +89,9 @@ function sortMessages() {
           return;
         }
 
-        // Check message lengths and duplicates
         const strippedToOriginal = new Map<string, string[]>();
         
         messages.forEach((msg: string) => {
-          // Length check - only apply to character messages, not UI messages
           if (messageType === 'character' && msg.length > CHARACTER_LIMIT) {
             warnings.push(
               `Warning: ${messageType}/${lang} message exceeds ${CHARACTER_LIMIT} characters ` +
@@ -118,14 +99,12 @@ function sortMessages() {
             );
           }
 
-          // Duplicate check
           const stripped = stripEmojis(msg);
           const existing = strippedToOriginal.get(stripped) || [];
           existing.push(msg);
           strippedToOriginal.set(stripped, existing);
         });
 
-        // Add duplicate warnings
         strippedToOriginal.forEach((originals) => {
           if (originals.length > 1) {
             warnings.push(
@@ -135,9 +114,7 @@ function sortMessages() {
           }
         });
 
-        // Sort messages and write back
         if (needsConversion) {
-          // Convert array to object format for character messages
           const sortedMessages = [...messages].sort((a, b) => a.localeCompare(b, lang));
           const objectMessages: Record<string, string> = {};
           sortedMessages.forEach((message, index) => {
@@ -153,21 +130,17 @@ function sortMessages() {
           let sortedMessages;
           
           if (messageType === 'character') {
-            // Character messages: sort by value and use numeric keys
             sortedMessages = sortCharacterMessages(messagesData, lang);
           } else {
-            // UI messages: sort by key and preserve semantic keys
             sortedMessages = sortUIMessages(messagesData);
           }
           
-          // Write back to JSON file with pretty printing
           writeFileSync(
             filePath,
             JSON.stringify(sortedMessages, null, 2),
             'utf8'
           );
         } else {
-          // Handle array format (legacy) - shouldn't happen anymore
           const sortedMessages = [...messages].sort((a, b) => a.localeCompare(b, lang));
           
           writeFileSync(
@@ -181,7 +154,6 @@ function sortMessages() {
       });
     });
     
-    // Display warnings if any were collected
     if (warnings.length > 0) {
       console.warn('\nWarnings:');
       warnings.forEach(warning => console.warn(warning));
@@ -192,3 +164,4 @@ function sortMessages() {
 }
 
 sortMessages();
+

tsconfig.json

@@ -27,7 +27,7 @@
         "./src/*"
       ]
     }
-  },
+},
   "include": [
     "next-env.d.ts",
     "**/*.ts",