@eric-emg/symphiq-components 1.3.19 → 1.3.20

package/fesm2022/symphiq-components.mjs

@@ -25301,23 +25301,63 @@ class JourneyProgressIndicatorComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JourneyProgressIndicatorComponent, { className: "JourneyProgressIndicatorComponent", filePath: "lib/components/business-analysis-dashboard/journey-progress-indicator.component.ts", lineNumber: 370 }); })();
 
 function ConfidenceLevelCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 24);
+    i0.ɵɵelement(0, "div", 25);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("width", ctx_r0.confidenceData().potentialPercentage, "%");
+    i0.ɵɵstyleProp("width", ctx_r0.effectivePotentialPercentage(), "%");
     i0.ɵɵproperty("ngClass", ctx_r0.potentialProgressBarClasses());
 } }
 function ConfidenceLevelCardComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 25);
-    i0.ɵɵelement(2, "path", 26);
+    i0.ɵɵelementStart(1, "svg", 26);
+    i0.ɵɵelement(2, "path", 27);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "span", 27);
+    i0.ɵɵelementStart(3, "span", 28);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 28);
+    i0.ɵɵelementStart(5, "span", 29);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.currentStepCalloutClasses());
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.confidenceData().currentStepAction);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.currentStepBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" \u2192 ", ctx_r0.confidenceData().currentStepGrade, " (", ctx_r0.confidenceData().currentStepPercentage, "%) ");
+} }
+function ConfidenceLevelCardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "span", 28);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 30);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.nextDashboardCalloutClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Then: ", ctx_r0.confidenceData().nextDashboardAction);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.nextDashboardBadgeClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" \u2192 ", ctx_r0.confidenceData().nextDashboardGrade, " (", ctx_r0.confidenceData().nextDashboardPercentage, "%) ");
+} }
+function ConfidenceLevelCardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 26);
+    i0.ɵɵelement(2, "path", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(3, "span", 28);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 29);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -25338,6 +25378,7 @@ class ConfidenceLevelCardComponent {
         this.currentFocusAreaDomain = input(...(ngDevMode ? [undefined, { debugName: "currentFocusAreaDomain" }] : []));
         this.currentMetric = input(...(ngDevMode ? [undefined, { debugName: "currentMetric" }] : []));
         this.targets = input(...(ngDevMode ? [undefined, { debugName: "targets" }] : []));
+        this.isCurrentStepComplete = input(false, ...(ngDevMode ? [{ debugName: "isCurrentStepComplete" }] : []));
         this.elementRef = inject(ElementRef);
         this.hasAnimated = signal(false, ...(ngDevMode ? [{ debugName: "hasAnimated" }] : []));
         this.animatedPercentage = signal(0, ...(ngDevMode ? [{ debugName: "animatedPercentage" }] : []));
@@ -25398,7 +25439,7 @@ class ConfidenceLevelCardComponent {
                     quantitativeStatus: 'Full Analytics',
                     description: 'Good context achieved. Symphiq has strategic insights and detailed funnel analysis. Adding shop and marketing context will unlock more operationally-aligned recommendations.'
                 },
-                'shop-analysis': {
+                'shop-analysis': this.isCurrentStepComplete() ? {
                     grade: 'C+',
                     percentage: 55,
                     potentialGrade: 'B-',
@@ -25407,6 +25448,18 @@ class ConfidenceLevelCardComponent {
                     qualitativeStatus: 'Business + Shop',
                     quantitativeStatus: 'Full Analytics',
                     description: 'Solid foundation established. Symphiq understands your business strategy, funnel performance, and shop operations. Focus area and metric context will maximize recommendation precision.'
+                } : {
+                    grade: 'C',
+                    percentage: 45,
+                    currentStepAction: 'Complete shop profile',
+                    currentStepGrade: 'C+',
+                    currentStepPercentage: 55,
+                    nextDashboardAction: 'Analyze focus areas',
+                    nextDashboardGrade: 'B-',
+                    nextDashboardPercentage: 65,
+                    qualitativeStatus: 'Business + Funnel',
+                    quantitativeStatus: 'Full Analytics',
+                    description: 'Good progress! Symphiq has your business context and funnel data. Completing your shop profile will unlock operational insights and more targeted recommendations.'
                 },
                 'focus-area-analysis': {
                     grade: 'B-',
@@ -25453,6 +25506,10 @@ class ConfidenceLevelCardComponent {
             return grade.startsWith('C') || grade.startsWith('D') || grade.startsWith('F');
         }, ...(ngDevMode ? [{ debugName: "shouldPulse" }] : []));
         this.isLightMode = computed(() => this.viewMode() === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.effectivePotentialPercentage = computed(() => {
+            const data = this.confidenceData();
+            return data.currentStepPercentage ?? data.potentialPercentage;
+        }, ...(ngDevMode ? [{ debugName: "effectivePotentialPercentage" }] : []));
         this.cardContainerClasses = computed(() => {
             const isDark = !this.isLightMode();
             const baseClasses = 'border-2 shadow-2xl';
@@ -25677,6 +25734,62 @@ class ConfidenceLevelCardComponent {
                 ? 'bg-red-500/20 text-red-400'
                 : 'bg-red-100 text-red-700';
         }, ...(ngDevMode ? [{ debugName: "nextStepBadgeClasses" }] : []));
+        this.currentStepCalloutClasses = computed(() => {
+            const isDark = !this.isLightMode();
+            return isDark
+                ? 'bg-slate-700/50 text-slate-300 border border-slate-600/50'
+                : 'bg-slate-100 text-slate-700 border border-slate-200';
+        }, ...(ngDevMode ? [{ debugName: "currentStepCalloutClasses" }] : []));
+        this.currentStepBadgeClasses = computed(() => {
+            const grade = this.confidenceData().currentStepGrade;
+            const isDark = !this.isLightMode();
+            if (grade === 'A') {
+                return isDark
+                    ? 'bg-emerald-500/20 text-emerald-400'
+                    : 'bg-emerald-100 text-emerald-700';
+            }
+            else if (grade?.startsWith('B')) {
+                return isDark
+                    ? 'bg-blue-500/20 text-blue-400'
+                    : 'bg-blue-100 text-blue-700';
+            }
+            else if (grade?.startsWith('C')) {
+                return isDark
+                    ? 'bg-orange-500/20 text-orange-400'
+                    : 'bg-orange-100 text-orange-700';
+            }
+            return isDark
+                ? 'bg-red-500/20 text-red-400'
+                : 'bg-red-100 text-red-700';
+        }, ...(ngDevMode ? [{ debugName: "currentStepBadgeClasses" }] : []));
+        this.nextDashboardCalloutClasses = computed(() => {
+            const isDark = !this.isLightMode();
+            return isDark
+                ? 'bg-slate-800/30 text-slate-400 border border-slate-700/30'
+                : 'bg-slate-50 text-slate-500 border border-slate-100';
+        }, ...(ngDevMode ? [{ debugName: "nextDashboardCalloutClasses" }] : []));
+        this.nextDashboardBadgeClasses = computed(() => {
+            const grade = this.confidenceData().nextDashboardGrade;
+            const isDark = !this.isLightMode();
+            if (grade === 'A') {
+                return isDark
+                    ? 'bg-emerald-500/10 text-emerald-500'
+                    : 'bg-emerald-50 text-emerald-600';
+            }
+            else if (grade?.startsWith('B')) {
+                return isDark
+                    ? 'bg-blue-500/10 text-blue-500'
+                    : 'bg-blue-50 text-blue-600';
+            }
+            else if (grade?.startsWith('C')) {
+                return isDark
+                    ? 'bg-orange-500/10 text-orange-500'
+                    : 'bg-orange-50 text-orange-600';
+            }
+            return isDark
+                ? 'bg-red-500/10 text-red-500'
+                : 'bg-red-50 text-red-600';
+        }, ...(ngDevMode ? [{ debugName: "nextDashboardBadgeClasses" }] : []));
         effect(() => {
             const currentData = this.confidenceData();
             const prevPercentage = this.previousPercentage();
@@ -25902,7 +26015,7 @@ class ConfidenceLevelCardComponent {
         return `Strong context building. Symphiq has comprehensive business, operational, and marketing knowledge with detailed metric analysis (${completedCount}/${totalCount} metrics complete). Continue analyzing remaining metrics to achieve maximum confidence.`;
     }
     static { this.ɵfac = function ConfidenceLevelCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConfidenceLevelCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfidenceLevelCardComponent, selectors: [["symphiq-confidence-level-card"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], focusAreaDetails: [1, "focusAreaDetails"], currentFocusAreaDomain: [1, "currentFocusAreaDomain"], currentMetric: [1, "currentMetric"], targets: [1, "targets"] }, decls: 31, vars: 33, consts: [[1, "rounded-2xl", "p-6", "transition-all", "duration-500", "hover:scale-[1.02]", "relative", "overflow-hidden", "group", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", "transition-opacity", "duration-500", "group-hover:opacity-50", 3, "ngClass"], [1, "relative", "z-10"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "relative", "flex-shrink-0", "transition-all", "duration-300", "hover:scale-110", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-xl", "blur-xl", "opacity-60", "transition-all", "duration-500", "group-hover:opacity-80", 3, "ngClass"], [1, "relative", "px-5", "py-3", "rounded-xl", "text-center", "backdrop-blur-sm", "transition-all", "duration-500", 3, "ngClass"], [1, "text-[10px]", "font-bold", "uppercase", "tracking-wider", "mb-0.5", "transition-colors", "duration-500", 3, "ngClass"], [1, "text-3xl", "font-bold", "transition-all", "duration-500", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "relative"], [1, "h-3", "rounded-full", "overflow-hidden", "relative", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-full", "rounded-full", "transition-all", "duration-1000", "ease-out", 3, "width", "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "relative", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-3", "rounded-full", "blur-md", "opacity-40", "transition-all", "duration-1000", "ease-out", "-z-10", 3, "ngClass"], [1, "mt-3", "flex", "items-center", "gap-2", "text-xs", "font-medium", "p-2", "rounded-lg", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-full", "rounded-full", "transition-all", "duration-1000", "ease-out", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "flex-1"], [1, "font-bold", "px-2", "py-0.5", "rounded", 3, "ngClass"]], template: function ConfidenceLevelCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfidenceLevelCardComponent, selectors: [["symphiq-confidence-level-card"]], inputs: { viewMode: [1, "viewMode"], currentStepId: [1, "currentStepId"], focusAreaDetails: [1, "focusAreaDetails"], currentFocusAreaDomain: [1, "currentFocusAreaDomain"], currentMetric: [1, "currentMetric"], targets: [1, "targets"], isCurrentStepComplete: [1, "isCurrentStepComplete"] }, decls: 33, vars: 35, consts: [[1, "rounded-2xl", "p-6", "transition-all", "duration-500", "hover:scale-[1.02]", "relative", "overflow-hidden", "group", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", "transition-opacity", "duration-500", "group-hover:opacity-50", 3, "ngClass"], [1, "relative", "z-10"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "flex-1", "min-w-0"], [1, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-xs", "font-medium", 3, "ngClass"], [1, "relative", "flex-shrink-0", "transition-all", "duration-300", "hover:scale-110", 3, "ngClass"], [1, "absolute", "inset-0", "rounded-xl", "blur-xl", "opacity-60", "transition-all", "duration-500", "group-hover:opacity-80", 3, "ngClass"], [1, "relative", "px-5", "py-3", "rounded-xl", "text-center", "backdrop-blur-sm", "transition-all", "duration-500", 3, "ngClass"], [1, "text-[10px]", "font-bold", "uppercase", "tracking-wider", "mb-0.5", "transition-colors", "duration-500", 3, "ngClass"], [1, "text-3xl", "font-bold", "transition-all", "duration-500", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "space-y-2"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-semibold", 3, "ngClass"], [1, "text-xs", "font-bold", 3, "ngClass"], [1, "relative"], [1, "h-3", "rounded-full", "overflow-hidden", "relative", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-full", "rounded-full", "transition-all", "duration-1000", "ease-out", 3, "width", "ngClass"], [1, "h-full", "transition-all", "duration-1000", "ease-out", "relative", 3, "ngClass"], [1, "absolute", "inset-0", "opacity-30", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-3", "rounded-full", "blur-md", "opacity-40", "transition-all", "duration-1000", "ease-out", "-z-10", 3, "ngClass"], [1, "mt-3", "flex", "items-center", "gap-2", "text-xs", "font-medium", "p-2", "rounded-lg", 3, "ngClass"], [1, "mt-1.5", "flex", "items-center", "gap-2", "text-[10px]", "font-medium", "px-2", "py-1.5", "rounded-lg", "opacity-60", 3, "ngClass"], [1, "absolute", "top-0", "left-0", "h-full", "rounded-full", "transition-all", "duration-1000", "ease-out", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", "flex-shrink-0"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"], [1, "flex-1"], [1, "font-bold", "px-2", "py-0.5", "rounded", 3, "ngClass"], [1, "font-bold", "px-1.5", "py-0.5", "rounded", 3, "ngClass"]], template: function ConfidenceLevelCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "h3", 5);
@@ -25936,6 +26049,8 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵelement(29, "div", 22);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(30, ConfidenceLevelCardComponent_Conditional_30_Template, 7, 5, "div", 23);
+            i0.ɵɵconditionalCreate(31, ConfidenceLevelCardComponent_Conditional_31_Template, 5, 5, "div", 24);
+            i0.ɵɵconditionalCreate(32, ConfidenceLevelCardComponent_Conditional_32_Template, 7, 5, "div", 23);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("confidence-card-animate", ctx.hasAnimated());
@@ -25974,7 +26089,7 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.progressTrackClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.confidenceData().potentialPercentage ? 26 : -1);
+            i0.ɵɵconditional(ctx.effectivePotentialPercentage() ? 26 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("width", ctx.animatedPercentage(), "%");
             i0.ɵɵproperty("ngClass", ctx.progressBarClasses());
@@ -25984,7 +26099,11 @@ class ConfidenceLevelCardComponent {
             i0.ɵɵstyleProp("width", ctx.animatedPercentage(), "%");
             i0.ɵɵproperty("ngClass", ctx.progressGlowClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.confidenceData().nextStepAction && ctx.confidenceData().potentialGrade ? 30 : -1);
+            i0.ɵɵconditional(ctx.confidenceData().currentStepAction && ctx.confidenceData().currentStepGrade ? 30 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.confidenceData().nextDashboardAction && ctx.confidenceData().nextDashboardGrade ? 31 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.confidenceData().currentStepAction && ctx.confidenceData().nextStepAction && ctx.confidenceData().potentialGrade ? 32 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass], styles: ["@keyframes _ngcontent-%COMP%_confidence-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_grade-change{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.confidence-card-animate[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_confidence-fade-in-up .6s ease-out forwards}.animate-pulse-glow[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 2s ease-in-out infinite}.grade-change-animate[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_grade-change .8s ease-out}@media(prefers-reduced-motion:reduce){.confidence-card-animate[_ngcontent-%COMP%], .animate-pulse-glow[_ngcontent-%COMP%], .grade-change-animate[_ngcontent-%COMP%]{animation:none;opacity:1}}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfidenceLevelCardComponent, [{
@@ -26043,10 +26162,10 @@ class ConfidenceLevelCardComponent {
           <div class="relative">
             <!-- Background track -->
             <div [ngClass]="progressTrackClasses()" class="h-3 rounded-full overflow-hidden relative">
-              <!-- Potential progress bar (dashed/translucent) -->
-              @if (confidenceData().potentialPercentage) {
+              <!-- Potential progress bar (dashed/translucent) - uses currentStepPercentage if available -->
+              @if (effectivePotentialPercentage()) {
                 <div
-                  [style.width.%]="confidenceData().potentialPercentage"
+                  [style.width.%]="effectivePotentialPercentage()"
                   [ngClass]="potentialProgressBarClasses()"
                   class="absolute top-0 left-0 h-full rounded-full transition-all duration-1000 ease-out">
                 </div>
@@ -26068,8 +26187,31 @@ class ConfidenceLevelCardComponent {
             </div>
           </div>
 
-          <!-- Next Step Action Callout -->
-          @if (confidenceData().nextStepAction && confidenceData().potentialGrade) {
+          <!-- Current Step Action Callout (Primary) -->
+          @if (confidenceData().currentStepAction && confidenceData().currentStepGrade) {
+            <div [ngClass]="currentStepCalloutClasses()" class="mt-3 flex items-center gap-2 text-xs font-medium p-2 rounded-lg">
+              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+              </svg>
+              <span class="flex-1">{{ confidenceData().currentStepAction }}</span>
+              <span [ngClass]="currentStepBadgeClasses()" class="font-bold px-2 py-0.5 rounded">
+                → {{ confidenceData().currentStepGrade }} ({{ confidenceData().currentStepPercentage }}%)
+              </span>
+            </div>
+          }
+
+          <!-- Next Dashboard Preview (Secondary/Muted) -->
+          @if (confidenceData().nextDashboardAction && confidenceData().nextDashboardGrade) {
+            <div [ngClass]="nextDashboardCalloutClasses()" class="mt-1.5 flex items-center gap-2 text-[10px] font-medium px-2 py-1.5 rounded-lg opacity-60">
+              <span class="flex-1">Then: {{ confidenceData().nextDashboardAction }}</span>
+              <span [ngClass]="nextDashboardBadgeClasses()" class="font-bold px-1.5 py-0.5 rounded">
+                → {{ confidenceData().nextDashboardGrade }} ({{ confidenceData().nextDashboardPercentage }}%)
+              </span>
+            </div>
+          }
+
+          <!-- Legacy: Next Step Action Callout (when no current step defined) -->
+          @if (!confidenceData().currentStepAction && confidenceData().nextStepAction && confidenceData().potentialGrade) {
             <div [ngClass]="nextStepCalloutClasses()" class="mt-3 flex items-center gap-2 text-xs font-medium p-2 rounded-lg">
               <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
@@ -26084,8 +26226,8 @@ class ConfidenceLevelCardComponent {
       </div>
     </div>
   `, styles: ["@keyframes confidence-fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes grade-change{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.9}to{transform:scale(1);opacity:1}}.confidence-card-animate{animation:confidence-fade-in-up .6s ease-out forwards}.animate-pulse-glow{animation:pulse-glow 2s ease-in-out infinite}.grade-change-animate{animation:grade-change .8s ease-out}@media(prefers-reduced-motion:reduce){.confidence-card-animate,.animate-pulse-glow,.grade-change-animate{animation:none;opacity:1}}\n"] }]
-    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], currentFocusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFocusAreaDomain", required: false }] }], currentMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetric", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 185 }); })();
+    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], currentStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStepId", required: false }] }], focusAreaDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusAreaDetails", required: false }] }], currentFocusAreaDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFocusAreaDomain", required: false }] }], currentMetric: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentMetric", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], isCurrentStepComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCurrentStepComplete", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfidenceLevelCardComponent, { className: "ConfidenceLevelCardComponent", filePath: "lib/components/shared/confidence-level-card.component.ts", lineNumber: 214 }); })();
 
 function ContinueYourJourneyComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
@@ -69647,6 +69789,7 @@ class ShopWelcomeBannerComponent {
         this.businessName = input('your shop', ...(ngDevMode ? [{ debugName: "businessName" }] : []));
         this.isOnboarded = input(false, ...(ngDevMode ? [{ debugName: "isOnboarded" }] : []));
         this.analysisDate = input(...(ngDevMode ? [undefined, { debugName: "analysisDate" }] : []));
+        this.isShopProfileComplete = input(false, ...(ngDevMode ? [{ debugName: "isShopProfileComplete" }] : []));
         this.whatYoullSeeBelowItems = [
             { title: 'Operational Analysis', description: 'Insights into your shop\'s strengths, gaps, and opportunities based on your setup and processes' },
             { title: 'Capability Recommendations', description: 'Prioritized improvements to your shop infrastructure and operational workflows' },
@@ -69675,7 +69818,7 @@ class ShopWelcomeBannerComponent {
         this.textClasses = computed(() => this.isDark() ? 'text-slate-300' : 'text-slate-700', ...(ngDevMode ? [{ debugName: "textClasses" }] : []));
     }
     static { this.ɵfac = function ShopWelcomeBannerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopWelcomeBannerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopWelcomeBannerComponent, selectors: [["symphiq-shop-welcome-banner"]], inputs: { viewMode: [1, "viewMode"], businessName: [1, "businessName"], isOnboarded: [1, "isOnboarded"], analysisDate: [1, "analysisDate"] }, decls: 22, vars: 14, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], ["currentStepId", "shop-analysis", 3, "viewMode"], [1, "mt-6", "block", 3, "viewMode", "items", "analysisDate"], ["title", "Continue Your Journey", "onboardedTitle", "Keep Your Shop Profile Current", "description", "The next steps\u2014Focus Area Analysis and Metric Analysis\u2014let you share what marketing tactics you're already using and provide context for each metric in your funnel. This final layer of knowledge ensures every recommendation Symphiq generates fits seamlessly into your current strategy while identifying the highest-leverage improvements.", "onboardedDescription", "As you implement improvements, adopt new tools, or change your operational processes, update your Shop Analysis to keep recommendations aligned with your current capabilities. This ensures Symphiq continues to suggest tactics you can actually execute with your existing team and infrastructure.", 1, "mt-6", "block", 3, "viewMode", "isOnboarded"]], template: function ShopWelcomeBannerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopWelcomeBannerComponent, selectors: [["symphiq-shop-welcome-banner"]], inputs: { viewMode: [1, "viewMode"], businessName: [1, "businessName"], isOnboarded: [1, "isOnboarded"], analysisDate: [1, "analysisDate"], isShopProfileComplete: [1, "isShopProfileComplete"] }, decls: 22, vars: 15, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-8", 3, "ngClass"], [1, "flex", "items-start", "gap-6"], [1, "flex-shrink-0", "w-16", "h-16", "rounded-2xl", "flex", "items-center", "justify-center", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-8", "h-8"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"], [1, "flex-1"], [1, "text-2xl", "sm:text-3xl", "font-bold", "mb-3", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-3", "gap-6", "mb-6"], [1, "lg:col-span-2", "space-y-3"], [1, "text-base", "leading-relaxed", 3, "ngClass"], [1, "font-semibold"], [1, "lg:col-span-1"], ["currentStepId", "shop-analysis", 3, "viewMode", "isCurrentStepComplete"], [1, "mt-6", "block", 3, "viewMode", "items", "analysisDate"], ["title", "Continue Your Journey", "onboardedTitle", "Keep Your Shop Profile Current", "description", "The next steps\u2014Focus Area Analysis and Metric Analysis\u2014let you share what marketing tactics you're already using and provide context for each metric in your funnel. This final layer of knowledge ensures every recommendation Symphiq generates fits seamlessly into your current strategy while identifying the highest-leverage improvements.", "onboardedDescription", "As you implement improvements, adopt new tools, or change your operational processes, update your Shop Analysis to keep recommendations aligned with your current capabilities. This ensures Symphiq continues to suggest tactics you can actually execute with your existing team and infrastructure.", 1, "mt-6", "block", 3, "viewMode", "isOnboarded"]], template: function ShopWelcomeBannerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(4, "svg", 4);
@@ -69715,7 +69858,7 @@ class ShopWelcomeBannerComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.textClasses());
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("viewMode", ctx.viewMode());
+            i0.ɵɵproperty("viewMode", ctx.viewMode())("isCurrentStepComplete", ctx.isShopProfileComplete());
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("items", ctx.whatYoullSeeBelowItems)("analysisDate", ctx.formattedAnalysisDate());
             i0.ɵɵadvance();
@@ -69765,6 +69908,7 @@ class ShopWelcomeBannerComponent {
                 <symphiq-confidence-level-card
                   [viewMode]="viewMode()"
                   currentStepId="shop-analysis"
+                  [isCurrentStepComplete]="isShopProfileComplete()"
                 />
               </div>
             </div>
@@ -69791,8 +69935,8 @@ class ShopWelcomeBannerComponent {
     </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], businessName: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessName", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], analysisDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisDate", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopWelcomeBannerComponent, { className: "ShopWelcomeBannerComponent", filePath: "lib/components/profile-analysis-shop-dashboard/shop-welcome-banner.component.ts", lineNumber: 75 }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], businessName: [{ type: i0.Input, args: [{ isSignal: true, alias: "businessName", required: false }] }], isOnboarded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOnboarded", required: false }] }], analysisDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "analysisDate", required: false }] }], isShopProfileComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShopProfileComplete", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopWelcomeBannerComponent, { className: "ShopWelcomeBannerComponent", filePath: "lib/components/profile-analysis-shop-dashboard/shop-welcome-banner.component.ts", lineNumber: 76 }); })();
 
 function MetricWelcomeBannerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -88331,8 +88475,16 @@ function PlanSelectionContainerComponent_Conditional_22_Template(rf, ctx) { if (
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "button", 29);
     i0.ɵɵlistener("click", function PlanSelectionContainerComponent_Conditional_22_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleCheckout()); });
-    i0.ɵɵtext(7, " Checkout plan ");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(7, "span", 30);
+    i0.ɵɵelementStart(8, "span", 31);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(9, "svg", 32);
+    i0.ɵɵelement(10, "path", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(11, " Checkout plan ");
+    i0.ɵɵelementStart(12, "svg", 34);
+    i0.ɵɵelement(13, "path", 35);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     let tmp_3_0;
     const ctx_r0 = i0.ɵɵnextContext();
@@ -88448,7 +88600,7 @@ class PlanSelectionContainerComponent {
             : 'text-slate-700';
     }
     static { this.ɵfac = function PlanSelectionContainerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanSelectionContainerComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionContainerComponent, selectors: [["symphiq-plan-selection-container"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"], planCardInfos: [1, "planCardInfos"], isLoading: [1, "isLoading"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", editCurrency: "editCurrency", checkout: "checkout" }, decls: 23, vars: 13, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [3, "periodUnitChanged", "viewMode", "selectedPeriodUnit", "isLoading"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-6", "min-h-[500px]", "mb-32"], [1, "flex", "flex-col", "gap-8", "mb-32", "min-h-[500px]"], [1, "text-center", "py-16", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "px-6", "py-4", "border-t", "shadow-lg", "z-50", 3, "ngClass"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-lg", "font-semibold", 3, "ngClass"], [1, "text-sm", "mt-2", 3, "ngClass"], [1, "max-w-4xl", "mx-auto", "flex", "items-center", "justify-between"], [3, "ngClass"], [1, "font-medium"], [1, "px-12", "py-3", "min-w-[200px]", "bg-gradient-to-r", "from-emerald-500", "to-cyan-500", "hover:from-emerald-600", "hover:to-cyan-600", "text-white", "font-semibold", "rounded-lg", "shadow-md", "transition-all", "duration-200", 3, "click"]], template: function PlanSelectionContainerComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanSelectionContainerComponent, selectors: [["symphiq-plan-selection-container"]], inputs: { viewMode: [1, "viewMode"], selectedCurrency: [1, "selectedCurrency"], planCardInfos: [1, "planCardInfos"], isLoading: [1, "isLoading"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", editCurrency: "editCurrency", checkout: "checkout" }, decls: 23, vars: 13, consts: [[1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", "flex", "items-center", "gap-2", 3, "ngClass"], [1, "font-semibold"], [1, "inline-flex", "items-center", "gap-1", "px-2", "py-0.5", "text-xs", "font-medium", "rounded-md", "transition-colors", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"], [1, "p-8", 3, "ngClass"], [3, "periodUnitChanged", "viewMode", "selectedPeriodUnit", "isLoading"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-6", "min-h-[500px]", "mb-32"], [1, "flex", "flex-col", "gap-8", "mb-32", "min-h-[500px]"], [1, "text-center", "py-16", 3, "ngClass"], [1, "fixed", "bottom-0", "left-0", "right-0", "px-6", "py-4", "border-t", "shadow-lg", "z-50", 3, "ngClass"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit", "monthlyComparisonPrice"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-lg", "font-semibold", 3, "ngClass"], [1, "text-sm", "mt-2", 3, "ngClass"], [1, "max-w-4xl", "mx-auto", "flex", "items-center", "justify-between"], [3, "ngClass"], [1, "font-medium"], [1, "group", "relative", "px-16", "py-5", "min-w-[280px]", "bg-gradient-to-r", "from-emerald-500", "via-teal-500", "to-cyan-500", "hover:from-emerald-400", "hover:via-teal-400", "hover:to-cyan-400", "text-white", "text-xl", "font-bold", "rounded-xl", "shadow-xl", "hover:shadow-emerald-500/40", "hover:shadow-2xl", "transition-all", "duration-300", "hover:scale-105", "active:scale-95", "overflow-hidden", 3, "click"], [1, "absolute", "inset-0", "bg-gradient-to-r", "from-transparent", "via-white/30", "to-transparent", "-translate-x-full", "group-hover:translate-x-full", "transition-transform", "duration-700", "ease-in-out"], [1, "relative", "flex", "items-center", "justify-center", "gap-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "group-hover:translate-x-1", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function PlanSelectionContainerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(4, "svg", 4);
@@ -88477,7 +88629,7 @@ class PlanSelectionContainerComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(19, PlanSelectionContainerComponent_Conditional_19_Template, 4, 3, "div", 14)(20, PlanSelectionContainerComponent_Conditional_20_Template, 3, 0, "div", 15)(21, PlanSelectionContainerComponent_Conditional_21_Template, 7, 4, "div", 16);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(22, PlanSelectionContainerComponent_Conditional_22_Template, 8, 3, "div", 17);
+            i0.ɵɵconditionalCreate(22, PlanSelectionContainerComponent_Conditional_22_Template, 14, 3, "div", 17);
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
             i0.ɵɵadvance();
@@ -88594,9 +88746,18 @@ class PlanSelectionContainerComponent {
           </div>
           <button
             (click)="handleCheckout()"
-            class="px-12 py-3 min-w-[200px] bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-semibold rounded-lg shadow-md transition-all duration-200"
+            class="group relative px-16 py-5 min-w-[280px] bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 hover:from-emerald-400 hover:via-teal-400 hover:to-cyan-400 text-white text-xl font-bold rounded-xl shadow-xl hover:shadow-emerald-500/40 hover:shadow-2xl transition-all duration-300 hover:scale-105 active:scale-95 overflow-hidden"
           >
-            Checkout plan
+            <span class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"></span>
+            <span class="relative flex items-center justify-center gap-3">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+              </svg>
+              Checkout plan
+              <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+              </svg>
+            </span>
           </button>
         </div>
       </div>
@@ -88604,7 +88765,7 @@ class PlanSelectionContainerComponent {
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedCurrency: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCurrency", required: false }] }], planCardInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "planCardInfos", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }], editCurrency: [{ type: i0.Output, args: ["editCurrency"] }], checkout: [{ type: i0.Output, args: ["checkout"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanSelectionContainerComponent, { className: "PlanSelectionContainerComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/plan-selection-container.component.ts", lineNumber: 107 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanSelectionContainerComponent, { className: "PlanSelectionContainerComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/plan-selection-container.component.ts", lineNumber: 116 }); })();
 
 const _forTrack0$f = ($index, $item) => $item.item.id;
 function ProfileCategoryListComponent_For_2_Template(rf, ctx) { if (rf & 1) {
@@ -93661,7 +93822,7 @@ function SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_
     let tmp_3_0;
     let tmp_5_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("businessName", ((tmp_3_0 = ctx_r1.profileAnalysis()) == null ? null : tmp_3_0.profileAnalysisStructured == null ? null : tmp_3_0.profileAnalysisStructured.businessName) || "your shop")("isOnboarded", ctx_r1.isOnboarded())("analysisDate", (tmp_5_0 = ctx_r1.profileAnalysis()) == null ? null : tmp_5_0.selfContentCompletedDate);
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("businessName", ((tmp_3_0 = ctx_r1.profileAnalysis()) == null ? null : tmp_3_0.profileAnalysisStructured == null ? null : tmp_3_0.profileAnalysisStructured.businessName) || "your shop")("isOnboarded", ctx_r1.isOnboarded())("analysisDate", (tmp_5_0 = ctx_r1.profileAnalysis()) == null ? null : tmp_5_0.selfContentCompletedDate)("isShopProfileComplete", !!ctx_r1.profileAnalysis());
 } }
 function SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-metric-welcome-banner", 31);
@@ -93673,7 +93834,7 @@ function SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_
 } }
 function SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵconditionalCreate(1, SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_1_Template, 1, 4, "symphiq-shop-welcome-banner", 30);
+    i0.ɵɵconditionalCreate(1, SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_1_Template, 1, 5, "symphiq-shop-welcome-banner", 30);
     i0.ɵɵconditionalCreate(2, SymphiqProfileShopAnalysisDashboardComponent_Conditional_7_Conditional_2_Template, 1, 4, "symphiq-metric-welcome-banner", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -95477,7 +95638,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.planSelectionContainer = _t.first);
         } }, hostBindings: function SymphiqProfileShopAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileShopAnalysisDashboardComponent_scroll_HostBindingHandler() { return ctx.onWindowScroll(); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction", markAsReviewedClick: "markAsReviewedClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 31, vars: 60, consts: [["shopProfileStatusCard", ""], ["planSelectionContainer", ""], [1, "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [3, "viewMode", "progress", "embedded"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate", "showControls", "embedded", "scrollEvent"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], ["title", "Loading Your Shop Profile Analysis", "subtitle", "Please wait while we prepare your personalized insights...", "size", "large", 3, "viewMode", "backdropBlur"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "expandedRecommendationId", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed", "isLoading"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded", "analysisDate"], [3, "viewMode", "metricName", "isOnboarded", "analysisDate"], [1, "mb-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "goals", "viewMode"], ["subtitle", "We're analyzing your data to create your personalized analysis. It will appear when ready.", 3, "itemStatus", "viewMode", "title"], [3, "viewMoreClick", "goals", "viewMode"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "selectionChanged", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [1, "mb-32"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["type", "button", 1, "cursor-pointer", "w-full", "px-6", "py-5", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser", "hideHeader"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMetricDetailsClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileShopAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction", markAsReviewedClick: "markAsReviewedClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 31, vars: 60, consts: [["shopProfileStatusCard", ""], ["planSelectionContainer", ""], [1, "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [3, "viewMode", "progress", "embedded"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate", "showControls", "embedded", "scrollEvent"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], ["title", "Loading Your Shop Profile Analysis", "subtitle", "Please wait while we prepare your personalized insights...", "size", "large", 3, "viewMode", "backdropBlur"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "expandedRecommendationId", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed", "isLoading"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded", "analysisDate", "isShopProfileComplete"], [3, "viewMode", "metricName", "isOnboarded", "analysisDate"], [1, "mb-8"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "goals", "viewMode"], ["subtitle", "We're analyzing your data to create your personalized analysis. It will appear when ready.", 3, "itemStatus", "viewMode", "title"], [3, "viewMoreClick", "goals", "viewMode"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "selectionChanged", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [1, "mb-32"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["type", "button", 1, "cursor-pointer", "w-full", "px-6", "py-5", "flex", "items-center", "justify-between", "gap-4", "text-left", "transition-colors", "duration-200", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", "flex-shrink-0", "transition-transform", "duration-200", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M19 9l-7 7-7-7"], [1, "grid", "transition-[grid-template-rows]", "duration-300", "ease-in-out"], [1, "overflow-hidden"], [1, "border-t", 3, "ngClass"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser", "hideHeader"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMetricDetailsClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileShopAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "div", 3)(2, "symphiq-scroll-progress-bar", 4);
             i0.ɵɵelementStart(3, "div", 5)(4, "symphiq-dashboard-header", 6);
@@ -95650,6 +95811,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
                     [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
                     [isOnboarded]="isOnboarded()"
                     [analysisDate]="profileAnalysis()?.selfContentCompletedDate"
+                    [isShopProfileComplete]="!!profileAnalysis()"
                 />
               }
               @if (isMetricAnalysis()) {
@@ -96364,7 +96526,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
             type: HostListener,
             args: ['window:scroll']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileShopAnalysisDashboardComponent, { className: "SymphiqProfileShopAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/symphiq-profile-shop-analysis-dashboard.component.ts", lineNumber: 892 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileShopAnalysisDashboardComponent, { className: "SymphiqProfileShopAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/symphiq-profile-shop-analysis-dashboard.component.ts", lineNumber: 893 }); })();
 
 function ProfileAnalysisStatusSummaryComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 3);