@isaiahiroko/tilmart-ngx-apps-buyer 0.2.2 → 0.2.4

package/fesm2022/{isaiahiroko-tilmart-ngx-apps-buyer-account.module-DkScEdS0.mjs → isaiahiroko-tilmart-ngx-apps-buyer-account.module-BTRypX8P.mjs}

@@ -4,10 +4,9 @@ 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 { StaticListService, CartStoreService } from './isaiahiroko-tilmart-ngx-apps-buyer.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
@@ -129,7 +128,10 @@ class AccountAddressesComponent extends BaseDirective {
     constructor() {
         super(...arguments);
         this.store = inject(AccountStoreService);
-        this.states = NIGERIAN_STATES;
+        this.staticList = inject(StaticListService);
+        this.states = [];
+        this.lgas = [];
+        this.lgasLoading = false;
         this.loading = true;
         this.customerId = '';
         this.addresses = [];
@@ -138,6 +140,7 @@ class AccountAddressesComponent extends BaseDirective {
         this.form = blankForm();
         this.formError = '';
         this.init = () => {
+            void this.staticList.getStates().then((states) => (this.states = states));
             this.store
                 .customer()
                 .pipe(takeUntil(this.$))
@@ -151,6 +154,23 @@ class AccountAddressesComponent extends BaseDirective {
             }));
         };
     }
+    async onFormStateChange() {
+        this.form.lga = '';
+        await this.loadLgas(this.form.state);
+    }
+    async loadLgas(state) {
+        if (!state) {
+            this.lgas = [];
+            return;
+        }
+        this.lgasLoading = true;
+        try {
+            this.lgas = await this.staticList.getLgas(state).catch(() => []);
+        }
+        finally {
+            this.lgasLoading = false;
+        }
+    }
     async load() {
         const res = await firstValueFrom(this.apiService
             .on('apps/commerce/address')
@@ -175,11 +195,13 @@ class AccountAddressesComponent extends BaseDirective {
         this.form = blankForm();
         this.formError = '';
         this.editing = true;
+        this.lgas = [];
     }
     startEdit(a) {
         this.form = { ...a };
         this.formError = '';
         this.editing = true;
+        void this.loadLgas(this.form.state);
     }
     cancel() {
         this.editing = false;
@@ -252,11 +274,11 @@ class AccountAddressesComponent extends BaseDirective {
         }
     }
     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"] }] }); }
+    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\" data-testid=\"address-state\" [(ngModel)]=\"form.state\" (ngModelChange)=\"onFormStateChange()\">\n            <option value=\"\">Select a state</option>\n            @for (s of states; track s.value) {\n              <option [value]=\"s.value\">{{ s.label }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"x-acct-field\">\n          <label>LGA / area</label>\n          <select aria-label=\"LGA\" data-testid=\"address-lga\" [(ngModel)]=\"form.lga\" [disabled]=\"!form.state || lgasLoading\">\n            <option value=\"\">{{ form.state ? 'Select an LGA' : 'Select a state first' }}</option>\n            @for (l of lgas; track l.value) {\n              <option [value]=\"l.value\">{{ l.label }}</option>\n            }\n          </select>\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" }]
+            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\" data-testid=\"address-state\" [(ngModel)]=\"form.state\" (ngModelChange)=\"onFormStateChange()\">\n            <option value=\"\">Select a state</option>\n            @for (s of states; track s.value) {\n              <option [value]=\"s.value\">{{ s.label }}</option>\n            }\n          </select>\n        </div>\n        <div class=\"x-acct-field\">\n          <label>LGA / area</label>\n          <select aria-label=\"LGA\" data-testid=\"address-lga\" [(ngModel)]=\"form.lga\" [disabled]=\"!form.state || lgasLoading\">\n            <option value=\"\">{{ form.state ? 'Select an LGA' : 'Select a state first' }}</option>\n            @for (l of lgas; track l.value) {\n              <option [value]=\"l.value\">{{ l.label }}</option>\n            }\n          </select>\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
@@ -1750,4 +1772,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }] });
 
 export { AccountModule };
-//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-buyer-account.module-DkScEdS0.mjs.map
+//# sourceMappingURL=isaiahiroko-tilmart-ngx-apps-buyer-account.module-BTRypX8P.mjs.map