Add confirmation modals for Add Pet flow

Author: zeukyr

frontend/src/features/pet-profile/pages/AddPetModal.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import PopupModal from "../../../components/common/PopupModal";
+
+interface AddPetModalProps {
+  isOpen: boolean; // Whether the modal should be visible
+  handlePrimaryButtonClick: () => void; // Functionalituy for the first button
+  handleSecondaryButtonClick: () => void; // Functionality for secondary button
+}
+
+const AddPetModal: FC<AddPetModalProps> = ({
+  isOpen,
+  handlePrimaryButtonClick,
+  handleSecondaryButtonClick,
+}) => {
+  return (
+    <PopupModal
+      open={isOpen}
+      title="Add Pet?"
+      message="Are you sure you want to add this pet? A verification link will be sent to them."
+      primaryButtonText="Add"
+      primaryButtonColor="red"
+      onPrimaryClick={handlePrimaryButtonClick}
+      secondaryButtonText="Cancel"
+      onSecondaryClick={handleSecondaryButtonClick}
+    />
+  );
+};
+
+export default AddPetModal;

frontend/src/features/pet-profile/pages/QuitEditingModal.tsx

@@ -0,0 +1,34 @@
+import { FC } from "react";
+import PopupModal from "../../../components/common/PopupModal";
+import { useHistory } from "react-router-dom";
+
+interface QuitEditingModalProps {
+  isOpen: boolean; // Whether the modal should be visible
+  handleSecondaryButtonClick: () => void; // Functionality for secondary button
+  navigateTo: string; // path
+}
+
+const QuitEditingModal: FC<QuitEditingModalProps> = ({
+  isOpen,
+  handleSecondaryButtonClick,
+  navigateTo,
+}) => {
+  const history = useHistory();
+  const handlePrimaryButtonClick = () => {
+    history.push(navigateTo);
+  };
+  return (
+    <PopupModal
+      open={isOpen}
+      title="Quit Editing?"
+      message="Changes you made so far will not be saved."
+      primaryButtonText="Leave"
+      onPrimaryClick={handlePrimaryButtonClick}
+      primaryButtonColor="red"
+      secondaryButtonText="Keep Editing"
+      onSecondaryClick={handleSecondaryButtonClick}
+    />
+  );
+};
+
+export default QuitEditingModal;