From dc3df122e208c44e30646348f6810910cd95be2b Mon Sep 17 00:00:00 2001 From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Date: Thu, 20 Nov 2025 13:02:01 -0500 Subject: [PATCH] feat: Add configurable trial days to org subscriptions + wizard warning (#25229) * feat: Add trial days to organization subscriptions and workspace warning - Add ORGANIZATION_TRIAL_DAYS environment variable for configurable trial periods - Implement trial days in Stripe checkout session (only when env var is set) - Add warning message to organization setup page about workspace structure - Add translation string for organization trial workspace warning - Add ORGANIZATION_TRIAL_DAYS to turbo.json env vars - Fix pre-existing linting warnings in CreateANewOrganizationForm.tsx - Add ESLint disable comments for turbo/no-undeclared-env-vars warnings Co-Authored-By: joe@cal.com * Rename variable * Add trial days to `purchaseTeamOrOrgSubscription` * fix: Move organization trial warning to spot 3 below form card - Add optional footer prop to WizardLayout component - Use footer prop in create-new-view.tsx to render warning at spot 3 - Remove warning from inside CreateANewOrganizationForm component - Warning now appears below the form card as requested Co-Authored-By: joe@cal.com * feat: Add organization trial warning to all wizard steps - Add warning footer to step 2 (about-view.tsx) - Add warning footer to step 3 (add-teams-view.tsx) - Add warning footer to step 4 (onboard-members-view.tsx) - Add warning footer to step 5 (payment-status-view.tsx) - Add warning footer to resume-view.tsx (step 1 resume page) - Warning now appears on all steps of the organization creation wizard Co-Authored-By: joe@cal.com * fix: Correct environment variable name to STRIPE_ORG_TRIAL_DAYS - Changed ORGANIZATION_TRIAL_DAYS to STRIPE_ORG_TRIAL_DAYS in turbo.json - This matches the actual usage in OrganizationPaymentService.ts and payments.ts - Ensures the environment variable is properly recognized by the build system Co-Authored-By: joe@cal.com * refactor: Create shared OrganizationWizardLayout component - Create OrganizationWizardLayout component that wraps WizardLayout - Centralizes the trial warning footer logic in one place - Update all 6 wizard pages to use the shared component: - create-new-view.tsx - about-view.tsx - add-teams-view.tsx - onboard-members-view.tsx - payment-status-view.tsx - resume-view.tsx - Remove duplicate useLocale/Alert imports and footer props from pages - Simplifies maintenance by having warning logic in a single location Co-Authored-By: joe@cal.com * Fix lint error * Add `ORG_TRIAL_DAYS` as constant * Add comment * Ensure no negative number is passed --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> --- .env.example | 2 ++ .../_components/OrganizationWizardLayout.tsx | 35 +++++++++++++++++++ .../settings/organizations/new/about-view.tsx | 9 ++--- .../organizations/new/add-teams-view.tsx | 9 ++--- .../organizations/new/create-new-view.tsx | 9 ++--- .../new/onboard-members-view.tsx | 9 ++--- .../organizations/new/payment-status-view.tsx | 10 ++---- .../organizations/new/resume-view.tsx | 9 ++--- apps/web/public/static/locales/en/common.json | 1 + .../components/CreateANewOrganizationForm.tsx | 7 ++-- .../lib/OrganizationPaymentService.ts | 9 +++++ packages/features/ee/teams/lib/payments.ts | 2 ++ packages/lib/constants.ts | 4 +++ .../ui/components/layout/WizardLayout.tsx | 6 ++-- turbo.json | 2 ++ 15 files changed, 77 insertions(+), 46 deletions(-) create mode 100644 apps/web/modules/settings/organizations/new/_components/OrganizationWizardLayout.tsx diff --git a/.env.example b/.env.example index ea6231b16c..55cd989970 100644 --- a/.env.example +++ b/.env.example @@ -214,6 +214,8 @@ STRIPE_TEAM_PRODUCT_ID= # It is a price ID in the product with id STRIPE_ORG_PRODUCT_ID STRIPE_ORG_MONTHLY_PRICE_ID= STRIPE_ORG_PRODUCT_ID= +# Used to pass trial days for orgs during the Stripe checkout session +STRIPE_ORG_TRIAL_DAYS= STRIPE_WEBHOOK_SECRET= STRIPE_WEBHOOK_SECRET_APPS= diff --git a/apps/web/modules/settings/organizations/new/_components/OrganizationWizardLayout.tsx b/apps/web/modules/settings/organizations/new/_components/OrganizationWizardLayout.tsx new file mode 100644 index 0000000000..adee177bcc --- /dev/null +++ b/apps/web/modules/settings/organizations/new/_components/OrganizationWizardLayout.tsx @@ -0,0 +1,35 @@ +"use client"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Alert } from "@calcom/ui/components/alert"; +import { WizardLayout } from "@calcom/ui/components/layout"; + +interface OrganizationWizardLayoutProps { + children: React.ReactNode; + currentStep: number; + maxSteps?: number; + isOptionalCallback?: () => void; + footer?: React.ReactNode; +} + +export function OrganizationWizardLayout({ + children, + currentStep, + maxSteps = 5, + isOptionalCallback, + footer, +}: OrganizationWizardLayoutProps) { + const { t } = useLocale(); + + const defaultFooter = ; + + return ( + + {children} + + ); +} diff --git a/apps/web/modules/settings/organizations/new/about-view.tsx b/apps/web/modules/settings/organizations/new/about-view.tsx index c1d58b3081..385d50a084 100644 --- a/apps/web/modules/settings/organizations/new/about-view.tsx +++ b/apps/web/modules/settings/organizations/new/about-view.tsx @@ -1,14 +1,11 @@ "use client"; import { AboutOrganizationForm } from "@calcom/features/ee/organizations/components"; -import { WizardLayout } from "@calcom/ui/components/layout"; + +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; export default AboutOrganizationForm; diff --git a/apps/web/modules/settings/organizations/new/add-teams-view.tsx b/apps/web/modules/settings/organizations/new/add-teams-view.tsx index 5c471bef9d..0130e843de 100644 --- a/apps/web/modules/settings/organizations/new/add-teams-view.tsx +++ b/apps/web/modules/settings/organizations/new/add-teams-view.tsx @@ -1,15 +1,10 @@ "use client"; -import { WizardLayout } from "@calcom/ui/components/layout"; - import { AddNewTeamsForm } from "./_components/AddNewTeamsForm"; +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; export default AddNewTeamsForm; diff --git a/apps/web/modules/settings/organizations/new/create-new-view.tsx b/apps/web/modules/settings/organizations/new/create-new-view.tsx index 395669b427..0c47983835 100644 --- a/apps/web/modules/settings/organizations/new/create-new-view.tsx +++ b/apps/web/modules/settings/organizations/new/create-new-view.tsx @@ -3,9 +3,10 @@ import { CreateANewOrganizationForm } from "@calcom/features/ee/organizations/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Alert } from "@calcom/ui/components/alert"; -import { WizardLayout } from "@calcom/ui/components/layout"; import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes"; +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; + export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { const { t } = useLocale(); const { isPlatformUser } = useGetUserAttributes(); @@ -20,11 +21,7 @@ export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { ); } - return ( - - {children} - - ); + return {children}; }; export default CreateANewOrganizationForm; diff --git a/apps/web/modules/settings/organizations/new/onboard-members-view.tsx b/apps/web/modules/settings/organizations/new/onboard-members-view.tsx index cfb7417609..293451e158 100644 --- a/apps/web/modules/settings/organizations/new/onboard-members-view.tsx +++ b/apps/web/modules/settings/organizations/new/onboard-members-view.tsx @@ -1,15 +1,10 @@ "use client"; -import { WizardLayout } from "@calcom/ui/components/layout"; - import AddNewTeamMembers from "./_components/OnboardMembersView"; +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; export default AddNewTeamMembers; diff --git a/apps/web/modules/settings/organizations/new/payment-status-view.tsx b/apps/web/modules/settings/organizations/new/payment-status-view.tsx index 47f9ebd0bb..4fb5c57d11 100644 --- a/apps/web/modules/settings/organizations/new/payment-status-view.tsx +++ b/apps/web/modules/settings/organizations/new/payment-status-view.tsx @@ -1,15 +1,11 @@ "use client"; -import { WizardLayout } from "@calcom/ui/components/layout"; - import PaymentStatusView from "~/settings/organizations/new/_components/PaymentStatusView"; +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; + export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; export default PaymentStatusView; diff --git a/apps/web/modules/settings/organizations/new/resume-view.tsx b/apps/web/modules/settings/organizations/new/resume-view.tsx index 84fe7b9fab..f692b878cd 100644 --- a/apps/web/modules/settings/organizations/new/resume-view.tsx +++ b/apps/web/modules/settings/organizations/new/resume-view.tsx @@ -6,15 +6,12 @@ import { useEffect } from "react"; import { useOnboarding } from "@calcom/features/ee/organizations/lib/onboardingStore"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Alert } from "@calcom/ui/components/alert"; -import { WizardLayout } from "@calcom/ui/components/layout"; import { SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton"; +import { OrganizationWizardLayout } from "./_components/OrganizationWizardLayout"; + export const LayoutWrapper = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); + return {children}; }; const ResumeOnboardingView = () => { diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 305cc18367..34643b62a3 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -2501,6 +2501,7 @@ "currency": "Currency", "organization_banner_description": "Create an environment where your teams can create shared apps, workflows and event types with round-robin and collective scheduling.", "organization_banner_title": "Manage organizations with multiple teams", + "organization_trial_workspace_warning": "This trial uses the Organizations workspace structure. Your current data will move with you into Organizations, but it won't transfer back if you switch to Teams later. If you prefer Teams again in the future, you can create a new team.", "set_up_your_organization": "Set up your organization", "set_up_your_platform_organization": "Set up your platform", "organizations_description": "Organizations are shared environments where teams can create shared event types, apps, workflows and more.", diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx index eb2afa6ced..0d4fb27f01 100644 --- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx +++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx @@ -25,11 +25,8 @@ import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio"; import { useOnboarding } from "../lib/onboardingStore"; function extractDomainFromEmail(email: string) { - let out = ""; - try { - const match = email.match(/^(?:.*?:\/\/)?.*?([\w\-]*(?:\.\w{2,}|\.\w{2,}\.\w{2}))(?:[\/?#:]|$)/); - out = (match && match[1]) ?? ""; - } catch (ignore) {} + const match = email.match(/^(?:.*?:\/\/)?.*?([\w-]*(?:\.\w{2,}|\.\w{2,}\.\w{2}))(?:[/?#:]|$)/); + const out = (match && match[1]) ?? ""; return out.split(".")[0]; } diff --git a/packages/features/ee/organizations/lib/OrganizationPaymentService.ts b/packages/features/ee/organizations/lib/OrganizationPaymentService.ts index 639be238de..334f960dcc 100644 --- a/packages/features/ee/organizations/lib/OrganizationPaymentService.ts +++ b/packages/features/ee/organizations/lib/OrganizationPaymentService.ts @@ -5,6 +5,7 @@ import { ORGANIZATION_SELF_SERVE_MIN_SEATS, ORGANIZATION_SELF_SERVE_PRICE, WEBAPP_URL, + ORG_TRIAL_DAYS, } from "@calcom/lib/constants"; import logger from "@calcom/lib/logger"; import { safeStringify } from "@calcom/lib/safeStringify"; @@ -277,6 +278,13 @@ export class OrganizationPaymentService { organizationOnboardingId, }) ); + + const subscriptionData = ORG_TRIAL_DAYS + ? { + trial_period_days: ORG_TRIAL_DAYS, + } + : undefined; + return this.billingService.createSubscriptionCheckout({ customerId: stripeCustomerId, successUrl: `${WEBAPP_URL}/settings/organizations/new/status?session_id={CHECKOUT_SESSION_ID}&paymentStatus=success&${params.toString()}`, @@ -289,6 +297,7 @@ export class OrganizationPaymentService { pricePerSeat: config.pricePerSeat, billingPeriod: config.billingPeriod, }, + ...(subscriptionData && { subscriptionData }), }); } diff --git a/packages/features/ee/teams/lib/payments.ts b/packages/features/ee/teams/lib/payments.ts index 79111c9af1..1c6129a049 100644 --- a/packages/features/ee/teams/lib/payments.ts +++ b/packages/features/ee/teams/lib/payments.ts @@ -10,6 +10,7 @@ import { ORGANIZATION_SELF_SERVE_MIN_SEATS, ORGANIZATION_SELF_SERVE_PRICE, WEBAPP_URL, + ORG_TRIAL_DAYS, } from "@calcom/lib/constants"; import logger from "@calcom/lib/logger"; import { safeStringify } from "@calcom/lib/safeStringify"; @@ -198,6 +199,7 @@ export const purchaseTeamOrOrgSubscription = async (input: { teamId, dubCustomerId: userId, }, + ...(isOrg && ORG_TRIAL_DAYS && { trial_period_days: ORG_TRIAL_DAYS }), }, }); return { url: session.url }; diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts index a797fe80f7..eeb1e1bf95 100644 --- a/packages/lib/constants.ts +++ b/packages/lib/constants.ts @@ -254,3 +254,7 @@ export const RETELL_AI_TEST_EVENT_TYPE_MAP = (() => { /* This is an internal environment variable and is not meant to be used by the self-hosters. It is planned to be removed later by either having it as an option in Event Type or by some other customer configurable approaches*/ export const ENV_PAST_BOOKING_RESCHEDULE_CHANGE_TEAM_IDS = process.env._CAL_INTERNAL_PAST_BOOKING_RESCHEDULE_CHANGE_TEAM_IDS; + +export const ORG_TRIAL_DAYS = process.env.STRIPE_ORG_TRIAL_DAYS + ? Math.max(0, parseInt(process.env.STRIPE_ORG_TRIAL_DAYS, 10)) + : null; diff --git a/packages/ui/components/layout/WizardLayout.tsx b/packages/ui/components/layout/WizardLayout.tsx index fddd717828..5506495c73 100644 --- a/packages/ui/components/layout/WizardLayout.tsx +++ b/packages/ui/components/layout/WizardLayout.tsx @@ -1,6 +1,6 @@ "use client"; -// eslint-disable-next-line no-restricted-imports + import { usePathname } from "next/navigation"; import React, { useEffect, useState } from "react"; import { Toaster } from "sonner"; @@ -18,9 +18,10 @@ export function WizardLayout({ maxSteps = 2, currentStep = 0, isOptionalCallback, + footer, }: { children: React.ReactNode; -} & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void }) { +} & { maxSteps?: number; currentStep?: number; isOptionalCallback?: () => void; footer?: React.ReactNode }) { const { t, isLocaleReady } = useLocale(); const [meta, setMeta] = useState({ title: "", subtitle: " " }); const pathname = usePathname(); @@ -60,6 +61,7 @@ export function WizardLayout({ {children} + {footer &&
{footer}
} {isOptionalCallback && ( diff --git a/turbo.json b/turbo.json index 1f3be4b7e5..73e65bc9a6 100644 --- a/turbo.json +++ b/turbo.json @@ -184,6 +184,7 @@ "STRIPE_TEAM_PRODUCT_ID", "STRIPE_ORG_MONTHLY_PRICE_ID", "STRIPE_ORG_PRODUCT_ID", + "STRIPE_ORG_TRIAL_DAYS", "ORG_MONTHLY_CREDITS", "TANDEM_BASE_URL", "TANDEM_CLIENT_ID", @@ -345,6 +346,7 @@ "ORG_MONTHLY_CREDITS", "STRIPE_ORG_MONTHLY_PRICE_ID", "STRIPE_ORG_PRODUCT_ID", + "STRIPE_ORG_TRIAL_DAYS", "NEXT_PUBLIC_API_V2_URL", "NEXT_PUBLIC_VAPID_PUBLIC_KEY", "NEXT_PUBLIC_SENTRY_DSN_CLIENT",