Add subscription alert detail page

src/App/routes/index.tsx

@@ -54,8 +54,20 @@ const mySubscription = customWrapRoute({
     wrapperComponent: Auth,
     context: {
         title: 'My Subscriptions',
-        // TODO: Change visibility after login feature
-        visibility: 'anything',
+        visibility: 'is-authenticated',
+    },
+});
+
+const subscriptionDetail = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscriptions/:subscriptionId',
+    component: {
+        render: () => import('#views/MySubscription/SubscriptionDetail'),
+        props: {},
+    },
+    context: {
+        title: 'Subscription Detail',
+        visibility: 'is-authenticated',
     },
 });
 
@@ -277,6 +289,7 @@ const wrappedRoutes = {
     mySubscription,
     cookiePolicy,
     historicalAlerts,
+    subscriptionDetail,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/components/Badge/index.tsx

@@ -0,0 +1,21 @@
+import { Container } from '@ifrc-go/ui';
+
+import styles from './styles.module.css';
+
+interface Props {
+    title: string;
+}
+
+function Badge(props: Props) {
+    const {
+        title,
+    } = props;
+
+    return (
+        <Container className={styles.badge}>
+            {title}
+        </Container>
+    );
+}
+
+export default Badge;

src/components/Badge/styles.module.css

@@ -0,0 +1,6 @@
+.badge {
+    display: flex;
+    border-radius: 1em;
+    background-color: var(--go-ui-color-gray-20);
+    padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-sm);
+}

src/views/MySubscription/ActiveTableActions/index.tsx

