bro.config.js

@@ -12,8 +12,8 @@ module.exports = {
   /* use https://admin.bro-js.ru/ to create config, navigations and features */
   navigations: {
     'dry-wash.main': '/dry-wash',
-    'dry-wash.order.create': '/order',
+    'dry-wash.create': '/order',
-    'dry-wash.order.view': '/order/:orderId',
+    'dry-wash.view.order': '/order/:orderId',
     'dry-wash.arm.master': 'master',
     'dry-wash.arm.order': 'order',
     'dry-wash.arm': '/arm/*',

locales/en.json

@@ -14,30 +14,6 @@
   "dry-wash.landing.make-order-button": "Make order",
   "dry-wash.landing.site-logo": "The logo of the \"Dry Master\" company",
   "dry-wash.landing.social-proof-section.heading": "We are being chosen",
-  "dry-wash.order-create.title": "Order a car wash",
-  "dry-wash.order-create.form.field.validation.required": "This field is required",
-  "dry-wash.order-create.form.phone-field.label": "Phone number",
-  "dry-wash.order-create.form.phone-field.invalid": "Enter the valid phone number",
-  "dry-wash.order-create.form.car-number-field.label": "Car number",
-  "dry-wash.order-create.form.car-number-field.invalid": "Enter the valid vehicle number",
-  "dry-wash.order-create.form.car-color-field.label": "The color of the car",
-  "dry-wash.order-create.form.car-body-field.label": "Car body type",
-  "dry-wash.order-create.form.washing-datetime-field.label": "What time is the car available?",
-  "dry-wash.order-create.form.washing-location-field.label": "Where is the car located?",
-  "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-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",
-  "dry-wash.order-create.car-body-select.options.crossover" : "Crossover",
-  "dry-wash.order-create.car-body-select.options.suv" : "Sport utility vehicle",
-  "dry-wash.order-create.car-body-select.options.station-wagon" : "Station wagon",
-  "dry-wash.order-create.car-body-select.options.coupe" : "Coupe",
-  "dry-wash.order-create.car-body-select.options.minivan" : "Minivan",
-  "dry-wash.order-create.car-body-select.options.pickup" : "Pickup",
-  "dry-wash.order-create.car-body-select.options.liftback" : "Liftback",
-  "dry-wash.order-create.car-body-select.options.sports-car" : "Sports-car",
-  "dry-wash.order-create.car-body-select.options.other": "Other",
-  "dry-wash.order-create.form.submit-button.label": "Submit",
   "dry-wash.arm.master.add": "Add",
   "dry-wash.arm.order.title": "Orders",
   "dry-wash.arm.order.status.progress": "In Progress",

locales/ru.json

@@ -44,35 +44,11 @@
   "dry-wash.landing.make-order-button": "Сделать заказ",
   "dry-wash.landing.site-logo": "Логотип компании \u00ABDry Master\u00BB",
   "dry-wash.landing.social-proof-section.heading": "Нас выбирают",
-  "dry-wash.order-create.title": "Заказать мойку",
-  "dry-wash.order-create.form.field.validation.required": "Это поле обязательно для заполнения",
-  "dry-wash.order-create.form.phone-field.label": "Номер телефона",
-  "dry-wash.order-create.form.phone-field.invalid": "Введите корректный номер телефона",
-  "dry-wash.order-create.form.car-number-field.label": "Номер автомобиля",
-  "dry-wash.order-create.form.car-number-field.invalid": "Введите корректный номер автомобиля",
-  "dry-wash.order-create.form.car-color-field.label": "Цвет автомобиля",
-  "dry-wash.order-create.form.car-body-field.label": "Тип кузова автомобиля",
-  "dry-wash.order-create.form.washing-datetime-field.label": "В какое время автомобиль доступен?",
-  "dry-wash.order-create.form.washing-location-field.label": "Где находится автомобиль?",
-  "dry-wash.order-create.form.washing-location-field.help": "Например, 55.754364, 48.743295 Университетская улица, 1, Иннополис, Верхнеуслонский район, Республика Татарстан (Татарстан), 420500",
-  "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" : "Хэтчбек",
-  "dry-wash.order-create.car-body-select.options.crossover" : "Кроссовер",
-  "dry-wash.order-create.car-body-select.options.suv" : "Внедорожник",
-  "dry-wash.order-create.car-body-select.options.station-wagon" : "Универсал",
-  "dry-wash.order-create.car-body-select.options.coupe" : "Купе",
-  "dry-wash.order-create.car-body-select.options.minivan" : "Минивэн",
-  "dry-wash.order-create.car-body-select.options.pickup" : "Пикап",
-  "dry-wash.order-create.car-body-select.options.liftback" : "Лифтбек",
-  "dry-wash.order-create.car-body-select.options.sports-car" : "Спорткар",
-  "dry-wash.order-create.car-body-select.options.other": "Другой",
-  "dry-wash.order-create.form.submit-button.label": "Отправить",
   "dry-wash.notFound.title": "Страница не найдена",
   "dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
   "dry-wash.notFound.button.back": "Вернуться на главную",
-  "dry-wash.errorBoundary.title": "Что-то пошло не так",
+  "dry-wash.errorBoundary.title":"Что-то пошло не так",
   "dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
   "dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
   "dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
-}
+}

