hunk.code_window: /* eslint-disable */
   export function WarningIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
     return (
       <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M16.8125 13.0312L10.125 1.65625C9.625 0.78125 8.34375 0.78125 7.8125 1.65625L1.15625 13.0312C0.65625 13.9062 1.28125 15 2.3125 15H15.6562C16.6875 15 17.3125 13.9062 16.8125 13.0312ZM8.25 5.25C8.25 4.84375 8.5625 4.5 9 4.5C9.40625 4.5 9.75 4.84375 9.75 5.25V9.25C9.75 9.6875 9.40625 10 9 10C8.5625 10 8.25 9.6875 8.25 9.25V5.25ZM9 13C8.4375 13 8 12.5625 8 12.0312C8 11.5 8.4375 11.0625 9 11.0625C9.53125 11.0625 9.96875 11.5 9.96875 12.0312C9.96875 12.5625 9.53125 13 9 13Z"
  
hunk.labels: keep keep keep replace keep keep
hunk.after_edit:     <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
  
hunk.file_path: apps/web/src/design-system/icons/general/WarningIcon.tsx
hunk.type: replace
file: import { Flex, Grid, Group, Input, LoadingOverlay, Stack, useMantineTheme } from '@mantine/core';
  import { Dropzone } from '@mantine/dropzone';
  import { useMutation } from '@tanstack/react-query';
  import axios from 'axios';
  import { useEffect } from 'react';
  import { Controller, useForm } from 'react-hook-form';
  import { useOutletContext } from 'react-router-dom';
  import { IOrganizationEntity } from '@novu/shared';
  
  import { updateBrandingSettings } from '../../../api/organization';
  import { getSignedUrl } from '../../../api/storage';
  import Card from '../../../components/layout/components/Card';
  import { Button, ColorInput, colors, Select } from '../../../design-system';
  import { inputStyles } from '../../../design-system/config/inputs.styles';
  import { Upload } from '../../../design-system/icons';
  import { successMessage } from '../../../utils/notifications';
  
  const mimeTypes = {
    'image/jpeg': 'jpeg',
    'image/png': 'png',
  };
  
  export function BrandingForm() {
    const { currentOrganization: organization } = useOutletContext<{
      currentOrganization: IOrganizationEntity | undefined;
    }>();
    const { mutateAsync: getSignedUrlAction } = useMutation<
      { signedUrl: string; path: string; additionalHeaders: object },
      { error: string; message: string; statusCode: number },
      string
    >(getSignedUrl);
    const { setValue, handleSubmit, control } = useForm({
      defaultValues: {
        fontFamily: organization?.branding?.fontFamily || 'inherit',
        color: organization?.branding?.color || '#f47373',
        image: organization?.branding?.logo || '',
        file: '',
      },
    });
    const theme = useMantineTheme();
  
    const { mutateAsync: updateBrandingSettingsMutation, isLoading: isUpdateBrandingLoading } = useMutation<
      { logo: string; path: string },
      { error: string; message: string; statusCode: number },
      { logo: string | undefined; color: string | undefined }
    >(updateBrandingSettings);
  
    useEffect(() => {
      if (organization) {
        organization?.branding?.logo ? setValue('image', organization.branding.logo) : setValue('image', '');
        organization?.branding?.color ? setValue('color', organization?.branding?.color) : setValue('color', '#f47373');
        organization?.branding?.fontFamily
          ? setValue('fontFamily', organization?.branding?.fontFamily)
          : setValue('fontFamily', 'inherit');
      }
    }, [organization, setValue]);
  
    async function handleUpload(files: File[]) {
      const file = files[0];
      if (!file) return;
  
      const { signedUrl, path, additionalHeaders } = await getSignedUrlAction(mimeTypes[file.type]);
      const contentTypeHeaders = {
        'Content-Type': file.type,
      };
  
      const mergedHeaders = Object.assign({}, contentTypeHeaders, additionalHeaders || {});
      await axios.put(signedUrl, file, {
        headers: mergedHeaders,
        transformRequest: [
          (data, headers) => {
            if (headers) {
              // eslint-disable-next-line
              delete headers.Authorization;
            }
  
            return data;
          },
        ],
      });
  
      setValue('image', path);
    }
  
    async function saveBrandsForm({ color, fontFamily, image }) {
      const brandData = {
        color,
        logo: image,
        fontFamily,
      };
  
      await updateBrandingSettingsMutation(brandData);
  
      successMessage('Branding info updated successfully');
    }
  
    return (
      <Stack h="100%">
        <LoadingOverlay visible={!organization} />
        <form noValidate onSubmit={handleSubmit(saveBrandsForm)}>
          <Grid>
            <Grid.Col span={6}>
              <Card title="Brand Setting" space={26}>
                <Stack spacing={40}>
                  <Flex>
                    <Controller
                      render={({ field }) => (
                        <Input.Wrapper
                          styles={inputStyles}
                          label="Your Logo"
                          description="Will be used on email templates and inbox"
                        >
                          <Dropzone
                            styles={{
                              root: {
                                borderRadius: '7px',
                                border: ` 1px solid ${
                                  theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5]
                                }`,
                                background: 'none',
                              },
                            }}
                            accept={Object.keys(mimeTypes)}
                            multiple={false}
                            onDrop={handleUpload}
                            data-test-id="upload-image-button"
                          >
                            <Group
                              position="center"
                              spacing="xl"
                              style={{ minHeight: 100, minWidth: 100, pointerEvents: 'none' }}
                            >
                              {!field.value ? (
                                <Upload style={{ width: 80, height: 80, color: colors.B60 }} />
                              ) : (
                                <img
                                  data-test-id="logo-image-wrapper"
                                  src={field.value}
                                  style={{ width: 100, height: 100, objectFit: 'contain' }}
                                  alt="avatar"
                                />
                              )}
                            </Group>
                          </Dropzone>
                        </Input.Wrapper>
                      )}
                      control={control}
                      name="image"
                    />
                  </Flex>
                  <div style={{ width: '50%' }}>
                    <Controller
                      render={({ field }) => (
                        <ColorInput
                          label="Font Color"
                          description="Will be used for text in the in-app widget"
                          data-test-id="color-picker"
                          disallowInput={false}
                          {...field}
                        />
                      )}
                      control={control}
                      name="color"
                    />
                  </div>
                </Stack>
              </Card>
            </Grid.Col>
            <Grid.Col span={6}>
              {' '}
              <Card title="In-App Widget Customizations" space={26}>
                <Controller
                  render={({ field }) => (
                    <Select
                      label="Font Family"
                      description="Will be used as the main font-family in the in-app widget"
                      placeholder="Select a font family"
                      data={[
                        'inherit',
                        'Fira Code',
                        'Roboto',
                        'Montserrat',
                        'Open Sans',
                        'Lato',
                        'Nunito',
                        'Oswald',
                        'Raleway',
                      ]}
                      data-test-id="font-family-selector"
                      {...field}
                    />
                  )}
                  control={control}
                  name="fontFamily"
                />
              </Card>
            </Grid.Col>
          </Grid>
  
          <div
            style={{
              textAlign: 'right',
              marginTop: '60px',
            }}
          >
            <Button submit loading={isUpdateBrandingLoading} data-test-id="submit-branding-settings">
              Update
            </Button>
          </div>
        </form>
      </Stack>
    );
  }
  