From 96ad3b5a645e942aeb367b0b8069a036baa5d406 Mon Sep 17 00:00:00 2001 From: Olga Shen Date: Thu, 25 Jul 2024 15:19:44 +0800 Subject: [PATCH] feat(features/home): use GitBook for FAQ Replace the iframe FAQ with the GitBook FAQ. --- src/app/app-routing.module.ts | 5 -- src/app/features/faq/faq-routing.module.ts | 17 ------- src/app/features/faq/faq.module.ts | 12 ----- src/app/features/faq/faq.page.html | 17 ------- src/app/features/faq/faq.page.scss | 31 ----------- src/app/features/faq/faq.page.spec.ts | 26 ---------- src/app/features/faq/faq.page.ts | 49 ------------------ .../home/capture-tab/capture-tab.component.ts | 9 +++- .../action-details/action-details.page.ts | 3 +- .../home/details/actions/actions.page.ts | 3 +- .../capture-details-with-ionic.component.ts | 5 +- src/app/features/home/details/details.page.ts | 51 ++----------------- src/app/features/home/home.page.html | 2 +- src/app/features/home/home.page.ts | 24 +++------ src/app/utils/constants.ts | 1 + src/app/utils/url.ts | 4 ++ 16 files changed, 30 insertions(+), 229 deletions(-) delete mode 100644 src/app/features/faq/faq-routing.module.ts delete mode 100644 src/app/features/faq/faq.module.ts delete mode 100644 src/app/features/faq/faq.page.html delete mode 100644 src/app/features/faq/faq.page.scss delete mode 100644 src/app/features/faq/faq.page.spec.ts delete mode 100644 src/app/features/faq/faq.page.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3cffd2b84..b40f8bd48 100644 --- a/src/app/app-routing.module.ts +++ b/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: [ diff --git a/src/app/features/faq/faq-routing.module.ts b/src/app/features/faq/faq-routing.module.ts deleted file mode 100644 index 76e7d4167..000000000 --- a/src/app/features/faq/faq-routing.module.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; - -import { FaqPage } from './faq.page'; - -const routes: Routes = [ - { - path: '', - component: FaqPage, - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class FaqPageRoutingModule {} diff --git a/src/app/features/faq/faq.module.ts b/src/app/features/faq/faq.module.ts deleted file mode 100644 index ba6146386..000000000 --- a/src/app/features/faq/faq.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { FaqPageRoutingModule } from './faq-routing.module'; - -import { SharedModule } from '../../shared/shared.module'; -import { FaqPage } from './faq.page'; - -@NgModule({ - imports: [SharedModule, FaqPageRoutingModule], - declarations: [FaqPage], -}) -export class FaqPageModule {} diff --git a/src/app/features/faq/faq.page.html b/src/app/features/faq/faq.page.html deleted file mode 100644 index 63ad280d5..000000000 --- a/src/app/features/faq/faq.page.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - {{ 'faq' | transloco }} - -
- {{ 'message.networkNotConnected' | transloco }} -
- - - - - - diff --git a/src/app/features/faq/faq.page.scss b/src/app/features/faq/faq.page.scss deleted file mode 100644 index 447ed91db..000000000 --- a/src/app/features/faq/faq.page.scss +++ /dev/null @@ -1,31 +0,0 @@ -mat-toolbar { - span { - padding-right: 40px; - font-style: normal; - font-weight: 500; - font-size: 16px; - line-height: 21px; - text-align: center; - color: white; - } -} - -.no-network-text { - font-size: 18px; - margin: auto; -} - -.bubble-iframe { - background-color: black; - width: 100vw; - height: 100vh; - border: 0; -} - -ion-spinner { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - scale: 1.5; -} diff --git a/src/app/features/faq/faq.page.spec.ts b/src/app/features/faq/faq.page.spec.ts deleted file mode 100644 index cba943b5f..000000000 --- a/src/app/features/faq/faq.page.spec.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; -import { SharedTestingModule } from '../../shared/shared-testing.module'; - -import { FaqPage } from './faq.page'; - -describe('FaqPage', () => { - let component: FaqPage; - let fixture: ComponentFixture; - - beforeEach( - waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [FaqPage], - imports: [SharedTestingModule], - }).compileComponents(); - - fixture = TestBed.createComponent(FaqPage); - component = fixture.componentInstance; - fixture.detectChanges(); - }) - ); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/features/faq/faq.page.ts b/src/app/features/faq/faq.page.ts deleted file mode 100644 index 48bda1deb..000000000 --- a/src/app/features/faq/faq.page.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { Component } from '@angular/core'; -import { NavController } from '@ionic/angular'; -import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; -import { BehaviorSubject, fromEvent } from 'rxjs'; -import { tap } from 'rxjs/operators'; -import { BUBBLE_IFRAME_URL } from '../../shared/dia-backend/secret'; -import { BubbleToIonicPostMessage } from '../../shared/iframe/iframe'; -import { NetworkService } from '../../shared/network/network.service'; - -@UntilDestroy() -@Component({ - selector: 'app-faq', - templateUrl: './faq.page.html', - styleUrls: ['./faq.page.scss'], -}) -export class FaqPage { - readonly networkConnected$ = this.networkService.connected$; - readonly iframeUrl = `${BUBBLE_IFRAME_URL}/faq`; - readonly iframeLoaded$ = new BehaviorSubject(false); - - constructor( - private readonly networkService: NetworkService, - private readonly navController: NavController - ) {} - - ionViewDidEnter() { - this.processIframeEvents(); - } - - processIframeEvents() { - fromEvent(window, 'message') - .pipe( - tap(event => { - const postMessageEvent = event as MessageEvent; - const data = postMessageEvent.data as BubbleToIonicPostMessage; - switch (data) { - case BubbleToIonicPostMessage.IFRAME_ON_LOAD: - this.iframeLoaded$.next(true); - break; - case BubbleToIonicPostMessage.IFRAME_BACK_BUTTON_CLICKED: - this.navController.back(); - break; - } - }), - untilDestroyed(this) - ) - .subscribe(); - } -} diff --git a/src/app/features/home/capture-tab/capture-tab.component.ts b/src/app/features/home/capture-tab/capture-tab.component.ts index cb4c55b37..292c5564d 100644 --- a/src/app/features/home/capture-tab/capture-tab.component.ts +++ b/src/app/features/home/capture-tab/capture-tab.component.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'), diff --git a/src/app/features/home/details/actions/action-details/action-details.page.ts b/src/app/features/home/details/actions/action-details/action-details.page.ts index b7a9e3afb..6664e6c78 100644 --- a/src/app/features/home/details/actions/action-details/action-details.page.ts +++ b/src/app/features/home/details/actions/action-details/action-details.page.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) => { diff --git a/src/app/features/home/details/actions/actions.page.ts b/src/app/features/home/details/actions/actions.page.ts index 1bb3f36be..b60d7cb6a 100644 --- a/src/app/features/home/details/actions/actions.page.ts +++ b/src/app/features/home/details/actions/actions.page.ts @@ -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) => { diff --git a/src/app/features/home/details/capture-details-with-ionic/capture-details-with-ionic.component.ts b/src/app/features/home/details/capture-details-with-ionic/capture-details-with-ionic.component.ts index 37b0ab7d5..3cc600dad 100644 --- a/src/app/features/home/details/capture-details-with-ionic/capture-details-with-ionic.component.ts +++ b/src/app/features/home/details/capture-details-with-ionic/capture-details-with-ionic.component.ts @@ -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, }) ) ), diff --git a/src/app/features/home/details/details.page.ts b/src/app/features/home/details/details.page.ts index 7adeb5357..5e56b1001 100644 --- a/src/app/features/home/details/details.page.ts +++ b/src/app/features/home/details/details.page.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; }) diff --git a/src/app/features/home/home.page.html b/src/app/features/home/home.page.html index b61f0ce1a..d0a8e5414 100644 --- a/src/app/features/home/home.page.html +++ b/src/app/features/home/home.page.html @@ -41,7 +41,7 @@ - + {{ t('faq') }} diff --git a/src/app/features/home/home.page.ts b/src/app/features/home/home.page.ts index 9aaf0a605..e72e26837 100644 --- a/src/app/features/home/home.page.ts +++ b/src/app/features/home/home.page.ts @@ -22,7 +22,6 @@ import { first, map, startWith, - switchMap, tap, } from 'rxjs/operators'; import { AndroidBackButtonService } from '../../shared/android-back-button/android-back-button.service'; @@ -47,9 +46,10 @@ import { import { OnboardingService } from '../../shared/onboarding/onboarding.service'; import { PreferenceManager } from '../../shared/preference-manager/preference-manager.service'; import { UserGuideService } from '../../shared/user-guide/user-guide.service'; +import { browserToolbarColor } from '../../utils/constants'; import { reloadApp } from '../../utils/miscellaneous'; import { VOID$, switchTapTo } from '../../utils/rx-operators/rx-operators'; -import { getAppDownloadLink } from '../../utils/url'; +import { getAppDownloadLink, getFaqUrl } from '../../utils/url'; import { GoProBluetoothService } from '../settings/go-pro/services/go-pro-bluetooth.service'; import { UpdateAppDialogComponent } from './in-app-updates/update-app-dialog/update-app-dialog.component'; import { PrefetchingDialogComponent } from './onboarding/prefetching-dialog/prefetching-dialog.component'; @@ -407,22 +407,6 @@ export class HomePage { }); } - // eslint-disable-next-line class-methods-use-this - openCaptureClub() { - this.diaBackendAuthService.token$ - .pipe( - first(), - switchMap(token => - Browser.open({ - url: `https://captureclub.cc/?token=${token}`, - toolbarColor: '#564dfc', - }) - ), - untilDestroyed(this) - ) - .subscribe(); - } - // eslint-disable-next-line class-methods-use-this async navigateToCollectionTab() { if (this.selectedTabIndex === this.collectionTabIndex) { @@ -486,4 +470,8 @@ export class HomePage { ) .subscribe(); } + + async openFaq() { + await Browser.open({ url: getFaqUrl(), toolbarColor: browserToolbarColor }); + } } diff --git a/src/app/utils/constants.ts b/src/app/utils/constants.ts index 64401be12..ab592c56f 100644 --- a/src/app/utils/constants.ts +++ b/src/app/utils/constants.ts @@ -1 +1,2 @@ +export const browserToolbarColor = '#564dfc'; export const urlToDownloadApp = 'https://link.numbersprotocol.io/CaptureCam'; diff --git a/src/app/utils/url.ts b/src/app/utils/url.ts index c949f8ce7..8d29aa95b 100644 --- a/src/app/utils/url.ts +++ b/src/app/utils/url.ts @@ -23,3 +23,7 @@ export function getAppDownloadLink(isPlatform: (platformName: any) => boolean) { return urlToDownloadApp; } + +export function getFaqUrl() { + return 'https://docs.captureapp.xyz/faq'; +}