fix: some adjustments regarding to reviews

packages/design-system/src/lib/components/alert/Alert.tsx

@@ -30,15 +30,10 @@ function Alert({ variant, dismissible = true, customHeading, children, onClose }
   }
   const heading = getAlertHeading(variant, customHeading)
 
-  const handleClose = () => {
-    onClose && onClose()
-    setShow(false)
-  }
-
   return (
     <>
       {show && (
-        <AlertBS variant={variant} onClose={handleClose} dismissible={dismissible}>
+        <AlertBS variant={variant} onClose={() => setShow(false)} dismissible={dismissible}>
           <AlertIcon variant={variant} />
           &nbsp;
           <b>{heading}</b> - {children}

public/locales/en/shared.json

@@ -151,5 +151,29 @@
       "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 10."
+      },
+      "email": { "required": "Email is required.", "maxLength": "Email cannot exceed 255." },
+      "subject": { "required": "Subject is required.", "maxLength": "Subject cannot exceed 255." },
+      "message": { "required": "Message is required.", "maxLength": "Message cannot exceed 255." }
+    }
   }
 }

src/contact/domain/repositories/ContactRepository.ts

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

src/contact/domain/useCases/ContactDTO.ts → src/contact/domain/useCases/FeedbackDTO.ts

@@ -1,4 +1,4 @@
-export interface ContactDTO {
+export interface FeedbackDTO {
   targetId?: number
   identifier?: string
   fromEmail: string

src/contact/domain/useCases/submitContact.ts → src/contact/domain/useCases/sendFeedbacktoOwners.ts

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

src/contact/infrastructure/ContactJSDataverseRepository.ts

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

src/sections/collection/Collection.tsx

@@ -14,12 +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/contact/ContactButton'
+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 { useState } from 'react'
-import { ContactRepositoryFactory } from '@/sections/contact/contactFactory'
+import { ContactRepositoryFactory } from '@/sections/shared/contact/ContactFactory'
 
 interface CollectionProps {
   collectionRepository: CollectionRepository
@@ -41,7 +40,6 @@ export function Collection({
 }: CollectionProps) {
   useScrollTop()
   const { t } = useTranslation('collection')
-  const { t: tContact } = useTranslation('contact')
   const contactRepository = ContactRepositoryFactory.create()
   const { collection, isLoading: isLoadingCollection } = useCollection(
     collectionRepository,
@@ -60,7 +58,6 @@ export function Collection({
   const showAddDataActions = canUserAddCollection || canUserAddDataset
   const showPublishButton = !collection?.isReleased && canUserPublishCollection
   const showEditButton = canUserEditCollection
-  const [contactSuccess, setContactSuccess] = useState(false)
 
   if (isLoadingCollection) {
     return <CollectionSkeleton />
@@ -90,11 +87,6 @@ export function Collection({
                 {t('publishedAlert')}
               </Alert>
             )}
-            {contactSuccess && (
-              <Alert variant="success" onClose={() => setContactSuccess(false)}>
-                {tContact('contact.contactSuccess')}
-              </Alert>
-            )}
 
             <FeaturedItems
               collectionRepository={collectionRepository}
@@ -105,7 +97,6 @@ export function Collection({
               <div className={styles.metrics}></div>
               <div className={styles['right-content']}>
                 <ContactButton
-                  onSuccess={() => setContactSuccess(true)}
                   toContactName={collection.name}
                   isCollection={true}
                   id={collection.id}

src/sections/dataset/Dataset.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react'
-import { Alert, Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import styles from './Dataset.module.scss'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DatasetLabels } from './dataset-labels/DatasetLabels'
@@ -54,14 +54,12 @@ export function Dataset({
   const { setIsLoading } = useLoading()
   const { dataset, isLoading: isDatasetLoading } = useDataset()
   const { t } = useTranslation('dataset')
-  const { t: tcontact } = useTranslation('contact')
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const { hideModal, isModalOpen } = useNotImplementedModal()
   const publishCompleted = useCheckPublishCompleted(publishInProgress, dataset, datasetRepository)
   const [activeTab, setActiveTab] = useState<string>(tab)
   const termsTabRef = useRef<HTMLDivElement>(null)
-  const [contactSuccess, setContactSuccess] = useState(false)
 
   useUpdateDatasetAlerts({
     dataset,
@@ -113,18 +111,13 @@ export function Dataset({
               <Row>
                 <Col>
                   <DatasetAlerts />
-                  {contactSuccess && (
-                    <Alert variant="success" onClose={() => setContactSuccess(false)}>
-                      {tcontact('contact.contactSuccess')}
-                    </Alert>
-                  )}
                 </Col>
               </Row>
             </div>
 
             <header className={styles.header}>
               <h1>{dataset.version.title}</h1>
-              <DatasetLabels labels={dataset.version.labels} />{' '}
+              <DatasetLabels labels={dataset.version.labels} />
             </header>
             <div className={styles.container}>
               <Row>
@@ -136,7 +129,6 @@ export function Dataset({
                     datasetRepository={datasetRepository}
                     collectionRepository={collectionRepository}
                     dataset={dataset}
-                    onSuccess={() => setContactSuccess(true)}
                   />
                 </Col>
               </Row>

src/sections/dataset/dataset-action-buttons/DatasetActionButtons.tsx

@@ -10,21 +10,19 @@ import { EditDatasetMenu } from './edit-dataset-menu/EditDatasetMenu'
 import { LinkDatasetButton } from './link-dataset-button/LinkDatasetButton'
 import { ShareDatasetButton } from './share-dataset-button/ShareDatasetButton'
 import styles from './DatasetActionButtons.module.scss'
-import { ContactButton } from '@/sections/contact/ContactButton'
-import { ContactRepositoryFactory } from '@/sections/contact/contactFactory'
+import { ContactButton } from '@/sections/shared/contact/ContactButton'
+import { ContactRepositoryFactory } from '@/sections/shared/contact/ContactFactory'
 
 interface DatasetActionButtonsProps {
   dataset: Dataset
   datasetRepository: DatasetRepository
   collectionRepository: CollectionRepository
-  onSuccess: () => void
 }
 
 export function DatasetActionButtons({
   dataset,
   datasetRepository,
-  collectionRepository,
-  onSuccess
+  collectionRepository
 }: DatasetActionButtonsProps) {
   const { t } = useTranslation('dataset')
   const contactRepository = ContactRepositoryFactory.create()
@@ -48,7 +46,6 @@ export function DatasetActionButtons({
       <LinkDatasetButton dataset={dataset} />
       <ButtonGroup className={styles['contact-owner-and-share-group']}>
         <ContactButton
-          onSuccess={onSuccess}
           isCollection={false}
           toContactName={dataset.metadataBlocks[0].fields.title}
           id={dataset.persistentId}

src/sections/contact/ContactButton.tsx → src/sections/shared/contact/ContactButton.tsx

@@ -2,27 +2,24 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button, Tooltip } from '@iqss/dataverse-design-system'
 import { Envelope } from 'react-bootstrap-icons'
-import { ContactModal } from '@/sections/shared/contact-modal/contact-modal'
+import { ContactModal } from '@/sections/shared/contact/contact-modal/contact-modal'
 import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
 
 interface ContactButtonProps {
-  onSuccess: () => void
   toContactName: string
   isCollection: boolean
   id: string | number
   contactRepository: ContactRepository
 }
 
 export const ContactButton = ({
-  onSuccess,
   toContactName,
   isCollection,
   id,
   contactRepository
 }: ContactButtonProps) => {
-  const { t } = useTranslation('contact')
+  const { t } = useTranslation('shared')
   const [showContactModal, setShowContactModal] = useState(false)
-
   const openContactModal = () => setShowContactModal(true)
   const closeContactModal = () => setShowContactModal(false)
 
@@ -37,15 +34,14 @@ export const ContactButton = ({
               variant="link"
               onClick={openContactModal}
               icon={<Envelope style={{ marginRight: '0.3rem', marginBottom: '0.2rem' }} />}>
-              {t('title.collection')}
+              {t('contact.title.collection')}
             </Button>
           </Tooltip>
 
           <ContactModal
             show={showContactModal}
             handleClose={closeContactModal}
             title={t('contact.contactCollection')}
-            onSuccess={onSuccess}
             toContactName={toContactName}
             id={id}
             contactRepository={contactRepository}
@@ -54,14 +50,13 @@ export const ContactButton = ({
       ) : (
         <>
           <Button variant="secondary" onClick={openContactModal} size="sm">
-            {t('title.dataset')}
+            {t('contact.title.dataset')}
           </Button>
 
           <ContactModal
             show={showContactModal}
             handleClose={closeContactModal}
             title={t('contact.contactDataset')}
-            onSuccess={onSuccess}
             toContactName={toContactName}
             id={id}
             contactRepository={contactRepository}

src/sections/shared/contact-modal/contact-modal.tsx → src/sections/shared/contact/contact-modal/contact-modal.tsx

@@ -2,21 +2,21 @@ import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useForm, FormProvider } from 'react-hook-form'
 import { Alert, Button, Modal } from '@iqss/dataverse-design-system'
-import { ContactDTO } from '@/contact/domain/useCases/ContactDTO'
+import { FeedbackDTO } from '@/contact/domain/useCases/FeedbackDTO'
 import { Captcha } from '@/sections/shared/form/ContactForm/ContactCaptcha'
 import { ContactForm } from '@/sections/shared/form/ContactForm/ContactForm'
 import { useSession } from '@/sections/session/SessionContext'
 import {
-  useSubmitContact,
+  useSendFeedbacktoOwners,
   SubmissionStatus
-} from '@/sections/shared/form/ContactForm/useSubmitContact'
+} from '@/sections/shared/form/ContactForm/useSendFeedbacktoOwners'
 import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
+import { toast } from 'react-toastify'
 
 interface ContactModalProps {
   show: boolean
   handleClose: () => void
   title: string
-  onSuccess: () => void
   toContactName: string
   id: string | number
   contactRepository: ContactRepository
@@ -34,15 +34,14 @@ export const ContactModal = ({
   show,
   title,
   handleClose,
-  onSuccess,
   toContactName,
   id,
   contactRepository
 }: ContactModalProps) => {
   const { t } = useTranslation('shared')
   const { user } = useSession()
 
-  const { submitForm, submissionStatus, submitError } = useSubmitContact(contactRepository)
+  const { submitForm, submissionStatus, submitError } = useSendFeedbacktoOwners(contactRepository)
 
   const methods = useForm<ContactFormData>({
     defaultValues: {
@@ -57,15 +56,15 @@ export const ContactModal = ({
   const { reset } = methods
 
   const onSubmit = async (data: ContactFormData) => {
-    const formData: ContactDTO = {
+    const formData: FeedbackDTO = {
       subject: data.subject,
       body: data.body,
       fromEmail: data.fromEmail,
       ...(typeof data.id === 'string' ? { identifier: data.id } : { targetId: data.id })
     }
 
     await submitForm(formData)
-    onSuccess()
+    toast.success(t('contact.contactSuccess'))
     reset()
   }
 

src/sections/shared/form/ContactForm/ContactCaptcha.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Form, Col, Row } from '@iqss/dataverse-design-system'
 
 export function Captcha() {
-  const { t } = useTranslation('contact')
+  const { t } = useTranslation('shared')
   const { control } = useFormContext()
 
   const [num1, setNum1] = useState(Math.floor(Math.random() * 10))

src/sections/shared/form/ContactForm/ContactForm.tsx

@@ -8,7 +8,7 @@ interface ContactFormProps {
 }
 
 export function ContactForm({ isLoggedIn, toContactName }: ContactFormProps) {
-  const { t } = useTranslation('contact')
+  const { t } = useTranslation('shared')
   const { control } = useFormContext()
 
   const emailRules: UseControllerProps['rules'] = {
@@ -76,7 +76,7 @@ export function ContactForm({ isLoggedIn, toContactName }: ContactFormProps) {
 
       <Row className="mb-3">
         <Col lg={3}>
-          <Form.Group.Label required>{t('subject')}</Form.Group.Label>
+          <Form.Group.Label required>{t('contact.subject')}</Form.Group.Label>
         </Col>
         <Col lg={9}>
           <Controller
@@ -102,7 +102,7 @@ export function ContactForm({ isLoggedIn, toContactName }: ContactFormProps) {
 
       <Row className="mb-3">
         <Col lg={3}>
-          <Form.Group.Label required>{t('message')}</Form.Group.Label>
+          <Form.Group.Label required>{t('contact.message')}</Form.Group.Label>
         </Col>
         <Col lg={9}>
           <Controller