feat(SW-66, SW-348): search functionality and ui

components/JsonToHtml/index.tsx

@@ -2,7 +2,7 @@ import { nodesToHtml } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
-import type { JsonToHtmlProps } from "@/types/components/jsontohtml"
+import type { JsonToHtmlProps } from "@/types/transitionTypes/jsontohtml"
 
 export default function JsonToHtml({
   embeds,

components/JsonToHtml/renderOptions.tsx

@@ -1,6 +1,7 @@
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
+import { removeMultipleSlashes } from "@/utils/url"
 
 import ImageContainer from "../ImageContainer"
 import Divider from "../TempDesignSystem/Divider"
@@ -15,14 +16,17 @@ import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"
 
-import type { EmbedByUid } from "@/types/components/jsontohtml"
-import { EmbedEnum } from "@/types/requests/utils/embeds"
-import type { Attributes, RTEImageVaultAttrs } from "@/types/rte/attrs"
+import { ContentEnum } from "@/types/enums/content"
+import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
+import type {
+  Attributes,
+  RTEImageVaultAttrs,
+} from "@/types/transitionTypes/rte/attrs"
 import {
   AvailableParagraphFormatEnum,
   RTEItemTypeEnum,
   RTETypeEnum,
-} from "@/types/rte/enums"
+} from "@/types/transitionTypes/rte/enums"
 import type {
   RTEDefaultNode,
   RTEImageNode,
@@ -30,9 +34,9 @@ import type {
   RTENode,
   RTERegularNode,
   RTETextNode,
-} from "@/types/rte/node"
-import { RTEMarkType } from "@/types/rte/node"
-import type { RenderOptions } from "@/types/rte/option"
+} from "@/types/transitionTypes/rte/node"
+import { RTEMarkType } from "@/types/transitionTypes/rte/node"
+import type { RenderOptions } from "@/types/transitionTypes/rte/option"
 
 function extractPossibleAttributes(attrs: Attributes | undefined) {
   if (!attrs) return {}
@@ -287,44 +291,55 @@ export const renderOptions: RenderOptions = {
       const type = node.attrs.type
       if (type === RTEItemTypeEnum.asset) {
         const image = embeds?.[node?.attrs?.["asset-uid"]]
-        if (image?.node.__typename === EmbedEnum.SysAsset) {
-          const alt = image?.node?.title ?? node.attrs.alt
-          const props = extractPossibleAttributes(node.attrs)
-          props.className = styles.image
-          return (
-            <Image
-              key={node.uid}
-              alt={alt}
-              height={image.node.dimension.height}
-              src={image?.node?.url}
-              width={image.node.dimension.width}
-              {...props}
-            />
-          )
+        if (image?.node.__typename === ContentEnum.blocks.SysAsset) {
+          if (image.node.url) {
+            const alt = image?.node?.title ?? node.attrs.alt
+            const props = extractPossibleAttributes(node.attrs)
+            props.className = styles.image
+            return (
+              <Image
+                key={node.uid}
+                alt={alt}
+                height={image.node.dimension.height}
+                src={image.node.url}
+                width={image.node.dimension.width}
+                {...props}
+              />
+            )
+          }
         }
       } else if (type === RTEItemTypeEnum.entry) {
         const entry = embeds?.[node?.attrs?.["entry-uid"]]
 
-        if (entry?.node.__typename === EmbedEnum.ImageContainer) {
-          const leftImage = insertResponseToImageVaultAsset(
-            entry.node.image_left
-          )
-          const rightImage = insertResponseToImageVaultAsset(
-            entry.node.image_right
-          )
-          return (
-            <ImageContainer leftImage={leftImage} rightImage={rightImage} />
-          )
+        if (entry?.node.__typename === ContentEnum.blocks.ImageContainer) {
+          if (entry.node.image_left && entry.node.image_right) {
+            return (
+              <ImageContainer
+                leftImage={entry.node.image_left}
+                rightImage={entry.node.image_right}
+              />
+            )
+          }
+          return null
         } else if (
-          entry?.node.__typename === EmbedEnum.LoyaltyPage ||
-          entry?.node.__typename === EmbedEnum.ContentPage ||
-          entry?.node.__typename === EmbedEnum.AccountPage
+          entry?.node.__typename === ContentEnum.blocks.LoyaltyPage ||
+          entry?.node.__typename === ContentEnum.blocks.ContentPage ||
+          entry?.node.__typename === ContentEnum.blocks.AccountPage
         ) {
           // If entry is not an ImageContainer, it is a page and we return it as a link
           const props = extractPossibleAttributes(node.attrs)
-          const href =
-            entry.node?.web?.original_url ||
-            `/${entry.node.system.locale}${entry.node.url}`
+          let href = ""
+          if (entry?.node.__typename === ContentEnum.blocks.AccountPage) {
+            href = removeMultipleSlashes(
+              `/${entry.node.system.locale}${entry.node.url}`
+            )
+          } else {
+            href =
+              entry.node?.web?.original_url ||
+              removeMultipleSlashes(
+                `/${entry.node.system.locale}${entry.node.url}`
+              )
+          }
 
           return (
             <Link
@@ -349,7 +364,12 @@ export const renderOptions: RenderOptions = {
       const type = node.type
       if (type === RTETypeEnum.ImageVault) {
         const attrs = node.attrs as RTEImageVaultAttrs
-        const image = insertResponseToImageVaultAsset(attrs)
+        let image = undefined
+        if ("dimensions" in attrs) {
+          image = attrs
+        } else {
+          image = insertResponseToImageVaultAsset(attrs)
+        }
         const alt = image.meta.alt ?? image.title
 
         const width = attrs.width

components/JsonToHtml/utils.tsx

@@ -1,20 +1,20 @@
 import { renderOptions } from "./renderOptions"
 
-import type { EmbedByUid } from "@/types/components/jsontohtml"
-import type { Embeds } from "@/types/requests/embeds"
 import type { Node } from "@/types/requests/utils/edges"
+import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import {
   AvailableParagraphFormatEnum,
   AvailableULFormatEnum,
   RTETypeEnum,
-} from "@/types/rte/enums"
+} from "@/types/transitionTypes/rte/enums"
 import type {
   RTENode,
   RTERenderOptionComponent,
   RTETextNode,
-} from "@/types/rte/node"
-import { RTEMarkType, RTERenderMark } from "@/types/rte/node"
-import type { RenderOptions } from "@/types/rte/option"
+} from "@/types/transitionTypes/rte/node"
+import { RTEMarkType, RTERenderMark } from "@/types/transitionTypes/rte/node"
+import type { RenderOptions } from "@/types/transitionTypes/rte/option"
+import type { Embeds } from "@/types/trpc/routers/utils/embeds"
 
 export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
   const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {