diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx index 61d690ba..4d6cd358 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, @@ -177,6 +191,18 @@ const pageNotFound = customWrapRoute({ visibility: 'anything', }, }); +const register = customWrapRoute({ + parent: rootLayout, + path: 'register', + component: { + render: () => import('#views/Register'), + props: {}, + }, + context: { + title: 'Register', + visibility: 'is-not-authenticated', + }, +}); const login = customWrapRoute({ parent: rootLayout, @@ -218,6 +244,8 @@ const wrappedRoutes = { pageNotFound, login, recoverAccount, + mySubscription, + register, }; export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes)); diff --git a/src/components/Navbar/i18n.json b/src/components/Navbar/i18n.json index 78595b24..53916ec5 100644 --- a/src/components/Navbar/i18n.json +++ b/src/components/Navbar/i18n.json @@ -3,9 +3,10 @@ "strings": { "headerLogoAltText": "Alert Hub logo", "appLogin": "Login", + "appRegister":"Register", "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..fa38b46e 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -9,6 +9,7 @@ import { _cs } from '@togglecorp/fujs'; import goLogo from '#assets/icons/go-logo-2020.svg'; import Link from '#components/Link'; import NavigationTab from '#components/NavigationTab'; +import useAuth from '#hooks/useAuth'; import LangaugeDropdown from './LanguageDropdown'; @@ -21,6 +22,7 @@ interface Props { function Navbar(props: Props) { const { className } = props; const strings = useTranslation(i18n); + const { isAuthenticated } = useAuth(); return ( ); } + 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..96131d9a --- /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 diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json new file mode 100644 index 00000000..363c76d0 --- /dev/null +++ b/src/views/Register/i18n.json @@ -0,0 +1,20 @@ +{ + "namespace": "register", + "strings": { + "registerTitle": "IFRC GO - Register", + "registerHeader": "Register", + "registerSubHeader": "The IFRC Alert Hub platform is designed for staff, members, and volunteers of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC). Please register for a user account to access information for logged in users. Other responders and members of the public may browse the public areas of the site without registering for an account.", + "registerFirstName": "First Name", + "registerLastName": "Last Name", + "registerEmail": "Email", + "registerCountry": "Country", + "registerCity": "City", + "registerOrganizationType": "Organization Type", + "registerOrganizationName": "Organization Name", + "registerPassword": "Password", + "registerConfirmPassword": "Confirm Password", + "registerSubmit": "Register", + "registerAccountPresent": "Already have an account? {loginLink}", + "registerLogin": "Login" + } +} diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx new file mode 100644 index 00000000..21c454b4 --- /dev/null +++ b/src/views/Register/index.tsx @@ -0,0 +1,306 @@ +import { useState } from 'react'; +import { + Button, + SelectInput, + TextInput, +} from '@ifrc-go/ui'; +import { useTranslation } from '@ifrc-go/ui/hooks'; +import { resolveToComponent } from '@ifrc-go/ui/utils'; +import { isTruthyString } from '@togglecorp/fujs'; +import { + addCondition, + createSubmitHandler, + emailCondition, + type ObjectSchema, + requiredStringCondition, + undefinedValue, + useForm, +} from '@togglecorp/toggle-form'; + +import HCaptcha from '#components/Captcha'; +import Link from '#components/Link'; +import Page from '#components/Page'; + +import i18n from './i18n.json'; +import styles from './styles.module.css'; + +interface DefaultFormValue { + first_name: string; + last_name: string; + email: string; + password: string; + confirm_password: string; + country: string; + city: string; + organization: string; + organization_type: string; + captcha?:string; +} + +function getPasswordMatchCondition(referenceVal: string | undefined) { + return (val: string | undefined) => ( + isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal + ? 'Passwords do not match' + : undefined + ); +} + +const organizationTypes = [ + { id: '101', key: 'NTLS', value: 'National Society' }, + { id: '102', key: 'NGO', value: 'Non-Governmental Organization' }, + { id: '103', key: 'UN', value: 'United Nations Agency' }, +]; +const nationalSocietyOptions = [ + { id: '201', society_name: 'Red Cross Society' }, + { id: '202', society_name: 'Red Crescent Society' }, +]; +const countryOptions = [ + { id: '301', value: 'United States' }, + { id: '302', value: 'Canada' }, + { id: '303', value: 'United Kingdom' }, +]; +const whitelistedDomains = [ + 'example.com', + 'anotherdomain.org', + 'somedomain.net', +]; + +type FormFields = DefaultFormValue; + +const keySelector = (option: { id?: string }): string => option.id || ''; +const labelSelector = (option: { value?: string }): string => option.value || ''; + +type PartialFormFields = Partial; +type FormSchema = ObjectSchema; +type FormSchemaFields = ReturnType; + +const isWhitelistedEmail = (email: string): boolean => { + const domain = email.split('@')[1]; + return whitelistedDomains.includes(domain); +}; + +const emailWhitelistValidation = (value: string | undefined) => { + if (!isWhitelistedEmail(value || '')) { + return 'Email not allowed'; + } + return undefined; +}; + +const formSchema: FormSchema = { + fields: (value): FormSchemaFields => { + let fields: FormSchemaFields = { + first_name: { + required: true, + requiredValidation: requiredStringCondition, + }, + last_name: { + required: true, + requiredValidation: requiredStringCondition, + }, + email: { + required: true, + requiredValidation: requiredStringCondition, + validations: [emailCondition, emailWhitelistValidation], + }, + password: { + required: true, + requiredValidation: requiredStringCondition, + }, + confirm_password: { + required: true, + requiredValidation: requiredStringCondition, + forceValue: undefinedValue, + validations: [getPasswordMatchCondition(value?.password)], + }, + organization: { + required: true, + requiredValidation: requiredStringCondition, + }, + organization_type: { + required: true, + }, + country: { + required: true, + }, + city: { + required: true, + requiredValidation: requiredStringCondition, + }, + captcha: { + required: true, + requiredValidation: requiredStringCondition, + }, + }; + fields = addCondition( + fields, + value, + ['password'], + ['confirm_password'], + (val) => ({ + confirm_password: { + required: true, + requiredValidation: requiredStringCondition, + forceValue: undefinedValue, + validations: [getPasswordMatchCondition(val?.password)], + }, + }), + ); + + return fields; + }, +}; + +// eslint-disable-next-line import/prefer-default-export +export function Component() { + const strings = useTranslation(i18n); + const [formValue] = useState({}); + + const { + value, + setFieldValue, + setError, + validate, + } = useForm(formSchema, { + value: formValue, + }); + const fieldError: PartialFormFields = {}; + const handleFormSubmit = createSubmitHandler( + validate, + setError, + // FIXME: Add Submit logic here + () => {}, + ); + const isNationalSociety = formValue?.organization_type === 'NTLS'; + + const loginInfo = resolveToComponent(strings.registerAccountPresent, { + loginLink: ( + + {strings.registerLogin} + + ), + }); + + return ( + +
+ + + + + +
+ + + + {isNationalSociety ? ( + option.society_name} + value={value.organization} + onChange={setFieldValue} + error={fieldError?.organization} + /> + ) : ( + + )} +
+
+ + +
+ {loginInfo} +
+
+ + ); +} + +Component.displayName = 'Register'; diff --git a/src/views/Register/styles.module.css b/src/views/Register/styles.module.css new file mode 100644 index 00000000..5c4e38fe --- /dev/null +++ b/src/views/Register/styles.module.css @@ -0,0 +1,40 @@ +.register { + .main-section { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-2xl); + align-items: center; + + .form { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); + grid-gap: var(--go-ui-spacing-lg); + background-color: var(--go-ui-color-white); + width: 100%; + max-width: var(--go-ui-width-content-max); + + .full-size-input { + grid-column: 1 / -1; + } + + .form-border { + grid-column: 1 / -1; + background-color: var(--go-ui-color-separator); + height: var(--go-ui-width-separator-sm); + } + } + + .actions { + display: flex; + flex-direction: column; + gap: var(--go-ui-spacing-md); + align-items: center; + + .login { + display: flex; + gap: var(--go-ui-spacing-xs); + align-items: center; + } + } + } +}