Merged in chore/cleanup-scandic-web (pull request #2831)
chore: Cleanup scandic-web * Remove unused files * Remove unused and add missing packages * Remove unused exports Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
@@ -2,7 +2,7 @@ import { mapRewardToIcon } from "./data"
|
||||
|
||||
import type { LogoAndIllustrationProps } from "@scandic-hotels/design-system/Icons"
|
||||
|
||||
export interface RewardIconProps extends LogoAndIllustrationProps {
|
||||
interface RewardIconProps extends LogoAndIllustrationProps {
|
||||
rewardId: string
|
||||
iconSize?: "small" | "medium" | "large"
|
||||
}
|
||||
|
||||
@@ -119,4 +119,3 @@ Carousel.Previous = CarouselPrevious
|
||||
Carousel.Dots = CarouselDots
|
||||
|
||||
export { Carousel }
|
||||
export type { CarouselApi }
|
||||
|
||||
@@ -13,7 +13,7 @@ export const usePageType = () => {
|
||||
return context
|
||||
}
|
||||
|
||||
export type PageTypeProviderProps = {
|
||||
type PageTypeProviderProps = {
|
||||
value: "city" | "country" | "overview" | null
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -21,7 +21,7 @@ export async function getConferenceRoomTexts(
|
||||
return { seatingText, roomText }
|
||||
}
|
||||
|
||||
export async function getRoomText(roomSizes: number[]) {
|
||||
async function getRoomText(roomSizes: number[]) {
|
||||
const largestRoom = Math.max(...roomSizes)
|
||||
const smallestRoom = Math.min(...roomSizes)
|
||||
const intl = await getIntl()
|
||||
@@ -47,7 +47,7 @@ export async function getRoomText(roomSizes: number[]) {
|
||||
return roomText
|
||||
}
|
||||
|
||||
export async function getSeatingText(roomSeating: number[]) {
|
||||
async function getSeatingText(roomSeating: number[]) {
|
||||
const biggestSeating = Math.max(...roomSeating)
|
||||
const smallestSeating = Math.min(...roomSeating)
|
||||
const intl = await getIntl()
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import { nodesToHtml } from "./utils"
|
||||
|
||||
import styles from "./jsontohtml.module.css"
|
||||
|
||||
import type { DeprecatedJsonToHtmlProps } from "@/types/components/deprecatedjsontohtml"
|
||||
|
||||
export default function DeprecatedJsonToHtml({
|
||||
embeds,
|
||||
nodes,
|
||||
renderOptions = {},
|
||||
}: DeprecatedJsonToHtmlProps) {
|
||||
if (!Array.isArray(nodes) || !nodes.length) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<section className={styles.container}>
|
||||
{nodesToHtml(nodes, embeds, renderOptions).filter(Boolean)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
.image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 365px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
margin: var(--Spacing-x1) var(--Spacing-x0);
|
||||
}
|
||||
|
||||
.ul,
|
||||
.ol {
|
||||
padding: var(--Spacing-x2) var(--Spacing-x0);
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.ol > li::marker {
|
||||
color: var(--Primary-Light-On-Surface-Accent);
|
||||
}
|
||||
|
||||
.li:has(.heart),
|
||||
.li:has(.check) {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.li {
|
||||
margin-left: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.li:has(.heart):before {
|
||||
content: url("/_static/icons/heart.svg");
|
||||
position: relative;
|
||||
height: 8px;
|
||||
top: 3px;
|
||||
margin-right: var(--Spacing-x1);
|
||||
margin-left: calc(var(--Spacing-x3) * -1);
|
||||
}
|
||||
|
||||
.li:has(.check)::before {
|
||||
content: url("/_static/icons/check-ring.svg");
|
||||
position: relative;
|
||||
height: 8px;
|
||||
top: 3px;
|
||||
margin-right: var(--Spacing-x1);
|
||||
margin-left: calc(var(--Spacing-x3) * -1);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
max-width: 1197px;
|
||||
}
|
||||
|
||||
.li > p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.ol:has(li:nth-last-child(n + 5)),
|
||||
.ul:has(li:nth-last-child(n + 5)) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
}
|
||||
@@ -1,687 +0,0 @@
|
||||
import {
|
||||
type DeprecatedImageVaultAssetResponse,
|
||||
type ImageVaultAssetResponse,
|
||||
mapImageVaultAssetResponseToImageVaultAsset,
|
||||
mapInsertResponseToImageVaultAsset,
|
||||
} from "@scandic-hotels/common/utils/imageVault"
|
||||
import { removeMultipleSlashes } from "@scandic-hotels/common/utils/url"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import Footnote from "@scandic-hotels/design-system/Footnote"
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
|
||||
import Link from "@scandic-hotels/design-system/Link"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import Table from "@scandic-hotels/design-system/Table"
|
||||
import Title from "@scandic-hotels/design-system/Title"
|
||||
import {
|
||||
AvailableParagraphFormatEnum,
|
||||
RTEItemTypeEnum,
|
||||
RTETypeEnum,
|
||||
} from "@scandic-hotels/trpc/types/RTEenums"
|
||||
|
||||
import BiroScript from "../TempDesignSystem/Text/BiroScript"
|
||||
import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
|
||||
|
||||
import styles from "./jsontohtml.module.css"
|
||||
|
||||
import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml"
|
||||
import { EmbedEnum } from "@/types/requests/utils/embeds"
|
||||
import type { Attributes } from "@/types/rte/attrs"
|
||||
import {
|
||||
type RTEDefaultNode,
|
||||
type RTEImageNode,
|
||||
RTEMarkType,
|
||||
type RTENext,
|
||||
type RTENode,
|
||||
type RTERegularNode,
|
||||
type RTETextNode,
|
||||
} from "@/types/rte/node"
|
||||
import type { RenderOptions } from "@/types/rte/option"
|
||||
|
||||
function extractPossibleAttributes(attrs: Attributes | undefined) {
|
||||
if (!attrs) return {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const props: Record<string, any> = {}
|
||||
if (attrs.id) {
|
||||
props.id = attrs.id
|
||||
}
|
||||
|
||||
if (attrs.class) {
|
||||
props.className = attrs.class
|
||||
} else if (attrs["class-name"]) {
|
||||
props.className = attrs["class-name"]
|
||||
} else if (attrs.classname) {
|
||||
props.className = attrs.classname
|
||||
} else if (attrs?.style?.["text-align"]) {
|
||||
props.style = {
|
||||
textAlign: attrs?.style?.["text-align"],
|
||||
}
|
||||
}
|
||||
|
||||
return props
|
||||
}
|
||||
|
||||
export const renderOptions: RenderOptions = {
|
||||
[RTETypeEnum.a]: (
|
||||
node: RTERegularNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
if (node.attrs.url) {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Link
|
||||
{...props}
|
||||
href={node.attrs.url}
|
||||
key={node.uid}
|
||||
target={node.attrs.target ?? "_blank"}
|
||||
textDecoration="underline"
|
||||
>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
return null
|
||||
},
|
||||
|
||||
[RTETypeEnum.blockquote]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<BiroScript key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</BiroScript>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.code]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<code key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.embed]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
if (node.attrs.src) {
|
||||
props.src = node.attrs.src
|
||||
}
|
||||
if (node.attrs.url) {
|
||||
props.src = node.attrs.url
|
||||
}
|
||||
if (!props.src) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<iframe key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</iframe>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.h1]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Title key={node.uid} {...props} level="h1">
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Title>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.h2]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Title key={node.uid} {...props} level="h2">
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Title>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.h3]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Title key={node.uid} {...props} level="h3">
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Title>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.h4]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Title key={node.uid} {...props} level="h4">
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Title>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.h5]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Title key={node.uid} {...props} level="h5">
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Title>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.hr]: () => {
|
||||
return <Divider color="burgundy" />
|
||||
},
|
||||
|
||||
[RTETypeEnum.li]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<li key={node.uid} {...props} className={styles.li}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</li>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.ol]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
|
||||
// Set the number of rows dynamically to create even rows for each column. We want the li:s
|
||||
// to flow with the column, so therefore this is needed.
|
||||
let numberOfRows: number | undefined
|
||||
if (node.children.length > 4) {
|
||||
const half = node.children.length / 2
|
||||
numberOfRows = Math.ceil(half)
|
||||
}
|
||||
|
||||
return (
|
||||
<ol
|
||||
key={node.uid}
|
||||
{...props}
|
||||
className={styles.ol}
|
||||
style={
|
||||
numberOfRows
|
||||
? { gridTemplateRows: `repeat(${numberOfRows}, auto)` }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</ol>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.p]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
|
||||
const hasFormat = node.children.some((item) =>
|
||||
hasAvailableParagraphFormat((item as RTETextNode)?.classname)
|
||||
)
|
||||
|
||||
// If a child node has an available format as className, we wrap it in a
|
||||
// span and render the children with the correct component
|
||||
if (hasFormat) {
|
||||
return next(node.children, embeds, fullRenderOptions)
|
||||
}
|
||||
|
||||
return (
|
||||
<Body {...props} key={node.uid}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Body>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.reference]: (
|
||||
node: RTENode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
if ("attrs" in node) {
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
} else if (type === RTEItemTypeEnum.entry) {
|
||||
const entry = embeds?.[node?.attrs?.["entry-uid"]]
|
||||
|
||||
if (entry?.node.__typename === EmbedEnum.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
|
||||
) {
|
||||
// If entry is not an ImageContainer, it is a page and we return it as a link
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
let href = ""
|
||||
if (entry?.node.__typename === EmbedEnum.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
|
||||
{...props}
|
||||
href={href}
|
||||
key={node.uid}
|
||||
textDecoration="underline"
|
||||
>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
[RTETypeEnum.ImageVault]: (node: RTEImageNode) => {
|
||||
const type = node.type
|
||||
if (!("attrs" in node) || type !== RTETypeEnum.ImageVault) {
|
||||
return null
|
||||
}
|
||||
|
||||
let image = undefined
|
||||
if ("imageVaultId" in node.attrs && "fileName" in node.attrs) {
|
||||
image = mapImageVaultAssetResponseToImageVaultAsset(
|
||||
node.attrs as unknown as ImageVaultAssetResponse
|
||||
)
|
||||
}
|
||||
|
||||
if ("Name" in node.attrs && "Id" in node.attrs) {
|
||||
image = mapInsertResponseToImageVaultAsset(
|
||||
node.attrs as unknown as DeprecatedImageVaultAssetResponse
|
||||
)
|
||||
}
|
||||
|
||||
if (!image) {
|
||||
return null
|
||||
}
|
||||
const alt = image.meta.alt ?? image.title
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
|
||||
return (
|
||||
<section key={node.uid}>
|
||||
<Image
|
||||
alt={alt}
|
||||
className={styles.image}
|
||||
fill
|
||||
sizes="(min-width: 1367px) 800px, (max-width: 1366px) and (min-width: 1200px) 1200px, 100vw"
|
||||
src={image.url}
|
||||
focalPoint={image.focalPoint}
|
||||
dimensions={image.dimensions}
|
||||
{...props}
|
||||
/>
|
||||
<Caption>{image.meta.caption}</Caption>
|
||||
</section>
|
||||
)
|
||||
|
||||
return null
|
||||
},
|
||||
|
||||
[RTETypeEnum.table]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<div className={styles.tableContainer}>
|
||||
<Table key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.thead]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
// Override the styling of p tags inside the thead tag
|
||||
const theadChildPRenderOptions = {
|
||||
...fullRenderOptions,
|
||||
[RTETypeEnum.p]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => (
|
||||
<Body color={"burgundy"} textTransform={"bold"}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Body>
|
||||
),
|
||||
}
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Table.THead key={node.uid} {...props}>
|
||||
{next(node.children, embeds, theadChildPRenderOptions)}
|
||||
</Table.THead>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.tbody]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Table.TBody key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Table.TBody>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.tfoot]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<tfoot key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</tfoot>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.fragment]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
return <>{next(node.children, embeds, fullRenderOptions)}</>
|
||||
},
|
||||
|
||||
[RTETypeEnum.tr]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Table.TR key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Table.TR>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.th]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Table.TH key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Table.TH>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.td]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
return (
|
||||
<Table.TD key={node.uid} {...props}>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</Table.TD>
|
||||
)
|
||||
},
|
||||
|
||||
[RTETypeEnum.ul]: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
const props = extractPossibleAttributes(node.attrs)
|
||||
|
||||
// Set the number of rows dynamically to create even rows for each column. We want the li:s
|
||||
// to flow with the column, so therefore this is needed.
|
||||
let numberOfRows: number | undefined
|
||||
if (node.children.length > 4) {
|
||||
const half = node.children.length / 2
|
||||
numberOfRows = Math.ceil(half)
|
||||
}
|
||||
|
||||
return (
|
||||
<ul
|
||||
key={node.uid}
|
||||
{...props}
|
||||
className={styles.ul}
|
||||
style={
|
||||
numberOfRows
|
||||
? {
|
||||
gridTemplateRows: `repeat(${numberOfRows}, auto)`,
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{next(node.children, embeds, fullRenderOptions)}
|
||||
</ul>
|
||||
)
|
||||
},
|
||||
|
||||
/** TextNode wrappers */
|
||||
[RTEMarkType.bold]: (children: React.ReactNode) => {
|
||||
return <strong>{children}</strong>
|
||||
},
|
||||
|
||||
[RTEMarkType.italic]: (children: React.ReactNode) => {
|
||||
return <em>{children}</em>
|
||||
},
|
||||
|
||||
[RTEMarkType.underline]: (children: React.ReactNode) => {
|
||||
return <u>{children}</u>
|
||||
},
|
||||
|
||||
[RTEMarkType.strikethrough]: (children: React.ReactNode) => {
|
||||
return <s>{children}</s>
|
||||
},
|
||||
|
||||
[RTEMarkType.inlineCode]: (children: React.ReactNode) => {
|
||||
return <span>{children}</span>
|
||||
},
|
||||
|
||||
[RTEMarkType.subscript]: (children: React.ReactNode) => {
|
||||
return <sub>{children}</sub>
|
||||
},
|
||||
|
||||
[RTEMarkType.superscript]: (children: React.ReactNode) => {
|
||||
return <sup>{children}</sup>
|
||||
},
|
||||
|
||||
[RTEMarkType.break]: (children: React.ReactNode) => {
|
||||
return (
|
||||
<>
|
||||
<br />
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
},
|
||||
|
||||
[RTEMarkType.classnameOrId]: (
|
||||
children: React.ReactNode,
|
||||
className?: string,
|
||||
id?: string
|
||||
) => {
|
||||
const props = {
|
||||
className,
|
||||
id,
|
||||
}
|
||||
if (!className) {
|
||||
delete props.className
|
||||
}
|
||||
if (!id) {
|
||||
delete props.id
|
||||
}
|
||||
|
||||
if (className) {
|
||||
if (hasAvailableULFormat(className)) {
|
||||
props.className = styles[className]
|
||||
}
|
||||
}
|
||||
|
||||
if (className === AvailableParagraphFormatEnum.footnote) {
|
||||
return (
|
||||
<Footnote key={id} {...props}>
|
||||
{children}
|
||||
</Footnote>
|
||||
)
|
||||
}
|
||||
|
||||
if (className === AvailableParagraphFormatEnum.caption) {
|
||||
return (
|
||||
<Caption key={id} {...props}>
|
||||
{children}
|
||||
</Caption>
|
||||
)
|
||||
}
|
||||
|
||||
if (className === AvailableParagraphFormatEnum["script-1"]) {
|
||||
return (
|
||||
<BiroScript key={id} type="one" {...props}>
|
||||
{children}
|
||||
</BiroScript>
|
||||
)
|
||||
}
|
||||
|
||||
if (className === AvailableParagraphFormatEnum["script-2"]) {
|
||||
return (
|
||||
<BiroScript key={id} type="two" {...props}>
|
||||
{children}
|
||||
</BiroScript>
|
||||
)
|
||||
}
|
||||
|
||||
if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
|
||||
return (
|
||||
<Subtitle key={id} {...props} type="one">
|
||||
{children}
|
||||
</Subtitle>
|
||||
)
|
||||
}
|
||||
if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
|
||||
return (
|
||||
<Subtitle key={id} {...props} type="two">
|
||||
{children}
|
||||
</Subtitle>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<span key={id} {...props}>
|
||||
{children}
|
||||
</span>
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Contentstack can return something called `default` as seen here in their
|
||||
* own SDK (https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/options/default-node-options.ts#L89)
|
||||
*/
|
||||
default: (
|
||||
node: RTEDefaultNode,
|
||||
embeds: EmbedByUid,
|
||||
next: RTENext,
|
||||
fullRenderOptions: RenderOptions
|
||||
) => {
|
||||
return next(node.children, embeds, fullRenderOptions)
|
||||
},
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
import { cloneElement } from "react"
|
||||
|
||||
import {
|
||||
AvailableParagraphFormatEnum,
|
||||
AvailableULFormatEnum,
|
||||
RTETypeEnum,
|
||||
} from "@scandic-hotels/trpc/types/RTEenums"
|
||||
|
||||
import { renderOptions } from "./renderOptions"
|
||||
|
||||
import type { Node } from "@scandic-hotels/trpc/types/edges"
|
||||
|
||||
import type { EmbedByUid } from "@/types/components/deprecatedjsontohtml"
|
||||
import type { Embeds } from "@/types/requests/embeds"
|
||||
import {
|
||||
RTEMarkType,
|
||||
type RTENode,
|
||||
type RTERenderMark,
|
||||
type RTERenderOptionComponent,
|
||||
type RTETextNode,
|
||||
} from "@/types/rte/node"
|
||||
import type { RenderOptions } from "@/types/rte/option"
|
||||
|
||||
export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
|
||||
const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
|
||||
if (embed.node.system?.uid) {
|
||||
acc[embed.node.system.uid] = embed
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return embedsByUid
|
||||
}
|
||||
|
||||
export function nodeChildrenToHtml(
|
||||
nodes: RTENode[],
|
||||
embeds: EmbedByUid,
|
||||
fullRenderOptions: RenderOptions
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
): any {
|
||||
return nodes
|
||||
.map((node, i) => {
|
||||
// This function either returns a JSX element or null
|
||||
const element = nodeToHtml(node, embeds, fullRenderOptions)
|
||||
if (!element) {
|
||||
return null
|
||||
}
|
||||
|
||||
return cloneElement(element, {
|
||||
key: `child-rte-${i}`,
|
||||
})
|
||||
})
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
export function textNodeToHtml(
|
||||
node: RTETextNode,
|
||||
fullRenderOptions: RenderOptions
|
||||
) {
|
||||
let text = <>{node.text}</>
|
||||
|
||||
if (node.classname || node.id) {
|
||||
text = (fullRenderOptions[RTEMarkType.classnameOrId] as RTERenderMark)(
|
||||
text,
|
||||
node.classname,
|
||||
node.id
|
||||
)
|
||||
}
|
||||
if (node.break) {
|
||||
text = (fullRenderOptions[RTEMarkType.break] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.superscript) {
|
||||
text = (fullRenderOptions[RTEMarkType.superscript] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.subscript) {
|
||||
text = (fullRenderOptions[RTEMarkType.subscript] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.inlineCode) {
|
||||
text = (fullRenderOptions[RTEMarkType.inlineCode] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.strikethrough) {
|
||||
text = (fullRenderOptions[RTEMarkType.strikethrough] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.underline) {
|
||||
text = (fullRenderOptions[RTEMarkType.underline] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.italic) {
|
||||
text = (fullRenderOptions[RTEMarkType.italic] as RTERenderMark)(text)
|
||||
}
|
||||
if (node.bold) {
|
||||
text = (fullRenderOptions[RTEMarkType.bold] as RTERenderMark)(text)
|
||||
}
|
||||
return text
|
||||
}
|
||||
|
||||
function next(
|
||||
nodes: RTENode[],
|
||||
embeds: EmbedByUid,
|
||||
fullRenderOptions: RenderOptions
|
||||
) {
|
||||
return nodeChildrenToHtml(nodes, embeds, fullRenderOptions)
|
||||
}
|
||||
|
||||
export function hasAvailableParagraphFormat(className?: string) {
|
||||
if (!className) {
|
||||
return false
|
||||
}
|
||||
return Object.keys(AvailableParagraphFormatEnum).includes(className)
|
||||
}
|
||||
|
||||
export function hasAvailableULFormat(className?: string) {
|
||||
if (!className) {
|
||||
return false
|
||||
}
|
||||
return Object.keys(AvailableULFormatEnum).includes(className)
|
||||
}
|
||||
|
||||
export function nodeToHtml(
|
||||
node: RTENode,
|
||||
embeds: EmbedByUid,
|
||||
fullRenderOptions: RenderOptions
|
||||
) {
|
||||
if ("type" in node === false) {
|
||||
return textNodeToHtml(node, fullRenderOptions)
|
||||
} else {
|
||||
if (fullRenderOptions[node.type] !== undefined) {
|
||||
if (node.type === RTETypeEnum.doc) {
|
||||
return null
|
||||
}
|
||||
return (fullRenderOptions[node.type] as RTERenderOptionComponent)(
|
||||
node,
|
||||
embeds,
|
||||
next,
|
||||
fullRenderOptions
|
||||
)
|
||||
} else {
|
||||
return next(node.children, embeds, fullRenderOptions)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function nodesToHtml(
|
||||
nodes: RTENode[],
|
||||
embedsArray: Node<Embeds>[],
|
||||
overrideRenderOptions: RenderOptions
|
||||
) {
|
||||
const embeds = groupEmbedsByUid(embedsArray)
|
||||
const fullRenderOptions = { ...renderOptions, ...overrideRenderOptions }
|
||||
return nodes.map((node) => nodeToHtml(node, embeds, fullRenderOptions))
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
import { clearPaymentInfoSessionStorage } from "@scandic-hotels/booking-flow/components/EnterDetails/Payment/helpers"
|
||||
import { useSearchHistory } from "@scandic-hotels/booking-flow/hooks/useSearchHistory"
|
||||
import { useBookingConfirmationStore } from "@scandic-hotels/booking-flow/stores/booking-confirmation"
|
||||
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
|
||||
import { getTracking } from "./tracking"
|
||||
|
||||
import type { Room } from "@scandic-hotels/booking-flow/types/stores/booking-confirmation"
|
||||
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
|
||||
|
||||
export default function Tracking({
|
||||
bookingConfirmation,
|
||||
refId,
|
||||
}: {
|
||||
bookingConfirmation: BookingConfirmation
|
||||
refId: string
|
||||
}) {
|
||||
const lang = useLang()
|
||||
const bookingRooms = useBookingConfirmationStore((state) => state.rooms)
|
||||
|
||||
const [loadedBookingConfirmationRefId] = useState(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
return sessionStorage.getItem("loadedBookingConfirmationRefId")
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
sessionStorage.setItem("loadedBookingConfirmationRefId", refId)
|
||||
}, [refId])
|
||||
|
||||
const searchHistory = useSearchHistory()
|
||||
const searchTerm = searchHistory.searchHistory[0]?.name
|
||||
|
||||
let trackingData = null
|
||||
|
||||
if (bookingRooms.every(Boolean)) {
|
||||
const rooms = bookingRooms.filter((room): room is Room => !!room)
|
||||
trackingData = getTracking(
|
||||
lang,
|
||||
bookingConfirmation.booking,
|
||||
bookingConfirmation.hotel,
|
||||
rooms,
|
||||
searchTerm
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (trackingData?.paymentInfo) {
|
||||
clearPaymentInfoSessionStorage()
|
||||
}
|
||||
}, [trackingData])
|
||||
|
||||
if (!trackingData) {
|
||||
return null
|
||||
}
|
||||
|
||||
const { hotelsTrackingData, pageTrackingData, paymentInfo, ancillaries } =
|
||||
trackingData
|
||||
|
||||
return (
|
||||
<TrackingSDK
|
||||
pageData={pageTrackingData}
|
||||
hotelInfo={
|
||||
loadedBookingConfirmationRefId === refId
|
||||
? undefined
|
||||
: hotelsTrackingData
|
||||
}
|
||||
paymentInfo={
|
||||
loadedBookingConfirmationRefId === refId ? undefined : paymentInfo
|
||||
}
|
||||
ancillaries={
|
||||
loadedBookingConfirmationRefId === refId ? undefined : ancillaries
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-213
@@ -1,213 +0,0 @@
|
||||
import { createHash } from "crypto"
|
||||
import { differenceInCalendarDays, format, isWeekend } from "date-fns"
|
||||
|
||||
import { readPaymentInfoFromSessionStorage } from "@scandic-hotels/booking-flow/components/EnterDetails/Payment/helpers"
|
||||
import { invertedBedTypeMap } from "@scandic-hotels/booking-flow/utils/SelectRate"
|
||||
import { getSpecialRoomType } from "@scandic-hotels/booking-flow/utils/specialRoomType"
|
||||
import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
|
||||
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
|
||||
import { RateEnum } from "@scandic-hotels/common/constants/rate"
|
||||
import {
|
||||
TrackingChannelEnum,
|
||||
type TrackingSDKAncillaries,
|
||||
type TrackingSDKHotelInfo,
|
||||
type TrackingSDKPageData,
|
||||
type TrackingSDKPaymentInfo,
|
||||
} from "@scandic-hotels/tracking/types"
|
||||
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
|
||||
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
|
||||
|
||||
import type { Room } from "@scandic-hotels/booking-flow/types/stores/booking-confirmation"
|
||||
import type { Lang } from "@scandic-hotels/common/constants/language"
|
||||
import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
|
||||
import type { RateDefinition } from "@scandic-hotels/trpc/types/roomAvailability"
|
||||
|
||||
function getRate(cancellationRule: RateDefinition["cancellationRule"] | null) {
|
||||
switch (cancellationRule) {
|
||||
case "CancellableBefore6PM":
|
||||
return RateEnum.flex
|
||||
case "Changeable":
|
||||
return RateEnum.change
|
||||
case "NotCancellable":
|
||||
return RateEnum.save
|
||||
default:
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
function mapAncillaryPackage(
|
||||
ancillaryPackage: BookingConfirmation["booking"]["packages"][number],
|
||||
operaId: string
|
||||
) {
|
||||
const isPoints = ancillaryPackage.currency === CurrencyEnum.POINTS
|
||||
return {
|
||||
hotelid: operaId,
|
||||
productCategory: "", // TODO: Add category
|
||||
productId: ancillaryPackage.code,
|
||||
productName: ancillaryPackage.description,
|
||||
productPoints: isPoints ? ancillaryPackage.totalPrice : 0,
|
||||
productPrice: isPoints ? 0 : ancillaryPackage.totalPrice,
|
||||
productType:
|
||||
ancillaryPackage.code === BreakfastPackageEnum.REGULAR_BREAKFAST
|
||||
? "food"
|
||||
: "room preference",
|
||||
productUnits: ancillaryPackage.totalUnit,
|
||||
productDeliveryTime: "",
|
||||
}
|
||||
}
|
||||
|
||||
export function getTracking(
|
||||
lang: Lang,
|
||||
booking: BookingConfirmation["booking"],
|
||||
hotel: BookingConfirmation["hotel"],
|
||||
rooms: Room[],
|
||||
searchTerm?: string
|
||||
) {
|
||||
const arrivalDate = new Date(booking.checkInDate)
|
||||
const departureDate = new Date(booking.checkOutDate)
|
||||
const paymentInfoSessionData = readPaymentInfoFromSessionStorage()
|
||||
|
||||
const pageTrackingData: TrackingSDKPageData = {
|
||||
channel: TrackingChannelEnum.hotelreservation,
|
||||
domainLanguage: lang,
|
||||
pageId: "booking-confirmation",
|
||||
pageName: `hotelreservation|confirmation`,
|
||||
pageType: "confirmation",
|
||||
siteSections: `hotelreservation|confirmation`,
|
||||
siteVersion: "new-web",
|
||||
}
|
||||
|
||||
const noOfAdults = rooms.map((r) => r.adults).join(",")
|
||||
const noOfChildren = rooms.map((r) => r.childrenAges?.length ?? 0).join(",")
|
||||
const noOfRooms = rooms.length
|
||||
const isFlexBooking =
|
||||
booking.rateDefinition.cancellationRule ===
|
||||
CancellationRuleEnum.CancellableBefore6PM
|
||||
const isGuaranteedFlexBooking = booking.guaranteeInfo && isFlexBooking
|
||||
|
||||
const ancillaries: TrackingSDKAncillaries = rooms
|
||||
.flatMap((r) => r.packages)
|
||||
.filter(
|
||||
(p) =>
|
||||
p.code === RoomPackageCodeEnum.PET_ROOM ||
|
||||
p.code === BreakfastPackageEnum.REGULAR_BREAKFAST
|
||||
)
|
||||
.map((pkg) => mapAncillaryPackage(pkg, hotel.operaId))
|
||||
|
||||
const hotelsTrackingData: TrackingSDKHotelInfo = {
|
||||
ageOfChildren: rooms.map((r) => r.childrenAges?.join(",") ?? "").join("|"),
|
||||
analyticsRateCode: rooms
|
||||
.map((r) => getRate(r.rateDefinition.cancellationRule))
|
||||
.join("|"),
|
||||
arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
|
||||
bedType: rooms
|
||||
.map((r) => r.bedType)
|
||||
.join(",")
|
||||
.toLowerCase(),
|
||||
bnr: rooms.map((r) => r.confirmationNumber).join(","),
|
||||
bookingCode: rooms.map((room) => room.bookingCode ?? "n/a").join(", "),
|
||||
bookingCodeAvailability: booking.bookingCode
|
||||
? rooms.map((room) => (room.bookingCode ? "true" : "false")).join(", ")
|
||||
: undefined,
|
||||
bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
|
||||
breakfastOption: rooms
|
||||
.map((r) => {
|
||||
if (r.breakfastIncluded || r.breakfast) {
|
||||
return "breakfast buffet"
|
||||
}
|
||||
return "no breakfast"
|
||||
})
|
||||
.join(","),
|
||||
childBedPreference: rooms
|
||||
.map(
|
||||
(r) =>
|
||||
r.childBedPreferences
|
||||
.map((cbp) =>
|
||||
Array(cbp.quantity).fill(invertedBedTypeMap[cbp.bedType])
|
||||
)
|
||||
.join(",") ?? ""
|
||||
)
|
||||
.join("|"),
|
||||
country: hotel?.address.country,
|
||||
departureDate: format(departureDate, "yyyy-MM-dd"),
|
||||
duration: differenceInCalendarDays(departureDate, arrivalDate),
|
||||
hotelID: hotel.operaId,
|
||||
leadTime: differenceInCalendarDays(arrivalDate, new Date()),
|
||||
noOfAdults,
|
||||
noOfChildren,
|
||||
noOfRooms,
|
||||
rateCode: rooms.map((r) => r.rateDefinition.rateCode).join(","),
|
||||
rateCodeCancellationRule: rooms
|
||||
.map((r) => r.rateDefinition.cancellationRule)
|
||||
.join(",")
|
||||
.toLowerCase(),
|
||||
rateCodeName: rooms.map(constructRateCodeName).join(","),
|
||||
rateCodeType: rooms.map((r) => r.rateCodeType?.toLowerCase()).join(","),
|
||||
region: hotel?.address.city,
|
||||
revenueCurrencyCode: [...new Set(rooms.map((r) => r.currencyCode))].join(
|
||||
","
|
||||
),
|
||||
rewardNight: booking.roomPoints > 0 ? "yes" : "no",
|
||||
rewardNightAvailability: booking.roomPoints > 0 ? "true" : "false",
|
||||
points: booking.roomPoints > 0 ? booking.roomPoints : undefined,
|
||||
roomPrice: rooms.reduce((total, room) => total + room.roomPrice, 0),
|
||||
roomTypeCode: rooms.map((r) => r.roomTypeCode ?? "").join(","),
|
||||
searchTerm,
|
||||
searchType: "hotel",
|
||||
specialRoomType: rooms
|
||||
.map((room) => getSpecialRoomType(room.packages))
|
||||
.join(","),
|
||||
totalPrice: rooms.reduce((total, room) => total + room.totalPrice, 0),
|
||||
lateArrivalGuarantee: booking.rateDefinition.mustBeGuaranteed
|
||||
? "mandatory"
|
||||
: isFlexBooking
|
||||
? booking.guaranteeInfo
|
||||
? "yes"
|
||||
: "no"
|
||||
: "na",
|
||||
guaranteedProduct: isGuaranteedFlexBooking ? "room" : "na",
|
||||
emailId: getSHAHash(booking.guest.email),
|
||||
mobileNumber: getSHAHash(booking.guest.phoneNumber),
|
||||
}
|
||||
|
||||
const paymentInfo: TrackingSDKPaymentInfo = {
|
||||
paymentStatus: isGuaranteedFlexBooking
|
||||
? "glacardsaveconfirmed"
|
||||
: "confirmed",
|
||||
type:
|
||||
booking.guaranteeInfo?.cardType ?? paymentInfoSessionData?.paymentMethod,
|
||||
}
|
||||
|
||||
return {
|
||||
hotelsTrackingData,
|
||||
pageTrackingData,
|
||||
paymentInfo,
|
||||
ancillaries,
|
||||
}
|
||||
}
|
||||
|
||||
function constructRateCodeName(room: Room) {
|
||||
if (room.cheques) {
|
||||
return "corporate cheque"
|
||||
} else if (room.vouchers) {
|
||||
return "voucher"
|
||||
} else if (room.roomPoints) {
|
||||
return "redemption"
|
||||
}
|
||||
|
||||
const rate = getRate(room.rateDefinition.cancellationRule)
|
||||
|
||||
const bookingCodeStr = room.bookingCode ? room.bookingCode.toUpperCase() : ""
|
||||
|
||||
const breakfastIncludedStr = room.breakfastIncluded
|
||||
? "incl. breakfast"
|
||||
: "excl. breakfast"
|
||||
|
||||
return [bookingCodeStr, rate, breakfastIncludedStr]
|
||||
.filter(Boolean)
|
||||
.join(" - ")
|
||||
}
|
||||
|
||||
function getSHAHash(key: string) {
|
||||
return createHash("sha256").update(key).digest("hex")
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
|
||||
|
||||
export function hasBreakfastPackageFromBookingFlow(
|
||||
function hasBreakfastPackageFromBookingFlow(
|
||||
packages: {
|
||||
code: string
|
||||
}[]
|
||||
@@ -13,26 +13,6 @@ export function hasBreakfastPackageFromBookingFlow(
|
||||
)
|
||||
}
|
||||
|
||||
export function getBreakfastPackagesFromBookingFlow<T extends { code: string }>(
|
||||
packages: T[]
|
||||
): T[] | undefined {
|
||||
// Since `FREE_CHILD_BREAKFAST` has the same code when breakfast is added
|
||||
// in the booking flow and as ancillary we can't just do a simple filter on the codes.
|
||||
// So we shortcircuit if there are no booking flow specific packages.
|
||||
if (!packages || !hasBreakfastPackageFromBookingFlow(packages)) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
return packages.filter(
|
||||
(p) =>
|
||||
p.code === BreakfastPackageEnum.REGULAR_BREAKFAST ||
|
||||
p.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST ||
|
||||
p.code === BreakfastPackageEnum.CHILD_PAYING_BREAKFAST ||
|
||||
p.code === BreakfastPackageEnum.FREE_CHILD_BREAKFAST ||
|
||||
p.code === BreakfastPackageEnum.SPECIAL_PACKAGE_BREAKFAST
|
||||
)
|
||||
}
|
||||
|
||||
export function getBreakfastPackagesFromAncillaryFlow<
|
||||
T extends { code: string },
|
||||
>(packages: T[]): T[] | undefined {
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
.avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.avatarInitialsText {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--Primary-Dark-Surface-Normal);
|
||||
color: var(--Primary-Dark-On-Surface-Text);
|
||||
font-size: var(--typography-Caption-Bold-fontSize);
|
||||
font-family: var(--typography-Body-Regular-fontFamily);
|
||||
font-weight: var(--typography-Caption-Bold-fontWeight);
|
||||
line-height: 150%;
|
||||
letter-spacing: 0.096px;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { getInitials } from "@/utils/user"
|
||||
|
||||
import styles from "./avatar.module.css"
|
||||
|
||||
import type { User } from "@scandic-hotels/trpc/types/user"
|
||||
|
||||
export default function Avatar({
|
||||
firstName,
|
||||
lastName,
|
||||
}: {
|
||||
firstName: User["firstName"]
|
||||
lastName: User["lastName"]
|
||||
}) {
|
||||
const initials = getInitials(firstName, lastName)
|
||||
return (
|
||||
<span className={styles.avatar}>
|
||||
<span data-hj-suppress className={styles.avatarInitialsText}>
|
||||
{initials}
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
+1
-1
@@ -10,7 +10,7 @@ import styles from "./progressSection.module.css"
|
||||
|
||||
import type { ProgressCalculation } from "../../types"
|
||||
|
||||
export interface ProgressSectionProps {
|
||||
interface ProgressSectionProps {
|
||||
earned: number
|
||||
progress: ProgressCalculation
|
||||
toKeepCurrent?: number
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./successCard.module.css"
|
||||
|
||||
export interface SuccessCardProps {
|
||||
interface SuccessCardProps {
|
||||
pointsEarned?: number | null
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import SectionLink from "../Link"
|
||||
|
||||
import styles from "./header.module.css"
|
||||
|
||||
export type HeaderProps = {
|
||||
type HeaderProps = {
|
||||
link?: {
|
||||
href: string
|
||||
text: string
|
||||
|
||||
@@ -40,7 +40,7 @@ type PartialHotelRoom = Pick<
|
||||
"descriptions" | "images" | "name" | "roomFacilities" | "roomTypes"
|
||||
>
|
||||
|
||||
export type Room = Pick<
|
||||
type Room = Pick<
|
||||
BookingConfirmationSchema,
|
||||
| "adults"
|
||||
| "bookingCode"
|
||||
|
||||
@@ -17,7 +17,7 @@ import { debounce } from "@scandic-hotels/common/utils/debounce"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { Arrow } from "../Popover/Arrow"
|
||||
import { Arrow } from "./Arrow"
|
||||
import { Breadcrumb } from "./Breadcrumb"
|
||||
import { splitBreadcrumbs } from "./utils"
|
||||
import { breadcrumbsVariants } from "./variants"
|
||||
|
||||
@@ -4,11 +4,11 @@ import type { TypenameInterface } from "@/types/requests/utils/typename"
|
||||
|
||||
export type Order = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
|
||||
|
||||
export type ColSpan = 2 | 3 | 4 | 6 | 8
|
||||
type ColSpan = 2 | 3 | 4 | 6 | 8
|
||||
export type RowSpan = 1 | 2 | 3 | 6
|
||||
|
||||
// TODO: Extend query and fix type accordingly
|
||||
export interface Row extends TypenameInterface<"Card"> {
|
||||
interface Row extends TypenameInterface<"Card"> {
|
||||
title: string
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ type Column = {
|
||||
}[]
|
||||
}
|
||||
|
||||
export interface Grid {
|
||||
interface Grid {
|
||||
columns: Column[]
|
||||
}
|
||||
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
OverlayArrow,
|
||||
Popover as RAPopover,
|
||||
} from "react-aria-components"
|
||||
|
||||
import useSetOverFlowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
|
||||
import { Arrow } from "./Arrow"
|
||||
|
||||
import styles from "./popover.module.css"
|
||||
|
||||
import type { PopoverProps } from "./popover"
|
||||
|
||||
export default function Popover({
|
||||
triggerContent,
|
||||
children,
|
||||
...props
|
||||
}: PopoverProps) {
|
||||
const setOverflowVisible = useSetOverFlowVisibleOnRA()
|
||||
|
||||
return (
|
||||
<DialogTrigger onOpenChange={setOverflowVisible}>
|
||||
<Button className={styles.trigger}>{triggerContent}</Button>
|
||||
|
||||
<RAPopover
|
||||
{...props}
|
||||
offset={16}
|
||||
crossOffset={-24}
|
||||
className={styles.root}
|
||||
>
|
||||
<OverlayArrow>
|
||||
<Arrow />
|
||||
</OverlayArrow>
|
||||
<Dialog>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<Button className={styles.closeButton} onPress={close}>
|
||||
<MaterialIcon icon="close" size={20} />
|
||||
</Button>
|
||||
{children}
|
||||
</>
|
||||
)}
|
||||
</Dialog>
|
||||
</RAPopover>
|
||||
</DialogTrigger>
|
||||
)
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
.root {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
box-shadow: var(--popup-box-shadow);
|
||||
padding: var(--Spacing-x2);
|
||||
max-width: calc(360px + var(--Spacing-x2) * 2);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.root section:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import type { PopoverProps as RAPopoverProps } from "react-aria-components"
|
||||
|
||||
export interface PopoverProps extends Omit<RAPopoverProps, "children"> {
|
||||
triggerContent: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import styles from "./progressbar.module.css"
|
||||
|
||||
import type { ProgressbarProps } from "./progressbar"
|
||||
|
||||
export default function ProgressBar({ className, progress }: ProgressbarProps) {
|
||||
className = className ?? ""
|
||||
return (
|
||||
<div className={`${className} ${styles.bar}`}>
|
||||
<div className={styles.progress} style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
.bar {
|
||||
background-color: var(--Main-Grey-White);
|
||||
border-radius: 40px;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--UI-Opacity-Almost-Black-100);
|
||||
border-radius: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export interface ProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
progress: number
|
||||
}
|
||||
Reference in New Issue
Block a user