Merge pull request 'feature/order' (#93) from feature/order into main

Reviewed-on: #93

locales/en.json

@@ -26,6 +26,17 @@
   "dry-wash.order-create.form.washing-location-field.label": "Where is the car located?",
   "dry-wash.order-create.form.washing-location-field.placeholder": "Enter the address or select on the map",
   "dry-wash.order-create.form.washing-location-field.help": "For example, 55.754364, 48.743295 Universitetskaya Street, 1, Innopolis, Verkhneuslonsky district, Republic of Tatarstan (Tatarstan), 420500",
+  "dry-wash.order-create.car-color-select.placeholder": "Input color",
+  "dry-wash.order-create.car-color-select.custom": "Custom",
+  "dry-wash.order-create.car-color-select.custom-label": "Custom:",
+  "dry-wash.order-create.car-color-select.colors.white": "White",
+  "dry-wash.order-create.car-color-select.colors.black": "Black",
+  "dry-wash.order-create.car-color-select.colors.silver": "Silver",
+  "dry-wash.order-create.car-color-select.colors.gray": "Gray",
+  "dry-wash.order-create.car-color-select.colors.beige-brown": "Beige Brown",
+  "dry-wash.order-create.car-color-select.colors.red": "Red",
+  "dry-wash.order-create.car-color-select.colors.blue": "Blue",
+  "dry-wash.order-create.car-color-select.colors.green": "Green",
   "dry-wash.order-create.car-body-select.placeholder": "Not specified",
   "dry-wash.order-create.car-body-select.options.sedan": "Sedan",
   "dry-wash.order-create.car-body-select.options.hatchback" : "Hatchback",
@@ -51,7 +62,7 @@
   "dry-wash.order-view.details.datetime-range": "When",
   "dry-wash.order-view.details.alert": "The operator will contact you about the payment at the specified phone number",
   "dry-wash.order-view.upload-car-image.field.label": "Upload a photo of your car, and our service will quickly calculate the pre-order price!",
-  "dry-wash.order-view.upload-car-image.field.help": "Allowed formats: .jpg, .png. Maximum size: 5MB",
+  "dry-wash.order-view.upload-car-image.field.help": "Allowed formats: .jpg, .png. Maximum size: 14MB",
   "dry-wash.order-view.upload-car-image.file-input.placeholder": "Upload a file",
   "dry-wash.order-view.upload-car-image.file-input.button": "Upload",
   "dry-wash.order-view.upload-car-image-query.success.title": "The car image is successfully uploaded",

locales/ru.json

@@ -81,6 +81,17 @@
   "dry-wash.order-create.form.washing-location-field.label": "Где находится автомобиль?",
   "dry-wash.order-create.form.washing-location-field.placeholder": "Введите адрес или выберите на карте",
   "dry-wash.order-create.form.washing-location-field.help": "Например, 55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500",
+  "dry-wash.order-create.car-color-select.placeholder": "Введите цвет",
+  "dry-wash.order-create.car-color-select.custom": "Другой",
+  "dry-wash.order-create.car-color-select.custom-label": "Другой:",
+  "dry-wash.order-create.car-color-select.colors.white": "Белый",
+  "dry-wash.order-create.car-color-select.colors.black": "Черный",
+  "dry-wash.order-create.car-color-select.colors.silver": "Серебристый",
+  "dry-wash.order-create.car-color-select.colors.gray": "Серый",
+  "dry-wash.order-create.car-color-select.colors.beige-brown": "Бежево-коричневый",
+  "dry-wash.order-create.car-color-select.colors.red": "Красный",
+  "dry-wash.order-create.car-color-select.colors.blue": "Синий",
+  "dry-wash.order-create.car-color-select.colors.green": "Зеленый",
   "dry-wash.order-create.car-body-select.placeholder": "Не указан",
   "dry-wash.order-create.car-body-select.options.sedan": "Седан",
   "dry-wash.order-create.car-body-select.options.hatchback": "Хэтчбек",
@@ -106,7 +117,7 @@
   "dry-wash.order-view.details.datetime-range": "Когда",
   "dry-wash.order-view.details.alert": "С вами свяжется оператор насчет оплаты по указанному номеру телефона",
   "dry-wash.order-view.upload-car-image.field.label": "Загрузите фото вашего автомобиля, и наш сервис быстро рассчитает предварительную стоимость заказа!",
-  "dry-wash.order-view.upload-car-image.field.help": "Допустимые форматы: .jpg, .png. Максимальный размер: 5МБ",
+  "dry-wash.order-view.upload-car-image.field.help": "Допустимые форматы: .jpg, .png. Максимальный размер: 14МБ",
   "dry-wash.order-view.upload-car-image.file-input.placeholder": "Загрузите файл",
   "dry-wash.order-view.upload-car-image.file-input.button": "Загрузить",
   "dry-wash.order-view.upload-car-image-query.success.title": "Изображение автомобиля успешно загружено",

src/components/PriceCar/PriceCar.tsx

@@ -4,7 +4,7 @@ import { getFeatures } from '@brojs/cli';
 
 const PRICE_INCREASE_PERCENT_PER_RATING = 10; // 10% за каждый балл
 
-export const PriceCar = ({ image, rating }) => {
+export const PriceCar = ({ image, rating, description }) => {
   const BASE_WASH_PRICE: number = Number(
     getFeatures('dry-wash')['order-cost']?.value || 1000,
   );
@@ -41,6 +41,7 @@ export const PriceCar = ({ image, rating }) => {
       ) : (
         <Text>Не удалость определить уровень загрязнения машины</Text>
       )}
+      <Text>{description}</Text>
     </Box>
   );
 };

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

