From da48ee71401a565e5e326b6c24e35fe93d4e6892 Mon Sep 17 00:00:00 2001
From: didintern <vikrambanand@gmail.com>
Date: Fri, 22 Aug 2025 11:09:37 +0530
Subject: [PATCH 1/2] fix: Fixed the state persist problem when stwitching
 between apps, for KYCWebPageGenerator

---
 src/store/mainStore.js                       | 4 ++++
 src/views/playground/KYCWebpageGenerator.vue | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/store/mainStore.js b/src/store/mainStore.js
index d96bde7..799a16a 100644
--- a/src/store/mainStore.js
+++ b/src/store/mainStore.js
@@ -225,6 +225,10 @@ const mainStore = {
         },
         setSelectedAppId: (state, payload) => {
             state.selectedServiceId = payload;
+            // Clear app-specific configs when switching apps
+            state.kycWebpageConfig = {};
+            state.webhookConfig = {};
+            state.onChainConfig = {};
         },
 
         setDIDList(state, payload) {
diff --git a/src/views/playground/KYCWebpageGenerator.vue b/src/views/playground/KYCWebpageGenerator.vue
index cd28208..f47fab0 100644
--- a/src/views/playground/KYCWebpageGenerator.vue
+++ b/src/views/playground/KYCWebpageGenerator.vue
@@ -1363,7 +1363,7 @@ export default {
       previewMode: "desktop",
       showDeleteModal: false,
       kycWebpageConfigTemp: {
-        pageTitle: "KYC Verification",
+        pageTitle: "",
         pageDescription: "",
         expiryType: "3months",
         customExpiryDate: "",
@@ -1548,9 +1548,9 @@ export default {
         } else {
           // Reset to default values if no config exists
           this.kycWebpageConfigTemp = {
-            pageTitle: "KYC Verification",
+            pageTitle: "",
             pageDescription: "",
-            expiryType: "3months",
+            expiryType: "1months",
             customExpiryDate: "",
             selectedTheme: "vibrant",
             contactEmail: "",

From 45271e08ae7e2cfc521008723113fda9570a7171 Mon Sep 17 00:00:00 2001
From: didintern <vikrambanand@gmail.com>
Date: Fri, 22 Aug 2025 12:05:53 +0530
Subject: [PATCH 2/2] Fix: KYCWebPageGenerator - Changed the menu text to KYC
 Verifier, - Status badge allignment, - Status getting expired when selecting
 custom page expiry, - Live preview not looking consistent in mobile mode, -
 contact info not centered

---
 src/App copy.vue                             |   2 +-
 src/App.vue                                  |   3 +-
 src/views/playground/KYCWebpageGenerator.vue | 187 ++++++++++++++++++-
 3 files changed, 180 insertions(+), 12 deletions(-)

diff --git a/src/App copy.vue b/src/App copy.vue
index fb45906..5e2454c 100644
--- a/src/App copy.vue	
+++ b/src/App copy.vue	
@@ -226,7 +226,7 @@
 
           <v-list-item @click="goTo('/studio/settings')" title="Settings">
             <v-icon left>mdi-cog</v-icon>
-            <v-list-item-title>Settings</v-list-item-title>
+            <v-list-item-title>Settings1</v-list-item-title>
           </v-list-item>
 
           <v-list-item @click="goTo('/studio/dashboard')" title="Home">
diff --git a/src/App.vue b/src/App.vue
index 42f3593..18ff209 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -202,6 +202,7 @@
 </template>
 
 <style>
+
 .v-sidebar-menu .vsm--link_level-1 .vsm--icon {
   font-size: 16px;
   width: 40px !important;
@@ -558,7 +559,7 @@ export default {
                 },
                 {
                   href: "/studio/kyc-webpage-generator/" + this.getSelectedService.appId,
-                  title: "KYC Verifier Configuration",
+                  title: "KYC Verifier ",
                   icon: "fa fa-globe",
                 },
               ]
diff --git a/src/views/playground/KYCWebpageGenerator.vue b/src/views/playground/KYCWebpageGenerator.vue
index f47fab0..8fdecb7 100644
--- a/src/views/playground/KYCWebpageGenerator.vue
+++ b/src/views/playground/KYCWebpageGenerator.vue
@@ -92,6 +92,84 @@
   border-radius: 4px;
   margin-bottom: 0;
   min-width: 280px;
+  position: relative;
+}
+
+/* Status Icon Styles */
+.status-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-left: 8px;
+  position: relative;
+  cursor: help;
+  animation: pulse 2s infinite;
+}
+
+.status-icon.active {
+  background-color: #28a745;
+  box-shadow: 0 0 8px rgba(40, 167, 69, 0.6);
+}
+
+.status-icon.expired {
+  background-color: #dc3545;
+  box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
+}
+
+.status-icon.warning {
+  background-color: #ffc107;
+  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
+}
+
+.status-icon.not-created {
+  background-color: #6c757d;
+  box-shadow: 0 0 8px rgba(108, 117, 125, 0.6);
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+/* Status Tooltip */
+.status-tooltip {
+  position: fixed;
+  background: #333;
+  color: white;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s, visibility 0.3s;
+  z-index: 99999;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  transform: translateX(-50%);
+}
+
+.status-tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #333;
+}
+
+.status-icon:hover + .status-tooltip {
+  opacity: 1;
+  visibility: visible;
 }
 
 .link-text {
@@ -419,6 +497,7 @@ textarea.form-control {
   align-items: center;
   justify-content: flex-start;
   padding: 24px 12px 16px;
+  min-height: 100%;
 }
 
 .kyc-preview-card {
@@ -507,6 +586,7 @@ textarea.form-control {
   margin-top: 18px;
   font-size: 10px;
   color: #374151;
+  text-align: center;
 }
 
 .powered-by {
@@ -637,17 +717,69 @@ textarea.form-control {
   border-radius: 25px;
   overflow: hidden;
   border: 3px solid #333;
-  background: #333;
+  background: transparent;
   height: 620px;
   max-width: 360px;
   margin: 0 auto;
+  position: relative;
+}
+
+/* Mobile preview theme backgrounds - apply to browser frame for consistent background */
+.mobile-preview .preview-vibrant-theme .browser-frame {
+  background: linear-gradient(180deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.05) 100%) !important;
+}
+
+.mobile-preview .preview-dark-theme .browser-frame {
+  background: #0f172a !important;
+}
+
+.mobile-preview .preview-grey-theme .browser-frame {
+  background: linear-gradient(180deg, rgba(127,140,141,0.08) 0%, rgba(189,195,199,0.06) 100%) !important;
+}
+
+.mobile-preview .preview-light-theme .browser-frame {
+  background: #f5f7fb !important;
+}
+
+/* Mobile preview theme backgrounds - apply to browser content for full height */
+.mobile-preview .preview-vibrant-theme .browser-content {
+  background: linear-gradient(180deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.05) 100%) !important;
+  min-height: calc(100% - 40px); /* Subtract header height */
+  height: calc(100% - 40px);
+}
+
+.mobile-preview .preview-dark-theme .browser-content {
+  background: #0f172a !important;
+  min-height: calc(100% - 40px);
+  height: calc(100% - 40px);
+}
+
+.mobile-preview .preview-grey-theme .browser-content {
+  background: linear-gradient(180deg, rgba(127,140,141,0.08) 0%, rgba(189,195,199,0.06) 100%) !important;
+  min-height: calc(100% - 40px);
+  height: calc(100% - 40px);
+}
+
+.mobile-preview .preview-light-theme .browser-content {
+  background: #f5f7fb !important;
+  min-height: calc(100% - 40px);
+  height: calc(100% - 40px);
+}
+
+/* Mobile preview specific styles for full height */
+.mobile-preview .kyc-preview {
+  min-height: calc(100% - 40px); /* Match browser-content height */
+  padding: 16px 8px 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .mobile-preview .browser-header {
   padding: 8px;
   border-radius: 22px 22px 0 0;
-  background: #333;
-  border-bottom: 1px solid #555;
+  background: #f8f9fb;
+  border-bottom: 1px solid #eef1f4;
 }
 
 .mobile-preview .browser-dots {
@@ -655,9 +787,9 @@ textarea.form-control {
 }
 
 .mobile-preview .browser-url {
-  background: #444;
-  border: 1px solid #555;
-  color: #ccc;
+  background: #ffffff;
+  border: 1px solid #e9ecef;
+  color: #666;
   font-size: 10px;
   padding: 3px 6px;
 }
@@ -1086,6 +1218,8 @@ textarea.form-control {
         <div class="header-right">
           <div class="url-section">
             <div class="link-display" v-if="kycWebpageConfigTemp._id">
+              <span class="status-icon" :class="getStatusIconClass()" @mouseenter="showStatusTooltip($event, getStatusText())" @mouseleave="hideStatusTooltip($event)"></span>
+              <span class="status-tooltip"></span>
               <span class="link-text">{{ kycWebpageConfigTemp.generatedUrl || 'No URL generated' }}</span>
               <button class="copy-btn" @click="copyToClipboard" v-if="kycWebpageConfigTemp.generatedUrl" title="Copy URL">
                 <i class="fa fa-copy"></i>
@@ -1093,10 +1227,9 @@ textarea.form-control {
             </div>
             <div class="link-display" v-else>
               <span class="link-text">URL will be generated after saving</span>
+                                            <span class="status-icon not-created" @mouseenter="showStatusTooltip($event, 'Not Created')" @mouseleave="hideStatusTooltip($event)"></span>
+               <span class="status-tooltip"></span>
             </div>
-            <span class="status-badge" :class="getStatusClass()">
-              {{ getStatusText() }}
-            </span>
           </div>
         </div>
       </div>
@@ -1241,7 +1374,7 @@ textarea.form-control {
               </div>
             </div>
             
-            <div class="browser-frame" :class="`${previewMode}-preview`">
+            <div class="browser-frame" :class="`${previewMode}-preview preview-${kycWebpageConfigTemp.selectedTheme}-theme`">
               <div class="browser-header">
                 <div class="browser-dots">
                   <span class="browser-dot red"></span>
@@ -1431,6 +1564,9 @@ export default {
         case 'custom':
           if (this.kycWebpageConfigTemp.customExpiryDate) {
             expiry = new Date(this.kycWebpageConfigTemp.customExpiryDate);
+          } else {
+            // No custom date chosen yet – signal undefined to avoid treating as expired
+            return undefined;
           }
           break;
       }
@@ -1445,6 +1581,7 @@ export default {
       if (!this.kycWebpageConfigTemp._id) return 'Not Created';
       
       const daysRemaining = this.getDaysRemaining();
+      if (daysRemaining === undefined) return 'Active';
       if (daysRemaining === 0) return 'Expired';
       if (daysRemaining <= 7) return 'Expiring Soon';
       return 'Active';
@@ -1454,11 +1591,41 @@ export default {
       if (!this.kycWebpageConfigTemp._id) return 'status-warning';
       
       const daysRemaining = this.getDaysRemaining();
+      if (daysRemaining === undefined) return 'status-active';
       if (daysRemaining === 0) return 'status-expired';
       if (daysRemaining <= 7) return 'status-warning';
       return 'status-active';
     },
 
+    getStatusIconClass() {
+      if (!this.kycWebpageConfigTemp._id) return 'not-created';
+      
+      const daysRemaining = this.getDaysRemaining();
+      if (daysRemaining === undefined) return 'active';
+      if (daysRemaining === 0) return 'expired';
+      if (daysRemaining <= 7) return 'warning';
+      return 'active';
+    },
+
+    showStatusTooltip(event, statusText) {
+      const tooltip = event.target.nextElementSibling;
+      if (tooltip && tooltip.classList.contains('status-tooltip')) {
+        tooltip.textContent = statusText;
+        tooltip.style.left = event.pageX + 'px';
+        tooltip.style.top = (event.pageY - 40) + 'px';
+        tooltip.style.opacity = '1';
+        tooltip.style.visibility = 'visible';
+      }
+    },
+
+    hideStatusTooltip(event) {
+      const tooltip = event.target.nextElementSibling;
+      if (tooltip && tooltip.classList.contains('status-tooltip')) {
+        tooltip.style.opacity = '0';
+        tooltip.style.visibility = 'hidden';
+      }
+    },
+
     validateField() {
       if (!this.kycWebpageConfigTemp.pageTitle) {
         throw new Error('Page title is required')