Update labels and refine hooks for teams and billing modules

This commit modifies several language labels and refines hooks related to 'teams' and 'billing' modules for better clarity and consistency. It also includes the deletion of unused locale files and package dependencies transfered to 'peerDependencies'. Lastly, it introduces minor enhancements in server command, error logging functionality, and scripts to interact with Stripe.
2024-03-26 23:32:28 +08:00
parent 4032aed827
commit e402caff30
52 changed files with 1227 additions and 1049 deletions
--- a/packages/billing-gateway/package.json
+++ b/packages/billing-gateway/package.json
@@ -22,14 +22,14 @@
    "@kit/billing": "0.1.0",
    "@kit/supabase": "^0.1.0",
    "@kit/shared": "^0.1.0",
-    "lucide-react": "^0.361.0"
+    "lucide-react": "^0.361.0",
+    "@supabase/supabase-js": "^2.39.8"
  },
  "devDependencies": {
    "@kit/prettier-config": "0.1.0",
    "@kit/eslint-config": "0.2.0",
    "@kit/tailwind-config": "0.1.0",
-    "@kit/tsconfig": "0.1.0",
-    "@supabase/supabase-js": "^2.39.8"
+    "@kit/tsconfig": "0.1.0"
  },
  "eslintConfig": {
    "root": true,
@@ -45,4 +45,4 @@
      ]
    }
  }
-}
+}
--- a/packages/billing-gateway/src/components/billing-portal-card.tsx
+++ b/packages/billing-gateway/src/components/billing-portal-card.tsx
@@ -10,22 +10,27 @@ import {
  CardHeader,
  CardTitle,
 } from '@kit/ui/card';
