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

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -18,7 +18,7 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import Modal from "@/components/Modal"
import Input from "@/components/TempDesignSystem/Form/Input"
import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
import { getErrorMessage } from "@/utils/getErrorMessage"
import { Input as BookingWidgetInput } from "../Input"
import { isMultiRoomError } from "../utils"

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
View File

@@ -13,7 +13,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
import Modal from "@/components/Modal"
import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors"
import { getErrorMessage } from "@/utils/getErrorMessage"
import { RemoveExtraRooms } from "../BookingCode"
import { isMultiRoomError } from "../utils"

12
apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
View File

@@ -3,17 +3,21 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import { Select } from "@scandic-hotels/design-system/Select"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getLocalizedLanguageOptions } from "@/constants/languages"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import useLang from "@/hooks/useLang"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"
import { editProfileErrors } from "../schema"
import styles from "./formContent.module.css"
@@ -59,9 +63,15 @@ export default function FormContent() {
registerOptions={{ required: true }}
/>
<CountrySelect
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
editProfileErrors.COUNTRY_REQUIRED
)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
lang={lang}
name="address.countryCode"
registerOptions={{ required: true }}
/>

10
apps/scandic-web/components/Forms/Signup/index.tsx
View File

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
import { logger } from "@scandic-hotels/common/logger"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import {
@@ -23,7 +24,6 @@ import {
privacyPolicy,
} from "@/constants/webHrefs"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
@@ -32,6 +32,8 @@ import Link from "@/components/TempDesignSystem/Link"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import useLang from "@/hooks/useLang"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"
import { formatPhoneNumber } from "@/utils/phone"
// import { type SignUpSchema, signUpSchema } from "./schema"
@@ -169,9 +171,15 @@ export default function SignupForm({ title }: SignUpFormProps) {
registerOptions={{ required: true }}
/>
<CountrySelect
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
signupErrors.COUNTRY_REQUIRED
)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
lang={lang}
name="address.countryCode"
registerOptions={{ required: true }}
/>

14
apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx
View File

@@ -5,26 +5,30 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"
import MemberPriceModal from "../MemberPriceModal"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { getMultiroomDetailsSchema } from "./schema"
import { getMultiroomDetailsSchema, multiroomErrors } from "./schema"
import styles from "./details.module.css"
const formID = "enter-details"
export default function Details() {
const intl = useIntl()
const lang = useLang()
const { addPreSubmitCallback, rooms } = useEnterDetailsStore((state) => ({
addPreSubmitCallback: state.actions.addPreSubmitCallback,
@@ -187,9 +191,15 @@ export default function Details() {
/>
<CountrySelect
className={styles.fullWidth}
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
multiroomErrors.COUNTRY_REQUIRED
)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
lang={lang}
name="countryCode"
registerOptions={{ required: true, onBlur: updateDetailsStore }}
/>

15
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -5,20 +5,27 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import { useRoomContext } from "@/contexts/Details/Room"
import useLang from "@/hooks/useLang"
import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"
import MemberPriceModal from "../MemberPriceModal"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import {
guestDetailsSchema,
roomOneErrors,
signedInDetailsSchema,
} from "./schema"
import Signup from "./Signup"
import styles from "./details.module.css"
@@ -31,6 +38,7 @@ import type {
const formID = "enter-details"
export default function Details({ user }: DetailsProps) {
const intl = useIntl()
const lang = useLang()
const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
lastRoom: state.lastRoom,
@@ -168,6 +176,9 @@ export default function Details({ user }: DetailsProps) {
label={intl.formatMessage({
defaultMessage: "Country",
})}
lang={lang}
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(intl, roomOneErrors.COUNTRY_REQUIRED)}
name="countryCode"
readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }}

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

@@ -2,6 +2,7 @@ import { useFormContext } from "react-hook-form"
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 { Typography } from "@scandic-hotels/design-system/Typography"
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
@@ -9,8 +10,8 @@ import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
import Alert from "@/components/TempDesignSystem/Alert"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import Select from "@/components/TempDesignSystem/Form/Select"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./selectQuantityStep.module.css"
@@ -116,7 +117,14 @@ export default function SelectQuantityStep({ user }: SelectQuantityStepProps) {
items={cardQuantityOptions}
isNestedInModal
/>
<ErrorMessage errors={errors} name="quantityWithCard" />
<ErrorMessage
errors={errors}
name="quantityWithCard"
messageLabel={getErrorMessage(
intl,
errors["quantityWithCard"]?.message?.toString()
)}
/>
</div>
</div>
)

13
apps/scandic-web/components/HotelReservation/MyStay/ModifyContact/index.tsx
View File

@@ -4,10 +4,14 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import { signupErrors } from "@scandic-hotels/trpc/routers/user/schemas"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import useLang from "@/hooks/useLang"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./modifyContact.module.css"
@@ -23,6 +27,7 @@ export default function ModifyContact({
isFirstStep,
}: ModifyContactProps) {
const intl = useIntl()
const lang = useLang()
const { getValues, setValue } = useFormContext()
useEffect(() => {
@@ -57,9 +62,15 @@ export default function ModifyContact({
</div>
<div className={styles.row}>
<CountrySelect
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
signupErrors.COUNTRY_REQUIRED
)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
lang={lang}
name="countryCode"
/>
</div>

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>
)