From 9a141f4ce55cce639afe8ac76e0271850db4eeb1 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 11:11:38 +0300
Subject: [PATCH 01/11] intro.js package

---
 package.json |  1 +
 yarn.lock    | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c5ae3b6ca..b3fd22e77 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "form-data": "^4.0.0",
     "glob": "^8.1.0",
     "html2canvas": "^1.4.1",
+    "intro.js": "^7.0.1",
     "leaflet": "^1.9.3",
     "leaflet-draw": "github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617",
     "lottie-web": "^5.10.2",
diff --git a/yarn.lock b/yarn.lock
index fa632bd82..28e8ab27b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14975,6 +14975,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"intro.js@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "intro.js@npm:7.0.1"
+  checksum: e29fd0b64fd049bfe7ec59c1916ce20789313320829f09c7ad6fedd9344a7c3aa985c0c65086fa08feca792c6fdfe189dfdc8776af9437c6f5ced751268c453f
+  languageName: node
+  linkType: hard
+
 "ionicons@npm:^6.1.1":
   version: 6.1.1
   resolution: "ionicons@npm:6.1.1"
@@ -16738,7 +16745,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff73078, leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc
+  checksum: b2280f200f5ea410e33cc5feb500d67d86cb5f16b294eea1306da055614ffc906be7de6dbc9bbf4db6e6e5d27d0396e4701a3b6c4c920548d2aac94b8223879f
   languageName: node
   linkType: hard
 
@@ -19130,6 +19137,7 @@ __metadata:
     glob: ^8.1.0
     html2canvas: ^1.4.1
     husky: ^8.0.0
+    intro.js: ^7.0.1
     jest: 28.1.1
     jest-circus: ^29.5.0
     jest-environment-jsdom: 28.1.1

From 7c91f9d58e4bfbcc6604c08cf6845599853ec9af Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 11:12:37 +0300
Subject: [PATCH 02/11] configuration of intro.js style and script

---
 apps/picsa-apps/extension-app/project.json | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/picsa-apps/extension-app/project.json b/apps/picsa-apps/extension-app/project.json
index 5ab62e191..c16b2e23d 100644
--- a/apps/picsa-apps/extension-app/project.json
+++ b/apps/picsa-apps/extension-app/project.json
@@ -86,9 +86,12 @@
           "apps/picsa-tools/budget-tool/src/styles.scss",
           "apps/picsa-tools/resources-tool/src/styles.scss",
           "libs/theme/src/_index.scss",
-          "apps/picsa-apps/extension-app/src/styles.scss"
+          "apps/picsa-apps/extension-app/src/styles.scss",
+          "node_modules/intro.js/introjs.css"
         ],
