feat: added upgrade page (#13287)

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Co-authored-by: Utkarsh Nagar <utkarshnagar2000@gmail.com>
Co-authored-by: Joe Au-Yeung <j.auyeung419@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: zomars <zomars@me.com>

apps/web/pages/upgrade.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import Shell from "@calcom/features/shell/Shell";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Button, EmptyScreen } from "@calcom/ui";
+import { showToast } from "@calcom/ui";
+import { ArrowUpCircle, CheckCircle } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
+
+export type OrgUpgradeBannerProps = {
+  data: RouterOutputs["viewer"]["getUserTopBanners"]["orgUpgradeBanner"];
+};
+
+export default function UpgradePage() {
+  const { t } = useLocale();
+
+  const router = useRouter();
+  const publishOrgMutation = trpc.viewer.organizations.publish.useMutation({
+    onSuccess(data) {
+      router.push(data.url);
+    },
+    onError: (error) => {
+      showToast(error.message, "error");
+    },
+  });
+
+  const doesUserHaveOrgToUpgrade = trpc.viewer.organizations.checkIfOrgNeedsUpgrade.useQuery();
+
+  return (
+    <Shell hideHeadingOnMobile>
+      <div className="max-w-screen-lg">
+        {doesUserHaveOrgToUpgrade.data ? (
+          <EmptyScreen
+            headline="Your upgrade is here"
+            description="Improve your scheduling experience by upgrading to the new plan and enjoy the new features."
+            Icon={ArrowUpCircle}
+            buttonRaw={
+              <Button
+                onClick={() => {
+                  publishOrgMutation.mutate();
+                }}>
+                {t("upgrade")}
+              </Button>
+            }
+          />
+        ) : (
+          <EmptyScreen
+            headline="You are all set"
+            description="You are already on the latest plan. Nothing to upgrade. Enjoy the new features and reach out to us with any questions!"
+            Icon={CheckCircle}
+            buttonRaw={<Button href="mailto:support@cal.com">{t("contact_support")}</Button>}
+          />
+        )}
+      </div>
+    </Shell>
+  );
+}
+UpgradePage.PageWrapper = PageWrapper;

packages/features/ee/users/components/UsersTable.tsx

@@ -1,26 +1,26 @@
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
+  Avatar,
   Badge,
   Button,
   ConfirmationDialogContent,
   Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
   DropdownActions,
   showToast,
   Table,
   TextField,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  Avatar,
 } from "@calcom/ui";
-import { Edit, Trash, Lock, VenetianMask } from "@calcom/ui/components/icon";
+import { Edit, Lock, Trash, User, VenetianMask } from "@calcom/ui/components/icon";
 
 import { withLicenseRequired } from "../../common/components/LicenseRequired";
 
@@ -112,6 +112,11 @@ function UsersTableBare() {
     },
   });
 
+  const handleImpersonateUser = async (username: string | null) => {
+    await signIn("impersonation-auth", { redirect: false, username: username });
+    router.push(`/event-types`);
+  };
+
   //we must flatten the array of arrays from the useInfiniteQuery hook
   const flatData = useMemo(() => data?.pages?.flatMap((page) => page.rows) ?? [], [data]);
   const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
@@ -208,6 +213,12 @@ function UsersTableBare() {
                           onClick: () => sendPasswordResetEmail.mutate({ userId: user.id }),
                           icon: Lock,
                         },
+                        {
+                          id: "impersonate-user",
+                          label: "Impersonate User",
+                          onClick: () => handleImpersonateUser(user?.username),
+                          icon: User,
+                        },
                         {
                           id: "lock-user",
                           label: user.locked ? "Unlock User Account" : "Lock User Account",