IFRCGo · samshara · Dec 17, 2024 · Dec 11, 2024
diff --git a/src/App/redirects/AlertDetailsRedirect.tsx b/src/App/redirects/AlertDetailsRedirect.tsx
@@ -0,0 +1,34 @@
+import {
+    generatePath,
+    useNavigate,
+    useParams,
+} from 'react-router-dom';
+
+import routes from '#routes';
+
+interface AlertDetailsParams {
+    alertId: string | undefined;
+    [key: string]: string | undefined;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { alertId } = useParams<AlertDetailsParams>();
+    const navigate = useNavigate();
+
+    const alertDetailsLink = (alertId) ? ({
+        pathname: (generatePath(
+            routes.alertDetails.absolutePath,
+            { alertId },
+        )),
+    })
+        : routes.pageNotFound.path;
+
+    if (alertDetailsLink) {
+        navigate(alertDetailsLink);
+    }
+
+    return null;
+}
+
+Component.displayName = 'AlertDetailsRedirect';
diff --git a/src/App/redirects/UnsubscribeRedirect.tsx b/src/App/redirects/UnsubscribeRedirect.tsx
@@ -0,0 +1,32 @@
+import {
+    generatePath,
+    useNavigate,
+    useParams,
+} from 'react-router-dom';
+
+import routes from '#routes';
+
+interface UnsubscribeParams {
+    subscriptionId: string | undefined;
+    token: string | undefined;
+    [key: string]: string | undefined;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { subscriptionId, token } = useParams<UnsubscribeParams>();
+    const navigate = useNavigate();
+
+    const UnsubscribeLink = (subscriptionId && token) ? ({
+        pathname: (generatePath(routes.unsubscribe.absolutePath, { subscriptionId, token })),
+    })
+        : routes.pageNotFound.path;
+
+    if (UnsubscribeLink) {
+        navigate(UnsubscribeLink);
+    }
+
+    return null;
+}
+
+Component.displayName = 'UnsubscribeRedirect';
diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
@@ -188,6 +188,20 @@ const alertDetails = customWrapRoute({
     },
 });
 
