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

Merged in chore/SW-3381-move-loginbutton-to-ds- (pull request #2752)

Browse Source 
chore(SW-3381) Moved LoginButton to design system

* chore(SW-3381) Moved LoginButton to design system


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-09-03 09:11:28 +00:00
parent ca408bbbb5
commit 260a544c99
23 changed files with 165 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/scandic-web/components/Sidebar/JoinLoyalty/LoyaltyLoginButton.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useLang from "@/hooks/useLang"
import { useLazyPathname } from "@/hooks/useLazyPathname"
import { trackLoginClick } from "@/utils/tracking"
export function LoyaltyLoginButton() {
const intl = useIntl()
const lang = useLang()
const loginPathname = useLazyPathname()
return (
<LoginButton
lang={lang}
onClick={() => {
trackLoginClick("join scandic friends sidebar")
}}
pathName={loginPathname}
trackingId="loginJoinLoyalty"
>
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={20} />
<Typography variant={"Body/Paragraph/mdRegular"}>
<span>
{intl.formatMessage({
defaultMessage: "Log in here",
})}
</span>
</Typography>
</LoginButton>
)
}

66
apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx
View File

@@ -1,15 +1,12 @@
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Title from "@scandic-hotels/design-system/Title"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { ScandicFriends } from "@/components/Levels"
import LoginButton from "@/components/LoginButton"
import { getIntl } from "@/i18n"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
import Contact from "./Contact"
import { LoyaltyLoginButton } from "./LoyaltyLoginButton"
import ReadMore from "./ReadMore"
import styles from "./joinLoyalty.module.css"
@@ -28,50 +25,39 @@ export default async function JoinLoyaltyContact({
return (
<section className={styles.joinLoyaltyContainer}>
<article className={styles.wrapper}>
<Title as="h4" level="h3" textTransform="capitalize">
{block.title}
</Title>
{block.title ? (
<Typography variant={"Title/Subtitle/md"}>
<h4 className={styles.title}>{block.title}</h4>
</Typography>
) : null}
<ScandicFriends color="red" />
{block.preamble ? (
<Body className={styles.preamble}>{block.preamble}</Body>
<Typography variant={"Body/Paragraph/mdRegular"}>
<p className={styles.preamble}>{block.preamble}</p>
</Typography>
) : null}
{block.button ? (
<Button
asChild
intent="primary"
theme="base"
className={styles.button}
>
<Link
<Typography variant={"Body/Paragraph/mdBold"}>
<ButtonLink
className={styles.button}
size={"Small"}
wrapping
href={block.button.href}
color="white"
target={block.button.openInNewTab ? "_blank" : "_self"}
>
{block.button.title}
</Link>
</Button>
</ButtonLink>
</Typography>
) : null}
<section className={styles.loginContainer}>
<Body>
{intl.formatMessage({
defaultMessage: "Already a friend?",
})}
</Body>
<LoginButton
className={styles.link}
trackingId="loginJoinLoyalty"
position="join scandic friends sidebar"
>
<MaterialIcon
icon="arrow_forward"
color="CurrentColor"
className={styles.icon}
size={20}
/>
{intl.formatMessage({
defaultMessage: "Log in here",
})}
</LoginButton>
<Typography variant={"Body/Paragraph/mdRegular"}>
<p>
{intl.formatMessage({
defaultMessage: "Already a friend?",
})}
</p>
</Typography>
<LoyaltyLoginButton />
</section>
</article>
{block.contact ? <Contact contactBlock={block.contact} /> : null}