Volunteer form: Submit Volunteer form and add content

src/app/about/organization-structure/page.tsx

@@ -1,3 +1,4 @@
+import ArticleBody from '#components/ArticleBody';
 import ImageWrapper from '#components/ImageWrapper';
 import Page from '#components/Page';
 import Section from '#components/Section';
@@ -6,9 +7,34 @@ import organizationStructure from '#public/organizational-structure.jpg';
 
 import styles from './page.module.css';
 
+const ceoContent = `## Central Executive Committee
+Nepal Red Cross Society (NRCS) is led by a Central Executive Committee (CEC).
+
+Government of Nepal has formed a 9-member Ad hoc Central Executive Committee (CEC) dated 9 Shrawan 2082. The name list of the committee with designation is as follows:
+
+|                          |                                 |
+|--------------------------|---------------------------------|
+| **Chairman**             | **Members**                     |
+| Mr. Binod Kumar Sharma   | Prof. Dr. Hari Darshan Shrestha |
+| **Vice Chairman**        | Ms. Surya Kumari Shrestha       |
+| Mr. Hari Baral           | Ms. Kanti Rajbhandari           |
+| **Secretary General**    | Dr. Gangadhar Adhikari          |
+| Mr. Min Bahadur Malla    | Mr. Hem Raj Ojha                |
+| **Treasurer General**    |                                 |
+| Mr. Lok Darshan Shrestha |                                 |
+| **Governance Secretariat** |                               |
+| Mr. Sakun Kumar Joshi    |                                 |
+| [email protected]     |                                 |
+`;
+
 export default function AboutUs() {
     return (
         <Page contentClassName={styles.page}>
+            <Section>
+                <ArticleBody
+                    content={ceoContent}
+                />
+            </Section>
             <Section
                 heading="Administrative Structure"
                 childrenContainerClassName={styles.adminStructure}

src/app/get-involved/volunteer/VolunteerForm/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useState } from 'react';
+import { _cs } from '@togglecorp/fujs';
 
-import Button from '#components/Button';
 import DateInput from '#components/DateInput';
 import Heading from '#components/Heading';
 import Link from '#components/Link';
@@ -115,6 +115,8 @@ export default function VolunteerForm() {
         (district) => district.id === Number(formValues.temporaryDistrict),
     )?.nplp || [] : [];
 
+    const emailToSubmitVolunteerForm = '[email protected]';
+
     const handleChange = (
         e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
     ) => {
@@ -137,15 +139,25 @@ export default function VolunteerForm() {
         }
     };
 
-    const handleClick = (
-        name: string | undefined,
-        e: React.MouseEvent<HTMLButtonElement>,
-    ) => {
-        e.preventDefault();
-        // TODO: Add forward to email logic!!
-        // eslint-disable-next-line no-console
-        console.log('Clicked:', name, formValues);
-    };
+    const subject = encodeURIComponent(`Volunteer entry from ${formValues.firstName} ${formValues.lastName} (${formValues.email})`);
+
+    const body = encodeURIComponent(`
+        First Name: ${formValues.firstName}
+        Last Name: ${formValues.lastName}
+        Email: ${formValues.email}
+        Phone Number: ${formValues.phoneNumber}
+        Nationality: ${formValues.nationality}
+        Date of Birth: ${formValues.dateOfBirth}
+        Gender: ${formValues.gender}
+        Permanent Address: ${formValues.permanentProvince}, ${formValues.permanentDistrict}, ${formValues.permanentMunicipality}, ${formValues.permanentWard}
+        Temporary Address: ${formValues.temporaryProvince}, ${formValues.temporaryDistrict}, ${formValues.temporaryMunicipality}, ${formValues.temporaryWard}
+        Expertise: ${formValues.expertise}
+        Trainings: ${formValues.trainings}
+        Sectors: ${formValues.sectors}
+        Other Sectors: ${formValues.otherSector}
+    `);
+
+    const hrefForSubmit = `mailto:${emailToSubmitVolunteerForm}?subject=${subject}&body=${body}`;
 
     return (
         <form
@@ -380,14 +392,12 @@ export default function VolunteerForm() {
                 />
                 &nbsp; I certify I have read the NRCS Code of Conduct.
             </label>
-            <Button
-                name={undefined}
-                className={styles.submitButton}
-                onClick={handleClick}
-                variant="border"
+            <Link
+                className={_cs(!formValues.termsAccepted && styles.disabled, styles.submitButton)}
+                href={hrefForSubmit}
             >
-                Continue
-            </Button>
+                Submit
+            </Link>
         </form>
     );
 }

src/app/get-involved/volunteer/VolunteerForm/styles.module.css

@@ -87,6 +87,13 @@
 
     .submitButton {
         border: var(--width-separator-thin) solid var(--color-primary);
+        padding: var(--spacing-small) var(--spacing-medium);
         align-self: flex-start;
+
+        &.disabled {
+            opacity: 75%;
+            border-color: var(--color-text-neutral);
+            pointer-events: none;
+        }
     }
 }

