datum-cloud · matoszz · Jun 27, 2024 · Jun 23, 2024 · Jun 24, 2024 · Jun 24, 2024
diff --git a/apps/operator/package.json b/apps/operator/package.json
@@ -31,6 +31,8 @@
     "next-themes": "^0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-dropzone": "^14.2.3",
+    "react-easy-crop": "^5.0.7",
     "swr": "latest",
     "urql": "^4.0.7",
     "zustand": "^4.5.2"

diff --git a/apps/operator/src/app/(protected)/workspace-settings/general-settings/page.styles.tsx b/apps/operator/src/app/(protected)/workspace-settings/general-settings/page.styles.tsx
@@ -0,0 +1,9 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+export const pageStyles = tv({
+  slots: {
+    wrapper: 'flex  gap-[26px] flex-col',
+  },
+})
+
+export type PageVariants = VariantProps<typeof pageStyles>
diff --git a/apps/operator/src/app/(protected)/workspace-settings/general-settings/page.tsx b/apps/operator/src/app/(protected)/workspace-settings/general-settings/page.tsx
@@ -1,9 +1,25 @@
-import React from 'react'
-import PageTitle from '@/components/page-title'
+import { PageHeading } from '@repo/ui/page-heading'
+import type { Metadata } from 'next/types'
+import { WorkspaceNameForm } from '@/components/pages/protected/workspace/general-settings/workspace-name-form'
+import { AvatarUpload } from '@/components/shared/avatar-upload/avatar-upload'
+import { pageStyles } from './page.styles'
+import { WorkspaceEmailForm } from '@/components/pages/protected/workspace/general-settings/workspace-email-form'
+
+export const metadata: Metadata = {
+  title: 'Workspace settings',
+}
 
 const Page: React.FC = () => {
+  const { wrapper } = pageStyles()
   return (
-    <PageTitle title="Workspace settings - General settings" description="" />
+    <>
+      <PageHeading eyebrow="Workspace settings" heading="General" />
+      <div className={wrapper()}>
+        <WorkspaceNameForm />
+        <AvatarUpload />
+        <WorkspaceEmailForm />
+      </div>
+    </>
   )
 }
 

