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

Merged in feat/SW-1711-switch-icons (pull request #1558)

Browse Source 
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
2025-03-27 09:42:52 +00:00
parent 93c7fe64bf
commit 5de2a993a7
524 changed files with 4442 additions and 6802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/ActionButtons/index.tsx
View File

@@ -3,15 +3,14 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import {
AncillaryStepEnum,
useAddAncillaryStore,
} from "@/stores/my-stay/add-ancillary-flow"
import { ChevronDownSmallIcon, ChevronUpSmallIcon } from "@/components/Icons"
import { type AncillaryFormData,quantitySchema } from "../../schema"
import { type AncillaryFormData, quantitySchema } from "../../schema"
import styles from "./actionButtons.module.css"
@@ -81,16 +80,16 @@ export default function ActionButtons({
>
{intl.formatMessage({ id: "Price details" })}
{isPriceDetailsOpen ? (
<ChevronUpSmallIcon
width={20}
height={20}
color="baseButtonTextOnFillNormal"
<MaterialIcon
icon="keyboard_arrow_up"
size={20}
color="Icon/Interactive/Accent"
/>
) : (
<ChevronDownSmallIcon
width={20}
height={20}
color="baseButtonTextOnFillNormal"
<MaterialIcon
icon="keyboard_arrow_down"
size={20}
color="Icon/Interactive/Accent"
/>
)}
</Button>

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/SelectQuantityStep/index.tsx
View File

@@ -1,11 +1,11 @@
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
import { DiamondIcon } from "@/components/Icons"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import Select from "@/components/TempDesignSystem/Form/Select"
@@ -63,7 +63,7 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
</Typography>
<div className={styles.totalPointsContainer}>
<div className={styles.totalPoints}>
<DiamondIcon />
<MaterialIcon icon="diamond" />
<Typography variant="Title/Overline/sm">
<h2>{intl.formatMessage({ id: "Total points" })}</h2>
</Typography>

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx
View File

@@ -1,9 +1,10 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { trpc } from "@/lib/trpc/client"
import Dialog from "@/components/Dialog"
import { DeleteIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -34,7 +35,7 @@ export default function RemoveButton({
titleText={`${intl.formatMessage({ id: "Remove" })} ${title}`}
trigger={
<Button intent="text" size="small" variant="icon" theme="base">
<DeleteIcon />
<MaterialIcon icon="delete" color="CurrentColor" />
{intl.formatMessage({ id: "Remove" })}
</Button>
}

19
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -1,7 +1,8 @@
import { useRouter } from "next/navigation"
import { useIntl } from "react-intl"
import { CheckCircleIcon, EditIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Button from "@/components/TempDesignSystem/Button"
@@ -48,7 +49,12 @@ export function AddedAncillaries({
<Accordion className={styles.ancillaryMobile}>
<AccordionItem
title={ancillaryTitle}
icon={<CheckCircleIcon color="uiSemanticSuccess" />}
icon={
<MaterialIcon
icon="check_circle"
color="Icon/Feedback/Success"
/>
}
>
<div>
{ancillary.comment && (
@@ -84,7 +90,7 @@ export function AddedAncillaries({
variant="icon"
theme="base"
>
<EditIcon />
<MaterialIcon icon="edit_square" color="CurrentColor" />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider
@@ -105,7 +111,10 @@ export function AddedAncillaries({
<div className={styles.ancillaryDesktop}>
<div className={styles.specification}>
<div className={styles.name}>
<CheckCircleIcon color="uiSemanticSuccess" />
<MaterialIcon
icon="check_circle"
color="Icon/Feedback/Success"
/>
<Body textTransform="bold">{ancillaryTitle}</Body>
<Body textTransform="bold">{`X${ancillary.totalUnit}`}</Body>
</div>
@@ -140,7 +149,7 @@ export function AddedAncillaries({
variant="icon"
theme="base"
>
<EditIcon />
<MaterialIcon icon="edit_square" color="CurrentColor" />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider

9
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/ViewAllAncillaries/index.tsx
View File

@@ -1,8 +1,9 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
export default function ViewAllAncillaries() {
@@ -17,11 +18,7 @@ export default function ViewAllAncillaries() {
onClick={openModal}
>
{intl.formatMessage({ id: "View all" })}
<ChevronRightSmallIcon
width={20}
height={20}
color="baseButtonTextOnFillNormal"
/>
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Button>
)
}

54
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
View File

@@ -2,19 +2,13 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CancellationRuleEnum } from "@/constants/booking"
import { dt } from "@/lib/dt"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import {
CheckCircleIcon,
DirectionsIcon,
EmailIcon,
LinkIcon,
} from "@/components/Icons"
import CrossCircleIcon from "@/components/Icons/CrossCircle"
import IconChip from "@/components/TempDesignSystem/IconChip"
import { Toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -81,8 +75,14 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
chip={
isCancelled ? (
<IconChip
color={"red"}
icon={<CrossCircleIcon width={20} height={20} color="red" />}
color="red"
icon={
<MaterialIcon
icon="cancel"
size={20}
color="Icon/Feedback/Error"
/>
}
>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -93,9 +93,17 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
color={isPaid ? "green" : "red"}
icon={
isPaid ? (
<CheckCircleIcon width={20} height={20} color="green" />
<MaterialIcon
icon="check_circle"
size={20}
color="Icon/Feedback/Success"
/>
) : (
<CrossCircleIcon width={20} height={20} color="red" />
<MaterialIcon
icon="cancel"
size={20}
color="Icon/Interactive/Accent"
/>
)
}
>
@@ -136,19 +144,37 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
{
href: directionsUrl,
text: intl.formatMessage({ id: "Directions" }),
icon: <DirectionsIcon width={20} height={20} color="burgundy" />,
icon: (
<MaterialIcon
icon="directions"
size={20}
color="Icon/Interactive/Default"
/>
),
onClick: () => trackMyStayPageLink("see on map"),
},
{
href: `mailto:${hotel.contactInformation.email}`,
text: intl.formatMessage({ id: "Email" }),
icon: <EmailIcon width={20} height={20} color="burgundy" />,
icon: (
<MaterialIcon
icon="mail"
size={20}
color="Icon/Interactive/Default"
/>
),
onClick: () => trackMyStayPageLink("email us"),
},
{
href: hotel.contactInformation.websiteUrl,
text: intl.formatMessage({ id: "Homepage" }),
icon: <LinkIcon width={20} height={20} color="burgundy" />,
icon: (
<MaterialIcon
icon="link"
size={20}
color="Icon/Interactive/Default"
/>
),
onClick: () => trackMyStayPageLink("hotel homepage"),
},
]}

16
apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx
View File

@@ -6,12 +6,12 @@ import { Dialog } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@/lib/trpc/client"
import { type Room } from "@/stores/my-stay/myStayRoomDetailsStore"
import { DiamondIcon, EditIcon } from "@/components/Icons"
import MembershipLevelIcon from "@/components/Levels/Icon"
import Modal from "@/components/Modal"
import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
@@ -140,7 +140,7 @@ export default function GuestDetails({
</div>
<div className={styles.totalPoints}>
<div className={styles.totalPointsText}>
<DiamondIcon color="uiTextHighContrast" />
<MaterialIcon icon="diamond" color="Icon/Intense" />
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Total points" })}</p>
@@ -197,7 +197,11 @@ export default function GuestDetails({
disabled={booking.isCancelled}
size="small"
>
<EditIcon color="burgundy" width={20} height={20} />
<MaterialIcon
icon="edit"
color="Icon/Interactive/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>{intl.formatMessage({ id: "Modify guest details" })}</span>
</Typography>
@@ -214,7 +218,11 @@ export default function GuestDetails({
disabled={booking.isCancelled}
size="small"
>
<EditIcon color="burgundy" width={20} height={20} />
<MaterialIcon
icon="edit"
color="Icon/Interactive/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdRegular">
<span>{intl.formatMessage({ id: "Modify guest details" })}</span>
</Typography>

5
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx
View File

@@ -2,7 +2,8 @@
import { useIntl } from "react-intl"
import { CalendarAddIcon } from "@/components/Icons"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { trackMyStayPageLink } from "@/utils/tracking"
@@ -29,7 +30,7 @@ export default function AddToCalendarButton({
onPress={handleAddToCalendar}
>
{intl.formatMessage({ id: "Add to calendar" })}
<CalendarAddIcon width={24} height={24} color="burgundy" />
<MaterialIcon icon="calendar_add_on" color="CurrentColor" />
</Button>
)
}

5
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/CalendarButton/index.tsx
View File

@@ -2,10 +2,9 @@
import { Button as ButtonRAC } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { CalendarIcon } from "@/components/Icons"
import styles from "./calendarButton.module.css"
interface CalendarButtonProps {
@@ -19,7 +18,7 @@ export default function CalendarButton({ text, onClick }: CalendarButtonProps) {
<Typography variant="Body/Paragraph/mdRegular">
<span>{text}</span>
</Typography>
<CalendarIcon />
<MaterialIcon icon="calendar_today" />
</ButtonRAC>
)
}

21
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
View File

@@ -2,20 +2,15 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { customerService } from "@/constants/currentWebHrefs"
import { preliminaryReceipt } from "@/constants/routes/myStay"
import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { preliminaryReceipt } from "@/constants/routes/myStay"
import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
import {
CalendarIcon,
ChevronRightIcon,
CreditCard,
CrossCircleOutlineIcon,
DownloadIcon,
} from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,7 +104,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
>
{intl.formatMessage({ id: "Modify dates" })}
<CalendarIcon width={24} height={24} color="burgundy" />
<MaterialIcon icon="calendar_month" color="CurrentColor" />
</Button>
{showGuaranteeButton && (
<Button
@@ -119,7 +114,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
>
{intl.formatMessage({ id: "Guarantee late arrival" })}
<CreditCard width={24} height={24} color="burgundy" />
<MaterialIcon icon="credit_card" color="CurrentColor" />
</Button>
)}
<AddToCalendar
@@ -136,7 +131,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
onClick={handleDownloadInvoice}
>
{intl.formatMessage({ id: "Download invoice" })}
<DownloadIcon width={24} height={24} color="burgundy" />
<MaterialIcon icon="download" color="CurrentColor" />
</Link>
{showCancelStayButton && (
<Button
@@ -146,7 +141,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
className={styles.button}
>
{intl.formatMessage({ id: "Cancel stay" })}
<CrossCircleOutlineIcon width={24} height={24} color="burgundy" />
<MaterialIcon icon="cancel" color="CurrentColor" />
</Button>
)}
</div>
@@ -184,7 +179,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
<Caption color="burgundy">
{intl.formatMessage({ id: "Customer support" })}
</Caption>
<ChevronRightIcon width={20} height={20} color="burgundy" />
<MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
</Link>
</div>
</div>

5
apps/scandic-web/components/HotelReservation/MyStay/ManageStay/index.tsx
View File

@@ -2,10 +2,11 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { ChevronDownIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
@@ -74,7 +75,7 @@ export default function ManageStay({
disabled={allRoomsCancelled}
>
{intl.formatMessage({ id: "Manage stay" })}
<ChevronDownIcon width={24} height={24} color="burgundy" />
<MaterialIcon icon="keyboard_arrow_down" color="Icon/Inverted" />
</Button>
{isOpen && (
<Modal

5
apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/ToggleSidePeek.tsx
View File

@@ -1,8 +1,9 @@
"use client"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import useSidePeekStore from "@/stores/sidepeek"
import { ExpandIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import styles from "./toggleSidePeek.module.css"
@@ -36,7 +37,7 @@ export default function ToggleSidePeek({
wrapping
>
<div className={styles.iconContainer}>
<ExpandIcon />
<MaterialIcon icon="pan_zoom" color="CurrentColor" />
</div>
</Button>
)

19
apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
View File

@@ -2,6 +2,7 @@
import { use, useEffect } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BookingStatusEnum } from "@/constants/booking"
@@ -9,13 +10,12 @@ import { dt } from "@/lib/dt"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
import CrossCircleIcon from "@/components/Icons/CrossCircle"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
import useLang from "@/hooks/useLang"
import { getIconForFeatureCode } from "../../utils"
import { IconForFeatureCode } from "../../utils"
import Price from "../Price"
import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
import { mapRoomDetails } from "../utils/mapRoomDetails"
@@ -156,7 +156,13 @@ export default function MultiRoom({
{isCancelled ? (
<IconChip
color={"red"}
icon={<CrossCircleIcon width={20} height={20} color="red" />}
icon={
<MaterialIcon
icon="cancel"
size={20}
color="Icon/Feedback/Error"
/>
}
>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -216,10 +222,13 @@ export default function MultiRoom({
)
)
.map((item) => {
const Icon = getIconForFeatureCode(item.code)
return (
<span className={styles.package} key={item.code}>
<Icon width={16} height={16} color="burgundy" />
<IconForFeatureCode
featureCode={item.code}
size={16}
color="Icon/Interactive/Default"
/>
</span>
)
})}

4
apps/scandic-web/components/HotelReservation/MyStay/PriceDetails/PriceDetailsTable/index.tsx
View File

@@ -3,11 +3,11 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import { PriceTagIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
@@ -286,7 +286,7 @@ export default function PriceDetailsTable({
{bookingCode && totalPrice.local.regularPrice && (
<tr className={styles.row}>
<td>
<PriceTagIcon />
<MaterialIcon icon="sell" />
{bookingCode}
</td>
<td></td>

4
apps/scandic-web/components/HotelReservation/MyStay/Receipt/index.tsx
View File

@@ -1,6 +1,7 @@
import { cookies } from "next/headers"
import { notFound } from "next/navigation"
import { ScandicLogoIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
@@ -11,7 +12,6 @@ import {
} from "@/lib/trpc/memoizedRequests"
import { decrypt } from "@/server/routers/utils/encryption"
import { ScandicLogoIcon } from "@/components/Icons"
import { getIntl } from "@/i18n"
import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
@@ -60,7 +60,7 @@ export async function Receipt({ refId }: { refId: string }) {
return (
<main className={styles.main}>
<div>
<ScandicLogoIcon width="89px" height="19px" color="red" />
<ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
<div className={styles.addresses}>
<div>
<Typography variant="Body/Supporting text (caption)/smRegular">

17
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
View File

@@ -3,6 +3,10 @@
import { useEffect } from "react"
import { useIntl } from "react-intl"
import {
Discount22Icon,
MaterialIcon,
} from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BookingStatusEnum } from "@/constants/booking"
@@ -10,7 +14,6 @@ import { dt } from "@/lib/dt"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
import { BookingCodeIcon, CheckCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -244,7 +247,11 @@ export function ReferenceCard({
{booking.guaranteeInfo && !allRoomsCancelled && (
<>
<div className={styles.guaranteed}>
<CheckCircleIcon color="green" height={20} width={20} />
<MaterialIcon
icon="check_circle"
color="Icon/Feedback/Success"
size={20}
/>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.guaranteedText}>
<strong>
@@ -271,7 +278,10 @@ export function ReferenceCard({
<Typography variant="Title/Overline/sm">
<p>{intl.formatMessage({ id: "Booking code" })}</p>
</Typography>
<IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
<IconChip
color="blue"
icon={<Discount22Icon color="Icon/Feedback/Information" />}
>
<Typography variant="Body/Supporting text (caption)/smBold">
<p className={styles.bookingCode}>
<strong>{intl.formatMessage({ id: "Booking code" })}</strong>:{" "}
@@ -281,7 +291,6 @@ export function ReferenceCard({
</IconChip>
</div>
)}
<div className={styles.actionArea}>
<ManageStay
hotel={hotel}

5
apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/ToggleSidePeek.tsx
View File

@@ -2,9 +2,10 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import useSidePeekStore from "@/stores/sidepeek"
import ChevronRight from "@/components/Icons/ChevronRight"
import Button from "@/components/TempDesignSystem/Button"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
@@ -35,7 +36,7 @@ export default function ToggleSidePeek({
wrapping
>
{title ? title : intl.formatMessage({ id: "See room details" })}
<ChevronRight height="14" />
<MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
</Button>
)
}

59
apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
View File

@@ -2,21 +2,16 @@
import { useIntl } from "react-intl"
import {
Discount22Icon,
MaterialIcon,
} from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt"
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
import {
BedDoubleIcon,
BookingCodeIcon,
CoffeeIcon,
ContractIcon,
DoorOpenIcon,
PersonIcon,
} from "@/components/Icons"
import Refresh from "@/components/Icons/Refresh"
import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import IconChip from "@/components/TempDesignSystem/IconChip"
@@ -168,10 +163,13 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
)
)
.map((item) => {
const Icon = getIconForFeatureCode(item.code)
return (
<span className={styles.package} key={item.code}>
<Icon width={16} height={16} color="burgundy" />
<IconForFeatureCode
featureCode={item.code}
size={16}
color="Icon/Interactive/Default"
/>
</span>
)
})}
@@ -191,7 +189,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<div className={styles.bookingDetails}>
<div className={styles.row}>
<span className={styles.rowTitle}>
<PersonIcon color="grey80" width={20} height={20} />
<MaterialIcon
icon="person"
color="Icon/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Guests" })}</p>
</Typography>
@@ -208,7 +210,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
</div>
<div className={styles.row}>
<span className={styles.rowTitle}>
<ContractIcon color="grey80" width={20} height={20} />
<MaterialIcon
icon="contract"
color="Icon/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Terms" })}</p>
</Typography>
@@ -223,7 +229,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
</div>
<div className={styles.row}>
<span className={styles.rowTitle}>
<Refresh color="grey80" width={20} height={20} />
<MaterialIcon
icon="refresh"
color="Icon/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Modify By" })}</p>
</Typography>
@@ -241,7 +251,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
</div>
<div className={styles.row}>
<span className={styles.rowTitle}>
<CoffeeIcon color="grey80" width={20} height={20} />
<MaterialIcon
icon="coffee"
color="Icon/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Breakfast" })}</p>
</Typography>
@@ -263,7 +277,11 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
{hasPackages && (
<div className={styles.row}>
<span className={styles.rowTitle}>
<DoorOpenIcon color="grey80" width={20} height={20} />
<MaterialIcon
icon="meeting_room"
color="Icon/Default"
size={20}
/>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({ id: "Room classification" })}
@@ -289,7 +307,7 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
<div className={styles.row}>
<span className={styles.rowTitle}>
<BedDoubleIcon color="grey80" width={20} height={20} />
<MaterialIcon icon="bed" color="Icon/Default" size={20} />
<Typography variant="Body/Paragraph/mdBold">
<p>{intl.formatMessage({ id: "Bed preference" })}</p>
</Typography>
@@ -318,7 +336,10 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
</div>
<div className={styles.bookingInformation}>
{bookingCode && (
<IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
<IconChip
color="blue"
icon={<Discount22Icon color="Icon/Feedback/Information" />}
>
<Typography variant="Body/Supporting text (caption)/smBold">
<p className={styles.bookingCode}>
<strong>