+const alertDetailRedirect = customWrapRoute({
+    parent: rootLayout,
+    path: 'permalink/alert-detail/:alertId',
+    component: {
+        render: () => import('../redirects/AlertDetailsRedirect.tsx'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Alert Details',
+        visibility: 'anything',
+    },
+});
+
 const allSourcesFeeds = customWrapRoute({
     parent: rootLayout,
     path: 'feeds',
@@ -311,6 +325,7 @@ const resetPasswordRedirect = customWrapRoute({
         visibility: 'is-not-authenticated',
     },
 });
+
 const activation = customWrapRoute({
     parent: rootLayout,
     path: 'activation/:userId/:token',
@@ -339,6 +354,34 @@ const activationRedirect = customWrapRoute({
     },
 });
 
+const unsubscribe = customWrapRoute({
+    parent: rootLayout,
+    path: 'unsubscribe/:subscriptionId/:token',
+    component: {
+        render: () => import('#views/Unsubscribe/index.tsx'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Unsubscribe',
+        visibility: 'is-authenticated',
+    },
+});
+
+const unsubscribeRedirect = customWrapRoute({
+    parent: rootLayout,
+    path: 'permalink/unsubscribe-user-alert-subscription/:subscriptionId/:token',
+    component: {
+        render: () => import('../redirects/UnsubscribeRedirect.tsx'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Unsubscribe Redirect',
+        visibility: 'anything',
+    },
+});
+
 const wrappedRoutes = {
     rootLayout,
     homeLayout,
@@ -363,6 +406,9 @@ const wrappedRoutes = {
     resetPasswordRedirect,
     activationRedirect,
     activation,
+    alertDetailRedirect,
+    unsubscribeRedirect,
+    unsubscribe,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

diff --git a/src/views/Activation/i18n.json b/src/views/Activation/i18n.json
@@ -1,9 +1,8 @@
 {
     "namespace": "activation",
     "strings": {
-        "activationSuccessMessage":"Your account has been successfully activated!",
-        "goToLogin":"Go to Login",
-        "activationFailMessage":"An error occurred during activation. Please try again."
+        "activationSuccessMessage": "Your account has been successfully activated!",
+        "goToLogin": "Go to Login",
+        "activationFailMessage": "This account has already been activated."
     }
-}
-
+}
diff --git a/src/views/Home/i18n.json b/src/views/Home/i18n.json
@@ -10,7 +10,8 @@
         "addSubscriptionDescription": "With real-time monitoring of potential risks and emergency events, receive timely and accurate alerts.",
         "useApi": "Use API to rebroadcast CAP alerts",
         "useApiDescription": "With simple yet powerful API endpoints, you can tailor the alerts to suit your users' needs.",
-        "alertNewSubscription": "Subscribe Alerts ",
-        "alertApiReference": "API Reference"
+        "alertNewSubscription": "Subscribe to Alerts",
+        "alertApiReference": "API Reference",
+        "redirectToLogin": "Please log in to subscribe."
     }
 }
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
@@ -3,7 +3,10 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { Outlet } from 'react-router-dom';
+import {
+    Outlet,
+    useNavigate,
+} from 'react-router-dom';
 import {
     Button,
     Container,
@@ -27,6 +30,8 @@ import {
     AlertFilter,
     CountryDetailQuery,
 } from '#generated/types/graphql';
+import useAuth from '#hooks/domain/useAuth';
+import useAlert from '#hooks/useAlert';
 import useUrlSearchState from '#hooks/useUrlSearchState';
 import NewSubscriptionModal from '#views/NewSubscriptionModal';
 
@@ -86,6 +91,9 @@ const filterKeys: CombinedAlertFilterKey[] = ['country', 'admin1', 'region', 'ur
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+    const { isAuthenticated } = useAuth();
+    const alert = useAlert();
+    const navigate = useNavigate();
 
     const [
         filters,
@@ -240,6 +248,11 @@ export function Component() {
         setFalse: setShowSubscriptionModalFalse,
     }] = useBooleanState(false);
 
+    const handleLoginRedirect = () => {
+        alert.show(strings.redirectToLogin);
+        navigate('/login');
+    };
+
     return (
         <AlertDataContext.Provider value={alertContextValue}>
             <Page
@@ -266,10 +279,18 @@ export function Component() {
                                     heading={strings.addSubscription}
                                     headerDescription={strings.addSubscriptionDescription}
                                     withInternalPadding
-                                    footerContent={(
+                                    footerContent={isAuthenticated ? (
                                         <Button
+                                            name={undefined}
                                             onClick={setShowSubscriptionModalTrue}
+                                            variant="primary"
+                                        >
+                                            {strings.alertNewSubscription}
+                                        </Button>
+                                    ) : (
+                                        <Button
                                             name={undefined}
+                                            onClick={handleLoginRedirect}
                                             variant="primary"
                                         >
                                             {strings.alertNewSubscription}

diff --git a/src/views/RecoverAccount/index.tsx b/src/views/RecoverAccount/index.tsx
@@ -150,7 +150,6 @@ export function Component() {
                     title={strings.successfulMessage}
                 />
             </Page>
-
         );
     }
 
@@ -183,6 +182,7 @@ export function Component() {
                         name="captcha"
                         onChange={setFieldValue}
                         onError={onCaptchaError}
+                        error={fieldError?.captcha}
                     />
                     <Button
                         name={undefined}

diff --git a/src/views/RecoverAccountConfirm/index.tsx b/src/views/RecoverAccountConfirm/index.tsx
@@ -233,6 +233,7 @@ export function Component() {
                         name="captcha"
                         onChange={setFieldValue}
                         onError={onCaptchaError}
+                        error={fieldError?.captcha}
                     />
                     <Button
                         name={undefined}

diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
@@ -13,7 +13,10 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
-import { isTruthyString } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 import {
     addCondition,
     createSubmitHandler,
@@ -151,6 +154,11 @@ export function Component() {
                     errors,
                 ));
                 setError(formError);
+                const errorMessages = errors
+                    ?.map((message: { messages: string }) => message.messages)
+                    .filter(isDefined)
+                    .join(', ');
+                alert.show(errorMessages, { variant: 'danger' });
             } else if (ok) {
                 navigate('/login');
                 alert.show(
@@ -267,6 +275,7 @@ export function Component() {
                     name="captcha"
                     onChange={setFieldValue}
                     onError={onCaptchaError}
+                    error={error?.captcha}
                 />
                 <Button
                     name={undefined}

diff --git a/src/views/Resources/index.tsx b/src/views/Resources/index.tsx
@@ -83,7 +83,7 @@ export function Component() {
         {
             id: 2,
             title: strings.ifrcRelatedExternalLinksCapImplementation,
-            url: 'https://cap-workshop.alert-hub.org/2023/index.html',
+            url: 'https://cap-workshop.alert-hub.org/2024/index.html',
         },
         {
             id: 3,
@@ -102,7 +102,6 @@ export function Component() {
             mainSectionClassName={styles.resources}
             title={strings.resourceAlerthubTitle}
             heading={strings.resourceHeadingTitle}
-            description={strings.resourceHeadingDescription}
         >
             <Container
                 heading={strings.earlyWarningResourcesTitle}

diff --git a/src/views/Unsubscribe/i18n.json b/src/views/Unsubscribe/i18n.json
@@ -0,0 +1,10 @@
+{
+    "namespace": "unsubscribe",
+    "strings": {
+        "unsubscriptionFailed": "Failed to unsubscribe. Please try again later.",
+        "unsubscribeSuccessfully": "Subscription successfully deactivated! Redirecting to the homepage...",
+        "unsubscribeConfirmHeading": "Unsubscribe",
+        "unsubscribeConfirmMessage": "Are you sure you want to unsubscribe?",
+        "subscribeNotAvailable": "The subscription is unavailable! Redirecting to the homepage..."
+    }
+}