Updated project changes

src/modules/payments/context/PaymentProvider.jsx

@@ -1,36 +1,20 @@
 /**
- * PaymentProvider — module-local state, fully independent from the app's global
- * mockStore so the Payments module can be added/removed in isolation.
+ * PaymentProvider — module-local state for the customer Payments portal.
  *
- * Transaction history is sourced from two places and merged by id:
- *   1. The server (api/payments/transactions → Vercel KV, written by the
- *      webhook) — the production source of truth.
- *   2. A local record (localStorage) written when a customer returns to the
- *      success page — gives instant feedback and works without KV in the demo.
+ * Invoices and transactions are sourced from the shared paymentStore (localStorage)
+ * so the customer sees payment requests created on the owner side, and payments
+ * made here flow back to the owner's Payment Management page. The server-side
+ * (webhook-written) transaction history is merged in on top when available.
  */
 
 import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
-import { INVOICES } from '../data/invoices';
 import { stripeConfig } from '../config/stripeConfig';
-
-const STORAGE_KEY = 'lynkeduppro.payments.transactions';
-
-const loadLocal = () => {
-    try {
-        const raw = localStorage.getItem(STORAGE_KEY);
-        return raw ? JSON.parse(raw) : [];
-    } catch {
-        return [];
-    }
-};
-
-const persistLocal = (txns) => {
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(txns));
-    } catch {
-        /* localStorage unavailable (private mode) — keep in-memory only. */
-    }
-};
+import {
+    loadInvoices,
+    loadTransactions,
+    saveTransactions,
+    subscribe,
+} from '../data/paymentStore';
 
 const mergeById = (a, b) => {
     const map = new Map();
@@ -45,8 +29,19 @@ const mergeById = (a, b) => {
 const PaymentContext = createContext(null);
 
 export const PaymentProvider = ({ children }) => {
-    const [invoices] = useState(INVOICES);
-    const [transactions, setTransactions] = useState(loadLocal);
+    const [invoices, setInvoices] = useState(loadInvoices);
+    const [transactions, setTransactions] = useState(loadTransactions);
+
+    // Re-read from the shared store whenever the owner adds an invoice, marks
+    // one paid, or a payment is recorded (same-tab and cross-tab).
+    useEffect(
+        () =>
+            subscribe(() => {
+                setInvoices(loadInvoices());
+                setTransactions((prev) => mergeById(prev, loadTransactions()));
+            }),
+        []
+    );
 
     // Pull the server-side (webhook-written) history and merge it in.
     useEffect(() => {
@@ -72,7 +67,7 @@ export const PaymentProvider = ({ children }) => {
         if (!txn?.id) return;
         setTransactions((prev) => {
             const next = mergeById(prev, [txn]);
-            persistLocal(next);
+            saveTransactions(next); // persists to the shared store + notifies the owner side
             return next;
         });
     }, []);