chore: update migration guides for Analytics, InApp Messaging and Push Notifications

src/directory/directory.mjs

@@ -436,7 +436,10 @@ export const directory = {
                 },
                 {
                   path: 'src/pages/[platform]/build-a-backend/push-notifications/set-up-push-service/index.mdx'
-                }
+                },
+                {
+                  path: 'src/pages/[platform]/build-a-backend/push-notifications/push-notifications-migration-guide/index.mdx'
+                },
               ]
             },
             {
@@ -533,6 +536,9 @@ export const directory = {
                     {
                       path: 'src/pages/[platform]/build-a-backend/more-features/analytics/sdk/index.mdx'
                     },
+                    {
+                      path: 'src/pages/[platform]/build-a-backend/more-features/analytics/analytics-migration-guide/index.mdx'
+                    },
                     {
                       path: 'src/pages/[platform]/build-a-backend/auth/app-uninstall/index.mdx'
                     }
@@ -652,7 +658,10 @@ export const directory = {
                     },
                     {
                       path: 'src/pages/[platform]/build-a-backend/more-features/in-app-messaging/resolve-conflicts/index.mdx'
-                    }
+                    },
+                    {
+                      path: 'src/pages/[platform]/build-a-backend/more-features/in-app-messaging/in-app-messaging-migration-guide/index.mdx'
+                    },
                   ]
                 },
                 {

src/fragments/lib/push-notifications/react-native/interact_with_notifications/on-background-notification.mdx

@@ -8,8 +8,8 @@
 // Example index.js
 import {
   initializePushNotifications,
-  onNotificationReceivedInForeground,
-  OnNotificationReceivedInForegroundInput
+  onNotificationReceivedInBackground,
+  OnNotificationReceivedInBackgroundInput
 } from 'aws-amplify/push-notifications';
 
 // ...
@@ -18,7 +18,7 @@ Amplify.configure(config);
 initializePushNotifications();
 
 // Note: This handler does not *need* to be async, but it can be!
-const myAsyncNotificationReceivedHandler: OnNotificationReceivedInForegroundInput = async (
+const myAsyncNotificationReceivedHandler: OnNotificationReceivedInBackgroundInput = async (
   notification
 ) => {
   // Process the received push notification message in the background

src/fragments/lib/troubleshooting/common/upgrading.mdx

@@ -99,7 +99,8 @@ Note that v6 supports react-native v0.70+, so if you prefer manually upgrading d
 
 If you are using `signInWithRedirect` (previously `Auth.federatedSignIn`) you will need to install the `@aws-amplify/rtn-web-browser` native module.
 
-If you are using Push Notifications, you will need to upgrade the `@aws-amplify/rtn-push-notification` native module to v1.2+ (if you were using push notifications in v5, this dependency should already be added)
+If you are using Push Notifications, you will need to upgrade the `@aws-amplify/rtn-push-notification` native module to v1.2+ (if you were using push notifications in v5, this dependency should already be added). Find all Push Notifications API changes in its [migration guide](/[platform]/build-a-backend/push-notifications/push-notifications-migration-guide/)
+
 
 </Callout>
 
@@ -334,6 +335,8 @@ configureAutoTrack({
 
 For a deeper look at V6 Analytics functionality, check out our [Analytics category documentation](/[platform]/build-a-backend/more-features/analytics/).
 
+Find all API changes in the Analytics [migration guide](/[platform]/build-a-backend/more-features/analytics/analytics-migration-guide/)
+
 </Accordion>
 
 <Accordion title='API (GraphQL)' headingLevel='4'>
@@ -565,6 +568,8 @@ const sendEvent = (eventName: string) => {
 
 For a deeper look at In App Messaging functionality in v6, check out our [In App Messaging category documentation](/[platform]/build-a-backend/more-features/in-app-messaging/).
 
+Find all API changes in the In App Messaging [migration guide](/[platform]/build-a-backend/more-features/in-app-messaging/in-app-messaging-migration-guide/)
+
 </Accordion>
 
 <Accordion title='Interactions' headingLevel='4'>

src/pages/[platform]/build-a-backend/more-features/analytics/analytics-migration-guide/index.mdx

@@ -0,0 +1,137 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Migrate from v5 to v6',
+  description: 'Learn more about the migration steps to upgrade Analytics APIs for Amplify JavaScript v5 to v6',
+  platforms: [
+    'javascript',
+    'react-native',
+    'angular',
+    'nextjs',
+    'react',
+    'vue'
+  ]
+};
+
+export const getStaticPaths = async () => {
+  return getCustomStaticPath(meta.platforms);
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      platform: context.params.platform,
+      meta
+    }
+  };
+}
+
+## Record and Configuration APIs
+
+As of v6 of Amplify JavaScript, you will now import the functional API’s directly from the `aws-amplify/analytics` path as shown below. 
+
+Note: Red lines of code are v5 and Green lines are v6.
+
+```diff
+- import { Analytics } from 'aws-amplify';
++ import { enable, disable, record, configureAutoTrack } from 'aws-amplify/analytics';
+
+- Analytics.disable();
++ disable();
+
+- Analytics.enable();
++ enable();
+
+- Analytics.record({
+-   name: 'albumVisit',
+-   attributes: {},
+-   metrics: { minutesListened: 30 }
+- });
+
++ record({
++   event: {
++     name: 'albumVisit',
++     attributes: { genre: '', artist: '' }
++   }
++ });
+
+- Analytics.autoTrack('session', {
+-   // REQUIRED, turn on/off the auto tracking
+-   enable: true,
+-   // OPTIONAL, the attributes of the event, you can either pass an object or a function
+-   // which allows you to define dynamic attributes
+-   attributes: {
+-     attr: 'attr'
+-   },
+-   // OPTIONAL, the service provider, by default is the Amazon Pinpoint
+-   provider: 'AWSPinpoint'
+- });
+
++ configureAutoTrack({
++   // REQUIRED, turn on/off the auto tracking
++   enable: true,
++   // REQUIRED, the event type, it's one of 'event', 'pageView' or 'session'
++   type: 'session',
++   // OPTIONAL, additional options for the tracked event.
++   options: {
++     // OPTIONAL, the attributes of the event
++     attributes: {
++       customizableField: 'attr'
++     }
++   }
++ });
+```
+## Analytics.identifyUser
+
+You can identify an Analytics user with the `identifyUser` API, 
+
+```ts
+import { identifyUser } from 'aws-amplify/analytics';
+
+identifyUser({
+  userId: "<user-id>", // If the user was signed in through Amplify Auth's signIn method you can retrieve the current user's ID from there.
+  userProfile
+});
+
+```
+## Streaming data
+You can stream analytics data to Kinesis. To configure Kinesis with Amplify, reference the [Installation and Configuration](https://docs.amplify.aws/react/build-a-backend/more-features/analytics/streaming-data/#installation-and-configuration) section of the documentation. Below is an example on how to stream data and flush events,
+
+```ts
+import { record, flushEvents } from 'aws-amplify/analytics/kinesis';
+
+record({
+  data: {
+    // The data blob to put into the record
+  },
+  partitionKey: 'myPartitionKey',
+  streamName: 'myKinesisStream'
+});
+
+flushEvents();
+```
+Finally, let's look at the difference in how to personalize recommendations,
+
+```diff
+- import { Analytics, AmazonPersonalizeProvider } from 'aws-amplify';
+- Analytics.addPluggable(new AmazonPersonalizeProvider());
+
++ import { record } from 'aws-amplify/analytics/personalize';
+
+
+- Analytics.record({
+-     eventType: "Identify",
+-     properties: {
+-         "userId": "<USER_ID>"
+-     }
+- }, 'AmazonPersonalize');
+
++ record({
++   eventType: "Identify",
++   properties: {
++      userId: "<USER_ID>"
++   }
++ });
+
+```
+Notice that in v5, the `Analytics.record` API takes in a second parameter with the string value `AmazonPersonalize` whereas in v6, the `record` function is imported from the `aws-amplify/analytics/personalize` subpath and takes only one parameter. 

src/pages/[platform]/build-a-backend/more-features/in-app-messaging/in-app-messaging-migration-guide/index.mdx

@@ -0,0 +1,156 @@
+import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
+
+export const meta = {
+  title: 'Migrate from v5 to v6',
+  description: 'Learn more about the migration steps to upgrade In-app messaging APIs for Amplify JavaScript v5 to v6',
+  platforms: ['javascript', 'react-native', 'angular', 'nextjs', 'react', 'vue']
+};
+
+export const getStaticPaths = async () => {
+  return getCustomStaticPath(meta.platforms);
+};
+
+export function getStaticProps(context) {
+  return {
+    props: {
+      platform: context.params.platform,
+      meta
+    }
+  };
+}
+
+## Initialization and syncing messages
+
+As of v6 of Amplify JavaScript, you will now import the functional API’s directly from the `aws-amplify/in-app-messaging` path as shown below. 
+
+Note: Red lines of code are v5 and Green lines are v6.
+
+```diff
+- import { Notifications } from 'aws-amplify';
+
++ import {
++   initializeInAppMessaging,
++   syncMessages,
++   setConflictHandler
++ } from 'aws-amplify/in-app-messaging';
+
+- const { InAppMessaging } = Notifications;
++ initializeInAppMessaging();
+
+- InAppMessaging.syncMessages();
++ syncMessages();
+- InAppMessaging.setConflictHandler(myConflictHandler);
++ setConflictHandler(myConflictHandler);
+
+```
+
+## Dispatch event and clear messages
+
+```diff
+- import { Notifications } from 'aws-amplify';
+
++ import {
++   dispatchEvent,
++   initializeInAppMessaging,
++   clearMessages,
++ } from 'aws-amplify/in-app-messaging';
+
+- const { InAppMessaging } = Notifications;
++ initializeInAppMessaging();
+
+const sendEvent = (eventName: string) => {
+-   InAppMessaging.dispatchEvent({ name: eventName });
++   dispatchEvent({ name: eventName });
+}
+
+- await InAppMessaging.clearMessages();
++ await clearMessages();
+
+```
+
+## IdentifyUser
+
+The input format of the `identifyUser` has changed slightly. The below table shows the differences in the input type.
+
+| Difference | v5 | v6 |
+| ---- | ---- | ----------- |
+| API input | Two separate parameters -- `userId`, `userInfo` | Single object containing `userId`, `userProfile`, `options` |
+| `attributes` property | `attributes` under `userInfo` | changed to `customProperties` under `userProfile` |
+| `userAttributes` property | NA | `userAttributes` under `options` |
+| convenience properties | NA | `name`, `email`, `plan` under `userProfile` |
+
+```diff
+import { identifyUser } from 'aws-amplify/in-app-messaging';
+
+- const userInfo = {
+-   address: '' // E.g. A device token or email address
+-   optOut: ''  // Either ALL or NONE
+- };
+
++ const identifyUserInput = {
++   userId: '', // E.g. user-id
++   userProfile: {
++     email: '', // E.g. example@service.com
++     name: '', // E.g. name-of-the-user
++     plan: '' // E.g. plan-they-subscribe-to
++     customProperties: {
++       // E.g. hobbies: ['cooking', 'knitting'],
++     },
++   },
++   options: {
++     address: '' // E.g. A device token or email address
++     optOut: ''  // Either ALL or NONE
++     userAttributes: {
++       // E.g. interests: ['soccer', 'shoes'],
++     }
++   },
++ };
+
+- await InAppMessaging.identifyUser('some-user-id', userInfo);
++ await identifyUser(identifyUserInput);
+
+```
+
+# Handling Interaction events
+
+```diff
+- import { Notifications } from 'aws-amplify';
+
++ import {
++   initializeInAppMessaging,
++   onMessageReceived,
++   onMessageDisplayed,
++   onMessageDismissed,
++   onMessageActionTaken,
++ } from 'aws-amplify/in-app-messaging';
+
+- const { InAppMessaging } = Notifications;
+- InAppMessaging.syncMessages();
+
++ initializeInAppMessaging();
+
+const myMessageReceivedHandler = (message) => {
+  // Do something with the received message
+};
+const myMessageDisplayedHandler = (message) => {
+  // Do something with the displayed message
+};
+const myMessageDismissedHandler = (message) => {
+  // Do something with the dismissed message
+};
+const myMessageActionTakenHandler = (message) => {
+  // Do something with the message action was taken against
+};
+
+- InAppMessaging.onMessageReceived(myMessageReceivedHandler);
++ onMessageReceived(myMessageReceivedHandler);
+
+- InAppMessaging.onMessageDisplayed(myMessageDisplayedHandler);
++ onMessageDisplayed(myMessageDisplayedHandler);
+
+- InAppMessaging.onMessageDismissed(myMessageDismissedHandler);
++ onMessageDismissed(myMessageDismissedHandler);
+
+- InAppMessaging.onMessageActionTaken(myMessageActionTakenHandler);
++ onMessageActionTaken(myMessageActionTakenHandler);
+```