diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx index 61d690ba..8859e413 100644 --- a/src/App/routes/index.tsx +++ b/src/App/routes/index.tsx @@ -57,6 +57,20 @@ const homeLayout = customWrapRoute({ }, }); +const mySubscription = customWrapRoute({ + parent: rootLayout, + path: 'subscriptions', + component: { + render: () => import('#views/MySubscription'), + props: {}, + }, + context: { + title: 'My Subscriptions', + // TODO: Change visibility after login feature + visibility: 'anything', + }, +}); + const homeIndex = customWrapRoute({ parent: homeLayout, index: true, @@ -218,6 +232,7 @@ const wrappedRoutes = { pageNotFound, login, recoverAccount, + mySubscription, }; export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes)); diff --git a/src/components/Navbar/i18n.json b/src/components/Navbar/i18n.json index 78595b24..9d2e6223 100644 --- a/src/components/Navbar/i18n.json +++ b/src/components/Navbar/i18n.json @@ -6,6 +6,6 @@ "appAbout": "About", "appResources": "Resources", "headerMenuHome": "Home", - "headerMenuMySubscription": "My Subscription" + "headerMenuMySubscription": "My Subscriptions" } } diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index f84881db..de2821f0 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -79,9 +79,15 @@ function Navbar(props: Props) { > {strings.headerMenuHome} + + {strings.headerMenuMySubscription} + ); } + export default Navbar; diff --git a/src/components/Navbar/styles.module.css b/src/components/Navbar/styles.module.css index 7785e42f..f976e946 100644 --- a/src/components/Navbar/styles.module.css +++ b/src/components/Navbar/styles.module.css @@ -50,7 +50,6 @@ } .menu-item:hover { - text-decoration: underline; color: var(--go-ui-color-primary-red); } diff --git a/src/views/Home/AlertFilters/index.tsx b/src/views/Home/AlertFilters/index.tsx index c4dc0b02..ac32b497 100644 --- a/src/views/Home/AlertFilters/index.tsx +++ b/src/views/Home/AlertFilters/index.tsx @@ -55,65 +55,65 @@ const categoryLabelSelector = (category: Category) => category.label; const ALERT_ENUMS = gql` query AlertEnums { enums { - AlertInfoCertainty { - key - label - } - AlertInfoUrgency { - label - key - } - AlertInfoSeverity { - key - label - } - AlertInfoCategory { - key - label - } + AlertInfoCertainty { + key + label + } + AlertInfoUrgency { + label + key + } + AlertInfoSeverity { + key + label + } + AlertInfoCategory { + key + label + } } }`; const ADMIN_LIST = gql` query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) { public { - id - admin1s(filters: $filters, pagination: $pagination) { - items { - id - name - countryId - alertCount + id + admin1s(filters: $filters, pagination: $pagination) { + items { + id + name + countryId + alertCount + } } - } } - } +} `; const REGION_LIST = gql` query RegionList { public { id - regions { - items { - id - name - ifrcGoId + regions { + items { + id + name + ifrcGoId + } } - } } - } +} `; const ALL_COUNTRY_LIST = gql` query AllCountryList { - public { - id - allCountries { - name - id + public { + id + allCountries { + name + id + } } - } } `; diff --git a/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx b/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx index aac0fd6f..11b6e1f4 100644 --- a/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx +++ b/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx @@ -36,23 +36,23 @@ import styles from './styles.module.css'; const COUNTRY_DETAIL = gql` query CountryDetail($countryId: ID!) { - public { - id - country(pk: $countryId) { - id - bbox - name - iso3 - ifrcGoId - alertCount - admin1s { + public { id - countryId - filteredAlertCount - name - } + country(pk: $countryId) { + id + bbox + name + iso3 + ifrcGoId + alertCount + admin1s { + id + countryId + filteredAlertCount + name + } + } } - } } `; diff --git a/src/views/Home/AlertsMap/i18n.json b/src/views/Home/AlertsMap/i18n.json index 64c9deea..dcca6882 100644 --- a/src/views/Home/AlertsMap/i18n.json +++ b/src/views/Home/AlertsMap/i18n.json @@ -6,6 +6,7 @@ "ongoingAlertCountries": "Ongoing Alert Countries", "backToAlertsLabel": "Back to Alerts", "alertViewDetails": "View Details", - "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)." + "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).", + "alertNewSubscription": "New Subscription" } } diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx index 0154322c..bab79f74 100644 --- a/src/views/Home/AlertsMap/index.tsx +++ b/src/views/Home/AlertsMap/index.tsx @@ -7,12 +7,19 @@ import { gql, useQuery, } from '@apollo/client'; -import { ChevronRightLineIcon } from '@ifrc-go/icons'; import { + AddLineIcon, + ChevronRightLineIcon, +} from '@ifrc-go/icons'; +import { + Button, Container, InfoPopup, } from '@ifrc-go/ui'; -import { useTranslation } from '@ifrc-go/ui/hooks'; +import { + useBooleanState, + useTranslation, +} from '@ifrc-go/ui/hooks'; import { resolveToString } from '@ifrc-go/ui/utils'; import { isDefined, @@ -28,6 +35,7 @@ import { FilteredCountryListQueryVariables, } from '#generated/types/graphql'; import useFilterState from '#hooks/useFilterState'; +import NewSubscriptionModal from '#views/NewSubscriptionModal'; import AlertDataContext from '../AlertDataContext'; import AlertFilters from '../AlertFilters'; @@ -77,12 +85,21 @@ type AlertPointProperties = { export function Component() { const strings = useTranslation(i18n); const alertFilters = useAlertFilters(); + + const [showSubscriptionModal, { + setTrue: setShowSubscriptionModalTrue, + setFalse: setShowSubscriptionModalFalse, + }] = useBooleanState(false); + const { activeAdmin1Id, activeCountryId, activeAlertId, activeCountryDetails, activeAdmin1Details, + selectedUrgencyTypes, + selectedCertaintyTypes, + selectedSeverityTypes, } = useContext(AlertDataContext); // FIXME: We should remove useFilterState as we are not using any feature @@ -170,6 +187,22 @@ export function Component() { [totalAlertCount, activeCountryDetails, activeAdmin1Details, strings], ); + const defaultSubscription = useMemo(() => ({ + id: '', + title: '', + urgency: selectedUrgencyTypes, + severity: selectedSeverityTypes, + certainty: selectedCertaintyTypes, + country: activeCountryId, + admin1: activeAdmin1Id, + }), [ + selectedUrgencyTypes, + selectedSeverityTypes, + selectedCertaintyTypes, + activeCountryId, + activeAdmin1Id, + ]); + return ( - )} - > - {strings.mapViewAllSources} - +
+ + + )} + > + {strings.mapViewAllSources} + +
)} overlayPending pending={countryListLoading} @@ -204,6 +252,12 @@ export function Component() { filters={} withGridViewInFilter > + {showSubscriptionModal && ( + + )} ({ + id: '', + title: '', + urgency: selectedUrgencyTypes, + severity: selectedSeverityTypes, + certainty: selectedCertaintyTypes, + country: activeCountryId, + admin1: activeAdmin1Id, + }), [ + selectedUrgencyTypes, + selectedSeverityTypes, + selectedCertaintyTypes, + activeCountryId, + activeAdmin1Id, + ]); + return ( - )} - > - {strings.tableViewAllSources} - +
+ + + )} + > + {strings.tableViewAllSources} + +
)} overlayPending pending={alertInfoLoading} @@ -310,6 +357,12 @@ export function Component() { )} filters={} > + {showSubscriptionModal && ( + + )} } + variant="tertiary" + withoutDropdownIcon + > + + {strings.archiveSubscriptionActions} + + + {strings.editSubscriptionActions} + + + {strings.deleteSubscriptionActions} + + + ); +} + +export default ActiveTableActions; diff --git a/src/views/MySubscription/ArchiveTableActions/i18n.json b/src/views/MySubscription/ArchiveTableActions/i18n.json new file mode 100644 index 00000000..cd2fa016 --- /dev/null +++ b/src/views/MySubscription/ArchiveTableActions/i18n.json @@ -0,0 +1,7 @@ +{ + "namespace": "SubscriptionActions", + "strings": { + "unarchiveSubscriptionActions": "Unarchive", + "deleteSubscriptionActions": "Delete" + } +} diff --git a/src/views/MySubscription/ArchiveTableActions/index.tsx b/src/views/MySubscription/ArchiveTableActions/index.tsx new file mode 100644 index 00000000..aec03ac0 --- /dev/null +++ b/src/views/MySubscription/ArchiveTableActions/index.tsx @@ -0,0 +1,35 @@ +import { MoreOptionsIcon } from '@ifrc-go/icons'; +import { DropdownMenu } from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; + +import DropdownMenuItem from '#components/DropdownMenuItem'; + +import i18n from './i18n.json'; + +function ArchiveTableActions() { + const strings = useTranslation(i18n); + + return ( + } + variant="tertiary" + withoutDropdownIcon + > + + {strings.unarchiveSubscriptionActions} + + + {strings.deleteSubscriptionActions} + + + ); +} + +export default ArchiveTableActions; diff --git a/src/views/MySubscription/SubscriptionTableItem/index.tsx b/src/views/MySubscription/SubscriptionTableItem/index.tsx new file mode 100644 index 00000000..ee7bf395 --- /dev/null +++ b/src/views/MySubscription/SubscriptionTableItem/index.tsx @@ -0,0 +1,60 @@ +import { Container } from '@ifrc-go/ui'; + +import { + AlertInfoCertaintyEnum, + AlertInfoSeverityEnum, + AlertInfoUrgencyEnum, +} from '#generated/types/graphql'; + +import styles from './styles.module.css'; + +interface Props { + country: string | undefined; + admin1: string | undefined; + urgency?: AlertInfoUrgencyEnum[] | undefined; + certainty?: AlertInfoCertaintyEnum[] | undefined; + severity?: AlertInfoSeverityEnum[] | undefined; + title: string; + totalCount: number; + actions: React.ReactNode; +} + +function SubscriptionTableItem(props: Props) { + const { + country, + admin1, + urgency, + certainty, + severity, + title, + totalCount, + actions, + } = props; + + return ( + + ( + {totalCount} + ) + {actions} + + )} + footerContent={( + <> + {country} + {admin1} + {urgency} + {certainty} + {severity} + + )} + /> + ); +} + +export default SubscriptionTableItem; diff --git a/src/views/MySubscription/SubscriptionTableItem/styles.module.css b/src/views/MySubscription/SubscriptionTableItem/styles.module.css new file mode 100644 index 00000000..a50abf27 --- /dev/null +++ b/src/views/MySubscription/SubscriptionTableItem/styles.module.css @@ -0,0 +1,4 @@ +.subscription-detail { + background-color: var(--go-ui-color-gray-20); + padding: var(--go-ui-spacing-md); +} diff --git a/src/views/MySubscription/common.tsx b/src/views/MySubscription/common.tsx new file mode 100644 index 00000000..41a6cd25 --- /dev/null +++ b/src/views/MySubscription/common.tsx @@ -0,0 +1,24 @@ +import { + AlertInfoCertaintyEnum, + AlertInfoSeverityEnum, + AlertInfoUrgencyEnum, +} from '#generated/types/graphql'; + +export interface FrequencyOption { + label: string; + key: 'daily' | 'weekly'; +} + +// 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/i18n.json b/src/views/MySubscription/i18n.json new file mode 100644 index 00000000..dd163098 --- /dev/null +++ b/src/views/MySubscription/i18n.json @@ -0,0 +1,11 @@ +{ + "namespace": "mySubscription", + "strings": { + "mySubscription": "My Subscription", + "myNewSubscription": "New Subscription", + "createNewSubscription": "Create", + "sendViaEmailLabel": "Send via email", + "activeSubscriptionsTab": "Active Subscriptions", + "archivedSubscriptionTab": "Archive Subscriptions" + } +} \ No newline at end of file diff --git a/src/views/MySubscription/index.tsx b/src/views/MySubscription/index.tsx new file mode 100644 index 00000000..0bb4fda8 --- /dev/null +++ b/src/views/MySubscription/index.tsx @@ -0,0 +1,170 @@ +import { + useCallback, + useState, +} from 'react'; +import { AddLineIcon } from '@ifrc-go/icons'; +import { + Button, + Container, + List, + Tab, + TabList, + TabPanel, + Tabs, +} from '@ifrc-go/ui'; +import { + useBooleanState, + useTranslation, +} from '@ifrc-go/ui/hooks'; + +import Page from '#components/Page'; + +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; + +// 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: [], + }, + ]; + + type TabKey = 'active' | 'archive'; + const [activeTab, setActiveTab] = useState('active'); + + const [showSubscriptionModal, { + setTrue: setShowSubscriptionModalTrue, + setFalse: setShowSubscriptionModalFalse, + }] = useBooleanState(false); + + const activeRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({ + title: value.title, + totalCount: value.totalCount ?? 0, + country: value?.country, + admin1: value?.admin1, + urgency: value?.urgency, + certainty: value?.certainty, + severity: value?.severity, + actions: , + }), []); + + const archiveRendererParams = useCallback((_: string, value: SubscriptionDetail) => ({ + title: value.title, + totalCount: value.totalCount ?? 0, + country: value?.country, + admin1: value?.admin1, + urgency: value?.urgency, + certainty: value?.certainty, + severity: value?.severity, + actions: , + }), []); + + return ( + + + )} + > + {strings.myNewSubscription} + + )} + > + {showSubscriptionModal && data.map((subscription) => ( + + ))} + + + + {strings.activeSubscriptionsTab} + + + {strings.archivedSubscriptionTab} + + + + + + + + + + + + ); +} +Component.displayName = 'MySubscription'; diff --git a/src/views/MySubscription/styles.module.css b/src/views/MySubscription/styles.module.css new file mode 100644 index 00000000..663c717b --- /dev/null +++ b/src/views/MySubscription/styles.module.css @@ -0,0 +1,15 @@ +.mySubscription { + .content { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-2xl); + + .subscriptions { + .subscription { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-lg); + } + } + } +} \ No newline at end of file diff --git a/src/views/NewSubscriptionModal/i18n.json b/src/views/NewSubscriptionModal/i18n.json new file mode 100644 index 00000000..b687099f --- /dev/null +++ b/src/views/NewSubscriptionModal/i18n.json @@ -0,0 +1,21 @@ +{ + "namespace": "mySubscriptionModal", + "strings": { + "createNewSubscription": "Create", + "sendViaEmailLabel": "Send via email", + "filterCountriesPlaceholder": "All Countries", + "filterAdmin1Placeholder": "All Admin1", + "filterUrgencyPlaceholder": "All Urgency Types", + "filterSeverityPlaceholder": "All Severity Types", + "filterCertaintyPlaceholder": "All Certainty Types", + "filterCountriesLabel": "Country", + "filterAdmin1Label": "Admin1", + "filterUrgencyLabel": "Urgency Level", + "filterSeverityLabel": "Severity Level", + "filterCertaintyLabel": "Certainty Level", + "filterRegionsLabel": "Regions", + "filterRegionsPlaceholder": "All Regions", + "newSubscriptionHeading": "New Subscription", + "newSubscriptionTitle": "Title" + } +} \ No newline at end of file diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx new file mode 100644 index 00000000..706dcd7a --- /dev/null +++ b/src/views/NewSubscriptionModal/index.tsx @@ -0,0 +1,340 @@ +import { + useCallback, + useMemo, +} from 'react'; +import { + gql, + useQuery, +} from '@apollo/client'; +import { + Button, + Checkbox, + Modal, + MultiSelectInput, + RadioInput, + SelectInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { isNotDefined } from '@togglecorp/fujs'; +import { + getErrorObject, + type ObjectSchema, + type PartialForm, + requiredCondition, + requiredStringCondition, + useForm, +} from '@togglecorp/toggle-form'; + +import { + AlertEnumsAndAllCountryListQuery, + AlertEnumsAndAllCountryListQueryVariables, + AlertEnumsQuery, + FilteredAdminListQuery, + FilteredAdminListQueryVariables, +} from '#generated/types/graphql'; +import { + stringIdSelector, + stringNameSelector, +} from '#utils/selectors'; +import { + FrequencyOption, + SubscriptionDetail, +} from '#views/MySubscription/common'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +const ALERT_ENUMS_AND_ALL_COUNTRY = gql` +query AlertEnumsAndAllCountryList { + enums { + AlertInfoCertainty { + key + label + } + AlertInfoUrgency { + key + label + } + AlertInfoSeverity { + key + label + } + AlertInfoCategory { + key + label + } + } + public { + id + allCountries { + name + id + } + } +} +`; + +const ADMIN_LIST = gql` +query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) { + public { + id + admin1s(filters: $filters, pagination: $pagination) { + items { + id + name + countryId + alertCount + } + } + } +} +`; + +type AdminOption = NonNullable['admin1s']>['items']>[number]; + +type Urgency = NonNullable[number]; +type Severity = NonNullable[number]; +type Certainty = NonNullable[number]; + +interface AlertFilters { + key: string; + label: string; +} + +const adminKeySelector = (admin1: AdminOption) => admin1.id; +const urgencyKeySelector = (urgency: Urgency) => urgency.key; +const severityKeySelector = (severity: Severity) => severity.key; +const certaintyKeySelector = (certainty: Certainty) => certainty.key; +const labelSelector = (alert: AlertFilters) => alert.label; + +const frequencyKeySelector = (frequency: FrequencyOption) => frequency.key; +const frequencyLabelSelector = (frequency: FrequencyOption) => frequency.label; + +const frequencyOption: FrequencyOption[] = [ + { label: 'Daily', key: 'daily' }, + { label: 'Weekly', key: 'weekly' }, +]; + +type PartialFormFields = PartialForm; + +type FormSchema = ObjectSchema; +type FormSchemaFields = ReturnType + +const formSchema: FormSchema = { + fields: (): FormSchemaFields => ({ + title: { + required: true, + requiredValidation: requiredStringCondition, + }, + urgency: { + required: true, + requiredValidation: requiredCondition, + }, + severity: { + required: true, + requiredValidation: requiredCondition, + }, + certainty: { + required: true, + requiredValidation: requiredCondition, + }, + country: { + required: true, + requiredValidation: requiredCondition, + }, + admin1: { + required: true, + requiredValidation: requiredCondition, + }, + sendEmail: { + required: true, + requiredValidation: requiredCondition, + }, + frequency: { + required: true, + requiredValidation: requiredCondition, + }, + }), +}; + +interface Props { + subscription: SubscriptionDetail; + onCloseModal?: () => void; +} + +function NewSubscriptionModal(props: Props) { + const { + subscription, + onCloseModal, + } = props; + + const defaultFormValue = useMemo(() => ({ + title: subscription?.title, + urgency: subscription?.urgency, + severity: subscription?.severity, + certainty: subscription?.certainty, + sendEmail: subscription?.sendEmail, + frequency: subscription?.frequency, + country: subscription?.country, + admin1: subscription?.admin1, + }), [ + subscription, + ]); + + const { + value, + setFieldValue, + error: formError, + // setError, + // validate, + } = useForm(formSchema, { value: defaultFormValue }); + + const fieldError = getErrorObject(formError); + + const strings = useTranslation(i18n); + const { + data: alertEnumsResponse, + } = useQuery( + ALERT_ENUMS_AND_ALL_COUNTRY, + ); + + const adminQueryVariables = useMemo( + () => { + if (isNotDefined(value.country)) { + return { + filters: undefined, + // FIXME: Implement search select input + pagination: { + offset: 0, + limit: 500, + }, + }; + } + + return { + filters: { + country: { pk: value.country }, + }, + // FIXME: Implement search select input + pagination: { + offset: 0, + limit: 500, + }, + }; + }, + [value.country], + ); + + const { + data: adminResponse, + } = useQuery( + ADMIN_LIST, + { variables: adminQueryVariables, skip: isNotDefined(value.country) }, + ); + + const subscriptionCreate = useCallback(() => { + // eslint-disable-next-line no-console + console.info('create'); + }, []); + + return ( + + {strings.createNewSubscription} + + )} + footerContentClassName={styles.createButton} + contentViewType="vertical" + spacing="comfortable" + onClose={onCloseModal} + > + +
+ + + + + +
+ + + + ); +} + +export default NewSubscriptionModal; diff --git a/src/views/NewSubscriptionModal/styles.module.css b/src/views/NewSubscriptionModal/styles.module.css new file mode 100644 index 00000000..7c566bd5 --- /dev/null +++ b/src/views/NewSubscriptionModal/styles.module.css @@ -0,0 +1,13 @@ +.subscription-modal { + .create-button { + display: flex; + flex-direction: column; + align-items: flex-start; + } + + .filters { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); + gap: var(--go-ui-spacing-md); + } +} \ No newline at end of file