@eric-emg/symphiq-components 1.2.336 → 1.2.338

package/fesm2022/symphiq-components.mjs

@@ -86915,11 +86915,21 @@ class PlanCardComponent {
     formatPrice() {
         const info = this.planInfo();
         let price = info.planItemPrice.price || 0;
-        if (info.planItemPrice.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
+        const periodUnit = info.planItemPrice.periodUnit;
+        console.log('[formatPrice]', {
+            externalName: info.planItemPrice.externalName,
+            originalPrice: info.planItemPrice.price,
+            periodUnit,
+            isYear: periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR,
+            yearEnumValue: ChargebeeItemPricePeriodUnitEnum.YEAR
+        });
+        if (periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR) {
             price = price / 12;
+            console.log('[formatPrice] divided by 12:', price);
         }
         const symbol = this.getCurrencySymbol();
-        const formattedPrice = Math.floor(price / 100).toLocaleString();
+        const formattedPrice = Math.floor(price).toLocaleString();
+        console.log('[formatPrice] final:', `${symbol}${formattedPrice}`);
         return `${symbol}${formattedPrice}`;
     }
     getCurrencySymbol() {
@@ -87415,7 +87425,7 @@ class PlanSelectionContainerComponent {
             : 'text-slate-500';
     }
     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", "py-16", "space-y-6"], [1, "flex", "flex-col", "gap-8", "mb-32"], [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" }, 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", "py-16", "space-y-6", "min-h-[400px]"], [1, "flex", "flex-col", "gap-8", "mb-32", "min-h-[400px]"], [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) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(4, "svg", 4);
@@ -87512,7 +87522,7 @@ class PlanSelectionContainerComponent {
         />
 
         @if (isLoading()) {
-          <div class="flex flex-col items-center justify-center py-16 space-y-6">
+          <div class="flex flex-col items-center justify-center py-16 space-y-6 min-h-[400px]">
             <symphiq-indeterminate-spinner
               [viewMode]="viewMode()"
               [size]="'large'"
@@ -87522,7 +87532,7 @@ class PlanSelectionContainerComponent {
             </p>
           </div>
         } @else if (planCardInfos() && planCardInfos()!.length > 0) {
-          <div class="flex flex-col gap-8 mb-32">
+          <div class="flex flex-col gap-8 mb-32 min-h-[400px]">
             @for (plan of planCardInfos(); track plan.planItemPrice.id) {
               <symphiq-plan-card
                 [viewMode]="viewMode()"
@@ -88869,6 +88879,7 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.isCurrencySelectionLoading = signal(false, ...(ngDevMode ? [{ debugName: "isCurrencySelectionLoading" }] : []));
         this.selectedCurrency = signal(null, ...(ngDevMode ? [{ debugName: "selectedCurrency" }] : []));
         this.isPlanLoading = signal(false, ...(ngDevMode ? [{ debugName: "isPlanLoading" }] : []));
+        this.planLoadingStartTime = signal(0, ...(ngDevMode ? [{ debugName: "planLoadingStartTime" }] : []));
         this.isEditingCurrency = signal(false, ...(ngDevMode ? [{ debugName: "isEditingCurrency" }] : []));
         this.editingCurrencySelection = signal(null, ...(ngDevMode ? [{ debugName: "editingCurrencySelection" }] : []));
         this.selectedPeriodUnit = computed(() => {
@@ -88913,7 +88924,17 @@ class SymphiqProfileAnalysisDashboardComponent {
             const planCardInfos = this.planCardInfos();
             const isLoading = untracked(() => this.isPlanLoading());
             if (planCardInfos && isLoading) {
-                this.isPlanLoading.set(false);
+                const startTime = untracked(() => this.planLoadingStartTime());
+                const elapsed = Date.now() - startTime;
+                const minDelay = 300;
+                if (elapsed >= minDelay) {
+                    this.isPlanLoading.set(false);
+                }
+                else {
+                    setTimeout(() => {
+                        this.isPlanLoading.set(false);
+                    }, minDelay - elapsed);
+                }
             }
         }, ...(ngDevMode ? [{ debugName: "planLoadingEffect" }] : []));
         this.embeddedScrollEffect = effect(() => {
@@ -89636,6 +89657,7 @@ class SymphiqProfileAnalysisDashboardComponent {
         }
     }
     handlePeriodUnitChange(periodUnit) {
+        this.planLoadingStartTime.set(Date.now());
         this.isPlanLoading.set(true);
         this.periodUnitChanged.emit(periodUnit);
     }