apply i18n

packages/app/resource/locales/en_US/translation.json

@@ -261,7 +261,8 @@
     "see_all": "See All",
     "no_notification": "You don't have any notificatios.",
     "all": "All",
-    "unopend": "Unread"
+    "unopend": "Unread",
+    "mark_all_as_read": "Mark all as read"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "In-App Notification Settings",

packages/app/resource/locales/ja_JP/translation.json

@@ -263,7 +263,8 @@
     "see_all": "通知一覧を見る",
     "no_notification": "通知は一つもありません。",
     "all": "全て",
-    "unopend": "未読"
+    "unopend": "未読",
+    "mark_all_as_read": "全て既読にする"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "アプリ内通知設定",

packages/app/resource/locales/zh_CN/translation.json

@@ -242,7 +242,8 @@
     "see_all": "查看通知列表",
     "no_notification": "您没有任何通知",
     "all": "全部",
-    "unopend": "未读"
+    "unopend": "未读",
+    "mark_all_as_read" : "标记为已读"
   },
   "in_app_notification_settings": {
     "in_app_notification_settings": "在应用程序通知设置",

packages/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -47,6 +47,31 @@ const InAppNotificationPage: FC = () => {
     );
   };
 
+  const UnReadInAppNotificationList = () => {
+    return (
+      <>
+        <div className="mb-2">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            // onClick={}
+          >
+            {t('in_app_notification.mark_all_as_read')}
+          </button>
+        </div>
+        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
+        <PaginationWrapper
+          activePage={activePage}
+          changePage={setPageNumber}
+          totalItemsCount={inAppNotificationData.totalDocs}
+          pagingLimit={inAppNotificationData.limit}
+          align="center"
+          size="sm"
+        />
+      </>
+    );
+  };
+
   const navTabMapping = {
     user_infomation: {
       Icon: () => <></>,
@@ -57,7 +82,7 @@ const InAppNotificationPage: FC = () => {
     // TODO: show unopend notification list by 81945
     external_accounts: {
       Icon: () => <></>,
-      Content: AllInAppNotificationList,
+      Content: UnReadInAppNotificationList,
       i18n: t('in_app_notification.unopend'),
       index: 1,
     },