Merge pull request #2515 from numbersprotocol/milestone-v230112

Milestone v230112

src/app/app-routing.module.ts

@@ -82,6 +82,20 @@ const routes: Routes = [
         m => m.InvitationPageModule
       ),
   },
+  {
+    path: 'data-policy',
+    loadChildren: () =>
+      import('./features/data-policy/data-policy.module').then(
+        m => m.DataPolicyPageModule
+      ),
+  },
+  {
+    path: 'terms-of-use',
+    loadChildren: () =>
+      import('./features/terms-of-use/terms-of-use.module').then(
+        m => m.TermsOfUsePageModule
+      ),
+  },
 ];
 @NgModule({
   imports: [

src/app/features/about/about.page.html

@@ -6,20 +6,5 @@
 </mat-toolbar>
 
 <div class="page-content">
-  <mat-list *transloco="let t">
-    <mat-list-item>
-      <mat-icon mat-list-icon>update</mat-icon>
-      <div mat-line>{{ t('version') }}</div>
-      <div mat-line>{{ version$ | ngrxPush }}</div>
-    </mat-list-item>
-    <mat-list-item>
-      <mat-icon mat-list-icon>help</mat-icon>
-      <div mat-line>{{ t('contactUs') }}</div>
-      <div mat-line>
-        <a href="mailto:[email protected]">
-          [email protected]
-        </a>
-      </div>
-    </mat-list-item>
-  </mat-list>
+  <!-- TODO: add about page text according to design. blocked by @Noir -->
 </div>

src/app/features/about/about.page.ts

@@ -1,15 +1,10 @@
 import { Component } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { VersionService } from '../../shared/version/version.service';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'app-about',
   templateUrl: './about.page.html',
   styleUrls: ['./about.page.scss'],
 })
-export class AboutPage {
-  readonly version$ = this.versionService.version$;
-
-  constructor(private readonly versionService: VersionService) {}
-}
+export class AboutPage {}

src/app/features/contacts/contacts.page.html

@@ -2,7 +2,7 @@
   <button routerLink=".." routerDirection="back" mat-icon-button>
     <mat-icon>arrow_back</mat-icon>
   </button>
-  <span>{{ t('contacts') }}</span>
+  <span>{{ t('friends') }}</span>
 </mat-toolbar>
 
 <ion-content>

src/app/features/data-policy/data-policy-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DataPolicyPage } from './data-policy.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: DataPolicyPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DataPolicyPageRoutingModule {}

src/app/features/data-policy/data-policy.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+
+import { DataPolicyPageRoutingModule } from './data-policy-routing.module';
+
+import { SharedModule } from '../../shared/shared.module';
+import { DataPolicyPage } from './data-policy.page';
+
+@NgModule({
+  imports: [SharedModule, DataPolicyPageRoutingModule],
+  declarations: [DataPolicyPage],
+})
+export class DataPolicyPageModule {}

src/app/features/data-policy/data-policy.page.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="(networkConnected$ | async) === false; else bubbleIframe">
+  <mat-toolbar>
+    <button
+      routerLink=".."
+      routerDirection="back"
+      mat-mini-fab
+      class="capture-rebranded-button"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span>{{ 'dataPolicy' | transloco }}</span>
+  </mat-toolbar>
+  <div class="no-network-text">
+    {{ 'message.networkNotConnected' | transloco }}
+  </div>
+</ng-container>
+
+<ng-template #bubbleIframe>
+  <iframe
+    [src]="dataPolicyUrl | safeResourceUrl"
+    class="bubble-iframe"
+  ></iframe>
+  <ion-spinner
+    *ngIf="(iframeLoaded$ | async) !== true"
+    name="lines-sharp"
+  ></ion-spinner>
+</ng-template>

src/app/features/data-policy/data-policy.page.scss

@@ -0,0 +1,39 @@
+mat-toolbar {
+  span {
+    padding-right: 40px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 21px;
+    text-align: center;
+    color: white;
+  }
+
+  .capture-rebranded-button {
+    margin: 0 4px;
+    background: #ffffff40 !important; /* stylelint-disable-line declaration-no-important */
+    color: white !important; /* stylelint-disable-line declaration-no-important */
+    backdrop-filter: blur(4px);
+    box-shadow: none;
+  }
+}
+
+.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;
+}

