wip

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -70,7 +70,7 @@ export interface RoadmapDocument {
   };
 
   featuredListStatus?: AllowedRoadmapFeaturedListStatus;
-  featuredListReason?: string;
+  featuredListRejectedReason?: string;
   featuredListSubmittedAt?: Date;
   featuredListApprovedAt?: Date;
 

src/components/CustomRoadmap/FeaturedListing/FeaturedListingStatus.tsx

@@ -12,38 +12,36 @@ export function FeaturedListingStatus(props: FeaturedListingStatusProps) {
   const { featuredListStatus = 'idle' } = currentRoadmap;
   const [showSubmitWarning, setShowSubmitWarning] = useState(false);
 
+  const currentLabel = {
+    idle: 'Submit for Featured Listing',
+    submitted: 'Submitted',
+    approved: 'Approved',
+    rejected: 'Rejected',
+    rejected_with_reason: 'Rejected with Reason',
+  }[featuredListStatus];
+
   return (
     <>
-      {featuredListStatus === 'idle' && (
+      {showSubmitWarning && (
-        <>
+        <SubmitFeaturedListingWarning
-          {showSubmitWarning && (
+          onClose={() => {
-            <SubmitFeaturedListingWarning
+            setShowSubmitWarning(false);
-              onClose={() => setShowSubmitWarning(false)}
+          }}
-            />
+        />
-          )}
-
-          <button
-            className="text-sm"
-            onClick={() => setShowSubmitWarning(true)}
-          >
-            Submit for Featured Listing
-          </button>
-        </>
-      )}
-
-      {featuredListStatus === 'submitted' && (
-        <span className="text-sm">Submitted</span>
-      )}
-
-      {featuredListStatus === 'approved' && (
-        <span className="text-sm">Approved</span>
-      )}
-
-      {featuredListStatus === 'rejected' && (
-        <span className="text-sm">Rejected</span>
       )}
 
-      {featuredListStatus === 'rejected_with_reason' && <></>}
+      <button
+        className="text-sm"
+        onClick={() => {
+          if (!['idle', 'rejected'].includes(featuredListStatus)) {
+            return;
+          }
+
+          setShowSubmitWarning(true);
+        }}
+      >
+        {currentLabel}
+      </button>
     </>
   );
 }

src/components/CustomRoadmap/FeaturedListing/RejectedReason.tsx

@@ -1,66 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { Modal } from '../../Modal';
-import { queryClient } from '../../../stores/query-client';
-import { httpPost } from '../../../lib/query-http';
-import { useStore } from '@nanostores/react';
-import { currentRoadmap } from '../../../stores/roadmap';
-import { useToast } from '../../../hooks/use-toast';
-
-type RejectedReasonProps = {
-  onClose: () => void;
-};
-
-export function RejectedReason(props: RejectedReasonProps) {
-  const { onClose } = props;
-
-  const toast = useToast();
-  const $currentRoadmap = useStore(currentRoadmap);
-
-  const submit = useMutation(
-    {
-      mutationFn: async () => {
-        return httpPost(
-          `/v1-submit-for-featured-listing/${$currentRoadmap?._id}`,
-          {},
-        );
-      },
-      onSuccess: () => {
-        queryClient.invalidateQueries({
-          queryKey: ['get-roadmap'],
-        });
-
-        onClose();
-      },
-      onError: (error) => {
-        toast.error(error?.message || 'Something went wrong');
-      },
-    },
-    queryClient,
-  );
-
-  return (
-    <Modal onClose={onClose}>
-      <div className="p-4">
-        <h2 className="text-lg font-semibold">Rejected Reason</h2>
-        <p className="mt-2 text-sm">{$currentRoadmap?.featuredListReason}</p>
-
-        <div className="mt-4 grid grid-cols-2 gap-2">
-          <button
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center text-sm hover:bg-gray-300"
-            onClick={onClose}
-            disabled={submit.isPending}
-          >
-            Cancel
-          </button>
-          <button
-            className="w-full rounded-lg bg-gray-900 py-2 text-sm text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-60"
-            disabled={submit.isPending}
-            onClick={() => submit.mutate()}
-          >
-            {submit.isPending ? 'Submitting...' : 'Resubmit'}
-          </button>
-        </div>
-      </div>
-    </Modal>
-  );
-}

src/components/CustomRoadmap/FeaturedListing/SubmitFeaturedListingWarning.tsx

@@ -40,14 +40,27 @@ export function SubmitFeaturedListingWarning(
     queryClient,
   );
 
+  const { featuredListStatus = 'idle', featuredListRejectedReason } =
+    $currentRoadmap || {};
+
   return (
     <Modal onClose={onClose}>
       <div className="p-4">
-        <h2 className="text-lg font-semibold">Featured Listing</h2>
+        <h2 className="text-lg font-semibold">
+          {featuredListStatus === 'rejected_with_reason'
+            ? 'Rejected Reason'
+            : 'Featured Listing'}
+        </h2>
         <p className="mt-2 text-sm">
-          Submitting your roadmap for a featured listing will make it visible to
+          {featuredListStatus === 'rejected_with_reason' &&
-          everyone on the platform.{' '}
+            featuredListRejectedReason}
-          <span className="font-medium">Are you sure?</span>
+          {featuredListStatus === 'idle' && (
+            <>
+              Submitting your roadmap for a featured listing will make it
+              visible to everyone on the platform.{' '}
+              <span className="font-medium">Are you sure?</span>
+            </>
+          )}
         </p>
 
         <div className="mt-4 grid grid-cols-2 gap-2">
@@ -63,7 +76,11 @@ export function SubmitFeaturedListingWarning(
             disabled={submit.isPending}
             onClick={() => submit.mutate()}
           >
-            {submit.isPending ? 'Submitting...' : 'Submit'}
+            {submit.isPending
+              ? 'Submitting...'
+              : featuredListStatus === 'rejected_with_reason'
+                ? 'Resubmit'
+                : 'Submit'}
           </button>
         </div>
       </div>