first commit

calcom/packages/features/users/components/VerifyEmailBanner.tsx

@@ -0,0 +1,40 @@
+import { APP_NAME } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import { TopBanner, showToast } from "@calcom/ui";
+
+import { useFlagMap } from "../../flags/context/provider";
+
+export type VerifyEmailBannerProps = {
+  data: boolean;
+};
+
+function VerifyEmailBanner({ data }: VerifyEmailBannerProps) {
+  const flags = useFlagMap();
+  const { t } = useLocale();
+  const mutation = trpc.viewer.auth.resendVerifyEmail.useMutation();
+
+  if (!data || !flags["email-verification"]) return null;
+
+  return (
+    <>
+      <TopBanner
+        icon="mail"
+        text={t("verify_email_banner_body", { appName: APP_NAME })}
+        variant="warning"
+        actions={
+          <a
+            className="underline hover:cursor-pointer"
+            onClick={() => {
+              mutation.mutate();
+              showToast(t("email_sent"), "success");
+            }}>
+            {t("resend_email")}
+          </a>
+        }
+      />
+    </>
+  );
+}
+
+export default VerifyEmailBanner;