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

@@ -3,7 +3,6 @@ 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 OtherImg } from './other.webp';
 export { default as PickupImg } from './pickup.webp';
 export { default as SedanImg } from './sedan.webp';
 export { default as SportsCarImg } from './sports-car.webp';

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

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

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

@@ -1,6 +1,3 @@
-import { TFunction } from "i18next";
-import { InputProps } from "@chakra-ui/react";
-
 import {
   CoupeImg,
   CrossoverImg,
@@ -11,8 +8,7 @@ import {
   SedanImg,
   SportsCarImg,
   StationWagonImg,
-  SuvImg,
+  SuvImg
-  OtherImg
 } from "../../../../assets/images";
 import { Car } from "../../../../models/landing";
 
@@ -71,17 +67,6 @@ export const carBodySelectOptions: CarBodySelectOption[] = [
   },
   {
     value: Car.BodyStyle.OTHER,
-    labelTKey: 'other',
+    labelTKey: 'other'
-    img: OtherImg
   },
-];
+];
-
-export const getInputValue = (value: Car.BodyStyle, t: TFunction<"~", "dry-wash.order-create.car-body-select">): InputProps['value'] => {
-  const { labelTKey } = carBodySelectOptions.find((option) => value === option.value) ?? {};
-
-  if (labelTKey) {
-    return t(`options.${labelTKey}`);
-  }
-
-  return;
-};

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import {
-  ImageProps,
-  StackProps,
-  Image,
-  useRadio,
-  chakra,
-  Box,
-  UseRadioProps,
-  Flex,
-} from '@chakra-ui/react';
-
-import { getPropsByState } from './helper';
-
-type CarBodyOptionProps = {
-  image: ImageProps['src'];
-  label: StackProps['children'];
-} & UseRadioProps;
-
-export const CarBodyOption = ({
-  image,
-  label,
-  ...radioProps
-}: CarBodyOptionProps) => {
-  const { state, getInputProps, getRadioProps, htmlProps, getLabelProps } =
-    useRadio(radioProps);
-
-  return (
-    <chakra.label {...htmlProps} cursor='pointer'>
-      <input {...getInputProps({})} hidden />
-      <Box {...getRadioProps()} p={2} {...getPropsByState(state)}>
-        <Flex direction='column' alignItems='center' {...getLabelProps()}>
-          <Image src={image} rounded={4} />
-          {label}
-        </Flex>
-      </Box>
-    </chakra.label>
-  );
-};

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

@@ -1,19 +0,0 @@
-import {
-  BoxProps,
-} from '@chakra-ui/react';
-import { RadioState } from '@chakra-ui/react/dist/types/radio/use-radio';
-
-export const getPropsByState = ({ isChecked }: RadioState): BoxProps => {
-  if (isChecked) {
-    return {
-      bgColor: 'primary.200',
-      _hover: { bgColor: 'primary.100' },
-      _active: { bgColor: 'primary.300' },
-    };
-  }
-
-  return {
-    _hover: { bgColor: 'primary.50' },
-    _active: { bgColor: 'primary.100' },
-  };
-};

src/components/order-form/form/car-body/option/index.ts

@@ -1 +0,0 @@
-export { CarBodyOption } from './car-body-option';

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

@@ -1,5 +1,3 @@
-import { InputProps } from "@chakra-ui/react";
-
 import { Car } from "../../../../models/landing";
 
 export type CarBodySelectOption = {
@@ -18,7 +16,3 @@ export type CarBodySelectOption = {
   'other';
   img?: string;
 };
-
-export type CarBodySelectProps = {
-  value?: string;
-} & Pick<InputProps, 'onChange'>;

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

@@ -9,7 +9,6 @@ export const defaultValues: Partial<OrderFormValues> = {
   phone: '',
   carNumber: '',
   carColor: '',
-  carBody: '',
   availableDatetimeBegin: '',
   availableDatetimeEnd: '',
 };