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