fix: responsivity of fields and order of signup form

2024-11-18 15:07:23 +01:00
parent 9094b08345
commit d5c6b6809c
17 changed files with 264 additions and 262 deletions
--- a/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
+++ b/components/HotelReservation/EnterDetails/Details/Signup/index.tsx
@@ -4,14 +4,8 @@ import { useEffect, useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"

-import { privacyPolicy } from "@/constants/currentWebHrefs"
-
-import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"

@@ -31,49 +25,27 @@ export default function Signup({ name }: { name: string }) {
    setIsJoinChecked(joinValue)
  }, [joinValue])

-  return (
-    <div className={styles.container}>
-      <JoinScandicFriendsCard
-        name={name}
-        difference={{ price: 1000, currency: "SEK" }}
+  return isJoinChecked ? (
+    <div className={styles.additionalFormData}>
+      <Input
+        name="zipCode"
+        label={intl.formatMessage({ id: "Zip code" })}
+        registerOptions={{ required: true }}
      />
-      {isJoinChecked ? (
-        <div className={styles.additionalFormData}>
-          <div className={styles.dateField}>
-            <header>
-              <Caption type="bold">
-                {intl.formatMessage({ id: "Birth date" })} *
-              </Caption>
-            </header>
-            <DateSelect
-              name="dateOfBirth"
-              registerOptions={{ required: true }}
-            />
-            <Input
-              name="zipCode"
-              label={intl.formatMessage({ id: "Zip code" })}
-              registerOptions={{ required: true }}
-            />
-          </div>
-          <div>
-            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
-              <Body>
-                {intl.formatMessage({
-                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
-                })}{" "}
-                <Link
-                  variant="underscored"
-                  color="peach80"
-                  target="_blank"
-                  href={privacyPolicy[lang]}
-                >
-                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
-                </Link>
-              </Body>
-            </Checkbox>
-          </div>
-        </div>
-      ) : null}
+      <div className={styles.dateField}>
+        <header>
+          <Caption type="bold">
+            {intl.formatMessage({ id: "Birth date" })} *
+          </Caption>
+        </header>
+        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
+      </div>
    </div>
+  ) : (
+    <Input
+      label={intl.formatMessage({ id: "Membership no" })}
+      name="membershipNo"
+      type="tel"
+    />
  )
 }
--- a/components/HotelReservation/EnterDetails/Details/details.module.css
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -1,34 +1,30 @@
 .form {
  display: grid;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x3) 0px;
+  gap: var(--Spacing-x3);
+  margin-bottom: var(--Spacing-x3);
 }

 .container {
  display: grid;
-  gap: var(--Spacing-x1);
-  grid-template-columns: 1fr 1fr;
+  gap: var(--Spacing-x2);
  width: min(100%, 600px);
 }

+.header,
 .country,
 .email,
-.membershipNo,
+.signup,
 .phone {
  grid-column: 1/-1;
 }

 .footer {
-  display: grid;
-  gap: var(--Spacing-x3);
-  justify-items: flex-start;
  margin-top: var(--Spacing-x1);
 }

-@media screen and (min-width: 1367px) {
+@media screen and (min-width: 768px) {
  .form {
-    gap: var(--Spacing-x2);
-    padding: var(--Spacing-x3) 0px;
+    gap: var(--Spacing-x3);
  }

  .container {
@@ -36,18 +32,4 @@
    grid-template-columns: 1fr 1fr;
    width: min(100%, 600px);
  }
-
-  .country,
-  .email,
-  .membershipNo,
-  .phone {
-    grid-column: 1/-1;
-  }
-
-  .footer {
-    display: grid;
-    gap: var(--Spacing-x3);
-    justify-items: flex-start;
-    margin-top: var(--Spacing-x1);
-  }
 }
--- a/components/HotelReservation/EnterDetails/Details/index.tsx
+++ b/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}>
--- a/components/HotelReservation/EnterDetails/Details/schema.ts
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -15,7 +15,6 @@ export const notJoinDetailsSchema = baseDetailsSchema.merge(
    join: z.literal<boolean>(false),
    zipCode: z.string().optional(),
    dateOfBirth: z.string().optional(),
-    termsAccepted: z.boolean().default(false),
    membershipNo: z
      .string()
      .optional()
@@ -39,15 +38,6 @@ 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" }),
-    termsAccepted: z.literal<boolean>(true, {
-      errorMap: (err, ctx) => {
-        switch (err.code) {
-          case "invalid_literal":
-            return { message: "You must accept the terms and conditions" }
-        }
-        return { message: ctx.defaultError }
-      },
-    }),
    membershipNo: z.string().optional(),
  })
 )