feat: Handle offline mode in Flagship app

manifest.webapp

@@ -13,6 +13,7 @@
   },
   "version": "1.85.0",
   "licence": "AGPL-3.0",
+  "offline_support": true,
   "permissions": {
     "home": {
       "description": "Required to manage default redirection update",

package.json

@@ -37,7 +37,7 @@
     "@sentry/react": "7.119.0",
     "comlink": "4.4.1",
     "cozy-client": "^51.6.0",
-    "cozy-dataproxy-lib": "^2.3.0",
+    "cozy-dataproxy-lib": "^2.4.1",
     "cozy-device-helper": "3.7.1",
     "cozy-devtools": "^1.2.1",
     "cozy-doctypes": "1.83.8",

src/components/Announcements/AnnouncementsDialogContent.tsx

@@ -25,17 +25,16 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
   const { isMobile } = useBreakpoints()
   const { t, f } = useI18n()
   const primaryImage = useAnnouncementsImage(
-    announcement.attributes.primary_image.data.attributes.formats.small?.url ??
-      announcement.attributes.primary_image.data.attributes.url
+    announcement.primary_image.data.attributes.formats.small?.url ??
+      announcement.primary_image.data.attributes.url
   )
   const secondaryImage = useAnnouncementsImage(
-    announcement.attributes.secondary_image.data?.attributes.formats.thumbnail
-      .url
+    announcement.secondary_image.data?.attributes.formats.thumbnail.url
   )
 
   const handleMainAction = (): void => {
-    if (announcement.attributes.main_action?.link) {
-      window.open(announcement.attributes.main_action.link, '_blank')
+    if (announcement.main_action?.link) {
+      window.open(announcement.main_action.link, '_blank')
     }
   }
 
@@ -44,10 +43,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
       {primaryImage ? (
         <img
           src={primaryImage}
-          alt={
-            announcement.attributes.primary_image.data.attributes
-              .alternativeText
-          }
+          alt={announcement.primary_image.data.attributes.alternativeText}
           className="u-mb-2 u-bdrs-3 u-maw-100 u-mt-2-s"
           style={{
             objectFit: 'cover',
@@ -57,18 +53,15 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
         />
       ) : null}
       <Typography align="center" className="u-mb-half" variant="h3">
-        {announcement.attributes.title}
+        {announcement.title}
       </Typography>
       <Typography
         align="center"
         color="textSecondary"
         className="u-mb-1"
         variant="body2"
       >
-        {f(
-          announcement.attributes.start_at,
-          t('AnnouncementsDialogContent.dateFormat')
-        )}
+        {f(announcement.start_at, t('AnnouncementsDialogContent.dateFormat'))}
       </Typography>
       <div
         className={cx(
@@ -77,14 +70,14 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
           'u-ta-center u-maw-100'
         )}
       >
-        <Markdown content={announcement.attributes.content} />
+        <Markdown content={announcement.content} />
       </div>
-      {announcement.attributes.main_action ? (
+      {announcement.main_action ? (
         <Buttons
           fullWidth
           className="u-mb-half"
           variant="secondary"
-          label={announcement.attributes.main_action.label}
+          label={announcement.main_action.label}
           onClick={handleMainAction}
         />
       ) : null}
@@ -97,10 +90,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
       {secondaryImage ? (
         <img
           src={secondaryImage}
-          alt={
-            announcement.attributes.secondary_image.data?.attributes
-              .alternativeText
-          }
+          alt={announcement.secondary_image.data?.attributes.alternativeText}
           className="u-mt-1 u-w-2 u-h-2"
           style={{
             objectFit: 'cover',

src/components/Announcements/types.ts

@@ -1,40 +1,38 @@
 export interface Announcement {
   id: string
   type: string
-  attributes: {
-    title: string
-    content: string
-    start_at: string
-    uuid: string
-    main_action?: {
-      label: string
-      link: string
-    }
-    primary_image: {
-      data: {
-        attributes: {
-          formats: {
-            small?: {
-              url: string
-            }
+  title: string
+  content: string
+  start_at: string
+  uuid: string
+  main_action?: {
+    label: string
+    link: string
+  }
+  primary_image: {
+    data: {
+      attributes: {
+        formats: {
+          small?: {
+            url: string
           }
-          alternativeText?: string
-          url: string
         }
+        alternativeText?: string
+        url: string
       }
     }
-    secondary_image: {
-      data: {
-        attributes: {
-          formats: {
-            thumbnail: {
-              url: string
-            }
+  }
+  secondary_image: {
+    data: {
+      attributes: {
+        formats: {
+          thumbnail: {
+            url: string
           }
-          alternativeText?: string
         }
-      } | null
-    }
+        alternativeText?: string
+      }
+    } | null
   }
 }
 

src/components/AppHighlightAlert/AppHighlightAlertWrapper.jsx

@@ -2,34 +2,52 @@ import React, { useEffect, useState } from 'react'
 
 import { getAvailableAppHighlightAlerts } from 'components/AppHighlightAlert/helpers'
 import { useClient } from 'cozy-client'
+import log from 'cozy-logger'
 
 const AppHighlightAlertWrapper = ({ apps }) => {
   const [appHighlightAlerts, setAppHighlightAlerts] = useState([])
+  const [isAppHighlightAlertsError, setIsAppHighlightAlertsError] =
+    useState(false)
   const client = useClient()
 
   useEffect(() => {
     const getAppHighlightAlerts = async () => {
-      const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts(
-        client,
-        apps
-      )
-
-      setAppHighlightAlerts(availableAppHighlightAlerts)
+      try {
+        const availableAppHighlightAlerts =
+          await getAvailableAppHighlightAlerts(client, apps)
+
+        setAppHighlightAlerts(availableAppHighlightAlerts)
+      } catch (error) {
+        log('error', `App highlight error: ${error}`)
+        setIsAppHighlightAlertsError(true)
+      }
     }
 
-    if (apps && appHighlightAlerts.length === 0) {
+    if (apps && !isAppHighlightAlertsError && appHighlightAlerts.length === 0) {
       getAppHighlightAlerts()
     }
-  }, [client, apps, appHighlightAlerts.length])
+  }, [client, apps, isAppHighlightAlertsError, appHighlightAlerts.length])
 
-  useEffect(() => {
+  if (appHighlightAlerts && appHighlightAlerts?.length > 0) {
     appHighlightAlerts.forEach(component => {
-      if (component.displayed) {
-        component.onDisplayed()
-      } else {
-        component.onNotDisplayed()
+      if (component) {
+        component.displayed
+          ? component.onDisplayed()
+          : component.onNotDisplayed()
       }
     })
+  }
+
+  useEffect(() => {
+    if (appHighlightAlerts && appHighlightAlerts?.length > 0) {
+      appHighlightAlerts.forEach(component => {
+        if (component) {
+          component.displayed
+            ? component.onDisplayed()
+            : component.onNotDisplayed()
+        }
+      })
+    }
   }, [appHighlightAlerts])
 
   return (

src/components/AppWrapper.jsx

@@ -1,10 +1,15 @@
-import React, { createContext } from 'react'
+import React, { createContext, useEffect, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
 import memoize from 'lodash/memoize'
 
 import flag from 'cozy-flags'
-import CozyClient, { CozyProvider, RealTimeQueries } from 'cozy-client'
+import CozyClient, {
+  CozyProvider,
+  RealTimeQueries,
+  WebFlagshipLink
+} from 'cozy-client'
 import CozyDevtools from 'cozy-devtools'
+import { useWebviewIntent } from 'cozy-intent'
 import I18n from 'cozy-ui/transpiled/react/providers/I18n'
 import CozyTheme from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
@@ -14,7 +19,7 @@ import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 
 import configureStore from 'store/configureStore'
 import { RealtimePlugin } from 'cozy-realtime'
-// import { isFlagshipApp } from 'cozy-device-helper'
+import { isFlagshipApp, isFlagshipOfflineSupported } from 'cozy-device-helper'
 
 import { DataProxyProvider } from 'cozy-dataproxy-lib'
 import { useWallpaperContext } from 'hooks/useWallpaperContext'
@@ -32,12 +37,19 @@ export const AppContext = createContext()
  *
  * Is memoized to avoid several clients in case of hot-reload
  */
-export const setupAppContext = memoize(() => {
+export const setupAppContext = memoize(intent => {
   const lang = document.documentElement.getAttribute('lang') || 'en'
   const context = window.context || 'cozy'
   const root = document.querySelector('[role=application]')
   const data = root.dataset
 
+  const shouldUseWebFlagshipLink =
+    isFlagshipApp() && isFlagshipOfflineSupported()
+
+  const links = shouldUseWebFlagshipLink
+    ? [new WebFlagshipLink({ webviewIntent: intent })]
+    : null
+
   // New improvements must be done with CozyClient
   const cozyClient = new CozyClient({
     uri: `${window.location.protocol}//${data.cozyDomain}`,
@@ -48,7 +60,8 @@ export const setupAppContext = memoize(() => {
       'home.store.persist'
     )
       ? true
-      : false
+      : false,
+    links
   })
 
   cozyClient.registerPlugin(flag.plugin)
@@ -103,7 +116,21 @@ const ThemeProvider = ({ children }) => {
  * for an app
  */
 const AppWrapper = ({ children }) => {
-  const appContext = setupAppContext()
+  const webviewIntent = useWebviewIntent()
+  const [appContext, setAppContext] = useState(undefined)
+
+  useEffect(() => {
+    if (isFlagshipApp() && !webviewIntent) return
+
+    const newAppContext = setupAppContext(webviewIntent)
+
+    setAppContext(newAppContext)
+  }, [webviewIntent])
+
+  if (!appContext) {
+    return null
+  }
+
   const { store, cozyClient, context, lang, persistor } = appContext
 
   return (