Replacing post code API with package from npm (#3943)

Co-authored-by: Ole Martin Handeland <git@olemartin.org>

Author: olemartinorg

package.json

@@ -163,6 +163,7 @@
     "marked": "16.4.2",
     "marked-mangle": "1.1.12",
     "node-polyfill-webpack-plugin": "4.1.0",
+    "norway-postal-codes": "^4.1.0",
     "react": "19.2.3",
     "react-compiler-webpack": "0.2.1",
     "react-content-loader": "7.1.1",

src/hooks/queries/usePostPlaceQuery.ts

@@ -8,6 +8,16 @@ import { AddressComponent } from 'src/layout/Address/AddressComponent';
 import { renderGenericComponentTest } from 'src/test/renderWithProviders';
 import type { RenderGenericComponentTestProps } from 'src/test/renderWithProviders';
 
+jest.mock('norway-postal-codes', () => ({
+  __esModule: true,
+  default: {
+    '0001': 'OSLO',
+    '0002': 'BERGEN',
+    '1613': 'FREDRIKSTAD',
+    '4609': 'KARDEMOMME BY',
+  },
+}));
+
 const render = async ({ component, ...rest }: Partial<RenderGenericComponentTestProps<'Address'>> = {}) =>
   await renderGenericComponentTest({
     type: 'Address',
@@ -27,18 +37,6 @@ const render = async ({ component, ...rest }: Partial<RenderGenericComponentTest
       ...component,
     },
     ...rest,
-    queries: {
-      fetchPostPlace: async (input) => {
-        if (input === '0001') {
-          return { valid: true, result: 'OSLO' };
-        }
-        if (input === '0002') {
-          return { valid: true, result: 'BERGEN' };
-        }
-        return { valid: false, result: '' };
-      },
-      ...rest.queries,
-    },
   });
 
 describe('AddressComponent', () => {
@@ -113,10 +111,6 @@ describe('AddressComponent', () => {
       },
       queries: {
         fetchFormData: async () => ({ address: 'initial address', zipCode: '0001' }),
-        fetchPostPlace: (zipCode: string) =>
-          zipCode === '0001'
-            ? Promise.resolve({ valid: true, result: 'OSLO' })
-            : Promise.resolve({ valid: false, result: '' }),
       },
     });
 
@@ -167,7 +161,7 @@ describe('AddressComponent', () => {
   });
 
   it('should call dispatch for post place when zip code is cleared', async () => {
-    const { formDataMethods, queries } = await render({
+    const { formDataMethods } = await render({
       queries: {
         fetchFormData: async () => ({ address: 'a', zipCode: '0001', postPlace: 'Oslo' }),
       },
@@ -187,12 +181,10 @@ describe('AddressComponent', () => {
       reference: { field: 'postPlace', dataType: defaultDataTypeMock },
       newValue: '',
     });
-
-    expect(queries.fetchPostPlace).toHaveBeenCalledTimes(1);
   });
 
-  it('should only call fetchPostPlace once at the end, when debouncing', async () => {
-    const { queries } = await render({
+  it('should update post place after typing zip code with debouncing', async () => {
+    await render({
       queries: {
         fetchFormData: async () => ({ address: 'a', zipCode: '', postPlace: '' }),
       },
@@ -202,9 +194,6 @@ describe('AddressComponent', () => {
     await waitFor(() => expect(screen.getByRole('textbox', { name: 'Poststed' })).toHaveDisplayValue('BERGEN'), {
       timeout: 15000,
     });
-
-    expect(queries.fetchPostPlace).toHaveBeenCalledTimes(1);
-    expect(queries.fetchPostPlace).toHaveBeenCalledWith('0002');
   });
 
   it('should display no extra markings when required is false, and labelSettings.optionalIndicator is not true', async () => {

src/layout/Address/AddressComponent.test.tsx

@@ -14,9 +14,9 @@ import { ComponentValidations } from 'src/features/validation/ComponentValidatio
 import { useBindingValidationsFor } from 'src/features/validation/selectors/bindingValidationsForNode';
 import { useComponentValidationsFor } from 'src/features/validation/selectors/componentValidationsForNode';
 import { hasValidationErrors } from 'src/features/validation/utils';
-import { usePostPlaceQuery } from 'src/hooks/queries/usePostPlaceQuery';
 import { useOurEffectEvent } from 'src/hooks/useOurEffectEvent';
 import classes from 'src/layout/Address/AddressComponent.module.css';
+import { usePostPlace } from 'src/layout/Address/usePostPlace';
 import { useItemWhenType } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IDataModelBindingsForAddress } from 'src/layout/Address/config.generated';
@@ -56,7 +56,7 @@ export function AddressComponent({ baseComponentId }: PropsFromGenericComponent<
 
   const zipCodeDebounced = FD.useDebouncedPick(dataModelBindings.zipCode);
   const slowZip = typeof zipCodeDebounced === 'string' ? zipCodeDebounced : undefined;
-  const postPlaceQueryData = usePostPlaceQuery(slowZip, !hasValidationErrors(bindingValidations?.zipCode));
+  const postPlaceQueryData = usePostPlace(slowZip, !hasValidationErrors(bindingValidations?.zipCode));
   useEffect(() => updatePostPlace(postPlaceQueryData), [postPlaceQueryData, updatePostPlace]);
 
   return (

src/layout/Address/AddressComponent.tsx

@@ -0,0 +1,18 @@
+import postalCodes from 'norway-postal-codes';
+
+const __default__ = '';
+
+/**
+ * Looks up the post place for a given zip code using the norway-postal-codes package.
+ * This hook was designed primarily for use in the Address component.
+ */
+export function usePostPlace(zipCode: string | undefined, enabled: boolean) {
+  const _enabled = enabled && Boolean(zipCode?.length) && zipCode !== __default__ && zipCode !== '0';
+
+  if (!_enabled) {
+    return __default__;
+  }
+
+  const postPlace = postalCodes[zipCode!];
+  return postPlace ?? __default__;
+}

src/layout/Address/usePostPlace.ts

@@ -372,14 +372,6 @@ export const fetchLayoutSchema = async (): Promise<JSONSchema7 | undefined> => {
   return (await axios.get(`${schemaBaseUrl}${LAYOUT_SCHEMA_NAME}`)).data ?? undefined;
 };
 
-export const fetchPostPlace = (zipCode: string): Promise<{ result: string; valid: boolean }> =>
-  httpGet('https://api.bring.com/shippingguide/api/postalCode.json', {
-    params: {
-      clientUrl: window.location.href,
-      pnr: zipCode,
-    },
-  });
-
 export function fetchExternalApi({
   instanceId,
   externalApiId,

src/queries/queries.ts

@@ -149,7 +149,6 @@ const defaultQueryMocks: AppQueries = {
   fetchTextResources: async (language) => ({ language, resources: getTextResourcesMock() }),
   fetchLayoutSchema: async () => ({}) as JSONSchema7,
   fetchAppLanguages: async () => [{ language: 'nb' }, { language: 'nn' }, { language: 'en' }],
-  fetchPostPlace: async () => ({ valid: true, result: 'OSLO' }),
   fetchLayoutSettings: async () => ({ pages: { order: [] } }),
   fetchLayouts: () => Promise.reject(new Error('fetchLayouts not mocked')),
   fetchLayoutsForInstance: () => Promise.reject(new Error('fetchLayoutsForInstance not mocked')),

src/test/renderWithProviders.tsx

@@ -270,25 +270,11 @@ describe('UI Components', () => {
   it('address component fetches post place from zip code', () => {
     cy.goto('changename');
 
-    // Mock zip code API, so that we don't rely on external services for our tests
-    cy.intercept('GET', 'https://api.bring.com/shippingguide/api/postalCode.json**', (req) => {
-      req.reply((res) => {
-        res.send({
-          body: {
-            postalCodeType: 'NORMAL',
-            result: 'KARDEMOMME BY', // Intentionally wrong, to test that our mock is used
-            valid: true,
-          },
-        });
-      });
-    }).as('zipCodeApi');
-
     cy.get(appFrontend.changeOfName.address.street_name).type('Sesame Street 1A');
     cy.get(appFrontend.changeOfName.address.street_name).blur();
-    cy.get(appFrontend.changeOfName.address.zip_code).type('0123');
+    cy.get(appFrontend.changeOfName.address.zip_code).type('4609');
     cy.get(appFrontend.changeOfName.address.zip_code).blur();
     cy.get(appFrontend.changeOfName.address.post_place).should('have.value', 'KARDEMOMME BY');
-    cy.get('@zipCodeApi').its('request.url').should('include', '0123');
   });
 
   it('should not be possible to check a readonly checkbox', () => {

test/e2e/integration/frontend-test/components.ts

@@ -15,18 +15,6 @@ describe('saving multiple data models', () => {
   });
 
   it('Calls save on individual data models', () => {
-    cy.intercept('GET', 'https://api.bring.com/shippingguide/api/postalCode.json**', (req) => {
-      req.reply((res) => {
-        res.send({
-          body: {
-            postalCodeType: 'NORMAL',
-            result: 'BARTEBYEN', // Intentionally wrong, to test that our mock is used
-            valid: true,
-          },
-        });
-      });
-    }).as('zipCodeApi');
-
     cy.waitUntilSaved();
     cy.get('@saveFormData.all').should('have.length', 1); // PreselectedOptionIndex
 
@@ -49,14 +37,11 @@ describe('saving multiple data models', () => {
     cy.waitUntilSaved();
     cy.get('@saveFormData.all').should('have.length', 3);
 
-    cy.findByRole('textbox', { name: /postnr/i }).type('7010');
-    cy.findByRole('textbox', { name: /poststed/i }).should('have.value', 'BARTEBYEN');
+    cy.findByRole('textbox', { name: /postnr/i }).type('4609');
+    cy.findByRole('textbox', { name: /poststed/i }).should('have.value', 'KARDEMOMME BY');
 
-    // The number of requests we get here depends on how long time it took for the post code API request to get back
-    // to us and store the data in the data model. It will be 4 (when it was fast) or 5 (when it was slow).
     cy.waitUntilSaved();
-    cy.get('@saveFormData.all').should('have.length.at.least', 4);
-    cy.get('@saveFormData.all').should('have.length.at.most', 5);
+    cy.get('@saveFormData.all').should('have.length', 4);
     cy.get('@saveFormData.all').should(haveTheSameUrls);
 
     cy.get(appFrontend.altinnError).should('not.exist');