Merge pull request #210 from IFRCGo/feature/subscription-redirect

Fix subscription redirect issue
IFRCGo · Dec 18, 2024 · 3c48b1c · 3c48b1c
2 parents 99503a6 + 63680d3
commit 3c48b1c
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 96 deletions.
diff --git a/backend b/backend
diff --git a/src/App/redirects/SubscriptionDetailsRedirect.tsx b/src/App/redirects/SubscriptionDetailsRedirect.tsx
@@ -0,0 +1,34 @@
+import {
+    generatePath,
+    useNavigate,
+    useParams,
+} from 'react-router-dom';
+
+import routes from '#routes';
+
+interface SubscriptionDetailsParams {
+    subscriptionId: string | undefined;
+    [key: string]: string | undefined;
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const { subscriptionId } = useParams<SubscriptionDetailsParams>();
+    const navigate = useNavigate();
+
+    const subscriptionDetailsLink = (subscriptionId) ? ({
+        pathname: (generatePath(
+            routes.subscriptionDetail.absolutePath,
+            { subscriptionId },
+        )),
+    })
+        : routes.pageNotFound.path;
+
+    if (subscriptionDetailsLink) {
+        navigate(subscriptionDetailsLink);
+    }
+
+    return null;
+}
+
+Component.displayName = 'SubscriptionDetailsRedirect';
diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
@@ -72,6 +72,20 @@ const subscriptionDetail = customWrapRoute({
     },
 });
 
