Add my subscription page

src/App/routes/index.tsx

@@ -57,6 +57,20 @@ const homeLayout = customWrapRoute({
     },
 });
 
+const mySubscription = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscription',
+    component: {
+        render: () => import('#views/MySubscription'),
+        props: {},
+    },
+    context: {
+        title: 'My Subscription',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
 const homeIndex = customWrapRoute({
     parent: homeLayout,
     index: true,
@@ -74,6 +88,38 @@ const homeIndex = customWrapRoute({
     },
 });
 
+const historicalAlerts = customWrapRoute({
+    parent: homeLayout,
+    path: 'map' satisfies DefaultHomeChild,
+    component: {
+        render: () => import('#views/Home'),
+        props: {},
+    },
+    context: {
+        title: 'Historical Alerts',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
+const myPastAlerts = customWrapRoute({
+    parent: homeLayout,
+    index: true,
+    component: {
+        eagerLoad: true,
+        render: Navigate,
+        props: {
+            to: 'MySubscription',
+            replace: true,
+        },
+    },
+    context: {
+        title: 'My Past Alerts',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
 const homeMap = customWrapRoute({
     parent: homeLayout,
     path: 'map' satisfies DefaultHomeChild,
@@ -190,6 +236,9 @@ const wrappedRoutes = {
     allSourcesFeeds,
     about,
     pageNotFound,
+    historicalAlerts,
+    mySubscription,
+    myPastAlerts,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/components/Navbar/i18n.json

@@ -6,6 +6,8 @@
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
-        "headerMenuMySubscription": "My Subscription"
+        "headerMenuMySubscription": "My Subscription",
+        "headerMenuHistoricalAlerts": "Historical Alerts",
+        "headerMenuMyPastAlerts": "My Past Alerts"
     }
 }

src/components/Navbar/index.tsx

@@ -81,9 +81,15 @@ function Navbar(props: Props) {
                     >
                         {strings.headerMenuHome}
                     </NavigationTab>
+                    <NavigationTab
+                        to="mySubscription"
+                    >
+                        {strings.headerMenuMySubscription}
+                    </NavigationTab>
                 </NavigationTabList>
             </PageContainer>
         </nav>
     );
 }
+
 export default Navbar;

src/views/Home/AlertsMap/i18n.json

@@ -6,6 +6,7 @@
         "ongoingAlertCountries": "Ongoing Alert Countries",
         "backToAlertsLabel": "Back to Alerts",
         "alertViewDetails": "View Details",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }

src/views/Home/AlertsMap/index.tsx

@@ -7,7 +7,10 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    AddLineIcon,
+    ChevronRightLineIcon,
+} from '@ifrc-go/icons';
 import {
     Container,
     InfoPopup,
@@ -185,15 +188,26 @@ export function Component() {
             withHeaderBorder
             childrenContainerClassName={styles.mainContent}
             actions={(
-                <Link
-                    className={styles.sources}
-                    to="allSourcesFeeds"
-                    actions={(
-                        <ChevronRightLineIcon className={styles.icon} />
-                    )}
-                >
-                    {strings.mapViewAllSources}
-                </Link>
+                <div className={styles.links}>
+                    <Link
+                        className={styles.sources}
+                        to="mySubscription"
+                        actions={(
+                            <AddLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.alertNewSubscription}
+                    </Link>
+                    <Link
+                        className={styles.sources}
+                        to="allSourcesFeeds"
+                        actions={(
+                            <ChevronRightLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.mapViewAllSources}
+                    </Link>
+                </div>
             )}
             overlayPending
             pending={countryListLoading}

src/views/Home/AlertsMap/styles.module.css

@@ -36,16 +36,21 @@
         }
     }
 
-    .sources {
+    .links {
         display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: var(--go-ui-color-text);
-        font-weight: var(--go-ui-font-weight-medium);
-    }
-
-    .sources:hover {
-        text-decoration: underline;
-        color: var(--go-ui-color-primary-red);
+        gap: var(--go-ui-spacing-lg);
+
+        .sources {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: var(--go-ui-color-text);
+            font-weight: var(--go-ui-font-weight-medium);
+        }
+
+        .sources:hover {
+            text-decoration: underline;
+            color: var(--go-ui-color-primary-red);
+        }
     }
 }

src/views/Home/AlertsTable/i18n.json

@@ -10,6 +10,7 @@
         "alertTableAdminsTitle":"Admin1s",
         "alertTableSentLabel":"Sent",
         "tableViewAllSources": "View All Sources",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }

src/views/Home/AlertsTable/index.tsx

@@ -9,7 +9,10 @@ import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    AddLineIcon,
+    ChevronRightLineIcon,
+} from '@ifrc-go/icons';
 import {
     Container,
     DateOutput,
@@ -286,15 +289,26 @@ export function Component() {
             withHeaderBorder
             withGridViewInFilter
             actions={(
-                <Link
-                    className={styles.sources}
-                    to="allSourcesFeeds"
-                    actions={(
-                        <ChevronRightLineIcon className={styles.icon} />
-                    )}
-                >
-                    {strings.tableViewAllSources}
-                </Link>
+                <div className={styles.links}>
+                    <Link
+                        className={styles.sources}
+                        to="mySubscription"
+                        actions={(
+                            <AddLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.alertNewSubscription}
+                    </Link>
+                    <Link
+                        className={styles.sources}
+                        to="allSourcesFeeds"
+                        actions={(
+                            <ChevronRightLineIcon className={styles.icon} />
+                        )}
+                    >
+                        {strings.tableViewAllSources}
+                    </Link>
+                </div>
             )}
             overlayPending
             pending={alertInfoLoading}

src/views/MySubscription/ActiveSubscription/SubscriptionDetail/SubscriptionActions/i18n.json

@@ -0,0 +1,8 @@
+{
+    "namespace": "SubscriptionActions",
+    "strings": {
+        "archiveSubscriptionActions": "Archive",
+        "deleteSubscriptionActions": "Delete",
+        "editSubscriptionActions": "Edit"
+    }
+}

src/views/MySubscription/ActiveSubscription/SubscriptionDetail/SubscriptionActions/index.tsx

@@ -0,0 +1,50 @@
+import { MoreOptionsIcon } from '@ifrc-go/icons';
+import { DropdownMenu } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+
+interface Props {
+    onSubscriptionDelete: () => void;
+    onSubscriptionArchive: () => void;
+}
+
+function SubscriptionActions(props: Props) {
+    const {
+        onSubscriptionDelete,
+        onSubscriptionArchive,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    return (
+        <DropdownMenu
+            icons={<MoreOptionsIcon />}
+            variant="tertiary"
+            withoutDropdownIcon
+        >
+            <DropdownMenuItem
+                type="button"
+                name="archive"
+                onClick={onSubscriptionArchive}
+            >
+                {strings.archiveSubscriptionActions}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+                type="button"
+                name="edit"
+            >
+                {strings.editSubscriptionActions}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+                type="button"
+                name="delete"
+                onClick={onSubscriptionDelete}
+            >
+                {strings.deleteSubscriptionActions}
+            </DropdownMenuItem>
+        </DropdownMenu>
+    );
+}
+
+export default SubscriptionActions;

src/views/MySubscription/ActiveSubscription/SubscriptionDetail/index.tsx

@@ -0,0 +1,45 @@
+import { Container } from '@ifrc-go/ui';
+
+import SubscriptionActions from './SubscriptionActions';
+
+import styles from './styles.module.css';
+
+interface Props {
+    data: any;
+    onDelete: () => void;
+    onArchive: () => void;
+}
+
+function SubscriptionDetail(props: Props) {
+    const {
+        data,
+        onDelete,
+        onArchive,
+    } = props;
+
+    return (
+        <Container
+            className={styles.subscriptionDetail}
+        >
+            <div className={styles.subscriptionFilters}>
+                <div className={styles.alertName}>
+                    {data.alertName}
+                </div>
+                <div>
+                    (
+                    {data.totalAlertCount}
+                    )
+                    <SubscriptionActions
+                        onSubscriptionDelete={onDelete}
+                        onSubscriptionArchive={onArchive}
+                    />
+                </div>
+            </div>
+            <div className={styles.filterApplied}>
+                {data.filtersApplied}
+            </div>
+        </Container>
+    );
+}
+
+export default SubscriptionDetail;

src/views/MySubscription/ActiveSubscription/SubscriptionDetail/styles.module.css

@@ -0,0 +1,19 @@
+.subscription-detail {
+    padding: var(--go-ui-spacing-lg);
+    background-color: var(--go-ui-color-gray-20);
+
+    .subscription-filters {
+        display: flex;
+        gap: var(--go-ui-spacing-lg);
+        justify-content: space-between;
+
+        .alert-name {
+            font-weight: bold;
+        }
+    }
+
+    .filter-applied {
+        display: flex;
+        gap: var(--go-ui-spacing-lg);
+    }
+}