package-lock.json

@@ -23,10 +23,8 @@
                 "i18next": "^23.16.4",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
-                "react-hook-form": "^7.53.2",
                 "react-i18next": "^15.1.1",
                 "react-icons": "^5.3.0",
-                "react-phone-number-input": "^3.4.9",
                 "react-router-dom": "^6.27.0"
             },
             "devDependencies": {
@@ -4920,12 +4918,6 @@
                 "node": ">=6.0"
             }
         },
-        "node_modules/classnames": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-            "license": "MIT"
-        },
         "node_modules/clean-webpack-plugin": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
@@ -5166,12 +5158,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/country-flag-icons": {
-            "version": "1.5.13",
-            "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.5.13.tgz",
-            "integrity": "sha512-4JwHNqaKZ19doQoNcBjsoYA+I7NqCH/mC/6f5cBWvdKzcK5TMmzLpq3Z/syVHMHJuDGFwJ+rPpGizvrqJybJow==",
-            "license": "MIT"
-        },
         "node_modules/cross-fetch": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
@@ -7553,27 +7539,6 @@
             "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
             "license": "ISC"
         },
-        "node_modules/input-format": {
-            "version": "0.3.11",
-            "resolved": "https://registry.npmjs.org/input-format/-/input-format-0.3.11.tgz",
-            "integrity": "sha512-q24+iW10ZMb7KIRDlVUl3GvFcadf1ttE/QA2waINkDMdjsPXStQSOvdTyHwO8p+4Mq433ILQJZRL8YKtPjNk4g==",
-            "license": "MIT",
-            "dependencies": {
-                "prop-types": "^15.8.1"
-            },
-            "peerDependencies": {
-                "react": "^18.1.0",
-                "react-dom": "^18.1.0"
-            },
-            "peerDependenciesMeta": {
-                "react": {
-                    "optional": true
-                },
-                "react-dom": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/internal-slot": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -8283,12 +8248,6 @@
                 "node": ">= 0.8.0"
             }
         },
-        "node_modules/libphonenumber-js": {
-            "version": "1.11.15",
-            "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.15.tgz",
-            "integrity": "sha512-M7+rtYi9l5RvMmHyjyoF3BHHUpXTYdJ0PezZGHNs0GyW1lO+K7jxlXpbdIb7a56h0nqLYdjIw+E+z0ciGaJP7g==",
-            "license": "MIT"
-        },
         "node_modules/lines-and-columns": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -9583,22 +9542,6 @@
                 }
             }
         },
