feat: update and add to in app tours (#1353)

Signed-off-by: Bryce McMath <[email protected]>
bcgov · Aug 16, 2023 · 5331f9f · 5331f9f
1 parent a58dbc3
commit 5331f9f
Show file tree

Hide file tree

Showing 16 changed files with 227 additions and 24 deletions.
diff --git a/.sonarcloud.properties b/.sonarcloud.properties
@@ -4,7 +4,7 @@
 
 # Path to sources
 sonar.sources=.
-sonar.exclusions=**/localization/**/index.ts
+sonar.exclusions=**/CredentialOfferTourSteps.tsx,**/CredentialsTourSteps.tsx,**/HomeTourSteps.tsx,**/ProofRequestTourSteps.tsx,**/localization/**/index.ts
 #sonar.inclusions=
 
 # Path to tests
@@ -16,4 +16,4 @@ sonar.exclusions=**/localization/**/index.ts
 #sonar.sourceEncoding=UTF-8
 
 # Exclusions for copy-paste detection
-sonar.cpd.exclusions=**/HomeTourSteps.tsx,**/request-templates.ts
+sonar.cpd.exclusions=**/request-templates.ts
diff --git a/app/App.tsx b/app/App.tsx
@@ -25,7 +25,10 @@ import SplashScreen from 'react-native-splash-screen'
 import Toast from 'react-native-toast-message'
 
 import bcwallet from './src'
+import { credentialOfferTourSteps } from './src/components/tours/CredentialOfferTourSteps'
+import { credentialsTourSteps } from './src/components/tours/CredentialsTourSteps'
 import { homeTourSteps } from './src/components/tours/HomeTourSteps'
+import { proofRequestTourSteps } from './src/components/tours/ProofRequestTourSteps'
 import { surveyMonkeyUrl, surveyMonkeyExitUrl } from './src/constants'
 import WebDisplay from './src/screens/WebDisplay'
 import { initialState, reducer } from './src/store'
@@ -125,7 +128,14 @@ const App = () => {
                   visible={surveyVisible}
                   onClose={toggleSurveyVisibility}
                 />
-                <TourProvider steps={homeTourSteps} overlayColor={'black'} overlayOpacity={0.6}>
+                <TourProvider
+                  homeTourSteps={homeTourSteps}
+                  credentialsTourSteps={credentialsTourSteps}
+                  credentialOfferTourSteps={credentialOfferTourSteps}
+                  proofRequestTourSteps={proofRequestTourSteps}
+                  overlayColor={'gray'}
+                  overlayOpacity={0.7}
+                >
                   <RootStack />
                 </TourProvider>
                 <Toast topOffset={15} config={toastConfig} />

diff --git a/app/ios/Podfile.lock b/app/ios/Podfile.lock
@@ -652,4 +652,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4266f539fd5c242abd4005c88814b151329c70f6
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1
diff --git a/app/src/assets/img/credential-offer-illustration.png b/app/src/assets/img/credential-offer-illustration.png
diff --git a/app/src/assets/img/notifications-screencap.png b/app/src/assets/img/notifications-screencap.png
diff --git a/app/src/assets/img/proof-request-illustration.png b/app/src/assets/img/proof-request-illustration.png
diff --git a/app/src/components/tours/CredentialOfferTourSteps.tsx b/app/src/components/tours/CredentialOfferTourSteps.tsx
@@ -0,0 +1,51 @@
+import { useTheme, TourStep, TourBox } from 'aries-bifold'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, Text } from 'react-native'
+
+import useTourImageDimensions from '../../hooks/tour-image-dimensions'
+
+export const credentialOfferTourSteps: TourStep[] = [
+  {
+    render: (props) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
+
+      return (
+        <TourBox
+          title={t('Tour.CredentialOffers')}
+          hideLeft
+          rightText={t('Tour.Done')}
+          onRight={stop}
+          currentTour={currentTour}
+          currentStep={currentStep}
+          previous={previous}
+          stop={stop}
+          next={next}
+        >
+          <Image
+            source={require('../../assets/img/credential-offer-illustration.png')}
+            resizeMode={'contain'}
+            resizeMethod={'resize'}
+            style={{
+              alignSelf: 'center',
+              width: imageWidth,
+              height: imageHeight,
+            }}
+          />
+          <Text
+            style={{
+              ...TextTheme.normal,
+              color: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.CredentialOffersDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]
diff --git a/app/src/components/tours/CredentialsTourSteps.tsx b/app/src/components/tours/CredentialsTourSteps.tsx
@@ -0,0 +1,51 @@
+import { useTheme, TourStep, TourBox } from 'aries-bifold'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, Text } from 'react-native'
+
+import useTourImageDimensions from '../../hooks/tour-image-dimensions'
+
+export const credentialsTourSteps: TourStep[] = [
+  {
+    render: (props) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
+
+      return (
+        <TourBox
+          title={t('Tour.AddCredentials')}
+          hideLeft
+          rightText={t('Tour.Done')}
+          onRight={stop}
+          currentTour={currentTour}
+          currentStep={currentStep}
+          previous={previous}
+          stop={stop}
+          next={next}
+        >
+          <Image
+            source={require('../../assets/img/mobile-phone-scanning-laptop.jpg')}
+            resizeMode={'contain'}
+            resizeMethod={'resize'}
+            style={{
+              alignSelf: 'center',
+              width: imageWidth,
+              height: imageHeight,
+            }}
+          />
+          <Text
+            style={{
+              ...TextTheme.normal,
+              color: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.AddCredentialsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]
diff --git a/app/src/components/tours/HomeTourSteps.tsx b/app/src/components/tours/HomeTourSteps.tsx
@@ -1,24 +1,17 @@
 import { useTheme, TourStep, TourBox } from 'aries-bifold'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Image, Text, useWindowDimensions } from 'react-native'
+import { Image, Text } from 'react-native'
 
-const calculateImageDimensions = () => {
-  const { width: windowWidth } = useWindowDimensions() // NOSONAR
-  const totalHorizontalImagePadding = 90
-  const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding)
-  const imageHeight = Math.floor(imageWidth * 0.66)
-
-  return { imageWidth, imageHeight }
-}
+import useTourImageDimensions from '../../hooks/tour-image-dimensions'
 
 export const homeTourSteps: TourStep[] = [
   {
     render: (props) => {
-      const { current, next, stop, previous } = props
+      const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
-      const { imageWidth, imageHeight } = calculateImageDimensions()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
 
       return (
         <TourBox
@@ -27,7 +20,8 @@ export const homeTourSteps: TourStep[] = [
           rightText={t('Tour.Next')}
           onLeft={stop}
           onRight={next}
-          current={current}
+          currentTour={currentTour}
+          currentStep={currentStep}
           previous={previous}
           stop={stop}
           next={next}
@@ -49,6 +43,7 @@ export const homeTourSteps: TourStep[] = [
               ...TextTheme.normal,
               color: ColorPallet.notification.infoText,
             }}
+            allowFontScaling={false}
           >
             {t('Tour.AddAndShareDescription')}
           </Text>
@@ -58,9 +53,10 @@ export const homeTourSteps: TourStep[] = [
   },
   {
     render: (props) => {
-      const { current, next, stop, previous } = props
+      const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
 
       return (
         <TourBox
@@ -69,18 +65,30 @@ export const homeTourSteps: TourStep[] = [
           rightText={t('Tour.Next')}
           onLeft={previous}
           onRight={next}
-          current={current}
+          currentTour={currentTour}
+          currentStep={currentStep}
           next={next}
           stop={stop}
           previous={previous}
           stepOn={2}
           stepsOutOf={3}
         >
+          <Image
+            source={require('../../assets/img/notifications-screencap.png')}
+            resizeMode={'contain'}
+            resizeMethod={'resize'}
+            style={{
+              alignSelf: 'center',
+              width: imageWidth,
+              height: imageHeight,
+            }}
+          />
           <Text
             style={{
               ...TextTheme.normal,
               color: ColorPallet.notification.infoText,
             }}
+            allowFontScaling={false}
           >
             {t('Tour.NotificationsDescription')}
           </Text>
@@ -90,10 +98,10 @@ export const homeTourSteps: TourStep[] = [
   },
   {
     render: (props) => {
-      const { current, next, stop, previous } = props
+      const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
       const { ColorPallet, TextTheme } = useTheme()
-      const { imageWidth, imageHeight } = calculateImageDimensions()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
 
       return (
         <TourBox
@@ -102,7 +110,8 @@ export const homeTourSteps: TourStep[] = [
           rightText={t('Tour.Done')}
           onLeft={previous}
           onRight={stop}
-          current={current}
+          currentTour={currentTour}
+          currentStep={currentStep}
           next={next}
           stop={stop}
           previous={previous}
@@ -124,6 +133,7 @@ export const homeTourSteps: TourStep[] = [
               ...TextTheme.normal,
               color: ColorPallet.notification.infoText,
             }}
+            allowFontScaling={false}
           >
             {t('Tour.YourCredentialsDescription')}
           </Text>

diff --git a/app/src/components/tours/ProofRequestTourSteps.tsx b/app/src/components/tours/ProofRequestTourSteps.tsx
@@ -0,0 +1,51 @@
+import { useTheme, TourStep, TourBox } from 'aries-bifold'
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Image, Text } from 'react-native'
+
+import useTourImageDimensions from '../../hooks/tour-image-dimensions'
+
+export const proofRequestTourSteps: TourStep[] = [
+  {
+    render: (props) => {
+      const { currentTour, currentStep, next, stop, previous } = props
+      const { t } = useTranslation()
+      const { ColorPallet, TextTheme } = useTheme()
+      const { imageWidth, imageHeight } = useTourImageDimensions()
+
+      return (
+        <TourBox
+          title={t('Tour.ProofRequests')}
+          hideLeft
+          rightText={t('Tour.Done')}
+          onRight={stop}
+          currentTour={currentTour}
+          currentStep={currentStep}
+          previous={previous}
+          stop={stop}
+          next={next}
+        >
+          <Image
+            source={require('../../assets/img/proof-request-illustration.png')}
+            resizeMode={'contain'}
+            resizeMethod={'resize'}
+            style={{
+              alignSelf: 'center',
+              width: imageWidth,
+              height: imageHeight,
+            }}
+          />
+          <Text
+            style={{
+              ...TextTheme.normal,
+              color: ColorPallet.notification.infoText,
+            }}
+            allowFontScaling={false}
+          >
+            {t('Tour.ProofRequestsDescription')}
+          </Text>
+        </TourBox>
+      )
+    },
+  },
+]
diff --git a/app/src/hooks/tour-image-dimensions.ts b/app/src/hooks/tour-image-dimensions.ts
@@ -0,0 +1,12 @@
+import { useWindowDimensions } from 'react-native'
+
+const useTourImageDimensions = () => {
+  const { width: windowWidth } = useWindowDimensions() // NOSONAR
+  const totalHorizontalImagePadding = 90
+  const imageWidth = Math.floor(windowWidth - totalHorizontalImagePadding)
+  const imageHeight = Math.floor(imageWidth * 0.66)
+
+  return { imageWidth, imageHeight }
+}
+
+export default useTourImageDimensions
diff --git a/app/src/localization/en/index.ts b/app/src/localization/en/index.ts
@@ -84,10 +84,16 @@ const translation = {
     "DoNotUseAppGuides": "Don't use app guides",
     "AddAndShare": "Add and share credentials",
     "AddAndShareDescription": "To add and use credentials you scan a QR code displayed by the service provider.",
+    "AddCredentials": "Add credentials",
+    "AddCredentialsDescription": "Add credentials by scanning a QR code displayed on the issuer service.",
     "Notifications": "Notifications",
     "NotificationsDescription": "After you scan a QR code, the credential offer or proof request will appear here, as well as other notable events.",
     "YourCredentials": "Your credentials",
     "YourCredentialsDescription": "Your added digital credentials appear here. You can review credential details and add and delete credentials.",
+    "CredentialOffers": "Credential offers",
+    "CredentialOffersDescription": "An organization has offered you a credential. Review the credentials details and choose to accept or decline it. Accepted credentials will be added to your wallet.",
+    "ProofRequests": "Proof requests",
+    "ProofRequestsDescription": "An organization is asking you to prove your credentials. Review what they're asking for and choose to accept or decline it.",
     "Skip": "Skip",
     "Next": "Next",
     "Back": "Back",

diff --git a/app/src/localization/fr/index.ts b/app/src/localization/fr/index.ts
@@ -83,10 +83,16 @@ const translation = {
     "DoNotUseAppGuides": "Don't use app guides (FR)",
     "AddAndShare": "Add and share credentials (FR)",
     "AddAndShareDescription": "To add and use credentials you scan a QR code displayed by the service provider. (FR)",
+    "AddCredentials": "Add credentials (FR)",
+    "AddCredentialsDescription": "Add credentials by scanning a QR code displayed on the issuer service. (FR)",
     "Notifications": "Notifications (FR)",
     "NotificationsDescription": "After you scan a QR code, the credential offer or proof request will appear here, as well as other notable events. (FR)",
     "YourCredentials": "Your credentials (FR)",
     "YourCredentialsDescription": "Your added digital credentials appear here. You can review credential details and add and delete credentials. (FR)",
+    "CredentialOffers": "Credential offers (FR)",
+    "CredentialOffersDescription": "An organization has offered you a credential. Review the credentials details and choose to accept or decline it. Accepted credentials will be added to your wallet. (FR)",
+    "ProofRequests": "Proof requests (FR)",
+    "ProofRequestsDescription": "An organization is asking you to prove your credentials. Review what they're asking for and choose to accept or decline it. (FR)",
     "Skip": "Skip (FR)",
     "Next": "Next (FR)",
     "Back": "Back (FR)",

diff --git a/app/src/localization/pt-br/index.ts b/app/src/localization/pt-br/index.ts
@@ -83,10 +83,16 @@ const translation = {
     "DoNotUseAppGuides": "Don't use app guides (PT-BR)",
     "AddAndShare": "Add and share credentials (PT-BR)",
     "AddAndShareDescription": "To add and use credentials you scan a QR code displayed by the service provider. (PT-BR)",
+    "AddCredentials": "Add credentials (PT-BR)",
+    "AddCredentialsDescription": "Add credentials by scanning a QR code displayed on the issuer service. (PT-BR)",
     "Notifications": "Notifications (PT-BR)",
     "NotificationsDescription": "After you scan a QR code, the credential offer or proof request will appear here, as well as other notable events. (PT-BR)",
     "YourCredentials": "Your credentials (PT-BR)",
     "YourCredentialsDescription": "Your added digital credentials appear here. You can review credential details and add and delete credentials. (PT-BR)",
+    "CredentialOffers": "Credential offers (PT-BR)",
+    "CredentialOffersDescription": "An organization has offered you a credential. Review the credentials details and choose to accept or decline it. Accepted credentials will be added to your wallet. (PT-BR)",
+    "ProofRequests": "Proof requests (PT-BR)",
+    "ProofRequestsDescription": "An organization is asking you to prove your credentials. Review what they're asking for and choose to accept or decline it. (PT-BR)",
     "Skip": "Skip (PT-BR)",
     "Next": "Next (PT-BR)",
     "Back": "Back (PT-BR)",