src/app/globals.css

@@ -9,7 +9,7 @@
     --color-background-gray: #F3F4F6;
     --color-background-secondary: #f5f5f5;
     --color-foreground: #171717;
-    --color-banner: #024344;
+    --color-banner: #193351;
 
     --color-text-black: #000000;
     --color-text-neutral: #6B7280;

src/app/our-presence/chaptersTable/index.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import React from 'react';
+
+import SearchableTable from '#components/SearchTableInput/page';
+import Section from '#components/Section';
+
+import districtData from '../district.json';
+import eyeHospitalData from '../eyeHospital.json';
+import provinceData from '../province.json';
+
+interface ChapterRow {
+    sN: string;
+    name: string;
+    province?: string;
+    district?: string;
+    localLevel?: string;
+    wardNo?: string;
+    otherAddress?: string;
+    phone?: string;
+    email?: string;
+}
+
+const keySelector = (item: ChapterRow) => item.sN;
+
+function mapData(data: Record<string, string>[]): ChapterRow[] {
+    return data.map((item) => ({
+        sN: item['S.N'] || '-',
+        name: item.Name || '-',
+        province: item.Province || '-',
+        district: item.District || '-',
+        localLevel: item['Local Level'] || '-',
+        wardNo: item['Ward No.'] || '-',
+        otherAddress: item['Other Address'] || '-',
+        phone: item.Phone || '-',
+        email: item.Email || '-',
+    }));
+}
+
+const chapterColumns: { key: keyof ChapterRow; label: string }[] = [
+    { key: 'sN', label: 'S.N' },
+    { key: 'name', label: 'Name' },
+    { key: 'province', label: 'Province' },
+    { key: 'district', label: 'District' },
+    { key: 'localLevel', label: 'Address' },
+    // { key: 'wardNo', label: 'Ward No.' },
+    // { key: 'otherAddress', label: 'Other Address' },
+    { key: 'phone', label: 'Phone' },
+    // { key: 'email', label: 'Email' },
+];
+
+function ChaptersTable() {
+    const provinceChapters = mapData(provinceData);
+    const districtChapters = mapData(districtData);
+    const eyeHospital = mapData(eyeHospitalData);
+    return (
+        <>
+            <Section
+                heading="Our Presence"
+                headingWithBackground
+                skipAnimation
+            >
+                <SearchableTable
+                    title="Province Chapters"
+                    data={provinceChapters}
+                    columns={chapterColumns}
+                    keySelector={keySelector}
+                    searchField="province"
+                />
+            </Section>
+            <Section
+                skipAnimation
+            >
+                <SearchableTable
+                    title="District Chapters"
+                    data={districtChapters}
+                    columns={chapterColumns}
+                    keySelector={keySelector}
+                    searchField="district"
+                />
+            </Section>
+            <Section
+                skipAnimation
+            >
+                <SearchableTable
+                    title="Eye Hospital"
+                    data={eyeHospital}
+                    columns={chapterColumns}
+                    keySelector={keySelector}
+                />
+            </Section>
+        </>
+    );
+}
+
+export default ChaptersTable;

