feat: standalone page config to use in companion (#27018)

* feat: hide navigation when ?standalone=true URL parameter is present Co-Authored-By: peer@cal.com <peer@cal.com> * feat: standalone page config to use in companion --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: peer@cal.com <peer@cal.com>
2026-01-19 19:27:14 +00:00
parent adc198b37b
commit da91152365
7 changed files with 107 additions and 9 deletions
@@ -22,6 +22,7 @@ import { HOSTED_CAL_FEATURES, IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constant
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { IdentityProvider, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
@@ -1012,6 +1013,9 @@ const SettingsSidebarContainer = ({
 const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) => {
  const { t } = useLocale();
  const router = useRouter();
+  const isStandalone = useIsStandalone();
+
+  if (isStandalone) return null;

  return (
    <>
@@ -8,6 +8,7 @@ import { getBookerBaseUrlSync } from "@calcom/features/ee/organizations/lib/getB
 import { useFlagMap } from "@calcom/features/flags/context/provider";
 import { IS_VISUAL_REGRESSION_TESTING, ENABLE_PROFILE_SWITCHER } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { UserPermissionRole } from "@calcom/prisma/enums";
 import classNames from "@calcom/ui/classNames";
@@ -43,11 +44,13 @@ export type SideBarProps = {

 export function SideBarContainer({ bannersHeight, isPlatformUser = false }: SideBarContainerProps) {
  const { status, data } = useSession();
+  const isStandalone = useIsStandalone();

  // Make sure that Sidebar is rendered optimistically so that a refresh of pages when logged in have SideBar from the beginning.
  // This improves the experience of refresh on app store pages(when logged in) which are SSG.
  // Though when logged out, app store pages would temporarily show SideBar until session status is confirmed.
  if (status !== "loading" && status !== "authenticated") return null;
+  if (isStandalone) return null;
  return <SideBar isPlatformUser={isPlatformUser} bannersHeight={bannersHeight} user={data?.user} />;
 }

@@ -2,6 +2,7 @@ import { useSession } from "next-auth/react";
 import Link from "next/link";

 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/components/icon";
 import { Logo } from "@calcom/ui/components/logo";
@@ -11,7 +12,8 @@ import { UserDropdown } from "./user-dropdown/UserDropdown";

 export function TopNavContainer() {
  const { status } = useSession();
-  if (status !== "authenticated") return null;
+  const isStandalone = useIsStandalone();
+  if (status !== "authenticated" || isStandalone) return null;
  return <TopNav />;
 }

@@ -6,6 +6,7 @@ import {
  useOrgBranding,
  type OrganizationBranding,
 } from "@calcom/features/ee/organizations/context/provider";
+import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import classNames from "@calcom/ui/classNames";
 import { useHasPaidPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";

@@ -230,7 +231,8 @@ export function MobileNavigationContainer({
  isPlatformNavigation?: boolean;
 }) {
  const { status } = useSession();
-  if (status !== "authenticated") return null;
+  const isStandalone = useIsStandalone();
+  if (status !== "authenticated" || isStandalone) return null;
  return <MobileNavigation isPlatformNavigation={isPlatformNavigation} />;
 }

@@ -6,6 +6,8 @@
 */

 import * as WebBrowser from "expo-web-browser";
+import { Platform } from "react-native";
+
 import { showErrorAlert } from "./alerts";

 /**
@@ -18,6 +20,41 @@ export interface BrowserOptions {
  controlsColor?: string;
 }

+/**
+ * Appends ?standalone=true to app.cal.com URLs on iOS.
+ * This hides navigation elements when pages are opened in the in-app browser,
+ * which is required for Apple App Store compliance.
+ *
+ * @param url - The URL to process
+ * @returns The URL with standalone=true appended if it's an app.cal.com URL on iOS
+ */
+const appendStandaloneParam = (url: string): string => {
+  // Only apply to iOS
+  if (Platform.OS !== "ios") {
+    return url;
+  }
+
+  try {
+    const urlObj = new URL(url);
+
+    // Only apply to app.cal.com URLs
+    if (urlObj.hostname !== "app.cal.com") {
+      return url;
+    }
+
+    // Don't add if already present
+    if (urlObj.searchParams.has("standalone")) {
+      return url;
+    }
+
+    urlObj.searchParams.set("standalone", "true");
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return url;
+  }
+};
+
 /**
 * Open a URL in the in-app browser with session sharing enabled.
 *
@@ -25,6 +62,9 @@ export interface BrowserOptions {
 * and Safari (iOS) or Chrome (Android). This means users who authenticate
 * via OAuth will remain logged in when opening Cal.com links.
 *
+ * On iOS, app.cal.com URLs automatically get ?standalone=true appended
+ * to hide navigation elements for Apple App Store compliance.
+ *
 * @param url - The URL to open
 * @param fallbackMessage - Optional message to show in error alert (defaults to "link")
 * @param options - Optional browser customization options
@@ -47,6 +87,9 @@ export const openInAppBrowser = async (
  options?: BrowserOptions
 ): Promise<void> => {
  try {
+    // Append standalone=true for app.cal.com URLs on iOS
+    const processedUrl = appendStandaloneParam(url);
+
    // Configure browser options
    // Session sharing happens automatically when using Safari View Controller (iOS)
    // or Chrome Custom Tabs (Android) - no special configuration needed
@@ -55,7 +98,7 @@ export const openInAppBrowser = async (
      ...(options?.controlsColor && { controlsColor: options.controlsColor }),
    };

-    await WebBrowser.openBrowserAsync(url, browserOptions);
+    await WebBrowser.openBrowserAsync(processedUrl, browserOptions);
  } catch (error) {
    console.error("Failed to open link");
    if (__DEV__) {
@@ -7,7 +7,8 @@
 */
 import * as Linking from "expo-linking";
 import * as WebBrowser from "expo-web-browser";
-import { Alert } from "react-native";
+import { Alert, Platform } from "react-native";
+
 import { showErrorAlert } from "@/utils/alerts";

 // Default Cal.com web URL - can be overridden for self-hosted instances
@@ -22,6 +23,41 @@ function getCalWebUrl(): string {
  return DEFAULT_CAL_WEB_URL;
 }

+/**
+ * Appends ?standalone=true to Cal.com URLs on iOS.
+ * This hides navigation elements when pages are opened in the in-app browser,
+ * which is required for Apple App Store compliance.
+ *
+ * @param url - The URL to process
+ * @returns The URL with standalone=true appended if it's a Cal.com URL on iOS
+ */
+function appendStandaloneParam(url: string): string {
+  // Only apply to iOS
+  if (Platform.OS !== "ios") {
+    return url;
+  }
+
+  try {
+    const urlObj = new URL(url);
+
+    // Only apply to app.cal.com URLs
+    if (urlObj.hostname !== "app.cal.com") {
+      return url;
+    }
+
+    // Don't add if already present
+    if (urlObj.searchParams.has("standalone")) {
+      return url;
+    }
+
+    urlObj.searchParams.set("standalone", "true");
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return url;
+  }
+}
+
 /**
 * Open a booking detail page in the web browser.
 * This is used for actions that require the full web experience.
@@ -30,7 +66,7 @@ function getCalWebUrl(): string {
 */
 export async function openBookingInWeb(bookingUid: string): Promise<void> {
  const webUrl = getCalWebUrl();
-  const url = `${webUrl}/booking/${bookingUid}`;
+  const url = appendStandaloneParam(`${webUrl}/booking/${bookingUid}`);

  try {
    await WebBrowser.openBrowserAsync(url, {
@@ -86,9 +122,9 @@ export async function openReschedulePage(
  rescheduleUid?: string
 ): Promise<void> {
  const webUrl = getCalWebUrl();
-  const url = rescheduleUid
-    ? `${webUrl}/reschedule/${rescheduleUid}`
-    : `${webUrl}/booking/${bookingUid}`;
+  const url = appendStandaloneParam(
+    rescheduleUid ? `${webUrl}/reschedule/${rescheduleUid}` : `${webUrl}/booking/${bookingUid}`
+  );

  try {
    await WebBrowser.openBrowserAsync(url, {
@@ -112,7 +148,7 @@ export async function openReschedulePage(
 */
 export async function openCancelBookingInWeb(bookingUid: string): Promise<void> {
  const webUrl = getCalWebUrl();
-  const url = `${webUrl}/booking/${bookingUid}`;
+  const url = appendStandaloneParam(`${webUrl}/booking/${bookingUid}`);

  try {
    await WebBrowser.openBrowserAsync(url, {
@@ -0,0 +1,8 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+export const useIsStandalone = () => {
+  const searchParams = useSearchParams();
+  return searchParams?.get("standalone") === "true";
+};