+import { Trans } from '@kit/ui/trans';

 export function BillingPortalCard() {
  return (
    <Card>
      <CardHeader>
-        <CardTitle>Manage your Billing Details</CardTitle>
+        <CardTitle>
+          <Trans i18nKey="billing:billingPortalCardTitle" />
+        </CardTitle>

        <CardDescription>
-          You can change your plan or cancel your subscription at any time.
+          <Trans i18nKey="billing:billingPortalCardDescription" />
        </CardDescription>
      </CardHeader>

      <CardContent className={'space-y-2'}>
        <div>
          <Button>
-            <span>Visit the billing portal</span>
+            <span>
+              <Trans i18nKey="billing:billingPortalCardButton" />
+            </span>

            <ArrowUpRight className={'h-4'} />
          </Button>
--- a/packages/billing-gateway/src/components/billing-session-status.tsx
+++ b/packages/billing-gateway/src/components/billing-session-status.tsx
@@ -64,7 +64,7 @@ function SuccessSessionStatus({

        <Heading level={3}>
          <span className={'mr-4 font-semibold'}>
-            <Trans i18nKey={'subscription:checkoutSuccessTitle'} />
+            <Trans i18nKey={'billing:checkoutSuccessTitle'} />
          </span>
          🎉
        </Heading>
@@ -74,7 +74,7 @@ function SuccessSessionStatus({
        >
          <p>
            <Trans
-              i18nKey={'subscription:checkoutSuccessDescription'}
+              i18nKey={'billing:checkoutSuccessDescription'}
              values={{ customerEmail }}
            />
          </p>
@@ -84,7 +84,7 @@ function SuccessSessionStatus({
          <Link href={redirectPath}>
            <span className={'flex items-center space-x-2.5'}>
              <span>
-                <Trans i18nKey={'subscription:checkoutSuccessBackButton'} />
+                <Trans i18nKey={'billing:checkoutSuccessBackButton'} />
              </span>

              <ChevronRight className={'h-4'} />
--- a/packages/billing-gateway/src/components/current-plan-alert.tsx
+++ b/packages/billing-gateway/src/components/current-plan-alert.tsx
@@ -1,5 +1,6 @@
 import { Database } from '@kit/supabase/database';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Trans } from '@kit/ui/trans';

 export function CurrentPlanAlert(
  props: React.PropsWithoutRef<{
@@ -7,57 +8,47 @@ export function CurrentPlanAlert(
  }>,
 ) {
  let variant: 'success' | 'warning' | 'destructive';
-  let text: string;
-  let title: string;
+  const prefix = 'billing:status';
+
+  const text = `${prefix}.${props.status}.description`;
+  const title = `${prefix}.${props.status}.heading`;

  switch (props.status) {
    case 'active':
      variant = 'success';
-      title = 'Active';
-      text = 'Your subscription is active';
      break;
    case 'trialing':
      variant = 'success';
-      title = 'Trial';
-      text = 'You are currently on a trial';
      break;
    case 'past_due':
      variant = 'destructive';
-      title = 'Past Due';
-      text = 'Your subscription payment is past due';
      break;
    case 'canceled':
      variant = 'destructive';
-      title = 'Canceled';
-      text = 'You have canceled your subscription';
      break;
    case 'unpaid':
      variant = 'destructive';
-      title = 'Unpaid';
-      text = 'Your subscription payment is unpaid';
      break;
    case 'incomplete':
      variant = 'warning';
-      title = 'Incomplete';
-      text = 'We are processing your subscription payment';
      break;
    case 'incomplete_expired':
      variant = 'destructive';
-      title = 'Incomplete Expired';
-      text = 'Your subscription payment has expired';
      break;
    case 'paused':
      variant = 'warning';
-      title = 'Paused';
-      text = 'Your subscription is paused';
      break;
  }

  return (
    <Alert variant={variant}>
-      <AlertTitle>{title}</AlertTitle>
+      <AlertTitle>
+        <Trans i18nKey={title} />
+      </AlertTitle>

-      <AlertDescription>{text}</AlertDescription>
+      <AlertDescription>
+        <Trans i18nKey={text} />
+      </AlertDescription>
    </Alert>
  );
 }
--- a/packages/billing-gateway/src/components/current-plan-badge.tsx
+++ b/packages/billing-gateway/src/components/current-plan-badge.tsx
@@ -1,5 +1,6 @@
 import { Database } from '@kit/supabase/database';
 import { Badge } from '@kit/ui/badge';
+import { Trans } from '@kit/ui/trans';

 export function CurrentPlanBadge(
  props: React.PropsWithoutRef<{
@@ -7,42 +8,38 @@ export function CurrentPlanBadge(
  }>,
 ) {
  let variant: 'success' | 'warning' | 'destructive';
-  let text: string;
+  const text = `billing:status.${props.status}.badge`;

  switch (props.status) {
    case 'active':
      variant = 'success';
-      text = 'Active';
      break;
    case 'trialing':
      variant = 'success';
-      text = 'Trialing';
      break;
    case 'past_due':
      variant = 'destructive';
-      text = 'Past due';
      break;
    case 'canceled':
      variant = 'destructive';
-      text = 'Canceled';
      break;
    case 'unpaid':
      variant = 'destructive';
-      text = 'Unpaid';
      break;
    case 'incomplete':
      variant = 'warning';
-      text = 'Incomplete';
      break;
    case 'incomplete_expired':
      variant = 'destructive';
-      text = 'Incomplete expired';
      break;
    case 'paused':
      variant = 'warning';
-      text = 'Paused';
      break;
  }

-  return <Badge variant={variant}>{text}</Badge>;
+  return (
+    <Badge variant={variant}>
+      <Trans i18nKey={text} />
+    </Badge>
+  );
 }
--- a/packages/billing-gateway/src/components/current-plan-card.tsx
+++ b/packages/billing-gateway/src/components/current-plan-card.tsx
@@ -38,10 +38,12 @@ export function CurrentPlanCard({
  return (
    <Card>
      <CardHeader>
-        <CardTitle>Your Plan</CardTitle>
+        <CardTitle>
+          <Trans i18nKey="billing:planCardTitle" />
+        </CardTitle>

        <CardDescription>
-          You can change your plan or cancel your subscription at any time.
+          <Trans i18nKey="billing:planCardDescription" />
        </CardDescription>
      </CardHeader>

@@ -53,13 +55,20 @@ export function CurrentPlanCard({
                's-6 fill-green-500 text-white dark:fill-white dark:text-black'
              }
            />
+
            <span>{product.name}</span>
            <CurrentPlanBadge status={subscription.status} />
          </div>

          <div className={'text-muted-foreground'}>
-            Renews every {subscription.interval} at{' '}
-            <span>{product.currency}</span> <span>{plan.price}</span>
+            <Trans
+              i18nKey="billing:planRenewal"
+              values={{
+                interval: subscription.interval,
+                currency: product.currency,
+                price: plan.price,
+              }}
+            />
          </div>
        </div>

@@ -70,12 +79,16 @@ export function CurrentPlanCard({
        <div>
          <Accordion type="single" collapsible>
            <AccordionItem value="features">
-              <AccordionTrigger>Plan details</AccordionTrigger>
+              <AccordionTrigger>
+                <Trans i18nKey="billing:planDetails" />
+              </AccordionTrigger>

              <AccordionContent className="space-y-2.5">
                <If condition={subscription.status === 'trialing'}>
                  <div className="flex flex-col">
-                    <span className="font-medium">Your trial ends on</span>
+                    <span className="font-medium">
+                      <Trans i18nKey="billing:trialEndsOn" />
+                    </span>

                    <div className={'text-muted-foreground'}>
                      <span>
@@ -118,12 +131,16 @@ export function CurrentPlanCard({
                <div className="flex flex-col space-y-1">
                  <span className="font-medium">Features</span>

-                  <ul>
+                  <ul className={'flex flex-col space-y-0.5'}>
                    {product.features.map((item) => {
                      return (
-                        <li key={item} className="flex items-center space-x-0.5">
+                        <li
+                          key={item}
+                          className="flex items-center space-x-0.5"
+                        >
                          <CheckCircle2 className="h-4 text-green-500" />
-                          <span>
+
+                          <span className={'text-muted-foreground'}>
                            <Trans i18nKey={item} defaults={item} />
                          </span>
                        </li>
--- a/packages/billing-gateway/src/components/embedded-checkout.tsx
+++ b/packages/billing-gateway/src/components/embedded-checkout.tsx
@@ -16,9 +16,7 @@ export function EmbeddedCheckout(
    onClose?: () => void;
  }>,
 ) {
-  return (
-    <LazyCheckout onClose={props.onClose} checkoutToken={props.checkoutToken} />
-  );
+  return <LazyCheckout {...props} />;
 }

 function LazyCheckout(
--- a/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-danger-zone.tsx
@@ -14,7 +14,6 @@ import {
 } from '@kit/ui/dialog';
 import { ErrorBoundary } from '@kit/ui/error-boundary';
 import { Form, FormControl, FormItem, FormLabel } from '@kit/ui/form';
-import { Heading } from '@kit/ui/heading';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';

@@ -28,12 +27,12 @@ function DeleteAccountContainer() {
  return (
    <div className={'flex flex-col space-y-4'}>
      <div className={'flex flex-col space-y-1'}>
-        <Heading level={6}>
-          <Trans i18nKey={'profile:deleteAccount'} />
-        </Heading>
+        <span className={'text-sm font-medium'}>
+          <Trans i18nKey={'account:deleteAccount'} />
+        </span>

        <p className={'text-muted-foreground text-sm'}>
-          <Trans i18nKey={'profile:deleteAccountDescription'} />
+          <Trans i18nKey={'account:deleteAccountDescription'} />
        </p>
      </div>

@@ -49,14 +48,14 @@ function DeleteAccountModal() {
    <Dialog>
      <DialogTrigger asChild>
        <Button data-test={'delete-account-button'} variant={'destructive'}>
-          <Trans i18nKey={'profile:deleteAccount'} />
+          <Trans i18nKey={'account:deleteAccount'} />
        </Button>
      </DialogTrigger>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>
-            <Trans i18nKey={'profile:deleteAccount'} />
+            <Trans i18nKey={'account:deleteAccount'} />
          </DialogTitle>
        </DialogHeader>

@@ -83,7 +82,7 @@ function DeleteAccountForm() {
          >
            <div className={'flex flex-col space-y-2'}>
              <div>
-                <Trans i18nKey={'profile:deleteAccountDescription'} />
+                <Trans i18nKey={'account:deleteAccountDescription'} />
              </div>

              <div>
@@ -94,7 +93,7 @@ function DeleteAccountForm() {

          <FormItem>
            <FormLabel>
-              <Trans i18nKey={'profile:deleteProfileConfirmationInputLabel'} />
+              <Trans i18nKey={'account:deleteProfileConfirmationInputLabel'} />
            </FormLabel>

            <FormControl>
@@ -127,7 +126,7 @@ function DeleteAccountSubmitButton() {
      value={'delete'}
      variant={'destructive'}
    >
-      <Trans i18nKey={'profile:deleteAccount'} />
+      <Trans i18nKey={'account:deleteAccount'} />
    </Button>
  );
 }
@@ -138,7 +137,7 @@ function DeleteAccountErrorAlert() {
      <ExclamationTriangleIcon className={'h-4'} />

      <AlertTitle>
-        <Trans i18nKey={'profile:deleteAccountErrorHeading'} />
+        <Trans i18nKey={'account:deleteAccountErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
--- a/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx
@@ -1,5 +1,12 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@kit/ui/card';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';

 import { AccountDangerZone } from './account-danger-zone';
 import { UpdateAccountDetailsFormContainer } from './update-account-details-form-container';
@@ -22,7 +29,13 @@ export function PersonalAccountSettingsContainer(
    <div className={'flex w-full flex-col space-y-8 pb-32'}>
      <Card>
        <CardHeader>
-          <CardTitle>Your Profile Picture</CardTitle>
+          <CardTitle>
+            <Trans i18nKey={'account:accountImage'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'account:accountImageDescription'} />
+          </CardDescription>
        </CardHeader>

        <CardContent>
@@ -32,7 +45,13 @@ export function PersonalAccountSettingsContainer(

      <Card>
        <CardHeader>
-          <CardTitle>Your Details</CardTitle>
+          <CardTitle>
+            <Trans i18nKey={'account:name'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'account:nameDescription'} />
+          </CardDescription>
        </CardHeader>

        <CardContent>
@@ -42,7 +61,13 @@ export function PersonalAccountSettingsContainer(

      <Card>
        <CardHeader>
-          <CardTitle>Update your Email</CardTitle>
+          <CardTitle>
+            <Trans i18nKey={'account:updateEmailCardTitle'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'account:updateEmailCardDescription'} />
+          </CardDescription>
        </CardHeader>

        <CardContent>
@@ -52,7 +77,13 @@ export function PersonalAccountSettingsContainer(

      <Card>
        <CardHeader>
-          <CardTitle>Update your Password</CardTitle>
+          <CardTitle>
+            <Trans i18nKey={'account:updatePasswordCardTitle'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'account:updatePasswordCardDescription'} />
+          </CardDescription>
        </CardHeader>

        <CardContent>
@@ -63,7 +94,13 @@ export function PersonalAccountSettingsContainer(
      <If condition={props.features.enableAccountDeletion}>
        <Card className={'border-destructive border-2'}>
          <CardHeader>
-            <CardTitle>Danger Zone</CardTitle>
+            <CardTitle>
+              <Trans i18nKey={'account:dangerZone'} />
+            </CardTitle>
+
+            <CardDescription>
+              <Trans i18nKey={'account:dangerZoneDescription'} />
+            </CardDescription>
          </CardHeader>

          <CardContent>
--- a/packages/features/accounts/src/components/personal-account-settings/multi-factor-auth-setup-modal.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/multi-factor-auth-setup-modal.tsx
@@ -33,7 +33,7 @@ function MultiFactorAuthSetupModal(
  const onEnrollSuccess = useCallback(() => {
    props.setIsOpen(false);

-    return toast.success(t(`profile:multiFactorSetupSuccess`));
+    return toast.success(t(`multiFactorSetupSuccess`));
  }, [props, t]);

  return (
@@ -41,7 +41,7 @@ function MultiFactorAuthSetupModal(
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
-            <Trans i18nKey={'profile:setupMfaButtonLabel'} />
+            <Trans i18nKey={'account:setupMfaButtonLabel'} />
          </DialogTitle>
        </DialogHeader>

@@ -109,7 +109,7 @@ function MultiFactorAuthSetupForm({
    return (
      <div className={'flex flex-col space-y-4'}>
        <Alert variant={'destructive'}>
-          <Trans i18nKey={'profile:multiFactorSetupError'} />
+          <Trans i18nKey={'account:multiFactorSetupError'} />
        </Alert>
      </div>
    );
@@ -132,7 +132,7 @@ function MultiFactorAuthSetupForm({
        >
          <div className={'flex flex-col space-y-4'}>
            <Label>
-              <Trans i18nKey={'profile:verificationCode'} />
+              <Trans i18nKey={'account:verificationCode'} />

              <OtpInput
                onInvalid={() => setVerificationCode('')}
@@ -140,16 +140,16 @@ function MultiFactorAuthSetupForm({
              />

              <span>
-                <Trans i18nKey={'profile:verifyActivationCodeDescription'} />
+                <Trans i18nKey={'account:verifyActivationCodeDescription'} />
              </span>
            </Label>

            <div className={'flex justify-end space-x-2'}>
              <Button disabled={!verificationCode} type={'submit'}>
                {state.loading ? (
-                  <Trans i18nKey={'profile:verifyingCode'} />
+                  <Trans i18nKey={'account:verifyingCode'} />
                ) : (
-                  <Trans i18nKey={'profile:enableMfaFactor'} />
+                  <Trans i18nKey={'account:enableMfaFactor'} />
                )}
              </Button>
            </div>
@@ -210,7 +210,7 @@ function FactorQrCode({
    return (
      <div className={'flex w-full flex-col space-y-2'}>
        <Alert variant={'destructive'}>
-          <Trans i18nKey={'profile:qrCodeError'} />
+          <Trans i18nKey={'account:qrCodeError'} />
        </Alert>
      </div>
    );
@@ -231,7 +231,7 @@ function FactorQrCode({
    <div className={'flex flex-col space-y-4'}>
      <p>
        <span className={'text-base'}>
-          <Trans i18nKey={'profile:multiFactorModalHeading'} />
+          <Trans i18nKey={'account:multiFactorModalHeading'} />
        </span>
      </p>

@@ -264,18 +264,18 @@ function FactorNameForm(
    >
      <div className={'flex flex-col space-y-4'}>
        <Label>
-          <Trans i18nKey={'profile:factorNameLabel'} />
+          <Trans i18nKey={'account:factorNameLabel'} />

          <Input autoComplete={'off'} required name={inputName} />

          <span>
-            <Trans i18nKey={'profile:factorNameHint'} />
+            <Trans i18nKey={'account:factorNameHint'} />
          </span>
        </Label>

        <div className={'flex justify-end space-x-2'}>
          <Button type={'submit'}>
-            <Trans i18nKey={'profile:factorNameSubmitLabel'} />
+            <Trans i18nKey={'account:factorNameSubmitLabel'} />
          </Button>
        </div>
      </div>
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx
@@ -2,7 +2,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { z } from 'zod';

 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
@@ -18,13 +17,10 @@ import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';

 import { useUpdateAccountData } from '../../hooks/use-update-account';
+import { AccountDetailsSchema } from '../../schema/account-details.schema';

 type UpdateUserDataParams = Database['public']['Tables']['accounts']['Update'];

-const AccountInfoSchema = z.object({
-  displayName: z.string().min(2).max(100),
-});
-
 export function UpdateAccountDetailsForm({
  displayName,
  onUpdate,
@@ -35,10 +31,10 @@ export function UpdateAccountDetailsForm({
  onUpdate: (user: Partial<UpdateUserDataParams>) => void;
 }) {
  const updateAccountMutation = useUpdateAccountData(userId);
-  const { t } = useTranslation();
+  const { t } = useTranslation('account');

  const form = useForm({
-    resolver: zodResolver(AccountInfoSchema),
+    resolver: zodResolver(AccountDetailsSchema),
    defaultValues: {
      displayName,
    },
@@ -51,10 +47,10 @@ export function UpdateAccountDetailsForm({
      onUpdate(data);
    });

-    return toast.promise(promise, {
-      success: t(`profile:updateProfileSuccess`),
-      error: t(`profile:updateProfileError`),
-      loading: t(`profile:updateProfileLoading`),
+    return toast.promise(() => promise, {
+      success: t(`updateProfileSuccess`),
+      error: t(`updateProfileError`),
+      loading: t(`:pdateProfileLoading`),
    });
  };

@@ -72,7 +68,7 @@ export function UpdateAccountDetailsForm({
            render={({ field }) => (
              <FormItem>
                <FormLabel>
-                  <Trans i18nKey={'profile:displayNameLabel'} />
+                  <Trans i18nKey={'account:name'} />
                </FormLabel>

                <FormControl>
@@ -92,7 +88,7 @@ export function UpdateAccountDetailsForm({

          <div>
            <Button disabled={updateAccountMutation.isPending}>
-              <Trans i18nKey={'profile:updateProfileSubmitLabel'} />
+              <Trans i18nKey={'account:updateProfileSubmitLabel'} />
            </Button>
          </div>
        </form>
--- a/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';

 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
-import ImageUploader from '@kit/ui/image-uploader';
+import { ImageUploader } from '@kit/ui/image-uploader';
 import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { Trans } from '@kit/ui/trans';

@@ -42,10 +42,10 @@ function UploadProfileAvatarForm(props: {
  onAvatarUpdated: () => void;
 }) {
  const client = useSupabase();
-  const { t } = useTranslation('profile');
+  const { t } = useTranslation('account');

  const createToaster = useCallback(
-    (promise: Promise<unknown>) => {
+    (promise: () => Promise<unknown>) => {
      return toast.promise(promise, {
        success: t(`updateProfileSuccess`),
        error: t(`updateProfileError`),
@@ -68,37 +68,39 @@ function UploadProfileAvatarForm(props: {
      };

      if (file) {
-        const promise = removeExistingStorageFile().then(() =>
-          uploadUserProfilePhoto(client, file, props.userId)
-            .then((pictureUrl) => {
+        const promise = () =>
+          removeExistingStorageFile().then(() =>
+            uploadUserProfilePhoto(client, file, props.userId)
+              .then((pictureUrl) => {
+                return client
+                  .from('accounts')
+                  .update({
+                    picture_url: pictureUrl,
+                  })
+                  .eq('id', props.userId)
+                  .throwOnError();
+              })
+              .then(() => {
+                props.onAvatarUpdated();
+              }),
+          );
+
+        createToaster(promise);
+      } else {
+        const promise = () =>
+          removeExistingStorageFile()
+            .then(() => {
              return client
                .from('accounts')
                .update({
-                  picture_url: pictureUrl,
+                  picture_url: null,
                })
                .eq('id', props.userId)
                .throwOnError();
            })
            .then(() => {
              props.onAvatarUpdated();
-            }),
-        );
-
-        createToaster(promise);
-      } else {
-        const promise = removeExistingStorageFile()
-          .then(() => {
-            return client
-              .from('accounts')
-              .update({
-                picture_url: null,
-              })
-              .eq('id', props.userId)
-              .throwOnError();
-          })
-          .then(() => {
-            props.onAvatarUpdated();
-          });
+            });

        createToaster(promise);
      }
@@ -110,11 +112,11 @@ function UploadProfileAvatarForm(props: {
    <ImageUploader value={props.pictureUrl} onValueChange={onValueChange}>
      <div className={'flex flex-col space-y-1'}>
        <span className={'text-sm'}>
-          <Trans i18nKey={'profile:profilePictureHeading'} />
+          <Trans i18nKey={'account:profilePictureHeading'} />
        </span>

        <span className={'text-xs'}>
-          <Trans i18nKey={'profile:profilePictureSubheading'} />
+          <Trans i18nKey={'account:profilePictureSubheading'} />
        </span>
      </div>
    </ImageUploader>
@@ -142,9 +144,7 @@ async function uploadUserProfilePhoto(
  const extension = photoFile.name.split('.').pop();
  const fileName = await getAvatarFileName(userId, extension);

-  const result = await bucket.upload(fileName, bytes, {
-    upsert: true,
-  });
+  const result = await bucket.upload(fileName, bytes);

  if (!result.error) {
    return bucket.getPublicUrl(fileName).data.publicUrl;
--- a/packages/features/accounts/src/components/personal-account-settings/update-email-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-email-form.tsx
@@ -1,14 +1,11 @@
 'use client';

-import { useCallback } from 'react';
-
 import type { User } from '@supabase/gotrue-js';

 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { z } from 'zod';

 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -25,32 +22,13 @@ import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';

-const UpdateEmailSchema = z
-  .object({
-    email: z.string().email(),
-    repeatEmail: z.string().email(),
-  })
-  .refine(
-    (values) => {
-      return values.email === values.repeatEmail;
-    },
-    {
-      path: ['repeatEmail'],
-      message: 'Emails do not match',
-    },
-  );
+import { UpdateEmailSchema } from '../../schema/update-email.schema';

-function createEmailResolver(currentEmail: string) {
+function createEmailResolver(currentEmail: string, errorMessage: string) {
  return zodResolver(
-    UpdateEmailSchema.refine(
-      (values) => {
-        return values.email !== currentEmail;
-      },
-      {
-        path: ['email'],
-        message: 'New email must be different from current email',
-      },
-    ),
+    UpdateEmailSchema.withTranslation(errorMessage).refine((schema) => {
+      return schema.email !== currentEmail;
+    }),
  );
 }

@@ -61,31 +39,31 @@ export function UpdateEmailForm({
  user: User;
  callbackPath: string;
 }) {
-  const { t } = useTranslation();
+  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();

-  const updateEmail = useCallback(
-    (email: string) => {
-      const redirectTo = new URL(callbackPath, window.location.host).toString();
+  const updateEmail = ({ email }: { email: string }) => {
+    // then, we update the user's email address
+    const promise = async () => {
+      const redirectTo = new URL(
+        callbackPath,
+        window.location.origin,
+      ).toString();

-      // then, we update the user's email address
-      const promise = updateUserMutation.mutateAsync({ email, redirectTo });
+      await updateUserMutation.mutateAsync({ email, redirectTo });
+    };

-      return toast.promise(promise, {
-        success: t(`profile:updateEmailSuccess`),
-        loading: t(`profile:updateEmailLoading`),
-        error: (error: Error) => {
-          return error.message ?? t(`profile:updateEmailError`);
-        },
-      });
-    },
-    [callbackPath, t, updateUserMutation],
-  );
+    toast.promise(promise, {
+      success: t(`updateEmailSuccess`),
+      loading: t(`updateEmailLoading`),
+      error: t(`updateEmailError`),
+    });
+  };

  const currentEmail = user.email;

  const form = useForm({
-    resolver: createEmailResolver(currentEmail!),
+    resolver: createEmailResolver(currentEmail!, t('emailNotMatching')),
    defaultValues: {
      email: '',
      repeatEmail: '',
@@ -97,18 +75,16 @@ export function UpdateEmailForm({
      <form
        className={'flex flex-col space-y-4'}
        data-test={'update-email-form'}
-        onSubmit={form.handleSubmit((values) => {
-          return updateEmail(values.email);
-        })}
+        onSubmit={form.handleSubmit(updateEmail)}
      >
        <If condition={updateUserMutation.data}>
          <Alert variant={'success'}>
            <AlertTitle>
-              <Trans i18nKey={'profile:updateEmailSuccess'} />
+              <Trans i18nKey={'account:updateEmailSuccess'} />
            </AlertTitle>

            <AlertDescription>
-              <Trans i18nKey={'profile:updateEmailSuccessMessage'} />
+              <Trans i18nKey={'account:updateEmailSuccessMessage'} />
            </AlertDescription>
          </Alert>
        </If>
@@ -118,7 +94,7 @@ export function UpdateEmailForm({
            render={({ field }) => (
              <FormItem>
                <FormLabel>
-                  <Trans i18nKey={'profile:newEmail'} />
+                  <Trans i18nKey={'account:newEmail'} />
                </FormLabel>

                <FormControl>
@@ -141,7 +117,7 @@ export function UpdateEmailForm({
            render={({ field }) => (
              <FormItem>
                <FormLabel>
-                  <Trans i18nKey={'profile:repeatEmail'} />
+                  <Trans i18nKey={'account:repeatEmail'} />
                </FormLabel>

                <FormControl>
@@ -160,8 +136,8 @@ export function UpdateEmailForm({
          />

          <div>
-            <Button>
-              <Trans i18nKey={'profile:updateEmailSubmitLabel'} />
+            <Button disabled={updateUserMutation.isPending}>
+              <Trans i18nKey={'account:updateEmailSubmitLabel'} />
            </Button>
          </div>
        </div>
--- a/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-password-container.tsx
@@ -18,6 +18,10 @@ export function UpdatePasswordFormContainer(
    return <LoadingOverlay fullPage={false} />;
  }

+  if (!user) {
+    return null;
+  }
+
  const canUpdatePassword = user.identities?.some(
    (item) => item.provider === `email`,
  );
@@ -32,7 +36,7 @@ export function UpdatePasswordFormContainer(
 function WarnCannotUpdatePasswordAlert() {
  return (
    <Alert variant={'warning'}>
-      <Trans i18nKey={'profile:cannotUpdatePassword'} />
+      <Trans i18nKey={'account:cannotUpdatePassword'} />
    </Alert>
  );
 }
--- a/packages/features/accounts/src/components/personal-account-settings/update-password-form.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/update-password-form.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useCallback, useState } from 'react';
+import { useState } from 'react';

 import type { User } from '@supabase/gotrue-js';

@@ -8,7 +8,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import { z } from 'zod';

 import { useUpdateUser } from '@kit/supabase/hooks/use-update-user-mutation';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -26,21 +25,7 @@ import { Input } from '@kit/ui/input';
 import { Label } from '@kit/ui/label';
 import { Trans } from '@kit/ui/trans';

-const PasswordUpdateSchema = z
-  .object({
-    currentPassword: z.string().min(8).max(99),
-    newPassword: z.string().min(8).max(99),
-    repeatPassword: z.string().min(8).max(99),
-  })
-  .refine(
-    (values) => {
-      return values.newPassword === values.repeatPassword;
-    },
-    {
-      path: ['repeatPassword'],
-      message: 'Passwords do not match',
-    },
-  );
+import { PasswordUpdateSchema } from '../../schema/update-password.schema';

 export const UpdatePasswordForm = ({
  user,
@@ -49,57 +34,58 @@ export const UpdatePasswordForm = ({
  user: User;
  callbackPath: string;
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('account');
  const updateUserMutation = useUpdateUser();
  const [needsReauthentication, setNeedsReauthentication] = useState(false);

  const form = useForm({
-    resolver: zodResolver(PasswordUpdateSchema),
+    resolver: zodResolver(
+      PasswordUpdateSchema.withTranslation(t('passwordNotMatching')),
+    ),
    defaultValues: {
-      currentPassword: '',
      newPassword: '',
      repeatPassword: '',
    },
  });

-  const updatePasswordFromCredential = useCallback(
-    (password: string) => {
-      const redirectTo = [window.location.origin, callbackPath].join('');
+  const updatePasswordFromCredential = (password: string) => {
+    const redirectTo = [window.location.origin, callbackPath].join('');

-      const promise = updateUserMutation
-        .mutateAsync({ password, redirectTo })
-        .then(() => {
-          form.reset();
-        })
-        .catch((error) => {
-          if (error?.includes('Password update requires reauthentication')) {
-            setNeedsReauthentication(true);
-          }
-        });
-
-      toast.promise(promise, {
-        success: t(`profile:updatePasswordSuccess`),
-        error: t(`profile:updatePasswordError`),
-        loading: t(`profile:updatePasswordLoading`),
+    const promise = updateUserMutation
+      .mutateAsync({ password, redirectTo })
+      .catch((error) => {
+        if (
+          typeof error === 'string' &&
+          error?.includes('Password update requires reauthentication')
+        ) {
+          setNeedsReauthentication(true);
+        } else {
+          throw error;
+        }
      });
-    },
-    [callbackPath, updateUserMutation, t, form],
-  );

-  const updatePasswordCallback = useCallback(
-    async ({ newPassword }: { newPassword: string }) => {
-      const email = user.email;
+    toast.promise(() => promise, {
+      success: t(`updatePasswordSuccess`),
+      error: t(`updatePasswordError`),
+      loading: t(`updatePasswordLoading`),
+    });
+  };

-      // if the user does not have an email assigned, it's possible they
-      // don't have an email/password factor linked, and the UI is out of sync
-      if (!email) {
-        return Promise.reject(t(`profile:cannotUpdatePassword`));
-      }
+  const updatePasswordCallback = async ({
+    newPassword,
+  }: {
+    newPassword: string;
+  }) => {
+    const email = user.email;

-      updatePasswordFromCredential(newPassword);
-    },
-    [user.email, updatePasswordFromCredential, t],
-  );
+    // if the user does not have an email assigned, it's possible they
+    // don't have an email/password factor linked, and the UI is out of sync
+    if (!email) {
+      return Promise.reject(t(`cannotUpdatePassword`));
+    }
+
+    updatePasswordFromCredential(newPassword);
+  };

  return (
    <Form {...form}>
@@ -111,11 +97,11 @@ export const UpdatePasswordForm = ({
          <If condition={updateUserMutation.data}>
            <Alert variant={'success'}>
              <AlertTitle>
-                <Trans i18nKey={'profile:updatePasswordSuccess'} />
+                <Trans i18nKey={'account:updatePasswordSuccess'} />
              </AlertTitle>

              <AlertDescription>
-                <Trans i18nKey={'profile:updatePasswordSuccessMessage'} />
+                <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
              </AlertDescription>
            </Alert>
          </If>
@@ -123,11 +109,11 @@ export const UpdatePasswordForm = ({
          <If condition={needsReauthentication}>
            <Alert variant={'warning'}>
              <AlertTitle>
-                <Trans i18nKey={'profile:needsReauthentication'} />
+                <Trans i18nKey={'account:needsReauthentication'} />
              </AlertTitle>

              <AlertDescription>
-                <Trans i18nKey={'profile:needsReauthenticationDescription'} />
+                <Trans i18nKey={'account:needsReauthenticationDescription'} />
              </AlertDescription>
            </Alert>
          </If>
@@ -139,7 +125,7 @@ export const UpdatePasswordForm = ({
                <FormItem>
                  <FormLabel>
                    <Label>
-                      <Trans i18nKey={'profile:newPassword'} />
+                      <Trans i18nKey={'account:newPassword'} />
                    </Label>
                  </FormLabel>

@@ -165,7 +151,7 @@ export const UpdatePasswordForm = ({
                <FormItem>
                  <FormLabel>
                    <Label>
-                      <Trans i18nKey={'profile:repeatPassword'} />
+                      <Trans i18nKey={'account:repeatPassword'} />
                    </Label>
                  </FormLabel>

@@ -185,8 +171,8 @@ export const UpdatePasswordForm = ({
          />

          <div>
-            <Button>
-              <Trans i18nKey={'profile:updatePasswordSubmitLabel'} />
+            <Button disabled={updateUserMutation.isPending}>
+              <Trans i18nKey={'account:updatePasswordSubmitLabel'} />
            </Button>
          </div>
        </div>
--- a/packages/features/accounts/src/schema/account-details.schema.ts
+++ b/packages/features/accounts/src/schema/account-details.schema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const AccountDetailsSchema = z.object({
+  displayName: z.string().min(2).max(100),
+});
--- a/packages/features/accounts/src/schema/update-email.schema.ts
+++ b/packages/features/accounts/src/schema/update-email.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const UpdateEmailSchema = {
+  withTranslation: (errorMessage: string) => {
+    return z
+      .object({
+        email: z.string().email(),
+        repeatEmail: z.string().email(),
+      })
+      .refine(
+        (values) => {
+          return values.email === values.repeatEmail;
+        },
+        {
+          path: ['repeatEmail'],
+          message: errorMessage,
+        },
+      );
+  },
+};
--- a/packages/features/accounts/src/schema/update-password.schema.ts
+++ b/packages/features/accounts/src/schema/update-password.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod';
+
+export const PasswordUpdateSchema = {
+  withTranslation: (errorMessage: string) => {
+    return z
+      .object({
+        newPassword: z.string().min(8).max(99),
+        repeatPassword: z.string().min(8).max(99),
+      })
+      .refine(
+        (values) => {
+          return values.newPassword === values.repeatPassword;
+        },
+        {
+          path: ['repeatPassword'],
+          message: errorMessage,
+        },
+      );
+  },
+};
--- a/packages/features/auth/src/components/email-otp-container.tsx
+++ b/packages/features/auth/src/components/email-otp-container.tsx
@@ -80,9 +80,9 @@ function VerifyOtpForm({

        <Button disabled={verifyOtpMutation.isPending || !verifyCode}>
          {verifyOtpMutation.isPending ? (
-            <Trans i18nKey={'profile:verifyingCode'} />
+            <Trans i18nKey={'account:verifyingCode'} />
          ) : (
-            <Trans i18nKey={'profile:submitVerificationCode'} />
+            <Trans i18nKey={'account:submitVerificationCode'} />
          )}
        </Button>
      </div>
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -55,7 +55,7 @@ export function MultiFactorChallengeContainer({
    <form onSubmit={onSubmitClicked}>
      <div className={'flex flex-col space-y-4'}>
        <span className={'text-sm'}>
-          <Trans i18nKey={'profile:verifyActivationCodeDescription'} />
+          <Trans i18nKey={'account:verifyActivationCodeDescription'} />
        </span>

        <div className={'flex w-full flex-col space-y-2.5'}>
@@ -67,7 +67,7 @@ export function MultiFactorChallengeContainer({
          <If condition={verifyMFAChallenge.error}>
            <Alert variant={'destructive'}>
              <AlertDescription>
-                <Trans i18nKey={'profile:invalidVerificationCode'} />
+                <Trans i18nKey={'account:invalidVerificationCode'} />
              </AlertDescription>
            </Alert>
          </If>
@@ -75,9 +75,9 @@ export function MultiFactorChallengeContainer({

        <Button disabled={verifyMFAChallenge.isPending || !verifyCode}>
          {verifyMFAChallenge.isPending ? (
-            <Trans i18nKey={'profile:verifyingCode'} />
+            <Trans i18nKey={'account:verifyingCode'} />
          ) : (
-            <Trans i18nKey={'profile:submitVerificationCode'} />
+            <Trans i18nKey={'account:submitVerificationCode'} />
          )}
        </Button>
      </div>
@@ -154,7 +154,7 @@ function FactorsListContainer({
        <Spinner />

        <div>
-          <Trans i18nKey={'profile:loadingFactors'} />
+          <Trans i18nKey={'account:loadingFactors'} />
        </div>
      </div>
    );
@@ -165,7 +165,7 @@ function FactorsListContainer({
      <div className={'w-full'}>
        <Alert variant={'destructive'}>
          <AlertDescription>
-            <Trans i18nKey={'profile:factorsListError'} />
+            <Trans i18nKey={'account:factorsListError'} />
          </AlertDescription>
        </Alert>
      </div>
@@ -178,7 +178,7 @@ function FactorsListContainer({
    <div className={'flex flex-col space-y-4'}>
      <div>
        <Heading level={6}>
-          <Trans i18nKey={'profile:selectFactor'} />
+          <Trans i18nKey={'account:selectFactor'} />
        </Heading>
      </div>

--- a/packages/features/auth/src/components/password-reset-form.tsx
+++ b/packages/features/auth/src/components/password-reset-form.tsx
@@ -114,11 +114,11 @@ function SuccessState() {
    <div className={'flex flex-col space-y-4'}>
      <Alert variant={'destructive'}>
        <AlertTitle>
-          <Trans i18nKey={'profile:updatePasswordSuccess'} />
+          <Trans i18nKey={'account:updatePasswordSuccess'} />
        </AlertTitle>

        <AlertDescription>
-          <Trans i18nKey={'profile:updatePasswordSuccessMessage'} />
+          <Trans i18nKey={'account:updatePasswordSuccessMessage'} />
        </AlertDescription>
      </Alert>

--- a/packages/features/auth/src/components/sign-in-methods-container.tsx
+++ b/packages/features/auth/src/components/sign-in-methods-container.tsx
@@ -30,10 +30,9 @@ export function SignInMethodsContainer(props: {
  const router = useRouter();
  const nextPath = useSearchParams().get('next') ?? props.paths.home;

-  const redirectUrl = new URL(
-    props.paths.callback,
-    isBrowser() ? window?.location.origin : '',
-  ).toString();
+  const redirectUrl = isBrowser()
+    ? new URL(props.paths.callback, window?.location.origin).toString()
+    : '';

  const onSignIn = () => {
    router.replace(nextPath);
--- a/packages/features/team-accounts/src/components/create-team-account-dialog.tsx
+++ b/packages/features/team-accounts/src/components/create-team-account-dialog.tsx
@@ -33,7 +33,7 @@ export function CreateTeamAccountDialog(
    <Dialog open={props.isOpen} onOpenChange={props.setIsOpen}>
      <DialogContent>
        <DialogTitle>
-          <Trans i18nKey={'organization:createOrganizationModalHeading'} />
+          <Trans i18nKey={'teams:createOrganizationModalHeading'} />
        </DialogTitle>

        <CreateOrganizationAccountForm />
@@ -77,7 +77,7 @@ function CreateOrganizationAccountForm() {
              return (
                <FormItem>
                  <FormLabel>
-                    <Trans i18nKey={'organization:organizationNameLabel'} />
+                    <Trans i18nKey={'teams:organizationNameLabel'} />
                  </FormLabel>

                  <FormControl>
@@ -105,7 +105,7 @@ function CreateOrganizationAccountForm() {
            data-test={'confirm-create-organization-button'}
            disabled={pending}
          >
-            <Trans i18nKey={'organization:createOrganizationSubmitLabel'} />
+            <Trans i18nKey={'teams:createOrganizationSubmitLabel'} />
          </Button>
        </div>
      </form>
@@ -117,11 +117,11 @@ function CreateOrganizationErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:createOrganizationErrorHeading'} />
+        <Trans i18nKey={'teams:createOrganizationErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:createOrganizationErrorMessage'} />
+        <Trans i18nKey={'teams:createOrganizationErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/invitations/delete-invitation-dialog.tsx
+++ b/packages/features/team-accounts/src/components/invitations/delete-invitation-dialog.tsx
@@ -90,11 +90,11 @@ function RemoveInvitationErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:deleteInvitationErrorTitle'} />
+        <Trans i18nKey={'teams:deleteInvitationErrorTitle'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:deleteInvitationErrorMessage'} />
+        <Trans i18nKey={'teams:deleteInvitationErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
+++ b/packages/features/team-accounts/src/components/invitations/update-invitation-dialog.tsx
@@ -42,11 +42,11 @@ export const UpdateInvitationDialog: React.FC<{
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
-            <Trans i18nKey={'organization:updateMemberRoleModalHeading'} />
+            <Trans i18nKey={'teams:updateMemberRoleModalHeading'} />
          </DialogTitle>

          <DialogDescription>
-            <Trans i18nKey={'organization:updateMemberRoleModalDescription'} />
+            <Trans i18nKey={'teams:updateMemberRoleModalDescription'} />
          </DialogDescription>
        </DialogHeader>

@@ -139,7 +139,7 @@ function UpdateInvitationForm({
        />

        <Button data-test={'confirm-update-member-role'} disabled={pending}>
-          <Trans i18nKey={'organization:updateRoleSubmitLabel'} />
+          <Trans i18nKey={'teams:updateRoleSubmitLabel'} />
        </Button>
      </form>
    </Form>
@@ -150,11 +150,11 @@ function UpdateRoleErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:updateRoleErrorHeading'} />
+        <Trans i18nKey={'teams:updateRoleErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:updateRoleErrorMessage'} />
+        <Trans i18nKey={'teams:updateRoleErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx
+++ b/packages/features/team-accounts/src/components/members/invite-members-dialog-container.tsx
@@ -211,7 +211,7 @@ function InviteMembersForm({
                <Plus className={'h-4'} />

                <span>
-                  <Trans i18nKey={'organization:addAnotherMemberButtonLabel'} />
+                  <Trans i18nKey={'teams:addAnotherMemberButtonLabel'} />
                </span>
              </span>
            </Button>
--- a/packages/features/team-accounts/src/components/members/remove-member-dialog.tsx
+++ b/packages/features/team-accounts/src/components/members/remove-member-dialog.tsx
@@ -84,7 +84,7 @@ function RemoveMemberForm({
          disabled={isSubmitting}
          onClick={onMemberRemoved}
        >
-          <Trans i18nKey={'organization:removeMemberSubmitLabel'} />
+          <Trans i18nKey={'teams:removeMemberSubmitLabel'} />
        </Button>
      </div>
    </form>
@@ -95,11 +95,11 @@ function RemoveMemberErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:removeMemberErrorHeading'} />
+        <Trans i18nKey={'teams:removeMemberErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:removeMemberErrorMessage'} />
+        <Trans i18nKey={'teams:removeMemberErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx
+++ b/packages/features/team-accounts/src/components/members/transfer-ownership-dialog.tsx
@@ -109,7 +109,7 @@ function TransferOrganizationOwnershipForm({

        <p>
          <Trans
-            i18nKey={'organization:transferOwnershipDisclaimer'}
+            i18nKey={'teams:transferOwnershipDisclaimer'}
            values={{
              member: targetDisplayName,
            }}
@@ -153,9 +153,9 @@ function TransferOrganizationOwnershipForm({
        >
          <If
            condition={pending}
-            fallback={<Trans i18nKey={'organization:transferOwnership'} />}
+            fallback={<Trans i18nKey={'teams:transferOwnership'} />}
          >
-            <Trans i18nKey={'organization:transferringOwnership'} />
+            <Trans i18nKey={'teams:transferringOwnership'} />
          </If>
        </Button>
      </form>
@@ -167,11 +167,11 @@ function TransferOwnershipErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:transferOrganizationErrorHeading'} />
+        <Trans i18nKey={'teams:transferOrganizationErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:transferOrganizationErrorMessage'} />
+        <Trans i18nKey={'teams:transferOrganizationErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx
+++ b/packages/features/team-accounts/src/components/members/update-member-role-dialog.tsx
@@ -43,11 +43,11 @@ export const UpdateMemberRoleDialog: React.FC<{
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
-            <Trans i18nKey={'organization:updateMemberRoleModalHeading'} />
+            <Trans i18nKey={'teams:updateMemberRoleModalHeading'} />
          </DialogTitle>

          <DialogDescription>
-            <Trans i18nKey={'organization:updateMemberRoleModalDescription'} />
+            <Trans i18nKey={'teams:updateMemberRoleModalDescription'} />
          </DialogDescription>
        </DialogHeader>

@@ -140,7 +140,7 @@ function UpdateMemberForm({
        />

        <Button data-test={'confirm-update-member-role'} disabled={pending}>
-          <Trans i18nKey={'organization:updateRoleSubmitLabel'} />
+          <Trans i18nKey={'teams:updateRoleSubmitLabel'} />
        </Button>
      </form>
    </Form>
@@ -151,11 +151,11 @@ function UpdateRoleErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:updateRoleErrorHeading'} />
+        <Trans i18nKey={'teams:updateRoleErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
-        <Trans i18nKey={'organization:updateRoleErrorMessage'} />
+        <Trans i18nKey={'teams:updateRoleErrorMessage'} />
      </AlertDescription>
    </Alert>
  );
--- a/packages/features/team-accounts/src/components/team-account-danger-zone.tsx
+++ b/packages/features/team-accounts/src/components/team-account-danger-zone.tsx
@@ -45,12 +45,12 @@ function DeleteOrganizationContainer(props: { account: AccountData }) {
    <div className={'flex flex-col space-y-4'}>
      <div className={'flex flex-col space-y-1'}>
        <Heading level={6}>
-          <Trans i18nKey={'organization:deleteOrganization'} />
+          <Trans i18nKey={'teams:deleteOrganization'} />
        </Heading>

        <p className={'text-sm text-gray-500'}>
          <Trans
-            i18nKey={'organization:deleteOrganizationDescription'}
+            i18nKey={'teams:deleteOrganizationDescription'}
            values={{
              organizationName: props.account.name,
            }}
@@ -66,14 +66,14 @@ function DeleteOrganizationContainer(props: { account: AccountData }) {
              type={'button'}
              variant={'destructive'}
            >
-              <Trans i18nKey={'organization:deleteOrganization'} />
+              <Trans i18nKey={'teams:deleteOrganization'} />
            </Button>
          </DialogTrigger>

          <DialogContent>
            <DialogHeader>
              <DialogTitle>
-                <Trans i18nKey={'organization:deletingOrganization'} />
+                <Trans i18nKey={'teams:deletingOrganization'} />
              </DialogTitle>
            </DialogHeader>

@@ -104,7 +104,7 @@ function DeleteOrganizationForm({ name, id }: { name: string; id: string }) {
          >
            <div>
              <Trans
-                i18nKey={'organization:deleteOrganizationDisclaimer'}
+                i18nKey={'teams:deleteOrganizationDisclaimer'}
                values={{
                  organizationName: name,
                }}
@@ -119,7 +119,7 @@ function DeleteOrganizationForm({ name, id }: { name: string; id: string }) {
          <input type="hidden" value={id} name={'id'} />

          <Label>
-            <Trans i18nKey={'organization:organizationNameInputLabel'} />
+            <Trans i18nKey={'teams:organizationNameInputLabel'} />

            <Input
              name={'name'}
@@ -132,7 +132,7 @@ function DeleteOrganizationForm({ name, id }: { name: string; id: string }) {
            />

            <span className={'text-xs'}>
-              <Trans i18nKey={'organization:deleteOrganizationInputField'} />
+              <Trans i18nKey={'teams:deleteOrganizationInputField'} />
            </span>
          </Label>
        </div>
@@ -154,7 +154,7 @@ function DeleteOrganizationSubmitButton() {
      disabled={pending}
      variant={'destructive'}
    >
-      <Trans i18nKey={'organization:deleteOrganization'} />
+      <Trans i18nKey={'teams:deleteOrganization'} />
    </Button>
  );
 }
@@ -164,7 +164,7 @@ function LeaveOrganizationContainer(props: { account: AccountData }) {
    <div className={'flex flex-col space-y-4'}>
      <p>
        <Trans
-          i18nKey={'organization:leaveOrganizationDescription'}
+          i18nKey={'teams:leaveOrganizationDescription'}
          values={{
            organizationName: props.account.name,
          }}
@@ -179,16 +179,14 @@ function LeaveOrganizationContainer(props: { account: AccountData }) {
              type={'button'}
              variant={'destructive'}
            >
-              <Trans i18nKey={'organization:leaveOrganization'} />
+              <Trans i18nKey={'teams:leaveOrganization'} />
            </Button>
          </DialogTrigger>

          <DialogContent>
            <DialogHeader>
              <DialogTitle>
-                <Trans
-                  i18nKey={'organization:leavingOrganizationModalHeading'}
-                />
+                <Trans i18nKey={'teams:leavingOrganizationModalHeading'} />
              </DialogTitle>
            </DialogHeader>

@@ -200,7 +198,7 @@ function LeaveOrganizationContainer(props: { account: AccountData }) {
                  <div>
                    <div>
                      <Trans
-                        i18nKey={'organization:leaveOrganizationDisclaimer'}
+                        i18nKey={'teams:leaveOrganizationDisclaimer'}
                        values={{
                          organizationName: props.account?.name,
                        }}
@@ -230,7 +228,7 @@ function LeaveOrganizationSubmitButton() {
      disabled={pending}
      variant={'destructive'}
    >
-      <Trans i18nKey={'organization:leaveOrganization'} />
+      <Trans i18nKey={'teams:leaveOrganization'} />
    </Button>
  );
 }
@@ -239,7 +237,7 @@ function LeaveOrganizationErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:leaveOrganizationErrorHeading'} />
+        <Trans i18nKey={'teams:leaveOrganizationErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
@@ -253,7 +251,7 @@ function DeleteOrganizationErrorAlert() {
  return (
    <Alert variant={'destructive'}>
      <AlertTitle>
-        <Trans i18nKey={'organization:deleteOrganizationErrorHeading'} />
+        <Trans i18nKey={'teams:deleteOrganizationErrorHeading'} />
      </AlertTitle>

      <AlertDescription>
--- a/packages/features/team-accounts/src/components/update-organization-form.tsx
+++ b/packages/features/team-accounts/src/components/update-organization-form.tsx
@@ -66,9 +66,7 @@ export const UpdateOrganizationForm = (props: {
              return (
                <FormItem>
                  <FormLabel>
-                    <Trans
-                      i18nKey={'organization:organizationNameInputLabel'}
-                    />
+                    <Trans i18nKey={'teams:organizationNameInputLabel'} />
                  </FormLabel>

                  <FormControl>
@@ -90,7 +88,7 @@ export const UpdateOrganizationForm = (props: {
              data-test={'update-organization-submit-button'}
              disabled={updateAccountData.isPending}
            >
-              <Trans i18nKey={'organization:updateOrganizationSubmitLabel'} />
+              <Trans i18nKey={'teams:updateOrganizationSubmitLabel'} />
            </Button>
          </div>
        </form>
--- a/packages/i18n/src/i18n.settings.ts
+++ b/packages/i18n/src/i18n.settings.ts
@@ -14,10 +14,11 @@ export const I18N_COOKIE_NAME = 'lang';
 export const defaultI18nNamespaces = [
  'common',
  'auth',
-  'organization',
-  'profile',
-  'subscription',
-  'onboarding',
+  'account',
+  'teams',
+  'billing',
+  'marketing',
+  'admin',
 ];

 export function getI18nSettings(
--- a/packages/supabase/src/clients/browser.client.ts
+++ b/packages/supabase/src/clients/browser.client.ts
@@ -3,7 +3,7 @@ import { createBrowserClient } from '@supabase/ssr';

 import { Database } from '../database.types';

-let client: ReturnType<typeof createBrowserClient>;
+let client: ReturnType<typeof createBrowserClient<Database>>;

 export function getSupabaseBrowserClient<GenericSchema = Database>() {
  const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
@@ -12,7 +12,9 @@ export function getSupabaseBrowserClient<GenericSchema = Database>() {
  invariant(SUPABASE_URL, `Supabase URL was not provided`);
  invariant(SUPABASE_ANON_KEY, `Supabase Anon key was not provided`);

-  if (client) return client;
+  if (client) {
+    return client;
+  }

  client = createBrowserClient<GenericSchema>(SUPABASE_URL, SUPABASE_ANON_KEY);

--- a/packages/supabase/src/components/auth-change-listener.tsx
+++ b/packages/supabase/src/components/auth-change-listener.tsx
@@ -28,7 +28,6 @@ function AuthRedirectListener({
  useEffect(() => {
    // keep this running for the whole session unless the component was unmounted
    const listener = client.auth.onAuthStateChange((_, user) => {
-      console.log(_, user);
      // log user out if user is falsy
      // and if the current path is a private route
      const shouldRedirectUser = !user && isPrivateRoute(pathName);
@@ -47,10 +46,6 @@ function AuthRedirectListener({
          void router.refresh();
        }
      }
-
-      if (user && isPrivateRoute(pathName)) {
-        return revalidateUserSession();
-      }
    });

    // destroy listener on un-mounts
--- a/packages/supabase/src/hooks/use-sign-out.ts
+++ b/packages/supabase/src/hooks/use-sign-out.ts
@@ -1,16 +1,15 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';

 import { useSupabase } from './use-supabase';
-import { useRevalidateUserSession } from './use-user-session';

 export function useSignOut() {
  const client = useSupabase();
-  const revalidateUserSession = useRevalidateUserSession();
+  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async () => {
      await client.auth.signOut();
-      await revalidateUserSession();
+      await queryClient.invalidateQueries();
    },
  });
 }
--- a/packages/supabase/src/hooks/use-update-user-mutation.ts
+++ b/packages/supabase/src/hooks/use-update-user-mutation.ts
@@ -8,7 +8,7 @@ type Params = UserAttributes & { redirectTo: string };

 export function useUpdateUser() {
  const client = useSupabase();
-  const mutationKey = ['auth', 'update-user'];
+  const mutationKey = ['supabase:user'];

  const mutationFn = async (attributes: Params) => {
    const { redirectTo, ...params } = attributes;
@@ -17,10 +17,14 @@ export function useUpdateUser() {
      emailRedirectTo: redirectTo,
    });

+    console.log(response);
+
    if (response.error) {
      throw response.error;
    }

+    console.log('response.data:', response.data);
+
    return response.data;
  };

--- a/packages/supabase/src/hooks/use-user.ts
+++ b/packages/supabase/src/hooks/use-user.ts
@@ -7,7 +7,7 @@ import { useSupabase } from './use-supabase';
 export function useUser() {
  const client = useSupabase();
  const router = useRouter();
-  const queryKey = ['user'];
+  const queryKey = ['supabase:user'];

  const queryFn = async () => {
    const response = await client.auth.getUser();
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,7 +38,11 @@
    "zod": "^3.22.4",
    "sonner": "^1.4.41",
    "lucide-react": "0.307.0",
-    "class-variance-authority": "^0.7.0"
+    "class-variance-authority": "^0.7.0",
+    "date-fns": "^3.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.49.2"
  },
  "devDependencies": {
    "@kit/eslint-config": "0.2.0",
@@ -47,13 +51,9 @@
    "@kit/tsconfig": "0.1.0",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
-    "date-fns": "^3.2.0",
    "eslint": "^8.56.0",
    "prettier": "^3.2.4",
-    "react": "18.2.0",
    "react-day-picker": "^8.10.0",
-    "react-dom": "18.2.0",
-    "react-hook-form": "^7.49.2",
    "tailwindcss": "3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.3.3"
--- a/packages/ui/src/makerkit/error-boundary.tsx
+++ b/packages/ui/src/makerkit/error-boundary.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { Component } from 'react';

--- a/packages/ui/src/makerkit/image-uploader.tsx
+++ b/packages/ui/src/makerkit/image-uploader.tsx
@@ -11,7 +11,7 @@ import { Button } from '../shadcn/button';
 import { ImageUploadInput } from './image-upload-input';
 import { Trans } from './trans';

-function ImageUploader(
+export function ImageUploader(
  props: React.PropsWithChildren<{
    value: string | null | undefined;
    onValueChange: (value: File | null) => unknown;
@@ -87,8 +87,6 @@ function ImageUploader(
  );
 }

-export default ImageUploader;
-
 function FallbackImage(
  props: React.PropsWithChildren<{
    descriptionSection?: React.ReactNode;