ayrisdev/menulio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): integrate react-native-purchases (RevenueCat)

Browse Source 
- Purchases.configure() runs with appUserID = restaurantId at every
  point the id becomes known (login resolve, cold-start rehydration,
  onboarding restaurant creation) — this must match what the backend
  webhook expects (see apps/api/src/routes/subscription.ts).
- New account/subscription.tsx paywall: current entitlement status,
  offering packages with real store prices, purchase, restore.
- Linked from the account screen.

Native module — requires an EAS/dev-client build, not plain Expo Go.
This commit is contained in:
AyrisAI
2026-08-20 13:20:54 +03:00
parent 3509388c37
commit b25c742eea
7 changed files with 249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mobile/package.json
+1
View File
@@ -30,6 +30,7 @@
"expo-status-bar": "~2.0.0",
"react": "18.3.1",
"react-native": "0.76.9",
"react-native-purchases": "^8.2.0",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-url-polyfill": "^2.0.0"
apps/mobile/src/app/(onboarding)/restaurant.tsx
+2
View File
@@ -4,6 +4,7 @@ import { ActivityIndicator, Pressable, ScrollView, Text, TextInput, View } from
import { Ionicons } from "@expo/vector-icons";
import { api } from "@/lib/api";
import { setActiveRestaurant } from "@/lib/active-restaurant";
import { configurePurchases } from "@/lib/purchases";
interface CreateRestaurantResponse {
restaurant: { id: string; slug: string };
@@ -34,6 +35,7 @@ export default function OnboardingRestaurantStep() {
menuId: menu.id,
slug: restaurant.slug,
});
configurePurchases(restaurant.id);
router.replace("/(onboarding)/scan");
} catch (err) {
apps/mobile/src/app/account/index.tsx
+19
View File
@@ -434,6 +434,25 @@ export default function AccountScreen() {
</View>
</View>
{/* Subscription */}
<Pressable
onPress={() => router.push("/account/subscription")}
style={{
backgroundColor: "#FFFFFF",
borderRadius: 20,
padding: 20,
borderWidth: 1,
borderColor: "#E7E5E4",
flexDirection: "row",
alignItems: "center",
gap: 12,
}}
>
<Ionicons name="star-outline" size={20} color="#C8A96B" />
<Text style={{ flex: 1, fontSize: 16, fontWeight: "800", color: "#1C1917" }}>Abonelik</Text>
<Ionicons name="chevron-forward" size={20} color="#C8A96B" />
</Pressable>
{/* Live Menu URL & Quick Actions */}
<View
style={{
apps/mobile/src/app/account/subscription.tsx
+167
View File
@@ -0,0 +1,167 @@
import { useCallback, useEffect, useState } from "react";
import { router } from "expo-router";
import { ActivityIndicator, Alert, Pressable, ScrollView, Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import type { CustomerInfo, PurchasesOffering, PurchasesPackage } from "react-native-purchases";
import Purchases from "react-native-purchases";
import { getActiveRestaurant } from "@/lib/active-restaurant";
import { configurePurchases, getCurrentOffering, getCustomerInfo, isProActive, PRO_ENTITLEMENT_ID } from "@/lib/purchases";
export default function SubscriptionScreen() {
const [loading, setLoading] = useState(true);
const [offering, setOffering] = useState<PurchasesOffering | null>(null);
const [customerInfo, setCustomerInfo] = useState<CustomerInfo | null>(null);
const [purchasingPackageId, setPurchasingPackageId] = useState<string | null>(null);
const [restoring, setRestoring] = useState(false);
const load = useCallback(async () => {
const active = await getActiveRestaurant();
if (!active) {
router.back();
return;
}
configurePurchases(active.restaurantId);
try {
const [offer, info] = await Promise.all([getCurrentOffering(), getCustomerInfo()]);
setOffering(offer);
setCustomerInfo(info);
} catch (err) {
Alert.alert("Hata", err instanceof Error ? err.message : "Abonelik bilgisi yüklenemedi.");
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
load();
}, [load]);
async function onPurchase(pkg: PurchasesPackage) {
setPurchasingPackageId(pkg.identifier);
try {
const { customerInfo: updated } = await Purchases.purchasePackage(pkg);
setCustomerInfo(updated);
if (isProActive(updated)) {
Alert.alert("Teşekkürler!", "Menulio Pro aktif edildi.");
}
} catch (err) {
const rcError = err as { userCancelled?: boolean; message?: string };
if (!rcError.userCancelled) {
Alert.alert("Satın alma başarısız", rcError.message ?? "Bir hata oluştu.");
}
} finally {
setPurchasingPackageId(null);
}
}
async function onRestore() {
setRestoring(true);
try {
const info = await Purchases.restorePurchases();
setCustomerInfo(info);
Alert.alert(
isProActive(info) ? "Abonelik bulundu" : "Aktif abonelik yok",
isProActive(info) ? "Menulio Pro aboneliğiniz geri yüklendi." : "Bu hesaba bağlı aktif bir abonelik bulunamadı.",
);
} catch (err) {
Alert.alert("Hata", err instanceof Error ? err.message : "Abonelik geri yüklenemedi.");
} finally {
setRestoring(false);
}
}
const isPro = customerInfo ? isProActive(customerInfo) : false;
const expiresAt = customerInfo?.entitlements.active[PRO_ENTITLEMENT_ID]?.expirationDate;
if (loading) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor: "#FAF8F5" }}>
<ActivityIndicator size="large" color="#C8A96B" />
</View>
);
}
return (
<ScrollView style={{ flex: 1, backgroundColor: "#FAF8F5" }} contentContainerStyle={{ padding: 20, gap: 16 }}>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
<Pressable onPress={() => router.back()} style={{ padding: 4 }}>
<Ionicons name="arrow-back" size={22} color="#1C1917" />
</Pressable>
<Text style={{ fontSize: 22, fontWeight: "800", color: "#1C1917" }}>Abonelik</Text>
</View>
<View
style={{
backgroundColor: isPro ? "#F0FDF4" : "#FFFFFF",
borderRadius: 16,
padding: 16,
borderWidth: 1,
borderColor: isPro ? "#BBF7D0" : "#E7E5E4",
flexDirection: "row",
alignItems: "center",
gap: 10,
}}
>
<Ionicons name={isPro ? "checkmark-circle" : "information-circle-outline"} size={22} color={isPro ? "#059669" : "#78716C"} />
<View style={{ flex: 1 }}>
<Text style={{ fontWeight: "700", color: "#1C1917" }}>{isPro ? "Menulio Pro aktif" : "Ücretsiz plan"}</Text>
{isPro && expiresAt ? (
<Text style={{ fontSize: 12, color: "#78716C", marginTop: 2 }}>
Yenileme: {new Date(expiresAt).toLocaleDateString("tr-TR")}
</Text>
) : null}
</View>
</View>
{!offering || offering.availablePackages.length === 0 ? (
<Text style={{ color: "#78716C", textAlign: "center", marginTop: 24 }}>
Şu anda satın alınabilir bir paket bulunamadı.
</Text>
) : (
<View style={{ gap: 12 }}>
{offering.availablePackages.map((pkg) => (
<Pressable
key={pkg.identifier}
onPress={() => onPurchase(pkg)}
disabled={purchasingPackageId !== null}
style={{
backgroundColor: "#FFFFFF",
borderRadius: 16,
padding: 16,
borderWidth: 1.5,
borderColor: "#C8A96B",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
opacity: purchasingPackageId && purchasingPackageId !== pkg.identifier ? 0.5 : 1,
}}
>
<View>
<Text style={{ fontSize: 16, fontWeight: "800", color: "#1C1917" }}>
{pkg.packageType === "ANNUAL" ? "Yıllık" : "Aylık"}
</Text>
<Text style={{ fontSize: 13, color: "#78716C", marginTop: 2 }}>
{pkg.product.priceString} / {pkg.packageType === "ANNUAL" ? "yıl" : "ay"}
</Text>
</View>
{purchasingPackageId === pkg.identifier ? (
<ActivityIndicator color="#C8A96B" />
) : (
<Ionicons name="chevron-forward" size={20} color="#C8A96B" />
)}
</Pressable>
))}
</View>
)}
<Pressable onPress={onRestore} disabled={restoring} style={{ padding: 12, alignItems: "center" }}>
{restoring ? (
<ActivityIndicator color="#78716C" />
) : (
<Text style={{ color: "#78716C", fontSize: 14, fontWeight: "600" }}>Satın Alımları Geri Yükle</Text>
)}
</Pressable>
</ScrollView>
);
}
apps/mobile/src/app/index.tsx
+3
View File
@@ -3,6 +3,7 @@ import { router } from "expo-router";
import { ActivityIndicator, View } from "react-native";
import { api, ApiError } from "@/lib/api";
import { clearActiveRestaurant, getActiveRestaurant, setActiveRestaurant } from "@/lib/active-restaurant";
import { configurePurchases } from "@/lib/purchases";
import { supabase } from "@/lib/supabase";
interface MeRestaurantResponse {
@@ -31,6 +32,7 @@ export default function Index() {
const cached = await getActiveRestaurant();
if (cached) {
configurePurchases(cached.restaurantId);
if (!cancelled) {
router.replace("/menu");
}
@@ -48,6 +50,7 @@ export default function Index() {
menuId: menu.id,
slug: restaurant.slug,
});
configurePurchases(restaurant.id);
if (!cancelled) {
router.replace("/menu");
}
apps/mobile/src/lib/purchases.ts
+37
View File
@@ -0,0 +1,37 @@
import { Platform } from "react-native";
import Purchases, { type CustomerInfo, type PurchasesOffering } from "react-native-purchases";
const API_KEY = process.env.EXPO_PUBLIC_REVENUECAT_API_KEY;
export const PRO_ENTITLEMENT_ID = "Menul.io Pro";
let configuredForRestaurantId: string | null = null;
// appUserID is the restaurant id — the backend webhook (POST
// /subscription/webhook) maps RevenueCat's app_user_id straight to
// subscriptions.restaurant_id, so these must always match.
export function configurePurchases(restaurantId: string) {
if (!API_KEY) {
console.warn("EXPO_PUBLIC_REVENUECAT_API_KEY missing — purchases disabled");
return;
}
if (configuredForRestaurantId === restaurantId) return;
Purchases.configure({ apiKey: API_KEY, appUserID: restaurantId });
if (Platform.OS !== "web") {
Purchases.setLogLevel(__DEV__ ? Purchases.LOG_LEVEL.DEBUG : Purchases.LOG_LEVEL.WARN);
}
configuredForRestaurantId = restaurantId;
}
export async function getCurrentOffering(): Promise<PurchasesOffering | null> {
const offerings = await Purchases.getOfferings();
return offerings.current;
}
export async function getCustomerInfo(): Promise<CustomerInfo> {
return Purchases.getCustomerInfo();
}
export function isProActive(info: CustomerInfo): boolean {
return info.entitlements.active[PRO_ENTITLEMENT_ID] !== undefined;
}
pnpm-lock.yaml
Generated
+20
View File
@@ -104,6 +104,9 @@ importers:
react-native:
specifier: 0.76.9
version: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
react-native-purchases:
specifier: ^8.2.0
version: 8.12.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1)
react-native-safe-area-context:
specifier: 4.12.0
version: 4.12.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1)
@@ -1768,6 +1771,9 @@ packages:
'@react-navigation/routers@7.6.4':
resolution: {integrity: sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w==}
'@revenuecat/purchases-typescript-internal@14.3.0':
resolution: {integrity: sha512-P3IhlWvH4wJAM9ypv8HamdIBMQfnLdU9PbjURw+s7NxHOL8LmPGhKuyv+gBINpka27mt1CAsDoOhNHjkexJhkg==}
'@rollup/rollup-android-arm-eabi@4.62.4':
resolution: {integrity: sha512-RrPokAb7dmbxFoeO3TloqHyOjgye8RkBhSqmp4aJMIex4c9r46ZstPnleDQOq1t46VOVjwIuwNogIqbodV1Vvg==}
cpu: [arm]
@@ -4123,6 +4129,12 @@ packages:
react: '*'
react-native: '*'
react-native-purchases@8.12.0:
resolution: {integrity: sha512-0T6WtSDN96swsS6iLeTh7GEGLSedBr4FWP5JsGLnP6Ri7Rp754pf3UJ+S0+ZnT1cqUZ4W2z2oB6zTLyyfNfuKw==}
peerDependencies:
react: '>= 16.6.3'
react-native: '*'
react-native-safe-area-context@4.12.0:
resolution: {integrity: sha512-ukk5PxcF4p3yu6qMZcmeiZgowhb5AsKRnil54YFUUAXVIS7PJcMHGGC+q44fCiBg44/1AJk5njGMez1m9H0BVQ==}
peerDependencies:
@@ -6817,6 +6829,8 @@ snapshots:
dependencies:
nanoid: 3.3.18
'@revenuecat/purchases-typescript-internal@14.3.0': {}
'@rollup/rollup-android-arm-eabi@4.62.4':
optional: true
@@ -9316,6 +9330,12 @@ snapshots:
react: 18.3.1
react-native: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
react-native-purchases@8.12.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1):
dependencies:
'@revenuecat/purchases-typescript-internal': 14.3.0
react: 18.3.1
react-native: 0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1)
react-native-safe-area-context@4.12.0(react-native@0.76.9(@babel/core@7.29.7(supports-color@8.1.1))(@babel/preset-env@7.29.7(@babel/core@7.29.7(supports-color@8.1.1))(supports-color@8.1.1))(@types/react@18.3.31)(react@18.3.1)(supports-color@8.1.1))(react@18.3.1):
dependencies:
react: 18.3.1