feat(WEB-205, WEB-206): get breadcrumbs for my pages from contentstack

components/MyPages/Breadcrumbs/index.tsx

@@ -15,16 +15,15 @@ export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
         {breadcrumbs.map((breadcrumb) => {
           if (breadcrumb.href) {
             return (
-              <BreadcrumbsWithLink
-                key={breadcrumb.title}
-                href={breadcrumb.href}
-              >
+              <BreadcrumbsWithLink key={breadcrumb.uid} href={breadcrumb.href}>
                 {breadcrumb.title}
               </BreadcrumbsWithLink>
             )
           }
 
-          return <Breadcrumb>{breadcrumb.title}</Breadcrumb>
+          return (
+            <Breadcrumb key={breadcrumb.uid}>{breadcrumb.title}</Breadcrumb>
+          )
         })}
       </ul>
     </nav>

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -43,11 +43,11 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <CalendarIcon />
         </Field.Icon>
-        <Field.Label htmlFor="dob">*{_("Date of Birth")}</Field.Label>
+        <Field.Label htmlFor="dateOfBirth">*{_("Date of Birth")}</Field.Label>
         <Field.Content>
           <DateSelect
             control={control}
-            name="dob"
+            name="dateOfBirth"
             registerOptions={{ required: true }}
           />
         </Field.Content>

components/MyProfile/Profile/Edit/Form/schema.ts

@@ -12,7 +12,7 @@ export const editProfileSchema = z.object({
   "address.zipCode": z
     .string({ required_error: _("Zip code is required") })
     .min(1, { message: _("Zip code is required") }),
-  dob: z
+  dateOfBirth: z
     .string({ required_error: _("Date of Birth is required") })
     .min(1, { message: _("Date of Birth is required") }),
   email: z.string().email(),

components/MyProfile/Profile/index.tsx

@@ -13,12 +13,14 @@ import Field from "../Field"
 import styles from "./profile.module.css"
 
 import { serverClient } from "@/lib/trpc/server"
+import { dt } from "@/lib/dt"
 
 export default async function Profile() {
   const user = await serverClient().user.get()
   const countryName = countries.find(
     (country) => country.code === user.address.country
   )
+  const dob = dt(user.dateOfBirth).format("DD/MM/YYYY")
   return (
     <Container user={user}>
       <section className={styles.info}>
@@ -32,8 +34,7 @@ export default async function Profile() {
             <CalendarIcon />
           </Field.Icon>
           <Field.TextLabel>{_("Date of Birth")}</Field.TextLabel>
-          {/* TODO: Get this from user when API team adds it to payload */}
-          <Field.Content>27/05/1977</Field.Content>
+          <Field.Content>{dob}</Field.Content>
         </Field>
         <Field>
           <Field.Icon>
@@ -61,7 +62,6 @@ export default async function Profile() {
             <HouseIcon />
           </Field.Icon>
           <Field.TextLabel>{_("City/State")}</Field.TextLabel>
-          {/* TODO: Get this from user when API team adds it to payload */}
           <Field.Content>{user.address.city || "-"}</Field.Content>
         </Field>
         <Field>