feat: hook up preferences branding form

packages/webapp/src/constants/preferencesMenu.tsx

@@ -8,6 +8,11 @@ export default [
     disabled: false,
     href: '/preferences/general',
   },
+  {
+    text: 'Branding',
+    disabled: false,
+    href: '/preferences/branding',
+  },
   {
     text: 'Billing',
     href: '/preferences/billing',

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingBoot.tsx

@@ -1,6 +1,10 @@
+import { useCurrentOrganization } from '@/hooks/query';
 import React, { createContext, useContext, ReactNode } from 'react';
 
-interface PreferencesBrandingContextType {}
+interface PreferencesBrandingContextType {
+  isOrganizationLoading: boolean;
+  organization: any;
+}
 
 const PreferencesBrandingContext =
   createContext<PreferencesBrandingContextType>(
@@ -14,7 +18,14 @@ interface PreferencesBrandingProviderProps {
 export const PreferencesBrandingBoot: React.FC<
   PreferencesBrandingProviderProps
 > = ({ children }) => {
-  const contextValue: PreferencesBrandingContextType = {};
+  // Fetches current organization information.
+  const { isLoading: isOrganizationLoading, data: organization } =
+    useCurrentOrganization({});
+
+  const contextValue: PreferencesBrandingContextType = {
+    isOrganizationLoading,
+    organization,
+  };
 
   return (
     <PreferencesBrandingContext.Provider value={contextValue}>

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingForm.tsx

@@ -1,11 +1,19 @@
 import React, { CSSProperties } from 'react';
 import { Formik, Form, FormikHelpers } from 'formik';
 import * as Yup from 'yup';
+import { omit } from 'lodash';
 import { PreferencesBrandingFormValues } from './_types';
 import { useUploadAttachments } from '@/hooks/query/attachments';
 import { AppToaster } from '@/components';
 import { Intent } from '@blueprintjs/core';
-import { excludePrivateProps } from '@/utils';
+import {
+  excludePrivateProps,
+  transformToCamelCase,
+  transformToForm,
+  transfromToSnakeCase,
+} from '@/utils';
+import { useUpdateOrganization } from '@/hooks/query';
+import { usePreferencesBrandingBoot } from './PreferencesBrandingBoot';
 
 const initialValues = {
   logoKey: '',
@@ -28,7 +36,19 @@ export const PreferencesBrandingForm = ({
 }: PreferencesBrandingFormProps) => {
   // Uploads the attachments.
   const { mutateAsync: uploadAttachments } = useUploadAttachments({});
+  // Mutate organization information.
+  const { mutateAsync: updateOrganization } = useUpdateOrganization();
 
+  const { organization } = usePreferencesBrandingBoot();
+
+  const formInitialValues = {
+    ...transformToForm(
+      transformToCamelCase(organization?.metadata),
+      initialValues,
+    ),
+  } as PreferencesBrandingFormValues;
+
+  // Handle the form submitting.
   const handleSubmit = async (
     values: PreferencesBrandingFormValues,
     { setSubmitting }: FormikHelpers<PreferencesBrandingFormValues>,
@@ -53,20 +73,32 @@ export const PreferencesBrandingForm = ({
         setSubmitting(false);
 
         // Adds the attachment key to the values after finishing upload.
-        _values['_logoFile'] = uploadedAttachmentRes?.key;
+        _values['logoKey'] = uploadedAttachmentRes?.key;
       } catch {
         handleError('An error occurred while uploading company logo.');
         setSubmitting(false);
         return;
       }
-      // Exclude all the private props that starts with _.
-      const excludedPrivateValues = excludePrivateProps(_values);
     }
+    // Exclude all the private props that starts with _.
+    const excludedPrivateValues = excludePrivateProps(_values);
+
+    const __values = transfromToSnakeCase(
+      omit(excludedPrivateValues, ['logoUri']),
+    );
+    // Update organization branding.
+    // @ts-expect-error
+    await updateOrganization({ ...__values });
+
+    AppToaster.show({
+      message: 'Organization branding has been updated.',
+      intent: Intent.SUCCESS,
+    });
   };
 
   return (
     <Formik
-      initialValues={initialValues}
+      initialValues={formInitialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
     >

packages/webapp/src/containers/Preferences/Branding/PreferencesBrandingFormContent.tsx

@@ -53,6 +53,7 @@ export function BrandingCompanyLogoUpload() {
 
         setFieldValue('_logoFile', file);
         setFieldValue('logoUri', imageUrl);
+        setFieldValue('logoKey', '');
       }}
       classNames={{
         root: styles.fileUploadRoot,

packages/webapp/src/containers/Preferences/General/GeneralForm.tsx

@@ -105,7 +105,6 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
       <FFormGroup
         name={'address'}
         label={'Organization Address'}
-
         inline
         fastField
       >
@@ -120,7 +119,6 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
             placeholder={'Address 2'}
             fastField
           />
-
           <Group spacing={15}>
             <FInputGroup name={'address.city'} placeholder={'City'} fastField />
             <FInputGroup
@@ -129,7 +127,6 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
               fastField
             />
           </Group>
-
           <Group spacing={15}>
             <FInputGroup
               name={'address.state_province'}

packages/webapp/src/hooks/query/organization.tsx

@@ -77,12 +77,12 @@ export function useOrganizationSetup() {
 /**
  * Saves the settings.
  */
-export function useUpdateOrganization(props) {
+export function useUpdateOrganization(props = {}) {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
   return useMutation(
-    (information) => apiRequest.put('organization', information),
+    (information: any) => apiRequest.put('organization', information),
     {
       onSuccess: () => {
         queryClient.invalidateQueries(t.ORGANIZATION_CURRENT);