feat(profile): surface daily free quotas

src/app/coins-rules/coins-rules-screen.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect } from "react";
 import {
   Gift,
   ImageIcon,
@@ -12,10 +13,12 @@ import { FaCoins } from "react-icons/fa6";
 import { BackButton } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { ROUTES } from "@/router/routes";
+import { useAuthState } from "@/stores/auth/auth-context";
+import { useUserDispatch, useUserState } from "@/stores/user/user-context";
 
 import {
-  FREE_PRIVATE_MESSAGE_LABEL,
-  FREE_STANDARD_CHAT_LABEL,
+  FREE_PRIVATE_MESSAGE_DAILY_COUNT,
+  FREE_STANDARD_CHAT_DAILY_COUNT,
 } from "./coins-rules.constants";
 import styles from "./coins-rules-screen.module.css";
 
@@ -26,17 +29,23 @@ interface CoinRuleItem {
   icon: typeof MessageCircle;
 }
 
-const COIN_RULES: readonly CoinRuleItem[] = [
+const formatDailyFreeMessages = (count: number, label: string): string =>
+  `${Math.max(0, Math.trunc(count))} free ${label} daily`;
+
+const createCoinRules = (
+  dailyFreeChatLimit: number,
+  dailyFreePrivateLimit: number,
+): readonly CoinRuleItem[] => [
   {
     title: "Standard Chat",
     cost: "2 coins / message",
-    free: FREE_STANDARD_CHAT_LABEL,
+    free: formatDailyFreeMessages(dailyFreeChatLimit, "messages"),
     icon: MessageCircle,
   },
   {
     title: "Private Chat",
     cost: "10 coins / message",
-    free: FREE_PRIVATE_MESSAGE_LABEL,
+    free: formatDailyFreeMessages(dailyFreePrivateLimit, "private messages"),
     icon: Sparkles,
   },
   {
@@ -67,6 +76,35 @@ const COIN_RULES: readonly CoinRuleItem[] = [
 ] as const;
 
 export function CoinsRulesScreen() {
+  const authState = useAuthState();
+  const userState = useUserState();
+  const userDispatch = useUserDispatch();
+  const dailyFreeChatLimit =
+    userState.currentUser?.dailyFreeChatLimit ?? FREE_STANDARD_CHAT_DAILY_COUNT;
+  const dailyFreePrivateLimit =
+    userState.currentUser?.dailyFreePrivateLimit ??
+    FREE_PRIVATE_MESSAGE_DAILY_COUNT;
+  const standardChatLabel = formatDailyFreeMessages(
+    dailyFreeChatLimit,
+    "messages",
+  );
+  const privateChatLabel = formatDailyFreeMessages(
+    dailyFreePrivateLimit,
+    "private messages",
+  );
+  const coinRules = createCoinRules(dailyFreeChatLimit, dailyFreePrivateLimit);
+
+  useEffect(() => {
+    if (!authState.hasInitialized || authState.isLoading) return;
+    if (authState.loginStatus === "notLoggedIn") return;
+    userDispatch({ type: "UserFetch" });
+  }, [
+    authState.hasInitialized,
+    authState.isLoading,
+    authState.loginStatus,
+    userDispatch,
+  ]);
+
   return (
     <MobileShell background="#fcf3f4">
       <main className={styles.screen}>
@@ -96,14 +134,14 @@ export function CoinsRulesScreen() {
           <div>
             <h2 className={styles.freeTitle}>Free Allowance</h2>
             <p className={styles.freeText}>
-              Standard chat includes {FREE_STANDARD_CHAT_LABEL}. Private chat
-              includes {FREE_PRIVATE_MESSAGE_LABEL}.
+              Standard chat includes {standardChatLabel}. Private chat includes{" "}
+              {privateChatLabel}.
             </p>
           </div>
         </section>
 
         <section className={styles.ruleList} aria-label="Coins usage rules">
-          {COIN_RULES.map((rule, index) => {
+          {coinRules.map((rule, index) => {
             const Icon = rule.icon;
             return (
               <article

src/app/coins-rules/coins-rules.constants.ts

@@ -1,5 +1,2 @@
 export const FREE_STANDARD_CHAT_DAILY_COUNT = 30;
 export const FREE_PRIVATE_MESSAGE_DAILY_COUNT = 2;
-
-export const FREE_STANDARD_CHAT_LABEL = `${FREE_STANDARD_CHAT_DAILY_COUNT} free messages daily`;
-export const FREE_PRIVATE_MESSAGE_LABEL = `${FREE_PRIVATE_MESSAGE_DAILY_COUNT} free private messages daily`;