diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css new file mode 100644 index 000000000..9421503c6 --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/claimPoints.module.css @@ -0,0 +1,8 @@ +.claim { + color: var(--Text-Secondary); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--Space-x2); + white-space: nowrap; +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx new file mode 100644 index 000000000..5bc7d4db2 --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/ClaimPoints/index.tsx @@ -0,0 +1,40 @@ +"use client" + +import { useIntl } from "react-intl" + +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { missingPoints } from "@/constants/missingPointsHrefs" + +import ButtonLink from "@/components/ButtonLink" +import useLang from "@/hooks/useLang" + +import styles from "./claimPoints.module.css" + +export default function ClaimPoints() { + const intl = useIntl() + const lang = useLang() + + return ( +
+ +

+ {intl.formatMessage({ + defaultMessage: "Missing a previous stay?", + })} +

+
+ + {intl.formatMessage({ defaultMessage: "Claim points" })} + + +
+ ) +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css new file mode 100644 index 000000000..f2ed22bcc --- /dev/null +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/earnAndBurn.module.css @@ -0,0 +1,14 @@ +.header { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: var(--Space-x1); +} + +@media screen and (min-width: 1367px) { + .header { + align-items: center; + flex-direction: row; + gap: var(--Space-x6); + } +} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx index 28b92f18c..2405f053d 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx @@ -2,8 +2,11 @@ import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" +import ClaimPoints from "../ClaimPoints" import JourneyTable from "./JourneyTable" +import styles from "./earnAndBurn.module.css" + import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage" export default function EarnAndBurn({ @@ -13,7 +16,11 @@ export default function EarnAndBurn({ }: AccountPageComponentProps) { return ( - +
+ + + +
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx index 788bc2082..97febbfe6 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/index.tsx @@ -1,13 +1,9 @@ -import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import { Typography } from "@scandic-hotels/design-system/Typography" - import { serverClient } from "@/lib/trpc/server" -import ButtonLink from "@/components/ButtonLink" +import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints" import SectionContainer from "@/components/Section/Container" import SectionHeader from "@/components/Section/Header" import SectionLink from "@/components/Section/Link" -import { getIntl } from "@/i18n" import ClientPreviousStays from "./Client" @@ -19,7 +15,6 @@ export default async function PreviousStays({ title, link, }: AccountPageComponentProps) { - const intl = await getIntl() const caller = await serverClient() const initialPreviousStays = await caller.user.stays.previous({ limit: 6, @@ -33,25 +28,8 @@ export default async function PreviousStays({
-
- -

- {intl.formatMessage({ - defaultMessage: "Missing a previous stay?", - })} -

-
- - {intl.formatMessage({ defaultMessage: "Claim points" })} - - -
+ +
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css index c3f0dfc1f..f2ed22bcc 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/previous.module.css @@ -5,14 +5,6 @@ gap: var(--Space-x1); } -.claim { - color: var(--Text-Secondary); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--Space-x2); -} - @media screen and (min-width: 1367px) { .header { align-items: center; diff --git a/apps/scandic-web/constants/missingPointsHrefs.ts b/apps/scandic-web/constants/missingPointsHrefs.ts new file mode 100644 index 000000000..f07e94825 --- /dev/null +++ b/apps/scandic-web/constants/missingPointsHrefs.ts @@ -0,0 +1,10 @@ +import type { LangRoute } from "@/types/routes" + +export const missingPoints: LangRoute = { + da: "https://www.scandichotels.dk/form/manglende-point", + de: "https://www.scandichotels.de/formulare/fehlende-punkte", + fi: "https://www.scandichotels.fi/forms/puuttuvat-pisteet", + en: "https://www.scandichotels.com/forms/missing-points", + no: "https://www.scandichotels.no/form/manglende-poeng", + sv: "https://www.scandichotels.se/formular/saknade-poang", +}