SP 112 Prod release - Lockup

.env.example

@@ -54,3 +54,9 @@ export PROMO_LIST={}
 export NEXT_PUBLIC_VAPID_PUBLIC_KEY=
 export VAPID_PRIVATE_KEY=
 export NEXT_PUBLIC_VAPID_SUBJECT="mailto:hello@peanut.to"
+export NEXT_PUBLIC_FETCH_TIMEOUT_MS=10000
+
+# one signal 
+export NEXT_PUBLIC_ONESIGNAL_APP_ID=
+export NEXT_PUBLIC_SAFARI_WEB_ID=
+export NEXT_PUBLIC_ONESIGNAL_WEBHOOK=

package.json

@@ -70,6 +70,7 @@
         "react-fast-marquee": "^1.6.5",
         "react-ga4": "^2.1.0",
         "react-hook-form": "^7.53.2",
+        "react-onesignal": "^3.2.3",
         "react-qr-code": "^2.0.15",
         "react-redux": "^9.2.0",
         "react-tooltip": "^5.28.0",

public/onesignal/OneSignalSDKWorker.js

@@ -0,0 +1,3 @@
+// use the stable v16 service worker path per onesignal docs
+// note: onesignal does not publish minor-pinned sw paths; use v16 channel
+importScripts('https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js')

src/app/(mobile-ui)/home/page.tsx

@@ -9,7 +9,6 @@ import PeanutLoading from '@/components/Global/PeanutLoading'
 //import RewardsModal from '@/components/Global/RewardsModal'
 import HomeHistory from '@/components/Home/HomeHistory'
 //import RewardsCardModal from '@/components/Home/RewardsCardModal'
-import { SearchUsers } from '@/components/SearchUsers'
 import { UserHeader } from '@/components/UserHeader'
 import { useAuth } from '@/context/authContext'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -38,13 +37,20 @@ import { PostSignupActionManager } from '@/components/Global/PostSignupActionMan
 import { useWithdrawFlow } from '@/context/WithdrawFlowContext'
 import { useClaimBankFlow } from '@/context/ClaimBankFlowContext'
 import { useDeviceType, DeviceType } from '@/hooks/useGetDeviceType'
+import SetupNotificationsModal from '@/components/Notifications/SetupNotificationsModal'
+import { useNotifications } from '@/hooks/useNotifications'
+import NotificationNavigation from '@/components/Notifications/NotificationNavigation'
 import useKycStatus from '@/hooks/useKycStatus'
 import HomeBanners from '@/components/Home/HomeBanners'