-        "node_modules/react-hook-form": {
-            "version": "7.53.2",
-            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.2.tgz",
-            "integrity": "sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=18.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/react-hook-form"
-            },
-            "peerDependencies": {
-                "react": "^16.8.0 || ^17 || ^18 || ^19"
-            }
-        },
         "node_modules/react-i18next": {
             "version": "15.1.1",
             "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.1.tgz",
@@ -9635,23 +9578,6 @@
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
             "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         },
-        "node_modules/react-phone-number-input": {
-            "version": "3.4.9",
-            "resolved": "https://registry.npmjs.org/react-phone-number-input/-/react-phone-number-input-3.4.9.tgz",
-            "integrity": "sha512-RG40GTjfJwBR5whpEkQMvMMKcbqQSlXiKfiTp2mYoULkTYwxFn04iAVplRizWi3yLPL0fQiL4U+YU+9MIQGZog==",
-            "license": "MIT",
-            "dependencies": {
-                "classnames": "^2.5.1",
-                "country-flag-icons": "^1.5.11",
-                "input-format": "^0.3.10",
-                "libphonenumber-js": "^1.11.12",
-                "prop-types": "^15.8.1"
-            },
-            "peerDependencies": {
-                "react": ">=16.8",
-                "react-dom": ">=16.8"
-            }
-        },
         "node_modules/react-remove-scroll": {
             "version": "2.6.0",
             "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",

package.json

@@ -31,10 +31,8 @@
         "i18next": "^23.16.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.53.2",
         "react-i18next": "^15.1.1",
         "react-icons": "^5.3.0",
-        "react-phone-number-input": "^3.4.9",
         "react-router-dom": "^6.27.0"
     },
     "devDependencies": {

src/__data__/urls.ts

@@ -1,7 +1,7 @@
 import { generatePath } from 'react-router-dom';
 import { getNavigationValue } from '@brojs/cli';
 
-import { Order } from '../models/landing';
+import { Order } from '../models';
 
 const getFullUrls = (url: string) =>
   `${getNavigationValue('dry-wash.main')}${url}`;
@@ -13,14 +13,14 @@ export const URLs = {
       return this.url;
     },
   },
-  orderCreate: {
+  orderForm: {
-    url: getFullUrls(getNavigationValue('dry-wash.order.create')),
+    url: getNavigationValue('dry-wash.create'),
     getUrl() {
       return this.url;
     },
   },
   orderView: {
-    url: getFullUrls(getNavigationValue('dry-wash.order.view')),
+    url: getNavigationValue('dry-wash.view.order'),
     getUrl(orderId: Order.Id) {
       return generatePath(this.url, { orderId });
     },

src/components/landing/CtaButton/CtaButton.tsx

@@ -11,7 +11,7 @@ export const CtaButton: FC<ButtonProps> = (props) => {
   return (
     <Button
       as={RouterLink}
-      to={URLs.orderCreate.getUrl()}
+      to={URLs.orderForm.getUrl()}
       colorScheme='primary'
       {...props}
     >

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

@@ -1,23 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Select, SelectProps } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-
-import { carBodySelectOptions } from './helper';
-
-export const CarBodySelect = forwardRef<HTMLSelectElement, SelectProps>(
-  function CarBodySelect(props, ref) {
-    const { t } = useTranslation('~', {
-      keyPrefix: 'dry-wash.order-create.car-body-select',
-    });
-
-    return (
-      <Select ref={ref} placeholder={t('placeholder')} {...props}>
-        {carBodySelectOptions.map(({ value, labelTKey }, i) => (
-          <option key={i} value={value}>
-            {t(`options.${labelTKey}`)}
-          </option>
-        ))}
-      </Select>
-    );
-  },
-);

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

@@ -1,50 +0,0 @@
-import { Car } from "../../../../models/landing";
-
-import { CarBodySelectOption } from "./types";
-
-export const carBodySelectOptions: CarBodySelectOption[] = [
-  {
-    value: Car.BodyStyle.SEDAN,
-    labelTKey: 'sedan'
-  },
-  {
-    value: Car.BodyStyle.HATCHBACK,
-    labelTKey: 'hatchback'
-  },
-  {
-    value: Car.BodyStyle.CROSSOVER,
-    labelTKey: 'crossover'
-  },
-  {
-    value: Car.BodyStyle.SUV,
-    labelTKey: 'suv'
-  },
-  {
-    value: Car.BodyStyle.STATION_WAGON,
-    labelTKey: 'station-wagon'
-  },
-  {
-    value: Car.BodyStyle.COUPE,
-    labelTKey: 'coupe'
-  },
-  {
-    value: Car.BodyStyle.MINIVAN,
-    labelTKey: 'minivan'
-  },
-  {
-    value: Car.BodyStyle.PICKUP,
-    labelTKey: 'pickup'
-  },
-  {
-    value: Car.BodyStyle.LIFTBACK,
-    labelTKey: 'liftback'
-  },
-  {
-    value: Car.BodyStyle.SPORTS_CAR,
-    labelTKey: 'sports-car'
-  },
-  {
-    value: Car.BodyStyle.OTHER,
-    labelTKey: 'other'
-  },
-];

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

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

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

@@ -1,17 +0,0 @@
-import { Car } from "../../../../models/landing";
-
-export type CarBodySelectOption = {
-  value: Car.BodyStyle;
-  labelTKey:
-  'sedan' |
-  'hatchback' |
-  'crossover' |
-  'suv' |
-  'station-wagon' |
-  'coupe' |
-  'minivan' |
-  'pickup' |
-  'liftback' |
-  'sports-car' |
-  'other';
-};

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/helper.ts

@@ -1,34 +0,0 @@
-export const CAR_COLORS: Record<'name' | 'code', string>[] = [
-  {
-    name: 'white',
-    code: '#ffffff'
-  },
-  {
-    name: 'black',
-    code: '#000000'
-  },
-  {
-    name: 'silver',
-    code: '#c0c0c0'
-  },
-  {
-    name: 'gray',
-    code: '#808080'
-  },
-  {
-    name: 'beige-brown',
-    code: '#796745'
-  },
-  {
-    name: 'red',
-    code: '#b90000'
-  },
-  {
-    name: 'blue',
-    code: '#003B62'
-  },
-  {
-    name: 'green',
-    code: '#078d51'
-  },
-];

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

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

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

@@ -1,22 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input, InputProps } from '@chakra-ui/react';
-
-import { handleInputChange } from './helper';
-
-export const CarNumberInput = forwardRef<HTMLInputElement, InputProps>(
-  function CarNumberInput({ onChange, ...props }, ref) {
-    return (
-      <Input
-        {...props}
-        ref={ref}
-        onChange={(e) => {
-          const formattedValue = handleInputChange(e.target.value);
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          onChange?.(formattedValue);
-        }}
-        maxLength={8}
-      />
-    );
-  },
-);

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

@@ -1,33 +0,0 @@
-const VALID_LETTER = 'а|в|е|к|м|н|о|р|с|т|у|х';
-
-const invalidCharsRe = new RegExp(`[^(${VALID_LETTER})0-9]`, 'gi');
-const cleanValue = (value: string) => value.replace(invalidCharsRe, '');
-
-const validCarNumberInputRe = new RegExp(`^([${VALID_LETTER}]{1}|$)((?:[0-9]|$)(?:[0-9]|$)(?:[0-9]|$))([${VALID_LETTER}]{1,2}|$)$`, 'gi');
-const isValidInput = (cleanedValue: string) => validCarNumberInputRe.test(cleanedValue);
-
-const formatAsCarNumber = (cleanedValue: string) => {
-  return cleanedValue.replace(validCarNumberInputRe, (_, p1, p2, p3) => [p1, p2, p3].join(' ')).toUpperCase();
-};
-const getWithoutLastChar = (value: string) => value.substring(0, value.length - 1);
-
-export const handleInputChange = (value: string | undefined | null) => {
-  const cleanedValue = cleanValue(value);
-
-  if (!cleanedValue) {
-    return '';
-  }
-
-  if (isValidInput(cleanedValue)) {
-    return formatAsCarNumber(cleanedValue).trim();
-  }
-
-  return getWithoutLastChar(value).trim();
-};
-
-const validCarNumberRe = new RegExp(`^[${VALID_LETTER}][0-9]{3}[${VALID_LETTER}]{2}$`, 'i');
-
-export const isValidCarNumber = (value: string) => {
-  const cleanedValue = cleanValue(value);
-  return validCarNumberRe.test(cleanedValue);
-};

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

@@ -1,2 +0,0 @@
-export { CarNumberInput } from './car-number-input';
-export { isValidCarNumber } from './helper';

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

@@ -1,12 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Input, InputProps } from '@chakra-ui/react';
-
-export type DateTimeInputProps = InputProps;
-
-export const DateTimeInput = forwardRef<HTMLInputElement, DateTimeInputProps>(
-  function DateTimeInput(props, ref) {
-    return <Input ref={ref} {...props} type='datetime-local' />;
-  },
-);
-
-// todo: apply brand styles to popover

src/components/order-form/form/date-time/index.ts

@@ -1 +0,0 @@
-export { type DateTimeInputProps, DateTimeInput } from './date-time';

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-
-import { FormControllerFieldProps } from './types';
-
-export const FormControllerField = ({
-  control,
-  name,
-  label,
-  isRequired,
-  rules,
-  errors,
-  Controller
-}: FormControllerFieldProps) => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.form.field',
-  });
-  const fieldErrors = errors[name];
-
-  return (
-    <FormControl isRequired={isRequired} isInvalid={!!fieldErrors}>
-      <FormLabel htmlFor={name}>{label}</FormLabel>
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: isRequired && t('validation.required'),
-          ...rules,
-        }}
-      />
-      <FormErrorMessage>{fieldErrors?.message}</FormErrorMessage>
-    </FormControl>
-  );
-};

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import {
-  FormControl,
-  FormLabel,
-  FormErrorMessage,
-  FormHelperText,
-} from '@chakra-ui/react';
-import { Controller } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import { FormInputFieldProps } from './types';
-
-export const FormInputField = ({
-  control,
-  name,
-  label,
-  isRequired,
-  rules,
-  errors,
-  Input,
-  inputProps,
-  help,
-}: FormInputFieldProps) => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.form.field',
-  });
-  const fieldErrors = errors[name];
-
-  return (
-    <FormControl isRequired={label && isRequired} isInvalid={!!fieldErrors}>
-      {label && <FormLabel htmlFor={name}>{label}</FormLabel>}
-      <Controller
-        control={control}
-        name={name}
-        rules={{
-          required: isRequired && t('validation.required'),
-          ...rules,
-        }}
-        render={({ field }) => (
-          <Input variant='filled' {...field} {...inputProps} />
-        )}
-      />
-      <FormErrorMessage>{fieldErrors?.message}</FormErrorMessage>
-      {help && <FormHelperText>{help}</FormHelperText>}
-    </FormControl>
-  );
-};

