diff --git a/src/components/contacts/FindContactsBannerNUX.tsx b/src/components/contacts/FindContactsBannerNUX.tsx index 250ab0170c..f4c93e30a8 100644 --- a/src/components/contacts/FindContactsBannerNUX.tsx +++ b/src/components/contacts/FindContactsBannerNUX.tsx @@ -50,7 +50,7 @@ export function FindContactsBannerNUX() { ]}> { + nuxDialogs.dismissActiveNux() + }, [nuxDialogs]) + + return ( + + + + + + + + {_( + + + + + + Find your friends + + + + Bluesky is more fun with friends! Import your contacts to see + who’s already here. + + + + + + + + + + + ) +} diff --git a/src/components/dialogs/nuxs/index.tsx b/src/components/dialogs/nuxs/index.tsx index 4076708fc0..e4e8d2db94 100644 --- a/src/components/dialogs/nuxs/index.tsx +++ b/src/components/dialogs/nuxs/index.tsx @@ -1,4 +1,11 @@ -import React from 'react' +import { + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react' import {type AppBskyActorDefs} from '@atproto/api' import {useGate} from '#/lib/statsig/statsig' @@ -12,11 +19,11 @@ import { import {useProfileQuery} from '#/state/queries/profile' import {type SessionAccount, useSession} from '#/state/session' import {useOnboardingState} from '#/state/shell' -import {BookmarksAnnouncement} from '#/components/dialogs/nuxs/BookmarksAnnouncement' +import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing' /* * NUXs */ -import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing' +import {FindContactsAnnouncement} from './FindContactsAnnouncement' import {isExistingUserAsOf} from './utils' type Context = { @@ -34,24 +41,24 @@ const queuedNuxs: { }) => boolean }[] = [ { - id: Nux.BookmarksAnnouncement, + id: Nux.FindContactsAnnouncement, enabled: ({currentProfile}) => { return isExistingUserAsOf( - '2025-09-08T00:00:00.000Z', + '2025-12-16T00:00:00.000Z', currentProfile.createdAt, ) }, }, ] -const Context = React.createContext({ +const Context = createContext({ activeNux: undefined, dismissActiveNux: () => {}, }) Context.displayName = 'NuxDialogContext' export function useNuxDialogContext() { - return React.useContext(Context) + return useContext(Context) } export function NuxDialogs() { @@ -92,19 +99,19 @@ function Inner({ }) { const gate = useGate() const {nuxs} = useNuxs() - const [snoozed, setSnoozed] = React.useState(() => { + const [snoozed, setSnoozed] = useState(() => { return isSnoozed() }) - const [activeNux, setActiveNux] = React.useState() + const [activeNux, setActiveNux] = useState() const {mutateAsync: saveNux} = useSaveNux() const {mutate: resetNuxs} = useResetNuxs() - const snoozeNuxDialog = React.useCallback(() => { + const snoozeNuxDialog = useCallback(() => { snooze() setSnoozed(true) }, [setSnoozed]) - const dismissActiveNux = React.useCallback(() => { + const dismissActiveNux = useCallback(() => { if (!activeNux) return setActiveNux(undefined) }, [activeNux, setActiveNux]) @@ -118,7 +125,7 @@ function Inner({ } } - React.useEffect(() => { + useEffect(() => { if (snoozed) return // comment this out to test if (!nuxs) return @@ -170,7 +177,7 @@ function Inner({ preferences, ]) - const ctx = React.useMemo(() => { + const ctx = useMemo(() => { return { activeNux, dismissActiveNux, @@ -180,7 +187,9 @@ function Inner({ return ( {/*For example, activeNux === Nux.NeueTypography && */} - {activeNux === Nux.BookmarksAnnouncement && } + {activeNux === Nux.FindContactsAnnouncement && ( + + )} ) } diff --git a/src/state/queries/nuxs/definitions.ts b/src/state/queries/nuxs/definitions.ts index d349b4e959..6c03c936a6 100644 --- a/src/state/queries/nuxs/definitions.ts +++ b/src/state/queries/nuxs/definitions.ts @@ -54,6 +54,10 @@ export type AppNux = BaseNux< id: Nux.BookmarksAnnouncement data: undefined } + | { + id: Nux.FindContactsAnnouncement + data: undefined + } | { id: Nux.FindContactsDismissibleBanner data: undefined