Add subscription alert detail page

src/App/routes/index.tsx

@@ -71,6 +71,20 @@ const mySubscription = customWrapRoute({
     },
 });
 
+const subscriptionDetail = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscriptions/:subscriptionId',
+    component: {
+        render: () => import('#views/MySubscription/SubscriptionDetail'),
+        props: {},
+    },
+    context: {
+        title: 'Subscription Detail',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
 const homeIndex = customWrapRoute({
     parent: homeLayout,
     index: true,
@@ -275,6 +289,7 @@ const wrappedRoutes = {
     mySubscription,
     cookiePolicy,
     historicalAlerts,
+    subscriptionDetail,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

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,131 @@
+import { useCallback } from 'react';
+import {
+    Container,
+    DateInput,
+    List,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+
+import Page from '#components/Page';
+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';
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const subscriptionAndAlertDetail: SubscriptionAndAlertDetail[] = [
+        {
+            id: '1',
+            alertFilter: ['Future', 'Severe', 'Nepal'],
+            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 alertInfo: 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 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={() => { }}
+                        />
+                    </>
+                )}
+            >
+                <div className={styles.badgeContainer}>
+                    {subscriptionAndAlertDetail?.map((filter) => (
+                        <div
+                            key={filter.id}
+                            className={styles.badge}
+                        >
+                            {filter.alertFilter}
+                        </div>
+                    ))}
+                </div>
+                <List
+                    className={styles.alertItem}
+                    data={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,25 @@
+.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);
+
+            .badge {
+                border-radius: 1em;
+                background-color: var(--go-ui-color-gray-20);
+                padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-sm);
+            }
+        }
+
+        .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"
+    }
+}

src/views/MySubscription/SubscriptionTableItem/index.tsx

@@ -1,14 +1,18 @@
 import { Container } from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
 
+import Link from '#components/Link';
 import {
     AlertInfoCertaintyEnum,
     AlertInfoSeverityEnum,
     AlertInfoUrgencyEnum,
 } from '#generated/types/graphql';
 
+import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 interface Props {
+    id: string;
     country: string | undefined;
     admin1: string | undefined;
     urgency?: AlertInfoUrgencyEnum[] | undefined;
@@ -21,6 +25,7 @@ interface Props {
 
 function SubscriptionTableItem(props: Props) {
     const {
+        id,
         country,
         admin1,
         urgency,
@@ -31,8 +36,11 @@ function SubscriptionTableItem(props: Props) {
         actions,
     } = props;
 
+    const strings = useTranslation(i18n);
+
     return (
         <Container
+            key={id}
             className={styles.subscriptionDetail}
             heading={title}
             headingLevel={4}
@@ -44,15 +52,27 @@ function SubscriptionTableItem(props: Props) {
                     {actions}
                 </>
             )}
+            footerContentClassName={styles.alertDetail}
             footerContent={(
                 <>
-                    {country}
-                    {admin1}
-                    {urgency}
-                    {certainty}
-                    {severity}
+                    <div>{country}</div>
+                    <div>{admin1}</div>
+                    <div>{urgency}</div>
+                    <div>{certainty}</div>
+                    <div>{severity}</div>
                 </>
             )}
+            footerActions={(
+                <Link
+                    to="subscriptionDetail"
+                    urlParams={{
+                        subscriptionId: id,
+                    }}
+                    variant="secondary"
+                >
+                    {strings.subscriptionItemView}
+                </Link>
+            )}
         />
     );
 }