diff --git a/cypress/e2e/manufacturer/manufacturer.cy.ts b/cypress/e2e/manufacturer/manufacturer.cy.ts index a208fe733..def80a659 100644 --- a/cypress/e2e/manufacturer/manufacturer.cy.ts +++ b/cypress/e2e/manufacturer/manufacturer.cy.ts @@ -24,15 +24,9 @@ describe('Manufacturer', () => { cy.findByText('http://example.com').should('be.visible'); cy.findByText('http://test.com').should('be.visible'); cy.findByText('http://test.co.uk').should('be.visible'); - cy.findByText('1 Example Street Oxford Oxfordshire OX1 2AB').should( - 'be.visible' - ); - cy.findByText('2 Example Street Oxford Oxfordshire OX1 2AB').should( - 'be.visible' - ); - cy.findByText('3 Example Street Oxford Oxfordshire OX1 2AB').should( - 'be.visible' - ); + cy.findByText('07334893348').should('be.visible'); + cy.findByText('07294958549').should('be.visible'); + cy.findByText('07934303412').should('be.visible'); }); it('manufacturer url is correct and opens new webpage', () => { @@ -52,8 +46,8 @@ describe('Manufacturer', () => { cy.findByRole('button', { name: 'Add Manufacturer' }).click(); cy.findByLabelText('Name *').type('Manufacturer D'); cy.findByLabelText('URL').type('http://test.co.uk'); - cy.findByLabelText('Building number *').type('1'); - cy.findByLabelText('Street name *').type('Example Street'); + cy.findByLabelText('Country *').type('United Kingdom'); + cy.findByLabelText('Address Line *').type('4 Example Street'); cy.findByLabelText('Town').type('Oxford'); cy.findByLabelText('County').type('Oxfordshire'); cy.findByLabelText('Post/Zip code *').type('OX1 2AB'); @@ -70,7 +64,7 @@ describe('Manufacturer', () => { expect(patchRequests.length).equal(1); const request = patchRequests[0]; expect(JSON.stringify(request.body)).equal( - '{"name":"Manufacturer D","url":"http://test.co.uk","address":{"building_number":"1","street_name":"Example Street","town":"Oxford","county":"Oxfordshire","postcode":"OX1 2AB"},"telephone":"07349612203"}' + '{"name":"Manufacturer D","url":"http://test.co.uk","address":{"address_line":"4 Example Street","town":"Oxford","county":"Oxfordshire","postcode":"OX1 2AB","country":"United Kingdom"},"telephone":"07349612203"}' ); }); }); @@ -78,8 +72,8 @@ describe('Manufacturer', () => { it('adds a manufacturer with only mandatory fields', () => { cy.findByRole('button', { name: 'Add Manufacturer' }).click(); cy.findByLabelText('Name *').type('Manufacturer D'); - cy.findByLabelText('Building number *').type('1'); - cy.findByLabelText('Street name *').type('Example Street'); + cy.findByLabelText('Country *').type('United Kingdom'); + cy.findByLabelText('Address Line *').type('4 Example Street'); cy.findByLabelText('Post/Zip code *').type('OX1 2AB'); cy.startSnoopingBrowserMockedRequest(); @@ -93,7 +87,7 @@ describe('Manufacturer', () => { expect(patchRequests.length).equal(1); const request = patchRequests[0]; expect(JSON.stringify(request.body)).equal( - '{"name":"Manufacturer D","address":{"building_number":"1","street_name":"Example Street","town":"","county":"","postcode":"OX1 2AB"},"telephone":""}' + '{"name":"Manufacturer D","address":{"address_line":"4 Example Street","town":null,"county":null,"postcode":"OX1 2AB","country":"United Kingdom"},"telephone":null}' ); }); @@ -108,12 +102,12 @@ describe('Manufacturer', () => { cy.findByRole('dialog') .should('be.visible') .within(() => { - cy.contains('Please enter a building number.'); + cy.contains('Please enter a country.'); }); cy.findByRole('dialog') .should('be.visible') .within(() => { - cy.contains('Please enter a street name.'); + cy.contains('Please enter an address.'); }); cy.findByRole('dialog') .should('be.visible') @@ -122,11 +116,10 @@ describe('Manufacturer', () => { }); }); it('displays error message when duplicate name entered', () => { - cy.findByTestId('Add Manufacturer').click(); + cy.findByRole('button', { name: 'Add Manufacturer' }).click(); cy.findByLabelText('Name *').type('Manufacturer A'); - cy.findByLabelText('Building number *').type('1'); - cy.findByLabelText('Street name *').type('Example Street'); - cy.findByLabelText('Post/Zip code *').type('OX1 2AB'); + cy.findByLabelText('Country *').type('United Kingdom'); + cy.findByLabelText('Address Line *').type('4 Example Street'); cy.findByRole('button', { name: 'Save' }).click(); cy.findByRole('dialog') @@ -184,14 +177,14 @@ describe('Manufacturer', () => { cy.findByRole('button', { name: 'Edit Manufacturer A manufacturer', }).click(); - cy.findByLabelText('Name').clear(); - cy.findByLabelText('Name').type('test'); + cy.findByLabelText('Name *').clear(); + cy.findByLabelText('Name *').type('test'); - cy.findByLabelText('Building number').clear(); - cy.findByLabelText('Building number').type('100'); + cy.findByLabelText('Country *').clear(); + cy.findByLabelText('Country *').type('test'); - cy.findByLabelText('Street name').clear(); - cy.findByLabelText('Street name').type('test'); + cy.findByLabelText('Address Line *').clear(); + cy.findByLabelText('Address Line *').type('test'); cy.findByLabelText('Town').clear(); cy.findByLabelText('Town').type('test'); @@ -199,8 +192,8 @@ describe('Manufacturer', () => { cy.findByLabelText('County').clear(); cy.findByLabelText('County').type('test'); - cy.findByLabelText('Post/Zip code').clear(); - cy.findByLabelText('Post/Zip code').type('test'); + cy.findByLabelText('Post/Zip code *').clear(); + cy.findByLabelText('Post/Zip code *').type('test'); cy.findByLabelText('Telephone number').clear(); cy.findByLabelText('Telephone number').type('0000000000'); @@ -216,7 +209,7 @@ describe('Manufacturer', () => { expect(patchRequests.length).equal(1); const request = patchRequests[0]; expect(JSON.stringify(request.body)).equal( - '{"name":"test","address":{"building_number":"100","street_name":"test","town":"test","county":"test","postcode":"test"},"telephone":"0000000000"}' + '{"name":"test","address":{"address_line":"test","town":"test","county":"test","postcode":"test","country":"test"},"telephone":"0000000000"}' ); }); }); @@ -226,8 +219,8 @@ describe('Manufacturer', () => { name: 'Edit Manufacturer A manufacturer', }).click(); - cy.findByLabelText('Name').clear(); - cy.findByLabelText('Name').type('test_dup'); + cy.findByLabelText('Name *').clear(); + cy.findByLabelText('Name *').type('test_dup'); cy.findByRole('button', { name: 'Save' }).click(); @@ -278,10 +271,10 @@ describe('Manufacturer', () => { name: 'Edit Manufacturer A manufacturer', }).click(); - cy.findByLabelText('Name').clear(); - cy.findByLabelText('Building number').clear(); - cy.findByLabelText('Street name').clear(); - cy.findByLabelText('Post/Zip code').clear(); + cy.findByLabelText('Name *').clear(); + cy.findByLabelText('Country *').clear(); + cy.findByLabelText('Address Line *').clear(); + cy.findByLabelText('Post/Zip code *').clear(); cy.findByRole('button', { name: 'Save' }).click(); cy.findByRole('dialog') @@ -292,12 +285,12 @@ describe('Manufacturer', () => { cy.findByRole('dialog') .should('be.visible') .within(() => { - cy.contains('Please enter a building number.'); + cy.contains('Please enter a country.'); }); cy.findByRole('dialog') .should('be.visible') .within(() => { - cy.contains('Please enter a street name.'); + cy.contains('Please enter an address.'); }); cy.findByRole('dialog') .should('be.visible') diff --git a/src/api/manufacturer.test.tsx b/src/api/manufacturer.test.tsx index 644760adb..dea108d38 100644 --- a/src/api/manufacturer.test.tsx +++ b/src/api/manufacturer.test.tsx @@ -1,5 +1,5 @@ import { renderHook, waitFor } from '@testing-library/react'; -import { AddManufacturer, Manufacturer } from '../app.types'; +import { Manufacturer } from '../app.types'; import { hooksWrapperWithProviders } from '../setupTests'; import { useAddManufacturer, @@ -13,17 +13,17 @@ describe('manufacturer api functions', () => { }); describe('useAddManufacturer', () => { - let mockDataAdd: AddManufacturer; + let mockDataAdd: Manufacturer; beforeEach(() => { mockDataAdd = { name: 'Manufacturer D', url: 'http://test.co.uk', address: { - building_number: '1', - street_name: 'Example', + address_line: '4 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07349612203', }; @@ -43,11 +43,11 @@ describe('manufacturer api functions', () => { code: 'manufacturer-d', url: 'http://test.co.uk', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '4 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07349612203', id: '4', @@ -63,17 +63,17 @@ describe('manufacturer api functions', () => { let mockDataView: Manufacturer; beforeEach(() => { mockDataView = { + id: '1', name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', - id: '1', }; }); it('posts a request to delete a manufacturer and return a successful response', async () => { @@ -110,11 +110,11 @@ describe('manufacturer api functions', () => { code: 'manufacturer-a', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, @@ -124,11 +124,11 @@ describe('manufacturer api functions', () => { code: 'manufacturer-b', url: 'http://test.com', address: { - building_number: '2', - street_name: 'Example Street', + address_line: '2 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07294958549', }, @@ -138,11 +138,11 @@ describe('manufacturer api functions', () => { code: 'manufacturer-c', url: 'http://test.co.uk', address: { - building_number: '3', - street_name: 'Example Street', + address_line: '3 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07934303412', }, diff --git a/src/api/manufacturer.tsx b/src/api/manufacturer.tsx index 925c08e5a..29c6c2136 100644 --- a/src/api/manufacturer.tsx +++ b/src/api/manufacturer.tsx @@ -8,12 +8,7 @@ import { } from '@tanstack/react-query'; import { settings } from '../settings'; -import { - AddManufacturer, - AddManufacturerResponse, - EditManufacturer, - Manufacturer, -} from '../app.types'; +import { AddManufacturer, Manufacturer, EditManufacturer } from '../app.types'; const getAllManufacturers = async (): Promise => { let apiUrl: string; @@ -47,7 +42,7 @@ export const useManufacturers = (): UseQueryResult< const addManufacturer = async ( manufacturer: AddManufacturer -): Promise => { +): Promise => { let apiUrl: string; apiUrl = ''; const settingsResult = await settings; @@ -55,12 +50,12 @@ const addManufacturer = async ( apiUrl = settingsResult['apiUrl']; } return axios - .post(`${apiUrl}/v1/manufacturers`, manufacturer) + .post(`${apiUrl}/v1/manufacturers`, manufacturer) .then((response) => response.data); }; export const useAddManufacturer = (): UseMutationResult< - AddManufacturerResponse, + Manufacturer, AxiosError, AddManufacturer > => { diff --git a/src/app.types.tsx b/src/app.types.tsx index 9ef13bd1f..b4160fd37 100644 --- a/src/app.types.tsx +++ b/src/app.types.tsx @@ -38,36 +38,31 @@ export interface CatalogueCategory { is_leaf: boolean; catalogue_item_properties?: CatalogueCategoryFormData[]; } + export interface AddManufacturer { name: string; - url?: string; - address: Address | undefined; - telephone?: string; -} - -export interface AddManufacturerResponse { - id: string; - name: string; - url: string; - address: Address; - telephone: string; - code: string; + url?: string | null; + address: AddAddress; + telephone?: string | null; } export interface EditManufacturer { name?: string; - url?: string; + url?: string | null; address?: EditAddress; - telephone?: string; - id?: string; + telephone?: string | null; + id?: string | null; } -export interface Manufacturer { - id?: string; +export interface ManufacturerDetails { name: string; - url?: string; - address: Address; - telephone: string; + url?: string | null; + address: AddAddress; + telephone: string | null; +} + +export interface Manufacturer extends ManufacturerDetails { + id: string; } export interface CatalogueCategoryFormData { @@ -143,20 +138,19 @@ export interface ErrorParsing { detail: string; } -interface Address { - building_number: string; - street_name: string; - town?: string; - county?: string; +interface AddAddress { + address_line: string; + town?: string | null; + county?: string | null; postcode: string; + country: string; } - interface EditAddress { - building_number?: string; - street_name?: string; - town?: string; - county?: string; + address_line?: string; + town?: string | null; + county?: string | null; postcode?: string; + country?: string; } export interface CatalogueCategoryTransferState { name: string; diff --git a/src/manufacturer/DeleteManufacturerDialog.test.tsx b/src/manufacturer/DeleteManufacturerDialog.test.tsx index adb5ab8e2..34e947fe2 100644 --- a/src/manufacturer/DeleteManufacturerDialog.test.tsx +++ b/src/manufacturer/DeleteManufacturerDialog.test.tsx @@ -21,11 +21,11 @@ describe('Delete Manufacturer Dialog', () => { name: 'test', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '056896598', id: '1', diff --git a/src/manufacturer/manufacturer.component.test.tsx b/src/manufacturer/manufacturer.component.test.tsx index c4c090ef9..dce02ab20 100644 --- a/src/manufacturer/manufacturer.component.test.tsx +++ b/src/manufacturer/manufacturer.component.test.tsx @@ -36,15 +36,6 @@ describe('Manufacturer', () => { expect(screen.getByText('http://example.com')).toBeInTheDocument(); expect(screen.getByText('http://test.com')).toBeInTheDocument(); expect(screen.getByText('http://test.co.uk')).toBeInTheDocument(); - expect( - screen.getByText('1 Example Street Oxford Oxfordshire OX1 2AB') - ).toBeInTheDocument(); - expect( - screen.getByText('2 Example Street Oxford Oxfordshire OX1 2AB') - ).toBeInTheDocument(); - expect( - screen.getByText('3 Example Street Oxford Oxfordshire OX1 2AB') - ).toBeInTheDocument(); expect(screen.getByText('07334893348')).toBeInTheDocument(); expect(screen.getByText('07294958549')).toBeInTheDocument(); expect(screen.getByText('07934303412')).toBeInTheDocument(); diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx index 163f2db8f..116bdb461 100644 --- a/src/manufacturer/manufacturer.component.tsx +++ b/src/manufacturer/manufacturer.component.tsx @@ -17,22 +17,23 @@ import EditIcon from '@mui/icons-material/Edit'; import React from 'react'; import { useManufacturers } from '../api/manufacturer'; import DeleteManufacturerDialog from './deleteManufacturerDialog.component'; -import { Manufacturer } from '../app.types'; +import { Manufacturer, ManufacturerDetails } from '../app.types'; import ManufacturerDialog from './manufacturerDialog.component'; function ManufacturerComponent() { - const [manufacturer, setManufacturer] = React.useState({ - name: '', - url: undefined, - address: { - building_number: '', - street_name: '', - town: '', - county: '', - postcode: '', - }, - telephone: '', - }); + const [manufacturerDetails, setManufacturerDetails] = + React.useState({ + name: '', + url: undefined, + address: { + address_line: '', + town: null, + county: null, + postcode: '', + country: '', + }, + telephone: null, + }); const [editManufacturerDialogOpen, setEditManufacturerDialogOpen] = React.useState(false); @@ -72,15 +73,15 @@ function ManufacturerComponent() { setAddManufacturerDialogOpen(false)} - manufacturer={manufacturer} - onChangeManufacturerDetails={setManufacturer} + manufacturerDetails={manufacturerDetails} + onChangeManufacturerDetails={setManufacturerDetails} type="create" /> setEditManufacturerDialogOpen(false)} - manufacturer={manufacturer} - onChangeManufacturerDetails={setManufacturer} + manufacturerDetails={manufacturerDetails} + onChangeManufacturerDetails={setManufacturerDetails} type="edit" selectedManufacturer={selectedManufacturer} /> @@ -164,7 +165,7 @@ function ManufacturerComponent() { onClick={() => { setEditManufacturerDialogOpen(true); setSelectedManufacturer(item); - setManufacturer(item); + setManufacturerDetails(item); }} > @@ -196,9 +197,11 @@ function ManufacturerComponent() { borderRight: '1px solid #e0e0e0', }} > - - {item.url} - + {item.url && ( + + {item.url} + + )} - {item.address.building_number + - ' \n' + - item.address.street_name + - ' \n' + - item.address.town + - ' \n' + - item.address.county + - ' \n' + - item.address.postcode} + + {item.address.address_line} + + + {item.address.town ?? ''} + + + {item.address.county ?? ''} + + + {item.address.country} + + + {item.address.postcode} + { open: true, onClose: onClose, onChangeManufacturerDetails: onChangeManufacturerDetails, - manufacturer: { + manufacturerDetails: { name: '', url: undefined, address: { - building_number: '', - street_name: '', - town: '', - county: '', + address_line: '', + town: null, + county: null, postcode: '', + country: '', }, - telephone: '', + telephone: null, }, type: 'create', }; @@ -46,8 +46,8 @@ describe('Add manufacturer dialog', () => { createView(); expect(screen.getByLabelText('Name *')).toBeInTheDocument(); expect(screen.getByLabelText('URL')).toBeInTheDocument(); - expect(screen.getByLabelText('Building number *')).toBeInTheDocument(); - expect(screen.getByLabelText('Street name *')).toBeInTheDocument(); + expect(screen.getByLabelText('Country *')).toBeInTheDocument(); + expect(screen.getByLabelText('Address Line *')).toBeInTheDocument(); expect(screen.getByLabelText('Town')).toBeInTheDocument(); expect(screen.getByLabelText('County')).toBeInTheDocument(); expect(screen.getByLabelText('Post/Zip code *')).toBeInTheDocument(); @@ -55,16 +55,15 @@ describe('Add manufacturer dialog', () => { }); it('adds manufacturer correctly', async () => { - props.manufacturer = { + props.manufacturerDetails = { name: 'Manufacturer D', - url: 'http://test.co.uk', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '4 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07349612203', }; @@ -74,16 +73,16 @@ describe('Add manufacturer dialog', () => { await user.click(saveButton); expect(axiosPostSpy).toHaveBeenCalledWith('/v1/manufacturers', { + name: 'Manufacturer D', + url: 'http://test.co.uk', address: { - building_number: '1', + address_line: '4 Example Street', + town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', - street_name: 'Example Street', - town: 'Oxford', + country: 'United Kingdom', }, - name: 'Manufacturer D', telephone: '07349612203', - url: 'http://test.co.uk', }); expect(onClose).toHaveBeenCalled(); @@ -100,16 +99,15 @@ describe('Add manufacturer dialog', () => { }); it('duplicate manufacturer name displays warning message', async () => { - props.manufacturer = { + props.manufacturerDetails = { name: 'Manufacturer A', - url: 'http://test.co.uk', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '4 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07349612203', }; @@ -134,10 +132,8 @@ describe('Add manufacturer dialog', () => { await user.click(saveButton); expect(screen.getByText('Please enter a name.')).toBeInTheDocument(); - expect( - screen.getByText('Please enter a building number.') - ).toBeInTheDocument(); - expect(screen.getByText('Please enter a street name.')).toBeInTheDocument(); + expect(screen.getByText('Please enter a country.')).toBeInTheDocument(); + expect(screen.getByText('Please enter an address.')).toBeInTheDocument(); expect( screen.getByText('Please enter a post code or zip code.') ).toBeInTheDocument(); @@ -145,16 +141,15 @@ describe('Add manufacturer dialog', () => { }); it('invalid url displays error', async () => { - props.manufacturer = { - name: 'Manufacturer A', - + props.manufacturerDetails = { + name: 'Manufacturer D', url: 'invalid', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '4 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07349612203', }; @@ -180,7 +175,7 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, name: newManufacturerName, }); }); @@ -197,48 +192,48 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, url: newManufacturerURL, }); }); - it('handles manufacturer building number input correctly', async () => { - const newManufacturerBuildingNumber = 'Test'; + it('handles manufacturer country input correctly', async () => { + const newManufacturerCountry = 'Test'; createView(); - const manufacturerBuildingNumberInput = - screen.getByLabelText('Building number *'); + const manufacturerCountryInput = screen.getByLabelText('Country *'); - fireEvent.change(manufacturerBuildingNumberInput, { - target: { value: newManufacturerBuildingNumber }, + fireEvent.change(manufacturerCountryInput, { + target: { value: newManufacturerCountry }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, - building_number: newManufacturerBuildingNumber, + ...props.manufacturerDetails.address, + country: newManufacturerCountry, }, }); }); - it('handles manufacturer street name input correctly', async () => { - const newManufacturerStreetName = 'Test'; + it('handles manufacturer address line input correctly', async () => { + const newManufacturerAddressLine = 'Test'; createView(); - const manufacturerStreetNameInput = screen.getByLabelText('Street name *'); + const manufacturerAddressLineInput = + screen.getByLabelText('Address Line *'); - fireEvent.change(manufacturerStreetNameInput, { - target: { value: newManufacturerStreetName }, + fireEvent.change(manufacturerAddressLineInput, { + target: { value: newManufacturerAddressLine }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, - street_name: newManufacturerStreetName, + ...props.manufacturerDetails.address, + address_line: newManufacturerAddressLine, }, }); }); @@ -255,8 +250,11 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, - address: { ...props.manufacturer.address, town: newManufacturerTown }, + ...props.manufacturerDetails, + address: { + ...props.manufacturerDetails.address, + town: newManufacturerTown, + }, }); }); @@ -272,9 +270,9 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, + ...props.manufacturerDetails.address, county: newManufacturerCounty, }, }); @@ -292,9 +290,9 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, + ...props.manufacturerDetails.address, postcode: newManufacturerpostcode, }, }); @@ -313,7 +311,7 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, telephone: newManufacturerTelephone, }); }); @@ -337,24 +335,25 @@ describe('Add manufacturer dialog', () => { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, }; - props.manufacturer = { + props.manufacturerDetails = { name: 'test', + url: 'https://test.co.uk', address: { - building_number: '100', - street_name: 'test', + address_line: 'test', town: 'test', county: 'test', postcode: 'test', + country: 'test', }, telephone: '0000000000', }; @@ -367,12 +366,13 @@ describe('Add manufacturer dialog', () => { expect(axiosPatchSpy).toHaveBeenCalledWith('/v1/manufacturers/1', { name: 'test', + url: 'https://test.co.uk', address: { - building_number: '100', - street_name: 'test', + address_line: 'test', town: 'test', county: 'test', postcode: 'test', + country: 'test', }, telephone: '0000000000', }); @@ -388,23 +388,23 @@ describe('Add manufacturer dialog', () => { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, - manufacturer: { + manufacturerDetails: { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, @@ -426,15 +426,15 @@ describe('Add manufacturer dialog', () => { it('Invalid url displays correct error message', async () => { props = { ...props, - manufacturer: { + manufacturerDetails: { name: 'test', url: 'invalid', address: { - building_number: '100', - street_name: 'test', + address_line: 'test', town: 'test', county: 'test', postcode: 'test', + country: 'test', }, telephone: '0000000000', }, @@ -443,11 +443,11 @@ describe('Add manufacturer dialog', () => { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, @@ -465,14 +465,15 @@ describe('Add manufacturer dialog', () => { it('Duplicate name displays error message', async () => { props = { ...props, - manufacturer: { + manufacturerDetails: { name: 'test_dup', + url: 'https://test.co.uk', address: { - building_number: '100', - street_name: 'test', + address_line: 'test', town: 'test', county: 'test', postcode: 'test', + country: 'test', }, telephone: '0000000000', }, @@ -481,11 +482,11 @@ describe('Add manufacturer dialog', () => { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, @@ -507,27 +508,28 @@ describe('Add manufacturer dialog', () => { it('Required fields show error if they are whitespace or current value just removed', async () => { props = { ...props, - manufacturer: { + manufacturerDetails: { name: '', + url: 'https://test.co.uk', address: { - building_number: '', - street_name: '', - town: 'test', - county: 'test', + address_line: '', + town: '', + county: '', postcode: '', + country: '', }, - telephone: '0000000000', + telephone: '', }, selectedManufacturer: { id: '1', name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, @@ -540,12 +542,8 @@ describe('Add manufacturer dialog', () => { await user.click(saveButton); expect(screen.getByText('Please enter a name.')).toBeInTheDocument(); - expect( - screen.getByText('Please enter a building number.') - ).toBeInTheDocument(); - expect( - screen.getByText('Please enter a street name.') - ).toBeInTheDocument(); + expect(screen.getByText('Please enter a country.')).toBeInTheDocument(); + expect(screen.getByText('Please enter an address.')).toBeInTheDocument(); expect( screen.getByText('Please enter a post code or zip code.') ).toBeInTheDocument(); @@ -555,14 +553,15 @@ describe('Add manufacturer dialog', () => { it('CatchAllError request works correctly and displays refresh page message', async () => { props = { ...props, - manufacturer: { + manufacturerDetails: { name: 'Error 500', + url: 'https://test.co.uk', address: { - building_number: '100', - street_name: 'test', + address_line: 'test', town: 'test', county: 'test', postcode: 'test', + country: 'test', }, telephone: '0000000000', }, @@ -571,16 +570,15 @@ describe('Add manufacturer dialog', () => { name: 'Manufacturer A', url: 'http://example.com', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '1 Example Street', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', + country: 'United Kingdom', }, telephone: '07334893348', }, }; - createView(); const saveButton = screen.getByRole('button', { name: 'Save' }); @@ -607,14 +605,14 @@ describe('Add manufacturer dialog', () => { createView(); - const manufacturerNameInput = screen.getByLabelText('Name'); + const manufacturerNameInput = screen.getByLabelText('Name *'); fireEvent.change(manufacturerNameInput, { target: { value: newManufacturerName }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, name: newManufacturerName, }); }); @@ -631,48 +629,48 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, url: newManufacturerURL, }); }); - it('handles manufacturer building number input correctly', async () => { - const newManufacturerBuildingNumber = 'Test'; + it('handles manufacturer country input correctly', async () => { + const newManufacturerCountry = 'Test'; createView(); - const manufacturerBuildingNumberInput = - screen.getByLabelText('Building number'); + const manufacturerCountryInput = screen.getByLabelText('Country *'); - fireEvent.change(manufacturerBuildingNumberInput, { - target: { value: newManufacturerBuildingNumber }, + fireEvent.change(manufacturerCountryInput, { + target: { value: newManufacturerCountry }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, - building_number: newManufacturerBuildingNumber, + ...props.manufacturerDetails.address, + country: newManufacturerCountry, }, }); }); - it('handles manufacturer street name input correctly', async () => { - const newManufacturerStreetName = 'Test'; + it('handles manufacturer address line input correctly', async () => { + const newManufacturerAddressLine = 'Test'; createView(); - const manufacturerStreetNameInput = screen.getByLabelText('Street name'); + const manufacturerStreetNameInput = + screen.getByLabelText('Address Line *'); fireEvent.change(manufacturerStreetNameInput, { - target: { value: newManufacturerStreetName }, + target: { value: newManufacturerAddressLine }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, - street_name: newManufacturerStreetName, + ...props.manufacturerDetails.address, + address_line: newManufacturerAddressLine, }, }); }); @@ -689,8 +687,11 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, - address: { ...props.manufacturer.address, town: newManufacturerTown }, + ...props.manufacturerDetails, + address: { + ...props.manufacturerDetails.address, + town: newManufacturerTown, + }, }); }); @@ -706,9 +707,9 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, + ...props.manufacturerDetails.address, county: newManufacturerCounty, }, }); @@ -719,16 +720,17 @@ describe('Add manufacturer dialog', () => { createView(); - const manufacturerpostcodeInput = screen.getByLabelText('Post/Zip code'); + const manufacturerpostcodeInput = + screen.getByLabelText('Post/Zip code *'); fireEvent.change(manufacturerpostcodeInput, { target: { value: newManufacturerpostcode }, }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, address: { - ...props.manufacturer.address, + ...props.manufacturerDetails.address, postcode: newManufacturerpostcode, }, }); @@ -747,7 +749,7 @@ describe('Add manufacturer dialog', () => { }); expect(onChangeManufacturerDetails).toHaveBeenCalledWith({ - ...props.manufacturer, + ...props.manufacturerDetails, telephone: newManufacturerTelephone, }); }); diff --git a/src/manufacturer/manufacturerDialog.component.tsx b/src/manufacturer/manufacturerDialog.component.tsx index ef78ba2af..ee02dbf73 100644 --- a/src/manufacturer/manufacturerDialog.component.tsx +++ b/src/manufacturer/manufacturerDialog.component.tsx @@ -15,9 +15,10 @@ import React from 'react'; import { AddManufacturer, + Manufacturer, EditManufacturer, ErrorParsing, - Manufacturer, + ManufacturerDetails, } from '../app.types'; import { useAddManufacturer, @@ -29,8 +30,10 @@ import { AxiosError } from 'axios'; export interface ManufacturerDialogProps { open: boolean; onClose: () => void; - onChangeManufacturerDetails: (manufacturer: Manufacturer) => void; - manufacturer: Manufacturer; + onChangeManufacturerDetails: ( + manufacturerDetails: ManufacturerDetails + ) => void; + manufacturerDetails: ManufacturerDetails; selectedManufacturer?: Manufacturer; type: 'edit' | 'create'; } @@ -50,38 +53,40 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { const { open, onClose, - manufacturer, + manufacturerDetails, onChangeManufacturerDetails, - type, selectedManufacturer, + type, } = props; - const [nameError, setNameError] = React.useState(false); const [nameErrorMessage, setNameErrorMessage] = React.useState< string | undefined >(undefined); - const [urlError, seturlError] = React.useState(false); - const [urlErrorMessage, seturlErrorMessage] = React.useState< + const nameError = nameErrorMessage !== undefined; + + const [urlErrorMessage, setUrlErrorMessage] = React.useState< string | undefined >(undefined); - const [addressBuildingNumberError, setAddressBuildingNumberError] = - React.useState(false); - const [ - addressBuildingNumberErrorMessage, - setAddressBuildingNumberErrorMessage, - ] = React.useState(undefined); - const [addressStreetNameError, setAddressStreetNameError] = - React.useState(false); - const [addressStreetNameErrorMessage, setaddressStreetNameErrorMessage] = - React.useState(undefined); - const [addressPostcodeError, setaddressPostcodeError] = React.useState(false); - const [addressPostcodeErrorMessage, setaddressPostcodeErrorMessage] = + const urlError = urlErrorMessage !== undefined; + + const [addressLineErrorMessage, setAddressLineErrorMessage] = React.useState< + string | undefined + >(undefined); + const addressLineError = addressLineErrorMessage !== undefined; + + const [addressPostcodeErrorMessage, setAddressPostcodeErrorMessage] = React.useState(undefined); + const addressPostcodeError = addressPostcodeErrorMessage !== undefined; + + const [countryErrorMessage, setCountryErrorMessage] = React.useState< + string | undefined + >(undefined); + const countryError = countryErrorMessage !== undefined; - const [formError, setFormError] = React.useState(false); const [formErrorMessage, setFormErrorMessage] = React.useState< string | undefined >(undefined); + const formError = formErrorMessage !== undefined; const [catchAllError, setCatchAllError] = React.useState(false); @@ -96,25 +101,19 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { name: '', url: undefined, address: { - building_number: '', - street_name: '', - town: '', - county: '', + address_line: '', + town: null, + county: null, postcode: '', + country: '', }, - telephone: '', + telephone: null, }); - setNameError(false); setNameErrorMessage(undefined); - seturlError(false); - seturlErrorMessage(undefined); - setAddressBuildingNumberError(false); - setAddressBuildingNumberErrorMessage(undefined); - setAddressStreetNameError(false); - setaddressStreetNameErrorMessage(undefined); - setaddressPostcodeError(false); - setaddressPostcodeErrorMessage(undefined); - setFormError(false); + setUrlErrorMessage(undefined); + setAddressLineErrorMessage(undefined); + setCountryErrorMessage(undefined); + setAddressPostcodeErrorMessage(undefined); setFormErrorMessage(undefined); onClose(); }, [onClose, onChangeManufacturerDetails]); @@ -123,56 +122,55 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { let hasErrors = false; //check url is valid - if (manufacturer.url) { - if (!isValidUrl(manufacturer.url)) { + if ( + manufacturerDetails.url || + manufacturerDetails.url?.trim().length === 0 + ) { + if (!isValidUrl(manufacturerDetails.url)) { hasErrors = true; - seturlError(true); - seturlErrorMessage('Please enter a valid URL'); + setUrlErrorMessage('Please enter a valid URL'); } } //check name - if (!manufacturer.name || manufacturer.name?.trim().length === 0) { + if ( + !manufacturerDetails.name || + manufacturerDetails.name?.trim().length === 0 + ) { hasErrors = true; - setNameError(true); setNameErrorMessage('Please enter a name.'); } - //check building number + //check address line if ( - !manufacturer.address?.building_number || - manufacturer.address.building_number.trim().length === 0 + !manufacturerDetails.address?.address_line || + manufacturerDetails.address.address_line.trim().length === 0 ) { hasErrors = true; - setAddressBuildingNumberError(true); - setAddressBuildingNumberErrorMessage('Please enter a building number.'); + + setAddressLineErrorMessage('Please enter an address.'); } - //check street name + + //check post code if ( - !manufacturer.address?.street_name || - manufacturer.address.street_name?.trim().length === 0 + !manufacturerDetails.address?.postcode || + manufacturerDetails.address.postcode?.trim().length === 0 ) { hasErrors = true; - setAddressStreetNameError(true); - setaddressStreetNameErrorMessage('Please enter a street name.'); + + setAddressPostcodeErrorMessage('Please enter a post code or zip code.'); } - //check post code + //check country if ( - !manufacturer.address?.postcode || - manufacturer.address.postcode?.trim().length === 0 + !manufacturerDetails.address?.country || + manufacturerDetails.address.country?.trim().length === 0 ) { hasErrors = true; - setaddressPostcodeError(true); - setaddressPostcodeErrorMessage('Please enter a post code or zip code.'); + + setCountryErrorMessage('Please enter a country.'); } return hasErrors; - }, [ - manufacturer.address.building_number, - manufacturer.address.postcode, - manufacturer.address.street_name, - manufacturer.name, - manufacturer.url, - ]); + }, [manufacturerDetails]); const handleAddManufacturer = React.useCallback(() => { const hasErrors = handleErrors(); @@ -182,25 +180,24 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { } const manufacturerToAdd: AddManufacturer = { - name: manufacturer.name, - url: manufacturer.url ?? undefined, + name: manufacturerDetails.name, + url: manufacturerDetails.url ?? undefined, address: { - building_number: manufacturer.address.building_number, - street_name: manufacturer.address.street_name, - town: manufacturer.address.town ?? undefined, - county: manufacturer.address.county ?? undefined, - postcode: manufacturer.address.postcode, + address_line: manufacturerDetails.address.address_line, + town: manufacturerDetails.address.town ?? null, + county: manufacturerDetails.address.county ?? null, + postcode: manufacturerDetails.address.postcode, + country: manufacturerDetails.address.country, }, - telephone: manufacturer.telephone ?? undefined, + telephone: manufacturerDetails.telephone ?? null, }; addManufacturer(manufacturerToAdd) .then((response) => handleClose()) .catch((error: AxiosError) => { - console.log(error.response?.status, manufacturer.name); + console.log(error.response?.status, manufacturerDetails.name); if (error.response?.status === 409) { - setNameError(true); setNameErrorMessage( 'A manufacturer with the same name already exists.' ); @@ -208,67 +205,59 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { } setCatchAllError(true); }); - }, [handleErrors, manufacturer, addManufacturer, handleClose]); + }, [handleErrors, manufacturerDetails, addManufacturer, handleClose]); const handleEditManufacturer = React.useCallback(() => { - if (selectedManufacturer && selectedManufacturerData) { + if (manufacturerDetails && selectedManufacturerData) { const hasErrors = handleErrors(); if (hasErrors) { return; } - const isNameUpdated = manufacturer.name !== selectedManufacturer.name; + const isNameUpdated = + manufacturerDetails.name !== selectedManufacturerData.name; + const isURLUpdated = - manufacturer.url !== selectedManufacturer.url && - manufacturer.url !== undefined; - const isBuildingNumberUpdated = - manufacturer.address?.building_number !== - selectedManufacturer.address.building_number; - const isStreetNameUpdated = - manufacturer.address?.street_name !== - selectedManufacturer.address.street_name; + manufacturerDetails.url !== selectedManufacturerData.url && + manufacturerDetails.url !== undefined; + + const isAddressLineUpdated = + manufacturerDetails.address?.address_line !== + selectedManufacturerData.address.address_line; + const isTownUpdated = - manufacturer.address?.town !== selectedManufacturer.address.town; + manufacturerDetails.address?.town !== + selectedManufacturerData.address.town; + const isCountyUpdated = - manufacturer.address?.county !== selectedManufacturer.address.county; - const ispostcodeUpdated = - manufacturer.address?.postcode !== - selectedManufacturer.address.postcode; + manufacturerDetails.address?.county !== + selectedManufacturerData.address.county; + + const isPostcodeUpdated = + manufacturerDetails.address?.postcode !== + selectedManufacturerData.address.postcode; + + const isCountryUpdated = + manufacturerDetails.address?.country !== + selectedManufacturerData.address.country; + const isTelephoneUpdated = - manufacturer.telephone !== selectedManufacturer.telephone; + manufacturerDetails.telephone !== selectedManufacturerData.telephone; let ManufacturerToEdit: EditManufacturer = { - id: selectedManufacturer?.id, + id: selectedManufacturerData?.id, }; - if (isNameUpdated) { - ManufacturerToEdit = { - ...ManufacturerToEdit, - name: manufacturer.name, - }; - } - if (isURLUpdated) { - ManufacturerToEdit = { - ...ManufacturerToEdit, - url: manufacturer.url, - }; - } - if (isBuildingNumberUpdated) { - ManufacturerToEdit = { - ...ManufacturerToEdit, - address: { - ...manufacturer.address, - building_number: manufacturer.address?.building_number, - }, - }; - } - if (isStreetNameUpdated) { + isNameUpdated && (ManufacturerToEdit.name = manufacturerDetails.name); + isURLUpdated && (ManufacturerToEdit.url = manufacturerDetails.url); + + if (isAddressLineUpdated) { ManufacturerToEdit = { ...ManufacturerToEdit, address: { - ...ManufacturerToEdit.address, - street_name: manufacturer.address?.street_name, + ...manufacturerDetails.address, + address_line: manufacturerDetails.address?.address_line, }, }; } @@ -276,8 +265,8 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { ManufacturerToEdit = { ...ManufacturerToEdit, address: { - ...manufacturer.address, - town: manufacturer.address?.town, + ...manufacturerDetails.address, + town: manufacturerDetails.address?.town, }, }; } @@ -285,34 +274,40 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { ManufacturerToEdit = { ...ManufacturerToEdit, address: { - ...manufacturer.address, - county: manufacturer.address?.county, + ...manufacturerDetails.address, + county: manufacturerDetails.address?.county, }, }; } - if (ispostcodeUpdated) { + if (isPostcodeUpdated) { ManufacturerToEdit = { ...ManufacturerToEdit, address: { - ...manufacturer.address, - postcode: manufacturer.address?.postcode, + ...manufacturerDetails.address, + postcode: manufacturerDetails.address?.postcode, }, }; } - if (isTelephoneUpdated) { + if (isCountryUpdated) { ManufacturerToEdit = { ...ManufacturerToEdit, - telephone: manufacturer.telephone, + address: { + ...manufacturerDetails.address, + country: manufacturerDetails.address?.country, + }, }; } + isTelephoneUpdated && + (ManufacturerToEdit.telephone = manufacturerDetails.telephone); + if ( - (selectedManufacturer.id && isNameUpdated) || - isBuildingNumberUpdated || - isStreetNameUpdated || + (selectedManufacturerData.id && isNameUpdated) || + isAddressLineUpdated || isTownUpdated || isCountyUpdated || - ispostcodeUpdated || + isPostcodeUpdated || + isCountryUpdated || isTelephoneUpdated ) { editManufacturer(ManufacturerToEdit) @@ -321,7 +316,6 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { const response = error.response?.data as ErrorParsing; console.log(error); if (response && error.response?.status === 409) { - setNameError(true); setNameErrorMessage( 'A manufacturer with the same name has been found. Please enter a different name' ); @@ -330,7 +324,6 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { setCatchAllError(true); }); } else { - setFormError(true); setFormErrorMessage( "There have been no changes made. Please change a field's value or press Cancel to exit" ); @@ -340,8 +333,7 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { editManufacturer, handleClose, handleErrors, - manufacturer, - selectedManufacturer, + manufacturerDetails, selectedManufacturerData, ]); @@ -351,21 +343,19 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { type === 'create' ? 'Add' : 'Edit' } Manufacturer`} - + { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, name: event.target.value, }); - setNameError(false); setNameErrorMessage(undefined); - setFormError(false); setFormErrorMessage(undefined); }} error={nameError} @@ -378,15 +368,15 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { label="URL" required={false} sx={{ marginLeft: '4px', my: '8px' }} // Adjusted the width and margin - value={manufacturer.url} + value={manufacturerDetails.url} onChange={(event) => { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, url: event.target.value, }); - seturlError(false); - seturlErrorMessage(undefined); - setFormError(false); + + setUrlErrorMessage(undefined); + setFormErrorMessage(undefined); }} error={urlError} @@ -396,72 +386,67 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { Address + + + { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, address: { - ...manufacturer.address, - building_number: event.target.value, + ...manufacturerDetails.address, + address_line: event.target.value, }, }); - setAddressBuildingNumberError(false); - setAddressBuildingNumberErrorMessage(undefined); - setFormError(false); + + setAddressLineErrorMessage(undefined); + setFormErrorMessage(undefined); }} - error={addressBuildingNumberError} - helperText={ - addressBuildingNumberError && addressBuildingNumberErrorMessage - } + error={addressLineError} + helperText={addressLineError && addressLineErrorMessage} fullWidth /> { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, address: { - ...manufacturer.address, - street_name: event.target.value, + ...manufacturerDetails.address, + town: event.target.value || null, }, }); - setAddressStreetNameError(false); - setaddressStreetNameErrorMessage(undefined); - setFormError(false); + setFormErrorMessage(undefined); }} - error={addressStreetNameError} - helperText={ - addressStreetNameError && addressStreetNameErrorMessage - } fullWidth /> { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, address: { - ...manufacturer.address, - town: event.target.value, + ...manufacturerDetails.address, + county: event.target.value || null, }, }); - setFormError(false); + setFormErrorMessage(undefined); }} fullWidth @@ -469,41 +454,45 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, address: { - ...manufacturer.address, - county: event.target.value, + ...manufacturerDetails.address, + country: event.target.value, }, }); - setFormError(false); + + setCountryErrorMessage(undefined); + setFormErrorMessage(undefined); }} + error={countryError} + helperText={countryError && countryErrorMessage} fullWidth /> { onChangeManufacturerDetails({ - ...manufacturer, + ...manufacturerDetails, address: { - ...manufacturer.address, + ...manufacturerDetails.address, postcode: event.target.value, }, }); - setaddressPostcodeError(false); - setaddressPostcodeErrorMessage(undefined); - setFormError(false); + + setAddressPostcodeErrorMessage(undefined); + setFormErrorMessage(undefined); }} error={addressPostcodeError} @@ -516,13 +505,13 @@ function ManufacturerDialog(props: ManufacturerDialogProps) { label="Telephone number" required={false} sx={{ marginLeft: '4px', my: '8px' }} // Adjusted the width and margin - value={manufacturer.telephone} + value={manufacturerDetails.telephone} onChange={(event) => { onChangeManufacturerDetails({ - ...manufacturer, - telephone: event.target.value, + ...manufacturerDetails, + telephone: event.target.value || null, }); - setFormError(false); + setFormErrorMessage(undefined); }} fullWidth diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index dd01184da..4cc3728b9 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,11 +1,11 @@ import { rest } from 'msw'; import { - AddManufacturer, AddSystem, CatalogueItem, EditCatalogueCategory, EditCatalogueItem, EditManufacturer, + Manufacturer, } from '../app.types'; import CatalogueBreadcrumbsJSON from './CatalogueBreadcrumbs.json'; import CatalogueCategoryJSON from './CatalogueCategory.json'; @@ -285,7 +285,7 @@ export const handlers = [ }), rest.post('/v1/manufacturers', async (req, res, ctx) => { - const body = (await req.json()) as AddManufacturer; + const body = (await req.json()) as Manufacturer; if (body.name === 'Manufacturer A') { return res(ctx.status(409), ctx.json('')); @@ -298,8 +298,8 @@ export const handlers = [ code: 'manufacturer-d', url: 'http://test.co.uk', address: { - building_number: '1', - street_name: 'Example Street', + address_line: '4 Example Street', + country: 'United Kingdom', town: 'Oxford', county: 'Oxfordshire', postcode: 'OX1 2AB', diff --git a/src/mocks/manufacturer.json b/src/mocks/manufacturer.json index 8d741b298..7a253aa64 100644 --- a/src/mocks/manufacturer.json +++ b/src/mocks/manufacturer.json @@ -5,11 +5,11 @@ "code": "manufacturer-a", "url": "http://example.com", "address": { - "building_number": "1", - "street_name": "Example Street", + "address_line": "1 Example Street", "town": "Oxford", "county": "Oxfordshire", - "postcode": "OX1 2AB" + "postcode": "OX1 2AB", + "country": "United Kingdom" }, "telephone": "07334893348" }, @@ -19,11 +19,11 @@ "code": "manufacturer-b", "url": "http://test.com", "address": { - "building_number": "2", - "street_name": "Example Street", + "address_line": "2 Example Street", "town": "Oxford", "county": "Oxfordshire", - "postcode": "OX1 2AB" + "postcode": "OX1 2AB", + "country": "United Kingdom" }, "telephone": "07294958549" }, @@ -33,11 +33,11 @@ "code": "manufacturer-c", "url": "http://test.co.uk", "address": { - "building_number": "3", - "street_name": "Example Street", + "address_line": "3 Example Street", "town": "Oxford", "county": "Oxfordshire", - "postcode": "OX1 2AB" + "postcode": "OX1 2AB", + "country": "United Kingdom" }, "telephone": "07934303412" }