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",

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/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 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,14 @@
  *
  * 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}`,
@@ -48,7 +55,10 @@
       'home.store.persist'
     )
       ? true
-      : false
+      : false,
+    links: shouldUseWebFlagshipLink
+      ? new WebFlagshipLink({ webviewIntent: intent })
+      : null
   })
 
   cozyClient.registerPlugin(flag.plugin)
@@ -103,7 +113,21 @@
  * 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 (