Merge branch 'main' of https://github.com/e-picsa/picsa-apps into fea…

…t/device-support

apps/picsa-apps/extension-app-native/android/app/build.gradle

@@ -6,8 +6,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3031001
-        versionName "3.31.1"
+        versionCode 3032000
+        versionName "3.32.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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": {

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)) {

apps/picsa-apps/extension-app/src/app/pages/home/home.page.html

@@ -4,12 +4,24 @@
 
 <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.data-tour-id]="link.tourId"
+      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)="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>
 
   <footer>

apps/picsa-apps/extension-app/src/app/pages/home/home.page.ts

@@ -4,48 +4,62 @@ 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 { Subscription } from 'rxjs';
+
+import { HOME_TOUR } from './home.tour';
 
 interface IPageLink {
   name: string;
   icon: string;
   url: string;
+  /** Element ID used in tours */
+  tourId: string;
 }
 
 const PAGE_LINKS: IPageLink[] = [
   {
     name: translateMarker('Manual'),
     icon: 'picsa_manual_tool',
     url: '/manual',
+    tourId: 'manual',
   },
   {
     name: translateMarker('Resources'),
     icon: 'picsa_resources_tool',
     url: '/resources',
+    tourId: 'resources',
   },
   {
     name: translateMarker('Monitoring'),
     icon: 'picsa_data_collection',
     url: '/monitoring',
+    tourId: 'monitoring',
   },
   {
     name: translateMarker('Climate'),
     icon: 'picsa_climate_tool',
     url: '/climate',
+    tourId: 'climate',
   },
   {
     name: translateMarker('Budget'),
     icon: 'picsa_budget_tool',
     url: '/budget',
+    tourId: 'budget',
   },
   {
     name: translateMarker('Probability'),
     icon: 'picsa_probability_tool',
     url: '/crop-probability',
+    tourId: 'crop-probability',
   },
   {
     name: translateMarker('Options'),
     icon: 'picsa_option_tool',
     url: '/option',
+    tourId: 'option',
   },
 
   // {
@@ -70,21 +84,38 @@ 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,
+    private tourService: TourService
+  ) {}
 
   linkClicked(link: IPageLink) {
     this.router.navigate([link.url]);
   }
 
   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();
+    // });
+  }
+
+  public startTour() {
+    this.tourService.startTour(HOME_TOUR);
   }
 }

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.',
+  },
+];

apps/picsa-tools/budget-tool/src/styles.scss

@@ -14,29 +14,6 @@
 @import './styles/typography.scss';
 @import './styles/layout.scss';
 
-// instead of using bottom use top with calc to avoid jumping
-$footer-height: 5em;
-.sticky-footer {
-  position: fixed;
-  height: $footer-height;
-  top: calc(100vh - #{$footer-height});
-  left: 0;
-  width: 100%;
-  background: white;
-  display: flex;
-  align-items: center;
-}
-
-button.footer-button.mat-mdc-button-base {
-  width: 60%;
-  left: 20%;
-  height: calc(#{$footer-height} - 10px) !important;
-  .mdc-button__label {
-    font-size: 1.5rem;
-    line-height: 3rem;
-  }
-}
-
 // used if want to use mat-stepper with fixed header and scrolling content
 .scrolling-stepper {
   flex: 1;

apps/picsa-tools/manual-tool/src/app/data/manual-contents/farmer.ts

@@ -11,8 +11,8 @@ export const PICSA_MANUAL_CONTENTS_FARMER: IManualPeriodEntry[] = [
       {
         page: {
           en: 2,
-          zm_ny: 2,
-          mw_ny: 2,
+          zm_ny: 7,
+          mw_ny: 7,
         },
         name: '',
         label: translateMarker('Introduction'),

apps/picsa-tools/option-tool/src/app/components/components.module.ts

@@ -8,10 +8,12 @@ import { PicsaTranslateModule } from '@picsa/shared/modules';
 
 // Local components
 import { EditorComponent } from './editor/editor.component';
-import { GenderIconComponent } from './gender-icon/gender-icon.component';
+import { GenderInputComponent } from './editor/inputs/gender/gender-input';
+import { InvestmentInputComponent } from './editor/inputs/investment/investment-input';
+import { PerformanceInputComponent } from './editor/inputs/performance/performance-input';
 import { OptionMaterialModule } from './material.module';
 
-const Components = [EditorComponent, GenderIconComponent];
+const Components = [EditorComponent, GenderInputComponent, InvestmentInputComponent, PerformanceInputComponent];
 
 @NgModule({
   imports: [