diff --git a/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx new file mode 100644 index 000000000..b25b5ad9a --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal.tsx @@ -0,0 +1,36 @@ +import { useT } from "@transifex/react"; + +import Button from "@/components/elements/Button/Button"; +import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal"; +import { ModalId } from "@/components/extensive/Modal/ModalConst"; +import { useModalContext } from "@/context/modal.provider"; + +const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => { + const t = useT(); + const { closeModal } = useModalContext(); + + return ( + + + + + } + /> + ); +}; + +export default NonScientificConfirmationModal; diff --git a/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx new file mode 100644 index 000000000..a9036af1e --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal.tsx @@ -0,0 +1,27 @@ +import { useT } from "@transifex/react"; + +import Button from "@/components/elements/Button/Button"; +import TreeSpeciesModal from "@/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal"; +import { ModalId } from "@/components/extensive/Modal/ModalConst"; +import { useModalContext } from "@/context/modal.provider"; + +const SpeciesAlreadyExistsModal = ({ speciesName }: { speciesName: string }) => { + const { closeModal } = useModalContext(); + const t = useT(); + + return ( + + + + } + /> + ); +}; + +export default SpeciesAlreadyExistsModal; diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx index 8677e0eba..2cfea89fb 100644 --- a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesInput.tsx @@ -6,6 +6,8 @@ import { FieldError, FieldErrors } from "react-hook-form"; import { Else, If, Then, When } from "react-if"; import { v4 as uuidv4 } from "uuid"; +import NonScientificConfirmationModal from "@/components/elements/Inputs/TreeSpeciesInput/NonScientificConfirmationModal"; +import SpeciesAlreadyExistsModal from "@/components/elements/Inputs/TreeSpeciesInput/SpeciesAlreadyExistsModal"; import { useAutocompleteSearch } from "@/components/elements/Inputs/TreeSpeciesInput/useAutocompleteSearch"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import List from "@/components/extensive/List/List"; @@ -43,45 +45,6 @@ export interface TreeSpeciesInputProps extends Omit export type TreeSpeciesValue = { uuid?: string; name?: string; taxon_id?: string; amount?: number }; -const NonScientificConfirmationModal = ({ onConfirm }: { onConfirm: () => void }) => { - const t = useT(); - const { closeModal } = useModalContext(); - - return ( -
-
- - - {t("Your input is a not a scientific name")} - -
-
-
-
- - {t("You can add this species, but it will be pending review from Admin.")} - -
-
-
- - -
-
-
- ); -}; - const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { const id = useId(); const t = useT(); @@ -183,8 +146,11 @@ const TreeSpeciesInput = (props: TreeSpeciesInputProps) => { lastInputRef.current?.focus(); }; - if (!isEmpty(searchResult) && taxonId == null) { - // In this case the use had valid values to choose from, but decided to add a value that isn't + if (value.find(({ name }) => name === valueAutoComplete) != null) { + openModal(ModalId.ERROR_MODAL, ); + setValueAutoComplete(""); + } else if (!isEmpty(searchResult) && taxonId == null) { + // In this case the user had valid values to choose from, but decided to add a value that isn't // on the list, so they haven't been shown the warning yet. openModal(ModalId.ERROR_MODAL, ); } else { diff --git a/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx new file mode 100644 index 000000000..11076cdf1 --- /dev/null +++ b/src/components/elements/Inputs/TreeSpeciesInput/TreeSpeciesModal.tsx @@ -0,0 +1,33 @@ +import { ReactNode } from "react"; + +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; + +type TreeSpeciesModalProps = { + title: string; + content: string; + buttons: ReactNode; +}; + +const TreeSpeciesModal = ({ title, content, buttons }: TreeSpeciesModalProps) => ( +
+
+ + + {title} + +
+
+
+
+ + {content} + +
+
+
{buttons}
+
+
+); + +export default TreeSpeciesModal;