setup rejectionmail page (without review and recipients page)

frontend/src/PagesAdmin/RecruitmentGangOverviewPage/components/AppletContainer/AppletContainer.tsx

@@ -75,8 +75,10 @@ export function AppletContainer({ recruitmentId }: Props) {
           <AppletCard
             title={lowerCapitalize(t(KEY.recruitment_rejection_email))}
             description={t(KEY.recruitment_applet_rejection_mail_description)}
-            url="#"
-            disabled={true}
+            url={reverse({
+              pattern: ROUTES.frontend.admin_recruitment_gang_overview_rejection_email,
+              urlParams: { recruitmentId },
+            })}
           />
         </>
       ),

frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.module.scss

@@ -0,0 +1,28 @@
+.subheader {
+  padding: 0.2em;
+  font-size: 1.5em;
+  font-weight: 700;
+}
+
+.subject {
+  font-size: 1.2em;
+  font-weight: 700;
+}
+
+.preview {
+  padding-top: 1em;
+}
+
+.textarea {
+  min-height: 14rem;
+}
+
+.flex_row {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.flex_item {
+  flex-basis: 50%;
+}

frontend/src/PagesAdmin/RecruitmentRejectionMailPage/RecruitmentRejectionMailPage.tsx

@@ -0,0 +1,115 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import classNames from 'classnames';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { Button, Form, FormField, FormItem, FormLabel, Input, Textarea } from '~/Components';
+import { FormControl, FormMessage } from '~/Components/Forms/Form';
+import { useTitle } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import { NON_EMPTY_STRING } from '~/schema/strings';
+import { lowerCapitalize } from '~/utils';
+import { AdminPageLayout } from '../AdminPageLayout/AdminPageLayout';
+import styles from './RecruitmentRejectionMailPage.module.scss';
+
+export function RecruitmentRejectionMailPage() {
+  const { t } = useTranslation();
+  const title = lowerCapitalize(t(KEY.recruitment_rejection_email));
+  useTitle(title);
+
+  const recjectionMailSchema = z.object({
+    subject: NON_EMPTY_STRING,
+    textBeforeName: NON_EMPTY_STRING,
+    content: NON_EMPTY_STRING,
+  });
+
+  const form = useForm<z.infer<typeof recjectionMailSchema>>({
+    resolver: zodResolver(recjectionMailSchema),
+    defaultValues: {
+      subject: '',
+      textBeforeName: '',
+      content: '',
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof recjectionMailSchema>) {
+    // ISSUE #1727 - TODO:
+    // Connect backend rejection mail "SendRejectionMailView" and create a page with overview of the recipients
+  }
+
+  return (
+    <AdminPageLayout title={lowerCapitalize(t(KEY.recruitment_rejection_email))}>
+      <div className={styles.flex_row}>
+        <div className={styles.flex_item}>
+          <h2 className={styles.subheader}>
+            {t(KEY.common_create)} {t(KEY.common_email).toLowerCase()}
+          </h2>
+          <hr />
+        </div>
+        <div className={styles.flex_item}>
+          <h2 className={styles.subheader}>{t(KEY.recruitment_preview)}</h2>
+          <hr />
+        </div>
+      </div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.flex_row}>
+            <div className={styles.flex_item}>
+              <FormField
+                control={form.control}
+                name="subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.common_email_subject)}`}</FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="textBeforeName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.recruitment_text_before_name)}`}</FormLabel>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{`${t(KEY.common_content)}`}</FormLabel>
+                    <FormControl>
+                      <Textarea className={styles.textarea} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className={styles.flex_item}>
+              <p className={classNames(styles.subject, styles.preview)}>{form.watch('subject')}</p>
+              <p className={styles.preview}>
+                {form.watch('textBeforeName')} {`<${t(KEY.common_firstname)}>`},
+              </p>
+              <pre className={styles.preview}>{form.watch('content')}</pre>
+            </div>
+          </div>
+          <div className={styles.flex_row}>
+            <div className={styles.flex_item}>
+              <Button type="submit">{t(KEY.recruitment_look_at_recipients)}</Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </AdminPageLayout>
+  );
+}

frontend/src/PagesAdmin/RecruitmentRejectionMailPage/index.ts

@@ -0,0 +1 @@
+export { RecruitmentRejectionMailPage } from './RecruitmentRejectionMailPage';

frontend/src/PagesAdmin/index.ts

@@ -22,6 +22,7 @@ export { RecruitmentOverviewPage } from './RecruitmentOverviewPage';
 export { RecruitmentPositionFormAdminPage } from './RecruitmentPositionFormAdminPage';
 export { RecruitmentPositionOverviewPage } from './RecruitmentPositionOverviewPage';
 export { RecruitmentRecruiterDashboardPage } from './RecruitmentRecruiterDashboardPage';
+export { RecruitmentRejectionMailPage } from './RecruitmentRejectionMailPage';
 export { RecruitmentSeparatePositionFormAdminPage } from './RecruitmentSeparatePositionFormAdminPage';
 export { RecruitmentUnprocessedApplicantsPage } from './RecruitmentUnprocessedApplicantsPage';
 export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWithoutInterviewGangPage';

frontend/src/i18n/constants.ts

@@ -57,6 +57,7 @@ export const KEY = {
   pick_a_date: 'pick_a_date',
 
   // No category:
+  common_content: 'common_content',
   common_url: 'common_url',
   common_manage: 'common_manage',
   common_yes: 'common_yes',
@@ -280,6 +281,9 @@ export const KEY = {
   sulten_reservation_form_find_times: 'sulten_reservation_form_find_times',
 
   // Recruitment:
+  recruitment_look_at_recipients: 'recruitment_look_at_recipients',
+  recruitment_preview: 'recruitment_preview',
+  recruitment_text_before_name: 'recruitment_text_before_name',
   recruitment_tags: 'recruitment_tags',
   recruitment_position: 'recruitment_position',
   recruitment_positions: 'recruitment_positions',

frontend/src/i18n/translations.ts

@@ -43,6 +43,7 @@ export const nb = prepareTranslations({
   [KEY.pick_a_date]: 'Velg en dato',
 
   // Other common
+  [KEY.common_content]: 'Innhold',
   [KEY.common_url]: 'URL',
   [KEY.common_manage]: 'Håndter',
   [KEY.common_yes]: 'Ja',
@@ -260,6 +261,9 @@ export const nb = prepareTranslations({
   [KEY.footer_developed_by]: 'Utviklet av MG::Web',
 
   // Recruitment:
+  [KEY.recruitment_look_at_recipients]: 'Gå videre og se gjennom mottakere',
+  [KEY.recruitment_preview]: 'Forhåndsvisning',
+  [KEY.recruitment_text_before_name]: 'Tekst før navn',
   [KEY.recruitment_tags]: 'Tags',
   [KEY.recruitment_position]: 'Stilling',
   [KEY.recruitment_positions]: 'Stillinger',
@@ -546,6 +550,7 @@ export const en = prepareTranslations({
   [KEY.pick_a_date]: 'Pick a date',
 
   // No category:
+  [KEY.common_content]: 'Content',
   [KEY.common_url]: 'URL',
   [KEY.common_manage]: 'Manage',
   [KEY.common_yes]: 'Yes',
@@ -762,6 +767,9 @@ export const en = prepareTranslations({
   [KEY.footer_developed_by]: 'Developed by MG::Web',
 
   // Recruitment:
+  [KEY.recruitment_look_at_recipients]: 'Go ahead and look through recipients',
+  [KEY.recruitment_preview]: 'Preview',
+  [KEY.recruitment_text_before_name]: 'Text before name',
   [KEY.recruitment_tags]: 'Tags',
   [KEY.recruitment_position]: 'Position',
   [KEY.recruitment_positions]: 'Positions',

frontend/src/router/router.tsx

@@ -55,6 +55,7 @@ import {
   RecruitmentOverviewPage,
   RecruitmentPositionFormAdminPage,
   RecruitmentPositionOverviewPage,
+  RecruitmentRejectionMailPage,
   RecruitmentSeparatePositionFormAdminPage,
   RecruitmentUnprocessedApplicantsPage,
   RecruitmentUsersWithoutInterviewGangPage,
@@ -431,6 +432,20 @@ export const router = createBrowserRouter(
                   crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
                 }}
               />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_gang_overview_rejection_email}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]}
+                    element={<RecruitmentRejectionMailPage />}
+                  />
+                }
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{lowerCapitalize(t(KEY.recruitment_rejection_email))}</Link>
+                  ),
+                }}
+              />
               <Route
                 path={ROUTES.frontend.admin_recruitment_recruiter_dashboard}
                 element={<RecruitmentRecruiterDashboardPage />}