scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-190): added imageVaultAsset schema

Browse Source
This commit is contained in:
Erik Tiekstra
2024-08-15 14:19:52 +02:00
parent 4f2bd0c2d6
commit 771338cc80
15 changed files with 164 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/ContentType/ContentPage/index.tsx
View File

@@ -16,7 +16,7 @@ export default async function ContentPage() {
}
const { tracking, contentPage } = contentPageRes
const heroImage = contentPage.hero_image
const heroImage = contentPage.heroImage
return (
<>

2
components/ContentType/LoyaltyPage/index.tsx
View File

@@ -19,7 +19,7 @@ export default async function LoyaltyPage() {
}
const { tracking, loyaltyPage } = loyaltyPageRes
const heroImage = loyaltyPage.hero_image
const heroImage = loyaltyPage.heroImage
return (
<>
<section className={styles.content}>

2
components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts
View File

@@ -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<HTMLDivElement>,

4
server/routers/contentstack/contentPage/output.ts
View File

@@ -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),

2
server/routers/contentstack/contentPage/query.ts
View File

@@ -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 = {

8
server/routers/contentstack/loyaltyPage/output.ts
View File

@@ -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[]
}

31
server/routers/contentstack/loyaltyPage/query.ts
View File

@@ -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,
}
}),

95
server/routers/contentstack/schemas/imageVault.ts Normal file
View File

@@ -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(),
})

2
types/components/imageContainer.ts
View File

@@ -1,4 +1,4 @@
import type { ImageVaultAsset } from "./imageVaultImage"
import type { ImageVaultAsset } from "./imageVault"
export type ImageContainerProps = {
leftImage: ImageVaultAsset

26
types/components/imageVault.ts Normal file
View File

@@ -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<typeof imageVaultAssetSchema>
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 }
}

115
types/components/imageVaultImage.ts
View File

@@ -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
}

6
types/requests/imageContainer.ts
View File

@@ -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
}

6
types/rte/attrs.ts
View File

@@ -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[]

4
types/trpc/routers/contentstack/contentPage.ts
View File

@@ -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<typeof validateContentPageSchema>
type ContentPageRaw = ContentPageDataRaw["content_page"]
export type ContentPage = Omit<ContentPageRaw, "hero_image"> & {
hero_image?: ImageVaultAsset
heroImage?: ImageVaultAsset
}

8
utils/imageVault.ts
View File

@@ -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
}