diff --git a/apps/operator/src/app/layout.tsx b/apps/operator/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   children: React.ReactNode
 }): JSX.Element {
   return (
-    <html className="h-full relative" lang="en">
+    <html className="h-full relative" lang="en" suppressHydrationWarning>
       <body
         className={`${karelia.variable} ${aime.variable} ${ftRegola.variable} font-sans w-full h-full bg-winter-sky-700 overscroll-none dark:bg-peat-900`}
       >

diff --git a/...erator/src/components/pages/protected/workspace/general-settings/workspace-email-form.tsx b/...erator/src/components/pages/protected/workspace/general-settings/workspace-email-form.tsx
@@ -0,0 +1,110 @@
+'use client'
+import {
+  useGetAllOrganizationsQuery,
+  useUpdateOrganizationMutation,
+} from '@repo/codegen/src/schema'
+import { Input, InputRow } from '@repo/ui/input'
+import { Panel, PanelHeader } from '@repo/ui/panel'
+import { useSession } from 'next-auth/react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  Form,
+  FormItem,
+  FormField,
+  FormControl,
+  FormMessage,
+} from '@repo/ui/form'
+import { z } from 'zod'
+import { Button } from '@repo/ui/button'
+import { useEffect, useState } from 'react'
+import { RESET_SUCCESS_STATE_MS } from '@/constants'
+
+const WorkspaceEmailForm = () => {
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [{ fetching: isSubmitting }, updateOrganisation] =
+    useUpdateOrganizationMutation()
+  const { data: sessionData } = useSession()
+  const currentOrgId = sessionData?.user.organization
+  const [allOrgs] = useGetAllOrganizationsQuery()
+  const currentWorkspace = allOrgs.data?.organizations.edges?.filter(
+    (org) => org?.node?.id === currentOrgId,
+  )[0]?.node
+
+  const formSchema = z.object({
+    email: z.string().email({ message: 'Invalid email address' }),
+  })
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  })
+
+  useEffect(() => {
+    if (currentWorkspace) {
+      form.reset({
+        email: currentWorkspace.setting?.billingEmail ?? undefined,
+      })
+    }
+  }, [currentWorkspace, form])
+
+  const updateWorkspace = async ({ email }: { email: string }) => {
+    await updateOrganisation({
+      updateOrganizationId: currentOrgId,
+      input: {
+        updateOrgSettings: {
+          billingEmail: email,
+        },
+      },
+    })
+    setIsSuccess(true)
+  }
+
+  const onSubmit = (data: z.infer<typeof formSchema>) => {
+    updateWorkspace({ email: data.email })
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      const timer = setTimeout(() => {
+        setIsSuccess(false)
+      }, RESET_SUCCESS_STATE_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [isSuccess])
+
+  return (
+    <Panel>
+      <PanelHeader heading="Billing email" noBorder />
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <InputRow>
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input variant="medium" type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              variant={isSuccess ? 'success' : 'sunglow'}
+              type="submit"
+              loading={isSubmitting}
+            >
+              {isSubmitting ? 'Saving' : isSuccess ? 'Saved' : 'Save'}
+            </Button>
+          </InputRow>
+        </form>
+      </Form>
+    </Panel>
+  )
+}
+
+export { WorkspaceEmailForm }
diff --git a/...perator/src/components/pages/protected/workspace/general-settings/workspace-name-form.tsx b/...perator/src/components/pages/protected/workspace/general-settings/workspace-name-form.tsx
@@ -0,0 +1,114 @@
+'use client'
+import {
+  useGetAllOrganizationsQuery,
+  useUpdateOrganizationMutation,
+} from '@repo/codegen/src/schema'
+import { Input, InputRow } from '@repo/ui/input'
+import { Panel, PanelHeader } from '@repo/ui/panel'
+import { useSession } from 'next-auth/react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  Form,
+  FormItem,
+  FormField,
+  FormControl,
+  FormMessage,
+} from '@repo/ui/form'
+import { z } from 'zod'
+import { Button } from '@repo/ui/button'
+import { useEffect, useState } from 'react'
+import { RESET_SUCCESS_STATE_MS } from '@/constants'
+
+const WorkspaceNameForm = () => {
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [{ fetching: isSubmitting }, updateOrganisation] =
+    useUpdateOrganizationMutation()
+  const { data: sessionData } = useSession()
+  const currentOrgId = sessionData?.user.organization
+  const [allOrgs] = useGetAllOrganizationsQuery()
+  const currentWorkspace = allOrgs.data?.organizations.edges?.filter(
+    (org) => org?.node?.id === currentOrgId,
+  )[0]?.node
+
+  const formSchema = z.object({
+    displayName: z.string().min(2, {
+      message: 'Display name must be at least 2 characters',
+    }),
+  })
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      displayName: '',
+    },
+  })
+
+  useEffect(() => {
+    if (currentWorkspace) {
+      form.reset({
+        displayName: currentWorkspace.displayName,
+      })
+    }
+  }, [currentWorkspace, form])
+
+  const updateWorkspace = async ({ displayName }: { displayName: string }) => {
+    await updateOrganisation({
+      updateOrganizationId: currentOrgId,
+      input: {
+        displayName: displayName,
+      },
+    })
+    setIsSuccess(true)
+  }
+
+  const onSubmit = (data: z.infer<typeof formSchema>) => {
+    updateWorkspace({ displayName: data.displayName })
+  }
+
+  useEffect(() => {
+    if (isSuccess) {
+      const timer = setTimeout(() => {
+        setIsSuccess(false)
+      }, RESET_SUCCESS_STATE_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [isSuccess])
+
+  return (
+    <Panel>
+      <PanelHeader
+        heading="Workspace name"
+        subheading="This is the name of your workspace, which will hold your data and other configuration. This would typically be the name of the company you work for or represent."
+        noBorder
+      />
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <InputRow>
+            <FormField
+              control={form.control}
+              name="displayName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input variant="medium" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              variant={isSuccess ? 'success' : 'sunglow'}
+              type="submit"
+              loading={isSubmitting}
+            >
+              {isSubmitting ? 'Saving' : isSuccess ? 'Saved' : 'Save'}
+            </Button>
+          </InputRow>
+        </form>
+      </Form>
+    </Panel>
+  )
+}
+
+export { WorkspaceNameForm }
diff --git a/apps/operator/src/components/shared/avatar-upload/avatar-upload.styles.tsx b/apps/operator/src/components/shared/avatar-upload/avatar-upload.styles.tsx
@@ -0,0 +1,21 @@
+import { tv, type VariantProps } from 'tailwind-variants'
+
+const avatarUploadStyles = tv({
+  slots: {
+    wrapper:
+      'relative rounded border-dashed border border-blackberry-800/40 py-5 px-[110px] text-center h-[109px] flex items-center justify-center transition ease-in',
+    cropContainer: 'relative h-[350px]',
+    avatarPreview: 'absolute left-5',
+  },
+  variants: {
+    isDragActive: {
+      true: {
+        wrapper: 'border-blackberry-800',
+      },
+    },
+  },
+})
+
+export type AvatarUploadVariants = VariantProps<typeof avatarUploadStyles>
+
+export { avatarUploadStyles }