@tribe-nest/forge 1.13.0

package/src/contexts/AppAuthContext.tsx

@@ -0,0 +1,185 @@
+"use client";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useForge } from "../provider/ForgeProvider";
+import { createForgeClient } from "../client/createForgeClient";
+
+// App-user auth for a mini-app frontend (account_associations type='app'). This
+// is the app's OWN user base — distinct from TribeNest fans (usePublicAuth) and
+// from the app's admins (useAppAdminGuard). It keeps an ISOLATED token + Axios
+// client (its own localStorage key) so an app-user session never collides with a
+// profile session on the same site. Backed by /public/app-sessions/*.
+
+export const APP_ACCESS_TOKEN_KEY = "app-access-token";
+
+export interface AppAuthUser {
+  id: string;
+  associationId: string;
+  email: string;
+  firstName: string | null;
+  lastName: string | null;
+  emailVerified: boolean;
+  status: string;
+  appId: string | null;
+}
+
+export interface AppSignupInput {
+  email: string;
+  password: string;
+  firstName: string;
+  lastName?: string;
+}
+
+export type AppSignupResult =
+  | { status: "pending"; user: AppAuthUser }
+  | { status: "active"; user: AppAuthUser };
+
+interface AppAuthContextType {
+  appId?: string;
+  user: AppAuthUser | null;
+  isAuthenticated: boolean;
+  isInitialized: boolean;
+  isLoading: boolean;
+  errorMessage: string | null;
+  /** Sign up. When the app requires owner approval, returns status "pending" and
+   *  does NOT log the user in (no token) — show a "pending approval" screen. */
+  signup: (input: AppSignupInput) => Promise<AppSignupResult>;
+  login: (input: { email: string; password: string }) => Promise<void>;
+  logout: () => Promise<void>;
+  refetch: () => Promise<void>;
+  clearError: () => void;
+}
+
+const AppAuthContext = createContext<AppAuthContextType | null>(null);
+
+export function AppAuthProvider({ children }: { children: ReactNode }) {
+  const { apiUrl, appId, publishableKey } = useForge();
+
+  // Isolated token + client so app-user auth doesn't touch the shared Forge
+  // client (which carries the profile/member token).
+  const tokenRef = useRef<string | null>(null);
+  const client = useMemo(
+    () => createForgeClient({ baseURL: apiUrl, publishableKey, getToken: () => tokenRef.current }),
+    [apiUrl, publishableKey],
+  );
+
+  const [user, setUser] = useState<AppAuthUser | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const setToken = useCallback((next: string | null) => {
+    tokenRef.current = next;
+    if (typeof localStorage === "undefined") return;
+    if (next) localStorage.setItem(APP_ACCESS_TOKEN_KEY, next);
+    else localStorage.removeItem(APP_ACCESS_TOKEN_KEY);
+  }, []);
+
+  const refetch = useCallback(async () => {
+    if (!tokenRef.current) {
+      setUser(null);
+      setIsInitialized(true);
+      return;
+    }
+    try {
+      const res = await client.get("/public/app-sessions/me");
+      setUser(res.data);
+    } catch {
+      setToken(null);
+      setUser(null);
+    } finally {
+      setIsInitialized(true);
+    }
+  }, [client, setToken]);
+
+  // Restore a stored token on mount and hydrate the user.
+  useEffect(() => {
+    const stored = typeof localStorage !== "undefined" ? localStorage.getItem(APP_ACCESS_TOKEN_KEY) : null;
+    tokenRef.current = stored;
+    refetch();
+  }, [refetch]);
+
+  const signup = useCallback<AppAuthContextType["signup"]>(
+    async (input) => {
+      if (!appId) throw new Error("AppAuthProvider: no appId in Forge context.");
+      setIsLoading(true);
+      setErrorMessage(null);
+      try {
+        const res = await client.post("/public/app-sessions/signup", { appId, ...input });
+        const { status, account, token } = res.data as { status: "pending" | "active"; account: AppAuthUser; token?: string };
+        if (status === "active" && token) {
+          setToken(token);
+          setUser(account);
+          return { status: "active", user: account };
+        }
+        // Pending approval — no token issued.
+        return { status: "pending", user: account };
+      } catch (err) {
+        setErrorMessage(extractError(err));
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [appId, client, setToken],
+  );
+
+  const login = useCallback<AppAuthContextType["login"]>(
+    async (input) => {
+      if (!appId) throw new Error("AppAuthProvider: no appId in Forge context.");
+      setIsLoading(true);
+      setErrorMessage(null);
+      try {
+        const res = await client.post("/public/app-sessions", { appId, ...input });
+        setToken(res.data.token);
+        setUser(res.data.account);
+      } catch (err) {
+        setErrorMessage(extractError(err));
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [appId, client, setToken],
+  );
+
+  const logout = useCallback<AppAuthContextType["logout"]>(async () => {
+    try {
+      await client.delete("/public/app-sessions");
+    } catch {
+      // best-effort — clear locally regardless
+    }
+    setToken(null);
+    setUser(null);
+  }, [client, setToken]);
+
+  const value = useMemo<AppAuthContextType>(
+    () => ({
+      appId,
+      user,
+      isAuthenticated: !!user,
+      isInitialized,
+      isLoading,
+      errorMessage,
+      signup,
+      login,
+      logout,
+      refetch,
+      clearError: () => setErrorMessage(null),
+    }),
+    [appId, user, isInitialized, isLoading, errorMessage, signup, login, logout, refetch],
+  );
+
+  return <AppAuthContext.Provider value={value}>{children}</AppAuthContext.Provider>;
+}
+
+/** Access the app-user auth state. Throws outside <ForgeProvider>. */
+export const useAppAuth = (): AppAuthContextType => {
+  const ctx = useContext(AppAuthContext);
+  if (!ctx) throw new Error("useAppAuth must be used within a <ForgeProvider> (AppAuthProvider).");
+  return ctx;
+};
+
+function extractError(err: unknown): string {
+  const e = err as { response?: { data?: { message?: string } }; message?: string };
+  return e?.response?.data?.message ?? e?.message ?? "Something went wrong.";
+}

package/src/contexts/AudioPlayerContext.tsx

@@ -0,0 +1,389 @@
+"use client";
+import { createContext, useContext, useState, useRef, useEffect, useCallback } from "react";
+import type { ReactNode } from "react";
+
+export interface AudioTrack {
+  id: string;
+  title: string;
+  artist?: string;
+  coverImage?: string;
+  url: string;
+  duration?: number;
+  productId?: string;
+}
+
+interface AudioPlayerContextType {
+  currentTrack: AudioTrack | null;
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  isLoading: boolean;
+  error: string | null;
+  volume: number;
+  isMuted: boolean;
+  play: () => void;
+  pause: VoidFunction;
+  /** Stop playback, clear the current track + queue, and dismiss the player. */
+  stop: VoidFunction;
+  seek: (time: number) => void;
+  loadAndPlay: (track: AudioTrack, queue?: AudioTrack[]) => void;
+  setVolume: (volume: number) => void;
+  toggleMute: () => void;
+  playNext: () => void;
+  playPrevious: () => void;
+  queue: AudioTrack[];
+}
+
+const AudioPlayerContext = createContext<AudioPlayerContextType | undefined>(undefined);
+
+export function AudioPlayerProvider({ children }: { children: ReactNode }) {
+  const [currentTrack, setCurrentTrack] = useState<AudioTrack | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [volume, setVolumeState] = useState(1);
+  const [isMuted, setIsMutedState] = useState(false);
+  const [previousVolume, setPreviousVolume] = useState(1);
+  const [queue, setQueue] = useState<AudioTrack[]>([]);
+  const [currentQueueIndex, setCurrentQueueIndex] = useState(-1);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const play = () => {
+    if (!audioRef.current || !currentTrack) return;
+
+    const audio = audioRef.current;
+
+    if (!isPlaying) {
+      audio
+        .play()
+        .catch(() => {
+          setError("Failed to play audio");
+          setIsPlaying(false);
+        })
+        .then(() => {
+          setIsPlaying(true);
+        });
+    }
+  };
+
+  const pause = useCallback(() => {
+    if (!audioRef.current || !currentTrack) return;
+
+    const audio = audioRef.current;
+    if (isPlaying) {
+      audio.pause();
+      setIsPlaying(false);
+    }
+  }, [currentTrack, isPlaying]);
+
+  const playPrevious = useCallback(() => {
+    if (queue.length === 0) return;
+
+    const prevIndex = currentQueueIndex > 0 ? currentQueueIndex - 1 : queue.length - 1;
+    const prevTrack = queue[prevIndex];
+
+    if (prevTrack) {
+      loadAndPlay(prevTrack, queue);
+    }
+  }, [queue, currentQueueIndex]);
+
+  // Setup media session with direct state access
+  const setupMediaSession = useCallback((track: AudioTrack, queue: AudioTrack[]) => {
+    if (!navigator.mediaSession) return;
+
+    const currentIndex = queue.findIndex((t) => t.id === track.id);
+    setCurrentQueueIndex(currentIndex);
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: track.title,
+      artist: track.artist || "Unknown Artist",
+      album: "Music",
+      artwork: track.coverImage
+        ? [
+            { src: track.coverImage, sizes: "512x512", type: "image/jpeg" },
+            { src: track.coverImage, sizes: "256x256", type: "image/jpeg" },
+            { src: track.coverImage, sizes: "128x128", type: "image/jpeg" },
+          ]
+        : undefined,
+    });
+
+    // Set action handlers with direct state access
+    navigator.mediaSession.setActionHandler("play", () => {
+      console.log("play initiated");
+      // Get current state directly from audio element
+      if (audioRef.current && audioRef.current.paused) {
+        audioRef.current
+          .play()
+          .catch(() => {
+            setError("Failed to play audio");
+            setIsPlaying(false);
+          })
+          .then(() => {
+            setIsPlaying(true);
+          });
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("pause", () => {
+      console.log("pause initiated");
+      // Get current state directly from audio element
+      if (audioRef.current && !audioRef.current.paused) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("previoustrack", () => {
+      console.log("previous initiated");
+      if (queue.length === 0) return;
+      const prevIndex = currentIndex > 0 ? currentIndex - 1 : queue.length - 1;
+      const prevTrack = queue[prevIndex];
+      if (prevTrack) {
+        loadAndPlay(prevTrack, queue);
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("nexttrack", () => {
+      console.log("next initiated");
+      if (queue.length === 0) return;
+      const nextIndex = currentIndex < queue.length - 1 ? currentIndex + 1 : 0;
+      const nextTrack = queue[nextIndex];
+      if (nextTrack) {
+        loadAndPlay(nextTrack, queue);
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("seekto", (details) => {
+      console.log("seekto initiated");
+      if (details.seekTime !== undefined && audioRef.current) {
+        audioRef.current.currentTime = details.seekTime;
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("seekforward", (details) => {
+      console.log("seekforward initiated");
+      if (audioRef.current) {
+        const seekTime = Math.min(audioRef.current.currentTime + (details.seekOffset || 10), audioRef.current.duration);
+        audioRef.current.currentTime = seekTime;
+      }
+    });
+
+    navigator.mediaSession.setActionHandler("seekbackward", (details) => {
+      console.log("seekbackward initiated");
+      if (audioRef.current) {
+        const seekTime = Math.max(audioRef.current.currentTime - (details.seekOffset || 10), 0);
+        audioRef.current.currentTime = seekTime;
+      }
+    });
+
+    // Update playback state
+    navigator.mediaSession.playbackState = "playing";
+  }, []);
+
+  const loadAndPlay = useCallback(
+    async (track: AudioTrack, newQueue?: AudioTrack[]) => {
+      if (!audioRef.current) return;
+
+      setCurrentTrack(track);
+      setIsLoading(true);
+
+      const audio = audioRef.current;
+      audio.src = track.url;
+
+      // Update queue if provided
+      if (newQueue) {
+        setQueue(newQueue);
+      } else {
+        setQueue([]);
+      }
+
+      try {
+        await audio.play();
+        setIsPlaying(true);
+        setIsLoading(false);
+
+        // Setup media session after successful play
+        setupMediaSession(track, newQueue || queue);
+      } catch {
+        setError("Failed to play audio");
+        setIsPlaying(false);
+        setIsLoading(false);
+      }
+    },
+    [setupMediaSession, queue],
+  );
+
+  const playNext = useCallback(() => {
+    if (queue.length === 0) return;
+
+    const nextIndex = currentQueueIndex < queue.length - 1 ? currentQueueIndex + 1 : 0;
+    const nextTrack = queue[nextIndex];
+
+    if (nextTrack) {
+      loadAndPlay(nextTrack, queue);
+    }
+  }, [queue, currentQueueIndex, loadAndPlay]);
+
+  const handleEnded = useCallback(() => {
+    setIsPlaying(false);
+    setCurrentTime(0);
+
+    // Auto-play next track if available
+    if (queue.length > 0) {
+      playNext();
+    }
+  }, [queue, playNext]);
+
+  // Initialize audio element
+  useEffect(() => {
+    if (!audioRef.current) {
+      audioRef.current = new Audio();
+      audioRef.current.preload = "metadata";
+      audioRef.current.volume = volume;
+    }
+
+    const audio = audioRef.current;
+    audio.crossOrigin = "anonymous";
+
+    const handleLoadedMetadata = () => {
+      setDuration(audio.duration);
+      setIsLoading(false);
+      setError(null);
+    };
+
+    const handleTimeUpdate = () => {
+      setCurrentTime(audio.currentTime);
+
+      // Update media session position state
+      if (navigator.mediaSession && currentTrack && audio.duration && audio.currentTime) {
+        navigator.mediaSession.setPositionState({
+          duration: audio.duration,
+          position: audio.currentTime,
+          playbackRate: audio.playbackRate,
+        });
+      }
+    };
+
+    const handleError = () => {
+      setError("Failed to load audio");
+      setIsLoading(false);
+    };
+
+    const handleCanPlay = () => {
+      setIsLoading(false);
+    };
+
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("error", handleError);
+    audio.addEventListener("canplay", handleCanPlay);
+
+    return () => {
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("error", handleError);
+      audio.removeEventListener("canplay", handleCanPlay);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleEnded, currentTrack]);
+
+  // Update audio volume when volume state changes
+  useEffect(() => {
+    if (audioRef.current) {
+      audioRef.current.volume = isMuted ? 0 : volume;
+    }
+  }, [volume, isMuted]);
+
+  // Update media session playback state when playing state changes
+  useEffect(() => {
+    if (navigator.mediaSession) {
+      navigator.mediaSession.playbackState = isPlaying ? "playing" : "paused";
+    }
+  }, [isPlaying]);
+
+  const setVolume = (newVolume: number) => {
+    setVolumeState(newVolume);
+    setIsMutedState(newVolume === 0);
+  };
+
+  const toggleMute = () => {
+    if (isMuted) {
+      // Unmute
+      setIsMutedState(false);
+      setVolumeState(previousVolume);
+    } else {
+      // Mute
+      setPreviousVolume(volume);
+      setIsMutedState(true);
+      setVolumeState(0);
+    }
+  };
+
+  const seek = (time: number) => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = time;
+    }
+  };
+
+  const stop = useCallback(() => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.removeAttribute("src");
+      audioRef.current.load();
+    }
+    setIsPlaying(false);
+    setCurrentTrack(null);
+    setQueue([]);
+    setCurrentQueueIndex(-1);
+    setCurrentTime(0);
+    setDuration(0);
+    setError(null);
+    if (navigator.mediaSession) {
+      navigator.mediaSession.metadata = null;
+      navigator.mediaSession.playbackState = "none";
+    }
+  }, []);
+
+  // const destroy = () => {
+  //   if (audioRef.current) {
+  //     audioRef.current.pause();
+  //     audioRef.current.src = "";
+  //     audioRef.current = null;
+  //   }
+  // };
+
+  const value: AudioPlayerContextType = {
+    currentTrack,
+    isPlaying,
+    currentTime,
+    duration,
+    isLoading,
+    error,
+    volume,
+    isMuted,
+    play,
+    pause,
+    stop,
+    seek,
+    loadAndPlay,
+    setVolume,
+    toggleMute,
+    playNext,
+    playPrevious,
+    queue,
+  };
+
+  return <AudioPlayerContext.Provider value={value}>{children}</AudioPlayerContext.Provider>;
+}
+
+export function useAudioPlayer() {
+  const context = useContext(AudioPlayerContext);
+  if (context === undefined) {
+    throw new Error("useAudioPlayer must be used within an AudioPlayerProvider");
+  }
+  return context;
+}

package/src/contexts/CartContext.tsx

@@ -0,0 +1,131 @@
+"use client";
+import type { ProductDeliveryType } from "../types/models";
+import { createContext, useCallback, useContext, useState } from "react";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+
+export type CartItem = {
+  productId: string;
+  productVariantId: string;
+  title: string;
+  price: number;
+  coverImage?: string;
+  isGift: boolean;
+  recipientName?: string;
+  recipientEmail?: string;
+  canIncreaseQuantity: boolean;
+  quantity: number;
+  recipientMessage?: string;
+  payWhatYouWant: boolean;
+  color?: string;
+  size?: string;
+  deliveryType?: ProductDeliveryType;
+};
+
+interface CartContextType {
+  cartItems: CartItem[];
+  addToCart: (item: CartItem) => boolean;
+  removeFromCart: (productId: string, isGift: boolean, recipientEmail?: string) => void;
+  clearCart: () => void;
+  isCartOpen: boolean;
+  setCartOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /** False until the cart has been read from storage after mount. Gate any
+   * "empty cart" UI on this so it doesn't flash before the saved cart loads. */
+  isReady: boolean;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+const CART_STORAGE_KEY = "tribenest-cart";
+
+export function CartProvider({ children }: { children: ReactNode }) {
+  const [cartItems, setCartItems] = useState<CartItem[]>([]);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [isCartOpen, setCartOpen] = useState(false);
+
+  // Load cart from localStorage on initial mount
+  useEffect(() => {
+    if (!isInitialized) {
+      try {
+        const savedCart = localStorage.getItem(CART_STORAGE_KEY);
+        if (savedCart) {
+          setCartItems(JSON.parse(savedCart));
+        }
+      } catch (error) {
+        console.error("Failed to load cart from localStorage:", error);
+      }
+      setIsInitialized(true);
+    }
+  }, [isInitialized]);
+
+  // Save cart to localStorage whenever it changes
+  useEffect(() => {
+    if (isInitialized) {
+      try {
+        localStorage.setItem(CART_STORAGE_KEY, JSON.stringify(cartItems));
+      } catch (error) {
+        console.error("Failed to save cart to localStorage:", error);
+      }
+    }
+  }, [cartItems, isInitialized]);
+
+  const addToCart = useCallback(
+    (item: CartItem): boolean => {
+      const exists = cartItems.some(
+        (i) =>
+          i.productId === item.productId &&
+          i.productVariantId === item.productVariantId &&
+          i.isGift === item.isGift &&
+          i.recipientEmail === item.recipientEmail,
+      );
+
+      if (exists) {
+        setCartItems((prev) =>
+          prev.map((i) => {
+            if (
+              i.productId === item.productId &&
+              i.productVariantId === item.productVariantId &&
+              i.isGift === item.isGift &&
+              i.recipientEmail === item.recipientEmail
+            ) {
+              return item;
+            } else {
+              return i;
+            }
+          }),
+        );
+        // Headless: signal the duplicate via the return value; the consumer
+        // decides whether to toast. (Was `toast.info("Item already in cart")`.)
+        return false;
+      }
+      setCartItems((prev) => [...prev, item]);
+      setCartOpen(true);
+      return true;
+    },
+    [cartItems],
+  );
+
+  const removeFromCart = (productVariantId: string, isGift: boolean, recipientEmail?: string) => {
+    setCartItems((prev) =>
+      prev.filter(
+        (i) => !(i.productVariantId === productVariantId && i.isGift === isGift && i.recipientEmail === recipientEmail),
+      ),
+    );
+  };
+
+  const clearCart = () => setCartItems([]);
+
+  return (
+    <CartContext.Provider
+      value={{ cartItems, addToCart, removeFromCart, clearCart, isCartOpen, setCartOpen, isReady: isInitialized }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+}
+
+export function useCart() {
+  const ctx = useContext(CartContext);
+  if (!ctx) throw new Error("useCart must be used within a CartProvider");
+  return ctx;
+}