@isaiahiroko/tilmart-ngx-apps-buyer 0.2.0

package/fesm2022/isaiahiroko-tilmart-ngx-apps-buyer-account.module-DkScEdS0.mjs

@@ -0,0 +1,1753 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ApiService, ControlService, BaseDirective, using, notify, SharedModule } from '@thescaffold/ngx-core';
+import { ReplaySubject, firstValueFrom, map, catchError, of, takeUntil, switchMap, forkJoin } from 'rxjs';
+import { N as NIGERIAN_STATES } from './isaiahiroko-tilmart-ngx-apps-buyer-nigeria-xVatCeYL.mjs';
+import * as i1$1 from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CartStoreService } from './isaiahiroko-tilmart-ngx-apps-buyer.mjs';
+import { ThemeService } from '@thescaffold/ngx-common';
+
+// P5.3 — resolves the signed-in visitor's commerce `Customer` once and
+// shares it across the account sub-pages (each of orders / addresses /
+// payments / wishlists needs the `customerId` to filter its own list).
+// A guest has no `Customer` here — the shell shows a sign-in prompt
+// instead of the sub-pages.
+class AccountStoreService {
+    constructor() {
+        this.apiService = inject(ApiService);
+        this.controlService = inject(ControlService);
+        this.customer$ = new ReplaySubject(1);
+        this.loaded = false;
+    }
+    customer() {
+        if (!this.loaded) {
+            this.loaded = true;
+            this.load();
+        }
+        return this.customer$.asObservable();
+    }
+    async refreshCustomer() {
+        const c = await this.fetch();
+        this.customer$.next(c);
+        return c;
+    }
+    load() {
+        this.fetch().then((c) => this.customer$.next(c));
+    }
+    async fetch() {
+        if (!this.controlService.isLoggedIn())
+            return null;
+        const userId = this.controlService.getContext()?.userId;
+        if (!userId)
+            return null;
+        return firstValueFrom(this.apiService
+            .on('apps/commerce/customer')
+            .getMany({ userId, perPage: 1 })
+            .pipe(map((res) => {
+            const row = (res?.data ?? [])[0];
+            return row ? row : null;
+        }), catchError(() => of(null))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountStoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountStoreService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountStoreService, decorators: [{
+            type: Injectable
+        }] });
+
+const NAV = [
+    { path: 'dashboard', label: 'Overview', icon: 'fa-gauge' },
+    { path: 'orders', label: 'Orders', icon: 'fa-box' },
+    { path: 'systems', label: 'My Systems', icon: 'fa-solar-panel' },
+    { path: 'returns', label: 'Returns', icon: 'fa-rotate-left' },
+    { path: 'addresses', label: 'Addresses', icon: 'fa-location-dot' },
+    { path: 'payments', label: 'Payments', icon: 'fa-credit-card' },
+    { path: 'wishlists', label: 'Wishlists', icon: 'fa-heart' },
+    { path: 'settings', label: 'Settings', icon: 'fa-gear' },
+    { path: 'privacy', label: 'Privacy & data', icon: 'fa-shield-halved' },
+];
+// P5.3, ACC-02…ACC-10 — the storefront account area. A shell with a nav
+// rail + `<router-outlet>`; the signed-in `Customer` is resolved once
+// here (via `AccountStoreService`) and read by every sub-page. Guest-
+// first like the rest of the storefront: a signed-out visitor sees a
+// sign-in prompt, not a redirect.
+class AccountComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.controlService = inject(ControlService);
+        this.store = inject(AccountStoreService);
+        this.nav = NAV;
+        this.isLoggedIn = false;
+        this.loading = true;
+        this.customerName = '';
+        this.init = () => {
+            this.isLoggedIn = this.controlService.isLoggedIn();
+            if (!this.isLoggedIn) {
+                this.loading = false;
+                return;
+            }
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                this.loading = false;
+                this.customerName =
+                    customer?.name || customer?.email || customer?.phone || 'Your account';
+            }));
+        };
+    }
+    signIn() {
+        this.router.navigate(['/start']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountComponent, isStandalone: false, selector: "x-account", usesInheritance: true, ngImport: i0, template: "<div class=\"x-acct\">\n  @if (loading) {\n    <div class=\"x-acct-note\">Loading your account\u2026</div>\n  } @else if (!isLoggedIn) {\n    <div class=\"x-acct-signin\">\n      <h1>Your account</h1>\n      <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n      <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n      <p class=\"x-acct-muted\">\n        No account yet? You can still\n        <a routerLink=\"/track\">track an order</a> with your order number.\n      </p>\n    </div>\n  } @else {\n    <header class=\"x-acct-head\">\n      <h1>{{ customerName }}</h1>\n    </header>\n    <div class=\"x-acct-body\">\n      <nav class=\"x-acct-nav\">\n        @for (item of nav; track item.path) {\n          <a\n            [routerLink]=\"item.path\"\n            routerLinkActive=\"x-acct-nav-on\"\n            class=\"x-acct-nav-link\"\n          >\n            <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n            <span>{{ item.label }}</span>\n          </a>\n        }\n      </nav>\n      <main class=\"x-acct-main\">\n        <router-outlet></router-outlet>\n      </main>\n    </div>\n  }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account', encapsulation: ViewEncapsulation.None, template: "<div class=\"x-acct\">\n  @if (loading) {\n    <div class=\"x-acct-note\">Loading your account\u2026</div>\n  } @else if (!isLoggedIn) {\n    <div class=\"x-acct-signin\">\n      <h1>Your account</h1>\n      <p>Sign in to see your orders, saved systems, addresses and settings.</p>\n      <button type=\"button\" class=\"x-acct-btn\" (click)=\"signIn()\">Sign in</button>\n      <p class=\"x-acct-muted\">\n        No account yet? You can still\n        <a routerLink=\"/track\">track an order</a> with your order number.\n      </p>\n    </div>\n  } @else {\n    <header class=\"x-acct-head\">\n      <h1>{{ customerName }}</h1>\n    </header>\n    <div class=\"x-acct-body\">\n      <nav class=\"x-acct-nav\">\n        @for (item of nav; track item.path) {\n          <a\n            [routerLink]=\"item.path\"\n            routerLinkActive=\"x-acct-nav-on\"\n            class=\"x-acct-nav-link\"\n          >\n            <i class=\"fa-solid\" [class]=\"item.icon\"></i>\n            <span>{{ item.label }}</span>\n          </a>\n        }\n      </nav>\n      <main class=\"x-acct-main\">\n        <router-outlet></router-outlet>\n      </main>\n    </div>\n  }\n</div>\n", styles: [".x-acct{max-width:1080px;margin:0 auto;padding:24px 20px 64px}.x-acct-note,.x-acct-muted{font-size:13.5px;color:var(--color-text-muted)}.x-acct-signin{max-width:420px;margin:48px auto;text-align:center}.x-acct-signin h1{font-size:26px;font-weight:800;color:var(--color-text);margin-bottom:10px}.x-acct-signin p{font-size:14.5px;color:var(--color-text-muted);margin-bottom:18px}.x-acct-signin a{color:var(--color-accent-hover);font-weight:700}.x-acct-head h1{font-size:28px;font-weight:800;color:var(--color-text);margin:4px 0 24px}.x-acct-body{display:grid;grid-template-columns:208px 1fr;gap:32px}.x-acct-nav{display:flex;flex-direction:column;gap:2px}.x-acct-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-lg);font-size:14px;font-weight:700;color:var(--color-text-muted);text-decoration:none;cursor:pointer}.x-acct-nav-link i{width:16px;text-align:center}.x-acct-nav-link:hover{background:var(--color-surface-2);color:var(--color-text)}.x-acct-nav-on{background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-main{min-width:0}.x-acct-h2{font-size:19px;font-weight:800;color:var(--color-text);margin:0 0 4px}.x-acct-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}.x-acct-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:20px;margin-bottom:16px}.x-acct-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--color-border-muted)}.x-acct-row:last-child{border-bottom:0}.x-acct-empty{font-size:13.5px;color:var(--color-text-muted);padding:8px 0}.x-acct-btn{display:inline-block;background:var(--color-accent);color:var(--color-accent-fg);border:0;border-radius:var(--radius-lg);padding:11px 18px;font-size:14px;font-weight:800;cursor:pointer;text-decoration:none}.x-acct-btn:hover:not(:disabled){background:var(--color-accent-hover)}.x-acct-btn:disabled{opacity:.55;cursor:default}.x-acct-btn-ghost{background:transparent;color:var(--color-accent-hover);border:1px solid var(--color-border);padding:9px 14px;border-radius:var(--radius-lg);font-size:13px;font-weight:700;cursor:pointer}.x-acct-btn-ghost:hover{border-color:var(--color-accent)}.x-acct-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}.x-acct-pill-ok{background:color-mix(in srgb,var(--color-accent) 15%,var(--color-surface));color:var(--color-accent-hover)}.x-acct-pill-warn{background:color-mix(in srgb,var(--color-warn) 20%,var(--color-surface));color:color-mix(in srgb,var(--color-warn) 72%,black)}.x-acct-pill-bad{background:color-mix(in srgb,var(--color-danger) 15%,var(--color-surface));color:var(--color-danger)}.x-acct-field{margin-bottom:16px}.x-acct-field label{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--color-text-muted);margin-bottom:7px}.x-acct-field input,.x-acct-field select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);font:inherit;font-size:14.5px;background:var(--color-surface);color:var(--color-text);outline:none}.x-acct-err{font-size:12.5px;color:var(--color-danger);margin-bottom:12px}.x-acct-ok{font-size:12.5px;color:var(--color-accent-hover);margin-bottom:12px}.x-acct-checkline{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;color:var(--color-text)}.x-acct-checkline input{width:auto}@media(max-width:720px){.x-acct-body{grid-template-columns:1fr;gap:16px}.x-acct-nav{flex-direction:row;flex-wrap:wrap}}\n"] }]
+        }] });
+
+function blankForm() {
+    return {
+        label: '',
+        state: '',
+        lga: '',
+        city: '',
+        street: '',
+        area: '',
+        landmark: '',
+        buildingInfo: '',
+        notes: '',
+    };
+}
+// P5.3, ACC-04 — the address book. Labelled addresses with one default,
+// editable and deletable, shared with checkout + (R2) installation.
+class AccountAddressesComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.states = NIGERIAN_STATES;
+        this.loading = true;
+        this.customerId = '';
+        this.addresses = [];
+        this.editing = false;
+        this.saving = false;
+        this.form = blankForm();
+        this.formError = '';
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                this.customerId = customer.id;
+                void this.load();
+            }));
+        };
+    }
+    async load() {
+        const res = await firstValueFrom(this.apiService
+            .on('apps/commerce/address')
+            .getMany({ customerId: this.customerId, perPage: 100 })
+            .pipe(catchError(() => of({ data: [] }))));
+        this.addresses = (res?.data ?? []).map((a) => ({
+            id: a.id,
+            label: a.label,
+            state: a.state,
+            lga: a.lga,
+            city: a.city,
+            street: a.street,
+            area: a.area,
+            landmark: a.landmark,
+            buildingInfo: a.buildingInfo,
+            notes: a.notes,
+            isDefault: !!a.isDefault,
+        }));
+        this.loading = false;
+    }
+    startAdd() {
+        this.form = blankForm();
+        this.formError = '';
+        this.editing = true;
+    }
+    startEdit(a) {
+        this.form = { ...a };
+        this.formError = '';
+        this.editing = true;
+    }
+    cancel() {
+        this.editing = false;
+    }
+    async save() {
+        if (this.saving)
+            return;
+        if (!this.form.label.trim() || !this.form.state || !this.form.street.trim()) {
+            this.formError = 'Label, state and street are required.';
+            return;
+        }
+        this.saving = true;
+        this.formError = '';
+        const payload = {
+            customerId: this.customerId,
+            label: this.form.label.trim(),
+            state: this.form.state,
+            lga: this.form.lga || undefined,
+            city: this.form.city || undefined,
+            street: this.form.street.trim(),
+            area: this.form.area || this.form.city || this.form.state,
+            landmark: this.form.landmark || undefined,
+            buildingInfo: this.form.buildingInfo || undefined,
+            notes: this.form.notes || undefined,
+        };
+        try {
+            if (this.form.id) {
+                await firstValueFrom(this.apiService.on('apps/commerce/address').update(this.form.id, payload));
+            }
+            else {
+                payload.isDefault = this.addresses.length === 0;
+                await firstValueFrom(this.apiService.on('apps/commerce/address').create(payload));
+            }
+            this.editing = false;
+            await this.load();
+        }
+        catch (err) {
+            this.formError = err?.error?.message ?? 'Could not save this address.';
+        }
+        finally {
+            this.saving = false;
+        }
+    }
+    async remove(a) {
+        if (!confirm(`Delete "${a.label}"?`))
+            return;
+        try {
+            await firstValueFrom(this.apiService.on('apps/commerce/address').remove(a.id));
+            await this.load();
+        }
+        catch {
+            notify('Could not delete that address.', undefined, 'error');
+        }
+    }
+    async makeDefault(a) {
+        if (a.isDefault)
+            return;
+        const current = this.addresses.find((x) => x.isDefault);
+        try {
+            await firstValueFrom(this.apiService.on('apps/commerce/address').update(a.id, { isDefault: true }));
+            if (current) {
+                await firstValueFrom(this.apiService
+                    .on('apps/commerce/address')
+                    .update(current.id, { isDefault: false }));
+            }
+            await this.load();
+        }
+        catch {
+            notify('Could not update the default address.', undefined, 'error');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountAddressesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountAddressesComponent, isStandalone: false, selector: "x-account-addresses", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Addresses</h2>\n<p class=\"x-acct-sub\">Used for delivery and, later, installation visits.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  @if (editing) {\n    <div class=\"x-acct-card\">\n      <strong>{{ form.id ? 'Edit address' : 'New address' }}</strong>\n      <div style=\"margin-top: 14px\">\n        <div class=\"x-acct-field\">\n          <label>Label</label>\n          <input [(ngModel)]=\"form.label\" placeholder=\"Home, Office, Site\u2026\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>State</label>\n          <select aria-label=\"State\" [(ngModel)]=\"form.state\">\n            <option value=\"\">Select a state</option>\n            @for (s of states; track s) {\n              <option [value]=\"s\">{{ s }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"x-acct-field\">\n          <label>LGA / area</label>\n          <input [(ngModel)]=\"form.lga\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Street</label>\n          <input [(ngModel)]=\"form.street\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Nearest landmark</label>\n          <input [(ngModel)]=\"form.landmark\" placeholder=\"e.g. opposite Zenith Bank\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Building / flat info</label>\n          <input [(ngModel)]=\"form.buildingInfo\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Delivery notes</label>\n          <input [(ngModel)]=\"form.notes\" />\n        </div>\n        @if (formError) {\n          <div class=\"x-acct-err\">{{ formError }}</div>\n        }\n        <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"saving\" (click)=\"save()\">\n          {{ saving ? 'Saving\u2026' : 'Save address' }}\n        </button>\n        <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"cancel()\" style=\"margin-left: 8px\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  } @else {\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"startAdd()\">Add an address</button>\n  }\n\n  @for (a of addresses; track a.id) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        <strong>\n          {{ a.label }}\n          @if (a.isDefault) {\n            <span class=\"x-acct-pill x-acct-pill-ok\" style=\"margin-left: 6px\">Default</span>\n          }\n        </strong>\n        <span>\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"startEdit(a)\">Edit</button>\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"remove(a)\" style=\"margin-left: 6px\">\n            Delete\n          </button>\n        </span>\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0\">\n        {{ a.street }}@if (a.landmark) {, near {{ a.landmark }}}<br />\n        {{ a.lga ? a.lga + ', ' : '' }}{{ a.state }}\n      </p>\n      @if (!a.isDefault) {\n        <button\n          type=\"button\"\n          class=\"x-acct-btn-ghost\"\n          style=\"margin-top: 10px\"\n          (click)=\"makeDefault(a)\"\n        >\n          Make default\n        </button>\n      }\n    </div>\n  } @empty {\n    @if (!editing) {\n      <div class=\"x-acct-empty\">No saved addresses yet.</div>\n    }\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountAddressesComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-addresses', template: "<h2 class=\"x-acct-h2\">Addresses</h2>\n<p class=\"x-acct-sub\">Used for delivery and, later, installation visits.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  @if (editing) {\n    <div class=\"x-acct-card\">\n      <strong>{{ form.id ? 'Edit address' : 'New address' }}</strong>\n      <div style=\"margin-top: 14px\">\n        <div class=\"x-acct-field\">\n          <label>Label</label>\n          <input [(ngModel)]=\"form.label\" placeholder=\"Home, Office, Site\u2026\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>State</label>\n          <select aria-label=\"State\" [(ngModel)]=\"form.state\">\n            <option value=\"\">Select a state</option>\n            @for (s of states; track s) {\n              <option [value]=\"s\">{{ s }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"x-acct-field\">\n          <label>LGA / area</label>\n          <input [(ngModel)]=\"form.lga\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Street</label>\n          <input [(ngModel)]=\"form.street\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Nearest landmark</label>\n          <input [(ngModel)]=\"form.landmark\" placeholder=\"e.g. opposite Zenith Bank\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Building / flat info</label>\n          <input [(ngModel)]=\"form.buildingInfo\" />\n        </div>\n        <div class=\"x-acct-field\">\n          <label>Delivery notes</label>\n          <input [(ngModel)]=\"form.notes\" />\n        </div>\n        @if (formError) {\n          <div class=\"x-acct-err\">{{ formError }}</div>\n        }\n        <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"saving\" (click)=\"save()\">\n          {{ saving ? 'Saving\u2026' : 'Save address' }}\n        </button>\n        <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"cancel()\" style=\"margin-left: 8px\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  } @else {\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"startAdd()\">Add an address</button>\n  }\n\n  @for (a of addresses; track a.id) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        <strong>\n          {{ a.label }}\n          @if (a.isDefault) {\n            <span class=\"x-acct-pill x-acct-pill-ok\" style=\"margin-left: 6px\">Default</span>\n          }\n        </strong>\n        <span>\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"startEdit(a)\">Edit</button>\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"remove(a)\" style=\"margin-left: 6px\">\n            Delete\n          </button>\n        </span>\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0\">\n        {{ a.street }}@if (a.landmark) {, near {{ a.landmark }}}<br />\n        {{ a.lga ? a.lga + ', ' : '' }}{{ a.state }}\n      </p>\n      @if (!a.isDefault) {\n        <button\n          type=\"button\"\n          class=\"x-acct-btn-ghost\"\n          style=\"margin-top: 10px\"\n          (click)=\"makeDefault(a)\"\n        >\n          Make default\n        </button>\n      }\n    </div>\n  } @empty {\n    @if (!editing) {\n      <div class=\"x-acct-empty\">No saved addresses yet.</div>\n    }\n  }\n}\n" }]
+        }] });
+
+// PRD Appendix B — the 17 order states, buyer-friendly labels. Shared by
+// the account dashboard / orders / order-detail pages (the guest `/track`
+// page keeps its own copy — it's a separate module tree).
+const ORDER_STATUS_LABELS = {
+    pending_payment: 'Awaiting payment',
+    payment_received: 'Payment received',
+    on_hold: 'On hold',
+    confirmed: 'Confirmed',
+    processing: 'Being prepared',
+    partially_fulfilled: 'Partly on the way',
+    ready_to_ship: 'Ready to ship',
+    ready_for_pickup: 'Ready for pickup',
+    dispatched: 'Dispatched',
+    out_for_delivery: 'Out for delivery',
+    failed_delivery: 'Delivery attempt failed',
+    delivered: 'Delivered',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+    return_in_flight: 'Return in progress',
+    returned: 'Returned',
+    refunded: 'Refunded',
+};
+function orderStatusLabel(status) {
+    return ORDER_STATUS_LABELS[status] ?? status;
+}
+function orderStatusTone(status) {
+    if (status === 'delivered' || status === 'completed')
+        return 'ok';
+    if (status === 'cancelled' || status === 'refunded' || status === 'failed_delivery')
+        return 'bad';
+    if (status === 'pending_payment' || status === 'on_hold' || status === 'return_in_flight')
+        return 'warn';
+    return '';
+}
+
+const OPEN_STATUSES = new Set([
+    'pending_payment',
+    'payment_received',
+    'on_hold',
+    'confirmed',
+    'processing',
+    'partially_fulfilled',
+    'ready_to_ship',
+    'ready_for_pickup',
+    'dispatched',
+    'out_for_delivery',
+    'failed_delivery',
+]);
+// P5.3, ACC-02 — the account overview. Open-order count, the three most
+// recent orders, warranties inside 60 days of expiry, and quick links.
+// Bookings / wallet balance are R2 / PAY-11 (not built) — deliberately
+// left off rather than stubbed.
+class AccountDashboardComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.customerId = '';
+        this.openCount = 0;
+        this.recentOrders = [];
+        this.expiringWarranties = [];
+        this.wishlistCount = 0;
+        this.referralCode = '';
+        this.referralConverted = 0;
+        this.referralPending = 0;
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$), switchMap((customer) => {
+                if (!customer)
+                    return of(null);
+                this.customerId = customer.id;
+                return of(customer);
+            }))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                void this.hydrate(customer.id);
+            }));
+        };
+    }
+    async hydrate(customerId) {
+        const [orders, warranties, wishlists, refCode, refs] = await Promise.all([
+            firstValueFrom(this.apiService
+                .on('apps/commerce/order')
+                .getMany({ customerId, perPage: 100 })
+                .pipe(catchError(() => of({ data: [] })))),
+            firstValueFrom(this.apiService
+                .on('apps/commerce/warranty')
+                .getMany({ customerId, perPage: 100 })
+                .pipe(catchError(() => of({ data: [] })))),
+            firstValueFrom(this.apiService
+                .on('apps/commerce/wishlist')
+                .getMany({ customerId, perPage: 100 })
+                .pipe(catchError(() => of({ data: [] })))),
+            firstValueFrom(this.apiService
+                .get('apps/commerce/referral/my-code')
+                .pipe(catchError(() => of(undefined)))),
+            firstValueFrom(this.apiService
+                .get('apps/commerce/referral/mine')
+                .pipe(catchError(() => of({ data: [] })))),
+        ]);
+        this.referralCode = refCode?.data?.code ?? '';
+        const refRows = refs?.data ?? [];
+        this.referralConverted = refRows.filter((r) => r.status === 'converted' || r.status === 'rewarded').length;
+        this.referralPending = refRows.filter((r) => r.status === 'pending' && r.refereeCustomerId).length;
+        const orderRows = orders?.data ?? [];
+        this.openCount = orderRows.filter((o) => OPEN_STATUSES.has(o.status)).length;
+        this.recentOrders = orderRows
+            .slice()
+            .sort((a, b) => this.ts(b.placedAt ?? b.createdAt) - this.ts(a.placedAt ?? a.createdAt))
+            .slice(0, 3)
+            .map((o) => ({
+            id: o.id,
+            orderNumber: o.orderNumber,
+            status: o.status,
+            statusLabel: orderStatusLabel(o.status),
+            placedAt: o.placedAt ?? o.createdAt,
+            grandTotal: Number(o.grandTotal ?? 0),
+            currency: o.currency ?? 'NGN',
+        }));
+        const now = Date.now();
+        this.expiringWarranties = (warranties?.data ?? [])
+            .filter((w) => w.expiresAt)
+            .map((w) => ({
+            id: w.id,
+            label: w.serialNumberId ? 'Registered unit' : 'Warranty',
+            expiresAt: w.expiresAt,
+            daysLeft: Math.round((this.ts(w.expiresAt) - now) / 86_400_000),
+        }))
+            .filter((w) => w.daysLeft >= 0 && w.daysLeft <= 60)
+            .sort((a, b) => a.daysLeft - b.daysLeft);
+        this.wishlistCount = (wishlists?.data ?? []).length;
+        this.loading = false;
+    }
+    ts(v) {
+        const t = v ? Date.parse(v) : NaN;
+        return Number.isNaN(t) ? 0 : t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountDashboardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountDashboardComponent, isStandalone: false, selector: "x-account-dashboard", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Overview</h2>\n<p class=\"x-acct-sub\">A snapshot of your orders and cover.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\">\n      <span>Open orders</span>\n      <strong>{{ openCount }}</strong>\n    </div>\n    <div class=\"x-acct-row\">\n      <span>Saved wishlists</span>\n      <a routerLink=\"../wishlists\">{{ wishlistCount }}</a>\n    </div>\n  </div>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n      <strong>Recent orders</strong>\n      <a routerLink=\"../orders\" class=\"x-acct-btn-ghost\">All orders</a>\n    </div>\n    @for (order of recentOrders; track order.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"['../orders', order.id]\">\n        <span>\n          <strong>{{ order.orderNumber }}</strong>\n          <br />\n          <span class=\"x-acct-pill\">{{ order.statusLabel }}</span>\n        </span>\n        <span>{{ order.currency }} {{ order.grandTotal | number: '1.2-2' }}</span>\n      </a>\n    } @empty {\n      <div class=\"x-acct-empty\">No orders yet.</div>\n    }\n  </div>\n\n  @if (referralCode) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n        <strong>Refer a friend</strong>\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0 0 8px\">\n        Share your code \u2014 you both benefit when they complete their first order.\n      </p>\n      <div class=\"x-acct-row\">\n        <span>Your code</span>\n        <strong style=\"letter-spacing: 1px\">{{ referralCode }}</strong>\n      </div>\n      @if (referralConverted || referralPending) {\n        <div class=\"x-acct-row\">\n          <span>Referrals</span>\n          <span>{{ referralConverted }} completed \u00B7 {{ referralPending }} pending</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (expiringWarranties.length) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n        <strong>Warranties expiring soon</strong>\n        <a routerLink=\"../systems\" class=\"x-acct-btn-ghost\">My Systems</a>\n      </div>\n      @for (w of expiringWarranties; track w.id) {\n        <div class=\"x-acct-row\">\n          <span>{{ w.label }}</span>\n          <span class=\"x-acct-pill-warn x-acct-pill\">{{ w.daysLeft }} days left</span>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-dashboard', template: "<h2 class=\"x-acct-h2\">Overview</h2>\n<p class=\"x-acct-sub\">A snapshot of your orders and cover.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\">\n      <span>Open orders</span>\n      <strong>{{ openCount }}</strong>\n    </div>\n    <div class=\"x-acct-row\">\n      <span>Saved wishlists</span>\n      <a routerLink=\"../wishlists\">{{ wishlistCount }}</a>\n    </div>\n  </div>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n      <strong>Recent orders</strong>\n      <a routerLink=\"../orders\" class=\"x-acct-btn-ghost\">All orders</a>\n    </div>\n    @for (order of recentOrders; track order.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"['../orders', order.id]\">\n        <span>\n          <strong>{{ order.orderNumber }}</strong>\n          <br />\n          <span class=\"x-acct-pill\">{{ order.statusLabel }}</span>\n        </span>\n        <span>{{ order.currency }} {{ order.grandTotal | number: '1.2-2' }}</span>\n      </a>\n    } @empty {\n      <div class=\"x-acct-empty\">No orders yet.</div>\n    }\n  </div>\n\n  @if (referralCode) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n        <strong>Refer a friend</strong>\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0 0 8px\">\n        Share your code \u2014 you both benefit when they complete their first order.\n      </p>\n      <div class=\"x-acct-row\">\n        <span>Your code</span>\n        <strong style=\"letter-spacing: 1px\">{{ referralCode }}</strong>\n      </div>\n      @if (referralConverted || referralPending) {\n        <div class=\"x-acct-row\">\n          <span>Referrals</span>\n          <span>{{ referralConverted }} completed \u00B7 {{ referralPending }} pending</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (expiringWarranties.length) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-bottom: 4px\">\n        <strong>Warranties expiring soon</strong>\n        <a routerLink=\"../systems\" class=\"x-acct-btn-ghost\">My Systems</a>\n      </div>\n      @for (w of expiringWarranties; track w.id) {\n        <div class=\"x-acct-row\">\n          <span>{{ w.label }}</span>\n          <span class=\"x-acct-pill-warn x-acct-pill\">{{ w.daysLeft }} days left</span>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+// P5.3, ACC-03 — one order in full: lines, totals, the transition
+// timeline, payments, and the context actions (reorder, invoice, track,
+// return). Return / review targets are P5.9 / P5.11 — linked when they
+// exist, absent otherwise rather than dead-ended.
+class AccountOrderDetailComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.route = inject(ActivatedRoute);
+        this.cart = inject(CartStoreService);
+        this.loading = true;
+        this.found = false;
+        this.orderId = '';
+        this.orderNumber = '';
+        this.status = '';
+        this.statusLabel = '';
+        this.tone = '';
+        this.currency = 'NGN';
+        this.recipientName = '';
+        this.recipientPhone = '';
+        this.lines = [];
+        this.subtotal = 0;
+        this.deliveryTotal = 0;
+        this.taxTotal = 0;
+        this.discountTotal = 0;
+        this.grandTotal = 0;
+        this.amountPaid = 0;
+        this.codAmountDue = 0;
+        this.timeline = [];
+        this.payments = [];
+        this.init = () => {
+            this.orderId = this.route.snapshot.paramMap.get('id') ?? '';
+            if (!this.orderId) {
+                this.loading = false;
+                return;
+            }
+            forkJoin({
+                order: this.apiService
+                    .on('apps/commerce/order')
+                    .getOne(this.orderId)
+                    .pipe(catchError(() => of(undefined))),
+                lines: this.apiService
+                    .on('apps/commerce/order-line')
+                    .getMany({ orderId: this.orderId, perPage: 200 })
+                    .pipe(catchError(() => of(undefined))),
+                history: this.apiService
+                    .on('apps/commerce/order-status-history')
+                    .getMany({ orderId: this.orderId, perPage: 200 })
+                    .pipe(catchError(() => of(undefined))),
+                payments: this.apiService
+                    .on('apps/commerce/payment')
+                    .getMany({ orderId: this.orderId, perPage: 50 })
+                    .pipe(catchError(() => of(undefined))),
+            })
+                .pipe(takeUntil(this.$))
+                .subscribe(using((res) => {
+                this.loading = false;
+                const order = res?.order?.data;
+                if (!order)
+                    return;
+                this.found = true;
+                this.orderNumber = order.orderNumber;
+                this.status = order.status;
+                this.statusLabel = orderStatusLabel(order.status);
+                this.tone = orderStatusTone(order.status);
+                this.placedAt = order.placedAt ?? order.createdAt;
+                this.currency = order.currency ?? 'NGN';
+                this.recipientName = order.recipientName ?? '';
+                this.recipientPhone = order.recipientPhone ?? '';
+                this.subtotal = Number(order.subtotal ?? 0);
+                this.deliveryTotal = Number(order.deliveryTotal ?? 0);
+                this.taxTotal = Number(order.taxTotal ?? 0);
+                this.discountTotal = Number(order.discountTotal ?? 0);
+                this.grandTotal = Number(order.grandTotal ?? 0);
+                this.amountPaid = Number(order.amountPaid ?? 0);
+                this.codAmountDue = Number(order.codAmountDue ?? 0);
+                this.lines = (res?.lines?.data ?? []).map((l) => ({
+                    variantId: l.variantId,
+                    name: l.nameSnapshot || 'Item',
+                    quantity: Number(l.quantity ?? 1),
+                    unitPrice: Number(l.unitPrice ?? 0),
+                    lineTotal: Number(l.unitPrice ?? 0) * Number(l.quantity ?? 1),
+                    fulfilmentStatus: l.fulfilmentStatus,
+                }));
+                this.timeline = (res?.history?.data ?? [])
+                    .slice()
+                    .sort((a, b) => this.ts(a.at ?? a.createdAt) - this.ts(b.at ?? b.createdAt))
+                    .map((h) => ({
+                    toStatus: h.toStatus,
+                    label: orderStatusLabel(h.toStatus),
+                    at: h.at ?? h.createdAt,
+                    reason: h.reason,
+                }));
+                this.payments = (res?.payments?.data ?? []).map((p) => ({
+                    provider: p.provider,
+                    method: p.method,
+                    status: p.status,
+                    amount: Number(p.amount ?? 0),
+                }));
+            }));
+        };
+    }
+    reorder() {
+        if (!this.lines.length)
+            return;
+        for (const line of this.lines) {
+            this.cart.addLine({
+                variantId: line.variantId,
+                productId: '',
+                name: line.name,
+                quantity: line.quantity,
+                unitPrice: line.unitPrice,
+                currency: this.currency,
+            });
+        }
+        notify('Added to your cart', undefined, 'success');
+        this.router.navigate(['/cart']);
+    }
+    ts(v) {
+        const t = v ? Date.parse(v) : NaN;
+        return Number.isNaN(t) ? 0 : t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountOrderDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountOrderDetailComponent, isStandalone: false, selector: "x-account-order-detail", usesInheritance: true, ngImport: i0, template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 All orders</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that order.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">{{ orderNumber }}</h2>\n    <p class=\"x-acct-sub\">\n      @if (placedAt) {\n        Placed {{ placedAt | date: 'medium' }} \u00B7\n      }\n      <span\n        class=\"x-acct-pill\"\n        [class.x-acct-pill-ok]=\"tone === 'ok'\"\n        [class.x-acct-pill-warn]=\"tone === 'warn'\"\n        [class.x-acct-pill-bad]=\"tone === 'bad'\"\n        >{{ statusLabel }}</span\n      >\n    </p>\n  </header>\n\n  <div class=\"x-acct-card\" style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"reorder()\">Buy these again</button>\n    <a\n      class=\"x-acct-btn-ghost\"\n      [routerLink]=\"['/order/invoice']\"\n      [queryParams]=\"{ orderId: orderId }\"\n      >VAT invoice</a\n    >\n    <a\n      class=\"x-acct-btn-ghost\"\n      [routerLink]=\"['/track']\"\n      [queryParams]=\"{ number: orderNumber }\"\n      >Track delivery</a\n    >\n    <a class=\"x-acct-btn-ghost\" [routerLink]=\"['return']\">Request a return</a>\n    <a class=\"x-acct-btn-ghost\" routerLink=\"/help\">Contact support</a>\n  </div>\n\n  <div class=\"x-acct-card\">\n    <strong>Items</strong>\n    @for (line of lines; track line.variantId) {\n      <div class=\"x-acct-row\">\n        <span>\n          {{ line.name }}\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            Qty {{ line.quantity }} \u00B7 {{ currency }} {{ line.unitPrice | number: '1.2-2' }} each\n            @if (line.fulfilmentStatus) {\n              \u00B7 {{ line.fulfilmentStatus }}\n            }\n          </span>\n        </span>\n        <strong>{{ currency }} {{ line.lineTotal | number: '1.2-2' }}</strong>\n      </div>\n    }\n    <div class=\"x-acct-row\"><span>Subtotal</span><span>{{ currency }} {{ subtotal | number: '1.2-2' }}</span></div>\n    @if (discountTotal > 0) {\n      <div class=\"x-acct-row\"><span>Discount</span><span>\u2212 {{ currency }} {{ discountTotal | number: '1.2-2' }}</span></div>\n    }\n    <div class=\"x-acct-row\"><span>Delivery</span><span>{{ currency }} {{ deliveryTotal | number: '1.2-2' }}</span></div>\n    <div class=\"x-acct-row\"><span>VAT (incl.)</span><span>{{ currency }} {{ taxTotal | number: '1.2-2' }}</span></div>\n    <div class=\"x-acct-row\"><strong>Total</strong><strong>{{ currency }} {{ grandTotal | number: '1.2-2' }}</strong></div>\n    <div class=\"x-acct-row\"><span>Paid</span><span>{{ currency }} {{ amountPaid | number: '1.2-2' }}</span></div>\n    @if (codAmountDue > 0) {\n      <div class=\"x-acct-row\">\n        <span>Due on delivery</span>\n        <strong>{{ currency }} {{ codAmountDue | number: '1.2-2' }}</strong>\n      </div>\n    }\n  </div>\n\n  @if (recipientName || recipientPhone) {\n    <div class=\"x-acct-card\">\n      <strong>Delivery to</strong>\n      <div class=\"x-acct-row\">\n        <span>{{ recipientName }}</span>\n        <span>{{ recipientPhone }}</span>\n      </div>\n    </div>\n  }\n\n  @if (payments.length) {\n    <div class=\"x-acct-card\">\n      <strong>Payments</strong>\n      @for (p of payments; track $index) {\n        <div class=\"x-acct-row\">\n          <span>{{ p.method || p.provider || 'Payment' }}</span>\n          <span class=\"x-acct-pill\">{{ p.status }}</span>\n          <span>{{ currency }} {{ p.amount | number: '1.2-2' }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (timeline.length) {\n    <div class=\"x-acct-card\">\n      <strong>Progress</strong>\n      @for (step of timeline; track $index) {\n        <div class=\"x-acct-row\">\n          <span>\n            {{ step.label }}\n            @if (step.reason) {\n              <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">{{ step.reason }}</span>\n            }\n          </span>\n          <span class=\"x-acct-sub\">{{ step.at | date: 'short' }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountOrderDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-order-detail', template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 All orders</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that order.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">{{ orderNumber }}</h2>\n    <p class=\"x-acct-sub\">\n      @if (placedAt) {\n        Placed {{ placedAt | date: 'medium' }} \u00B7\n      }\n      <span\n        class=\"x-acct-pill\"\n        [class.x-acct-pill-ok]=\"tone === 'ok'\"\n        [class.x-acct-pill-warn]=\"tone === 'warn'\"\n        [class.x-acct-pill-bad]=\"tone === 'bad'\"\n        >{{ statusLabel }}</span\n      >\n    </p>\n  </header>\n\n  <div class=\"x-acct-card\" style=\"display: flex; flex-wrap: wrap; gap: 10px\">\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"reorder()\">Buy these again</button>\n    <a\n      class=\"x-acct-btn-ghost\"\n      [routerLink]=\"['/order/invoice']\"\n      [queryParams]=\"{ orderId: orderId }\"\n      >VAT invoice</a\n    >\n    <a\n      class=\"x-acct-btn-ghost\"\n      [routerLink]=\"['/track']\"\n      [queryParams]=\"{ number: orderNumber }\"\n      >Track delivery</a\n    >\n    <a class=\"x-acct-btn-ghost\" [routerLink]=\"['return']\">Request a return</a>\n    <a class=\"x-acct-btn-ghost\" routerLink=\"/help\">Contact support</a>\n  </div>\n\n  <div class=\"x-acct-card\">\n    <strong>Items</strong>\n    @for (line of lines; track line.variantId) {\n      <div class=\"x-acct-row\">\n        <span>\n          {{ line.name }}\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            Qty {{ line.quantity }} \u00B7 {{ currency }} {{ line.unitPrice | number: '1.2-2' }} each\n            @if (line.fulfilmentStatus) {\n              \u00B7 {{ line.fulfilmentStatus }}\n            }\n          </span>\n        </span>\n        <strong>{{ currency }} {{ line.lineTotal | number: '1.2-2' }}</strong>\n      </div>\n    }\n    <div class=\"x-acct-row\"><span>Subtotal</span><span>{{ currency }} {{ subtotal | number: '1.2-2' }}</span></div>\n    @if (discountTotal > 0) {\n      <div class=\"x-acct-row\"><span>Discount</span><span>\u2212 {{ currency }} {{ discountTotal | number: '1.2-2' }}</span></div>\n    }\n    <div class=\"x-acct-row\"><span>Delivery</span><span>{{ currency }} {{ deliveryTotal | number: '1.2-2' }}</span></div>\n    <div class=\"x-acct-row\"><span>VAT (incl.)</span><span>{{ currency }} {{ taxTotal | number: '1.2-2' }}</span></div>\n    <div class=\"x-acct-row\"><strong>Total</strong><strong>{{ currency }} {{ grandTotal | number: '1.2-2' }}</strong></div>\n    <div class=\"x-acct-row\"><span>Paid</span><span>{{ currency }} {{ amountPaid | number: '1.2-2' }}</span></div>\n    @if (codAmountDue > 0) {\n      <div class=\"x-acct-row\">\n        <span>Due on delivery</span>\n        <strong>{{ currency }} {{ codAmountDue | number: '1.2-2' }}</strong>\n      </div>\n    }\n  </div>\n\n  @if (recipientName || recipientPhone) {\n    <div class=\"x-acct-card\">\n      <strong>Delivery to</strong>\n      <div class=\"x-acct-row\">\n        <span>{{ recipientName }}</span>\n        <span>{{ recipientPhone }}</span>\n      </div>\n    </div>\n  }\n\n  @if (payments.length) {\n    <div class=\"x-acct-card\">\n      <strong>Payments</strong>\n      @for (p of payments; track $index) {\n        <div class=\"x-acct-row\">\n          <span>{{ p.method || p.provider || 'Payment' }}</span>\n          <span class=\"x-acct-pill\">{{ p.status }}</span>\n          <span>{{ currency }} {{ p.amount | number: '1.2-2' }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (timeline.length) {\n    <div class=\"x-acct-card\">\n      <strong>Progress</strong>\n      @for (step of timeline; track $index) {\n        <div class=\"x-acct-row\">\n          <span>\n            {{ step.label }}\n            @if (step.reason) {\n              <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">{{ step.reason }}</span>\n            }\n          </span>\n          <span class=\"x-acct-sub\">{{ step.at | date: 'short' }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+// P5.3, ACC-03 — the buyer's order history. Every Order for their
+// Customer, newest first, each linking to the detail page (reorder /
+// invoice / track / return live there).
+class AccountOrdersComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.orders = [];
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                void this.load(customer.id);
+            }));
+        };
+    }
+    async load(customerId) {
+        const res = await firstValueFrom(this.apiService
+            .on('apps/commerce/order')
+            .getMany({ customerId, perPage: 200 })
+            .pipe(catchError(() => of({ data: [] }))));
+        this.orders = (res?.data ?? [])
+            .slice()
+            .sort((a, b) => this.ts(b.placedAt ?? b.createdAt) - this.ts(a.placedAt ?? a.createdAt))
+            .map((o) => ({
+            id: o.id,
+            orderNumber: o.orderNumber,
+            status: o.status,
+            statusLabel: orderStatusLabel(o.status),
+            tone: orderStatusTone(o.status),
+            placedAt: o.placedAt ?? o.createdAt,
+            lineCount: Number(o.lineCount ?? 0),
+            grandTotal: Number(o.grandTotal ?? 0),
+            codAmountDue: Number(o.codAmountDue ?? 0),
+            currency: o.currency ?? 'NGN',
+        }));
+        this.loading = false;
+    }
+    ts(v) {
+        const t = v ? Date.parse(v) : NaN;
+        return Number.isNaN(t) ? 0 : t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountOrdersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountOrdersComponent, isStandalone: false, selector: "x-account-orders", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Orders</h2>\n<p class=\"x-acct-sub\">Track a delivery, download an invoice or start a return.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading your orders\u2026</div>\n} @else if (!orders.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No orders yet. When you place one it'll show up here.\n    </div>\n  </div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (order of orders; track order.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"[order.id]\">\n        <span>\n          <strong>{{ order.orderNumber }}</strong>\n          @if (order.placedAt) {\n            <span class=\"x-acct-sub\" style=\"margin: 2px 0 0; display: block\">\n              {{ order.placedAt | date: 'mediumDate' }}\n            </span>\n          }\n        </span>\n        <span\n          class=\"x-acct-pill\"\n          [class.x-acct-pill-ok]=\"order.tone === 'ok'\"\n          [class.x-acct-pill-warn]=\"order.tone === 'warn'\"\n          [class.x-acct-pill-bad]=\"order.tone === 'bad'\"\n          >{{ order.statusLabel }}</span\n        >\n        <span style=\"text-align: right\">\n          <strong>{{ order.currency }} {{ order.grandTotal | number: '1.2-2' }}</strong>\n          @if (order.codAmountDue > 0) {\n            <span class=\"x-acct-sub\" style=\"margin: 2px 0 0; display: block\">\n              {{ order.currency }} {{ order.codAmountDue | number: '1.2-2' }} on delivery\n            </span>\n          }\n        </span>\n      </a>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountOrdersComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-orders', template: "<h2 class=\"x-acct-h2\">Orders</h2>\n<p class=\"x-acct-sub\">Track a delivery, download an invoice or start a return.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading your orders\u2026</div>\n} @else if (!orders.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No orders yet. When you place one it'll show up here.\n    </div>\n  </div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (order of orders; track order.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"[order.id]\">\n        <span>\n          <strong>{{ order.orderNumber }}</strong>\n          @if (order.placedAt) {\n            <span class=\"x-acct-sub\" style=\"margin: 2px 0 0; display: block\">\n              {{ order.placedAt | date: 'mediumDate' }}\n            </span>\n          }\n        </span>\n        <span\n          class=\"x-acct-pill\"\n          [class.x-acct-pill-ok]=\"order.tone === 'ok'\"\n          [class.x-acct-pill-warn]=\"order.tone === 'warn'\"\n          [class.x-acct-pill-bad]=\"order.tone === 'bad'\"\n          >{{ order.statusLabel }}</span\n        >\n        <span style=\"text-align: right\">\n          <strong>{{ order.currency }} {{ order.grandTotal | number: '1.2-2' }}</strong>\n          @if (order.codAmountDue > 0) {\n            <span class=\"x-acct-sub\" style=\"margin: 2px 0 0; display: block\">\n              {{ order.currency }} {{ order.codAmountDue | number: '1.2-2' }} on delivery\n            </span>\n          }\n        </span>\n      </a>\n    }\n  </div>\n}\n" }]
+        }] });
+
+// P5.3, ACC-05 (the R1 slice) — a read-only payment history across the
+// buyer's orders. Saved / tokenised cards are P1 and not built.
+class AccountPaymentsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.payments = [];
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                void this.load(customer.id);
+            }));
+        };
+    }
+    async load(customerId) {
+        const ordersRes = await firstValueFrom(this.apiService
+            .on('apps/commerce/order')
+            .getMany({ customerId, perPage: 200 })
+            .pipe(catchError(() => of({ data: [] }))));
+        const orders = ordersRes?.data ?? [];
+        const numberById = new Map(orders.map((o) => [o.id, o.orderNumber]));
+        const perOrder = await Promise.all(orders.map((o) => firstValueFrom(this.apiService
+            .on('apps/commerce/payment')
+            .getMany({ orderId: o.id, perPage: 50 })
+            .pipe(catchError(() => of({ data: [] }))))));
+        this.payments = perOrder
+            .flatMap((res) => res?.data ?? [])
+            .map((p) => ({
+            id: p.id,
+            orderId: p.orderId,
+            orderNumber: numberById.get(p.orderId) ?? '',
+            provider: p.provider,
+            method: p.method,
+            status: p.status,
+            amount: Number(p.amount ?? 0),
+            currency: p.currency ?? 'NGN',
+            paidAt: p.paidAt,
+            createdAt: p.createdAt,
+        }))
+            .sort((a, b) => this.ts(b.paidAt ?? b.createdAt) - this.ts(a.paidAt ?? a.createdAt));
+        this.loading = false;
+    }
+    ts(v) {
+        const t = v ? Date.parse(v) : NaN;
+        return Number.isNaN(t) ? 0 : t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountPaymentsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountPaymentsComponent, isStandalone: false, selector: "x-account-payments", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Payments</h2>\n<p class=\"x-acct-sub\">Every payment across your orders.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!payments.length) {\n  <div class=\"x-acct-card\"><div class=\"x-acct-empty\">No payments yet.</div></div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (p of payments; track p.id) {\n      <div class=\"x-acct-row\">\n        <span>\n          @if (p.orderId) {\n            <a [routerLink]=\"['../orders', p.orderId]\"><strong>{{ p.orderNumber }}</strong></a>\n          } @else {\n            <strong>{{ p.orderNumber || 'Payment' }}</strong>\n          }\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            {{ p.method || p.provider }} \u00B7 {{ (p.paidAt || p.createdAt) | date: 'mediumDate' }}\n          </span>\n        </span>\n        <span class=\"x-acct-pill\" [class.x-acct-pill-ok]=\"p.status === 'success'\">\n          {{ p.status }}\n        </span>\n        <strong>{{ p.currency }} {{ p.amount | number: '1.2-2' }}</strong>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountPaymentsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-payments', template: "<h2 class=\"x-acct-h2\">Payments</h2>\n<p class=\"x-acct-sub\">Every payment across your orders.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!payments.length) {\n  <div class=\"x-acct-card\"><div class=\"x-acct-empty\">No payments yet.</div></div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (p of payments; track p.id) {\n      <div class=\"x-acct-row\">\n        <span>\n          @if (p.orderId) {\n            <a [routerLink]=\"['../orders', p.orderId]\"><strong>{{ p.orderNumber }}</strong></a>\n          } @else {\n            <strong>{{ p.orderNumber || 'Payment' }}</strong>\n          }\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            {{ p.method || p.provider }} \u00B7 {{ (p.paidAt || p.createdAt) | date: 'mediumDate' }}\n          </span>\n        </span>\n        <span class=\"x-acct-pill\" [class.x-acct-pill-ok]=\"p.status === 'success'\">\n          {{ p.status }}\n        </span>\n        <strong>{{ p.currency }} {{ p.amount | number: '1.2-2' }}</strong>\n      </div>\n    }\n  </div>\n}\n" }]
+        }] });
+
+// P7.7, SEC-04 / SEC-05 (NDPR) — the customer's data controls: export a
+// copy of everything held about them, and lodge an account-deletion
+// request. Cookie / tracking consent is the site-wide consent bar; this
+// page is the data-subject access + erasure surface.
+class AccountPrivacyComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.api = inject(ApiService);
+        this.store = inject(AccountStoreService);
+        this.exporting = false;
+        this.requesting = false;
+        this.deletionLodged = false;
+        this.deletionReason = '';
+        this.init = () => {
+            this.store
+                .customer()
+                .subscribe((c) => (this.customerId = c?.id));
+        };
+    }
+    async downloadData() {
+        if (this.exporting)
+            return;
+        this.exporting = true;
+        try {
+            const res = await firstValueFrom(this.api.post('apps/commerce/data-request/export', {
+                customerId: this.customerId,
+            }));
+            const bundle = res?.data ?? res;
+            const blob = new Blob([JSON.stringify(bundle, null, 2)], {
+                type: 'application/json',
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `tilmart-data-${new Date().toISOString().slice(0, 10)}.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch {
+            notify('We couldn’t prepare your data right now. Please try again.', undefined, 'error');
+        }
+        finally {
+            this.exporting = false;
+        }
+    }
+    async requestDeletion() {
+        if (this.requesting)
+            return;
+        this.requesting = true;
+        try {
+            await firstValueFrom(this.api.post('apps/commerce/data-request', {
+                type: 'deletion',
+                customerId: this.customerId,
+                note: this.deletionReason || undefined,
+            }));
+            this.deletionLodged = true;
+            notify('Your deletion request has been lodged.', undefined, 'success');
+        }
+        catch {
+            notify('We couldn’t lodge your request. Please try again.', undefined, 'error');
+        }
+        finally {
+            this.requesting = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountPrivacyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountPrivacyComponent, isStandalone: false, selector: "x-account-privacy", usesInheritance: true, ngImport: i0, template: "<div class=\"x-pv\">\n  <h1 class=\"x-pv-title\">Privacy &amp; your data</h1>\n  <p class=\"x-pv-intro\">\n    Under the Nigeria Data Protection Act you can get a copy of the personal\n    data we hold about you, and ask us to delete your account.\n  </p>\n\n  <section class=\"x-pv-card\">\n    <h2>Download my data</h2>\n    <p>\n      A machine-readable copy of your profile, addresses, orders, returns,\n      warranties, reviews, questions, support messages, notification\n      preferences and saved tools.\n    </p>\n    <button\n      type=\"button\"\n      class=\"x-pv-btn\"\n      [disabled]=\"exporting || !customerId\"\n      (click)=\"downloadData()\"\n    >\n      {{ exporting ? 'Preparing\u2026' : 'Download my data (JSON)' }}\n    </button>\n  </section>\n\n  <section class=\"x-pv-card\">\n    <h2>Delete my account</h2>\n    @if (deletionLodged) {\n      <p class=\"x-pv-ok\">\n        Your request is lodged. Our team will complete it within 30 days and\n        email you when it\u2019s done.\n      </p>\n    } @else {\n      <p>\n        We\u2019ll remove your personal details. Some records are kept where the\n        law requires \u2014 see below.\n      </p>\n      <textarea\n        class=\"x-pv-reason\"\n        rows=\"2\"\n        placeholder=\"Anything you'd like us to know (optional)\"\n        [(ngModel)]=\"deletionReason\"\n      ></textarea>\n      <button\n        type=\"button\"\n        class=\"x-pv-btn x-pv-btn-danger\"\n        [disabled]=\"requesting || !customerId\"\n        (click)=\"requestDeletion()\"\n      >\n        {{ requesting ? 'Sending\u2026' : 'Request account deletion' }}\n      </button>\n    }\n  </section>\n\n  <section class=\"x-pv-card x-pv-retain\">\n    <h2>What we keep, and why</h2>\n    <ul>\n      <li><strong>Order &amp; payment records</strong> \u2014 financial and tax law.</li>\n      <li><strong>Warranty registrations &amp; claim outcomes</strong> \u2014 our ongoing warranty obligation to the product owner.</li>\n      <li><strong>Audit-log entries</strong> \u2014 security and accountability.</li>\n    </ul>\n    <p class=\"x-pv-fine\">\n      Kept records are stripped of contact details where possible and are not\n      used for marketing.\n    </p>\n  </section>\n</div>\n\n<style>\n  .x-pv { max-width: 640px; }\n  .x-pv-title { font-size: 22px; font-weight: 800; color: var(--color-text); margin: 0 0 6px; }\n  .x-pv-intro { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 20px; }\n  .x-pv-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }\n  .x-pv-card h2 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }\n  .x-pv-card p { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 12px; }\n  .x-pv-btn { font: inherit; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--color-brand); color: #fff; cursor: pointer; }\n  .x-pv-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n  .x-pv-btn-danger { background: var(--color-danger, #c0392b); }\n  .x-pv-reason { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface, #fff); color: var(--color-text); margin-bottom: 12px; }\n  .x-pv-ok { color: var(--color-text); }\n  .x-pv-retain ul { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--color-text-muted); line-height: 1.7; }\n  .x-pv-fine { font-size: 12.5px; }\n</style>\n", styles: [".x-pv{max-width:640px}.x-pv-title{font-size:22px;font-weight:800;color:var(--color-text);margin:0 0 6px}.x-pv-intro{font-size:14px;color:var(--color-text-muted);line-height:1.6;margin:0 0 20px}.x-pv-card{border:1px solid var(--color-border);border-radius:12px;padding:16px 18px;margin-bottom:14px}.x-pv-card h2{font-size:15px;font-weight:700;color:var(--color-text);margin:0 0 6px}.x-pv-card p{font-size:13.5px;color:var(--color-text-muted);line-height:1.6;margin:0 0 12px}.x-pv-btn{font:inherit;font-weight:700;font-size:13.5px;padding:10px 18px;border:0;border-radius:8px;background:var(--color-brand);color:#fff;cursor:pointer}.x-pv-btn:disabled{opacity:.5;cursor:not-allowed}.x-pv-btn-danger{background:var(--color-danger, #c0392b)}.x-pv-reason{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface, #fff);color:var(--color-text);margin-bottom:12px}.x-pv-ok{color:var(--color-text)}.x-pv-retain ul{margin:0 0 8px;padding-left:18px;font-size:13.5px;color:var(--color-text-muted);line-height:1.7}.x-pv-fine{font-size:12.5px}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountPrivacyComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-privacy', template: "<div class=\"x-pv\">\n  <h1 class=\"x-pv-title\">Privacy &amp; your data</h1>\n  <p class=\"x-pv-intro\">\n    Under the Nigeria Data Protection Act you can get a copy of the personal\n    data we hold about you, and ask us to delete your account.\n  </p>\n\n  <section class=\"x-pv-card\">\n    <h2>Download my data</h2>\n    <p>\n      A machine-readable copy of your profile, addresses, orders, returns,\n      warranties, reviews, questions, support messages, notification\n      preferences and saved tools.\n    </p>\n    <button\n      type=\"button\"\n      class=\"x-pv-btn\"\n      [disabled]=\"exporting || !customerId\"\n      (click)=\"downloadData()\"\n    >\n      {{ exporting ? 'Preparing\u2026' : 'Download my data (JSON)' }}\n    </button>\n  </section>\n\n  <section class=\"x-pv-card\">\n    <h2>Delete my account</h2>\n    @if (deletionLodged) {\n      <p class=\"x-pv-ok\">\n        Your request is lodged. Our team will complete it within 30 days and\n        email you when it\u2019s done.\n      </p>\n    } @else {\n      <p>\n        We\u2019ll remove your personal details. Some records are kept where the\n        law requires \u2014 see below.\n      </p>\n      <textarea\n        class=\"x-pv-reason\"\n        rows=\"2\"\n        placeholder=\"Anything you'd like us to know (optional)\"\n        [(ngModel)]=\"deletionReason\"\n      ></textarea>\n      <button\n        type=\"button\"\n        class=\"x-pv-btn x-pv-btn-danger\"\n        [disabled]=\"requesting || !customerId\"\n        (click)=\"requestDeletion()\"\n      >\n        {{ requesting ? 'Sending\u2026' : 'Request account deletion' }}\n      </button>\n    }\n  </section>\n\n  <section class=\"x-pv-card x-pv-retain\">\n    <h2>What we keep, and why</h2>\n    <ul>\n      <li><strong>Order &amp; payment records</strong> \u2014 financial and tax law.</li>\n      <li><strong>Warranty registrations &amp; claim outcomes</strong> \u2014 our ongoing warranty obligation to the product owner.</li>\n      <li><strong>Audit-log entries</strong> \u2014 security and accountability.</li>\n    </ul>\n    <p class=\"x-pv-fine\">\n      Kept records are stripped of contact details where possible and are not\n      used for marketing.\n    </p>\n  </section>\n</div>\n\n<style>\n  .x-pv { max-width: 640px; }\n  .x-pv-title { font-size: 22px; font-weight: 800; color: var(--color-text); margin: 0 0 6px; }\n  .x-pv-intro { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 20px; }\n  .x-pv-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }\n  .x-pv-card h2 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }\n  .x-pv-card p { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 12px; }\n  .x-pv-btn { font: inherit; font-weight: 700; font-size: 13.5px; padding: 10px 18px; border: 0; border-radius: 8px; background: var(--color-brand); color: #fff; cursor: pointer; }\n  .x-pv-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n  .x-pv-btn-danger { background: var(--color-danger, #c0392b); }\n  .x-pv-reason { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface, #fff); color: var(--color-text); margin-bottom: 12px; }\n  .x-pv-ok { color: var(--color-text); }\n  .x-pv-retain ul { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--color-text-muted); line-height: 1.7; }\n  .x-pv-fine { font-size: 12.5px; }\n</style>\n" }]
+        }] });
+
+const STATUS_LABELS$1 = {
+    requested: 'Requested',
+    approved: 'Approved',
+    rejected: 'Rejected',
+    awaiting_return: 'Awaiting your return',
+    in_transit: 'On its way back',
+    received: 'Received',
+    inspecting: 'Being inspected',
+    resolved: 'Resolved',
+    cancelled: 'Cancelled',
+};
+// P5.9, RET-03 — one RMA in full: status, instructions, per-line
+// inspection outcome, the resolution and any refund amount.
+class AccountReturnDetailComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.route = inject(ActivatedRoute);
+        this.loading = true;
+        this.found = false;
+        this.rmaNumber = '';
+        this.status = '';
+        this.statusLabel = '';
+        this.reasonCode = '';
+        this.orderId = '';
+        this.lines = [];
+        this.init = () => {
+            const id = this.route.snapshot.paramMap.get('id') ?? '';
+            if (!id) {
+                this.loading = false;
+                return;
+            }
+            forkJoin({
+                request: this.apiService
+                    .on('apps/commerce/return-request')
+                    .getOne(id)
+                    .pipe(catchError(() => of(undefined))),
+                lines: this.apiService
+                    .on('apps/commerce/return-line')
+                    .getMany({ returnRequestId: id, perPage: 100 })
+                    .pipe(catchError(() => of({ data: [] }))),
+            })
+                .pipe(takeUntil(this.$))
+                .subscribe(using((res) => {
+                this.loading = false;
+                const r = res?.request?.data;
+                if (!r)
+                    return;
+                this.found = true;
+                this.rmaNumber = r.rmaNumber;
+                this.status = r.status;
+                this.statusLabel = STATUS_LABELS$1[r.status] ?? r.status;
+                this.reasonCode = r.reasonCode;
+                this.method = r.method;
+                this.instructions = r.instructions;
+                this.whoPaysReturn = r.whoPaysReturn;
+                this.resolution = r.resolution;
+                this.refundAmount = r.refundAmount != null ? Number(r.refundAmount) : undefined;
+                this.createdAt = r.createdAt;
+                this.resolvedAt = r.resolvedAt;
+                this.orderId = r.orderId;
+                const rawLines = res?.lines?.data ?? [];
+                this.lines = rawLines.map((l) => ({
+                    name: 'Item',
+                    quantity: Number(l.quantity ?? 1),
+                    inspectionOutcome: l.inspectionOutcome,
+                    acceptedQuantity: l.acceptedQuantity,
+                    disposition: l.disposition,
+                }));
+                void this.nameLines(r.orderId, rawLines);
+            }));
+        };
+    }
+    async nameLines(orderId, rawLines) {
+        const orderLines = await firstValueFrom(this.apiService
+            .on('apps/commerce/order-line')
+            .getMany({ orderId, perPage: 200 })
+            .pipe(catchError(() => of({ data: [] }))));
+        const nameById = new Map((orderLines?.data ?? []).map((o) => [o.id, o.nameSnapshot || 'Item']));
+        this.lines = this.lines.map((vm, i) => ({
+            ...vm,
+            name: nameById.get(rawLines[i]?.orderLineId) ?? 'Item',
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountReturnDetailComponent, isStandalone: false, selector: "x-account-return-detail", usesInheritance: true, ngImport: i0, template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 All returns</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that return.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">{{ rmaNumber }}</h2>\n    <p class=\"x-acct-sub\">\n      <span class=\"x-acct-pill\">{{ statusLabel }}</span>\n      \u00B7 requested {{ createdAt | date: 'mediumDate' }}\n      @if (orderId) {\n        \u00B7 <a [routerLink]=\"['/account/orders', orderId]\">view order</a>\n      }\n    </p>\n  </header>\n\n  @if (instructions) {\n    <div class=\"x-acct-card\">\n      <strong>What to do</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 0\">{{ instructions }}</p>\n    </div>\n  }\n\n  <div class=\"x-acct-card\">\n    <strong>Items</strong>\n    @for (line of lines; track $index) {\n      <div class=\"x-acct-row\">\n        <span>\n          {{ line.name }}\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            Qty {{ line.quantity }}\n            @if (line.inspectionOutcome !== 'pending') {\n              \u00B7 inspected: {{ line.inspectionOutcome }}\n              @if (line.acceptedQuantity != null) {\n                ({{ line.acceptedQuantity }} accepted)\n              }\n            }\n          </span>\n        </span>\n      </div>\n    }\n  </div>\n\n  @if (resolution) {\n    <div class=\"x-acct-card\">\n      <strong>Outcome</strong>\n      <div class=\"x-acct-row\">\n        <span>{{ resolution }}</span>\n        @if (refundAmount != null) {\n          <strong>Refund: {{ refundAmount | number: '1.2-2' }}</strong>\n        }\n      </div>\n      @if (resolvedAt) {\n        <p class=\"x-acct-sub\" style=\"margin: 0\">Resolved {{ resolvedAt | date: 'medium' }}</p>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-return-detail', template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 All returns</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that return.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">{{ rmaNumber }}</h2>\n    <p class=\"x-acct-sub\">\n      <span class=\"x-acct-pill\">{{ statusLabel }}</span>\n      \u00B7 requested {{ createdAt | date: 'mediumDate' }}\n      @if (orderId) {\n        \u00B7 <a [routerLink]=\"['/account/orders', orderId]\">view order</a>\n      }\n    </p>\n  </header>\n\n  @if (instructions) {\n    <div class=\"x-acct-card\">\n      <strong>What to do</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 0\">{{ instructions }}</p>\n    </div>\n  }\n\n  <div class=\"x-acct-card\">\n    <strong>Items</strong>\n    @for (line of lines; track $index) {\n      <div class=\"x-acct-row\">\n        <span>\n          {{ line.name }}\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            Qty {{ line.quantity }}\n            @if (line.inspectionOutcome !== 'pending') {\n              \u00B7 inspected: {{ line.inspectionOutcome }}\n              @if (line.acceptedQuantity != null) {\n                ({{ line.acceptedQuantity }} accepted)\n              }\n            }\n          </span>\n        </span>\n      </div>\n    }\n  </div>\n\n  @if (resolution) {\n    <div class=\"x-acct-card\">\n      <strong>Outcome</strong>\n      <div class=\"x-acct-row\">\n        <span>{{ resolution }}</span>\n        @if (refundAmount != null) {\n          <strong>Refund: {{ refundAmount | number: '1.2-2' }}</strong>\n        }\n      </div>\n      @if (resolvedAt) {\n        <p class=\"x-acct-sub\" style=\"margin: 0\">Resolved {{ resolvedAt | date: 'medium' }}</p>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+const REASONS = [
+    { code: 'damaged_in_transit', label: 'Damaged in transit' },
+    { code: 'wrong_item', label: 'Wrong item sent' },
+    { code: 'not_as_described', label: 'Not as described' },
+    { code: 'faulty_on_arrival', label: 'Faulty on arrival' },
+    { code: 'changed_mind', label: 'Changed my mind' },
+    { code: 'missing_parts', label: 'Missing parts' },
+];
+const METHODS = [
+    { code: 'pickup', label: 'Pickup from my address' },
+    { code: 'drop_off', label: 'Drop off at a collection point' },
+    { code: 'station', label: 'Drop at a pickup station' },
+];
+// P5.9, RET-02 — the self-serve return request. Pick items + a reason;
+// the eligibility check (window, who pays) runs before the RMA is minted.
+class AccountReturnRequestComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.route = inject(ActivatedRoute);
+        this.store = inject(AccountStoreService);
+        this.reasons = REASONS;
+        this.methods = METHODS;
+        this.loading = true;
+        this.orderId = '';
+        this.orderNumber = '';
+        this.customerId = '';
+        this.lines = [];
+        this.reasonCode = '';
+        this.method = 'pickup';
+        this.notes = '';
+        this.checking = false;
+        this.eligibility = null;
+        this.submitting = false;
+        this.error = '';
+        this.createdRma = '';
+        this.init = () => {
+            this.orderId = this.route.snapshot.paramMap.get('id') ?? '';
+            this.store.customer().subscribe((c) => (this.customerId = c?.id ?? ''));
+            void this.load();
+        };
+    }
+    async load() {
+        const [order, lines] = await Promise.all([
+            firstValueFrom(this.apiService
+                .on('apps/commerce/order')
+                .getOne(this.orderId)
+                .pipe(catchError(() => of(undefined)))),
+            firstValueFrom(this.apiService
+                .on('apps/commerce/order-line')
+                .getMany({ orderId: this.orderId, perPage: 200 })
+                .pipe(catchError(() => of({ data: [] })))),
+        ]);
+        this.orderNumber = order?.data?.orderNumber ?? '';
+        this.lines = (lines?.data ?? []).map((l) => ({
+            orderLineId: l.id,
+            name: l.nameSnapshot || 'Item',
+            orderedQty: Number(l.quantity ?? 1),
+            selected: false,
+            quantity: Number(l.quantity ?? 1),
+        }));
+        this.loading = false;
+    }
+    get selectedLines() {
+        return this.lines.filter((l) => l.selected);
+    }
+    get canSubmit() {
+        return (!!this.reasonCode &&
+            this.selectedLines.length > 0 &&
+            this.eligibility?.eligible === true);
+    }
+    async checkEligibility() {
+        if (!this.reasonCode) {
+            this.eligibility = null;
+            return;
+        }
+        this.checking = true;
+        try {
+            const res = await firstValueFrom(this.apiService.post('apps/commerce/return-request/eligibility', {
+                orderId: this.orderId,
+                reasonCode: this.reasonCode,
+            }));
+            this.eligibility = res?.data ?? null;
+        }
+        catch {
+            this.eligibility = null;
+        }
+        finally {
+            this.checking = false;
+        }
+    }
+    async submit() {
+        if (this.submitting || !this.canSubmit)
+            return;
+        this.submitting = true;
+        this.error = '';
+        try {
+            const res = await firstValueFrom(this.apiService.post('apps/commerce/return-request/request', {
+                orderId: this.orderId,
+                customerId: this.customerId || undefined,
+                reasonCode: this.reasonCode,
+                method: this.method,
+                notes: this.notes || undefined,
+                lines: this.selectedLines.map((l) => ({
+                    orderLineId: l.orderLineId,
+                    quantity: Math.min(l.quantity, l.orderedQty),
+                })),
+            }));
+            if (res?.status === 'error') {
+                this.error = res?.message ?? 'Could not create your return.';
+                return;
+            }
+            this.createdRma = res?.data?.rmaNumber ?? '';
+            notify('Return requested', undefined, 'success');
+        }
+        catch (err) {
+            this.error = err?.error?.message ?? 'Could not create your return.';
+        }
+        finally {
+            this.submitting = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnRequestComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountReturnRequestComponent, isStandalone: false, selector: "x-account-return-request", usesInheritance: true, ngImport: i0, template: "<a [routerLink]=\"['/account/orders', orderId]\" class=\"x-acct-btn-ghost\">\u2039 Back to order</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (createdRma) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <h2 class=\"x-acct-h2\">Return requested</h2>\n    <p class=\"x-acct-sub\">\n      Your RMA number is <strong>{{ createdRma }}</strong>. We've emailed the\n      instructions \u2014 you can also see them on the returns page.\n    </p>\n    <a class=\"x-acct-btn\" routerLink=\"/account/returns\">View my returns</a>\n  </div>\n} @else {\n  <h2 class=\"x-acct-h2\" style=\"margin-top: 16px\">Return an item</h2>\n  <p class=\"x-acct-sub\">Order {{ orderNumber }}</p>\n\n  <div class=\"x-acct-card\">\n    <strong>Which items?</strong>\n    @for (line of lines; track line.orderLineId) {\n      <div class=\"x-acct-row\">\n        <label class=\"x-acct-checkline\" style=\"flex: 1\">\n          <input type=\"checkbox\" [(ngModel)]=\"line.selected\" />\n          {{ line.name }}\n        </label>\n        @if (line.selected && line.orderedQty > 1) {\n          <input\n            type=\"number\"\n            min=\"1\"\n            [max]=\"line.orderedQty\"\n            [(ngModel)]=\"line.quantity\"\n            style=\"width: 64px\"\n          />\n        }\n        <span class=\"x-acct-sub\">of {{ line.orderedQty }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-field\">\n      <label>Reason</label>\n      <select aria-label=\"Reason\" [ngModel]=\"reasonCode\" (ngModelChange)=\"reasonCode = $event; checkEligibility()\">\n        <option value=\"\">Choose a reason</option>\n        @for (r of reasons; track r.code) {\n          <option [value]=\"r.code\">{{ r.label }}</option>\n        }\n      </select>\n    </div>\n\n    @if (checking) {\n      <div class=\"x-acct-empty\">Checking eligibility\u2026</div>\n    } @else if (eligibility) {\n      @if (eligibility.eligible) {\n        <div class=\"x-acct-ok\">\n          Eligible \u2014 {{ eligibility.windowDays }}-day window.\n          {{ eligibility.whoPaysReturn === 'customer' ? 'You cover return delivery for this reason.' : 'Return delivery is on us.' }}\n        </div>\n      } @else {\n        <div class=\"x-acct-err\">\n          @switch (eligibility.reasons[0]) {\n            @case ('window-closed') { The return window for this order has closed. }\n            @case ('change-of-mind-not-allowed') { Change-of-mind returns aren't accepted for these items. }\n            @case ('returns-not-offered') { Returns aren't available for this order. }\n            @default { This return isn't eligible. }\n          }\n        </div>\n      }\n    }\n\n    <div class=\"x-acct-field\">\n      <label>How will you return it?</label>\n      <select aria-label=\"How will you return it?\" [(ngModel)]=\"method\">\n        @for (m of methods; track m.code) {\n          <option [value]=\"m.code\">{{ m.label }}</option>\n        }\n      </select>\n    </div>\n\n    <div class=\"x-acct-field\">\n      <label>Anything else we should know? (optional)</label>\n      <input [(ngModel)]=\"notes\" />\n    </div>\n\n    @if (error) {\n      <div class=\"x-acct-err\">{{ error }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      [disabled]=\"!canSubmit || submitting\"\n      (click)=\"submit()\"\n    >\n      {{ submitting ? 'Submitting\u2026' : 'Request return' }}\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnRequestComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-return-request', template: "<a [routerLink]=\"['/account/orders', orderId]\" class=\"x-acct-btn-ghost\">\u2039 Back to order</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (createdRma) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <h2 class=\"x-acct-h2\">Return requested</h2>\n    <p class=\"x-acct-sub\">\n      Your RMA number is <strong>{{ createdRma }}</strong>. We've emailed the\n      instructions \u2014 you can also see them on the returns page.\n    </p>\n    <a class=\"x-acct-btn\" routerLink=\"/account/returns\">View my returns</a>\n  </div>\n} @else {\n  <h2 class=\"x-acct-h2\" style=\"margin-top: 16px\">Return an item</h2>\n  <p class=\"x-acct-sub\">Order {{ orderNumber }}</p>\n\n  <div class=\"x-acct-card\">\n    <strong>Which items?</strong>\n    @for (line of lines; track line.orderLineId) {\n      <div class=\"x-acct-row\">\n        <label class=\"x-acct-checkline\" style=\"flex: 1\">\n          <input type=\"checkbox\" [(ngModel)]=\"line.selected\" />\n          {{ line.name }}\n        </label>\n        @if (line.selected && line.orderedQty > 1) {\n          <input\n            type=\"number\"\n            min=\"1\"\n            [max]=\"line.orderedQty\"\n            [(ngModel)]=\"line.quantity\"\n            style=\"width: 64px\"\n          />\n        }\n        <span class=\"x-acct-sub\">of {{ line.orderedQty }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-field\">\n      <label>Reason</label>\n      <select aria-label=\"Reason\" [ngModel]=\"reasonCode\" (ngModelChange)=\"reasonCode = $event; checkEligibility()\">\n        <option value=\"\">Choose a reason</option>\n        @for (r of reasons; track r.code) {\n          <option [value]=\"r.code\">{{ r.label }}</option>\n        }\n      </select>\n    </div>\n\n    @if (checking) {\n      <div class=\"x-acct-empty\">Checking eligibility\u2026</div>\n    } @else if (eligibility) {\n      @if (eligibility.eligible) {\n        <div class=\"x-acct-ok\">\n          Eligible \u2014 {{ eligibility.windowDays }}-day window.\n          {{ eligibility.whoPaysReturn === 'customer' ? 'You cover return delivery for this reason.' : 'Return delivery is on us.' }}\n        </div>\n      } @else {\n        <div class=\"x-acct-err\">\n          @switch (eligibility.reasons[0]) {\n            @case ('window-closed') { The return window for this order has closed. }\n            @case ('change-of-mind-not-allowed') { Change-of-mind returns aren't accepted for these items. }\n            @case ('returns-not-offered') { Returns aren't available for this order. }\n            @default { This return isn't eligible. }\n          }\n        </div>\n      }\n    }\n\n    <div class=\"x-acct-field\">\n      <label>How will you return it?</label>\n      <select aria-label=\"How will you return it?\" [(ngModel)]=\"method\">\n        @for (m of methods; track m.code) {\n          <option [value]=\"m.code\">{{ m.label }}</option>\n        }\n      </select>\n    </div>\n\n    <div class=\"x-acct-field\">\n      <label>Anything else we should know? (optional)</label>\n      <input [(ngModel)]=\"notes\" />\n    </div>\n\n    @if (error) {\n      <div class=\"x-acct-err\">{{ error }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      [disabled]=\"!canSubmit || submitting\"\n      (click)=\"submit()\"\n    >\n      {{ submitting ? 'Submitting\u2026' : 'Request return' }}\n    </button>\n  </div>\n}\n" }]
+        }] });
+
+const STATUS_LABELS = {
+    requested: 'Requested',
+    approved: 'Approved',
+    rejected: 'Rejected',
+    awaiting_return: 'Awaiting your return',
+    in_transit: 'On its way back',
+    received: 'Received',
+    inspecting: 'Being inspected',
+    resolved: 'Resolved',
+    cancelled: 'Cancelled',
+};
+const REASON_LABELS = {
+    damaged_in_transit: 'Damaged in transit',
+    wrong_item: 'Wrong item',
+    not_as_described: 'Not as described',
+    faulty_on_arrival: 'Faulty on arrival',
+    changed_mind: 'Changed mind',
+    missing_parts: 'Missing parts',
+};
+// P5.9, RET-02/03 — the buyer's returns list. Each RMA links to its
+// detail (status timeline + resolution).
+class AccountReturnsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.returns = [];
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                void this.load(customer.id);
+            }));
+        };
+    }
+    async load(customerId) {
+        const res = await firstValueFrom(this.apiService
+            .on('apps/commerce/return-request')
+            .getMany({ customerId, perPage: 100 })
+            .pipe(catchError(() => of({ data: [] }))));
+        this.returns = (res?.data ?? [])
+            .slice()
+            .sort((a, b) => this.ts(b.createdAt) - this.ts(a.createdAt))
+            .map((r) => ({
+            id: r.id,
+            rmaNumber: r.rmaNumber,
+            reasonCode: REASON_LABELS[r.reasonCode] ?? r.reasonCode,
+            status: r.status,
+            statusLabel: STATUS_LABELS[r.status] ?? r.status,
+            tone: r.status === 'resolved'
+                ? 'ok'
+                : r.status === 'rejected' || r.status === 'cancelled'
+                    ? 'bad'
+                    : 'warn',
+            resolution: r.resolution,
+            createdAt: r.createdAt,
+        }));
+        this.loading = false;
+    }
+    ts(v) {
+        const t = v ? Date.parse(v) : NaN;
+        return Number.isNaN(t) ? 0 : t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountReturnsComponent, isStandalone: false, selector: "x-account-returns", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Returns</h2>\n<p class=\"x-acct-sub\">Start a return from any order \u2014 it'll show up here.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!returns.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No returns yet. Open an order and choose \"Request a return\".\n    </div>\n  </div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (r of returns; track r.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"[r.id]\">\n        <span>\n          <strong>{{ r.rmaNumber }}</strong>\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            {{ r.reasonCode }} \u00B7 {{ r.createdAt | date: 'mediumDate' }}\n          </span>\n        </span>\n        <span\n          class=\"x-acct-pill\"\n          [class.x-acct-pill-ok]=\"r.tone === 'ok'\"\n          [class.x-acct-pill-warn]=\"r.tone === 'warn'\"\n          [class.x-acct-pill-bad]=\"r.tone === 'bad'\"\n          >{{ r.statusLabel }}</span\n        >\n        @if (r.resolution) {\n          <span class=\"x-acct-sub\">{{ r.resolution }}</span>\n        }\n      </a>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountReturnsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-returns', template: "<h2 class=\"x-acct-h2\">Returns</h2>\n<p class=\"x-acct-sub\">Start a return from any order \u2014 it'll show up here.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!returns.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No returns yet. Open an order and choose \"Request a return\".\n    </div>\n  </div>\n} @else {\n  <div class=\"x-acct-card\">\n    @for (r of returns; track r.id) {\n      <a class=\"x-acct-row\" [routerLink]=\"[r.id]\">\n        <span>\n          <strong>{{ r.rmaNumber }}</strong>\n          <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n            {{ r.reasonCode }} \u00B7 {{ r.createdAt | date: 'mediumDate' }}\n          </span>\n        </span>\n        <span\n          class=\"x-acct-pill\"\n          [class.x-acct-pill-ok]=\"r.tone === 'ok'\"\n          [class.x-acct-pill-warn]=\"r.tone === 'warn'\"\n          [class.x-acct-pill-bad]=\"r.tone === 'bad'\"\n          >{{ r.statusLabel }}</span\n        >\n        @if (r.resolution) {\n          <span class=\"x-acct-sub\">{{ r.resolution }}</span>\n        }\n      </a>\n    }\n  </div>\n}\n" }]
+        }] });
+
+class AccountApiService {
+    constructor() {
+        this.apiService = inject(ApiService);
+    }
+    async getProfile() {
+        const res = await firstValueFrom(this.apiService.get('apps/identity/attributes'));
+        return res?.data?.attributes?.user ?? {};
+    }
+    async updateProfile(payload) {
+        await firstValueFrom(this.apiService.patch('apps/identity/attributes/user', payload));
+    }
+    async changePassword(payload) {
+        await firstValueFrom(this.apiService.post('apps/identity/reset-secret/change', payload));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const CATEGORIES = [
+    { key: 'transactional', label: 'Order & payment updates', locked: true },
+    { key: 'delivery', label: 'Delivery & dispatch' },
+    { key: 'marketing', label: 'Offers & promotions', consent: true },
+    { key: 'price_alert', label: 'Price drop alerts' },
+    { key: 'back_in_stock', label: 'Back-in-stock alerts' },
+];
+const CHANNELS = [
+    { key: 'email', label: 'Email' },
+    { key: 'sms', label: 'SMS' },
+    { key: 'whatsapp', label: 'WhatsApp' },
+];
+// P5.3, ACC-01 / ACC-09 / ACC-10 — profile, password, theme and
+// notification preferences in one place. Theme rides the scaffold
+// PreferenceService (P5.2); notifications call `notification-preference/
+// mine` (P5.2's NotificationPreferenceWorkflow).
+class AccountSettingsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.accountApi = inject(AccountApiService);
+        this.themeService = inject(ThemeService);
+        this.controlService = inject(ControlService);
+        this.categories = CATEGORIES;
+        this.channels = CHANNELS;
+        this.loadingProfile = true;
+        this.savingProfile = false;
+        this.profileError = '';
+        this.fullName = '';
+        this.phoneNumber = '';
+        this.currentSecret = '';
+        this.newSecret = '';
+        this.confirmNewSecret = '';
+        this.changingPassword = false;
+        this.passwordError = '';
+        this.passwordDone = false;
+        this.theme = 'system';
+        this.loadingPrefs = true;
+        this.savingPrefs = false;
+        this.prefsError = '';
+        this.prefCategories = {};
+        this.marketingConsent = false;
+        this.quietHoursEnabled = false;
+        this.quietHoursStart = '21:00';
+        this.quietHoursEnd = '07:00';
+        this.unsubscribedAll = false;
+        this.init = () => {
+            void this.loadProfile();
+            void this.loadTheme();
+            void this.loadPrefs();
+        };
+    }
+    get canChangePassword() {
+        return (!!this.currentSecret &&
+            !!this.newSecret &&
+            this.newSecret === this.confirmNewSecret);
+    }
+    async loadProfile() {
+        try {
+            const p = await this.accountApi.getProfile();
+            this.fullName = [p.first_name, p.last_name].filter(Boolean).join(' ');
+            this.phoneNumber = p.phone_number ?? '';
+        }
+        catch {
+            this.profileError = 'Could not load your profile.';
+        }
+        finally {
+            this.loadingProfile = false;
+        }
+    }
+    async loadTheme() {
+        try {
+            const v = await firstValueFrom(this.themeService.get());
+            if (v === 'light' || v === 'dark' || v === 'system')
+                this.theme = v;
+        }
+        catch {
+            // keep default
+        }
+    }
+    async loadPrefs() {
+        try {
+            const res = await firstValueFrom(this.apiService.get('apps/commerce/notification-preference/mine'));
+            const pref = res?.data;
+            if (pref) {
+                this.prefCategories = pref.categories ?? {};
+                this.marketingConsent = !!pref.marketingConsent;
+                this.quietHoursEnabled = !!pref.quietHoursEnabled;
+                this.quietHoursStart = pref.quietHoursStart ?? '21:00';
+                this.quietHoursEnd = pref.quietHoursEnd ?? '07:00';
+                this.unsubscribedAll = !!pref.unsubscribedAll;
+            }
+        }
+        catch {
+            this.prefsError = 'Could not load your notification preferences.';
+        }
+        finally {
+            this.loadingPrefs = false;
+        }
+    }
+    async saveProfile() {
+        if (this.savingProfile)
+            return;
+        this.savingProfile = true;
+        this.profileError = '';
+        try {
+            await this.accountApi.updateProfile({ phone_number: this.phoneNumber });
+            notify('Profile saved', undefined, 'success');
+        }
+        catch (err) {
+            this.profileError = err?.error?.message ?? 'Could not save your profile.';
+        }
+        finally {
+            this.savingProfile = false;
+        }
+    }
+    async changePassword() {
+        if (this.changingPassword || !this.canChangePassword)
+            return;
+        this.changingPassword = true;
+        this.passwordError = '';
+        try {
+            await this.accountApi.changePassword({
+                currentSecret: this.currentSecret,
+                newSecret: this.newSecret,
+                confirmNewSecret: this.confirmNewSecret,
+            });
+            this.passwordDone = true;
+            setTimeout(() => {
+                this.controlService.logout();
+                this.router.navigate(['/start']);
+            }, 1500);
+        }
+        catch (err) {
+            this.passwordError =
+                err?.error?.message ?? 'Could not change your password.';
+        }
+        finally {
+            this.changingPassword = false;
+        }
+    }
+    setTheme(choice) {
+        this.theme = choice;
+        this.themeService.set({ value: choice });
+    }
+    channelOn(category, channel) {
+        return (this.prefCategories[category] ?? []).includes(channel);
+    }
+    toggleChannel(category, channel) {
+        const set = new Set(this.prefCategories[category] ?? []);
+        set.has(channel) ? set.delete(channel) : set.add(channel);
+        this.prefCategories = { ...this.prefCategories, [category]: Array.from(set) };
+    }
+    async savePrefs() {
+        if (this.savingPrefs)
+            return;
+        this.savingPrefs = true;
+        this.prefsError = '';
+        try {
+            await firstValueFrom(this.apiService.post('apps/commerce/notification-preference/mine', {
+                categories: this.prefCategories,
+                marketingConsent: this.marketingConsent,
+                marketingConsentSource: 'account',
+                quietHoursEnabled: this.quietHoursEnabled,
+                quietHoursStart: this.quietHoursStart,
+                quietHoursEnd: this.quietHoursEnd,
+                unsubscribedAll: this.unsubscribedAll,
+            }));
+            notify('Preferences saved', undefined, 'success');
+        }
+        catch (err) {
+            this.prefsError = err?.error?.message ?? 'Could not save your preferences.';
+        }
+        finally {
+            this.savingPrefs = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSettingsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountSettingsComponent, isStandalone: false, selector: "x-account-settings", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n  <strong>Profile</strong>\n  @if (loadingProfile) {\n    <div class=\"x-acct-empty\">Loading\u2026</div>\n  } @else {\n    <div style=\"margin-top: 14px\">\n      <div class=\"x-acct-field\">\n        <label>Name</label>\n        <input [value]=\"fullName\" disabled />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Phone number</label>\n        <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n      </div>\n      @if (profileError) {\n        <div class=\"x-acct-err\">{{ profileError }}</div>\n      }\n      <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n        {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n      </button>\n    </div>\n  }\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Change password</strong>\n  <div style=\"margin-top: 14px\">\n    <div class=\"x-acct-field\">\n      <label>Current password</label>\n      <input type=\"password\" [(ngModel)]=\"currentSecret\" />\n    </div>\n    <div class=\"x-acct-field\">\n      <label>New password</label>\n      <input type=\"password\" [(ngModel)]=\"newSecret\" />\n    </div>\n    <div class=\"x-acct-field\">\n      <label>Confirm new password</label>\n      <input type=\"password\" [(ngModel)]=\"confirmNewSecret\" />\n    </div>\n    @if (passwordError) {\n      <div class=\"x-acct-err\">{{ passwordError }}</div>\n    }\n    @if (passwordDone) {\n      <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      [disabled]=\"!canChangePassword || changingPassword\"\n      (click)=\"changePassword()\"\n    >\n      {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n    </button>\n  </div>\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Appearance</strong>\n  <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n    <label>Theme</label>\n    <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n      <option value=\"system\">Match my device</option>\n      <option value=\"light\">Light</option>\n      <option value=\"dark\">Dark</option>\n    </select>\n  </div>\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Notifications</strong>\n  @if (loadingPrefs) {\n    <div class=\"x-acct-empty\">Loading\u2026</div>\n  } @else {\n    <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n      Order and payment updates are always sent. Everything else is up to you.\n    </p>\n\n    @for (cat of categories; track cat.key) {\n      <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n        <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n          {{ cat.label }}\n          @if (cat.locked) {\n            <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n          }\n        </div>\n        @if (cat.consent && !marketingConsent) {\n          <label class=\"x-acct-checkline\">\n            <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n            Opt in to offers and promotions\n          </label>\n        } @else {\n          <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n            @for (ch of channels; track ch.key) {\n              <label class=\"x-acct-checkline\">\n                <input\n                  type=\"checkbox\"\n                  [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n                  [checked]=\"channelOn(cat.key, ch.key)\"\n                  (change)=\"toggleChannel(cat.key, ch.key)\"\n                />\n                {{ ch.label }}\n              </label>\n            }\n          </div>\n          @if (cat.consent && marketingConsent) {\n            <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n              <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n              Keep me opted in to offers\n            </label>\n          }\n        }\n      </div>\n    }\n\n    <div style=\"padding: 14px 0\">\n      <label class=\"x-acct-checkline\">\n        <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n        Quiet hours \u2014 hold non-urgent messages overnight\n      </label>\n      @if (quietHoursEnabled) {\n        <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n          <div class=\"x-acct-field\" style=\"margin: 0\">\n            <label>From</label>\n            <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n          </div>\n          <div class=\"x-acct-field\" style=\"margin: 0\">\n            <label>To</label>\n            <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n          </div>\n        </div>\n      }\n    </div>\n\n    <label class=\"x-acct-checkline\">\n      <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n      Unsubscribe from everything except order &amp; payment updates\n    </label>\n\n    @if (prefsError) {\n      <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      style=\"margin-top: 14px\"\n      [disabled]=\"savingPrefs\"\n      (click)=\"savePrefs()\"\n    >\n      {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-settings', template: "<h2 class=\"x-acct-h2\">Settings</h2>\n<p class=\"x-acct-sub\">Profile, security, appearance and how we reach you.</p>\n\n<div class=\"x-acct-card\">\n  <strong>Profile</strong>\n  @if (loadingProfile) {\n    <div class=\"x-acct-empty\">Loading\u2026</div>\n  } @else {\n    <div style=\"margin-top: 14px\">\n      <div class=\"x-acct-field\">\n        <label>Name</label>\n        <input [value]=\"fullName\" disabled />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Phone number</label>\n        <input type=\"tel\" [(ngModel)]=\"phoneNumber\" placeholder=\"+234\u2026\" />\n      </div>\n      @if (profileError) {\n        <div class=\"x-acct-err\">{{ profileError }}</div>\n      }\n      <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingProfile\" (click)=\"saveProfile()\">\n        {{ savingProfile ? 'Saving\u2026' : 'Save profile' }}\n      </button>\n    </div>\n  }\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Change password</strong>\n  <div style=\"margin-top: 14px\">\n    <div class=\"x-acct-field\">\n      <label>Current password</label>\n      <input type=\"password\" [(ngModel)]=\"currentSecret\" />\n    </div>\n    <div class=\"x-acct-field\">\n      <label>New password</label>\n      <input type=\"password\" [(ngModel)]=\"newSecret\" />\n    </div>\n    <div class=\"x-acct-field\">\n      <label>Confirm new password</label>\n      <input type=\"password\" [(ngModel)]=\"confirmNewSecret\" />\n    </div>\n    @if (passwordError) {\n      <div class=\"x-acct-err\">{{ passwordError }}</div>\n    }\n    @if (passwordDone) {\n      <div class=\"x-acct-ok\">Password changed. Signing you out\u2026</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      [disabled]=\"!canChangePassword || changingPassword\"\n      (click)=\"changePassword()\"\n    >\n      {{ changingPassword ? 'Saving\u2026' : 'Change password' }}\n    </button>\n  </div>\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Appearance</strong>\n  <div class=\"x-acct-field\" style=\"margin-top: 14px; max-width: 240px\">\n    <label>Theme</label>\n    <select aria-label=\"Theme\" [ngModel]=\"theme\" (ngModelChange)=\"setTheme($event)\">\n      <option value=\"system\">Match my device</option>\n      <option value=\"light\">Light</option>\n      <option value=\"dark\">Dark</option>\n    </select>\n  </div>\n</div>\n\n<div class=\"x-acct-card\">\n  <strong>Notifications</strong>\n  @if (loadingPrefs) {\n    <div class=\"x-acct-empty\">Loading\u2026</div>\n  } @else {\n    <p class=\"x-acct-sub\" style=\"margin: 8px 0 16px\">\n      Order and payment updates are always sent. Everything else is up to you.\n    </p>\n\n    @for (cat of categories; track cat.key) {\n      <div style=\"padding: 10px 0; border-bottom: 1px solid var(--color-border-muted)\">\n        <div style=\"font-weight: 700; font-size: 13.5px; margin-bottom: 8px\">\n          {{ cat.label }}\n          @if (cat.locked) {\n            <span class=\"x-acct-pill\" style=\"margin-left: 6px\">Always on</span>\n          }\n        </div>\n        @if (cat.consent && !marketingConsent) {\n          <label class=\"x-acct-checkline\">\n            <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n            Opt in to offers and promotions\n          </label>\n        } @else {\n          <div style=\"display: flex; gap: 16px; flex-wrap: wrap\">\n            @for (ch of channels; track ch.key) {\n              <label class=\"x-acct-checkline\">\n                <input\n                  type=\"checkbox\"\n                  [disabled]=\"cat.locked || unsubscribedAll || (cat.consent && !marketingConsent)\"\n                  [checked]=\"channelOn(cat.key, ch.key)\"\n                  (change)=\"toggleChannel(cat.key, ch.key)\"\n                />\n                {{ ch.label }}\n              </label>\n            }\n          </div>\n          @if (cat.consent && marketingConsent) {\n            <label class=\"x-acct-checkline\" style=\"margin-top: 4px\">\n              <input type=\"checkbox\" [(ngModel)]=\"marketingConsent\" />\n              Keep me opted in to offers\n            </label>\n          }\n        }\n      </div>\n    }\n\n    <div style=\"padding: 14px 0\">\n      <label class=\"x-acct-checkline\">\n        <input type=\"checkbox\" [(ngModel)]=\"quietHoursEnabled\" />\n        Quiet hours \u2014 hold non-urgent messages overnight\n      </label>\n      @if (quietHoursEnabled) {\n        <div style=\"display: flex; gap: 12px; margin-top: 8px\">\n          <div class=\"x-acct-field\" style=\"margin: 0\">\n            <label>From</label>\n            <input type=\"time\" [(ngModel)]=\"quietHoursStart\" />\n          </div>\n          <div class=\"x-acct-field\" style=\"margin: 0\">\n            <label>To</label>\n            <input type=\"time\" [(ngModel)]=\"quietHoursEnd\" />\n          </div>\n        </div>\n      }\n    </div>\n\n    <label class=\"x-acct-checkline\">\n      <input type=\"checkbox\" [(ngModel)]=\"unsubscribedAll\" />\n      Unsubscribe from everything except order &amp; payment updates\n    </label>\n\n    @if (prefsError) {\n      <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ prefsError }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      style=\"margin-top: 14px\"\n      [disabled]=\"savingPrefs\"\n      (click)=\"savePrefs()\"\n    >\n      {{ savingPrefs ? 'Saving\u2026' : 'Save preferences' }}\n    </button>\n  }\n</div>\n" }]
+        }] });
+
+// P5.6, ACC-06 — one registered system: product, serial, dates,
+// certificate download (P4.18), any open safety notice for the variant,
+// and the claim history. "Start a claim" links to the claim form.
+class AccountSystemDetailComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.route = inject(ActivatedRoute);
+        this.loading = true;
+        this.found = false;
+        this.warrantyId = '';
+        this.productName = 'Registered unit';
+        this.variantId = '';
+        this.isVerified = false;
+        this.monthsLeft = null;
+        this.status = '';
+        this.claims = [];
+        this.notices = [];
+        this.downloadingCert = false;
+        this.init = () => {
+            this.warrantyId = this.route.snapshot.paramMap.get('id') ?? '';
+            if (!this.warrantyId) {
+                this.loading = false;
+                return;
+            }
+            this.apiService
+                .on('apps/commerce/warranty')
+                .getOne(this.warrantyId)
+                .pipe(takeUntil(this.$), catchError(() => of(undefined)))
+                .subscribe(using((res) => {
+                const w = res?.data;
+                if (!w) {
+                    this.loading = false;
+                    return;
+                }
+                this.found = true;
+                this.variantId = w.variantId;
+                this.isVerified = !!w.isVerified;
+                this.startsAt = w.startsAt;
+                this.expiresAt = w.expiresAt;
+                this.status = w.status;
+                this.orderLineId = w.orderLineId;
+                this.monthsLeft = w.expiresAt
+                    ? Math.max(0, Math.round((Date.parse(w.expiresAt) - Date.now()) / (86_400_000 * 30.44)))
+                    : null;
+                void this.hydrate(w);
+            }));
+        };
+    }
+    async hydrate(w) {
+        const [variant, claims, notices] = await Promise.all([
+            firstValueFrom(this.apiService
+                .on('apps/commerce/product-variant')
+                .getOne(w.variantId)
+                .pipe(catchError(() => of(undefined)))),
+            firstValueFrom(this.apiService
+                .on('apps/commerce/warranty-claim')
+                .getMany({ warrantyId: w.id, perPage: 50 })
+                .pipe(catchError(() => of({ data: [] })))),
+            firstValueFrom(this.apiService
+                .on('apps/commerce/safety-notice')
+                .getMany({ variantId: w.variantId, status: 'published', perPage: 20 })
+                .pipe(catchError(() => of({ data: [] })))),
+        ]);
+        const v = variant;
+        if (v?.data?.productId) {
+            const p = await firstValueFrom(this.apiService
+                .on('apps/commerce/product')
+                .getOne(v.data.productId)
+                .pipe(catchError(() => of(undefined))));
+            this.productName = p?.data?.name ?? v?.data?.sku ?? this.productName;
+            this.productSlug = p?.data?.slug;
+        }
+        this.claims = (claims?.data ?? []).map((c) => ({
+            id: c.id,
+            status: c.status,
+            faultDescription: c.faultDescription,
+            triageOutcome: c.triageOutcome,
+            createdAt: c.createdAt,
+        }));
+        this.notices = (notices?.data ?? []).map((n) => ({
+            id: n.id,
+            severity: n.severity,
+            title: n.title,
+            message: n.message,
+            actionRequired: n.actionRequired,
+        }));
+        this.loading = false;
+    }
+    // The doc endpoint needs the session token (global AuthMiddleware), so a
+    // plain <a href> won't do — fetch the print HTML through ApiService and
+    // hand it to a new window (RET-06 "certificates are downloadable").
+    async downloadCertificate() {
+        if (this.downloadingCert)
+            return;
+        this.downloadingCert = true;
+        try {
+            const res = await firstValueFrom(this.apiService.get(`apps/commerce/document/warranty/${this.warrantyId}/certificate`, { format: 'html' }));
+            const html = typeof res === 'string' ? res : (res?.data ?? res?.html);
+            const win = window.open('', '_blank');
+            if (win && typeof html === 'string') {
+                win.document.open();
+                win.document.write(html);
+                win.document.close();
+            }
+        }
+        finally {
+            this.downloadingCert = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSystemDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountSystemDetailComponent, isStandalone: false, selector: "x-account-system-detail", usesInheritance: true, ngImport: i0, template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 My Systems</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that record.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">\n      @if (productSlug) {\n        <a [routerLink]=\"['/p', productSlug]\">{{ productName }}</a>\n      } @else {\n        {{ productName }}\n      }\n    </h2>\n    <p class=\"x-acct-sub\">\n      @if (isVerified) {\n        <span class=\"x-acct-pill x-acct-pill-ok\">Verified</span>\n      } @else {\n        <span class=\"x-acct-pill\">Self-added</span>\n      }\n      @if (status === 'claimed') {\n        <span class=\"x-acct-pill x-acct-pill-warn\" style=\"margin-left: 6px\">Claim in progress</span>\n      }\n    </p>\n  </header>\n\n  @for (n of notices; track n.id) {\n    <div\n      class=\"x-acct-card\"\n      [class.x-acct-pill-bad]=\"n.severity === 'recall'\"\n      style=\"border-color: var(--color-warn)\"\n    >\n      <strong>\u26A0 {{ n.title }}</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 0\">{{ n.message }}</p>\n      @if (n.actionRequired) {\n        <p style=\"margin: 8px 0 0; font-weight: 700; font-size: 13px\">\n          What to do: {{ n.actionRequired }}\n        </p>\n      }\n    </div>\n  }\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\"><span>Serial</span><span>{{ serial || '\u2014' }}</span></div>\n    <div class=\"x-acct-row\"><span>Registered</span><span>{{ startsAt | date: 'mediumDate' }}</span></div>\n    <div class=\"x-acct-row\">\n      <span>Warranty until</span>\n      <span>\n        {{ expiresAt ? (expiresAt | date: 'mediumDate') : '\u2014' }}\n        @if (monthsLeft !== null) {\n          ({{ monthsLeft > 0 ? monthsLeft + ' months left' : 'expired' }})\n        }\n      </span>\n    </div>\n  </div>\n\n  <div class=\"x-acct-card\" style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n    @if (isVerified) {\n      <button\n        type=\"button\"\n        class=\"x-acct-btn-ghost\"\n        [disabled]=\"downloadingCert\"\n        (click)=\"downloadCertificate()\"\n      >\n        {{ downloadingCert ? 'Opening\u2026' : 'View / print certificate' }}\n      </button>\n    }\n    <a class=\"x-acct-btn\" routerLink=\"claim\">Start a claim</a>\n  </div>\n\n  @if (claims.length) {\n    <div class=\"x-acct-card\">\n      <strong>Claims</strong>\n      @for (c of claims; track c.id) {\n        <div class=\"x-acct-row\">\n          <span>\n            {{ c.faultDescription || 'Claim' }}\n            <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n              {{ c.createdAt | date: 'mediumDate' }}\n              @if (c.triageOutcome) {\n                \u00B7 {{ c.triageOutcome }}\n              }\n            </span>\n          </span>\n          <span class=\"x-acct-pill\">{{ c.status }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSystemDetailComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-system-detail', template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 My Systems</a>\n\n@if (loading) {\n  <div class=\"x-acct-empty\" style=\"margin-top: 16px\">Loading\u2026</div>\n} @else if (!found) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <div class=\"x-acct-empty\">We couldn't find that record.</div>\n  </div>\n} @else {\n  <header style=\"margin: 16px 0 8px\">\n    <h2 class=\"x-acct-h2\">\n      @if (productSlug) {\n        <a [routerLink]=\"['/p', productSlug]\">{{ productName }}</a>\n      } @else {\n        {{ productName }}\n      }\n    </h2>\n    <p class=\"x-acct-sub\">\n      @if (isVerified) {\n        <span class=\"x-acct-pill x-acct-pill-ok\">Verified</span>\n      } @else {\n        <span class=\"x-acct-pill\">Self-added</span>\n      }\n      @if (status === 'claimed') {\n        <span class=\"x-acct-pill x-acct-pill-warn\" style=\"margin-left: 6px\">Claim in progress</span>\n      }\n    </p>\n  </header>\n\n  @for (n of notices; track n.id) {\n    <div\n      class=\"x-acct-card\"\n      [class.x-acct-pill-bad]=\"n.severity === 'recall'\"\n      style=\"border-color: var(--color-warn)\"\n    >\n      <strong>\u26A0 {{ n.title }}</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 0\">{{ n.message }}</p>\n      @if (n.actionRequired) {\n        <p style=\"margin: 8px 0 0; font-weight: 700; font-size: 13px\">\n          What to do: {{ n.actionRequired }}\n        </p>\n      }\n    </div>\n  }\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-row\"><span>Serial</span><span>{{ serial || '\u2014' }}</span></div>\n    <div class=\"x-acct-row\"><span>Registered</span><span>{{ startsAt | date: 'mediumDate' }}</span></div>\n    <div class=\"x-acct-row\">\n      <span>Warranty until</span>\n      <span>\n        {{ expiresAt ? (expiresAt | date: 'mediumDate') : '\u2014' }}\n        @if (monthsLeft !== null) {\n          ({{ monthsLeft > 0 ? monthsLeft + ' months left' : 'expired' }})\n        }\n      </span>\n    </div>\n  </div>\n\n  <div class=\"x-acct-card\" style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n    @if (isVerified) {\n      <button\n        type=\"button\"\n        class=\"x-acct-btn-ghost\"\n        [disabled]=\"downloadingCert\"\n        (click)=\"downloadCertificate()\"\n      >\n        {{ downloadingCert ? 'Opening\u2026' : 'View / print certificate' }}\n      </button>\n    }\n    <a class=\"x-acct-btn\" routerLink=\"claim\">Start a claim</a>\n  </div>\n\n  @if (claims.length) {\n    <div class=\"x-acct-card\">\n      <strong>Claims</strong>\n      @for (c of claims; track c.id) {\n        <div class=\"x-acct-row\">\n          <span>\n            {{ c.faultDescription || 'Claim' }}\n            <span class=\"x-acct-sub\" style=\"display: block; margin-top: 2px\">\n              {{ c.createdAt | date: 'mediumDate' }}\n              @if (c.triageOutcome) {\n                \u00B7 {{ c.triageOutcome }}\n              }\n            </span>\n          </span>\n          <span class=\"x-acct-pill\">{{ c.status }}</span>\n        </div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+// P5.6, ACC-06 / RET-06 — "My Systems": every product the customer owns,
+// its serial, its warranty standing. Auto-populated by delivery (P4.15);
+// a unit bought elsewhere is added here as unverified.
+class AccountSystemsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.customerId = '';
+        this.clientId = '';
+        this.workspaceId = '';
+        this.systems = [];
+        this.adding = false;
+        this.savingExternal = false;
+        this.externalError = '';
+        this.ext = { variantSku: '', serial: '', startsAt: '', months: 12 };
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                this.customerId = customer.id;
+                void this.load();
+            }));
+        };
+    }
+    async load() {
+        const res = await firstValueFrom(this.apiService
+            .on('apps/commerce/warranty')
+            .getMany({ customerId: this.customerId, perPage: 200 })
+            .pipe(catchError(() => of({ data: [] }))));
+        const rows = res?.data ?? [];
+        this.systems = await Promise.all(rows.map(async (w) => {
+            const { name, slug } = await this.resolveProduct(w.variantId);
+            const monthsLeft = w.expiresAt
+                ? Math.max(0, Math.round((Date.parse(w.expiresAt) - Date.now()) / (86_400_000 * 30.44)))
+                : null;
+            return {
+                id: w.id,
+                name,
+                slug,
+                serial: undefined,
+                isVerified: !!w.isVerified,
+                expiresAt: w.expiresAt,
+                monthsLeft,
+                status: w.status,
+            };
+        }));
+        this.loading = false;
+    }
+    async resolveProduct(variantId) {
+        try {
+            const v = await firstValueFrom(this.apiService.on('apps/commerce/product-variant').getOne(variantId));
+            const productId = v?.data?.productId;
+            if (productId) {
+                const p = await firstValueFrom(this.apiService.on('apps/commerce/product').getOne(productId));
+                return { name: p?.data?.name ?? v?.data?.sku ?? 'Registered unit', slug: p?.data?.slug };
+            }
+            return { name: v?.data?.sku ?? 'Registered unit' };
+        }
+        catch {
+            return { name: 'Registered unit' };
+        }
+    }
+    async addExternal() {
+        if (this.savingExternal)
+            return;
+        const sku = this.ext.variantSku.trim();
+        if (!sku) {
+            this.externalError = 'Enter the product SKU or model shown on the label.';
+            return;
+        }
+        this.savingExternal = true;
+        this.externalError = '';
+        try {
+            // Resolve the SKU to a variant id (the label carries the SKU/model).
+            const found = await firstValueFrom(this.apiService
+                .on('apps/commerce/product-variant')
+                .getMany({ sku, perPage: 1 })
+                .pipe(catchError(() => of({ data: [] }))));
+            const variantId = (found?.data ?? [])[0]?.id;
+            if (!variantId) {
+                this.externalError = "We couldn't match that SKU to a product we stock.";
+                return;
+            }
+            const res = await firstValueFrom(this.apiService.post('apps/commerce/warranty/external', {
+                customerId: this.customerId,
+                variantId,
+                serial: this.ext.serial || undefined,
+                startsAt: this.ext.startsAt || undefined,
+                months: this.ext.months || undefined,
+            }));
+            if (res?.status === 'error') {
+                this.externalError = res?.message ?? 'Could not add that unit.';
+                return;
+            }
+            this.adding = false;
+            this.ext = { variantSku: '', serial: '', startsAt: '', months: 12 };
+            notify('Added to My Systems', undefined, 'success');
+            await this.load();
+        }
+        catch (err) {
+            this.externalError = err?.error?.message ?? 'Could not add that unit.';
+        }
+        finally {
+            this.savingExternal = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSystemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountSystemsComponent, isStandalone: false, selector: "x-account-systems", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">My Systems</h2>\n<p class=\"x-acct-sub\">\n  Every product you've bought from us, with its serial and warranty. Units bought\n  elsewhere can be added for context.\n</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  @if (adding) {\n    <div class=\"x-acct-card\">\n      <strong>Add a unit bought elsewhere</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 14px\">\n        Unverified \u2014 it won't have a Tilmart certificate, but the compatibility\n        checker and support can use it.\n      </p>\n      <div class=\"x-acct-field\">\n        <label>Product SKU / model (on the label)</label>\n        <input [(ngModel)]=\"ext.variantSku\" />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Serial number (optional)</label>\n        <input [(ngModel)]=\"ext.serial\" />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Purchase date (optional)</label>\n        <input type=\"date\" [(ngModel)]=\"ext.startsAt\" />\n      </div>\n      <div class=\"x-acct-field\" style=\"max-width: 160px\">\n        <label>Warranty months</label>\n        <input type=\"number\" [(ngModel)]=\"ext.months\" />\n      </div>\n      @if (externalError) {\n        <div class=\"x-acct-err\">{{ externalError }}</div>\n      }\n      <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingExternal\" (click)=\"addExternal()\">\n        {{ savingExternal ? 'Adding\u2026' : 'Add unit' }}\n      </button>\n      <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"adding = false\" style=\"margin-left: 8px\">\n        Cancel\n      </button>\n    </div>\n  } @else {\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"adding = true\">Add external unit</button>\n  }\n\n  @for (sys of systems; track sys.id) {\n    <a class=\"x-acct-card\" [routerLink]=\"[sys.id]\" style=\"display: block; text-decoration: none\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        <strong style=\"color: var(--color-text)\">{{ sys.name }}</strong>\n        @if (sys.isVerified) {\n          <span class=\"x-acct-pill x-acct-pill-ok\">Verified</span>\n        } @else {\n          <span class=\"x-acct-pill\">Self-added</span>\n        }\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0\">\n        @if (sys.monthsLeft !== null) {\n          @if (sys.monthsLeft > 0) {\n            {{ sys.monthsLeft }} months of warranty left\n          } @else {\n            Warranty expired\n          }\n        } @else {\n          Warranty length not set\n        }\n        @if (sys.status === 'claimed') {\n          \u00B7 claim in progress\n        }\n      </p>\n    </a>\n  } @empty {\n    @if (!adding) {\n      <div class=\"x-acct-empty\">\n        Nothing here yet \u2014 a warranty is registered automatically when a\n        serialised item is delivered.\n      </div>\n    }\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountSystemsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-systems', template: "<h2 class=\"x-acct-h2\">My Systems</h2>\n<p class=\"x-acct-sub\">\n  Every product you've bought from us, with its serial and warranty. Units bought\n  elsewhere can be added for context.\n</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else {\n  @if (adding) {\n    <div class=\"x-acct-card\">\n      <strong>Add a unit bought elsewhere</strong>\n      <p class=\"x-acct-sub\" style=\"margin: 6px 0 14px\">\n        Unverified \u2014 it won't have a Tilmart certificate, but the compatibility\n        checker and support can use it.\n      </p>\n      <div class=\"x-acct-field\">\n        <label>Product SKU / model (on the label)</label>\n        <input [(ngModel)]=\"ext.variantSku\" />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Serial number (optional)</label>\n        <input [(ngModel)]=\"ext.serial\" />\n      </div>\n      <div class=\"x-acct-field\">\n        <label>Purchase date (optional)</label>\n        <input type=\"date\" [(ngModel)]=\"ext.startsAt\" />\n      </div>\n      <div class=\"x-acct-field\" style=\"max-width: 160px\">\n        <label>Warranty months</label>\n        <input type=\"number\" [(ngModel)]=\"ext.months\" />\n      </div>\n      @if (externalError) {\n        <div class=\"x-acct-err\">{{ externalError }}</div>\n      }\n      <button type=\"button\" class=\"x-acct-btn\" [disabled]=\"savingExternal\" (click)=\"addExternal()\">\n        {{ savingExternal ? 'Adding\u2026' : 'Add unit' }}\n      </button>\n      <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"adding = false\" style=\"margin-left: 8px\">\n        Cancel\n      </button>\n    </div>\n  } @else {\n    <button type=\"button\" class=\"x-acct-btn\" (click)=\"adding = true\">Add external unit</button>\n  }\n\n  @for (sys of systems; track sys.id) {\n    <a class=\"x-acct-card\" [routerLink]=\"[sys.id]\" style=\"display: block; text-decoration: none\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        <strong style=\"color: var(--color-text)\">{{ sys.name }}</strong>\n        @if (sys.isVerified) {\n          <span class=\"x-acct-pill x-acct-pill-ok\">Verified</span>\n        } @else {\n          <span class=\"x-acct-pill\">Self-added</span>\n        }\n      </div>\n      <p class=\"x-acct-sub\" style=\"margin: 0\">\n        @if (sys.monthsLeft !== null) {\n          @if (sys.monthsLeft > 0) {\n            {{ sys.monthsLeft }} months of warranty left\n          } @else {\n            Warranty expired\n          }\n        } @else {\n          Warranty length not set\n        }\n        @if (sys.status === 'claimed') {\n          \u00B7 claim in progress\n        }\n      </p>\n    </a>\n  } @empty {\n    @if (!adding) {\n      <div class=\"x-acct-empty\">\n        Nothing here yet \u2014 a warranty is registered automatically when a\n        serialised item is delivered.\n      </div>\n    }\n  }\n}\n" }]
+        }] });
+
+const SYMPTOM_OPTIONS = [
+    'Not turning on',
+    'Shuts down under load',
+    'Overheating',
+    'Error code / warning light',
+    'Unusual noise',
+    'Not charging',
+    'Reduced runtime / output',
+    'Physical damage',
+];
+// P5.6, RET-07 — the warranty claim form. Fault description + a symptoms
+// checklist + whether a Tilmart installer fitted it. Photo/video upload
+// is a follow-up (needs the blobs pipeline) — noted, not blocking.
+class AccountWarrantyClaimComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.route = inject(ActivatedRoute);
+        this.store = inject(AccountStoreService);
+        this.symptomOptions = SYMPTOM_OPTIONS;
+        this.warrantyId = '';
+        this.customerId = '';
+        this.faultDescription = '';
+        this.symptoms = {};
+        this.installedByTilmart = false;
+        this.submitting = false;
+        this.error = '';
+        this.done = false;
+        this.init = () => {
+            this.warrantyId = this.route.snapshot.paramMap.get('id') ?? '';
+            this.store.customer().subscribe((c) => (this.customerId = c?.id ?? ''));
+        };
+    }
+    get canSubmit() {
+        return !!this.faultDescription.trim();
+    }
+    async submit() {
+        if (this.submitting || !this.canSubmit)
+            return;
+        this.submitting = true;
+        this.error = '';
+        try {
+            const res = await firstValueFrom(this.apiService.post(`apps/commerce/warranty/${this.warrantyId}/claim`, {
+                customerId: this.customerId || undefined,
+                faultDescription: this.faultDescription.trim(),
+                symptoms: Object.keys(this.symptoms).filter((k) => this.symptoms[k]),
+                installedByTilmart: this.installedByTilmart,
+            }));
+            if (res?.status === 'error') {
+                this.error = res?.message ?? 'Could not submit your claim.';
+                return;
+            }
+            this.done = true;
+            notify('Claim submitted', undefined, 'success');
+        }
+        catch (err) {
+            this.error = err?.error?.message ?? 'Could not submit your claim.';
+        }
+        finally {
+            this.submitting = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountWarrantyClaimComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountWarrantyClaimComponent, isStandalone: false, selector: "x-account-warranty-claim", usesInheritance: true, ngImport: i0, template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 Back to system</a>\n\n@if (done) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <h2 class=\"x-acct-h2\">Claim submitted</h2>\n    <p class=\"x-acct-sub\">\n      We'll review the details and get back to you with next steps. You can see\n      the status on the system's page.\n    </p>\n    <a class=\"x-acct-btn\" routerLink=\"../\">Back to system</a>\n  </div>\n} @else {\n  <h2 class=\"x-acct-h2\" style=\"margin-top: 16px\">Start a warranty claim</h2>\n  <p class=\"x-acct-sub\">Tell us what's wrong and we'll take it from there.</p>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-field\">\n      <label>What's the problem?</label>\n      <input\n        [(ngModel)]=\"faultDescription\"\n        placeholder=\"Describe the fault in your own words\"\n      />\n    </div>\n\n    <div style=\"margin: 8px 0 16px\">\n      <div style=\"font-weight: 700; font-size: 13px; margin-bottom: 8px\">Symptoms</div>\n      @for (s of symptomOptions; track s) {\n        <label class=\"x-acct-checkline\">\n          <input type=\"checkbox\" [(ngModel)]=\"symptoms[s]\" />\n          {{ s }}\n        </label>\n      }\n    </div>\n\n    <label class=\"x-acct-checkline\">\n      <input type=\"checkbox\" [(ngModel)]=\"installedByTilmart\" />\n      A Tilmart installer fitted this unit\n    </label>\n\n    @if (error) {\n      <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ error }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      style=\"margin-top: 14px\"\n      [disabled]=\"!canSubmit || submitting\"\n      (click)=\"submit()\"\n    >\n      {{ submitting ? 'Submitting\u2026' : 'Submit claim' }}\n    </button>\n    <p class=\"x-acct-sub\" style=\"margin-top: 12px\">\n      Photos and video help us diagnose faster \u2014 you'll be able to add them once\n      the claim is open.\n    </p>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountWarrantyClaimComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-warranty-claim', template: "<a routerLink=\"../\" class=\"x-acct-btn-ghost\">\u2039 Back to system</a>\n\n@if (done) {\n  <div class=\"x-acct-card\" style=\"margin-top: 16px\">\n    <h2 class=\"x-acct-h2\">Claim submitted</h2>\n    <p class=\"x-acct-sub\">\n      We'll review the details and get back to you with next steps. You can see\n      the status on the system's page.\n    </p>\n    <a class=\"x-acct-btn\" routerLink=\"../\">Back to system</a>\n  </div>\n} @else {\n  <h2 class=\"x-acct-h2\" style=\"margin-top: 16px\">Start a warranty claim</h2>\n  <p class=\"x-acct-sub\">Tell us what's wrong and we'll take it from there.</p>\n\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-field\">\n      <label>What's the problem?</label>\n      <input\n        [(ngModel)]=\"faultDescription\"\n        placeholder=\"Describe the fault in your own words\"\n      />\n    </div>\n\n    <div style=\"margin: 8px 0 16px\">\n      <div style=\"font-weight: 700; font-size: 13px; margin-bottom: 8px\">Symptoms</div>\n      @for (s of symptomOptions; track s) {\n        <label class=\"x-acct-checkline\">\n          <input type=\"checkbox\" [(ngModel)]=\"symptoms[s]\" />\n          {{ s }}\n        </label>\n      }\n    </div>\n\n    <label class=\"x-acct-checkline\">\n      <input type=\"checkbox\" [(ngModel)]=\"installedByTilmart\" />\n      A Tilmart installer fitted this unit\n    </label>\n\n    @if (error) {\n      <div class=\"x-acct-err\" style=\"margin-top: 12px\">{{ error }}</div>\n    }\n    <button\n      type=\"button\"\n      class=\"x-acct-btn\"\n      style=\"margin-top: 14px\"\n      [disabled]=\"!canSubmit || submitting\"\n      (click)=\"submit()\"\n    >\n      {{ submitting ? 'Submitting\u2026' : 'Submit claim' }}\n    </button>\n    <p class=\"x-acct-sub\" style=\"margin-top: 12px\">\n      Photos and video help us diagnose faster \u2014 you'll be able to add them once\n      the claim is open.\n    </p>\n  </div>\n}\n" }]
+        }] });
+
+// P5.3, CART-06 — saved lists. View / rename / delete a list, toggle
+// public sharing, remove an item. Adding items happens on the product
+// pages (a wishlist button there, P2 PDP work).
+class AccountWishlistsComponent extends BaseDirective {
+    constructor() {
+        super(...arguments);
+        this.store = inject(AccountStoreService);
+        this.loading = true;
+        this.customerId = '';
+        this.wishlists = [];
+        this.init = () => {
+            this.store
+                .customer()
+                .pipe(takeUntil(this.$))
+                .subscribe(using((customer) => {
+                if (!customer) {
+                    this.loading = false;
+                    return;
+                }
+                this.customerId = customer.id;
+                void this.load();
+            }));
+        };
+    }
+    async load() {
+        const listsRes = await firstValueFrom(this.apiService
+            .on('apps/commerce/wishlist')
+            .getMany({ customerId: this.customerId, perPage: 50 })
+            .pipe(catchError(() => of({ data: [] }))));
+        const lists = listsRes?.data ?? [];
+        const withItems = await Promise.all(lists.map(async (list) => {
+            const itemsRes = await firstValueFrom(this.apiService
+                .on('apps/commerce/wishlist-item')
+                .getMany({ wishlistId: list.id, perPage: 200 })
+                .pipe(catchError(() => of({ data: [] }))));
+            const items = await Promise.all((itemsRes?.data ?? []).map((it) => this.resolveItem(it)));
+            return {
+                id: list.id,
+                name: list.name,
+                isPublic: !!list.isPublic,
+                shareToken: list.shareToken,
+                items,
+            };
+        }));
+        this.wishlists = withItems;
+        this.loading = false;
+    }
+    async resolveItem(it) {
+        let name = 'Saved item';
+        let slug;
+        try {
+            const v = await firstValueFrom(this.apiService.on('apps/commerce/product-variant').getOne(it.variantId));
+            const productId = v?.data?.productId;
+            if (productId) {
+                const p = await firstValueFrom(this.apiService.on('apps/commerce/product').getOne(productId));
+                name = p?.data?.name ?? v?.data?.sku ?? name;
+                slug = p?.data?.slug;
+            }
+        }
+        catch {
+            // leave the fallback name
+        }
+        return { id: it.id, variantId: it.variantId, name, slug };
+    }
+    startRename(list) {
+        list.renaming = true;
+        list.draftName = list.name;
+    }
+    async saveName(list) {
+        const name = (list.draftName ?? '').trim();
+        if (!name)
+            return;
+        try {
+            await firstValueFrom(this.apiService.on('apps/commerce/wishlist').update(list.id, { name }));
+            list.name = name;
+            list.renaming = false;
+        }
+        catch {
+            notify('Could not rename that list.', undefined, 'error');
+        }
+    }
+    async togglePublic(list) {
+        try {
+            await firstValueFrom(this.apiService
+                .on('apps/commerce/wishlist')
+                .update(list.id, { isPublic: !list.isPublic }));
+            await this.load();
+        }
+        catch {
+            notify('Could not update sharing.', undefined, 'error');
+        }
+    }
+    async removeList(list) {
+        if (!confirm(`Delete "${list.name}"?`))
+            return;
+        try {
+            await firstValueFrom(this.apiService.on('apps/commerce/wishlist').remove(list.id));
+            await this.load();
+        }
+        catch {
+            notify('Could not delete that list.', undefined, 'error');
+        }
+    }
+    async removeItem(list, item) {
+        try {
+            await firstValueFrom(this.apiService.on('apps/commerce/wishlist-item').remove(item.id));
+            list.items = list.items.filter((x) => x.id !== item.id);
+        }
+        catch {
+            notify('Could not remove that item.', undefined, 'error');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountWishlistsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: AccountWishlistsComponent, isStandalone: false, selector: "x-account-wishlists", usesInheritance: true, ngImport: i0, template: "<h2 class=\"x-acct-h2\">Wishlists</h2>\n<p class=\"x-acct-sub\">Add items from any product page. Share a list with an installer or a colleague.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!wishlists.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No saved lists yet \u2014 tap the heart on a product to start one.\n    </div>\n  </div>\n} @else {\n  @for (list of wishlists; track list.id) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        @if (list.renaming) {\n          <input class=\"x-acct-field\" style=\"margin: 0; max-width: 240px\" [(ngModel)]=\"list.draftName\" />\n          <span>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"saveName(list)\">Save</button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"list.renaming = false\" style=\"margin-left: 6px\">\n              Cancel\n            </button>\n          </span>\n        } @else {\n          <strong>\n            {{ list.name }}\n            @if (list.isPublic) {\n              <span class=\"x-acct-pill x-acct-pill-ok\" style=\"margin-left: 6px\">Shared</span>\n            }\n          </strong>\n          <span>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"startRename(list)\">Rename</button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"togglePublic(list)\" style=\"margin-left: 6px\">\n              {{ list.isPublic ? 'Make private' : 'Share' }}\n            </button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"removeList(list)\" style=\"margin-left: 6px\">\n              Delete\n            </button>\n          </span>\n        }\n      </div>\n\n      @for (item of list.items; track item.id) {\n        <div class=\"x-acct-row\">\n          @if (item.slug) {\n            <a [routerLink]=\"['/p', item.slug]\">{{ item.name }}</a>\n          } @else {\n            <span>{{ item.name }}</span>\n          }\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"removeItem(list, item)\">Remove</button>\n        </div>\n      } @empty {\n        <div class=\"x-acct-empty\">This list is empty.</div>\n      }\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountWishlistsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'x-account-wishlists', template: "<h2 class=\"x-acct-h2\">Wishlists</h2>\n<p class=\"x-acct-sub\">Add items from any product page. Share a list with an installer or a colleague.</p>\n\n@if (loading) {\n  <div class=\"x-acct-empty\">Loading\u2026</div>\n} @else if (!wishlists.length) {\n  <div class=\"x-acct-card\">\n    <div class=\"x-acct-empty\">\n      No saved lists yet \u2014 tap the heart on a product to start one.\n    </div>\n  </div>\n} @else {\n  @for (list of wishlists; track list.id) {\n    <div class=\"x-acct-card\">\n      <div class=\"x-acct-row\" style=\"border-bottom: 0; padding-top: 0\">\n        @if (list.renaming) {\n          <input class=\"x-acct-field\" style=\"margin: 0; max-width: 240px\" [(ngModel)]=\"list.draftName\" />\n          <span>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"saveName(list)\">Save</button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"list.renaming = false\" style=\"margin-left: 6px\">\n              Cancel\n            </button>\n          </span>\n        } @else {\n          <strong>\n            {{ list.name }}\n            @if (list.isPublic) {\n              <span class=\"x-acct-pill x-acct-pill-ok\" style=\"margin-left: 6px\">Shared</span>\n            }\n          </strong>\n          <span>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"startRename(list)\">Rename</button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"togglePublic(list)\" style=\"margin-left: 6px\">\n              {{ list.isPublic ? 'Make private' : 'Share' }}\n            </button>\n            <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"removeList(list)\" style=\"margin-left: 6px\">\n              Delete\n            </button>\n          </span>\n        }\n      </div>\n\n      @for (item of list.items; track item.id) {\n        <div class=\"x-acct-row\">\n          @if (item.slug) {\n            <a [routerLink]=\"['/p', item.slug]\">{{ item.name }}</a>\n          } @else {\n            <span>{{ item.name }}</span>\n          }\n          <button type=\"button\" class=\"x-acct-btn-ghost\" (click)=\"removeItem(list, item)\">Remove</button>\n        </div>\n      } @empty {\n        <div class=\"x-acct-empty\">This list is empty.</div>\n      }\n    </div>\n  }\n}\n" }]
+        }] });
+
+class AccountModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: AccountModule, declarations: [AccountComponent,
+            AccountDashboardComponent,
+            AccountOrdersComponent,
+            AccountOrderDetailComponent,
+            AccountAddressesComponent,
+            AccountPaymentsComponent,
+            AccountWishlistsComponent,
+            AccountSettingsComponent,
+            AccountSystemsComponent,
+            AccountSystemDetailComponent,
+            AccountWarrantyClaimComponent,
+            AccountReturnsComponent,
+            AccountReturnDetailComponent,
+            AccountReturnRequestComponent,
+            AccountPrivacyComponent], imports: [SharedModule, i1.RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountModule, providers: [AccountStoreService], imports: [SharedModule,
+            RouterModule.forChild([
+                {
+                    path: '',
+                    component: AccountComponent,
+                    children: [
+                        { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
+                        { path: 'dashboard', component: AccountDashboardComponent },
+                        { path: 'orders', component: AccountOrdersComponent },
+                        { path: 'orders/:id', component: AccountOrderDetailComponent },
+                        { path: 'orders/:id/return', component: AccountReturnRequestComponent },
+                        { path: 'returns', component: AccountReturnsComponent },
+                        { path: 'returns/:id', component: AccountReturnDetailComponent },
+                        { path: 'systems', component: AccountSystemsComponent },
+                        { path: 'systems/:id', component: AccountSystemDetailComponent },
+                        { path: 'systems/:id/claim', component: AccountWarrantyClaimComponent },
+                        { path: 'addresses', component: AccountAddressesComponent },
+                        { path: 'payments', component: AccountPaymentsComponent },
+                        { path: 'wishlists', component: AccountWishlistsComponent },
+                        { path: 'settings', component: AccountSettingsComponent },
+                        { path: 'privacy', component: AccountPrivacyComponent },
+                    ],
+                },
+            ])] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: AccountModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AccountComponent,
+                        AccountDashboardComponent,
+                        AccountOrdersComponent,
+                        AccountOrderDetailComponent,
+                        AccountAddressesComponent,
+                        AccountPaymentsComponent,
+                        AccountWishlistsComponent,
+                        AccountSettingsComponent,
+                        AccountSystemsComponent,
+                        AccountSystemDetailComponent,
+                        AccountWarrantyClaimComponent,
+                        AccountReturnsComponent,
+                        AccountReturnDetailComponent,
+                        AccountReturnRequestComponent,
+                        AccountPrivacyComponent,
+                    ],
+                    providers: [AccountStoreService],
+                    imports: [
+                        SharedModule,
+                        RouterModule.forChild([
+                            {
+                                path: '',
+                                component: AccountComponent,
+                                children: [
+                                    { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
+                                    { path: 'dashboard', component: AccountDashboardComponent },
+                                    { path: 'orders', component: AccountOrdersComponent },
+                                    { path: 'orders/:id', component: AccountOrderDetailComponent },
+                                    { path: 'orders/:id/return', component: AccountReturnRequestComponent },
+                                    { path: 'returns', component: AccountReturnsComponent },
+                                    { path: 'returns/:id', component: AccountReturnDetailComponent },
+                                    { path: 'systems', component: AccountSystemsComponent },
+                                    { path: 'systems/:id', component: AccountSystemDetailComponent },
+                                    { path: 'systems/:id/claim', component: AccountWarrantyClaimComponent },
+                                    { path: 'addresses', component: AccountAddressesComponent },
+                                    { path: 'payments', component: AccountPaymentsComponent },
+                                    { path: 'wishlists', component: AccountWishlistsComponent },
+                                    { path: 'settings', component: AccountSettingsComponent },
+                                    { path: 'privacy', component: AccountPrivacyComponent },
+                                ],
+                            },
+                        ]),
+                    ],
+                }]
+        }] });
+
+export { AccountModule };
+//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-buyer-account.module-DkScEdS0.mjs.map