wip: showcase status

src/components/CustomRoadmap/Showcase/ShowcaseAlert.tsx

@@ -1,13 +1,8 @@
-import {
-  CheckIcon,
-  EyeIcon,
-  FlagIcon,
-  FrownIcon,
-  SmileIcon,
-  XIcon,
-} from 'lucide-react';
+import { EyeIcon, FlagIcon, FrownIcon, SmileIcon } from 'lucide-react';
 import { cn } from '../../../lib/classname';
 import type { GetRoadmapResponse } from '../CustomRoadmap';
+import { useState } from 'react';
+import { SubmitShowcaseWarning } from './SubmitShowcaseWarning';
 
 type ShowcaseAlertProps = {
   currentRoadmap: GetRoadmapResponse;
@@ -16,12 +11,12 @@ type ShowcaseAlertProps = {
 export function ShowcaseAlert(props: ShowcaseAlertProps) {
   const { currentRoadmap } = props;
 
-  // const { showcaseStatus = 'idle' } = currentRoadmap;
-  // if (showcaseStatus === 'idle') {
-  //   return null;
-  // }
+  const [showRejectedReason, setShowRejectedReason] = useState(false);
 
-  const showcaseStatus = 'rejected_with_reason';
+  const { showcaseStatus = 'idle' } = currentRoadmap;
+  if (showcaseStatus === 'idle') {
+    return null;
+  }
 
   const showcaseStatusMap = {
     submitted: {
@@ -45,7 +40,12 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
       label: (
         <>
           Your roadmap needs changes before it can be featured.{' '}
-          <button className="font-medium underline underline-offset-2 hover:no-underline">
+          <button
+            className="font-medium underline underline-offset-2 hover:no-underline"
+            onClick={() => {
+              setShowRejectedReason(true);
+            }}
+          >
             Check Reason
           </button>
         </>
@@ -56,20 +56,30 @@ export function ShowcaseAlert(props: ShowcaseAlertProps) {
   const { icon: Icon, label, className } = showcaseStatusMap[showcaseStatus];
 
   return (
-    <div
-      className={cn(
-        showcaseStatus === 'submitted' && 'bg-blue-100',
-        showcaseStatus === 'approved' && 'bg-green-100',
-        showcaseStatus === 'rejected' && 'bg-red-100',
-        showcaseStatus === 'rejected_with_reason' && 'bg-yellow-100',
+    <>
+      {showRejectedReason && (
+        <SubmitShowcaseWarning
+          onClose={() => {
+            setShowRejectedReason(false);
+          }}
+        />
       )}
-    >
-      <div className="container relative flex items-center justify-center py-2 text-sm">
-        <div className={cn('flex items-center gap-2', className)}>
-          <Icon className="h-4 w-4 shrink-0 stroke-[2.5]" />
-          <div>{label}</div>
+
+      <div
+        className={cn(
+          showcaseStatus === 'submitted' && 'bg-blue-100',
+          showcaseStatus === 'approved' && 'bg-green-100',
+          showcaseStatus === 'rejected' && 'bg-red-100',
+          showcaseStatus === 'rejected_with_reason' && 'bg-yellow-100',
+        )}
+      >
+        <div className="container relative flex items-center justify-center py-2 text-sm">
+          <div className={cn('flex items-center gap-2', className)}>
+            <Icon className="h-4 w-4 shrink-0 stroke-[2.5]" />
+            <div>{label}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx

@@ -5,14 +5,13 @@ import { httpPost } from '../../../lib/query-http';
 import { useStore } from '@nanostores/react';
 import { currentRoadmap } from '../../../stores/roadmap';
 import { useToast } from '../../../hooks/use-toast';
+import { DateTime } from 'luxon';
 
 type SubmitShowcaseWarningProps = {
   onClose: () => void;
 };
 
-export function SubmitShowcaseWarning(
-  props: SubmitShowcaseWarningProps,
-) {
+export function SubmitShowcaseWarning(props: SubmitShowcaseWarningProps) {
   const { onClose } = props;
 
   const toast = useToast();
@@ -40,8 +39,12 @@ export function SubmitShowcaseWarning(
     queryClient,
   );
 
-  const { showcaseStatus = 'idle', showcaseRejectedReason } =
-    $currentRoadmap || {};
+  const {
+    showcaseStatus = 'idle',
+    showcaseRejectedReason,
+    showcaseRejectedAt,
+    updatedAt,
+  } = $currentRoadmap || {};
 
   return (
     <Modal onClose={onClose}>
@@ -52,8 +55,7 @@ export function SubmitShowcaseWarning(
             : 'Featured Listing'}
         </h2>
         <p className="mt-2 text-sm">
-          {showcaseStatus === 'rejected_with_reason' &&
-            showcaseRejectedReason}
+          {showcaseStatus === 'rejected_with_reason' && showcaseRejectedReason}
           {showcaseStatus === 'idle' && (
             <>
               Submitting your roadmap for a featured listing will make it
@@ -74,7 +76,26 @@ export function SubmitShowcaseWarning(
           <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()}
+            onClick={() => {
+              const updatedAtDate =
+                updatedAt && DateTime.fromJSDate(new Date(updatedAt));
+              const showcaseRejectedAtDate =
+                showcaseRejectedAt &&
+                DateTime.fromJSDate(new Date(showcaseRejectedAt));
+
+              if (
+                showcaseRejectedAtDate &&
+                updatedAtDate &&
+                updatedAtDate < showcaseRejectedAtDate
+              ) {
+                toast.error(
+                  'You need to make changes to your roadmap before resubmitting.',
+                );
+                return;
+              }
+
+              submit.mutate();
+            }}
           >
             {submit.isPending
               ? 'Submitting...'