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

Merged in chore/SW-3145-move-country (pull request #2545)

Browse Source 
chore: SW-3145 Moved country into design system

* chore: SW-3145 Moved country into design system


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-07-10 12:20:49 +00:00
parent 5f9af2701e
commit 2f72a0437b
27 changed files with 229 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
apps/scandic-web/components/TempDesignSystem/Form/Country/CountryCombobox.tsx
View File

@@ -1,167 +0,0 @@
"use client"
import { type SyntheticEvent, useMemo, useState } from "react"
import {
Button,
ComboBox,
Input,
Label,
ListBox,
ListBoxItem,
Popover,
useFilter,
} from "react-aria-components"
import { useController } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { countries } from "@scandic-hotels/trpc/constants/countries"
import useLang from "@/hooks/useLang"
import ErrorMessage from "../ErrorMessage"
import styles from "./country.module.css"
import type { CountryProps } from "./country"
const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
export default function CountryCombobox({
// hack used since chrome does not respect autocomplete="off"
autoComplete = "nope",
className = "",
label,
name = "country",
readOnly = false,
registerOptions = {},
}: CountryProps) {
const lang = useLang()
const intl = useIntl()
const { startsWith } = useFilter({ sensitivity: "base" })
const [filterValue, setFilterValue] = useState("")
const { field, formState, fieldState } = useController({
name,
rules: registerOptions,
})
const items = useMemo(() => {
function mapCountry(country: (typeof countries)[number]) {
return {
value: country.code,
label:
intl.formatDisplayName(country.code, { type: "region" }) ||
country.name,
}
}
const collator = new Intl.Collator(lang)
const prioCountries = countries
.filter((c) => prioCountryCode.includes(c.code))
.map(mapCountry)
.filter((item) => startsWith(item.label, filterValue))
.sort((a, b) => collator.compare(a.label, b.label))
const restCountries = countries
.filter((c) => !prioCountryCode.includes(c.code))
.map(mapCountry)
.filter((item) => startsWith(item.label, filterValue))
.sort((a, b) => collator.compare(a.label, b.label))
return [...prioCountries, ...restCountries]
}, [filterValue, intl, lang, startsWith])
function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
setFilterValue(evt.currentTarget.value)
const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
if (isAutoCompleteEvent) {
const { value } = evt.currentTarget
const cc = countries.find((c) => c.name === value || c.code === value)
if (cc) {
field.onChange(cc.code)
}
}
}
return (
<div className={className}>
<ComboBox
aria-label={label}
className={styles.select}
data-testid={name}
isReadOnly={readOnly}
isRequired={Boolean(registerOptions?.required)}
isInvalid={fieldState.invalid}
name={name}
onBlur={field.onBlur}
onSelectionChange={(c) => field.onChange(c ?? "")}
selectedKey={field.value}
menuTrigger="focus"
>
<Label className={styles.inner}>
<span className={styles.displayText}>
<Typography variant="Label/xsRegular">
<span className={`${styles.label} ${styles.labelValue}`}>
{label}
</span>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<span className={`${styles.label} ${styles.labelEmpty}`}>
{label}
</span>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Input
autoComplete={autoComplete}
className={styles.input}
onInput={handleOnInput}
ref={field.ref}
/>
</Typography>
</span>
<Button className={styles.button}>
<MaterialIcon
aria-hidden="true"
className={styles.chevron}
color="Icon/Default"
icon="chevron_right"
size={24}
/>
</Button>
</Label>
<Popover
className={styles.popover}
crossOffset={-8}
offset={22}
shouldFlip={false}
>
<ListBox className={styles.listBox}>
{items.map((item) => (
<ListBoxItem
className={styles.listBoxItem}
key={item.value}
id={item.value}
textValue={item.label}
>
{({ isSelected }) => (
<Typography
variant={
isSelected
? "Body/Paragraph/mdBold"
: "Body/Paragraph/mdRegular"
}
>
<span>{item.label}</span>
</Typography>
)}
</ListBoxItem>
))}
</ListBox>
</Popover>
</ComboBox>
<ErrorMessage errors={formState.errors} name={name} />
</div>
)
}

74
apps/scandic-web/components/TempDesignSystem/Form/Country/CountrySelect.tsx
View File

