feat: Handle offline mode in Flagship app

manifest.webapp

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

package.json

@@ -35,12 +35,12 @@
   "homepage": "https://github.com/cozy/cozy-home#readme",
   "dependencies": {
     "@sentry/react": "7.119.0",
-    "cozy-client": "^48.25.0",
-    "cozy-device-helper": "2.7.0",
+    "cozy-client": "^49.0.0",
+    "cozy-device-helper": "3.1.0",
     "cozy-doctypes": "1.83.8",
     "cozy-flags": "4.0.0",
-    "cozy-harvest-lib": "^30.0.0",
-    "cozy-intent": "^2.19.2",
+    "cozy-harvest-lib": "^30.0.1",
+    "cozy-intent": "^2.23.0",
     "cozy-interapp": "^0.9.0",
     "cozy-keys-lib": "^6.1.1",
     "cozy-logger": "1.10.4",

src/components/Announcements/AnnouncementsDialog.tsx

@@ -33,7 +33,7 @@ const AnnouncementsDialog: FC<AnnouncementsDialogProps> = ({
   }
 
   const handleNext = (): void => {
-    const uuid = announcements[activeStep].attributes.uuid
+    const uuid = announcements[activeStep].uuid
     if (!values?.seen.includes(uuid)) {
       save({
         seen: [...(values?.seen ?? []), uuid]

src/components/Announcements/AnnouncementsDialogContent.tsx

@@ -23,17 +23,17 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
 }) => {
   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.formats.small?.url ??
+      announcement.primary_image.data.url
   )
   const secondaryImage = useAnnouncementsImage(
-    announcement.attributes.secondary_image.data?.attributes.formats.thumbnail
+    announcement.secondary_image.data?.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')
     }
   }
 
@@ -43,7 +43,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
         <img
           src={primaryImage}
           alt={
-            announcement.attributes.primary_image.data.attributes
+            announcement.primary_image.data
               .alternativeText
           }
           className="u-mt-1 u-mb-2 u-bdrs-3 u-maw-100"
@@ -54,7 +54,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
         />
       ) : null}
       <Typography align="center" className="u-mb-half" variant="h3">
-        {announcement.attributes.title}
+        {announcement.title}
       </Typography>
       <Typography
         align="center"
@@ -63,19 +63,19 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
         variant="body2"
       >
         {f(
-          announcement.attributes.start_at,
+          announcement.start_at,
           t('AnnouncementsDialogContent.dateFormat')
         )}
       </Typography>
       <div className="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}
@@ -93,8 +93,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
         <img
           src={secondaryImage}
           alt={
-            announcement.attributes.secondary_image.data?.attributes
-              .alternativeText
+            announcement.secondary_image.data?.alternativeText
           }
           className="u-mt-1 u-w-2 u-h-2"
           style={{

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/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-client/dist/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 { useWallpaperContext } from 'hooks/useWallpaperContext'
 
@@ -31,12 +36,14 @@ 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()
+
   // New improvements must be done with CozyClient
   const cozyClient = new CozyClient({
     uri: `${window.location.protocol}//${data.cozyDomain}`,
@@ -47,7 +54,10 @@ export const setupAppContext = memoize(() => {
       'home.store.persist'
     )
       ? true
-      : false
+      : false,
+    links: shouldUseWebFlagshipLink
+      ? new WebFlagshipLink({ webviewIntent: intent })
+      : null
   })
 
   cozyClient.registerPlugin(flag.plugin)
@@ -100,7 +110,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 (

src/components/DefaultRedirectionSnackbar/DefaultRedirectionSnackbar.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { useClient, useQuery } from 'cozy-client'
+import { useSettings } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -10,13 +10,12 @@ import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LightbulbIcon from 'cozy-ui/transpiled/react/Icons/Lightbulb'
 
-import { instanceSettingsConn, homeSettingsConn } from 'queries'
 import {
-  shouldShowDefaultRedirectionSnackbar,
-  disableDefaultRedirectionSnackbar,
-  setDefaultRedirectionToHome
-} from './helpers'
+  HOME_DEFAULT_REDIRECTION,
+  useShouldShowDefaultRedirectionSnackbar
+} from './useShouldShowDefaultRedirectionSnackbar'
 import useIncrementDefaultRedirectionViewCount from './useIncrementDefaultRedirectionViewCount'
+import { isFlagshipApp } from 'cozy-device-helper'
 
 const useStyles = makeStyles(theme => ({
   snackbar: {
@@ -29,39 +28,39 @@ const useStyles = makeStyles(theme => ({
 
 const DefaultAppSnackbar = () => {
   const { t } = useI18n()
-  const client = useClient()
   const classes = useStyles()
   const [isOpen, setIsOpen] = useState(true)
 
   const webviewIntent = useWebviewIntent()
 
-  const instanceSettingsResult = useQuery(
-    instanceSettingsConn.query,
-    instanceSettingsConn
-  )
+  const { save: saveHome } = useSettings('home', [
+    'default_redirection_snackbar_disabled'
+  ])
 
-  const homeSettingsResult = useQuery(homeSettingsConn.query, homeSettingsConn)
+  const { save: saveGlobal } = useSettings('instance', ['default_redirection'])
 
-  useIncrementDefaultRedirectionViewCount(
-    instanceSettingsResult,
-    homeSettingsResult
-  )
+  useIncrementDefaultRedirectionViewCount()
 
-  const showDefaultAppSnackbar = shouldShowDefaultRedirectionSnackbar(
-    instanceSettingsResult,
-    homeSettingsResult,
-    isOpen
-  )
+  const showDefaultAppSnackbar = useShouldShowDefaultRedirectionSnackbar(isOpen)
 
   const onRefuse = () => {
     setIsOpen(false)
-    disableDefaultRedirectionSnackbar(client, homeSettingsResult)
+    saveHome({
+      default_redirection_snackbar_disabled: true
+    })
   }
 
   const onAccept = () => {
     setIsOpen(false)
-    disableDefaultRedirectionSnackbar(client, homeSettingsResult)
-    setDefaultRedirectionToHome(client, instanceSettingsResult, webviewIntent)
+    saveHome({
+      default_redirection_snackbar_disabled: true
+    })
+    saveGlobal({
+      default_redirection: HOME_DEFAULT_REDIRECTION
+    })
+    if (isFlagshipApp()) {
+      webviewIntent.call('setDefaultRedirection', HOME_DEFAULT_REDIRECTION)
+    }
   }
 
   return (