Merge pull request #103 from supportingami/feat/app-open-target

Add dynamic link and app open prompt

maths-club-app/android/app/build.gradle

@@ -8,8 +8,8 @@ android {
         applicationId "io.c2dev.samimathsclub"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2006003
-        versionName "2.6.3"
+        versionCode 2006004
+        versionName "2.6.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }
     buildTypes {

maths-club-app/ios/App/App/Info.plist

@@ -17,7 +17,7 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.6.3</string>
+    <string>2.6.4</string>
     <key>CFBundleURLTypes</key>
     <array>
       <dict>

maths-club-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sami-maths-club-app",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

maths-club-app/src/app/app.component.ts

@@ -10,6 +10,8 @@ import { Plugins, Capacitor, StatusBarStyle } from "@capacitor/core";
 import { AnalyticsService } from "./services/analytics.service";
 import { SeoService } from "./services/seo.service";
 import { LanguageService } from "./services/language.service";
+import { MatBottomSheet } from "@angular/material/bottom-sheet";
+import { AppOpenTargetComponent } from "./components/app-open-target";
 const { StatusBar, App } = Plugins;
 @Component({
   selector: "app-root",
@@ -26,7 +28,8 @@ export class AppComponent {
     analytics: AnalyticsService,
     seo: SeoService,
     private zone: NgZone,
-    private router: Router
+    private router: Router,
+    private _bottomSheet: MatBottomSheet
   ) {
     // this.notifications.init()
     analytics.init();
@@ -37,6 +40,7 @@ export class AppComponent {
     } else {
       // SEO only relevant whe not native
       seo.init();
+      this.toggleAppOpenTargetSheet();
     }
   }
   getRouteAnimationState(outlet: RouterOutlet) {
@@ -46,6 +50,18 @@ export class AppComponent {
       outlet.activatedRouteData["animation"]
     );
   }
+  /**
+   * Present a bottom sheet to encourage user to use native version of app if running
+   * on mobile
+   */
+  private toggleAppOpenTargetSheet() {
+    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+    if (isMobile && !Capacitor.isNative) {
+      this._bottomSheet.open(AppOpenTargetComponent);
+    }
+  }
   private configureDeepLinks() {
     App.addListener("appUrlOpen", (data: any) => {
       this.zone.run(() => {

maths-club-app/src/app/app.module.ts

@@ -18,10 +18,12 @@ import { AppTermsComponent } from "./components/app-terms/app-terms.component";
 import * as Sentry from "@sentry/angular";
 import { ContactComponent } from "./components/contact/contact.component";
 import { AnalyticsConsentComponent } from "./components/analytics-consent";
+import { AppOpenTargetComponent } from "./components/app-open-target";
 
 @NgModule({
   declarations: [
     AppComponent,
+    AppOpenTargetComponent,
     ProblemDetailComponent,
     ProblemsListComponent,
     LanguageSwitcherComponent,

maths-club-app/src/app/components/app-open-target.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from "@angular/core";
+import { MatBottomSheet } from "@angular/material/bottom-sheet";
+
+/**
+ * Show a link to open the app in native platform version, using dynamic app link
+ */
+@Component({
+  selector: "app-open-target",
+  template: `
+    <div>
+      <h2>Open With...</h2>
+      <a [href]="appDynamicLink" target="_blank" rel="noopener">
+        <div class="open-option">
+          <img
+            class="open-icon"
+            src="assets/icon.png"
+            style="border-radius:6px"
+          />
+          <h3>Maths Club App</h3>
+          <button mat-raised-button color="primary">Open</button>
+        </div>
+      </a>
+      <div class="open-option" (click)="dismiss()">
+        <mat-icon class="open-icon">language</mat-icon>
+        <h3>Browser</h3>
+        <button mat-stroked-button>Continue</button>
+      </div>
+      <div class="spacer"></div>
+    </div>
+  `,
+  styles: [
+    `
+      .open-option {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1rem;
+      }
+      h3 {
+        margin-bottom: 0;
+        flex: 1;
+        text-align: left;
+        margin-left: 1rem;
+      }
+      a {
+        text-decoration: none;
+        color: unset;
+      }
+      button {
+        width: 90px;
+      }
+      .open-icon {
+        font-size: 32px;
+        height: 32px;
+        width: 32px;
+      }
+      .spacer {
+        height: 1rem;
+      }
+    `,
+  ],
+})
+export class AppOpenTargetComponent implements OnInit {
+  appDynamicLink = "https://samimathsclub.page.link/home";
+  constructor(private _bottomSheet: MatBottomSheet) {}
+
+  dismiss() {
+    this._bottomSheet.dismiss();
+  }
+
+  ngOnInit() {}
+}

maths-club-app/src/app/material.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";
 
 import { MatButtonModule } from "@angular/material/button";
+import { MatBottomSheetModule } from "@angular/material/bottom-sheet";
 import { MatCardModule } from "@angular/material/card";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatIconModule, MatIconRegistry } from "@angular/material/icon";
@@ -13,6 +14,7 @@ import { DomSanitizer } from "@angular/platform-browser";
 @NgModule({
   exports: [
     MatButtonModule,
+    MatBottomSheetModule,
     MatCardModule,
     MatDialogModule,
     MatIconModule,
@@ -24,7 +26,11 @@ import { DomSanitizer } from "@angular/platform-browser";
 })
 export class MaterialModule {
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
-    const customIcons = ["facilitator-notes", "facilitator-notes-outline"];
+    const customIcons = [
+      "facilitator-notes",
+      "facilitator-notes-outline",
+      "maths-club-logo",
+    ];
     customIcons.forEach((iconName) => {
       iconRegistry.addSvgIcon(
         `sami-${iconName}`,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sami-maths-club",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "",
   "main": "index.js",
   "scripts": {