From 7b4bf02beebf28cf5a8f86d60e679ee3fb9fe381 Mon Sep 17 00:00:00 2001
From: barshathakuri <barshathakuri708@gmail.com>
Date: Fri, 22 Nov 2024 14:32:17 +0545
Subject: [PATCH] Subscription page integration

---
 package.json                                  |   2 +-
 src/components/Badge/index.tsx                |  21 -
 src/components/Badge/styles.module.css        |   6 -
 .../AlertInfo/AreaInfoDetail/index.tsx        |   1 -
 src/views/AllSourcesFeeds/index.tsx           |   1 -
 src/views/HistoricalAlerts/index.tsx          |  30 +-
 src/views/Home/AlertsMap/index.tsx            |  14 +-
 src/views/Home/AlertsTable/index.tsx          |  16 +-
 .../ActiveTableActions/index.tsx              |  19 +-
 .../ArchiveTableActions/index.tsx             |  15 +-
 .../AlertInfoItem/index.tsx                   |   2 +-
 .../SubscriptionDetail/index.tsx              | 261 ++++++++---
 .../SubscriptionDetail/styles.module.css      |   9 +-
 .../SubscriptionTableItem/index.tsx           |  94 ++--
 .../SubscriptionTableItem/styles.module.css   |   9 +-
 src/views/MySubscription/common.tsx           |  42 --
 src/views/MySubscription/index.tsx            | 414 +++++++++++++++---
 src/views/NewSubscriptionModal/index.tsx      | 278 ++++++++----
 yarn.lock                                     |  14 +-
 19 files changed, 883 insertions(+), 365 deletions(-)
 delete mode 100644 src/components/Badge/index.tsx
 delete mode 100644 src/components/Badge/styles.module.css
 delete mode 100644 src/views/MySubscription/common.tsx

diff --git a/package.json b/package.json
index 6b0f0406..ac4f2472 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@hcaptcha/react-hcaptcha": "^1.11.0",
     "@ifrc-go/icons": "^1.3.3",
-    "@ifrc-go/ui": "^1.1.2",
+    "@ifrc-go/ui": "^1.2.1",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@sentry/react": "^7.81.1",
diff --git a/src/components/Badge/index.tsx b/src/components/Badge/index.tsx
deleted file mode 100644
index 52ec6a8b..00000000
--- a/src/components/Badge/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-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;
diff --git a/src/components/Badge/styles.module.css b/src/components/Badge/styles.module.css
deleted file mode 100644
index 43bfb743..00000000
--- a/src/components/Badge/styles.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.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);
-}
diff --git a/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx b/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
index 18e5e7be..b958d8f0 100644
--- a/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
+++ b/src/views/AlertDetails/AlertInfo/AreaInfoDetail/index.tsx
@@ -236,7 +236,6 @@ function AreaInfoDetail(props: Props) {
                         onChange={setSelectedFeature}
                     />
                 )}
-                withGridViewInFilter
                 headingLevel={4}
             >
                 <div className={styles.map}>
