add INN registration field

src/app/actions/action.ts

@@ -126,3 +126,36 @@ export async function getBuildData() {
 		return null;
 	}
 }
+
+export async function fetchINN(inn: string) {
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 30004,
+				message_body: {
+					inn: inn,
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json()
+			if (parsed?.message_code === 0) {
+				return parsed.message_body
+			} else {
+				return null
+			}
+
+		} else {
+			return null
+		}
+	} catch (error) {
+		return null
+	}
+}

src/app/actions/auth.ts

@@ -3,6 +3,7 @@
 import { loginFormSchema, API_BASE_URL, getSignupFormSchema } from '@/app/actions/definitions';
 import { createSession, deleteSession, getSessionData, updateSession } from '@/app/actions/session';
 import { redirect } from 'next/navigation';
+import { fetchINN } from '@/app/actions/action';
 
 export async function logout() {
 	const token = await getSessionData('token');
@@ -130,15 +131,16 @@ export async function authorization(
 
 export type FormState = {
 	previousState: {
-		fullName: string;
-		email: string;
-		password: string;
-		confirm_password: string;
-		phone: string;
-		companyName?: string;
-		agree: string;
-		referralCode?: string
-	},
+		fullName?: string | undefined;
+		email?: string | undefined;
+		password?: string | undefined;
+		confirm_password?: string | undefined;
+		phone?: string | undefined;
+		companyName?: string | undefined;
+		agree?: string | undefined;
+		referralCode?: string | undefined;
+		inn?: string | undefined;
+	} | undefined,
 	mailConfirm?: boolean,
 	error: Record<string, string> | null
 };
@@ -157,6 +159,7 @@ export async function registration(
 	const companyName = formData.get('companyName') as string || '';
 	const agree = formData.get('agree') as string || '';
 	const referralCode = formData.get('referralCode');
+	const inn = formData.get('inn') as string || '';
 
 	const SignupFormSchema = await getSignupFormSchema(accountType);
 
@@ -167,25 +170,41 @@ export async function registration(
 		password,
 		confirm_password,
 		agree,
-		...(accountType === 'b2b' && { companyName })
+		...(accountType === 'b2b' && { companyName, inn })
 	};
 
 	const validatedFields = await SignupFormSchema.safeParse(dataToValidate);
 
 	console.log(`try to register ${accountType}`);
 
-	if (!validatedFields.success) {
+	let confirmedCompanyName: boolean = true;
+	if (accountType === 'b2b') {
+		try {
+			const response = await fetchINN(inn);
+			confirmedCompanyName = response?.companyName ? true : false;
+		} catch (error) {
+			confirmedCompanyName = false;
+		}
+	}
+
+	if (!validatedFields.success || !confirmedCompanyName) {
 		const errors: Record<string, string> = {}
-		JSON.parse(validatedFields.error.message).forEach((obj: {
-			message: string,
-			path: string
-		}) => {
-			if (errors[obj.path[0]]) {
-				errors[obj.path[0]] = `${errors[obj.path[0]]}&${obj.message}`;
-			} else {
-				errors[obj.path[0]] = obj.message;
-			}
-		});
+		if (validatedFields?.error?.message) {
+			JSON?.parse(validatedFields?.error?.message).forEach((obj: {
+				message: string,
+				path: string
+			}) => {
+				if (errors[obj.path[0]]) {
+					errors[obj.path[0]] = `${errors[obj.path[0]]}&${obj.message}`;
+				} else {
+					errors[obj.path[0]] = obj.message;
+				}
+			});
+		}
+
+		if (!confirmedCompanyName) {
+			errors.inn = 'inn-invalid'
+		}
 
 		return {
 			previousState: {
@@ -195,7 +214,7 @@ export async function registration(
 				confirm_password,
 				phone,
 				agree,
-				...(accountType === 'b2b' && { companyName })
+				...(accountType === 'b2b' && { companyName, inn })
 			},
 			error: errors
 		};
@@ -214,7 +233,7 @@ export async function registration(
 					phone: phone,
 					password,
 					accountType,
-					...(accountType === 'b2b' && { companyName: companyName }),
+					...(accountType === 'b2b' && { companyName: companyName, inn: inn }),
 					...(referralCode !== '' && { referralLink: referralCode })
 				}
 			}),
@@ -230,7 +249,7 @@ export async function registration(
 			phone: phone,
 			password,
 			accountType,
-			...(accountType === 'b2b' && { companyName: companyName }),
+			...(accountType === 'b2b' && { companyName: companyName, inn: inn }),
 			...(referralCode !== '' && { referralLink: referralCode })
 		})
 
@@ -241,8 +260,6 @@ export async function registration(
 				message_code: number
 			};
 
-			console.log(parsed);
-
 			if (parsed.message_code === 0) {
 				console.log(`registration - ${accountType}`);
 				console.log({
@@ -252,10 +269,11 @@ export async function registration(
 					password,
 					accountType,
 					referralLink: 'fds324',
-					...(accountType === 'b2b' && { companyName: companyName })
+					...(accountType === 'b2b' && { companyName: companyName, inn: inn })
 				});
 				await createSession(parsed.message_body.token, email as string);
 			} else {
+				console.log(parsed);
 				throw parsed;
 			}
 		} else {
@@ -320,7 +338,8 @@ export async function registration(
 					confirm_password,
 					phone,
 					companyName,
-					agree
+					agree,
+					inn
 				},
 				error: errors
 			};
@@ -334,7 +353,8 @@ export async function registration(
 				confirm_password,
 				phone,
 				companyName,
-				agree
+				agree,
+				inn
 			},
 			error: errors
 		};

src/app/lib/validation-config-parser.ts

@@ -163,6 +163,35 @@ export function createValidationSchema(config: ValidationConfig, accountType?: '
 		schema.password = passwordSchema;
 	}
 
+	// inn
+	if (config.inn && accountType !== 'b2c') {
+		let innSchema = z.string();
+
+		// Минимальная длина
+		if (config.inn.minSize) {
+			innSchema = innSchema.min(config.inn.minSize.value, {
+				error: config.inn.minSize.message
+			});
+		}
+
+		// Максимальная длина
+		if (config.inn.maxSize) {
+			innSchema = innSchema.max(config.inn.maxSize.value, {
+				error: config.inn.maxSize.message
+			});
+		}
+
+		// Допустимые символы
+		if (config.inn.allowedSymbols) {
+			innSchema = innSchema.regex(
+				new RegExp(config.inn.allowedSymbols.value),
+				{ message: config.inn.allowedSymbols.message }
+			);
+		}
+
+		schema.inn = innSchema;
+	}
+
 	// Дополнительные поля для формы регистрации
 	schema.confirm_password = z.string();
 	schema.agree = z.string().min(2, { error: 'register-error-agree' });

src/app/lib/validation-config.json

@@ -87,5 +87,19 @@
 			"value": "^[0-9\\+]+$",
 			"message": "register-error-phone-not-allowed-symbols"
 		}
