@africanies/angular-web-sdk 0.1.9 → 0.1.11

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -12,7 +12,7 @@
  * text-export-strong bg-export-strong hover:bg-export-hover border-export-strong
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
- * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
+ * dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)] dark:bg-export dark:text-export dark:border-export
  *
  * STN (import / orange):
  * text-import-strong bg-import-strong hover:bg-import-hover border-import-strong
@@ -35,7 +35,7 @@ export const MODE_COLOR_SAFELIST = [
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
   'dark:hover:bg-export-light',
-  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
+  'dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
   'dark:bg-export',
   'dark:text-export',
   'dark:border-export',

package/libs/africanies-theme/src/lib/mode-color.service.spec.ts

@@ -26,14 +26,16 @@ describe('ModeColorService', () => {
     service = TestBed.inject(ModeColorService);
   });
 
-  it('uses accessible export-strong fills and text in SFN light mode', () => {
+  it('uses export brand fills and text for SFN in light and dark', () => {
     const classes = service.classes();
-    expect(classes.text).toContain('text-export-strong');
-    expect(classes.primary).toContain('bg-export-strong');
-    expect(classes.ghostPrimary).toContain('text-export-strong');
-    expect(classes.activeFill).toContain('bg-export-strong');
-    expect(classes.stroked).toContain('text-export-strong');
-    expect(classes.stroked).toContain('border-export-strong');
+    const primaryTokens = classes.primary.split(/\s+/);
+    expect(classes.text.split(/\s+/)).toContain('text-export');
+    expect(primaryTokens).toContain('bg-export');
+    expect(primaryTokens).not.toContain('bg-export-strong');
+    expect(classes.ghostPrimary.split(/\s+/)).toContain('text-export');
+    expect(classes.activeFill.split(/\s+/)).toContain('bg-export');
+    expect(classes.stroked.split(/\s+/)).toContain('text-export');
+    expect(classes.stroked.split(/\s+/)).toContain('border-export');
   });
 
   it('keeps bright export accents for dark-mode companions in SFN', () => {

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -9,7 +9,9 @@ import { ShippingModeService } from '@africanies/africanies-core';
  * and accent text. Semantic colors (danger / warning) stay mode-independent.
  */
 export interface ModeColorClasses {
-  /** Accessible accent text — `text-export-strong` in light, `text-export` in dark. */
+  /**
+   * Accessible accent text — mode brand color in light and dark.
+   */
   text: string;
   /** Solid background utility, e.g. `bg-export`. */
   bg: string;
@@ -80,22 +82,22 @@ export class ModeColorService {
     // Literal strings required for Tailwind content detection — do not interpolate.
     if (this.shippingMode.mode() === 'sfn') {
       return {
-        text: 'text-export-strong dark:text-export',
+        text: 'text-export dark:text-export',
         bg: 'bg-export',
         bgSubtle: 'bg-export-subtle',
         border: 'border-export',
         primary:
-          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:hover:bg-export-light',
+          'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:hover:bg-export-light',
         ghostPrimary:
-          'bg-transparent text-export-strong border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
+          'bg-transparent text-export border-transparent hover:bg-export-subtle dark:text-export dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
         softSolid:
-          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
+          'bg-export-subtle dark:bg-[color-mix(in_srgb,#26bd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
         activeFill:
-          'bg-export-strong text-white border-transparent hover:bg-export-hover dark:bg-export dark:text-white dark:hover:bg-export-light',
+          'bg-export text-white border-transparent hover:bg-export-strong dark:bg-export dark:text-white dark:hover:bg-export-light',
         stroked:
-          'bg-surface text-export-strong border-export-strong hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
+          'bg-surface text-export border-export hover:bg-export-subtle dark:bg-ink-950 dark:text-export dark:border-export dark:hover:bg-export/15',
       };
     }
     return {

package/libs/africanies-theme/tailwind-preset.cjs

@@ -270,7 +270,7 @@ module.exports = {
           hover: '#e9eef5',
         },
         export: {
-          DEFAULT: '#1cbd5d',
+          DEFAULT: '#26bd5d',
           light: '#24dc6d',
           subtle: '#e4fff3',
           tint: '#f2fff8',
@@ -282,8 +282,8 @@ module.exports = {
           DEFAULT: '#f08829',
           light: '#ffa95b',
           subtle: '#fffcef',
-          // Accessible normal-text / white-text-control foreground (6.20:1).
-          strong: '#9a4b0b',
+          // Brand orange (same as DEFAULT) — portal STN primary.
+          strong: '#f08829',
           hover: '#7f3e09',
         },
         danger: {

package/libs/africanies-ui/src/lib/avatar/avatar-menu.component.ts

@@ -37,28 +37,32 @@ import { AvatarComponent, type AvatarSize } from './avatar.component';
     AfricaniesIconComponent,
   ],
   template: `
-    <africanies-action-menu
-      [items]="menuItems()"
-      [ariaLabel]="ariaLabel()"
-      [disabled]="disabled()"
-    >
-      <button
-        type="button"
-        africaniesActionMenuTrigger
-        class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
-        [attr.aria-label]="ariaLabel()"
+    @if (menuItems().length > 0) {
+      <africanies-action-menu
+        [items]="menuItems()"
+        [ariaLabel]="ariaLabel()"
+        [disabled]="disabled()"
       >
-        <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
-        @if (showCaret()) {
-          <africanies-icon
-            name="chevron-down"
-            [size]="14"
-            class="shrink-0 text-neutral-600 dark:text-neutral-400"
-            aria-hidden="true"
-          />
-        }
-      </button>
-    </africanies-action-menu>
+        <button
+          type="button"
+          africaniesActionMenuTrigger
+          class="inline-flex cursor-pointer items-center gap-1 rounded-lg p-0.5 pr-1 transition-colors hover:bg-background-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-white/10"
+          [attr.aria-label]="ariaLabel()"
+        >
+          <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+          @if (showCaret()) {
+            <africanies-icon
+              name="chevron-down"
+              [size]="14"
+              class="shrink-0 text-neutral-600 dark:text-neutral-400"
+              aria-hidden="true"
+            />
+          }
+        </button>
+      </africanies-action-menu>
+    } @else {
+      <africanies-avatar [name]="name()" [src]="src()" [size]="size()" />
+    }
   `,
 })
 export class AvatarMenuComponent {

package/libs/africanies-ui/src/lib/button/button.component.spec.ts

@@ -65,29 +65,34 @@ describe('ButtonComponent', () => {
   });
 
   it('should apply primary variant classes by default (SFN / export)', () => {
-    expect(button.className).toContain('bg-export-strong');
-    expect(button.className).toContain('text-white');
+    const tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('bg-export');
+    expect(tokens).toContain('text-white');
+    expect(tokens).not.toContain('bg-export-strong');
   });
 
   it('should switch primary to import orange when mode is STN', () => {
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('bg-import-strong');
-    expect(button.className).not.toContain('bg-export-strong');
+    const tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('bg-import-strong');
+    expect(tokens).not.toContain('bg-export');
   });
 
   it('should switch ghost-primary text accent with shipping mode', () => {
     host.variant.set('ghost-primary');
     fixture.detectChanges();
-    expect(button.className).toContain('text-export-strong');
-    expect(button.className).toContain('bg-transparent');
+    let tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('text-export');
+    expect(tokens).toContain('bg-transparent');
 
     mode.set('stn');
     fixture.detectChanges();
 
-    expect(button.className).toContain('text-import-strong');
-    expect(button.className).not.toContain('text-export-strong');
+    tokens = button.className.split(/\s+/);
+    expect(tokens).toContain('text-import-strong');
+    expect(tokens).not.toContain('text-export');
   });
 
   it('should switch variant and size classes', () => {

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

@@ -13,10 +13,15 @@ import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 /**
  * Semantic tone for {@link ChipComponent}.
  *
+ * Prefer these for common statuses. For one-off accents, pass {@link ChipComponent.color}
+ * instead — any CSS color with a faded background.
+ *
  * - `neutral` — generic label / count
  * - `success` — positive outcome (same green family as export)
  * - `warning` — caution / pending
  * - `danger` — error / exception
+ * - `info` — informational (theme blue)
+ * - `violet` / `teal` / `rose` / `cyan` — extra categorical tones
  * - `export` — SFN / outbound accent
  * - `import` — STN / inbound accent
  */
@@ -25,6 +30,11 @@ export type ChipVariant =
   | 'success'
   | 'warning'
   | 'danger'
+  | 'info'
+  | 'violet'
+  | 'teal'
+  | 'rose'
+  | 'cyan'
   | 'export'
   | 'import';
 
@@ -37,12 +47,14 @@ export type ChipSize = 'sm' | 'md';
  * Compact status / category label.
  *
  * Soft fills stay readable in dark mode (translucent accent tints, not
- * light-only subtle backgrounds).
+ * light-only subtle backgrounds). Pass {@link color} for a custom accent —
+ * text uses that color and the background is a faded mix of the same.
  *
  * @example
  * ```html
  * <africanies-chip variant="success">Delivered</africanies-chip>
- * <africanies-chip variant="import" icon="truck">In transit</africanies-chip>
+ * <africanies-chip variant="violet">Priority</africanies-chip>
+ * <africanies-chip color="#0f766e">Pay Later</africanies-chip>
  * <africanies-chip variant="warning" [removable]="true" (removed)="clear()">Pending</africanies-chip>
  * ```
  */
@@ -53,8 +65,38 @@ export type ChipSize = 'sm' | 'md';
   imports: [AfricaniesIconComponent],
   host: {
     '[class]': 'hostClass()',
+    '[style.--africanies-chip-accent]': 'customAccent()',
     role: 'status',
   },
+  styles: `
+    :host.africanies-chip--custom {
+      color: var(--africanies-chip-accent);
+      background-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 14%,
+        transparent
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 28%,
+        transparent
+      );
+    }
+    :host-context(.dark):host.africanies-chip--custom {
+      /* Lighten the accent so labels stay readable on dark surfaces. */
+      color: color-mix(in srgb, var(--africanies-chip-accent) 68%, white);
+      background-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 22%,
+        transparent
+      );
+      border-color: color-mix(
+        in srgb,
+        var(--africanies-chip-accent) 40%,
+        transparent
+      );
+    }
+  `,
   template: `
     @if (icon(); as iconName) {
       <africanies-icon [name]="iconName" [size]="iconSize()" class="shrink-0" />
@@ -73,9 +115,15 @@ export type ChipSize = 'sm' | 'md';
   `,
 })
 export class ChipComponent {
-  /** Semantic tone. Defaults to `neutral`. */
+  /** Semantic tone. Defaults to `neutral`. Ignored when {@link color} is set. */
   readonly variant = input<ChipVariant>('neutral');
 
+  /**
+   * Optional CSS color (`#7c3aed`, `rgb(…)`, `oklch(…)`, …). When set, overrides
+   * {@link variant}: label uses the color and the fill is a faded mix of it.
+   */
+  readonly color = input<string | null>(null);
+
   /** Padding / type scale. Defaults to `sm` (table / dense UI). */
   readonly size = input<ChipSize>('sm');
 
@@ -96,6 +144,12 @@ export class ChipComponent {
 
   protected readonly iconSize = computed(() => (this.size() === 'md' ? 14 : 12));
 
+  /** Trimmed custom accent, or `null` when using a named {@link variant}. */
+  protected readonly customAccent = computed(() => {
+    const value = this.color()?.trim() ?? '';
+    return value.length > 0 ? value : null;
+  });
+
   protected readonly hostClass = computed(() => {
     const base =
       'inline-flex max-w-full items-center gap-1 rounded-md font-sans font-medium ' +
@@ -110,11 +164,15 @@ export class ChipComponent {
   });
 
   /**
-   * Soft background + text per variant. Dark mode uses translucent accents so
-   * chips never wash out as near-white blobs.
-   * @returns Tailwind class string for the active variant.
+   * Soft background + text per variant, or the custom-color host class.
+   * Dark mode uses translucent accents so chips never wash out as near-white
+   * blobs.
+   * @returns Tailwind / host class string for the active tone.
    */
   private toneClass(): string {
+    if (this.customAccent()) {
+      return 'africanies-chip--custom';
+    }
     switch (this.variant()) {
       case 'success':
       case 'export':
@@ -125,6 +183,16 @@ export class ChipComponent {
         return 'bg-warning-subtle text-warning-dark dark:bg-warning/15 dark:text-warning';
       case 'danger':
         return 'bg-danger-subtle text-danger-dark dark:bg-danger/15 dark:text-danger';
+      case 'info':
+        return 'bg-info-subtle text-info dark:bg-info/20 dark:text-[#93c5fd]';
+      case 'violet':
+        return 'bg-violet-100 text-violet-800 dark:bg-violet-400/15 dark:text-violet-300';
+      case 'teal':
+        return 'bg-teal-100 text-teal-800 dark:bg-teal-400/15 dark:text-teal-300';
+      case 'rose':
+        return 'bg-rose-100 text-rose-800 dark:bg-rose-400/15 dark:text-rose-300';
+      case 'cyan':
+        return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-400/15 dark:text-cyan-300';
       default:
         return 'bg-border/60 text-ink dark:bg-white/10 dark:text-neutral-200';
     }

package/libs/africanies-ui/src/lib/layout/app-shell-header.component.ts

@@ -17,7 +17,7 @@ import type { Observable } from 'rxjs';
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 
 import type { AfricaniesMenuItem } from '../action-menu/menu-item';
-import { AvatarMenuComponent } from '../avatar';
+import { AvatarComponent, AvatarMenuComponent } from '../avatar';
 import type { AfricaniesNotification, NotificationPageResult } from '../notifications';
 import { NotificationDrawerService } from '../notifications';
 import type { HeaderWeather } from './header-greeting.util';
@@ -70,7 +70,12 @@ export class AppShellHeaderEndDirective {}
   selector: 'africanies-app-shell-header',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AfricaniesIconComponent, AvatarMenuComponent, DatePipe],
+  imports: [
+    AfricaniesIconComponent,
+    AvatarComponent,
+    AvatarMenuComponent,
+    DatePipe,
+  ],
   template: `
     <div
       class="flex min-w-0 items-center gap-2 px-3 py-2.5 sm:gap-4 sm:px-6 sm:py-3"
@@ -119,7 +124,9 @@ export class AppShellHeaderEndDirective {}
                 <span
                   class="hidden text-caption text-neutral-600 md:inline dark:text-neutral-400"
                 >
-                  {{ weatherCondition() }}
+                  {{ weatherCondition() }}@if (weatherCity(); as city) {
+                    · {{ city }}
+                  }
                 </span>
               </div>
             }
@@ -178,12 +185,20 @@ export class AppShellHeaderEndDirective {}
             }
 
             @if (userName()) {
-              <africanies-avatar-menu
-                [name]="userName()!"
-                [src]="userAvatarSrc()"
-                [menuItems]="userMenuItems()"
-                [size]="'md'"
-              />
+              @if (userMenuItems().length > 0) {
+                <africanies-avatar-menu
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  [menuItems]="userMenuItems()"
+                  [size]="'md'"
+                />
+              } @else {
+                <africanies-avatar
+                  [name]="userName()!"
+                  [src]="userAvatarSrc()"
+                  size="md"
+                />
+              }
             }
           </div>
         }
@@ -285,6 +300,11 @@ export class AppShellHeaderComponent {
     return headerWeatherLabel(forecast.kind, this.now().getHours());
   });
 
+  protected readonly weatherCity = computed(() => {
+    const city = this.weather()?.city?.trim();
+    return city || null;
+  });
+
   protected readonly weatherAriaLabel = computed(() => {
     const forecast = this.weather();
     if (!forecast) {
@@ -292,9 +312,12 @@ export class AppShellHeaderComponent {
     }
     const condition = this.weatherCondition().toLowerCase();
     const temp = this.weatherTemp();
-    return temp === null
-      ? `Weather: ${condition}`
-      : `Weather: ${temp} degrees Celsius, ${condition}`;
+    const city = this.weatherCity();
+    const degrees =
+      temp === null
+        ? condition
+        : `${temp} degrees Celsius, ${condition}`;
+    return city ? `Weather in ${city}: ${degrees}` : `Weather: ${degrees}`;
   });
 
   protected readonly unreadCount = computed(

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

@@ -33,6 +33,8 @@ export interface HeaderWeather {
   kind: HeaderWeatherKind;
   /** Celsius, when the forecast includes it. */
   temperatureC?: number;
+  /** City from reverse-geocode / IP geolocation, when known. */
+  city?: string;
 }
 
 const PERIOD_KICKERS: Record<HeaderGreetingPeriod, readonly string[]> = {

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

@@ -66,7 +66,7 @@ describe('loadHeaderWeather', () => {
     ).resolves.toBeNull();
   });
 
-  it('reads Open-Meteo after IP coordinates', async () => {
+  it('reads Open-Meteo after IP geolocation and reverse-geocodes the city', async () => {
     const fetchFn = jest.fn(async (url: string) => {
       if (String(url).includes('geojs')) {
         return jsonResponse({
@@ -75,6 +75,9 @@ describe('loadHeaderWeather', () => {
           city: 'Lagos',
         });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja', locality: 'Abuja' });
+      }
       return jsonResponse({
         current: { weather_code: 61, temperature_2m: 27.4 },
       });
@@ -85,8 +88,29 @@ describe('loadHeaderWeather', () => {
     ).resolves.toEqual({
       kind: 'rain',
       temperatureC: 27.4,
+      city: 'Abuja',
+    });
+    expect(fetchFn).toHaveBeenCalledTimes(3);
+  });
+
+  it('falls back to the IP city when reverse geocode is empty', async () => {
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('geojs')) {
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({});
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 30,
+      city: 'Lagos',
     });
-    expect(fetchFn).toHaveBeenCalledTimes(2);
   });
 
   it('reuses the same-hour session cache', async () => {
@@ -94,6 +118,9 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2 });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Accra' });
+      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
     });
 
@@ -101,13 +128,16 @@ describe('loadHeaderWeather', () => {
     const second = await loadHeaderWeather(fetchFn as unknown as typeof fetch);
 
     expect(first).toEqual(second);
-    expect(fetchFn).toHaveBeenCalledTimes(2);
+    expect(fetchFn).toHaveBeenCalledTimes(3);
   });
 
   it('fetches again when the cached hour no longer matches', async () => {
     const fetchFn = jest.fn(async (url: string) => {
       if (String(url).includes('geojs')) {
-        return jsonResponse({ latitude: 1, longitude: 2 });
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Lagos' });
       }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30.2 } });
     });
@@ -124,7 +154,7 @@ describe('loadHeaderWeather', () => {
     sessionStorage.setItem(cacheKey!, JSON.stringify(stored));
 
     await loadHeaderWeather(fetchFn as unknown as typeof fetch);
-    expect(fetchFn).toHaveBeenCalledTimes(4);
+    expect(fetchFn).toHaveBeenCalledTimes(6);
   });
 
   it('uses browser coordinates when geolocation succeeds', async () => {
@@ -151,8 +181,61 @@ describe('loadHeaderWeather', () => {
     });
 
     const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja' });
+      }
+      if (String(url).includes('geojs')) {
+        return jsonResponse({
+          latitude: 6.5,
+          longitude: 3.4,
+          city: 'Lagos',
+        });
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 31,
+      city: 'Abuja',
+    });
+  });
+
+  it('uses the IP city when browser geo succeeds but reverse geocode is empty', async () => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (success: PositionCallback) => {
+          success({
+            coords: {
+              latitude: 9.0765,
+              longitude: 7.3986,
+              accuracy: 10,
+              altitude: null,
+              altitudeAccuracy: null,
+              heading: null,
+              speed: null,
+              toJSON: () => ({}),
+            },
+            timestamp: Date.now(),
+            toJSON: () => ({}),
+          } as GeolocationPosition);
+        },
+      },
+    });
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: '' });
+      }
       if (String(url).includes('geojs')) {
-        throw new Error('should not call IP geo');
+        return jsonResponse({
+          latitude: 6.5,
+          longitude: 3.4,
+          city: 'Lagos',
+        });
       }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
     });
@@ -162,10 +245,38 @@ describe('loadHeaderWeather', () => {
     ).resolves.toEqual({
       kind: 'clear',
       temperatureC: 31,
+      city: 'Lagos',
+    });
+  });
+
+  it('refetches when the hour cache has weather but no city', async () => {
+    sessionStorage.setItem(
+      'africanies-header-weather-v7',
+      JSON.stringify({
+        hour: `${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}-${new Date().getHours()}`,
+        kind: 'cloudy',
+        temperatureC: 25,
+      }),
+    );
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('geojs')) {
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Lagos' });
+      }
+      return jsonResponse({ current: { weather_code: 3, temperature_2m: 25 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'cloudy',
+      temperatureC: 25,
+      city: 'Lagos',
     });
-    expect(
-      fetchFn.mock.calls.some((call) => String(call[0]).includes('geojs')),
-    ).toBe(false);
+    expect(fetchFn).toHaveBeenCalled();
   });
 });