fix: Added error message when user can't approve membership (#1200)

package.json

@@ -29,6 +29,7 @@
     "mapbox-gl": "^2.15.0",
     "notistack": "^3.0.1",
     "path-browserify": "^1.0.1",
+    "query-string": "^7.1.3",
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.0",
     "react-beautiful-dnd": "^13.1.1",
@@ -46,7 +47,7 @@
     "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.99.0",
-    "terraso-client-shared": "github:techmatters/terraso-client-shared#a0e3a5e",
+    "terraso-client-shared": "github:techmatters/terraso-client-shared#5e56086",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.0",
     "web-vitals": "^3.5.0",

src/account/components/AccountLogin.js

@@ -14,10 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
+import queryString from 'query-string';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { fetchAuthURLs } from 'terraso-client-shared/account/accountSlice';
 import { useFetchData } from 'terraso-client-shared/store/utils';
 import AppleIcon from '@mui/icons-material/Apple';
@@ -40,25 +41,59 @@ const MicrosoftIcon = props => {
   return <SvgIcon component={MicrosoftSvg} {...props} />;
 };
 
-const appendReferrer = (url, referrer) =>
-  referrer ? `${url}&state=${referrer}` : url;
+const appendReferrer = (url, referrer) => {
+  if (!referrer) {
+    return url;
+  }
+  const parsedUrl = queryString.parseUrl(url);
+  const redirectUrl = queryString.stringifyUrl({
+    url: 'account',
+    query: {
+      referrerBase64: btoa(referrer),
+    },
+  });
+  return queryString.stringifyUrl({
+    ...parsedUrl,
+    query: {
+      ...parsedUrl.query,
+      state: redirectUrl,
+    },
+  });
+};
 
 const AccountForm = () => {
   const { t } = useTranslation();
   const { trackEvent } = useAnalytics();
+  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { fetching, urls } = useSelector(state => state.account.login);
+  const hasToken = useSelector(state => state.account.hasToken);
   const referrer = searchParams.get('referrer');
+  const referrerBase64 = searchParams.get('referrerBase64');
 
   useDocumentTitle(t('account.login_document_title'));
   useDocumentDescription(t('account.login_document_description'));
 
   useFetchData(fetchAuthURLs);
 
+  useEffect(() => {
+    if (!hasToken) {
+      return;
+    }
+    const url = referrerBase64 ? atob(referrerBase64) : referrer;
+    navigate(url ? decodeURIComponent(url) : '/', {
+      replace: true,
+    });
+  }, [hasToken, navigate, referrer, referrerBase64]);
+
   if (fetching) {
     return <PageLoader />;
   }
 
+  if (hasToken) {
+    return null;
+  }
+
   return (
     <Stack
       direction="column"

src/account/components/AccountLogin.test.js

@@ -16,7 +16,7 @@
  */
 import { render, screen } from 'tests/utils';
 import React from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import * as accountService from 'terraso-client-shared/account/accountService';
 
 import AccountLogin from 'account/components/AccountLogin';
@@ -26,10 +26,12 @@ jest.mock('terraso-client-shared/account/accountService');
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useSearchParams: jest.fn(),
+  useNavigate: jest.fn(),
 }));
 
 beforeEach(() => {
   useSearchParams.mockReturnValue([new URLSearchParams(), () => {}]);
+  useNavigate.mockReturnValue(jest.fn());
 });
 
 test('AccountLogin: Display error', async () => {
@@ -50,36 +52,100 @@ test('AccountLogin: Display loader', async () => {
 test('AccountLogin: Display buttons', async () => {
   accountService.getAuthURLs.mockReturnValue(
     Promise.resolve({
-      google: 'google.url',
-      apple: 'apple.url',
+      google: 'google.url?param=value',
+      apple: 'apple.url?param=value',
     })
   );
   await render(<AccountLogin />);
   expect(screen.getByText('Continue with Google')).toBeInTheDocument();
+  expect(screen.getByText('Continue with Google')).toHaveAttribute(
+    'href',
+    `google.url?param=value`
+  );
   expect(screen.getByText('Continue with Apple')).toBeInTheDocument();
 });
 
 test('AccountLogin: Add referrer', async () => {
   const searchParams = new URLSearchParams();
-  searchParams.set('referrer', 'groups?sort=-name');
+  const referrer = encodeURIComponent('groups?sort=-name&other=1');
+  searchParams.set('referrer', referrer);
   useSearchParams.mockReturnValue([searchParams]);
   accountService.getAuthURLs.mockReturnValue(
     Promise.resolve({
-      google: 'google.url',
-      apple: 'apple.url',
+      google: 'google.url?param=value',
+      apple: 'apple.url?param=value',
     })
   );
   await render(<AccountLogin />);
   expect(screen.getByText('Continue with Google')).toBeInTheDocument();
+  const state = `account%3FreferrerBase64%3D${btoa(referrer)}`;
   expect(screen.getByText('Continue with Google')).toHaveAttribute(
     'href',
-    'google.url&state=groups?sort=-name'
+    `google.url?param=value&state=${state}`
   );
   expect(screen.getByText('Continue with Apple')).toBeInTheDocument();
   expect(screen.getByText('Continue with Apple')).toHaveAttribute(
     'href',
-    'apple.url&state=groups?sort=-name'
+    `apple.url?param=value&state=${state}`
+  );
+});
+
+test('AccountLogin: Navigate to referrer if logged in', async () => {
+  accountService.getAuthURLs.mockReturnValue(
+    Promise.resolve({
+      google: 'google.url',
+      apple: 'apple.url',
+    })
   );
+  const navigate = jest.fn();
+  useNavigate.mockReturnValue(navigate);
+  const searchParams = new URLSearchParams();
+  const referrer = encodeURIComponent('groups?sort=-name&other=1');
+  searchParams.set('referrer', referrer);
+  useSearchParams.mockReturnValue([searchParams]);
+  await render(<AccountLogin />, {
+    account: {
+      hasToken: true,
+      login: {},
+      currentUser: {
+        data: {
+          email: '[email protected]',
+        },
+      },
+    },
+  });
+  expect(navigate).toHaveBeenCalledWith('groups?sort=-name&other=1', {
+    replace: true,
+  });
+});
+
+test('AccountLogin: Navigate to referrer base 64 if logged in', async () => {
+  accountService.getAuthURLs.mockReturnValue(
+    Promise.resolve({
+      google: 'google.url',
+      apple: 'apple.url',
+    })
+  );
+  const navigate = jest.fn();
+  useNavigate.mockReturnValue(navigate);
+  const searchParams = new URLSearchParams();
+  const referrer = encodeURIComponent('groups?sort=-name&other=1');
+  searchParams.set('referrerBase64', btoa(referrer));
+  useSearchParams.mockReturnValue([searchParams]);
+  await render(<AccountLogin />, {
+    account: {
+      hasToken: true,
+      login: {},
+      currentUser: {
+        data: {
+          email: '[email protected]',
+        },
+      },
+    },
+  });
+  expect(navigate).toHaveBeenCalledWith('groups?sort=-name&other=1', {
+    replace: true,
+  });
 });
 
 test('AccountLogin: Display locale picker', async () => {

src/account/components/RequireAuth.js

@@ -15,6 +15,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 import React, { useCallback } from 'react';
+import queryString from 'query-string';
 import { useSelector } from 'react-redux';
 import { Navigate, useLocation } from 'react-router-dom';
 import { fetchUser } from 'terraso-client-shared/account/accountSlice';
@@ -48,7 +49,15 @@ const RequireAuth = ({ children }) => {
 
   const referrer = generateReferrerPath(location);
 
-  const to = referrer ? `/account?referrer=${referrer}` : '/account';
+  const to = referrer
+    ? queryString.stringifyUrl({
+        url: '/account',
+        query: {
+          referrer,
+        },
+      })
+    : '/account';
+
   return <Navigate to={to} replace />;
 };