fix: platform onboarding improvements (#15053)

* allow stripe to display promo codes option

* fix layout issues for tablet devices

* redirect platform users to new platform onboarding

apps/api/v2/src/modules/billing/services/billing.service.ts

@@ -75,6 +75,7 @@ export class BillingService {
             plan: plan.toString(),
           },
         },
+        allow_promotion_codes: true,
       });
 
       if (!url) throw new InternalServerErrorException("Failed to create Stripe session.");

apps/web/components/settings/platform/pricing/billing-card/index.tsx

@@ -18,9 +18,9 @@ export const PlatformBillingCard = ({
   handleSubscribe,
 }: PlatformBillingCardProps) => {
   return (
-    <div className="border-subtle w-auto rounded-md border p-5 lg:w-[350px]">
+    <div className="border-subtle mx-4 w-auto rounded-md border p-5 ">
       <div className="pb-5">
-        <h1 className="pb-3 text-xl font-semibold">{plan}</h1>
+        <h1 className="pb-3 pt-3 text-xl font-semibold">{plan}</h1>
         <p className="pb-5 text-base">{description}</p>
         <h1 className="text-3xl font-semibold">
           {pricing && (

apps/web/components/settings/platform/pricing/platform-pricing/index.tsx

@@ -27,26 +27,28 @@ export const PlatformPricing = ({ teamId }: PlatformPricingProps) => {
       <div className="mb-5 text-center text-2xl font-semibold">
         <h1>Subscribe to Platform</h1>
       </div>
-      <div className="flex flex-col flex-wrap gap-x-0 gap-y-5 md:flex-row md:gap-x-5 md:gap-y-5 lg:flex-nowrap">
-        {platformPlans.map((plan) => {
-          return (
-            <div key={plan.plan}>
-              <PlatformBillingCard
-                plan={plan.plan}
-                description={plan.description}
-                pricing={plan.pricing}
-                includes={plan.includes}
-                isLoading={isPending}
-                handleSubscribe={() => {
-                  !!teamId &&
-                    (plan.plan === "Enterprise"
-                      ? router.push("https://i.cal.com/sales/exploration")
-                      : mutateAsync({ plan: plan.plan.toLocaleUpperCase() }));
-                }}
-              />
-            </div>
-          );
-        })}
+      <div className="container mx-auto p-4">
+        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
+          {platformPlans.map((plan) => {
+            return (
+              <div key={plan.plan}>
+                <PlatformBillingCard
+                  plan={plan.plan}
+                  description={plan.description}
+                  pricing={plan.pricing}
+                  includes={plan.includes}
+                  isLoading={isPending}
+                  handleSubscribe={() => {
+                    !!teamId &&
+                      (plan.plan === "Enterprise"
+                        ? router.push("https://i.cal.com/sales/exploration")
+                        : mutateAsync({ plan: plan.plan.toLocaleUpperCase() }));
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );

apps/web/pages/signup.tsx

@@ -234,6 +234,7 @@ export default function Signup({
   };
 
   const isOrgInviteByLink = orgSlug && !prepopulateFormValues?.username;
+  const isPlatformUser = redirectUrl?.includes("platform") && redirectUrl?.includes("new");
 
   const signUp: SubmitHandler<FormValues> = async (_data) => {
     const { cfToken, ...data } = _data;
@@ -255,14 +256,35 @@ export default function Signup({
           pushGTMEvent("create_account", { email: data.email, user: data.username, lang: data.language });
 
         telemetry.event(telemetryEventTypes.signup, collectPageParameters());
+
         const verifyOrGettingStarted = emailVerificationEnabled ? "auth/verify-email" : "getting-started";
-        const callBackUrl = `${
-          searchParams?.get("callbackUrl")
-            ? isOrgInviteByLink
-              ? `${WEBAPP_URL}/${searchParams.get("callbackUrl")}`
-              : addOrUpdateQueryParam(`${WEBAPP_URL}/${searchParams.get("callbackUrl")}`, "from", "signup")
-            : `${WEBAPP_URL}/${verifyOrGettingStarted}?from=signup`
-        }`;
+        const gettingStartedWithPlatform = "settings/platform/new";
+
+        const constructCallBackIfUrlPresent = () => {
+          if (isOrgInviteByLink) {
+            return `${WEBAPP_URL}/${searchParams.get("callbackUrl")}`;
+          }
+
+          return addOrUpdateQueryParam(`${WEBAPP_URL}/${searchParams.get("callbackUrl")}`, "from", "signup");
+        };
+
+        const constructCallBackIfUrlNotPresent = () => {
+          if (!!isPlatformUser) {
+            return `${WEBAPP_URL}/${gettingStartedWithPlatform}?from=signup`;
+          }
+
+          return `${WEBAPP_URL}/${verifyOrGettingStarted}?from=signup`;
+        };
+
+        const constructCallBackUrl = () => {
+          const callbackUrlSearchParams = searchParams?.get("callbackUrl");
+
+          return !!callbackUrlSearchParams
+            ? constructCallBackIfUrlPresent()
+            : constructCallBackIfUrlNotPresent();
+        };
+
+        const callBackUrl = constructCallBackUrl();
 
         await signIn<"credentials">("credentials", {
           ...data,