Cleanup

apps/web/app/join/_components/ExistingUserInviteForm.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useCallback, useTransition } from 'react';
+
+import type { Session } from '@supabase/gotrue-js';
+
+import useRefreshRoute from '@kit/shared/hooks/use-refresh-route';
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+function ExistingUserInviteForm(
+  props: React.PropsWithChildren<{
+    session: Session;
+    code: string;
+  }>,
+) {
+  const signOut = useSignOut();
+  const refresh = useRefreshRoute();
+  const [isSubmitting, startTransition] = useTransition();
+
+  const onSignOut = useCallback(async () => {
+    await signOut.mutateAsync();
+    refresh();
+  }, [refresh, signOut]);
+
+  const onInviteAccepted = useCallback(() => {
+    return startTransition(async () => {
+      await acceptInviteAction({
+        code: props.code,
+      });
+    });
+  }, [props.code, startTransition]);
+
+  return (
+    <>
+      <div className={'flex flex-col space-y-4'}>
+        <p className={'text-center text-sm'}>
+          <Trans
+            i18nKey={'auth:clickToAcceptAs'}
+            values={{ email: props.session?.user.email }}
+            components={{ b: <b /> }}
+          />
+        </p>
+
+        <Button
+          className={'w-full'}
+          disabled={isSubmitting}
+          onClick={onInviteAccepted}
+          data-test={'accept-invite-submit-button'}
+          type={'submit'}
+        >
+          <Trans i18nKey={'auth:acceptInvite'} />
+        </Button>
+
+        <div>
+          <div className={'flex flex-col space-y-4'}>
+            <p className={'text-center'}>
+              <span
+                className={
+                  'text-center text-sm text-gray-700 dark:text-gray-300'
+                }
+              >
+                <Trans i18nKey={'auth:acceptInviteWithDifferentAccount'} />
+              </span>
+            </p>
+
+            <div className={'flex justify-center'}>
+              <Button
+                data-test={'invite-sign-out-button'}
+                disabled={isSubmitting}
+                variant={'ghost'}
+                size={'sm'}
+                onClick={onSignOut}
+                type={'button'}
+              >
+                <Trans i18nKey={'auth:signOut'} />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ExistingUserInviteForm;