feat(admin): Seller Management Phase 1 UI - Partners section, empty state, request/learn-more dialogs

No backend, no CRUD, no API, no business logic - production-quality UI only, built entirely from existing shared components (app-dialog, app-empty-state, app-button, app-form-field, app-input, app-icon, app-badge). Gated per ADR-011: reads modules.sellerManagement.enabled from bootstrap (always false today, no backend sets it) rather than hardcoding disabled state. New: - AdminSellerManagementPageComponent (features/admin/seller-management/ pages/) - renders the specified empty state (title/description/ Request Access + Learn More buttons) using existing shared/ui primitives only, no new UI infrastructure. - Request Access dialog: Company/Email/Message form via app-form-field + app-input + a plain textarea (no dedicated textarea component exists yet, styled to match app-input's own tokens exactly). Submission is mocked (setTimeout), no API call. On submit: closes and opens a success dialog ("Thank you..."). - Learn More dialog: 6 capability bullets (seller dashboards, storefronts, permissions, analytics, product ownership, marketplace administration) under a "Coming Soon" badge. - New admin nav group "Partners" > "Seller Management" link (admin-nav.model.ts), new route /backoffice/partners/seller-management (app.routes.ts), using the same loadComponent/breadcrumb pattern as every other admin route. Translations: full en/ru/hy coverage, zero hardcoded strings - new adminShell.nav.{partnersGroup,sellerManagement}, adminShell.pages.sellerManagement, and a new adminSellerManagement.* namespace (emptyState/requestDialog/requestSuccessDialog/ learnMoreDialog) added to translations.ts (types) and all three locale files. Accessibility: inherited from app-dialog (role="dialog", aria-modal, focus trap on Tab/Shift+Tab, Escape to close, focus restored to trigger on close) - no new a11y code needed, reused as-is. Responsive: existing --space-*/--font-size-* tokens throughout, flex-wrap on button row, mobile breakpoint stacks actions full-width. Verified live (ru locale, devBypassAdmin): nav group/link render correctly, breadcrumb shows "Управление продавцами", empty state copy matches spec exactly, Request Access dialog opens with all 3 fields + Cancel/Send Request, filled + submitted -> success dialog with exact spec copy, Learn More dialog shows all 6 bullets + Coming Soon badge, no console errors, verified again at 375px mobile viewport. tsc --noEmit clean, ng build clean (pre-existing bundle- budget warning only), arch:check (boundaries + cycles) clean.
2026-07-26 20:47:18 +04:00
parent 22282b1d44
commit 20442eb93c
9 changed files with 486 additions and 0 deletions
--- a/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.html
+++ b/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.html
@@ -0,0 +1,107 @@
+<section class="admin-seller-management-page">
+  <app-empty-state
+    [title]="'adminSellerManagement.emptyState.title' | translate"
+    [description]="'adminSellerManagement.emptyState.description' | translate"
+  >
+    <div slot="icon" class="admin-seller-management-page__icon">
+      <app-icon name="store" [size]="48" />
+    </div>
+    <div slot="actions" class="admin-seller-management-page__actions">
+      <app-button variant="primary" (click)="openRequestDialog()">
+        {{ 'adminSellerManagement.emptyState.requestAccess' | translate }}
+      </app-button>
+      <app-button variant="secondary" (click)="openLearnMoreDialog()">
+        {{ 'adminSellerManagement.emptyState.learnMore' | translate }}
+      </app-button>
+    </div>
+  </app-empty-state>
+</section>
+
+<app-dialog
+  [open]="requestDialogOpen()"
+  [titleText]="dialogTitle('adminSellerManagement.requestDialog.title')"
+  size="md"
+  (closed)="closeRequestDialog()"
+>
+  <form class="admin-seller-management-page__form" (ngSubmit)="submitRequest()">
+    <app-form-field [label]="'adminSellerManagement.requestDialog.companyLabel' | translate" [required]="true">
+      <app-input
+        type="text"
+        [fullWidth]="true"
+        [placeholder]="'adminSellerManagement.requestDialog.companyPlaceholder' | translate"
+        [ngModel]="form().company"
+        (ngModelChange)="updateCompany($event)"
+        name="company"
+        required
+      />
+    </app-form-field>
+
+    <app-form-field [label]="'adminSellerManagement.requestDialog.emailLabel' | translate" [required]="true">
+      <app-input
+        type="email"
+        [fullWidth]="true"
+        [placeholder]="'adminSellerManagement.requestDialog.emailPlaceholder' | translate"
+        [ngModel]="form().email"
+        (ngModelChange)="updateEmail($event)"
+        name="email"
+        required
+      />
+    </app-form-field>
+
+    <app-form-field [label]="'adminSellerManagement.requestDialog.messageLabel' | translate">
+      <textarea
+        class="admin-seller-management-page__textarea"
+        rows="4"
+        [placeholder]="'adminSellerManagement.requestDialog.messagePlaceholder' | translate"
+        [ngModel]="form().message"
+        (ngModelChange)="updateMessage($event)"
+        name="message"
+      ></textarea>
+    </app-form-field>
+
+    <div class="admin-seller-management-page__dialog-actions">
+      <app-button type="button" variant="ghost" (click)="closeRequestDialog()">
+        {{ 'adminSellerManagement.requestDialog.cancel' | translate }}
+      </app-button>
+      <app-button type="submit" variant="primary" [loading]="submitting()">
+        {{ 'adminSellerManagement.requestDialog.send' | translate }}
+      </app-button>
+    </div>
+  </form>
+</app-dialog>
+
+<app-dialog
+  [open]="successDialogOpen()"
+  [titleText]="dialogTitle('adminSellerManagement.requestSuccessDialog.title')"
+  size="sm"
+  (closed)="closeSuccessDialog()"
+>
+  <p>{{ 'adminSellerManagement.requestSuccessDialog.message' | translate }}</p>
+  <div class="admin-seller-management-page__dialog-actions">
+    <app-button variant="primary" (click)="closeSuccessDialog()">
+      {{ 'adminSellerManagement.requestSuccessDialog.close' | translate }}
+    </app-button>
+  </div>
+</app-dialog>
+
+<app-dialog
+  [open]="learnMoreDialogOpen()"
+  [titleText]="dialogTitle('adminSellerManagement.learnMoreDialog.title')"
+  size="md"
+  (closed)="closeLearnMoreDialog()"
+>
+  <app-badge variant="info">{{ 'adminSellerManagement.learnMoreDialog.comingSoonBadge' | translate }}</app-badge>
+  <ul class="admin-seller-management-page__feature-list">
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerDashboards' | translate }}</li>
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerStorefronts' | translate }}</li>
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerPermissions' | translate }}</li>
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.sellerAnalytics' | translate }}</li>
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.productOwnership' | translate }}</li>
+    <li>{{ 'adminSellerManagement.learnMoreDialog.features.marketplaceAdministration' | translate }}</li>
+  </ul>
+  <div class="admin-seller-management-page__dialog-actions">
+    <app-button variant="primary" (click)="closeLearnMoreDialog()">
+      {{ 'adminSellerManagement.learnMoreDialog.close' | translate }}
+    </app-button>
+  </div>
+</app-dialog>
--- a/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.scss
+++ b/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.scss
@@ -0,0 +1,100 @@
+.admin-seller-management-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: var(--space-lg, 1.5rem);
+}
+
+.admin-seller-management-page__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border-radius: var(--radius-full, 999px);
+  background: color-mix(in srgb, var(--primary-color, #2f6e5d) 12%, transparent);
+  color: var(--primary-color, #2f6e5d);
+  margin-inline: auto;
+}
+
+.admin-seller-management-page__actions {
+  display: flex;
+  gap: var(--space-sm, 0.5rem);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.admin-seller-management-page__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md, 1rem);
+}
+
+.admin-seller-management-page__textarea {
+  width: 100%;
+  min-height: 96px;
+  resize: vertical;
+  border: 1px solid var(--border-color, #e4e4e7);
+  border-radius: var(--radius-md, 6px);
+  background: var(--bg-primary, #fff);
+  color: var(--text-primary, #1f322d);
+  font-family: inherit;
+  font-size: var(--font-size-md, 0.9375rem);
+  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+  transition: border-color var(--transition-fast, 120ms ease),
+    box-shadow var(--transition-fast, 120ms ease);
+
+  &::placeholder {
+    color: var(--text-secondary, #6b7280);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--primary-color, #2f6e5d);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--primary-color, #2f6e5d);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #2f6e5d) 25%, transparent);
+  }
+}
+
+.admin-seller-management-page__dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm, 0.5rem);
+  margin-top: var(--space-md, 1rem);
+}
+
+.admin-seller-management-page__feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs, 0.375rem);
+  margin: var(--space-md, 1rem) 0 0;
+  padding-inline-start: var(--space-md, 1rem);
+  color: var(--text-primary, #1f322d);
+  font-size: var(--font-size-md, 0.9375rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-seller-management-page__textarea {
+    transition: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .admin-seller-management-page {
+    min-height: auto;
+    padding: var(--space-md, 1rem);
+  }
+
+  .admin-seller-management-page__actions {
+    flex-direction: column;
+    width: 100%;
+
+    app-button {
+      width: 100%;
+    }
+  }
+}
--- a/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.ts
+++ b/src/app/features/admin/seller-management/pages/admin-seller-management-page.component.ts
@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '../../../../i18n/translate.pipe';
+import { TranslateService } from '../../../../i18n/translate.service';
+import { ConfigService } from '../../../../core/config/config.service';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
+import { DialogComponent } from '../../../../shared/ui/dialog/dialog.component';
+import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
+import { FormFieldComponent } from '../../../../shared/ui/form-field/form-field.component';
+import { InputComponent } from '../../../../shared/ui/input/input.component';
+import { IconComponent } from '../../../../shared/ui/icon/icon.component';
+import { BadgeComponent } from '../../../../shared/ui/badge/badge.component';
+
+interface SellerAccessRequest {
+  company: string;
+  email: string;
+  message: string;
+}
+
+/**
+ * Phase 1 UI for the optional Seller Management module (ADR-011). The module
+ * has no backend/business logic yet, so this page's entire content today is
+ * the "not available" empty state - request-access and learn-more dialogs
+ * only. Reads `modules.sellerManagement.enabled` per ADR-011's capability-
+ * guard rule rather than assuming a hardcoded state; there is no enabled-
+ * state UI to switch to yet, that's separate future work once the module is
+ * actually built.
+ */
+@Component({
+  selector: 'app-admin-seller-management-page',
+  standalone: true,
+  imports: [
+    FormsModule,
+    TranslatePipe,
+    ButtonComponent,
+    DialogComponent,
+    EmptyStateComponent,
+    FormFieldComponent,
+    InputComponent,
+    IconComponent,
+    BadgeComponent
+  ],
+  templateUrl: './admin-seller-management-page.component.html',
+  styleUrl: './admin-seller-management-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AdminSellerManagementPageComponent {
+  private readonly configService = inject(ConfigService);
+  private readonly i18n = inject(TranslateService);
+
+  protected readonly sellerManagementEnabled = signal(
+    this.configService.getBootstrapSnapshot()?.modules?.sellerManagement?.enabled ?? false
+  );
+
+  protected readonly requestDialogOpen = signal(false);
+  protected readonly successDialogOpen = signal(false);
+  protected readonly learnMoreDialogOpen = signal(false);
+  protected readonly submitting = signal(false);
+
+  protected readonly form = signal<SellerAccessRequest>({ company: '', email: '', message: '' });
+
+  protected openRequestDialog(): void {
+    this.form.set({ company: '', email: '', message: '' });
+    this.requestDialogOpen.set(true);
+  }
+
+  protected closeRequestDialog(): void {
+    this.requestDialogOpen.set(false);
+  }
+
+  protected openLearnMoreDialog(): void {
+    this.learnMoreDialogOpen.set(true);
+  }
+
+  protected closeLearnMoreDialog(): void {
+    this.learnMoreDialogOpen.set(false);
+  }
+
+  protected closeSuccessDialog(): void {
+    this.successDialogOpen.set(false);
+  }
+
+  protected updateCompany(value: string): void {
+    this.form.update(f => ({ ...f, company: value }));
+  }
+
+  protected updateEmail(value: string): void {
+    this.form.update(f => ({ ...f, email: value }));
+  }
+
+  protected updateMessage(value: string): void {
+    this.form.update(f => ({ ...f, message: value }));
+  }
+
+  /** Mocked submission - no backend/API exists for this yet (Phase 1 UI only). */
+  protected submitRequest(): void {
+    this.submitting.set(true);
+    setTimeout(() => {
+      this.submitting.set(false);
+      this.requestDialogOpen.set(false);
+      this.successDialogOpen.set(true);
+    }, 400);
+  }
+
+  protected dialogTitle(key: string): string {
+    return this.i18n.t(key);
+  }
+}
--- a/src/app/features/admin/shell/admin-nav.model.ts
+++ b/src/app/features/admin/shell/admin-nav.model.ts
@@ -37,6 +37,8 @@ export const ADMIN_NAV_PRIMARY: AdminNavEntry[] = [
  { type: 'link', id: 'transactions', icon: 'creditCard', labelKey: 'adminShell.nav.transactions', path: ['transactions'] },
  { type: 'link', id: 'moderation', icon: 'star', labelKey: 'adminShell.nav.moderation', path: ['moderation'] },
  { type: 'link', id: 'reports', icon: 'chartBar', labelKey: 'adminShell.nav.reports', comingSoon: true },
+  { type: 'group', labelKey: 'adminShell.nav.partnersGroup' },
+  { type: 'link', id: 'seller-management', icon: 'store', labelKey: 'adminShell.nav.sellerManagement', path: ['partners', 'seller-management'] },
  { type: 'link', id: 'content', icon: 'edit', labelKey: 'adminShell.nav.content', absolutePath: ['edit', 'static-pages'] },
  { type: 'link', id: 'media', icon: 'images', labelKey: 'adminShell.nav.mediaLibrary', path: ['media'] },
  { type: 'link', id: 'marketplace-builder', icon: 'network', labelKey: 'adminShell.nav.marketplaceBuilder', absolutePath: ['edit'] },