Seller Registration and Verification Flow

Seller registration and verification is the onboarding funnel that converts buyers into active sellers. A frictionless registration (just a few extra fields) maximises conversion; the verification step (admin reviews and approves) ensures trust and safety. The complete flow — registration → dashboard → first listing → approval → live — demonstrates the full classified website working end-to-end with authentication, role assignment, and the listing lifecycle.

Seller Registration Flow #

// ── seller-registration.component.ts ─────────────────────────────────────
@Component({
  selector:   'app-seller-registration',
  standalone:  true,
  imports:    [ReactiveFormsModule, MatFormFieldModule, MatInputModule,
               MatButtonModule, MatCheckboxModule],
  template: `
    <div class="registration-page">
      <h1>Become a Seller</h1>
      <p>Start listing your items and reaching thousands of buyers.</p>

      @if (registered()) {
        <!-- Success state ────────────────────────────────────────────── -->
        <div class="success-card" data-cy="registration-success">
          <mat-icon color="primary">check_circle</mat-icon>
          <h2>You're now a seller!</h2>
          <p>You can start creating listings straight away.</p>
          <p class="verification-note">
            For additional trust badges and unlimited listings,
            <strong>apply for seller verification</strong> from your dashboard.
          </p>
          <button mat-raised-button color="primary"
                  routerLink="/my-listings/new">
            Create Your First Listing
          </button>
        </div>
      } @else {
        <!-- Registration form ────────────────────────────────────────── -->
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
          <mat-form-field>
            <mat-label>Business / Display Name</mat-label>
            <input matInput formControlName="sellerName" data-cy="seller-name">
            <mat-error *ngIf="form.get('sellerName')?.errors?.['required']">
              Display name is required
            </mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Contact Phone</mat-label>
            <input matInput formControlName="phone" type="tel">
          </mat-form-field>

          <mat-checkbox formControlName="agreedToTerms" data-cy="agree-terms">
            I agree to the <a routerLink="/terms">seller terms</a>
          </mat-checkbox>

          @if (errorMessage()) {
            <mat-error>{{ errorMessage() }}</mat-error>
          }

          <button mat-raised-button color="primary" type="submit"
                  [disabled]="form.invalid || submitting()"
                  data-cy="register-seller-btn">
            @if (submitting()) { Registering... } @else { Become a Seller }
          </button>
        </form>
      }
    </div>
  `,
})
export class SellerRegistrationComponent {
  private api    = inject(AuthApiService);
  private auth   = inject(AuthService);
  private notify = inject(ToastService);

  registered   = signal(false);
  submitting   = signal(false);
  errorMessage = signal<string | null>(null);

  form = inject(FormBuilder).nonNullable.group({
    sellerName:    ['', [Validators.required, Validators.minLength(2)]],
    phone:         [''],
    agreedToTerms: [false, Validators.requiredTrue],
  });

  onSubmit(): void {
    if (this.form.invalid) return;
    this.submitting.set(true);
    this.errorMessage.set(null);

    this.api.registerAsSeller(this.form.getRawValue()).subscribe({
      next: () => {
        // Refresh auth session to pick up the new Seller role in the JWT
        this.auth.refreshSession().subscribe(() => {
          this.registered.set(true);
          this.submitting.set(false);
        });
      },
      error: (err: ApiError) => {
        this.submitting.set(false);
        this.errorMessage.set(
          err.status === 409
            ? 'You are already registered as a seller.'
            : 'Registration failed. Please try again.'
        );
      },
    });
  }
}

// ── Seller verification status banner ────────────────────────────────────
// seller-dashboard.component.html:
// @if (!auth.isVerifiedSeller()) {
//   <div class="verification-banner" data-cy="verification-banner">
//     <mat-icon>verified</mat-icon>
//     <div>
//       <strong>Get Verified</strong>
//       <p>Verified sellers get a trust badge, unlimited listings, and higher placement.</p>
//     </div>
//     <button mat-stroked-button (click)="applyForVerification()">Apply Now</button>
//   </div>
// } @else {
//   <div class="verified-badge">
//     <mat-icon color="primary">verified</mat-icon>
//     Verified Seller
//   </div>
// }