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

Merged in chore/SW-3145-move-phone (pull request #2549)

Browse Source 
chore/SW-3145 Moved Phone to design system

* chore/SW-3145 Moved Phone to design system

* chore: SW-3145 Moved phone and removed intl direct dependency


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-07-28 08:28:07 +00:00
parent 58af469e22
commit 42ab6e58b3
12 changed files with 130 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,24 +4,27 @@ import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { Select } from "@scandic-hotels/design-system/Select"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getLocalizedLanguageOptions } from "@/constants/languages"
import {
getDefaultCountryFromLang,
getLocalizedLanguageOptions,
} from "@/constants/languages"
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"
export default function FormContent() {
import type { FieldErrors } from "react-hook-form"
export default function FormContent({ errors }: { errors: FieldErrors }) {
const intl = useIntl()
const lang = useLang()
const languageOptions = getLocalizedLanguageOptions(lang)
@@ -66,7 +69,8 @@ export default function FormContent() {
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
editProfileErrors.COUNTRY_REQUIRED
// @ts-expect-error countryCode doesn't exist schema not available
errors?.address?.countryCode?.message?.toString()
)}
label={intl.formatMessage({
defaultMessage: "Country",
@@ -86,6 +90,15 @@ export default function FormContent() {
data-hj-suppress
/>
<Phone
countryLabel={intl.formatMessage({
defaultMessage: "Country code",
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(
intl,
errors?.phoneNumber?.message?.toString()
)}
label={intl.formatMessage({
defaultMessage: "Phone number",
})}

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

@@ -185,7 +185,7 @@ export default function Form({ user }: EditFormProps) {
onSubmit={methods.handleSubmit(handleSubmit)}
>
<FormProvider {...methods}>
<FormContent />
<FormContent errors={methods.formState.errors} />
</FormProvider>
</form>
</section>

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

@@ -10,6 +10,7 @@ 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 Phone from "@scandic-hotels/design-system/Form/Phone"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@scandic-hotels/trpc/client"
import {
@@ -27,7 +28,6 @@ import {
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 Link from "@/components/TempDesignSystem/Link"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
@@ -98,7 +98,11 @@ export default function SignupForm({ title }: SignUpFormProps) {
shouldFocusError: true,
})
const { control, subscribe } = methods
const {
control,
subscribe,
formState: { errors },
} = methods
const { trackFormSubmit } = useFormTracking("signup", subscribe, control)
@@ -174,7 +178,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
signupErrors.COUNTRY_REQUIRED
errors.address?.countryCode?.message
)}
label={intl.formatMessage({
defaultMessage: "Country",
@@ -192,6 +196,15 @@ export default function SignupForm({ title }: SignUpFormProps) {
type="email"
/>
<Phone
countryLabel={intl.formatMessage({
defaultMessage: "Country code",
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(
intl,
errors.phoneNumber?.message
)}
label={intl.formatMessage({
defaultMessage: "Phone number",
})}

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

@@ -6,12 +6,13 @@ import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { getDefaultCountryFromLang } from "@/constants/languages"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
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"
@@ -21,7 +22,7 @@ import { getErrorMessage } from "@/utils/getErrorMessage"
import MemberPriceModal from "../MemberPriceModal"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import { getMultiroomDetailsSchema, multiroomErrors } from "./schema"
import { getMultiroomDetailsSchema } from "./schema"
import styles from "./details.module.css"
@@ -89,7 +90,7 @@ export default function Details() {
trigger,
control,
subscribe,
formState: { isValid },
formState: { isValid, errors },
setValue,
watch,
} = methods
@@ -192,10 +193,7 @@ export default function Details() {
<CountrySelect
className={styles.fullWidth}
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
multiroomErrors.COUNTRY_REQUIRED
)}
errorMessage={getErrorMessage(intl, errors.countryCode?.message)}
label={intl.formatMessage({
defaultMessage: "Country",
})}
@@ -212,6 +210,12 @@ export default function Details() {
registerOptions={{ required: true, onBlur: updateDetailsStore }}
/>
<Phone
countryLabel={intl.formatMessage({
defaultMessage: "Country code",
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(intl, errors.phoneNumber?.message)}
className={styles.fullWidth}
label={intl.formatMessage({
defaultMessage: "Phone number",

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

@@ -6,12 +6,13 @@ import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"
import { getDefaultCountryFromLang } from "@/constants/languages"
import { useEnterDetailsStore } from "@/stores/enter-details"
import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
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"
@@ -21,11 +22,7 @@ import { getErrorMessage } from "@/utils/getErrorMessage"
import MemberPriceModal from "../MemberPriceModal"
import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
import {
guestDetailsSchema,
roomOneErrors,
signedInDetailsSchema,
} from "./schema"
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import Signup from "./Signup"
import styles from "./details.module.css"
@@ -178,7 +175,10 @@ export default function Details({ user }: DetailsProps) {
})}
lang={lang}
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(intl, roomOneErrors.COUNTRY_REQUIRED)}
errorMessage={getErrorMessage(
intl,
formState.errors.countryCode?.message
)}
name="countryCode"
readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }}
@@ -195,6 +195,15 @@ export default function Details({ user }: DetailsProps) {
/>
<Phone
className={styles.fullWidth}
countryLabel={intl.formatMessage({
defaultMessage: "Country code",
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(
intl,
formState.errors.phoneNumber?.message
)}
label={intl.formatMessage({
defaultMessage: "Phone number",
})}

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

@@ -5,10 +5,11 @@ 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 Phone from "@scandic-hotels/design-system/Form/Phone"
import { getDefaultCountryFromLang } from "@/constants/languages"
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"
@@ -28,7 +29,11 @@ export default function ModifyContact({
}: ModifyContactProps) {
const intl = useIntl()
const lang = useLang()
const { getValues, setValue } = useFormContext()
const {
getValues,
setValue,
formState: { errors },
} = useFormContext()
useEffect(() => {
setValue("firstName", guest.firstName ?? "")
@@ -65,7 +70,7 @@ export default function ModifyContact({
countries={getFormattedCountryList(intl)}
errorMessage={getErrorMessage(
intl,
signupErrors.COUNTRY_REQUIRED
errors.countryCode?.message?.toString()
)}
label={intl.formatMessage({
defaultMessage: "Country",
@@ -86,6 +91,15 @@ export default function ModifyContact({
</div>
<div className={styles.row}>
<Phone
countryLabel={intl.formatMessage({
defaultMessage: "Country code",
})}
countriesWithTranslatedName={getFormattedCountryList(intl)}
defaultCountryCode={getDefaultCountryFromLang(lang)}
errorMessage={getErrorMessage(
intl,
errors.phoneNumber?.message?.toString()
)}
label={intl.formatMessage({
defaultMessage: "Phone number",
})}

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

@@ -1,164 +0,0 @@
"use client"
import "react-international-phone/style.css"
import { useEffect, useMemo } from "react"
import { TextField } from "react-aria-components"
import { useFormContext, useWatch } from "react-hook-form"
import {
buildCountryData,
CountrySelector,
defaultCountries,
DialCodePreview,
parseCountry,
type ParsedCountry,
usePhoneInput,
} from "react-international-phone"
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 useLang from "@/hooks/useLang"
import { getErrorMessage } from "@/utils/getErrorMessage"
import styles from "./phone.module.css"
import type { PhoneProps } from "@/types/components/form/phone"
export default function Phone({
ariaLabel = "Phone number input",
className = "",
countrySelectorName = "phoneNumberCC",
disabled = false,
label,
name = "phoneNumber",
placeholder,
readOnly = false,
registerOptions = {
required: true,
},
}: PhoneProps) {
const intl = useIntl()
const lang = useLang()
const countries = useMemo(() => {
return defaultCountries.map((dc) => {
const country = parseCountry(dc)
const translatedCountryName = intl.formatDisplayName(
country.iso2.toUpperCase(),
{ type: "region" }
)
if (translatedCountryName) {
country.name = translatedCountryName
}
return buildCountryData(country)
})
}, [intl])
const { formState, getFieldState, register, setValue } = useFormContext()
const fieldState = getFieldState(name)
const ccFieldState = getFieldState(countrySelectorName)
const [phoneNumber, phoneNumberCC]: [string, string] = useWatch({
name: [name, countrySelectorName],
})
const { country, setCountry } = usePhoneInput({
countries,
defaultCountry: phoneNumberCC
? phoneNumberCC
: getDefaultCountryFromLang(lang),
})
function handleSelectCountry(value: ParsedCountry) {
setCountry(value.iso2)
setValue(countrySelectorName, value.iso2, {
shouldDirty: true,
shouldTouch: true,
shouldValidate: true,
})
if (registerOptions.onBlur) {
registerOptions.onBlur(value)
}
}
useEffect(() => {
if (!ccFieldState.isTouched) {
setCountry(phoneNumberCC)
}
}, [phoneNumberCC, setCountry, ccFieldState])
return (
<div className={`${styles.phone} ${className}`}>
<CountrySelector
countries={countries}
disabled={readOnly}
dropdownArrowClassName={styles.arrow}
flagClassName={styles.flag}
onSelect={handleSelectCountry}
preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
selectedCountry={country.iso2}
renderButtonWrapper={(props) => (
<button
{...props.rootProps}
className={styles.select}
tabIndex={0}
type="button"
data-testid="country-selector"
>
<Label required={!!registerOptions.required} size="small">
{intl.formatMessage({
defaultMessage: "Country code",
})}
</Label>
<span className={styles.selectContainer}>
{props.children}
<Body asChild fontOnly>
<DialCodePreview
className={styles.dialCode}
dialCode={country.dialCode}
prefix="+"
/>
</Body>
<MaterialIcon
icon="keyboard_arrow_down"
className={styles.chevron}
color="Icon/Default"
size={18}
/>
</span>
</button>
)}
/>
<TextField
aria-label={ariaLabel}
isDisabled={disabled || registerOptions.disabled}
isInvalid={fieldState.invalid}
isRequired={!!registerOptions?.required}
isReadOnly={readOnly}
name={name}
type="tel"
value={phoneNumber}
>
<Input
{...register(name, registerOptions)}
autoComplete="tel-national"
label={label}
placeholder={placeholder}
readOnly={readOnly}
type="tel"
/>
<ErrorMessage
errors={formState.errors}
name={name}
messageLabel={getErrorMessage(
intl,
formState.errors[name]?.message?.toString()
)}
/>
</TextField>
</div>
)
}

113
apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
View File

@@ -1,113 +0,0 @@
.phone {
display: grid;
grid-template-columns: 1fr;
gap: var(--Space-x2);
--react-international-phone-background-color: var(--Main-Grey-White);
--react-international-phone-border-color: var(--Scandic-Beige-40);
--react-international-phone-dropdown-preferred-list-divider-color: var(
--Scandic-Brand-Pale-Peach
);
--react-international-phone-selected-dropdown-item-background-color: var(
--Scandic-Blue-00
);
--react-international-phone-text-color: var(--Main-Grey-100);
--react-international-phone-dropdown-preferred-list-divider-margin: 8px;
--react-international-phone-height: 60px;
--react-international-phone-dropdown-top: calc(
var(--react-international-phone-height) + var(--Space-x1)
);
--react-international-phone-dial-code-preview-font-size: var(
--Body-Paragraph-Size
);
--react-international-phone-dropdown-item-font-size: var(
--Body-Paragraph-Size
);
}
@media (min-width: 400px) {
.phone {
grid-template-columns: minmax(124px, 164px) 1fr;
}
}
.phone:has(.input:active, .input:focus) {
--react-international-phone-border-color: var(--Scandic-Blue-90);
}
.phone :global(.react-international-phone-country-selector-dropdown) {
background: var(--Main-Grey-White);
border-radius: var(--Corner-radius-md);
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
gap: var(--Space-x1);
outline: none;
padding: var(--Space-x2);
}
.phone
:global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-md);
padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
font-family: var(--Body-Paragraph-Font-family);
}
.phone
:global(.react-international-phone-country-selector-button__button-content) {
align-self: center;
}
.select {
align-content: center;
background-color: var(--Main-Grey-White);
border-color: var(--Border-Interactive-Default);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Space-x05);
grid-template-rows: auto auto;
height: 56px;
padding: var(--Space-x15);
transition: border-color 200ms ease;
width: 100%;
&:focus {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
}
}
.select[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
.selectContainer {
background-color: var(--Main-Grey-White);
border: none;
display: grid;
gap: var(--Space-x1);
grid-template-columns: auto 1fr auto;
height: 18px;
justify-content: flex-start;
order: 2;
}
.arrow {
display: none;
}
.flag {
height: 18px;
margin: 0;
width: 18px;
}
.select .dialCode {
border: none;
color: var(--UI-Text-High-contrast);
line-height: 1;
justify-self: flex-start;
padding: 0;
}