feat: Self hosted onboarding (#22102)

* intro work

* update wixard form to have content callback to remove preset navigation

* more fixes to deployment

* fix calling static service

* fix save license key text

* ensure default steps work as expected

* fix conditional for rendering step

* skip step

* add on next step for free license

* refactor wizard form to use nuqs

* fix styles

* merge base param with step config

* fix next stepo text

* use deployment Signature token

* decrypt signature token

* fix: resolve type errors and test failures from wizard form refactor

- Fix signatureToken field name to signatureTokenEncrypted in deployment repository
- Add missing getSignatureToken method to verifyApiKey test mock
- Fix WizardForm import from default to named export in test file
- Add missing nextStep prop to Steps component in WizardForm

Resolves TypeScript type check errors and unit test failures without changing functionality.

Co-Authored-By: sean@cal.com <Sean@brydon.io>

* fix: add missing getDeploymentSignatureToken mock in LicenseKeyService test

Co-Authored-By: sean@cal.com <Sean@brydon.io>

* fix: add nuqs library mock for WizardForm test

Co-Authored-By: sean@cal.com <Sean@brydon.io>

* fix: add missing nav prop to AdminAppsList component with eslint disable

Co-Authored-By: sean@cal.com <Sean@brydon.io>

* Apply suggestions from code review

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

* Update apps/web/modules/auth/setup-view.tsx

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

* fix license schema changes

* revret schema generation

* fix eslint errors

* remove required nav type + add use client

* fix types

* Update packages/ui/components/form/wizard/useWizardState.ts

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

* fix controller issue

* add checks for deployment key being null - add more tests

* fix tests

* add deployment key tests

* fix: resolve crypto mock to handle empty encryption keys gracefully

- Updated symmetricDecrypt mock to return null instead of throwing 'Invalid key' error when encryption key is empty
- All getDeploymentKey tests now pass including the previously failing 'should return null when decryption fails due to missing encryption key' test
- Fixes mocking issues in PR 22102 self-hosted onboarding wizard form refactor

Co-Authored-By: sean@cal.com <Sean@brydon.io>

* fix label

* add i18n to error

* use enum for steps

* add as const

* fix test env issues

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

apps/web/components/setup/AdminUser.tsx

@@ -9,6 +9,7 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { emailRegex } from "@calcom/lib/emailSchema";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { EmailField, Label, TextField, PasswordField } from "@calcom/ui/components/form";
 
@@ -34,7 +35,12 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
   return <AdminUser {...props} />;
 };
 
