Compare commits

..

No commits in common. "main" and "feature/eslint" have entirely different histories.

190 changed files with 2609 additions and 11705 deletions

8
.gitignore vendored
View File

@ -130,10 +130,4 @@ dist
.yarn/install-state.gz
.pnp.*
.idea
# Playwright
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
.idea

57
Jenkinsfile vendored
View File

@ -1,57 +0,0 @@
pipeline {
agent {
docker {
image 'node:20'
}
}
stages {
stage('install (ci)') {
steps {
sh 'node -v'
sh 'npm -v'
script {
String tag = sh(returnStdout: true, script: 'git tag --contains').trim()
String branchName = sh(returnStdout: true, script: 'git rev-parse --abbrev-ref HEAD').trim()
String commit = sh(returnStdout: true, script: 'git log -1 --oneline').trim()
String commitMsg = commit.substring(commit.indexOf(' ')).trim()
if (tag) {
currentBuild.displayName = "#${BUILD_NUMBER}, tag ${tag}"
} else {
currentBuild.displayName = "#${BUILD_NUMBER}, branch ${branchName}"
}
String author = sh(returnStdout: true, script: "git log -1 --pretty=format:'%an'").trim()
currentBuild.description = "${author}<br />${commitMsg}"
echo 'starting installing'
sh 'npm ci'
}
}
}
stage('checks') {
parallel {
stage('eslint') {
steps {
sh 'npm run eslint'
}
}
stage('build') {
steps {
sh 'npm run build'
}
}
}
}
stage('clean-all') {
steps {
sh 'rm -rf .[!.]*'
sh 'rm -rf ./*'
sh 'ls -a'
}
}
}
}

View File

@ -45,12 +45,10 @@
### MVP1
**1. Landing**
- преимущества сервиса
- оставить заявку (редирект на Страницу оформления заказа)
**2. Страница для оформления заказа**
- форма
- номер машины (mask input)
- цвет машины
@ -60,12 +58,10 @@
- после заполнения редирект на страницу с деталями заказа
**3. Страница с деталями заказа**
- описание заказа
- детали заказа (id, статус)
**3. АРМ оператора**
- список заказов (RUD)
- id заказа
- статус заказа (готово / не готово)
@ -76,6 +72,7 @@
- кнопка "Добавить"
- кнопка "Удалить"
### Built With
[![React][React.js]][React-url]
@ -106,14 +103,6 @@
<p align="right">(<a href="#readme-top">back to top</a>)</p>
## Instructions
### Stubs types generation
1. generate types with json-literal-typer (should be installed globally)
```sh
npx json-literal-typer -i <path to json> -o <path to output ts-file>
```
2. export default type from output file
<!-- PARTICIPANTS -->
## Participants

View File

@ -1 +0,0 @@
module.exports = 'file';

View File

@ -1,9 +0,0 @@
import localeRu from '../locales/ru.json';
module.exports = {
useTranslation: (_, { keyPrefix }) => {
return {
t: (key: string) => localeRu[`${keyPrefix}.${key}`],
};
}
};

View File

@ -1,7 +0,0 @@
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
['@babel/preset-react', { runtime: 'automatic' }],
],
};

View File

@ -1,9 +1,9 @@
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-require-imports */
const pkg = require('./package');
const pkg = require("./package");
module.exports = {
apiPath: 'stubs/api',
apiPath: "stubs/api",
webpackConfig: {
output: {
publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
@ -11,20 +11,17 @@ 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.order.view': '/order/:orderId',
'dry-wash.arm.master': 'master',
'dry-wash.arm.order': 'order',
'dry-wash.arm': '/arm/*',
"dry-wash.main": "/dry-wash",
"dry-wash.create": "/order",
"dry-wash.view.order": "/order/:orderId",
"dry-wash.arm": "/arm",
},
features: {
'dry-wash-pl': {
"dry-wash-pl": {
// add your features here in the format [featureName]: { value: string }
'order-view-status-polling': { value: '3000' }
},
},
config: {
'dry-wash.api': '/api',
"dry-wash-pl.api": "/api",
},
};

View File

@ -1,26 +0,0 @@
import { test, expect } from '@playwright/test';
test.beforeEach('check server is up', async ({ page }) => {
try {
await page.goto('http://localhost:8099/dry-wash');
const makeOrderText = page.getByText('Сделать заказ', { exact: true });
await expect(makeOrderText).toBeVisible();
} catch (error) {
console.error('server not up');
test.skip();
}
});
test('login', async ({ page }) => {
await page.goto('http://localhost:8099/dry-wash/arm');
await page.getByRole('textbox', { name: 'Username or email' }).click();
await page
.getByRole('textbox', { name: 'Username or email' })
.fill('237x237');
await page.getByRole('textbox', { name: 'Password' }).click();
await page.getByRole('textbox', { name: 'Password' }).fill('');
await page.getByRole('button', { name: 'Sign In' }).click();
await page.getByRole('heading', { name: 'Заказы' }).click();
await page.getByRole('link', { name: 'Мастера' }).click();
await page.getByRole('link', { name: 'Заказы' }).click();
});

View File

@ -1,52 +1,39 @@
import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import stylistic from '@stylistic/eslint-plugin';
import pluginImport from 'eslint-plugin-import';
export default [
{ files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
{ files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
{ languageOptions: { globals: globals.browser } },
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
{
plugins: {
'@stylistic': stylistic,
import: pluginImport,
'@stylistic': stylistic
},
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': [
'warn', // or "error"
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"warn", // or "error"
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
"argsIgnorePattern": "^_",
"varsIgnorePattern": "^_",
"caughtErrorsIgnorePattern": "^_"
}
],
'sort-imports': ['off'],
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
['sibling', 'index'],
],
'newlines-between': 'always',
},
],
semi: ['error', 'always'],
"sort-imports": ["error", {
"ignoreCase": false,
"ignoreDeclarationSort": true,
"ignoreMemberSort": true,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
"allowSeparatedGroups": true
}],
semi: ["error", "always"],
'@stylistic/indent': ['error', 2],
'react/prop-types': 'off',
'react/prop-types': 'off'
},
},
{
ignores: ['babel.config.js'],
},
}
];

View File

@ -1,19 +0,0 @@
module.exports = {
transform: {
'^.+\\.tsx?$': 'babel-jest',
},
coverageProvider: 'v8',
coverageDirectory: 'coverage',
collectCoverageFrom: ['**/src/**/*.{ts,tsx}', '!**/src/app.tsx'],
collectCoverage: true,
clearMocks: true,
moduleNameMapper: {
'\\.(svg|webp)$': '<rootDir>/__mocks__/file',
'react-i18next': '<rootDir>/__mocks__/react-i18next',
},
testEnvironmentOptions: {
customExportConditions: [''],
},
testEnvironment: 'jest-fixed-jsdom',
testPathIgnorePatterns: ['/node_modules/', '<rootDir>/e2e'],
};

View File