src/components/order-form/form/field/index.ts

@@ -1,3 +0,0 @@
-export type { FormFieldProps } from './types';
-export { FormInputField } from './form-input-field';
-export { FormControllerField } from './form-controller-field';

src/components/order-form/form/field/types.ts

@@ -1,26 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { ControllerProps, ControllerRenderProps, FieldErrors } from 'react-hook-form';
-import { FormLabelProps, FormControlProps, HelpTextProps, InputProps as ChakraInputProps, SelectProps as ChakraSelectProps } from '@chakra-ui/react';
-
-import { OrderFormValues } from '../types';
-
-export type FormFieldProps<FormValues = OrderFormValues> = {
-  name: ControllerProps<FormValues>['name'] & FormLabelProps['htmlFor'];
-  label?: FormLabelProps['children'];
-  errors: FieldErrors<FormValues>;
-  control: ControllerProps<FormValues>['control'];
-  isRequired?: FormControlProps['isRequired'];
-  rules?: ControllerProps<FormValues>['rules'];
-};
-
-type InputProps<FormValues = OrderFormValues> = Partial<ControllerRenderProps<FormValues> & ChakraInputProps & ChakraSelectProps>;
-
-export type FormInputFieldProps<FormValues = OrderFormValues, Input = (props: InputProps<FormValues>) => ReactNode> = FormFieldProps<FormValues> & {
-  Input: Input;
-  inputProps?: InputProps<FormValues>;
-  help?: HelpTextProps['children'];
-};
-
-export type FormControllerFieldProps<FormValues = OrderFormValues> = FormFieldProps<FormValues> & {
-  Controller: (props: Pick<ControllerProps<FormValues>, 'control' | 'name' | 'rules'>) => ReactElement;
-};

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

