Merge pull request #10913 from JohnathanWhite/feat/add-card-gate

[Feat]add card gate
bitpay · May 20, 2020 · 3716070 · 3716070
2 parents 44a1719 + 96e4f1d
commit 3716070
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 45 deletions.
diff --git a/src/pages/cards/cards.ts b/src/pages/cards/cards.ts
@@ -6,6 +6,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { Events } from 'ionic-angular';
 import { ActionSheetProvider } from '../../providers/action-sheet/action-sheet';
 import { AppProvider } from '../../providers/app/app';
+import { BitPayCardProvider } from '../../providers/bitpay-card/bitpay-card';
 import { BitPayProvider } from '../../providers/bitpay/bitpay';
 import { GiftCardProvider } from '../../providers/gift-card/gift-card';
 import { HomeIntegrationsProvider } from '../../providers/home-integrations/home-integrations';
@@ -64,7 +65,8 @@ export class CardsPage {
     private changeRef: ChangeDetectorRef,
     private logger: Logger,
     private actionSheetProvider: ActionSheetProvider,
-    private translate: TranslateService
+    private translate: TranslateService,
+    private bitPayCardProvider: BitPayCardProvider
   ) {
     this.persistenceProvider.getCardExperimentFlag().then(status => {
       if (status === 'enabled') {
@@ -117,6 +119,8 @@ export class CardsPage {
 
     this.events.subscribe('IABReady', async country => {
       clearInterval(this.IABPingInterval);
+
+      // TODO uncomment when we move to IP check after whitelist phase
       // if wait list flag not set retrieve from storage
       // if (this.cardExperimentEnabled && this.waitList === undefined) {
       //   this.waitList = country && country !== 'US';
@@ -136,18 +140,28 @@ export class CardsPage {
       'debitcard'
     );
 
-    this.showBitPayCard =
-      !(this.appProvider.info._enabledExtensions.debitcard == 'false') &&
-      this.platformProvider.isCordova;
-
-    if (
-      !this.IABReady &&
-      !this.IABPingLock &&
-      this.platformProvider.isCordova
-    ) {
-      this.pingIAB();
+    if (this.cardExperimentEnabled) {
+      this.showBitPayCard =
+        !(this.appProvider.info._enabledExtensions.debitcard == 'false') &&
+        this.platformProvider.isCordova;
+
+      if (
+        !this.IABReady &&
+        !this.IABPingLock &&
+        this.platformProvider.isCordova
+      ) {
+        this.pingIAB();
+      }
+    } else {
+      this.showBitPayCard = !(
+        this.appProvider.info._enabledExtensions.debitcard == 'false'
+      );
+
+      // TODO gating code
+      if (!this.IABReady) {
+        setTimeout(() => (this.initialized = this.IABReady = true), 500);
+      }
     }
-
     this.bitpayCardItems = await this.prepareDebitCards();
     await this.fetchAllCards();
   }
@@ -177,7 +191,7 @@ export class CardsPage {
 
   private async prepareDebitCards() {
     return new Promise(res => {
-      if (!this.platformProvider.isCordova) {
+      if (!this.platformProvider.isCordova && this.cardExperimentEnabled) {
         return res();
       }
 
@@ -214,10 +228,11 @@ export class CardsPage {
 
         // if galileo then show disclaimer and remove add card ability
         if (galileo !== -1) {
-          if (!this.cardExperimentEnabled) {
-            this.persistenceProvider.setCardExperimentFlag('enabled');
-            this.cardExperimentEnabled = true;
-          }
+          //
+          // if (!this.cardExperimentEnabled) {
+          //   this.persistenceProvider.setCardExperimentFlag('enabled');
+          //   this.cardExperimentEnabled = true;
+          // }
 
           this.waitList = false;
 
@@ -247,8 +262,18 @@ export class CardsPage {
   }
 
   private async fetchBitpayCardItems() {
-    if (this.hasCards && this.platformProvider.isCordova) {
-      await this.iabCardProvider.getCards();
+    if (this.platformProvider.isCordova && this.cardExperimentEnabled) {
+      if (this.hasCards) {
+        await this.iabCardProvider.getCards();
+      }
+    } else {
+      this.bitpayCardItems = await this.tabProvider.bitpayCardItemsPromise;
+
+      const updatedBitpayCardItemsPromise = this.bitPayCardProvider.get({
+        noHistory: true
+      });
+      this.bitpayCardItems = await updatedBitpayCardItemsPromise;
+      this.tabProvider.bitpayCardItemsPromise = updatedBitpayCardItemsPromise;
     }
   }
 

diff --git a/src/pages/integrations/bitpay-card/bitpay-card-home/bitpay-card-home.html b/src/pages/integrations/bitpay-card/bitpay-card-home/bitpay-card-home.html
@@ -105,7 +105,46 @@
     </ng-container>
 
 
-    <ng-container *ngIf="this.cardExperimentEnabled && bitpayCardItems?.length && !disableAddCard" @fade>
+    <ng-container *ngIf="waitList && !alreadyOnWaitList && bitpayCardItems?.length && !disableAddCard" @fade>
+      <div @fade>
+        <action-card-v4>
+          <div action-card-header>
+            <div class="bitpay-card-header">
+              <ng-container *ngIf="!initialized else headerInitialized">
+                <div class="card-loader__tile" style="width: 100%"></div>
+              </ng-container>
+              <ng-template #headerInitialized>
+                <div class="bitpay-card-image" style="background: #062150">
+                  <img @fade src="assets/img/card-phase-release/bitpay-card-spaceman-discover-block.svg"
+                       style="transform: scale(1.3)">
+                </div>
+              </ng-template>
+            </div>
+          </div>
+          <div action-card-title>
+            <ng-container *ngIf="!initialized else titleInitialized">
+              <div class="loading--line" style="width: 60%"></div>
+            </ng-container>
+            <ng-template #titleInitialized>
+              <div @fade translate>Something exciting is arriving</div>
+            </ng-template>
+          </div>
+          <div *ngIf="!initialized" action-card-body style="width: 100%">
+            <div class="loading--line" style="width: 30%"></div>
+            <div class="loading--line" style="width: 50%"></div>
+          </div>
+          <div *ngIf="initialized" action-card-body [clamp]="3" translate>
+            Join the waitlist and be first to experience the new card.
+          </div>
+          <div @fadeUp action-card-button translate *ngIf="initialized" (click)="goToBitPayCardIntroPage()">
+            <div translate>Notify Me</div>
+          </div>
+        </action-card-v4>
+      </div>
+
+    </ng-container>
+
+    <ng-container *ngIf="cardExperimentEnabled && bitpayCardItems?.length && !disableAddCard" @fade>
       <div @fade>
         <action-card-v4>
           <div action-card-header>
@@ -142,6 +181,8 @@
       </div>
 
     </ng-container>
+
+
   </ng-template>
 
 </div>
diff --git a/src/pages/integrations/bitpay-card/bitpay-card-home/bitpay-card-home.ts b/src/pages/integrations/bitpay-card/bitpay-card-home/bitpay-card-home.ts
@@ -9,6 +9,7 @@ import {
   Network,
   PersistenceProvider
 } from '../../../../providers/persistence/persistence';
+import { BitPayCardPage } from '../bitpay-card';
 import { BitPayCardIntroPage } from '../bitpay-card-intro/bitpay-card-intro';
 import { PhaseOneCardIntro } from '../bitpay-card-phases/phase-one/phase-one-intro-page/phase-one-intro-page';
 
@@ -49,6 +50,7 @@ export class BitPayCardHome implements OnInit {
   public disableAddCard = true;
   public isFetching: boolean;
   public ready: boolean;
+  public alreadyOnWaitList: boolean;
 
   @Input() showBitpayCardGetStarted: boolean;
   @Input() bitpayCardItems: any;
@@ -65,6 +67,10 @@ export class BitPayCardHome implements OnInit {
     private persistenceProvider: PersistenceProvider,
     private events: Events
   ) {
+    this.persistenceProvider.getWaitingListStatus().then(status => {
+      this.alreadyOnWaitList = !!status;
+    });
+
     this.events.subscribe('reachedCardLimit', () => {
       this.disableAddCard = true;
     });
@@ -92,23 +98,27 @@ export class BitPayCardHome implements OnInit {
   }
 
   public async goToCard(cardId) {
-    const token = await this.persistenceProvider.getBitPayIdPairingToken(
-      this.network
-    );
-    const email = this.bitpayCardItems[0].email;
+    if (this.cardExperimentEnabled) {
+      const token = await this.persistenceProvider.getBitPayIdPairingToken(
+        this.network
+      );
+      const email = this.bitpayCardItems[0].email;
 
-    const message = !token
-      ? `loadDashboard?${cardId}&${email}`
-      : `loadDashboard?${cardId}`;
+      const message = !token
+        ? `loadDashboard?${cardId}&${email}`
+        : `loadDashboard?${cardId}`;
 
-    this.iabCardProvider.show();
-    setTimeout(() => {
-      this.iabCardProvider.sendMessage(
-        {
-          message
-        },
-        () => {}
-      );
-    }, 100);
+      this.iabCardProvider.show();
+      setTimeout(() => {
+        this.iabCardProvider.sendMessage(
+          {
+            message
+          },
+          () => {}
+        );
+      });
+    } else {
+      this.navCtrl.push(BitPayCardPage, { id: cardId });
+    }
   }
 }
diff --git a/src/pages/settings/settings.html b/src/pages/settings/settings.html
@@ -198,7 +198,7 @@
         </ion-note>
       </button>
 
-      <ng-container *ngIf="isCordova">
+      <ng-container *ngIf="isCordova && bitpayIdPairingEnabled">
         <ion-item-divider>
           {{'BitPay Account' | translate}}
         </ion-item-divider>

diff --git a/src/pages/settings/settings.ts b/src/pages/settings/settings.ts
@@ -303,14 +303,20 @@ export class SettingsPage {
   }
 
   public openCardSettings(id): void {
-    const message = `openSettings?${id}`;
-    this.iabCardProvider.show(true);
-    this.iabCardProvider.sendMessage(
-      {
-        message
-      },
-      () => {}
-    );
+    this.persistenceProvider.getCardExperimentFlag().then(status => {
+      if (status === 'enabled') {
+        const message = `openSettings?${id}`;
+        this.iabCardProvider.show(true);
+        this.iabCardProvider.sendMessage(
+          {
+            message
+          },
+          () => {}
+        );
+      } else {
+        this.navCtrl.push(BitPaySettingsPage, { id });
+      }
+    });
   }
 
   public openGiftCardsSettings() {