Issue #314: Added BirthDate field to Profile builder and Castform template

src/components/builder/left/sections/Profile.js

@@ -38,6 +38,13 @@ const Profile = ({ id }) => {
         path="profile.subtitle"
       />
 
+      <Input
+        type="date"
+        name="birthDate"
+        label={t('builder.profile.birthDate')}
+        path="profile.birthDate"
+      />
+
       <hr />
 
       <Input

src/data/demoState.json

@@ -190,6 +190,7 @@
       "line2": "Brindavan Layout, Subramanyapura,",
       "pincode": "560061"
     },
+    "birthDate": "",
     "email": "hello@amruthpillai.com",
     "firstName": "Amruth",
     "heading": "Profile",

src/data/initialState.json

@@ -5,6 +5,7 @@
     "firstName": "",
     "lastName": "",
     "subtitle": "",
+    "birthDate": "",
     "address": {
       "line1": "",
       "line2": "",

src/i18n/locales/en.json

@@ -96,6 +96,7 @@
       "photograph": "Photograph",
       "firstName": "First Name",
       "lastName": "Last Name",
+      "birthDate": "Date of Birth",
       "address": {
         "line1": "Address Line 1",
         "line2": "Address Line 2",

src/templates/Castform.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import PageContext from '../contexts/PageContext';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
@@ -12,6 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesA from './blocks/References/ReferencesA';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
+import { formatDate } from '../utils';
 
 const Blocks = {
   objective: ObjectiveA,
@@ -26,7 +28,8 @@ const Blocks = {
   references: ReferencesA,
 };
 
-const Castform = ({ data }) => {
+const Castform = ({ data, language }) => {
+  const { t } = useTranslation();
   const layout = data.metadata.layout.castform;
 
   const Photo = () =>
@@ -51,6 +54,19 @@ const Castform = ({ data }) => {
     </div>
   );
 
+  const BirthDate = () => (
+    data.profile.birthDate && (
+      <div className="text-xs">
+        <h6 className="capitalize font-semibold">
+          {t('builder.profile.birthDate')}
+        </h6>
+        <div>
+          <span>{formatDate({ date: data.profile.birthDate, language, includeDay: true })}</span>
+        </div>
+      </div>
+    )
+  );
+
   return (
     <PageContext.Provider value={{ data, heading: HeadingD }}>
       <div
@@ -76,7 +92,10 @@ const Castform = ({ data }) => {
 
               <div>
                 <HeadingD>{data.profile.heading}</HeadingD>
-                <ContactC />
+                <div className="grid gap-4">
+                  <BirthDate />
+                  <ContactC />
+                </div>
               </div>
 
               {layout[0] &&

src/utils/index.js

@@ -20,8 +20,11 @@ export const isFileImage = (file) => {
   return file && acceptedImageTypes.includes(file.type);
 };
 
-export const formatDate = ({ date, language = 'en' }) => {
-  return dayjs(date).locale(language.substr(0, 2)).format('MMMM YYYY');
+export const formatDate = ({ date, language = 'en', includeDay = false }) => {
+  const monthYearTemplate = 'MMMM YYYY';
+  const template = includeDay ? 'DD ' + monthYearTemplate : monthYearTemplate;
+
+  return dayjs(date).locale(language.substr(0, 2)).format(template);
 };
 
 export const formatDateRange = ({ startDate, endDate, language = 'en' }, t) => {