feat: Handle new configuration for logos

src/components/FooterLogo/FooterLogo.jsx

@@ -3,20 +3,19 @@ import { useClient, useQuery } from 'cozy-client'
 import { buildContextQuery } from 'queries'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 
-import { getHomeLogos } from 'components/FooterLogo/helpers'
-
 export const FooterLogo = () => {
   const client = useClient()
   const rootURL = client.getStackClient().uri
 
   const contextQuery = buildContextQuery()
   const { data } = useQuery(contextQuery.definition, contextQuery.options)
 
-  const logos = getHomeLogos(data, rootURL)
+  const logos = data?.logos?.home?.light || []
+  const secondaries = logos.filter(logos => logos.type === 'secondary')
+  const main = logos.find(logos => logos.type === 'main')
 
-  const hasSecondaries =
-    logos.secondaries && Object.keys(logos.secondaries).length !== 0
-  const hasMain = logos.main !== undefined
+  const hasSecondaries = secondaries.length !== 0
+  const hasMain = main !== undefined
 
   if (!hasMain && !hasSecondaries) return <div className="u-mt-3-s"></div>
 
@@ -27,9 +26,9 @@ export const FooterLogo = () => {
         <div className="u-flex u-mh-auto u-maw-100 u-flex-items-center">
           {hasMain ? (
             <img
-              key={logos.main.url}
-              src={logos.main.url}
-              alt={logos.main.alt}
+              key={main.src}
+              src={`${rootURL}/assets${main.src}`}
+              alt={main.alt}
               className="u-ph-1 u-pv-1 u-mah-3"
             />
           ) : null}
@@ -40,11 +39,11 @@ export const FooterLogo = () => {
           ) : null}
           {hasSecondaries ? (
             <div className="u-flex u-flex-grow-1 u-ov-auto u-filter-gray-100 u-pv-1">
-              {Object.entries(logos.secondaries).map(([logoSrc, logoAlt]) => (
+              {secondaries.map(({ src, alt }) => (
                 <img
-                  key={logoSrc}
-                  src={logoSrc}
-                  alt={logoAlt}
+                  key={src}
+                  src={`${rootURL}/assets${src}`}
+                  alt={alt}
                   className="u-ph-1 u-mah-3"
                   style={{
                     objectFit: 'contain'

src/components/FooterLogo/FooterLogo.spec.jsx

@@ -6,7 +6,8 @@ import { CozyProvider, createMockClient } from 'cozy-client'
 import { FooterLogo } from './FooterLogo'
 
 describe('FooterLogo', () => {
-  const setup = ({ attributes = {} } = {}) => {
+  const setup = mockLogos => {
+    const homeLogos = mockLogos ? { logos: { home: { light: mockLogos } } } : {}
     const mockClient = createMockClient({
       queries: {
         'io.cozy.settings/context': {
@@ -18,7 +19,7 @@ describe('FooterLogo', () => {
           data: [
             {
               id: 'io.cozy.settings/context',
-              attributes
+              ...homeLogos
             }
           ]
         }
@@ -40,42 +41,54 @@ describe('FooterLogo', () => {
   })
 
   it('should render secondaries logo only', () => {
-    setup({
-      attributes: {
-        home_logos: {
-          '/logo/1_partner.svg': 'Partner n°1',
-          '/logo/2_partner.svg': 'Partner n°2'
-        }
+    setup([
+      {
+        src: '/logo/partner1.png',
+        alt: 'Partner n°1',
+        type: 'secondary'
+      },
+      {
+        src: '/logo/partner2.png',
+        alt: 'Partner n°2',
+        type: 'secondary'
       }
-    })
+    ])
 
     const images = screen.getAllByAltText(/Partner n°*?/i)
     expect(images.length).toEqual(2)
   })
 
   it('should render main logo only', () => {
-    setup({
-      attributes: {
-        home_logos: {
-          '/lgoo/main_partner.svg': 'Main partner'
-        }
+    setup([
+      {
+        src: '/logo/partner_main.png',
+        alt: 'Main partner',
+        type: 'main'
       }
-    })
+    ])
 
     const image = screen.getByAltText('Main partner')
     expect(image).toBeInTheDocument()
   })
 
   it('should render both', () => {
-    setup({
-      attributes: {
-        home_logos: {
-          '/lgoo/main_partner.svg': 'Main partner',
-          '/logo/1_partner.svg': 'Partner n°1',
-          '/logo/2_partner.svg': 'Partner n°2'
-        }
+    setup([
+      {
+        src: '/logo/partner_main.png',
+        alt: 'Main partner',
+        type: 'main'
+      },
+      {
+        src: '/logo/partner1.png',
+        alt: 'Partner n°1',
+        type: 'secondary'
+      },
+      {
+        src: '/logo/partner2.png',
+        alt: 'Partner n°2',
+        type: 'secondary'
       }
-    })
+    ])
 
     const main = screen.getByAltText('Main partner')
     expect(main).toBeInTheDocument()