move back 😏

apps/dashboard/src/app/(app)/create-organization.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { CreateClientSuccess } from '@/components/clients/create-client-success';
+import { LogoSquare } from '@/components/logo';
+import { Button, buttonVariants } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/utils/cn';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { SaveIcon, WallpaperIcon } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+import { api, handleError } from '../_trpc/client';
+
+const validation = z
+  .object({
+    organization: z.string().min(3),
+    project: z.string().min(3),
+    cors: z.string().nullable(),
+    tab: z.string(),
+  })
+  .refine(
+    (data) =>
+      data.tab === 'other' || (data.tab === 'website' && data.cors !== ''),
+    {
+      message: 'Cors is required',
+      path: ['cors'],
+    }
+  );
+
+type IForm = z.infer<typeof validation>;
+
+export function CreateOrganization() {
+  const router = useRouter();
+  const form = useForm<IForm>({
+    resolver: zodResolver(validation),
+    defaultValues: {
+      organization: '',
+      project: '',
+      cors: '',
+      tab: 'website',
+    },
+  });
+  const mutation = api.onboarding.organziation.useMutation({
+    onError: handleError,
+  });
+  const onSubmit: SubmitHandler<IForm> = (values) => {
+    mutation.mutate({
+      ...values,
+      cors: values.tab === 'website' ? values.cors : null,
+    });
+  };
+
+  if (mutation.isSuccess && mutation.data.client) {
+    return (
+      <div className="card p-4 md:p-8">
+        <LogoSquare className="w-20 mb-4" />
+        <h1 className="font-medium text-3xl">Nice job!</h1>
+        <div className="mb-4">
+          You're ready to start using our SDK. Save the client ID and secret (if
+          you have any)
+        </div>
+        <CreateClientSuccess {...mutation.data.client} />
+        <div className="flex gap-4 mt-4">
+          <a
+            className={cn(buttonVariants({ variant: 'secondary' }), 'flex-1')}
+            href="https://docs.openpanel.dev/docs"
+            target="_blank"
+          >
+            Read docs
+          </a>
+          <Button
+            className="flex-1"
+            onClick={() => router.refresh()}
+            icon={WallpaperIcon}
+          >
+            Dashboard
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="card p-4 md:p-8">
+      <LogoSquare className="w-20 mb-4" />
+      <h1 className="font-medium text-3xl">Welcome to Openpanel</h1>
+      <div className="text-lg">
+        Create your organization below (can be personal or a company) and your
+        first project.
+      </div>
+      <form
+        className="mt-8 flex flex-col gap-4"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <div>
+          <Label>Organization name *</Label>
+          <Input
+            placeholder="Organization name"
+            error={form.formState.errors.organization?.message}
+            {...form.register('organization')}
+          />
+        </div>
+        <div>
+          <Label>Project name *</Label>
+          <Input
+            placeholder="Project name"
+            error={form.formState.errors.project?.message}
+            {...form.register('project')}
+          />
+        </div>
+
+        <Tabs
+          defaultValue="website"
+          onValueChange={(val) => form.setValue('tab', val)}
+          className="h-28"
+        >
+          <TabsList className="bg-slate-200">
+            <TabsTrigger value="website">Website</TabsTrigger>
+            <TabsTrigger value="other">Other</TabsTrigger>
+          </TabsList>
+          <TabsContent value="website">
+            <Label>Cors *</Label>
+            <Input
+              placeholder="https://example.com"
+              error={form.formState.errors.cors?.message}
+              {...form.register('cors')}
+            />
+          </TabsContent>
+          <TabsContent value="other">
+            <div className="p-2 px-3 bg-white rounded text-sm">
+              🔑 You will get a secret to use for your API requests.
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        <div className="flex justify-end">
+          <Button
+            type="submit"
+            size="lg"
+            icon={SaveIcon}
+            loading={mutation.isLoading}
+          >
+            Create
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}