feat: merge stores, fix auto navigation, split summary

components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx

@@ -14,7 +14,7 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./joinScandicFriendsCard.module.css"
 
-import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
 
 export default function JoinScandicFriendsCard({
   name,
@@ -65,7 +65,6 @@ export default function JoinScandicFriendsCard({
           position="enter details"
           trackingId="join-scandic-friends-enter-details"
           variant="breadcrumb"
-          target="_blank"
         >
           {intl.formatMessage({ id: "Log in" })}
         </LoginButton>

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -4,8 +4,7 @@ import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -27,20 +26,11 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
-  const initialData = useDetailsStore((state) => ({
-    countryCode: state.data.countryCode,
-    email: state.data.email,
-    firstName: state.data.firstName,
-    lastName: state.data.lastName,
-    phoneNumber: state.data.phoneNumber,
-    join: state.data.join,
-    dateOfBirth: state.data.dateOfBirth,
-    zipCode: state.data.zipCode,
-    membershipNo: state.data.membershipNo,
-  }))
+  const initialData = useEnterDetailsStore((state) => state.formValues.guest)
 
-  const updateDetails = useDetailsStore((state) => state.actions.updateDetails)
-  const completeStep = useStepsStore((state) => state.completeStep)
+  const updateDetails = useEnterDetailsStore(
+    (state) => state.actions.updateDetails
+  )
 
   const methods = useForm<DetailsSchema>({
     defaultValues: {
@@ -63,9 +53,8 @@ export default function Details({ user, memberPrice }: DetailsProps) {
   const onSubmit = useCallback(
     (values: DetailsSchema) => {
       updateDetails(values)
-      completeStep()
     },
-    [completeStep, updateDetails]
+    [updateDetails]
   )
 
   return (

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -38,7 +38,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
     join: z.literal<boolean>(true),
     zipCode: z.string().min(1, { message: "Zip code is required" }),
     dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
-    membershipNo: z.string().optional(),
+    membershipNo: z.string().default(""),
   })
 )
 
@@ -50,13 +50,16 @@ export const guestDetailsSchema = z.discriminatedUnion("join", [
 // For signed in users we accept partial or invalid data. Users cannot
 // change their info in this flow, so we don't want to validate it.
 export const signedInDetailsSchema = z.object({
-  countryCode: z.string().optional(),
-  email: z.string().optional(),
-  firstName: z.string().optional(),
-  lastName: z.string().optional(),
-  phoneNumber: z.string().optional(),
+  countryCode: z.string().default(""),
+  email: z.string().default(""),
+  firstName: z.string().default(""),
+  lastName: z.string().default(""),
+  membershipNo: z.string().default(""),
+  phoneNumber: z.string().default(""),
   join: z
     .boolean()
     .optional()
     .transform((_) => false),
+  dateOfBirth: z.string().default(""),
+  zipCode: z.string().default(""),
 })