src/assets/images/car-body-type/index.ts

@@ -1,10 +0,0 @@
-export { default as CoupeImg } from './coupe.webp';
-export { default as CrossoverImg } from './crossover.webp';
-export { default as HatchbackImg } from './hatchback.webp';
-export { default as LiftbackImg } from './liftback.webp';
-export { default as MinivanImg } from './minivan.webp';
-export { default as PickupImg } from './pickup.webp';
-export { default as SedanImg } from './sedan.webp';
-export { default as SportsCarImg } from './sports-car.webp';
-export { default as StationWagonImg } from './station-wagon.webp';
-export { default as SuvImg } from './suv.webp';

src/assets/images/index.ts

@@ -1,2 +1 @@
-export * from './car-body-type';
 export { default as DemoVideoPosterImg } from './demo-video-poster.webp';

src/components/order-form/form/car-body/car-body-select.tsx

@@ -1,92 +1,23 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
-import {
+import { Select, SelectProps } from '@chakra-ui/react';
-  Input,
-  Image,
-  InputProps,
-  Box,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverBody,
-  List,
-  ListItem,
-} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
 import { carBodySelectOptions } from './helper';
-import { CarBodySelectOption } from './types';
 
-export const CarBodySelect = forwardRef<HTMLInputElement, InputProps>(
+export const CarBodySelect = forwardRef<HTMLSelectElement, SelectProps>(
   function CarBodySelect(props, ref) {
-    const [selected, setSelected] = useState<Partial<CarBodySelectOption>>({});
-    const handleOptionClick = (option: CarBodySelectOption) => {
-      setSelected(option);
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      props.onChange(option.value);
-    };
-
-    const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
     const { t } = useTranslation('~', {
       keyPrefix: 'dry-wash.order-create.car-body-select',
     });
 
     return (
-      <Box width='100%'>
+      <Select ref={ref} placeholder={t('placeholder')} {...props}>
-        <Popover
+        {carBodySelectOptions.map(({ value, labelTKey }, i) => (
-          isOpen={isDropdownOpen}
+          <option key={i} value={value}>
-          autoFocus={false}
+            {t(`options.${labelTKey}`)}
-          placement='bottom-start'
+          </option>
-          matchWidth
+        ))}
-        >
+      </Select>
-          <PopoverAnchor>
-            <Input
-              {...props}
-              ref={ref}
-              value={
-                selected?.labelTKey
-                  ? t(`options.${selected.labelTKey}`)
-                  : undefined
-              }
-              readOnly
-              onClick={() => setIsDropdownOpen(true)}
-              onBlur={() => setIsDropdownOpen(false)}
-              placeholder={t('placeholder')}
-            />
-          </PopoverAnchor>
-          <PopoverContent width='100%' maxWidth='100%'>
-            <PopoverBody border='1px' borderColor='gray.300' p={0}>
-              <List
-                display='grid'
-                gridTemplateColumns='repeat(auto-fit, minmax(150px, 1fr))'
-              >
-                {carBodySelectOptions.map((option) => (
-                  <ListItem
-                    key={option.value}
-                    display='flex'
-                    flexDirection='column'
-                    justifyContent='flex-end'
-                    alignItems='center'
-                    p={2}
-                    cursor='pointer'
-                    _hover={{
-                      bgColor: 'primary.50',
-                    }}
-                    _active={{
-                      bgColor: 'primary.100',
-                    }}
-                    onClick={() => handleOptionClick(option)}
-                  >
-                    <Image src={option.img} />
-                    {t(`options.${option.labelTKey}`)}
-                  </ListItem>
-                ))}
-              </List>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
-      </Box>
     );
   },
 );

src/components/order-form/form/car-body/helper.ts

@@ -1,15 +1,3 @@
-import {
-  CoupeImg,
-  CrossoverImg,
-  HatchbackImg,
-  LiftbackImg,
-  MinivanImg,
-  PickupImg,
-  SedanImg,
-  SportsCarImg,
-  StationWagonImg,
-  SuvImg
-} from "../../../../assets/images";
 import { Car } from "../../../../models/landing";
 
 import { CarBodySelectOption } from "./types";
@@ -17,53 +5,43 @@ import { CarBodySelectOption } from "./types";
 export const carBodySelectOptions: CarBodySelectOption[] = [
   {
     value: Car.BodyStyle.SEDAN,
-    labelTKey: 'sedan',
+    labelTKey: 'sedan'
-    img: SedanImg
   },
   {
     value: Car.BodyStyle.HATCHBACK,
-    labelTKey: 'hatchback',
+    labelTKey: 'hatchback'
-    img: HatchbackImg
   },
   {
     value: Car.BodyStyle.CROSSOVER,
-    labelTKey: 'crossover',
+    labelTKey: 'crossover'
-    img: CrossoverImg
   },
   {
     value: Car.BodyStyle.SUV,
-    labelTKey: 'suv',
+    labelTKey: 'suv'
-    img: SuvImg
   },
   {
     value: Car.BodyStyle.STATION_WAGON,
-    labelTKey: 'station-wagon',
+    labelTKey: 'station-wagon'
-    img: StationWagonImg
   },
   {
     value: Car.BodyStyle.COUPE,
-    labelTKey: 'coupe',
+    labelTKey: 'coupe'
-    img: CoupeImg
   },
   {
     value: Car.BodyStyle.MINIVAN,
-    labelTKey: 'minivan',
+    labelTKey: 'minivan'
-    img: MinivanImg
   },
   {
     value: Car.BodyStyle.PICKUP,
-    labelTKey: 'pickup',
+    labelTKey: 'pickup'
-    img: PickupImg
   },
   {
     value: Car.BodyStyle.LIFTBACK,
-    labelTKey: 'liftback',
+    labelTKey: 'liftback'
-    img: LiftbackImg
   },
   {
     value: Car.BodyStyle.SPORTS_CAR,
-    labelTKey: 'sports-car',
+    labelTKey: 'sports-car'
-    img: SportsCarImg
   },
   {
     value: Car.BodyStyle.OTHER,

src/components/order-form/form/car-body/types.ts

@@ -14,5 +14,4 @@ export type CarBodySelectOption = {
   'liftback' |
   'sports-car' |
   'other';
-  img?: string;
 };