-
Notifications
You must be signed in to change notification settings - Fork 4k
Add a one-click deeplink that signs the user in and creates a Submit workspace #98887
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 7 commits
72e106e
1bf9098
06e18f0
f843d86
8b21e71
3215c16
7fad41a
8bb0054
22db33d
f1887b4
fca471c
120ac22
a6e5615
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import {useInitialURLState} from '@components/InitialURLContextProvider'; | ||
|
|
||
| import getOnboardingIntentFromUrl from '@libs/getOnboardingIntentFromUrl'; | ||
| import getCurrentUrl from '@libs/Navigation/currentUrl'; | ||
|
|
||
| import type {OnboardingIntent} from '@src/CONST'; | ||
|
|
||
| import {useState} from 'react'; | ||
|
|
||
| /** | ||
| * Resolves the onboarding outcome requested by the deeplink this session was opened with, e.g. `onboarding?intent=submit`. | ||
| * | ||
| * The URL is latched at mount because the app rewrites it as soon as it navigates, which happens well before the | ||
| * intent has been acted on. The initial URL is the only source on native, where the browser URL is empty and the | ||
| * deeplink resolves asynchronously. It also covers links opened while the app is already running, which DeepLinkHandler | ||
| * records there because the latched URL is stale by then. | ||
| */ | ||
| function useOnboardingDeeplinkIntent(): OnboardingIntent | undefined { | ||
| const {initialURL} = useInitialURLState(); | ||
| const [urlAtMount] = useState(getCurrentUrl); | ||
|
|
||
| return getOnboardingIntentFromUrl(urlAtMount) ?? getOnboardingIntentFromUrl(initialURL); | ||
|
MelvinBot marked this conversation as resolved.
|
||
| } | ||
|
|
||
| export default useOnboardingDeeplinkIntent; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import useAutoCreateSubmitWorkspace from '@hooks/useAutoCreateSubmitWorkspace'; | ||
| import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; | ||
| import useOnyx from '@hooks/useOnyx'; | ||
|
|
||
| import {setSubmitMigrationModalShown} from '@userActions/User'; | ||
|
|
||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
|
|
||
| import {hasCompletedGuidedSetupFlowSelector} from '@selectors/Onboarding'; | ||
| import {isSupportalSessionSelector} from '@selectors/Session'; | ||
| import {useEffect, useRef} from 'react'; | ||
|
|
||
| /** | ||
| * Creates the Submit workspace requested by an `intent=submit` onboarding deeplink. | ||
| * | ||
| * The link is only sent to existing users, so it acts solely on recipients who have already been through guided | ||
| * setup: for them the workspace is created outright and they land wherever the "Submit to my employer" flow normally | ||
| * leaves them. Anyone who still has onboarding ahead of them is left to it untouched, since that flow already offers | ||
| * the Submit outcome. | ||
| * | ||
| * Only rendered once the deeplink has been recognized, so the Onyx subscriptions behind `useAutoCreateSubmitWorkspace` | ||
| * are never set up for ordinary sessions. | ||
| */ | ||
| function ApplySubmitOnboardingIntent() { | ||
| const {firstName, lastName} = useCurrentUserPersonalDetails(); | ||
| const autoCreateSubmitWorkspace = useAutoCreateSubmitWorkspace(); | ||
|
|
||
| // HAS_LOADED_APP only flips true once this session's account data has landed, so waiting on it keeps the | ||
| // eligibility checks inside useAutoCreateSubmitWorkspace (existing workspaces, restricted policy creation) | ||
| // from running against a half-populated store and creating a duplicate workspace. | ||
| const [hasLoadedApp] = useOnyx(ONYXKEYS.HAS_LOADED_APP); | ||
| const [isOnboardingCompleted] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasCompletedGuidedSetupFlowSelector}); | ||
| const [isSupportalSession] = useOnyx(ONYXKEYS.SESSION, {selector: isSupportalSessionSelector}); | ||
|
|
||
| const hasRun = useRef(false); | ||
|
|
||
| useEffect(() => { | ||
| if (hasRun.current || !hasLoadedApp || isOnboardingCompleted === undefined || isSupportalSession) { | ||
| return; | ||
|
Comment on lines
+35
to
+36
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
When a warm onboarding link is opened during a supportal session, this condition returns without setting Useful? React with 👍 / 👎. |
||
| } | ||
| hasRun.current = true; | ||
|
|
||
| // Recipients who never finished guided setup are left to the normal onboarding flow, which already offers | ||
| // the Submit outcome. | ||
| if (!isOnboardingCompleted) { | ||
| return; | ||
| } | ||
|
|
||
| // The deeplink delivers the same outcome as the Submit plan welcome modal, so record the modal as seen to | ||
| // stop it from opening on top of the workspace we're about to create. | ||
| setSubmitMigrationModalShown(); | ||
|
Comment on lines
+44
to
+45
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
For recipients who also satisfy Useful? React with 👍 / 👎. |
||
|
|
||
| // Guided setup is already done, so it must not run again. When the user already owns a Submit workspace, | ||
| // useAutoCreateSubmitWorkspace skips creation and navigates to that workspace instead, which is what makes | ||
| // repeat clicks of the link idempotent. | ||
| autoCreateSubmitWorkspace(firstName ?? '', lastName ?? '', false); | ||
| }, [autoCreateSubmitWorkspace, firstName, hasLoadedApp, isOnboardingCompleted, isSupportalSession, lastName]); | ||
|
|
||
| return null; | ||
| } | ||
|
|
||
| export default ApplySubmitOnboardingIntent; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import useOnboardingDeeplinkIntent from '@hooks/useOnboardingDeeplinkIntent'; | ||
|
|
||
| import CONST from '@src/CONST'; | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import ApplySubmitOnboardingIntent from './ApplySubmitOnboardingIntent'; | ||
|
|
||
| /** | ||
| * Recognizes the `intent=submit` onboarding deeplink and hands off to the component that acts on it. | ||
| */ | ||
| function SubmitIntentDeeplinkHandler() { | ||
| const onboardingDeeplinkIntent = useOnboardingDeeplinkIntent(); | ||
|
|
||
| if (onboardingDeeplinkIntent !== CONST.ONBOARDING_INTENTS.SUBMIT) { | ||
| return null; | ||
| } | ||
|
|
||
| return <ApplySubmitOnboardingIntent />; | ||
| } | ||
|
|
||
| export default SubmitIntentDeeplinkHandler; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * Reads the `intent` param of the onboarding deeplink (e.g. `onboarding?intent=submit`), which lets a one-click | ||
| * link pre-select an onboarding outcome instead of asking the recipient to pick it in the UI. | ||
| * | ||
| * The param arrives in one of two shapes: | ||
| * - directly, when the recipient is already signed in: `/onboarding?intent=submit` | ||
| * - nested in the `exitTo` of an auth handoff link, where `onboarding?intent=submit` is URL-encoded: | ||
| * `/transition?...&exitTo=<encoded>` or `/v/<accountID>/<validateCode>?exitTo=<encoded>` | ||
| * | ||
| * Nesting it in `exitTo` is what carries the intent across the logged-out -> logged-in transition: the deeplink | ||
| * outlives the sign-in itself, so the intent is still readable once the authenticated screens mount. | ||
| */ | ||
| import type {OnboardingIntent} from '@src/CONST'; | ||
| import CONST from '@src/CONST'; | ||
| import ROUTES from '@src/ROUTES'; | ||
|
|
||
| import {getRouteFromLink} from './ReportUtils'; | ||
| import {getSearchParamFromPath} from './Url'; | ||
|
|
||
| const ONBOARDING_INTENT_VALUES = new Set<string>(Object.values(CONST.ONBOARDING_INTENTS)); | ||
|
|
||
| function isOnboardingIntent(value: string | null): value is OnboardingIntent { | ||
| return !!value && ONBOARDING_INTENT_VALUES.has(value); | ||
| } | ||
|
|
||
| function getOnboardingIntentFromUrl(url: string | null | undefined): OnboardingIntent | undefined { | ||
| if (!url) { | ||
| return undefined; | ||
| } | ||
|
|
||
| // getRouteFromLink strips whichever linking-config prefix matched, so every shape the deeplink can arrive in | ||
| // reduces to the same route: web URLs, the dev server's port, the desktop `app://-/` origin and the native | ||
| // `new-expensify://` scheme. It only drops the leading slash when a prefix matched, so in-app paths keep theirs. | ||
| const pathWithQuery = getRouteFromLink(url).replace(/^\/+/, ''); | ||
| const onboardingPathWithQuery = pathWithQuery.startsWith(ROUTES.ONBOARDING_ROOT.route) ? pathWithQuery : getSearchParamFromPath(pathWithQuery, 'exitTo'); | ||
|
|
||
| if (!onboardingPathWithQuery?.startsWith(ROUTES.ONBOARDING_ROOT.route)) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const intent = getSearchParamFromPath(onboardingPathWithQuery, 'intent'); | ||
| return isOnboardingIntent(intent) ? intent : undefined; | ||
| } | ||
|
|
||
| export default getOnboardingIntentFromUrl; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import getOnboardingIntentFromUrl from '@libs/getOnboardingIntentFromUrl'; | ||
|
|
||
| import CONST from '@src/CONST'; | ||
|
|
||
| describe('getOnboardingIntentFromUrl', () => { | ||
| it('reads the intent from a direct onboarding link', () => { | ||
| expect(getOnboardingIntentFromUrl('https://new.expensify.com/onboarding?intent=submit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from a custom scheme link, where the route sits where a host would', () => { | ||
| expect(getOnboardingIntentFromUrl('new-expensify://onboarding?intent=submit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from a custom scheme link with a placeholder host', () => { | ||
| expect(getOnboardingIntentFromUrl('app://-/onboarding?intent=submit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from the exitTo of a custom scheme magic link', () => { | ||
| expect(getOnboardingIntentFromUrl('new-expensify://v/12345/678910?exitTo=onboarding%3Fintent%3Dsubmit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from a link served on a port, as the dev server does', () => { | ||
| expect(getOnboardingIntentFromUrl('https://dev.new.expensify.com:8082/onboarding?intent=submit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from an in-app path without an origin', () => { | ||
| expect(getOnboardingIntentFromUrl('/onboarding?intent=submit')).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from the exitTo of an OldDot transition link', () => { | ||
| const url = 'https://new.expensify.com/transition?email=me%40example.com&shortLivedAuthToken=abc123&exitTo=onboarding%3Fintent%3Dsubmit'; | ||
|
|
||
| expect(getOnboardingIntentFromUrl(url)).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from the exitTo of a magic link', () => { | ||
| const url = 'https://new.expensify.com/v/12345/678910?exitTo=onboarding%3Fintent%3Dsubmit'; | ||
|
|
||
| expect(getOnboardingIntentFromUrl(url)).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it('reads the intent from an unencoded exitTo, which OldDot mobile does not encode', () => { | ||
| const url = 'https://new.expensify.com/transition?shortLivedAuthToken=abc123&exitTo=onboarding?intent=submit'; | ||
|
|
||
| expect(getOnboardingIntentFromUrl(url)).toBe(CONST.ONBOARDING_INTENTS.SUBMIT); | ||
| }); | ||
|
|
||
| it.each([ | ||
| ['no url', undefined], | ||
| ['an empty url', ''], | ||
| ['an onboarding link without an intent', 'https://new.expensify.com/onboarding'], | ||
| ['an unknown intent value', 'https://new.expensify.com/onboarding?intent=notARealIntent'], | ||
| ['an intent on a non-onboarding route', 'https://new.expensify.com/settings/profile?intent=submit'], | ||
| ['an intent on a non-onboarding exitTo', 'https://new.expensify.com/transition?exitTo=workspace%2Fnew%3Fintent%3Dsubmit'], | ||
| ])('returns undefined for %s', (_description, url) => { | ||
| expect(getOnboardingIntentFromUrl(url)).toBeUndefined(); | ||
| }); | ||
| }); |
Uh oh!
There was an error while loading. Please reload this page.