@ -1,109 +0,0 @@
{
"dry-wash.landing.benefits-section.description": "Discover the benefits of our car dry cleaning services",
"dry-wash.landing.benefits-section.heading": "Advantages of an eco-friendly car wash",
"dry-wash.landing.benefits-section.list.0": "Environmentally friendly products",
"dry-wash.landing.benefits-section.list.1": "Fast and efficient service",
"dry-wash.landing.benefits-section.list.2": "Convenient mobile access",
"dry-wash.landing.benefits-section.list.3": "Reliable and trustworthy",
"dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. All rights reserved",
"dry-wash.landing.footer.links.faq": "FAQ",
"dry-wash.landing.footer.links.privacy-policy": "Privacy policy",
"dry-wash.landing.footer.links.service-terms": "Terms of service",
"dry-wash.landing.hero-section.description": "Experience the ultimate convenience of a dry car wash, designed for a cleaner planet.",
"dry-wash.landing.hero-section.headline": "Revitalize Your Ride with Eco-Friendly Care!",
"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.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-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.order-create.order-creation-title": "Creating order ...",
"dry-wash.order-create.create-order-query.success.title": "The order is successfully created",
"dry-wash.order-create.create-order-query.error.title": "Failed to create an order",
"dry-wash.order-view.title": "Your order",
"dry-wash.order-view.get-order-query.error.title": "Failed to fetch the details of order",
"dry-wash.order-view.details.title": "Order #{{number}}",
"dry-wash.order-view.details.owner": "Owner",
"dry-wash.order-view.details.car": "Car",
"dry-wash.order-view.details.location": "Where",
"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.arm.master.add": "Add",
"dry-wash.arm.order.title": "Orders",
"dry-wash.arm.order.table.empty": "Table empty",
"dry-wash.arm.order.error.title": "Error loading data",
"dry-wash.arm.order.status.progress": "In Progress",
"dry-wash.arm.order.status.complete": "Completed",
"dry-wash.arm.order.status.pending": "Pending",
"dry-wash.arm.order.status.working": "Working",
"dry-wash.arm.order.status.canceled": "Canceled",
"dry-wash.arm.order.status.placeholder": "Select status",
"dry-wash.arm.order.master.placeholder": "Select master",
"dry-wash.arm.order.table.header.carNumber": "Car Number",
"dry-wash.arm.order.table.header.washingTime": "Washing Time",
"dry-wash.arm.order.table.header.orderDate": "Order Date",
"dry-wash.arm.order.table.header.status": "Status",
"dry-wash.arm.order.table.header.masters": "Master",
"dry-wash.arm.order.table.header.telephone": "Telephone",
"dry-wash.arm.order.table.header.location": "Location",
"dry-wash.arm.master.title": "Masters",
"dry-wash.arm.master.table.header.name": "Name",
"dry-wash.arm.master.table.empty": "Table empty",
"dry-wash.arm.master.error.title": "Error loading data",
"dry-wash.arm.master.table.header.currentJob": "Current Job",
"dry-wash.arm.master.table.header.phone": "Phone",
"dry-wash.arm.master.table.header.actions": "Actions",
"dry-wash.arm.master.table.actionsMenu.delete": "Delete Master",
"dry-wash.arm.master.schedule.empty": "free",
"dry-wash.arm.master.editable.aria.cancel": "Undo changes",
"dry-wash.arm.master.editable.aria.save": "Save changes ",
"dry-wash.arm.master.editable.aria.edit": "Edit",
"dry-wash.arm.master.drawer.title": "Add New Master",
"dry-wash.arm.master.drawer.inputName.label": "Full Name",
"dry-wash.arm.master.drawer.inputName.placeholder": "Enter Full Name",
"dry-wash.arm.master.drawer.inputPhone.label": "Phone Number",
"dry-wash.arm.master.drawer.inputPhone.placeholder": "Enter Phone Number",
"dry-wash.arm.master.drawer.button.save": "Save",
"dry-wash.arm.master.drawer.button.cancel": "Cancel",
"dry-wash.arm.master.drawer.toast.create-master": "Master created",
"dry-wash.arm.master.drawer.toast.error.empty-fields": "Fields cannot be empty",
"dry-wash.arm.master.drawer.toast.error.base": "Error",
"dry-wash.arm.master.drawer.toast.error.create-master": "Error creating master",
"dry-wash.arm.master.drawer.toast.error.create-master-details": "Failed to add master. Please try again",
"dry-wash.arm.master.drawer.form.name.required": "Master name is required",
"dry-wash.arm.master.drawer.form.phone.required": "Phone number is required",
"dry-wash.arm.master.drawer.form.phone.pattern": "Invalid phone number",
"dry-wash.arm.master.drawer.form.name.minLength": "Name must contain at least 2 characters",
"dry-wash.arm.master.sideBar.orders": "Orders",
"dry-wash.arm.master.sideBar.master": "Masters",
"dry-wash.arm.master.sideBar.title": "Dry Master",
"dry-wash.notFound.title": "Page Not Found",
"dry-wash.notFound.description": "Unfortunately, the page you are looking for does not exist.",
"dry-wash.notFound.button.back": "Back to Home",
"dry-wash.errorBoundary.title": "Something went wrong",
"dry-wash.errorBoundary.description": "We are already working on fixing the issue",
"dry-wash.errorBoundary.button.reload": "Reload Page",
"dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
}

View File

@ -1,115 +0,0 @@
{
"dry-wash.arm.master.add": "Добавить",
"dry-wash.arm.order.title": "Заказы",
"dry-wash.arm.order.status.progress": "Выполняется",
"dry-wash.arm.order.status.complete": "Завершено",
"dry-wash.arm.order.status.pending": "В ожидании",
"dry-wash.arm.order.status.working": "В работе",
"dry-wash.arm.order.status.canceled": "Отменено",
"dry-wash.arm.order.status.placeholder": "Выберите статус",
"dry-wash.arm.order.master.placeholder": "Выберите мастера",
"dry-wash.arm.order.table.header.carNumber": "Номер машины",
"dry-wash.arm.order.table.header.washingTime": "Время мойки",
"dry-wash.arm.order.table.header.orderDate": "Дата заказа",
"dry-wash.arm.order.table.header.status": "Статус",
"dry-wash.arm.order.table.header.masters": "Мастер",
"dry-wash.arm.order.table.header.telephone": "Телефон",
"dry-wash.arm.order.table.header.location": "Расположение",
"dry-wash.arm.order.table.empty": "Список пуст",
"dry-wash.arm.order.error.title": "Ошибка при загрузке данных",
"dry-wash.arm.master.title": "Мастера",
"dry-wash.arm.master.table.empty": "Список пуст",
"dry-wash.arm.master.error.title": "Ошибка при загрузке данных",
"dry-wash.arm.master.table.header.name": "Имя",
"dry-wash.arm.master.table.header.currentJob": "Актуальная занятость",
"dry-wash.arm.master.table.header.phone": "Телефон",
"dry-wash.arm.master.table.header.actions": "Действия",
"dry-wash.arm.master.table.actionsMenu.delete": "Удалить мастера",
"dry-wash.arm.master.table.actionsMenu.toast.success": "Мастер удалён",
"dry-wash.arm.master.table.actionsMenu.toast.error.title": "Ошибка!",
"dry-wash.arm.master.table.actionsMenu.toast.error.description": "Не удалось удалить мастера. Попробуйте ещё раз.",
"dry-wash.arm.master.schedule.empty": "Свободен",
"dry-wash.arm.master.editable.aria.cancel": "Отменить изменения",
"dry-wash.arm.master.editable.aria.save": "Сохранить изменения",
"dry-wash.arm.master.editable.aria.edit": "Редактировать",
"dry-wash.arm.master.editable.toast.success": "Успешно!",
"dry-wash.arm.master.editable.toast.error.description": "Не удалось обновить данные",
"dry-wash.arm.master.editable.toast.error.title": "Ошибка!",
"dry-wash.arm.master.drawer.title": "Добавить нового мастера",
"dry-wash.arm.master.drawer.inputName.label": "ФИО",
"dry-wash.arm.master.drawer.inputName.placeholder": "Введите ФИО",
"dry-wash.arm.master.drawer.inputPhone.label": "Номер телефона",
"dry-wash.arm.master.drawer.inputPhone.placeholder": "Введите номер телефона",
"dry-wash.arm.master.drawer.button.save": "Сохранить",
"dry-wash.arm.master.drawer.button.cancel": "Отменить",
"dry-wash.arm.master.drawer.toast.create-master": "Мастер создан",
"dry-wash.arm.master.drawer.toast.error.empty-fields": "Поля не могут быть пустыми",
"dry-wash.arm.master.drawer.toast.error.base": "Ошибка",
"dry-wash.arm.master.drawer.toast.error.create-master": "Ошибка при создании мастера",
"dry-wash.arm.master.drawer.toast.error.create-master-details": "Не удалось добавить мастера. Попробуйте еще раз",
"dry-wash.arm.master.drawer.form.name.required": "Имя мастера обязательно",
"dry-wash.arm.master.drawer.form.phone.required": "Телефон обязателен",
"dry-wash.arm.master.drawer.form.phone.pattern": "Некорректный номер телефона",
"dry-wash.arm.master.drawer.form.name.minLength": "Имя должно содержать минимум 2 символа",
"dry-wash.arm.master.sideBar.orders": "Заказы",
"dry-wash.arm.master.sideBar.master": "Мастера",
"dry-wash.arm.master.sideBar.title": "Сухой мастер",
"dry-wash.landing.benefits-section.description": "Откройте для себя преимущества наших услуг по химчистке автомобилей",
"dry-wash.landing.benefits-section.heading": "Преимущества экологичной автомойки",
"dry-wash.landing.benefits-section.list.0": "Экологически безопасные продукты",
"dry-wash.landing.benefits-section.list.1": "Быстрое и эффективное обслуживание",
"dry-wash.landing.benefits-section.list.2": "Удобный мобильный доступ",
"dry-wash.landing.benefits-section.list.3": "Надежный и заслуживающий доверия",
"dry-wash.landing.footer.copyright": "\u00A9 {{currentYear}} DryMaster. Все права защищены",
"dry-wash.landing.footer.links.faq": "FAQ",
"dry-wash.landing.footer.links.privacy-policy": "Политика конфиденциальности",
"dry-wash.landing.footer.links.service-terms": "Условия обслуживания",
"dry-wash.landing.hero-section.description": "Ощутите максимальное удобство сухой мойки автомобилей, созданной для того, чтобы планета стала чище",
"dry-wash.landing.hero-section.headline": "Оживите свою поездку с помощью экологически чистого ухода!",
"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.placeholder": "Введите адрес или выберите на карте",
"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.order-create.order-creation-title": "Создаем заказ ...",
"dry-wash.order-create.create-order-query.success.title": "Заказ успешно создан",
"dry-wash.order-create.create-order-query.error.title": "Не удалось создать заказ",
"dry-wash.order-view.title": "Ваш заказ",
"dry-wash.order-view.get-order-query.error.title": "Не удалось загрузить детали заказа",
"dry-wash.order-view.details.title": "Заказ №{{number}}",
"dry-wash.order-view.details.owner": "Владелец",
"dry-wash.order-view.details.car": "Автомобиль",
"dry-wash.order-view.details.location": "Где",
"dry-wash.order-view.details.datetime-range": "Когда",
"dry-wash.order-view.details.alert": "С вами свяжется оператор насчет оплаты по указанному номеру телефона",
"dry-wash.notFound.title": "Страница не найдена",
"dry-wash.notFound.description": "К сожалению, запрашиваемая вами страница не существует.",
"dry-wash.notFound.button.back": "Вернуться на главную",
"dry-wash.errorBoundary.title": "Что-то пошло не так",
"dry-wash.errorBoundary.description": "Мы уже работаем над исправлением проблемы",
"dry-wash.errorBoundary.button.reload": "Перезагрузить страницу",
"dry-wash.washTime.timeSlot": "{{start}} - {{end}}"
}