@@ -1,67 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { InputProps, SelectProps } from "@chakra-ui/react";
-
-import { Order } from "../../../models/landing";
-
-import { FormFieldProps } from "./field";
-import { OrderFormValues } from "./types";
-import { isValidCarNumber } from "./car-number";
-import { isValidPhoneNumber } from "./phone";
-
-export const defaultValues: Partial<OrderFormValues> = {
-  phone: '',
-  carNumber: '',
-  carColor: '',
-  availableDatetimeBegin: '',
-  availableDatetimeEnd: '',
-};
-
-export const useGetValidationRules = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.form',
-  });
-
-  return {
-    isValidPhoneNumber: {
-      validate: (value: string) => isValidPhoneNumber(value) || t('phone-field.invalid')
-    },
-    isValidCarNumber: {
-      validate: (value: string) => isValidCarNumber(value) || t('car-number-field.invalid')
-    },
-  } satisfies Record<string, FormFieldProps['rules']>;
-};
-
-const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
-
-const getValidCarBodyStyle = (fieldValue: string) => {
-  const carBodyAsNumber = Number(fieldValue);
-  return Number.isNaN(carBodyAsNumber) ? undefined : carBodyAsNumber;
-};
-
-export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocation, availableDatetimeBegin, availableDatetimeEnd }: OrderFormValues): Order.Create => {
-  return {
-    customer: {
-      phone
-    },
-    car: {
-      number: removeAllSpaces(carNumber),
-      body: getValidCarBodyStyle(carBody),
-      color: carColor
-    },
-    washing: {
-      location: carLocation,
-      begin: availableDatetimeBegin,
-      end: availableDatetimeEnd,
-    }
-  };
-};
-
-export const onSubmit = (values: OrderFormValues) => {
-  return new Promise((resolve) => {
-    console.log(formatFormValues(values));
-    resolve(formatFormValues(values));
-  });
-};
-
-export const inputCommonStyles: Partial<InputProps & SelectProps> = {
-};

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

