[TASK-16296] Feat: Verification rework

package.json

@@ -34,6 +34,7 @@
         "@hookform/resolvers": "3.9.1",
         "@justaname.id/react": "0.3.180",
         "@justaname.id/sdk": "0.2.177",
+        "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slider": "^1.3.5",
         "@reduxjs/toolkit": "^2.5.0",

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

@@ -38,6 +38,8 @@ import NoMoreJailModal from '@/components/Global/NoMoreJailModal'
 import EarlyUserModal from '@/components/Global/EarlyUserModal'
 import InvitesIcon from '@/components/Home/InvitesIcon'
 import NavigationArrow from '@/components/Global/NavigationArrow'
+import KycCompletedModal from '@/components/Home/KycCompletedModal'
+import { updateUserById } from '@/app/actions/users'
 import { useHaptic } from 'use-haptic'
 
 const BALANCE_WARNING_THRESHOLD = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_THRESHOLD ?? '500')
@@ -67,6 +69,7 @@ export default function Home() {
     const [showBalanceWarningModal, setShowBalanceWarningModal] = useState(false)
     // const [showReferralCampaignModal, setShowReferralCampaignModal] = useState(false)
     const [isPostSignupActionModalVisible, setIsPostSignupActionModalVisible] = useState(false)
+    const [showKycModal, setShowKycModal] = useState(user?.user.showKycCompletedModal ?? false)
 
     const userFullName = useMemo(() => {
         if (!user) return
@@ -291,6 +294,17 @@ export default function Home() {
 
             <EarlyUserModal />
 
+            <KycCompletedModal
+                isOpen={showKycModal}
+                onClose={() => {
+                    updateUserById({
+                        userId: user?.user.userId,
+                        showKycCompletedModal: false,
+                    })
+                    setShowKycModal(false)
+                }}
+            />
+
             {/* Balance Warning Modal */}
             <BalanceWarningModal
                 visible={showBalanceWarningModal}

src/app/(mobile-ui)/profile/identity-verification/[region]/[country]/page.tsx

@@ -0,0 +1,6 @@
+'use client'
+import IdentityVerificationView from '@/components/Profile/views/IdentityVerification.view'
+
+export default function IdentityVerificationCountryPage() {
+    return <IdentityVerificationView />
+}

src/app/(mobile-ui)/profile/identity-verification/[region]/page.tsx

@@ -0,0 +1,10 @@
+'use client'
+import RegionsPage from '@/components/Profile/views/RegionsPage.view'
+import { useParams } from 'next/navigation'
+
+export default function IdentityVerificationRegionPage() {
+    const params = useParams()
+    const region = params.region as string
+
+    return <RegionsPage path={region} />
+}

src/app/(mobile-ui)/profile/identity-verification/layout.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import PageContainer from '@/components/0_Bruddle/PageContainer'
+import ActionModal from '@/components/Global/ActionModal'
+import { useIdentityVerification } from '@/hooks/useIdentityVerification'
+import { useParams, useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+export default function IdentityVerificationLayout({ children }: { children: React.ReactNode }) {
+    const [isAlreadyVerifiedModalOpen, setIsAlreadyVerifiedModalOpen] = useState(false)
+    const router = useRouter()
+    const { isRegionAlreadyUnlocked, isVerifiedForCountry } = useIdentityVerification()
+    const params = useParams()
+    const regionParams = params.region as string
+    const countryParams = params.country as string
+
+    useEffect(() => {
+        const isAlreadyVerified =
+            (countryParams && isVerifiedForCountry(countryParams)) ||
+            (regionParams && isRegionAlreadyUnlocked(regionParams))
+
+        if (isAlreadyVerified) {
+            setIsAlreadyVerifiedModalOpen(true)
+        }
+    }, [countryParams, regionParams, isVerifiedForCountry, isRegionAlreadyUnlocked])
+
+    return (
+        <PageContainer>
+            {children}
+
+            <ActionModal
+                visible={isAlreadyVerifiedModalOpen}
+                onClose={() => {
+                    setIsAlreadyVerifiedModalOpen(false)
+                    router.push('/profile')
+                }}
+                title="You're already verified"
+                description={
+                    <p>
+                        Your identity has already been successfully verified for this region. You can continue to use
+                        features available in this region. No further action is needed.
+                    </p>
+                }
+                icon="shield"
+                ctas={[
+                    {
+                        text: 'Close',
+                        shadowSize: '4',
+                        className: 'md:py-2',
+                        onClick: () => {
+                            setIsAlreadyVerifiedModalOpen(false)
+                            router.push('/profile')
+                        },
+                    },
+                ]}
+            />
+        </PageContainer>
+    )
+}

src/app/(mobile-ui)/profile/identity-verification/page.tsx

@@ -1,10 +1,5 @@
-import PageContainer from '@/components/0_Bruddle/PageContainer'
-import IdentityVerificationView from '@/components/Profile/views/IdentityVerification.view'
+import RegionsVerification from '@/components/Profile/views/RegionsVerification.view'
 
 export default function IdentityVerificationPage() {
-    return (
-        <PageContainer>
-            <IdentityVerificationView />
-        </PageContainer>
-    )
+    return <RegionsVerification />
 }

src/assets/icons/index.ts

@@ -23,3 +23,7 @@ export { default as IMESSAGE_ICON } from './imessage.svg'
 export { default as FBMessenger_ICON } from './fbmessenger.svg'
 export { default as SOCIALS_ICON } from './socials.svg'
 export { default as COIN_ICON } from './coin.svg'
+export { default as EUROPE_GLOBE_ICON } from './europe-globe.svg'
+export { default as NORTH_AMERICA_GLOBE_ICON } from './north-america-globe.svg'
+export { default as LATAM_GLOBE_ICON } from './latam-globe.svg'
+export { default as REST_OF_WORLD_GLOBE_ICON } from './rest-of-world-globe.svg'