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

Merged in fix/LOY-260-use-same-phone-component (pull request #2336)

Browse Source 
fix(LOY-260): use same phone component in signup and edit profile as enter details

Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
Christian Andolf
2025-06-12 12:40:36 +00:00
parent 8c6f659f8f 6a0ce38f79
commit 2dd07eb6b8
8 changed files with 188 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,16 +2,17 @@
import { useIntl } from "react-intl"
import { Select } from "@scandic-hotels/design-system/Select"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getLocalizedLanguageOptions } from "@/constants/languages"
import Divider from "@/components/TempDesignSystem/Divider"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input"
import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
import Select from "@/components/TempDesignSystem/Form/Select"
import Body from "@/components/TempDesignSystem/Text/Body"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import useLang from "@/hooks/useLang"
import styles from "./formContent.module.css"
@@ -19,77 +20,66 @@ import styles from "./formContent.module.css"
export default function FormContent() {
const intl = useIntl()
const lang = useLang()
const languageOptions = getLocalizedLanguageOptions(lang)
const city = intl.formatMessage({
defaultMessage: "City",
})
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = `${intl.formatMessage({
defaultMessage: "Email",
})} ${intl
.formatMessage({
defaultMessage: "Address",
})
.toLowerCase()}`
const street = intl.formatMessage({
defaultMessage: "Address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const currentPassword = intl.formatMessage({
defaultMessage: "Current password",
})
const retypeNewPassword = intl.formatMessage({
defaultMessage: "Retype new password",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
return (
<>
<section className={styles.user}>
<header>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "User information",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "User information",
})}
</p>
</Typography>
</header>
<DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
<Input
data-hj-suppress
label={`${street} 1`}
label={`${intl.formatMessage({
defaultMessage: "Address",
})} 1`}
name="address.streetAddress"
/>
<Input data-hj-suppress label={city} name="address.city" />
<Input
data-hj-suppress
label={intl.formatMessage({
defaultMessage: "City",
})}
name="address.city"
/>
<div className={styles.container}>
<Input
data-hj-suppress
label={zipCode}
label={intl.formatMessage({
defaultMessage: "Zip code",
})}
name="address.zipCode"
registerOptions={{ required: true }}
inputMode="numeric"
/>
<CountrySelect
label={country}
label={intl.formatMessage({
defaultMessage: "Country",
})}
name="address.countryCode"
registerOptions={{ required: true }}
/>
</div>
<Input
label={email}
label={intl.formatMessage({
defaultMessage: "Email address",
})}
name="email"
registerOptions={{ required: true }}
type="email"
data-hj-suppress
/>
<DeprecatedPhone
label={phoneNumber}
<Phone
label={intl.formatMessage({
defaultMessage: "Phone number",
})}
name="phoneNumber"
data-hj-suppress
/>
@@ -104,21 +94,27 @@ export default function FormContent() {
<Divider className={styles.divider} color="subtle" />
<section className={styles.password}>
<header>
<Body textTransform="bold">
{intl.formatMessage({
defaultMessage: "Password",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
defaultMessage: "Password",
})}
</p>
</Typography>
</header>
<PasswordInput
data-hj-suppress
label={currentPassword}
label={intl.formatMessage({
defaultMessage: "Current password",
})}
name="password"
/>
<PasswordInput data-hj-suppress isNewPassword name="newPassword" />
<PasswordInput
data-hj-suppress
label={retypeNewPassword}
label={intl.formatMessage({
defaultMessage: "Retype new password",
})}
name="retypeNewPassword"
/>
</section>

55
apps/scandic-web/components/Forms/Signup/form.module.css
View File

@@ -1,52 +1,61 @@
.form {
display: grid;
gap: var(--Spacing-x5);
grid-area: form;
}
.title {
grid-area: title;
}
.formWrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
gap: var(--Space-x5);
}
.formWrapper,
.userInfo,
.password,
.terms {
align-self: flex-start;
.password {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x3);
}
.container {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
.container,
.terms {
display: grid;
gap: var(--Space-x2);
}
.nameInputs {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.dateField {
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
}
@media screen and (min-width: 1367px) {
.formWrapper {
gap: var(--Spacing-x5);
gap: var(--Space-x5);
}
.nameInputs {
grid-template-columns: 1fr 1fr;
}
.additional {
grid-template-columns: 2fr 5fr;
grid-template-areas:
"zip country"
"email email"
"phone phone";
& > div:nth-child(1) {
grid-area: zip;
}
& > div:nth-child(2) {
grid-area: country;
}
& > div:nth-child(3) {
grid-area: email;
}
& > div:nth-child(4) {
grid-area: phone;
}
}
.signUpButton {
width: fit-content;
}

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

@@ -1,28 +1,27 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { cx } from "class-variance-authority"
import { useRouter } from "next/navigation"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Typography } from "@scandic-hotels/design-system/Typography"
import {
membershipTermsAndConditions,
privacyPolicy,
} from "@/constants/webHrefs"
import { trpc } from "@/lib/trpc/client"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
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 Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { useFormTracking } from "@/components/TrackingSDK/hooks"
import useLang from "@/hooks/useLang"
@@ -37,18 +36,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
const intl = useIntl()
const router = useRouter()
const lang = useLang()
const country = intl.formatMessage({
defaultMessage: "Country",
})
const email = intl.formatMessage({
defaultMessage: "Email address",
})
const phoneNumber = intl.formatMessage({
defaultMessage: "Phone number",
})
const zipCode = intl.formatMessage({
defaultMessage: "Zip code",
})
const signupButtonText = intl.formatMessage({
defaultMessage: "Join now",
})
@@ -109,8 +97,12 @@ export default function SignupForm({ title }: SignUpFormProps) {
}
return (
<section className={styles.formWrapper}>
<Title as="h3">{title}</Title>
<div className={styles.formWrapper}>
{title ? (
<Typography variant="Title/md">
<h2>{title}</h2>
</Typography>
) : null}
<FormProvider {...methods}>
<form
className={styles.form}
@@ -120,11 +112,13 @@ export default function SignupForm({ title }: SignUpFormProps) {
<section className={styles.userInfo}>
<div className={styles.container}>
<header>
<Subtitle type="two">
{intl.formatMessage({
defaultMessage: "Contact information",
})}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h3>
{intl.formatMessage({
defaultMessage: "Contact information",
})}
</h3>
</Typography>
</header>
<div className={styles.nameInputs}>
<Input
@@ -144,46 +138,59 @@ export default function SignupForm({ title }: SignUpFormProps) {
</div>
</div>
<div className={styles.dateField}>
<header>
<Caption type="bold">
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
defaultMessage: "Birth date",
})}
</Caption>
</header>
</p>
</Typography>
<DateSelect
name="dateOfBirth"
registerOptions={{ required: true }}
/>
</div>
<div className={styles.container}>
<div className={cx(styles.container, styles.additional)}>
<Input
label={zipCode}
label={intl.formatMessage({
defaultMessage: "Zip code",
})}
name="address.zipCode"
registerOptions={{ required: true }}
inputMode="numeric"
/>
<CountrySelect
label={country}
label={intl.formatMessage({
defaultMessage: "Country",
})}
name="address.countryCode"
registerOptions={{ required: true }}
/>
<Input
label={intl.formatMessage({
defaultMessage: "Email address",
})}
name="email"
registerOptions={{ required: true }}
type="email"
/>
<Phone
label={intl.formatMessage({
defaultMessage: "Phone number",
})}
name="phoneNumber"
/>
</div>
<Input
label={email}
name="email"
registerOptions={{ required: true }}
type="email"
/>
<DeprecatedPhone label={phoneNumber} name="phoneNumber" />
</section>
<section className={styles.password}>
<header>
<Subtitle type="two">
{intl.formatMessage({
defaultMessage: "Password",
})}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h3>
{intl.formatMessage({
defaultMessage: "Password",
})}
</h3>
</Typography>
</header>
<PasswordInput
name="password"
@@ -195,48 +202,51 @@ export default function SignupForm({ title }: SignUpFormProps) {
</section>
<section className={styles.terms}>
<header>
<Subtitle type="two">
{intl.formatMessage({
defaultMessage: "Terms and conditions",
})}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h3>
{intl.formatMessage({
defaultMessage: "Terms and conditions",
})}
</h3>
</Typography>
</header>
<Checkbox name="termsAccepted" registerOptions={{ required: true }}>
{intl.formatMessage({
defaultMessage: "I accept",
})}
</Checkbox>
{/* TODO: Update copy once ready */}
<Body>
{intl.formatMessage(
{
defaultMessage:
"By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
},
{
termsAndConditionsLink: (str) => (
<Link
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={membershipTermsAndConditions[lang]}
>
{str}
</Link>
),
privacyPolicy: (str) => (
<Link
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={privacyPolicy[lang]}
>
{str}
</Link>
),
}
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{
defaultMessage:
"By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
},
{
termsAndConditionsLink: (str) => (
<Link
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={membershipTermsAndConditions[lang]}
>
{str}
</Link>
),
privacyPolicy: (str) => (
<Link
textDecoration="underline"
color="Text/Interactive/Secondary"
target="_blank"
href={privacyPolicy[lang]}
>
{str}
</Link>
),
}
)}
</p>
</Typography>
</section>
{/*
@@ -249,9 +259,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
<Button
className={styles.signUpButton}
type="submit"
theme="base"
intent="primary"
onClick={() => methods.trigger()}
variant="Primary"
onPress={() => methods.trigger()}
typography="Body/Paragraph/mdBold"
data-testid="trigger-validation"
>
{signupButtonText}
@@ -260,9 +270,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
<Button
className={styles.signUpButton}
type="submit"
theme="base"
intent="primary"
disabled={methods.formState.isSubmitting || signup.isPending}
variant="Primary"
isDisabled={methods.formState.isSubmitting || signup.isPending}
typography="Body/Paragraph/mdBold"
data-testid="submit"
>
{signupButtonText}
@@ -270,6 +280,6 @@ export default function SignupForm({ title }: SignUpFormProps) {
)}
</form>
</FormProvider>
</section>
</div>
)
}

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

@@ -4,8 +4,8 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./modifyContact.module.css"
@@ -73,7 +73,7 @@ export default function ModifyContact({
/>
</div>
<div className={styles.row}>
<DeprecatedPhone
<Phone
label={intl.formatMessage({
defaultMessage: "Phone number",
})}

157
apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
View File

@@ -1,157 +0,0 @@
"use client"
import "react-international-phone/style.css"
import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
import { TextField } from "react-aria-components"
import { useController, useFormContext, useWatch } from "react-hook-form"
import {
CountrySelector,
DialCodePreview,
type ParsedCountry,
usePhoneInput,
} from "react-international-phone"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { getDefaultCountryFromLang } from "@/constants/languages"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"
import styles from "./phone.module.css"
import type { ChangeEvent } from "react"
import type { PhoneProps } from "@/types/components/form/phone"
export default function Phone({
ariaLabel = "Phone number input",
className = "",
disabled = false,
label,
name = "phoneNumber",
placeholder,
readOnly = false,
registerOptions = {
required: true,
},
}: PhoneProps) {
const intl = useIntl()
const lang = useLang()
const { control, setValue, trigger } = useFormContext()
const phone = useWatch({ name })
const { field, fieldState, formState } = useController({
control,
disabled,
name,
rules: registerOptions,
})
const defaultPhoneNumber = formState.defaultValues?.phoneNumber
// If defaultPhoneNumber exists and is valid, parse it to get the country code,
// otherwise set the default country from the lang.
const defaultCountry = isValidPhoneNumber(defaultPhoneNumber)
? parsePhoneNumber(defaultPhoneNumber).country?.toLowerCase()
: getDefaultCountryFromLang(lang)
const { country, handlePhoneValueChange, inputValue, setCountry } =
usePhoneInput({
defaultCountry,
disableDialCodeAndPrefix: true,
forceDialCode: true,
value: phone,
onChange: (value) => {
// If not checked trigger(name) forces validation on mount
// which shows error message before user even can see the form
if (value.inputValue) {
setValue(name, value.phone)
trigger(name)
} else {
setValue(name, "")
}
},
})
function handleSelectCountry(value: ParsedCountry) {
setCountry(value.iso2)
}
function handleChange(evt: ChangeEvent<HTMLInputElement>) {
handlePhoneValueChange(evt)
}
return (
<div className={`${styles.phone} ${className}`}>
<CountrySelector
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}
defaultValue={field.value}
isDisabled={disabled ?? field.disabled}
isInvalid={fieldState.invalid}
isRequired={!!registerOptions?.required}
isReadOnly={readOnly}
name={field.name}
type="tel"
>
<AriaInputWithLabel
{...field}
// hack used since chrome does not respect autocomplete="off"
autoComplete="nope"
id={field.name}
label={label}
onChange={handleChange}
placeholder={placeholder}
readOnly={readOnly}
required={!!registerOptions.required}
type="tel"
value={inputValue}
/>
<ErrorMessage errors={formState.errors} name={field.name} />
</TextField>
</div>
)
}

108
apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
View File

@@ -1,108 +0,0 @@
.phone {
display: grid;
grid-template-columns: 1fr;
gap: var(--Spacing-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(--Spacing-x1)
);
--react-international-phone-dial-code-preview-font-size: var(
--typography-Body-Regular-fontSize
);
}
@media (min-width: 385px) {
.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(--Spacing-x1);
outline: none;
padding: var(--Spacing-x2);
}
.phone
:global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x-one-and-half);
}
.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(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Spacing-x-half);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
transition: border-color 200ms ease;
}
.select {
width: 100%;
}
.select[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
.selectContainer {
background-color: var(--Main-Grey-White);
border: none;
display: grid;
gap: var(--Spacing-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;
}

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

@@ -32,7 +32,7 @@ export default function Phone({
disabled = false,
label,
name = "phoneNumber",
placeholder = "",
placeholder,
readOnly = false,
registerOptions = {
required: true,

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

@@ -1,7 +1,7 @@
.phone {
display: grid;
grid-template-columns: 1fr;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
--react-international-phone-background-color: var(--Main-Grey-White);
--react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -17,7 +17,7 @@
--react-international-phone-height: 60px;
--react-international-phone-dropdown-top: calc(
var(--react-international-phone-height) + var(--Spacing-x1)
var(--react-international-phone-height) + var(--Space-x1)
);
--react-international-phone-dial-code-preview-font-size: var(
--Body-Paragraph-Size
@@ -27,7 +27,7 @@
);
}
@media (min-width: 385px) {
@media (min-width: 400px) {
.phone {
grid-template-columns: minmax(124px, 164px) 1fr;
}
@@ -41,16 +41,15 @@
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(--Spacing-x1);
gap: var(--Space-x1);
outline: none;
padding: var(--Spacing-x2);
padding: var(--Space-x2);
}
.phone
:global(.react-international-phone-country-selector-dropdown__list-item) {
border-radius: var(--Corner-radius-md);
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x-one-and-half);
padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
font-family: var(--Body-Paragraph-Font-family);
}
@@ -67,14 +66,11 @@
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease;
}
.select {
width: 100%;
}
@@ -86,7 +82,7 @@
background-color: var(--Main-Grey-White);
border: none;
display: grid;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
grid-template-columns: auto 1fr auto;
height: 18px;
justify-content: flex-start;