From 9147821a164cdc72a64b133894ae20c7d61a986f Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Fri, 1 May 2026 12:40:16 +0700
Subject: [PATCH] fix: add optional chaining to all .map() calls in
 MarketingBlocks

The error "Cannot read properties of undefined (reading 'map')"
indicates some block fields are undefined. Added optional chaining
(?.) to all nested .map() calls for features, testimonials,
plans, and items arrays.

Also renamed prop from 'value' to 'blocks' and added check
for pageContent.length > 0.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/MarketingBlocks.astro | 16 ++++++++--------
 src/pages/index.astro                |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/MarketingBlocks.astro b/src/components/MarketingBlocks.astro
index 5a1dc5e..4a615fa 100644
--- a/src/components/MarketingBlocks.astro
+++ b/src/components/MarketingBlocks.astro
@@ -1,13 +1,13 @@
 ---
 interface Props {
-	value: any[];
+	blocks?: any[];
 }
 
-const { value } = Astro.props;
+const { blocks } = Astro.props;
 ---
 
 <div class="marketing-blocks">
-	{value.map((block: any) => {
+	{blocks?.map((block: any) => {
 		const type = block._type;
 		if (type === "marketing.hero") {
 			return (
@@ -38,7 +38,7 @@ const { value } = Astro.props;
 							{block.subheadline && <p class="section-subheadline">{block.subheadline}</p>}
 						</div>
 						<div class="features-grid">
-							{block.features?.map((feature: any) => (
+							{block.features?.map?.((feature: any) => (
 								<div class="feature-card">
 									<div class="feature-icon">
 										<span class="icon">{feature.icon}</span>
@@ -58,7 +58,7 @@ const { value } = Astro.props;
 					<div class="container">
 						<h2>{block.headline}</h2>
 						<div class="testimonials-grid">
-							{block.testimonials?.map((t: any) => (
+							{block.testimonials?.map?.((t: any) => (
 								<blockquote class="testimonial-card">
 									<p>"{t.quote}"</p>
 									<footer>
@@ -77,7 +77,7 @@ const { value } = Astro.props;
 				<section class="pricing-section" id="pricing">
 					<div class="container">
 						<div class="pricing-grid">
-							{block.plans?.map((plan: any) => (
+							{block.plans?.map?.((plan: any) => (
 								<div class={`pricing-card ${plan.highlighted ? "highlighted" : ""}`}>
 									{plan.highlighted && <span class="badge">Most popular</span>}
 									<h3>{plan.name}</h3>
@@ -87,7 +87,7 @@ const { value } = Astro.props;
 									</div>
 									{plan.description && <p class="description">{plan.description}</p>}
 									<ul class="features">
-										{plan.features?.map((f: string) => <li>{f}</li>)}
+										{plan.features?.map?.((f: string) => <li>{f}</li>)}
 									</ul>
 									<a href={plan.cta.url} class="btn btn-primary">{plan.cta.label}</a>
 								</div>
@@ -103,7 +103,7 @@ const { value } = Astro.props;
 					<div class="container">
 						<h2>{block.headline}</h2>
 						<div class="faq-list">
-							{block.items?.map((item: any) => (
+							{block.items?.map?.((item: any) => (
 								<div class="faq-item">
 									<h3>{item.question}</h3>
 									<p>{item.answer}</p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8fa822e..e2cdbc9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,7 +10,7 @@ const pageContent = page?.data.content;
 ---
 
 <Base title={pageTitle}>
-	{pageContent ? (
+	{pageContent && pageContent.length > 0 ? (
 		<MarketingBlocks blocks={pageContent} />
 	) : (
 		<div>