@africanies/angular-web-sdk 0.1.10 → 0.1.12

package/libs/africanies-ui/src/lib/forms/phone-input/phone-input.utils.ts

@@ -0,0 +1,275 @@
+import { countryFlagUrl } from '@africanies/africanies-core';
+
+import {
+  PHONE_DIAL_CODES,
+  PHONE_MAX_NATIONAL_DIGITS,
+  PHONE_MIN_NATIONAL_DIGITS,
+} from './phone-codes';
+import type { PhoneCountryOption, PhoneNumberValue } from './phone-input.types';
+
+const regionNames =
+  typeof Intl !== 'undefined' && 'DisplayNames' in Intl
+    ? new Intl.DisplayNames(['en'], { type: 'region' })
+    : null;
+
+/** Digits only from a phone draft. */
+export function phoneDigitsOnly(value: string | null | undefined): string {
+  return (value ?? '').replace(/\D/g, '');
+}
+
+/** Normalize ISO2 to uppercase two letters, or `''`. */
+export function normalizePhoneIso2(iso2: string | null | undefined): string {
+  const code = (iso2 ?? '').trim().toUpperCase();
+  return /^[A-Z]{2}$/.test(code) ? code : '';
+}
+
+/** Dial code for an ISO2 (with `+`), or `''` when unknown. */
+export function dialCodeForIso2(iso2: string | null | undefined): string {
+  const code = normalizePhoneIso2(iso2);
+  return code ? (PHONE_DIAL_CODES[code] ?? '') : '';
+}
+
+/** English country name from ISO2 (falls back to the code). */
+export function phoneCountryName(iso2: string): string {
+  const code = normalizePhoneIso2(iso2);
+  if (!code) {
+    return '';
+  }
+  try {
+    return regionNames?.of(code) ?? code;
+  } catch {
+    return code;
+  }
+}
+
+/** All dial-code countries for the picker (sorted by name). */
+export function phoneCountryOptions(): PhoneCountryOption[] {
+  return Object.keys(PHONE_DIAL_CODES)
+    .map((iso2) => {
+      const dialCode = PHONE_DIAL_CODES[iso2]!;
+      return {
+        iso2,
+        dialCode,
+        name: phoneCountryName(iso2),
+        flagUrl: countryFlagUrl(iso2, { width: 40 }),
+      };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Filter dial-code countries by name, ISO2, or dial digits.
+ * Digit matching is skipped when the query has no digits — otherwise
+ * `''.includes('')` would keep every country for letter-only searches.
+ */
+export function filterPhoneCountries(
+  countries: readonly PhoneCountryOption[],
+  query: string,
+): PhoneCountryOption[] {
+  const q = query.trim().toLowerCase();
+  if (!q) {
+    return [...countries];
+  }
+  const qDigits = phoneDigitsOnly(q);
+  return countries.filter((row) => {
+    if (
+      row.name.toLowerCase().includes(q) ||
+      row.iso2.toLowerCase().includes(q) ||
+      row.dialCode.toLowerCase().includes(q)
+    ) {
+      return true;
+    }
+    return qDigits.length > 0
+      ? phoneDigitsOnly(row.dialCode).includes(qDigits)
+      : false;
+  });
+}
+
+/**
+ * Match an E.164 / international string to the longest known dial code.
+ * Prefers `hintIso2` when several countries share the same dial code (e.g. `+1`).
+ */
+export function matchDialCode(
+  e164OrInternational: string,
+  hintIso2?: string | null,
+): { iso2: string; dialCode: string; nationalDigits: string } | null {
+  const digits = phoneDigitsOnly(e164OrInternational);
+  if (!digits) {
+    return null;
+  }
+
+  const hint = normalizePhoneIso2(hintIso2);
+  if (hint) {
+    const hintDial = PHONE_DIAL_CODES[hint];
+    if (hintDial) {
+      const hintDigits = phoneDigitsOnly(hintDial);
+      if (digits.startsWith(hintDigits)) {
+        return {
+          iso2: hint,
+          dialCode: hintDial,
+          nationalDigits: digits.slice(hintDigits.length),
+        };
+      }
+    }
+  }
+
+  let best: { iso2: string; dialCode: string; nationalDigits: string } | null =
+    null;
+  for (const [iso2, dialCode] of Object.entries(PHONE_DIAL_CODES)) {
+    const dialDigits = phoneDigitsOnly(dialCode);
+    if (!digits.startsWith(dialDigits)) {
+      continue;
+    }
+    const nationalDigits = digits.slice(dialDigits.length);
+    if (
+      !best ||
+      dialDigits.length > phoneDigitsOnly(best.dialCode).length
+    ) {
+      best = { iso2, dialCode, nationalDigits };
+    }
+  }
+  return best;
+}
+
+/**
+ * Strip a leading dial code from a stored phone (classic `removeDialCode`).
+ * Returns national digits for prefilling the input.
+ */
+export function removeDialCode(
+  phone: string | null | undefined,
+  hintIso2?: string | null,
+): string {
+  const raw = (phone ?? '').trim();
+  if (!raw) {
+    return '';
+  }
+  const matched = matchDialCode(raw, hintIso2);
+  if (matched) {
+    return matched.nationalDigits;
+  }
+  return phoneDigitsOnly(raw);
+}
+
+/** Group national digits for readable display (… + last 4). */
+export function formatNationalDigits(digits: string): string {
+  const clean = phoneDigitsOnly(digits).slice(0, PHONE_MAX_NATIONAL_DIGITS);
+  if (!clean) {
+    return '';
+  }
+  if (clean.length <= 4) {
+    return clean;
+  }
+  const end = clean.slice(-4);
+  const head = clean.slice(0, -4).replace(/(\d{3})(?=\d)/g, '$1 ').trim();
+  return `${head} ${end}`.trim();
+}
+
+/**
+ * Build the structured value (or `null` when empty).
+ */
+export function buildPhoneNumberValue(
+  iso2: string,
+  nationalDraft: string,
+): PhoneNumberValue | null {
+  const countryCode = normalizePhoneIso2(iso2);
+  const dialCode = dialCodeForIso2(countryCode);
+  if (!countryCode || !dialCode) {
+    return null;
+  }
+
+  const nationalDigits = phoneDigitsOnly(nationalDraft).slice(
+    0,
+    PHONE_MAX_NATIONAL_DIGITS,
+  );
+  if (!nationalDigits) {
+    return null;
+  }
+
+  const number = formatNationalDigits(nationalDigits);
+  const e164Number = `${dialCode}${nationalDigits}`;
+  const internationalNumber = `${dialCode} ${number}`.trim();
+  // Trunk-prefix `0` for national display when digits omit it (classic ngx shape).
+  const nationalNumber = nationalDigits.startsWith('0')
+    ? number
+    : `0${number}`;
+
+  return {
+    number,
+    internationalNumber,
+    nationalNumber,
+    e164Number,
+    countryCode,
+    dialCode,
+  };
+}
+
+/**
+ * Canonical outbound phone string — prefer E.164 from a structured value.
+ */
+export function phoneToE164(
+  phone: PhoneNumberValue | string | null | undefined,
+): string {
+  if (phone == null) {
+    return '';
+  }
+  if (typeof phone === 'string') {
+    const digits = phoneDigitsOnly(phone);
+    if (!digits) {
+      return '';
+    }
+    return phone.trim().startsWith('+') ? `+${digits}` : phone.trim();
+  }
+  return phone.e164Number?.trim() || '';
+}
+
+/**
+ * Soft validity: has dial code + enough national digits (not full libphonenumber).
+ */
+export function isPhoneNumberComplete(
+  phone: PhoneNumberValue | null | undefined,
+): boolean {
+  if (!phone?.e164Number) {
+    return false;
+  }
+  const national = phoneDigitsOnly(phone.number);
+  return (
+    national.length >= PHONE_MIN_NATIONAL_DIGITS &&
+    national.length <= PHONE_MAX_NATIONAL_DIGITS
+  );
+}
+
+/**
+ * Split an incoming control value (E.164 string or structured) into UI state.
+ */
+export function parsePhoneControlValue(
+  value: string | PhoneNumberValue | null | undefined,
+  fallbackIso2: string,
+): { iso2: string; nationalDigits: string } {
+  const fallback = normalizePhoneIso2(fallbackIso2) || 'US';
+
+  if (value == null || value === '') {
+    return { iso2: fallback, nationalDigits: '' };
+  }
+
+  if (typeof value === 'object') {
+    const iso2 = normalizePhoneIso2(value.countryCode) || fallback;
+    const national =
+      phoneDigitsOnly(value.number) ||
+      phoneDigitsOnly(value.nationalNumber) ||
+      removeDialCode(value.e164Number, iso2);
+    return { iso2, nationalDigits: national };
+  }
+
+  const matched = matchDialCode(value, fallback);
+  if (matched) {
+    return {
+      iso2: matched.iso2,
+      nationalDigits: matched.nationalDigits,
+    };
+  }
+
+  return {
+    iso2: fallback,
+    nationalDigits: phoneDigitsOnly(value),
+  };
+}

package/libs/africanies-ui/src/lib/modules/africanies-forms.module.ts

@@ -6,6 +6,7 @@ import { DatePickerComponent } from '../forms/date-picker';
 import { FileUploadComponent } from '../forms/file-upload';
 import { NumberInputComponent } from '../forms/number-input';
 import { OtpInputComponent } from '../forms/otp-input';
+import { PhoneInputComponent } from '../forms/phone-input';
 import { RadioComponent } from '../forms/radio';
 import { SelectComponent } from '../forms/select';
 import { TextInputComponent } from '../forms/text-input';
@@ -24,6 +25,7 @@ const FORM_CONTROLS = [
   DatePickerComponent,
   FileUploadComponent,
   OtpInputComponent,
+  PhoneInputComponent,
 ] as const;
 
 /**

package/libs/africanies-ui/src/lib/navigation/segment/segment.component.ts

@@ -70,8 +70,9 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AfricaniesIconComponent],
   styles: `
+    /* Track p-1 (0.25×2) + 0.25 gap between pills — keep right inset equal to left. */
     :host .africanies-segment-thumb {
-      width: calc((100% - 0.5rem) / 2);
+      width: calc((100% - 0.75rem) / 2);
     }
   `,
   template: `

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.spec.ts

@@ -59,4 +59,19 @@ describe('ShippingModeSwitchComponent', () => {
     expect(shipping.mode()).toBe('stn');
     expect(toNigeria.getAttribute('aria-checked')).toBe('true');
   });
+
+  it('should show the STN/SFN chip only when the mode panel is collapsed', () => {
+    fixture.componentRef.setInput('panelOpen', true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).not.toContain('SFN');
+
+    fixture.componentRef.setInput('panelOpen', false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('SFN');
+
+    shipping.setMode('stn');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('STN');
+    expect(fixture.nativeElement.textContent).not.toContain('SFN');
+  });
 });

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -128,9 +128,12 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
         >
           Shipping mode
         </p>
-        <africanies-chip [variant]="modeChipVariant()" size="sm">
-          {{ modeChipLabel() }}
-        </africanies-chip>
+        <!-- STN / SFN chip only when the tiles are collapsed — open panel already shows both modes. -->
+        @if (!panelOpen()) {
+          <africanies-chip [variant]="modeChipVariant()" size="sm">
+            {{ modeChipLabel() }}
+          </africanies-chip>
+        }
         <span class="min-w-0 flex-1" aria-hidden="true"></span>
         <button
           type="button"

package/libs/africanies-ui/src/lib/table/table.component.ts

@@ -45,8 +45,9 @@ import { TableColumn, TableSortChange } from './table-column';
  * `<ng-template africaniesCellDef="key">` templates. Columns without a matching
  * template fall back to rendering `row[key]` as plain text.
  *
- * Optional toolbar: top-left **shipping mode** segment (on by default;
- * `[showShippingMode]="false"` to hide) and **Refresh** (`showRefresh` →
+ * Optional toolbar: top-left **shipping mode** segment on its own row above
+ * Refresh / Filter / Export (on by default; `[showShippingMode]="false"` to
+ * hide) and **Refresh** (`showRefresh` →
  * {@link refreshClick}). Refresh is hidden while
  * the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
@@ -177,71 +178,75 @@ import { TableColumn, TableSortChange } from './table-column';
         showFilter() ||
         showExport()
       ) {
-        <div class="flex flex-wrap items-center justify-between gap-2">
-          <div class="flex min-w-0 flex-wrap items-center gap-2">
-            @if (showShippingMode()) {
-              <africanies-segment
-                class="min-w-0"
-                [items]="shippingModeItems"
-                [activeId]="shippingModeActiveId()"
-                ariaLabel="Shipping mode"
-                (activeIdChange)="onShippingModeChange($event)"
-              />
-            }
-            @if (showToolbarRefresh()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [disabled]="loading() || refreshing()"
-                [attr.aria-label]="refreshLabel()"
-                (click)="refreshClick.emit()"
-              >
-                <africanies-icon
-                  name="refresh"
-                  [size]="16"
-                  [class]="refreshing() ? 'animate-spin' : ''"
-                />
-                {{ refreshLabel() }}
-              </button>
-            }
-          </div>
-          <div class="flex items-center gap-2">
-            @if (showFilter()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="filterLabel()"
-                (click)="filterClick.emit()"
-              >
-                <africanies-icon name="filter" [size]="16" />
-                {{ filterLabel() }}
-                @if (filterCount() > 0) {
-                  <span
-                    class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+        <div class="flex w-full min-w-0 flex-col gap-3">
+          @if (showShippingMode()) {
+            <africanies-segment
+              class="min-w-0 self-start"
+              [items]="shippingModeItems"
+              [activeId]="shippingModeActiveId()"
+              ariaLabel="Shipping mode"
+              (activeIdChange)="onShippingModeChange($event)"
+            />
+          }
+          @if (showToolbarRefresh() || showFilter() || showExport()) {
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <div class="flex min-w-0 flex-wrap items-center gap-2">
+                @if (showToolbarRefresh()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [disabled]="loading() || refreshing()"
+                    [attr.aria-label]="refreshLabel()"
+                    (click)="refreshClick.emit()"
                   >
-                    {{ filterCount() }}
-                  </span>
+                    <africanies-icon
+                      name="refresh"
+                      [size]="16"
+                      [class]="refreshing() ? 'animate-spin' : ''"
+                    />
+                    {{ refreshLabel() }}
+                  </button>
                 }
-              </button>
-            }
-            @if (showExport()) {
-              <button
-                africanies-button
-                type="button"
-                variant="flat"
-                size="sm"
-                [attr.aria-label]="exportLabel()"
-                (click)="exportClick.emit()"
-              >
-                <africanies-icon name="download" [size]="16" />
-                {{ exportLabel() }}
-              </button>
-            }
-          </div>
+              </div>
+              <div class="flex items-center gap-2">
+                @if (showFilter()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="filterLabel()"
+                    (click)="filterClick.emit()"
+                  >
+                    <africanies-icon name="filter" [size]="16" />
+                    {{ filterLabel() }}
+                    @if (filterCount() > 0) {
+                      <span
+                        class="inline-flex min-w-5 items-center justify-center rounded-full bg-ink px-1.5 py-0.5 text-caption font-semibold tabular-nums text-white dark:bg-white dark:text-ink"
+                      >
+                        {{ filterCount() }}
+                      </span>
+                    }
+                  </button>
+                }
+                @if (showExport()) {
+                  <button
+                    africanies-button
+                    type="button"
+                    variant="flat"
+                    size="sm"
+                    [attr.aria-label]="exportLabel()"
+                    (click)="exportClick.emit()"
+                  >
+                    <africanies-icon name="download" [size]="16" />
+                    {{ exportLabel() }}
+                  </button>
+                }
+              </div>
+            </div>
+          }
         </div>
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/angular-web-sdk",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "packageManager": "pnpm@11.24.0",
   "license": "MIT",
   "contributors": [

package/.nx/cache/13466509747676776487/dist/libs/africanies-core/README.md

@@ -1,85 +0,0 @@
-# @africanies/africanies-core
-
-API and app-wiring layer for the AFRICANIES Web SDK: SDK config, HTTP client,
-shipping mode, mode-region metadata, TanStack Query default helpers, and
-route-driven overlay registration.
-
-## Install peers
-
-```bash
-# Published on npm (@africanies scope)
-npm install @africanies/africanies-core @africanies/africanies-models @africanies/africanies-storage
-```
-
-Peer dependencies: `@angular/common`, `@angular/core`, `@angular/router`,
-`rxjs`, `@africanies/africanies-models`, `@africanies/africanies-storage`.
-
-## Quick start
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-import {
-  provideAfricaniesSdk,
-  provideAfricaniesHttpClient,
-  provideOverlayRoutes,
-  createAfricaniesQueryClientDefaults,
-} from '@africanies/africanies-core';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideAfricaniesSdk({ baseUrl: 'https://api.example.com', timeout: 30_000 }),
-    provideAfricaniesHttpClient(),
-    // optional extras:
-    // provideAfricaniesHttpClient({ interceptors: [correlationInterceptor] }),
-    // optional: provideOverlayRoutes([{ paramKey: 'modal', routes: { ... } }]),
-  ],
-};
-
-// TanStack Query (app dependency — pin exact experimental version):
-// new QueryClient({ defaultOptions: createAfricaniesQueryClientDefaults() })
-```
-
-## Modules
-
-| Area | Exports |
-|------|---------|
-| Config | `provideAfricaniesSdk`, `AFRICANIES_SDK_CONFIG`, `httpToasts` (`'off'` \| `'errors'` \| `'all'`) |
-| Auth | `AuthService` (`forgot`), `isValidEmail`, `AuthTokenService` (`set` / `clear` / `get`) |
-| Shipping | `ShippingModeService` (tab-scoped via `sessionStorage`), `shipmentModeInterceptor`, per-request `ApiRequestOptions.shippingMode` / `withShippingMode` |
-| HTTP | `provideAfricaniesHttpClient`, `ApiClient` (auto-tags `withToast` from config / `ApiRequestOptions.toast`; optional `shippingMode` per call; HTTP failures → `Error` with formatted `.message`), `withToast`, `withShippingMode`, `httpToastInterceptor`, `normalize` (lifts Laravel validation bags into `errors` + joined `message`), `formatApiErrorMessage` (used internally; rare for hosts), `fieldErrorsMap`, `authInterceptor` |
-| Query | `createAfricaniesQueryClientDefaults`, `provideAfricaniesQueryDefaults`, `listFetchKind` (body loader on first load / STN↔SFN; keep rows on focus / Refresh / pager) |
-| Mode | `ModeConfigService`, `provideModeConfig`, `MODE_CONFIG_PATH` |
-| Country | `CountryService`, `countryFlagUrl` / `mapCountrySelectOptions` (flagcdn.com), `COUNTRY_READ_PATH`, mappers |
-| Service | `ServiceService` (`readPage` / `readAll` / `readById`), `SERVICE_READ_PATH` (`/public/service/read`), mappers |
-| Document | `DocumentService` (`readPage` / `readAll` / `readById`), `DOCUMENT_READ_PATH` (`/public/document/read`) — preview via `file_ref` on by-id |
-| Plan | `PlanService` (`readPage` / `readAll` / `readById`), `PLAN_READ_PATH` (`/public/plan/read`), mappers |
-| Currency | `CurrencyService` (`readPage` / `readAll` / `readById`, `create` / `update` / `remove`), `CURRENCY_*_PATH`, mappers |
-| Payment method | `PaymentMethodService` (`readPage` / `readAll` / `readById`, `update`), `PAYMENT_METHOD_READ_PATH` / `PAYMENT_METHOD_UPDATE_PATH`, mappers |
-| Shipment method | `ShipmentMethodService` (`readPage` / `readAll` / `readById`), `SHIPMENT_METHOD_READ_PATH`, mappers |
-| Warehouse | `WarehouseService` (`readPage` / `readAll` / `readById`), `WAREHOUSE_READ_PATH`, mappers |
-| Zone | `ZoneService` (`readPage` / `readAll` / `readById`), `ZONE_READ_PATH`, mappers |
-| Product | `ProductService` (`readPage` / `readAll` / `readById`), `PRODUCT_READ_PATH`, mappers |
-| User | `UserService` (`me`, `changePassword`, `logoutFromAllSessions`), `USER_PATH`, `mapUser` (bare `/user` body; needs `AuthTokenService.set`) |
-| Notification | `NotificationService` (`readPage` / `readAll` / `readOne`), `NOTIFICATION_READ_PATH`, `mapNotification` / `mapNotificationInboxItem` |
-| File | `FileService` (`read` / `readMultiple` → `POST /file/read`), `FILE_READ_PATH`, `mapFileRead` / `mapFileReadList` |
-| Overlay | `provideOverlayRoutes`, `RouteOverlayService`, `MODAL_SERVICE`, `DRAWER_SERVICE` |
-| Filters | `FilterOptionsResolver` (`resolveField` lazy in drawer), `mergeFilterOptionLists`, warehouse/method mappers |
-| Browser | `copyToClipboard`, `downloadCsv` / `csvCell` (UTF-8 CSV download) |
-
-List-style GETs follow `ResourceId`: `null` (paginated), `'all'` (full dump), `number` (single).
-
-| Filter `optionsSource` | SDK resolver |
-|------------------------|--------------|
-| `warehouses` | Lazy `FilterOptionsResolver.resolveField` → `WarehouseService.readAll()` |
-| `shipmentMethods` | Lazy `FilterOptionsResolver.resolveField` → `ShipmentMethodService.readAll()` |
-| `shipmentManifests` | Host `optionLists` (no built-in service yet) |
-
-`MODAL_SERVICE` / `DRAWER_SERVICE` are tokens only — implementations ship in
-`@africanies/africanies-ui` to avoid circular dependencies.
-
-## Build / test
-
-```bash
-npx nx build africanies-core
-npx nx test africanies-core
-```