Compare commits
7 Commits
feature/rt
...
v0.6.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
8d447c9461 | ||
| 6506b89dc7 | |||
| 89d432b360 | |||
| f6cc2efb86 | |||
| 859fa4f2e1 | |||
|
|
0ec9e146b9 | ||
|
|
1669f01879 |
8
.gitignore
vendored
8
.gitignore
vendored
@@ -130,4 +130,10 @@ dist
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
.idea
|
||||
.idea
|
||||
|
||||
# Playwright
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
"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",
|
||||
|
||||
@@ -94,6 +94,7 @@
|
||||
"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": "Ваш заказ",
|
||||
|
||||
81
package-lock.json
generated
81
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "dry-wash",
|
||||
"version": "0.5.0",
|
||||
"version": "0.6.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "dry-wash",
|
||||
"version": "0.5.0",
|
||||
"version": "0.6.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.26.7",
|
||||
@@ -48,7 +48,9 @@
|
||||
},
|
||||
"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",
|
||||
@@ -3619,6 +3621,21 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@playwright/test": {
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
|
||||
"integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"playwright": "1.50.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
@@ -4003,12 +4020,11 @@
|
||||
"integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA=="
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
|
||||
"integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
|
||||
"license": "MIT",
|
||||
"version": "22.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz",
|
||||
"integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.19.8"
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/parse-json": {
|
||||
@@ -12110,6 +12126,50 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
|
||||
"integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"playwright-core": "1.50.1"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.50.1",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
|
||||
"integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright/node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/popmotion": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
|
||||
@@ -14382,10 +14442,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.19.8",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
|
||||
"integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
|
||||
"license": "MIT"
|
||||
"version": "6.20.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
|
||||
},
|
||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||
"version": "2.0.1",
|
||||
|
||||
142
package.json
142
package.json
@@ -1,72 +1,74 @@
|
||||
{
|
||||
"name": "dry-wash",
|
||||
"version": "0.5.0",
|
||||
"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": {
|
||||
"@brojs/cli": "^1.8.4",
|
||||
"@babel/core": "^7.26.7",
|
||||
"@babel/preset-env": "^7.26.7",
|
||||
"@babel/preset-react": "^7.26.3",
|
||||
"@babel/preset-typescript": "^7.26.0",
|
||||
"@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",
|
||||
"@stylistic/eslint-plugin": "^2.10.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.6.0",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
79
playwright.config.ts
Normal file
79
playwright.config.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
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,
|
||||
// },
|
||||
});
|
||||
@@ -1,14 +1,23 @@
|
||||
import { GetOrder } from "../../models/api";
|
||||
import { GetOrder, CreateOrder } from "../../models/api";
|
||||
|
||||
import { api } from "./api";
|
||||
import { extractBodyFromResponse, extractErrorMessageFromResponse } from "./utils";
|
||||
|
||||
export const landingApi = api.injectEndpoints({
|
||||
endpoints: ({ query }) => ({
|
||||
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`,
|
||||
params: { body },
|
||||
method: 'POST'
|
||||
}),
|
||||
transformResponse: extractBodyFromResponse<CreateOrder.Response>,
|
||||
transformErrorResponse: extractErrorMessageFromResponse,
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './landing';
|
||||
@@ -1,65 +0,0 @@
|
||||
import { getConfigValue } from '@brojs/cli';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { CreateOrder } from '../models/api';
|
||||
|
||||
import { QueryState, Trigger } from './types';
|
||||
|
||||
enum LandingEndpoints {
|
||||
ORDER_CREATE = '/order/create',
|
||||
}
|
||||
|
||||
const endpoint = getConfigValue('dry-wash.api');
|
||||
|
||||
const useCreateOrderMutation = <D extends CreateOrder.Response>(): [
|
||||
Trigger<CreateOrder.Params, QueryState<D>['data']>,
|
||||
QueryState<D>,
|
||||
] => {
|
||||
const [isLoading, setIsLoading] = useState<QueryState<D>['isLoading']>(false);
|
||||
const [isSuccess, setIsSuccess] = useState<QueryState<D>['isSuccess']>();
|
||||
const [data, setData] = useState<QueryState<D>['data']>();
|
||||
const [isError, setIsError] = useState<QueryState<D>['isError']>();
|
||||
const [error, setError] = useState<QueryState<D>['error']>();
|
||||
|
||||
const createOrder = async ({ body }: CreateOrder.Params) => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${endpoint}${LandingEndpoints.ORDER_CREATE}`,
|
||||
{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
},
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorResponseObject =
|
||||
(await response.json()) as QueryState<D>['error'];
|
||||
setIsError(true);
|
||||
setError(errorResponseObject);
|
||||
throw errorResponseObject;
|
||||
}
|
||||
|
||||
const dataResponseObject =
|
||||
(await response.json()) as QueryState<D>['data'];
|
||||
setIsSuccess(true);
|
||||
setData(dataResponseObject);
|
||||
|
||||
return dataResponseObject;
|
||||
} catch (error) {
|
||||
setIsError(true);
|
||||
setError(error);
|
||||
throw error;
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return [createOrder, { isLoading, isSuccess, data, isError, error }];
|
||||
};
|
||||
|
||||
export { useCreateOrderMutation };
|
||||
@@ -1,22 +0,0 @@
|
||||
export type QueryData<D> = {
|
||||
success: true;
|
||||
body: D;
|
||||
};
|
||||
|
||||
export type QueryErrorData = {
|
||||
success: false;
|
||||
error: string;
|
||||
};
|
||||
|
||||
export type QueryState<D> = {
|
||||
isLoading: boolean;
|
||||
isSuccess: boolean;
|
||||
data: QueryData<D>;
|
||||
isError: boolean;
|
||||
error: {
|
||||
status: number;
|
||||
data: QueryErrorData;
|
||||
};
|
||||
};
|
||||
|
||||
export type Trigger<P, D> = (params: P) => Promise<D>;
|
||||
1
src/assets/animation/index.ts
Normal file
1
src/assets/animation/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as OrderCreationAnimation } from './order-creation.json';
|
||||
1
src/assets/animation/order-creation.json
Normal file
1
src/assets/animation/order-creation.json
Normal file
File diff suppressed because one or more lines are too long
@@ -5,6 +5,8 @@ type SuccessResponse<Body> = {
|
||||
|
||||
export type ErrorMessage = string;
|
||||
|
||||
export const isErrorMessage = (error: unknown): error is ErrorMessage => typeof error === 'string';
|
||||
|
||||
type ErrorResponse = {
|
||||
success: false;
|
||||
message: ErrorMessage;
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import dayjs from "dayjs";
|
||||
import { useToast } from "@chakra-ui/react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Order } from "../../models/landing";
|
||||
import { OrderFormValues } from "../../components/order-form";
|
||||
import { isErrorMessage } from "../../models/api";
|
||||
import { URLs } from '../../__data__/urls';
|
||||
|
||||
const removeAllSpaces = (str: string) => str.replace(/\s+/g, '');
|
||||
|
||||
@@ -26,4 +32,40 @@ export const formatFormValues = ({ phone, carNumber, carBody, carColor, carLocat
|
||||
end: dayjs(availableDatetimeEnd).toISOString(),
|
||||
}
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export const useHandleCreateOrderMutationResponse = (query: {
|
||||
isSuccess: boolean;
|
||||
data?: {
|
||||
id: Parameters<typeof URLs.orderView.getUrl>[0];
|
||||
};
|
||||
isError: boolean;
|
||||
error?: unknown;
|
||||
}) => {
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-create.create-order-query',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (query.isError) {
|
||||
toast({
|
||||
status: 'error',
|
||||
title: t('error.title'),
|
||||
description: isErrorMessage(query.error) ? query.error : undefined,
|
||||
});
|
||||
}
|
||||
}, [query.isError]);
|
||||
|
||||
useEffect(() => {
|
||||
if (query.isSuccess) {
|
||||
const orderId = query.data.id;
|
||||
navigate({ pathname: URLs.orderView.getUrl(orderId) });
|
||||
toast({
|
||||
status: 'success',
|
||||
title: t('success.title'),
|
||||
});
|
||||
}
|
||||
}, [query.isSuccess]);
|
||||
};
|
||||
|
||||
@@ -1,41 +1,29 @@
|
||||
import React, { FC } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Container, Heading, useToast, VStack } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Container, Heading, VStack } from '@chakra-ui/react';
|
||||
import { Player as LottiePlayer } from '@lottiefiles/react-lottie-player';
|
||||
|
||||
import { withLandingThemeProvider } from '../../containers';
|
||||
import { OrderForm, OrderFormProps } from '../../components/order-form';
|
||||
import { useCreateOrderMutation } from '../../api';
|
||||
import { URLs } from '../../__data__/urls';
|
||||
import { landingApi } from '../../__data__/service/landing.api';
|
||||
import { OrderCreationAnimation } from '../../assets/animation';
|
||||
|
||||
import { formatFormValues } from './helper';
|
||||
import {
|
||||
formatFormValues,
|
||||
useHandleCreateOrderMutationResponse,
|
||||
} from './helper';
|
||||
|
||||
const Page: FC = () => {
|
||||
const { t } = useTranslation('~', {
|
||||
keyPrefix: 'dry-wash.order-create',
|
||||
});
|
||||
|
||||
const [createOrder, createOrderMutation] = useCreateOrderMutation();
|
||||
|
||||
const toast = useToast();
|
||||
const navigate = useNavigate();
|
||||
const [createOrder, createOrderMutation] =
|
||||
landingApi.useCreateOrderMutation();
|
||||
useHandleCreateOrderMutationResponse(createOrderMutation);
|
||||
|
||||
const onOrderFormSubmit: OrderFormProps['onSubmit'] = (values) => {
|
||||
createOrder({ body: formatFormValues(values) })
|
||||
.then(({ body: { id: orderId } }) => {
|
||||
navigate({ pathname: URLs.orderView.getUrl(orderId) });
|
||||
toast({
|
||||
status: 'success',
|
||||
title: t('create-order-query.success.title'),
|
||||
});
|
||||
})
|
||||
.catch(({ error: errorMessage }) => {
|
||||
toast({
|
||||
status: 'error',
|
||||
title: t('create-order-query.error.title'),
|
||||
description: errorMessage,
|
||||
});
|
||||
});
|
||||
createOrder({ body: formatFormValues(values) });
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -48,13 +36,24 @@ const Page: FC = () => {
|
||||
centerContent
|
||||
>
|
||||
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
||||
<Heading textAlign='center' mt={4}>
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<OrderForm
|
||||
onSubmit={onOrderFormSubmit}
|
||||
loading={createOrderMutation.isLoading}
|
||||
/>
|
||||
{createOrderMutation.isUninitialized ? (
|
||||
<>
|
||||
<Heading textAlign='center' mt={4}>
|
||||
{t('title')}
|
||||
</Heading>
|
||||
<OrderForm
|
||||
onSubmit={onOrderFormSubmit}
|
||||
loading={createOrderMutation.isLoading}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LottiePlayer autoplay loop src={OrderCreationAnimation} />
|
||||
<Heading textAlign='center' mt={4}>
|
||||
{t('order-creation-title')}
|
||||
</Heading>
|
||||
</>
|
||||
)}
|
||||
</VStack>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
import { OrderDetails } from '../../components/order-view';
|
||||
import { Order } from '../../models/landing';
|
||||
import { landingApi } from '../../__data__/service/landing.api';
|
||||
import { ErrorMessage } from '../../models/api';
|
||||
import { isErrorMessage } from '../../models/api';
|
||||
import { FEATURE } from '../../__data__/features';
|
||||
|
||||
const Page: FC = () => {
|
||||
@@ -45,7 +45,7 @@ const Page: FC = () => {
|
||||
}
|
||||
: undefined,
|
||||
);
|
||||
const errorMessage = error as ErrorMessage;
|
||||
const errorMessage = isErrorMessage(error) ? error : undefined;
|
||||
|
||||
return (
|
||||
<LandingThemeProvider>
|
||||
@@ -91,7 +91,9 @@ const Page: FC = () => {
|
||||
<AlertTitle>
|
||||
{t('get-order-query.error.title')}
|
||||
</AlertTitle>
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
{errorMessage && (
|
||||
<AlertDescription>{errorMessage}</AlertDescription>
|
||||
)}
|
||||
</Box>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
/* eslint-disable @typescript-eslint/no-require-imports */
|
||||
const router = require('express').Router();
|
||||
|
||||
const STUBS = { masters: 'success', orders: 'success', orderView: 'success-pending' };
|
||||
const STUBS = { masters: 'success', orders: 'success', orderCreate: 'success', orderView: 'success-pending' };
|
||||
|
||||
router.get('/set/:name/:value', (req, res) => {
|
||||
const { name, value } = req.params;
|
||||
@@ -14,19 +14,24 @@ router.get('/set/:name/:value', (req, res) => {
|
||||
|
||||
router.get('/', (req, res) => {
|
||||
res.send(`<div>
|
||||
<fieldset>
|
||||
<fieldset>
|
||||
<legend>Мастера</legend>
|
||||
${generateRadioInput('masters', 'success')}
|
||||
${generateRadioInput('masters', 'error')}
|
||||
${generateRadioInput('masters', 'empty')}
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<fieldset>
|
||||
<legend>Заказы</legend>
|
||||
${generateRadioInput('orders', 'success')}
|
||||
${generateRadioInput('orders', 'error')}
|
||||
${generateRadioInput('orders', 'empty')}
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<fieldset>
|
||||
<legend>Лендинг - Сделать заказ</legend>
|
||||
${generateRadioInput('orderCreate', 'success')}
|
||||
${generateRadioInput('orderCreate', 'error')}
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Лендинг - Детали заказа</legend>
|
||||
${generateRadioInput('orderView', 'success-pending')}
|
||||
${generateRadioInput('orderView', 'success-working')}
|
||||
|
||||
@@ -87,7 +87,15 @@ router.get('/order/:orderId', ({ params }, res) => {
|
||||
});
|
||||
|
||||
router.post('/order/create', (req, res) => {
|
||||
res.status(200).send({ success: true, body: { ok: true } });
|
||||
const stubName = STUBS.orderCreate;
|
||||
|
||||
res
|
||||
.status(/error/.test(stubName) ? 500 : 200)
|
||||
.send(
|
||||
/^error$/.test(stubName)
|
||||
? commonError
|
||||
: require(`../json/landing-order-create/${stubName}.json`),
|
||||
);
|
||||
});
|
||||
|
||||
router.use('/admin', require('./admin'));
|
||||
|
||||
4
stubs/json/landing-order-create/error.json
Normal file
4
stubs/json/landing-order-create/error.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"success": false,
|
||||
"message": "Не удалось создать заказ"
|
||||
}
|
||||
6
stubs/json/landing-order-create/success.json
Normal file
6
stubs/json/landing-order-create/success.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"success": true,
|
||||
"body": {
|
||||
"id": "id1"
|
||||
}
|
||||
}
|
||||
26
tests/example.spec.ts
Normal file
26
tests/example.spec.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
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();
|
||||
});
|
||||
Reference in New Issue
Block a user