8842
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,74 +1,42 @@
{
"name": "dry-wash",
"version": "0.7.2",
"description": "<a id=\"readme-top\"></a>",
"main": "./src/index.tsx",
"scripts": {
"test": "jest -u",
"start": "brojs server --port=8099 --with-open-browser",
"build": "npm run clean && brojs build --dev",
"build:prod": "npm run clean && brojs build",
"clean": "rimraf dist",
"eslint": "npx eslint .",
"eslint:fix": "npx eslint . --fix",
"preversion": "npm run eslint"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.26.7",
"@babel/preset-env": "^7.26.7",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
"@brojs/cli": "^1.8.4",
"@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^2.10.5",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@fontsource/open-sans": "^5.1.0",
"@lottiefiles/react-lottie-player": "^3.5.4",
"@pbe/react-yandex-maps": "^1.2.5",
"@reduxjs/toolkit": "^2.5.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.2.0",
"@types/react": "^18.3.12",
"babel-jest": "^29.7.0",
"dayjs": "^1.11.13",
"express": "^4.21.1",
"framer-motion": "^6.2.8",
"i18next": "^23.16.4",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-fixed-jsdom": "^0.0.9",
"keycloak-js": "^23.0.7",
"msw": "^2.7.0",
"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-redux": "^9.2.0",
"react-router-dom": "^6.27.0",
"ts-jest": "^29.2.5",
"ts-node": "^10.9.2"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
"@playwright/test": "^1.50.1",
"@stylistic/eslint-plugin": "^2.10.1",
"@types/node": "^22.13.1",
"@types/react-dom": "^18.3.1",
"eslint": "^9.14.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.11.0",
"prettier": "3.3.3",
"typescript": "^5.7.3",
"typescript-eslint": "^8.12.2"
},
"jest": {
"preset": "./jest-preset-it/jest-preset.ts"
}
"name": "dry-wash",
"version": "0.0.0",
"description": "<a id=\"readme-top\"></a>",
"main": "./src/index.tsx",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "brojs server --port=8099 --with-open-browser",
"build": "npm run clean && brojs build --dev",
"build:prod": "npm run clean && brojs build",
"clean": "rimraf dist",
"eslint": "npx eslint .",
"eslint:fix": "npx eslint . --fix",
"preversion": "npm run eslint"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@brojs/cli": "^1.3.0",
"@chakra-ui/icons": "^2.2.4",
"@chakra-ui/react": "^2.4.2",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@types/react": "^18.3.12",
"express": "^4.21.1",
"framer-motion": "^6.2.8",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.27.0"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
"@stylistic/eslint-plugin": "^2.10.1",
"@types/react-dom": "^18.3.1",
"eslint": "^9.14.0",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.11.0",
"prettier": "3.3.3",
"typescript-eslint": "^8.12.2"
}
}

View File

@ -1,79 +0,0 @@
import { defineConfig, devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://127.0.0.1:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },
/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});

Binary file not shown.

View File

@ -1,15 +0,0 @@
import { getFeatures } from "@brojs/cli";
const features = getFeatures('dry-wash-pl');
export const FEATURE = {
orderViewStatusPolling: {
isOn: Boolean(features['order-view-status-polling']),
getValue: () => {
const interval = parseInt(features['order-view-status-polling'].value);
if (!Number.isNaN(interval)) {
return interval;
}
}
}
};

View File

@ -1,84 +0,0 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { getConfigValue } from '@brojs/cli';
import dayjs from 'dayjs';
import { Master, OrderArm } from '../../models/api';
import { extractBodyFromResponse } from './utils';
export type UpdateMasterPayload = Required<Pick<Master, 'id'>> &
Partial<Omit<Master, 'id'>>;
type UpdateOrderProps = Required<Pick<OrderArm, 'id'>> &
Partial<Pick<OrderArm, 'status' | 'notes'>> & {
master?: string;
};
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({
baseUrl: new URL(getConfigValue('dry-wash.api'), location.origin).href,
}),
tagTypes: ['Masters', 'Orders'],
endpoints: (builder) => ({
getMasters: builder.query<Master[], void>({
query: () => ({ url: '/arm/masters' }),
transformResponse: extractBodyFromResponse<Master[]>,
providesTags: ['Masters'],
}),
updateOrders: builder.mutation<void, UpdateOrderProps>({
query: ({ id, status, notes, master }) => ({
url: `/order/${id}`,
method: 'PATCH',
body: { status, notes, master },
}),
invalidatesTags: ['Orders'],
}),
getOrders: builder.query<OrderArm[], { date: Date }>({
query: ({ date }) => {
const startDate = dayjs(date).startOf('day').toISOString();
const endDate = dayjs(date).endOf('day').toISOString();
return {
url: '/arm/orders',
method: 'POST',
body: { startDate, endDate },
};
},
transformResponse: extractBodyFromResponse<OrderArm[]>,
providesTags: ['Orders'],
}),
addMaster: builder.mutation<void, Pick<Master, 'name' | 'phone'>>({
query: (master) => ({
url: '/arm/masters',
method: 'POST',
body: master,
}),
invalidatesTags: ['Masters'],
}),
deleteMaster: builder.mutation<void, { id: string }>({
query: ({ id }) => ({
url: `/arm/masters/${id}`,
method: 'DELETE',
}),
invalidatesTags: ['Masters'],
}),
updateMaster: builder.mutation<void, UpdateMasterPayload>({
query: ({ id, name, phone }) => ({
url: `/arm/masters/${id}`,
method: 'PATCH',
body: { name, phone },
}),
invalidatesTags: ['Masters'],
}),
}),
});
export const {
useGetMastersQuery,
useAddMasterMutation,
useDeleteMasterMutation,
useUpdateMasterMutation,
useGetOrdersQuery,
useUpdateOrdersMutation,
} = api;

View File

