add referal code for registration

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

@@ -8,9 +8,13 @@ import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
 import { SignupFormSchema } from '@/app/actions/definitions';
+import { useSearchParams } from 'next/navigation';
 import * as z from 'zod'
 
 export default function RegisterForm() {
+	const searchParams = useSearchParams();
+	const referralCode = searchParams.get('referralCode');
+
 	const [state, formAction, isPending] = useActionState(
 		registration,
 		undefined,
@@ -37,6 +41,10 @@ export default function RegisterForm() {
 
 	}, [state])
 
+	useEffect(() => {
+		console.log(referralCode);
+	}, [referralCode]);
+
 	function showPassowrd(target: 'password' | 'confirm-password') {
 		if (target === 'password') {
 			setShowPassword(!showPassword);
@@ -77,6 +85,7 @@ export default function RegisterForm() {
 			case 'email':
 			case 'fullName':
 			case 'phone':
+			case 'referralCode':
 			case 'password':
 			case 'companyName':
 			case 'agree':
@@ -87,6 +96,9 @@ export default function RegisterForm() {
 				if (fieldName === 'companyName' && accountType === 'b2c') {
 					return { success: true, data: value };
 				}
+				if (fieldName === 'referralCode') {
+					return { success: true, data: value };
+				}
 				return schema.safeParse(value);
 
 			default:
@@ -242,7 +254,7 @@ export default function RegisterForm() {
 					)}
 				</div>
 
-				{accountType === 'b2b' && (
+				{accountType === 'b2b' ? (
 					<div className={`${styles['form-group']}`}>
 						<label
 							className={`${styles['form-label']}  ${styles['required']}`}
@@ -273,7 +285,40 @@ export default function RegisterForm() {
 							</p>
 						)}
 					</div>
-				)}
+				) : (
+					<div className={`${styles['form-group']}`}>
+						<label className={`${styles['form-label']}`}>
+							{t('referal-code')}
+						</label>
+						<input
+							type="text"
+							id="referralCode"
+							name="referralCode"
+							className={`${styles['form-input']}`}
+							placeholder={t('referal-code')}
+							defaultValue={referralCode ? referralCode : ''}
+							onChange={(e) => {
+								e.target.value = e.target.value.toLocaleLowerCase();
+								onChangeHandler(e)
+							}}
+						/>
+						{formState?.error?.referralCode && (
+							<p className="text-sm text-red-500">
+								{
+									formState?.error?.referralCode.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']}`}>
@@ -306,6 +351,7 @@ export default function RegisterForm() {
 						</p>
 					)}
 				</div>
+
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('phone')}
@@ -369,6 +415,7 @@ export default function RegisterForm() {
 						</p>
 					)}
 				</div>
+
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('confirm-password')}