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

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

@@ -16,6 +16,21 @@ export const notJoinDetailsSchema = baseDetailsSchema.merge(
zipCode: z.string().optional(), zipCode: z.string().optional(),
dateOfBirth: z.string().optional(), dateOfBirth: z.string().optional(),
termsAccepted: z.boolean().default(false), 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 } return { message: ctx.defaultError }
}, },
}), }),
membershipNo: z.string().optional(),
}) })
) )

1
stores/enter-details.ts
View File

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