From a18a26fcaf8357c539eefc1c0293af4983c1326a Mon Sep 17 00:00:00 2001 From: RustamRu Date: Wed, 12 Mar 2025 01:18:58 +0300 Subject: [PATCH] feat: Refactor car color and body selection with type-safe enums - Updated Car.Color to use TypeScript enum for better type safety - Modified car color and body selection components to use new enum types - Updated order view and stub data to support enum-based color representation - Exported color and body select options from respective components - Improved localization handling for car color and body selections --- .../order-form/form/car-body/index.ts | 3 +- .../form/car-color/car-color-select.tsx | 20 +++++++------ .../order-form/form/car-color/helper.ts | 30 ++++++++++++------- .../order-form/form/car-color/index.ts | 3 +- src/components/order-form/form/index.ts | 4 ++- .../order-view/details/order-details.tsx | 11 +++++-- src/models/landing/car.ts | 11 ++++++- src/models/landing/order.ts | 4 +-- .../id1-success-pending.json | 2 +- .../id1-success-working.json | 2 +- 10 files changed, 61 insertions(+), 29 deletions(-) diff --git a/src/components/order-form/form/car-body/index.ts b/src/components/order-form/form/car-body/index.ts index 0222204..98e041b 100644 --- a/src/components/order-form/form/car-body/index.ts +++ b/src/components/order-form/form/car-body/index.ts @@ -1 +1,2 @@ -export { CarBodySelect } from './car-body-select'; \ No newline at end of file +export { CarBodySelect } from './car-body-select'; +export { carBodySelectOptions } from './helper'; \ No newline at end of file diff --git a/src/components/order-form/form/car-color/car-color-select.tsx b/src/components/order-form/form/car-color/car-color-select.tsx index 90800ca..323e309 100644 --- a/src/components/order-form/form/car-color/car-color-select.tsx +++ b/src/components/order-form/form/car-color/car-color-select.tsx @@ -2,7 +2,9 @@ import React, { forwardRef, useState } from 'react'; import { Input, Box, Stack, Text, Flex } from '@chakra-ui/react'; import { useTranslation } from 'react-i18next'; -import { CAR_COLORS } from './helper'; +import { Car } from '../../../../models'; + +import { carColorSelectOptions } from './helper'; interface CarColorSelectProps { value?: string; @@ -16,7 +18,7 @@ export const CarColorSelect = forwardRef( const [customColor, setCustomColor] = useState(''); const [isCustom, setIsCustom] = useState(false); - const handleColorChange = (value: string) => { + const handleColorChange = (value: Car.Color | string) => { if (value === 'custom') { setIsCustom(true); return; @@ -46,13 +48,13 @@ export const CarColorSelect = forwardRef( return ( - {CAR_COLORS.map(({ name, code }) => ( + {carColorSelectOptions.map(({ value, labelTKey, code }) => ( handleColorChange(name)} + onClick={() => handleColorChange(value)} > ( }} justify='center' transition='all 0.2s' - {...(currentValue === name && { + {...(currentValue === value && { borderColor: 'primary.500', bg: 'primary.50', paddingInlineEnd: 3, @@ -87,14 +89,14 @@ export const CarColorSelect = forwardRef( borderColor='gray.200' transition='all 0.2s' boxShadow='none' - {...(currentValue === name && { + {...(currentValue === value && { borderColor: 'primary.500', boxShadow: 'sm', })} /> - {currentValue === name && ( + {currentValue === value && ( - {t(`colors.${name}`)} + {t(`colors.${labelTKey}`)} )} diff --git a/src/components/order-form/form/car-color/helper.ts b/src/components/order-form/form/car-color/helper.ts index 60de538..9c10c1d 100644 --- a/src/components/order-form/form/car-color/helper.ts +++ b/src/components/order-form/form/car-color/helper.ts @@ -1,34 +1,44 @@ -export const CAR_COLORS = [ +import { Car } from "../../../../models"; + +export const carColorSelectOptions: { value: Car.Color | string; labelTKey: 'white' | 'black' | 'silver' | 'gray' | 'beige-brown' | 'red' | 'blue' | 'green'; code: string }[] = [ { - name: 'white', + value: Car.Color.WHITE, + labelTKey: 'white', code: '#ffffff' }, { - name: 'black', + value: Car.Color.BLACK, + labelTKey: 'black', code: '#000000' }, { - name: 'silver', + value: Car.Color.SILVER, + labelTKey: 'silver', code: '#c0c0c0' }, { - name: 'gray', + value: Car.Color.GRAY, + labelTKey: 'gray', code: '#808080' }, { - name: 'beige-brown', + value: Car.Color.BEIGE_BROWN, + labelTKey: 'beige-brown', code: '#796745' }, { - name: 'red', + value: Car.Color.RED, + labelTKey: 'red', code: '#b90000' }, { - name: 'blue', + value: Car.Color.BLUE, + labelTKey: 'blue', code: '#003B62' }, { - name: 'green', + value: Car.Color.GREEN, + labelTKey: 'green', code: '#078d51' }, -] as const satisfies { name: string; code: string }[]; \ No newline at end of file +]; \ No newline at end of file diff --git a/src/components/order-form/form/car-color/index.ts b/src/components/order-form/form/car-color/index.ts index bc310dd..a1e1c1b 100644 --- a/src/components/order-form/form/car-color/index.ts +++ b/src/components/order-form/form/car-color/index.ts @@ -1 +1,2 @@ -export { CarColorSelect } from './car-color-select'; \ No newline at end of file +export { CarColorSelect } from './car-color-select'; +export { carColorSelectOptions } from './helper'; \ No newline at end of file diff --git a/src/components/order-form/form/index.ts b/src/components/order-form/form/index.ts index 8d0176f..710ca37 100644 --- a/src/components/order-form/form/index.ts +++ b/src/components/order-form/form/index.ts @@ -1,2 +1,4 @@ export type { OrderFormValues, OrderFormProps } from './types'; -export { OrderForm } from './order-form'; \ No newline at end of file +export { OrderForm } from './order-form'; +export { carBodySelectOptions } from './car-body'; +export { carColorSelectOptions } from './car-color'; \ No newline at end of file diff --git a/src/components/order-view/details/order-details.tsx b/src/components/order-view/details/order-details.tsx index 284e9c9..5b39eaa 100644 --- a/src/components/order-view/details/order-details.tsx +++ b/src/components/order-view/details/order-details.tsx @@ -17,7 +17,10 @@ import 'dayjs/locale/en'; import { Order } from '../../../models/landing'; import { formatDatetime } from '../../../lib'; -import { carBodySelectOptions } from '../../order-form/form/car-body/helper'; +import { + carBodySelectOptions, + carColorSelectOptions, +} from '../../order-form'; import { OrderStatus } from './status'; @@ -54,6 +57,10 @@ export const OrderDetails: FC = ({ const { t: tCarBody } = useTranslation('~', { keyPrefix: 'dry-wash.order-create.car-body-select.options', }); + const { t: tCarColor } = useTranslation('~', { + keyPrefix: 'dry-wash.order-create.car-color-select.colors', + }); + const carColorTKey = carColorSelectOptions.find(({ value }) => value === carColor)?.labelTKey; return ( <> @@ -82,7 +89,7 @@ export const OrderDetails: FC = ({ tCarBody( `${carBodySelectOptions.find(({ value }) => value === carBody)?.labelTKey}`, ), - carColor, + carColorTKey ? tCarColor(carColorTKey) : carColor, ] .filter((v) => v) .join(', '), diff --git a/src/models/landing/car.ts b/src/models/landing/car.ts index 971cc78..ea73cb2 100644 --- a/src/models/landing/car.ts +++ b/src/models/landing/car.ts @@ -1,6 +1,15 @@ export type RegistrationNumber = string; // А012ВЕ16 -export type Color = string; // #000000 +export const enum Color { + WHITE, + BLACK, + SILVER, + GRAY, + BEIGE_BROWN, + RED, + BLUE, + GREEN, +} export const enum BodyStyle { UNKNOWN = 0, diff --git a/src/models/landing/order.ts b/src/models/landing/order.ts index c61fc28..d2a0f6f 100644 --- a/src/models/landing/order.ts +++ b/src/models/landing/order.ts @@ -18,7 +18,7 @@ export type Create = { car: { number: Car.RegistrationNumber; body: Car.BodyStyle; - color: Car.Color; + color: Car.Color | string; }; washing: { location: Washing.Location; @@ -33,7 +33,7 @@ export type View = { phone: Customer.PhoneNumber; carNumber: Car.RegistrationNumber; carBody: Car.BodyStyle; - carColor?: Car.Color; + carColor?: Car.Color | string; location: Washing.Location; startWashTime: Washing.AvailableBeginDateTime; endWashTime: Washing.AvailableEndDateTime; diff --git a/stubs/json/landing-order-view/id1-success-pending.json b/stubs/json/landing-order-view/id1-success-pending.json index 8e4d176..b4c4264 100644 --- a/stubs/json/landing-order-view/id1-success-pending.json +++ b/stubs/json/landing-order-view/id1-success-pending.json @@ -4,7 +4,7 @@ "phone": "+79876543210", "carNumber": "А123АА16", "carBody": 2, - "carColor": "#ffffff", + "carColor": 5, "startWashTime": "2025-01-19T14:03:00.000Z", "endWashTime": "2025-01-19T14:03:00.000Z", "location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо", diff --git a/stubs/json/landing-order-view/id1-success-working.json b/stubs/json/landing-order-view/id1-success-working.json index 5b1ee41..6256fb8 100644 --- a/stubs/json/landing-order-view/id1-success-working.json +++ b/stubs/json/landing-order-view/id1-success-working.json @@ -4,7 +4,7 @@ "phone": "+79876543210", "carNumber": "А123АА16", "carBody": 2, - "carColor": "#ffffff", + "carColor": "мокрый асфальт", "startWashTime": "2025-01-19T14:03:00.000Z", "endWashTime": "2025-01-19T14:03:00.000Z", "location": "55.793833888711006,49.19037910644527 Республика Татарстан (Татарстан), Казань, жилой район Седьмое Небо",