feat: slot-ify FAQSection

packages/visual-editor/src/components/categories/PageSectionCategory.tsx

@@ -32,7 +32,10 @@ import {
   PhotoGallerySection,
   PhotoGallerySectionProps,
 } from "../pageSections/PhotoGallerySection.tsx";
-import { FAQSection, FAQSectionProps } from "../pageSections/FAQsSection.tsx";
+import {
+  FAQSection,
+  FAQSectionProps,
+} from "../pageSections/FAQsSection/FAQsSection.tsx";
 import {
   ReviewsSection,
   ReviewsSectionProps,

packages/visual-editor/src/components/categories/SlotsCategory.tsx

@@ -51,6 +51,11 @@ import {
   InsightCard,
   InsightCardProps,
 } from "../pageSections/InsightSection/InsightCard.tsx";
+import {
+  FAQsWrapperSlot,
+  FAQsWrapperSlotProps,
+} from "../pageSections/FAQsSection/FAQsWrapperSlot.tsx";
+import { FAQSlot, FAQSlotProps } from "../pageSections/FAQsSection/FAQSlot.tsx";
 import {
   TeamCardsWrapper,
   TeamCardsWrapperProps,
@@ -67,6 +72,8 @@ export interface SlotsCategoryProps {
   EmailsSlot: EmailsProps;
   EventCard: EventCardProps;
   EventCardsWrapper: EventCardsWrapperProps;
+  FAQsWrapperSlot: FAQsWrapperSlotProps;
+  FAQSlot: FAQSlotProps;
   HeadingTextSlot: HeadingTextProps;
   HeroImageSlot: HeroImageProps;
   HoursStatusSlot: HoursStatusProps;
@@ -99,6 +106,8 @@ export const SlotsCategoryComponents = {
   EmailsSlot: { ...Emails, permissions: lockedPermissions },
   EventCard: { ...EventCard, permissions: lockedPermissions },
   EventCardsWrapper: { ...EventCardsWrapper, permissions: lockedPermissions },
+  FAQsWrapperSlot: { ...FAQsWrapperSlot, permissions: lockedPermissions },
+  FAQSlot: { ...FAQSlot, permissions: lockedPermissions },
   HeadingTextSlot: { ...HeadingText, permissions: lockedPermissions },
   HeroImageSlot: { ...HeroImage, permissions: lockedPermissions },
   HoursStatusSlot: { ...HoursStatus, permissions: lockedPermissions },

packages/visual-editor/src/components/migrations/0032_slotify_faq_section.ts

@@ -0,0 +1,134 @@
+import { Migration } from "../../utils/migrate.ts";
+import { resolveYextEntityField } from "../../utils/resolveYextEntityField.ts";
+import { YextEntityField } from "../../editor/YextEntityFieldSelector.tsx";
+import { WithId } from "@measured/puck";
+import { BodyTextProps } from "../index.ts";
+import { FAQSectionType } from "../../types/types.ts";
+import { FAQSlotProps } from "../pageSections/FAQsSection/FAQSlot.tsx";
+import { FAQsWrapperSlotProps } from "../pageSections/FAQsSection/FAQsWrapperSlot.tsx";
+
+export const faqsSectionSlots: Migration = {
+  FAQSection: {
+    action: "updated",
+    propTransformation: (props, streamDocument) => {
+      const headingText = props.data.heading ?? {
+        constantValue: {
+          en: "Frequently Asked Questions",
+          hasLocalizedValue: "true",
+        },
+        constantValueEnabled: true,
+        field: "",
+      };
+      const headingStyles = {
+        level: props.styles?.heading?.level ?? 2,
+        align: props.styles?.heading?.align ?? "left",
+      };
+
+      const constantValueEnabled: boolean = props.data.constantValueEnabled;
+      const faqs = resolveYextEntityField(
+        streamDocument,
+        props.data.faqs as YextEntityField<FAQSectionType>,
+        streamDocument?.locale
+      )?.faqs;
+
+      const cards =
+        faqs?.map((faq, i) => {
+          return {
+            type: "FAQSlot",
+            props: {
+              id: "FAQSlot-migrated-" + i,
+              slots: {
+                QuestionSlot: [
+                  {
+                    type: "BodyTextSlot",
+                    props: {
+                      data: {
+                        text: {
+                          field: "",
+                          constantValue: faq.question ?? "",
+                          constantValueEnabled: true,
+                        },
+                      },
+                      styles: { variant: "base" },
+                      parentData: constantValueEnabled
+                        ? undefined
+                        : {
+                            field: props.data.field,
+                            richText: faq.question,
+                          },
+                    } satisfies BodyTextProps,
+                  },
+                ],
+                AnswerSlot: [
+                  {
+                    type: "BodyTextSlot",
+                    props: {
+                      data: {
+                        text: {
+                          field: "",
+                          constantValueEnabled: true,
+                          constantValue: faq.answer ?? "",
+                        },
+                      },
+                      styles: { variant: "base" },
+                      parentData: constantValueEnabled
+                        ? undefined
+                        : {
+                            field: props.data.field,
+                            richText: faq.answer,
+                          },
+                    } satisfies BodyTextProps,
+                  },
+                ],
+              },
+              parentData: constantValueEnabled
+                ? undefined
+                : {
+                    field: props.data.field,
+                    faq,
+                  },
+            } satisfies WithId<FAQSlotProps>,
+          };
+        }) || [];
+
+      return {
+        id: props.id,
+        analytics: props.analytics,
+        liveVisibility: props.liveVisibility,
+        styles: {
+          backgroundColor: props.styles.backgroundColor,
+        },
+        slots: {
+          HeadingSlot: [
+            {
+              type: "HeadingTextSlot",
+              props: {
+                data: {
+                  text: headingText,
+                },
+                styles: headingStyles,
+              },
+            },
+          ],
+          FAQsWrapperSlot: [
+            {
+              type: "FAQsWrapperSlot",
+              props: {
+                data: {
+                  field: props.data.faqs.field,
+                  constantValueEnabled: props.data.faqs.constantValueEnabled,
+                  constantValue: cards.map((c) => ({
+                    id: c.props.id,
+                  })),
+                },
+                slots: {
+                  CardSlot: cards,
+                },
+              } satisfies FAQsWrapperSlotProps,
+            },
+          ],
+        },
+      };
+    },
+  },
+};

packages/visual-editor/src/components/migrations/migrationRegistry.ts

@@ -29,6 +29,7 @@ import { promoSectionSlots } from "./0027_promo_section_slots.ts";
 import { heroSectionSlots } from "./0028_slotify_hero_section.ts";
 import { productSectionSlots } from "./0029_product_section_slots.ts";
 import { insightSectionSlots } from "./0030_insight_section_slots.ts";
+import { faqsSectionSlots } from "./0032_slotify_faq_section.ts";
 import { teamsSectionSlots } from "./0031_teams_section_slots.ts";
 
 // To add a migration:
@@ -68,4 +69,5 @@ export const migrationRegistry: MigrationRegistry = [
   productSectionSlots,
   insightSectionSlots,
   teamsSectionSlots,
+  faqsSectionSlots,
 ];