Issue #314: Updated Celebi, Gengar, Glalie and Pikachu templates to include new birthDate field; deleted ContactE block as it is no longer used in the Celebi template.

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,8 +85,11 @@ const Gengar = ({ data }) => {
               style={{ borderColor: data.metadata.colors.background }}
             />
 
+            <div className="grid gap-4">
+              <BirthDateC />
               <ContactB />
             </div>
+          </div>
 
           <div
             className="col-span-8 px-6 py-8"

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 />
+
+              <div className="grid">
+                <BirthDateA />
                 <ContactD />
+              </div>
 
               {layout[0] &&
                 layout[0].map((x) => {

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/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);