@eric-emg/symphiq-components 1.2.155 → 1.2.157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/symphiq-components.mjs +530 -527
  2. package/fesm2022/symphiq-components.mjs.map +1 -1
  3. package/index.d.ts.map +1 -1
  4. package/package.json +1 -1
package/fesm2022/symphiq-components.mjs CHANGED
@@ -52988,6 +52988,11 @@ class SymphiqCreateAccountDashboardComponent {
52988
52988
  this.initializeFocusAreasMap();
52989
52989
  effect(() => {
52990
52990
  const data = this.accountData();
52991
+ if (data && (this.editMode() || this.focusAreasEditMode()) && this.isLoading()) {
52992
+ this.editMode.set(false);
52993
+ this.focusAreasEditMode.set(false);
52994
+ this.isLoading.set(false);
52995
+ }
52991
52996
  if (data && !this.editMode() && !this.focusAreasEditMode()) {
52992
52997
  this.accountForm.patchValue(data);
52993
52998
  if (data.shopName === data.companyName) {
@@ -53096,7 +53101,6 @@ class SymphiqCreateAccountDashboardComponent {
53096
53101
  focusAreaDetails: this.getFocusAreaDetailsFromMap()
53097
53102
  };
53098
53103
  this.onCreateAccount.emit(formData);
53099
- this.editMode.set(false);
53100
53104
  }
53101
53105
  }
53102
53106
  handleSaveFocusAreas() {
@@ -53107,7 +53111,6 @@ class SymphiqCreateAccountDashboardComponent {
53107
53111
  focusAreaDetails: this.getFocusAreaDetailsFromMap()
53108
53112
  };
53109
53113
  this.onCreateAccount.emit(formData);
53110
- this.focusAreasEditMode.set(false);
53111
53114
  }
53112
53115
  }
53113
53116
  initializeFocusAreasMap() {
@@ -53500,7 +53503,7 @@ class SymphiqCreateAccountDashboardComponent {
53500
53503
  i0.ɵɵadvance();
53501
53504
  i0.ɵɵconditional(!ctx.accountData() || ctx.editMode() ? 24 : -1);
53502
53505
  i0.ɵɵadvance();
53503
- i0.ɵɵconditional(ctx.accountData() && ctx.accountData().focusAreaDetails && !ctx.focusAreasEditMode() ? 25 : -1);
53506
+ i0.ɵɵconditional(ctx.accountData() && ctx.accountData().focusAreaDetails && !ctx.focusAreasEditMode() && !ctx.editMode() ? 25 : -1);
53504
53507
  i0.ɵɵadvance();
53505
53508
  i0.ɵɵconditional(!ctx.accountData() || ctx.focusAreasEditMode() ? 26 : -1);
53506
53509
  i0.ɵɵadvance();
@@ -53511,530 +53514,530 @@ class SymphiqCreateAccountDashboardComponent {
53511
53514
  }
53512
53515
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SymphiqCreateAccountDashboardComponent, [{
53513
53516
  type: Component,
53514
- args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
53515
- <div [ngClass]="getContainerClasses()">
53516
- <!-- Scroll Progress Bar -->
53517
- <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
53518
- <div
53519
- [style.width.%]="scrollProgress()"
53520
- [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
53521
- class="h-full transition-all duration-200 ease-out">
53522
- </div>
53523
- </div>
53524
-
53525
- <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
53526
-
53527
- <div class="relative z-[51]">
53528
- <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
53529
- <!-- Expanded Header -->
53530
- <div
53531
- class="transition-all duration-300 ease-in-out overflow-hidden"
53532
- [class.max-h-0]="headerScrollService.isScrolled()"
53533
- [class.opacity-0]="headerScrollService.isScrolled()"
53534
- [class.max-h-96]="!headerScrollService.isScrolled()"
53535
- [class.opacity-100]="!headerScrollService.isScrolled()">
53536
- <div
53537
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
53538
- [class.pointer-events-none]="headerScrollService.isScrolled()"
53539
- [class.pointer-events-auto]="!headerScrollService.isScrolled()">
53540
- <div class="flex items-center justify-between">
53541
- <div>
53542
- <h1 [ngClass]="getMainTitleClasses()">
53543
- Create Account
53544
- </h1>
53545
- <p [ngClass]="getSubtitleClasses()">
53546
- Tell us about your shop
53547
- </p>
53548
- </div>
53549
- </div>
53550
- </div>
53551
- </div>
53552
-
53553
- <!-- Condensed Header -->
53554
- <div
53555
- class="transition-all duration-300 ease-in-out overflow-hidden"
53556
- [class.max-h-0]="!headerScrollService.isScrolled()"
53557
- [class.opacity-0]="!headerScrollService.isScrolled()"
53558
- [class.max-h-20]="headerScrollService.isScrolled()"
53559
- [class.opacity-100]="headerScrollService.isScrolled()">
53560
- <div
53561
- class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
53562
- [class.pointer-events-none]="!headerScrollService.isScrolled()"
53563
- [class.pointer-events-auto]="headerScrollService.isScrolled()">
53564
- <div class="flex items-center justify-between">
53565
- <div class="flex-1 min-w-0 mr-4">
53566
- <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate'">
53567
- Create Account
53568
- </h1>
53569
- </div>
53570
- </div>
53571
- </div>
53572
- </div>
53573
- </header>
53574
-
53575
- <!-- Journey Progress Indicator -->
53576
- <symphiq-journey-progress-indicator
53577
- [viewMode]="viewMode()"
53578
- [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
53579
- [showNextStepAction]="showNextStepAction()"
53580
- [forDemo]="forDemo()"
53581
- [maxAccessibleStepId]="maxAccessibleStepId()"
53582
- (stepClick)="stepClick.emit($event)"
53583
- (nextStepClick)="nextStepClick.emit()"
53584
- />
53585
-
53586
- <main class="relative pb-32">
53587
- <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
53588
- <!-- View Mode: Display Account Data -->
53589
- @if (accountData() && !editMode() && !focusAreasEditMode()) {
53590
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
53591
- <div [ngClass]="contentClasses()" class="px-8 py-8">
53592
- <div class="flex items-start justify-between mb-6">
53593
- <div>
53594
- <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53595
- Shop Details
53596
- </h2>
53597
- <p [ngClass]="sectionDescriptionClasses()">
53598
- Your shop information
53599
- </p>
53600
- </div>
53601
- <button
53602
- type="button"
53603
- (click)="enableEditMode()"
53604
- [ngClass]="editButtonClasses()"
53605
- class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
53606
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53607
- <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"/>
53608
- </svg>
53609
- Edit
53610
- </button>
53611
- </div>
53612
-
53613
- <div class="space-y-4">
53614
- <div>
53615
- <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53616
- Shop Name
53617
- </label>
53618
- <p [ngClass]="viewValueClasses()" class="text-base">
53619
- {{ accountData()!.shopName }}
53620
- </p>
53621
- </div>
53622
-
53623
- <div>
53624
- <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53625
- Shop URL
53626
- </label>
53627
- <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
53628
- [ngClass]="viewLinkClasses()"
53629
- class="text-base hover:underline">
53630
- {{ accountData()!.shopUrl }}
53631
- </a>
53632
- </div>
53633
-
53634
- <div>
53635
- <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53636
- Shop Platform
53637
- </label>
53638
- <p [ngClass]="viewValueClasses()" class="text-base">
53639
- @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
53640
- Shopify
53641
- } @else {
53642
- {{ accountData()!.otherPlatformName || 'Other' }}
53643
- }
53644
- </p>
53645
- </div>
53646
-
53647
- <div>
53648
- <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53649
- Company Name
53650
- </label>
53651
- <p [ngClass]="viewValueClasses()" class="text-base">
53652
- {{ accountData()!.companyName }}
53653
- </p>
53654
- </div>
53655
- </div>
53656
- </div>
53657
- </div>
53658
- }
53659
-
53660
- <!-- Edit Mode: Form -->
53661
- @if (!accountData() || editMode()) {
53662
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
53663
- <div [ngClass]="contentClasses()" class="px-8 py-8">
53664
- <div class="mb-6">
53665
- <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53666
- Shop Details
53667
- </h2>
53668
- <p [ngClass]="sectionDescriptionClasses()">
53669
- Enter your shop details to get started with Symphiq
53670
- </p>
53671
- </div>
53672
-
53673
- <form [formGroup]="accountForm" class="space-y-6">
53674
- <!-- Shop Name -->
53675
- <div>
53676
- <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53677
- Shop Name <span class="text-red-500">*</span>
53678
- </label>
53679
- <input
53680
- #shopNameInput
53681
- type="text"
53682
- formControlName="shopName"
53683
- [ngClass]="inputClasses('shopName')"
53684
- class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53685
- placeholder="Enter your shop name"
53686
- />
53687
- @if (isFieldInvalid('shopName')) {
53688
- <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53689
- Shop name is required
53690
- </p>
53691
- }
53692
- </div>
53693
-
53694
- <!-- Shop URL -->
53695
- <div>
53696
- <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53697
- Shop URL <span class="text-red-500">*</span>
53698
- </label>
53699
- <div class="flex items-center">
53700
- <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
53701
- https://
53702
- </span>
53703
- <input
53704
- type="text"
53705
- formControlName="shopUrl"
53706
- [ngClass]="urlInputClasses('shopUrl')"
53707
- class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53708
- placeholder="yourshop.com"
53709
- />
53710
- </div>
53711
- @if (isFieldInvalid('shopUrl')) {
53712
- <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53713
- Shop URL is required
53714
- </p>
53715
- }
53716
- </div>
53717
-
53718
- <!-- Shop Platform -->
53719
- <div>
53720
- <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
53721
- Shop Platform <span class="text-red-500">*</span>
53722
- </label>
53723
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
53724
- <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
53725
- <input
53726
- type="radio"
53727
- formControlName="shopPlatform"
53728
- [value]="ShopPlatformEnum.SHOPIFY"
53729
- class="sr-only"
53730
- />
53731
- <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
53732
- <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
53733
- @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
53734
- <div class="w-3 h-3 rounded-full bg-current"></div>
53735
- }
53736
- </div>
53737
- <div class="flex-1">
53738
- <div [ngClass]="radioLabelClasses()" class="font-semibold">
53739
- Shopify
53740
- </div>
53741
- </div>
53742
- </div>
53743
- </label>
53744
-
53745
- <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
53746
- <input
53747
- type="radio"
53748
- formControlName="shopPlatform"
53749
- [value]="ShopPlatformEnum.OTHER"
53750
- class="sr-only"
53751
- />
53752
- <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
53753
- <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
53754
- @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
53755
- <div class="w-3 h-3 rounded-full bg-current"></div>
53756
- }
53757
- </div>
53758
- <div class="flex-1">
53759
- <div [ngClass]="radioLabelClasses()" class="font-semibold">
53760
- Other
53761
- </div>
53762
- </div>
53763
- </div>
53764
- </label>
53765
- </div>
53766
- </div>
53767
-
53768
- <!-- Other Platform Name (Conditional) -->
53769
- @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
53770
- <div>
53771
- <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53772
- Platform Name <span class="text-red-500">*</span>
53773
- </label>
53774
- <input
53775
- type="text"
53776
- formControlName="otherPlatformName"
53777
- [ngClass]="inputClasses('otherPlatformName')"
53778
- class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53779
- placeholder="Enter platform name (e.g., WooCommerce, Magento)"
53780
- />
53781
- @if (isFieldInvalid('otherPlatformName')) {
53782
- <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53783
- Platform name is required
53784
- </p>
53785
- }
53786
- </div>
53787
- }
53788
-
53789
- <!-- Company Name -->
53790
- <div>
53791
- <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53792
- Company Name <span class="text-red-500">*</span>
53793
- </label>
53794
- <input
53795
- type="text"
53796
- formControlName="companyName"
53797
- [ngClass]="inputClasses('companyName')"
53798
- [readonly]="sameAsShopName()"
53799
- class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53800
- [class.cursor-not-allowed]="sameAsShopName()"
53801
- [class.opacity-60]="sameAsShopName()"
53802
- placeholder="Enter company name"
53803
- />
53804
- <div class="mt-2">
53805
- <label class="flex items-center gap-2 cursor-pointer">
53806
- <input
53807
- type="checkbox"
53808
- [checked]="sameAsShopName()"
53809
- (change)="toggleSameAsShopName()"
53810
- [ngClass]="checkboxClasses()"
53811
- class="w-4 h-4 rounded border-2 transition-all duration-200"
53812
- />
53813
- <span [ngClass]="checkboxLabelClasses()" class="text-sm">
53814
- Same as Shop Name
53815
- </span>
53816
- </label>
53817
- </div>
53818
- @if (isFieldInvalid('companyName')) {
53819
- <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53820
- Company name is required
53821
- </p>
53822
- }
53823
- </div>
53824
- </form>
53825
- </div>
53826
- </div>
53827
- }
53828
-
53829
- <!-- Focus Areas Card - View Mode -->
53830
- @if (accountData() && accountData()!.focusAreaDetails && !focusAreasEditMode()) {
53831
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
53832
- <div [ngClass]="contentClasses()" class="px-8 py-8">
53833
- <div class="flex items-start justify-between mb-6">
53834
- <div>
53835
- <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53836
- Focus Areas
53837
- </h2>
53838
- <p [ngClass]="sectionDescriptionClasses()">
53839
- Your marketing and operational focus areas
53840
- </p>
53841
- </div>
53842
- <button
53843
- type="button"
53844
- (click)="enableFocusAreasEditMode()"
53845
- [ngClass]="editButtonClasses()"
53846
- class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
53847
- <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53848
- <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"/>
53849
- </svg>
53850
- Edit
53851
- </button>
53852
- </div>
53853
-
53854
- <!-- Grouped by Status -->
53855
- @if (engagedFocusAreas().length > 0) {
53856
- <div class="mb-6">
53857
- <h3 [ngClass]="groupTitleClasses('engaged')" class="text-base font-bold mb-3 flex items-center gap-2">
53858
- <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
53859
- Engaged In ({{ engagedFocusAreas().length }})
53860
- </h3>
53861
- <div class="space-y-3">
53862
- @for (focusArea of engagedFocusAreas(); track focusArea.focusAreaDomain) {
53863
- <div [ngClass]="focusAreaViewCardClasses('engaged')" class="p-4 rounded-lg border-l-4">
53864
- <div class="flex items-start justify-between mb-2">
53865
- <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
53866
- {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53867
- </h4>
53868
- <span [ngClass]="statusBadgeClasses('engaged')" class="px-2 py-0.5 rounded text-xs font-semibold whitespace-nowrap">
53869
- Engaged
53870
- </span>
53871
- </div>
53872
- @if (focusArea.tools && focusArea.tools.length > 0) {
53873
- <div class="flex items-center gap-2 mt-2">
53874
- <span [ngClass]="toolsLabelViewClasses()" class="text-xs font-medium">Tools:</span>
53875
- <div class="flex flex-wrap gap-1.5">
53876
- @for (tool of focusArea.tools; track tool) {
53877
- <span [ngClass]="toolChipViewClasses()" class="px-2 py-0.5 rounded text-xs">
53878
- {{ tool }}
53879
- </span>
53880
- }
53881
- </div>
53882
- </div>
53883
- }
53884
- </div>
53885
- }
53886
- </div>
53887
- </div>
53888
- }
53889
-
53890
- @if (interestedFocusAreas().length > 0) {
53891
- <div class="mb-6">
53892
- <h3 [ngClass]="groupTitleClasses('interested')" class="text-base font-bold mb-3 flex items-center gap-2">
53893
- <span class="w-2 h-2 rounded-full bg-blue-500"></span>
53894
- Interested In ({{ interestedFocusAreas().length }})
53895
- </h3>
53896
- <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
53897
- @for (focusArea of interestedFocusAreas(); track focusArea.focusAreaDomain) {
53898
- <div [ngClass]="focusAreaViewCardClasses('interested')" class="p-3 rounded-lg border-l-4">
53899
- <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
53900
- {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53901
- </h4>
53902
- </div>
53903
- }
53904
- </div>
53905
- </div>
53906
- }
53907
-
53908
- @if (notInterestedFocusAreas().length > 0) {
53909
- <div>
53910
- <h3 [ngClass]="groupTitleClasses('not-interested')" class="text-base font-bold mb-3 flex items-center gap-2">
53911
- <span class="w-2 h-2 rounded-full bg-slate-400"></span>
53912
- Not Interested ({{ notInterestedFocusAreas().length }})
53913
- </h3>
53914
- <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
53915
- @for (focusArea of notInterestedFocusAreas(); track focusArea.focusAreaDomain) {
53916
- <div [ngClass]="focusAreaViewCardClasses('not-interested')" class="p-2 rounded text-center">
53917
- <span [ngClass]="focusAreaViewTitleSmallClasses()" class="text-xs font-medium">
53918
- {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53919
- </span>
53920
- </div>
53921
- }
53922
- </div>
53923
- </div>
53924
- }
53925
- </div>
53926
- </div>
53927
- }
53928
-
53929
- <!-- Focus Areas Card - Edit Mode -->
53930
- @if (!accountData() || focusAreasEditMode()) {
53931
- <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
53932
- <div [ngClass]="contentClasses()" class="px-8 py-8">
53933
- <div class="mb-6">
53934
- <div class="flex items-start justify-between">
53935
- <div>
53936
- <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53937
- Focus Areas
53938
- </h2>
53939
- <p [ngClass]="sectionDescriptionClasses()">
53940
- Tell us about your marketing and operational focus areas
53941
- </p>
53942
- </div>
53943
- <div [ngClass]="progressBadgeClasses()" class="px-4 py-2 rounded-lg text-sm font-semibold whitespace-nowrap">
53944
- {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} answered
53945
- </div>
53946
- </div>
53947
- </div>
53948
-
53949
- <div class="space-y-4">
53950
- @for (domain of allFocusAreaDomains(); track domain; let i = $index) {
53951
- <symphiq-focus-area-question
53952
- [focusAreaDomain]="domain"
53953
- [selectedStatus]="getFocusAreaStatus(domain)"
53954
- [selectedTools]="getFocusAreaTools(domain)"
53955
- [viewMode]="viewMode()"
53956
- [title]="getFocusAreaTitle(domain)"
53957
- [description]="getFocusAreaDescription(domain)"
53958
- (statusChange)="onFocusAreaStatusChange(domain, $event)"
53959
- (toolsClick)="onFocusAreaToolsClick(domain)"
53960
- />
53961
- @if (i < allFocusAreaDomains().length - 1) {
53962
- <div [ngClass]="dividerClasses()" class="my-4"></div>
53963
- }
53964
- }
53965
- </div>
53966
- </div>
53967
- </div>
53968
- }
53969
- </div>
53970
- </main>
53971
-
53972
- <!-- Tools Selection Modal -->
53973
- <symphiq-focus-area-tools-modal
53974
- [isOpen]="toolsModalOpen()"
53975
- [focusAreaDomain]="currentEditingFocusArea()!"
53976
- [focusAreaTitle]="currentEditingFocusAreaTitle()"
53977
- [selectedTools]="currentEditingTools()"
53978
- [viewMode]="viewMode()"
53979
- (close)="onToolsModalClose()"
53980
- (save)="onToolsModalSave($event)"
53981
- />
53982
-
53983
- <!-- Sticky Continue Button -->
53984
- @if (!accountData() || editMode() || focusAreasEditMode()) {
53985
- <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
53986
- <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
53987
- <div class="flex items-center gap-3">
53988
- @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
53989
- <button
53990
- type="button"
53991
- (click)="focusAreasEditMode() ? cancelFocusAreasEditMode() : cancelEditMode()"
53992
- [ngClass]="cancelButtonClasses()"
53993
- class="px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-105">
53994
- Cancel
53995
- </button>
53996
- }
53997
- <button
53998
- type="button"
53999
- (click)="focusAreasEditMode() ? handleSaveFocusAreas() : handleContinue()"
54000
- [disabled]="!isButtonEnabled()"
54001
- [ngClass]="continueButtonClasses()"
54002
- class="flex-1 px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
54003
- [class.cursor-pointer]="isButtonEnabled()"
54004
- [class.cursor-not-allowed]="!isButtonEnabled()"
54005
- [class.opacity-50]="!isButtonEnabled()"
54006
- [class.hover:scale-105]="isButtonEnabled()">
54007
- @if (isLoading()) {
54008
- <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
54009
- <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
54010
- <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
54011
- </svg>
54012
- @if (focusAreasEditMode()) {
54013
- Saving Focus Areas...
54014
- } @else if (accountData() && editMode()) {
54015
- Updating Account...
54016
- } @else {
54017
- Creating Account...
54018
- }
54019
- } @else {
54020
- @if (focusAreasEditMode()) {
54021
- Save Focus Areas
54022
- } @else if (accountData() && editMode()) {
54023
- Save Changes
54024
- } @else {
54025
- Create Account
54026
- }
54027
- <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54028
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
54029
- </svg>
54030
- }
54031
- </button>
54032
- </div>
54033
- </div>
54034
- </div>
54035
- }
54036
- </div>
54037
- </div>
53517
+ args: [{ selector: 'symphiq-create-account-dashboard', standalone: true, imports: [CommonModule, ReactiveFormsModule, JourneyProgressIndicatorComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
53518
+ <div [ngClass]="getContainerClasses()">
53519
+ <!-- Scroll Progress Bar -->
53520
+ <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
53521
+ <div
53522
+ [style.width.%]="scrollProgress()"
53523
+ [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-blue-400 to-cyan-400'"
53524
+ class="h-full transition-all duration-200 ease-out">
53525
+ </div>
53526
+ </div>
53527
+
53528
+ <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
53529
+
53530
+ <div class="relative z-[51]">
53531
+ <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
53532
+ <!-- Expanded Header -->
53533
+ <div
53534
+ class="transition-all duration-300 ease-in-out overflow-hidden"
53535
+ [class.max-h-0]="headerScrollService.isScrolled()"
53536
+ [class.opacity-0]="headerScrollService.isScrolled()"
53537
+ [class.max-h-96]="!headerScrollService.isScrolled()"
53538
+ [class.opacity-100]="!headerScrollService.isScrolled()">
53539
+ <div
53540
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
53541
+ [class.pointer-events-none]="headerScrollService.isScrolled()"
53542
+ [class.pointer-events-auto]="!headerScrollService.isScrolled()">
53543
+ <div class="flex items-center justify-between">
53544
+ <div>
53545
+ <h1 [ngClass]="getMainTitleClasses()">
53546
+ Create Account
53547
+ </h1>
53548
+ <p [ngClass]="getSubtitleClasses()">
53549
+ Tell us about your shop
53550
+ </p>
53551
+ </div>
53552
+ </div>
53553
+ </div>
53554
+ </div>
53555
+
53556
+ <!-- Condensed Header -->
53557
+ <div
53558
+ class="transition-all duration-300 ease-in-out overflow-hidden"
53559
+ [class.max-h-0]="!headerScrollService.isScrolled()"
53560
+ [class.opacity-0]="!headerScrollService.isScrolled()"
53561
+ [class.max-h-20]="headerScrollService.isScrolled()"
53562
+ [class.opacity-100]="headerScrollService.isScrolled()">
53563
+ <div
53564
+ class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
53565
+ [class.pointer-events-none]="!headerScrollService.isScrolled()"
53566
+ [class.pointer-events-auto]="headerScrollService.isScrolled()">
53567
+ <div class="flex items-center justify-between">
53568
+ <div class="flex-1 min-w-0 mr-4">
53569
+ <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent truncate'">
53570
+ Create Account
53571
+ </h1>
53572
+ </div>
53573
+ </div>
53574
+ </div>
53575
+ </div>
53576
+ </header>
53577
+
53578
+ <!-- Journey Progress Indicator -->
53579
+ <symphiq-journey-progress-indicator
53580
+ [viewMode]="viewMode()"
53581
+ [currentStepId]="JourneyStepIdEnum.CREATE_ACCOUNT"
53582
+ [showNextStepAction]="showNextStepAction()"
53583
+ [forDemo]="forDemo()"
53584
+ [maxAccessibleStepId]="maxAccessibleStepId()"
53585
+ (stepClick)="stepClick.emit($event)"
53586
+ (nextStepClick)="nextStepClick.emit()"
53587
+ />
53588
+
53589
+ <main class="relative pb-32">
53590
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
53591
+ <!-- View Mode: Display Account Data -->
53592
+ @if (accountData() && !editMode() && !focusAreasEditMode()) {
53593
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
53594
+ <div [ngClass]="contentClasses()" class="px-8 py-8">
53595
+ <div class="flex items-start justify-between mb-6">
53596
+ <div>
53597
+ <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53598
+ Shop Details
53599
+ </h2>
53600
+ <p [ngClass]="sectionDescriptionClasses()">
53601
+ Your shop information
53602
+ </p>
53603
+ </div>
53604
+ <button
53605
+ type="button"
53606
+ (click)="enableEditMode()"
53607
+ [ngClass]="editButtonClasses()"
53608
+ class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
53609
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53610
+ <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"/>
53611
+ </svg>
53612
+ Edit
53613
+ </button>
53614
+ </div>
53615
+
53616
+ <div class="space-y-4">
53617
+ <div>
53618
+ <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53619
+ Shop Name
53620
+ </label>
53621
+ <p [ngClass]="viewValueClasses()" class="text-base">
53622
+ {{ accountData()!.shopName }}
53623
+ </p>
53624
+ </div>
53625
+
53626
+ <div>
53627
+ <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53628
+ Shop URL
53629
+ </label>
53630
+ <a [href]="accountData()!.shopUrl" target="_blank" rel="noopener noreferrer"
53631
+ [ngClass]="viewLinkClasses()"
53632
+ class="text-base hover:underline">
53633
+ {{ accountData()!.shopUrl }}
53634
+ </a>
53635
+ </div>
53636
+
53637
+ <div>
53638
+ <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53639
+ Shop Platform
53640
+ </label>
53641
+ <p [ngClass]="viewValueClasses()" class="text-base">
53642
+ @if (accountData()!.shopPlatform === ShopPlatformEnum.SHOPIFY) {
53643
+ Shopify
53644
+ } @else {
53645
+ {{ accountData()!.otherPlatformName || 'Other' }}
53646
+ }
53647
+ </p>
53648
+ </div>
53649
+
53650
+ <div>
53651
+ <label [ngClass]="viewLabelClasses()" class="block text-sm font-medium mb-1">
53652
+ Company Name
53653
+ </label>
53654
+ <p [ngClass]="viewValueClasses()" class="text-base">
53655
+ {{ accountData()!.companyName }}
53656
+ </p>
53657
+ </div>
53658
+ </div>
53659
+ </div>
53660
+ </div>
53661
+ }
53662
+
53663
+ <!-- Edit Mode: Form -->
53664
+ @if (!accountData() || editMode()) {
53665
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden mb-8">
53666
+ <div [ngClass]="contentClasses()" class="px-8 py-8">
53667
+ <div class="mb-6">
53668
+ <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53669
+ Shop Details
53670
+ </h2>
53671
+ <p [ngClass]="sectionDescriptionClasses()">
53672
+ Enter your shop details to get started with Symphiq
53673
+ </p>
53674
+ </div>
53675
+
53676
+ <form [formGroup]="accountForm" class="space-y-6">
53677
+ <!-- Shop Name -->
53678
+ <div>
53679
+ <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53680
+ Shop Name <span class="text-red-500">*</span>
53681
+ </label>
53682
+ <input
53683
+ #shopNameInput
53684
+ type="text"
53685
+ formControlName="shopName"
53686
+ [ngClass]="inputClasses('shopName')"
53687
+ class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53688
+ placeholder="Enter your shop name"
53689
+ />
53690
+ @if (isFieldInvalid('shopName')) {
53691
+ <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53692
+ Shop name is required
53693
+ </p>
53694
+ }
53695
+ </div>
53696
+
53697
+ <!-- Shop URL -->
53698
+ <div>
53699
+ <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53700
+ Shop URL <span class="text-red-500">*</span>
53701
+ </label>
53702
+ <div class="flex items-center">
53703
+ <span [ngClass]="urlPrefixClasses()" class="px-4 py-3 rounded-l-lg border-2 border-r-0 text-sm font-medium">
53704
+ https://
53705
+ </span>
53706
+ <input
53707
+ type="text"
53708
+ formControlName="shopUrl"
53709
+ [ngClass]="urlInputClasses('shopUrl')"
53710
+ class="flex-1 px-4 py-3 rounded-r-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53711
+ placeholder="yourshop.com"
53712
+ />
53713
+ </div>
53714
+ @if (isFieldInvalid('shopUrl')) {
53715
+ <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53716
+ Shop URL is required
53717
+ </p>
53718
+ }
53719
+ </div>
53720
+
53721
+ <!-- Shop Platform -->
53722
+ <div>
53723
+ <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-3">
53724
+ Shop Platform <span class="text-red-500">*</span>
53725
+ </label>
53726
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
53727
+ <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.SHOPIFY)" class="cursor-pointer">
53728
+ <input
53729
+ type="radio"
53730
+ formControlName="shopPlatform"
53731
+ [value]="ShopPlatformEnum.SHOPIFY"
53732
+ class="sr-only"
53733
+ />
53734
+ <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
53735
+ <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.SHOPIFY)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
53736
+ @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.SHOPIFY) {
53737
+ <div class="w-3 h-3 rounded-full bg-current"></div>
53738
+ }
53739
+ </div>
53740
+ <div class="flex-1">
53741
+ <div [ngClass]="radioLabelClasses()" class="font-semibold">
53742
+ Shopify
53743
+ </div>
53744
+ </div>
53745
+ </div>
53746
+ </label>
53747
+
53748
+ <label [ngClass]="radioPlatformClasses(ShopPlatformEnum.OTHER)" class="cursor-pointer">
53749
+ <input
53750
+ type="radio"
53751
+ formControlName="shopPlatform"
53752
+ [value]="ShopPlatformEnum.OTHER"
53753
+ class="sr-only"
53754
+ />
53755
+ <div class="flex items-center gap-3 p-4 rounded-lg border-2 transition-all duration-200">
53756
+ <div [ngClass]="radioIndicatorClasses(ShopPlatformEnum.OTHER)" class="w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0">
53757
+ @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
53758
+ <div class="w-3 h-3 rounded-full bg-current"></div>
53759
+ }
53760
+ </div>
53761
+ <div class="flex-1">
53762
+ <div [ngClass]="radioLabelClasses()" class="font-semibold">
53763
+ Other
53764
+ </div>
53765
+ </div>
53766
+ </div>
53767
+ </label>
53768
+ </div>
53769
+ </div>
53770
+
53771
+ <!-- Other Platform Name (Conditional) -->
53772
+ @if (accountForm.get('shopPlatform')?.value === ShopPlatformEnum.OTHER) {
53773
+ <div>
53774
+ <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53775
+ Platform Name <span class="text-red-500">*</span>
53776
+ </label>
53777
+ <input
53778
+ type="text"
53779
+ formControlName="otherPlatformName"
53780
+ [ngClass]="inputClasses('otherPlatformName')"
53781
+ class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53782
+ placeholder="Enter platform name (e.g., WooCommerce, Magento)"
53783
+ />
53784
+ @if (isFieldInvalid('otherPlatformName')) {
53785
+ <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53786
+ Platform name is required
53787
+ </p>
53788
+ }
53789
+ </div>
53790
+ }
53791
+
53792
+ <!-- Company Name -->
53793
+ <div>
53794
+ <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
53795
+ Company Name <span class="text-red-500">*</span>
53796
+ </label>
53797
+ <input
53798
+ type="text"
53799
+ formControlName="companyName"
53800
+ [ngClass]="inputClasses('companyName')"
53801
+ [readonly]="sameAsShopName()"
53802
+ class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-200 focus:outline-none focus:ring-2"
53803
+ [class.cursor-not-allowed]="sameAsShopName()"
53804
+ [class.opacity-60]="sameAsShopName()"
53805
+ placeholder="Enter company name"
53806
+ />
53807
+ <div class="mt-2">
53808
+ <label class="flex items-center gap-2 cursor-pointer">
53809
+ <input
53810
+ type="checkbox"
53811
+ [checked]="sameAsShopName()"
53812
+ (change)="toggleSameAsShopName()"
53813
+ [ngClass]="checkboxClasses()"
53814
+ class="w-4 h-4 rounded border-2 transition-all duration-200"
53815
+ />
53816
+ <span [ngClass]="checkboxLabelClasses()" class="text-sm">
53817
+ Same as Shop Name
53818
+ </span>
53819
+ </label>
53820
+ </div>
53821
+ @if (isFieldInvalid('companyName')) {
53822
+ <p [ngClass]="errorClasses()" class="mt-1 text-sm">
53823
+ Company name is required
53824
+ </p>
53825
+ }
53826
+ </div>
53827
+ </form>
53828
+ </div>
53829
+ </div>
53830
+ }
53831
+
53832
+ <!-- Focus Areas Card - View Mode -->
53833
+ @if (accountData() && accountData()!.focusAreaDetails && !focusAreasEditMode() && !editMode()) {
53834
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
53835
+ <div [ngClass]="contentClasses()" class="px-8 py-8">
53836
+ <div class="flex items-start justify-between mb-6">
53837
+ <div>
53838
+ <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53839
+ Focus Areas
53840
+ </h2>
53841
+ <p [ngClass]="sectionDescriptionClasses()">
53842
+ Your marketing and operational focus areas
53843
+ </p>
53844
+ </div>
53845
+ <button
53846
+ type="button"
53847
+ (click)="enableFocusAreasEditMode()"
53848
+ [ngClass]="editButtonClasses()"
53849
+ class="px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:scale-105 flex items-center gap-2 cursor-pointer">
53850
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
53851
+ <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"/>
53852
+ </svg>
53853
+ Edit
53854
+ </button>
53855
+ </div>
53856
+
53857
+ <!-- Grouped by Status -->
53858
+ @if (engagedFocusAreas().length > 0) {
53859
+ <div class="mb-6">
53860
+ <h3 [ngClass]="groupTitleClasses('engaged')" class="text-base font-bold mb-3 flex items-center gap-2">
53861
+ <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
53862
+ Engaged In ({{ engagedFocusAreas().length }})
53863
+ </h3>
53864
+ <div class="space-y-3">
53865
+ @for (focusArea of engagedFocusAreas(); track focusArea.focusAreaDomain) {
53866
+ <div [ngClass]="focusAreaViewCardClasses('engaged')" class="p-4 rounded-lg border-l-4">
53867
+ <div class="flex items-start justify-between mb-2">
53868
+ <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
53869
+ {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53870
+ </h4>
53871
+ <span [ngClass]="statusBadgeClasses('engaged')" class="px-2 py-0.5 rounded text-xs font-semibold whitespace-nowrap">
53872
+ Engaged
53873
+ </span>
53874
+ </div>
53875
+ @if (focusArea.tools && focusArea.tools.length > 0) {
53876
+ <div class="flex items-center gap-2 mt-2">
53877
+ <span [ngClass]="toolsLabelViewClasses()" class="text-xs font-medium">Tools:</span>
53878
+ <div class="flex flex-wrap gap-1.5">
53879
+ @for (tool of focusArea.tools; track tool) {
53880
+ <span [ngClass]="toolChipViewClasses()" class="px-2 py-0.5 rounded text-xs">
53881
+ {{ tool }}
53882
+ </span>
53883
+ }
53884
+ </div>
53885
+ </div>
53886
+ }
53887
+ </div>
53888
+ }
53889
+ </div>
53890
+ </div>
53891
+ }
53892
+
53893
+ @if (interestedFocusAreas().length > 0) {
53894
+ <div class="mb-6">
53895
+ <h3 [ngClass]="groupTitleClasses('interested')" class="text-base font-bold mb-3 flex items-center gap-2">
53896
+ <span class="w-2 h-2 rounded-full bg-blue-500"></span>
53897
+ Interested In ({{ interestedFocusAreas().length }})
53898
+ </h3>
53899
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
53900
+ @for (focusArea of interestedFocusAreas(); track focusArea.focusAreaDomain) {
53901
+ <div [ngClass]="focusAreaViewCardClasses('interested')" class="p-3 rounded-lg border-l-4">
53902
+ <h4 [ngClass]="focusAreaViewTitleClasses()" class="font-semibold text-sm">
53903
+ {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53904
+ </h4>
53905
+ </div>
53906
+ }
53907
+ </div>
53908
+ </div>
53909
+ }
53910
+
53911
+ @if (notInterestedFocusAreas().length > 0) {
53912
+ <div>
53913
+ <h3 [ngClass]="groupTitleClasses('not-interested')" class="text-base font-bold mb-3 flex items-center gap-2">
53914
+ <span class="w-2 h-2 rounded-full bg-slate-400"></span>
53915
+ Not Interested ({{ notInterestedFocusAreas().length }})
53916
+ </h3>
53917
+ <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
53918
+ @for (focusArea of notInterestedFocusAreas(); track focusArea.focusAreaDomain) {
53919
+ <div [ngClass]="focusAreaViewCardClasses('not-interested')" class="p-2 rounded text-center">
53920
+ <span [ngClass]="focusAreaViewTitleSmallClasses()" class="text-xs font-medium">
53921
+ {{ getFocusAreaTitle(focusArea.focusAreaDomain!) }}
53922
+ </span>
53923
+ </div>
53924
+ }
53925
+ </div>
53926
+ </div>
53927
+ }
53928
+ </div>
53929
+ </div>
53930
+ }
53931
+
53932
+ <!-- Focus Areas Card - Edit Mode -->
53933
+ @if (!accountData() || focusAreasEditMode()) {
53934
+ <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
53935
+ <div [ngClass]="contentClasses()" class="px-8 py-8">
53936
+ <div class="mb-6">
53937
+ <div class="flex items-start justify-between">
53938
+ <div>
53939
+ <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-2">
53940
+ Focus Areas
53941
+ </h2>
53942
+ <p [ngClass]="sectionDescriptionClasses()">
53943
+ Tell us about your marketing and operational focus areas
53944
+ </p>
53945
+ </div>
53946
+ <div [ngClass]="progressBadgeClasses()" class="px-4 py-2 rounded-lg text-sm font-semibold whitespace-nowrap">
53947
+ {{ focusAreasAnswered() }} of {{ totalFocusAreas() }} answered
53948
+ </div>
53949
+ </div>
53950
+ </div>
53951
+
53952
+ <div class="space-y-4">
53953
+ @for (domain of allFocusAreaDomains(); track domain; let i = $index) {
53954
+ <symphiq-focus-area-question
53955
+ [focusAreaDomain]="domain"
53956
+ [selectedStatus]="getFocusAreaStatus(domain)"
53957
+ [selectedTools]="getFocusAreaTools(domain)"
53958
+ [viewMode]="viewMode()"
53959
+ [title]="getFocusAreaTitle(domain)"
53960
+ [description]="getFocusAreaDescription(domain)"
53961
+ (statusChange)="onFocusAreaStatusChange(domain, $event)"
53962
+ (toolsClick)="onFocusAreaToolsClick(domain)"
53963
+ />
53964
+ @if (i < allFocusAreaDomains().length - 1) {
53965
+ <div [ngClass]="dividerClasses()" class="my-4"></div>
53966
+ }
53967
+ }
53968
+ </div>
53969
+ </div>
53970
+ </div>
53971
+ }
53972
+ </div>
53973
+ </main>
53974
+
53975
+ <!-- Tools Selection Modal -->
53976
+ <symphiq-focus-area-tools-modal
53977
+ [isOpen]="toolsModalOpen()"
53978
+ [focusAreaDomain]="currentEditingFocusArea()!"
53979
+ [focusAreaTitle]="currentEditingFocusAreaTitle()"
53980
+ [selectedTools]="currentEditingTools()"
53981
+ [viewMode]="viewMode()"
53982
+ (close)="onToolsModalClose()"
53983
+ (save)="onToolsModalSave($event)"
53984
+ />
53985
+
53986
+ <!-- Sticky Continue Button -->
53987
+ @if (!accountData() || editMode() || focusAreasEditMode()) {
53988
+ <div [ngClass]="stickyButtonContainerClasses()" class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-sm">
53989
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
53990
+ <div class="flex items-center gap-3">
53991
+ @if ((accountData() && editMode()) || (accountData() && focusAreasEditMode())) {
53992
+ <button
53993
+ type="button"
53994
+ (click)="focusAreasEditMode() ? cancelFocusAreasEditMode() : cancelEditMode()"
53995
+ [ngClass]="cancelButtonClasses()"
53996
+ class="px-6 py-4 rounded-xl font-bold text-base transition-all duration-200 flex items-center justify-center gap-2 cursor-pointer hover:scale-105">
53997
+ Cancel
53998
+ </button>
53999
+ }
54000
+ <button
54001
+ type="button"
54002
+ (click)="focusAreasEditMode() ? handleSaveFocusAreas() : handleContinue()"
54003
+ [disabled]="!isButtonEnabled()"
54004
+ [ngClass]="continueButtonClasses()"
54005
+ class="flex-1 px-6 py-4 rounded-xl font-bold text-lg transition-all duration-200 flex items-center justify-center gap-3 shadow-lg"
54006
+ [class.cursor-pointer]="isButtonEnabled()"
54007
+ [class.cursor-not-allowed]="!isButtonEnabled()"
54008
+ [class.opacity-50]="!isButtonEnabled()"
54009
+ [class.hover:scale-105]="isButtonEnabled()">
54010
+ @if (isLoading()) {
54011
+ <svg class="w-6 h-6 animate-spin" fill="none" viewBox="0 0 24 24">
54012
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
54013
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
54014
+ </svg>
54015
+ @if (focusAreasEditMode()) {
54016
+ Saving Focus Areas...
54017
+ } @else if (accountData() && editMode()) {
54018
+ Updating Account...
54019
+ } @else {
54020
+ Creating Account...
54021
+ }
54022
+ } @else {
54023
+ @if (focusAreasEditMode()) {
54024
+ Save Focus Areas
54025
+ } @else if (accountData() && editMode()) {
54026
+ Save Changes
54027
+ } @else {
54028
+ Create Account
54029
+ }
54030
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54031
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
54032
+ </svg>
54033
+ }
54034
+ </button>
54035
+ </div>
54036
+ </div>
54037
+ </div>
54038
+ }
54039
+ </div>
54040
+ </div>
54038
54041
  `, styles: [":host{display:block}.animated-bubbles{overflow:hidden}.animated-bubbles:before,.animated-bubbles:after{content:\"\";position:absolute;border-radius:50%;animation:float 20s infinite ease-in-out;opacity:.05}.animated-bubbles:before{width:600px;height:600px;background:radial-gradient(circle,#3b82f6 0%,transparent 70%);top:-300px;left:-300px;animation-delay:-5s}.animated-bubbles:after{width:800px;height:800px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:-400px;right:-400px;animation-delay:-10s}.animated-bubbles.light-mode:before,.animated-bubbles.light-mode:after{opacity:.03}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(50px,-50px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}}\n"] }]
54039
54042
  }], () => [], { embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], parentHeaderOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentHeaderOffset", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], accountData: [{ type: i0.Input, args: [{ isSignal: true, alias: "accountData", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], showNextStepAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNextStepAction", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], onCreateAccount: [{ type: i0.Output, args: ["onCreateAccount"] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], shopNameInput: [{
54040
54043
  type: ViewChild,