Add a page to push users to install the flagship app (#4203)

cozy · Nov 7, 2023 · d6831be · d6831be
2 parents 562bf91 + 285b18c
commit d6831be
Show file tree

Hide file tree

Showing 14 changed files with 1,126 additions and 890 deletions.
diff --git a/assets/images/install-app.svg b/assets/images/install-app.svg
diff --git a/assets/locales/de.po b/assets/locales/de.po
@@ -957,3 +957,15 @@ msgstr "Refresh"
 
 msgid "Asset not found"
 msgstr "Asset not found"
+
+msgid "Install flagship app Title"
+msgstr "Install the application to finish"
+
+msgid "Install flagship app Description"
+msgstr "Your Cozy has been successfully created, install the application to use it right now!"
+
+msgid "Install flagship app Install"
+msgstr "Install the Cozy app"
+
+msgid "Install flagship app Skip"
+msgstr "Continue in the browser"
diff --git a/assets/locales/en.po b/assets/locales/en.po
@@ -1244,3 +1244,15 @@ msgstr "Refresh"
 
 msgid "Asset not found"
 msgstr "Asset not found"
+
+msgid "Install flagship app Title"
+msgstr "Install the application to finish"
+
+msgid "Install flagship app Description"
+msgstr "Your Cozy has been successfully created, install the application to use it right now!"
+
+msgid "Install flagship app Install"
+msgstr "Install the Cozy app"
+
+msgid "Install flagship app Skip"
+msgstr "Continue in the browser"
diff --git a/assets/locales/es.po b/assets/locales/es.po
@@ -968,3 +968,15 @@ msgstr "Refresh"
 
 msgid "Asset not found"
 msgstr "Asset not found"
+
+msgid "Install flagship app Title"
+msgstr "Install the application to finish"
+
+msgid "Install flagship app Description"
+msgstr "Your Cozy has been successfully created, install the application to use it right now!"
+
+msgid "Install flagship app Install"
+msgstr "Install the Cozy app"
+
+msgid "Install flagship app Skip"
+msgstr "Continue in the browser"
diff --git a/assets/locales/fr.po b/assets/locales/fr.po
@@ -1360,3 +1360,15 @@ msgstr "Actualiser"
 
 msgid "Asset not found"
 msgstr "Élément non trouvé"
+
+msgid "Install flagship app Title"
+msgstr "Installer l'application pour terminer"
+
+msgid "Install flagship app Description"
+msgstr "Votre Cozy a bien été créé, installez l'application pour en profiter dès maintenant !"
+
+msgid "Install flagship app Install"
+msgstr "Installer l'app Cozy"
+
+msgid "Install flagship app Skip"
+msgstr "Continuer dans mon navigateur"
diff --git a/assets/locales/ja.po b/assets/locales/ja.po
@@ -772,3 +772,15 @@ msgstr "Refresh"
 
 msgid "Asset not found"
 msgstr "Asset not found"
+
+msgid "Install flagship app Title"
+msgstr "Install the application to finish"
+
+msgid "Install flagship app Description"
+msgstr "Your Cozy has been successfully created, install the application to use it right now!"
+
+msgid "Install flagship app Install"
+msgstr "Install the Cozy app"
+
+msgid "Install flagship app Skip"
+msgstr "Continue in the browser"
diff --git a/assets/locales/nl_NL.po b/assets/locales/nl_NL.po
@@ -1153,3 +1153,15 @@ msgstr "Refresh"
 
 msgid "Asset not found"
 msgstr "Asset not found"
+
+msgid "Install flagship app Title"
+msgstr "Install the application to finish"
+
+msgid "Install flagship app Description"
+msgstr "Your Cozy has been successfully created, install the application to use it right now!"
+
+msgid "Install flagship app Install"
+msgstr "Install the Cozy app"
+
+msgid "Install flagship app Skip"
+msgstr "Continue in the browser"
diff --git a/assets/templates/install_flagship_app.html b/assets/templates/install_flagship_app.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="{{.Locale}}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#fff">
+    <title>{{.Title}}</title>
+    <link rel="stylesheet" href="{{asset .Domain "/fonts/fonts.css" .ContextName}}">
+    <link rel="stylesheet" href="{{asset .Domain "/css/cozy-bs.min.css" .ContextName}}">
+    <link rel="stylesheet" href="{{asset .Domain "/styles/theme.css" .ContextName}}">
+    <link rel="stylesheet" href="{{asset .Domain "/styles/cirrus.css" .ContextName}}">
+    {{.Favicon}}
+  </head>
+  <body class="cirrus theme-inverted">
+    <main class="wrapper">
+      <header class="wrapper-top">
+        <a href="https://cozy.io/" class="btn p-2 d-sm-none">
+          <img src="{{asset .Domain "/images/logo-dark.svg"}}" alt="Cozy Cloud" class="logo" />
+        </a>
+      </header>
+
+      <div class="d-flex flex-column align-items-center mb-md-3">
+        <img src="{{asset .Domain "/images/install-app.svg"}}" alt="" class="illustration big mb-3" />
+        <h1 class="h4 h2-md mb-3 text-center">{{t "Install flagship app Title"}}</h1>
+        <div class="mb-3 w-100 text-center">
+          {{t "Install flagship app Description" }}
+        </div>
+      </div>
+
+      <footer>
+        <a href="{{.StoreLink}}" class="btn btn-primary mb-2 w-100">{{t "Install flagship app Install"}}</a>
+        <a href="{{.SkipLink}}" class="btn btn-outline-info mb-2 w-100">{{t "Install flagship app Skip"}}</a>
+      </footer>
+    </main>
+    <script src="{{asset .Domain "/scripts/cirrus.js"}}"></script>
+  </body>
+</html>
diff --git a/docs/assets.md b/docs/assets.md
@@ -72,6 +72,7 @@ with given parameter. For example:
 * http://cozy.localhost:8080/dev/templates/confirm_flagship.html?Email=jane@example.com
 * http://cozy.localhost:8080/dev/templates/error.html?Error=oops&Button=Click%20me&ButtonURL=https://cozy.io/
 * http://cozy.localhost:8080/dev/templates/import.html
+* http://cozy.localhost:8080/dev/templates/install_flagship_app.html
 * http://cozy.localhost:8080/dev/templates/instance_blocked.html?Reason=test
 * http://cozy.localhost:8080/dev/templates/login.html
 * http://cozy.localhost:8080/dev/templates/magic_link_twofactor.html

diff --git a/docs/settings.md b/docs/settings.md
@@ -998,6 +998,12 @@ It redirects the user to an application after the onboarding. The application is
 selected according to the context of the instance and the configuration of the
 stack.
 
+### GET /settings/install_flagship_app
+
+At the end of an onboarding, just after the password has been chosen, if the
+user is in a mobile browser, the stack will show a page to push them to install
+the flagship app.
+
 ### GET /settings/context
 
 It gives the keys/values from the config for the context of the instance.

diff --git a/web/settings/context.go b/web/settings/context.go
@@ -14,6 +14,7 @@ import (
 	"github.com/cozy/cozy-stack/web/auth"
 	"github.com/cozy/cozy-stack/web/middlewares"
 	"github.com/labstack/echo/v4"
+	"github.com/mssola/user_agent"
 )
 
 type apiContext struct {
@@ -61,6 +62,12 @@ func finishOnboarding(c echo.Context, redirection string, acceptHTML bool) error
 		}
 	}
 