src/app/features/data-policy/data-policy.page.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { SharedTestingModule } from '../../shared/shared-testing.module';
+
+import { DataPolicyPage } from './data-policy.page';
+
+describe('DataPolicyPage', () => {
+  let component: DataPolicyPage;
+  let fixture: ComponentFixture<DataPolicyPage>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [DataPolicyPage],
+        imports: [SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(DataPolicyPage);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/data-policy/data-policy.page.ts

@@ -0,0 +1,45 @@
+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 { NetworkService } from '../../shared/network/network.service';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-data-policy',
+  templateUrl: './data-policy.page.html',
+  styleUrls: ['./data-policy.page.scss'],
+})
+export class DataPolicyPage {
+  readonly networkConnected$ = this.networkService.connected$;
+  readonly dataPolicyUrl = `${BUBBLE_IFRAME_URL}/data_policy`;
+  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;
+          if (postMessageEvent.data === 'iframe-on-load') {
+            this.iframeLoaded$.next(true);
+          }
+          if (postMessageEvent.data === 'iframeBackButtonClicked') {
+            this.navController.back();
+          }
+        }),
+        untilDestroyed(this)
+      )
+      .subscribe();
+  }
+}

src/app/features/home/details/details.page.ts

@@ -184,6 +184,10 @@ export class DetailsPage {
     )
   );
 
+  readonly isCollectedCapture$ = this.type$.pipe(
+    map(type => type === 'post-capture')
+  );
+
   readonly iframeUrl$ = this.activeDetailedCapture$.pipe(
     distinctUntilChanged(),
     map(detailedCapture => {
@@ -427,55 +431,69 @@ export class DetailsPage {
   async openOptionsMenuEvenOffline() {
     this.userGuideService.setHasClickedDetailsPageOptionsMenu(true);
 
-    return new Promise<void>(resolve => {
-      const buttons: ActionSheetButton[] = [];
-
-      buttons.push({
-        text: this.translocoService.translate('details.actions.edit'),
-        handler: () => {
-          this.handleEditAction();
-          resolve();
-        },
-      });
-
-      // Temporarely remove Mint & Share button
-      // buttons.push({
-      //   text: this.translocoService.translate('details.actions.mintAndShare'),
-      //   handler: () => {
-      //     this.handleMintAndShareAction();
-      //     resolve();
-      //   },
-      // });
-
-      buttons.push({
-        text: this.translocoService.translate('details.actions.unpublish'),
-        handler: () => {
-          this.handleUnpublishAction();
-          resolve();
-        },
-      });
-
-      buttons.push({
-        text: this.translocoService.translate('details.actions.networkActions'),
-        handler: () => {
-          this.handleOpenNetworkActions();
-          resolve();
-        },
-      });
-
-      buttons.push({
-        text: this.translocoService.translate('details.actions.remove'),
-        cssClass: 'details-page-options-menu-remove-button',
-        handler: () => {
-          this.handleRemoveAction();
-          resolve();
-        },
-      });
-
-      this.actionSheetController
-        .create({ buttons })
-        .then(sheet => sheet.present());
-    });
+    this.isCollectedCapture$
+      .pipe(
+        first(),
+        map(isCollectedCapture => {
+          return new Promise<void>(resolve => {
+            const buttons: ActionSheetButton[] = [];
+
+            if (!isCollectedCapture) {
+              buttons.push({
+                text: this.translocoService.translate('details.actions.edit'),
+                handler: () => {
+                  this.handleEditAction();
+                  resolve();
+                },
+              });
+            }
+            // Temporarely remove Mint & Share button
+            // buttons.push({
+            //   text: this.translocoService.translate('details.actions.mintAndShare'),
+            //   handler: () => {
+            //     this.handleMintAndShareAction();
+            //     resolve();
+            //   },
+            // });
+
+            if (!isCollectedCapture) {
+              buttons.push({
+                text: this.translocoService.translate(
+                  'details.actions.unpublish'
+                ),
+                handler: () => {
+                  this.handleUnpublishAction();
+                  resolve();
+                },
+              });
+            }
+
+            buttons.push({
+              text: this.translocoService.translate(
+                'details.actions.networkActions'
+              ),
+              handler: () => {
+                this.handleOpenNetworkActions();
+                resolve();
+              },
+            });
+
+            buttons.push({
+              text: this.translocoService.translate('details.actions.remove'),
+              cssClass: 'details-page-options-menu-remove-button',
+              handler: () => {
+                this.handleRemoveAction();
+                resolve();
+              },
+            });
+
+            this.actionSheetController
+              .create({ buttons })
+              .then(sheet => sheet.present());
+          });
+        })
+      )
+      .subscribe();
   }
 
   private handleEditAction() {