@ -1,23 +0,0 @@
import { GetOrder, CreateOrder } from "../../models/api";
import { api } from "./api";
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
export const landingApi = api.injectEndpoints({
endpoints: ({ mutation, query }) => ({
getOrder: query<GetOrder.Response, GetOrder.Params>({
query: ({ orderId }) => `/order/${orderId}`,
transformResponse: extractBodyFromResponse<GetOrder.Response>,
transformErrorResponse: extractErrorMessageFromResponse,
}),
createOrder: mutation<CreateOrder.Response, CreateOrder.Params>({
query: ({ body }) => ({
url: `/order/create`,
body,
method: 'POST'
}),
transformResponse: extractBodyFromResponse<CreateOrder.Response>,
transformErrorResponse: extractErrorMessageFromResponse,
}),
})
});

View File

@ -1,15 +0,0 @@
import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
import { BaseResponse } from "../../models/api";
export const extractBodyFromResponse = <Body>(response: BaseResponse<Body>) => {
if (response.success) {
return response.body;
}
};
export const extractErrorMessageFromResponse = ({ data }: FetchBaseQueryError) => {
if (typeof data === 'object' && 'message' in data && typeof data.message === 'string') {
return data.message;
}
};

View File

@ -1,14 +0,0 @@
import { configureStore } from '@reduxjs/toolkit';
import { api } from './service/api';
export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

View File

@ -1,40 +0,0 @@
import { generatePath } from 'react-router-dom';
import { getNavigationValue } from '@brojs/cli';
import { Order } from '../models/landing';
const getFullUrls = (url: string) =>
`${getNavigationValue('dry-wash.main')}${url}`;
export const URLs = {
landing: {
url: getNavigationValue('dry-wash.main'),
getUrl() {
return this.url;
},
},
orderCreate: {
url: getFullUrls(getNavigationValue('dry-wash.order.create')),
getUrl() {
return this.url;
},
},
orderView: {
url: getFullUrls(getNavigationValue('dry-wash.order.view')),
getUrl(orderId: Order.Id) {
return generatePath(this.url, { orderId });
},
},
armMaster: {
url: getNavigationValue('dry-wash.arm.master'),
isOn: Boolean(getNavigationValue('dry-wash.arm.master')),
},
armOrder: {
url: getNavigationValue('dry-wash.arm.order'),
isOn: Boolean(getNavigationValue('dry-wash.arm.order')),
},
armBase: {
url: getFullUrls(getNavigationValue('dry-wash.arm')),
isOn: Boolean(getNavigationValue('dry-wash.arm')),
},
};

View File

@ -1,23 +1,15 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
import { Provider } from 'react-redux';
import Routers from './routes';
import ErrorBoundary from './components/ErrorBoundary';
import { store } from './__data__/store';
import { ChakraProvider, theme as chakraTheme } from '@chakra-ui/react';
const App = () => {
return (
<Provider store={store}>
<ChakraProvider theme={chakraTheme}>
<ErrorBoundary>
<BrowserRouter>
<Routers />
</BrowserRouter>
</ErrorBoundary>
</ChakraProvider>
</Provider>
<ChakraProvider theme={chakraTheme}>
<BrowserRouter>
<Routers></Routers>
</BrowserRouter>
</ChakraProvider>
);
};

View File

@ -1 +0,0 @@
export { default as OrderCreationAnimation } from './order-creation.json';

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1 +0,0 @@
export { default as LogoSvg } from './dry-master-logo.svg';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,11 +0,0 @@
export { default as CoupeImg } from './coupe.webp';
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';
export { default as StationWagonImg } from './station-wagon.webp';
export { default as SuvImg } from './suv.webp';

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

View File

@ -1,2 +0,0 @@
export * from './car-body-type';
export { default as DemoVideoPosterImg } from './demo-video-poster.webp';

View File

@ -1,31 +0,0 @@
import React from 'react';
import { Box, Button, Text } from '@chakra-ui/react';
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
interface DateNavigatorProps {
currentDate: Date;
onPreviousDate: () => void;
onNextDate: () => void;
}
const DateNavigator = ({
currentDate,
onPreviousDate,
onNextDate,
}: DateNavigatorProps) => {
return (
<Box display='flex' alignItems='center' justifyContent='flex-start' mb='5'>
<Button onClick={onPreviousDate}>
<ArrowBackIcon />
</Button>
<Text mx='4' fontSize='lg' fontWeight='bold'>
{currentDate.toLocaleDateString()}
</Text>
<Button onClick={onNextDate}>
<ArrowForwardIcon />
</Button>
</Box>
);
};
export default DateNavigator;

View File

@ -1 +0,0 @@
export { default } from './DateNavigator';

View File

@ -1,107 +0,0 @@
import React, { useEffect, useState } from 'react';
import {
Editable,
EditableInput,
EditablePreview,
Flex,
IconButton,
Input,
useEditableControls,
ButtonGroup,
Stack,
} from '@chakra-ui/react';
import { CheckIcon, CloseIcon, EditIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';
import { useUpdateMasterMutation } from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
interface EditableWrapperProps {
value: string;
fieldName: 'phone' | 'name';
id: string;
}
const EditableWrapper = ({ value, fieldName, id }: EditableWrapperProps) => {
const [updateMaster, { isError, isSuccess, error }] =
useUpdateMasterMutation();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.editable',
});
const showToast = useShowToast();
const [currentValue, setCurrentValue] = useState<string>(value);
const handleSubmit = async (newValue: string) => {
if (currentValue === newValue) return;
await updateMaster({ id, [fieldName]: newValue });
setCurrentValue(newValue);
};
useEffect(() => {
if (isSuccess) {
showToast(t('toast.success'), 'success');
}
}, [isSuccess]);
useEffect(() => {
if (isError) {
showToast(t('toast.error.title'), 'error', t('toast.error.description'));
console.error(t('toast.error.description'), error);
}
}, [isError, error]);
function EditableControls() {
const {
isEditing,
getSubmitButtonProps,
getCancelButtonProps,
getEditButtonProps,
} = useEditableControls();
return isEditing ? (
<ButtonGroup justifyContent='center' size='sm'>
<IconButton
aria-label={t('aria.save')}
icon={<CheckIcon />}
{...getSubmitButtonProps()}
/>
<IconButton
aria-label={t('aria.cancel')}
icon={<CloseIcon />}
{...getCancelButtonProps()}
/>
</ButtonGroup>
) : (
<Flex justifyContent='center'>
<IconButton
aria-label={t('aria.edit')}
size='sm'
icon={<EditIcon />}
{...getEditButtonProps()}
/>
</Flex>
);
}
return (
<Editable
textAlign='center'
defaultValue={currentValue}
fontSize='2xl'
isPreviewFocusable={false}
onSubmit={handleSubmit}
>
<Stack direction={['column', 'row']} spacing='15px'>
<EditablePreview />
<Input as={EditableInput} />
<EditableControls />
</Stack>
</Editable>
);
};
export default EditableWrapper;

View File

@ -1,65 +0,0 @@
import React, { Component, ErrorInfo, ReactNode } from 'react';
import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
import i18next from 'i18next';
interface ErrorBoundaryState {
hasError: boolean;
error: Error | null;
errorInfo: ErrorInfo | null;
}
interface ErrorBoundaryProps {
children: ReactNode;
}
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
constructor(props: ErrorBoundaryProps) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
};
}
static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
return { hasError: true };
}
componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
console.error('Error caught by ErrorBoundary:', error, errorInfo);
this.setState({ error, errorInfo });
}
render() {
const { hasError } = this.state;
//TODO: добавить анимацию после залива 404 страницы
//TODO: может сделать обертку для хука, чтоб язык менялся без перезагрузки
if (hasError) {
return (
<Center minH='100vh'>
<VStack spacing={4} textAlign='center'>
<Heading as='h1' size='2xl'>
{i18next.t('~:dry-wash.errorBoundary.title')}
</Heading>
<Text fontSize='lg'>
{i18next.t('~:dry-wash.errorBoundary.description')}
</Text>
<Button
colorScheme='teal'
size='lg'
variant='outline'
onClick={() => window.location.reload()}
>
{i18next.t('~:dry-wash.errorBoundary.button.reload')}
</Button>
</VStack>
</Center>
);
}
return this.props.children;
}
}
export default ErrorBoundary;

View File

@ -1 +0,0 @@
export { default } from './ErrorBoundary';

View File

