Merged in fix/cleanup-2 (pull request #261)

Bug fixes

Approved-by: Michael Zetterberg
This commit is contained in:
Christel Westerberg
2024-06-19 14:54:41 +00:00
committed by Michael Zetterberg
13 changed files with 46 additions and 43 deletions

View File

@@ -20,9 +20,6 @@ async function DynamicComponentBlock({ component }: DynamicComponentProps) {
const session = await auth()
const user = session ? await serverClient().user.get() : null
if (!user) {
return null
}
switch (component) {
case LoyaltyComponentEnum.how_it_works:

View File

@@ -4,7 +4,6 @@ import { serverClient } from "@/lib/trpc/server"
import SectionContainer from "@/components/Section/Container"
import Header from "@/components/Section/Header"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Grids from "@/components/TempDesignSystem/Grids"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"

View File

@@ -9,11 +9,13 @@
.header {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.levelLabel {
position: relative;
transform: rotate(-13deg) translate(0px, -15px);
margin-left: -35px;
}
.name {
@@ -39,17 +41,6 @@
padding: var(--Spacing-x1) var(--Spacing-x2);
}
.membershipId {
color: var(--Scandic-Brand-Pale-Peach);
/* TODO: Not yet exported by the design team, change to variable l8r */
font-family: var(--ff-fira-mono, "fira mono");
font-size: 14px;
font-weight: 400;
letter-spacing: 0.168px;
line-height: 140%;
margin: 0;
}
@media screen and (min-width: 768px) {
.membershipContainer {
grid-template-columns: auto auto;

View File

@@ -1,6 +1,7 @@
import { membershipLevels } from "@/constants/membershipLevels"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user"
@@ -35,12 +36,10 @@ export default async function Friend({ user }: UserProps) {
{user.name}
</Title>
<div className={styles.membershipContainer}>
<p className={styles.membershipId}>
{formatMessage({ id: "Membership ID" })}:
</p>
<p className={styles.membershipId}>
<Caption color="pale">
{formatMessage({ id: "Membership ID" })}:{" "}
{membership ? membership.membershipNumber : "N/A"}
</p>
</Caption>
</div>
</div>
</section>

View File

@@ -33,8 +33,15 @@ export default async function NextLevel({
}
return (
<section>
<Body color="pale">{formatMessage({ id: "Next level" })}:</Body>
<Title className={styles.nextLevel} color="pale" level="h3">
<Body color="pale" textAlign="center">
{formatMessage({ id: "Next level" })}:
</Body>
<Title
className={styles.nextLevel}
color="pale"
level="h3"
textAlign="center"
>
{nextLevel?.name || "N/A"}
<BiroScript>{formatMessage({ id: "Coming up" })}!</BiroScript>
</Title>

View File

@@ -8,6 +8,6 @@
.nextLevel {
gap: var(--Spacing-x1);
grid-template-columns: auto auto;
justify-content: flex-start;
justify-content: center;
}
}

View File

@@ -13,17 +13,19 @@ export default async function Points({ user }: UserProps) {
return (
<section className={styles.points}>
<article>
<Body color="pale">{formatMessage({ id: "Total Points" })}</Body>
<Title color="pale" level="h2">
<Body color="pale" textAlign="center">
{formatMessage({ id: "Total Points" })}
</Body>
<Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>
<article>
<Body color="pale">
<Body color="pale" textAlign="center">
{formatMessage({ id: "Points until next level" })}
{/* TODO */}
</Body>
<Title color="pale" level="h2">
<Title color="pale" level="h2" textAlign="center">
{membership ? membership.currentPoints : "N/A"}
</Title>
</article>

View File

@@ -12,7 +12,7 @@ export default function Stats({ user, lang }: UserProps & LangParams) {
return (
<section className={styles.stats}>
<Points user={user} />
<Divider variant="default" />
<Divider variant="default" color="peach" />
<NextLevel user={user} lang={lang} />
</section>
)

View File

@@ -27,7 +27,7 @@ export default async function Overview({
<Header link={link} subtitle={subtitle} title={title} topTitle />
<section className={styles.overview}>
<Friend user={user} />
<Divider className={styles.divider} />
<Divider className={styles.divider} color="peach" />
<Stats user={user} lang={lang} />
</section>
</SectionContainer>

View File

@@ -1,7 +1,7 @@
.stay {
background-color: var(--Main-Grey-White);
border: 1px solid var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-Small);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
display: grid;
overflow: hidden;
}

View File

@@ -8,7 +8,6 @@ import Grids from "@/components/TempDesignSystem/Grids"
import ListContainer from "../ListContainer"
import ShowMoreButton from "../ShowMoreButton"
import StayCard from "../StayCard"
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
import type {
UpcomingStaysClientProps,
@@ -61,7 +60,5 @@ export default function ClientUpcomingStays({
<ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
) : null}
</ListContainer>
) : (
<EmptyUpcomingStaysBlock />
)
) : null
}

View File

@@ -1,13 +1,17 @@
import { useIntl } from "react-intl"
import { homeHrefs } from "@/constants/homeHrefs"
import { env } from "@/env/server"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./emptyUpcomingStays.module.css"
export default function EmptyUpcomingStaysBlock() {
const { formatMessage } = useIntl()
import { LangParams } from "@/types/params"
export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
const { formatMessage } = await getIntl()
return (
<section className={styles.container}>
<Title as="h5" level="h3">
@@ -18,7 +22,9 @@ export default function EmptyUpcomingStaysBlock() {
</span>
</Title>
<Button asChild intent="primary" type="button">
<Link href="#">{formatMessage({ id: "Get inspired" })}</Link>
<Link href={homeHrefs[env.NODE_ENV][lang]}>
{formatMessage({ id: "Get inspired" })}
</Link>
</Button>
</section>
)

View File

@@ -4,6 +4,7 @@ import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import ClientUpcomingStays from "./Client"
import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -20,10 +21,14 @@ export default async function UpcomingStays({
return (
<SectionContainer>
<SectionHeader title={title} subtitle={subtitle} link={link} />
<ClientUpcomingStays
initialUpcomingStays={initialUpcomingStays}
lang={lang}
/>
{initialUpcomingStays.data.length ? (
<ClientUpcomingStays
initialUpcomingStays={initialUpcomingStays}
lang={lang}
/>
) : (
<EmptyUpcomingStaysBlock lang={lang} />
)}
</SectionContainer>
)
}