@@ -1 +0,0 @@
-export { OrderForm } from './order-form';

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

@@ -1,130 +0,0 @@
-import React, { FC } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Flex,
-  FormControl,
-  FormLabel,
-  Input,
-  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 { OrderFormValues } from './types';
-import { PhoneInput } from './phone';
-import { SubmitButton } from './submit';
-import { defaultValues, onSubmit, useGetValidationRules } from './helper';
-import { DateTimeInput } from './date-time';
-
-export const OrderForm: FC = () => {
-  const {
-    handleSubmit,
-    control,
-    formState: { errors, isSubmitting },
-    watch,
-  } = useForm<OrderFormValues>({ defaultValues, shouldFocusError: true });
-
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.form',
-  });
-
-  const RULES = useGetValidationRules();
-
-  const [availableDatetimeBegin, availableDatetimeEnd] = watch([
-    'availableDatetimeBegin',
-    'availableDatetimeEnd',
-  ]);
-
-  return (
-    <Box p={4} marginInline='auto'>
-      <VStack
-        as='form'
-        noValidate
-        onSubmit={handleSubmit(onSubmit)}
-        align='flex-start'
-        gap={6}
-      >
-        <FormControllerField
-          control={control}
-          name='phone'
-          label={t('phone-field.label')}
-          isRequired
-          rules={RULES.isValidPhoneNumber}
-          errors={errors}
-          Controller={PhoneInput}
-        />
-        <FormInputField
-          control={control}
-          name='carNumber'
-          label={t('car-number-field.label')}
-          isRequired
-          rules={RULES.isValidCarNumber}
-          errors={errors}
-          Input={CarNumberInput}
-        />
-        <FormInputField
-          control={control}
-          name='carColor'
-          label={t('car-color-field.label')}
-          errors={errors}
-          Input={CarColorInput}
-        />
-        <FormInputField
-          control={control}
-          name='carBody'
-          label={t('car-body-field.label')}
-          isRequired
-          errors={errors}
-          Input={CarBodySelect}
-        />
-        <FormInputField
-          control={control}
-          name='carLocation'
-          label={t('washing-location-field.label')}
-          isRequired
-          errors={errors}
-          Input={Input}
-          help={t('washing-location-field.help')}
-        />
-        <FormControl isRequired>
-          <FormLabel>{t('washing-datetime-field.label')}</FormLabel>
-          <Flex flexWrap='wrap' gap={4}>
-            <Box flex='1 0 100px'>
-              <FormInputField
-                control={control}
-                name='availableDatetimeBegin'
-                isRequired
-                errors={errors}
-                Input={DateTimeInput}
-                inputProps={{
-                  max: availableDatetimeEnd,
-                }}
-              />
-            </Box>
-            <Box flex='1 0 100px'>
-              <FormInputField
-                control={control}
-                name='availableDatetimeEnd'
-                isRequired
-                errors={errors}
-                Input={DateTimeInput}
-                inputProps={{
-                  min: availableDatetimeBegin,
-                }}
-              />
-            </Box>
-          </Flex>
-        </FormControl>
-        <SubmitButton isLoading={isSubmitting} mt={4} />
-      </VStack>
-    </Box>
-  );
-};
-
-// todo: remove layout shift, when a validation message is displayed
-// todo: select location using an interactive map
-// todo: fix time range available values

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

