feat: use 'terms' param to provide terms from API

City-of-Helsinki · Oct 27, 2023 · fdc2960 · fdc2960
1 parent d75104a
commit fdc2960
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 16 deletions.
diff --git a/backend/benefit/users/api/v1/serializers.py b/backend/benefit/users/api/v1/serializers.py
@@ -48,8 +48,14 @@ class Meta:
 
     @extend_schema_field(TermsSerializer())
     def get_terms_of_service_in_effect(self, obj):
+        request = self.context.get("request")
+        include_terms = (
+            request.query_params.get("terms")
+            if request and request.query_params
+            else None
+        )
         terms = Terms.objects.get_terms_in_effect(TermsType.TERMS_OF_SERVICE)
-        if terms:
+        if terms and include_terms:
             # If given the request in context, DRF will output the URL for FileFields
             context = {"request": self.context.get("request")}
             return TermsSerializer(terms, context=context).data

diff --git a/frontend/benefit/applicant/src/components/layout/Layout.tsx b/frontend/benefit/applicant/src/components/layout/Layout.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/router';
 import * as React from 'react';
 import useAuth from 'shared/hooks/useAuth';
 import theme from 'shared/styles/theme';
+import { getLocalStorageItem } from 'shared/utils/localstorage.utils';
 import { DefaultTheme } from 'styled-components';
 
 import { ROUTES } from '../../constants';
@@ -33,7 +34,7 @@ const selectBgColor = (pathname: string): keyof DefaultTheme['colors'] => {
 
 const Layout: React.FC<Props> = ({ children, ...rest }) => {
   const { isAuthenticated } = useAuth();
-  const [isTermsOfServiceApproved, setIsTermsOfSerivceApproved] =
+  const [isTermsOfServiceApproved, setIsTermsOfServiceApproved] =
     React.useState(false);
   const router = useRouter();
 
@@ -44,11 +45,10 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
 
   React.useEffect(() => {
     if (IS_CLIENT) {
-      setIsTermsOfSerivceApproved(
+      setIsTermsOfServiceApproved(
         // eslint-disable-next-line scanjs-rules/identifier_localStorage
-        localStorage.getItem(
-          LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED
-        ) === 'true'
+        getLocalStorageItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED) ===
+          'true'
       );
     }
   }, []);
@@ -60,7 +60,7 @@ const Layout: React.FC<Props> = ({ children, ...rest }) => {
       !isAccessibilityStatement &&
       !isTermsOfServiceApproved ? (
         <TermsOfService
-          setIsTermsOfSerivceApproved={setIsTermsOfSerivceApproved}
+          setIsTermsOfServiceApproved={setIsTermsOfServiceApproved}
         />
       ) : (
         children

diff --git a/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx b/frontend/benefit/applicant/src/components/termsOfService/TermsOfService.tsx
@@ -37,11 +37,11 @@ export const $Markdown = styled(ReactMarkdown)`
 `;
 
 type TermsOfServiceProps = {
-  setIsTermsOfSerivceApproved: (isTermsOfServiceApproved: boolean) => void;
+  setIsTermsOfServiceApproved: (isTermsOfServiceApproved: boolean) => void;
 };
 
 const TermsOfService: React.FC<TermsOfServiceProps> = ({
-  setIsTermsOfSerivceApproved,
+  setIsTermsOfServiceApproved,
 }) => {
   const {
     theme,
@@ -50,7 +50,7 @@ const TermsOfService: React.FC<TermsOfServiceProps> = ({
     termsInEffectMarkdown,
     user,
     approveTermsOfService,
-  } = useTermsOfServiceData(setIsTermsOfSerivceApproved);
+  } = useTermsOfServiceData(setIsTermsOfServiceApproved);
 
   const { mutate } = useApproveTermsOfServiceMutation();
 

diff --git a/frontend/benefit/applicant/src/hooks/useTermsOfServiceData.ts b/frontend/benefit/applicant/src/hooks/useTermsOfServiceData.ts
@@ -3,6 +3,7 @@ import { TermsProp, User } from 'benefit-shared/types/application';
 import { TFunction } from 'next-i18next';
 import React from 'react';
 import { Language } from 'shared/i18n/i18n';
+import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
 import { capitalize } from 'shared/utils/string.utils';
 import { DefaultTheme, useTheme } from 'styled-components';
 
@@ -21,7 +22,7 @@ type ExtendedComponentProps = {
 };
 
 const useTermsOfServiceData = (
-  setIsTermsOfSerivceApproved: (isTermsOfServiceApproved: boolean) => void
+  setIsTermsOfServiceApproved: (isTermsOfServiceApproved: boolean) => void
 ): ExtendedComponentProps => {
   const locale = useLocale();
   const textLocale = capitalize(locale);
@@ -39,16 +40,16 @@ const useTermsOfServiceData = (
   );
 
   const approveTermsOfService = (): void => {
-    setIsTermsOfSerivceApproved(true);
+    setIsTermsOfServiceApproved(true);
     // eslint-disable-next-line scanjs-rules/identifier_localStorage
-    localStorage.setItem(
+    setLocalStorageItem(
       LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED,
       'true'
     );
   };
 
   const getTermsMarkdownByLanguage = (): string => {
-    if (!user.termsOfServiceInEffect) {
+    if (!user?.termsOfServiceInEffect) {
       return '';
     }
     switch (locale) {

diff --git a/frontend/benefit/applicant/src/hooks/useUserQuery.ts b/frontend/benefit/applicant/src/hooks/useUserQuery.ts
@@ -7,7 +7,10 @@ import { useQuery, UseQueryResult } from 'react-query';
 import showErrorToast from 'shared/components/toast/show-error-toast';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import useLocale from 'shared/hooks/useLocale';
-import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
+import {
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from 'shared/utils/localstorage.utils';
 
 import { LOCAL_STORAGE_KEYS } from '../constants';
 
@@ -42,9 +45,16 @@ const useUserQuery = (
     }
   };
 
+  const params =
+    getLocalStorageItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED) ===
+    'true'
+      ? {}
+      : { terms: 1 };
+
   return useQuery(
     queryKeys ?? `${BackendEndpoint.USER}`,
-    () => handleResponse<UserData>(axios.get(BackendEndpoint.USER_ME)),
+    () =>
+      handleResponse<UserData>(axios.get(BackendEndpoint.USER_ME, { params })),
     {
       refetchInterval: FIVE_MINUTES,
       enabled: !logout,