@@ -1,74 +0,0 @@
"use client"
import { useMemo } from "react"
import { useController } from "react-hook-form"
import { useIntl } from "react-intl"
import { Select } from "@scandic-hotels/design-system/Select"
import { countries } from "@scandic-hotels/trpc/constants/countries"
import useLang from "@/hooks/useLang"
import ErrorMessage from "../ErrorMessage"
import type { CountryProps } from "./country"
const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
export default function CountrySelect({
className = "",
label,
name = "country",
readOnly = false,
registerOptions = {},
}: CountryProps) {
const lang = useLang()
const intl = useIntl()
const { field, formState, fieldState } = useController({
name,
rules: registerOptions,
})
const items = useMemo(() => {
function mapCountry(country: (typeof countries)[number]) {
return {
value: country.code,
label:
intl.formatDisplayName(country.code, { type: "region" }) ||
country.name,
}
}
const collator = new Intl.Collator(lang)
const prioCountries = countries
.filter((c) => prioCountryCode.includes(c.code))
.map(mapCountry)
.sort((a, b) => collator.compare(a.label, b.label))
const restCountries = countries
.filter((c) => !prioCountryCode.includes(c.code))
.map(mapCountry)
.sort((a, b) => collator.compare(a.label, b.label))
return [...prioCountries, ...restCountries]
}, [intl, lang])
return (
<div className={className}>
<Select
items={items}
label={label}
isReadOnly={readOnly}
isRequired={Boolean(registerOptions?.required)}
isInvalid={fieldState.invalid}
name={name}
onBlur={field.onBlur}
onSelectionChange={(c) => field.onChange(c ?? "")}
selectedKey={field.value}
data-testid={name}
/>
<ErrorMessage errors={formState.errors} name={name} />
</div>
)
}

160
apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -1,160 +0,0 @@
.select {
background-color: var(--Surface-UI-Fill-Default);
border: 1px solid var(--Border-Interactive-Default);
border-radius: var(--Corner-radius-md);
position: relative;
height: 56px;
&[data-required] .label::after {
content: " *";
}
&[data-open] {
.chevron {
rotate: -90deg;
}
}
&[data-focused] {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
.button,
.input {
outline: none;
}
.input {
min-height: 18px;
}
.label {
color: var(--Text-Interactive-Focus);
}
}
&[data-disabled] {
.inner {
background-color: var(--Surface-Primary-Disabled);
color: var(--Text-Interactive-Disabled);
}
.button,
.input,
.label {
color: var(--Text-Interactive-Disabled);
}
}
&[data-invalid] {
border-color: var(--Border-Interactive-Error);
}
}
.inner {
align-items: center;
box-sizing: border-box;
display: flex;
gap: var(--Space-x1);
padding: var(--Space-x15);
width: 100%;
height: 100%;
}
.displayText {
cursor: text;
display: flex;
gap: calc(var(--Space-x05) / 2);
flex: 1;
flex-direction: column;
height: 100%;
justify-content: center;
position: relative;
}
.label {
color: var(--Text-Interactive-Placeholder);
transition: font-size 150ms ease;
white-space: nowrap;
&.labelValue {
display: none;
}
&.labelEmpty {
display: none;
}
}
.inner:has(input:placeholder-shown, input[data-focused="true"], input:valid)
.labelValue {
display: initial;
}
.inner:has(input[value=""]:not([data-focused="true"])) .labelEmpty {
display: initial;
}
.input {
background: none;
border: 0;
height: 0;
min-height: 0;
padding: 0;
transition: min-height 150ms ease;
width: 100%;
&[value]:not([value=""]) {
min-height: 18px;
}
}
.button {
background: none;
border: 0;
padding: 0;
}
.chevron {
rotate: 90deg;
}
.popover {
background-color: var(--Surface-Primary-Default);
border-radius: var(--Corner-radius-md);
box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
display: inline-flex;
flex-direction: column;
gap: var(--Space-x1);
min-width: 280px;
outline: none;
overflow: auto;
padding: var(--Space-x2);
scrollbar-color: var(--Icon-Interactive-Disabled);
scrollbar-width: thin;
}
.listBox {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
outline: none;
}
.listBoxItem {
align-items: center;
border-radius: var(--Corner-radius-md);
color: var(--Text-Default);
display: flex;
gap: var(--Space-x1);
padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
&[data-focused] {
outline: none;
}
&[data-focused],
&[data-hovered] {
background-color: var(--Surface-Primary-Hover);
}
}

