Admin Wizard Choose License (#6574)

* Implementation * i18n * More i18n * extracted i18n, needs api to get most recent price, added hint: update later * Fixing i18n var * Fix booking filters not working for admin (#6576) * fix: react-select overflow issue in some modals. (#6587) * feat: add a disable overflow prop * feat: use the disable overflow prop * Tailwind Merge (#6596) * Tailwind Merge * Fix merge classNames * [CAL-808] /availability/single - UI issue on buttons beside time inputs (#6561) * [CAL-808] /availability/single - UI issue on buttons beside time inputs * Update apps/web/public/static/locales/en/common.json * Update packages/features/schedules/components/Schedule.tsx * create new translation for tooltip Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> * Bye bye submodules (#6585) * WIP * Uses ssh instead * Update .gitignore * Update .gitignore * Update Makefile * Update git-setup.sh * Update git-setup.sh * Replaced Makefile with bash script * Update package.json * fix: show button on empty string (#6601) Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: add delete in dropdown (#6599) Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * Update README.md * Update README.md * Changed a neutral- classes to gray (#6603) * Changed a neutral- classes to gray * Changed all border-1 to border * Update package.json * Test fixes * Yarn lock fixes * Fix string equality check in git-setup.sh * [CAL-811] Avatar icon not redirecting user back to the main page (#6586) * Remove cursor-pointer, remove old Avatar* files * Fixed styling for checkedSelect + some cleanup Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> * Harsh/add member invite (#6598) Co-authored-by: Guest <guest@pop-os.localdomain> Co-authored-by: root <harsh.singh@gocomet.com> * Regenerated lockfile without upgrade (#6610) * fix: remove annoying outline when <Button /> clicked (#6537) * fix: remove annoying outline when <Button /> clicked * Delete yarn.lock * remove 1 on 1 icon (#6609) * removed 1-on-1 badge * changed user to users for group events * fix: case-sensitivity in apps path (#6552) * fix: lowercase slug * fix: make fallback blocking * Fix FAB (#6611) * feat: add LocationSelect component (#6571) * feat: add LocationSelect component Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: type error Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * chore: type error Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * Update booking filters design (#6543) * Update booking filters * Add filter on YOUR bookings * Fix pending members showing up in list * Reduce the avatar size to 'sm' for now * Bugfix/dropdown menu trigger as child remove class names (#6614) * Fix UsernameTextfield to take right height * Remove className side-effect * Incorrect resolution version fixed * Converted mobile DropdownMenuTrigger styles into Button * v2.5.3 * fix: use items-center (#6618) * fix tooltip and modal stacking issues (#6491) * fix tooltip and modal stacking issues * use z-index in larger screens and less Co-authored-by: Alex van Andel <me@alexvanandel.com> * Temporary fix (#6626) * Fix Ga4 tracking (#6630) * generic <UpgradeScreen> component (#6594) * first attempt of <UpgradeScreen> * changes to icons * reverted changes back to initial state, needs fix: teams not showing * WIP * Fix weird reactnode error * Fix loading text * added upgradeTip to routing forms * icon colors * create and use hook to check if user has team plan * use useTeamPlan for upgradeTeamsBadge * replace huge svg with compressed jpeg * responsive fixes * Update packages/ui/components/badge/UpgradeTeamsBadge.tsx Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Give team plan features to E2E tests * Allow option to make a user part of team int ests * Remove flash of paywall for team user * Add team user for typeform tests as well Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> * Removing env var to rely on db * Restoring i18n keys, set loading moved * Fixing tailwind-preset glob * Wizard width fix for md+ screens * Converting licenses options to radix radio * Applying feedback + other tweaks * Reverting this, not this PR related * Unneeded code removal * Reverting unneeded style change * Applying feedback * Removing licenseType * Upgrades typescript * Update yarn lock * Typings * Hotfix: ping,riverside,whereby and around not showing up in list (#6712) * Hotfix: ping,riverside,whereby and around not showing up in list (#6712) (#6713) * Adds deployment settings to DB (#6706) * WIP * Adds DeploymentTheme * Add missing migrations * Adds client extensions for deployment * Cleanup * Delete migration.sql * Relying on both, env var and new model * Restoring env example doc for backward compat * Maximum call stack size exceeded fix? * Revert upgrade * Update index.ts * Delete index.ts * Not exposing license key, fixed radio behavior * Covering undefined env var * Self contained checkLicense * Feedback * Moar feedback * Feedback * Feedback * Feedback * Cleanup --------- Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Nafees Nazik <84864519+G3root@users.noreply.github.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Harsh Singh <51085015+harshsinghatz@users.noreply.github.com> Co-authored-by: Guest <guest@pop-os.localdomain> Co-authored-by: root <harsh.singh@gocomet.com> Co-authored-by: Luis Cadillo <luiscaf3r@gmail.com> Co-authored-by: Mohammed Cherfaoui <hi@cherfaoui.dev> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
calcom · Feb 9, 2023 · 783d32c · 783d32c
1 parent 0b33917
commit 783d32c
Show file tree

Hide file tree

Showing 28 changed files with 584 additions and 136 deletions.
diff --git a/.env.example b/.env.example
@@ -1,20 +1,21 @@
 # ********** INDEX **********
 #
-# - LICENSE
+# - LICENSE (DEPRECATED)
 # - DATABASE
 # - SHARED
 #   - NEXTAUTH
 # - E-MAIL SETTINGS
 
-# - LICENSE *************************************************************************************************
-# https://github.com/calendso/calendso/blob/main/LICENSE
+# - LICENSE (DEPRECATED) ************************************************************************************
+# https://github.com/calcom/cal.com/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
 #
-# To enable enterprise-only features, fill your license key in here.
+# To enable enterprise-only features, as an admin, go to /auth/setup to select your license and follow
+# instructions. This environment variable is deprecated although still supported for backward compatibility.
 # @see https://console.cal.com
 CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************

diff --git a/...pages/auth/setup/steps/SetupFormStep1.tsx → apps/web/components/setup/AdminUser.tsx b/...pages/auth/setup/steps/SetupFormStep1.tsx → apps/web/components/setup/AdminUser.tsx
@@ -1,17 +1,32 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import classNames from "classnames";
 import { signIn } from "next-auth/react";
-import { useRouter } from "next/router";
+import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { isPasswordValid } from "@calcom/lib/auth";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmailField, Label, PasswordField, TextField } from "@calcom/ui";
+import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
+import { FiUserCheck } from "@calcom/ui/components/icon";
 
-const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
-  const router = useRouter();
+export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
+  const { t } = useLocale();
+  if (props.userCount > 0)
+    return (
+      <form id="wizard-step-1" name="wizard-step-1" className="space-y-4" onSubmit={props.onSuccess}>
+        <EmptyScreen
+          Icon={FiUserCheck}
+          headline={t("admin_user_created")}
+          description={t("admin_user_created_description")}
+        />
+      </form>
+    );
+  return <AdminUser {...props} />;
+};
+
+export const AdminUser = (props: { onSubmit: () => void; onError: () => void; onSuccess: () => void }) => {
   const { t } = useLocale();
 
   const formSchema = z.object({
@@ -45,11 +60,11 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
   });
 
   const onError = () => {
-    props.setIsLoading(false);
+    props.onError();
   };
 
   const onSubmit = formMethods.handleSubmit(async (data: z.infer<typeof formSchema>) => {
-    props.setIsLoading(true);
+    props.onSubmit();
     const response = await fetch("/api/auth/setup", {
       method: "POST",
       body: JSON.stringify({
@@ -69,9 +84,9 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
         email: data.email_address.toLowerCase(),
         password: data.password,
       });
-      router.replace(`/auth/setup?step=2&category=calendar`);
+      props.onSuccess();
     } else {
-      router.replace("/auth/setup");
+      props.onError();
     }
   }, onError);
 
@@ -186,5 +201,3 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
     </FormProvider>
   );
 };