+	},
+	"inn": {
+		"maxSize": {
+			"value": 10,
+			"message": "register-error-inn-max"
+		},
+		"minSize": {
+			"value": 10,
+			"message": "register-error-inn-min"
+		},
+		"allowedSymbols": {
+			"value": "^[0-9]+$",
+			"message": "register-error-inn-not-allowed-symbols"
+		}
 	}
 }

src/app/ui/forms/register-form.tsx

@@ -1,15 +1,17 @@
 'use client'
 
 import styles from '@/app/styles/module/login.module.scss';
-import { ChangeEvent, useActionState, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useActionState, useEffect, useMemo, useRef, useState } from 'react';
 import { registration, FormState, confirmEmail } from '@/app/actions/auth';
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
-import { SignupFormSchema } from '@/app/actions/definitions';
+import { getSignupFormSchema } from '@/app/actions/definitions';
 import { useSearchParams } from 'next/navigation';
 import * as z from 'zod'
+import { fetchINN } from '@/app/actions/action';
+import { useDebouncedCallback } from 'use-debounce';
 
 export default function RegisterForm() {
 	const searchParams = useSearchParams();
@@ -39,7 +41,40 @@ export default function RegisterForm() {
 			setShowMailConfirmWindow(true);
 		}
 
-	}, [state])
+	}, [state]);
+
+	const debouncedFetchINN = useDebouncedCallback(
+		async (value) => {
+			const response = await fetchINN(value);
+
+			if (response.companyName) {
+				setFormState({
+					...formState,
+					previousState: {
+						...formState?.previousState,
+						companyName: response.companyName
+					},
+					error: {
+						...formState?.error,
+						companyName: ''
+					}
+				});
+			} else {
+				setFormState({
+					...formState,
+					previousState: {
+						companyName: response.companyName
+					},
+					error: {
+						...formState?.error,
+						companyName: '',
+						inn: 'inn-invalid'
+					}
+				});
+			}
+		},
+		500
+	);
 
 	function showPassowrd(target: 'password' | 'confirm-password') {
 		if (target === 'password') {
@@ -49,13 +84,38 @@ export default function RegisterForm() {
 		}
 	}
 
-	function validateField(
+	type SignupFormSchema = Awaited<ReturnType<typeof getSignupFormSchema>>;
+	const [signupFormSchema, setSignupFormSchema] = useState<SignupFormSchema | null>(null);;
+
+	useEffect(() => {
+		let isMounted = true;
+
+		const loadSchema = async () => {
+			const result = await getSignupFormSchema(accountType);
+			if (isMounted) {
+				setSignupFormSchema(result);
+			}
+		};
+
+		loadSchema();
+
+		return () => {
+			isMounted = false;
+		};
+	}, [accountType]);
+
+	async function validateField(
 		fieldName: string,
 		value: string,
 	) {
 		switch (fieldName) {
 			case 'confirm_password':
-				const baseSchema = SignupFormSchema.shape.confirm_password;
+				const baseSchema = signupFormSchema?.shape.confirm_password;
+
+				if (!baseSchema) {
+					return { success: true, data: value };
+				}
+
 				const baseResult = baseSchema.safeParse(value);
 
 				if (!baseResult.success) {
@@ -85,7 +145,12 @@ export default function RegisterForm() {
 			case 'password':
 			case 'companyName':
 			case 'agree':
-				const schema = SignupFormSchema.shape[fieldName];
+			case 'inn':
+				const schema = signupFormSchema?.shape[fieldName];
+				if (!schema) {
+					return { success: true, data: value };
+				}
+
 				if (fieldName === 'phone') {
 					return schema.safeParse(value.replace(/[-\(\)\s]/g, ''));
 				}
@@ -102,12 +167,45 @@ export default function RegisterForm() {
 		}
 	}
 
-	function onChangeHandler(e: ChangeEvent<HTMLInputElement>): void {
+	async function onChangeHandler(e: ChangeEvent<HTMLInputElement>): Promise<void> {
 		const fieldName = e.target.name;
 		if (fieldName !== 'phone') {
 			e.target.value = e.target.value.replace(/([^a-zA-Zа-яёА-ЯЁ0-9@.!#$%&"'*+/=?^_{|}~\-\s])/g, '');
 		}
-		const validatedField = validateField(fieldName, e.target.value);
+
+		if (fieldName === 'inn') {
+			const currentValue = e.target.value;
+
+			const cleanedValue = currentValue.replace(/([^0-9])/g, '');
+
+			if (cleanedValue.length > 10) {
+				e.target.value = cleanedValue.slice(0, 10);
+				debouncedFetchINN(e.target.value);
+			} else {
+				e.target.value = cleanedValue;
+			}
+
+			if (cleanedValue.length === 10) {
+				debouncedFetchINN(cleanedValue);
+			} else {
+				if (formState) {
+					setFormState({
+						...formState,
+						previousState: {
+							...formState?.previousState,
+							companyName: ''
+						},
+						error: {
+							...formState?.error,
+							companyName: '',
+							inn: ''
+						}
+					});
+				}
+			}
+		}
+
+		const validatedField = await validateField(fieldName, e.target.value);
 
 		if (validatedField.success) {
 			setFormState(prevState => {
@@ -128,16 +226,18 @@ export default function RegisterForm() {
 	function switchRegistrationTypeHandler(e: React.MouseEvent<HTMLButtonElement>, type: 'b2c' | 'b2b') {
 		e.preventDefault();
 		setAccountType(type);
-		if (formState) {
+		if (formState?.previousState) {
 			setFormState({
 				...formState,
 				previousState: {
 					...formState.previousState,
-					companyName: ''
+					companyName: '',
+					inn: ''
 				},
 				error: {
 					...formState.error,
-					companyName: ''
+					companyName: '',
+					inn: ''
 				}
 			});
 		}
@@ -251,36 +351,71 @@ export default function RegisterForm() {
 				</div>
 
 				{accountType === 'b2b' ? (
-					<div className={`${styles['form-group']}`}>
-						<label
-							className={`${styles['form-label']}  ${styles['required']}`}
-						>
-							{t('company')}
-						</label>
-						<input
-							type="text"
-							id="companyName"
-							name="companyName"
-							className={`${styles['form-input']}`}
-							placeholder={t('company-placeholder')}
-							defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
-							onChange={onChangeHandler}
-						/>
-						{formState?.error?.companyName && (
-							<p className="text-sm text-red-500">
-								{
-									formState?.error?.companyName.split('&').map((e, index) => {
-										return (
-											<span key={index}>
-												{t(e)}
-												<br />
-											</span>
-										)
-									})
-								}
-							</p>
-						)}
-					</div>
+					<>
+						<div className={`${styles['form-group']}`}>
+							<label
+								className={`${styles['form-label']}  ${styles['required']}`}
+							>
+								INN
+							</label>
+							<input
+								type="text"
+								id="inn"
+								name="inn"
+								className={`${styles['form-input']}`}
+								placeholder={'inn'}
+								defaultValue={formState?.previousState?.inn ? formState?.previousState?.inn : ''}
+								onChange={onChangeHandler}
+							/>
+							{formState?.error?.inn && (
+								<p className="text-sm text-red-500">
+									{
+										formState?.error?.inn.split('&').map((e, index) => {
+											return (
+												<span key={index}>
+													{t(e)}
+													<br />
+												</span>
+											)
+										})
+									}
+								</p>
+							)}
+						</div>
+
+						<div className={`${styles['form-group']}`}>
+							<label
+								className={`${styles['form-label']}`}
+							>
+								{t('company')}
+							</label>
+							<input
+								type="text"
+								id="companyName"
+								name="companyName"
+								className={`${styles['form-input']}`}
+								placeholder={t('field-filled-automatically')}
+								value={formState?.previousState?.companyName ?? ''}
+								readOnly={true}
+								/* defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''} */
+								onChange={onChangeHandler}
+							/>
+							{formState?.error?.companyName && (
+								<p className="text-sm text-red-500">
+									{
+										formState?.error?.companyName.split('&').map((e, index) => {
+											return (
+												<span key={index}>
+													{t(e)}
+													<br />
+												</span>
+											)
+										})
+									}
+								</p>
+							)}
+						</div>
+					</>
 				) : (
 					<div className={`${styles['form-group']}`}>
 						<label className={`${styles['form-label']}`}>