web/packages/design-system/lib/components/JsonToHtml/JsonToHtml.tsx

import { cx } from "class-variance-authority"

import { nodesToHtml } from "./utils"

import styles from "./jsontohtml.module.css"

import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
import { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
import { AlertSidepeekContent } from "../../types/sidepeekContent"
import { ContentBlockType } from "./types/rte/enums"
import type { RTENode } from "./types/rte/node"
import type { RenderOptions } from "./types/rte/option"

export type Node<T> = {
  node: T
}

export type Embeds =
  | {
      __typename: Exclude<ContentBlockType, "ImageContainer" | "Alert">
      system?: { uid: string } | null
      url?: string | null
      permanent_url?: string | null
      title?: string | null
    }
  | {
      __typename: "ImageContainer"
      system?: { uid: string } | null
      url?: string | null
      title?: string | null
      image_left?: ImageVaultAsset
      image_right?: ImageVaultAsset
    }
  | {
      __typename: "Alert"
      system?: { uid: string } | null
      type: AlertTypeEnum
      heading: string | null
      text: string
      phoneContact?: {
        displayText: string
        phoneNumber: string
        footnote?: string | null
      } | null
      sidepeekContent?: AlertSidepeekContent | null
      sidepeekCtaText?: string | null
      link?: {
        url: string
        title: string
        keepSearchParams?: boolean
      } | null
    }

export type EmbedByUid = Record<string, Node<Embeds>>

export type JsonToHtmlProps = {
  embeds: Node<Embeds>[]
  nodes: RTENode[]
  renderOptions?: RenderOptions
  className?: string
}

export function JsonToHtml({
  embeds,
  nodes,
  renderOptions = {},
  className,
}: JsonToHtmlProps) {
  if (!Array.isArray(nodes) || !nodes.length) {
    return null
  }

  return (
    <section className={cx(styles.container, className)}>
      {nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
    </section>
  )
}