@@ -1 +0,0 @@
-export { isValidPhoneNumber } from "react-phone-number-input";

src/components/order-form/form/phone/index.ts

@@ -1,2 +0,0 @@
-export { PhoneInput } from './phone-input';
-export { isValidPhoneNumber } from './helper';

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import ReactPhoneNumberInput from 'react-phone-number-input/react-hook-form-input';
-import { Input } from '@chakra-ui/react';
-
-import 'react-phone-number-input/style.css';
-
-import { PhoneInputType } from './types';
-
-export const PhoneInput: PhoneInputType = (props) => {
-  return (
-    <ReactPhoneNumberInput
-      defaultCountry='RU'
-      inputComponent={Input}
-      variant='filled'
-      {...props}
-    />
-  );
-};

src/components/order-form/form/phone/types.ts

@@ -1,7 +0,0 @@
-import { FieldValues } from 'react-hook-form';
-import { DefaultInputComponentProps } from 'react-phone-number-input';
-import { DefaultFormValues, Props } from 'react-phone-number-input/react-hook-form';
-
-type PhoneInputProps<FormValues, InputComponentProps = DefaultInputComponentProps> = Props<InputComponentProps, FormValues>;
-
-export type PhoneInputType = <FormValues extends FieldValues = DefaultFormValues, InputComponentProps = DefaultInputComponentProps>(props: PhoneInputProps<FormValues, InputComponentProps>) => JSX.Element;

src/components/order-form/form/submit/index.ts

@@ -1 +0,0 @@
-export { SubmitButton } from './submit-button';

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

@@ -1,15 +0,0 @@
-import React, { FC } from 'react';
-import { Button, ButtonProps } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-
-export const SubmitButton: FC<ButtonProps> = (props) => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create.form.submit-button',
-  });
-
-  return (
-    <Button type='submit' colorScheme='primary' borderRadius={50} paddingInline={8} {...props}>
-      {t('label')}
-    </Button>
-  );
-};

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

@@ -1,9 +0,0 @@
-export type OrderFormValues = {
-  phone: string;
-  carNumber: string;
-  carColor: string;
-  carBody: string;
-  carLocation: string;
-  availableDatetimeBegin: string;
-  availableDatetimeEnd: string;
-};

src/components/order-form/index.ts

@@ -1 +0,0 @@
-export * from './form';

src/containers/LandingThemeProvider/theme-config.ts

@@ -37,44 +37,6 @@ const overrides = {
       }
     },
   },
-  components: {
-    Input: {
-      variants: {
-        filled: {
-          field: {
-            borderRadius: 12,
-            bgColor: 'primary.50',
-            color: 'primary.600',
-            _hover: {
-              borderColor: 'primary.100',
-              bgColor: 'primary.50',
-            },
-            _focus: {
-              borderColor: 'primary.200',
-            }
-          }
-        }
-      }
-    },
-    Select: {
-      variants: {
-        filled: {
-          field: {
-            borderRadius: 12,
-            bgColor: 'primary.50',
-            color: 'primary.600',
-            _hover: {
-              borderColor: 'primary.100',
-              bgColor: 'primary.50',
-            },
-            _focus: {
-              borderColor: 'primary.200',
-            }
-          }
-        }
-      }
-    }
-  }
 };
 
 export default extendTheme(overrides);

src/models/index.ts

@@ -1 +1,3 @@
-export * from './i18n';
+export * from './i18n';
+export * as Order from './order';
+export * as Review from './review';

src/models/landing/car.ts

