feat: select bed type

2024-10-03 11:12:36 +02:00
parent 150f0f0e4e
commit e6b22b81f4
26 changed files with 433 additions and 169 deletions
@@ -0,0 +1,7 @@
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  padding-bottom: var(--Spacing-x3);
+  width: min(600px, 100%);
+}
@@ -0,0 +1,75 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { KingBedIcon } from "@/components/Icons"
+import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+
+import { bedTypeSchema } from "./schema"
+
+import styles from "./bedOptions.module.css"
+
+import type { BedTypeSchema } from "@/types/components/enterDetails/bedType"
+import { bedTypeEnum } from "@/types/enums/bedType"
+
+export default function BedType() {
+  const intl = useIntl()
+
+  const methods = useForm<BedTypeSchema>({
+    defaultValues: {
+      bed: bedTypeEnum.KING,
+    },
+    criteriaMode: "all",
+    mode: "all",
+    resolver: zodResolver(bedTypeSchema),
+    reValidateMode: "onChange",
+  })
+
+  // @ts-expect-error - Types mismatch docs as this is
+  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
+  const text = intl.formatMessage(
+    { id: "<b>Included</b> (based on availability)" },
+    { b: (str) => <b>{str}</b> }
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <form className={styles.form}>
+        <RadioCard
+          Icon={KingBedIcon}
+          iconWidth={46}
+          id={bedTypeEnum.KING}
+          name="bed"
+          subtitle={intl.formatMessage(
+            { id: "{width} cm × {length} cm" },
+            {
+              length: "210",
+              width: "180",
+            }
+          )}
+          text={text}
+          title={intl.formatMessage({ id: "King bed" })}
+          value={bedTypeEnum.KING}
+        />
+        <RadioCard
+          Icon={KingBedIcon}
+          iconWidth={46}
+          id={bedTypeEnum.QUEEN}
+          name="bed"
+          subtitle={intl.formatMessage(
+            { id: "{width} cm × {length} cm" },
+            {
+              length: "200",
+              width: "160",
+            }
+          )}
+          text={text}
+          title={intl.formatMessage({ id: "Queen bed" })}
+          value={bedTypeEnum.QUEEN}
+        />
+      </form>
+    </FormProvider>
+  )
+}
@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+import { bedTypeEnum } from "@/types/enums/bedType"
+
+export const bedTypeSchema = z.object({
+  bed: z.nativeEnum(bedTypeEnum),
+})
@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Checkbox/Card"
+import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -36,6 +36,7 @@ export default function Details({ user }: DetailsProps) {
      lastname: user?.lastName ?? "",
      phoneNumber: user?.phoneNumber ?? "",
    },
+    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema),
    reValidateMode: "onChange",
@@ -0,0 +1,27 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function KingBedIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="33"
+      viewBox="0 0 46 33"
+      width="46"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="bed king">
+        <path
+          clipRule="evenodd"
+          fillRule="evenodd"
+          id="Shape"
+          d="M43.4073 15.8263C44.9964 17.3421 46 19.4474 46 22.2263V22.3947V22.4789V30.9C46 31.7421 45.2473 32.5 44.3273 32.5H42.2364C41.3164 32.5 40.5636 31.7421 40.5636 30.9V27.1105H5.52V30.9C5.52 31.7421 4.76727 32.5 3.84727 32.5H1.67273C0.752727 32.5 0 31.7421 0 30.9V22.3947C0 20.2053 0.501818 18.5211 1.25455 17.0895V17.0053V1.34211C1.25455 0.921053 1.67273 0.5 2.09091 0.5H42.5709C43.0727 0.5 43.4073 0.836842 43.4073 1.34211V15.8263ZM1.67273 21.5526H44.3273C44.0764 18.1842 42.0691 16.1632 39.0582 14.8158C38.9745 14.8158 38.8909 14.8158 38.8073 14.7316C34.4582 13.0474 28.1018 13.0474 22.1636 13.0474C10.5382 13.0474 2.17455 13.7211 1.67273 21.5526ZM5.93818 13.3V11.9526C5.93818 6.81579 11.2909 6.22632 13.6327 6.22632C15.8909 6.22632 20.9927 6.73158 21.3273 11.4474C15.8909 11.4474 10.12 11.5316 5.93818 13.3ZM23 11.3632V11.4474C28.1018 11.4474 33.8727 11.5316 38.3891 13.0474V11.3632C38.3891 6.22632 33.0364 5.63684 30.6945 5.63684C28.3527 5.63684 23 6.22632 23 11.3632ZM41.7345 2.18421V14.4789C41.2327 14.1421 40.6473 13.8895 40.0618 13.6368V11.2789C40.0618 6.73158 36.5491 3.95263 30.6945 3.95263C26.3455 3.95263 23.2509 5.46842 21.9964 8.16316C20.5745 5.97368 17.7309 4.71053 13.7164 4.71053C7.86182 4.71053 4.34909 7.40526 4.34909 12.0368V14.1421C3.84727 14.4789 3.42909 14.8158 3.01091 15.1526V2.18421H41.7345ZM1.67273 30.9H3.84727V27.1105H1.67273V30.9ZM1.67273 25.5105V23.1526H44.3273V25.5105H1.67273ZM42.1527 27.1105V30.9H44.3273V27.1105H42.1527Z"
+        />
+      </g>
+    </svg>
+  )
+}
@@ -34,6 +34,7 @@ export { default as HeartIcon } from "./Heart"
 export { default as HouseIcon } from "./House"
 export { default as ImageIcon } from "./Image"
 export { default as InfoCircleIcon } from "./InfoCircle"