+	rawUserAgent := c.Request().UserAgent()
+	ua := user_agent.New(rawUserAgent)
+	if ua.Mobile() {
+		redirect = i.PageURL("/settings/install_app", nil)
+	}
+
 	// Retreiving client
 	// If there is no onboarding client, we keep going
 	client, err := oauth.FindOnboardingClient(i)

diff --git a/web/settings/settings.go b/web/settings/settings.go
@@ -5,8 +5,11 @@ package settings
 import (
 	"encoding/json"
 	"errors"
+	"fmt"
 	"net/http"
+	"strings"
 
+	"github.com/cozy/cozy-stack/model/feature"
 	"github.com/cozy/cozy-stack/model/instance"
 	"github.com/cozy/cozy-stack/model/permission"
 	"github.com/cozy/cozy-stack/model/session"
@@ -17,6 +20,7 @@ import (
 	"github.com/cozy/cozy-stack/pkg/jsonapi"
 	"github.com/cozy/cozy-stack/web/middlewares"
 	"github.com/labstack/echo/v4"
+	"github.com/mssola/user_agent"
 )
 
 type apiSession struct {
@@ -192,6 +196,42 @@ func (h *HTTPHandler) getEmailConfirmation(c echo.Context) error {
 	}
 }
 
+func (h *HTTPHandler) installFlagshipApp(c echo.Context) error {
+	inst := middlewares.GetInstance(c)
+	rawUserAgent := c.Request().UserAgent()
+	ua := user_agent.New(rawUserAgent)
+	platform := strings.ToLower(ua.Platform())
+	flags, err := feature.GetFlags(inst)
+	if err != nil {
+		return err
+	}
+
+	storeLink := "https://cozy.io/" + inst.Locale + "/download"
+	if strings.Contains(platform, "iphone") || strings.Contains(platform, "ipad") {
+		id, ok := flags.M["flagship.appstore_id"].(string)
+		if !ok {
+			id = "id1600636174"
+		}
+		storeLink = fmt.Sprintf("https://apps.apple.com/%s/app/%s", inst.Locale, id)
+	} else if strings.Contains(platform, "android") {
+		id, ok := flags.M["flagship.playstore_id"].(string)
+		if !ok {
+			id = "io.cozy.flagship.mobile"
+		}
+		storeLink = fmt.Sprintf("https://play.google.com/store/apps/details?id=%s&hl=%s", id, inst.Locale)
+	}
+
+	return c.Render(http.StatusOK, "install_flagship_app.html", echo.Map{
+		"Domain":      inst.ContextualDomain(),
+		"ContextName": inst.ContextName,
+		"Locale":      inst.Locale,
+		"Title":       inst.TemplateTitle(),
+		"Favicon":     middlewares.Favicon(inst),
+		"StoreLink":   storeLink,
+		"SkipLink":    inst.OnboardedRedirection().String(),
+	})
+}
+
 func isMovedError(err error) bool {
 	j, ok := err.(*jsonapi.Error)
 	return ok && j.Code == "moved"
@@ -233,6 +273,7 @@ func (h *HTTPHandler) Register(router *echo.Group) {
 	router.POST("/synchronized", h.synchronized)
 
 	router.GET("/onboarded", h.onboarded)
+	router.GET("/install_flagship_app", h.installFlagshipApp)
 	router.GET("/context", h.context)
 	router.GET("/warnings", h.listWarnings)
 }
diff --git a/web/statik/handler.go b/web/statik/handler.go
@@ -35,6 +35,7 @@ var (
 		"confirm_flagship.html",
 		"error.html",
 		"import.html",
+		"install_flagship_app.html",
 		"instance_blocked.html",
 		"login.html",
 		"magic_link_twofactor.html",