diff --git a/components/ContentType/ContentPage/index.tsx b/components/ContentType/ContentPage/index.tsx index 699e378df..f2387febc 100644 --- a/components/ContentType/ContentPage/index.tsx +++ b/components/ContentType/ContentPage/index.tsx @@ -16,7 +16,7 @@ export default async function ContentPage() { } const { tracking, contentPage } = contentPageRes - const heroImage = contentPage.hero_image + const heroImage = contentPage.heroImage return ( <> diff --git a/components/ContentType/LoyaltyPage/index.tsx b/components/ContentType/LoyaltyPage/index.tsx index 252fca097..c63f9d3e3 100644 --- a/components/ContentType/LoyaltyPage/index.tsx +++ b/components/ContentType/LoyaltyPage/index.tsx @@ -19,7 +19,7 @@ export default async function LoyaltyPage() { } const { tracking, loyaltyPage } = loyaltyPageRes - const heroImage = loyaltyPage.hero_image + const heroImage = loyaltyPage.heroImage return ( <>
diff --git a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts index 784d643ad..d5941ef5e 100644 --- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts +++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts @@ -2,7 +2,7 @@ import { loyaltyCardVariants } from "./variants" import type { VariantProps } from "class-variance-authority" -import { ImageVaultAsset } from "@/types/components/imageVaultImage" +import { ImageVaultAsset } from "@/types/components/imageVault" export interface LoyaltyCardProps extends React.HTMLAttributes, diff --git a/server/routers/contentstack/contentPage/output.ts b/server/routers/contentstack/contentPage/output.ts index beb592c81..134a179f1 100644 --- a/server/routers/contentstack/contentPage/output.ts +++ b/server/routers/contentstack/contentPage/output.ts @@ -2,6 +2,8 @@ import { z } from "zod" import { Lang } from "@/constants/languages" +import { imageVaultAssetSchema } from "../schemas/imageVault" + export const validateContentPageSchema = z.object({ content_page: z.object({ title: z.string(), @@ -9,7 +11,7 @@ export const validateContentPageSchema = z.object({ heading: z.string(), preamble: z.string(), }), - hero_image: z.any().nullable(), + hero_image: imageVaultAssetSchema.nullable().optional(), system: z.object({ uid: z.string(), locale: z.nativeEnum(Lang), diff --git a/server/routers/contentstack/contentPage/query.ts b/server/routers/contentstack/contentPage/query.ts index 3f2cb3501..b49582be3 100644 --- a/server/routers/contentstack/contentPage/query.ts +++ b/server/routers/contentstack/contentPage/query.ts @@ -45,7 +45,7 @@ export const contentPageQueryRouter = router({ const contentPageData = validatedContentPage.data.content_page const contentPage: ContentPage = { ...contentPageData, - hero_image: makeImageVaultImage(contentPageData.hero_image), + heroImage: makeImageVaultImage(contentPageData.hero_image), } const tracking: TrackingSDKPageData = { diff --git a/server/routers/contentstack/loyaltyPage/output.ts b/server/routers/contentstack/loyaltyPage/output.ts index f89796ad9..fb6d5e6cc 100644 --- a/server/routers/contentstack/loyaltyPage/output.ts +++ b/server/routers/contentstack/loyaltyPage/output.ts @@ -2,7 +2,9 @@ import { z } from "zod" import { Lang } from "@/constants/languages" -import { ImageVaultAsset } from "@/types/components/imageVaultImage" +import { imageVaultAssetSchema } from "../schemas/imageVault" + +import { ImageVaultAsset } from "@/types/components/imageVault" import { JoinLoyaltyContactTypenameEnum, LoyaltyBlocksTypenameEnum, @@ -192,7 +194,7 @@ const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [ export const validateLoyaltyPageSchema = z.object({ heading: z.string().nullable(), preamble: z.string().nullable(), - hero_image: z.any().nullable(), + hero_image: imageVaultAssetSchema.nullable().optional(), blocks: z.array(loyaltyPageBlockItem).nullable(), sidebar: z.array(loyaltyPageSidebarItem).nullable(), system: z.object({ @@ -264,7 +266,7 @@ export type LoyaltyPage = Omit< LoyaltyPageDataRaw, "blocks" | "sidebar" | "hero_image" > & { - hero_image?: ImageVaultAsset + heroImage?: ImageVaultAsset blocks: Block[] sidebar: Sidebar[] } diff --git a/server/routers/contentstack/loyaltyPage/query.ts b/server/routers/contentstack/loyaltyPage/query.ts index 6839f1ced..264455fd1 100644 --- a/server/routers/contentstack/loyaltyPage/query.ts +++ b/server/routers/contentstack/loyaltyPage/query.ts @@ -85,6 +85,18 @@ export const loyaltyPageQueryRouter = router({ throw notFound(response) } + const validatedLoyaltyPage = validateLoyaltyPageSchema.safeParse( + response.data.loyalty_page + ) + + if (!validatedLoyaltyPage.success) { + console.error( + `Failed to validate Loyaltypage Data - (lang: ${lang}, uid: ${uid})` + ) + console.error(validatedLoyaltyPage.error) + return null + } + const blocks = response.data.loyalty_page.blocks ? response.data.loyalty_page.blocks.map((block: any) => { switch (block.__typename) { @@ -178,26 +190,17 @@ export const loyaltyPageQueryRouter = router({ }) : null - const loyaltyPage = { + console.log({ HERO_IMAGE: response.data.loyalty_page.hero_image }) + + const loyaltyPage: LoyaltyPage = { heading: response.data.loyalty_page.heading, preamble: response.data.loyalty_page.preamble, - hero_image: makeImageVaultImage(response.data.loyalty_page.hero_image), + heroImage: makeImageVaultImage(response.data.loyalty_page.hero_image), system: response.data.loyalty_page.system, blocks, sidebar, } - const validatedLoyaltyPage = - validateLoyaltyPageSchema.safeParse(loyaltyPage) - - if (!validatedLoyaltyPage.success) { - console.error( - `Failed to validate Loyaltypage Data - (lang: ${lang}, uid: ${uid})` - ) - console.error(validatedLoyaltyPage.error) - return null - } - const loyaltyTrackingData: TrackingSDKPageData = { pageId: response.data.loyalty_page.system.uid, lang: response.data.loyalty_page.system.locale as Lang, @@ -209,7 +212,7 @@ export const loyaltyPageQueryRouter = router({ // Assert LoyaltyPage type to get correct typings for RTE fields return { - loyaltyPage: validatedLoyaltyPage.data as LoyaltyPage, + loyaltyPage, tracking: loyaltyTrackingData, } }), diff --git a/server/routers/contentstack/schemas/imageVault.ts b/server/routers/contentstack/schemas/imageVault.ts new file mode 100644 index 000000000..87d76c9b0 --- /dev/null +++ b/server/routers/contentstack/schemas/imageVault.ts @@ -0,0 +1,95 @@ +import { z } from "zod" + +const metaData = z.object({ + DefinitionType: z.number().nullable().optional(), + Description: z.string().nullable(), + LanguageId: z.number().nullable(), + MetadataDefinitionId: z.number(), + Name: z.string(), + Value: z.string().nullable(), +}) + +/** + * Defines a media asset, original or conversion + */ +const mediaConversion = z.object({ + /** + * Aspect ratio of the conversion + */ + AspectRatio: z.number(), + /** + * Content type of the conversion + */ + ContentType: z.string(), + /** + * Aspect ratio of the selected/requested format + */ + FormatAspectRatio: z.number(), + /** + * Height of the selected/requested format + */ + FormatHeight: z.number(), + /** + * Width of the selected/requested format + */ + FormatWidth: z.number(), + /** + * Height, in pixels, of the conversion + */ + Height: z.number(), + /** + * Html representing the conversion + */ + Html: z.string(), + /** + * Id of the selected media format + */ + MediaFormatId: z.number(), + /** + * Name of the media format + */ + MediaFormatName: z.string(), + /** + * Name of the conversion + */ + Name: z.string(), + /** + * The url to the conversion + */ + Url: z.string(), + /** + * Width, in pixels, of the conversion + */ + Width: z.number(), +}) + +/** + * The response from ImageVault when inserting an asset + */ +export const imageVaultAssetSchema = z.object({ + /** + * The media item id of the asset + */ + Id: z.number(), + /** + * The id of the vault where the asset resides + */ + VaultId: z.number(), + /** + * The name of the asset + */ + Name: z.string(), + /** + * The conversion selected by the user. Is an array but will only contain one object + */ + MediaConversions: z.array(mediaConversion), + Metadata: z.array(metaData), + /** + * Date when the asset was added to ImageVault + */ + DateAdded: z.string(), + /** + * Name of the user that added the asset to ImageVault + */ + AddedBy: z.string(), +}) diff --git a/types/components/imageContainer.ts b/types/components/imageContainer.ts index 6f8e75393..bd4ea2ab1 100644 --- a/types/components/imageContainer.ts +++ b/types/components/imageContainer.ts @@ -1,4 +1,4 @@ -import type { ImageVaultAsset } from "./imageVaultImage" +import type { ImageVaultAsset } from "./imageVault" export type ImageContainerProps = { leftImage: ImageVaultAsset diff --git a/types/components/imageVault.ts b/types/components/imageVault.ts new file mode 100644 index 000000000..ceae6e278 --- /dev/null +++ b/types/components/imageVault.ts @@ -0,0 +1,26 @@ +/** + * @file TypeScript typings for ImageVault + * + * The types in this file are based on the source maps of the downloaded + * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia + * + * They have been clean up and amended to. + */ + +import { z } from "zod" + +import { imageVaultAssetSchema } from "@/server/routers/contentstack/schemas/imageVault" + +export type ImageVaultAssetResponse = z.infer + +export type ImageVaultAsset = { + id: number + title: string + url: string + dimensions: { + width: number + height: number + aspectRatio: number + } + meta: { alt: string | undefined | null; caption: string | undefined | null } +} diff --git a/types/components/imageVaultImage.ts b/types/components/imageVaultImage.ts deleted file mode 100644 index c543d3243..000000000 --- a/types/components/imageVaultImage.ts +++ /dev/null @@ -1,115 +0,0 @@ -/** - * @file TypeScript typings for ImageVault - * - * The types in this file are based on the source maps of the downloaded - * distribution at https://clientscript.imagevault.se/Installation/ImageVaultInsertMedia - * - * They have been clean up and amended to. - */ - -export type MetaData = { - DefinitionType?: number - Description: string | null - LanguageId: null - MetadataDefinitionId: number - Name: string - Value: string -} - -export type ImageVaultAsset = { - id: number - title: string - url: string - dimensions: { - width: number - height: number - aspectRatio: number - } - meta: { alt: string | undefined; caption: string | undefined } -} - -/** - * The response from ImageVault when inserting an asset - */ -export declare class InsertResponse { - /** - * The media item id of the asset - */ - Id: number - /** - * The id of the vault where the asset resides - */ - VaultId: number - /** - * The name of the asset - */ - Name: string - /** - * The conversion selected by the user. Is an array but will only contain one object - */ - MediaConversions: MediaConversion[] - /** - * Date when the asset was added to ImageVault - */ - DateAdded: string - /** - * Name of the user that added the asset to ImageVault - */ - AddedBy: string - - Metadata?: MetaData[] | undefined -} - -/** - * Defines a media asset, original or conversion - */ -export declare class MediaConversion { - /** - * The url to the conversion - */ - Url: string - /** - * Name of the conversion - */ - Name: string - /** - * Html representing the conversion - */ - Html: string - /** - * Content type of the conversion - */ - ContentType: string - /** - * Width, in pixels, of the conversion - */ - Width: number - /** - * Height, in pixels, of the conversion - */ - Height: number - /** - * Aspect ratio of the conversion - */ - AspectRatio: number - /** - * Width of the selected/requested format - */ - FormatWidth: number - /** - * Height of the selected/requested format - */ - FormatHeight: number - /** - * Aspect ratio of the selected/requested format - */ - FormatAspectRatio: number - /** - * Name of the media format - */ - MediaFormatName: string - /** - * Id of the selected media format - */ - MediaFormatId: number -} diff --git a/types/requests/imageContainer.ts b/types/requests/imageContainer.ts index 3eb85023c..2a604b948 100644 --- a/types/requests/imageContainer.ts +++ b/types/requests/imageContainer.ts @@ -1,11 +1,11 @@ -import { InsertResponse } from "../components/imageVaultImage" +import { ImageVaultAssetResponse } from "../components/imageVault" import { EmbedEnum } from "./utils/embeds" import { Typename } from "./utils/typename" export type ImageContainer = Typename< { - image_left: InsertResponse - image_right: InsertResponse + image_left: ImageVaultAssetResponse + image_right: ImageVaultAssetResponse system: { uid: string } diff --git a/types/rte/attrs.ts b/types/rte/attrs.ts index dd658872d..b99cca8b0 100644 --- a/types/rte/attrs.ts +++ b/types/rte/attrs.ts @@ -1,4 +1,4 @@ -import { InsertResponse } from "../components/imageVaultImage" +import { ImageVaultAssetResponse } from "../components/imageVault" import { RTEItemTypeEnum } from "./enums" import type { Lang } from "@/constants/languages" @@ -39,7 +39,9 @@ export interface RTELinkAttrs extends Attributes { type: RTEItemTypeEnum.entry } -export interface RTEImageVaultAttrs extends Attributes, InsertResponse { +export interface RTEImageVaultAttrs + extends Attributes, + ImageVaultAssetResponse { height: string width: string style: string[] diff --git a/types/trpc/routers/contentstack/contentPage.ts b/types/trpc/routers/contentstack/contentPage.ts index eafdcc710..d5a8cc322 100644 --- a/types/trpc/routers/contentstack/contentPage.ts +++ b/types/trpc/routers/contentstack/contentPage.ts @@ -2,12 +2,12 @@ import { z } from "zod" import { validateContentPageSchema } from "@/server/routers/contentstack/contentPage/output" -import { ImageVaultAsset } from "@/types/components/imageVaultImage" +import { ImageVaultAsset } from "@/types/components/imageVault" export type ContentPageDataRaw = z.infer type ContentPageRaw = ContentPageDataRaw["content_page"] export type ContentPage = Omit & { - hero_image?: ImageVaultAsset + heroImage?: ImageVaultAsset } diff --git a/utils/imageVault.ts b/utils/imageVault.ts index 9e8a0a414..d0dc7d086 100644 --- a/utils/imageVault.ts +++ b/utils/imageVault.ts @@ -1,10 +1,10 @@ import { ImageVaultAsset, - InsertResponse, -} from "@/types/components/imageVaultImage" + ImageVaultAssetResponse, +} from "@/types/components/imageVault" export function insertResponseToImageVaultAsset( - response: InsertResponse + response: ImageVaultAssetResponse ): ImageVaultAsset { const alt = response.Metadata?.find((meta) => meta.Name.includes("AltText_") @@ -32,6 +32,6 @@ export function insertResponseToImageVaultAsset( export function makeImageVaultImage(image: any) { return image && !!Object.keys(image).length - ? insertResponseToImageVaultAsset(image as InsertResponse) + ? insertResponseToImageVaultAsset(image as ImageVaultAssetResponse) : undefined }