Support for uploading company logo

client/i18n/en-GB.json

@@ -188,9 +188,10 @@
     "subscriptionSettings": {
       "headerText": "Subscription",
       "companyLogoLabel": "Logo",
-      "companyLogoDescription": "Add the URL to your company logo. Recommended height is 40 pixels.",
+      "companyLogoDescription": "Add the URL to your company logo. Either use a Base 64 image string, or upload an image from your computer. Recommended dimensions are 120 x 40 pixels. You can see the preview below.",
       "navBackgroundLabel": "Navigation background color",
-      "navBackgroundDescription": "Custom background color for the navigation bar. If not specified, the default brand color will be used."
+      "navBackgroundDescription": "Custom background color for the navigation bar. If not specified, the default brand color will be used.",
+      "imageFieldUploadLabel": "Upload image"
     },
     "rolesPermissions": {
       "headerText": "Roles and permissions",

client/i18n/nb.json

@@ -207,9 +207,10 @@
     "subscriptionSettings": {
       "headerText": "Abonnement",
       "companyLogoLabel": "Logo",
-      "companyLogoDescription": "Legg til nettstedsadressen til firmalogoen din. Anbefalt høyde er 40 piksler.",
+      "companyLogoDescription": "Legg til nettstedsaddressen til firmalogoen din. Bruk enten en Base 64-bildestreng, eller last opp et bilde fra datamaskinen din. Anbefalte dimensjoner er 120 x 40 piksler. Du kan se en forhåndsvisning nedenfor.",
       "navBackgroundDescription": "Egendefinert bakgrunnsfarge for navigasjonslinjen. Hvis ikke spesifisert, vil standard farge brukes.",
-      "navBackgroundLabel": "Bakgrunnsfarge for navigasjonslinjen"
+      "navBackgroundLabel": "Bakgrunnsfarge for navigasjonslinjen",
+      "imageFieldUploadLabel": "Last opp bilde"
     },
     "rolesPermissions": {
       "headerText": "Roller og tillatelser",

client/i18n/nn.json

@@ -209,9 +209,10 @@
     "subscriptionSettings": {
       "headerText": "Abonnement",
       "companyLogoLabel": "Logo",
-      "companyLogoDescription": "Legg til nettstedsadressa til firmalogoen din. Anbefalt høgde er 40 pikslar.",
+      "companyLogoDescription": "Legg til nettstedsaddressen til firmalogoen din. Bruk enten en Base 64-bildestreng, eller last opp et bilde fra datamaskinen din. Anbefalte dimensjoner er 120 x 40 piksler. Du kan se en forhåndsvisning nedenfor.",
       "navBackgroundDescription": "Egendefinert bakgrunnsfarge for navigasjonslinjen. Hvis ikke spesifisert, vil standard farge brukes.",
-      "navBackgroundLabel": "Bakgrunnsfarge for navigasjonslinjen"
+      "navBackgroundLabel": "Bakgrunnsfarge for navigasjonslinjen",
+      "imageFieldUploadLabel": "Last opp bilde"
     },
     "rolesPermissions": {
       "headerText": "Roller og tillatelser",

client/pages/Admin/SubscriptionSettings/SettingsSection/ImageField/ImageField.module.scss

@@ -0,0 +1,35 @@
+.imageField {
+    .inputContainer {
+        display: flex;
+
+        .inputField {
+            flex: 1;
+            margin: 0 10px 0 0;
+        }
+
+        .imagePicker {
+            margin: 5px 0 0 0;
+            .imagePickerLabel {
+                background-color: var(--colorNeutralBackground1);
+                color: var(--colorNeutralForeground1);
+                border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+                font-family: var(--fontFamilyBase);
+                outline-style: none;
+                padding: 5px var(--spacingHorizontalM);
+                cursor: pointer;
+            }
+        }
+    }
+
+    .imagePreview {
+        width: 200px;
+        height: 55px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+            width: 120px;
+            height: 40px;
+        }
+    }
+}

client/pages/Admin/SubscriptionSettings/SettingsSection/ImageField/ImageField.tsx

@@ -0,0 +1,47 @@
+import { Input } from '@fluentui/react-components'
+import { Field, FieldDescription } from 'components'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyledComponent } from 'types'
+import styles from './ImageField.module.scss'
+import { IImageFieldProps } from './types'
+import { useImageField } from './useImageField'
+
+/**
+ * Renders an image field component with an image/file picker
+ * and a preview of the image.
+ *
+ * @component ImageField
+ */
+export const ImageField: StyledComponent<IImageFieldProps> = (props) => {
+    const { t } = useTranslation()
+    const { imagePickerId, onChange, isInputDisabled, navBackground } = useImageField(props)
+
+    return (
+        <div className={ImageField.className}>
+            <Field label={props.label}>
+                <div className={styles.inputContainer}>
+                    <Input className={styles.inputField} value={props.value} disabled={isInputDisabled} />
+                    <div className={styles.imagePicker}>
+                        <label htmlFor={imagePickerId} className={styles.imagePickerLabel}>
+                            {t('admin.subscriptionSettings.imageFieldUploadLabel')}
+                        </label>
+                        <input
+                            id={imagePickerId}
+                            type='file'
+                            accept='image/*'
+                            onChange={onChange}
+                            style={{ visibility: 'hidden' }} />
+                    </div>
+                </div>
+                <FieldDescription text={props.description} />
+            </Field>
+            <div className={styles.imagePreview} hidden={!props.value} style={{ background: navBackground}}>
+                <img src={props.value} />
+            </div>
+        </div>
+    )
+}
+
+ImageField.displayName = 'ImageField'
+ImageField.className = styles.imageField

client/pages/Admin/SubscriptionSettings/SettingsSection/ImageField/index.ts

@@ -0,0 +1,2 @@
+export * from './ImageField'
+export * from './types'

client/pages/Admin/SubscriptionSettings/SettingsSection/ImageField/types.ts

@@ -0,0 +1,23 @@
+export interface IImageFieldProps {
+    /**
+     * The label of the field
+     */
+    label?: string
+
+    /**
+     * The description of the field
+     */
+    description?: string
+
+    /**
+     * The current value of the field
+     */
+    value?: string
+
+    /**
+     * On change handler for the field
+     * 
+     * @param value The value of the field
+     */
+    onChange?: (value: string) => void
+}

client/pages/Admin/SubscriptionSettings/SettingsSection/ImageField/useImageField.ts

@@ -0,0 +1,35 @@
+import { useId } from '@fluentui/react-components'
+import React, { useState } from 'react'
+import { IImageFieldProps } from './types'
+import { ImageField } from './ImageField'
+import { useAppContext } from 'AppContext'
+import { useTheme } from '@fluentui/react'
+
+/**
+ * Custom hook for handling image field functionality.
+ *
+ * @param props - The props for the image field.
+ */
+export function useImageField(props: IImageFieldProps) {
+    const imagePickerId = useId(ImageField.displayName)
+    const { subscription } = useAppContext()
+    const theme = useTheme()
+    const [isInputDisabled, setIsInputDisabled] = useState(false)
+
+    const navBackground =
+        subscription?.settings?.brand?.navBackground ??
+        theme.semanticColors.menuHeader
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0]
+        if (!file) return
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onloadend = function () {
+            props.onChange(reader.result as string)
+            setIsInputDisabled(true)
+        }
+    }
+
+    return { imagePickerId, onChange, isInputDisabled, navBackground }
+}

