@eric-emg/symphiq-components 1.2.335 → 1.2.337

package/fesm2022/symphiq-components.mjs

@@ -86887,33 +86887,13 @@ function PlanCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
 function PlanCardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "button", 15);
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 25);
-    i0.ɵɵelement(2, "path", 26);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.tooltipButtonClasses());
-} }
-function PlanCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 15);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(1, "svg", 25);
-    i0.ɵɵelement(2, "path", 26);
+    i0.ɵɵelementStart(1, "svg", 23);
+    i0.ɵɵelement(2, "path", 24);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.tooltipButtonClasses());
 } }
-function PlanCardComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r0.subValueClasses());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.getAdditionalShopsPrice(), " ");
-} }
 class PlanCardComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -86935,11 +86915,21 @@ class PlanCardComponent {
     formatPrice() {
         const info = this.planInfo();
         let price = info.planItemPrice.price || 0;
-        if (info.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();
+        console.log('[formatPrice] final:', `${symbol}${formattedPrice}`);
         return `${symbol}${formattedPrice}`;
     }
     getCurrencySymbol() {
@@ -87090,7 +87080,7 @@ class PlanCardComponent {
             : 'text-slate-600';
     }
     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: 51, vars: 34, 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-3", "left-1/2", "transform", "-translate-x-1/2", "px-4", "py-1", "rounded-full", "text-xs", "font-bold", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 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"], [1, "w-4", "h-4", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "text-right"], [1, "text-xs", "mt-1", 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"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["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"]], 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"] }, outputs: { planSelected: "planSelected" }, decls: 42, vars: 28, 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-3", "left-1/2", "transform", "-translate-x-1/2", "px-4", "py-1", "rounded-full", "text-xs", "font-bold", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-6"], [1, "flex-1"], [1, "text-xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-baseline", "gap-2"], [1, "text-4xl", "font-bold", 3, "ngClass"], [1, "text-base", 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"], [1, "w-4", "h-4", "rounded-full", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-sm", "font-semibold", 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"], ["fill", "currentColor", "viewBox", "0 0 20 20", 1, "w-3", "h-3"], ["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"]], 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, 2, 1, "div", 1);
@@ -87114,45 +87104,35 @@ class PlanCardComponent {
             i0.ɵɵelementStart(20, "span", 16);
             i0.ɵɵtext(21, " charged monthly based on your actual usage ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 12)(23, "div", 13)(24, "span", 14);
-            i0.ɵɵtext(25, "Shops");
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, PlanCardComponent_Conditional_26_Template, 3, 1, "button", 15);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 17)(28, "div", 16);
-            i0.ɵɵtext(29);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(30, PlanCardComponent_Conditional_30_Template, 2, 2, "div", 18);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(31, "div", 12)(32, "span", 14);
-            i0.ɵɵtext(33, "Unlimited recommendations");
+            i0.ɵɵelementStart(22, "div", 12)(23, "span", 14);
+            i0.ɵɵtext(24, "Unlimited recommendations");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(34, "svg", 19);
-            i0.ɵɵelement(35, "path", 20);
+            i0.ɵɵelementStart(25, "svg", 17);
+            i0.ɵɵelement(26, "path", 18);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(36, "div", 12)(37, "span", 14);
-            i0.ɵɵtext(38, "Unlimited seats");
+            i0.ɵɵelementStart(27, "div", 12)(28, "span", 14);
+            i0.ɵɵtext(29, "Unlimited seats");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(39, "svg", 19);
-            i0.ɵɵelement(40, "path", 20);
+            i0.ɵɵelementStart(30, "svg", 17);
+            i0.ɵɵelement(31, "path", 18);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(41, "div", 21)(42, "span", 14);
-            i0.ɵɵtext(43, "Google Analytics integration");
+            i0.ɵɵelementStart(32, "div", 19)(33, "span", 14);
+            i0.ɵɵtext(34, "Google Analytics integration");
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(44, "svg", 19);
-            i0.ɵɵelement(45, "path", 20);
+            i0.ɵɵelementStart(35, "svg", 17);
+            i0.ɵɵelement(36, "path", 18);
             i0.ɵɵelementEnd()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(46, "div", 22)(47, "h4", 23);
-            i0.ɵɵtext(48, " Contract terms ");
+            i0.ɵɵelementStart(37, "div", 20)(38, "h4", 21);
+            i0.ɵɵtext(39, " Contract terms ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(49, "p", 24);
-            i0.ɵɵtext(50);
+            i0.ɵɵelementStart(40, "p", 22);
+            i0.ɵɵtext(41);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cardContainerClasses());
@@ -87186,18 +87166,6 @@ class PlanCardComponent {
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.featureRowClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.labelClasses());
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.hasTooltip("shops") ? 26 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", ctx.valueClasses());
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.getShopsQuantity(), " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.getAdditionalShopsPrice() ? 30 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.featureRowClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -87283,29 +87251,6 @@ class PlanCardComponent {
           </span>
         </div>
 
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <div class="flex items-center gap-2">
-            <span [ngClass]="labelClasses()" class="text-sm font-medium">Shops</span>
-            @if (hasTooltip('shops')) {
-              <button [ngClass]="tooltipButtonClasses()" class="w-4 h-4 rounded-full flex items-center justify-center">
-                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                  <path 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"></path>
-                </svg>
-              </button>
-            }
-          </div>
-          <div class="text-right">
-            <div [ngClass]="valueClasses()" class="text-sm font-semibold">
-              {{ getShopsQuantity() }}
-            </div>
-            @if (getAdditionalShopsPrice()) {
-              <div [ngClass]="subValueClasses()" class="text-xs mt-1">
-                {{ getAdditionalShopsPrice() }}
-              </div>
-            }
-          </div>
-        </div>
-
         <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
           <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited recommendations</span>
           <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
@@ -87340,7 +87285,7 @@ class PlanCardComponent {
   `
             }]
     }], 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: 118 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PlanCardComponent, { className: "PlanCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/plan-card.component.ts", lineNumber: 95 }); })();
 
 const _forTrack0$1 = ($index, $item) => $item.planItemPrice.id;
 function PlanSelectionContainerComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
@@ -88934,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(() => {
@@ -88977,10 +88923,18 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.planLoadingEffect = effect(() => {
             const planCardInfos = this.planCardInfos();
             const isLoading = untracked(() => this.isPlanLoading());
-            console.log('[planLoadingEffect] triggered', { planCardInfos: planCardInfos?.length, isPlanLoading: isLoading });
             if (planCardInfos && isLoading) {
-                console.log('[planLoadingEffect] resetting isPlanLoading to false');
-                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(() => {
@@ -89703,9 +89657,8 @@ class SymphiqProfileAnalysisDashboardComponent {
         }
     }
     handlePeriodUnitChange(periodUnit) {
-        console.log('[handlePeriodUnitChange] setting isPlanLoading to true', { periodUnit });
+        this.planLoadingStartTime.set(Date.now());
         this.isPlanLoading.set(true);
-        console.log('[handlePeriodUnitChange] isPlanLoading is now:', this.isPlanLoading());
         this.periodUnitChanged.emit(periodUnit);
     }
     handlePlanSelection(plan) {