@eric-emg/symphiq-components 1.2.333 → 1.2.334

package/fesm2022/symphiq-components.mjs

@@ -86780,7 +86780,7 @@ class BillingPeriodToggleComponent {
             : 'text-slate-600';
     }
     static { this.ɵfac = function BillingPeriodToggleComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BillingPeriodToggleComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingPeriodToggleComponent, selectors: [["symphiq-billing-period-toggle"]], inputs: { viewMode: [1, "viewMode"], selectedPeriodUnit: [1, "selectedPeriodUnit"], isLoading: [1, "isLoading"] }, outputs: { periodUnitChanged: "periodUnitChanged" }, decls: 15, vars: 10, consts: [[1, "flex", "flex-col", "items-center", "gap-4", "mb-8"], [1, "flex", "items-center", "gap-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["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, "inline-flex", "rounded-xl", "p-1", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "relative", "px-6", "py-3", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "relative", "z-10"], [1, "absolute", "inset-0", "rounded-lg", "shadow-lg", "opacity-20"], [1, "text-sm", 3, "ngClass"]], template: function BillingPeriodToggleComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BillingPeriodToggleComponent, selectors: [["symphiq-billing-period-toggle"]], inputs: { viewMode: [1, "viewMode"], selectedPeriodUnit: [1, "selectedPeriodUnit"], isLoading: [1, "isLoading"] }, outputs: { periodUnitChanged: "periodUnitChanged" }, decls: 15, vars: 10, consts: [[1, "flex", "flex-col", "items-center", "gap-4", "mb-8"], [1, "flex", "items-center", "gap-3"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5", 3, "ngClass"], ["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, "inline-flex", "gap-2", "rounded-xl", "p-1.5", "transition-all", "duration-200", 3, "ngClass"], ["type", "button", 1, "relative", "px-6", "py-3", "rounded-lg", "font-semibold", "text-sm", "transition-all", "duration-200", "disabled:cursor-not-allowed", 3, "click", "disabled", "ngClass"], [1, "relative", "z-10"], [1, "absolute", "inset-0", "rounded-lg", "shadow-lg", "opacity-20"], [1, "text-sm", 3, "ngClass"]], template: function BillingPeriodToggleComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵnamespaceSVG();
             i0.ɵɵelementStart(2, "svg", 2);
@@ -86830,41 +86830,41 @@ class BillingPeriodToggleComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="flex flex-col items-center gap-4 mb-8">
-      <div class="flex items-center gap-3">
-        <svg [ngClass]="iconClasses()" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <div [ngClass]="toggleContainerClasses()" class="inline-flex rounded-xl p-1 transition-all duration-200">
-          <button
-            type="button"
-            [disabled]="isLoading()"
-            (click)="selectPeriod(periodUnitEnum.YEAR)"
-            [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
-            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
-            <span class="relative z-10">Annual contract</span>
-            @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
-              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
-            }
-          </button>
-          <button
-            type="button"
-            [disabled]="isLoading()"
-            (click)="selectPeriod(periodUnitEnum.MONTH)"
-            [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
-            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
-            <span class="relative z-10">Monthly contract</span>
-            @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
-              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
-            }
-          </button>
-        </div>
-      </div>
-      <p [ngClass]="subtitleClasses()" class="text-sm">
-        {{ getSubtitle() }}
-      </p>
-    </div>
+                template: `
+    <div class="flex flex-col items-center gap-4 mb-8">
+      <div class="flex items-center gap-3">
+        <svg [ngClass]="iconClasses()" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <div [ngClass]="toggleContainerClasses()" class="inline-flex gap-2 rounded-xl p-1.5 transition-all duration-200">
+          <button
+            type="button"
+            [disabled]="isLoading()"
+            (click)="selectPeriod(periodUnitEnum.YEAR)"
+            [ngClass]="getButtonClasses(periodUnitEnum.YEAR)"
+            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
+            <span class="relative z-10">Annual contract</span>
+            @if (selectedPeriodUnit() === periodUnitEnum.YEAR) {
+              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
+            }
+          </button>
+          <button
+            type="button"
+            [disabled]="isLoading()"
+            (click)="selectPeriod(periodUnitEnum.MONTH)"
+            [ngClass]="getButtonClasses(periodUnitEnum.MONTH)"
+            class="relative px-6 py-3 rounded-lg font-semibold text-sm transition-all duration-200 disabled:cursor-not-allowed">
+            <span class="relative z-10">Monthly contract</span>
+            @if (selectedPeriodUnit() === periodUnitEnum.MONTH) {
+              <div class="absolute inset-0 rounded-lg shadow-lg opacity-20"></div>
+            }
+          </button>
+        </div>
+      </div>
+      <p [ngClass]="subtitleClasses()" class="text-sm">
+        {{ getSubtitle() }}
+      </p>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], selectedPeriodUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedPeriodUnit", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], periodUnitChanged: [{ type: i0.Output, args: ["periodUnitChanged"] }] }); })();
@@ -86922,7 +86922,7 @@ class PlanCardComponent {
         this.selectedPeriodUnit = input(ChargebeeItemPricePeriodUnitEnum.YEAR, ...(ngDevMode ? [{ debugName: "selectedPeriodUnit" }] : []));
         this.planSelected = output();
         this.showBestValueBadge = computed(() => {
-            return this.planInfo().periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR;
+            return this.planInfo().bestValue === true;
         }, ...(ngDevMode ? [{ debugName: "showBestValueBadge" }] : []));
     }
     handleCardClick() {
@@ -86930,8 +86930,7 @@ class PlanCardComponent {
     }
     getPlanTitle() {
         const info = this.planInfo();
-        const periodLabel = info.periodUnit === ChargebeeItemPricePeriodUnitEnum.YEAR ? 'Pay Annually' : 'Pay Monthly';
-        return `${info.planItem.name} - ${periodLabel}`;
+        return info.planItem.externalName || info.planItem.name || 'Plan';
     }
     formatPrice() {
         const info = this.planInfo();
@@ -87229,112 +87228,112 @@ class PlanCardComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div
-      (click)="handleCardClick()"
-      [ngClass]="cardContainerClasses()"
-      class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
-
-      @if (showBestValueBadge()) {
-        <div [ngClass]="badgeClasses()" class="absolute -top-3 left-1/2 transform -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold">
-          Best value
-        </div>
-      }
-
-      <div class="flex items-start justify-between mb-6">
-        <div class="flex-1">
-          <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
-            {{ getPlanTitle() }}
-          </h3>
-          <div class="flex items-baseline gap-2">
-            <span [ngClass]="priceClasses()" class="text-4xl font-bold">
-              {{ formatPrice() }}
-            </span>
-            <span [ngClass]="pricePeriodClasses()" class="text-base">
-              {{ getPricePeriod() }}
-            </span>
-          </div>
-        </div>
-        <div class="flex-shrink-0 ml-4">
-          <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
-            @if (isSelected()) {
-              <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
-            }
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="sectionClasses()" class="space-y-4">
-        <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">AI usage</span>
-            @if (hasTooltip('aiUsage')) {
-              <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>
-          <span [ngClass]="valueClasses()" class="text-sm font-semibold">
-            charged monthly based on your actual usage
-          </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">
-            <path 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"></path>
-          </svg>
-        </div>
-
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
-          <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path 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"></path>
-          </svg>
-        </div>
-
-        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
-          <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
-          <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-            <path 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"></path>
-          </svg>
-        </div>
-
-        <div [ngClass]="contractTermsClasses()" class="pt-4">
-          <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
-            Contract terms
-          </h4>
-          <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed">
-            {{ getContractTerms() }}
-          </p>
-        </div>
-      </div>
-    </div>
+                template: `
+    <div
+      (click)="handleCardClick()"
+      [ngClass]="cardContainerClasses()"
+      class="relative rounded-2xl border-2 p-6 transition-all duration-200 cursor-pointer hover:scale-[1.02]">
+
+      @if (showBestValueBadge()) {
+        <div [ngClass]="badgeClasses()" class="absolute -top-3 left-1/2 transform -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold">
+          Best value
+        </div>
+      }
+
+      <div class="flex items-start justify-between mb-6">
+        <div class="flex-1">
+          <h3 [ngClass]="planTitleClasses()" class="text-xl font-bold mb-2">
+            {{ getPlanTitle() }}
+          </h3>
+          <div class="flex items-baseline gap-2">
+            <span [ngClass]="priceClasses()" class="text-4xl font-bold">
+              {{ formatPrice() }}
+            </span>
+            <span [ngClass]="pricePeriodClasses()" class="text-base">
+              {{ getPricePeriod() }}
+            </span>
+          </div>
+        </div>
+        <div class="flex-shrink-0 ml-4">
+          <div [ngClass]="radioClasses()" class="w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200">
+            @if (isSelected()) {
+              <div [ngClass]="radioInnerClasses()" class="w-3 h-3 rounded-full"></div>
+            }
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="sectionClasses()" class="space-y-4">
+        <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">AI usage</span>
+            @if (hasTooltip('aiUsage')) {
+              <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>
+          <span [ngClass]="valueClasses()" class="text-sm font-semibold">
+            charged monthly based on your actual usage
+          </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">
+            <path 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"></path>
+          </svg>
+        </div>
+
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
+          <span [ngClass]="labelClasses()" class="text-sm font-medium">Unlimited seats</span>
+          <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path 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"></path>
+          </svg>
+        </div>
+
+        <div [ngClass]="featureRowClasses()" class="flex justify-between items-center py-3 border-b">
+          <span [ngClass]="labelClasses()" class="text-sm font-medium">Google Analytics integration</span>
+          <svg [ngClass]="checkIconClasses()" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+            <path 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"></path>
+          </svg>
+        </div>
+
+        <div [ngClass]="contractTermsClasses()" class="pt-4">
+          <h4 [ngClass]="contractTermsLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
+            Contract terms
+          </h4>
+          <p [ngClass]="contractTermsTextClasses()" class="text-sm leading-relaxed">
+            {{ getContractTerms() }}
+          </p>
+        </div>
+      </div>
+    </div>
   `
             }]
     }], 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"] }] }); })();
@@ -88935,7 +88934,7 @@ class SymphiqProfileAnalysisDashboardComponent {
         this.isEditingCurrency = signal(false, ...(ngDevMode ? [{ debugName: "isEditingCurrency" }] : []));
         this.editingCurrencySelection = signal(null, ...(ngDevMode ? [{ debugName: "editingCurrencySelection" }] : []));
         this.selectedPeriodUnit = computed(() => {
-            return this.account()?.onboardingPeriodUnit || ChargebeeItemPricePeriodUnitEnum.YEAR;
+            return this.account()?.chargebeeItemPricePeriodUnit || ChargebeeItemPricePeriodUnitEnum.YEAR;
         }, ...(ngDevMode ? [{ debugName: "selectedPeriodUnit" }] : []));
         this.showPlanSelection = computed(() => {
             return this.hasBillingCurrency() && this.planCardInfos() && this.planCardInfos().length > 0;
@@ -88974,7 +88973,9 @@ class SymphiqProfileAnalysisDashboardComponent {
         }, ...(ngDevMode ? [{ debugName: "currencySelectionEffect" }] : []));
         this.planLoadingEffect = effect(() => {
             const planCardInfos = this.planCardInfos();
+            console.log('[planLoadingEffect] triggered', { planCardInfos: planCardInfos?.length, isPlanLoading: this.isPlanLoading() });
             if (planCardInfos && this.isPlanLoading()) {
+                console.log('[planLoadingEffect] resetting isPlanLoading to false');
                 this.isPlanLoading.set(false);
             }
         }, ...(ngDevMode ? [{ debugName: "planLoadingEffect" }] : []));
@@ -89698,7 +89699,9 @@ class SymphiqProfileAnalysisDashboardComponent {
         }
     }
     handlePeriodUnitChange(periodUnit) {
+        console.log('[handlePeriodUnitChange] setting isPlanLoading to true', { periodUnit });
         this.isPlanLoading.set(true);
+        console.log('[handlePeriodUnitChange] isPlanLoading is now:', this.isPlanLoading());
         this.periodUnitChanged.emit(periodUnit);
     }
     handlePlanSelection(plan) {