dry_wash_inc/dry-wash-pl
dry_wash_inc/dry-wash-pl
3
1
Fork 0
Code Issues17 Pull Requests1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on:
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-09 10:05:42 +03:00
commit f70aff175d
12 changed files with 202 additions and 35 deletions
locales
en.jsonru.json
src
components
PriceCar
PriceCar.tsx
order-form/form
car-body
car-body-select.tsx
car-color
car-color-input.tsxcar-color-select.tsxhelper.tsindex.ts
order-form.tsx
models/landing
order.ts
pages/order-view
index.tsx
stubs/json/landing-order-view
id1-success-pending.json

13
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",

13
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": "Изображение автомобиля успешно загружено",

3
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>
);
};

7
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
// @ts-ignore
props.onChange(value);
props.onChange({
target: { value },
} as React.ChangeEvent<HTMLInputElement>);
onClose();
};
const { value, getRadioProps, getRootProps } = useRadioGroup({

23
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

162
src/components/order-form/form/car-color/car-color-select.tsx Normal file

@ -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>
);
},
);

4
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 }[];

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

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

4
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}

1
src/models/landing/order.ts

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

1
src/pages/order-view/index.tsx

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

4
stubs/json/landing-order-view/id1-success-pending.json

File diff suppressed because one or more lines are too long