Merge pull request #609 from IQSS/569-implement-collection-page-contact-button-and-form

Contact Collection and Dataset owner feature

Author: ofahimIQSS

public/locales/en/shared.json

@@ -152,5 +152,40 @@
       "editSuccess": "Collection updated successfully."
     },
     "createCollection": "Create Collection"
+  },
+  "contact": {
+    "message": "Message",
+    "subject": "Subject",
+    "title": {
+      "collection": "Contact",
+      "dataset": "Contact Owner"
+    },
+    "contactCollection": "Email Collection Contact",
+    "contactDataset": "Email Dataset Contact",
+    "helpText": "Email the contact for this collection.",
+    "verificationText": "Please fill this out to prove you are not a robot.",
+    "contactSuccess": "Message sent.",
+    "validation": {
+      "captchaInput": {
+        "required": "Validation is required.",
+        "invalid": "Incorrect answer.",
+        "onlyNumber": "Only numbers are allowed.",
+        "maxLength": "Answer cannot exceed {{maxLength}} ."
+      },
+      "email": {
+        "invalid": "Invalid email format.",
+        "required": "Email is required.",
+        "maxLength": "Email cannot exceed {{maxLength}} ."
+      },
+      "subject": {
+        "required": "Subject is required.",
+        "maxLength": "Subject cannot exceed {{maxLength}} ."
+      },
+      "message": {
+        "required": "Message is required.",
+        "maxLength": "Message cannot exceed {{maxLength}} ."
+      }
+    },
+    "defaultFeedbackSubmitError": "An error occurred while submitting your feedback. Please try again later."
   }
 }

src/contact/domain/models/ContactResponse.ts

@@ -0,0 +1,5 @@
+export interface ContactResponse {
+  subject: string
+  body: string
+  fromEmail: string
+}

src/contact/domain/repositories/ContactRepository.ts

@@ -0,0 +1,6 @@
+import { FeedbackDTO } from '../useCases/FeedbackDTO'
+import { ContactResponse } from '../models/ContactResponse'
+
+export interface ContactRepository {
+  sendFeedbacktoOwners: (feedbackDTO: FeedbackDTO) => Promise<ContactResponse[]>
+}

src/contact/domain/useCases/FeedbackDTO.ts

@@ -0,0 +1,7 @@
+export interface FeedbackDTO {
+  targetId?: number
+  identifier?: string
+  fromEmail: string
+  body: string
+  subject: string
+}

src/contact/domain/useCases/sendFeedbacktoOwners.ts

@@ -0,0 +1,13 @@
+import { ContactRepository } from '../repositories/ContactRepository'
+import { WriteError } from '@iqss/dataverse-client-javascript'
+import { FeedbackDTO } from '../useCases/FeedbackDTO'
+import { ContactResponse } from '../models/ContactResponse'
+
+export async function sendFeedbacktoOwners(
+  ContactRepository: ContactRepository,
+  FeedbackDTO: FeedbackDTO
+): Promise<ContactResponse[]> {
+  return ContactRepository.sendFeedbacktoOwners(FeedbackDTO).catch((error: WriteError) => {
+    throw new Error(error.message)
+  })
+}

src/contact/infrastructure/ContactJSDataverseRepository.ts

@@ -0,0 +1,10 @@
+import { submitContactInfo } from '@iqss/dataverse-client-javascript'
+import { ContactResponse } from '../domain/models/ContactResponse'
+import { ContactRepository } from '../domain/repositories/ContactRepository'
+import { FeedbackDTO } from '../domain/useCases/FeedbackDTO'
+
+export class ContactJSDataverseRepository implements ContactRepository {
+  async sendFeedbacktoOwners(feedbackDTO: FeedbackDTO): Promise<ContactResponse[]> {
+    return submitContactInfo.execute(feedbackDTO).then((response: ContactResponse[]) => response)
+  }
+}

src/sections/collection/Collection.tsx

@@ -14,9 +14,11 @@ import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
 import { ShareCollectionButton } from './share-collection-button/ShareCollectionButton'
+import { ContactButton } from '@/sections/shared/contact/ContactButton'
 import { EditCollectionDropdown } from './edit-collection-dropdown/EditCollectionDropdown'
 import { FeaturedItems } from './featured-items/FeaturedItems'
 import styles from './Collection.module.scss'
