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

feat: validate optional membership number for non-logged in users

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-11-07 13:16:23 +01:00
parent 4e3bb9a334
commit 66f4a310d3
4 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/HotelReservation/EnterDetails/Details/index.tsx
View File

@@ -9,7 +9,7 @@ import Button from "@/components/TempDesignSystem/Button"
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import Signup from "./Signup"
@@ -34,6 +34,7 @@ export default function Details({ user }: DetailsProps) {
dateOfBirth: state.userData.dateOfBirth,
zipCode: state.userData.zipCode,
termsAccepted: state.userData.termsAccepted,
membershipNo: state.userData.membershipNo,
}))
const methods = useForm<DetailsSchema>({
@@ -47,6 +48,7 @@ export default function Details({ user }: DetailsProps) {
dateOfBirth: initialData.dateOfBirth,
zipCode: initialData.zipCode,
termsAccepted: initialData.termsAccepted,
membershipNo: initialData.membershipNo,
},
criteriaMode: "all",
mode: "all",
@@ -58,17 +60,20 @@ export default function Details({ user }: DetailsProps) {
return (
<FormProvider {...methods}>
<section className={styles.container}>
<header>
<Body color="uiTextHighContrast" textTransform="bold">
{intl.formatMessage({ id: "Guest information" })}
</Body>
</header>
<form
className={styles.form}
id={formID}
onSubmit={methods.handleSubmit(completeStep)}
<form
className={styles.form}
id={formID}
onSubmit={methods.handleSubmit(completeStep)}
>
{user ? null : <Signup name="join" />}
<Footnote
color="uiTextHighContrast"
textTransform="uppercase"
type="label"
>
{intl.formatMessage({ id: "Guest information" })}
</Footnote>
<div className={styles.container}>
<Input
label={intl.formatMessage({ id: "First name" })}
name="firstName"
@@ -102,8 +107,15 @@ export default function Details({ user }: DetailsProps) {
readOnly={!!user}
registerOptions={{ required: true }}
/>
{user ? null : <Signup name="join" />}
</form>
{user ? null : (
<Input
className={styles.membershipNo}
label={intl.formatMessage({ id: "Membership no" })}
name="membershipNo"
type="tel"
/>
)}
</div>
<footer className={styles.footer}>
<Button
disabled={!methods.formState.isValid}
@@ -116,7 +128,7 @@ export default function Details({ user }: DetailsProps) {
{intl.formatMessage({ id: "Proceed to payment method" })}
</Button>
</footer>
</section>
</form>
</FormProvider>
)
}