feat(features/home): use GitBook for FAQ

Replace the iframe FAQ with the GitBook FAQ.

Author: olgahaha

src/app/app-routing.module.ts

@@ -96,11 +96,6 @@ const routes: Routes = [
         m => m.TermsOfUsePageModule
       ),
   },
-  {
-    path: 'faq',
-    loadChildren: () =>
-      import('./features/faq/faq.module').then(m => m.FaqPageModule),
-  },
 ];
 @NgModule({
   imports: [

src/app/features/faq/faq-routing.module.ts

@@ -3,6 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { Browser } from '@capacitor/browser';
 import {
   ActionSheetButton,
   ActionSheetController,
@@ -40,7 +41,9 @@ import { PreferenceManager } from '../../../shared/preference-manager/preference
 import { getOldProof } from '../../../shared/repositories/proof/old-proof-adapter';
 import { Proof } from '../../../shared/repositories/proof/proof';
 import { ProofRepository } from '../../../shared/repositories/proof/proof-repository.service';
+import { browserToolbarColor } from '../../../utils/constants';
 import { reloadApp } from '../../../utils/miscellaneous';
+import { getFaqUrl } from '../../../utils/url';
 import { PrefetchingDialogComponent } from '../onboarding/prefetching-dialog/prefetching-dialog.component';
 
 @UntilDestroy({ checkProperties: true })
@@ -213,7 +216,7 @@ export class CaptureTabComponent implements OnInit {
       },
       {
         text: this.translocoService.translate('faq'),
-        handler: () => this.router.navigate(['faq']),
+        handler: async () => await this.openFaq(),
       },
       {
         text: this.translocoService.translate('logout'),
@@ -248,6 +251,10 @@ export class CaptureTabComponent implements OnInit {
       .subscribe();
   }
 
+  async openFaq() {
+    await Browser.open({ url: getFaqUrl(), toolbarColor: browserToolbarColor });
+  }
+
   async editUsername() {
     const alert = await this.alertController.create({
       header: this.translocoService.translate('editUsername'),

src/app/features/faq/faq.module.ts

@@ -36,6 +36,7 @@ import { DiaBackendWalletService } from '../../../../../shared/dia-backend/walle
 import { ErrorService } from '../../../../../shared/error/error.service';
 import { OrderDetailDialogComponent } from '../../../../../shared/order-detail-dialog/order-detail-dialog.component';
 import { ProofRepository } from '../../../../../shared/repositories/proof/proof-repository.service';
+import { browserToolbarColor } from '../../../../../utils/constants';
 import {
   VOID$,
   isNonNullable,
@@ -365,7 +366,7 @@ export class ActionDetailsPage {
         tap(cid =>
           Browser.open({
             url: `${url}?cid=${cid}&order_id=${orderId}`,
-            toolbarColor: '#564dfc',
+            toolbarColor: browserToolbarColor,
           })
         ),
         catchError((err: unknown) => {

src/app/features/faq/faq.page.html

@@ -24,6 +24,7 @@ import { DiaBackendWalletService } from '../../../../shared/dia-backend/wallet/d
 import { ErrorService } from '../../../../shared/error/error.service';
 import { OrderDetailDialogComponent } from '../../../../shared/order-detail-dialog/order-detail-dialog.component';
 import { ProofRepository } from '../../../../shared/repositories/proof/proof-repository.service';
+import { browserToolbarColor } from '../../../../utils/constants';
 import {
   VOID$,
   isNonNullable,
@@ -208,7 +209,7 @@ export class ActionsPage {
         tap(cid =>
           Browser.open({
             url: `${url}?cid=${cid}&order_id=${orderId}`,
-            toolbarColor: '#564dfc',
+            toolbarColor: browserToolbarColor,
           })
         ),
         catchError((err: unknown) => {

src/app/features/faq/faq.page.scss

@@ -13,6 +13,7 @@ import {
   shareReplay,
   switchMap,
 } from 'rxjs/operators';
+import { browserToolbarColor } from '../../../../utils/constants';
 import { isNonNullable } from '../../../../utils/rx-operators/rx-operators';
 import { getAssetProfileForNSE } from '../../../../utils/url';
 import { DetailedCapture } from '../information/session/information-session.service';
@@ -83,7 +84,7 @@ export class CaptureDetailsWithIonicComponent {
             if (geolocation)
               return Browser.open({
                 url: `https://maps.google.com/maps?q=${geolocation.latitude},${geolocation.longitude}`,
-                toolbarColor: '#564dfc',
+                toolbarColor: browserToolbarColor,
               });
             return EMPTY;
           })
@@ -104,7 +105,7 @@ export class CaptureDetailsWithIonicComponent {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 detailedCapture.id!
               ),
-              toolbarColor: '#564dfc',
+              toolbarColor: browserToolbarColor,
             })
           )
         ),

src/app/features/faq/faq.page.spec.ts

@@ -51,6 +51,7 @@ import { NetworkService } from '../../../shared/network/network.service';
 import { ProofRepository } from '../../../shared/repositories/proof/proof-repository.service';
 import { ShareService } from '../../../shared/share/share.service';
 import { UserGuideService } from '../../../shared/user-guide/user-guide.service';
+import { browserToolbarColor } from '../../../utils/constants';
 import { MimeType } from '../../../utils/mime-type';
 import {
   VOID$,
@@ -646,7 +647,7 @@ export class DetailsPage {
     await defer(() =>
       Browser.open({
         url: getAssetProfileForNSE(id),
-        toolbarColor: '#564dfc',
+        toolbarColor: browserToolbarColor,
       })
     )
       .pipe(untilDestroyed(this), takeUntil(this.shareMenuDismissed$))
@@ -785,29 +786,6 @@ export class DetailsPage {
     }
   }
 
-  private openIpfsSupportingVideo() {
-    return this.activeDetailedCapture$
-      .pipe(
-        first(),
-        switchMap(
-          activeDetailedCapture => activeDetailedCapture.diaBackendAsset$
-        ),
-        isNonNullable(),
-        switchMap(diaBackendAsset => {
-          if (!diaBackendAsset.supporting_file) return EMPTY;
-          return Browser.open({
-            url: diaBackendAsset.supporting_file.replace(
-              'ipfs://',
-              'https://ipfs-pin.numbersprotocol.io/ipfs/'
-            ),
-            toolbarColor: '#564dfc',
-          });
-        }),
-        untilDestroyed(this)
-      )
-      .subscribe();
-  }
-
   private share() {
     this.activeDetailedCapture$
       .pipe(
@@ -829,29 +807,6 @@ export class DetailsPage {
       .subscribe();
   }
 
-  private openCaptureClub() {
-    combineLatest([
-      this.activeDetailedCapture$.pipe(
-        switchMap(
-          activeDetailedCapture => activeDetailedCapture.diaBackendAsset$
-        ),
-        isNonNullable()
-      ),
-      this.diaBackendAuthService.token$,
-    ])
-      .pipe(
-        first(),
-        concatMap(([diaBackendAsset, token]) =>
-          Browser.open({
-            url: `https://captureclub.cc/asset?mid=${diaBackendAsset.id}&token=${token}`,
-            toolbarColor: '#564dfc',
-          })
-        ),
-        untilDestroyed(this)
-      )
-      .subscribe();
-  }
-
   private async remove() {
     const action$ = this.activeDetailedCapture$.pipe(
       first(),
@@ -892,7 +847,7 @@ export class DetailsPage {
             if (geolocation)
               return Browser.open({
                 url: `https://maps.google.com/maps?q=${geolocation.latitude},${geolocation.longitude}`,
-                toolbarColor: '#564dfc',
+                toolbarColor: browserToolbarColor,
               });
             return EMPTY;
           })

src/app/features/faq/faq.page.ts

@@ -41,7 +41,7 @@
         </a>
       </mat-list-item>
       <mat-list-item>
-        <a routerLink="/faq" (click)="sidenav.close()" mat-list-item>
+        <a (click)="sidenav.close(); openFaq()" mat-list-item>
           {{ t('faq') }}
         </a>
       </mat-list-item>