@eric-emg/symphiq-components 1.2.342 → 1.2.344

package/fesm2022/symphiq-components.mjs

@@ -86935,6 +86935,7 @@ class PlanCardComponent {
         this.planInfo = input.required(...(ngDevMode ? [{ debugName: "planInfo" }] : []));
         this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
         this.selectedPeriodUnit = input(ChargebeeItemPricePeriodUnitEnum.YEAR, ...(ngDevMode ? [{ debugName: "selectedPeriodUnit" }] : []));
+        this.monthlyComparisonPrice = input(undefined, ...(ngDevMode ? [{ debugName: "monthlyComparisonPrice" }] : []));
         this.planSelected = output();
         this.showBestValueBadge = computed(() => {
             return this.planInfo().bestValue === true;
@@ -87154,11 +87155,10 @@ At the end of each month, your total AI usage is calculated and automatically bi
         if (!this.showBestValueBadge())
             return null;
         const info = this.planInfo();
-        if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
+        const monthlyPrice = this.monthlyComparisonPrice();
+        if (info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR && monthlyPrice) {
             const annualPrice = info.planItemPrice.price || 0;
-            const monthlyPrice = annualPrice / 12;
-            const monthlyPlanPrice = monthlyPrice * 1.2;
-            const totalMonthlyOver12 = monthlyPlanPrice * 12;
+            const totalMonthlyOver12 = monthlyPrice * 12;
             const savings = totalMonthlyOver12 - annualPrice;
             if (savings > 0) {
                 const symbol = this.getCurrencySymbol();
@@ -87169,7 +87169,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
         return null;
     }
     static { this.ɵfac = function PlanCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PlanCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"] }, outputs: { planSelected: "planSelected" }, decls: 45, vars: 35, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-5", "left-1/2", "flex", "flex-col", "items-center", "gap-2", "z-10"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "text-sm", "font-bold", "mt-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], ["tooltipType", "markdown", "tooltipPosition", "right", 1, "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"], [1, "text-sm", "font-semibold", "text-right", "max-w-[60%]", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass", "innerHTML"], [1, "px-6", "py-2", "rounded-full", "text-base", "font-extrabold", "shadow-2xl", 3, "ngClass"], [1, "drop-shadow-lg"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass", "savings-badge", "savings-badge-selected"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z", "clip-rule", "evenodd"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PlanCardComponent, selectors: [["symphiq-plan-card"]], inputs: { viewMode: [1, "viewMode"], planInfo: [1, "planInfo"], isSelected: [1, "isSelected"], selectedPeriodUnit: [1, "selectedPeriodUnit"], monthlyComparisonPrice: [1, "monthlyComparisonPrice"] }, outputs: { planSelected: "planSelected" }, decls: 45, vars: 35, consts: [[1, "relative", "rounded-2xl", "border-2", "p-6", "transition-all", "duration-200", "cursor-pointer", "hover:scale-[1.02]", 3, "click", "ngClass"], [1, "absolute", "-top-5", "left-1/2", "flex", "flex-col", "items-center", "gap-2", "z-10"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 3, "ngClass"], [1, "text-sm", "font-bold", "mt-2", "flex", "items-center", "gap-1", 3, "ngClass"], [1, "flex-shrink-0", "ml-4"], [1, "w-6", "h-6", "rounded-full", "border-2", "flex", "items-center", "justify-center", "transition-all", "duration-200", 3, "ngClass"], [1, "w-3", "h-3", "rounded-full", 3, "ngClass"], [1, "space-y-4", 3, "ngClass"], [1, "flex", "justify-between", "items-center", "py-3", "border-b", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "text-sm", "font-medium", 3, "ngClass"], ["tooltipType", "markdown", "tooltipPosition", "right", 1, "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", 3, "libSymphiqTooltip", "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-4", "h-4"], ["fill-rule", "evenodd", "d", "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule", "evenodd"], [1, "text-sm", "font-semibold", "text-right", "max-w-[60%]", 3, "ngClass"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-5", "h-5", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clip-rule", "evenodd"], [1, "flex", "justify-between", "items-center", "py-3", 3, "ngClass"], [1, "pt-4", "mt-4", 3, "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-sm", "leading-relaxed", 3, "ngClass", "innerHTML"], [1, "px-6", "py-2", "rounded-full", "text-base", "font-extrabold", "shadow-2xl", 3, "ngClass"], [1, "drop-shadow-lg"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass", "savings-badge", "savings-badge-selected"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "shadow-lg", 3, "ngClass"], ["fill-rule", "evenodd", "d", "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", "clip-rule", "evenodd"], ["fill-rule", "evenodd", "d", "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z", "clip-rule", "evenodd"]], template: function PlanCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("click", function PlanCardComponent_Template_div_click_0_listener() { return ctx.handleCardClick(); });
             i0.ɵɵconditionalCreate(1, PlanCardComponent_Conditional_1_Template, 5, 6, "div", 1);
@@ -87288,7 +87288,7 @@ At the end of each month, your total AI usage is calculated and automatically bi
             i0.ɵɵproperty("ngClass", ctx.contractTermsLabelClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.contractTermsTextClasses())("innerHTML", ctx.getContractTerms(), i0.ɵɵsanitizeHtml);
-        } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes _ngcontent-%COMP%_border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 4s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:_ngcontent-%COMP%_pulse-glow 4s ease-in-out infinite,_ngcontent-%COMP%_shimmer 6s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 4s ease-in-out infinite,_ngcontent-%COMP%_shimmer 6s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed 50%,#a855f7 75% 100%)}.best-value-badge[_ngcontent-%COMP%]:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:_ngcontent-%COMP%_shimmer 4s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 4s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow-selected 4s ease-in-out infinite}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 5s ease-in-out infinite}.savings-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 5s ease-in-out infinite}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, TooltipDirective], styles: ["@keyframes _ngcontent-%COMP%_pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes _ngcontent-%COMP%_shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes _ngcontent-%COMP%_border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes _ngcontent-%COMP%_border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:_ngcontent-%COMP%_pulse-glow 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 12s ease-in-out infinite,_ngcontent-%COMP%_shimmer 20s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed,#8b5cf6,#9333ea,#a855f7);background-size:300% 300%}.best-value-badge[_ngcontent-%COMP%]:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:_ngcontent-%COMP%_shimmer 12s infinite}.best-value-card[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_border-glow-selected 12s ease-in-out infinite}.best-value-card[_ngcontent-%COMP%]:hover{transform:scale(1.02)}.savings-badge[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow 14s ease-in-out infinite}.savings-badge-selected[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse-glow-selected 14s ease-in-out infinite}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanCardComponent, [{
         type: Component,
@@ -87407,15 +87407,15 @@ At the end of each month, your total AI usage is calculated and automatically bi
         </div>
       </div>
     </div>
-  `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.03);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge{animation:pulse-glow 4s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#d946ef,#a855f7,#fbbf24);background-size:200% 200%;animation:pulse-glow 4s ease-in-out infinite,shimmer 6s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected{animation:pulse-glow-selected 4s ease-in-out infinite,shimmer 6s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed 50%,#a855f7 75% 100%)}.best-value-badge:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 4s infinite}.best-value-card{animation:border-glow 4s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected{animation:border-glow-selected 4s ease-in-out infinite}.best-value-card:hover{transform:scale(1.02)}.savings-badge{animation:pulse-glow 5s ease-in-out infinite}.savings-badge-selected{animation:pulse-glow-selected 5s ease-in-out infinite}\n"] }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 265 }); })();
+  `, styles: ["@keyframes pulse-glow{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #eab30899,0 0 40px #eab30866,0 0 60px #eab30833,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #eab308b3,0 0 50px #eab30880,0 0 75px #eab3084d,inset 0 0 25px #fff6}}@keyframes pulse-glow-selected{0%,to{transform:translate(-50%) scale(1);box-shadow:0 0 20px #a855f799,0 0 40px #a855f766,0 0 60px #a855f733,inset 0 0 20px #ffffff4d}50%{transform:translate(-50%) scale(1.06);box-shadow:0 0 25px #a855f7b3,0 0 50px #a855f780,0 0 75px #a855f74d,inset 0 0 25px #fff6}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes border-glow{0%,to{box-shadow:0 0 20px #eab30866,0 0 40px #eab30833,0 0 60px #eab3081a}50%{box-shadow:0 0 25px #eab30880,0 0 50px #eab3084d,0 0 75px #eab30826}}@keyframes border-glow-selected{0%,to{box-shadow:0 0 20px #a855f766,0 0 40px #a855f733,0 0 60px #a855f71a}50%{box-shadow:0 0 25px #a855f780,0 0 50px #a855f74d,0 0 75px #a855f726}}.best-value-badge{animation:pulse-glow 12s ease-in-out infinite;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ec4899,#d946ef,#a855f7,#ec4899 75%,#f59e0b 85%,#fbbf24);background-size:300% 300%;animation:pulse-glow 12s ease-in-out infinite,shimmer 20s linear infinite;position:relative;overflow:hidden;transition:all .3s ease}.best-value-badge-selected{animation:pulse-glow-selected 12s ease-in-out infinite,shimmer 20s linear infinite;background:linear-gradient(135deg,#a855f7,#9333ea,#7c3aed,#8b5cf6,#9333ea,#a855f7);background-size:300% 300%}.best-value-badge:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 12s infinite}.best-value-card{animation:border-glow 12s ease-in-out infinite;border-width:3px;transition:all .3s ease}.best-value-card-selected{animation:border-glow-selected 12s ease-in-out infinite}.best-value-card:hover{transform:scale(1.02)}.savings-badge{animation:pulse-glow 14s ease-in-out infinite}.savings-badge-selected{animation:pulse-glow-selected 14s ease-in-out infinite}\n"] }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], planInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "planInfo", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], monthlyComparisonPrice: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthlyComparisonPrice", required: false }] }], planSelected: [{ type: i0.Output, args: ["planSelected"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 270 }); })();
 
 const _forTrack0$1 = ($index, $item) => $item.planItemPrice.id;
 function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 17);
-    i0.ɵɵelementStart(2, "p", 18);
+    i0.ɵɵelement(1, "symphiq-indeterminate-spinner", 18);
+    i0.ɵɵelementStart(2, "p", 19);
     i0.ɵɵtext(3, " Loading your plan options... ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -87427,17 +87427,17 @@ function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (
 } }
 function PlanSelectionContainerComponent_Conditional_20_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "symphiq-plan-card", 20);
