feat: added push notification screen in onboarding and settings (open…

…wallet-foundation#1111)

Signed-off-by: wadeking98 <[email protected]>

packages/legacy/core/App/contexts/configuration.tsx

@@ -1,3 +1,4 @@
+import { Agent } from '@aries-framework/core'
 import { IndyVdrPoolConfig } from '@aries-framework/indy-vdr'
 import { ProofRequestTemplate } from '@hyperledger/aries-bifold-verifier'
 import { OCABundleResolverType } from '@hyperledger/aries-oca/build/legacy'
@@ -22,6 +23,15 @@ interface NotificationConfiguration {
   pageTitle: string
 }
 
+interface PushNotificationConfiguration {
+  // function to get the current push notification permission status
+  status: () => Promise<'denied' | 'granted' | 'unknown'>
+  // function to request permission for push notifications
+  setup: () => Promise<'denied' | 'granted' | 'unknown'>
+  //function to call when the user changes the push notification setting
+  toggle: (state: boolean, agent: Agent<any>) => Promise<void>
+}
+
 export interface ConfigurationContext {
   pages: typeof OnboardingPages
   splash: React.FC
@@ -51,6 +61,7 @@ export interface ConfigurationContext {
   showPreface?: boolean
   disableOnboardingSkip?: boolean
   useBiometry: React.FC
+  enablePushNotifications?: PushNotificationConfiguration
   useCustomNotifications: () => { total: number; notifications: any }
   useAttestation?: () => { start: () => void; stop: () => void; loading: boolean }
   whereToUseWalletUrl: string

packages/legacy/core/App/contexts/reducers/store.ts

@@ -39,6 +39,7 @@ enum LoginAttemptDispatchAction {
 enum PreferencesDispatchAction {
   ENABLE_DEVELOPER_MODE = 'preferences/enableDeveloperMode',
   USE_BIOMETRY = 'preferences/useBiometry',
+  USE_PUSH_NOTIFICATIONS = 'preferences/usePushNotifications',
   PREFERENCES_UPDATED = 'preferences/preferencesStateLoaded',
   USE_VERIFIER_CAPABILITY = 'preferences/useVerifierCapability',
   USE_CONNECTION_INVITER_CAPABILITY = 'preferences/useConnectionInviterCapability',
@@ -129,6 +130,27 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
 
       return newState
     }
+    case PreferencesDispatchAction.USE_PUSH_NOTIFICATIONS: {
+      const choice = (action?.payload ?? []).pop() ?? false
+      const preferences = {
+        ...state.preferences,
+        usePushNotifications: choice,
+      }
+      const onboarding = {
+        ...state.onboarding,
+        didConsiderPushNotifications: true,
+      }
+      const newState = {
+        ...state,
+        onboarding,
+        preferences,
+      }
+
+      AsyncStorage.setItem(LocalStorageKeys.Onboarding, JSON.stringify(onboarding))
+      AsyncStorage.setItem(LocalStorageKeys.Preferences, JSON.stringify(preferences))
+
+      return newState
+    }
     case PreferencesDispatchAction.USE_VERIFIER_CAPABILITY: {
       const choice = (action?.payload ?? []).pop() ?? false
       const preferences = {

packages/legacy/core/App/contexts/store.tsx

@@ -18,6 +18,7 @@ export const defaultState: State = {
     didAgreeToTerms: false,
     didCompleteTutorial: false,
     didCreatePIN: false,
+    didConsiderPushNotifications: false,
     didConsiderBiometry: false,
     didNameWallet: false,
   },
@@ -40,6 +41,7 @@ export const defaultState: State = {
     developerModeEnabled: false,
     biometryPreferencesUpdated: false,
     useBiometry: false,
+    usePushNotifications: false,
     useVerifierCapability: false,
     useConnectionInviterCapability: false,
     useDevVerifierTemplates: false,

packages/legacy/core/App/localization/en/index.ts

@@ -297,6 +297,22 @@ const translation = {
     "IssuedBy": "Issued by",
     "Credential": "credential"
   },
+  "PushNotifications": {
+    "EnableNotifiactions": "Enable Notifications to get instant alerts",
+    "BeNotified": "Be notified when you receive:",
+    "ReceiveNotifications": "Receive notifications",
+    "BulletFour": "new messages",
+    "BulletOne": "new credential offers",
+    "BulletThree": "updates to your credentials",
+    "BulletTwo": "new proof requests",
+    "NotificationsOffMessage": "Be notified when you receive new credential offers, proof requests, updates to your credentials, new messages and more.",
+    "NotificationsOffTitle": "Notifications for Bifold are turned off",
+    "NotificationsInstructionTitle": "To enable notifications:",
+    "InstructionsOne": "Open the app's settings",
+    "InstructionsTwo": "Tap Notifications",
+    "InstructionsThree": "Enable notifications",
+    "OpenSettigns": "Open settings",
+  },
   "CredentialDetails": {
     "Id": "Id:",
     "CreatedAt": "Created At:",
@@ -491,7 +507,8 @@ const translation = {
     "ScanMyQR": "Scan my QR code",
     "Help": "Help",
     "MoreInformation": "More information",
-    "Developer": "Developer options"
+    "Developer": "Developer options",
+    "Notifications": "Notifications",
   },
   "TabStack": {
     "Home": "Notifications",
@@ -557,6 +574,7 @@ const translation = {
     "OnTheWay": 'On The Way',
     "Declined": 'Declined',
     "UseBiometry": 'Use Biometry',
+    "UsePushNotifications": 'Use Push Notifications',
     "CustomNotification": 'Custom Notification',
     "ProofRequesting": 'Proof Requesting',
     "NameWallet": "Name your wallet",

packages/legacy/core/App/localization/fr/index.ts

@@ -296,6 +296,22 @@ const translation = {
         "IssuedBy": "Issued by (FR)",
         "Credential": "credential (FR)"
     },
+    "PushNotifications": {
+        "EnableNotifiactions": "Enable Notifications to get instant alerts (FR)",
+        "BeNotified": "Be notified when you receive: (FR)",
+        "ReceiveNotifications": "Receive notifications (FR)",
+        "BulletFour": "new messages (FR)",
+        "BulletOne": "new credential offers (FR)",
+        "BulletThree": "updates to your credentials (FR)",
+        "BulletTwo": "new proof requests (FR)",
+        "NotificationsOffMessage": "Be notified when you receive new credential offers, proof requests, updates to your credentials, new messages and more. (FR)",
+        "NotificationsOffTitle": "Notifications for Bifold are turned off (FR)",
+        "NotificationsInstructionTitle": "To enable notifications: (FR)",
+        "InstructionsOne": "Open the app's settings (FR)",
+        "InstructionsTwo": "Tap Notifications (FR)",
+        "InstructionsThree": "Enable notifications (FR)",
+        "OpenSettigns": "Open settings (FR)",
+    },
     "CredentialDetails": {
         "Id": "Identifiant :",
         "CreatedAt": "Créé à :",
@@ -354,7 +370,7 @@ const translation = {
         "ScanOnySpecial": "Only special QR codes can be scanned by Bifold Wallet. (FR)",
         "ScanOnlySpecial2": "These are presented by participating services or people to receive a credential offer, request for information or to connect. (FR)",
         "ScanOnlySpecial3": "Bifold Wallet currently doesn't support adding digital credential by scanning or taking photos of physical ones. (FR)",
-        "WhereToUseLink": "See where you can use Bifold Wallet (FR)",    
+        "WhereToUseLink": "See where you can use Bifold Wallet (FR)",
         "BadQRCode": "QR Code Not Recognized (FR)",
         "BadQRCodeDescription": "Ths QR code scanned doesn't work with Bifold Wallet. Bifold Wallet only works with participating services.\n\nIt currently can't add digital credentials by taking photos of physical ones. (FR)",
     },

packages/legacy/core/App/localization/pt-br/index.ts

@@ -279,6 +279,22 @@ const translation = {
     "IssuedBy": "Emitida por",
     "Credential": "credencial"
   },
+  "PushNotifications": {
+    "EnableNotifiactions": "Enable Notifications to get instant alerts (PT-BR)",
+    "BeNotified": "Be notified when you receive: (PT-BR)",
+    "ReceiveNotifications": "Receive notifications (PT-BR)",
+    "BulletFour": "new messages (PT-BR)",
+    "BulletOne": "new credential offers (PT-BR)",
+    "BulletThree": "updates to your credentials (PT-BR)",
+    "BulletTwo": "new proof requests (PT-BR)",
+    "NotificationsOffMessage": "Be notified when you receive new credential offers, proof requests, updates to your credentials, new messages and more. (PT-BR)",
+    "NotificationsOffTitle": "Notifications for Bifold are turned off (PT-BR)",
+    "NotificationsInstructionTitle": "To enable notifications: (PT-BR)",
+    "InstructionsOne": "Open the app's settings (PT-BR)",
+    "InstructionsTwo": "Tap Notifications (PT-BR)",
+    "InstructionsThree": "Enable notifications (PT-BR)",
+    "OpenSettigns": "Open settings (PT-BR)",
+  },
   "CredentialDetails": {
     "Id": "Id:",
     "CreatedAt": "Criada em:",

packages/legacy/core/App/navigators/OnboardingStack.tsx

@@ -18,6 +18,7 @@ import { useTheme } from '../contexts/theme'
 import NameWallet from '../screens/NameWallet'
 import { createCarouselStyle } from '../screens/OnboardingPages'
 import PINCreate from '../screens/PINCreate'
+import PushNotification from '../screens/PushNotification'
 import { AuthenticateStackParams, Screens } from '../types/navigators'
 import { testIdWithKey } from '../utils/testable'
 
@@ -150,6 +151,17 @@ const OnboardingStack: React.FC = () => {
       }),
       component: useBiometry,
     },
+    {
+      name: Screens.UsePushNotifications,
+      options: () => ({
+        title: t('Screens.UsePushNotifications'),
+        headerTintColor: OnboardingTheme.headerTintColor,
+        headerShown: true,
+        headerLeft: () => false,
+        rightLeft: () => false,
+      }),
+      component: PushNotification,
+    },
     {
       name: Screens.Developer,
       component: Developer,

packages/legacy/core/App/navigators/RootStack.tsx

@@ -46,8 +46,14 @@ const RootStack: React.FC = () => {
   const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
   const theme = useTheme()
   const defaultStackOptions = createDefaultStackOptions(theme)
-  const { splash, showPreface, enableImplicitInvitations, enableReuseConnections, enableUseMultUseInvitation } =
-    useConfiguration()
+  const {
+    splash,
+    showPreface,
+    enableImplicitInvitations,
+    enableReuseConnections,
+    enableUseMultUseInvitation,
+    enablePushNotifications,
+  } = useConfiguration()
   const container = useContainer()
   const OnboardingStack = container.resolve(TOKENS.STACK_ONBOARDING)
   useDeepLinks()
@@ -268,6 +274,7 @@ const RootStack: React.FC = () => {
     state.onboarding.didCompleteTutorial &&
     state.onboarding.didCreatePIN &&
     (!state.preferences.enableWalletNaming || state.onboarding.didNameWallet) &&
+    (state.onboarding.didConsiderPushNotifications || !enablePushNotifications) &&
     state.onboarding.didConsiderBiometry
   ) {
     return state.authentication.didAuthenticate ? mainStack() : authStack()

packages/legacy/core/App/navigators/SettingStack.tsx

@@ -12,6 +12,7 @@ import NameWallet from '../screens/NameWallet'
 import Onboarding from '../screens/Onboarding'
 import { createCarouselStyle } from '../screens/OnboardingPages'
 import PINCreate from '../screens/PINCreate'
+import PushNotification from '../screens/PushNotification'
 import Settings from '../screens/Settings'
 import Tours from '../screens/Tours'
 import UseBiometry from '../screens/UseBiometry'
@@ -81,6 +82,11 @@ const SettingStack: React.FC = () => {
         component={PINCreate}
         options={{ title: t('Screens.ChangePIN'), headerBackTestID: testIdWithKey('Back') }}
       />
+      <Stack.Screen
+        name={Screens.UsePushNotifications}
+        component={PushNotification}
+        options={{ title: t('Screens.UsePushNotifications'), headerBackTestID: testIdWithKey('Back') }}
+      />
       <Stack.Screen
         name={Screens.Terms}
         component={terms}

packages/legacy/core/App/screens/PINCreate.tsx

@@ -62,7 +62,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, route }) => {
   const navigation = useNavigation<StackNavigationProp<AuthenticateStackParams>>()
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { PINSecurity } = useConfiguration()
+  const { PINSecurity, enablePushNotifications } = useConfiguration()
 
   const [PINOneValidations, setPINOneValidations] = useState<PINValidationsType[]>(
     PINCreationValidations(PIN, PINSecurity.rules)
@@ -101,8 +101,14 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, route }) => {
         type: DispatchAction.DID_CREATE_PIN,
       })
 
-      // TODO: Navigate back if in settings
-      if (store.preferences.enableWalletNaming) {
+      if (enablePushNotifications) {
+        navigation.dispatch(
+          CommonActions.reset({
+            index: 0,
+            routes: [{ name: Screens.UsePushNotifications }],
+          })
+        )
+      } else if (store.preferences.enableWalletNaming) {
         navigation.dispatch(
           CommonActions.reset({
             index: 0,