fix(features): keep featureFlags and userExperience enabled flags in sync for wishlist/compare
Some checks failed
Architecture Governance / architecture (push) Has been cancelled

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>
This commit is contained in:
sdarbinyan
2026-07-17 17:55:08 +04:00
parent b05278c061
commit 1c71f8e83e
2 changed files with 21 additions and 2 deletions

View File

@@ -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>

View File

@@ -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,