+    i0.ɵɵelementStart(0, "symphiq-plan-card", 21);
     i0.ɵɵlistener("planSelected", function PlanSelectionContainerComponent_Conditional_20_For_2_Template_symphiq_plan_card_planSelected_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handlePlanSelection($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const plan_r3 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("planInfo", plan_r3)("isSelected", ctx_r0.isSelectedPlan(plan_r3))("selectedPeriodUnit", ctx_r0.selectedPeriodUnit());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("planInfo", plan_r3)("isSelected", ctx_r0.isSelectedPlan(plan_r3))("selectedPeriodUnit", ctx_r0.selectedPeriodUnit())("monthlyComparisonPrice", ctx_r0.getMonthlyComparisonPrice());
 } }
 function PlanSelectionContainerComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵrepeaterCreate(1, PlanSelectionContainerComponent_Conditional_20_For_2_Template, 1, 4, "symphiq-plan-card", 19, _forTrack0$1);
+    i0.ɵɵrepeaterCreate(1, PlanSelectionContainerComponent_Conditional_20_For_2_Template, 1, 5, "symphiq-plan-card", 20, _forTrack0$1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -87447,14 +87447,14 @@ function PlanSelectionContainerComponent_Conditional_20_Template(rf, ctx) { if (
 function PlanSelectionContainerComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 21);
-    i0.ɵɵelement(2, "path", 22);
+    i0.ɵɵelementStart(1, "svg", 22);
+    i0.ɵɵelement(2, "path", 23);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(3, "p", 23);
+    i0.ɵɵelementStart(3, "p", 24);
     i0.ɵɵtext(4, " No plans available ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 24);
+    i0.ɵɵelementStart(5, "p", 25);
     i0.ɵɵtext(6, " Please contact support if this issue persists ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -87467,6 +87467,26 @@ function PlanSelectionContainerComponent_Conditional_21_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.emptySubtextClasses());
 } }
+function PlanSelectionContainerComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 26)(2, "div", 27)(3, "span", 28);
+    i0.ɵɵtext(4, "Selected:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(5);
+    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()()();
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.footerClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.footerTextClasses());
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", (tmp_3_0 = ctx_r0.selectedPlan()) == null ? null : tmp_3_0.planItemPrice == null ? null : tmp_3_0.planItemPrice.externalName, " ");
+} }
 class PlanSelectionContainerComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -87477,18 +87497,32 @@ class PlanSelectionContainerComponent {
         this.periodUnitChanged = output();
         this.planSelected = output();
         this.editCurrency = output();
-        this.selectedPlanId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedPlanId" }] : []));
+        this.checkout = output();
+        this.selectedPlan = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedPlan" }] : []));
     }
     handlePeriodChange(period) {
-        this.selectedPlanId.set(undefined);
+        this.selectedPlan.set(undefined);
         this.periodUnitChanged.emit(period);
     }
     handlePlanSelection(plan) {
-        this.selectedPlanId.set(plan.planItemPrice.id);
+        this.selectedPlan.set(plan);
         this.planSelected.emit(plan);
     }
