Merge pull request #4709 from weseek/imprv/81890-added-a-mark-all-as-read-button

Imprv/81890 added a mark all as read button

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

@@ -31,6 +31,7 @@ const InAppNotificationPage: FC = () => {
     setOffset(offset);
   };
 
+  // commonize notification lists by 81953
   const AllInAppNotificationList = () => {
     return (
       <>
@@ -47,6 +48,34 @@ const InAppNotificationPage: FC = () => {
     );
   };
 
+  // commonize notification lists by 81953
+  const UnopenedInAppNotificationList = () => {
+    return (
+      <>
+        <div className="mb-2 d-flex justify-content-end">
+          <button
+            type="button"
+            className="btn btn-outline-primary"
+            // TODO: set "UNOPENED" notification status "OPEND" by 81951
+            // onClick={}
+          >
+            {t('in_app_notification.mark_all_as_read')}
+          </button>
+        </div>
+        {/*  TODO: show only unopened notifications by 81945 */}
+        <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 +86,7 @@ const InAppNotificationPage: FC = () => {
     // TODO: show unopend notification list by 81945
     external_accounts: {
       Icon: () => <></>,
-      Content: AllInAppNotificationList,
+      Content: UnopenedInAppNotificationList,
       i18n: t('in_app_notification.unopend'),
       index: 1,
     },