k4rli/medreport_mrb2b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update company registration flow and email handling; switch to zod for validation

Browse Source
This commit is contained in:
Danel Kungla
2025-06-17 13:45:46 +03:00
parent fe44030190
commit 291919c2d1
18 changed files with 274 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/(public)/register-company/page.tsx
View File

@@ -1,18 +1,23 @@
"use client";
'use client';
import { MedReportTitle } from "@/components/med-report-title";
import React from "react";
import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import { companySchema } from "@/lib/validations/companySchema";
import { CompanySubmitData } from "@/lib/types/company";
import { submitCompanyRegistration } from "@/lib/services/register-company.service";
import { useRouter } from "next/navigation";
import { Label } from "@kit/ui/label";
import { Input } from "@kit/ui/input";
import { SubmitButton } from "@/components/ui/submit-button";
import { FormItem } from "@kit/ui/form";
import { Trans } from "@kit/ui/trans";
import React from 'react';
import { useRouter } from 'next/navigation';
import { MedReportTitle } from '@/components/med-report-title';
import { SubmitButton } from '@/components/ui/submit-button';
import { sendCompanyOfferEmail } from '@/lib/services/mailer.service';
import { submitCompanyRegistration } from '@/lib/services/register-company.service';
import { CompanySubmitData } from '@/lib/types/company';
import { companySchema } from '@/lib/validations/companySchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FormItem } from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import { Trans } from '@kit/ui/trans';
export default function RegisterCompany() {
const router = useRouter();
@@ -21,9 +26,10 @@ export default function RegisterCompany() {
handleSubmit,
formState: { errors, isValid, isSubmitting },
} = useForm({
resolver: yupResolver(companySchema),
mode: "onChange",
resolver: zodResolver(companySchema),
mode: 'onChange',
});
const language = useTranslation().i18n.language;
async function onSubmit(data: CompanySubmitData) {
const formData = new FormData();
@@ -33,57 +39,66 @@ export default function RegisterCompany() {
try {
await submitCompanyRegistration(formData);
router.push("/register-company/success");
sendCompanyOfferEmail(data, language)
.then(() => router.push('/register-company/success'))
.catch((error) => alert('error: ' + error));
} catch (err: unknown) {
if (err instanceof Error) {
alert("Server validation error: " + err.message);
alert('Server validation error: ' + err.message);
}
alert("Server validation error");
alert('Server validation error');
}
}
return (
<div className="flex flex-row border rounded-3xl border-border max-w-5xl overflow-hidden">
<div className="flex flex-col text-center py-14 px-12 w-1/2">
<div className="border-border flex max-w-5xl flex-row overflow-hidden rounded-3xl border">
<div className="flex w-1/2 flex-col px-12 py-14 text-center">
<MedReportTitle />
<h1 className="pt-8">Ettevõtte andmed</h1>
<p className="pt-2 text-muted-foreground text-sm">
Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
kasutada kavatsed.
<h1 className="pt-8">
<Trans i18nKey={'account:requestCompanyAccount:title'} />
</h1>
<p className="text-muted-foreground pt-2 text-sm">
<Trans i18nKey={'account:requestCompanyAccount:description'} />
</p>
<form
onSubmit={handleSubmit(onSubmit)}
noValidate
className="flex gap-6 flex-col text-left pt-8 px-6"
className="flex flex-col gap-6 px-6 pt-8 text-left"
>
<FormItem>
<Label>Ettevõtte nimi</Label>
<Input {...register("companyName")} />
<Label>
<Trans i18nKey={'common:formField:companyName'} />
</Label>
<Input {...register('companyName')} />
</FormItem>
<FormItem>
<Label>Kontaktisik</Label>
<Input {...register("contactPerson")} />
<Label>
<Trans i18nKey={'common:formField:contactPerson'} />
</Label>
<Input {...register('contactPerson')} />
</FormItem>
<FormItem>
<Label>E-mail</Label>
<Input type="email" {...register("email")}></Input>
<Label>
<Trans i18nKey={'common:formField:email'} />
</Label>
<Input type="email" {...register('email')}></Input>
</FormItem>
<FormItem>
<Label>Telefon</Label>
<Input type="tel" {...register("phone")} />
<Label>
<Trans i18nKey={'common:formField:phone'} />
</Label>
<Input type="tel" {...register('phone')} />
</FormItem>
<SubmitButton
disabled={!isValid || isSubmitting}
pendingText="Saatmine..."
type="submit"
formAction={submitCompanyRegistration}
>
<Trans i18nKey={'account:requestCompanyAccount'} />
<Trans i18nKey={'account:requestCompanyAccount:button'} />
</SubmitButton>
</form>
</div>
<div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat">
</div>
<div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat"></div>
</div>
);
}

26
app/(public)/register-company/success/page.tsx
View File

@@ -1,10 +1,14 @@
import { MedReportTitle } from "@/components/med-report-title";
import Image from "next/image";
import Link from "next/link";
import Image from 'next/image';
import Link from 'next/link';
import { MedReportTitle } from '@/components/med-report-title';
import { Button } from '@/packages/ui/src/shadcn/button';
import { Trans } from '@kit/ui/trans';
export default function CompanyRegistrationSuccess() {
return (
<div className="pt-2 px-16 pb-12 border rounded-3xl border-border">
<div className="border-border rounded-3xl border px-16 pt-4 pb-12">
<MedReportTitle />
<div className="flex flex-col items-center px-4">
<Image
@@ -14,11 +18,17 @@ export default function CompanyRegistrationSuccess() {
width={326}
height={195}
/>
<h1 className="pb-2">Päring edukalt saadetud!</h1>
<p className=" text-muted-foreground text-sm">Saadame teile esimesel võimalusel vastuse</p>
<h1 className="pb-2">
<Trans i18nKey={'account:requestCompanyAccount:successTitle'} />
</h1>
<p className="text-muted-foreground text-sm">
<Trans i18nKey={'account:requestCompanyAccount:successDescription'} />
</p>
</div>
<Button className="w-full mt-8">
<Link href="/">Tagasi kodulehele</Link>
<Button className="mt-8 w-full">
<Link href="/">
<Trans i18nKey={'account:requestCompanyAccount:successButton'} />
</Link>
</Button>
</div>
);

2
lib/dev-mock-modules.ts
View File

@@ -32,4 +32,4 @@ export const setUser = noop('Sentry.setUser');
export const loadStripe = noop('Stripe.loadStripe');
// Nodemailer
export const createTransport = noop('Nodemailer.createTransport');
// export const createTransport = noop('Nodemailer.createTransport');

42
lib/services/mailer.service.ts Normal file
View File

@@ -0,0 +1,42 @@
'use server';
import { getMailer } from '@kit/mailers';
import { enhanceAction } from '@kit/next/actions';
import { CompanySubmitData } from '../types/company';
import { emailSchema } from '../validations/email.schema';
export const sendCompanyOfferEmail = async (
data: CompanySubmitData,
language: string,
) => {
const { renderCompanyOfferEmail } = await import('@kit/email-templates');
const { html, subject, to } = await renderCompanyOfferEmail({
language,
companyData: data,
});
await sendEmail({
subject,
html,
to,
});
};
export const sendEmail = enhanceAction(
async ({ subject, html, to }) => {
const mailer = await getMailer();
await mailer.sendEmail({
to,
subject,
html,
});
return {};
},
{
schema: emailSchema,
auth: false,
},
);

39
lib/services/register-company.service.ts
View File

@@ -1,31 +1,26 @@
"use server";
'use server';
import * as yup from "yup";
import { companySchema } from "@/lib/validations/companySchema";
import { companySchema } from '@/lib/validations/companySchema';
export async function submitCompanyRegistration(formData: FormData) {
const data = {
companyName: formData.get("companyName")?.toString() || "",
contactPerson: formData.get("contactPerson")?.toString() || "",
email: formData.get("email")?.toString() || "",
phone: formData.get("phone")?.toString() || "",
companyName: formData.get('companyName')?.toString() || '',
contactPerson: formData.get('contactPerson')?.toString() || '',
email: formData.get('email')?.toString() || '',
phone: formData.get('phone')?.toString() || '',
};
try {
await companySchema.validate(data, { abortEarly: false });
const result = companySchema.safeParse(data);
console.log("Valid data:", data);
} catch (validationError) {
if (validationError instanceof yup.ValidationError) {
const errors = validationError.inner.map((err) => ({
path: err.path,
message: err.message,
}));
throw new Error(
"Validation failed: " +
errors.map((e) => `${e.path}: ${e.message}`).join(", ")
);
}
throw validationError;
if (!result.success) {
const errors = result.error.errors.map((err) => ({
path: err.path.join('.'),
message: err.message,
}));
throw new Error(
'Validation failed: ' +
errors.map((e) => `${e.path}: ${e.message}`).join(', '),
);
}
}

20
lib/validations/companySchema.ts
View File

@@ -1,8 +1,16 @@
import * as yup from "yup";
import { z } from 'zod';
export const companySchema = yup.object({
companyName: yup.string().required("Company name is required"),
contactPerson: yup.string().required("Contact person is required"),
email: yup.string().email("Invalid email").required("Email is required"),
phone: yup.string().optional(),
export const companySchema = z.object({
companyName: z.string({
required_error: 'Company name is required',
}),
contactPerson: z.string({
required_error: 'Contact person is required',
}),
email: z
.string({
required_error: 'Email is required',
})
.email('Invalid email'),
phone: z.string().optional(),
});

7
lib/validations/email.schema.ts Normal file
View File

@@ -0,0 +1,7 @@
import { z } from 'zod';
export const emailSchema = z.object({
to: z.string().email(),
subject: z.string().min(1).max(200),
html: z.string().min(1).max(5000),
});

8
next.config.mjs
View File

@@ -129,7 +129,7 @@ function getModulesAliases() {
const excludeSentry = monitoringProvider !== 'sentry';
const excludeBaselime = monitoringProvider !== 'baselime';
const excludeStripe = billingProvider !== 'stripe';
const excludeNodemailer = mailerProvider !== 'nodemailer';
// const excludeNodemailer = mailerProvider !== 'nodemailer';
const excludeTurnstile = !captchaProvider;
/** @type {Record<string, string>} */
@@ -151,9 +151,9 @@ function getModulesAliases() {
aliases['@stripe/stripe-js'] = noopPath;
}
if (excludeNodemailer) {
aliases['nodemailer'] = noopPath;
}
// if (excludeNodemailer) {
// aliases['nodemailer'] = noopPath;
// }
if (excludeTurnstile) {
aliases['@marsidev/react-turnstile'] = noopPath;

2
packages/email-templates/README.md
View File

@@ -2,4 +2,4 @@
This package is responsible for managing email templates using the react.email library.
Here you can define email templates using React components and export them as a function that returns the email content.
Here you can define email templates using React components and export them as a function that returns the email content.

90
packages/email-templates/src/emails/company-offer.email.tsx Normal file
View File

@@ -0,0 +1,90 @@
import {
Body,
Head,
Html,
Preview,
Tailwind,
Text,
render,
} from '@react-email/components';
import { BodyStyle } from '../components/body-style';
import { EmailContent } from '../components/content';
import { EmailHeader } from '../components/header';
import { EmailHeading } from '../components/heading';
import { EmailWrapper } from '../components/wrapper';
import { initializeEmailI18n } from '../lib/i18n';
export async function renderCompanyOfferEmail({
language,
companyData,
}: {
language?: string;
companyData: {
companyName: string;
contactPerson: string;
email: string;
phone?: string;
};
}) {
const namespace = 'company-offer-email';
const { t } = await initializeEmailI18n({
language,
namespace,
});
const to = process.env.CONTACT_EMAIL || '';
const previewText = t(`${namespace}:previewText`, {
companyName: companyData.companyName,
});
const subject = t(`${namespace}:subject`, {
companyName: companyData.companyName,
});
const html = await render(
<Html>
<Head>
<BodyStyle />
</Head>
<Preview>{previewText}</Preview>
<Tailwind>
<Body>
<EmailWrapper>
<EmailHeader>
<EmailHeading>{previewText}</EmailHeading>
</EmailHeader>
<EmailContent>
<Text className="text-[16px] leading-[24px] text-[#242424]">
{t(`${namespace}:companyName`)} {companyData.companyName}
</Text>
<Text className="text-[16px] leading-[24px] text-[#242424]">
{t(`${namespace}:contactPerson`)} {companyData.contactPerson}
</Text>
<Text className="text-[16px] leading-[24px] text-[#242424]">
{t(`${namespace}:email`)} {companyData.email}
</Text>
<Text className="text-[16px] leading-[24px] text-[#242424]">
{t(`${namespace}:phone`)} {companyData.phone || 'N/A'}
</Text>
</EmailContent>
</EmailWrapper>
</Body>
</Tailwind>
</Html>,
);
return {
html,
subject,
to,
};
}

1
packages/email-templates/src/index.ts
View File

@@ -1,3 +1,4 @@
export * from './emails/invite.email';
export * from './emails/account-delete.email';
export * from './emails/otp.email';
export * from './emails/company-offer.email';

8
packages/email-templates/src/locales/et/company-offer-email.json Normal file
View File

@@ -0,0 +1,8 @@
{
"subject": "Uus ettevõtte liitumispäring",
"previewText": "Ettevõte {{companyName}} soovib pakkumist",
"companyName": "Ettevõtte nimi:",
"contactPerson": "Kontaktisik:",
"email": "E-mail:",
"phone": "Telefon:"
}

2
packages/mailers/shared/src/schema/mailer.schema.ts
View File

@@ -5,7 +5,7 @@ export const MailerSchema = z
to: z.string().email(),
// this is not necessarily formatted
// as an email so we type it loosely
from: z.string().min(1),
from: z.string().min(1).optional(),
subject: z.string(),
})
.and(

3
public/locales/en/account.json
View File

@@ -112,6 +112,5 @@
"noTeamsYet": "You don't have any teams yet.",
"createTeam": "Create a team to get started.",
"createTeamButtonLabel": "Create a Team",
"createCompanyAccount": "Create Company Account",
"requestCompanyAccount": "Request Company Account"
"createCompanyAccount": "Create Company Account"
}

9
public/locales/et/account.json
View File

@@ -113,5 +113,12 @@
"createTeam": "Create a team to get started.",
"createTeamButtonLabel": "Create a Team",
"createCompanyAccount": "Create Company Account",
"requestCompanyAccount": "Küsi pakkumist"
"requestCompanyAccount": {
"title": "Ettevõtte andmed",
"description": "Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport kasutada kavatsed.",
"button": "Küsi pakkumist",
"successTitle": "Päring edukalt saadetud!",
"successDescription": "Saadame teile esimesel võimalusel vastuse",
"successButton": "Tagasi kodulehele"
}
}

6
public/locales/et/common.json
View File

@@ -92,5 +92,11 @@
"description": "This website uses cookies to ensure you get the best experience on our website.",
"reject": "Reject",
"accept": "Accept"
},
"formField": {
"companyName": "Ettevõtte nimi",
"contactPerson": "Kontaktisik",
"email": "E-mail",
"phone": "Telefon"
}
}

3
public/locales/ru/account.json
View File

@@ -112,6 +112,5 @@
"noTeamsYet": "You don't have any teams yet.",
"createTeam": "Create a team to get started.",
"createTeamButtonLabel": "Create a Team",
"createCompanyAccount": "Create Company Account",
"requestCompanyAccount": "Request Company Account"
"createCompanyAccount": "Create Company Account"
}

2
tsconfig.json
View File

@@ -3,7 +3,7 @@
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*":["./*"],
"@/*": ["./*"],
"~/*": ["./app/*"],
"~/config/*": ["./config/*"],
"~/components/*": ["./components/*"],