fix: responsivity of fields and order of signup form

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,6 +10,7 @@ import { useStepsStore } from "@/stores/steps"
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
+import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
@@ -35,7 +36,6 @@ export default function Details({ user }: DetailsProps) {
     join: state.data.join,
     dateOfBirth: state.data.dateOfBirth,
     zipCode: state.data.zipCode,
-    termsAccepted: state.data.termsAccepted,
     membershipNo: state.data.membershipNo,
   }))
 
@@ -52,7 +52,6 @@ export default function Details({ user }: DetailsProps) {
       join: initialData.join,
       dateOfBirth: initialData.dateOfBirth,
       zipCode: initialData.zipCode,
-      termsAccepted: initialData.termsAccepted,
       membershipNo: initialData.membershipNo,
     },
     criteriaMode: "all",
@@ -69,6 +68,7 @@ export default function Details({ user }: DetailsProps) {
     [completeStep, updateDetails]
   )
 
+  const joinValue = methods.watch("join")
   return (
     <FormProvider {...methods}>
       <form
@@ -76,15 +76,21 @@ export default function Details({ user }: DetailsProps) {
         id={formID}
         onSubmit={methods.handleSubmit(onSubmit)}
       >
-        {user ? null : <Signup name="join" />}
-        <Footnote
-          color="uiTextHighContrast"
-          textTransform="uppercase"
-          type="label"
-        >
-          {intl.formatMessage({ id: "Guest information" })}
-        </Footnote>
+        {user ? null : (
+          <JoinScandicFriendsCard
+            name="join"
+            difference={{ price: 1000, currency: "SEK" }}
+          />
+        )}
         <div className={styles.container}>
+          <Footnote
+            color="uiTextHighContrast"
+            textTransform="uppercase"
+            type="label"
+            className={styles.header}
+          >
+            {intl.formatMessage({ id: "Guest information" })}
+          </Footnote>
           <Input
             label={intl.formatMessage({ id: "First name" })}
             name="firstName"
@@ -118,13 +124,10 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
-          {user || methods.watch("join") ? null : (
-            <Input
-              className={styles.membershipNo}
-              label={intl.formatMessage({ id: "Membership no" })}
-              name="membershipNo"
-              type="tel"
-            />
+          {user ? null : (
+            <div className={styles.signup}>
+              <Signup name="join" />
+            </div>
           )}
         </div>
         <footer className={styles.footer}>