client/pages/Admin/SubscriptionSettings/SettingsSection/SettingsSection.tsx

@@ -1,6 +1,7 @@
 import { CheckboxField, InputField } from 'components'
 import { TabComponent } from 'components/Tabs'
 import React from 'react'
+import { ImageField } from './ImageField'
 import { MultiCheckboxField } from './MultiCheckboxField'
 import styles from './SettingsSection.module.scss'
 import { ISettingsSectionProps } from './types'
@@ -61,6 +62,16 @@ export const SettingsSection: TabComponent<ISettingsSectionProps> = (props) => {
                 />
               )
             }
+            case 'image': {
+              return (
+                <ImageField
+                  {...fieldProps}
+                  key={settingsKey}
+                  value={getValueWithDefault(null)}
+                  onChange={onChange}
+                />
+              )
+            }
           }
         }
       )}

client/pages/Admin/SubscriptionSettings/types.tsx

@@ -1,10 +1,30 @@
 import { ITextFieldProps } from '@fluentui/react'
 import { CheckboxProps, SliderProps } from '@fluentui/react-components'
+import { IImageFieldProps } from './SettingsSection/ImageField'
 
 interface ISubscriptionSettingBase<T = any> {
+  /**
+   * The ID of the setting
+   */
   id: string
+
+  /**
+   * Conditionally disable the setting based on the current settings
+   * 
+   * @param settings The current settings
+   */
   disabledIf?: (settings: any) => boolean
+
+  /**
+   * Conditionally hide the setting based on the current settings
+   * 
+   * @param settings The current settings
+   */
   hiddenIf?: (settings: any) => boolean
+
+  /**
+   * The props to pass to the field component
+   */
   props: T
 }
 
@@ -30,8 +50,14 @@ export interface ISubscriptionSettingCheckboxMulti<T = any>
   options: Record<string, string>
 }
 
+export interface ISubscriptionSettingImage<T = IImageFieldProps>
+  extends ISubscriptionSettingBase<T> {
+  type: 'image'
+}
+
 export type SubscriptionSettingField<T = any> =
   | ISubscriptionSettingText<T>
   | ISubscriptionSettingBool<T>
   | ISubscriptionSettingNumber<T>
   | ISubscriptionSettingCheckboxMulti<T>
+  | ISubscriptionSettingImage

client/pages/Admin/SubscriptionSettings/useSubscriptionConfig.ts

@@ -61,11 +61,10 @@ export function useSubscriptionConfig() {
         },
         {
           id: 'logoSrc',
-          type: 'text',
+          type: 'image',
           props: {
             label: t('admin.subscriptionSettings.companyLogoLabel'),
-            description: t('admin.subscriptionSettings.companyLogoDescription'),
-            defaultValue: ''
+            description: t('admin.subscriptionSettings.companyLogoDescription')
           }
         } as SubscriptionSettingField
       ]

client/parts/Navigation/CompanyBrand/CompanyBrand.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { StyledComponent } from 'types'
 import React from 'react'
 import styles from './CompanyBrand.module.scss'

client/theme/iconCatalog.ts

@@ -1,4 +1,6 @@
 import {
+  ArrowUploadRegular,
+  ArrowUploadFilled,
   AddCircle24Filled,
   AddCircle24Regular,
   Alert24Filled,
@@ -149,6 +151,10 @@ import {
  * An object containing the available Fluent icons and their corresponding regular and filled versions.
  */
 export const iconCatalog = {
+  ArrowUpload: {
+    regular: ArrowUploadRegular,
+    filled: ArrowUploadFilled
+  },
   Color: {
     regular: ColorRegular,
     filled: ColorFilled