@eric-emg/symphiq-components 1.2.256 → 1.2.258

package/fesm2022/symphiq-components.mjs

@@ -15,6 +15,8 @@ import { FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angu
 import { trigger, transition, style, animate } from '@angular/animations';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MarkdownComponent } from 'ngx-markdown';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { Root, color, Tooltip, Bullet, Circle, Legend, percent, LinearGradient, p100, p50 } from '@amcharts/amcharts5';
 import { XYChart, CategoryAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCursor, LineSeries, DateAxis, ColumnSeries } from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
@@ -59484,6 +59486,13 @@ class InitialTargetSettingComponent {
             title: 'Current Pace Projection',
             markdown: 'This is your projected year-end revenue based on your current performance trends. It extrapolates your year-to-date results to estimate where you will finish the year if you maintain your current pace.'
         };
+        effect(() => {
+            const targets = this.targets();
+            if (targets && targets.length > 0) {
+                this.calculationState.set('results');
+                this.detailsExpanded.set(false);
+            }
+        }, { allowSignalWrites: true });
         effect(() => {
             const response = this.reverseCalculationResponse();
             if (response) {
@@ -60522,40 +60531,15 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
     i0.ɵɵelementStart(1, "div", 21)(2, "symphiq-initial-target-setting", 22);
-    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_targetsCreated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.targetsCreated.emit($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_calculateRevenueRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueRequest.emit($event)); });
+    i0.ɵɵlistener("targetsCreated", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_targetsCreated_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onTargetsCreated($event)); })("calculateRevenueRequest", function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template_symphiq_initial_target_setting_calculateRevenueRequest_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.calculateRevenueRequest.emit($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", ctx_r0.hasCurrentYearTargets());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(12, _c0$p))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults())("reverseCalculationResponse", ctx_r0.reverseCalculationResponse())("targets", ctx_r0.targets());
 } }
-function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
-    i0.ɵɵelementStart(1, "div", 23)(2, "div", 24)(3, "div", 25);
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(4, "svg", 26);
-    i0.ɵɵelement(5, "path", 27);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(6, "h3", 28);
-    i0.ɵɵtext(7, " Revenue Calculator Dashboard ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "p", 29);
-    i0.ɵɵtext(9, " Your targets are set! The full revenue calculator dashboard with pacing and insights will be displayed here. ");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", true);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.placeholderContainerClasses());
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r0.placeholderIconClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.placeholderTitleClasses());
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.placeholderTextClasses());
-} }
+dayjs.extend(utc);
 class SymphiqRevenueCalculatorDashboardComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -60699,10 +60683,20 @@ class SymphiqRevenueCalculatorDashboardComponent {
             ? 'text-slate-600'
             : 'text-slate-400';
     }
+    onTargetsCreated(targets) {
+        const startDate = dayjs().utc().startOf('year').toDate();
+        const endDate = dayjs().utc().endOf('year').toDate();
+        const targetsWithDates = targets.map(target => ({
+            ...target,
+            startDate,
+            endDate
+        }));
+        this.targetsCreated.emit(targetsWithDates);
+    }
     static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 26, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "calculateRevenueRequest", "viewMode", "funnelMetrics", "mainUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults", "reverseCalculationResponse", "targets"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -60720,7 +60714,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵlistener("stepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(21, "main", 11)(22, "div", 6);
-            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 13)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
+            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 13);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -60750,7 +60744,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("viewMode", ctx.viewMode())("currentStepId", ctx.JourneyStepIdEnum.REVENUE_CALCULATOR)("showNextStepAction", ctx.hasCurrentYearTargets())("forDemo", ctx.forDemo())("maxAccessibleStepId", ctx.maxAccessibleStepId());
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isLoading() ? 23 : ctx.dataLoadStatus() !== ctx.ShopDataLoadStatusEnum.FULLY_LOADED ? 24 : !ctx.hasCurrentYearTargets() ? 25 : 26);
+            i0.ɵɵconditional(ctx.isLoading() ? 23 : ctx.dataLoadStatus() !== ctx.ShopDataLoadStatusEnum.FULLY_LOADED ? 24 : 25);
         } }, dependencies: [CommonModule, i1$1.NgClass, JourneyProgressIndicatorComponent,
             RevenueCalculatorWelcomeBannerComponent,
             InitialTargetSettingComponent,
@@ -60888,12 +60882,12 @@ class SymphiqRevenueCalculatorDashboardComponent {
               </div>
             }
 
-            <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
-            @else if (!hasCurrentYearTargets()) {
+            <!-- State 3: Target Setting / Results (isLoading = false && dataLoadStatus === FULLY_LOADED) -->
+            @else {
               <symphiq-revenue-calculator-welcome-banner
                   [viewMode]="viewMode()"
                   [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                  [hasTargets]="false"
+                  [hasTargets]="hasCurrentYearTargets()"
               />
 
               <div class="mt-8">
@@ -60907,41 +60901,12 @@ class SymphiqRevenueCalculatorDashboardComponent {
                     [dataResults]="dataResults()"
                     [reverseCalculationResponse]="reverseCalculationResponse()"
                     [targets]="targets()"
-                    (targetsCreated)="targetsCreated.emit($event)"
+                    (targetsCreated)="onTargetsCreated($event)"
                     (calculateRevenueRequest)="calculateRevenueRequest.emit($event)"
                 />
               </div>
             }
 
-            <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
-            @else {
-              <symphiq-revenue-calculator-welcome-banner
-                  [viewMode]="viewMode()"
-                  [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                  [hasTargets]="true"
-              />
-
-              <!-- Placeholder for Revenue Calculator Content -->
-              <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
-                <div class="text-center space-y-4">
-                  <div class="flex justify-center">
-                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor"
-                         viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                            d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
-                    </svg>
-                  </div>
-                  <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
-                    Revenue Calculator Dashboard
-                  </h3>
-                  <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
-                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be
-                    displayed here.
-                  </p>
-                </div>
-              </div>
-            }
-
           </div>
         </main>
       </div>
@@ -60952,7 +60917,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 223 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 198 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);