Integrate get application terms of use in account linking

package.json

@@ -17,7 +17,7 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.42",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.44",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

public/locales/en/signUp.json

@@ -64,8 +64,7 @@
       "primaryLabel": "General Terms of Use",
       "label": "I have read and accept the Dataverse General Terms of Use as outlined above.",
       "description": "The terms and conditions for using the application and services.",
-      "required": "Please check the box to indicate your acceptance of the General Terms of Use.",
-      "noTerms": "There are no Terms of Use for this Dataverse installation."
+      "required": "Please check the box to indicate your acceptance of the General Terms of Use."
     }
   },
   "submit": "Create Account",

src/info/infrastructure/repositories/DataverseInfoJSDataverseRepository.ts

@@ -1,5 +1,8 @@
-import { getDataverseVersion, ReadError } from '@iqss/dataverse-client-javascript'
-import { axiosInstance } from '@/axiosInstance'
+import {
+  getApplicationTermsOfUse,
+  getDataverseVersion,
+  ReadError
+} from '@iqss/dataverse-client-javascript'
 import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
 import { DataverseVersion } from '@/info/domain/models/DataverseVersion'
 import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
@@ -30,12 +33,9 @@ export class DataverseInfoJSDataverseRepository implements DataverseInfoReposito
       })
   }
 
-  async getTermsOfUse() {
-    //TODO - This is not actually used and should be replaced with a js-dataverse use case when we have available the endpoint to get the installation terms of use not api terms of use.
-    const response = await axiosInstance.get<{ data: { message: TermsOfUse } }>(
-      '/api/v1/info/apiTermsOfUse',
-      { excludeToken: true }
-    )
-    return JSTermsOfUseMapper.toSanitizedTermsOfUse(response.data.data.message)
+  getTermsOfUse(): Promise<TermsOfUse> {
+    return getApplicationTermsOfUse
+      .execute()
+      .then((termsOfUse) => JSTermsOfUseMapper.toSanitizedTermsOfUse(termsOfUse))
   }
 }

src/sections/sign-up/SignUp.tsx

@@ -2,16 +2,22 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Tabs } from '@iqss/dataverse-design-system'
 import { UserRepository } from '@/users/domain/repositories/UserRepository'
+import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
 import { useLoading } from '../loading/LoadingContext'
 import { ValidTokenNotLinkedAccountForm } from './valid-token-not-linked-account-form/ValidTokenNotLinkedAccountForm'
 import styles from './SignUp.module.scss'
 
 interface SignUpProps {
   userRepository: UserRepository
+  dataverseInfoRepository: DataverseInfoRepository
   hasValidTokenButNotLinkedAccount: boolean
 }
 
