Skip to content

feat: skip onboarding and fix UI for redirect apps#23115

Merged
anikdhabal merged 9 commits intocalcom:mainfrom
keerthikumanduri:cancel-onboardingForRedirectApps-and-fixUI
Sep 2, 2025
Merged

feat: skip onboarding and fix UI for redirect apps#23115
anikdhabal merged 9 commits intocalcom:mainfrom
keerthikumanduri:cancel-onboardingForRedirectApps-and-fixUI

Conversation

@keerthikumanduri
Copy link
Copy Markdown
Contributor

What does this PR do?

Before:
This PR changes the Install Button in the app store page to Visit for redirect apps, and skips onboarding.
Screenshot 2025-08-14 at 7 18 02 PM

After:
https://www.loom.com/share/1c6aa8e7279b4e3faf62dd47f3811159?sid=3bdcdc93-7e69-4a2a-8181-37871a073847

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  • Are there environment variables that should be set?
  • What are the minimal test data to have?
  • What is expected (happy path) to have (input and output)?
  • Any other important info that could help to test that PR

Checklist

  • I haven't checked if my changes generate no new warnings

@vercel
Copy link
Copy Markdown

vercel bot commented Aug 15, 2025

@keerthikumanduri is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Aug 15, 2025

Walkthrough

The PR adds a redirect-app utility (REDIRECT_APPS and isRedirectApp). AppCard.tsx and AppPage.tsx now check isRedirectApp(slug) and, for redirect apps, render a "Visit" button with an external-link icon that triggers the existing install mutation ({ type, variant, slug }) and returns early, bypassing the normal onboarding/install flow. Adds "visit": "Visit" to the English locales.

Assessment against linked issues