+const subscriptionDetailRedirect = customWrapRoute({
+    parent: rootLayout,
+    path: 'permalink/subscription-detail/:subscriptionId',
+    component: {
+        render: () => import('../redirects/SubscriptionDetailsRedirect'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Subscription Details',
+        visibility: 'is-authenticated',
+    },
+});
+
 const homeIndex = customWrapRoute({
     parent: homeLayout,
     index: true,
@@ -192,7 +206,7 @@ const alertDetailRedirect = customWrapRoute({
     parent: rootLayout,
     path: 'permalink/alert-detail/:alertId',
     component: {
-        render: () => import('../redirects/AlertDetailsRedirect.tsx'),
+        render: () => import('../redirects/AlertDetailsRedirect'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -316,7 +330,7 @@ const resetPasswordRedirect = customWrapRoute({
     parent: rootLayout,
     path: 'permalink/user-password-reset/:userId/:resetToken',
     component: {
-        render: () => import('../redirects/RecoverAccountRedirect.tsx'),
+        render: () => import('../redirects/RecoverAccountRedirect'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -409,6 +423,7 @@ const wrappedRoutes = {
     alertDetailRedirect,
     unsubscribeRedirect,
     unsubscribe,
+    subscriptionDetailRedirect,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
@@ -14,6 +14,7 @@ import {
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToComponent } from '@ifrc-go/ui/utils';
+import { isDefined } from '@togglecorp/fujs';
 import {
     createSubmitHandler,
     emailCondition,
@@ -129,7 +130,7 @@ export function Component() {
                 } else {
                     const errorMessages = response?.errors
                         ?.map((errors: { messages: string; }) => errors.messages)
-                        .filter((message: string) => message)
+                        .filter(isDefined)
                         .join(', ');
                     alert.show(errorMessages, { variant: 'danger' });
                 }

diff --git a/src/views/MySubscriptions/index.tsx b/src/views/MySubscriptions/index.tsx
@@ -224,7 +224,7 @@ export function Component() {
                 } else {
                     const errorMessages = response?.errors
                         ?.map((error: { messages: string; }) => error.messages)
-                        .filter((message: string) => message)
+                        .filter(isDefined)
                         .join(', ');
                     alert.show(errorMessages, { variant: 'danger' });
                 }
@@ -263,7 +263,7 @@ export function Component() {
                 } else {
                     const errorMessages = response?.errors
                         ?.map((error: { messages: string; }) => error.messages)
-                        .filter((message: string) => message)
+                        .filter(isDefined)
                         .join(', ');
                     alert.show(errorMessages, { variant: 'danger' });
                 }

diff --git a/src/views/NewSubscriptionModal/index.tsx b/src/views/NewSubscriptionModal/index.tsx
@@ -327,7 +327,7 @@ function NewSubscriptionModal(props: Props) {
                 } else {
                     const errorMessages = response?.errors
                         ?.map((error: { messages: string; }) => error.messages)
-                        .filter((message: string) => message)
+                        .filter(isDefined)
                         .join(', ');
                     alert.show(errorMessages, { variant: 'danger' });
                 }
@@ -363,7 +363,7 @@ function NewSubscriptionModal(props: Props) {
                 } else {
                     const errorMessages = response?.errors
                         ?.map((error: { messages: string; }) => error.messages)
-                        .filter((message: string) => message)
+                        .filter(isDefined)
                         .join(', ');
                     alert.show(errorMessages, { variant: 'danger' });
                 }

diff --git a/src/views/RecoverAccountConfirm/index.tsx b/src/views/RecoverAccountConfirm/index.tsx
@@ -12,7 +12,10 @@ import {
     PasswordInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { isTruthyString } from '@togglecorp/fujs';
+import {
+    isDefined,
+    isTruthyString,
+} from '@togglecorp/fujs';
 import {
     addCondition,
     createSubmitHandler,
@@ -139,7 +142,7 @@ export function Component() {
                 ));
                 const errorMessages = data.public.passwordResetConfirm?.errors
                     ?.map((error: { messages: string; }) => error.messages)
-                    .filter((message: string) => message)
+                    .filter(isDefined)
                     .join(', ');
                 alert.show(errorMessages, { variant: 'danger' });
             }

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

diff --git a/src/views/Unsubscribe/index.tsx b/src/views/Unsubscribe/index.tsx
@@ -1,6 +1,5 @@
 import {
     useCallback,
-    useMemo,
     useState,
 } from 'react';
 import {
@@ -10,117 +9,55 @@ import {
 import {
     gql,
     useMutation,
-    useQuery,
 } from '@apollo/client';
 import {
     ConfirmButton,
     Message,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
-import { isNotDefined } from '@togglecorp/fujs';
+import { isDefined } from '@togglecorp/fujs';
 
 import Page from '#components/Page';
 import {
-    AlertSubscriptionQuery,
-    AlertSubscriptionQueryVariables,
-    UnsubscriptionMutation,
-    UnsubscriptionMutationVariables,
+    UnsubscribeAlertSubscriptionMutation,
+    UnsubscribeAlertSubscriptionMutationVariables,
 } from '#generated/types/graphql';
 import useAlert from '#hooks/useAlert';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-const ALERT_SUBSCRIPTION = gql`
-    query AlertSubscription(
-        $pk: ID!
+const UNSUBSCRIBE_ALERT = gql`
+    mutation UnsubscribeAlertSubscription(
+        $data: UserAlertSubscriptionUnsubscribeInput!
     ) {
-          private {
-            userAlertSubscription(pk: $pk) {
-                id
-                filterAlertCountryId
-                filterAlertAdmin1s
-                name
-                isActive
-            }
-        }
-    }
-`;
-
-const UPDATE_SUBSCRIPTION = gql`
-    mutation Unsubscription(
-        $subscriptionId: ID!,
-        $data: UserAlertSubscriptionInput!,
-    ) {
-        private {
-            updateUserAlertSubscription(
-                id: $subscriptionId,
-                data: $data,
-            ) {
-                errors
+        public {
+            unsubscribeUserAlertSubscription(data: $data) {
                 ok
-                result {
-                    id
-                    isActive
-                }
+                errors
             }
         }
     }
 `;
 
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
-    const { subscriptionId } = useParams<{ subscriptionId?: string, token?: string }>();
+    const { subscriptionId, token } = useParams<{ subscriptionId?: string, token?: string }>();
     const alert = useAlert();
     const navigate = useNavigate();
     const strings = useTranslation(i18n);
     const [isErrored, setIsError] = useState(false);
 
-    const decodedSubscriptionId = typeof subscriptionId === 'string'
-        ? atob(subscriptionId) : undefined;
-
-    const variables = useMemo(() => (decodedSubscriptionId
-        ? { pk: decodedSubscriptionId } : undefined
-    ), [decodedSubscriptionId]);
-
-    const {
-        data: alertSubscription,
-    } = useQuery<
-        AlertSubscriptionQuery,
-        AlertSubscriptionQueryVariables
-    >(
-        ALERT_SUBSCRIPTION,
-        {
-            skip: isNotDefined(variables),
-            variables,
-            onCompleted: (data) => {
-                if (!data?.private?.userAlertSubscription) {
-                    alert.show(
-                        strings.subscribeNotAvailable,
-                        { variant: 'info' },
-                    );
-                    navigate('/');
-                }
-            },
-            onError: () => {
-                alert.show(
-                    strings.unsubscriptionFailed,
-                    { variant: 'danger' },
-                );
-            },
-        },
-    );
-
     const [
         subscriptionUpdate,
     ] = useMutation<
-        UnsubscriptionMutation,
-        UnsubscriptionMutationVariables
+        UnsubscribeAlertSubscriptionMutation,
+        UnsubscribeAlertSubscriptionMutationVariables
     >(
-        UPDATE_SUBSCRIPTION,
+        UNSUBSCRIBE_ALERT,
         {
             onCompleted: (response) => {
-                const subscriptionResponse = response?.private.updateUserAlertSubscription;
+                const subscriptionResponse = response?.public.unsubscribeUserAlertSubscription;
                 if (!response) {
                     return;
                 }
@@ -132,6 +69,11 @@ export function Component() {
                     navigate('/');
                 } else {
                     setIsError(true);
+                    const errorMessages = subscriptionResponse?.errors
+                        ?.map((error: { messages: string; }) => error.messages)
+                        .filter(isDefined)
+                        .join(', ');
+                    alert.show(errorMessages, { variant: 'danger' });
                 }
             },
             onError: () => {
@@ -144,24 +86,20 @@ export function Component() {
     );
 
     const handleUnsubscribe = useCallback(() => {
-        const data = alertSubscription?.private?.userAlertSubscription;
-        if (subscriptionId && data) {
+        if (subscriptionId && token) {
             subscriptionUpdate({
                 variables: {
-                    subscriptionId,
                     data: {
-                        isActive: false,
-                        filterAlertAdmin1s: data.filterAlertAdmin1s,
-                        filterAlertCountry: data.filterAlertCountryId,
-                        name: data.name,
+                        uuid: subscriptionId,
+                        token,
                     },
                 },
             });
         }
     }, [
-        alertSubscription?.private?.userAlertSubscription,
         subscriptionId,
         subscriptionUpdate,
+        token,
     ]);
 
     if (isErrored) {
+5 −0		.pre-commit-config.yaml
+1 −1		README.md
+3 −3		apps/cap_feed/factories.py
+2 −0		apps/cap_feed/management/commands/create_fake_alerts.py
+11 −2		apps/subscription/emails.py
+4 −2		apps/subscription/serializers.py
+15 −9		apps/subscription/tasks.py
+15 −1		apps/subscription/tests/test_subscription_alert_tagging.py
+1 −1		apps/user/serializers.py
+1 −3		deploy/run_worker.sh
+3 −0		helm/templates/api/deployment.yaml
+6 −0		helm/templates/api/ingress.yaml
+9 −0		helm/templates/argo-hooks/hook-job.yaml
+54 −0		helm/templates/celery-flower/deployment.yaml
+24 −0		helm/templates/celery-flower/service.yaml
+10 −0		helm/templates/config/configmap.yaml
+1 −6		helm/templates/worker-beat/deployment.yaml
+32 −15		helm/templates/worker/deployment.yaml
+33 −10		helm/values-production.yaml
+3 −0		helm/values-sandbox.yaml
+35 −11		helm/values-staging.yaml
+2 −0		helm/values-test.yaml
+45 −8		helm/values.yaml
+20 −19		main/celery.py
+1 −0		main/graphql/schema.py
+67 −1		poetry.lock
+1 −0		pyproject.toml
+6 −0		schema.graphql
+2 −2		templates/emails/user/password_reset/body.html
+1 −3		utils/hcaptcha.py