ui: adds a banner to the marketplace page when an OS update is detected

ui/src/app/components/update-os-banner/update-os-banner.component.html

@@ -0,0 +1,5 @@
+<ion-item button lines="none" *ngIf="updateAvailable$ | async as version" (click)="confirmUpdate(version)">
+  <ion-label>
+    New Embassy OS Version {{version}} Available!
+  </ion-label>
+</ion-item>

ui/src/app/components/update-os-banner/update-os-banner.component.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { UpdateOsBannerComponent } from './update-os-banner.component'
+import { IonicModule } from '@ionic/angular'
+
+@NgModule({
+  declarations: [
+    UpdateOsBannerComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+  ],
+  exports: [UpdateOsBannerComponent],
+})
+export class UpdateOsBannerComponentModule { }

ui/src/app/components/update-os-banner/update-os-banner.component.scss

@@ -0,0 +1,11 @@
+ion-item {
+
+  --background: linear-gradient(90deg, var(--ion-color-light), var(--ion-color-primary));
+  --min-height: 0px;
+  ion-label {
+    font-family: 'Open Sans';
+    font-size: small;
+    text-align: center;
+    font-weight: bold;
+  }
+}

ui/src/app/components/update-os-banner/update-os-banner.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core'
+import { OsUpdateService } from 'src/app/services/os-update.service'
+import { Observable } from 'rxjs'
+import { AlertController } from '@ionic/angular'
+import { LoaderService } from 'src/app/services/loader.service'
+
+@Component({
+  selector: 'update-os-banner',
+  templateUrl: './update-os-banner.component.html',
+  styleUrls: ['./update-os-banner.component.scss'],
+})
+export class UpdateOsBannerComponent {
+  updateAvailable$: Observable<undefined | string>
+  constructor (
+    private readonly osUpdateService: OsUpdateService,
+    private readonly alertCtrl: AlertController,
+    private readonly loader: LoaderService,
+  ) {
+    this.updateAvailable$ = this.osUpdateService.watchForUpdateAvailable()
+  }
+
+  ngOnInit () { }
+
+  async confirmUpdate (versionLatest: string) {
+    const alert = await this.alertCtrl.create({
+      header: `Update Embassy OS`,
+      message: `Are you sure you want to update your Embassy OS to version ${versionLatest}?`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Update',
+          handler: () => this.update(versionLatest),
+        },
+      ],
+    })
+    await alert.present()
+  }
+
+  private async update (versionLatest: string) {
+    return this.loader.displayDuringP(
+      this.osUpdateService.updateEmbassyOS(versionLatest),
+    )
+  }
+}