Objective Addressed Explanation
Rename “Install App” to “Visit” for redirect apps [#16707, CAL-4364]
Skip app onboarding for redirect apps [#16707, CAL-4364]
Make the button an external link (opens external destination) for redirect apps [#16707, CAL-4364] No explicit navigation (anchor href, window.open, or location change) is invoked; code only calls the install mutation.

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 91f09ce and 3043a84.

📒 Files selected for processing (3)
  • apps/web/components/apps/AppPage.tsx (3 hunks)
  • apps/web/public/static/locales/en/common.json (1 hunks)
  • packages/features/apps/components/AppCard.tsx (5 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • apps/web/public/static/locales/en/common.json
  • apps/web/components/apps/AppPage.tsx
  • packages/features/apps/components/AppCard.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: Tests / Unit
  • GitHub Check: Type check / check-types
  • GitHub Check: Linters / lint
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

  • Visit our Status Page to check the current availability of CodeRabbit.
  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Aug 15, 2025
@graphite-app graphite-app bot requested a review from a team August 15, 2025 05:55
@github-actions github-actions bot added devin Created by Linear-GitHub Sync Low priority Created by Linear-GitHub Sync ui area: UI, frontend, button, form, input 🧹 Improvements Improvements to existing features. Mostly UX/UI labels Aug 15, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Aug 15, 2025

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "skip onboarding and fix UI for redirect apps". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

@graphite-app
Copy link
Copy Markdown

graphite-app bot commented Aug 15, 2025

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (08/15/25)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (08/15/25)

1 label was added to this PR based on Keith Williams's automation.

@dosubot dosubot bot added the app-store area: app store, apps, calendar integrations, google calendar, outlook, lark, apple calendar label Aug 15, 2025
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (4)
packages/app-store/_utils/redirectApps.ts (2)

1-20: Centralize and optimize redirect app lookup (optional)

Current approach is fine for a small list. For readability/maintainability and O(1) lookup, consider freezing the list and using a Set.

Apply this diff:

-export const REDIRECT_APPS = [
+export const REDIRECT_APPS = [
   "amie",
   "autocheckin",
   "bolna",
   "chatbase",
   "clic",
   "deel",
   "elevenlabs",
   "granola",
   "greetmate-ai",
   "lindy",
   "linear",
   "millis-ai",
   "monobot",
   "retell-ai",
   "synthflow",
   "telli",
   "vimcal",
   "wordpress",
-];
+] as const;
+
+const REDIRECT_APPS_SET = new Set<string>(REDIRECT_APPS);
 
 export const isRedirectApp = (slug: string): boolean => {
-  return REDIRECT_APPS.includes(slug);
+  return REDIRECT_APPS_SET.has(slug);
 };

1-20: Consider documenting the source of truth

A brief comment on why these slugs are “redirect apps” and how they’re updated (code vs. config vs. backend) will help future contributors.

apps/web/components/apps/AppPage.tsx (1)

193-205: Consistent “Visit” UX with external-link icon

Rendering a dedicated Visit button with an external-link icon meets the “rename Install to Visit and make it an external link” requirement. Consider reusing InstallAppButtonChild (if feasible) for consistent styles/behavior with cards, but not strictly necessary.

packages/features/apps/components/AppCard.tsx (1)

204-221: Add a test id to the Visit button for E2E stability (optional)

Adding a data-testid helps keep UI tests robust when asserting redirect-app behavior.

Apply this diff:

   if (isRedirect) {
     return (
       <Button
         color="secondary"
         className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
         StartIcon="external-link"
+        data-testid="visit-app-button"
         {...props}
         size="base">
         {t("APPSTORE_VISIT")}
       </Button>
     );
   }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

  • MCP integration is disabled by default for public repositories
  • Jira integration is disabled by default for public repositories
  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 0af62da and 2524369.

📒 Files selected for processing (4)
  • apps/web/components/apps/AppPage.tsx (3 hunks)
  • apps/web/public/static/locales/en/common.json (1 hunks)
  • packages/app-store/_utils/redirectApps.ts (1 hunks)
  • packages/features/apps/components/AppCard.tsx (5 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.ts

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

**/*.ts: For Prisma queries, only select data you need; never use include, always use select
Ensure the credential.key field is never returned from tRPC endpoints or APIs

Files:

  • packages/app-store/_utils/redirectApps.ts
**/*.{ts,tsx}

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js .utc() in hot paths like loops

Files:

  • packages/app-store/_utils/redirectApps.ts
  • apps/web/components/apps/AppPage.tsx
  • packages/features/apps/components/AppCard.tsx
**/*.tsx

📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)

Always use t() for text localization in frontend code; direct text embedding should trigger a warning

Files:

  • apps/web/components/apps/AppPage.tsx
  • packages/features/apps/components/AppCard.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.
📚 Learning: 2025-07-21T21:33:23.371Z
Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.

Applied to files:

  • apps/web/components/apps/AppPage.tsx
🧬 Code Graph Analysis (2)
apps/web/components/apps/AppPage.tsx (1)
packages/app-store/_utils/redirectApps.ts (1)
  • isRedirectApp (22-24)
packages/features/apps/components/AppCard.tsx (2)
packages/app-store/_utils/redirectApps.ts (1)
  • isRedirectApp (22-24)
apps/web/components/apps/InstallAppButtonChild.tsx (1)
  • InstallAppButtonChild (7-46)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Install dependencies / Yarn install & cache
🔇 Additional comments (4)
apps/web/public/static/locales/en/common.json (1)

3475-3475: LGTM: Added APPSTORE_VISIT key

The new translation key is correctly added above the sentinel to avoid merge conflicts and is used via t("APPSTORE_VISIT").

apps/web/components/apps/AppPage.tsx (1)

115-121: Redirect apps: correctly bypass onboarding

Early-returning for redirect apps and invoking the mutation satisfies “skip onboarding” for these apps. isLoading is set to provide feedback—nice.

packages/features/apps/components/AppCard.tsx (2)

59-63: Redirect apps: correctly bypass onboarding from cards

The early return path triggers the mutation and exits, skipping the standard flow as intended.


156-158: Propagating isRedirect to the button child keeps rendering logic clean

Passing isRedirect to InstallAppButtonChild centralizes the label/icon logic. Good separation of concerns.

Also applies to: 180-182

@keerthikumanduri keerthikumanduri changed the title skip onboarding and fix UI for redirect apps feat: skip onboarding and fix UI for redirect apps Aug 15, 2025
@anikdhabal anikdhabal enabled auto-merge (squash) September 2, 2025 04:27
Copy link
Copy Markdown
Contributor

@anikdhabal anikdhabal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

@anikdhabal anikdhabal merged commit 6c069a4 into calcom:main Sep 2, 2025
52 of 58 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Sep 2, 2025

E2E results are ready!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app-store area: app store, apps, calendar integrations, google calendar, outlook, lark, apple calendar community Created by Linear-GitHub Sync devin Created by Linear-GitHub Sync 🧹 Improvements Improvements to existing features. Mostly UX/UI Low priority Created by Linear-GitHub Sync ready-for-e2e ui area: UI, frontend, button, form, input

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CAL-4364] for redirect apps, rename "Install App" to "Visit" and skip "App Onboarding"

2 participants