[Contacts] Contacts matching flow (#9486)

* add expo-contacts * add expo-sms * update copy * add basic settings screen * state machine, flow screen * phone input screen * otp screen * tweak spacing * resend code logic * add layoutanimationconfig * check availablility in settings screen * get contacts * matches screen * search, temp setup for matches UI * add a bunch of number parsing logic with libphonenumber * cast to looser type * rename sync to find FCF (Find Contacts Flow) * update geolocation hook * nicer design for settings screen * add completed state * up border contrast * update expo deps * add pending spinner * add country whitelist * add empty state screen * drop add more functionality * upload -> import * fix typo * fix permission string * copy updates * rm envelope icon * update sms copy * add inviteinfo component * woke is back * [Contacts] NUXes (#9515) * add a bunch of number parsing logic with libphonenumber * add banner nux * add announcement nux * native only nux * rm shitty animation * move isNative check * [Contacts] Onboarding step (#9489) * add a bunch of number parsing logic with libphonenumber * restructure onboarding to better support dynamic screens * integrate existing flow into onboarding * add intro step * lift state up to allow going back freely * gate onboarding by geo if unsupported country * add done button to standalone flow * [Contacts] Add `contact-match` notification type to feed (#9519) * add a bunch of number parsing logic with libphonenumber * add contact-joined notif type * update string, api package * Update NotificationFeedItem.tsx * Update NotificationFeedItem.tsx * Delete SyncContactsFlow.web.tsx * fix follow back btn for this case * [Contacts] API integration (#9487) * api integration for flow * copy tweak * tweaks after running it * wire up status page * rename toast * use api lib * rm temp code * maybe fix otp error * clear code on error/resend * add 1s delay to verify success * update package versions * Delete SyncContactsFlow.web.tsx * try and fix yarn.lock lint * even woker * fix uppercase friends * surfdude feedback Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * rm log * allow resend on invalid code * Update GetContacts.tsx * overwrite country code if possible * fix Apple's Best Feature * devenv latest * disable bounces * interactive keyboard dismiss * copy changes * national format * allow resending immediately * move success state down a bit * Update FindContactsSettings.tsx * [Contacts] More onboarding changes (#9491) * integrate existing flow into onboarding * refreshed onboarding styles, rm stepper * center content on web * Add back dismiss button for internal onboarding * Import sort --------- Co-authored-by: Eric Bailey <git@esb.lol> * add matches query to shadow * add clockwise arrow * update status design, fix dismiss, fix queries * add metrics * add more comments * Update metrics.ts * refetch both queries on PTR * fix shadow state in matches page * reduce empty space at bottom * show contact info on matches * filter out contacts without numbers at an earlier stage * Error handling ✨ * get notifs working * filter out businesses * rm log * remove TODO from learn more links * try and exclude from web bundle --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Eric Bailey <git@esb.lol>
2025-12-12 20:32:06 +02:00
parent d3a6db4594
commit ad7d49ef8f
98 changed files with 4906 additions and 1079 deletions
@@ -0,0 +1,77 @@
+import {useCallback, useLayoutEffect, useState} from 'react'
+import {LayoutAnimationConfig} from 'react-native-reanimated'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {usePreventRemove} from '@react-navigation/native'
+
+import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController'
+import {
+  type AllNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
+import {isNative} from '#/platform/detection'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
+import {FindContactsFlow} from '#/components/contacts/FindContactsFlow'
+import {useFindContactsFlowState} from '#/components/contacts/state'
+import * as Layout from '#/components/Layout'
+import {ScreenTransition} from '#/components/ScreenTransition'
+
+type Props = NativeStackScreenProps<AllNavigatorParams, 'FindContactsFlow'>
+export function FindContactsFlowScreen({navigation}: Props) {
+  const {_} = useLingui()
+
+  const [state, dispatch] = useFindContactsFlowState()
+
+  const [transitionDirection, setTransitionDirection] = useState<
+    'Forward' | 'Backward'
+  >('Forward')
+
+  const overrideGoBack = state.step === '2: verify number'
+
+  usePreventRemove(overrideGoBack, () => {
+    setTransitionDirection('Backward')
+    dispatch({type: 'BACK'})
+    setTimeout(() => {
+      setTransitionDirection('Forward')
+    })
+  })
+
+  useEnableKeyboardControllerScreen(true)
+
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const effect = useCallback(() => {
+    setMinimalShellMode(true)
+    return () => setMinimalShellMode(false)
+  }, [setMinimalShellMode])
+  useLayoutEffect(effect)
+
+  return (
+    <Layout.Screen>
+      {isNative ? (
+        <LayoutAnimationConfig skipEntering skipExiting>
+          <ScreenTransition key={state.step} direction={transitionDirection}>
+            <FindContactsFlow
+              state={state}
+              dispatch={dispatch}
+              onCancel={() =>
+                navigation.canGoBack()
+                  ? navigation.goBack()
+                  : navigation.navigate('FindContactsFlow', undefined, {
+                      pop: true,
+                    })
+              }
+              context="Standalone"
+            />
+          </ScreenTransition>
+        </LayoutAnimationConfig>
+      ) : (
+        <ErrorScreen
+          title={_(msg`Not available on this platform.`)}
+          message={_(msg`Please use the native app to sync your contacts.`)}
+          showHeader
+        />
+      )}
+    </Layout.Screen>
+  )
+}