14
apps/scandic-web/components/TempDesignSystem/Form/Country/country.ts
View File

@@ -1,14 +0,0 @@
import type { RegisterOptions } from "react-hook-form"
export type CountryProps = {
autoComplete?: string
className?: string
label: string
name?: string
placeholder?: string
readOnly?: boolean
registerOptions?: RegisterOptions
}
export type CountryPortalContainer = HTMLDivElement | undefined
export type CountryPortalContainerArgs = HTMLDivElement | null

20
apps/scandic-web/components/TempDesignSystem/Form/Country/index.tsx
View File

@@ -1,20 +0,0 @@
"use client"
import { useMediaQuery } from "usehooks-ts"
import CountryCombobox from "./CountryCombobox"
import CountrySelect from "./CountrySelect"
import type { CountryProps } from "./country"
export default function Country(props: CountryProps) {
const isDesktop = useMediaQuery("(min-width: 768px)", {
initializeWithValue: false,
})
return isDesktop ? (
<CountryCombobox {...props} />
) : (
<CountrySelect {...props} />
)
}

12
apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
View File

@@ -7,13 +7,14 @@ import { useMediaQuery } from "usehooks-ts"
import { dt } from "@scandic-hotels/common/dt"
import { logger } from "@scandic-hotels/common/logger"
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
import { Select } from "@scandic-hotels/design-system/Select"
import useLang from "@/hooks/useLang"
import { getLocalizedMonthName } from "@/utils/dateFormatting"
import { getErrorMessage } from "@/utils/getErrorMessage"
import { rangeArray } from "@/utils/rangeArray"
import ErrorMessage from "../ErrorMessage"
import { DateName, type DateProps } from "./date"
import styles from "./date.module.css"
@@ -172,7 +173,14 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
/>
</div>
</div>
<ErrorMessage errors={formState.errors} name={field.name} />
<ErrorMessage
errors={formState.errors}
name={field.name}
messageLabel={getErrorMessage(
intl,
formState.errors[field.name]?.message?.toString()
)}
/>
</>
)
}

13
apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/Error.tsx
View File

@@ -1,13 +0,0 @@
import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import styles from "./error.module.css"
export default function Error({ children }: React.PropsWithChildren) {
return (
<Caption className={styles.message} fontOnly>
<MaterialIcon icon="info" color="Icon/Feedback/Error" />
{children}
</Caption>
)
}

7
apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/error.module.css
View File

@@ -1,7 +0,0 @@
.message {
align-items: center;
color: var(--Text-Interactive-Error);
display: flex;
gap: var(--Spacing-x-half);
margin: var(--Spacing-x1) 0 0;
}

18
apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/errorMessage.ts
View File

@@ -1,18 +0,0 @@
import type { FieldValuesFromFieldErrors } from "@hookform/error-message"
import type {
FieldErrors,
FieldName,
FieldValues,
Message,
MultipleFieldErrors,
} from "react-hook-form"
export type ErrorMessageProps<TFieldErrors> = {
errors?: FieldErrors<FieldValues>
name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
message?: Message
render?: (data: {
message: Message
messages?: MultipleFieldErrors
}) => React.ReactNode
}

21
apps/scandic-web/components/TempDesignSystem/Form/ErrorMessage/index.tsx
View File

@@ -1,21 +0,0 @@
import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
import { useIntl } from "react-intl"
import { getErrorMessage } from "../Input/errors"
import Error from "./Error"
import type { ErrorMessageProps } from "./errorMessage"
export default function ErrorMessage<T>({
errors,
name,
}: ErrorMessageProps<T>) {
const intl = useIntl()
return (
<RHFErrorMessage
errors={errors}
name={name}
render={({ message }) => <Error>{getErrorMessage(intl, message)}</Error>}
/>
)
}

189
apps/scandic-web/components/TempDesignSystem/Form/Input/errors.ts
View File