@ -1,37 +1,17 @@
import { Box, Flex } from '@chakra-ui/react';
import React from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import Sidebar from '../Sidebar';
import Orders from '../Orders';
import Masters from '../Masters';
import { URLs } from '../../__data__/urls';
import React from 'react';
const LayoutArm = () => {
let defaultRedirect = null;
if (URLs.armOrder.isOn) {
defaultRedirect = URLs.armOrder.url;
} else if (URLs.armMaster.isOn) {
defaultRedirect = URLs.armMaster.url;
}
return (
<Flex h='100vh'>
<Sidebar />
<Box flex='1' bg='gray.50'>
<Routes>
<Route index element={<Navigate to={defaultRedirect} replace />} />
{URLs.armOrder.isOn && (
<Route path={URLs.armOrder.url} element={<Orders />} />
)}
{URLs.armMaster.isOn && (
<Route path={URLs.armMaster.url} element={<Masters />} />
)}
</Routes>
</Box>
</Flex>
);
};
const LayoutArm = ({ currentPage, onSelectPage }) => (
<Flex h='100vh'>
<Sidebar onSelectPage={onSelectPage} />
<Box flex='1' bg='gray.50'>
{currentPage === 'orders' && <Orders />}
{currentPage === 'masters' && <Masters />}
</Box>
</Flex>
);
export default LayoutArm;

