feat: digital credentials detailed instructions (bcgov#575)

* refactor: CredentialsLanding component: add heading card Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add supplemental cards Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add image and word wrapping Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: link styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsStepper component: deprecate routes Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: CredentialsStepper component: function naming Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: split into sub components Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add web socket component Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: re-add credential table Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: update types and imports Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add revocation dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add replacement dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: devcontainer config Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: bump version number Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: rename route for specificity Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: ran linter and fixed linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: make interface field optional Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert auto-formatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: contain dialogs for DigitalCredentials component Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix code smells Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: address code review comments Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert autoformatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: update wording and styling to align with UX Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: feature flag credentials feature with mixin Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add TOU dialog Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix test failiures and code comments * chore: cleaup Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: mixin to access digital credential feature Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: entity menu styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add loading indicators to digital credential route pages Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: reset dialog and functions Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: returl null if undefined Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: beef up conditional checks Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> * 18284: digital business card (bcgov#552) * refactor: CredentialsLanding component: add heading card Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add supplemental cards Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add image and word wrapping Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: link styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsStepper component: deprecate routes Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: CredentialsStepper component: function naming Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: split into sub components Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add web socket component Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: re-add credential table Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: update types and imports Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add revocation dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add replacement dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: devcontainer config Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: bump version number Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: rename route for specificity Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: ran linter and fixed linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: make interface field optional Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert auto-formatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: contain dialogs for DigitalCredentials component Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix code smells Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: address code review comments Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert autoformatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: update wording and styling to align with UX Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: feature flag credentials feature with mixin Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add TOU dialog Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix test failiures and code comments * chore: cleaup Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: mixin to access digital credential feature Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: entity menu styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add loading indicators to digital credential route pages Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: reset dialog and functions Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: returl null if undefined Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: beef up conditional checks Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> --------- Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: cleanup spelling and handle edge cases Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: failing tests Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: entity menu logic Signed-off-by: Akiff Manji <amanji@petridish.dev> * 18284 Updated CSP (bcgov#561) - added wss://*.gov.bc.ca to connect-src * refactor: remove websocket support in favour of interval polling Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: remove console log Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: address PR comments Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: remove unused import Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: build and test failures Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: digital business card (bcgov#562) * refactor: CredentialsLanding component: add heading card Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add supplemental cards Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: add image and word wrapping Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsLanding component: link styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: CredentialsStepper component: deprecate routes Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: CredentialsStepper component: function naming Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: split into sub components Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add web socket component Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: re-add credential table Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: DigitalCredentials component: update types and imports Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add revocation dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: DigitalCredentials component: add replacement dialogs Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: devcontainer config Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: bump version number Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: rename route for specificity Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: ran linter and fixed linting errors Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: make interface field optional Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert auto-formatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: contain dialogs for DigitalCredentials component Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix code smells Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: address code review comments Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: revert autoformatting Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: update wording and styling to align with UX Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: feature flag credentials feature with mixin Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add TOU dialog Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix test failiures and code comments * chore: cleaup Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: mixin to access digital credential feature Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: entity menu styling Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: add loading indicators to digital credential route pages Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: reset dialog and functions Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: returl null if undefined Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: beef up conditional checks Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: spelling error Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: cleanup spelling and handle edge cases Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: failing tests Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: entity menu logic Signed-off-by: Akiff Manji <amanji@petridish.dev> * refactor: remove websocket support in favour of interval polling Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: remove console log Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: address PR comments Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: remove unused import Signed-off-by: Akiff Manji <amanji@petridish.dev> * fix: build and test failures Signed-off-by: Akiff Manji <amanji@petridish.dev> --------- Signed-off-by: Akiff Manji <amanji@petridish.dev> * Update EntityMenu.spec.ts * chore: remove web socket references Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: fix spacing Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: some cleanup Signed-off-by: Akiff Manji <amanji@petridish.dev> * feat: credential detailed instructions Signed-off-by: Akiff Manji <amanji@petridish.dev> * chore: add tags to components Signed-off-by: Akiff Manji <amanji@petridish.dev> --------- Signed-off-by: Akiff Manji <amanji@petridish.dev> Co-authored-by: Séverin Beauvais <severinbeauvais@users.noreply.github.com>
JazzarKarim · Jan 27, 2024 · 991add2 · 991add2
1 parent 2cb369d
commit 991add2
Show file tree

Hide file tree

Showing 9 changed files with 283 additions and 74 deletions.
diff --git a/src/assets/images/bc_wallet_app_store.png b/src/assets/images/bc_wallet_app_store.png
diff --git a/src/assets/images/business_card_issuance_steps.png b/src/assets/images/business_card_issuance_steps.png
diff --git a/src/components/DigitalCredentials/CredentialsDashboard.vue b/src/components/DigitalCredentials/CredentialsDashboard.vue
@@ -169,7 +169,8 @@ export default class CredentialsDashboard extends Vue {
     this.showLoadingContainer = true
     let revokedCredential = !this.issuedCredential.isIssued || this.issuedCredential.isRevoked ? {} : null
     if (this.issuedCredential.isIssued && !this.issuedCredential.isRevoked) {
-      revokedCredential = await LegalServices.revokeCredential(this.getIdentifier, this.issuedCredential.credentialId)
+      revokedCredential =
+        await LegalServices.revokeCredential(this.getIdentifier, this.issuedCredential.credentialId, true)
     }
     const removedCredential =
       await LegalServices.removeCredential(this.getIdentifier, this.issuedCredential.credentialId)

diff --git a/src/components/DigitalCredentials/CredentialsDetailSteps.vue b/src/components/DigitalCredentials/CredentialsDetailSteps.vue
@@ -0,0 +1,139 @@
+<template>
+  <div id="credentials-detail-steps">
+    <h1>Steps to get your credential</h1>
+    <v-card class="mt-6">
+      <v-card-text class="d-flex">
+        <span
+          class="credentials-stepper-number ml-n4 my-n4 px-4
+          font-weight-bold align-self-stretch d-flex rounded-l"
+        >
+          <div class="align-self-center">1</div>
+        </span>
+        <span class="ml-4">
+          <v-row>
+            <v-col
+              cols="12"
+              sm="12"
+              lg="8"
+            >
+              <h3>Install the BC Wallet app on your phone</h3>
+              <p class="mt-1">
+                <a
+                  href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet#get"
+                  target="_blank"
+                >BC Wallet<v-icon
+                  small
+                  color="primary"
+                >mdi-open-in-new</v-icon></a> is a digital identity wallet. It lets you receive, store and present
+                digital credentials such as memberships, permits, and ID cards.
+              </p>
+              <div>
+                <v-btn
+                  color="primary"
+                  href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet#get"
+                  target="_blank"
+                >Get the BC Wallet app
+                  <v-icon>mdi-chevron-right</v-icon>
+                </v-btn>
+              </div>
+              <p class="mt-4">
+                <a
+                  href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet/help"
+                  target="_blank"
+                >Help topics about using the BC Wallet app<v-icon
+                  small
+                  color="primary"
+                >mdi-open-in-new</v-icon></a>
+              </p>
+            </v-col>
+            <v-col>
+              <img
+                width="100%"
+                src="@/assets/images/bc_wallet_app_store.png"
+                :alt="imageAltText1"
+              >
+            </v-col>
+          </v-row>
+        </span>
+      </v-card-text>
+    </v-card>
+    <v-card class="mt-4">
+      <v-card-text class="d-flex">
+        <span
+          class="credentials-stepper-number ml-n4 my-n4 px-4
+                    font-weight-bold align-self-stretch d-flex rounded-l"
+        >
+          <div class="align-self-center">2</div>
+        </span>
+        <span class="ml-4">
+          <h3>Get your Digital Business Card</h3>
+          <v-row class="justify-center">
+            <v-col
+              cols="12"
+              lg="8"
+            >
+              <img
+                width="100%"
+                src="@/assets/images/business_card_issuance_steps.png"
+                :alt="imageAltText2"
+              >
+            </v-col>
+            <v-col cols="12">
+              <ol class="credentials-ordered-list">
+                <li><p>Open the BC Wallet app on your mobile phone, tap the "Scan" button.</p></li>
+                <li><p>Allow (if prompted) the app to access the camera as it is needed to scan the QR code.</p></li>
+                <li><p>Point your camera towards the QR code on the website. Once the scan is successful,
+                  you’ll receive a credential offer in BC Wallet over a secure connection from BC Registries.
+                </p></li>
+                <li><p>Open the credential offer and accept the credential.</p></li>
+              </ol>
+            </v-col>
+          </v-row>
+        </span>
+      </v-card-text>
+    </v-card>
+    <v-btn
+      id="hide-detail-steps-button"
+      class="mt-6"
+      color="primary"
+      @click.prevent="handleHideDetailSteps()"
+    >
+      Return to Simple Steps
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class CredentialsDetailSteps extends Vue {
+  imageAltText1 = 'Two mobile phones side by side showing the BC Wallet App in the app store.'
+  imageAltText2 = 'On the far left is a BC Wallet with a QR code sample and arrows between 3 mobile phones ' +
+  'showing the steps below.'
+
+  @Emit('onHideDetailSteps')
+  handleHideDetailSteps (): void {
+    return undefined
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/theme.scss";
+
+.credentials-stepper-number {
+  color: white;
+  background-color: $app-blue;
+}
+
+.credentials-ordered-list {
+    li::marker {
+      font-weight: bold;
+    }
+    li {
+      padding-left: $px-10;
+    }
+}
+</style>
diff --git a/src/components/DigitalCredentials/CredentialsSimpleSteps.vue b/src/components/DigitalCredentials/CredentialsSimpleSteps.vue
@@ -0,0 +1,101 @@
+<template>
+  <div id="credentials-simple-steps">
+    <v-card class="pa-3">
+      <v-card-text>
+        <h1>Steps to get your credential:</h1>
+        <v-card class="mt-6">
+          <v-card-text class="d-flex">
+            <span
+              class="credentials-stepper-number ml-n4 my-n4 px-8
+                    font-weight-bold align-self-stretch d-flex rounded-l"
+            >
+              <div class="align-self-center">1</div>
+            </span>
+            <span class="ml-8">
+              Have the
+              <a
+                href="https://www2.gov.bc.ca/gov/content/governments/government-id/bc-wallet"
+                target="_blank"
+              >
+                BC Wallet app<v-icon
+                  small
+                  color="primary"
+                >mdi-open-in-new</v-icon></a>
+              installed on your mobile phone.
+            </span>
+          </v-card-text>
+        </v-card>
+        <v-card class="mt-2">
+          <v-card-text class="d-flex">
+            <span
+              class="credentials-stepper-number ml-n4 my-n4 px-8
+                    font-weight-bold align-self-stretch d-flex rounded-l"
+            >
+              <div class="align-self-center">2</div>
+            </span>
+            <span class="ml-8">
+              Scan the QR code with your BC Wallet to get your Digital Business Card and accept it in your BC
+              Wallet app.
+            </span>
+          </v-card-text>
+        </v-card>
+        <v-card class="mt-2">
+          <v-card-text class="d-flex">
+            <span
+              class="credentials-stepper-number ml-n4 my-n4 px-8
+                    font-weight-bold align-self-stretch d-flex rounded-l"
+            >
+              <div class="align-self-center">3</div>
+            </span>
+            <span class="ml-8">
+              Check your Digital Business Cards on the
+              <router-link to="/digital-credentials">credential dashboard</router-link>.
+            </span>
+          </v-card-text>
+        </v-card>
+      </v-card-text>
+      <v-card-text class="mt-n2">
+        <a
+          href="#"
+          @click.prevent="handleShowDetailSteps()"
+        >Read detailed instructions</a>
+      </v-card-text>
+    </v-card>
+
+    <v-btn
+      id="return-to-company-dashboard-button"
+      color="primary"
+      class="mt-6"
+      @click="handleGoToCredentialsDashboard()"
+    >
+      Return to Company Dashboard
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class CredentialSimpleSteps extends Vue {
+  @Emit('onGoToCredentialsDashboard')
+  handleGoToCredentialsDashboard (): void {
+    return undefined
+  }
+
+  @Emit('onShowDetailSteps')
+  handleShowDetailSteps (): void {
+    return undefined
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/theme.scss";
+
+.credentials-stepper-number {
+  color: white;
+  background-color: $app-blue;
+}
+</style>