@@ -1,4 +1,9 @@
-import { MoreOptionsIcon } from '@ifrc-go/icons';
+import {
+    DeleteBinSixLineIcon,
+    EditTwoLineIcon,
+    LayoutBottomLineIcon,
+    MoreOptionsIcon,
+} from '@ifrc-go/icons';
 import { DropdownMenu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -19,19 +24,22 @@ function ActiveTableActions() {
                 type="button"
                 name="archive"
                 onClick={undefined}
+                icons={<LayoutBottomLineIcon />}
             >
                 {strings.archiveSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
                 type="button"
                 name="edit"
+                icons={<EditTwoLineIcon />}
             >
                 {strings.editSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
                 type="button"
                 name="delete"
                 onClick={undefined}
+                icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscription/ArchiveTableActions/index.tsx

@@ -1,4 +1,8 @@
-import { MoreOptionsIcon } from '@ifrc-go/icons';
+import {
+    DeleteBinSixLineIcon,
+    LayoutBottomLineIcon,
+    MoreOptionsIcon,
+} from '@ifrc-go/icons';
 import { DropdownMenu } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 
@@ -18,13 +22,15 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="unArchive"
+                icons={<LayoutBottomLineIcon />}
             >
                 {strings.unarchiveSubscriptionActions}
             </DropdownMenuItem>
             <DropdownMenuItem
                 type="button"
                 name="delete"
                 onClick={undefined}
+                icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
             </DropdownMenuItem>

src/views/MySubscription/SubscriptionDetail/AlertInfoItem/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "alertInfo",
+    "strings": {
+        "alertInfoView": "View"
+    }
+}

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

@@ -0,0 +1,43 @@
+import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Link from '#components/Link';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface Props {
+    alertId: string;
+    alertTitle: string;
+    alertDescription?: string;
+}
+
+function AlertInfoItem(props: Props) {
+    const strings = useTranslation(i18n);
+
+    const {
+        alertId,
+        alertTitle,
+        alertDescription,
+    } = props;
+
+    return (
+        <Container
+            className={styles.alertDetail}
+            heading={alertTitle}
+            headingLevel={4}
+            actions={(
+                <Link
+                    to="alertDetails"
+                    urlParams={{ alertId }}
+                    variant="secondary"
+                >
+                    {strings.alertInfoView}
+                </Link>
+            )}
+            footerContent={alertDescription}
+        />
+    );
+}
+
+export default AlertInfoItem;

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

@@ -0,0 +1,4 @@
+.alert-detail {
+    background-color: var(--go-ui-color-gray-20);
+    padding: var(--go-ui-spacing-md);
+}

src/views/MySubscription/SubscriptionDetail/i18n.json

@@ -0,0 +1,9 @@
+{
+    "namespace": "subscriptionDetail",
+    "strings": {
+        "subscriptionDetailTitle": "Subscription Detail",
+        "subscriptionHeading": "Subscription",
+        "filterStartDateFrom": "Start date from",
+        "filterStartDateTo": "Start date To"
+    }
+}

src/views/MySubscription/SubscriptionDetail/index.tsx

@@ -0,0 +1,140 @@
+import { useCallback } from 'react';
+import {
+    Container,
+    DateInput,
+    List,
+    Pager,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Badge from '#components/Badge';
+import Page from '#components/Page';
+import { AlertFilter } from '#generated/types/graphql';
+import useFilterState from '#hooks/useFilterState';
+import { stringIdSelector } from '#utils/selectors';
+
+import {
+    AlertInfo,
+    SubscriptionAndAlertDetail,
+} from '../common';
+import AlertInfoItem from './AlertInfoItem';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const PAGE_SIZE = 20;
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const subscriptionAndAlertsDetail: SubscriptionAndAlertDetail = {
+        id: '1',
+        alertFilters: ['Future', 'Severe', 'Nepal', 'Bagmati'],
+        alertInfo: [
+            {
+                id: '1',
+                alertId: '101',
+                alertTitle: 'Flood Alert',
+                alertDescription: 'Severe flooding expected in the coastal region.',
+            },
+            {
+                id: '2',
+                alertId: '102',
+                alertTitle: 'Heatwave Warning',
+                alertDescription: 'Extreme heatwave affecting northern regions.',
+            },
+            {
+                id: '3',
+                alertId: '103',
+                alertTitle: 'Earthquake Advisory',
+                alertDescription: 'Possible aftershocks in the affected areas.',
+            },
+        ],
+    };
+
+    const {
+        // limit,
+        page,
+        setPage,
+        // filter,
+        // setFilter,
+        // offset,
+    } = useFilterState<AlertFilter>({
+        pageSize: PAGE_SIZE,
+        filter: {},
+    });
+
+    const subscriptionKeySelector = (filter: string) => filter;
+
+    const subscriptionRendererParams = useCallback((_: string, value: string) => ({
+        title: value,
+    }), []);
+
+    const rendererParams = useCallback((_: string, value: AlertInfo) => ({
+        alertId: value.alertId,
+        alertTitle: value.alertTitle,
+        alertDescription: value?.alertDescription,
+    }), []);
+
+    return (
+        <Page
+            className={styles.subscriptionDetail}
+            title={strings.subscriptionDetailTitle}
+            // TODO: Add subscription heading and description
+            heading={strings.subscriptionHeading}
+        >
+            <Container
+                childrenContainerClassName={styles.alertFilters}
+                withGridViewInFilter
+                filters={(
+                    <>
+                        <DateInput
+                            name="startDateFrom"
+                            label={strings.filterStartDateFrom}
+                            value={undefined}
+                            onChange={() => { }}
+                        />
+                        <DateInput
+                            name="startDateTo"
+                            label={strings.filterStartDateTo}
+                            value={undefined}
+                            onChange={() => { }}
+                        />
+                    </>
+                )}
+                footerActions={(
+                    <Pager
+                        activePage={page}
+                        itemsCount={50}
+                        maxItemsPerPage={PAGE_SIZE}
+                        onActivePageChange={setPage}
+                    />
+                )}
+            >
+                <List
+                    className={styles.badgeContainer}
+                    data={subscriptionAndAlertsDetail.alertFilters}
+                    keySelector={subscriptionKeySelector}
+                    renderer={Badge}
+                    rendererParams={subscriptionRendererParams}
+                    pending={false}
+                    errored={false}
+                    filtered={false}
+                />
+                <List
+                    className={styles.alertItem}
+                    data={subscriptionAndAlertsDetail.alertInfo}
+                    renderer={AlertInfoItem}
+                    rendererParams={rendererParams}
+                    keySelector={stringIdSelector}
+                    pending={false}
+                    errored={false}
+                    filtered={false}
+                />
+            </Container>
+        </Page>
+    );
+}
+
+Component.displayName = 'SubscriptionDetail';

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

@@ -0,0 +1,19 @@
+.subscription-detail {
+    .alert-filters {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-md);
+
+        .badge-container {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            min-height: 0%;
+        }
+
+        .alert-item {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+        }
+    }
+}

src/views/MySubscription/SubscriptionTableItem/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "subscriptionItem",
+    "strings": {
+        "subscriptionItemView": "View"
+    }
+}