Feature/payment

app.json

@@ -2,7 +2,7 @@
     "expo": {
         "name": "Elysio - Dating",
         "slug": "elysio",
-        "version": "0.0.1",
+        "version": "1.0.0",
         "orientation": "portrait",
         "icon": "./assets/images/ios-light.png",
         "scheme": "elysio",
@@ -14,8 +14,9 @@
                 "NSMicrophoneUsageDescription": "Allow access to microphone for calls",
                 "ITSAppUsesNonExemptEncryption": false
             },
-            "storeKitConfigPath": "./Store.storekit",
-            "entitlements": {},
+            "entitlements": {
+                "com.apple.developer.in-app-payments": []
+            },
             "bundleIdentifier": "com.mindsofd23b.elysio",
             "usesAppleSignIn": true
         },

app/(auth)/login/withEmail.tsx

@@ -8,6 +8,7 @@ import { router } from "expo-router";
 import { usePublicFetch } from "@/hooks/usePublicFetch";
 import { useAuth } from "@/lib/auth/AuthProvider";
 import { createT } from "@/i18n";
+import Purchases from "react-native-purchases";
 
 type FormData = {
     email: string;
@@ -16,6 +17,7 @@ type FormData = {
 
 export type LoginResponse = {
     token: string;
+    userId: string;
 };
 
 type FormErrors = {
@@ -82,6 +84,8 @@ export default function WithEmail() {
             }
 
             await saveLogin(response.token);
+
+            if (await Purchases.isConfigured()) await Purchases.logIn(response.userId);
             router.replace("/(protected)/(tabs)");
         } catch (err) {
             setErrors({

app/(auth)/login/withPhoneNumber.tsx

@@ -10,6 +10,7 @@ import { createT } from "@/i18n";
 import { usePublicFetch } from "@/hooks/usePublicFetch";
 import { useAuth } from "@/lib/auth/AuthProvider";
 import { LoginResponse } from "./withEmail";
+import Purchases from "react-native-purchases";
 type FormErrors = {
     tel?: { message: string };
     password?: { message: string };
@@ -81,6 +82,7 @@ export default function WithPhoneNumber() {
             }
 
             await saveLogin(response.token);
+            if (await Purchases.isConfigured()) await Purchases.logIn(response.userId);
             router.replace("/(protected)/(tabs)");
         } catch (err) {
             setErrors({

app/(auth)/no-internet.tsx

@@ -0,0 +1,48 @@
+import { useTheme } from "@/lib/theme/context";
+import { Theme } from "@/lib/theme/theme";
+import { WifiOff } from "lucide-react-native";
+import { View, Text, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function NoInternetScreen() {
+    const { theme } = useTheme();
+    const s = makeStyle(theme);
+
+    return (
+        <SafeAreaView style={s.root}>
+            <View style={s.card}>
+                <WifiOff size={48} color={theme.primary} />
+                <Text style={s.title}>No Connection</Text>
+                <Text style={s.subtitle}>
+                    Please check your internet connection and try again.
+                </Text>
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const makeStyle = (theme: Theme) =>
+    StyleSheet.create({
+        root: {
+            flex: 1,
+            backgroundColor: theme.background,
+            alignItems: "center",
+            justifyContent: "center",
+            paddingHorizontal: 32,
+        },
+        card: { alignItems: "center", justifyContent: "center", gap: 20 },
+        icon: { fontSize: 48 },
+        title: {
+            color: theme.text,
+            fontSize: 22,
+            fontWeight: "700",
+            textAlign: "center",
+            letterSpacing: -0.3,
+        },
+        subtitle: {
+            color: "#888",
+            fontSize: 15,
+            textAlign: "center",
+            lineHeight: 22,
+        },
+    });

app/(protected)/(tabs)/chat.tsx

@@ -10,14 +10,15 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTheme } from "@/lib/theme/context";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { Chat } from "@/types/chats";
 import ChatComponent from "@/components/ChatComponent";
 import { Theme } from "@/lib/theme/theme";
 import { decryptMessage } from "@/services/chat-crypto.client";
 import { Heart, MessageCircleMore, Search } from "lucide-react-native";
 import { useAuthFetch } from "@/hooks/useAuthFetch";
 import { useAuth } from "@/lib/auth/AuthProvider";
+import { useSafeAreaControl } from "@/components/SafeArea";
 
 // Design made with Pinterest and ChatGPT
 interface ChatResponse {
@@ -120,6 +121,18 @@ export default function Index() {
     const { theme } = useTheme();
     const styles = makeStyles(theme);
 
+    const { setDisabledEdges } = useSafeAreaControl();
+
+    useFocusEffect(
+        useCallback(() => {
+            setDisabledEdges(["top"]);
+
+            return () => {
+                setDisabledEdges([]);
+            };
+        }, [setDisabledEdges]),
+    );
+
     const [refreshing, setRefreshing] = useState(false);
     const [chats, setChats] = useState<Chat[]>([]);
     const [searchText, setSearchText] = useState("");
@@ -334,6 +347,7 @@ const makeStyles = (theme: Theme) =>
         screen: {
             flex: 1,
             backgroundColor: theme.rootBg,
+            paddingTop: 48,
         },
         searchWrapper: {
             borderBottomColor: theme.base + "14",

app/(protected)/(tabs)/favorites.tsx

@@ -1,12 +1,12 @@
 // Made with the help of Claude.ai and ChatGPT
 
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { CategoryGridCard } from "@/components/favorites/CategoryCard";
 import { DateIdeaCard } from "@/components/favorites/DateIdeaCard";
 import { TipRow } from "@/components/favorites/TipRow";
 import { Theme } from "@/lib/theme/theme";
 import { useTheme } from "@/lib/theme/context";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Plane, Dumbbell, Armchair } from "lucide-react-native";
 import { TIPS } from "@/lib/favorites/tips";
 import {
@@ -19,6 +19,7 @@ import {
     View,
     useWindowDimensions,
 } from "react-native";
+import { useSafeAreaControl } from "@/components/SafeArea";
 
 const DATE_IDEAS = [
     {
@@ -64,6 +65,18 @@ export default function Favorites() {
     const { width } = useWindowDimensions();
     const cardWidth = width - 28;
 
+    const { setDisabledEdges } = useSafeAreaControl();
+
+    useFocusEffect(
+        useCallback(() => {
+            setDisabledEdges(["top"]);
+
+            return () => {
+                setDisabledEdges([]);
+            };
+        }, [setDisabledEdges]),
+    );
+
     const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         const index = Math.round(e.nativeEvent.contentOffset.x / cardWidth);
         setActiveIndex(index);
@@ -154,11 +167,11 @@ export default function Favorites() {
 
 const makeStyles = (theme: Theme) =>
     StyleSheet.create({
-        root: { flex: 1, backgroundColor: theme.rootBg },
+        root: { flex: 1, backgroundColor: theme.rootBg, paddingTop: 48 },
         content: { paddingTop: 40, paddingBottom: 30, gap: 6 },
         cardScroll: { paddingHorizontal: 14, gap: 0 },
         dots: { flexDirection: "row", justifyContent: "center", gap: 6, marginTop: 10 },
-        dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: "#333" },
+        dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: theme.text + "44" },
         dotActive: { backgroundColor: theme.primary, width: 18 },
         section: { paddingHorizontal: 14, gap: 12, marginTop: 10 },
         sectionHeader: {