@@ -1,189 +0,0 @@
import { logger } from "@scandic-hotels/common/logger"
import { phoneErrors } from "@scandic-hotels/common/utils/zod/phoneValidator"
import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas"
import { bookingWidgetErrors } from "@/components/Forms/BookingWidget/schema"
import { editProfileErrors } from "@/components/Forms/Edit/Profile/schema"
import { multiroomErrors } from "@/components/HotelReservation/EnterDetails/Details/Multiroom/schema"
import { roomOneErrors } from "@/components/HotelReservation/EnterDetails/Details/RoomOne/schema"
import { findMyBookingErrors } from "@/components/HotelReservation/FindMyBooking/schema"
import type { IntlShape } from "react-intl"
export function getErrorMessage(intl: IntlShape, errorCode?: string) {
switch (errorCode) {
case findMyBookingErrors.BOOKING_NUMBER_INVALID:
return intl.formatMessage({
defaultMessage: "Invalid booking number",
})
case findMyBookingErrors.BOOKING_NUMBER_REQUIRED:
return intl.formatMessage({
defaultMessage: "Invalid booking number",
})
case bookingWidgetErrors.BOOKING_CODE_INVALID:
return intl.formatMessage({
defaultMessage: "Booking code is invalid",
})
case findMyBookingErrors.FIRST_NAME_REQUIRED:
case signupErrors.FIRST_NAME_REQUIRED:
case multiroomErrors.FIRST_NAME_REQUIRED:
case roomOneErrors.FIRST_NAME_REQUIRED:
return intl.formatMessage({
defaultMessage: "First name is required",
})
case multiroomErrors.FIRST_NAME_SPECIAL_CHARACTERS:
case roomOneErrors.FIRST_NAME_SPECIAL_CHARACTERS:
return intl.formatMessage({
defaultMessage: "First name can't contain any special characters",
})
case findMyBookingErrors.LAST_NAME_REQUIRED:
case signupErrors.LAST_NAME_REQUIRED:
case multiroomErrors.LAST_NAME_REQUIRED:
case roomOneErrors.LAST_NAME_REQUIRED:
return intl.formatMessage({
defaultMessage: "Last name is required",
})
case multiroomErrors.LAST_NAME_SPECIAL_CHARACTERS:
case roomOneErrors.LAST_NAME_SPECIAL_CHARACTERS:
return intl.formatMessage({
defaultMessage: "Last name can't contain any special characters",
})
case multiroomErrors.FIRST_AND_LAST_NAME_UNIQUE:
return intl.formatMessage({
defaultMessage:
"First and last name can't be the same in two different rooms",
})
case findMyBookingErrors.EMAIL_REQUIRED:
case multiroomErrors.EMAIL_REQUIRED:
case roomOneErrors.EMAIL_REQUIRED:
case signupErrors.EMAIL_REQUIRED:
return intl.formatMessage({
defaultMessage: "Email address is required",
})
case signupErrors.EMAIL_INVALID:
return intl.formatMessage({
defaultMessage: "Email address is invalid",
})
case signupErrors.COUNTRY_REQUIRED:
case multiroomErrors.COUNTRY_REQUIRED:
case roomOneErrors.COUNTRY_REQUIRED:
case editProfileErrors.COUNTRY_REQUIRED:
return intl.formatMessage({
defaultMessage: "Country is required",
})
case signupErrors.PHONE_REQUIRED:
case multiroomErrors.PHONE_REQUIRED:
case roomOneErrors.PHONE_REQUIRED:
case editProfileErrors.PHONE_REQUIRED:
return intl.formatMessage({
defaultMessage: "Phone is required",
})
case phoneErrors.PHONE_NUMBER_TOO_SHORT:
return intl.formatMessage({
defaultMessage: "The number you have entered is too short",
})
case phoneErrors.PHONE_REQUESTED:
case signupErrors.PHONE_REQUESTED:
case multiroomErrors.PHONE_REQUESTED:
case roomOneErrors.PHONE_REQUESTED:
case editProfileErrors.PHONE_REQUESTED:
return intl.formatMessage({
defaultMessage: "Please enter a valid phone number",
})
case signupErrors.BIRTH_DATE_REQUIRED:
case roomOneErrors.BIRTH_DATE_REQUIRED:
return intl.formatMessage({
defaultMessage: "Date of birth is required",
})
case roomOneErrors.BIRTH_DATE_AGE_18:
return intl.formatMessage({
defaultMessage: "Must be at least 18 years of age to continue",
})
case roomOneErrors.ZIP_CODE_REQUIRED:
case editProfileErrors.ZIP_CODE_REQUIRED:
case signupErrors.ZIP_CODE_REQUIRED:
return intl.formatMessage({
defaultMessage: "Zip code is required",
})
case roomOneErrors.ZIP_CODE_INVALID:
case editProfileErrors.ZIP_CODE_INVALID:
case signupErrors.ZIP_CODE_INVALID:
return intl.formatMessage({
defaultMessage: "The postal code can only contain numbers and letters",
})
case signupErrors.PASSWORD_REQUIRED:
return intl.formatMessage({
defaultMessage: "Password is required",
})
case editProfileErrors.PASSWORD_NEW_REQUIRED:
return intl.formatMessage({
defaultMessage: "New password is required",
})
case editProfileErrors.PASSWORD_RETYPE_NEW_REQUIRED:
return intl.formatMessage({
defaultMessage: "Confirm your new password",
})
case editProfileErrors.PASSWORD_CURRENT_REQUIRED:
return intl.formatMessage({
defaultMessage: "Current password is required",
})
case editProfileErrors.PASSWORD_NEW_NOT_MATCH:
return intl.formatMessage({
defaultMessage: "Passwords do not match",
})
case multiroomErrors.MEMBERSHIP_NO_ONLY_DIGITS:
case roomOneErrors.MEMBERSHIP_NO_ONLY_DIGITS:
return intl.formatMessage({
defaultMessage: "Only digits are allowed",
})
case multiroomErrors.MEMBERSHIP_NO_INVALID:
case roomOneErrors.MEMBERSHIP_NO_INVALID:
return intl.formatMessage({
defaultMessage: "Invalid membership number format",
})
case multiroomErrors.MEMBERSHIP_NO_UNIQUE:
return intl.formatMessage({
defaultMessage:
"Membership number can't be the same for two different rooms",
})
case bookingWidgetErrors.AGE_REQUIRED:
return intl.formatMessage({
defaultMessage: "Age is required",
})
case bookingWidgetErrors.BED_CHOICE_REQUIRED:
return intl.formatMessage({
defaultMessage: "Bed choice is required",
})
case bookingWidgetErrors.CHILDREN_EXCEEDS_ADULTS:
return intl.formatMessage({
defaultMessage:
"You cannot have more children in adults bed than adults in the room",
})
case bookingWidgetErrors.REQUIRED:
return intl.formatMessage({
defaultMessage: "Required",
})
case bookingWidgetErrors.DESTINATION_REQUIRED:
return intl.formatMessage({
defaultMessage: "Destination required",
})
case bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE:
return intl.formatMessage({
defaultMessage:
"Multi-room booking is not available with this booking code.",
})
case bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE:
return intl.formatMessage({
defaultMessage:
"Multi-room booking is not available with reward night.",
})
case bookingWidgetErrors.CODE_VOUCHER_REWARD_NIGHT_UNAVAILABLE:
return intl.formatMessage({
defaultMessage:
"Reward nights can't be combined with codes or vouchers.",
})
default:
logger.warn("Error code not supported:", errorCode)
return errorCode
}
}

2
apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
View File

@@ -9,7 +9,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
import { getErrorMessage } from "./errors"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./input.module.css"

2
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
View File

@@ -11,7 +11,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { getErrorMessage } from "../Input/errors"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./passwordInput.module.css"

12
apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -16,14 +16,15 @@ import {
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Label } from "@scandic-hotels/design-system/Label"
import { getDefaultCountryFromLang } from "@/constants/languages"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import useLang from "@/hooks/useLang"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./phone.module.css"
@@ -149,7 +150,14 @@ export default function Phone({
readOnly={readOnly}
type="tel"
/>
<ErrorMessage errors={formState.errors} name={name} />
<ErrorMessage
errors={formState.errors}
name={name}
messageLabel={getErrorMessage(
intl,
formState.errors[name]?.message?.toString()
)}
/>
</TextField>
</div>
)