[questions][ui] Add DiscardDraftModal

apps/portal/src/components/questions/ContributeQuestionModal.tsx

@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
+import DiscardDraftModal from './DisacrdDraftModal';
 import Checkbox from './ui-patch/Checkbox';
 
 export type ContributeQuestionModalProps = {
@@ -14,12 +15,24 @@ export default function ContributeQuestionModal({
   setContributeState,
 }: ContributeQuestionModalProps) {
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
-
+  const [isDiscardOpen, setIsDiscardOpen] = useState<boolean>(false);
   const handleCheckSimilarQuestions = (checked: boolean) => {
     setCanSubmit(checked);
   };
 
+  const handleDiscardDraft = () => {
+    // eslint-disable-next-line no-console
+    console.log('discarded draft');
+    setContributeState(false);
+    setIsDiscardOpen(false);
+  };
+
+  const handleCancelDiscard = () => {
+    setIsDiscardOpen(false);
+  };
+
   return (
+    <div>
       <Transition.Root as={Fragment} show={contributeState}>
         <Dialog
           as="div"
@@ -35,7 +48,6 @@ export default function ContributeQuestionModal({
             leaveTo="opacity-0">
             <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
           </Transition.Child>
-
           <div className="fixed inset-0 z-10 overflow-y-auto">
             <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
               <Transition.Child
@@ -46,7 +58,7 @@ export default function ContributeQuestionModal({
                 leave="ease-in duration-200"
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+                <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
                   <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
@@ -74,7 +86,7 @@ export default function ContributeQuestionModal({
                       <button
                         className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                         type="button"
-                      onClick={() => setContributeState(false)}>
+                        onClick={() => setIsDiscardOpen(true)}>
                         Discard
                       </button>
                       <button
@@ -92,5 +104,10 @@ export default function ContributeQuestionModal({
           </div>
         </Dialog>
       </Transition.Root>
+      <DiscardDraftModal
+        handleCancelDiscard={handleCancelDiscard}
+        handleDiscardDraft={handleDiscardDraft}
+        isDiscardOpen={isDiscardOpen}></DiscardDraftModal>
+    </div>
   );
 }

apps/portal/src/components/questions/DisacrdDraftModal.tsx

@@ -0,0 +1,82 @@
+import { Fragment } from 'react';
+import { Dialog, Transition } from '@headlessui/react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+export type DiscardDraftModalProps = {
+  handleCancelDiscard: () => void;
+  handleDiscardDraft: () => void;
+  isDiscardOpen: boolean;
+};
+export default function DiscardDraftModal({
+  isDiscardOpen,
+  handleCancelDiscard,
+  handleDiscardDraft,
+}: DiscardDraftModalProps) {
+  return (
+    <Transition.Root as={Fragment} show={isDiscardOpen}>
+      <Dialog as="div" className="relative z-10" onClose={handleCancelDiscard}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0">
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+                <div className="sm:flex sm:items-start">
+                  <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <ExclamationTriangleIcon
+                      aria-hidden="true"
+                      className="h-6 w-6 text-red-600"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-gray-900">
+                      Discard Question Draft
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Are you sure you want to discard the current draft? This
+                        action cannot be undone.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  <button
+                    className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                    type="button"
+                    onClick={handleDiscardDraft}>
+                    Discard
+                  </button>
+                  <button
+                    className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+                    type="button"
+                    onClick={handleCancelDiscard}>
+                    Cancel
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}