Add contact form, cookie banner, and update packages

This commit includes the addition of a contact form and a cookie banner to improve user experience and comply with regulations. The contact form involves email submission functionality. Several packages have also been updated and new routes have been added to the sitemap for better SEO. Environment variables have also been adjusted for email and contact form functionality.

packages/next/src/actions/index.ts

@@ -19,46 +19,60 @@ import { captureException, zodParseFactory } from '../utils';
  */
 export function enhanceAction<
   Args,
-  Schema extends z.ZodType<Omit<Args, 'captchaToken'>, z.ZodTypeDef>,
   Response,
->(
-  fn: (params: z.infer<Schema>, user: User) => Response | Promise<Response>,
-  config: {
+  Config extends {
+    auth?: boolean;
     captcha?: boolean;
     captureException?: boolean;
-    schema: Schema;
+    schema: z.ZodType<
+      Config['captcha'] extends true ? Args & { captchaToken: string } : Args,
+      z.ZodTypeDef
+    >;
   },
+>(
+  fn: (
+    params: z.infer<Config['schema']>,
+    user: Config['auth'] extends false ? undefined : User,
+  ) => Response | Promise<Response>,
+  config: Config,
 ) {
-  return async (
-    params: z.infer<Schema> & {
-      captchaToken?: string;
-    },
-  ) => {
-    // verify the user is authenticated if required
-    const auth = await requireUser(getSupabaseServerActionClient());
+  return async (params: z.infer<Config['schema']>) => {
+    type UserParam = Config['auth'] extends false ? undefined : User;
 
-    // If the user is not authenticated, redirect to the specified URL.
-    if (!auth.data) {
-      redirect(auth.redirectTo);
-    }
+    const requireAuth = config.auth ?? true;
 
-    // verify the captcha token if required
-    if (config.captcha) {
-      const token = z.string().min(1).parse(params.captchaToken);
+    let user: UserParam = undefined as UserParam;
 
-      await verifyCaptchaToken(token);
+    if (requireAuth) {
+      // verify the user is authenticated if required
+      const auth = await requireUser(getSupabaseServerActionClient());
+
+      // If the user is not authenticated, redirect to the specified URL.
+      if (!auth.data) {
+        redirect(auth.redirectTo);
+      }
+
+      user = auth.data as UserParam;
     }
 
     // validate the schema
     const parsed = zodParseFactory(config.schema);
     const data = parsed(params);
 
+    // verify the captcha token if required
+    if (config.captcha) {
+      const token = (data as Args & { captchaToken: string }).captchaToken;
+
+      // Verify the CAPTCHA token. It will throw an error if the token is invalid.
+      await verifyCaptchaToken(token);
+    }
+
     // capture exceptions if required
     const shouldCaptureException = config.captureException ?? true;
 
     if (shouldCaptureException) {
       try {
-        return await fn(data, auth.data);
+        return await fn(data, user);
       } catch (error) {
         await captureException(error);
 
@@ -66,7 +80,7 @@ export function enhanceAction<
       }
     } else {
       // pass the data to the action
-      return fn(data, auth.data);
+      return fn(data, user);
     }
   };
 }

packages/ui/package.json

@@ -113,7 +113,8 @@
     "./mode-toggle": "./src/makerkit/mode-toggle.tsx",
     "./enhanced-data-table": "./src/makerkit/data-table.tsx",
     "./language-selector": "./src/makerkit/language-selector.tsx",
-    "./stepper": "./src/makerkit/stepper.tsx"
+    "./stepper": "./src/makerkit/stepper.tsx",
+    "./cookie-banner": "./src/makerkit/cookie-banner.tsx"
   },
   "typesVersions": {
     "*": {

packages/ui/src/makerkit/cookie-banner.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useCallback, useMemo, useState } from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+import { Button } from '../shadcn/button';
+import { Heading } from '../shadcn/heading';
+import { Trans } from './trans';
+
+// configure this as you wish
+const COOKIE_CONSENT_STATUS = 'cookie_consent_status';
+
+enum ConsentStatus {
+  Accepted = 'accepted',
+  Rejected = 'rejected',
+  Unknown = 'unknown',
+}
+
+export function CookieBanner() {
+  const { status, accept, reject } = useCookieConsent();
+
+  if (!isBrowser()) {
+    return null;
+  }
+
+  if (status !== ConsentStatus.Unknown) {
+    return null;
+  }
+
+  return (
+    <DialogPrimitive.Root open modal={false}>
+      <DialogPrimitive.Content
+        className={`dark:shadow-primary-500/40 fixed bottom-0
+             w-full max-w-lg border bg-background p-6 shadow-2xl
+             delay-1000 duration-1000 animate-in fade-in zoom-in-95
+             slide-in-from-bottom-16 fill-mode-both lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
+      >
+        <div className={'flex flex-col space-y-4'}>
+          <div>
+            <Heading level={3}>
+              <Trans i18nKey={'cookieBanner.title'} />
+            </Heading>
+          </div>
+
+          <div className={'text-gray-500 dark:text-gray-400'}>
+            <Trans i18nKey={'cookieBanner.description'} />
+          </div>
+
+          <div className={'flex justify-end space-x-2.5'}>
+            <Button variant={'ghost'} onClick={reject}>
+              <Trans i18nKey={'cookieBanner.reject'} />
+            </Button>
+
+            <Button autoFocus onClick={accept}>
+              <Trans i18nKey={'cookieBanner.accept'} />
+            </Button>
+          </div>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Root>
+  );
+}
+
+export function useCookieConsent() {
+  const initialState = getStatusFromLocalStorage();
+  const [status, setStatus] = useState<ConsentStatus>(initialState);
+
+  const accept = useCallback(() => {
+    const status = ConsentStatus.Accepted;
+
+    setStatus(status);
+    storeStatusInLocalStorage(status);
+  }, []);
+
+  const reject = useCallback(() => {
+    const status = ConsentStatus.Rejected;
+
+    setStatus(status);
+    storeStatusInLocalStorage(status);
+  }, []);
+
+  const clear = useCallback(() => {
+    const status = ConsentStatus.Unknown;
+
+    setStatus(status);
+    storeStatusInLocalStorage(status);
+  }, []);
+
+  return useMemo(() => {
+    return {
+      clear,
+      status,
+      accept,
+      reject,
+    };
+  }, [clear, status, accept, reject]);
+}
+
+function storeStatusInLocalStorage(status: ConsentStatus) {
+  if (!isBrowser()) {
+    return;
+  }
+
+  localStorage.setItem(COOKIE_CONSENT_STATUS, status);
+}
+
+function getStatusFromLocalStorage() {
+  if (!isBrowser()) {
+    return ConsentStatus.Unknown;
+  }
+
+  const status = localStorage.getItem(COOKIE_CONSENT_STATUS) as ConsentStatus;
+
+  return status ?? ConsentStatus.Unknown;
+}
+
+function isBrowser() {
+  return typeof window !== 'undefined';
+}