feat: Add configurable trial days to org subscriptions + wizard warning

.env.example

@@ -214,6 +214,7 @@ 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=
+STRIPE_ORG_TRIAL_DAYS=
 
 STRIPE_WEBHOOK_SECRET=
 STRIPE_WEBHOOK_SECRET_APPS=

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 = <Alert severity="warning" message={t("organization_trial_workspace_warning")} />;
+
+  return (
+    <WizardLayout
+      currentStep={currentStep}
+      maxSteps={maxSteps}
+      isOptionalCallback={isOptionalCallback}
+      footer={footer ?? defaultFooter}>
+      {children}
+    </WizardLayout>
+  );
+}

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 (
-    <WizardLayout currentStep={2} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={2}>{children}</OrganizationWizardLayout>;
 };
 
 export default AboutOrganizationForm;

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 (
-    <WizardLayout currentStep={3} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={3}>{children}</OrganizationWizardLayout>;
 };
 
 export default AddNewTeamsForm;

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 (
-    <WizardLayout currentStep={1} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={1}>{children}</OrganizationWizardLayout>;
 };
 
 export default CreateANewOrganizationForm;

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 (
-    <WizardLayout currentStep={4} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={4}>{children}</OrganizationWizardLayout>;
 };
 
 export default AddNewTeamMembers;

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 (
-    <WizardLayout currentStep={5} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={5}>{children}</OrganizationWizardLayout>;
 };
 
 export default PaymentStatusView;

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 (
-    <WizardLayout currentStep={1} maxSteps={5}>
-      {children}
-    </WizardLayout>
-  );
+  return <OrganizationWizardLayout currentStep={1}>{children}</OrganizationWizardLayout>;
 };
 
 const ResumeOnboardingView = () => {

apps/web/public/static/locales/en/common.json

@@ -2490,6 +2490,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.",

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];
 }
 

packages/features/ee/organizations/lib/OrganizationPaymentService.ts

@@ -276,6 +276,18 @@ export class OrganizationPaymentService {
         organizationOnboardingId,
       })
     );
+
+    const trialDays = process.env.STRIPE_ORG_TRIAL_DAYS
+      ? parseInt(process.env.STRIPE_ORG_TRIAL_DAYS, 10)
+      : undefined;
+
+    const subscriptionData =
+      trialDays && !isNaN(trialDays) && trialDays > 0
+        ? {
+            trial_period_days: trialDays,
+          }
+        : undefined;
+
     return this.billingService.createSubscriptionCheckout({
       customerId: stripeCustomerId,
       successUrl: `${WEBAPP_URL}/settings/organizations/new/status?session_id={CHECKOUT_SESSION_ID}&paymentStatus=success&${params.toString()}`,
@@ -288,6 +300,7 @@ export class OrganizationPaymentService {
         pricePerSeat: config.pricePerSeat,
         billingPeriod: config.billingPeriod,
       },
+      ...(subscriptionData && { subscriptionData }),
     });
   }
 

packages/features/ee/teams/lib/payments.ts

@@ -171,6 +171,10 @@ export const purchaseTeamOrOrgSubscription = async (input: {
     priceId = fixedPrice as string;
   }
 
+  const orgTrialDays = process.env.STRIPE_ORG_TRIAL_DAYS
+    ? parseInt(process.env.STRIPE_ORG_TRIAL_DAYS)
+    : null;
+
   const session = await stripe.checkout.sessions.create({
     customer,
     mode: "subscription",
@@ -198,6 +202,7 @@ export const purchaseTeamOrOrgSubscription = async (input: {
         teamId,
         dubCustomerId: userId,
       },
+      ...(isOrg && !!orgTrialDays && { trial_period_days: orgTrialDays }),
     },
   });
   return { url: session.url };

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({
               <Steps maxSteps={maxSteps} currentStep={currentStep} disableNavigation />
             </div>
             <StepCard>{children}</StepCard>
+            {footer && <div className="mt-4">{footer}</div>}
           </div>
         </div>
         {isOptionalCallback && (

turbo.json

@@ -182,6 +182,8 @@
     "STRIPE_TEAM_MONTHLY_PRICE_ID",
     "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",
@@ -343,6 +345,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",