@africanies/angular-web-sdk 0.1.9 → 0.1.11

package/libs/africanies-ui/src/lib/layout/header-weather.ts

@@ -2,12 +2,15 @@ import type { IconName } from '@africanies/africanies-icons';
 
 import type { HeaderWeather, HeaderWeatherKind } from './header-greeting.util';
 
-/** Bump when cache shape or lookup strategy changes. */
-const CACHE_KEY = 'africanies-header-weather-v5';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v7';
 const FETCH_MS = 4_000;
 const BROWSER_GEO_MS = 3_500;
-/** IP fallback for coordinates only — city strings are often wrong. */
+/** IP fallback — city string is used only when reverse-geocode is empty. */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
+/** Client reverse-geocode so the label matches the forecast coordinates. */
+const REVERSE_GEO_URL =
+  'https://api.bigdatacloud.net/data/reverse-geocode-client';
 
 const WEATHER_LABELS: Record<HeaderWeatherKind, string> = {
   clear: 'Clear',
@@ -23,13 +26,21 @@ interface CachedWeather {
   hour: string;
   kind: HeaderWeatherKind;
   temperatureC?: number;
+  city?: string;
 }
 
 interface GeoJsPayload {
+  city?: string;
   latitude?: string | number;
   longitude?: string | number;
 }
 
+interface ReverseGeoPayload {
+  city?: string;
+  locality?: string;
+  principalSubdivision?: string;
+}
+
 interface OpenMeteoPayload {
   current?: {
     weather_code?: number;
@@ -108,12 +119,11 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
 }
 
 /**
- * Local forecast via browser / IP coordinates + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
  *
- * Coordinates prefer the browser Geolocation API (may prompt once).
- * Otherwise IP geo is used for lat/lon only — city labels are not shown
- * because IP and reverse-geocode cities are often wrong (e.g. NG IPs
- * labelled Lagos).
+ * Coordinates prefer the browser Geolocation API (accurate for travellers;
+ * may prompt once). Otherwise IP geo is used. The city label is reverse-
+ * geocoded from those coordinates, with the IP city as a fallback.
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -158,8 +168,11 @@ export async function loadHeaderWeather(
     }
 
     const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-    const weather: HeaderWeather = { kind, temperatureC };
-    writeCache({ hour, kind, temperatureC });
+    const city =
+      (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+      coords.fallbackCity;
+    const weather: HeaderWeather = { kind, temperatureC, city };
+    writeCache({ hour, kind, temperatureC, city });
     return weather;
   } catch {
     return null;
@@ -184,9 +197,16 @@ function readCache(hour: string): HeaderWeather | null {
     if (parsed.hour !== hour || !parsed.kind) {
       return null;
     }
+    // City-less entries (e.g. browser geo + failed reverse) used to stick for
+    // the hour — treat them as a miss so we can recover the location label.
+    const city = asCity(parsed.city);
+    if (!city) {
+      return null;
+    }
     return {
       kind: parsed.kind,
       temperatureC: parsed.temperatureC,
+      city,
     };
   } catch {
     return null;
@@ -203,23 +223,36 @@ function writeCache(value: CachedWeather): void {
 
 /**
  * Prefer device coordinates when available (may prompt once); otherwise fall
- * back to IP lat/lon for the forecast only.
+ * back to IP geo. IP is always fetched in parallel so its city can backfill
+ * the label when reverse-geocode is empty (browser geo has no city string).
  */
 async function resolveCoordinates(
   fetchFn: typeof fetch,
-): Promise<Coordinates | null> {
-  const browser = await tryBrowserGeolocation();
+): Promise<(Coordinates & { fallbackCity?: string }) | null> {
+  const [browser, ipGeo] = await Promise.all([
+    tryBrowserGeolocation(),
+    fetchIpGeo(fetchFn),
+  ]);
+  const ipCity = asCity(ipGeo?.city);
+
   if (browser) {
-    return browser;
+    return { ...browser, fallbackCity: ipCity };
   }
 
-  const geo = (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
-  const latitude = asNumber(geo?.latitude);
-  const longitude = asNumber(geo?.longitude);
+  const latitude = asNumber(ipGeo?.latitude);
+  const longitude = asNumber(ipGeo?.longitude);
   if (latitude === null || longitude === null) {
     return null;
   }
-  return { latitude, longitude };
+  return {
+    latitude,
+    longitude,
+    fallbackCity: ipCity,
+  };
+}
+
+async function fetchIpGeo(fetchFn: typeof fetch): Promise<GeoJsPayload | null> {
+  return (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
 }
 
 async function tryBrowserGeolocation(): Promise<Coordinates | null> {
@@ -253,6 +286,23 @@ async function tryBrowserGeolocation(): Promise<Coordinates | null> {
   });
 }
 
+async function reverseGeocodeCity(
+  fetchFn: typeof fetch,
+  latitude: number,
+  longitude: number,
+): Promise<string | undefined> {
+  const url =
+    `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
+    `&longitude=${encodeURIComponent(String(longitude))}` +
+    `&localityLanguage=en`;
+  const payload = (await fetchJson(fetchFn, url)) as ReverseGeoPayload | null;
+  return (
+    asCity(payload?.city) ??
+    asCity(payload?.locality) ??
+    asCity(payload?.principalSubdivision)
+  );
+}
+
 function asNumber(value: unknown): number | null {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;
@@ -264,6 +314,17 @@ function asNumber(value: unknown): number | null {
   return null;
 }
 
+function asCity(value: unknown): string | undefined {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.toLowerCase() === 'n/a') {
+    return undefined;
+  }
+  return trimmed;
+}
+
 async function fetchJson(
   fetchFn: typeof fetch,
   url: string,

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

@@ -38,6 +38,10 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
 /**
  * Compact segmented control for view modes and filters.
  *
+ * Selected option uses a **solid brand pill** (white label) on a neutral track —
+ * same pattern as the portal shipping-mode toggle. With exactly two options the
+ * pill slides; with more options each selected chip fills in place.
+ *
  * ## Router mode (URL is source of truth)
  *
  * Set `routerLink` (and optional `queryParams`) on items. The selected pill
@@ -65,20 +69,38 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AfricaniesIconComponent],
+  styles: `
+    :host .africanies-segment-thumb {
+      width: calc((100% - 0.5rem) / 2);
+    }
+  `,
   template: `
     <div
-      class="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-background-welcome p-1 dark:bg-ink-950"
+      class="relative inline-grid max-w-full rounded-lg bg-[#f0f2f5] p-1 dark:bg-[#2a2c31]"
       role="group"
       [attr.aria-label]="ariaLabel()"
+      [class.grid-cols-2]="useSlidingThumb()"
+      [class.inline-flex]="!useSlidingThumb()"
+      [class.flex-wrap]="!useSlidingThumb()"
+      [class.gap-1]="!useSlidingThumb()"
     >
+      @if (useSlidingThumb()) {
+        <div
+          class="africanies-segment-thumb pointer-events-none absolute top-1 bottom-1 left-1 rounded-md shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none"
+          [class]="thumbFillClass()"
+          [style.transform]="
+            activeIndex() === 1
+              ? 'translateX(calc(100% + 0.25rem))'
+              : 'translateX(0)'
+          "
+          aria-hidden="true"
+        ></div>
+      }
+
       @for (item of items(); track item.id) {
         @if (item.routerLink !== null && item.routerLink !== undefined) {
           <a
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
             [class.opacity-50]="item.disabled"
@@ -95,11 +117,7 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
         } @else {
           <button
             type="button"
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [disabled]="!!item.disabled"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
@@ -154,21 +172,18 @@ export class SegmentComponent {
     { initialValue: this.router.url },
   );
 
-  protected readonly segmentChrome = computed(
-    () =>
-      'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-body-sm transition-colors duration-150 no-underline',
+  /** Two equal options → portal-style sliding brand pill. */
+  protected readonly useSlidingThumb = computed(
+    () => this.items().length === 2,
   );
 
-  protected readonly selectedClass = computed(() => {
-    const colors = this.modeColor.classes();
-    return `${colors.soft} ${colors.text} shadow-sm font-semibold`;
+  /** Index of the active option (0 / 1 for the sliding thumb). */
+  protected readonly activeIndex = computed(() => {
+    const list = this.items();
+    const idx = list.findIndex((item) => this.isItemActive(item));
+    return idx < 0 ? 0 : idx;
   });
 
-  protected readonly idleClass = computed(
-    () =>
-      'font-medium text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white',
-  );
-
   constructor() {
     effect(() => {
       this.url();
@@ -198,6 +213,67 @@ export class SegmentComponent {
     return this.activeId() === item.id;
   }
 
+  /**
+   * Sliding thumb fill. STN / SFN options keep their own brand color so the
+   * pill matches mode identity; other pairs follow the active theme primary.
+   */
+  protected thumbFillClass(): string {
+    const active = this.items()[this.activeIndex()];
+    return this.brandFillFor(active?.id ?? null);
+  }
+
+  /**
+   * Option chrome: sliding mode keeps labels transparent over the thumb;
+   * multi-option mode paints a solid selected chip in place.
+   *
+   * @param item - Option being rendered.
+   * @returns Class string for the control.
+   */
+  protected optionChrome(item: AfricaniesNavItem): string {
+    const base =
+      'relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-center text-body-sm no-underline transition-colors duration-150';
+    const active = this.isItemActive(item);
+
+    if (this.useSlidingThumb()) {
+      return (
+        base +
+        ' w-full ' +
+        (active
+          ? 'font-semibold text-white'
+          : 'font-medium text-ink hover:text-ink dark:text-neutral-300 dark:hover:text-white')
+      );
+    }
+
+    if (active) {
+      return `${base} font-semibold text-white shadow-sm ${this.brandFillFor(item.id)}`;
+    }
+
+    return (
+      base +
+      ' font-medium text-ink hover:bg-white/70 hover:text-ink dark:text-neutral-300 dark:hover:bg-white/10 dark:hover:text-white'
+    );
+  }
+
+  /**
+   * Solid brand fill for a selected option / sliding thumb.
+   *
+   * Light + dark use the same SFN green / STN orange primaries so the control
+   * stays mode-identifiable on both surfaces (portal primary, not soft tint).
+   * Class strings are full literals so Tailwind keeps them.
+   *
+   * @param id - Option id (`stn` / `sfn` get fixed brands; else theme primary).
+   * @returns Background utility classes.
+   */
+  protected brandFillFor(id: string | null): string {
+    if (id === 'stn') {
+      return 'bg-import dark:bg-import';
+    }
+    if (id === 'sfn') {
+      return 'bg-export dark:bg-export';
+    }
+    return this.modeColor.classes().activeFill;
+  }
+
   protected selectLocal(item: AfricaniesNavItem): void {
     if (item.disabled || item.routerLink != null) {
       return;

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');
+  });
 });