-export const SignUp = ({ userRepository, hasValidTokenButNotLinkedAccount }: SignUpProps) => {
+export const SignUp = ({
+  userRepository,
+  dataverseInfoRepository,
+  hasValidTokenButNotLinkedAccount
+}: SignUpProps) => {
   const { t } = useTranslation('signUp')
   const { setIsLoading } = useLoading()
 
@@ -58,7 +64,10 @@ export const SignUp = ({ userRepository, hasValidTokenButNotLinkedAccount }: Sig
         <Tabs.Tab eventKey="accountInfo" title={t('accountInfo')}>
           <div className={styles['tab-container']}>
             {hasValidTokenButNotLinkedAccount && (
-              <ValidTokenNotLinkedAccountForm userRepository={userRepository} />
+              <ValidTokenNotLinkedAccountForm
+                userRepository={userRepository}
+                dataverseInfoRepository={dataverseInfoRepository}
+              />
             )}
           </div>
         </Tabs.Tab>

src/sections/sign-up/SignUpFactory.tsx

@@ -2,10 +2,11 @@ import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { SignUp } from './SignUp'
 import { QueryParamKey } from '../Route.enum'
-
 import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
+import { DataverseInfoJSDataverseRepository } from '@/info/infrastructure/repositories/DataverseInfoJSDataverseRepository'
 
 const userRepository = new UserJSDataverseRepository()
+const dataverseInfoRepository = new DataverseInfoJSDataverseRepository()
 
 export class SignUpFactory {
   static create(): ReactElement {
@@ -22,6 +23,7 @@ function SignUpWithSearchParams() {
   return (
     <SignUp
       userRepository={userRepository}
+      dataverseInfoRepository={dataverseInfoRepository}
       hasValidTokenButNotLinkedAccount={hasValidTokenButNotLinkedAccount}
     />
   )

src/sections/sign-up/valid-token-not-linked-account-form/FormFields.module.scss

@@ -19,10 +19,12 @@
 }
 
 .terms-of-use-wrapper {
-  max-height: 200px;
+  height: 100px;
+  min-height: 100px;
   padding: 12px;
   overflow-y: auto;
   background-color: #f5f5f5;
   border: solid 1px $dv-border-color;
   border-radius: 6px;
+  resize: vertical;
 }

src/sections/sign-up/valid-token-not-linked-account-form/FormFields.tsx

@@ -318,7 +318,7 @@ export const FormFields = ({ userRepository, formDefaultValues, termsOfUse }: Fo
                     <div
                       className={styles['terms-of-use-wrapper']}
                       dangerouslySetInnerHTML={{
-                        __html: termsOfUse ? termsOfUse : t('fields.termsAccepted.noTerms')
+                        __html: termsOfUse
                       }}
                     />
 

src/sections/sign-up/valid-token-not-linked-account-form/ValidTokenNotLinkedAccountForm.tsx

@@ -1,24 +1,30 @@
 import { useContext } from 'react'
 import { AuthContext } from 'react-oauth2-code-pkce'
+import { Alert } from '@iqss/dataverse-design-system'
 import { UserRepository } from '@/users/domain/repositories/UserRepository'
-// import { useGetTermsOfUse } from '@/shared/hooks/useGetTermsOfUse'
+import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
+import { useGetTermsOfUse } from '@/shared/hooks/useGetTermsOfUse'
 import { OIDC_STANDARD_CLAIMS, type ValidTokenNotLinkedAccountFormData } from './types'
 import { ValidTokenNotLinkedAccountFormHelper } from './ValidTokenNotLinkedAccountFormHelper'
 import { FormFields } from './FormFields'
-// import { FormFieldsSkeleton } from './FormFieldsSkeleton'
+import { FormFieldsSkeleton } from './FormFieldsSkeleton'
 
 interface ValidTokenNotLinkedAccountFormProps {
   userRepository: UserRepository
+  dataverseInfoRepository: DataverseInfoRepository
 }
 
 export const ValidTokenNotLinkedAccountForm = ({
-  userRepository
+  userRepository,
+  dataverseInfoRepository
 }: ValidTokenNotLinkedAccountFormProps) => {
   const { tokenData } = useContext(AuthContext)
 
-  // TODO - Use actual terms of use when available in API 👇
-  // const { termsOfUse, isLoading: isLoadingTermsOfUse } =
-  //   useGetTermsOfUse(dataverseInfoRepository)
+  const {
+    termsOfUse,
+    isLoading: isLoadingTermsOfUse,
+    error: errorTermsOfUse
+  } = useGetTermsOfUse(dataverseInfoRepository)
 
   const defaultUserName =
     ValidTokenNotLinkedAccountFormHelper.getTokenDataValue<string>(
@@ -58,15 +64,19 @@ export const ValidTokenNotLinkedAccountForm = ({
     termsAccepted: false
   }
 
-  // if (isLoadingTermsOfUse) {
-  //   return <FormFieldsSkeleton />
-  // }
+  if (isLoadingTermsOfUse) {
+    return <FormFieldsSkeleton />
+  }
+
+  if (errorTermsOfUse) {
+    return <Alert variant="danger">{errorTermsOfUse}</Alert>
+  }
 
   return (
     <FormFields
       userRepository={userRepository}
       formDefaultValues={formDefaultValues}
-      termsOfUse=""
+      termsOfUse={termsOfUse}
     />
   )
 }

src/sections/sign-up/valid-token-not-linked-account-form/useSubmitUser.ts

@@ -69,7 +69,8 @@ export const useSubmitUser = (
       })
       .catch((err: WriteError) => {
         const error = new JSDataverseWriteErrorHandler(err)
-        const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage()
+        const formattedError =
+          error.getReasonWithoutStatusCode() ?? /* istanbul ignore next */ error.getErrorMessage()
 
         setSubmitError(formattedError)
         setSubmissionStatus(SubmissionStatus.Errored)

src/shared/core/domain/models/PublicationStatus.ts

@@ -1,5 +1,7 @@
 export enum PublicationStatus {
   Published = 'Published',
   Unpublished = 'Unpublished',
-  Draft = 'Draft'
+  Draft = 'Draft',
+  Deaccessioned = 'Deaccessioned',
+  InReview = 'In Review'
 }

src/shared/hooks/useGetTermsOfUse.ts

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInfoRepository'
+import { ReadError } from '@iqss/dataverse-client-javascript'
+import { JSDataverseReadErrorHandler } from '../helpers/JSDataverseReadErrorHandler'
 
 interface UseGetTermsOfUseReturnType {
   termsOfUse: string
@@ -22,11 +24,15 @@ export const useGetTermsOfUse = (
 
         setTermsOfUse(termsOfUse)
       } catch (err) {
-        const errorMessage =
-          err instanceof Error && err.message
-            ? err.message
-            : 'Something went wrong getting the use of terms. Try again later.'
-        setError(errorMessage)
+        if (err instanceof ReadError) {
+          const error = new JSDataverseReadErrorHandler(err)
+          const formattedError =
+            error.getReasonWithoutStatusCode() ?? /* istanbul ignore next */ error.getErrorMessage()
+
+          setError(formattedError)
+        } else {
+          setError('Something went wrong getting the use of terms. Try again later.')
+        }
       } finally {
         setIsLoading(false)
       }

src/stories/shared-mock-repositories/info/DataverseInfoMockErrorRepository.ts

@@ -0,0 +1,22 @@
+import { DataverseVersion } from '@/info/domain/models/DataverseVersion'
+import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
+import { FakerHelper } from '@tests/component/shared/FakerHelper'
+import { DataverseInfoMockRepository } from './DataverseInfoMockRepository'
+
+export class DataverseInfoMockErrorRepository implements DataverseInfoMockRepository {
+  getVersion(): Promise<DataverseVersion> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject()
+      }, FakerHelper.loadingTimout())
+    })
+  }
+
+  getTermsOfUse(): Promise<TermsOfUse> {
+    return new Promise((_resolve, reject) => {
+      setTimeout(() => {
+        reject()
+      }, FakerHelper.loadingTimout())
+    })
+  }
+}

src/stories/sign-up/SignUp.stories.tsx

@@ -4,6 +4,9 @@ import { WithI18next } from '../WithI18next'
 import { SignUp } from '@/sections/sign-up/SignUp'
 import { WithOIDCAuthContext } from '../WithOIDCAuthContext'
 import { UserMockRepository } from '../shared-mock-repositories/user/UserMockRepository'
+import { DataverseInfoMockRepository } from '../shared-mock-repositories/info/DataverseInfoMockRepository'
+import { DataverseInfoMockLoadingRepository } from '../shared-mock-repositories/info/DataverseInfoMockLoadingkRepository'
+import { DataverseInfoMockErrorRepository } from '../shared-mock-repositories/info/DataverseInfoMockErrorRepository'
 
 const meta: Meta<typeof SignUp> = {
   title: 'Pages/Sign Up',
@@ -19,6 +22,30 @@ type Story = StoryObj<typeof SignUp>
 
 export const ValidTokenWithNotLinkedAccount: Story = {
   render: () => (
-    <SignUp userRepository={new UserMockRepository()} hasValidTokenButNotLinkedAccount />
+    <SignUp
+      userRepository={new UserMockRepository()}
+      dataverseInfoRepository={new DataverseInfoMockRepository()}
+      hasValidTokenButNotLinkedAccount
+    />
+  )
+}
+
+export const LoadingTermsOfUse: Story = {
+  render: () => (
+    <SignUp
+      userRepository={new UserMockRepository()}
+      dataverseInfoRepository={new DataverseInfoMockLoadingRepository()}
+      hasValidTokenButNotLinkedAccount
+    />
+  )
+}
+
+export const FailedToFetchTermsOfUse: Story = {
+  render: () => (
+    <SignUp
+      userRepository={new UserMockRepository()}
+      dataverseInfoRepository={new DataverseInfoMockErrorRepository()}
+      hasValidTokenButNotLinkedAccount
+    />
   )
 }

tests/component/info/models/TermsOfUseMother.ts

@@ -2,6 +2,10 @@ import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
 
 export class TermsOfUseMother {
   static create(): TermsOfUse {
+    return 'Be nice to each other!'
+  }
+
+  static createWithOnClickScript(): TermsOfUse {
     return '<h3>Terms of Use SPA dev</h3><p>Please see our full <a href="https://beta.dataverse.org/spa/">terms of use</a></p><p onclick="alert(\'this alert is to text sanitization\')">Thanks for reading!</p>'
   }
 

tests/component/sections/sign-up/SignUp.spec.tsx

@@ -26,7 +26,11 @@ describe('SignUp', () => {
           error: null,
           login: () => {} // 👈 deprecated
         }}>
-        <SignUp userRepository={userRepository} hasValidTokenButNotLinkedAccount={true} />
+        <SignUp
+          userRepository={userRepository}
+          dataverseInfoRepository={dataverseInfoRepository}
+          hasValidTokenButNotLinkedAccount={true}
+        />
       </AuthContext.Provider>
     )
 
@@ -52,7 +56,11 @@ describe('SignUp', () => {
           error: null,
           login: () => {} // 👈 deprecated
         }}>
-        <SignUp userRepository={userRepository} hasValidTokenButNotLinkedAccount={false} />
+        <SignUp
+          userRepository={userRepository}
+          dataverseInfoRepository={dataverseInfoRepository}
+          hasValidTokenButNotLinkedAccount={false}
+        />
       </AuthContext.Provider>
     )