View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import {
Menu,
MenuButton,
@ -7,49 +7,15 @@ import {
IconButton,
} from '@chakra-ui/react';
import { EditIcon } from '@chakra-ui/icons';
import { useTranslation } from 'react-i18next';
import { useDeleteMasterMutation } from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
interface MasterActionsMenu {
id: string;
}
const MasterActionsMenu = ({ id }: MasterActionsMenu) => {
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.table.actionsMenu',
});
const [deleteMaster, { isSuccess, isError, error, isLoading }] =
useDeleteMasterMutation();
const showToast = useShowToast();
const handleClickDelete = async () => {
await deleteMaster({ id });
};
useEffect(() => {
if (isSuccess) {
showToast(t('toast.success'), 'success');
}
}, [isSuccess]);
useEffect(() => {
if (isError) {
showToast(t('toast.error.title'), 'error', t('toast.error.description'));
console.error(error);
}
}, [isError]);
const MasterActionsMenu = () => {
return (
<Menu>
<MenuButton icon={<EditIcon />} as={IconButton} variant='outline' />
<MenuList>
<MenuItem onClick={handleClickDelete} isDisabled={isLoading}>
{t('delete')}
</MenuItem>
<MenuItem>Посмотреть профиль</MenuItem>
<MenuItem>Изменить расписание</MenuItem>
<MenuItem>Удалить мастера</MenuItem>
</MenuList>
</Menu>
);

View File

@ -1,142 +0,0 @@
import React, { useEffect } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import {
Button,
FormControl,
FormLabel,
Input,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
InputGroup,
InputLeftElement,
FormErrorMessage,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { PhoneIcon } from '@chakra-ui/icons';
import { useAddMasterMutation } from '../../__data__/service/api';
import { DrawerInputs } from '../../models/arm/form';
import useShowToast from '../../hooks/useShowToast';
interface MasterDrawerProps {
isOpen: boolean;
onClose: () => void;
}
const MasterDrawer = ({ isOpen, onClose }: MasterDrawerProps) => {
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm<DrawerInputs>();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.drawer',
});
const onSubmit: SubmitHandler<DrawerInputs> = async (data) => {
const trimMaster = {
name: data.name.trim(),
phone: data.phone.trim(),
};
const isEmptyFields = trimMaster.name === '' || trimMaster.phone === '';
if (isEmptyFields) {
showToast(t('toast.error.base'), 'error', t('toast.error.empty-fields'));
return;
}
await addMaster(trimMaster);
};
const [addMaster, { error, isSuccess }] = useAddMasterMutation();
const showToast = useShowToast();
useEffect(() => {
if (isSuccess) {
showToast(t('toast.create-master'), 'success');
reset();
onClose();
}
}, [isSuccess]);
useEffect(() => {
if (error) {
showToast(
t('toast.error.create-master'),
'error',
t('toast.error.create-master-details'),
);
console.error(error);
}
}, [error]);
return (
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
<DrawerOverlay />
<DrawerContent>
<form onSubmit={handleSubmit(onSubmit)}>
<DrawerCloseButton />
<DrawerHeader>{t('title')}</DrawerHeader>
<DrawerBody>
<FormControl mb='4' isInvalid={!!errors.name}>
<FormLabel>{t('inputName.label')}</FormLabel>
<Input
{...register('name', {
required: t('form.name.required'),
minLength: {
value: 2,
message: t('form.name.minLength'),
},
})}
placeholder={t('inputName.placeholder')}
/>
<FormErrorMessage>
{errors.name && errors.name.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={!!errors.phone}>
<FormLabel>{t('inputPhone.label')}</FormLabel>
<InputGroup>
<InputLeftElement pointerEvents='none'>
<PhoneIcon color='gray.300' />
</InputLeftElement>
<Input
{...register('phone', {
required: t('form.phone.required'),
pattern: {
value: /^(\+7|8)\d{10}$/,
message: t('form.phone.pattern'),
},
setValueAs: (value) => value.replace(/[^\d+]/g, ''),
})}
placeholder={t('inputPhone.placeholder')}
/>
</InputGroup>
<FormErrorMessage>
{errors.phone && errors.phone.message}
</FormErrorMessage>
</FormControl>
</DrawerBody>
<DrawerFooter>
<Button colorScheme='teal' mr={3} type='submit'>
{t('button.save')}
</Button>
<Button variant='ghost' onClick={onClose}>
{t('button.cancel')}
</Button>
</DrawerFooter>
</form>
</DrawerContent>
</Drawer>
);
};
export default MasterDrawer;

View File

@ -1,39 +1,25 @@
import React from 'react';
import { Badge, Stack, Td, Tr, Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { Badge, Link, Stack, Td, Tr } from '@chakra-ui/react';
import MasterActionsMenu from '../MasterActionsMenu';
import { getTimeSlot } from '../../lib';
import EditableWrapper from '../Editable/Editable';
const MasterItem = ({ name, phone, id, schedule }) => {
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master',
});
const MasterItem = ({ name, schedule, phone }) => {
return (
<Tr>
<Td>{name}</Td>
<Td>
<EditableWrapper id={id} fieldName={'name'} value={name} />
<Stack direction='row'>
{schedule.map((time, index) => (
<Badge colorScheme={'green'} key={index}>
{time}
</Badge>
))}
</Stack>
</Td>
<Td>
{schedule?.length > 0 ? (
<Stack direction='row'>
{schedule?.map(({ startWashTime, endWashTime }, index: number) => (
<Badge colorScheme={'green'} key={index}>
{getTimeSlot(startWashTime, endWashTime)}
</Badge>
))}
</Stack>
) : (
<Text color='gray.500'>{t('schedule.empty')}</Text>
)}
<Link href='tel:'>{phone}</Link>
</Td>
<Td>
<EditableWrapper id={id} fieldName={'phone'} value={phone} />
</Td>
<Td>
<MasterActionsMenu id={id} />
<MasterActionsMenu />
</Td>
</Tr>
);

View File

@ -0,0 +1,65 @@
import React, { useState } from 'react';
import {
Button,
FormControl,
FormLabel,
Input,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerOverlay,
} from '@chakra-ui/react';
const MasterDrawer = ({ isOpen, onClose }) => {
const [newMaster, setNewMaster] = useState({ name: '', phone: '' });
const handleSave = () => {
console.log(`Сохранение мастера: ${newMaster}`);
onClose();
};
return (
<Drawer isOpen={isOpen} onClose={onClose} size='md'>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader>Добавить нового мастера</DrawerHeader>
<DrawerBody>
<FormControl mb='4'>
<FormLabel>ФИО</FormLabel>
<Input
value={newMaster.name}
onChange={(e) =>
setNewMaster({ ...newMaster, name: e.target.value })
}
placeholder='Введите ФИО'
/>
</FormControl>
<FormControl>
<FormLabel>Номер телефона</FormLabel>
<Input
value={newMaster.phone}
onChange={(e) =>
setNewMaster({ ...newMaster, phone: e.target.value })
}
placeholder='Введите номер телефона'
/>
</FormControl>
</DrawerBody>
<DrawerFooter>
<Button colorScheme='teal' mr={3} onClick={handleSave}>
Сохранить
</Button>
<Button variant='ghost' onClick={onClose}>
Отменить
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
);
};
export default MasterDrawer;

View File

@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import {
Box,
Heading,
@ -10,75 +10,36 @@ import {
Button,
useDisclosure,
Flex,
Td,
Text,
Spinner,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { mastersData } from '../../mocks';
import MasterItem from '../MasterItem';
import MasterDrawer from '../MasterDrawer';
import { useGetMastersQuery } from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
import MasterDrawer from '../MasterModal';
const TABLE_HEADERS = [
'name' as const,
'currentJob' as const,
'phone' as const,
'actions' as const,
];
const TABLE_HEADERS = ['Имя', 'Актуальная занятость', 'Телефон', 'Действия'];
const Masters = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
const showToast = useShowToast();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master',
});
const { data: masters, error, isLoading, isSuccess } = useGetMastersQuery();
useEffect(() => {
if (error) {
showToast(t('error.title'), 'error');
}
}, [error]);
return (
<Box p='8'>
<Flex justifyContent='space-between' alignItems='center' mb='5'>
<Heading size='lg'> {t('title')}</Heading>
<Heading size='lg'>Мастера</Heading>
<Button colorScheme='green' onClick={onOpen}>
+ {t('add')}
+ Добавить
</Button>
</Flex>
<Table variant='simple' colorScheme='blackAlpha'>
<Thead>
<Tr>
{TABLE_HEADERS.map((name) => (
<Th key={name}>{t(`table.header.${name}`)}</Th>
<Th key={name}>{name}</Th>
))}
</Tr>
</Thead>
<Tbody>
{isLoading && (
<Tr>
<Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
<Spinner size='lg' />
</Td>
</Tr>
)}
{isSuccess && masters.length === 0 && (
<Tr>
<Td colSpan={TABLE_HEADERS.length}>
<Text>{t('table.empty')}</Text>
</Td>
</Tr>
)}
{isSuccess &&
masters.map((master, index) => (
<MasterItem key={index} {...master} />
))}
{mastersData.map((master, index) => (
<MasterItem key={index} {...master} />
))}
</Tbody>
</Table>
<MasterDrawer isOpen={isOpen} onClose={onClose} />

View File

@ -1,93 +1,32 @@
import React, { ChangeEvent, useState } from 'react';
import React, { useState } from 'react';
import { Td, Tr, Link, Select } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { getTimeSlot } from '../../lib';
import { useUpdateOrdersMutation } from '../../__data__/service/api';
import { OrderArm, Status, statuses } from '../../models/api';
const statusColors: Record<Status, string> = {
pending: 'yellow.100',
progress: 'blue.100',
working: 'orange.100',
canceled: 'red.100',
complete: 'green.100',
};
const OrderItem = ({
carNumber,
startWashTime,
endWashTime,
washTime,
orderDate,
status,
phone,
location,
master,
allMasters,
id,
}: OrderArm) => {
const [updateOrders] = useUpdateOrdersMutation();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.order',
});
}) => {
const [statusSelect, setStatus] = useState(status);
const bgColor = statusColors[statusSelect];
const [masterSelect, setMaster] = useState(master?.name);
const handelChangeMasters = (e: ChangeEvent<HTMLSelectElement>) => {
const masterName = e.target.value;
const selectedMaster = allMasters.find(
(master) => master.name === masterName,
);
if (selectedMaster) {
setMaster(masterName);
updateOrders({ id, master: selectedMaster.id });
} else {
console.error('Master not found');
}
};
const handeChangeStatus = (e: ChangeEvent<HTMLSelectElement>) => {
const status = e.target.value as OrderArm['status'];
updateOrders({ id, status });
setStatus(status);
};
return (
<Tr>
<Td>{carNumber}</Td>
<Td>
{dayjs(orderDate).format('DD.MM.YYYY')} <br />
{getTimeSlot(startWashTime, endWashTime)}
</Td>
<Td>{washTime}</Td>
<Td>{orderDate}</Td>
<Td>
<Select
value={statusSelect}
onChange={handeChangeStatus}
placeholder={t(`status.placeholder`)}
bg={bgColor}
onChange={(e) => setStatus(e.target.value)}
placeholder='Выберите статус'
>
{statuses.map((status) => (
<option key={status} value={status}>
{t(`status.${status}`)}
</option>
))}
</Select>
</Td>
<Td>
<Select
value={masterSelect}
onChange={handelChangeMasters}
placeholder={t(`master.placeholder`)}
>
{allMasters.map((item) => (
<option key={item.id} value={item.name}>
{item.name}
</option>
))}
<option value='в ожидании'>в ожидании</option>
<option value='В процессе'>в процессе</option>
<option value='в работе'>в работе</option>
<option value='отменил'>отменил</option>
<option value='Завершено'>Завершено</option>
</Select>
</Td>
<Td>

View File

@ -1,120 +1,34 @@
import React, { useEffect, useState } from 'react';
import {
Box,
Heading,
Table,
Thead,
Tbody,
Tr,
Th,
Spinner,
Text,
Td,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { Box, Heading, Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
import React from 'react';
import { ordersData } from '../../mocks';
import OrderItem from '../OrderItem';
import { OrderProps } from '../OrderItem/OrderItem';
import DateNavigator from '../DateNavigator';
import {
useGetMastersQuery,
useGetOrdersQuery,
} from '../../__data__/service/api';
import useShowToast from '../../hooks/useShowToast';
const TABLE_HEADERS = [
'carNumber' as const,
'orderDate' as const,
'status' as const,
'masters' as const,
'telephone' as const,
'location' as const,
];
const Orders = () => {
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.order',
});
const showToast = useShowToast();
const [currentDate, setCurrentDate] = useState(new Date());
const {
data: orders,
isLoading: isOrdersLoading,
isSuccess: isOrdersSuccess,
isError: isOrdersError,
error: ordersError,
} = useGetOrdersQuery({ date: currentDate });
const {
data: masters,
isLoading: isMastersLoading,
isSuccess: isMastersSuccess,
isError: isMastersError,
error: mastersError,
} = useGetMastersQuery();
const isLoading = isOrdersLoading || isMastersLoading;
const isSuccess = isOrdersSuccess && isMastersSuccess;
const isError = isOrdersError || isMastersError;
useEffect(() => {
if (isError) {
showToast(t('error.title'), 'error');
}
}, [isError, ordersError, mastersError, t]);
const TABLE_HEADERS = [
'Номер машины',
'Время мойки',
'Дата заказа',
'Статус',
'Телефон',
'Расположение',
];
return (
<Box p='8'>
<Heading size='lg' mb='5'>
{t('title')}
Заказы
</Heading>
<DateNavigator
currentDate={currentDate}
onPreviousDate={() =>
setCurrentDate((prevDate) =>
dayjs(prevDate).subtract(1, 'day').toDate(),
)
}
onNextDate={() =>
setCurrentDate((prevDate) => dayjs(prevDate).add(1, 'day').toDate())
}
/>
<Table variant='simple' colorScheme='blackAlpha'>
<Thead>
<Tr>
{TABLE_HEADERS.map((name, key) => (
<Th key={key}>{t(`table.header.${name}`)}</Th>
<Th key={key}>{name}</Th>
))}
</Tr>
</Thead>
<Tbody>
{isLoading && (
<Tr>
<Td colSpan={TABLE_HEADERS.length} textAlign='center' py='8'>
<Spinner size='lg' />
</Td>
</Tr>
)}
{isSuccess && orders.length === 0 && (
<Tr>
<Td colSpan={TABLE_HEADERS.length}>
<Text>{t('table.empty')}</Text>
</Td>
</Tr>
)}
{isSuccess &&
orders.map((order, index) => (
<OrderItem
allMasters={masters}
key={index}
{...order}
status={order.status as OrderProps['status']}
/>
))}
{ordersData.map((order, index) => (
<OrderItem key={index} {...order} />
))}
</Tbody>
</Table>
</Box>

View File

@ -1,16 +0,0 @@
import React, { FC } from 'react';
import { Flex, Spinner } from '@chakra-ui/react';
export const PageSpinner: FC = () => {
return (
<Flex w='full' h='100vh' justifyContent='center' alignItems='center'>
<Spinner
thickness='5px'
speed='0.65s'
emptyColor='gray.200'
color='green.500'
size='xl'
/>
</Flex>
);
};

View File

@ -1 +0,0 @@
export { PageSpinner } from './PageSpinner';

View File

@ -1,60 +1,42 @@
import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
import { Box, Button, Heading, VStack } from '@chakra-ui/react';
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Divider } from '@chakra-ui/react';
import { URLs } from '../../__data__/urls';
const Sidebar = ({ onSelectPage }) => (
<Box
borderRight='1px solid black'
bg='gray.50'
color='white'
w='250px'
p='5'
pt='8'
>
<Heading color='green' size='lg' mb='5'>
Сухой мастер
</Heading>
const Sidebar = () => {
const location = useLocation();
const isActive = (keyword: string) => location.pathname.includes(keyword);
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.arm.master.sideBar',
});
return (
<Box
borderRight='1px solid black'
bg='gray.50'
color='white'
w='250px'
p='5'
pt='8'
>
<Heading color='green' size='lg' mb='5'>
{t('title')}
</Heading>
<VStack align='start' spacing='4'>
<Divider />
{URLs.armOrder.isOn && (
<Button
as={Link}
to={URLs.armOrder.url}
w='100%'
colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
>
{t('orders')}
</Button>
)}
<Divider />
{URLs.armMaster.isOn && (
<Button
as={Link}
to={URLs.armMaster.url}
w='100%'
colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
>
{t('master')}
</Button>
)}
<Divider />
</VStack>
</Box>
);
};
<VStack align='start' spacing='4'>
<Divider />
<Button
onClick={() => onSelectPage('orders')}
w='100%'
colorScheme='green'
variant='ghost'
>
Заказы
</Button>
<Divider />
<Button
onClick={() => onSelectPage('masters')}
w='100%'
colorScheme='green'
variant='ghost'
>
Мастера
</Button>
<Divider />
</VStack>
</Box>
);
export default Sidebar;

View File

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

View File

@ -1,34 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
import { CtaButton, PageSection } from '../';
import { ListItem } from './ListItem';
import { BenefitsSectionProps } from './types';
import { iconsMap } from './helper';
export const BenefitsSection: FC<BenefitsSectionProps> = ({
data: { heading, description, list } = {},
}) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return (
<PageSection>
<VStack w='full' spacing={2}>
<Heading as='h2'>{t(heading)}</Heading>
<Text>{t(description)}</Text>
</VStack>
<List display='flex' flexDirection='column' spacing={3}>
{list.map((itemKey, i) => (
<ListItem key={i} Icon={iconsMap[itemKey]}>
{t(itemKey)}
</ListItem>
))}
</List>
<HStack w='full' justify='flex-end'>
<CtaButton />
</HStack>
</PageSection>
);
};

