From 1c71f8e83e3ff8f99c3d4ea42d3fde9c57262a03 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Fri, 17 Jul 2026 17:55:08 +0400
Subject: [PATCH] fix(features): keep featureFlags and userExperience enabled
 flags in sync for wishlist/compare

FeatureConfigService gates wishlist/compare visibility on BOTH
featureFlags.<key> and userExperience.<key>.enabled, but the features
editor only exposed one toggle wired to featureFlags. Both default to
true so this was silent, but a config with userExperience.wishlist.enabled
(or compare) explicitly false would show the editor toggle as checked
with no way to actually turn the feature back on from this screen.

toggleFeatureAndUserExperience() now updates both flags from the single
toggle, in one updateBootstrap call.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../sections/features-section.component.html  |  4 ++--
 .../sections/features-section.component.ts    | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app/features/project-editor/sections/features-section.component.html b/src/app/features/project-editor/sections/features-section.component.html
index 53e87fd..ff3feb2 100644
--- a/src/app/features/project-editor/sections/features-section.component.html
+++ b/src/app/features/project-editor/sections/features-section.component.html
@@ -1,8 +1,8 @@
 @if (bootstrap(); as bootstrap) {
 <app-section-card [title]="'builder.marketplaceFeatures' | translate">
   <div class="editor-grid three toggles">
-    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.wishlist" (ngModelChange)="toggleFeature('wishlist', $event)" [ariaLabel]="'builder.showWishlist' | translate" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
-    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.compare" (ngModelChange)="toggleFeature('compare', $event)" [ariaLabel]="'builder.showCompare' | translate" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.wishlist" (ngModelChange)="toggleFeatureAndUserExperience('wishlist', $event)" [ariaLabel]="'builder.showWishlist' | translate" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.compare" (ngModelChange)="toggleFeatureAndUserExperience('compare', $event)" [ariaLabel]="'builder.showCompare' | translate" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="bootstrap.featureFlags.reviews" (ngModelChange)="toggleFeature('reviews', $event)" [ariaLabel]="'builder.reviews' | translate" /><span>{{ 'builder.reviews' | translate }}</span><small class="field-desc">{{ 'builder.reviewsFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="bootstrap.productPage?.questions?.enabled !== false" (ngModelChange)="toggleProductFeature('questions', $event)" [ariaLabel]="'builder.questions' | translate" /><span>{{ 'builder.questions' | translate }}</span><small class="field-desc">{{ 'builder.questionsFeatureDesc' | translate }}</small></label>
     <label class="toggle-row"><app-toggle [ngModel]="!!bootstrap.featureFlags.comments" (ngModelChange)="toggleFeature('comments', $event)" [ariaLabel]="'builder.comments' | translate" /><span>{{ 'builder.comments' | translate }}</span><small class="field-desc">{{ 'builder.commentsFeatureDesc' | translate }}</small></label>
diff --git a/src/app/features/project-editor/sections/features-section.component.ts b/src/app/features/project-editor/sections/features-section.component.ts
index e0c25ab..254d8c2 100644
--- a/src/app/features/project-editor/sections/features-section.component.ts
+++ b/src/app/features/project-editor/sections/features-section.component.ts
@@ -45,6 +45,25 @@ export class ProjectEditorFeaturesSectionComponent {
     this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } }));
   }
 
+  /**
+   * Wishlist/compare visibility is gated by featureFlags AND
+   * userExperience.<key>.enabled at runtime (see FeatureConfigService).
+   * The editor only exposes one toggle per feature, so it must keep both
+   * flags in sync - otherwise a stray userExperience.<key>.enabled=false
+   * (e.g. from an older export) leaves the toggle looking "on" with no way
+   * to fix it from this screen.
+   */
+  toggleFeatureAndUserExperience(key: 'wishlist' | 'compare', checked: boolean): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      featureFlags: { ...current.featureFlags, [key]: checked },
+      userExperience: {
+        ...current.userExperience,
+        [key]: { ...current.userExperience?.[key], enabled: checked }
+      }
+    }));
+  }
+
   toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void {
     this.facade.updateBootstrap(current => ({
       ...current,