@@ -1,18 +0,0 @@
-export type RegistrationNumber = string; // А012ВЕ
-
-export type Color = string; // #000000
-
-export const enum BodyStyle {
-  UNKNOWN = 0,
-  SEDAN = 1,
-  HATCHBACK = 2,
-  CROSSOVER = 3,
-  SUV = 4,
-  STATION_WAGON = 5,
-  COUPE = 6,
-  MINIVAN = 7,
-  PICKUP = 8,
-  LIFTBACK = 9,
-  SPORTS_CAR = 10,
-  OTHER = 99
-}

src/models/landing/customer.ts

@@ -1 +0,0 @@
-export type PhoneNumber = string; // +79876543210

src/models/landing/index.ts

@@ -1,6 +1 @@
-export * as Car from './car';
-export * as Customer from './customer';
-export * as Washing from './washing';
-export * as Order from './order'; // import: Car, Customer, Washing
-export * as Review from './review';
 export * from './stubs';

src/models/landing/order.ts

@@ -1,23 +0,0 @@
-import { Car, Customer, Washing } from ".";
-
-export type Id = string;
-
-export type Create = {
-  customer: {
-    phone: Customer.PhoneNumber,
-  };
-  car: {
-    number: Car.RegistrationNumber,
-    body: Car.BodyStyle,
-    color: Car.Color,
-  },
-  washing: {
-    location: Washing.Location
-    begin: Washing.AvailableBeginDateTime,
-    end: Washing.AvailableEndDateTime,
-  }
-};
-
-export type View = {
-  id: Id;
-};

src/models/landing/washing.ts

@@ -1,5 +0,0 @@
-export type Location = string; // ?
-
-export type AvailableBeginDateTime = string; // YYYY-MM-DDThh:mm
-
-export type AvailableEndDateTime = string; // YYYY-MM-DDThh:mm

src/models/order.ts

@@ -0,0 +1,5 @@
+export type Id = string;
+
+export type View = {
+  id: Id;
+};

src/pages/order-create/index.tsx

@@ -1,32 +0,0 @@
-import React, { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Container, Heading, VStack } from '@chakra-ui/react';
-
-import { LandingThemeProvider } from '../../containers';
-import { OrderForm } from '../../components/order-form';
-
-const Page: FC = () => {
-  const { t } = useTranslation('~', {
-    keyPrefix: 'dry-wash.order-create',
-  });
-
-  return (
-    <LandingThemeProvider>
-      <Container
-        w='full'
-        maxWidth='container.xl'
-        minH='100vh'
-        padding={0}
-        bg='white'
-        centerContent
-      >
-        <VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
-          <Heading textAlign='center' mt={4}>{t('title')}</Heading>
-          <OrderForm />
-        </VStack>
-      </Container>
-    </LandingThemeProvider>
-  );
-};
-
-export default Page;

src/pages/order-form/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+
+import { URLs } from '../../__data__/urls';
+import { mockOrder } from '../../mocks/landing';
+
+const Page = () => {
+  return (
+    <>
+      <h1>Order form</h1>
+      {mockOrder.orders.map(({ id }) => (
+        <Button key={id} as={RouterLink} to={URLs.orderView.getUrl(id)}>
+          Посмотреть заказ {id}
+        </Button>
+      ))}
+    </>
+  );
+};
+
+export default Page;

src/routes.tsx

@@ -7,18 +7,16 @@ import { URLs } from './__data__/urls';
 import NotFound from './pages/notFound/notFound';
 
 const Landing = lazy(() => import('./pages/landing'));
-const OrderCreate = lazy(() => import('./pages/order-create'));
+const OrderForm = lazy(() => import('./pages/order-form'));
 const OrderView = lazy(() => import('./pages/order-view'));
 
 const Routers = () => {
   return (
     <Suspense fallback={<PageSpinner />}>
       <Routes>
-        <Route path={URLs.landing.url}>
+        <Route path={URLs.landing.url} element={<Landing />} />
-          <Route index element={<Landing />} />
+        <Route path={URLs.orderForm.url} element={<OrderForm />} />
-          <Route path={URLs.orderCreate.url} element={<OrderCreate />} />
+        <Route path={URLs.orderView.url} element={<OrderView />} />
-          <Route path={URLs.orderView.url} element={<OrderView />} />
-        </Route>
         {URLs.armBase.isOn && (
           <Route path={URLs.armBase.url} element={<Arm />}></Route>
         )}