View File

@ -1,16 +0,0 @@
import React, { FC, PropsWithChildren } from 'react';
import { ListIcon, ListItem as ChakraListItem } from '@chakra-ui/react';
import { IconType } from 'react-icons';
export type ListItemProps = PropsWithChildren & {
Icon: IconType;
};
export const ListItem: FC<ListItemProps> = ({ Icon, children }) => {
return (
<ChakraListItem display='inline-flex'>
<ListIcon as={Icon} color='primary.500' boxSize='6' />
{children}
</ChakraListItem>
);
};

View File

@ -1 +0,0 @@
export { type ListItemProps, ListItem } from './ListItem';

View File

@ -1,13 +0,0 @@
import { IconType } from "react-icons";
import { MdEco, MdMiscellaneousServices, MdPlace, MdHandshake } from "react-icons/md";
import { ArrElement } from "../../../lib";
import { BenefitsList } from "./types";
export const iconsMap: Record<ArrElement<BenefitsList>, IconType> = {
"benefits-section.list.0": MdEco,
"benefits-section.list.1": MdMiscellaneousServices,
"benefits-section.list.2": MdPlace,
"benefits-section.list.3": MdHandshake,
};

View File

@ -1,2 +0,0 @@
export type { BenefitsSectionProps } from './types';
export { BenefitsSection } from './BenefitsSection';

View File

@ -1,14 +0,0 @@
export type BenefitsList = [
'benefits-section.list.0',
'benefits-section.list.1',
'benefits-section.list.2',
'benefits-section.list.3',
];
export type BenefitsSectionProps = {
data: {
heading: 'benefits-section.heading';
description: 'benefits-section.description';
list: BenefitsList;
};
};

View File

@ -1,21 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Link as RouterLink } from 'react-router-dom';
import { ButtonProps, Button } from '@chakra-ui/react';
import { URLs } from '../../../__data__/urls';
export const CtaButton: FC<ButtonProps> = (props) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return (
<Button
as={RouterLink}
to={URLs.orderCreate.getUrl()}
colorScheme='primary'
{...props}
>
{t('make-order-button')}
</Button>
);
};

View File

@ -1 +0,0 @@
export { CtaButton } from './CtaButton';

View File

@ -1,11 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Text } from '@chakra-ui/react';
const currentYear = new Date().getFullYear();
export const Copyright: FC = () => {
const { t } = useTranslation();
return <Text color='whiteAlpha.500'>{t('dry-wash.landing.footer.copyright', { currentYear })}</Text>;
};

View File

@ -1 +0,0 @@
export { Copyright } from './Copyright';

View File

@ -1,36 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Link, List, ListItem } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
import { SiteLogo, PageSection } from '../';
import { Copyright } from './Copyright';
export const Footer: FC = () => {
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.landing.footer.links',
});
const listData = [
{ to: '#', label: t('privacy-policy') },
{ to: '#', label: t('service-terms') },
{ to: '#', label: t('faq') },
];
return (
<PageSection as='footer' py={5} bg='gray.700' color='white'>
<SiteLogo />
<Copyright />
<List spacing={2}>
{listData.map(({ to, label }, i) => (
<ListItem key={i}>
<Link as={RouterLink} to={to}>
{label}
</Link>
</ListItem>
))}
</List>
</PageSection>
);
};

View File

@ -1 +0,0 @@
export { Footer } from './Footer';

View File

@ -1,65 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Heading, Text, Center, VStack } from '@chakra-ui/react';
import { DemoVideoPosterImg } from '../../../assets/images';
import { CtaButton, SiteLogo, PageSection } from '../';
import { HeroSectionProps } from './types';
export const HeroSection: FC<HeroSectionProps> = ({
data: { headline, description, video } = {},
flexShrink,
}) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return (
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
<Box
as='video'
src={`${__webpack_public_path__}/remote-assets/${video}`}
poster={DemoVideoPosterImg}
autoPlay
loop
muted
w='full'
h='full'
pos='absolute'
objectFit='cover'
filter='brightness(50%)'
zIndex={-1}
/>
<PageSection
h='full'
minH='375px'
maxH='1000px'
py={10}
justifyContent='center'
alignItems='center'
spacing={8}
>
<Center>
<SiteLogo />
</Center>
<VStack spacing={4}>
<Heading
as='h1'
textAlign='center'
color='white'
__css={{ textWrap: 'balance' }}
>
{t(headline)}
</Heading>
<Text
textAlign='center'
__css={{ textWrap: 'balance' }}
color='white'
>
{t(description)}
</Text>
</VStack>
<CtaButton size='lg' />
</PageSection>
</Box>
);
};

View File

@ -1 +0,0 @@
export { HeroSection } from './HeroSection';

View File

@ -1,9 +0,0 @@
import { BoxProps } from "@chakra-ui/react";
export type HeroSectionProps = {
data: {
headline: 'hero-section.headline';
description: 'hero-section.description';
video: string;
};
} & Pick<BoxProps, 'flexShrink'>;

View File

@ -1,12 +0,0 @@
import React, { FC, PropsWithChildren } from 'react';
import { StackProps, VStack } from '@chakra-ui/react';
type PageSectionProps = StackProps & PropsWithChildren;
export const PageSection: FC<PageSectionProps> = ({ children, ...restProps }) => {
return (
<VStack as='section' w='full' px={5} py={5} spacing={6} alignItems='flex-start' {...restProps}>
{children}
</VStack>
);
};

View File

@ -1 +0,0 @@
export { PageSection } from './PageSection';

View File

@ -1,13 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Image } from '@chakra-ui/react';
import { LogoSvg } from '../../../assets/icons';
export const SiteLogo: FC = () => {
const { t } = useTranslation();
return <Image src={LogoSvg} alt={t('~:dry-wash.landing.site-logo')} w={40} />;
};
// todo: replace Image by SVG React component

View File

@ -1 +0,0 @@
export { SiteLogo } from './SiteLogo';

View File