+import InvitesIcon from '@/components/Home/InvitesIcon'
+import NoMoreJailModal from '@/components/Global/NoMoreJailModal'
+import EarlyUserModal from '@/components/Global/EarlyUserModal'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
 const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_EXPIRY ?? '1814400') // 21 days in seconds
 
 export default function Home() {
+    const { showPermissionModal } = useNotifications()
     const { balance, address, isFetchingBalance } = useWallet()
     const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
@@ -186,28 +192,46 @@ export default function Home() {
 
     // effect for showing add money prompt modal
     useEffect(() => {
-        if (typeof window !== 'undefined' && !isFetchingBalance) {
-            const hasSeenAddMoneyPromptThisSession = sessionStorage.getItem('hasSeenAddMoneyPromptThisSession')
-
-            // show if:
-            // 1. balance is zero.
-            // 2. user hasn't seen this prompt in the current session.
-            // 3. the iOS PWA install modal is not currently active.
-            // 4. the balance warning modal is not currently active.
-            // this allows the modal on any device (iOS/Android) and in any display mode (PWA/browser),
-            // as long as the PWA modal (which is iOS & browser-specific) isn't taking precedence.
-            if (
-                balance === 0n &&
-                !hasSeenAddMoneyPromptThisSession &&
-                !showIOSPWAInstallModal &&
-                !showBalanceWarningModal &&
-                !isPostSignupActionModalVisible
-            ) {
-                setShowAddMoneyPromptModal(true)
-                sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
-            }
+        if (typeof window === 'undefined' || isFetchingBalance || !user) return
+        const hasSeenAddMoneyPromptThisSession = sessionStorage.getItem('hasSeenAddMoneyPromptThisSession')
+        const showNoMoreJailModal = sessionStorage.getItem('showNoMoreJailModal')
+
+        // determine if we should show the add money modal based on all conditions
+        // show if:
+        // 1. balance is zero.
+        // 2. user hasn't seen this prompt in the current session.
+        // 3. setup notifications modal is not visible (priority: setup modal > add money prompt)
+        // 4. the iOS PWA install modal is not currently active.
+        // 5. the balance warning modal is not currently active.
+        // 6. no other post-signup modal is active
+        const shouldShow =
+            balance === 0n &&
+            !hasSeenAddMoneyPromptThisSession &&
+            !showPermissionModal &&
+            !showIOSPWAInstallModal &&
+            !showBalanceWarningModal &&
+            !isPostSignupActionModalVisible &&
+            showNoMoreJailModal !== 'true' &&
+            !user?.showEarlyUserModal // Give Early User and No more jail modal precedence, showing two modals together isn't ideal and it messes up their functionality
+
+        if (shouldShow) {
+            setShowAddMoneyPromptModal(true)
+            sessionStorage.setItem('hasSeenAddMoneyPromptThisSession', 'true')
+        } else if (showAddMoneyPromptModal && showPermissionModal) {
+            // priority enforcement: hide add money modal if notification modal appears
+            // this handles race conditions where both modals try to show simultaneously
+            setShowAddMoneyPromptModal(false)
         }
-    }, [balance, isFetchingBalance, showIOSPWAInstallModal, showBalanceWarningModal])
+    }, [
+        balance,
+        isFetchingBalance,
+        showPermissionModal,
+        showIOSPWAInstallModal,
+        showBalanceWarningModal,
+        isPostSignupActionModalVisible,
+        showAddMoneyPromptModal,
+        user,
+    ])
 
     if (isLoading) {
         return <PeanutLoading coverFullScreen />
@@ -218,7 +242,14 @@ export default function Home() {
             <div className="h-full w-full space-y-6 p-5">
                 <div className="flex items-center justify-between gap-2">
                     <UserHeader username={username!} fullName={userFullName} isVerified={isUserKycApproved} />
-                    <SearchUsers />
+                    <div className="flex items-center">
+                        <div className="flex items-center gap-2">
+                            <Link href="/points">
+                                <InvitesIcon />
+                            </Link>
+                            {/* <NotificationNavigation /> */}
+                        </div>
+                    </div>
                 </div>
                 <div className="space-y-4">
                     <ActionButtonGroup>
@@ -247,6 +278,8 @@ export default function Home() {
 
                 <HomeBanners />
 
+                {showPermissionModal && <SetupNotificationsModal />}
+
                 <HomeHistory username={username ?? undefined} />
                 {/* Render the new Rewards Modal
                 <RewardsModal />
@@ -262,6 +295,10 @@ export default function Home() {
             {/* Add Money Prompt Modal */}
             <AddMoneyPromptModal visible={showAddMoneyPromptModal} onClose={() => setShowAddMoneyPromptModal(false)} />
 
+            <NoMoreJailModal />
+
+            <EarlyUserModal />
+
             {/* Balance Warning Modal */}
             <BalanceWarningModal
                 visible={showBalanceWarningModal}

src/app/(mobile-ui)/layout.tsx

@@ -16,11 +16,12 @@ import { twMerge } from 'tailwind-merge'
 import '../../styles/globals.css'
 import SupportDrawer from '@/components/Global/SupportDrawer'
 import { useSupportModalContext } from '@/context/SupportModalContext'
+import JoinWaitlistPage from '@/components/Invites/JoinWaitlistPage'
 import { useRouter } from 'next/navigation'
 import { Banner } from '@/components/Global/Banner'
 
 // Allow access to some public paths without authentication
-const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support)/
+const publicPathRegex = /^\/(request\/pay|claim|pay\/.+$|support|invite)/
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const pathName = usePathname()
@@ -83,14 +84,19 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         }
     }, [user, isFetchingUser])
 
-    if (!isReady || (isFetchingUser && !user && !hasToken && !isPublicPath)) {
+    if (!isReady || isFetchingUser || (!hasToken && !isPublicPath) || (!isPublicPath && !user)) {
         return (
             <div className="flex h-[100dvh] w-full flex-col items-center justify-center">
                 <PeanutLoading />
             </div>
         )
     }
 
+    // Show waitlist page if user doesn't have app access
+    if (!isFetchingUser && user && !user?.user.hasAppAccess && !isPublicPath) {
+        return <JoinWaitlistPage />
+    }
+
     return (
         <div className="flex min-h-[100dvh] w-full bg-background">
             {/* Wrapper div for desktop layout */}