@simplybusiness/mobius 6.3.3 → 6.4.1

package/dist/esm/index.js

@@ -1778,14 +1778,21 @@ var LoqateAddressLookupService = class {
    * 2 or 3 character ISO country codes
    */
   #countries;
+  /**
+   * Optional filters for the Loqate API
+   * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
+   */
+  #filters;
   constructor({
     baseUrl,
     apiKey,
-    countries
+    countries,
+    filters
   }) {
     this.#apiKey = apiKey;
     this.#baseUrl = baseUrl || LOQATE_BASE_URL;
     this.#countries = countries || DEFAULT_COUNTRIES;
+    this.#filters = filters;
   }
   fetchFromApi(url) {
     return fetch(`${this.#baseUrl}${url}`).then((response) => response.json()).then((json) => {
@@ -1795,12 +1802,28 @@ var LoqateAddressLookupService = class {
       return json;
     });
   }
+  /**
+   * Builds the Filters query parameter for Loqate API requests.
+   * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
+   * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
+   *
+   * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
+   */
+  buildFiltersQuery() {
+    if (!this.#filters || Object.keys(this.#filters).length === 0) {
+      return "";
+    }
+    const encodedFilters = Object.entries(this.#filters).map(([key, value]) => `${key}:${encodeURIComponent(value)}`).join("&");
+    return `&Filters=${encodedFilters}`;
+  }
   search(searchTerm) {
-    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
+    url += this.buildFiltersQuery();
     return this.fetchFromApi(url);
   }
   findById(id) {
-    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
+    url += this.buildFiltersQuery();
     return this.fetchFromApi(url);
   }
   async get(id) {

package/dist/types/src/components/AddressLookup/LoqateAddressLookupService.d.ts

@@ -1,12 +1,21 @@
 import type { LoqateAddressDetailsItem, LoqateSearchResponse } from "./types";
 export declare class LoqateAddressLookupService {
     #private;
-    constructor({ baseUrl, apiKey, countries, }: {
+    constructor({ baseUrl, apiKey, countries, filters, }: {
         baseUrl?: string;
         apiKey?: string;
         countries?: string[];
+        filters?: Record<string, string>;
     });
     private fetchFromApi;
+    /**
+     * Builds the Filters query parameter for Loqate API requests.
+     * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
+     * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
+     *
+     * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
+     */
+    private buildFiltersQuery;
     search(searchTerm: string): Promise<LoqateSearchResponse>;
     findById(id: string): Promise<LoqateSearchResponse>;
     get(id: string): Promise<LoqateAddressDetailsItem>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "6.3.3",
+  "version": "6.4.1",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/AddressLookup/LoqateAddressLookupService.test.tsx

@@ -6,6 +6,53 @@ describe("LoqateAddressLookupService", () => {
   const mockBaseUrl = "https://test-api.com";
   const mockCountries = ["GB", "USA"];
 
+  // Helper functions for mock responses
+  const createEmptyMockResponse = () => ({ items: [] });
+
+  const createAddressDetailsMockResponse = (overrides = {}) => ({
+    Items: [
+      {
+        Id: "address123",
+        Type: "Address",
+        City: "Test City",
+        Line1: "Test Line 1",
+        Line2: "Test Line 2",
+        PostalCode: "12345",
+        Label: "Test Label",
+        ...overrides,
+      },
+    ],
+  });
+
+  const createErrorMockResponse = (overrides = {}) => ({
+    Items: [
+      {
+        Error: "Test error code",
+        Description: "Test error",
+        Cause: "Test cause",
+        Resolution: "Test resolution",
+        ...overrides,
+      },
+    ],
+  });
+
+  // Helper function for creating service with filters
+  const createServiceWithFilters = (filters: Record<string, string>) => {
+    return new LoqateAddressLookupService({
+      baseUrl: mockBaseUrl,
+      apiKey: mockApiKey,
+      countries: mockCountries,
+      filters,
+    });
+  };
+
+  // Helper function for mocking fetch responses
+  const mockFetchResponse = (response: unknown) => {
+    (global.fetch as jest.Mock).mockResolvedValueOnce({
+      json: () => Promise.resolve(response),
+    });
+  };
+
   beforeEach(() => {
     global.fetch = jest.fn();
     service = new LoqateAddressLookupService({
@@ -23,10 +70,8 @@ describe("LoqateAddressLookupService", () => {
     const serviceWithDefaultUrl = new LoqateAddressLookupService({
       apiKey: mockApiKey,
     });
-    const mockResponse = { items: [] };
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
-      json: () => Promise.resolve(mockResponse),
-    });
+    const mockResponse = createEmptyMockResponse();
+    mockFetchResponse(mockResponse);
 
     await serviceWithDefaultUrl.search("test");
 
@@ -37,25 +82,21 @@ describe("LoqateAddressLookupService", () => {
 
   describe("find", () => {
     it("calls the correct URL with search term", async () => {
-      const mockResponse = { items: [] };
-      (global.fetch as jest.Mock).mockResolvedValueOnce({
-        json: () => Promise.resolve(mockResponse),
-      });
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
 
-      await service.search("test address");
+      await service.search("123 Main Street");
 
       expect(global.fetch).toHaveBeenCalledWith(
-        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=test address&Countries=GB,USA`,
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=123 Main Street&Countries=GB,USA`,
       );
     });
   });
 
   describe("findById", () => {
     it("calls the correct URL with container ID", async () => {
-      const mockResponse = { items: [] };
-      (global.fetch as jest.Mock).mockResolvedValueOnce({
-        json: () => Promise.resolve(mockResponse),
-      });
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
 
       await service.findById("container123");
 
@@ -67,22 +108,8 @@ describe("LoqateAddressLookupService", () => {
 
   describe("get", () => {
     it("calls the correct URL with ID", async () => {
-      const mockResponse = {
-        Items: [
-          {
-            Id: "address123",
-            Type: "Address",
-            City: "Test City",
-            Line1: "Test Line 1",
-            Line2: "Test Line 2",
-            PostalCode: "12345",
-            Label: "Test Label",
-          },
-        ],
-      };
-      (global.fetch as jest.Mock).mockResolvedValueOnce({
-        json: () => Promise.resolve(mockResponse),
-      });
+      const mockResponse = createAddressDetailsMockResponse();
+      mockFetchResponse(mockResponse);
 
       await service.get("address123");
 
@@ -92,21 +119,131 @@ describe("LoqateAddressLookupService", () => {
     });
   });
 
+  describe("filters functionality", () => {
+    it("includes no filters when filters are not provided", async () => {
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await service.search("456 Oak Avenue");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=456 Oak Avenue&Countries=GB,USA`,
+      );
+    });
+
+    it("includes single filter in search URL", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "NY",
+      });
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.search("789 Broadway");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=789 Broadway&Countries=GB,USA&Filters=AdministrativeArea:NY`,
+      );
+    });
+
+    it("includes multiple filters in search URL", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "CA",
+        PostalCode: "90210",
+      });
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.search("321 Sunset Boulevard");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=321 Sunset Boulevard&Countries=GB,USA&Filters=AdministrativeArea:CA&PostalCode:90210`,
+      );
+    });
+
+    it("encodes filter values with special characters", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "New York",
+        CustomFilter: "100% Match & More",
+      });
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.search("654 Fifth Avenue");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=654 Fifth Avenue&Countries=GB,USA&Filters=AdministrativeArea:New%20York&CustomFilter:100%25%20Match%20%26%20More`,
+      );
+    });
+
+    it("does not encode filter keys", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "NY",
+      });
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.search("987 Park Avenue");
+
+      const calledUrl = (global.fetch as jest.Mock).mock.calls[0][0];
+      expect(calledUrl).toContain("AdministrativeArea:NY");
+      expect(calledUrl).not.toContain("AdministrativeArea%3ANY");
+    });
+
+    it("includes filters in findById URL", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "TX",
+      });
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.findById("container123");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Container=container123&Countries=GB,USA&Filters=AdministrativeArea:TX`,
+      );
+    });
+
+    it("handles empty filters object", async () => {
+      const serviceWithEmptyFilters = createServiceWithFilters({});
+
+      const mockResponse = createEmptyMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithEmptyFilters.search("147 Wall Street");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Find/v1.00/json3.ws?Key=${mockApiKey}&Text=147 Wall Street&Countries=GB,USA`,
+      );
+    });
+
+    it("does not include filters in get URL (retrieve endpoint)", async () => {
+      const serviceWithFilters = createServiceWithFilters({
+        AdministrativeArea: "FL",
+      });
+
+      const mockResponse = createAddressDetailsMockResponse();
+      mockFetchResponse(mockResponse);
+
+      await serviceWithFilters.get("address123");
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${mockBaseUrl}/Retrieve/v1.2/json3.ws?Key=${mockApiKey}&Id=address123`,
+      );
+
+      const calledUrl = (global.fetch as jest.Mock).mock.calls[0][0];
+      expect(calledUrl).not.toContain("Filters");
+    });
+  });
+
   describe("error handling", () => {
     it("propagates API errors", async () => {
-      const errorResponse = {
-        Items: [
-          {
-            Error: "Test error code",
-            Description: "Test error",
-            Cause: "Test cause",
-            Resolution: "Test resolution",
-          },
-        ],
-      };
-      (global.fetch as jest.Mock).mockResolvedValueOnce({
-        json: () => Promise.resolve(errorResponse),
-      });
+      const errorResponse = createErrorMockResponse();
+      mockFetchResponse(errorResponse);
 
       await expect(service.search("test")).rejects.toThrow();
     });

package/src/components/AddressLookup/LoqateAddressLookupService.tsx

@@ -27,18 +27,27 @@ export class LoqateAddressLookupService {
    */
   #countries?: string[];
 
+  /**
+   * Optional filters for the Loqate API
+   * E.g., { AdministrativeArea: "CA", PostalCode: "90210" }
+   */
+  #filters?: Record<string, string>;
+
   constructor({
     baseUrl,
     apiKey,
     countries,
+    filters,
   }: {
     baseUrl?: string;
     apiKey?: string;
     countries?: string[];
+    filters?: Record<string, string>;
   }) {
     this.#apiKey = apiKey;
     this.#baseUrl = baseUrl || LOQATE_BASE_URL;
     this.#countries = countries || DEFAULT_COUNTRIES;
+    this.#filters = filters;
   }
 
   private fetchFromApi<TResponse = unknown>(url: string): Promise<TResponse> {
@@ -52,13 +61,35 @@ export class LoqateAddressLookupService {
       });
   }
 
+  /**
+   * Builds the Filters query parameter for Loqate API requests.
+   * - Filter keys (e.g., "AdministrativeArea", "PostalCode") are predefined by Loqate API (no need to encode)
+   * - Filter values (e.g., "New York", "90210") contain user input that may have special characters (need encoding)
+   *
+   * @returns Empty string if no filters, otherwise "&Filters=key1:value1&key2:value2" (Loqate's expected format for Filters)
+   */
+  private buildFiltersQuery(): string {
+    if (!this.#filters || Object.keys(this.#filters).length === 0) {
+      return "";
+    }
+
+    // Transform Record<string, string> to Loqate's "key:value&key:value" format
+    const encodedFilters = Object.entries(this.#filters)
+      .map(([key, value]) => `${key}:${encodeURIComponent(value)}`)
+      .join("&");
+
+    return `&Filters=${encodedFilters}`;
+  }
+
   search(searchTerm: string): Promise<LoqateSearchResponse> {
-    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Text=${searchTerm}&Countries=${this.#countries?.join(",")}`;
+    url += this.buildFiltersQuery();
     return this.fetchFromApi<LoqateSearchResponse>(url);
   }
 
   findById(id: string): Promise<LoqateSearchResponse> {
-    const url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
+    let url = `${LOQATE_FIND_URL}?Key=${this.#apiKey}&Container=${id}&Countries=${this.#countries?.join(",")}`;
+    url += this.buildFiltersQuery();
     return this.fetchFromApi<LoqateSearchResponse>(url);
   }
 

package/src/components/Alert/Alert.css

@@ -2,7 +2,8 @@
   display: flex;
   flex-grow: 1;
   align-items: center;
-  font-size: var(--font-size-2);
+  font-size: var(--font-size-regular);
+  line-height: var(--line-height-normal);
   color: var(--color-text);
   border: 2px solid;
   border-color: inherit;

package/src/components/Alert/Alert.stories.tsx

@@ -11,6 +11,7 @@ const meta: Meta<typeof Alert> = {
     variant: {
       control: { type: "radio" },
       options: ["info", "success", "warning", "error"],
+      header: { control: "text" },
     },
   },
 };
@@ -33,17 +34,13 @@ export const Default: StoryType = {
 
 export const WithHeader: StoryType = {
   render: (args: AlertProps) => (
-    <Alert {...args}>
-      Today is{" "}
-      {new Intl.DateTimeFormat("en-GB", {
-        dateStyle: "long",
-      }).format(new Date())}
-    </Alert>
+    <Alert {...args}>{args.children || "This is an alert with a header"}</Alert>
   ),
   args: {
     variant: "info",
     show: true,
     header: "Information",
+    children: "This is an alert with a header",
   },
 };