feat(LOY-284): add accordion support to account pages

apps/scandic-web/components/Blocks/Accordion/index.tsx

@@ -34,14 +34,16 @@ export default function AccordionSection({ accordion, title }: AccordionProps) {
         theme="light"
         variant="card"
       >
-        {accordion.map((acc) => (
-          <AccordionItem key={acc.question} title={acc.question}>
-            <JsonToHtml
-              embeds={acc.answer.embedded_itemsConnection.edges}
-              nodes={acc.answer.json.children}
-            />
-          </AccordionItem>
-        ))}
+        {accordion.map((acc) =>
+          acc ? (
+            <AccordionItem key={acc.question} title={acc.question}>
+              <JsonToHtml
+                embeds={acc.answer.embedded_itemsConnection.edges}
+                nodes={acc.answer.json.children}
+              />
+            </AccordionItem>
+          ) : null
+        )}
       </Accordion>
 
       {showToggleButton ? (

packages/trpc/lib/graphql/Fragments/Blocks/Accordion.graphql

@@ -80,6 +80,109 @@ fragment GlobalAccordionBlock on GlobalAccordion {
   }
 }
 
+fragment Accordion_AccountPage on AccountPageContentAccordion {
+  __typename
+  accordion {
+    title
+    accordions {
+      __typename
+      ...GlobalAccordion_AccountPage
+      ...SpecificAccordion_AccountPage
+    }
+  }
+}
+
+fragment GlobalAccordion_AccountPage on AccountPageContentAccordionBlockAccordionsGlobalAccordion {
+  __typename
+  global_accordion {
+    global_accordionConnection {
+      edges {
+        node {
+          ...AccordionBlock
+        }
+      }
+    }
+  }
+}
+
+fragment SpecificAccordion_AccountPage on AccountPageContentAccordionBlockAccordionsSpecificAccordion {
+  __typename
+  specific_accordion {
+    questions {
+      question
+      answer {
+        json
+        embedded_itemsConnection {
+          edges {
+            node {
+              __typename
+              ...SysAsset
+              ...AccountPageLink
+              ...CampaignPageLink
+              ...CollectionPageLink
+              ...ContentPageLink
+              ...DestinationCityPageLink
+              ...DestinationCountryPageLink
+              ...DestinationOverviewPageLink
+              ...HotelPageLink
+              ...LoyaltyPageLink
+              ...StartPageLink
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+fragment Accordion_AccountPageRefs on AccountPageContentAccordion {
+  accordion {
+    accordions {
+      __typename
+      ...GlobalAccordion_AccountPageRefs
+      ...SpecificAccordion_AccountPageRefs
+    }
+  }
+}
+
+fragment GlobalAccordion_AccountPageRefs on AccountPageContentAccordionBlockAccordionsGlobalAccordion {
+  global_accordion {
+    global_accordionConnection {
+      edges {
+        node {
+          ...AccordionBlockRefs
+        }
+      }
+    }
+  }
+}
+
+fragment SpecificAccordion_AccountPageRefs on AccountPageContentAccordionBlockAccordionsSpecificAccordion {
+  specific_accordion {
+    questions {
+      answer {
+        embedded_itemsConnection {
+          edges {
+            node {
+              __typename
+              ...AccountPageRef
+              ...CampaignPageRef
+              ...CollectionPageRef
+              ...ContentPageRef
+              ...DestinationCityPageRef
+              ...DestinationCountryPageRef
+              ...DestinationOverviewPageRef
+              ...HotelPageRef
+              ...LoyaltyPageRef
+              ...StartPageRef
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 fragment Accordion_ContentPage on ContentPageBlocksAccordion {
   __typename
   accordion {

packages/trpc/lib/graphql/Query/AccountPage/AccountPage.graphql

@@ -1,5 +1,6 @@
 #import "../../Fragments/System.graphql"
 
+#import "../../Fragments/Blocks/Accordion.graphql"
 #import "../../Fragments/Blocks/DynamicContent.graphql"
 #import "../../Fragments/Blocks/Shortcuts.graphql"
 #import "../../Fragments/Blocks/TextContent.graphql"
@@ -14,6 +15,7 @@ query GetAccountPage($locale: String!, $uid: String!) {
     url
     content {
       __typename
+      ...Accordion_AccountPage
       ...DynamicContent_AccountPage
       ...Shortcuts_AccountPage
       ...TextContent_AccountPage
@@ -33,6 +35,7 @@ query GetAccountPageRefs($locale: String!, $uid: String!) {
   account_page(locale: $locale, uid: $uid) {
     content {
       __typename
+      ...Accordion_AccountPageRefs
       ...DynamicContent_AccountPageRefs
       ...Shortcuts_AccountPageRefs
     }

packages/trpc/lib/routers/contentstack/accountPage/output.ts

@@ -2,6 +2,10 @@ import { z } from "zod"
 
 import { AccountPageEnum } from "../../../types/accountPageEnum"
 import { discriminatedUnionArray } from "../../../utils/discriminatedUnion"
+import {
+  accordionRefsSchema,
+  accordionSchema,
+} from "../schemas/blocks/accordion"
 import {
   dynamicContentRefsSchema,
   dynamicContentSchema,
@@ -14,6 +18,12 @@ import { textContentSchema } from "../schemas/blocks/textContent"
 import { tempImageVaultAssetSchema } from "../schemas/imageVault"
 import { systemSchema } from "../schemas/system"
 
+const accountPageAccordions = z
+  .object({
+    __typename: z.literal(AccountPageEnum.ContentStack.blocks.Accordion),
+  })
+  .merge(accordionSchema)
+
 const accountPageDynamicContent = z
   .object({
     __typename: z.literal(AccountPageEnum.ContentStack.blocks.DynamicContent),
@@ -33,6 +43,7 @@ const accountPageTextContent = z
   .merge(textContentSchema)
 
 export const blocksSchema = z.discriminatedUnion("__typename", [
+  accountPageAccordions,
   accountPageDynamicContent,
   accountPageShortcuts,
   accountPageTextContent,
@@ -62,6 +73,12 @@ export const accountPageSchema = z.object({
   }),
 })
 
+const accountPageAccordionRefs = z
+  .object({
+    __typename: z.literal(AccountPageEnum.ContentStack.blocks.Accordion),
+  })
+  .merge(accordionRefsSchema)
+
 const accountPageDynamicContentRefs = z
   .object({
     __typename: z.literal(AccountPageEnum.ContentStack.blocks.DynamicContent),
@@ -78,6 +95,7 @@ const accountPageContentItemRefs = z.discriminatedUnion("__typename", [
   z.object({
     __typename: z.literal(AccountPageEnum.ContentStack.blocks.TextContent),
   }),
+  accountPageAccordionRefs,
   accountPageDynamicContentRefs,
   accountPageShortcutsRefs,
 ])

packages/trpc/lib/routers/contentstack/schemas/blocks/accordion.ts

@@ -35,6 +35,8 @@ export const accordionItemsSchema = z.array(
 export type Accordion = z.infer<typeof accordionSchema>
 
 enum AccordionEnum {
+  AccountPageContentAccordionBlockAccordionsGlobalAccordion = "AccountPageContentAccordionBlockAccordionsGlobalAccordion",
+  AccountPageContentAccordionBlockAccordionsSpecificAccordion = "AccountPageContentAccordionBlockAccordionsSpecificAccordion",
   CampaignPageBlocksAccordionBlockAccordionsGlobalAccordion = "CampaignPageBlocksAccordionBlockAccordionsGlobalAccordion",
   CampaignPageBlocksAccordionBlockAccordionsSpecificAccordion = "CampaignPageBlocksAccordionBlockAccordionsSpecificAccordion",
   ContentPageBlocksAccordionBlockAccordionsGlobalAccordion = "ContentPageBlocksAccordionBlockAccordionsGlobalAccordion",
@@ -82,6 +84,7 @@ export const accordionSchema = z.object({
         ...data,
         accordions: data.accordions.flatMap((acc) => {
           switch (acc.__typename) {
+            case AccordionEnum.AccountPageContentAccordionBlockAccordionsGlobalAccordion:
             case AccordionEnum.CampaignPageBlocksAccordionBlockAccordionsGlobalAccordion:
             case AccordionEnum.ContentPageBlocksAccordionBlockAccordionsGlobalAccordion:
             case AccordionEnum.DestinationCityPageBlocksAccordionBlockAccordionsGlobalAccordion:
@@ -93,11 +96,14 @@ export const accordionSchema = z.object({
                   }
                 ) || []
               )
+            case AccordionEnum.AccountPageContentAccordionBlockAccordionsSpecificAccordion:
             case AccordionEnum.CampaignPageBlocksAccordionBlockAccordionsSpecificAccordion:
             case AccordionEnum.ContentPageBlocksAccordionBlockAccordionsSpecificAccordion:
             case AccordionEnum.DestinationCityPageBlocksAccordionBlockAccordionsSpecificAccordion:
             case AccordionEnum.DestinationCountryPageBlocksAccordionBlockAccordionsSpecificAccordion:
               return acc.specific_accordion?.questions || []
+            default:
+              return null
           }
         }),
       }

packages/trpc/lib/types/accountPageEnum.ts

@@ -1,6 +1,7 @@
 export namespace AccountPageEnum {
   export namespace ContentStack {
     export const enum blocks {
+      Accordion = "AccountPageContentAccordion",
       DynamicContent = "AccountPageContentDynamicContent",
       ShortCuts = "AccountPageContentShortcuts",
       TextContent = "AccountPageContentTextContent",