fix(SW-1386): transform full width campaign data
This commit is contained in:
@@ -14,48 +14,44 @@ interface FullWidthCampaignProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
|
export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
|
||||||
return content.full_width_campaignConnection.edges.map(({ node }) => (
|
const { background_image, primary_button, secondary_button } = content
|
||||||
<div key={node.system.uid} className={styles.container}>
|
|
||||||
{node.background_image ? (
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
{background_image ? (
|
||||||
<Image
|
<Image
|
||||||
className={styles.image}
|
className={styles.image}
|
||||||
alt={
|
alt={background_image.meta.alt || background_image.meta.caption || ""}
|
||||||
node.background_image.meta.alt ||
|
src={background_image.url}
|
||||||
node.background_image.meta.caption ||
|
focalPoint={background_image.focalPoint}
|
||||||
""
|
|
||||||
}
|
|
||||||
src={node.background_image.url}
|
|
||||||
focalPoint={node.background_image.focalPoint}
|
|
||||||
width={1512}
|
width={1512}
|
||||||
height={880}
|
height={880}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<BiroScript color="baseText" type="two">
|
<BiroScript color="baseText" type="two">
|
||||||
{node.scripted_top_title}
|
{content.scripted_top_title}
|
||||||
</BiroScript>
|
</BiroScript>
|
||||||
<div className={styles.mainContent}>
|
<div className={styles.mainContent}>
|
||||||
<Title color="baseText" textAlign="center" level="h3">
|
<Title color="baseText" textAlign="center" level="h3">
|
||||||
{node.heading}
|
{content.heading}
|
||||||
</Title>
|
</Title>
|
||||||
<Preamble color="baseText" textAlign="center">
|
<Preamble color="baseText" textAlign="center">
|
||||||
{node.body_text}
|
{content.body_text}
|
||||||
</Preamble>
|
</Preamble>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
{node.has_primary_button ? (
|
{content.has_primary_button ? (
|
||||||
<Button intent="inverted" size="small" theme="base" asChild>
|
<Button intent="inverted" size="small" theme="base" asChild>
|
||||||
<Link
|
<Link
|
||||||
href={node.primary_button.href}
|
href={primary_button.href}
|
||||||
target={
|
target={primary_button.openInNewTab ? "_blank" : undefined}
|
||||||
node.primary_button.openInNewTab ? "_blank" : undefined
|
|
||||||
}
|
|
||||||
color="none"
|
color="none"
|
||||||
>
|
>
|
||||||
{node.primary_button.title}
|
{primary_button.title}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
{node.has_secondary_button ? (
|
{content.has_secondary_button ? (
|
||||||
<Button
|
<Button
|
||||||
intent="secondary"
|
intent="secondary"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -63,13 +59,11 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
|
|||||||
asChild
|
asChild
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href={node.secondary_button.href}
|
href={secondary_button.href}
|
||||||
target={
|
target={secondary_button.openInNewTab ? "_blank" : undefined}
|
||||||
node.secondary_button.openInNewTab ? "_blank" : undefined
|
|
||||||
}
|
|
||||||
color="none"
|
color="none"
|
||||||
>
|
>
|
||||||
{node.secondary_button.title}
|
{secondary_button.title}
|
||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
) : null}
|
||||||
@@ -77,5 +71,5 @@ export default function FullWidthCampaign({ content }: FullWidthCampaignProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,25 +9,29 @@ import { buttonSchema } from "./utils/buttonLinkSchema"
|
|||||||
import { BlocksEnums } from "@/types/enums/blocks"
|
import { BlocksEnums } from "@/types/enums/blocks"
|
||||||
|
|
||||||
export const fullWidthCampaignSchema = z.object({
|
export const fullWidthCampaignSchema = z.object({
|
||||||
full_width_campaign: z.object({
|
full_width_campaign: z
|
||||||
full_width_campaignConnection: z.object({
|
.object({
|
||||||
edges: z.array(
|
full_width_campaignConnection: z.object({
|
||||||
z.object({
|
edges: z.array(
|
||||||
node: z.object({
|
z.object({
|
||||||
background_image: tempImageVaultAssetSchema,
|
node: z.object({
|
||||||
heading: z.string().optional(),
|
background_image: tempImageVaultAssetSchema,
|
||||||
body_text: z.string().optional(),
|
heading: z.string().optional(),
|
||||||
scripted_top_title: z.string().optional(),
|
body_text: z.string().optional(),
|
||||||
has_primary_button: z.boolean().default(false),
|
scripted_top_title: z.string().optional(),
|
||||||
primary_button: buttonSchema,
|
has_primary_button: z.boolean().default(false),
|
||||||
has_secondary_button: z.boolean().default(false),
|
primary_button: buttonSchema,
|
||||||
secondary_button: buttonSchema,
|
has_secondary_button: z.boolean().default(false),
|
||||||
system: systemSchema,
|
secondary_button: buttonSchema,
|
||||||
}),
|
system: systemSchema,
|
||||||
})
|
}),
|
||||||
),
|
})
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.transform((data) => {
|
||||||
|
return data.full_width_campaignConnection.edges[0]?.node || null
|
||||||
}),
|
}),
|
||||||
}),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
export const fullWidthCampaignBlockSchema = z
|
export const fullWidthCampaignBlockSchema = z
|
||||||
|
|||||||
Reference in New Issue
Block a user