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

5
components/HotelReservation/EnterDetails/Details/details.module.css
View File

@@ -1,10 +1,10 @@
.container {
.form {
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x3) 0px;
}
.form {
.container {
display: grid;
gap: var(--Spacing-x2);
grid-template-columns: 1fr 1fr;
@@ -13,6 +13,7 @@
.country,
.email,
.membershipNo,
.phone {
grid-column: 1/-1;
}

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

16
components/HotelReservation/EnterDetails/Details/schema.ts
View File

@@ -16,6 +16,21 @@ export const notJoinDetailsSchema = baseDetailsSchema.merge(
zipCode: z.string().optional(),
dateOfBirth: z.string().optional(),
termsAccepted: z.boolean().default(false),
membershipNo: z
.string()
.optional()
.refine((val) => {
if (val) {
return !val.match(/[^0-9]/g)
}
return true
}, "Only digits are allowed")
.refine((num) => {
if (num) {
return num.length === 14
}
return true
}, "Membership number needs to be 14 digits"),
})
)
@@ -33,6 +48,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
return { message: ctx.defaultError }
},
}),
membershipNo: z.string().optional(),
})
)

1
stores/enter-details.ts
View File

@@ -74,6 +74,7 @@ export function initEditDetailsState(
zipCode: "",
dateOfBirth: undefined,
termsAccepted: false,
membershipNo: "",
}
let inputUserData = {}