feat: add multiroom signup

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { CheckIcon } from "@/components/Icons"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { useRoomContext } from "@/contexts/Details/Room"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+
+export default function JoinScandicFriendsCard({
+  name = "join",
+}: JoinScandicFriendsCardProps) {
+  const intl = useIntl()
+  const { room, roomNr } = useRoomContext()
+
+  if (!room.roomRate.memberRate) {
+    return null
+  }
+
+  const list = [
+    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+    { title: intl.formatMessage({ id: "Join at no cost" }) },
+  ]
+
+  const saveOnJoiningLabel = intl.formatMessage(
+    {
+      id: "Pay the member price of {amount} for Room {roomNr}",
+    },
+    {
+      amount: formatPrice(
+        intl,
+        room.roomRate.memberRate.localPrice.pricePerStay,
+        room.roomRate.memberRate.localPrice.currency
+      ),
+      roomNr,
+    }
+  )
+
+  return (
+    <div className={styles.cardContainer}>
+      <Checkbox name={name} className={styles.checkBox}>
+        <div>
+          <Caption type="label" textTransform="uppercase" color="red">
+            {saveOnJoiningLabel}
+          </Caption>
+          <Caption color="uiTextHighContrast">
+            {intl.formatMessage({
+              id: "I promise to join Scandic Friends before checking in",
+            })}
+          </Caption>
+        </div>
+      </Checkbox>
+
+      <div className={styles.list}>
+        {list.map((item) => (
+          <Caption
+            key={item.title}
+            className={styles.listItem}
+            color="uiTextPlaceholder"
+          >
+            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+          </Caption>
+        ))}
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -0,0 +1,35 @@
+.cardContainer {
+  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);
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  width: min(100%, 600px);
+}
+
+.checkBox {
+  align-self: center;
+}
+
+.list {
+  display: flex;
+  gap: var(--Spacing-x1);
+  flex-direction: column;
+}
+
+.listItem {
+  display: flex;
+}
+
+@media screen and (min-width: 768px) {
+  .cardContainer {
+    gap: var(--Spacing-x1);
+  }
+
+  .list {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/details.module.css

@@ -0,0 +1,30 @@
+.form {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  width: min(100%, 600px);
+}
+
+.fullWidth {
+  grid-column: 1/-1;
+}
+
+.footer {
+  margin-top: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .form {
+    gap: var(--Spacing-x3);
+  }
+
+  .container {
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 600px);
+  }
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -0,0 +1,142 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+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 Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { useRoomContext } from "@/contexts/Details/Room"
+
+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
+import { multiroomDetailsSchema } from "./schema"
+
+import styles from "./details.module.css"
+
+import type { MultiroomDetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
+
+const formID = "enter-details"
+export default function Details() {
+  const intl = useIntl()
+
+  const { activeRoom, canProceedToPayment, lastRoom } = useEnterDetailsStore(
+    (state) => ({
+      activeRoom: state.activeRoom,
+      canProceedToPayment: state.canProceedToPayment,
+      lastRoom: state.lastRoom,
+    })
+  )
+
+  const {
+    actions: { updateDetails },
+    room,
+    roomNr,
+  } = useRoomContext()
+  const initialData = room.guest
+
+  const isPaymentNext = activeRoom === lastRoom
+
+  const methods = useForm<MultiroomDetailsSchema>({
+    criteriaMode: "all",
+    mode: "all",
+    resolver: zodResolver(multiroomDetailsSchema),
+    reValidateMode: "onChange",
+    values: {
+      countryCode: initialData.countryCode,
+      email: initialData.email,
+      firstName: initialData.firstName,
+      join: initialData.join,
+      lastName: initialData.lastName,
+      membershipNo: initialData.membershipNo,
+      phoneNumber: initialData.phoneNumber,
+    },
+  })
+
+  const guestIsGoingToJoin = methods.watch("join")
+  const guestIsMember = methods.watch("membershipNo")
+
+  return (
+    <FormProvider {...methods}>
+      <form
+        className={styles.form}
+        id={`${formID}-room-${roomNr}`}
+        onSubmit={methods.handleSubmit(updateDetails)}
+      >
+        {guestIsMember ? null : <JoinScandicFriendsCard />}
+        <div className={styles.container}>
+          <Footnote
+            color="uiTextHighContrast"
+            textTransform="uppercase"
+            type="label"
+            className={styles.fullWidth}
+          >
+            {intl.formatMessage({ id: "Guest information" })}
+          </Footnote>
+          <Input
+            label={intl.formatMessage({ id: "First name" })}
+            maxLength={30}
+            name="firstName"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            label={intl.formatMessage({ id: "Last name" })}
+            maxLength={30}
+            name="lastName"
+            registerOptions={{ required: true }}
+          />
+          <CountrySelect
+            className={styles.fullWidth}
+            label={intl.formatMessage({ id: "Country" })}
+            name="countryCode"
+            registerOptions={{ required: true }}
+          />
+          <Input
+            className={styles.fullWidth}
+            label={intl.formatMessage({ id: "Email address" })}
+            name="email"
+            registerOptions={{ required: true }}
+          />
+          <Phone
+            className={styles.fullWidth}
+            label={intl.formatMessage({ id: "Phone number" })}
+            name="phoneNumber"
+            registerOptions={{ required: true }}
+          />
+          {guestIsGoingToJoin ? null : (
+            <Input
+              className={styles.fullWidth}
+              label={intl.formatMessage({ id: "Membership no" })}
+              name="membershipNo"
+              type="tel"
+            />
+          )}
+        </div>
+        <footer className={styles.footer}>
+          <Button
+            disabled={
+              !(
+                methods.formState.isValid ||
+                (isPaymentNext && canProceedToPayment)
+              )
+            }
+            intent="secondary"
+            size="small"
+            theme="base"
+            type="submit"
+          >
+            {isPaymentNext
+              ? intl.formatMessage({ id: "Proceed to payment method" })
+              : intl.formatMessage(
+                  { id: "Continue to room {nextRoomNumber}" },
+                  { nextRoomNumber: roomNr + 1 }
+                )}
+          </Button>
+        </footer>
+      </form>
+    </FormProvider>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/schema.ts

@@ -0,0 +1,43 @@
+import { z } from "zod"
+
+import { phoneValidator } from "@/utils/zod/phoneValidator"
+
+// stringMatcher regex is copied from current web as specified by requirements.
+const stringMatcher =
+  /^[A-Za-z¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ0-9-\s]*$/
+
+const isValidString = (key: string) => stringMatcher.test(key)
+
+export const multiroomDetailsSchema = z.object({
+  countryCode: z.string().min(1, { message: "Country is required" }),
+  email: z.string().email({ message: "Email address is required" }),
+  firstName: z
+    .string()
+    .min(1, { message: "First name is required" })
+    .refine(isValidString, {
+      message: "First name can't contain any special characters",
+    }),
+  join: z.boolean().default(false),
+  lastName: z
+    .string()
+    .min(1, { message: "Last name is required" })
+    .refine(isValidString, {
+      message: "Last name can't contain any special characters",
+    }),
+  phoneNumber: phoneValidator(),
+  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.match(/^30812(?!(0|1|2))[0-9]{9}$/)
+      }
+      return true
+    }, "Invalid membership number format"),
+})