Merge pull request #350 from virtualidentityag/feat/OB-9802-associati…

…on-agency-logos

Feat/ob 9802 association agency logos

src/api/agency/updateAgencyData.ts

@@ -42,6 +42,7 @@ export const updateAgencyData = async (agencyModel: AgencyData, formInput: Agenc
         demographics: formInput.demographics,
         counsellingRelations: formInput.counsellingRelations,
         dataProtection: formInput.dataProtection,
+        agencyLogo: formInput.agencyLogo,
     };
 
     return fetchData({

src/components/FormFileUploaderField/index.tsx

@@ -11,6 +11,7 @@ interface FormFileUploaderFieldProps {
     labelKey?: string;
     name?: string | string[];
     allowIcon?: boolean;
+    tooltip?: string;
 }
 
 interface FormRichTextEditorProps {
@@ -59,10 +60,21 @@ const FormFileUploaderLocal = ({ onChange, value, allowIcon }: FormRichTextEdito
     );
 };
 
-export const FormFileUploaderField = ({ name, labelKey, className, allowIcon }: FormFileUploaderFieldProps) => {
+export const FormFileUploaderField = ({
+    name,
+    labelKey,
+    className,
+    allowIcon,
+    tooltip,
+}: FormFileUploaderFieldProps) => {
     const { t } = useTranslation();
     return (
-        <Form.Item name={name} label={t(labelKey)} className={classNames(className, styles.richEditor)}>
+        <Form.Item
+            name={name}
+            label={t(labelKey)}
+            className={classNames(className, styles.richEditor)}
+            tooltip={tooltip}
+        >
             <FormFileUploaderLocal allowIcon={allowIcon} />
         </Form.Item>
     );

src/components/Tenants/GeneralSettings/components/LogoAndFavicon/index.tsx

@@ -4,28 +4,47 @@ import { CardEditable } from '../../../../CardEditable';
 import { FormFileUploaderField } from '../../../../FormFileUploaderField';
 import { useSingleTenantData } from '../../../../../hooks/useSingleTenantData';
 import { useTenantAdminDataMutation } from '../../../../../hooks/useTenantAdminDataMutation.hook';
+import { useAppConfigContext } from '../../../../../context/useAppConfig';
 
 export const LogoAndFavicon = ({ tenantId }: { tenantId: string }) => {
     const { t } = useTranslation();
     const { data, isLoading } = useSingleTenantData({ id: tenantId });
     const { mutate } = useTenantAdminDataMutation({ id: tenantId });
+    const { settings } = useAppConfigContext();
 
     return (
         <CardEditable
             isLoading={isLoading}
             initialValues={{ ...data }}
-            titleKey="settings.logoAndFavicon"
+            titleKey="settings.images.title"
             subTitle={t<string>('settings.images.howto')}
             onSave={mutate}
-            tooltip={t('settings.images.help')}
         >
             <Row gutter={15}>
                 <Col xs={6} md={5} lg={4}>
-                    <FormFileUploaderField labelKey="organisation.logo" name={['theming', 'logo']} />
+                    <FormFileUploaderField
+                        labelKey="organisation.logo"
+                        name={['theming', 'logo']}
+                        tooltip={t('settings.images.tooltip.logo')}
+                    />
                 </Col>
                 <Col xs={6} md={5} lg={4}>
-                    <FormFileUploaderField labelKey="organisation.favicon" name={['theming', 'favicon']} />
+                    <FormFileUploaderField
+                        allowIcon
+                        labelKey="organisation.favicon"
+                        name={['theming', 'favicon']}
+                        tooltip={t('settings.images.tooltip.favicon')}
+                    />
                 </Col>
+                {!settings.multitenancyWithSingleDomainEnabled && (
+                    <Col xs={6} md={5} lg={4}>
+                        <FormFileUploaderField
+                            labelKey="organisation.associationLogo"
+                            name={['theming', 'associationLogo']}
+                            tooltip={t('settings.images.tooltip.associationLogo')}
+                        />
+                    </Col>
+                )}
             </Row>
         </CardEditable>
     );

src/hooks/useTenantAdminDataMutation.hook.ts

@@ -49,21 +49,7 @@ export const useTenantAdminDataMutation = ({
                 url: `${tenantAdminEndpoint}/${id}`,
                 method: FETCH_METHODS.PUT,
                 skipAuth: false,
-                bodyData: JSON.stringify(
-                    mergeData(
-                        mergeWith(tenantAdminData, {
-                            // Temporary fix
-                            settings: {
-                                extendedSettings: {
-                                    welcomeMessage: {
-                                        welcomeMessageText: 'Herzlich Willkommen in der Onlineberatung!',
-                                    },
-                                },
-                            },
-                        }),
-                        data,
-                    ),
-                ),
+                bodyData: JSON.stringify(mergeData(tenantAdminData, data)),
                 responseHandling: [],
             });
         },

src/locales/de/translation.json

@@ -192,6 +192,8 @@
     "agency.edit.general.address.zip_code_scope.information": "Umkreis für Beratungsstelle einstellen",
     "agency.edit.general.address.save": "Speichern",
     "agency.edit.general.address.cancel": "Abbrechen",
+    "agency.edit.general.agency_logo.title": "Beratungsstellenlogo",
+    "agency.edit.general.agency_logo.description": "Fügen Sie hier ihr Beratungsstellenlogo ein um die Website der Beratungsstelle auf wiedererkennbare Weise zu kennzeichnen. Bitte beachten Sie das wir nur JPG- und PNG-Formate bis zu 500 KB annehmen können.",
     "agency.edit.settings.title": "Einstellungen zum Beratungsangebot",
     "agency.edit.settings.legal.responsible.title": "Kontaktdaten Verantwortlicher für die Datenverarbeitung",
     "agency.edit.settings.legal.responsible.text": "Für die Verarbeitung von personenbezogenen Daten der Ratsuchenden im Rahmen der Online-Beratung ist die jeweilige Beratungsstelle datenschutzrechtlich verantwortlich. Die Kontaktdaten der verantwortlichen Stelle können Sie hier hinterlegen.",
@@ -380,9 +382,9 @@
     "organisation.logo": "Logo",
     "organisation.allowedNumberOfUsers": "Anzahl von Benutzern",
     "organisation.favicon": "Favicon",
+    "organisation.associationLogo": "Verbandslogo",
     "organisation.primaryColor": "Derzeitige Hauptfarbe",
     "organisation.secondaryColor": "Derzeitige Detailfarbe",
-    "settings.logoAndFavicon": "Logo und Favicon",
     "imprint.title": "Impressum",
     "imprint.subTitle": "Fügen Sie hier das Impressum ein.",
     "privacy.title": "Datenschutz",
@@ -416,8 +418,11 @@
     "settings.subhead.personalisation": "Texte",
     "settings.subhead.view": "Erscheinungsbild",
     "settings.subhead.legal": "Rechtliches",
-    "settings.images.howto": "Fügen Sie hier ihr Logo und ihr Favicon ein um die Website auf wiedererkennbare Weise zu kennzeichnen. Bitte beachten Sie das wir nur JPG-/PNG- oder ICO-Formate bis zu 500 KB annehmen können.",
-    "settings.images.help": "Ein Logo ist ein grafisches Element, das auf der Anwendung Ihr Unternehmen präsentiert. Ein Favicon befindet sich im Browser Tab. Dieses Symbol hilft den Nutzern Ihre Anwendung schnell zwischen verschiedenen Seiten wiederzufinden.",
+    "settings.images.title": "Individuelle Bilder",
+    "settings.images.howto": "Bitte beachten Sie das wir nur JPG-/PNG-Formate bis zu 500 KB annehmen können.",
+    "settings.images.tooltip.logo": "Ein Logo ist ein grafisches Element, das auf der Anwendung Ihr Unternehmen präsentiert und auf der Startseite sichtbar ist.",
+    "settings.images.tooltip.favicon": "Ein Favicon befindet sich im Browser Tab. Dieses Symbol hilft den Nutzern Ihre Anwendung schnell zwischen verschiedenen Seiten wiederzufinden und ist im Browser sichtbar. Hierfür kann auch das ICO-Format verwendet werden.",
+    "settings.images.tooltip.associationLogo": "Ein Verbandslogo Logo ist ein grafisches Element, welches zusätzlich zum Logo ihren Verband präsentiert und auf der Startseite sichtbar ist.",
     "settings.colors": "Farben",
     "settings.colors.howto": "Wählen Sie die Hauptfarben Ihrer Anwendung. Falls sie keine zweite Farbe haben, wird automatisch eine passende zweite Farbe vorgeschlagen.",
     "profile.title": "Profil",

src/pages/Agency/Edit/components/AgencyLogo/index.tsx

@@ -0,0 +1,13 @@
+import { FormFileUploaderField } from '../../../../../components/FormFileUploaderField';
+import { Card } from '../../../../../components/Card';
+
+export const AgencyLogo = () => {
+    return (
+        <Card
+            titleKey="agency.edit.general.agency_logo.title"
+            subTitleKey="agency.edit.general.agency_logo.description"
+        >
+            <FormFileUploaderField name={['agencyLogo']} />
+        </Card>
+    );
+};

src/pages/Agency/Edit/index.tsx

@@ -23,6 +23,7 @@ import { useAgencyLegalDataMissing } from '../../../hooks/useAgencyLegalDataMiss
 import { ResponsibleSettings } from './components/ResponsibleSettings';
 import { ContactSettings } from './components/ContactSettings';
 import styles from '../../../components/Page/styles.module.scss';
+import { AgencyLogo } from './components/AgencyLogo';
 
 function hasOnlyDefaultRangeDefined(data: PostCodeRange[]) {
     return data?.length === 0 || (data?.length === 1 && data[0].from === '00000' && data[0].until === '99999');
@@ -86,6 +87,7 @@ export const AgencyPageEdit = () => {
             offline: !formData.online,
             counsellingRelations: formData.counsellingRelations?.map(({ value }) => value),
         };
+
         mutate(newFormData, {
             onError: () => {
                 setSubmitted(false);
@@ -174,6 +176,7 @@ export const AgencyPageEdit = () => {
                     </Col>
                     <Col xs={12} lg={6}>
                         <AgencySettings />
+                        <AgencyLogo />
                     </Col>
                 </Row>
                 {isEnabled(FeatureFlag.CentralDataProtectionTemplate) && (

src/types/TenantAdminData.ts

@@ -3,6 +3,7 @@ import { BasicTenantData } from './tenant';
 export interface TenantAdminData extends BasicTenantData {
     adminEmails: string[];
     theming: {
+        associationLogo?: string;
         logo?: string;
         favicon?: string;
         primaryColor?: string;

src/types/agency.d.ts

@@ -45,4 +45,5 @@ export interface AgencyData {
         alternativeDataProtectionRepresentativeContact: AgencyContact | null;
         dataProtectionOfficerContact: AgencyContact | null;
     };
+    agencyLogo: string | null;
 }