-export const AdminUser = (props: { onSubmit: () => void; onError: () => void; onSuccess: () => void }) => {
+export const AdminUser = (props: {
+  onSubmit: () => void;
+  onError: () => void;
+  onSuccess: () => void;
+  nav: { onNext: () => void; onPrev: () => void };
+}) => {
   const { t } = useLocale();
 
   const formSchema = z.object({
@@ -118,7 +124,7 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
                 <TextField
                   addOnLeading={
                     !longWebsiteUrl && (
-                      <span className="text-subtle inline-flex items-center rounded-none px-3 text-sm">
+                      <span className="text-subtle inline-flex items-center rounded-none text-sm">
                         {process.env.NEXT_PUBLIC_WEBSITE_URL}/
                       </span>
                     )
@@ -187,6 +193,15 @@ export const AdminUser = (props: { onSubmit: () => void; onError: () => void; on
             )}
           />
         </div>
+        <div className="flex justify-end gap-2">
+          <Button
+            type="submit"
+            color="primary"
+            loading={formMethods.formState.isSubmitting}
+            disabled={!formMethods.formState.isValid || formMethods.formState.isSubmitting}>
+            {t("next")}
+          </Button>
+        </div>
       </form>
     </FormProvider>
   );

apps/web/components/setup/LicenseSelection.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import classNames from "classnames";
+import Link from "next/link";
+import { useCallback, useState } from "react";
+import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+import { TextField } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+
+type LicenseSelectionFormValues = {
+  licenseKey: string;
+  signatureToken?: string;
+};
+
+type LicenseOption = "FREE" | "EXISTING";
+
+const LicenseSelection = (
+  props: {
+    value: LicenseOption;
+    onChange: (value: LicenseOption) => void;
+    onSubmit: (value: LicenseSelectionFormValues) => void;
+    onSuccess?: (
+      data: RouterOutputs["viewer"]["deploymentSetup"]["update"],
+      variables: RouterInputs["viewer"]["deploymentSetup"]["update"]
+    ) => void;
+    onPrevStep: () => void;
+    onNextStep: () => void;
+  } & Omit<JSX.IntrinsicElements["form"], "onSubmit" | "onChange">
+) => {
+  const {
+    value: initialValue = "FREE",
+    onChange,
+    onSubmit,
+    onSuccess,
+    onPrevStep,
+    onNextStep,
+    ...rest
+  } = props;
+  const [value, setValue] = useState<LicenseOption>(initialValue);
+  const { t } = useLocale();
+  const mutation = trpc.viewer.deploymentSetup.update.useMutation({
+    onSuccess,
+  });
+
+  const [licenseKeyInput, setLicenseKeyInput] = useState("");
+  const [licenseTouched, setLicenseTouched] = useState(false);
+
+  // Use TRPC query for validation
+  const { data: licenseValidation, isLoading: checkLicenseLoading } =
+    trpc.viewer.deploymentSetup.validateLicense.useQuery(
+      { licenseKey: licenseKeyInput },
+      {
+        enabled: licenseTouched && licenseKeyInput.trim().length > 0,
+      }
+    );
+
+  const schemaLicenseKey = useCallback(
+    () =>
+      z.object({
+        licenseKey: z
+          .string()
+          .min(1, t("license_key_required"))
+          .refine(() => !licenseTouched || (licenseValidation ? licenseValidation.valid : true), {
+            message: licenseValidation?.message || t("invalid_license_key"),
+          }),
+        signatureToken: z.string().optional(),
+      }),
+    [licenseValidation, licenseTouched, t]
+  );
+
+  const formMethods = useForm<LicenseSelectionFormValues>({
+    defaultValues: {
+      licenseKey: "",
+      signatureToken: "",
+    },
+    resolver: zodResolver(schemaLicenseKey()),
+  });
+
+  const handleSubmit = formMethods.handleSubmit((values) => {
+    onSubmit(values);
+    if (value === "EXISTING" && values.licenseKey) {
+      mutation.mutate(values);
+    }
+  });
+
+  const { isDirty, errors } = useFormState(formMethods);
+
+  const handleRadioChange = (newValue: LicenseOption) => {
+    setValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <form
+      {...rest}
+      className="space-y-6"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (value === "FREE") {
+          onSubmit({ licenseKey: "", signatureToken: "" });
+        } else {
+          handleSubmit();
+        }
+      }}>
+      <RadioGroup.Root
+        defaultValue={initialValue}
+        value={value}
+        aria-label={t("choose_a_license")}
+        className="grid grid-rows-2 gap-4 md:grid-cols-2 md:grid-rows-1"
+        onValueChange={(value) => handleRadioChange(value as LicenseOption)}>
+        <RadioGroup.Item value="FREE" className="h-full">
+          <div
+            className={classNames(
+              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              value === "FREE" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
+            <p className="font-medium text-green-800">{t("free_license_fee")}</p>
+            <p className="text-subtle">{t("forever_open_and_free")}</p>
+            <ul className="text-subtle ml-4 list-disc text-left text-xs">
+              <li>{t("required_to_keep_your_code_open_source")}</li>
+              <li>{t("cannot_repackage_and_resell")}</li>
+              <li>{t("no_enterprise_features")}</li>
+            </ul>
+          </div>
+        </RadioGroup.Item>
+
+        <RadioGroup.Item value="EXISTING" className="h-full">
+          <div
+            className={classNames(
+              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              value === "EXISTING" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-emphasis text-xl">{t("enter_license_key")}</h2>
+            <p className="font-medium text-green-800">{t("enter_existing_license")}</p>
+            <p className="text-subtle">{t("enter_your_license_key")}</p>
+            <p className="text-subtle text-xs">
+              {t("need_a_license")}{" "}
+              <Link
+                href="https://go.cal.com/self-hosted"
+                target="_blank"
+                rel="noreferrer noopener"
+                className="text-blue-600 hover:underline">
+                {t("purchase_license")}
+              </Link>
+            </p>
+          </div>
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      {value === "EXISTING" && (
+        <FormProvider {...formMethods}>
+          <div className="bg-muted space-y-4 rounded-md px-4 py-3">
+            <div className="space-y-4">
+              <div>
+                <Controller
+                  name="licenseKey"
+                  control={formMethods.control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TextField
+                      name="licenseKey"
+                      label={t("license_key")}
+                      className={classNames(
+                        "group-hover:border-emphasis mb-0",
+                        (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
+                      )}
+                      placeholder="cal_live_XXXXXXXXXXX"
+                      value={licenseKeyInput}
+                      addOnClassname={classNames(
+                        "hover:border-default",
+                        errors.licenseKey === undefined && isDirty && "group-hover:border-emphasis"
+                      )}
+                      addOnSuffix={
+                        checkLicenseLoading ? (
+                          <Icon name="loader" className="h-5 w-5 animate-spin" />
+                        ) : licenseValidation?.valid && licenseTouched ? (
+                          <Icon name="check" className="h-5 w-5 text-green-700" />
+                        ) : undefined
+                      }
+                      color={errors.licenseKey ? "warn" : ""}
+                      onBlur={(e) => {
+                        setLicenseTouched(true);
+                        onBlur();
+                      }}
+                      onChange={(e) => {
+                        setLicenseKeyInput(e.target.value);
+                        onChange(e.target.value);
+                      }}
+                    />
+                  )}
+                />
+                {errors.licenseKey && (
+                  <p className="mt-1 text-sm text-red-600">{errors.licenseKey.message}</p>
+                )}
+              </div>
+
+              <div>
+                <Controller
+                  name="signatureToken"
+                  control={formMethods.control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TextField
+                      name="signatureToken"
+                      label={t("signature_token_optional")}
+                      placeholder="cal_sk_XXXXXXXXXXX"
+                      value={value || ""}
+                      onBlur={onBlur}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        onChange(e.target.value);
+                        formMethods.setValue("signatureToken", e.target.value);
+                      }}
+                    />
+                  )}
+                />
+                <p className="text-subtle mt-1 text-sm">{t("signature_token_description")}</p>
+              </div>
+            </div>
+          </div>
+        </FormProvider>
+      )}
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" color="secondary" onClick={onPrevStep}>
+          {t("prev_step")}
+        </Button>
+        {value === "EXISTING" ? (
+          <Button
+            type="submit"
+            color="primary"
+            loading={checkLicenseLoading || mutation.isPending}
+            disabled={
+              value === "EXISTING" &&
+              (!formMethods.formState.isValid || checkLicenseLoading || mutation.isPending)
+            }>
+            {t("save_license_key")}
+          </Button>
+        ) : (
+          <Button color="primary" onClick={onNextStep} type="button">
+            {t("next_step")}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+};
+
+export default LicenseSelection;