feat: initial commit

Signed-off-by: Noa Virellia <noa@requiem.garden>

src/components/events/kyc/kyc.dialog.container.tsx

@@ -0,0 +1,119 @@
+import type { EventInfo } from '../types';
+import type { KycSubmission } from './kyc.types';
+import { Dialog } from '@radix-ui/react-dialog';
+import { useCallback, useEffect, useState } from 'react';
+import { useStore } from 'zustand';
+import { postKycQuery } from '@/client';
+import { useCreateKycSession } from '@/hooks/data/useCreateKycSession';
+import { useJoinEvent } from '@/hooks/data/useJoinEvent';
+import { KycFailedDialogView } from './kyc-failed.dialog.view';
+import { KycMethodSelectionDialogView } from './kyc-method-selection.dialog.view';
+import { KycPendingDialogView } from './kyc-pending.dialog.view';
+import { KycPromptDialogView } from './kyc-prompt.dialog.view';
+import { KycSuccessDialogView } from './kyc-success.dialog.view';
+import { createKycStore } from './kyc.state';
+
+export function KycDialogContainer({ event, children }: { event: EventInfo; children: React.ReactNode }) {
+  const [store] = useState(() => createKycStore(event.eventId));
+  const isDialogOpen = useStore(store, s => s.isDialogOpen);
+  const setIsDialogOpen = useStore(store, s => s.setIsDialogOpen);
+  const stage = useStore(store, s => s.stage);
+  const setStage = useStore(store, s => s.setStage);
+  const setKycId = useStore(store, s => s.setKycId);
+
+  const { mutateAsync: createKycSessionAsync } = useCreateKycSession();
+  const { mutateAsync: joinEventAsync } = useJoinEvent();
+
+  const joinEvent = useCallback(async (eventId: string, kycId: string, abortSignal?: AbortSignal) => {
+    try {
+      await joinEventAsync({
+        signal: abortSignal,
+        body: { event_id: eventId, kyc_id: kycId },
+      });
+      setStage('success');
+    }
+    catch (e) {
+      console.error('Error joining event:', e);
+      setStage('failed');
+    }
+  }, [joinEventAsync, setStage]);
+
+  const onKycSessionCreate = useCallback(async (submission: KycSubmission) => {
+    try {
+      const { data } = await createKycSessionAsync(submission);
+      setKycId(data!.kyc_id!);
+      if (data!.status === 'success') {
+        await joinEvent(event.eventId, data!.kyc_id!, undefined);
+      }
+      else if (data!.status === 'processing') {
+        window.open(data!.redirect_uri, '_blank');
+        setStage('pending');
+      }
+    }
+    catch (e) {
+      console.error(e);
+      setStage('failed');
+    }
+  }, [event.eventId, joinEvent, createKycSessionAsync, setKycId, setStage]);
+
+  useEffect(() => {
+    if (stage !== 'pending' || !isDialogOpen) {
+      return;
+    }
+
+    const controller = new AbortController();
+    let timer: NodeJS.Timeout;
+
+    const poll = async () => {
+      try {
+        const { data } = await postKycQuery({
+          signal: controller.signal,
+          body: { kyc_id: store.getState().kycId! },
+        });
+
+        const status = data?.data?.status;
+
+        if (status === 'success') {
+          void joinEvent(event.eventId, store.getState().kycId!, controller.signal);
+        }
+        else if (status === 'failed') {
+          setStage('failed');
+        }
+        else if (status === 'pending') {
+          timer = setTimeout(() => void poll(), 1000);
+        }
+        else {
+          // What the fuck?
+          setStage('failed');
+        }
+      }
+      catch (e) {
+        if ((e as Error).name === 'AbortError')
+          return;
+        console.error('Error fetching KYC status:', e);
+        setStage('failed');
+      }
+    };
+
+    void poll();
+
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [stage, store, setStage, isDialogOpen, joinEvent, event.eventId]);
+
+  return (
+    <Dialog
+      open={isDialogOpen}
+      onOpenChange={setIsDialogOpen}
+    >
+      {children}
+      {stage === 'prompt' && <KycPromptDialogView next={() => setStage('methodSelection')} />}
+      {stage === 'methodSelection' && <KycMethodSelectionDialogView onSubmit={onKycSessionCreate} />}
+      {stage === 'pending' && <KycPendingDialogView />}
+      {stage === 'success' && <KycSuccessDialogView />}
+      {stage === 'failed' && <KycFailedDialogView />}
+    </Dialog>
+  );
+}