+import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
 
 interface CollectionProps {
   collectionRepository: CollectionRepository
@@ -26,6 +28,7 @@ interface CollectionProps {
   edited?: boolean
   collectionQueryParams: UseCollectionQueryParamsReturnType
   infiniteScrollEnabled?: boolean
+  contactRepository: ContactRepository
 }
 
 export function Collection({
@@ -34,7 +37,8 @@ export function Collection({
   created,
   published,
   edited,
-  collectionQueryParams
+  collectionQueryParams,
+  contactRepository
 }: CollectionProps) {
   useScrollTop()
   const { t } = useTranslation('collection')
@@ -47,7 +51,6 @@ export function Collection({
     collectionIdOrAlias: collectionIdFromParams,
     collectionRepository
   })
-
   const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection)
   const canUserEditCollection = Boolean(collectionUserPermissions?.canEditCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
@@ -94,8 +97,12 @@ export function Collection({
             <div className={styles['metrics-actions-container']}>
               <div className={styles.metrics}></div>
               <div className={styles['right-content']}>
-                {/* 👇 Here should go Contact button also */}
-                {/* <ContactButton /> */}
+                <ContactButton
+                  toContactName={collection.name}
+                  contactObjectType="collection"
+                  id={collection.id}
+                  contactRepository={contactRepository}
+                />
 
                 <ShareCollectionButton />
 

src/sections/collection/CollectionFactory.tsx

@@ -1,11 +1,14 @@
 import { ReactElement } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
 import { CollectionJSDataverseRepository } from '../../collection/infrastructure/repositories/CollectionJSDataverseRepository'
+import { ContactJSDataverseRepository } from '@/contact/infrastructure/ContactJSDataverseRepository'
 import { Collection } from './Collection'
 import { INFINITE_SCROLL_ENABLED } from './config'
 import { useGetCollectionQueryParams } from './useGetCollectionQueryParams'
 
 const collectionRepository = new CollectionJSDataverseRepository()
+const contactRepository = new ContactJSDataverseRepository()
+
 export class CollectionFactory {
   static create(): ReactElement {
     return <CollectionWithSearchParams />
@@ -32,6 +35,7 @@ function CollectionWithSearchParams() {
       published={published}
       edited={edited}
       infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
+      contactRepository={contactRepository}
     />
   )
 }

src/sections/dataset/Dataset.tsx

@@ -27,12 +27,14 @@ import { QueryParamKey, Route } from '../Route.enum'
 import { MetadataBlockInfoRepository } from '../../metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
 import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
 import { DatasetTerms } from '@/sections/dataset/dataset-terms/DatasetTerms'
+import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
 
 interface DatasetProps {
   datasetRepository: DatasetRepository
   fileRepository: FileRepository
   metadataBlockInfoRepository: MetadataBlockInfoRepository
   collectionRepository: CollectionRepository
+  contactRepository: ContactRepository
   created?: boolean
   metadataUpdated?: boolean
   filesTabInfiniteScrollEnabled?: boolean
@@ -45,6 +47,7 @@ export function Dataset({
   fileRepository,
   metadataBlockInfoRepository,
   collectionRepository,
+  contactRepository,
   created,
   metadataUpdated,
   filesTabInfiniteScrollEnabled,
@@ -129,6 +132,7 @@ export function Dataset({
                     datasetRepository={datasetRepository}
                     collectionRepository={collectionRepository}
                     dataset={dataset}
+                    contactRepository={contactRepository}
                   />
                 </Col>
               </Row>

src/sections/dataset/DatasetFactory.tsx

@@ -16,12 +16,13 @@ import { AlertProvider } from '../alerts/AlertProvider'
 import { searchParamVersionToDomainVersion } from '../../router'
 import { FILES_TAB_INFINITE_SCROLL_ENABLED } from './config'
 import { CollectionJSDataverseRepository } from '@/collection/infrastructure/repositories/CollectionJSDataverseRepository'
+import { ContactJSDataverseRepository } from '@/contact/infrastructure/ContactJSDataverseRepository'
 
 const collectionRepository = new CollectionJSDataverseRepository()
 const datasetRepository = new DatasetJSDataverseRepository()
 const fileRepository = new FileJSDataverseRepository()
 const metadataBlockInfoRepository = new MetadataBlockInfoJSDataverseRepository()
-
+const contactRepository = new ContactJSDataverseRepository()
 const settingRepository = new SettingJSDataverseRepository()
 
 export class DatasetFactory {
@@ -73,6 +74,7 @@ function DatasetWithSearchParams() {
           datasetRepository={datasetRepository}
           fileRepository={fileRepository}
           metadataBlockInfoRepository={metadataBlockInfoRepository}
+          contactRepository={contactRepository}
           filesTabInfiniteScrollEnabled={FILES_TAB_INFINITE_SCROLL_ENABLED}
           tab={tab}
         />
@@ -90,6 +92,7 @@ function DatasetWithSearchParams() {
         datasetRepository={datasetRepository}
         fileRepository={fileRepository}
         metadataBlockInfoRepository={metadataBlockInfoRepository}
+        contactRepository={contactRepository}
         created={created}
         publishInProgress={publishInProgress}
         metadataUpdated={metadataUpdated}