Merge pull request #374 from gianantoniopini/develop

Add a Birthdate field to the profile information

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/ar.json

@@ -96,6 +96,7 @@
       "photograph": "صورة فوتوغرافية",
       "firstName": "الاسم الاول",
       "lastName": "اسم العائلة",
+      "birthDate": "تاريخ الولادة",
       "address": {
         "line1": "العنوان الأول",
         "line2": "العنوان الثاني",

src/i18n/locales/da.json

@@ -96,6 +96,7 @@
       "photograph": "Fotografi",
       "firstName": "Fornavn",
       "lastName": "Efternavn",
+      "birthDate": "Fødselsdato",
       "address": {
         "line1": "Adresse linie 1",
         "line2": "Adresse linie 2",

src/i18n/locales/de.json

@@ -96,6 +96,7 @@
       "photograph": "Foto",
       "firstName": "Vorname",
       "lastName": "Nachname",
+      "birthDate": "Geburtsdatum",
       "address": {
         "line1": "Adresszeile 1",
         "line2": "Adresszeile 2",

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/i18n/locales/es.json

@@ -96,6 +96,7 @@
       "photograph": "Fotografía",
       "firstName": "Nombre",
       "lastName": "Apellido",
+      "birthDate": "Fecha de Nacimiento",
       "address": {
         "line1": "Domicilio - Línea 1",
         "line2": "Dirección - Línea 2",

src/i18n/locales/fi.json

@@ -96,6 +96,7 @@
       "photograph": "Valokuva",
       "firstName": "Etunimi",
       "lastName": "Sukunimi",
+      "birthDate": "Syntymäaika",
       "address": {
         "line1": "Osoiterivi 1",
         "line2": "Osoiterivi 2",

src/i18n/locales/fr.json

@@ -96,6 +96,7 @@
       "photograph": "Photo",
       "firstName": "Prénom",
       "lastName": "Nom",
+      "birthDate": "Date de naissance",
       "address": {
         "line1": "Adresse (ligne 1)",
         "line2": "Adresse (ligne 2)",

src/i18n/locales/hi.json

@@ -96,6 +96,7 @@
       "photograph": "फोटो",
       "firstName": "पहला नाम",
       "lastName": "उपनाम",
+      "birthDate": "जन्म की तारीख",
       "address": {
         "line1": "पता पंक्ति 1",
         "line2": "पता पंक्ति नं। 2",

src/i18n/locales/it.json

@@ -96,6 +96,7 @@
       "photograph": "Fotografia",
       "firstName": "Nome",
       "lastName": "Cognome",
+      "birthDate": "Data di Nascita",
       "address": {
         "line1": "Riga Indirizzo 1",
         "line2": "Riga Indirizzo 2",

src/i18n/locales/ja.json

@@ -96,6 +96,7 @@
       "photograph": "写真",
       "firstName": "名",
       "lastName": "姓",
+      "birthDate": "生年月日",
       "address": {
         "line1": "都道府県",
         "line2": "市区町村",

src/i18n/locales/kn.json

@@ -96,6 +96,7 @@
       "photograph": "ಫೋಟೋ",
       "firstName": "ಮೊದಲ ಹೆಸರು",
       "lastName": "ಕೊನೆಯ ಹೆಸರು",
+      "birthDate": "ಹುಟ್ತಿದ ದಿನ",
       "address": {
         "line1": "ವಿಳಾಸ ಸಾಲು 1",
         "line2": "ವಿಳಾಸ ಸಾಲು 2",

src/i18n/locales/nb.json

@@ -96,6 +96,7 @@
       "photograph": "Foto",
       "firstName": "Fornavn",
       "lastName": "Etternavn",
+      "birthDate": "Fødselsdato",
       "address": {
         "line1": "Adresselinje 1",
         "line2": "Adresselinje 2",

src/i18n/locales/nl.json

@@ -96,6 +96,7 @@
       "photograph": "foto",
       "firstName": "Voornaam",
       "lastName": "Achternaam",
+      "birthDate": "Geboortedatum",
       "address": {
         "line1": "Adresveld 1",
         "line2": "Adresveld 2",

src/i18n/locales/pl.json

@@ -96,6 +96,7 @@
       "photograph": "Fotografia",
       "firstName": "Imię",
       "lastName": "Nazwisko",
+      "birthDate": "Data urodzenia",
       "address": {
         "line1": "Pole adresowe 1",
         "line2": "Pole adresowe 2",

src/i18n/locales/pt-br.json

@@ -96,6 +96,7 @@
       "photograph": "Foto",
       "firstName": "Primeiro Nome",
       "lastName": "Sobrenome",
+      "birthDate": "Data de Nascimento",
       "address": {
         "line1": "Endereço Linha 1",
         "line2": "Endereço Linha 2",

src/i18n/locales/pt-pt.json

@@ -95,6 +95,7 @@
       "photograph": "Fotografia",
       "firstName": "Nome",
       "lastName": "Apelido",
+      "birthDate": "Data de Nascimento",
       "address": {
         "line1": "Morada Linha 1",
         "line2": "Morada Linha 2",

src/i18n/locales/ru.json

@@ -96,6 +96,7 @@
       "photograph": "Фотография",
       "firstName": "Имя",
       "lastName": "Фамилия",
+      "birthDate": "Дата рождения",
       "address": {
         "line1": "Адрес, строка 1",
         "line2": "Адрес, строка 2",

src/i18n/locales/sv.json

@@ -96,6 +96,7 @@
       "photograph": "Fotografi",
       "firstName": "Förnamn",
       "lastName": "Efternamn",
+      "birthDate": "Födelsedatum",
       "address": {
         "line1": "Addressrad 1",
         "line2": "Addressrad 2",

src/i18n/locales/tr.json

@@ -96,6 +96,7 @@
       "photograph": "Fotoğraf",
       "firstName": "Ad",
       "lastName": "Soyad",
+      "birthDate": "Doğum Tarihi",
       "address": {
         "line1": "Adres Satırı 1",
         "line2": "Adres Satırı 2",

src/i18n/locales/zh.json

@@ -96,6 +96,7 @@
       "photograph": "照片",
       "firstName": "姓",
       "lastName": "名",
+      "birthDate": "出生日期",
       "address": {
         "line1": "地址（第一行）",
         "line2": "地址（第二行）",

src/templates/Castform.js

@@ -12,6 +12,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 BirthDateA from './blocks/BirthDate/BirthDateA'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -76,7 +77,10 @@ const Castform = ({ data }) => {
 
               <div>
                 <HeadingD>{data.profile.heading}</HeadingD>
-                <ContactC />
+                <div className="grid gap-4">
+                  <BirthDateA />
+                  <ContactC />
+                </div>
               </div>
 
               {layout[0] &&

src/templates/Celebi.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import PageContext from '../contexts/PageContext';
 import { hexToRgb } from '../utils';
 import AwardsA from './blocks/Awards/AwardsA';
 import CertificationsA from './blocks/Certifications/CertificationsA';
-import ContactE from './blocks/Contact/ContactE';
+import ContactC from './blocks/Contact/ContactC';
 import EducationA from './blocks/Education/EducationA';
 import HeadingE from './blocks/Heading/HeadingE';
 import HobbiesA from './blocks/Hobbies/HobbiesA';
@@ -13,6 +14,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 BirthDateA from './blocks/BirthDate/BirthDateA'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -30,6 +32,7 @@ const Blocks = {
 const Celebi = ({ data }) => {
   const layout = data.metadata.layout.celebi;
   const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+  const { t } = useTranslation();
 
   const styles = {
     header: {
@@ -94,8 +97,15 @@ const Celebi = ({ data }) => {
         <div className="grid grid-cols-12 gap-8">
           <div className="col-span-4 ml-8" style={styles.leftSection}>
             <Photo />
+
             <div className="text-center grid gap-4 mt-4 mb-8 mx-6">
-              <ContactE />
+              <div>
+                <HeadingE>{t('builder.sections.profile')}</HeadingE>
+                <div className="relative w-full grid gap-4 text-xs">
+                  <BirthDateA />
+                  <ContactC />
+                </div>
+              </div>
 
               {layout[0] &&
                 layout[0].map((x) => {

src/templates/Gengar.js

@@ -13,6 +13,7 @@ import ProjectsA from './blocks/Projects/ProjectsA';
 import ReferencesB from './blocks/References/ReferencesB';
 import SkillsA from './blocks/Skills/SkillsA';
 import WorkA from './blocks/Work/WorkA';
+import BirthDateC from './blocks/BirthDate/BirthDateC'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -84,7 +85,10 @@ const Gengar = ({ data }) => {
               style={{ borderColor: data.metadata.colors.background }}
             />
 
-            <ContactB />
+            <div className="grid gap-4">
+              <BirthDateC />
+              <ContactB />
+            </div>
           </div>
 
           <div

src/templates/Glalie.js

@@ -13,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 BirthDateA from './blocks/BirthDate/BirthDateA'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -70,7 +71,11 @@ const Glalie = ({ data }) => {
           >
             <div className="grid gap-6 text-center p-8">
               <Profile />
-              <ContactD />
+
+              <div className="grid">
+                <BirthDateA />
+                <ContactD />
+              </div>
 
               {layout[0] &&
                 layout[0].map((x) => {

src/templates/Onyx.js

@@ -12,6 +12,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 BirthDateB from './blocks/BirthDate/BirthDateB'
 
 const Blocks = {
   objective: ObjectiveA,
@@ -70,7 +71,10 @@ const Onyx = ({ data }) => {
             </div>
           </div>
 
-          <Contact />
+          <div className="grid gap-4">
+            <BirthDateB />
+            <Contact />
+          </div>
         </div>
 
         <hr

src/templates/Pikachu.js

@@ -12,6 +12,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 BirthDateB from './blocks/BirthDate/BirthDateB'
 
 const Blocks = {
   work: WorkA,
@@ -89,6 +90,7 @@ const Pikachu = ({ data }) => {
 
           <div className="col-span-4">
             <div className="grid gap-4">
+              <BirthDateB />
               <ContactA />
 
               {layout[0] &&

src/templates/blocks/BirthDate/BirthDateA.js

@@ -0,0 +1,26 @@
+import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import PageContext from '../../../contexts/PageContext';
+import { formatDate } from '../../../utils';
+
+const BirthDateA = () => {
+  const { t } = useTranslation();
+  const { data } = useContext(PageContext);
+
+  if (data.profile.birthDate) {
+    return (
+      <div className="text-xs">
+        <h6 className="capitalize font-semibold">
+          {t('builder.profile.birthDate')}
+        </h6>
+        <div>
+          <span>{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default memo(BirthDateA);

src/templates/blocks/BirthDate/BirthDateB.js

@@ -0,0 +1,27 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { get } from 'lodash';
+import Icons from '../Icons';
+import { formatDate } from '../../../utils';
+
+const BirthDateB = () => {
+  const { data } = useContext(PageContext);
+  const Icon = get(Icons, "birthdaycake");
+
+  if (data.profile.birthDate) {
+    return (
+      <div className="text-xs flex items-center">
+        <Icon
+          size="10px"
+          className="mr-2"
+          style={{ color: data.metadata.colors.primary }}
+        />
+        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default memo(BirthDateB);

src/templates/blocks/BirthDate/BirthDateC.js

@@ -0,0 +1,27 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { get } from 'lodash';
+import Icons from '../Icons';
+import { formatDate } from '../../../utils';
+
+const BirthDateC = () => {
+  const { data } = useContext(PageContext);
+  const Icon = get(Icons, "birthdaycake");
+
+  if (data.profile.birthDate) {
+    return (
+      <div className="text-xs flex items-center">
+        <Icon
+          size="10px"
+          className="mr-2"
+          style={{ color: data.metadata.colors.background }}
+        />
+        <span className="font-medium break-all">{formatDate({ date: data.profile.birthDate, language: data.metadata.language, includeDay: true })}</span>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default memo(BirthDateC);

src/templates/blocks/Contact/ContactE.js

@@ -1,72 +0,0 @@
-import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import PageContext from '../../../contexts/PageContext';
-import { safetyCheck } from '../../../utils';
-
-const ContactItem = ({ value, label, link }) => {
-  return value ? (
-    <div className="flex flex-col">
-      <h6 className="capitalize font-semibold">{label}</h6>
-      {link ? (
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <span className="font-medium break-all">{value}</span>
-        </a>
-      ) : (
-        <span className="font-medium break-all">{value}</span>
-      )}
-    </div>
-  ) : null;
-};
-
-const ContactE = () => {
-  const { t } = useTranslation();
-  const { data, heading: Heading } = useContext(PageContext);
-
-  return (
-    <div>
-      <Heading>{t('builder.sections.profile')}</Heading>
-      <div className="relative w-full grid gap-2 text-xs">
-        <div>
-          <h6 className="capitalize font-semibold">
-            {t('shared.forms.address')}
-          </h6>
-          <div className="flex flex-col text-xs">
-            <span>{data.profile.address.line1}</span>
-            <span>{data.profile.address.line2}</span>
-            <span>
-              {data.profile.address.city} {data.profile.address.pincode}
-            </span>
-          </div>
-        </div>
-
-        <ContactItem
-          label={t('shared.forms.phone')}
-          value={data.profile.phone}
-          link={`tel:${data.profile.phone}`}
-        />
-        <ContactItem
-          label={t('shared.forms.website')}
-          value={data.profile.website}
-          link={data.profile.website}
-        />
-        <ContactItem
-          label={t('shared.forms.email')}
-          value={data.profile.email}
-          link={`mailto:${data.profile.email}`}
-        />
-
-        {safetyCheck(data.social) &&
-          data.social.items.map((x) => (
-            <ContactItem
-              key={x.id}
-              value={x.username}
-              label={x.network}
-              link={x.url}
-            />
-          ))}
-      </div>
-    </div>
-  );
-};
-
-export default memo(ContactE);

src/templates/blocks/Icons.js

@@ -8,7 +8,8 @@ import {
   FaInstagram,
   FaStackOverflow,
   FaBehance,
-  FaGitlab
+  FaGitlab,
+  FaBirthdayCake
 } from 'react-icons/fa';
 import { MdPhone, MdEmail } from 'react-icons/md';
 
@@ -24,7 +25,8 @@ const Icons = {
   instagram: FaInstagram,
   stackoverflow: FaStackOverflow,
   behance: FaBehance,
-  gitlab: FaGitlab
+  gitlab: FaGitlab,
+  birthdaycake: FaBirthdayCake
 };
 
 export default Icons;

src/utils/index.js

@@ -20,8 +20,11 @@ export const isFileImage = (file) => {
   return file && acceptedImageTypes.includes(file.type);
 };
 
-export const formatDate = ({ date, language = 'en' }) => {
+export const formatDate = ({ date, language = 'en', includeDay = false }) => {
-  return dayjs(date).locale(language.substr(0, 2)).format('MMMM YYYY');
+  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) => {