+    handleCheckout() {
+        const plan = this.selectedPlan();
+        if (plan) {
+            this.checkout.emit(plan.planItemPrice);
+        }
+    }
     isSelectedPlan(plan) {
-        return this.selectedPlanId() === plan.planItemPrice.id;
+        return this.selectedPlan()?.planItemPrice.id === plan.planItemPrice.id;
+    }
+    getMonthlyComparisonPrice() {
+        const plans = this.planCardInfos();
+        if (plans && plans.length > 1) {
+            return plans[1].planItemPrice.price;
+        }
+        return undefined;
     }
     containerClasses() {
         return this.viewMode() === ViewModeEnum.DARK
@@ -87548,8 +87582,18 @@ class PlanSelectionContainerComponent {
             ? 'text-slate-500'
             : 'text-slate-500';
     }
+    footerClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-800 border-slate-700'
+            : 'bg-white border-slate-200';
+    }
+    footerTextClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-slate-200'
+            : '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" }, decls: 22, vars: 12, 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"], [3, "viewMode", "size"], [1, "text-base", "font-medium", 3, "ngClass"], [3, "viewMode", "planInfo", "isSelected", "selectedPeriodUnit"], [3, "planSelected", "viewMode", "planInfo", "isSelected", "selectedPeriodUnit"], ["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"]], 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, "px-6", "py-3", "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) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(4, "svg", 4);
@@ -87578,6 +87622,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);
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
             i0.ɵɵadvance();
