Open
Conversation
- Introduced a new GuestPreviewScreen component for guest users. - Updated MultiStepForm to include navigation to GuestPreviewScreen. - Modified LinksScreen to redirect to GuestPreviewScreen if the user is not signed in. - Updated localization files to include new text for the GuestPreviewScreen. - Adjusted the customization flow configuration to support the new screen.
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a new GuestPreviewScreen component and tests, wires it into the TemplateCustomization MultiStepForm flow, routes unauthenticated users from LinksScreen to the new 'guestPreview' screen, extends the CustomizationScreen type with 'guestPreview', and adds related English locale keys. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant LinksScreen as "LinksScreen\nrgba(52,152,219,0.5)"
participant MultiStepForm as "MultiStepForm\nrgba(41,128,185,0.5)"
participant GuestPreview as "GuestPreviewScreen\nrgba(46,204,113,0.5)"
participant AccountDialog as "AccountCheckDialog\nrgba(155,89,182,0.5)"
participant AuthFlow as "AuthFlow (sign-in)\nrgba(241,196,15,0.5)"
User->>LinksScreen: Submit links step
LinksScreen->>LinksScreen: check isSignedIn
alt not signed in
LinksScreen->>MultiStepForm: handleScreenNavigation('guestPreview')
MultiStepForm->>GuestPreview: render guestPreview
GuestPreview->>User: show preview + CTA
User->>GuestPreview: click "Continue with account"
GuestPreview->>AccountDialog: open dialog
AccountDialog->>AuthFlow: trigger sign-in (build redirect URL)
AuthFlow->>User: navigate to /users/sign-in?redirect=...
else signed in
LinksScreen->>LinksScreen: handleNext()
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
View your CI Pipeline Execution ↗ for commit 6c9d761
☁️ Nx Cloud last updated this comment at |
github-actions
bot
requested a deployment
to
Preview - journeys-admin
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx`:
- Around line 65-66: The guestPreview case currently returns <GuestPreviewScreen
/> while getCustomizeFlowConfig's screens array doesn't include 'guestPreview',
causing screens.indexOf(activeScreen) to be -1 and ProgressStepper to render
incorrectly; update either getCustomizeFlowConfig to include 'guestPreview' in
its screens array or change the render logic in MultiStepForm (where
activeScreen and screens are used for ProgressStepper) to detect 'guestPreview'
and hide the ProgressStepper entirely; additionally, ensure the "Edit Manually"
button rendering logic (the conditional that currently hides it for 'language')
also hides it when activeScreen === 'guestPreview' so guest users don't see an
inapplicable editor action.
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx`:
- Around line 92-110: The desktop Typography in GuestPreviewScreen currently
shows copy copied from LinksScreen that is incorrect for a guest preview; update
the text rendered in the Typography with display={displayDesktop} (inside the
GuestPreviewScreen component) to a guest-appropriate message (e.g., a preview or
sign-up prompt) instead of "This content contains buttons linking to external
sites. Check them and update the links below." — locate the desktop variant
Typography in GuestPreviewScreen and replace its i18n key/string with the
correct guest-facing translation key or plain text, ensuring you keep the same
props (variant="subtitle2", color="text.secondary", align="center",
fontWeight={400}) and use the t(...) i18n call.
- Line 16: The file imports Box from the wrong package; change the import in
GuestPreviewScreen.tsx to pull Box from '@mui/material/Box' instead of
'@mui/system/Box' so it matches other components (e.g., MultiStepForm.tsx) and
uses the proper MUI theming behavior; update the import statement that
references Box accordingly.
- Around line 39-60: handleSignIn currently builds baseUrl without any query
params so baseUrl.includes('createNew') is always false and the use of login ??
false is redundant; modify handleSignIn to read existing query params (e.g.,
from router.query or window.location.search / URLSearchParams) and check for the
presence of createNew there, then build url by appending either &screen=social
or ?createNew=true&screen=social based on that check, and simplify the
router.push query to use login (not login ?? false); keep the rest of the
router.push shape and shallow option intact and update references to
baseUrl/journey?.id and the created url accordingly.
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx`:
- Around line 192-196: The updatePromises currently invokes
blockUpdateLinkAction, blockUpdateEmailAction, and blockUpdatePhoneAction
unconditionally and then relies on Promise.allSettled to swallow auth errors for
guests; modify the logic that builds updatePromises (the section creating
promises for link/email/phone updates) to only push or call those mutation
functions when isSignedIn is true—i.e., wrap calls to blockUpdateLinkAction,
blockUpdateEmailAction, and blockUpdatePhoneAction with an if (isSignedIn) check
so guest users do not trigger the authenticated mutations (keep existing
navigation flow using handleNext/handleScreenNavigation unchanged).
🧹 Nitpick comments (3)
apps/journeys-admin/src/components/TemplateCustomization/utils/getCustomizeFlowConfig/getCustomizeFlowConfig.ts (1)
6-12: Type extension is correct; consider updating the doc comment.Adding
'guestPreview'to the union type is the right approach since it's used as a navigation target but not part of the standard flow. The JSDoc on Line 29 still says screens are "always ordered as: language → text → links → social → done" — a brief note aboutguestPreviewbeing a conditional redirect would keep the docs accurate.libs/locales/en/apps-journeys-admin.json (1)
1020-1025: New locale strings look good — note the near-duplicate keys.Line 1020 (
"Almost There!") and Line 1021 ("Almost there!") differ only in casing. This is technically valid (distinct i18n keys), but could cause translator confusion. If the intent is the same phrase, consider unifying to a single key.apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx (1)
13-15: Import grouping is inconsistent;CardsPreviewcreates cross-screen coupling.The
@coreimport on Line 13 is placed between relative imports (Lines 11–12 and Line 15), breaking the conventional grouping (external →@core→ relative).More importantly, importing
CardsPreviewfrom../LinksScreen/CardsPreview(Line 15) couples GuestPreviewScreen to LinksScreen's internal module. IfCardsPreviewis reused across screens, consider extracting it to a shared location (e.g., a siblingcomponents/directory).
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
Outdated
Show resolved
Hide resolved
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Outdated
Show resolved
Hide resolved
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Outdated
Show resolved
Hide resolved
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Show resolved
Hide resolved
...admin/src/components/TemplateCustomization/MultiStepForm/Screens/LinksScreen/LinksScreen.tsx
Show resolved
Hide resolved
github-actions
bot
temporarily deployed
to
Preview - journeys-admin
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
|
The latest updates on your projects.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@libs/locales/en/apps-journeys-admin.json`:
- Line 1008: There are two near-duplicate locale keys ("Almost there!" and
"Almost There!") causing ambiguity; pick a single canonical key (e.g., "Almost
There!" or "Almost there!") and remove the duplicate entry from
libs/locales/en/apps-journeys-admin.json, then update any components/usages to
reference the chosen key (search for "Almost there!" and "Almost There!" in the
repo) and adjust tests or docs accordingly; if the distinction was intentional,
add a brief comment in the JSON or locale documentation explaining the
difference.
🧹 Nitpick comments (2)
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx (2)
23-29: Consider narrowing theuseMemodependency tojourney?.blocks.The memo depends on
[journey], but onlyjourney.blocksis consumed inside it. If the journey object reference changes for reasons unrelated to blocks (e.g., title update), this will needlessly recompute the tree. Narrowing the dependency avoids unnecessary work.Proposed fix
const steps = useMemo( () => journey != null ? (transformer(journey.blocks ?? []) as Array<TreeBlock<StepBlock>>) : [], - [journey] + [journey?.blocks] )
154-158: Extract inlineonClosehandler into a named function.Per coding guidelines, event functions should use a "handle" prefix. The inline arrow on
onClosecould be extracted for consistency withhandleContinueToPreviewandhandleSignIn.Proposed fix
+ function handleCloseAccountDialog(): void { + setOpenAccountDialog(false) + } + ... <AccountCheckDialog open={openAccountDialog} - onClose={() => setOpenAccountDialog(false)} + onClose={handleCloseAccountDialog} handleSignIn={handleSignIn} />
Contributor
|
The latest updates on your projects.
|
- Updated GuestPreviewScreen to accept handleScreenNavigation as a prop for improved navigation control. - Modified MultiStepForm to pass the handleScreenNavigation function to GuestPreviewScreen.
github-actions
bot
temporarily deployed
to
Preview - journeys-admin
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
Verify each finding against the current code and only fix it if needed.
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx`:
- Around line 63-70: In MultiStepForm.tsx the switch cases are reversed: the
'guestPreview' case returns DoneScreen and the 'done' case returns
GuestPreviewScreen; update the switch so case 'guestPreview' returns
<GuestPreviewScreen handleScreenNavigation={handleScreenNavigation} /> and case
'done' returns <DoneScreen handleScreenNavigation={handleScreenNavigation} />
(and tidy/remove the stale commented labels if desired) to restore correct
rendering.
In
`@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx`:
- Line 41: The handleContinueToPreview function is currently a no-op; update it
to call setOpenAccountDialog(true) so clicking "Continue with account" opens the
account dialog, ensure the AccountCheckDialog component is rendered in the
component JSX (e.g., before the closing </Stack>) with props
open={openAccountDialog}, onClose={() => setOpenAccountDialog(false)} and
handleSignIn={handleSignIn}; this uses the existing openAccountDialog state,
setOpenAccountDialog setter, AccountCheckDialog import, and handleSignIn handler
to restore the intended interaction.
- Around line 76-96: The two duplicate Typography blocks in GuestPreviewScreen
both render t('Almost there!') with only variant and display differing; remove
the duplicate and render a single Typography in place of both (reference:
component GuestPreviewScreen and the duplicated Typography elements) that uses a
responsive variant and display via the sx prop or useMediaQuery — e.g., replace
the two elements with one Typography that sets sx={{ typography: { xs: 'h5', sm:
'h3' }, display: { xs: displayMobile, sm: displayDesktop }, mb: { xs: 0, sm: 2 }
}} and keep gutterBottom and the same translated text to preserve layout and
behavior.
🧹 Nitpick comments (1)
🤖 Fix all nitpicks with AI agents
Verify each finding against the current code and only fix it if needed. In `@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx`: - Around line 76-96: The two duplicate Typography blocks in GuestPreviewScreen both render t('Almost there!') with only variant and display differing; remove the duplicate and render a single Typography in place of both (reference: component GuestPreviewScreen and the duplicated Typography elements) that uses a responsive variant and display via the sx prop or useMediaQuery — e.g., replace the two elements with one Typography that sets sx={{ typography: { xs: 'h5', sm: 'h3' }, display: { xs: displayMobile, sm: displayDesktop }, mb: { xs: 0, sm: 2 } }} and keep gutterBottom and the same translated text to preserve layout and behavior.apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx (1)
76-96: Consider consolidating duplicate headingTypographyelements.The desktop and mobile headings both render
t('Almost there!')with nearly identical props — onlyvariantanddisplaydiffer. This could be simplified with a singleTypographyusing responsivevariantvia thesxprop or the MUIuseMediaQueryhook, reducing duplication.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx` around lines 76 - 96, The two duplicate Typography blocks in GuestPreviewScreen both render t('Almost there!') with only variant and display differing; remove the duplicate and render a single Typography in place of both (reference: component GuestPreviewScreen and the duplicated Typography elements) that uses a responsive variant and display via the sx prop or useMediaQuery — e.g., replace the two elements with one Typography that sets sx={{ typography: { xs: 'h5', sm: 'h3' }, display: { xs: displayMobile, sm: displayDesktop }, mb: { xs: 0, sm: 2 } }} and keep gutterBottom and the same translated text to preserve layout and behavior.
apps/journeys-admin/src/components/TemplateCustomization/MultiStepForm/MultiStepForm.tsx
Outdated
Show resolved
Hide resolved
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Outdated
Show resolved
Hide resolved
csiyang
requested changes
Feb 17, 2026
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Outdated
Show resolved
Hide resolved
...onents/TemplateCustomization/MultiStepForm/Screens/GuestPreviewScreen/GuestPreviewScreen.tsx
Outdated
Show resolved
Hide resolved
csiyang
previously approved these changes
Feb 17, 2026
- Adjusted typography properties for better mobile and desktop display. - Ensured consistent font usage across different screen sizes.
- Adjusted screen rendering logic to correctly handle 'done' and 'guestPreview' cases. - Introduced a new variable to manage active step for the progress stepper based on the current screen. - Enhanced guest preview screen insertion logic based on user sign-in status.
csiyang
approved these changes
Mar 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Localization
Tests