fix(alert-preferences): country/region selections

Author: subinasr

app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/i18n.json

@@ -3,6 +3,9 @@
     "strings": {
         "addSubscriptionHeading": "New subscription",
         "editSubscriptionHeading": "Edit subscription",
+        "earthquakeLabel": "Earthquake",
+        "cycloneLabel": "Cyclone",
+        "floodLabel": "Flood",
         "updateButtonLabel": "Save",
         "cancelButtonLabel": "Cancel",
         "subscriptionTitleLabel": "Enter subscription title",

app/src/views/AccountNotifications/EmailPreferences/SubscriptionModal/index.tsx

@@ -38,7 +38,7 @@ import {
 import NonFieldError from '#components/NonFieldError';
 import { type components } from '#generated/types';
 import useCountry from '#hooks/domain/useCountry';
-import useDisasterTypes, { type DisasterType } from '#hooks/domain/useDisasterType';
+import { type DisasterType } from '#hooks/domain/useDisasterType';
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useAlert from '#hooks/useAlert';
 import {
@@ -62,7 +62,7 @@ function alertPerDayKeySelector(option: AlertPerDayEnums) {
     return option.key;
 }
 
-const disasterTypeLabelSelector = (disasterType: DisasterType) => disasterType.name ?? '?';
+const disasterTypeLabelSelector = (disasterType: Pick<DisasterType, 'id' | 'name'>) => disasterType.name ?? '?';
 
 interface Props {
     onClose: () => void;
@@ -85,7 +85,21 @@ function SubscriptionModal(props: Props) {
     const strings = useTranslation(i18n);
     const alert = useAlert();
 
-    const disasterTypeOptions = useDisasterTypes();
+    // NOTE: Email alerts only supports 3 disasters at the moment
+    const disasterTypeOptions = [
+        {
+            id: 2,
+            name: strings.earthquakeLabel,
+        },
+        {
+            id: 4,
+            name: strings.cycloneLabel,
+        },
+        {
+            id: 12,
+            name: strings.floodLabel,
+        },
+    ];
 
     const defaultFormValue: PartialFormFields = useMemo(() => ({
         user: userId,
@@ -289,7 +303,9 @@ function SubscriptionModal(props: Props) {
                         region,
                     ];
                 }
-
+                if (regionIndex === -1) {
+                    return selectedRegions;
+                }
                 if (isSelected) {
                     return selectedRegions;
                 }
@@ -304,7 +320,7 @@ function SubscriptionModal(props: Props) {
         setFieldValue(
             (selectedCountries: number[] | undefined = []) => {
                 const countryIndex = selectedCountries.findIndex(
-                    (selectedRegion) => selectedRegion === country,
+                    (selectedCountry) => selectedCountry === country,
                 );
 
                 if (countryIndex === -1 && isSelected) {
@@ -325,8 +341,8 @@ function SubscriptionModal(props: Props) {
 
         if (isSelected) {
             const countryDetails = countryDetailsById[country];
-            if (isDefined(countryDetails)) {
-                updateRegionSelection(false, countryDetails.id);
+            if (isDefined(countryDetails?.region)) {
+                updateRegionSelection(false, countryDetails?.region);
             }
         }
     }, [setFieldValue, countryDetailsById, updateRegionSelection]);
@@ -420,10 +436,10 @@ function SubscriptionModal(props: Props) {
                         {regionOptions?.map((region) => {
                             const regionCountries = regionGroupedCountries[region.key];
                             const selectedCountries = regionCountries?.filter(
-                                (country) => selectedCountriesIdMap?.[country.id],
+                                (country) => !!selectedCountriesIdMap?.[country.id],
                             );
                             const hasSelectedCountries = isDefined(selectedCountries)
-                                && selectedCountries?.length !== 0;
+                                && selectedCountries?.length > 0;
 
                             return (
                                 <ExpandableContainer

app/src/views/AccountNotifications/EmailPreferences/i18n.json

@@ -2,6 +2,7 @@
     "namespace": "emailPreferences",
     "strings": {
         "heading": "Email Alert Subscriptions",
+        "description": "Alerts are powered by Montandon data from GDACS and USGS. You'll receive email alerts with key impact figures and similar past events in the area.",
         "emptyMessage": "No subscriptions",
         "alertFrequencies": "Alert limit (per day)",
         "unlimitedOption": "No limit",
@@ -10,6 +11,12 @@
         "disasters": "Disasters",
         "addSubscriptionLabel": "New Alert Subscription",
         "editSubscriptionLabel": "Edit",
-        "editSubscriptionTitle": "Edit Alert Subscription"
+        "editSubscriptionTitle": "Edit Alert Subscription",
+        "deleteSubscriptionLabel": "Delete",
+        "deleteSubscriptionTitle": "Delete Alert Subscription",
+        "deleteSubscriptionConfirmationHeading": "Delete Alert Subscription",
+        "deleteSubscriptionConfirmationMessage": "Are you sure you want to delete your subscription?",
+        "subscriptionDeletedSuccessMessage": "Your subscription has been deleted.",
+        "subscriptionDeletedFailureMessage": "Subscription could not be deleted."
     }
 }

app/src/views/AccountNotifications/EmailPreferences/index.tsx

@@ -4,10 +4,12 @@ import {
 } from 'react';
 import {
     AddLineIcon,
+    DeleteBinTwoLineIcon,
     PencilLineIcon,
 } from '@ifrc-go/icons';
 import {
     Button,
+    ConfirmButton,
     Container,
     ListView,
     TextOutput,
@@ -22,7 +24,11 @@ import {
 } from '@togglecorp/fujs';
 
 import useUserMe from '#hooks/domain/useUserMe';
-import { useRequest } from '#utils/restRequest';
+import useAlert from '#hooks/useAlert';
+import {
+    useLazyRequest,
+    useRequest,
+} from '#utils/restRequest';
 
 import SubscriptionModal from './SubscriptionModal';
 
@@ -31,6 +37,7 @@ import i18n from './i18n.json';
 function EmailPreferences() {
     const user = useUserMe();
     const strings = useTranslation(i18n);
+    const alert = useAlert();
 
     const {
         response: subscriptionListResponse,
@@ -41,6 +48,29 @@ function EmailPreferences() {
         method: 'GET',
     });
 
+    const {
+        pending: subscriptionDeletePending,
+        trigger: deleteSubscription,
+    } = useLazyRequest({
+        method: 'DELETE',
+        url: '/api/v2/alert-subscription/{id}/',
+        pathVariables: ({ id }) => ({ id }),
+        onSuccess: () => {
+            refetchSubscriptionList();
+            alert.show(
+                strings.subscriptionDeletedSuccessMessage,
+                { variant: 'success' },
+            );
+        },
+        onFailure: () => {
+            alert.show(
+                strings.subscriptionDeletedFailureMessage,
+                { variant: 'danger' },
+            );
+        },
+
+    });
+
     const subscriptionList = subscriptionListResponse?.results;
 
     const [subscriptionModalVisible, {
@@ -61,6 +91,10 @@ function EmailPreferences() {
         setActiveSubscriptionId(subId);
     }, [setActiveSubscriptionId, showSubscriptionModal]);
 
+    const handleSubscriptionDelete = useCallback((subId: number) => {
+        deleteSubscription({ id: subId });
+    }, [deleteSubscription]);
+
     const handleSubscriptionAddClick = useCallback(() => {
         showSubscriptionModal();
         setActiveSubscriptionId(undefined);
@@ -70,6 +104,7 @@ function EmailPreferences() {
         <>
             <Container
                 heading={strings.heading}
+                headerDescription={strings.description}
                 pending={subscriptionListPending}
                 empty={isNotDefined(subscriptionList) || subscriptionList?.length === 0}
                 emptyMessage={strings.emptyMessage}
@@ -96,16 +131,33 @@ function EmailPreferences() {
                             withDarkBackground
                             withPadding
                             headerActions={(
-                                <Button
-                                    name={item.id}
-                                    onClick={handleSubscriptionEditClick}
-                                    title={strings.editSubscriptionTitle}
-                                    before={<PencilLineIcon />}
-                                    styleVariant="action"
-                                    colorVariant="primary"
-                                >
-                                    {strings.editSubscriptionLabel}
-                                </Button>
+                                <>
+                                    <Button
+                                        name={item.id}
+                                        onClick={handleSubscriptionEditClick}
+                                        title={strings.editSubscriptionTitle}
+                                        before={<PencilLineIcon />}
+                                        styleVariant="action"
+                                        colorVariant="primary"
+                                    >
+                                        {strings.editSubscriptionLabel}
+                                    </Button>
+                                    <ConfirmButton
+                                        name={item.id}
+                                        styleVariant="action"
+                                        colorVariant="primary"
+                                        title={strings.deleteSubscriptionTitle}
+                                        onConfirm={handleSubscriptionDelete}
+                                        // eslint-disable-next-line max-len
+                                        confirmHeading={strings.deleteSubscriptionConfirmationHeading}
+                                        // eslint-disable-next-line max-len
+                                        confirmMessage={strings.deleteSubscriptionConfirmationMessage}
+                                        before={<DeleteBinTwoLineIcon />}
+                                        disabled={subscriptionDeletePending}
+                                    >
+                                        {strings.deleteSubscriptionLabel}
+                                    </ConfirmButton>
+                                </>
                             )}
                             headingLevel={5}
                             withHeaderBorder