Show tutorial bubble when clicking try it now from portal

ref #1905

Author: louischan-oursky

pkg/auth/deps.go

@@ -55,8 +55,10 @@ var DependencySet = wire.NewSet(
 
 	wire.Bind(new(webapp.GraphService), new(*interaction.Service)),
 	wire.Bind(new(webapp.CookieManager), new(*httputil.CookieManager)),
+	wire.Bind(new(webapp.TutorialMiddlewareTutorialCookie), new(*httputil.TutorialCookie)),
 	wire.Bind(new(handlerwebapp.CookieManager), new(*httputil.CookieManager)),
 	wire.Bind(new(oauthhandler.CookieManager), new(*httputil.CookieManager)),
+	wire.Bind(new(handlerwebapp.TutorialCookie), new(*httputil.TutorialCookie)),
 
 	wire.Bind(new(handlerwebapp.SelectAccountAuthenticationInfoService), new(*authenticationinfo.StoreRedis)),
 

pkg/auth/handler/webapp/login.go

@@ -37,6 +37,10 @@ func ConfigureLoginRoute(route httproute.Route) httproute.Route {
 		WithPathPattern("/login")
 }
 
+type TutorialCookie interface {
+	Pop(r *http.Request, rw http.ResponseWriter, name httputil.TutorialCookieName) bool
+}
+
 type LoginViewModel struct {
 	AllowLoginOnly bool
 }
@@ -47,6 +51,7 @@ type LoginHandler struct {
 	FormPrefiller     *FormPrefiller
 	Renderer          Renderer
 	AnalyticService   AnalyticService
+	TutorialCookie    TutorialCookie
 }
 
 func (h *LoginHandler) GetData(r *http.Request, rw http.ResponseWriter, graph *interaction.Graph, allowLoginOnly bool) (map[string]interface{}, error) {
@@ -56,6 +61,9 @@ func (h *LoginHandler) GetData(r *http.Request, rw http.ResponseWriter, graph *i
 		AllowLoginOnly: allowLoginOnly,
 	}
 	viewmodels.EmbedForm(data, r.Form)
+	if h.TutorialCookie.Pop(r, rw, httputil.SignupLoginTutorialCookieName) {
+		baseViewModel.SetTutorial(httputil.SignupLoginTutorialCookieName)
+	}
 	viewmodels.Embed(data, baseViewModel)
 	authenticationViewModel := viewmodels.NewAuthenticationViewModelWithGraph(graph)
 	viewmodels.Embed(data, authenticationViewModel)

pkg/auth/handler/webapp/settings.go

@@ -62,6 +62,7 @@ type SettingsHandler struct {
 	Identities               SettingsIdentityService
 	Verification             SettingsVerificationService
 	AccountDeletion          *config.AccountDeletionConfig
+	TutorialCookie           TutorialCookie
 }
 
 func (h *SettingsHandler) GetData(r *http.Request, rw http.ResponseWriter) (map[string]interface{}, error) {
@@ -71,6 +72,9 @@ func (h *SettingsHandler) GetData(r *http.Request, rw http.ResponseWriter) (map[
 
 	// BaseViewModel
 	baseViewModel := h.BaseViewModel.ViewModel(r, rw)
+	if h.TutorialCookie.Pop(r, rw, httputil.SettingsTutorialCookieName) {
+		baseViewModel.SetTutorial(httputil.SettingsTutorialCookieName)
+	}
 	viewmodels.Embed(data, baseViewModel)
 
 	// SettingsViewModel

pkg/auth/handler/webapp/signup.go

@@ -49,12 +49,16 @@ type SignupHandler struct {
 	FormPrefiller     *FormPrefiller
 	Renderer          Renderer
 	AnalyticService   AnalyticService
+	TutorialCookie    TutorialCookie
 }
 
 func (h *SignupHandler) GetData(r *http.Request, rw http.ResponseWriter, graph *interaction.Graph) (map[string]interface{}, error) {
 	data := make(map[string]interface{})
 	baseViewModel := h.BaseViewModel.ViewModel(r, rw)
 	viewmodels.EmbedForm(data, r.Form)
+	if h.TutorialCookie.Pop(r, rw, httputil.SignupLoginTutorialCookieName) {
+		baseViewModel.SetTutorial(httputil.SignupLoginTutorialCookieName)
+	}
 	viewmodels.Embed(data, baseViewModel)
 	authenticationViewModel := viewmodels.NewAuthenticationViewModelWithGraph(graph)
 	viewmodels.Embed(data, authenticationViewModel)

pkg/auth/handler/webapp/template.go

@@ -19,6 +19,7 @@ var TemplateWebWatermarkHTML = template.RegisterHTML("web/__watermark.html")
 var TemplateWebRecoveryCodeHTML = template.RegisterHTML("web/__recovery_code.html")
 var TemplateWebPasswordInputHTML = template.RegisterHTML("web/__password_input.html")
 var TemplateWebPasswordStrengthMeterHTML = template.RegisterHTML("web/__password_strength_meter.html")
+var TemplateWebTutorialHTML = template.RegisterHTML("web/__tutorial.html")
 
 var components = []*template.HTML{
 	TemplateWebHTMLHeadHTML,
@@ -36,6 +37,7 @@ var components = []*template.HTML{
 	TemplateWebRecoveryCodeHTML,
 	TemplateWebPasswordInputHTML,
 	TemplateWebPasswordStrengthMeterHTML,
+	TemplateWebTutorialHTML,
 }
 
 var TemplateWebRecoveryCodeTXT = template.RegisterPlainText("web/__recovery_code.txt")

pkg/auth/handler/webapp/viewmodels/base.go

@@ -58,6 +58,7 @@ type BaseViewModel struct {
 	// IsSupportedMobilePlatform is true when the user agent is iOS or Android.
 	IsSupportedMobilePlatform   bool
 	GoogleTagManagerContainerID string
+	TutorialMessageType         string
 }
 
 func (m *BaseViewModel) SetError(err error) {
@@ -92,6 +93,10 @@ func (m *BaseViewModel) SetFormJSON(form url.Values) {
 	m.FormJSON = string(b)
 }
 
+func (m *BaseViewModel) SetTutorial(name httputil.TutorialCookieName) {
+	m.TutorialMessageType = string(name)
+}
+
 type StaticAssetResolver interface {
 	StaticAssetURL(id string) (url string, err error)
 }

pkg/auth/routes.go

@@ -83,6 +83,7 @@ func NewRouter(p *deps.RootProvider, configSource *configsource.ConfigSource) *h
 		p.Middleware(newWebAppUILocalesMiddleware),
 		p.Middleware(newWebAppWeChatRedirectURIMiddleware),
 		p.Middleware(newWebAppClientIDMiddleware),
+		p.Middleware(newTutorialMiddleware),
 	)
 	webappSSOCallbackChain := httproute.Chain(
 		webappChain,

pkg/auth/webapp/deps.go

@@ -26,6 +26,7 @@ var DependencySet = wire.NewSet(
 	wire.Struct(new(VisitorIDMiddleware), "*"),
 	wire.Struct(new(SettingsSubRoutesMiddleware), "*"),
 	wire.Struct(new(SuccessPageMiddleware), "*"),
+	wire.Struct(new(TutorialMiddleware), "*"),
 
 	NewPublicOriginMiddlewareLogger,
 	wire.Struct(new(PublicOriginMiddleware), "*"),

pkg/auth/webapp/tutorial_middleware.go

@@ -0,0 +1,28 @@
+package webapp
+
+import (
+	"net/http"
+)
+
+//go:generate mockgen -source=tutorial_middleware.go -destination=tutorial_middleware_mock_test.go -package webapp
+
+type TutorialMiddlewareTutorialCookie interface {
+	SetAll(rw http.ResponseWriter)
+}
+
+type TutorialMiddleware struct {
+	TutorialCookie TutorialMiddlewareTutorialCookie
+}
+
+func (m *TutorialMiddleware) Handle(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		q := r.URL.Query()
+		if q.Get("x_tutorial") == "true" {
+			q.Del("x_tutorial")
+			r.URL.RawQuery = q.Encode()
+			m.TutorialCookie.SetAll(w)
+		}
+
+		next.ServeHTTP(w, r)
+	})
+}