-        "scripts": []
+        "scripts": [
+          "node_modules/intro.js/intro.js"
+        ]
       },
       "configurations": {
         "production": {

From 0971bc55efd4cc6cabb291ba3d7b300df9603f1e Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 11:13:14 +0300
Subject: [PATCH 03/11] communication service between app-open-prompt and
 homepage

---
 .../services/promptToHomePageService.service.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 libs/shared/src/services/promptToHomePageService.service.ts

diff --git a/libs/shared/src/services/promptToHomePageService.service.ts b/libs/shared/src/services/promptToHomePageService.service.ts
new file mode 100644
index 000000000..bb9f4b527
--- /dev/null
+++ b/libs/shared/src/services/promptToHomePageService.service.ts
@@ -0,0 +1,17 @@
+// Service to facilitate communication between the app-open-prompt and homepage
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CommunicationService {
+  private userEventSubject = new Subject<void>();
+
+  userEvent$ = this.userEventSubject.asObservable();
+
+  triggerUserEvent(): void {
+    this.userEventSubject.next();
+  }
+}

From 9b73bed43c99a15146161897f70525522809deb1 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 11:14:13 +0300
Subject: [PATCH 04/11] trigger guided tour after bottonSheet is dismissed

---
 .../src/modules/deep-links/app-open-prompt.component.ts     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
index 568e20060..5fd09db1f 100644
--- a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
+++ b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 
+import { CommunicationService } from '../../services/promptToHomePageService.service';
 import { DeepLinksService } from './deep-links.service';
 
 /**
@@ -72,12 +73,15 @@ export class AppOpenPromptComponent {
   appDynamicLink: string;
   constructor(
     deepLinksService: DeepLinksService,
-    private bottomSheet: MatBottomSheet
+    private bottomSheet: MatBottomSheet,
+    private communicationService: CommunicationService
   ) {
     this.appDynamicLink = deepLinksService.config.appDynamicLink;
   }
 
   dismiss() {
     this.bottomSheet.dismiss();
+    // trigger homepage tour
+    this.communicationService.triggerUserEvent();
   }
 }

From 850aee91b23df22ec75dd3282da78d704f839813 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 12:34:07 +0300
Subject: [PATCH 05/11] dynamically assign element ids & grid tile to take tour

---
 .../extension-app/src/app/pages/home/home.page.html   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
index 591047663..e10f52efc 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
@@ -4,12 +4,21 @@
 
 <div class="page-content background-image">
   <div class="link-grid">
-    <div *ngFor="let link of links" data-cy="link" class="grid-tile" (click)="linkClicked(link)">
+    <div
+      *ngFor="let link of links"
+      [attr.id]="link.element"
+      data-cy="link"
+      class="grid-tile"
+      (click)="linkClicked(link)"
+    >
       <div style="text-align: center">
         <mat-icon [svgIcon]="link.icon" class="nav-icon"></mat-icon>
         <div class="nav-text">{{ link.name | translate }}</div>
       </div>
     </div>
+    <div class="grid-tile" (click)="takeTour()" style="position: relative">
+      <div style="position: absolute; width: 90%; text-align: center; bottom: 60px">Take App Tour</div>
+    </div>
   </div>
 
   <footer>

From 84a18cef4efc63382da24179b6a57d8ee950361f Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 12:34:28 +0300
Subject: [PATCH 06/11] guided tour implementation

---
 .../src/app/pages/home/home.page.ts           | 123 +++++++++++++++++-
 1 file changed, 121 insertions(+), 2 deletions(-)

diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
index 33338b3ad..0c2e8c9aa 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
@@ -1,14 +1,18 @@
 import { DomPortal } from '@angular/cdk/portal';
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { APP_VERSION } from '@picsa/environments';
+import { CommunicationService } from '@picsa/shared/services/promptToHomePageService.service';
+import * as introJs from 'intro.js/intro.js';
+import { Subscription } from 'rxjs';
 
 interface IPageLink {
   name: string;
   icon: string;
   url: string;
+  element: string;
 }
 
 const PAGE_LINKS: IPageLink[] = [
@@ -16,36 +20,43 @@ const PAGE_LINKS: IPageLink[] = [
     name: translateMarker('Manual'),
     icon: 'picsa_manual_tool',
     url: '/manual',
+    element: 'element-1',
   },
   {
     name: translateMarker('Resources'),
     icon: 'picsa_resources_tool',
     url: '/resources',
+    element: 'element-2',
   },
   {
     name: translateMarker('Monitoring'),
     icon: 'picsa_data_collection',
     url: '/monitoring',
+    element: 'element-3',
   },
   {
     name: translateMarker('Climate'),
     icon: 'picsa_climate_tool',
     url: '/climate',
+    element: 'element-4',
   },
   {
     name: translateMarker('Budget'),
     icon: 'picsa_budget_tool',
     url: '/budget',
+    element: 'element-5',
   },
   {
     name: translateMarker('Probability'),
     icon: 'picsa_probability_tool',
     url: '/crop-probability',
+    element: 'element-6',
   },
   {
     name: translateMarker('Options'),
     icon: 'picsa_option_tool',
     url: '/option',
+    element: 'element-7',
   },
 
   // {
@@ -70,10 +81,16 @@ export class HomePage implements OnDestroy, AfterViewInit {
   public links = PAGE_LINKS;
   public version = APP_VERSION;
 
+  private userEventSubscription: Subscription;
+
   @ViewChild('headerContent')
   headerContent: ElementRef<HTMLElement>;
 
-  constructor(private router: Router, private componentsService: PicsaCommonComponentsService) {}
+  constructor(
+    private router: Router,
+    private componentsService: PicsaCommonComponentsService,
+    private communicationService: CommunicationService
+  ) {}
 
   linkClicked(link: IPageLink) {
     this.router.navigate([link.url]);
@@ -81,10 +98,112 @@ export class HomePage implements OnDestroy, AfterViewInit {
 
   ngOnDestroy(): void {
     this.componentsService.patchHeader({ endContent: undefined });
+    this.userEventSubscription.unsubscribe();
   }
   ngAfterViewInit() {
     this.componentsService.patchHeader({
       endContent: new DomPortal(this.headerContent),
     });
+    this.userEventSubscription = this.communicationService.userEvent$.subscribe(() => {
+      // Trigger the guided tour when the prompt event occurs
+      this.startTour();
+    });
+  }
+  startTour(): void {
+    const introJS = introJs();
+    introJS
+      .setOptions({
+        hidePrev: true,
+        dontShowAgain: true,
+        tooltipClass: 'customTooltip',
+        steps: [
+          {
+            title: 'Welcome',
+            intro: 'Click Next if you would like to take a tour of the app or click the <b> ’x’ </b>to close.',
+          },
+          {
+            element: '#element-1',
+            intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
+          },
+          {
+            element: '#element-7',
+            intro:
+              'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
+          },
+          {
+            position: 'left',
+            element: '#element-6',
+            intro:
+              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+          },
+          {
+            element: '#element-2',
+            intro: 'This is where you’ll find helpful resources that will guide your work.',
+          },
+          {
+            element: '#element-3',
+            intro:
+              'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
+          },
+          {
+            element: '#element-4',
+            intro:
+              'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
+          },
+          {
+            element: '#element-5',
+            intro:
+              'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
+          },
+        ],
+      })
+      .start();
+  }
+
+  takeTour(): void {
+    const introJS = introJs();
+    introJS
+      .setOptions({
+        hidePrev: true,
+        dontShowAgain: true,
+        tooltipClass: 'customTooltip',
+        steps: [
+          {
+            element: '#element-1',
+            intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
+          },
+          {
+            element: '#element-7',
+            intro:
+              'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
+          },
+          {
+            position: 'left',
+            element: '#element-6',
+            intro:
+              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+          },
+          {
+            element: '#element-2',
+            intro: 'This is where you’ll find helpful resources that will guide your work.',
+          },
+          {
+            element: '#element-3',
+            intro:
+              'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
+          },
+          {
+            element: '#element-4',
+            intro:
+              'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
+          },
+          {
+            element: '#element-5',
+            intro:
+              'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
+          },
+        ],
+      })
+      .start();
   }
 }

From 60c45748125b942a285141f024433bdd690755ff Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 27 Jul 2023 12:34:51 +0300
Subject: [PATCH 07/11] checksum update

---
 .../src/assets/resources/contents.json         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
index d0716918d..f1162198c 100644
--- a/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
+++ b/apps/picsa-tools/resources-tool/src/assets/resources/contents.json
@@ -44,8 +44,8 @@
   "covers/facebook.svg": {
     "relativePath": "covers/facebook.svg",
     "size_kb": 1.1,
-    "md5Checksum": "8626bc9119bd6b8bc0fa04e8a20b6e74",
-    "modifiedTime": "2022-09-28T20:19:52.986Z"
+    "md5Checksum": "a09b2f44f6b44b5b6e29aedba9f92029",
+    "modifiedTime": "2023-06-18T17:09:19.897Z"
   },
   "covers/gap.jpg": {
     "relativePath": "covers/gap.jpg",
@@ -61,9 +61,9 @@
   },
   "covers/gender-equality.svg": {
     "relativePath": "covers/gender-equality.svg",
-    "size_kb": 5.5,
-    "md5Checksum": "0b6599c4d8b3a87b787910b18a9d8851",
-    "modifiedTime": "2022-11-01T20:27:18.286Z"
+    "size_kb": 5.4,
+    "md5Checksum": "95af38f37c2179d4ad0c5288cbb236ed",
+    "modifiedTime": "2023-06-18T17:09:19.897Z"
   },
   "covers/gras-nelk.jpg": {
     "relativePath": "covers/gras-nelk.jpg",
@@ -110,8 +110,8 @@
   "covers/spreadsheet.svg": {
     "relativePath": "covers/spreadsheet.svg",
     "size_kb": 2.8,
-    "md5Checksum": "a03a4bfb0a1791fda8e232a8b032715b",
-    "modifiedTime": "2022-09-30T09:35:53.529Z"
+    "md5Checksum": "0a1bc91188bbc03fda0a7cb2bc1aa6ce",
+    "modifiedTime": "2023-06-18T17:09:19.898Z"
   },
   "covers/twitter.png": {
     "relativePath": "covers/twitter.png",
@@ -122,8 +122,8 @@
   "covers/weather.svg": {
     "relativePath": "covers/weather.svg",
     "size_kb": 3.1,
-    "md5Checksum": "db07c7d20d9520124c251c810c5817fd",
-    "modifiedTime": "2022-09-28T19:22:58.064Z"
+    "md5Checksum": "ca87f24916d258b8b8b5dd8343d4305b",
+    "modifiedTime": "2023-06-18T17:09:19.898Z"
   },
   "covers/whatsapp.svg": {
     "relativePath": "covers/whatsapp.svg",

From 09cd2b88df6d1e473e66d3837e462c80880a4876 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 31 Jul 2023 10:36:38 +0300
Subject: [PATCH 08/11] trigger tour after app redirect

---
 .../src/modules/deep-links/app-open-prompt.component.ts   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
index 5fd09db1f..4b955c545 100644
--- a/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
+++ b/libs/shared/src/modules/deep-links/app-open-prompt.component.ts
@@ -16,7 +16,7 @@ import { DeepLinksService } from './deep-links.service';
         <div class="open-option">
           <div class="picsa-app-icon">PICSA</div>
           <h3>PICSA App</h3>
-          <button mat-raised-button color="primary">Open</button>
+          <button mat-raised-button color="primary" (click)="triggerTour()">Open</button>
         </div>
       </a>
       <div class="open-option" (click)="dismiss()">
@@ -79,9 +79,13 @@ export class AppOpenPromptComponent {
     this.appDynamicLink = deepLinksService.config.appDynamicLink;
   }
 
+  triggerTour(){
+   this.communicationService.triggerUserEvent();
+  }
+
   dismiss() {
     this.bottomSheet.dismiss();
     // trigger homepage tour
-    this.communicationService.triggerUserEvent();
+    this.triggerTour();
   }
 }

From 8bae5adb980b27204d50f2609949505f62fd9804 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Mon, 31 Jul 2023 12:12:39 +0300
Subject: [PATCH 09/11] refactor implementation of tour steps

---
 .../src/app/pages/home/home.page.ts           | 99 ++++++++++---------
 1 file changed, 52 insertions(+), 47 deletions(-)

diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
index 0c2e8c9aa..889a33a93 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
@@ -1,5 +1,5 @@
 import { DomPortal } from '@angular/cdk/portal';
-import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
@@ -15,6 +15,12 @@ interface IPageLink {
   element: string;
 }
 
+interface ITourStep {
+  element: string;
+  intro: string;
+  position?: string;
+}
+
 const PAGE_LINKS: IPageLink[] = [
   {
     name: translateMarker('Manual'),
@@ -72,6 +78,43 @@ const PAGE_LINKS: IPageLink[] = [
   // }
 ];
 
+const TOUR_STEPS: ITourStep[] = [
+  {
+    element: '#element-1',
+    intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
+  },
+  {
+    element: '#element-7',
+    intro:
+      'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
+  },
+  {
+    element: '#element-2',
+    intro: 'This is where you’ll find helpful resources that will guide your work.',
+  },
+  {
+    element: '#element-3',
+    intro:
+      'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
+  },
+  {
+    element: '#element-4',
+    intro:
+      'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
+  },
+  {
+    element: '#element-5',
+    intro:
+      'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
+  },
+  {
+    position: 'left',
+    element: '#element-6',
+    intro:
+      'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+  },
+];
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
@@ -100,6 +143,7 @@ export class HomePage implements OnDestroy, AfterViewInit {
     this.componentsService.patchHeader({ endContent: undefined });
     this.userEventSubscription.unsubscribe();
   }
+  
   ngAfterViewInit() {
     this.componentsService.patchHeader({
       endContent: new DomPortal(this.headerContent),
@@ -121,21 +165,11 @@ export class HomePage implements OnDestroy, AfterViewInit {
             title: 'Welcome',
             intro: 'Click Next if you would like to take a tour of the app or click the <b> ’x’ </b>to close.',
           },
-          {
-            element: '#element-1',
-            intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
-          },
           {
             element: '#element-7',
             intro:
               'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
           },
-          {
-            position: 'left',
-            element: '#element-6',
-            intro:
-              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
-          },
           {
             element: '#element-2',
             intro: 'This is where you’ll find helpful resources that will guide your work.',
@@ -155,6 +189,12 @@ export class HomePage implements OnDestroy, AfterViewInit {
             intro:
               'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
           },
+          {
+            position: 'left',
+            element: '#element-6',
+            intro:
+              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+          },
         ],
       })
       .start();
@@ -167,42 +207,7 @@ export class HomePage implements OnDestroy, AfterViewInit {
         hidePrev: true,
         dontShowAgain: true,
         tooltipClass: 'customTooltip',
-        steps: [
-          {
-            element: '#element-1',
-            intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
-          },
-          {
-            element: '#element-7',
-            intro:
-              'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
-          },
-          {
-            position: 'left',
-            element: '#element-6',
-            intro:
-              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
-          },
-          {
-            element: '#element-2',
-            intro: 'This is where you’ll find helpful resources that will guide your work.',
-          },
-          {
-            element: '#element-3',
-            intro:
-              'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
-          },
-          {
-            element: '#element-4',
-            intro:
-              'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
-          },
-          {
-            element: '#element-5',
-            intro:
-              'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
-          },
-        ],
+        steps: TOUR_STEPS
       })
       .start();
   }

From c46a807a28ab4a1e2bba813c762db2bd921ecc96 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 11 Sep 2023 18:39:20 -0700
Subject: [PATCH 10/11] style: tour tooltip and icon

---
 .../extension-app/src/app/material.module.ts        |  1 +
 .../extension-app/src/assets/svgs/tutorial.svg      |  1 +
 libs/theme/src/_overrides.scss                      | 13 +++++++++++++
 3 files changed, 15 insertions(+)
 create mode 100644 apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg

diff --git a/apps/picsa-apps/extension-app/src/app/material.module.ts b/apps/picsa-apps/extension-app/src/app/material.module.ts
index 3204946cf..68788b73f 100644
--- a/apps/picsa-apps/extension-app/src/app/material.module.ts
+++ b/apps/picsa-apps/extension-app/src/app/material.module.ts
@@ -28,6 +28,7 @@ export class ExtensionToolkitMaterialModule {
       play_store: 'play_store',
       probability_tool: 'probability_tool',
       resources_tool: 'resources_tool',
+      tutorial: 'tutorial',
       whatsapp: 'whatsapp',
     };
     for (const [key, value] of Object.entries(icons)) {
diff --git a/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg b/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg
new file mode 100644
index 000000000..4a831100b
--- /dev/null
+++ b/apps/picsa-apps/extension-app/src/assets/svgs/tutorial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="18.209162" cy="12.469916" r="8.8341322"/><path d="M31.694721 40.751178c3.701933 2.92068 8.509593 4.411049 14.278863 4.411049 2.079317 0 3.774032-1.694658 3.774032-3.774033 0-.865368-.288495-1.658609-.781286-2.295625l8.26927-14.711582c.432663-.757193.15624-1.71876-.600968-2.151402-.757248-.432727-1.718753-.156239-2.151472.600967l-8.317281 14.795626h-.192295c-8.413504 0-11.694721-4.038432-12.968761-7.439848-.540871-1.442359-1.502439-2.668317-2.764455-3.545689-1.045647-.721161-2.235545-1.165879-3.485545-1.298072h-.07203c-.240415-.03624-.480774-.04822-.721142-.04822h-5.709186c-.180287 0-.348521.01184-.516784.03624H9.6634582v.03628C4.3149032 25.462746 0 29.837746 0 35.198346v16.935086c0 2.079314 1.6947099 3.774032 3.7740368 3.774032 2.0793302 0 3.7740423-1.694718 3.7740423-3.774032V35.198346c0-1.201931.9375-2.199552 2.1153841-2.283667v20.300449L4.915867 91.54448c-.3004807 2.463952 1.4423067 4.699491 3.9062467 5.012019.1923072.02384.3725962.03624.5528863.03624 2.235597 0 4.170686-1.670701 4.447099-3.942311l3.990365-32.259607h.781311l3.990346 32.259613c.276479 2.271607 2.211565 3.942306 4.447104 3.942306.180343 0 .372638 0 .552896-.03624 2.463943-.300512 4.206758-2.548067 3.906247-5.012016l-4.747561-38.32936V34.66948c.973523 1.923089 2.512016 4.158628 4.939895 6.081698z"/><path d="M97.512016 3.2752187H39.218775c-1.394223 0-2.512038 1.1298226-2.512038 2.5120102V31.051698c.492815.68508 1.081695 1.274032 1.778863 1.766818.901416.637036 1.995191 1.117814 3.245191 1.442294V8.2993122H95V53.431499H76.165879c-.156247-.01184-.312533-.01184-.46878 0H62.079314c-.15625-.01184-.312474-.01184-.468714 0H41.730791v-5.661051c-1.766839-.228391-3.449566-.612984-5.024054-1.129807v9.314911c0 1.39421 1.129831 2.512017 2.512038 2.512017h19.387016L49.603346 93.57573c-.348523 1.346128.468753 2.716327 1.802879 3.064911.204375.04823.420711.08414.625.08414 1.117807 0 2.139461-.757228 2.439912-1.887051l9.314911-36.358106h10.192298l8.53367 36.358191c.288432 1.129763 1.310083 1.886941 2.427904 1.886941.204289 0 .42068-.02384.625-.08395 1.346128-.348584 2.15141-1.718782 1.802887-3.064914L79.15867 58.467587h18.329314c1.394209 0 2.512016-1.129823 2.512016-2.512017V5.7872329c0-1.3942108-1.129823-2.5120102-2.512016-2.5120102Z"/></svg>
\ No newline at end of file
diff --git a/libs/theme/src/_overrides.scss b/libs/theme/src/_overrides.scss
index e36906c91..31aeafd90 100644
--- a/libs/theme/src/_overrides.scss
+++ b/libs/theme/src/_overrides.scss
@@ -105,3 +105,16 @@ enketo-webform {
     width: 100%;
   }
 }
+/******************************************************************
+Intro.JS Tour
+*******************************************************************/
+.introjs-tooltip.picsa-tooltip {
+  .introjs-tooltip-header {
+    background: var(--color-primary);
+    color: white;
+  }
+  .introjs-skipbutton {
+    color: white;
+    line-height: 36px;
+  }
+}

From c3720c691744a8c4d2d315b018e6dee821cbec01 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 11 Sep 2023 18:39:51 -0700
Subject: [PATCH 11/11] refactor: shared tour service

---
 .../src/app/pages/home/home.page.html         |   9 +-
 .../src/app/pages/home/home.page.ts           | 127 +++---------------
 .../src/app/pages/home/home.tour.ts           |  32 +++++
 libs/shared/src/services/core/tour.service.ts |  41 ++++++
 package.json                                  |   1 +
 yarn.lock                                     |  10 +-
 6 files changed, 106 insertions(+), 114 deletions(-)
 create mode 100644 apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts
 create mode 100644 libs/shared/src/services/core/tour.service.ts

diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
index e10f52efc..0c5ee5500 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.html
@@ -6,7 +6,7 @@
   <div class="link-grid">
     <div
       *ngFor="let link of links"
-      [attr.id]="link.element"
+      [attr.data-tour-id]="link.tourId"
       data-cy="link"
       class="grid-tile"
       (click)="linkClicked(link)"
@@ -16,8 +16,11 @@
         <div class="nav-text">{{ link.name | translate }}</div>
       </div>
     </div>
-    <div class="grid-tile" (click)="takeTour()" style="position: relative">
-      <div style="position: absolute; width: 90%; text-align: center; bottom: 60px">Take App Tour</div>
+    <div class="grid-tile" (click)="startTour()" style="position: relative">
+      <div style="text-align: center">
+        <mat-icon svgIcon="picsa_tutorial" class="nav-icon"></mat-icon>
+        <div class="nav-text">{{ 'Take App Tour' | translate }}</div>
+      </div>
     </div>
   </div>
 
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
index 889a33a93..8566fa3db 100644
--- a/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts
@@ -4,21 +4,18 @@ import { Router } from '@angular/router';
 import { marker as translateMarker } from '@biesbjerg/ngx-translate-extract-marker';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
 import { APP_VERSION } from '@picsa/environments';
+import { TourService } from '@picsa/shared/services/core/tour.service';
 import { CommunicationService } from '@picsa/shared/services/promptToHomePageService.service';
-import * as introJs from 'intro.js/intro.js';
 import { Subscription } from 'rxjs';
 
+import { HOME_TOUR } from './home.tour';
+
 interface IPageLink {
   name: string;
   icon: string;
   url: string;
-  element: string;
-}
-
-interface ITourStep {
-  element: string;
-  intro: string;
-  position?: string;
+  /** Element ID used in tours */
+  tourId: string;
 }
 
 const PAGE_LINKS: IPageLink[] = [
@@ -26,43 +23,43 @@ const PAGE_LINKS: IPageLink[] = [
     name: translateMarker('Manual'),
     icon: 'picsa_manual_tool',
     url: '/manual',
-    element: 'element-1',
+    tourId: 'manual',
   },
   {
     name: translateMarker('Resources'),
     icon: 'picsa_resources_tool',
     url: '/resources',
-    element: 'element-2',
+    tourId: 'resources',
   },
   {
     name: translateMarker('Monitoring'),
     icon: 'picsa_data_collection',
     url: '/monitoring',
-    element: 'element-3',
+    tourId: 'monitoring',
   },
   {
     name: translateMarker('Climate'),
     icon: 'picsa_climate_tool',
     url: '/climate',
-    element: 'element-4',
+    tourId: 'climate',
   },
   {
     name: translateMarker('Budget'),
     icon: 'picsa_budget_tool',
     url: '/budget',
-    element: 'element-5',
+    tourId: 'budget',
   },
   {
     name: translateMarker('Probability'),
     icon: 'picsa_probability_tool',
     url: '/crop-probability',
-    element: 'element-6',
+    tourId: 'crop-probability',
   },
   {
     name: translateMarker('Options'),
     icon: 'picsa_option_tool',
     url: '/option',
-    element: 'element-7',
+    tourId: 'option',
   },
 
   // {
@@ -78,43 +75,6 @@ const PAGE_LINKS: IPageLink[] = [
   // }
 ];
 
-const TOUR_STEPS: ITourStep[] = [
-  {
-    element: '#element-1',
-    intro: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
-  },
-  {
-    element: '#element-7',
-    intro:
-      'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
-  },
-  {
-    element: '#element-2',
-    intro: 'This is where you’ll find helpful resources that will guide your work.',
-  },
-  {
-    element: '#element-3',
-    intro:
-      'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
-  },
-  {
-    element: '#element-4',
-    intro:
-      'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
-  },
-  {
-    element: '#element-5',
-    intro:
-      'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
-  },
-  {
-    position: 'left',
-    element: '#element-6',
-    intro:
-      'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
-  },
-];
-
 @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
@@ -132,7 +92,8 @@ export class HomePage implements OnDestroy, AfterViewInit {
   constructor(
     private router: Router,
     private componentsService: PicsaCommonComponentsService,
-    private communicationService: CommunicationService
+    private communicationService: CommunicationService,
+    private tourService: TourService
   ) {}
 
   linkClicked(link: IPageLink) {
@@ -143,7 +104,7 @@ export class HomePage implements OnDestroy, AfterViewInit {
     this.componentsService.patchHeader({ endContent: undefined });
     this.userEventSubscription.unsubscribe();
   }
-  
+
   ngAfterViewInit() {
     this.componentsService.patchHeader({
       endContent: new DomPortal(this.headerContent),
@@ -153,62 +114,8 @@ export class HomePage implements OnDestroy, AfterViewInit {
       this.startTour();
     });
   }
-  startTour(): void {
-    const introJS = introJs();
-    introJS
-      .setOptions({
-        hidePrev: true,
-        dontShowAgain: true,
-        tooltipClass: 'customTooltip',
-        steps: [
-          {
-            title: 'Welcome',
-            intro: 'Click Next if you would like to take a tour of the app or click the <b> ’x’ </b>to close.',
-          },
-          {
-            element: '#element-7',
-            intro:
-              'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
-          },
-          {
-            element: '#element-2',
-            intro: 'This is where you’ll find helpful resources that will guide your work.',
-          },
-          {
-            element: '#element-3',
-            intro:
-              'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
-          },
-          {
-            element: '#element-4',
-            intro:
-              'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
-          },
-          {
-            element: '#element-5',
-            intro:
-              'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
-          },
-          {
-            position: 'left',
-            element: '#element-6',
-            intro:
-              'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
-          },
-        ],
-      })
-      .start();
-  }
 
-  takeTour(): void {
-    const introJS = introJs();
-    introJS
-      .setOptions({
-        hidePrev: true,
-        dontShowAgain: true,
-        tooltipClass: 'customTooltip',
-        steps: TOUR_STEPS
-      })
-      .start();
+  public startTour() {
+    this.tourService.startTour(HOME_TOUR);
   }
 }
diff --git a/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts b/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts
new file mode 100644
index 000000000..8119341f5
--- /dev/null
+++ b/apps/picsa-apps/extension-app/src/app/pages/home/home.tour.ts
@@ -0,0 +1,32 @@
+import type { ITourStep } from '@picsa/shared/services/core/tour.service';
+
+export const HOME_TOUR: ITourStep[] = [
+  {
+    id: 'manual',
+    text: 'This is the EPICSA Manual. A step-by-step guide to using PICSA with farmers.',
+  },
+  {
+    id: 'resources',
+    text: 'This is where you’ll find helpful resources that will guide your work.',
+  },
+  {
+    id: 'monitoring',
+    text: 'In here, field staff can make records of visits with farmers and provide data on everything they monitored.',
+  },
+  {
+    id: 'climate',
+    text: 'This is the climate tool which provides automatically updated, locally specific climate information graphs. A way for you to analyse the changing climate in your region.',
+  },
+  {
+    id: 'budget',
+    text: 'This budget tool is fully interactive and provides a way for farmers to make extensive budgets with respect to different options in their agro-businesses.',
+  },
+  {
+    id: 'crop-probability',
+    text: 'This is the crop-probability tool. It provides immediate calculations on which crops and varieties have the best chance to succeed, according to regions.',
+  },
+  {
+    id: 'option',
+    text: 'This is the options tool that supports farmers to consider a range of options aimed at increasing production, income and resilience.',
+  },
+];
diff --git a/libs/shared/src/services/core/tour.service.ts b/libs/shared/src/services/core/tour.service.ts
new file mode 100644
index 000000000..27e64cffb
--- /dev/null
+++ b/libs/shared/src/services/core/tour.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import introJs, { IntroJs, Options, Step } from 'intro.js';
+
+export interface ITourStep extends Omit<Step, 'intro'> {
+  id: string;
+  text: string;
+}
+
+@Injectable({ providedIn: 'root' })
+/**
+ * Interact with Intro.JS tours
+ */
+export class TourService {
+  private intro: IntroJs;
+  constructor() {
+    this.intro = introJs();
+  }
+
+  public startTour(tourSteps: ITourStep[], tourOptions: Partial<Options> = {}): void {
+    // map passed tourId to data attribute selector
+    const steps = tourSteps.map((step) => {
+      const mappedStep: Step = {
+        ...step,
+        element: `[data-tour-id="${step.id}"]`,
+        intro: step.text,
+      };
+      return mappedStep;
+    });
+    console.log('starting tour', steps);
+
+    this.intro
+      .setOptions({
+        hidePrev: true,
+        exitOnOverlayClick: false,
+        tooltipClass: 'picsa-tooltip',
+        steps,
+        ...tourOptions,
+      })
+      .start();
+  }
+}
diff --git a/package.json b/package.json
index b3fd22e77..cc8b91593 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "@stencil/sass": "^3.0.2",
     "@types/c3": "^0.7.8",
     "@types/hammerjs": "^2.0.41",
+    "@types/intro.js": "^5.1.1",
     "@types/jest": "28.1.1",
     "@types/leaflet": "^1.8.0",
     "@types/node": "^18.14.2",
diff --git a/yarn.lock b/yarn.lock
index 28e8ab27b..66486eb35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8042,6 +8042,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/intro.js@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@types/intro.js@npm:5.1.1"
+  checksum: 72fa6b928acc6837b4574259a9d69d67fceb4e9a319930ae5b7dcf65d7728822dc91a1c8d0baa96800b6e0d8ca5f39cbdb7508fd16a6cefc86af7c806dd1b877
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -16745,7 +16752,7 @@ __metadata:
 "leaflet-draw@github:enketo/Leaflet.draw#ff73078, leaflet-draw@github:enketo/Leaflet.draw#ff730785db7fcccbf2485ffcf4dffe1238a7c617":
   version: 1.0.4
   resolution: "leaflet-draw@https://github.com/enketo/Leaflet.draw.git#commit=ff730785db7fcccbf2485ffcf4dffe1238a7c617"
-  checksum: b2280f200f5ea410e33cc5feb500d67d86cb5f16b294eea1306da055614ffc906be7de6dbc9bbf4db6e6e5d27d0396e4701a3b6c4c920548d2aac94b8223879f
+  checksum: b08b88994769667f11f2b6a8937656c89cea34dafd4661abab0b48b4b97f3bddbdce7b23ddfdb8d7c6335e065530e32a70e281314afa34afa134bf68597945fc
   languageName: node
   linkType: hard
 
@@ -19099,6 +19106,7 @@ __metadata:
     "@supabase/supabase-js": ^2.22.0
     "@types/c3": ^0.7.8
     "@types/hammerjs": ^2.0.41
+    "@types/intro.js": ^5.1.1
     "@types/jest": 28.1.1
     "@types/leaflet": ^1.8.0
     "@types/node": ^18.14.2