+export { default as KingBedIcon } from "./KingBed"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
 export { default as MapIcon } from "./Map"
@@ -0,0 +1,7 @@
+import Card from "."
+
+import type { CheckboxProps } from "./card"
+
+export default function CheckboxCard(props: CheckboxProps) {
+  return <Card {...props} type="checkbox" />
+}
@@ -0,0 +1,7 @@
+import Card from "."
+
+import type { RadioProps } from "./card"
+
+export default function RadioCard(props: RadioProps) {
+  return <Card {...props} type="radio" />
+}
@@ -1,70 +1,72 @@
-.checkbox {
+.label {
+  align-self: flex-start;
  background-color: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
  border-radius: var(--Corner-radius-Large);
  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x1);
+  display: grid;
+  grid-template-columns: 1fr auto;
  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
  transition: all 200ms ease;
  width: min(100%, 600px);
 }

-.checkbox:hover {
+.label:hover {
  background-color: var(--Base-Surface-Secondary-light-Hover);
 }

-.checkbox:has(:checked) {
+.label:has(:checked) {
  background-color: var(--Primary-Light-Surface-Normal);
  border-color: var(--Base-Border-Hover);
 }

-.header {
-  align-items: center;
-  display: grid;
-  gap: 0px var(--Spacing-x1);
-  grid-template-areas:
-    "title    icon"
-    "subtitle icon";
-}
-
 .icon {
-  grid-area: icon;
+  align-self: center;
+  grid-column: 2/3;
+  grid-row: 1/3;
  justify-self: flex-end;
  transition: fill 200ms ease;
 }

-.checkbox:hover .icon,
-.checkbox:hover .icon *,
-.checkbox:has(:checked) .icon,
-.checkbox:has(:checked) .icon * {
+.label:hover .icon,
+.label:hover .icon *,
+.label:has(:checked) .icon,
+.label:has(:checked) .icon * {
  fill: var(--Base-Text-Medium-contrast);
 }

-.checkbox[data-declined="true"]:hover .icon,
-.checkbox[data-declined="true"]:hover .icon *,
-.checkbox[data-declined="true"]:has(:checked) .icon,
-.checkbox[data-declined="true"]:has(:checked) .icon * {
+.label[data-declined="true"]:hover .icon,
+.label[data-declined="true"]:hover .icon *,
+.label[data-declined="true"]:has(:checked) .icon,
+.label[data-declined="true"]:has(:checked) .icon * {
  fill: var(--Base-Text-Disabled);
 }

 .subtitle {
-  grid-area: subtitle;
+  grid-column: 1 / 2;
+  grid-row: 2;
 }

 .title {
-  grid-area: title;
+  grid-column: 1 / 2;
 }

-.list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.label .text {
+  margin-top: var(--Spacing-x1);
+  grid-column: 1/-1;
 }

 .listItem {
  align-items: center;
  display: flex;
  gap: var(--Spacing-x-quarter);
+  grid-column: 1/-1;
+}
+
+.listItem:first-of-type {
+  margin-top: var(--Spacing-x1);
+}
+
+.listItem:nth-of-type(n + 2) {
+  margin-top: var(--Spacing-x-quarter);
 }
@@ -0,0 +1,35 @@
+import type { IconProps } from "@/types/components/icon"
+
+interface BaseCardProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  Icon?: (props: IconProps) => JSX.Element
+  declined?: boolean
+  iconHeight?: number
+  iconWidth?: number
+  name?: string
+  saving?: boolean
+  subtitle?: string
+  title: string
+  type: "checkbox" | "radio"
+  value?: string
+}
+
+interface ListCardProps extends BaseCardProps {
+  list: {
+    title: string
+  }[]
+  text?: never
+}
+
+interface TextCardProps extends BaseCardProps {
+  list?: never
+  text: string
+}
+
+export type CardProps = ListCardProps | TextCardProps
+
+export type CheckboxProps =
+  | Omit<ListCardProps, "type">
+  | Omit<TextCardProps, "type">
+export type RadioProps =
+  | Omit<ListCardProps, "type">
+  | Omit<TextCardProps, "type">
@@ -0,0 +1,77 @@
+"use client"
+
+import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./card.module.css"
+
+import type { CardProps } from "./card"
+
+export default function Card({
+  Icon = HeartIcon,
+  iconHeight = 32,
+  iconWidth = 32,
+  declined = false,
+  id,
+  list,
+  name = "join",
+  saving = false,
+  subtitle,
+  text,
+  title,
+  type,
+  value,
+}: CardProps) {
+  return (
+    <label className={styles.label} data-declined={declined}>
+      <Caption className={styles.title} textTransform="bold" uppercase>
+        {title}
+      </Caption>
+      {subtitle ? (
+        <Caption
+          className={styles.subtitle}
+          color={saving ? "baseTextAccent" : "uiTextHighContrast"}
+          textTransform="bold"
+        >
+          {subtitle}
+        </Caption>
+      ) : null}
+      <Icon
+        className={styles.icon}
+        color="uiTextHighContrast"
+        height={iconHeight}
+        width={iconWidth}
+      />
+      {list
+        ? list.map((listItem) => (
+            <span key={listItem.title} className={styles.listItem}>
+              {declined ? (
+                <CloseIcon
+                  color="uiTextMediumContrast"
+                  height={20}
+                  width={20}
+                />
+              ) : (
+                <CheckIcon color="baseIconLowContrast" height={20} width={20} />
+              )}
+              <Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
+            </span>
+          ))
+        : null}
+      {text ? (
+        <Footnote className={styles.text} color="uiTextMediumContrast">
+          {text}
+        </Footnote>
+      ) : null}
+      <input
+        aria-hidden
+        id={id || name}
+        hidden
+        name={name}
+        type={type}
+        value={value}
+      />
+    </label>
+  )
+}
@@ -1,14 +0,0 @@
-import type { IconProps } from "@/types/components/icon"
-
-export interface CheckboxCardProps {
-  Icon?: (props: IconProps) => JSX.Element
-  declined?: boolean
-  list?: {
-    title: string
-  }[]
-  name?: string
-  saving?: boolean
-  subtitle?: string
-  text?: string
-  title: string
-}
@@ -1,65 +0,0 @@
-"use client"
-
-import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
-
-import styles from "./card.module.css"
-
-import type { CheckboxCardProps } from "./card"
-
-export default function CheckboxCard({
-  Icon = HeartIcon,
-  declined = false,
-  list,
-  name = "join",
-  saving = false,
-  subtitle,
-  text,
-  title,
-}: CheckboxCardProps) {
-  return (
-    <label className={styles.checkbox} data-declined={declined} htmlFor={name}>
-      <header className={styles.header}>
-        <Caption className={styles.title} textTransform="bold" uppercase>
-          {title}
-        </Caption>
-        {subtitle ? (
-          <Caption
-            className={styles.subtitle}
-            color={saving ? "baseTextAccent" : "uiTextHighContrast"}
-            textTransform="bold"
-          >
-            {subtitle}
-          </Caption>
-        ) : null}
-        <Icon
-          className={styles.icon}
-          color="uiTextHighContrast"
-          height={32}
-          width={32}
-        />
-      </header>
-      {list ? (
-        <ul className={styles.list}>
-          {list.map((listItem) => (
-            <li key={listItem.title} className={styles.listItem}>
-              {declined ? (
-                <CloseIcon
-                  color="uiTextMediumContrast"
-                  height={20}
-                  width={20}
-                />
-              ) : (
-                <CheckIcon color="baseIconLowContrast" height={20} width={20} />
-              )}
-              <Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      {text ? <Footnote color="uiTextMediumContrast">{text}</Footnote> : null}
-      <input aria-hidden id={name} hidden name={name} type="checkbox" />
-    </label>
-  )
-}