[Docs Site] Add check for plan-level info in ProductFeatures (#18774)

Author: KianNH

src/components/ProductFeatures.astro

@@ -38,7 +38,7 @@ const entries = Object.entries(plan);
 						<a href={value.link}>{value.title}</a>
 					</p>
 				)}
-				{Object.entries(value.properties).map(([_, value]: [string, any]) => (
+				{Object.values(value.properties).map((value: any) => (
 					<p>
 						<strong
 							set:html={marked.parseInline(
@@ -51,52 +51,78 @@ const entries = Object.entries(plan);
 							<p>{value.summary}</p>
 						)}
 						<ul>
-							<li>
-								<strong>Free: </strong>
-								<Fragment
-									set:html={marked.parseInline(value.free.toString())}
-								/>
-							</li>
+							{value.free && (
+								<li>
+									<strong>Free: </strong>
+									<Fragment
+										set:html={marked.parseInline(value.free.toString())}
+									/>
+								</li>
+							)}
 							{additional_descriptions && (
+								<>
+									{value.lite ||
+										(value.free && (
+											<li>
+												<strong>Lite: </strong>
+												{value.lite ? (
+													<Fragment
+														set:html={marked.parseInline(value.lite.toString())}
+													/>
+												) : (
+													<Fragment
+														set:html={marked.parseInline(value.free.toString())}
+													/>
+												)}
+											</li>
+										))}
+								</>
+							)}
+							{value.pro && (
 								<li>
-									<strong>Lite: </strong>
-									{value.lite ? (
-										<Fragment
-											set:html={marked.parseInline(value.lite.toString())}
-										/>
-									) : (
-										<Fragment
-											set:html={marked.parseInline(value.free.toString())}
-										/>
-									)}
+									<strong>Pro: </strong>
+									<Fragment
+										set:html={marked.parseInline(value.pro.toString())}
+									/>
 								</li>
 							)}
-							<li>
-								<strong>Pro: </strong>
-								<Fragment set:html={marked.parseInline(value.pro.toString())} />
-							</li>
 							{additional_descriptions && (
+								<>
+									{value.pro_plus ||
+										(value.pro && (
+											<li>
+												<strong>Pro Plus: </strong>
+												{value.pro_plus ? (
+													<Fragment
+														set:html={marked.parseInline(
+															value.pro_plus.toString(),
+														)}
+													/>
+												) : (
+													<Fragment
+														set:html={marked.parseInline(value.pro.toString())}
+													/>
+												)}
+											</li>
+										))}
+								</>
+							)}
+							{value.biz && (
+								<li>
+									<strong>Business: </strong>
+									<Fragment
+										set:html={marked.parseInline(value.biz.toString())}
+									/>
+								</li>
+							)}
+							{value.ent && (
 								<li>
-									<strong>Pro Plus: </strong>
-									{value.pro_plus ? (
-										<Fragment
-											set:html={marked.parseInline(value.pro_plus.toString())}
-										/>
-									) : (
-										<Fragment
-											set:html={marked.parseInline(value.pro.toString())}
-										/>
-									)}
+									<strong>Enterprise: </strong>
+									<Fragment
+										set:html={marked.parseInline(value.ent.toString())}
+									/>
 								</li>
 							)}
-							<li>
-								<strong>Business: </strong>
-								<Fragment set:html={marked.parseInline(value.biz.toString())} />
-							</li>
-							<li>
-								<strong>Enterprise: </strong>
-								<Fragment set:html={marked.parseInline(value.ent.toString())} />
-							</li>
 						</ul>
 					</p>
 				))}