From c7ffc475f94c7160670a40624620db269b7c4084 Mon Sep 17 00:00:00 2001
From: laxmanhalaki <laxman.halaki@tech4biz.org>
Date: Tue, 30 Dec 2025 09:46:17 +0530
Subject: [PATCH] non templatized card disabled

---
 .../CreateRequest/TemplateSelectionStep.tsx   | 58 ++++++++++++-------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx b/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
index ad611d2..48d6b26 100644
--- a/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
+++ b/src/components/workflow/CreateRequest/TemplateSelectionStep.tsx
@@ -59,23 +59,29 @@ export function TemplateSelectionStep({
         className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"
         data-testid="template-selection-grid"
       >
-        {templates.map((template) => (
-          <motion.div
-            key={template.id}
-            whileHover={{ scale: 1.03 }}
-            whileTap={{ scale: 0.98 }}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-            data-testid={`template-card-${template.id}`}
-          >
-            <Card
-              className={`cursor-pointer h-full transition-all duration-300 border-2 ${
-                selectedTemplate?.id === template.id
-                  ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
-                  : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
-              }`}
-              onClick={() => onSelectTemplate(template)}
-              data-testid={`template-card-${template.id}-clickable`}
+        {templates.map((template) => {
+          const isComingSoon = template.id === 'existing-template';
+          const isDisabled = isComingSoon;
+          
+          return (
+            <motion.div
+              key={template.id}
+              whileHover={!isDisabled ? { scale: 1.03 } : {}}
+              whileTap={!isDisabled ? { scale: 0.98 } : {}}
+              transition={{ type: "spring", stiffness: 300, damping: 20 }}
+              data-testid={`template-card-${template.id}`}
             >
+              <Card
+                className={`h-full transition-all duration-300 border-2 ${
+                  isDisabled
+                    ? 'border-gray-200 bg-gray-50/50 opacity-85 cursor-not-allowed'
+                    : selectedTemplate?.id === template.id
+                    ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200 cursor-pointer'
+                    : 'border-gray-200 hover:border-blue-300 hover:shadow-lg cursor-pointer'
+                }`}
+                onClick={!isDisabled ? () => onSelectTemplate(template) : undefined}
+                data-testid={`template-card-${template.id}-clickable`}
+              >
               <CardHeader className="space-y-4 pb-4">
                 <div className="flex items-start justify-between">
                   <div 
@@ -108,9 +114,20 @@ export function TemplateSelectionStep({
                   )}
                 </div>
                 <div className="text-left">
-                  <CardTitle className="text-xl mb-2" data-testid={`template-card-${template.id}-name`}>
-                    {template.name}
-                  </CardTitle>
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <CardTitle className="text-xl" data-testid={`template-card-${template.id}-name`}>
+                      {template.name}
+                    </CardTitle>
+                    {isComingSoon && (
+                      <Badge 
+                        variant="outline" 
+                        className="text-xs bg-yellow-100 text-yellow-700 border-yellow-300 font-semibold"
+                        data-testid={`template-card-${template.id}-coming-soon-badge`}
+                      >
+                        Coming Soon
+                      </Badge>
+                    )}
+                  </div>
                   <div className="flex items-center gap-2">
                     <Badge variant="secondary" className="text-xs" data-testid={`template-card-${template.id}-category`}>
                       {template.category}
@@ -140,7 +157,8 @@ export function TemplateSelectionStep({
               </CardContent>
             </Card>
           </motion.div>
-        ))}
+          );
+        })}
       </div>
 
       {/* Template Details Card */}