@@ -21,9 +21,10 @@ import { CarBodySelectProps } from './types';
 export const CarBodySelect = forwardRef<HTMLInputElement, CarBodySelectProps>(
   function CarBodySelect(props, ref) {
     const handleOptionClick: UseRadioGroupProps['onChange'] = (value) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      props.onChange({
-      // @ts-ignore
+        target: { value },
-      props.onChange(value);
+      } as React.ChangeEvent<HTMLInputElement>);
+      onClose();
     };
 
     const { value, getRadioProps, getRootProps } = useRadioGroup({

src/components/order-form/form/car-color/car-color-input.tsx

@@ -1,23 +0,0 @@
-import React, { forwardRef, useId } from 'react';
-import { Input, InputProps } from '@chakra-ui/react';
-
-import { CAR_COLORS } from './helper';
-
-export const CarColorInput = forwardRef<HTMLInputElement, InputProps>(
-  function CarColorInput(props, ref) {
-    const listId = useId();
-
-    return (
-      <>
-        <Input ref={ref} list={listId} {...props} />
-        <datalist id={listId}>
-          {CAR_COLORS.map(({ code, name }) => (
-            <option key={code} label={name} value={code}>{name}</option>
-          ))}
-        </datalist>
-      </>
-    );
-  },
-);
-
-// todo: add option color visual indication

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

@@ -0,0 +1,162 @@
+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';
+
+interface CarColorSelectProps {
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  name?: string;
+  isInvalid?: boolean;
+}
+
+export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
+  function CarColorSelect(props) {
+    const [customColor, setCustomColor] = useState('');
+    const [isCustom, setIsCustom] = useState(false);
+
+    const handleColorChange = (value: string) => {
+      if (value === 'custom') {
+        setIsCustom(true);
+        return;
+      }
+      setIsCustom(false);
+      props.onChange?.({
+        target: { value },
+      } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setCustomColor(value);
+      props.onChange?.({
+        target: { value },
+      } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const { t } = useTranslation('~', {
+      keyPrefix: 'dry-wash.order-create.car-color-select',
+    });
+
+    const currentValue = isCustom ? 'custom' : props.value;
+
+    return (
+      <Stack spacing={4} width="100%">
+        <Flex gap={3} wrap="nowrap" overflowX="auto" pb={2}>
+          {CAR_COLORS.map(({ name, code }) => (
+            <Box 
+              key={name}
+              flexShrink={0}
+              as="button"
+              type="button"
+              onClick={() => handleColorChange(name)}
+            >
+              <Flex 
+                align="center" 
+                gap={2} 
+                p={2}
+                borderRadius="full"
+                borderWidth="2px"
+                borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
+                bg={currentValue === name ? 'primary.50' : 'white'}
+                _hover={{ 
+                  borderColor: 'primary.500',
+                  bg: currentValue === name ? 'primary.50' : 'gray.50'
+                }}
+                minW={currentValue === name ? '120px' : 'auto'}
+                h="48px"
+                justify="center"
+                transition="all 0.2s"
+              >
+                <Flex align="center" gap={2}>
+                  <Box
+                    w="32px"
+                    h="32px"
+                    borderRadius="full"
+                    bg={code}
+                    border="1px"
+                    borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
+                    transition="all 0.2s"
+                    boxShadow={currentValue === name ? 'sm' : 'none'}
+                  />
+                  {currentValue === name && (
+                    <Text fontSize="xs" color="primary.700" fontWeight="medium">
+                      {t(`colors.${name}`)}
+                    </Text>
+                  )}
+                </Flex>
+              </Flex>
+            </Box>
+          ))}
+          <Box 
+            flexShrink={0}
+            as="button"
+            type="button"
+            onClick={() => handleColorChange('custom')}
+          >
+            <Flex 
+              align="center" 
+              gap={2}
+              p={2}
+              borderRadius="full"
+              borderWidth="2px"
+              borderColor={isCustom ? 'primary.500' : 'gray.200'}
+              bg={isCustom ? 'primary.50' : 'white'}
+              _hover={{ 
+                borderColor: 'primary.500',
+                bg: isCustom ? 'primary.50' : 'gray.50'
+              }}
+              minW={isCustom ? '200px' : 'auto'}
+              h="48px"
+              justify="center"
+              transition="all 0.2s"
+            >
+              {isCustom ? (
+                <Flex gap={2} align="center">
+                  <Text fontSize="xs" color="primary.700" fontWeight="medium">
+                    {t('custom-label')}
+                  </Text>
+                  <Input
+                    size="sm"
+                    width="120px"
+                    value={customColor}
+                    onChange={handleCustomColorChange}
+                    placeholder={t('placeholder')}
+                    onClick={(e) => e.stopPropagation()}
+                    borderColor="primary.200"
+                    _focus={{
+                      borderColor: 'primary.500',
+                      boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)'
+                    }}
+                  />
+                </Flex>
+              ) : (
+                <Flex align="center" gap={2}>
+                  <Box
+                    w="32px"
+                    h="32px"
+                    borderRadius="full"
+                    bg="gray.100"
+                    border="1px"
+                    borderColor="gray.200"
+                    transition="all 0.2s"
+                  />
+                  <Text fontSize="xs" color="gray.500">
+                    {t('custom')}
+                  </Text>
+                </Flex>
+              )}
+            </Flex>
+          </Box>
+        </Flex>
+      </Stack>
+    );
+  },
+); 

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

@@ -1,4 +1,4 @@
-export const CAR_COLORS: Record<'name' | 'code', string>[] = [
+export const CAR_COLORS = [
   {
     name: 'white',
     code: '#ffffff'
@@ -31,4 +31,4 @@ export const CAR_COLORS: Record<'name' | 'code', string>[] = [
     name: 'green',
     code: '#078d51'
   },
-];
+] as const satisfies { name: string; code: string }[];

src/components/order-form/form/car-color/index.ts

@@ -1 +1 @@
-export { CarColorInput } from './car-color-input';
+export { CarColorSelect } from './car-color-select';

src/components/order-form/form/order-form.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { Box, Flex, FormControl, FormLabel, VStack } from '@chakra-ui/react';
 
 import { CarBodySelect } from './car-body';
-import { CarColorInput } from './car-color';
 import { CarNumberInput } from './car-number';
 import { FormInputField, FormControllerField } from './field';
 import { OrderFormProps, OrderFormValues } from './types';
@@ -18,6 +17,7 @@ import {
   StringLocation,
   YMapsProvider,
 } from './location';
+import { CarColorSelect } from './car-color';
 
 export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
   const {
@@ -72,7 +72,7 @@ export const OrderForm = ({ onSubmit, loading, ...props }: OrderFormProps) => {
           name='carColor'
           label={t('car-color-field.label')}
           errors={errors}
-          Input={CarColorInput}
+          Input={CarColorSelect}
         />
         <FormInputField
           control={control}

src/models/landing/order.ts

@@ -45,4 +45,5 @@ export type View = {
   id: Id;
   image?: string;
   imageRating?: string;
+  imageDescription?: string;
 };

src/pages/order-view/index.tsx

@@ -96,6 +96,7 @@ const Page: FC = () => {
                       <PriceCar
                         image={order?.image}
                         rating={order?.imageRating}
+                        description={order?.imageDescription}
                       />
                     )}
                   </VStack>