diff --git a/src/views/AllSourcesFeeds/index.tsx b/src/views/AllSourcesFeeds/index.tsx
index f80cb43b..b10ca554 100644
--- a/src/views/AllSourcesFeeds/index.tsx
+++ b/src/views/AllSourcesFeeds/index.tsx
@@ -117,7 +117,6 @@ export function Component() {
             heading={strings.sourceFeedsTitle}
         >
             <Container
-                withGridViewInFilter
                 filters={(
                     <TextInput
                         placeholder={strings.searchSourcesPlaceholder}
diff --git a/src/views/HistoricalAlerts/index.tsx b/src/views/HistoricalAlerts/index.tsx
index 32dad1f6..7a3d4e20 100644
--- a/src/views/HistoricalAlerts/index.tsx
+++ b/src/views/HistoricalAlerts/index.tsx
@@ -39,10 +39,10 @@ import {
     AlertEnumsAndAllCountryListQueryVariables,
     AlertEnumsQuery,
     AlertFilter,
-    AlertInformationsQuery,
-    AlertInformationsQueryVariables,
     FilteredAdminListQuery,
     FilteredAdminListQueryVariables,
+    HistoricalAlertInformationsQuery,
+    HistoricalAlertInformationsQueryVariables,
     OffsetPaginationInput,
 } from '#generated/types/graphql';
 import useFilterState from '#hooks/useFilterState';
@@ -60,9 +60,8 @@ import styles from './styles.module.css';
 
 // TODO: Add Historical alert query here
 
-const ALERT_INFORMATIONS = gql`
-    query AlertInformations(
-        $order:AlertOrder,
+const HISTORICAL_ALERT_INFORMATIONS = gql`
+    query HistoricalAlertInformations(
         $pagination: OffsetPaginationInput,
         $filters: AlertFilter,
     ) {
@@ -71,7 +70,6 @@ const ALERT_INFORMATIONS = gql`
             alerts(
                 pagination: $pagination,
                 filters: $filters,
-                order:$order,
             ) {
                 limit
                 offset
@@ -156,7 +154,7 @@ type Severity = NonNullable<AlertEnumsQuery['enums']['AlertInfoSeverity']>[numbe
 type Certainty = NonNullable<AlertEnumsQuery['enums']['AlertInfoCertainty']>[number];
 type Category = NonNullable<AlertEnumsQuery['enums']['AlertInfoCategory']>[number];
 
-type AlertType = NonNullable<NonNullable<NonNullable<AlertInformationsQuery['public']>['alerts']>['items']>[number];
+type AlertType = NonNullable<NonNullable<NonNullable<HistoricalAlertInformationsQuery['public']>['alerts']>['items']>[number];
 type Admin1 = AlertType['admin1s'][number];
 
 const adminKeySelector = (admin1: AdminOption) => admin1.id;
@@ -168,8 +166,6 @@ const categoryKeySelector = (category: Category) => category.key;
 
 const alertKeySelector = (item: AlertType) => item.id;
 const PAGE_SIZE = 20;
-const ASC = 'ASC';
-const DESC = 'DESC';
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
@@ -190,21 +186,11 @@ export function Component() {
         filter: {},
     });
 
-    const order = useMemo(() => {
-        if (isNotDefined(sortState.sorting)) {
-            return undefined;
-        }
-        return {
-            [sortState.sorting.name]: sortState.sorting.direction === 'asc' ? ASC : DESC,
-        };
-    }, [sortState.sorting]);
-
     const variables = useMemo<{ filters: AlertFilter, pagination: OffsetPaginationInput }>(() => ({
         pagination: {
             offset,
             limit,
         },
-        order,
         filters: {
             urgency: filter.urgency,
             severity: filter.severity,
@@ -221,7 +207,6 @@ export function Component() {
             } : undefined,
         },
     }), [
-        order,
         limit,
         offset,
         filter,
@@ -232,8 +217,8 @@ export function Component() {
         previousData,
         data: alertInfosResponse = previousData,
         error: alertInfoError,
-    } = useQuery<AlertInformationsQuery, AlertInformationsQueryVariables>(
-        ALERT_INFORMATIONS,
+    } = useQuery<HistoricalAlertInformationsQuery, HistoricalAlertInformationsQueryVariables>(
+        HISTORICAL_ALERT_INFORMATIONS,
         {
             skip: isNotDefined(variables),
             variables,
@@ -374,7 +359,6 @@ export function Component() {
                 className={styles.alertsTable}
                 heading={heading}
                 withHeaderBorder
-                withGridViewInFilter
                 actions={(
                     <Link
                         className={styles.sources}
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
index 24bdabbe..e3a74d13 100644
--- a/src/views/Home/AlertsMap/index.tsx
+++ b/src/views/Home/AlertsMap/index.tsx
@@ -188,14 +188,11 @@ export function Component() {
     );
 
     const defaultSubscription = useMemo(() => ({
-        name: '',
-        alertFilters: {
-            urgency: selectedUrgencyTypes,
-            severity: selectedSeverityTypes,
-            certainty: selectedCertaintyTypes,
-            country: activeCountryId ?? '',
-            admin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-        },
+        filterAlertUrgencies: selectedUrgencyTypes,
+        filterAlertCertainties: selectedCertaintyTypes,
+        filterAlertSeverities: selectedSeverityTypes,
+        filterAlertCountry: activeCountryId || '',
+        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
     }), [
         selectedUrgencyTypes,
         selectedSeverityTypes,
@@ -251,7 +248,6 @@ export function Component() {
             contentViewType="grid"
             numPreferredGridContentColumns={3}
             filters={<AlertFilters variant="map" />}
-            withGridViewInFilter
         >
             {showSubscriptionModal && (
                 <NewSubscriptionModal
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
index 6b0ae9f2..3abb37bc 100644
--- a/src/views/Home/AlertsTable/index.tsx
+++ b/src/views/Home/AlertsTable/index.tsx
@@ -288,20 +288,21 @@ export function Component() {
     );
 
     const defaultSubscription = useMemo(() => ({
+        id: '',
         name: '',
-        alertFilters: {
-            urgency: selectedUrgencyTypes,
-            severity: selectedSeverityTypes,
-            certainty: selectedCertaintyTypes,
-            country: activeCountryId ?? '',
-            admin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
-        },
+        filterAlertUrgencies: selectedUrgencyTypes,
+        filterAlertCertainties: selectedCertaintyTypes,
+        filterAlertSeverities: selectedSeverityTypes,
+        filterAlertCategories: selectedCategoryTypes,
+        filterAlertCountry: activeCountryId || '',
+        filterAlertAdmin1s: activeAdmin1Id ? [activeAdmin1Id] : [],
     }), [
         selectedUrgencyTypes,
         selectedSeverityTypes,
         selectedCertaintyTypes,
         activeCountryId,
         activeAdmin1Id,
+        selectedCategoryTypes,
     ]);
 
     return (
@@ -317,7 +318,6 @@ export function Component() {
                 </div>
             )}
             withHeaderBorder
-            withGridViewInFilter
             actions={(
                 <div className={styles.links}>
                     <Button
diff --git a/src/views/MySubscription/ActiveTableActions/index.tsx b/src/views/MySubscription/ActiveTableActions/index.tsx
index 48feb20a..015c37a6 100644
--- a/src/views/MySubscription/ActiveTableActions/index.tsx
+++ b/src/views/MySubscription/ActiveTableActions/index.tsx
@@ -11,7 +11,19 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 
 import i18n from './i18n.json';
 
-function ActiveTableActions() {
+interface Props {
+    onSubscriptionRemove?: () => void;
+    onArchiveClick?: () => void;
+    onEditClick: () => void;
+}
+
+function ActiveTableActions(props: Props) {
+    const {
+        onSubscriptionRemove,
+        onArchiveClick,
+        onEditClick,
+    } = props;
+
     const strings = useTranslation(i18n);
 
     return (
@@ -23,7 +35,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="archive"
-                onClick={undefined}
+                onClick={onArchiveClick}
                 icons={<LayoutBottomLineIcon />}
             >
                 {strings.archiveSubscriptionActions}
@@ -31,6 +43,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="edit"
+                onClick={onEditClick}
                 icons={<EditTwoLineIcon />}
             >
                 {strings.editSubscriptionActions}
@@ -38,7 +51,7 @@ function ActiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="delete"
-                onClick={undefined}
+                onClick={onSubscriptionRemove}
                 icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
diff --git a/src/views/MySubscription/ArchiveTableActions/index.tsx b/src/views/MySubscription/ArchiveTableActions/index.tsx
index 667f7dd2..88e4ff6a 100644
--- a/src/views/MySubscription/ArchiveTableActions/index.tsx
+++ b/src/views/MySubscription/ArchiveTableActions/index.tsx
@@ -10,7 +10,17 @@ import DropdownMenuItem from '#components/DropdownMenuItem';
 
 import i18n from './i18n.json';
 
-function ArchiveTableActions() {
+interface Props {
+    onSubscriptionRemove?: () => void;
+    onUnArchive?: () => void;
+}
+
+function ArchiveTableActions(props: Props) {
+    const {
+        onSubscriptionRemove,
+        onUnArchive,
+    } = props;
+
     const strings = useTranslation(i18n);
 
     return (
@@ -22,6 +32,7 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="unArchive"
+                onClick={onUnArchive}
                 icons={<LayoutBottomLineIcon />}
             >
                 {strings.unarchiveSubscriptionActions}
@@ -29,7 +40,7 @@ function ArchiveTableActions() {
             <DropdownMenuItem
                 type="button"
                 name="delete"
-                onClick={undefined}
+                onClick={onSubscriptionRemove}
                 icons={<DeleteBinSixLineIcon />}
             >
                 {strings.deleteSubscriptionActions}
diff --git a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
index 495a396a..ec546bdd 100644
--- a/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
+++ b/src/views/MySubscription/SubscriptionDetail/AlertInfoItem/index.tsx
@@ -8,7 +8,7 @@ import styles from './styles.module.css';
 
 interface Props {
     alertId: string;
-    alertTitle: string;
+    alertTitle: string | undefined;
     alertDescription?: string;
 }
 
diff --git a/src/views/MySubscription/SubscriptionDetail/index.tsx b/src/views/MySubscription/SubscriptionDetail/index.tsx
index ec7feeaf..36e12814 100644
--- a/src/views/MySubscription/SubscriptionDetail/index.tsx
+++ b/src/views/MySubscription/SubscriptionDetail/index.tsx
@@ -1,22 +1,35 @@
-import { useCallback } from 'react';
 import {
+    useCallback,
+    useMemo,
+} from 'react';
+import { useParams } from 'react-router-dom';
+import {
+    gql,
+    useQuery,
+} from '@apollo/client';
+import {
+    Chip,
     Container,
     DateInput,
     List,
     Pager,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
-import Badge from '#components/Badge';
 import Page from '#components/Page';
-import { AlertFilter } from '#generated/types/graphql';
+import {
+    AlertFilter,
+    DetailsOfSubsQuery,
+    DetailsOfSubsQueryVariables,
+    UserAlertSubscriptionType,
+} 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';
@@ -24,57 +37,128 @@ import styles from './styles.module.css';
 
 const PAGE_SIZE = 20;
 
+const SUBSCRIPTION_ALERT_LIST = gql`
+    query DetailsOfSubs(
+        $pk: ID!,
+        $pagination: OffsetPaginationInput,
+        $filters: AlertFilter,
+    ) {
+        private {
+            userAlertSubscription(pk: $pk) {
+                alerts (
+                    pagination: $pagination,
+                    filters: $filters,
+                ){
+                    items {
+                        id
+                        info {
+                            event
+                            id
+                            description
+                        }
+                    }
+                    count
+                }
+                filterAlertUrgenciesDisplay
+                id
+                name
+                filterAlertUrgencies
+                filterAlertSeveritiesDisplay
+                filterAlertSeverities
+                filterAlertCountryDisplay {
+                    id
+                    name
+                }
+                filterAlertCountry
+                filterAlertCertaintiesDisplay
+                filterAlertCertainties
+                filterAlertCategoriesDisplay
+                filterAlertCategories
+                filterAlertAdmin1sDisplay {
+                    id
+                    name
+                }
+                filterAlertAdmin1s
+            }
+        }
+    }
+`;
+
+type AlertInfo = NonNullable<NonNullable<UserAlertSubscriptionType>['alerts']>['items'][number];
+
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const strings = useTranslation(i18n);
+    const { subscriptionId } = useParams();
 
-    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 strings = useTranslation(i18n);
 
     const {
-        // limit,
+        limit,
         page,
         setPage,
-        // filter,
-        // setFilter,
-        // offset,
-    } = useFilterState<AlertFilter>({
+        setFilterField,
+        offset,
+        rawFilter,
+    } = useFilterState<{
+        startDateAfter?: string,
+        startDateBefore?: string,
+    }>({
         pageSize: PAGE_SIZE,
         filter: {},
     });
 
-    const subscriptionKeySelector = (filter: string) => filter;
+    const variables = useMemo<DetailsOfSubsQueryVariables>(() => {
+        if (!subscriptionId) {
+            return {} as DetailsOfSubsQueryVariables;
+        }
 
-    const subscriptionRendererParams = useCallback((_: string, value: string) => ({
-        title: value,
-    }), []);
+        const filters: AlertFilter = {
+            sent: {
+                range: {
+                    start: rawFilter.startDateAfter,
+                    end: rawFilter.startDateBefore,
+                },
+            },
+        };
+
+        const finalFilters = (isDefined(rawFilter.startDateAfter)
+            || isDefined(rawFilter.startDateBefore)
+        ) ? filters : {};
+
+        return {
+            pk: subscriptionId,
+            pagination: {
+                offset,
+                limit,
+            },
+            filters: finalFilters,
+        };
+    }, [
+        subscriptionId,
+        limit,
+        offset,
+        rawFilter,
+    ]);
+
+    const {
+        previousData,
+        loading: alertLoading,
+        error: alertError,
+        data: alertSubscription = previousData,
+    } = useQuery<DetailsOfSubsQuery, DetailsOfSubsQueryVariables>(
+        SUBSCRIPTION_ALERT_LIST,
+        {
+            skip: isNotDefined(variables),
+            variables,
+        },
+    );
+
+    const alertsData = alertSubscription?.private?.userAlertSubscription;
 
     const rendererParams = useCallback((_: string, value: AlertInfo) => ({
-        alertId: value.alertId,
-        alertTitle: value.alertTitle,
-        alertDescription: value?.alertDescription,
+        alertId: value.id,
+        alertTitle: value.info?.event,
+        alertDescription: value.info?.description ?? undefined,
     }), []);
 
     return (
@@ -82,55 +166,100 @@ export function Component() {
             className={styles.subscriptionDetail}
             title={strings.subscriptionDetailTitle}
             // TODO: Add subscription heading and description
-            heading={strings.subscriptionHeading}
+            heading={alertSubscription?.private?.userAlertSubscription?.name}
         >
             <Container
                 childrenContainerClassName={styles.alertFilters}
-                withGridViewInFilter
                 filters={(
                     <>
                         <DateInput
-                            name="startDateFrom"
+                            name="startDateAfter"
                             label={strings.filterStartDateFrom}
-                            value={undefined}
-                            onChange={() => { }}
+                            onChange={setFilterField}
+                            value={rawFilter.startDateAfter}
                         />
                         <DateInput
-                            name="startDateTo"
+                            name="startDateBefore"
                             label={strings.filterStartDateTo}
-                            value={undefined}
-                            onChange={() => { }}
+                            onChange={setFilterField}
+                            value={rawFilter.startDateBefore}
                         />
                     </>
                 )}
                 footerActions={(
                     <Pager
                         activePage={page}
-                        itemsCount={50}
+                        itemsCount={alertsData?.alerts.count ?? 0}
                         maxItemsPerPage={PAGE_SIZE}
                         onActivePageChange={setPage}
                     />
                 )}
             >
-                <List
-                    className={styles.badgeContainer}
-                    data={subscriptionAndAlertsDetail.alertFilters}
-                    keySelector={subscriptionKeySelector}
-                    renderer={Badge}
-                    rendererParams={subscriptionRendererParams}
-                    pending={false}
-                    errored={false}
-                    filtered={false}
-                />
+                <div className={styles.filters}>
+                    {isDefined(alertsData?.filterAlertCountry)
+                        && alertsData?.filterAlertCountry && (
+                        <Chip
+                            name="country"
+                            label={alertsData.filterAlertCountry}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertAdmin1sDisplay)
+                        && alertsData.filterAlertAdmin1sDisplay?.map(
+                            (admin) => admin.name,
+                        ).length > 0 && (
+                        <Chip
+                            name="admin1"
+                            label={alertsData.filterAlertAdmin1sDisplay
+                                ?.map((admin) => admin.name)
+                                .join(', ')}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertUrgenciesDisplay)
+                        && alertsData.filterAlertUrgenciesDisplay?.length > 0 && (
+                        <Chip
+                            name="urgencies"
+                            label={alertsData.filterAlertUrgenciesDisplay.join(', ')}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertCertaintiesDisplay)
+                        && alertsData?.filterAlertCertaintiesDisplay.length > 0 && (
+                        <Chip
+                            name="certainties"
+                            label={alertsData.filterAlertCertaintiesDisplay.join(', ')}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertCategoriesDisplay)
+                        && alertsData?.filterAlertCategoriesDisplay.length > 0 && (
+                        <Chip
+                            name="categories"
+                            label={alertsData.filterAlertCategoriesDisplay.join(', ')}
+                            variant="tertiary"
+                        />
+                    )}
+                    {isDefined(alertsData?.filterAlertSeveritiesDisplay)
+                        && alertsData?.filterAlertSeveritiesDisplay.length > 0 && (
+                        <Chip
+                            name="severity"
+                            label={alertsData.filterAlertSeveritiesDisplay.join(', ')}
+                            variant="tertiary"
+                        />
+                    )}
+                </div>
                 <List
                     className={styles.alertItem}
-                    data={subscriptionAndAlertsDetail.alertInfo}
+                    data={alertsData?.alerts.items}
                     renderer={AlertInfoItem}
                     rendererParams={rendererParams}
                     keySelector={stringIdSelector}
-                    pending={false}
-                    errored={false}
+                    pending={alertLoading}
+                    errored={isDefined(alertError)}
                     filtered={false}
+                    // TODO: Add translations
+                    emptyMessage="Alerts not available!"
                 />
             </Container>
         </Page>
diff --git a/src/views/MySubscription/SubscriptionDetail/styles.module.css b/src/views/MySubscription/SubscriptionDetail/styles.module.css
index 0e8a8115..b24803bf 100644
--- a/src/views/MySubscription/SubscriptionDetail/styles.module.css
+++ b/src/views/MySubscription/SubscriptionDetail/styles.module.css
@@ -4,10 +4,15 @@
         flex-direction: column;
         gap: var(--go-ui-spacing-md);
 
-        .badge-container {
+        .filters {
             display: flex;
             gap: var(--go-ui-spacing-md);
-            min-height: 0%;
+
+            .badge-container {
+                display: flex;
+                gap: var(--go-ui-spacing-md);
+                min-height: 0%;
+            }
         }
 
         .alert-item {
diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx
index f6dd7565..03e3b37d 100644
--- a/src/views/MySubscription/SubscriptionTableItem/index.tsx
+++ b/src/views/MySubscription/SubscriptionTableItem/index.tsx
@@ -1,38 +1,38 @@
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    TextOutput,
+} 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;
-    certainty?: AlertInfoCertaintyEnum[] | undefined;
-    severity?: AlertInfoSeverityEnum[] | undefined;
-    title: string;
-    totalCount: number;
+    name: string;
+    alertCount: number;
+    filterAlertUrgencies: string[];
+    filterAlertCertainties: string[];
+    filterAlertSeverities: string[];
+    filterAlertCategories: string[];
+    filterAlertCountry: string;
+    filterAlertAdmin1s: string[];
     actions: React.ReactNode;
 }
 
 function SubscriptionTableItem(props: Props) {
     const {
         id,
-        country,
-        admin1,
-        urgency,
-        certainty,
-        severity,
-        title,
-        totalCount,
+        name,
+        alertCount,
+        filterAlertUrgencies,
+        filterAlertCategories,
+        filterAlertCertainties,
+        filterAlertSeverities,
+        filterAlertAdmin1s,
+        filterAlertCountry,
         actions,
     } = props;
 
@@ -42,12 +42,12 @@ function SubscriptionTableItem(props: Props) {
         <Container
             key={id}
             className={styles.subscriptionDetail}
-            heading={title}
-            headingLevel={4}
+            heading={name}
+            headingLevel={3}
             actions={(
                 <>
                     (
-                    {totalCount}
+                    {alertCount}
                     )
                     {actions}
                 </>
@@ -55,11 +55,49 @@ function SubscriptionTableItem(props: Props) {
             footerContentClassName={styles.alertDetail}
             footerContent={(
                 <>
-                    <div>{country}</div>
-                    <div>{admin1}</div>
-                    <div>{urgency}</div>
-                    <div>{certainty}</div>
-                    <div>{severity}</div>
+                    {/* // TODO: Add translation */}
+                    <TextOutput
+                        className={styles.label}
+                        label="Country"
+                        value={filterAlertCountry}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label="Admin1"
+                        value={filterAlertAdmin1s.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label="Urgency"
+                        value={filterAlertUrgencies.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label="Certainty"
+                        value={filterAlertCertainties.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label="Severity"
+                        value={filterAlertSeverities.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
+                    <TextOutput
+                        className={styles.label}
+                        label="Category"
+                        value={filterAlertCategories.join(', ')}
+                        strongLabel
+                        withoutLabelColon
+                    />
                 </>
             )}
             footerActions={(
diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
index 69194df0..696bca66 100644
--- a/src/views/MySubscription/SubscriptionTableItem/styles.module.css
+++ b/src/views/MySubscription/SubscriptionTableItem/styles.module.css
@@ -5,6 +5,11 @@
     .alertDetail {
         display: flex;
         flex-wrap: wrap;
-        gap: var(--go-ui-spacing-sm);
+        gap: var(--go-ui-spacing-xl);
     }
-}
+
+    .label {
+        display: flex;
+        flex-direction: column;
+    }
+}
\ No newline at end of file
diff --git a/src/views/MySubscription/common.tsx b/src/views/MySubscription/common.tsx
deleted file mode 100644
index 72e1e6fd..00000000
--- a/src/views/MySubscription/common.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import {
-    AlertInfoCertaintyEnum,
-    AlertInfoSeverityEnum,
-    AlertInfoUrgencyEnum,
-} from '#generated/types/graphql';
-
-export interface FrequencyOption {
-    label: string;
-    key: 'daily' | 'weekly';
-}
-
-export interface AlertFilters {
-    id: string;
-    filters: string[];
-}
-
-export interface AlertInfo {
-    id: string;
-    alertId: string;
-    alertTitle: string;
-    alertDescription?: string;
-}
-
-export interface SubscriptionAndAlertDetail {
-    id: string;
-    alertFilters: string[];
-    alertInfo?: AlertInfo[] | undefined;
-}
-
-// TODO: Add subscription interface from  generated
-export interface SubscriptionDetail {
-    id: string;
-    title: string;
-    country: string | undefined;
-    admin1: string | undefined;
-    urgency?: AlertInfoUrgencyEnum[] | undefined;
-    certainty?: AlertInfoCertaintyEnum[] | undefined;
-    severity?: AlertInfoSeverityEnum[] | undefined;
-    totalCount?: number;
-    sendEmail?: boolean;
-    frequency?: 'daily' | 'weekly' | undefined;
-}
diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx
index 07c0376f..2e3ad12c 100644
--- a/src/views/MySubscription/index.tsx
+++ b/src/views/MySubscription/index.tsx
@@ -1,12 +1,19 @@
 import {
     useCallback,
+    useMemo,
     useState,
 } from 'react';
+import {
+    gql,
+    useMutation,
+    useQuery,
+} from '@apollo/client';
 import { AddLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
     List,
+    Pager,
     Tab,
     TabList,
     TabPanel,
@@ -16,78 +23,372 @@ import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
 
 import Page from '#components/Page';
+import {
+    AlertFilter,
+    AlertSubscriptionsQuery,
+    AlertSubscriptionsQueryVariables,
+    ArchiveUnArchiveSubscriptionMutation,
+    ArchiveUnArchiveSubscriptionMutationVariables,
+    DeleteSubscriptionMutation,
+    DeleteSubscriptionMutationVariables,
+    OffsetPaginationInput,
+    UserAlertSubscriptionFilter,
+    UserAlertSubscriptionType,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import useFilterState from '#hooks/useFilterState';
 
 import NewSubscriptionModal from '../NewSubscriptionModal';
 import ActiveTableActions from './ActiveTableActions';
 import ArchiveTableActions from './ArchiveTableActions';
-import { SubscriptionDetail } from './common';
 import SubscriptionTableItem from './SubscriptionTableItem';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-const subscriptionKeySelector = (subscription: SubscriptionDetail) => subscription.id;
+const ALERT_SUBSCRIPTIONS = gql`
+    query AlertSubscriptions(
+        $pagination: OffsetPaginationInput,
+        $filters: UserAlertSubscriptionFilter,
+    ) {
+        private {
+            id
+            userAlertSubscriptions(pagination: $pagination, filters: $filters) {
+                count
+                limit
+                offset
+                items {
+                    id
+                    name
+                    isActive
+                    notifyByEmail
+                    alerts {
+                        count
+                    }
+                    emailFrequency
+                    emailFrequencyDisplay
+                    filterAlertAdmin1s
+                    filterAlertAdmin1sDisplay {
+                        id
+                        name
+                    }
+                    filterAlertCategoriesDisplay
+                    filterAlertCategories
+                    filterAlertCertaintiesDisplay
+                    filterAlertCertainties
+                    filterAlertCountry
+                    filterAlertCountryDisplay {
+                        id
+                        name
+                    }
+                    filterAlertSeveritiesDisplay
+                    filterAlertUrgenciesDisplay
+                    filterAlertUrgencies
+                    filterAlertSeverities
+                }
+            }
+        }
+    }
+`;
+
+const DELETE_SUBSCRIPTION = gql`
+    mutation DeleteSubscription(
+        $subscriptionId: ID!,
+    ) {
+        private {
+            deleteUserAlertSubscription(id: $subscriptionId) {
+                ok
+                errors
+            }
+            id
+        }
+    }
+`;
+
+const UPDATE_SUBSCRIPTION = gql`
+    mutation ArchiveUnArchiveSubscription(
+        $subscriptionId: ID!,
+        $data: UserAlertSubscriptionInput!,
+    ) {
+        private {
+            updateUserAlertSubscription(
+                id: $subscriptionId,
+                data: $data,
+            ) {
+                errors
+                ok
+                result {
+                    id
+                    name
+                    isActive
+                }
+            }
+        }
+    }
+`;
+
+const PAGE_SIZE = 10;
+
+const subscriptionKeySelector = (subscription: UserAlertSubscriptionType) => subscription.id;
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
 
-    const data: SubscriptionDetail[] = [
-        {
-            id: '1',
-            country: 'USA',
-            admin1: 'LA',
-            title: 'Earthquake Alert',
-            totalCount: 20,
-            urgency: [],
-            certainty: [],
-            severity: [],
-        },
-        {
-            id: '2',
-            country: 'Canada',
-            admin1: 'Toronto',
-            title: 'Flood Alert',
-            totalCount: 30,
-            urgency: [],
-            certainty: [],
-            severity: [],
-        },
-    ];
+    const alert = useAlert();
 
     type TabKey = 'active' | 'archive';
     const [activeTab, setActiveTab] = useState<TabKey>('active');
 
+    const [
+        selectedSubscription,
+        setSelectedSubscription,
+    ] = useState<string | undefined>();
+
     const [showSubscriptionModal, {
         setTrue: setShowSubscriptionModalTrue,
         setFalse: setShowSubscriptionModalFalse,
     }] = useBooleanState(false);
 
-    const activeRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+    const {
+        page,
+        setPage,
+        limit,
+        offset,
+    } = useFilterState<AlertFilter>({
+        pageSize: PAGE_SIZE,
+        filter: {},
+    });
+
+    const variables = useMemo<{
+        pagination: OffsetPaginationInput,
+        filters: UserAlertSubscriptionFilter,
+    }>(() => ({
+        pagination: {
+            offset,
+            limit,
+        },
+        filters: {
+            isActive: {
+                exact: activeTab === 'active',
+            },
+        },
+    }), [
+        activeTab,
+        limit,
+        offset,
+    ]);
+
+    const {
+        previousData,
+        data: alertSubscriptions = previousData,
+        loading: alertSubscriptionLoading,
+        error: alertSubscriptionError,
+        refetch,
+    } = useQuery<AlertSubscriptionsQuery, AlertSubscriptionsQueryVariables>(
+        ALERT_SUBSCRIPTIONS,
+        {
+            variables,
+        },
+    );
+
+    const data = alertSubscriptions?.private.userAlertSubscriptions;
+
+    const [
+        triggerSubscriptionUpdate,
+    ] = useMutation<
+        ArchiveUnArchiveSubscriptionMutation,
+        ArchiveUnArchiveSubscriptionMutationVariables
+    >(
+        UPDATE_SUBSCRIPTION,
+        {
+            onCompleted: (projectResponse) => {
+                const response = projectResponse?.private?.updateUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    if (response.result?.isActive) {
+                        alert.show(
+                            'Subscription unarchived.',
+                            { variant: 'success' },
+                        );
+                    } else {
+                        alert.show(
+                            'Subscription archived.',
+                            { variant: 'success' },
+                        );
+                    }
+                } else {
+                    alert.show(
+                        'Failed to update subscription.',
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to update project.',
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
+    const handleEditSubscription = useCallback((key: string) => {
+        setSelectedSubscription(key);
+        setShowSubscriptionModalTrue();
+    }, [
+        setShowSubscriptionModalTrue,
+    ]);
+
+    const [subscriptions, setSubscriptions] = useState(data?.items || []);
+
+    const [
+        triggerSubscriptionDelete,
+    ] = useMutation<DeleteSubscriptionMutation, DeleteSubscriptionMutationVariables>(
+        DELETE_SUBSCRIPTION,
+        {
+            onCompleted: (deleteResponse) => {
+                const response = deleteResponse?.private?.deleteUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    alert.show(
+                        'Subscription deleted.',
+                        { variant: 'success' },
+                    );
+                } else {
+                    alert.show(
+                        'Failed to delete subscription',
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to delete subscription',
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
+    const handleDeleteSubscription = useCallback((id: string) => {
+        if (isNotDefined(id)) {
+            return;
+        }
+        triggerSubscriptionDelete({
+            variables: {
+                subscriptionId: id,
+            },
+        });
+        refetch();
+    }, [
+        triggerSubscriptionDelete,
+        refetch,
+    ]);
+
+    const handleTab = useCallback((newTab: TabKey) => {
+        setActiveTab(newTab);
+        setPage(1);
+    }, [
+        setPage,
+    ]);
+
+    const handleArchiveUnarchive = useCallback((id: string, archive: boolean) => {
+        if (isNotDefined(id)) {
+            return;
+        }
+        const selectedSubscriptionDetails = data?.items.find(
+            (sub) => sub.id === id,
+        );
+
+        triggerSubscriptionUpdate({
+            variables: {
+                subscriptionId: id,
+                data: {
+                    isActive: archive,
+                    filterAlertAdmin1s: selectedSubscriptionDetails?.filterAlertAdmin1s ?? [],
+                    // FIXME: Fix this plz
+                    filterAlertCountry: selectedSubscriptionDetails?.filterAlertCountryDisplay?.id ?? '',
+                    name: selectedSubscriptionDetails?.name ?? '',
+                },
+            },
+        });
+        const updatedSubscriptions = subscriptions.filter((sub) => sub.id !== id);
+        setSubscriptions(updatedSubscriptions);
+
+        // TODO: Add translation
+        refetch();
+    }, [
+        data?.items,
+        subscriptions,
+        triggerSubscriptionUpdate,
+        refetch,
+    ]);
+
+    const activeRendererParams = useCallback((
+        key: string,
+        value: UserAlertSubscriptionType,
+    ) => ({
         id: value.id,
-        title: value.title,
-        totalCount: value.totalCount ?? 0,
-        country: value?.country,
-        admin1: value?.admin1,
-        urgency: value?.urgency,
-        certainty: value?.certainty,
-        severity: value?.severity,
-        actions: <ActiveTableActions />,
-    }), []);
-
-    const archiveRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({
+        name: value.name,
+        alertCount: value.alerts.count ?? 0,
+        filterAlertUrgencies: value?.filterAlertUrgenciesDisplay,
+        filterAlertCertainties: value?.filterAlertCertaintiesDisplay,
+        filterAlertSeverities: value?.filterAlertSeveritiesDisplay,
+        filterAlertCategories: value?.filterAlertCategoriesDisplay,
+        filterAlertCountry: value?.filterAlertCountryDisplay.name,
+        filterAlertAdmin1s: value?.filterAlertAdmin1sDisplay?.map(
+            (admin) => admin.name,
+        ),
+        isActive: value?.isActive,
+        actions: <ActiveTableActions
+            onArchiveClick={() => handleArchiveUnarchive(value.id, false)}
+            onEditClick={() => handleEditSubscription(key)}
+            onSubscriptionRemove={() => handleDeleteSubscription(value.id)}
+        />,
+    }), [
+        handleDeleteSubscription,
+        handleEditSubscription,
+        handleArchiveUnarchive,
+    ]);
+
+    const archiveRendererParams = useCallback((_: string, value: UserAlertSubscriptionType) => ({
         id: value.id,
-        title: value.title,
-        totalCount: value.totalCount ?? 0,
-        country: value?.country,
-        admin1: value?.admin1,
-        urgency: value?.urgency,
-        certainty: value?.certainty,
-        severity: value?.severity,
-        actions: <ArchiveTableActions />,
-    }), []);
+        name: value.name,
+        alertCount: value.alerts.count ?? 0,
+        filterAlertUrgencies: value?.filterAlertUrgenciesDisplay,
+        filterAlertCertainties: value?.filterAlertCertaintiesDisplay,
+        filterAlertSeverities: value?.filterAlertSeveritiesDisplay,
+        filterAlertCategories: value?.filterAlertCategoriesDisplay,
+        filterAlertCountry: value?.filterAlertCountryDisplay.name,
+        filterAlertAdmin1s: value?.filterAlertAdmin1sDisplay?.map(
+            (admin) => admin.name,
+        ),
+        actions: <ArchiveTableActions
+            onUnArchive={() => handleArchiveUnarchive(value.id, true)}
+            onSubscriptionRemove={() => handleDeleteSubscription(value.id)}
+        />,
+    }), [
+        handleDeleteSubscription,
+        handleArchiveUnarchive,
+    ]);
+
+    const selectedSubscriptionDetails = useMemo(() => data?.items.find(
+        (sub) => sub.id === selectedSubscription,
+    ), [
+        data,
+        selectedSubscription,
+    ]);
 
     return (
         <Page
@@ -114,15 +415,24 @@ export function Component() {
                         {strings.myNewSubscription}
                     </Button>
                 )}
+                footerActions={isDefined(data) && (
+                    <Pager
+                        activePage={page}
+                        itemsCount={data?.count ?? 0}
+                        maxItemsPerPage={limit}
+                        onActivePageChange={setPage}
+                    />
+                )}
             >
                 {showSubscriptionModal && (
                     <NewSubscriptionModal
+                        subscription={selectedSubscriptionDetails}
                         onCloseModal={setShowSubscriptionModalFalse}
                     />
                 )}
                 <Tabs
                     value={activeTab}
-                    onChange={setActiveTab}
+                    onChange={handleTab}
                     variant="primary"
                 >
                     <TabList>
@@ -139,13 +449,13 @@ export function Component() {
                     >
                         <List
                             className={styles.subscription}
-                            data={data}
+                            data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={activeRendererParams}
                             keySelector={subscriptionKeySelector}
                             filtered={false}
-                            pending={false}
-                            errored={false}
+                            pending={alertSubscriptionLoading}
+                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                     <TabPanel
@@ -154,13 +464,13 @@ export function Component() {
                     >
                         <List
                             className={styles.subscription}
-                            data={data}
+                            data={data?.items}
                             renderer={SubscriptionTableItem}
                             rendererParams={archiveRendererParams}
                             keySelector={subscriptionKeySelector}
                             filtered={false}
-                            pending={false}
-                            errored={false}
+                            pending={alertSubscriptionLoading}
+                            errored={isDefined(alertSubscriptionError)}
                         />
                     </TabPanel>
                 </Tabs>
diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
index 1e538b4e..234ddec4 100644
--- a/src/views/NewSubscriptionModal/index.tsx
+++ b/src/views/NewSubscriptionModal/index.tsx
@@ -27,7 +27,6 @@ import {
     requiredCondition,
     requiredStringCondition,
     useForm,
-    useFormObject,
 } from '@togglecorp/toggle-form';
 
 import {
@@ -39,6 +38,8 @@ import {
     CreateUserAlertSubscriptionMutationVariables,
     FilteredAdminListQuery,
     FilteredAdminListQueryVariables,
+    UpdateSubscriptionMutation,
+    UpdateSubscriptionMutationVariables,
     UserAlertSubscriptionInput,
 } from '#generated/types/graphql';
 import useAlert from '#hooks/useAlert';
@@ -85,7 +86,7 @@ query AlertEnumsAndAllCountries {
 `;
 
 const ADMIN_LIST = gql`
-query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
+query FilteredAdminList($filters: Admin1Filter, $pagination: OffsetPaginationInput) {
     public {
         id
         admin1s(filters: $filters, pagination: $pagination) {
@@ -103,25 +104,88 @@ query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInpu
 const CREATE_USER_ALERT_SUBSCRIPTION = gql`
 mutation CreateUserAlertSubscription(
     $data: UserAlertSubscriptionInput!,
+    $filter: AlertFilter,
 ) {
     private {
-        id
-        createUserAlertSubcription(data: $data){
-            errors
+        createUserAlertSubscription(
+            data: $data,
+        ) {
             ok
             result {
                 id
                 name
-                alertFilters
-                emailFrequency
                 notifyByEmail
-                emailFrequencyDisplay
+                isActive
+                filterAlertUrgencies
+                filterAlertSeverities
+                filterAlertCountry
+                filterAlertCountryDisplay {
+                    id
+                    name
+                }
+                filterAlertCertainties
+                filterAlertCategories
+                filterAlertAdmin1sDisplay {
+                    id
+                    name
+                    countryId
+                }
+                filterAlertAdmin1s
+                emailLastSentAt
+                emailFrequency
+                alerts (filters: $filter) {
+                    count
+                }
             }
         }
+        id
     }
 }
 `;
 
+const UPDATE_SUBSCRIPTION = gql`
+    mutation UpdateSubscription (
+        $subscriptionId: ID!,
+        $data: UserAlertSubscriptionInput!,
+    ) {
+        private {
+            updateUserAlertSubscription(
+                id: $subscriptionId,
+                data: $data,
+            ) {
+                errors
+                ok
+                result {
+                    id
+                    name
+                    notifyByEmail
+                    isActive
+                    filterAlertUrgencies
+                    filterAlertSeverities
+                    filterAlertCountry
+                    filterAlertCountryDisplay {
+                        id
+                        name
+                    }
+                    filterAlertCertainties
+                    filterAlertCategories
+                    filterAlertAdmin1sDisplay {
+                        id
+                        name
+                        countryId
+                    }
+                    filterAlertAdmin1s
+                    emailLastSentAt
+                    emailFrequency
+                    alerts {
+                        count
+                    }
+                }
+            }
+        }
+    }
+`;
+
 type AdminOption = NonNullable<NonNullable<NonNullable<FilteredAdminListQuery['public']>['admin1s']>['items']>[number];
 
 type Urgency = NonNullable<AlertEnumsQuery['enums']['AlertInfoUrgency']>[number];
@@ -149,9 +213,6 @@ const categoryLabelSelector = (category: Category) => category.label;
 
 type PartialFormFields = PartialForm<UserAlertSubscriptionInput>;
 
-type AlertFilterType = ObjectSchema<PartialFormFields['alertFilters']>;
-type AlertFilterTypeFields = ReturnType<AlertFilterType['fields']>
-
 type FormSchema = ObjectSchema<PartialFormFields>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>
 
@@ -161,27 +222,23 @@ const formSchema: FormSchema = {
             required: true,
             requiredValidation: requiredStringCondition,
         },
-        alertFilters: {
-            fields: (): AlertFilterTypeFields => ({
-                admin1s: {
-                    required: true,
-                },
-                urgency: {
-                    required: true,
-                },
-                certainty: {
-                    required: true,
-                },
-                category: {
-                    required: true,
-                },
-                severity: {
-                    required: true,
-                },
-                country: {
-                    required: true,
-                },
-            }),
+        filterAlertUrgencies: {
+            defaultValue: [],
+        },
+        filterAlertCertainties: {
+            defaultValue: [],
+        },
+        filterAlertSeverities: {
+            defaultValue: [],
+        },
+        filterAlertCategories: {
+            defaultValue: [],
+        },
+        filterAlertCountry: {
+            required: true,
+        },
+        filterAlertAdmin1s: {
+            required: true,
         },
         notifyByEmail: {
             required: true,
@@ -195,7 +252,7 @@ const formSchema: FormSchema = {
 };
 
 interface Props {
-    subscription?: UserAlertSubscriptionInput;
+    subscription?: { id?: string } & Partial<UserAlertSubscriptionInput>;
     onCloseModal: () => void;
 }
 
@@ -208,20 +265,23 @@ function NewSubscriptionModal(props: Props) {
     const strings = useTranslation(i18n);
 
     const defaultFormValue = useMemo(() => ({
+        id: subscription?.id,
         name: subscription?.name,
-        notifyByEmail: subscription?.notifyByEmail,
-        emailFrequency: subscription?.emailFrequency,
-        alertFilters: {
-            urgency: subscription?.alertFilters?.urgency,
-            severity: subscription?.alertFilters?.severity,
-            certainty: subscription?.alertFilters?.certainty,
-            category: subscription?.alertFilters?.category,
-            country: subscription?.alertFilters?.country,
-            admin1s: subscription?.alertFilters?.admin1s,
-        },
-    }), [
-        subscription,
-    ]);
+        filterAlertUrgencies: subscription?.filterAlertUrgencies
+            ?? [],
+        filterAlertCertainties: subscription?.filterAlertCertainties
+            ?? [],
+        filterAlertSeverities: subscription?.filterAlertSeverities
+            ?? [],
+        filterAlertCategories: subscription?.filterAlertCategories
+            ?? [],
+        // FIXME: Change this later after server is fixed
+        filterAlertCountry: subscription?.filterAlertCountry,
+        filterAlertAdmin1s: subscription?.filterAlertAdmin1s
+            ?? [],
+        notifyByEmail: subscription?.notifyByEmail ?? true,
+        emailFrequency: subscription?.emailFrequency ?? undefined,
+    }), [subscription]);
 
     const {
         value,
@@ -233,16 +293,8 @@ function NewSubscriptionModal(props: Props) {
 
     const fieldError = getErrorObject(formError);
 
-    const filterError = getErrorObject(fieldError?.alertFilters);
-
     const alert = useAlert();
 
-    const setAlertFilterValue = useFormObject<'alertFilters', NonNullable<PartialFormFields['alertFilters']>>(
-        'alertFilters' as const,
-        setFieldValue,
-        {},
-    );
-
     const [
         createAlertSubscription,
         { loading: loadingSubscription },
@@ -253,7 +305,7 @@ function NewSubscriptionModal(props: Props) {
         CREATE_USER_ALERT_SUBSCRIPTION,
         {
             onCompleted: (res) => {
-                const response = res.private.createUserAlertSubcription;
+                const response = res.private.createUserAlertSubscription;
                 if (!response) {
                     return;
                 }
@@ -279,6 +331,39 @@ function NewSubscriptionModal(props: Props) {
         },
     );
 
+    const [
+        triggerSubscriptionUpdate,
+    ] = useMutation<UpdateSubscriptionMutation, UpdateSubscriptionMutationVariables>(
+        UPDATE_SUBSCRIPTION,
+        {
+            onCompleted: (projectResponse) => {
+                const response = projectResponse?.private?.updateUserAlertSubscription;
+                if (!response) {
+                    return;
+                }
+                if (response.ok) {
+                    alert.show(
+                        // TODO: Add translation
+                        'Subscription updated successfully.',
+                        { variant: 'success' },
+                    );
+                    onCloseModal();
+                } else {
+                    alert.show(
+                        'Failed to update subscription.',
+                        { variant: 'danger' },
+                    );
+                }
+            },
+            onError: () => {
+                alert.show(
+                    'Failed to update project.',
+                    { variant: 'danger' },
+                );
+            },
+        },
+    );
+
     const {
         data: alertEnumsResponse,
     } = useQuery<AlertEnumsAndAllCountriesQuery, AlertEnumsAndAllCountriesQueryVariables>(
@@ -287,7 +372,7 @@ function NewSubscriptionModal(props: Props) {
 
     const adminQueryVariables = useMemo<FilteredAdminListQueryVariables>(
         () => {
-            if (isNotDefined(value.alertFilters?.country)) {
+            if (isNotDefined(value.filterAlertCountry)) {
                 return {
                     filters: undefined,
                     // FIXME: Implement search select input
@@ -300,7 +385,7 @@ function NewSubscriptionModal(props: Props) {
 
             return {
                 filters: {
-                    country: { pk: value.alertFilters.country },
+                    country: { pk: value.filterAlertCountry },
                 },
                 // FIXME: Implement search select input
                 pagination: {
@@ -309,14 +394,14 @@ function NewSubscriptionModal(props: Props) {
                 },
             };
         },
-        [value.alertFilters?.country],
+        [value.filterAlertCountry],
     );
 
     const {
         data: adminResponse,
     } = useQuery<FilteredAdminListQuery, FilteredAdminListQueryVariables>(
         ADMIN_LIST,
-        { variables: adminQueryVariables, skip: isNotDefined(value.alertFilters?.country) },
+        { variables: adminQueryVariables, skip: isNotDefined(value.filterAlertCountry) },
     );
 
     const subscriptionCreate = useCallback(() => {
@@ -324,16 +409,27 @@ function NewSubscriptionModal(props: Props) {
             validate,
             setError,
             (val) => {
-                createAlertSubscription({
-                    variables: {
-                        data: val as UserAlertSubscriptionInput,
-                    },
-                });
+                if (subscription?.id) {
+                    triggerSubscriptionUpdate({
+                        variables: {
+                            subscriptionId: subscription.id,
+                            data: val as UserAlertSubscriptionInput,
+                        },
+                    });
+                } else {
+                    createAlertSubscription({
+                        variables: {
+                            data: val as UserAlertSubscriptionInput,
+                        },
+                    });
+                }
             },
         );
         handler();
     }, [
         setError,
+        subscription?.id,
+        triggerSubscriptionUpdate,
         createAlertSubscription,
         validate,
     ]);
@@ -370,74 +466,70 @@ function NewSubscriptionModal(props: Props) {
                 <MultiSelectInput
                     label={strings.filterUrgencyLabel}
                     placeholder={strings.filterUrgencyPlaceholder}
-                    name="urgency"
+                    name="filterAlertUrgencies"
                     options={alertEnumsResponse?.enums.AlertInfoUrgency}
                     keySelector={urgencyKeySelector}
                     labelSelector={urgencyLabelSelector}
-                    value={value.alertFilters?.urgency}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.urgency}
-                    withAsterisk
+                    value={value.filterAlertUrgencies}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertUrgencies ? 'Invalid' : null}
                 />
                 <MultiSelectInput
                     label={strings.filterSeverityLabel}
                     placeholder={strings.filterSeverityPlaceholder}
-                    name="severity"
+                    name="filterAlertSeverities"
                     options={alertEnumsResponse?.enums.AlertInfoSeverity}
                     keySelector={severityKeySelector}
                     labelSelector={severityLabelSelector}
-                    value={value.alertFilters?.severity}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.severity}
-                    withAsterisk
+                    value={value.filterAlertSeverities}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertSeverities ? 'Invalid' : null}
                 />
                 <MultiSelectInput
                     label={strings.filterCertaintyLabel}
                     placeholder={strings.filterCertaintyPlaceholder}
-                    name="certainty"
+                    name="filterAlertCertainties"
                     options={alertEnumsResponse?.enums.AlertInfoCertainty}
                     keySelector={certaintyKeySelector}
                     labelSelector={certaintyLabelSelector}
-                    value={value.alertFilters?.certainty}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.certainty}
-                    withAsterisk
+                    value={value.filterAlertCertainties}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCertainties ? 'Invalid' : null}
                 />
                 <MultiSelectInput
                     label={strings.filterCategoryLabel}
                     placeholder={strings.filterCategoryPlaceholder}
-                    name="category"
+                    name="filterAlertCategories"
                     options={alertEnumsResponse?.enums.AlertInfoCategory}
                     keySelector={categoryKeySelector}
                     labelSelector={categoryLabelSelector}
-                    value={value.alertFilters?.category}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.category}
-                    withAsterisk
+                    value={value.filterAlertCategories}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCategories ? 'Invalid' : null}
                 />
                 <SelectInput
                     label={strings.filterCountriesLabel}
                     placeholder={strings.filterCountriesPlaceholder}
-                    name="country"
+                    name="filterAlertCountry"
                     options={alertEnumsResponse?.public.allCountries}
                     keySelector={stringIdSelector}
                     labelSelector={stringNameSelector}
-                    value={value.alertFilters?.country}
-                    onChange={setAlertFilterValue}
-                    error={filterError?.country}
+                    value={value.filterAlertCountry}
+                    onChange={setFieldValue}
+                    error={fieldError?.filterAlertCountry}
                     withAsterisk
                 />
                 <MultiSelectInput
                     label={strings.filterAdmin1Label}
                     placeholder={strings.filterAdmin1Placeholder}
-                    name="admin1s"
-                    disabled={isNotDefined(value.alertFilters?.country)}
+                    name="filterAlertAdmin1s"
+                    disabled={isNotDefined(value.filterAlertCountry)}
                     options={adminResponse?.public.admin1s.items}
                     keySelector={adminKeySelector}
                     labelSelector={stringNameSelector}
-                    value={value.alertFilters?.admin1s}
-                    onChange={setAlertFilterValue}
-                    error={getErrorString(filterError?.admin1s)}
+                    value={value.filterAlertAdmin1s}
+                    onChange={setFieldValue}
+                    error={getErrorString(fieldError?.filterAlertAdmin1s)}
                     withAsterisk
                 />
             </div>
diff --git a/yarn.lock b/yarn.lock
index 44d5ccf0..943b34a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1699,12 +1699,18 @@
   resolved "https://registry.yarnpkg.com/@ifrc-go/icons/-/icons-1.3.3.tgz#6a4aaf8a06ba237d2de269e84a1561f0a395deb1"
   integrity sha512-43sLUn0jH3v+gkJC0bT6oYWlsPg9isAT/x/qYhmZHb53iQOlWjUC9fNNSQq3nzklH7+mvHhXFXBbotSeFEtLhw==
 
-"@ifrc-go/ui@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@ifrc-go/ui/-/ui-1.1.2.tgz#ece85236abb661ad5cb4cd5e99ec63525feda9c8"
-  integrity sha512-BiKNoe72xrNkDSqf14dsu3w8f4h20Q2C91VWAX1ZWV64pGf6exZwxMGPQm6RPL299R6m47eTwHQndyQZJCjXoQ==
+"@ifrc-go/icons@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@ifrc-go/icons/-/icons-2.0.1.tgz#7b8fe49ceed3e51de182bd97bcdbc6c9e9914351"
+  integrity sha512-j0KXz5UgUgVBfSljx6XATBWchj1tDckaGX+uI86QTO63teP5zCd6osR9q/e6H3jv8bzil1sdUmVt4VOwSX6xhw==
+
+"@ifrc-go/ui@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@ifrc-go/ui/-/ui-1.2.1.tgz#12f611a2200cbf00f3e82c0a10cf5aa79d75dd28"
+  integrity sha512-ZdWffxnowjtY8wgIuheS4mf3P1JnoKKaEC8yrf0JHceb3fCenMXJqMBQEdRMaJNBtd4MhQhuls53uErzX/l2gA==
   dependencies:
     "@changesets/cli" "^2.27.1"
+    "@ifrc-go/icons" "^2.0.1"
     "@togglecorp/fujs" "^2.1.1"
     react-focus-on "^3.9.1"
     sanitize-html "^2.11.0"