src/app/our-presence/page.tsx

@@ -1,97 +1,15 @@
-'use client';
-
 import React from 'react';
 
 import Page from '#components/Page';
-import SearchableTable from '#components/SearchTableInput/page';
-import Section from '#components/Section';
-
-import districtData from './district.json';
-import eyeHospitalData from './eyeHospital.json';
-import provinceData from './province.json';
-import styles from './page.module.css';
-
-interface ChapterRow {
-    sN: string;
-    name: string;
-    province?: string;
-    district?: string;
-    localLevel?: string;
-    wardNo?: string;
-    otherAddress?: string;
-    phone?: string;
-    email?: string;
-}
 
-const keySelector = (item: ChapterRow) => item.sN;
+import ChaptersTable from './chaptersTable';
 
-function mapData(data: Record<string, string>[]): ChapterRow[] {
-    return data.map((item) => ({
-        sN: item['S.N'] || '-',
-        name: item.Name || '-',
-        province: item.Province || '-',
-        district: item.District || '-',
-        localLevel: item['Local Level'] || '-',
-        wardNo: item['Ward No.'] || '-',
-        otherAddress: item['Other Address'] || '-',
-        phone: item.Phone || '-',
-        email: item.Email || '-',
-    }));
-}
-
-const chapterColumns: { key: keyof ChapterRow; label: string }[] = [
-    { key: 'sN', label: 'S.N' },
-    { key: 'name', label: 'Name' },
-    { key: 'province', label: 'Province' },
-    { key: 'district', label: 'District' },
-    { key: 'localLevel', label: 'Address' },
-    // { key: 'wardNo', label: 'Ward No.' },
-    // { key: 'otherAddress', label: 'Other Address' },
-    { key: 'phone', label: 'Phone' },
-    { key: 'email', label: 'Email' },
-];
+import styles from './page.module.css';
 
 export default function OurPresence() {
-    const provinceChapters = mapData(provinceData);
-    const districtChapters = mapData(districtData);
-    const eyeHospital = mapData(eyeHospitalData);
-
     return (
         <Page contentClassName={styles.districtChapterOne}>
-            <Section
-                heading="Our Presence"
-                headingWithBackground
-                skipAnimation
-            >
-                <SearchableTable
-                    title="Province Chapters"
-                    data={provinceChapters}
-                    columns={chapterColumns}
-                    keySelector={keySelector}
-                    searchField="province"
-                />
-            </Section>
-            <Section
-                skipAnimation
-            >
-                <SearchableTable
-                    title="District Chapters"
-                    data={districtChapters}
-                    columns={chapterColumns}
-                    keySelector={keySelector}
-                    searchField="district"
-                />
-            </Section>
-            <Section
-                skipAnimation
-            >
-                <SearchableTable
-                    title="Eye Hospital"
-                    data={eyeHospital}
-                    columns={chapterColumns}
-                    keySelector={keySelector}
-                />
-            </Section>
+            <ChaptersTable />
         </Page>
     );
 }

src/components/ArticleBody/styles.module.css

@@ -80,4 +80,9 @@
     code {
         text-wrap: wrap;
     }
+
+    table tr {
+        font-size: var(--font-size-medium);
+        line-height: 2;
+    }
 }

src/components/Navbar/index.tsx

@@ -171,7 +171,7 @@ export default function Navbar(props: Props) {
                     <div className={styles.rightContainer}>
                         <Link
                             className={_cs(styles.hideableIcon, styles.expandedButton)}
-                            href="/volunteer/"
+                            href="/get-involved/volunteer/"
                         >
                             Volunteer
                         </Link>