diff --git a/src/config/i18n/locales/en/user.json b/src/config/i18n/locales/en/user.json index 9a5fbafa..18286794 100644 --- a/src/config/i18n/locales/en/user.json +++ b/src/config/i18n/locales/en/user.json @@ -143,5 +143,6 @@ }, "addEmployee": "Add employee", "employeeCooperativeExists": "This employee works already in your cooperative", - "sendMail": "send email" + "sendMail": "send email", + "pasteUrlHere": "Paste URL here" } \ No newline at end of file diff --git a/src/containers/auth/LoginForm.tsx b/src/containers/auth/LoginForm.tsx index d313588c..f26b337f 100644 --- a/src/containers/auth/LoginForm.tsx +++ b/src/containers/auth/LoginForm.tsx @@ -16,8 +16,6 @@ import { COLORS } from '@/utils/constants'; import { ILoginInput } from '@/types/auth.types'; import { loginSchema } from '@/validations/auth.validation'; import { Typography } from '@mui/material'; -import Head from '@/components/Head'; -import Logo from '@/components/Logo'; const LoginForm = () => { const { t } = useTranslation(['user']); diff --git a/src/containers/auth/SignUpForm.tsx b/src/containers/auth/SignUpForm.tsx index 0769aae7..5b8b462c 100644 --- a/src/containers/auth/SignUpForm.tsx +++ b/src/containers/auth/SignUpForm.tsx @@ -3,7 +3,6 @@ import { useForm, SubmitHandler } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { Typography } from '@mui/material'; import PasswordField from '@/components/form/fields/PasswordField'; import TextField from '@/components/form/fields/TextField'; import Form from '@/components/form/Form'; @@ -14,9 +13,6 @@ import { getUserLoadingSelector } from '@/redux/reducers/user.reducer'; import { COLORS } from '@/utils/constants'; import { ISignUpInput } from '@/types/auth.types'; import { signUpSchema } from '@/validations/auth.validation'; -import Logo from '@/components/Logo'; -import Layout from '@/components/layouts/Layout'; -import AuthHead from '@/components/Title'; type Props = { diff --git a/src/containers/estimate/EstimateForm.tsx b/src/containers/estimate/EstimateForm.tsx new file mode 100644 index 00000000..55b8a9a7 --- /dev/null +++ b/src/containers/estimate/EstimateForm.tsx @@ -0,0 +1,57 @@ +import { zodResolver } from '@hookform/resolvers/zod'; +import { useForm } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; +import { useSelector } from 'react-redux'; + +import { Box } from '@mui/material'; +import Form from '@/components/form/Form'; + +import { getAppErrorSelector } from '@/redux/reducers/app.reducer'; +import { getUserLoadingSelector } from '@/redux/reducers/user.reducer'; + +import { IEstimateInput } from '@/types/estimate.types'; +import { estimateSchema } from '@/validations/estimate.validation'; +import TextField from '@/components/form/fields/TextField'; + + +type Props = { + formId: string; + onSubmit: () => void; +}; + +const EstimateForm = ( { formId, onSubmit } : Props ) => { + const { t } = useTranslation(['user']); + const loading = useSelector(getUserLoadingSelector); + const error = useSelector(getAppErrorSelector); + + + const form = useForm({ + resolver: zodResolver(estimateSchema) + }); + + return ( + +
+ + +
+ +); +}; + +export default EstimateForm; diff --git a/src/pages/estimates/Estimates.tsx b/src/pages/estimates/Estimates.tsx index aa0c27d4..8b943c0a 100644 --- a/src/pages/estimates/Estimates.tsx +++ b/src/pages/estimates/Estimates.tsx @@ -5,18 +5,30 @@ import Head from '@/components/Head'; import Dialog from '@/components/Dialog'; import AddFab from '@/components/AddFab'; import { createEstimate } from '@/redux/actions/estimate.action'; +// import TextField from '@/components/form/fields/TextField'; +import { useNavigate } from '@tanstack/react-router'; +import { SubmitHandler, useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { TextField } from '@mui/material'; +import EstimateForm from '@/containers/estimate/EstimateForm'; +import { IEstimateInput } from '@/types/estimate.types'; + const Estimates = () => { const { t } = useTranslation(); const dispatch = useDispatch(); + const ESTIMATE_FORM_ID = 'estimate-form-id'; + const [openFormDialog, setOpenFormDialog] = useState(false); - const toggleDialog = () => setOpenFormDialog(!openFormDialog); + const toggleDialog = () => setOpenFormDialog((prev: boolean): boolean => !prev); + + + const onSubmitHandler: SubmitHandler = async () => { + await dispatch(createEstimate()); + }; - const handleSave = () => { - dispatch(createEstimate()) - } return (
@@ -26,12 +38,16 @@ const Estimates = () => { - Form here + toggle={toggleDialog} + formId={ESTIMATE_FORM_ID} + > + onSubmitHandler} + />
); diff --git a/src/types/auth.types.ts b/src/types/auth.types.ts index b5062f23..ea3d15ca 100644 --- a/src/types/auth.types.ts +++ b/src/types/auth.types.ts @@ -1,5 +1,5 @@ import { z } from 'zod'; -import { changePasswordSchema, emailSchema, loginSchema, resetPasswordSchema, signUpSchema } from '@/validations/auth.validation'; +import { changePasswordSchema, emailSchema, estimateSchema, loginSchema, resetPasswordSchema, signUpSchema } from '@/validations/auth.validation'; export type ISignUpInput = z.infer; export type ILoginInput = z.infer; diff --git a/src/types/estimate.types.ts b/src/types/estimate.types.ts new file mode 100644 index 00000000..b59b9e45 --- /dev/null +++ b/src/types/estimate.types.ts @@ -0,0 +1,6 @@ +import { z } from "zod"; +import { estimateSchema } from "@/validations/estimate.validation"; + + + +export type IEstimateInput = z.infer; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index c195ddf0..d83857f3 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -36,6 +36,7 @@ export const IMAGES = { export const COLORS = { authBackground: "#000", authTextFieldPlaceholder: '#fff', + estimateBackground: '#fff', }; export const HIGHEST_LEVEL_DEFAULT_ROLES = ['Owner', 'Administrator']; diff --git a/src/validations/auth.validation.ts b/src/validations/auth.validation.ts index 93d2af56..3faa86cc 100644 --- a/src/validations/auth.validation.ts +++ b/src/validations/auth.validation.ts @@ -22,6 +22,9 @@ export const loginSchema = userSchema.pick({ email: true, password: true }); export const emailSchema = loginSchema.pick({ email: true }); + + + const passwordConfirmationSchema = string().min( 1, i18n.t('form.error.required', { field: i18n.t('user:passwordConfirmation') }), diff --git a/src/validations/estimate.validation.ts b/src/validations/estimate.validation.ts new file mode 100644 index 00000000..329f459b --- /dev/null +++ b/src/validations/estimate.validation.ts @@ -0,0 +1,8 @@ +import { object, string } from 'zod'; +import i18n from '@/config/i18n'; + + + +export const estimateSchema = object({ + estimate: string().url({ message: i18n.t('invalid.url') }).startsWith("https://", { message: "Must provide secure URL" }) +});