feat(app): Google Play Billing library 7

Upgrade library cordova-plugin-purchase to version 13.11.1 to support
Google Play Billing library 7.0.0.
Fix wallet credits not refreshing after a purchase.
Fix toast error display when canceling a purchase.

android/app/capacitor.build.gradle

@@ -32,7 +32,7 @@ dependencies {
     implementation project(':appsflyer-capacitor-plugin')
     implementation project(':capacitor-blob-writer')
     implementation project(':capacitor-native-settings')
-    implementation "com.android.billingclient:billing:5.2.1"
+    implementation "com.android.billingclient:billing:7.0.0"
 }
 
 

package.json

@@ -72,7 +72,7 @@
     "capacitor-blob-writer": "^1.0.4",
     "capacitor-native-settings": "^4.0.3",
     "compressorjs": "^1.0.7",
-    "cordova-plugin-purchase": "^13.9.0",
+    "cordova-plugin-purchase": "^13.11.1",
     "ethers": "^6.8.1",
     "hammerjs": "^2.0.8",
     "immutable": "^4.0.0-rc.14",

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

@@ -64,6 +64,7 @@ export class HomePage {
   readonly initialTabIndex = 0;
   private readonly afterCaptureTabIndex = 0;
   private readonly collectionTabIndex = 2;
+  private shouldReloadWallet = false;
   selectedTabIndex = this.initialTabIndex;
 
   readonly username$ = this.diaBackendAuthService.username$;
@@ -112,6 +113,28 @@ export class HomePage {
     this.downloadExpiredPostCaptures();
     this.overrideAndroidBackButtonBehavior();
     this.encourageUserToTakePhoto();
+    this.reloadWalletPage();
+  }
+
+  private reloadWalletPage() {
+    this.diaBackendWalletService.reloadWallet$
+      .pipe(
+        tap(reload => {
+          if (reload) {
+            this.shouldReloadWallet = true;
+            this.diaBackendWalletService.reloadWallet$.next(false);
+          }
+        }),
+        untilDestroyed(this)
+      )
+      .subscribe();
+  }
+
+  ionViewWillEnter() {
+    if (this.shouldReloadWallet) {
+      this.shouldReloadWallet = false;
+      this.router.navigate(['wallets']);
+    }
   }
 
   ionViewDidEnter() {

src/app/features/wallets/buy-num/buy-num.page.ts

@@ -5,6 +5,7 @@ import { UntilDestroy } from '@ngneat/until-destroy';
 import { combineLatest } from 'rxjs';
 import { filter, first, map, tap } from 'rxjs/operators';
 import { BlockingActionService } from '../../../shared/blocking-action/blocking-action.service';
+import { DiaBackendWalletService } from '../../../shared/dia-backend/wallet/dia-backend-wallet.service';
 import { InAppStoreService } from '../../../shared/in-app-store/in-app-store.service';
 
 @UntilDestroy()
@@ -43,14 +44,16 @@ export class BuyNumPage implements OnInit {
     private readonly ref: ChangeDetectorRef,
     private readonly alertController: AlertController,
     private readonly translocoService: TranslocoService,
-    private readonly blockingActionService: BlockingActionService
+    private readonly blockingActionService: BlockingActionService,
+    private readonly diaBackendWalletService: DiaBackendWalletService
   ) {}
 
   ngOnInit() {
     this.store.refreshNumPointsPricing();
   }
 
   purchase(product: CdvPurchase.Product) {
+    this.diaBackendWalletService.reloadWallet$.next(true);
     this.showLoadingIndicatorUntillOrderIsProcessed();
     this.store.purchase(product);
   }

src/app/features/wallets/wallets.page.html

@@ -1,20 +1,23 @@
 <ng-container *ngIf="(networkConnected$ | async) === false; else bubbleIframe">
   <mat-toolbar>
     <app-capture-back-button></app-capture-back-button>
-    <span>{{ 'wallets.walets' | transloco }}</span>
+    <span>{{ 'wallets.wallets' | transloco }}</span>
   </mat-toolbar>
   <div class="no-network-text">
     {{ 'message.networkNotConnected' | transloco }}
   </div>
 </ng-container>
 
 <ng-template #bubbleIframe>
+  <ng-container *ngIf="(iframeLoaded$ | ngrxPush) !== true">
+    <mat-toolbar>
+      <app-capture-back-button></app-capture-back-button>
+      <span>{{ 'wallets.wallets' | transloco }}</span>
+    </mat-toolbar>
+    <ion-spinner name="lines-sharp"></ion-spinner>
+  </ng-container>
   <iframe
     [src]="iframeUrl$ | async | safeResourceUrl"
     class="bubble-iframe"
   ></iframe>
-  <ion-spinner
-    *ngIf="(iframeLoaded$ | async) !== true"
-    name="lines-sharp"
-  ></ion-spinner>
 </ng-template>

src/app/features/wallets/wallets.page.ts

@@ -37,6 +37,7 @@ export class WalletsPage {
 
   elementType = NgxQrcodeElementTypes.URL;
   shouldHideDepositButton = false;
+  private reload = false;
 
   constructor(
     private readonly diaBackendWalletService: DiaBackendWalletService,
@@ -48,6 +49,14 @@ export class WalletsPage {
     private readonly navController: NavController
   ) {
     this.processIframeEvents();
+    this.reloadPage();
+  }
+
+  ionViewWillEnter() {
+    if (this.reload) {
+      this.reload = false;
+      this.navController.back({ animated: false });
+    }
   }
 
   private processIframeEvents() {
@@ -84,6 +93,19 @@ export class WalletsPage {
       .subscribe();
   }
 
+  private reloadPage() {
+    this.diaBackendWalletService.reloadWallet$
+      .pipe(
+        tap(reload => {
+          if (reload) {
+            this.reload = true;
+          }
+        }),
+        untilDestroyed(this)
+      )
+      .subscribe();
+  }
+
   private copyToClipboardAssetWallet() {
     this.assetWalletAddr$
       .pipe(

src/app/shared/dia-backend/wallet/dia-backend-wallet.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { combineLatest, defer, forkJoin } from 'rxjs';
+import { BehaviorSubject, combineLatest, defer, forkJoin } from 'rxjs';
 import { catchError, concatMap, first } from 'rxjs/operators';
 import { ErrorService } from '../../error/error.service';
 import { NetworkService } from '../../network/network.service';
@@ -36,6 +36,8 @@ export class DiaBackendWalletService {
 
   // For integrity wallet addr, use WebCryptoApiSignatureProvider.publicKey$
 
+  readonly reloadWallet$ = new BehaviorSubject(false);
+
   readonly networkConnected$ = this.networkService.connected$;
 
   constructor(

src/app/shared/in-app-store/in-app-store.service.ts

@@ -238,7 +238,11 @@ export class InAppStoreService implements OnDestroy {
   private readonly onStoreError = (error: CdvPurchase.IError) => {
     this.isProcessingOrder$.next(false);
 
-    if (error.message === 'The user cancelled the order.') return;
+    if (
+      error.code === CdvPurchase.ErrorCode.PAYMENT_CANCELLED ||
+      error.message === 'The user cancelled the order.'
+    )
+      return;
 
     const errorMessage = this.translocoService.translate(
       'inAppPurchase.inAppPurchaseErrorOcurred'