@@ -87598,6 +87643,8 @@ class PlanSelectionContainerComponent {
             i0.ɵɵproperty("viewMode", ctx.viewMode())("selectedPeriodUnit", ctx.selectedPeriodUnit())("isLoading", ctx.isLoading());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isLoading() ? 19 : ctx.planCardInfos() && ctx.planCardInfos().length > 0 ? 20 : 21);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.selectedPlan() ? 22 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PlanSelectionContainerComponent, [{
@@ -87607,85 +87654,102 @@ class PlanSelectionContainerComponent {
                 standalone: true,
                 imports: [CommonModule, BillingPeriodToggleComponent, PlanCardComponent, IndeterminateSpinnerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center gap-3">
-          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path 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"></path>
-            </svg>
-          </div>
-          <div>
-            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-              Choose Your Plan
-            </h2>
-            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
-              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
-              <button
-                (click)="editCurrency.emit()"
-                [ngClass]="editButtonClasses()"
-                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
-              >
-                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path 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"></path>
-                </svg>
-                Edit
-              </button>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-8">
-        <symphiq-billing-period-toggle
-          [viewMode]="viewMode()"
-          [selectedPeriodUnit]="selectedPeriodUnit()"
-          [isLoading]="isLoading()"
-          (periodUnitChanged)="handlePeriodChange($event)"
-        />
-
-        @if (isLoading()) {
-          <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
-            <symphiq-indeterminate-spinner
-              [viewMode]="viewMode()"
-              [size]="'large'"
-            />
-            <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
-              Loading your plan options...
-            </p>
-          </div>
-        } @else if (planCardInfos() && planCardInfos()!.length > 0) {
-          <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
-            @for (plan of planCardInfos(); track plan.planItemPrice.id) {
-              <symphiq-plan-card
-                [viewMode]="viewMode()"
-                [planInfo]="plan"
-                [isSelected]="isSelectedPlan(plan)"
-                [selectedPeriodUnit]="selectedPeriodUnit()"
-                (planSelected)="handlePlanSelection($event)"
-              />
-            }
-          </div>
-        } @else {
-          <div [ngClass]="emptyStateClasses()" class="text-center py-16">
-            <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path 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"></path>
-            </svg>
-            <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
-              No plans available
-            </p>
-            <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
-              Please contact support if this issue persists
-            </p>
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center gap-3">
+          <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path 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"></path>
+            </svg>
+          </div>
+          <div>
+            <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+              Choose Your Plan
+            </h2>
+            <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5 flex items-center gap-2">
+              Selected currency: <span class="font-semibold">{{ selectedCurrency() }}</span>
+              <button
+                (click)="editCurrency.emit()"
+                [ngClass]="editButtonClasses()"
+                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md transition-colors"
+              >
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path 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"></path>
+                </svg>
+                Edit
+              </button>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-8">
+        <symphiq-billing-period-toggle
+          [viewMode]="viewMode()"
+          [selectedPeriodUnit]="selectedPeriodUnit()"
+          [isLoading]="isLoading()"
+          (periodUnitChanged)="handlePeriodChange($event)"
+        />
+
+        @if (isLoading()) {
+          <div class="flex flex-col items-center justify-center space-y-6 min-h-[500px] mb-32">
+            <symphiq-indeterminate-spinner
+              [viewMode]="viewMode()"
+              [size]="'large'"
+            />
+            <p [ngClass]="loadingTextClasses()" class="text-base font-medium">
+              Loading your plan options...
+            </p>
+          </div>
+        } @else if (planCardInfos() && planCardInfos()!.length > 0) {
+          <div class="flex flex-col gap-8 mb-32 min-h-[500px]">
+            @for (plan of planCardInfos(); track plan.planItemPrice.id) {
+              <symphiq-plan-card
+                [viewMode]="viewMode()"
+                [planInfo]="plan"
+                [isSelected]="isSelectedPlan(plan)"
+                [selectedPeriodUnit]="selectedPeriodUnit()"
+                [monthlyComparisonPrice]="getMonthlyComparisonPrice()"
+                (planSelected)="handlePlanSelection($event)"
+              />
+            }
+          </div>
+        } @else {
+          <div [ngClass]="emptyStateClasses()" class="text-center py-16">
+            <svg [ngClass]="emptyIconClasses()" class="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path 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"></path>
+            </svg>
+            <p [ngClass]="emptyTextClasses()" class="text-lg font-semibold">
+              No plans available
+            </p>
+            <p [ngClass]="emptySubtextClasses()" class="text-sm mt-2">
+              Please contact support if this issue persists
+            </p>
+          </div>
+        }
+      </div>
+    </div>
+
+    @if (selectedPlan()) {
+      <div [ngClass]="footerClasses()" class="fixed bottom-0 left-0 right-0 px-6 py-4 border-t shadow-lg z-50">
+        <div class="max-w-4xl mx-auto flex items-center justify-between">
+          <div [ngClass]="footerTextClasses()">
+            <span class="font-medium">Selected:</span> {{ selectedPlan()?.planItemPrice?.externalName }}
+          </div>
+          <button
+            (click)="handleCheckout()"
+            class="px-6 py-3 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"
+          >
+            Checkout plan
+          </button>
+        </div>
+      </div>
+    }
   `
             }]
-    }], 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"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanSelectionContainerComponent, { className: "PlanSelectionContainerComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-selection-container.component.ts", lineNumber: 90 }); })();
+    }], 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-dashboard/cards/plan-selection-container.component.ts", lineNumber: 107 }); })();
 
 class SubscriptionValuePropositionCardComponent {
     constructor() {