diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx index 61b40b91c0..70f7d4ed83 100644 --- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx +++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx @@ -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 ( <> diff --git a/apps/web/modules/shell/SideBar.tsx b/apps/web/modules/shell/SideBar.tsx index 7efba9da27..fdda366c27 100644 --- a/apps/web/modules/shell/SideBar.tsx +++ b/apps/web/modules/shell/SideBar.tsx @@ -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 ; } diff --git a/apps/web/modules/shell/TopNav.tsx b/apps/web/modules/shell/TopNav.tsx index 5e7930ebb8..716c9813c6 100644 --- a/apps/web/modules/shell/TopNav.tsx +++ b/apps/web/modules/shell/TopNav.tsx @@ -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 ; } diff --git a/apps/web/modules/shell/navigation/Navigation.tsx b/apps/web/modules/shell/navigation/Navigation.tsx index 6d918fd3a4..62b71a81e1 100644 --- a/apps/web/modules/shell/navigation/Navigation.tsx +++ b/apps/web/modules/shell/navigation/Navigation.tsx @@ -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 ; } diff --git a/companion/utils/browser.ts b/companion/utils/browser.ts index eecfddff97..40b906a100 100644 --- a/companion/utils/browser.ts +++ b/companion/utils/browser.ts @@ -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 => { 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__) { diff --git a/companion/utils/deep-links.ts b/companion/utils/deep-links.ts index 0b2943ff02..39b1879360 100644 --- a/companion/utils/deep-links.ts +++ b/companion/utils/deep-links.ts @@ -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 { 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 { 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 { const webUrl = getCalWebUrl(); - const url = `${webUrl}/booking/${bookingUid}`; + const url = appendStandaloneParam(`${webUrl}/booking/${bookingUid}`); try { await WebBrowser.openBrowserAsync(url, { diff --git a/packages/lib/hooks/useIsStandalone.ts b/packages/lib/hooks/useIsStandalone.ts new file mode 100644 index 0000000000..5bb5828346 --- /dev/null +++ b/packages/lib/hooks/useIsStandalone.ts @@ -0,0 +1,8 @@ +"use client"; + +import { useSearchParams } from "next/navigation"; + +export const useIsStandalone = () => { + const searchParams = useSearchParams(); + return searchParams?.get("standalone") === "true"; +};