-
-export default SetupFormStep1;
diff --git a/apps/web/components/setup/ChooseLicense.tsx b/apps/web/components/setup/ChooseLicense.tsx
@@ -0,0 +1,76 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import classNames from "classnames";
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const ENTERPRISE_BOOKING_FEE = "$99"; // TODO: get this from a new API endpoint
+
+const ChooseLicense = (
+  props: {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+  } & Omit<JSX.IntrinsicElements["form"], "onSubmit" | "onChange">
+) => {
+  const { value: initialValue = "FREE", onChange, onSubmit, ...rest } = props;
+  const [value, setValue] = useState(initialValue);
+  const { t } = useLocale();
+
+  return (
+    <form
+      {...rest}
+      className="space-y-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit(value);
+      }}>
+      <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) => {
+          onChange(value);
+          setValue(value);
+        }}>
+        <RadioGroup.Item value="FREE">
+          <div
+            className={classNames(
+              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              value === "FREE" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-xl text-black">{t("agplv3_license")}</h2>
+            <p className="font-medium text-green-800">{t("free_license_fee")}</p>
+            <p className="text-gray-500">{t("forever_open_and_free")}</p>
+            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+              <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="EE">
+          <div
+            className={classNames(
+              "cursor-pointer space-y-2 rounded-md border bg-white p-4 hover:border-black",
+              value === "EE" && "ring-2 ring-black"
+            )}>
+            <h2 className="font-cal text-xl text-black">{t("ee_enterprise_license")}</h2>
+            <p className="font-medium text-green-800">
+              {t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
+            </p>
+            <p className="text-gray-500">{t("enterprise_license_includes")}</p>
+            <ul className="ml-4 list-disc text-left text-xs text-gray-500">
+              <li>{t("no_need_to_keep_your_code_open_source")}</li>
+              <li>{t("repackage_rebrand_resell")}</li>
+              <li>{t("a_vast_suite_of_enterprise_features")}</li>
+            </ul>
+          </div>
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+    </form>
+  );
+};
+
+export default ChooseLicense;
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -0,0 +1,144 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { noop } from "lodash";
+import { useCallback, useState } from "react";
+import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
+import * as z from "zod";
+
+import { classNames } from "@calcom/lib";
+import { CONSOLE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import { Button, TextField } from "@calcom/ui";
+import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
+
+type EnterpriseLicenseFormValues = {
+  licenseKey: string;
+};
+
+const makeSchemaLicenseKey = (args: { callback: (valid: boolean) => void; onSuccessValidate: () => void }) =>
+  z.object({
+    licenseKey: z
+      .string()
+      .uuid({
+        message: "License key must follow UUID format: 8-4-4-4-12",
+      })
+      .superRefine(async (data, ctx) => {
+        const parse = z.string().uuid().safeParse(data);
+        if (parse.success) {
+          args.callback(true);
+          const response = await fetch(`${CONSOLE_URL}/api/license?key=${data}`);
+          args.callback(false);
+          const json = await response.json();
+          if (!json.valid) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: `License key ${json.message.toLowerCase()}`,
+            });
+          } else {
+            args.onSuccessValidate();
+          }
+        }
+      }),
+  });
+
+const EnterpriseLicense = (
+  props: {
+    licenseKey?: string;
+    initialValue?: Partial<EnterpriseLicenseFormValues>;
+    onSuccessValidate: () => void;
+    onSubmit: (value: EnterpriseLicenseFormValues) => void;
+    onSuccess?: (
+      data: RouterOutputs["viewer"]["deploymentSetup"]["update"],
+      variables: RouterInputs["viewer"]["deploymentSetup"]["update"]
+    ) => void;
+  } & Omit<JSX.IntrinsicElements["form"], "onSubmit">
+) => {
+  const { onSubmit, onSuccess = noop, onSuccessValidate = noop, ...rest } = props;
+  const { t } = useLocale();
+  const [checkLicenseLoading, setCheckLicenseLoading] = useState(false);
+  const mutation = trpc.viewer.deploymentSetup.update.useMutation({
+    onSuccess,
+  });
+
+  const schemaLicenseKey = useCallback(
+    () =>
+      makeSchemaLicenseKey({
+        callback: setCheckLicenseLoading,
+        onSuccessValidate,
+      }),
+    [setCheckLicenseLoading, onSuccessValidate]
+  );
+
+  const formMethods = useForm<EnterpriseLicenseFormValues>({
+    defaultValues: {
+      licenseKey: props.licenseKey || "",
+    },
+    resolver: zodResolver(schemaLicenseKey()),
+  });
+
+  const handleSubmit = formMethods.handleSubmit((values) => {
+    onSubmit(values);
+    setCheckLicenseLoading(false);
+    mutation.mutate(values);
+  });
+
+  const { isDirty, errors } = useFormState(formMethods);
+
+  return (
+    <FormProvider {...formMethods}>
+      <form {...rest} className="space-y-4 rounded-md bg-white px-8 py-10" onSubmit={handleSubmit}>
+        <div>
+          <Button
+            className="w-full justify-center text-lg"
+            EndIcon={FiExternalLink}
+            href="https://console.cal.com"
+            target="_blank">
+            {t("purchase_license")}
+          </Button>
+          <div className="relative flex justify-center">
+            <hr className="my-8 w-full border-[1.5px] border-gray-200" />
+            <span className="absolute mt-[22px] bg-white px-3.5 text-sm">OR</span>
+          </div>
+          {t("already_have_key")}
+          <Controller
+            name="licenseKey"
+            control={formMethods.control}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <TextField
+                {...formMethods.register("licenseKey")}
+                className={classNames(
+                  "mb-0 group-hover:border-gray-400",
+                  (checkLicenseLoading || (errors.licenseKey === undefined && isDirty)) && "border-r-0"
+                )}
+                placeholder="xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx"
+                labelSrOnly={true}
+                value={value}
+                addOnFilled={false}
+                addOnClassname={classNames(
+                  "hover:border-gray-300",
+                  errors.licenseKey === undefined && isDirty && "group-hover:border-gray-400"
+                )}
+                addOnSuffix={
+                  checkLicenseLoading ? (
+                    <FiLoader className="h-5 w-5 animate-spin" />
+                  ) : errors.licenseKey === undefined && isDirty ? (
+                    <FiCheck className="h-5 w-5 text-green-700" />
+                  ) : undefined
+                }
+                color={errors.licenseKey ? "warn" : ""}
+                onBlur={onBlur}
+                onChange={async (e: React.ChangeEvent<HTMLInputElement>) => {
+                  onChange(e.target.value);
+                  formMethods.setValue("licenseKey", e.target.value);
+                  await formMethods.trigger("licenseKey");
+                }}
+              />
+            )}
+          />
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default EnterpriseLicense;
diff --git a/apps/web/pages/auth/setup/steps/StepDone.tsx → apps/web/components/setup/StepDone.tsx b/apps/web/pages/auth/setup/steps/StepDone.tsx → apps/web/components/setup/StepDone.tsx
@@ -1,20 +1,26 @@
 import { useRouter } from "next/router";
+import { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { FiCheck } from "@calcom/ui/components/icon";
 
-const StepDone = () => {
+const StepDone = (props: {
+  currentStep: number;
+  nextStepPath: string;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+}) => {
   const router = useRouter();
   const { t } = useLocale();
 
   return (
     <form
-      id="wizard-step-1"
-      name="wizard-step-1"
-      className="space-y-4"
+      id={`wizard-step-${props.currentStep}`}
+      name={`wizard-step-${props.currentStep}`}
+      className="flex justify-center space-y-4"
       onSubmit={(e) => {
+        props.setIsLoading(true);
         e.preventDefault();
-        router.replace(`/auth/setup?step=2&category=calendar`);
+        router.replace(props.nextStepPath);
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
         <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">

diff --git a/apps/web/pages/api/auth/[...nextauth].tsx b/apps/web/pages/api/auth/[...nextauth].tsx
@@ -360,7 +360,7 @@ export default NextAuth({
       return token;
     },
     async session({ session, token }) {
-      const hasValidLicense = await checkLicense(process.env.CALCOM_LICENSE_KEY || "");
+      const hasValidLicense = await checkLicense(prisma);
       const calendsoSession: Session = {
         ...session,
         hasValidLicense,