@ -1,37 +0,0 @@
import React, { FC } from 'react';
import { Card, Avatar, Text } from '@chakra-ui/react';
type ReviewCardProps = {
firstname: string;
lastname: string;
picture: string;
text: string;
};
export const ReviewCard: FC<ReviewCardProps> = ({
firstname,
lastname,
picture,
text,
}) => {
const name = [firstname, lastname].join(' ');
return (
<Card p={4} gap={2} alignItems='center' variant='elevated'>
<Avatar
name={name}
src={picture}
size='xl'
boxShadow='2px 2px 0 1px var(--chakra-colors-secondary-500)'
/>
<Text
as='q'
fontSize='sm'
textAlign='center'
__css={{ textWrap: 'balance' }}
>
{text}
</Text>
</Card>
);
};

View File

@ -1 +0,0 @@
export { ReviewCard } from './ReviewCard';

View File

@ -1,80 +0,0 @@
import React, { FC, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from '@chakra-ui/react';
import { mockReview } from '../../../../mocks/landing';
import { Review } from '../../../../models';
import { ReviewCard } from './ReviewCard';
const SLIDE_CHANGE_INTERVAL = 5000;
export const ReviewsSlider: FC = () => {
const { i18n } = useTranslation();
const mockReviews: Review.View[] = mockReview.getReviewsByLocale(i18n.language);
const reviewsCount = mockReviews.length;
const [activeTab, setActiveTab] = useState(0);
const [isSlideShowStopped, setIsSlideShowStopped] = useState(false);
useEffect(() => {
const timer = setInterval(() => {
const newActiveTab = (activeTab + 1) % reviewsCount;
setActiveTab(newActiveTab);
}, SLIDE_CHANGE_INTERVAL);
if (isSlideShowStopped) {
clearInterval(timer);
}
return () => {
clearInterval(timer);
};
}, [activeTab]);
return (
<Tabs
index={activeTab}
onChange={(selectedTab) => {
setIsSlideShowStopped(true);
setActiveTab(selectedTab);
}}
display='flex'
flexDir='column'
alignItems='center'
variant='soft-rounded'
colorScheme='gray'
>
<TabList gap={2}>
{mockReviews.map(({ id }, i) => (
<Tab
key={id}
w={4}
h={4}
p={0}
bg='gray.100'
_selected={{
bg: 'secondary.100',
}}
>
<Text visibility='hidden'>{i}</Text>
</Tab>
))}
</TabList>
<TabPanels>
{mockReviews.map(({ id, ...reviewProps }) => (
<TabPanel key={id}>
<ReviewCard {...reviewProps} />
</TabPanel>
))}
</TabPanels>
</Tabs>
);
};

View File

@ -1 +0,0 @@
export { ReviewsSlider } from './ReviewsSlider';

View File

@ -1,24 +0,0 @@
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';
import { Heading, HStack } from '@chakra-ui/react';
import { CtaButton, PageSection } from '../';
import { ReviewsSlider } from './ReviewsSlider';
import { SocialProofSectionProps } from './types';
export const SocialProofSection: FC<SocialProofSectionProps> = ({
data: { heading } = {},
}) => {
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
return (
<PageSection>
<Heading as='h2'>{t(heading)}</Heading>
<ReviewsSlider />
<HStack w='full' justify='flex-end'>
<CtaButton />
</HStack>
</PageSection>
);
};

View File

@ -1,2 +0,0 @@
export type { SocialProofSectionProps } from './types';
export { SocialProofSection } from './SocialProofSection';

View File

@ -1,5 +0,0 @@
export type SocialProofSectionProps = {
data: {
heading: 'social-proof-section.heading';
};
};

View File

@ -1,7 +0,0 @@
export * from './CtaButton';
export * from './PageSection';
export * from './BenefitsSection'; // CtaButton, PageSection
export * from './SocialProofSection'; // CtaButton, PageSection
export * from './SiteLogo';
export * from './Footer'; // PageSection, SiteLogo
export * from './HeroSection'; // CtaButton, PageSection, SiteLogo

View File

@ -1,82 +0,0 @@
import React, { forwardRef } from 'react';
import {
Input,
Box,
Popover,
PopoverAnchor,
PopoverContent,
PopoverBody,
useRadioGroup,
Grid,
GridItem,
UseRadioGroupProps,
useDisclosure,
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { carBodySelectOptions, getInputValue } from './helper';
import { CarBodyOption } from './option';
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);
};
const { value, getRadioProps, getRootProps } = useRadioGroup({
defaultValue: props.value,
value: props.value,
onChange: handleOptionClick,
});
const { isOpen, onOpen, onClose } = useDisclosure();
const { t } = useTranslation('~', {
keyPrefix: 'dry-wash.order-create.car-body-select',
});
return (
<Box width='100%'>
<Popover
isOpen={isOpen}
autoFocus={false}
placement='bottom-start'
matchWidth
>
<PopoverAnchor>
<Input
{...props}
ref={ref}
value={getInputValue(Number(value), t) ?? props.value}
readOnly
onClick={onOpen}
onBlur={onClose}
placeholder={t('placeholder')}
/>
</PopoverAnchor>
<PopoverContent width='100%' maxWidth='100%'>
<PopoverBody border='1px' borderColor='gray.300' p={0}>
<Grid
templateColumns='repeat(auto-fit, minmax(150px, 1fr))'
{...getRootProps()}
>
{carBodySelectOptions.map(({ value, img, labelTKey }) => (
<GridItem key={value}>
<CarBodyOption
image={img}
label={t(`options.${labelTKey}`)}
{...getRadioProps({ value: String(value) })}
/>
</GridItem>
))}
</Grid>
</PopoverBody>
</PopoverContent>
</Popover>
</Box>
);
},
);

View File

@ -1,87 +0,0 @@
import { TFunction } from "i18next";
import { InputProps } from "@chakra-ui/react";
import {
CoupeImg,
CrossoverImg,
HatchbackImg,
LiftbackImg,
MinivanImg,
PickupImg,
SedanImg,
SportsCarImg,
StationWagonImg,
SuvImg,
OtherImg
} from "../../../../assets/images";
import { Car } from "../../../../models/landing";
import { CarBodySelectOption } from "./types";
export const carBodySelectOptions: CarBodySelectOption[] = [
{
value: Car.BodyStyle.SEDAN,
labelTKey: 'sedan',
img: SedanImg
},
{
value: Car.BodyStyle.HATCHBACK,
labelTKey: 'hatchback',
img: HatchbackImg
},
{
value: Car.BodyStyle.CROSSOVER,
labelTKey: 'crossover',
img: CrossoverImg
},
{
value: Car.BodyStyle.SUV,
labelTKey: 'suv',
img: SuvImg
},
{
value: Car.BodyStyle.STATION_WAGON,
labelTKey: 'station-wagon',
img: StationWagonImg
},
{
value: Car.BodyStyle.COUPE,
labelTKey: 'coupe',
img: CoupeImg
},
{
value: Car.BodyStyle.MINIVAN,
labelTKey: 'minivan',
img: MinivanImg
},
{
value: Car.BodyStyle.PICKUP,
labelTKey: 'pickup',
img: PickupImg
},
{
value: Car.BodyStyle.LIFTBACK,
labelTKey: 'liftback',
img: LiftbackImg
},
{
value: Car.BodyStyle.SPORTS_CAR,
labelTKey: 'sports-car',
img: SportsCarImg
},
{
value: Car.BodyStyle.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;
};

View File

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

View File

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

View File

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

View File

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

View File

@ -1,24 +0,0 @@
import { InputProps } from "@chakra-ui/react";
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';
img?: string;
};
export type CarBodySelectProps = {
value?: string;
} & Pick<InputProps, 'onChange'>;

View File

@ -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

View File

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

View File

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

View File

@ -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={12}
/>
);
},
);

View File

@ -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}|$)((?:[0-9]|$)(?:[0-9]|$)(?:[0-9]|$))$`, 'gi');
const isValidInput = (cleanedValue: string) => validCarNumberInputRe.test(cleanedValue);
const formatAsCarNumber = (cleanedValue: string) => {
return cleanedValue.replace(validCarNumberInputRe, (_, p1, p2, p3, p4) => [p1, p2, p3, p4].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}[0-9]{2,3}$`, 'i');
export const isValidCarNumber = (value: string) => {
const cleanedValue = cleanValue(value);
return validCarNumberRe.test(cleanedValue);
};

View File

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

Some files were not shown because too many files have changed in this diff Show More