update material ui version and adding automcomplete selected national…

…ities as object Signed-off-by: Nilesh Gupta <[email protected]>
UKHomeOffice · Jul 26, 2024 · 067025d · 067025d
1 parent 90eab0a
commit 067025d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.119",
-    "@mui/material": "5.11",
+    "@mui/material": "5.16.5",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -82,9 +82,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "5.11.16",
+    "@mui/icons-material": "5.16.5",
     "@mui/lab": "5.0.0-alpha.119",
-    "@mui/material": "5.11",
+    "@mui/material": "5.16.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -96,7 +96,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.119",
-    "@mui/material": "5.11",
+    "@mui/material": "5.16.5",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/icons": "^1.2.9",
     "@svgr/webpack": "^8.1.0",

diff --git a/src/components/FlightFlagger/FlightFlaggerFilters.tsx b/src/components/FlightFlagger/FlightFlaggerFilters.tsx
@@ -44,7 +44,7 @@ export type SearchFilterPayload = {
   showTransitPaxNumber: boolean,
   showNumberOfVisaNationals: boolean,
   selectedAgeGroups: string[],
-  selectedNationalities: string[],
+  selectedNationalities: Country[],
   flightNumber: string,
   requireAllSelected: boolean,
 }
@@ -61,7 +61,7 @@ export interface IFlightFlaggerFilters {
     showNumberOfVisaNationals: boolean,
     requireAllSelected: boolean,
     flightNumber: string,
-    selectedNationalities: AutocompleteOption[],
+    selectedNationalities: Country[],
     selectedAgeGroups: AutocompleteOption[],
     showFilters: boolean,
   }
@@ -78,7 +78,7 @@ export const FlightFlaggerFilters = ({
                                      }: IFlightFlaggerFilters) => {
 
   const nationalitiesOptions = nationalities.map((nationality) => {
-    return {title: `${nationality.name} (${nationality.code})`}
+    return nationality
   });
   const ageOptions = ageGroups.map((ageGroup) => {
     return {title: ageGroup}
@@ -90,7 +90,7 @@ export const FlightFlaggerFilters = ({
     requireAllSelected: initialState?.requireAllSelected || false,
     flightNumber: initialState?.flightNumber || '',
   });
-  const [selectedNationalities, setSelectedNationalities] = useState<AutocompleteOption[]>(initialState?.selectedNationalities || []);
+  const [selectedNationalities, setSelectedNationalities] = useState<Country[]>(initialState?.selectedNationalities || []);
   const [selectedAgeGroups, setSelectedAgeGroups] = useState<AutocompleteOption[]>(initialState?.selectedAgeGroups || []);
   const [showFilters, setShowFilters] = useState<boolean>(initialState?.showFilters || false);
 
@@ -100,7 +100,7 @@ export const FlightFlaggerFilters = ({
 
   const submit = () => {
     const ageGroupPayload: string[] = selectedAgeGroups.map((ageGroup: AutocompleteOption) => ageGroup.title)
-    const nationalityPayload: string[] = selectedNationalities.map((nationality: AutocompleteOption) => nationality.title)
+    const nationalityPayload: Country[] = selectedNationalities.map((nationality: Country) => nationality)
     submitCallback({
       ...searchFlags,
       selectedNationalities: nationalityPayload,
@@ -144,7 +144,7 @@ export const FlightFlaggerFilters = ({
   const buildFilterString = () => {
     const paxFlters = []
     if (selectedNationalities.length) {
-      paxFlters.push(`nationality: ${selectedNationalities.map(n => n.title).join(', ')}`)
+      paxFlters.push(`nationality: ${selectedNationalities.join(', ')}`)
     }
     if (selectedAgeGroups.length) {
       paxFlters.push(`age: ${selectedAgeGroups.map(n => n.title).join(', ')}`)
@@ -280,11 +280,11 @@ export const FlightFlaggerFilters = ({
                   multiple
                   id="nationalities"
                   options={nationalitiesOptions}
-                  getOptionLabel={(option) => option.title}
+                  getOptionLabel={(option) => `${option.name} (${option.code})`}
                   value={selectedNationalities}
                   defaultValue={[]}
                   filterSelectedOptions
-                  isOptionEqualToValue={(option, value) => option.title === value.title}
+                  isOptionEqualToValue={(option, value) => option.code === value.code}
                   onChange={(event, newValue) => {
                     setSelectedNationalities(newValue);
                   }}

diff --git a/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx b/src/components/FlightFlagger/__tests__/FlightFlagger.test.tsx
@@ -113,7 +113,7 @@ describe("Flight Flagger", () => {
     const callBack = jest.fn();
 
     const expectedPayload = {
-      selectedNationalities: ["Great Britain (GBR)"],
+      selectedNationalities: [{"code": "GBR", "name": "Great Britain"}],
       selectedAgeGroups: ['0-9'],
       showTransitPaxNumber: false,
       showNumberOfVisaNationals: true,