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

@@ -2,12 +2,16 @@ import {
     useContext,
     useEffect,
     useMemo,
+    useState,
 } from 'react';
 import {
     gql,
     useQuery,
 } from '@apollo/client';
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    AddLineIcon,
+    ChevronRightLineIcon,
+} from '@ifrc-go/icons';
 import {
     Container,
     InfoPopup,
@@ -29,6 +33,7 @@ import {
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
 
+import NewSubscriptionModal from '../../NewSubscriptionModal';
 import AlertDataContext from '../AlertDataContext';
 import AlertFilters from '../AlertFilters';
 import useAlertFilters from '../useAlertFilters';
@@ -77,6 +82,11 @@ type AlertPointProperties = {
 export function Component() {
     const strings = useTranslation(i18n);
     const alertFilters = useAlertFilters();
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    const openModal = () => setModalOpen(true);
+    const closeModal = () => setModalOpen(false);
+
     const {
         activeAdmin1Id,
         activeCountryId,
@@ -185,15 +195,29 @@ 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"
+                        onClick={openModal}
+                        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}
@@ -204,6 +228,11 @@ export function Component() {
             filters={<AlertFilters variant="map" />}
             withGridViewInFilter
         >
+            {isModalOpen && (
+                <NewSubscriptionModal
+                    onCloseModal={closeModal}
+                />
+            )}
             <Map
                 className={styles.alertsMap}
                 countriesWithAlert={countriesWithAlert}

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/Home/AlertsTable/styles.module.css

@@ -51,16 +51,21 @@
         font-weight: var(--go-ui-font-weight-medium);
     }
 
-    .sources {
+    .links {
         display: flex;
-        align-items: center;
-        text-decoration: none;
-        color: var(--go-ui-color-text);
-        font-weight: var(--go-ui-font-weight-medium);
-    }
+        gap: var(--go-ui-spacing-lg);
 
-    .sources:hover {
-        text-decoration: underline;
-        color: var(--go-ui-color-primary-red);
+        .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/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,52 @@
+import { MoreOptionsIcon } from '@ifrc-go/icons';
+import { DropdownMenu } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import DropdownMenuItem from '#components/DropdownMenuItem';
+
+import i18n from './i18n.json';
+
+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;