fix(LOY-260): use same phone component in signup and edit profile as enter details

remove old select from edit profile

update typography

apps/scandic-web/components/Forms/Signup/form.module.css

@@ -1,52 +1,61 @@
 .form {
   display: grid;
-  gap: var(--Spacing-x5);
-  grid-area: form;
-}
-
-.title {
-  grid-area: title;
-}
-
-.formWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
+  gap: var(--Space-x5);
 }
 
+.formWrapper,
 .userInfo,
-.password,
-.terms {
-  align-self: flex-start;
+.password {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x3);
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
+.container,
+.terms {
+  display: grid;
+  gap: var(--Space-x2);
 }
 
 .nameInputs {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
 }
 
 .dateField {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 @media screen and (min-width: 1367px) {
   .formWrapper {
-    gap: var(--Spacing-x5);
+    gap: var(--Space-x5);
   }
 
   .nameInputs {
     grid-template-columns: 1fr 1fr;
   }
 
+  .additional {
+    grid-template-columns: 2fr 5fr;
+    grid-template-areas:
+      "zip country"
+      "email email"
+      "phone phone";
+
+    & > div:nth-child(1) {
+      grid-area: zip;
+    }
+    & > div:nth-child(2) {
+      grid-area: country;
+    }
+    & > div:nth-child(3) {
+      grid-area: email;
+    }
+    & > div:nth-child(4) {
+      grid-area: phone;
+    }
+  }
+
   .signUpButton {
     width: fit-content;
   }

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -1,28 +1,27 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { cx } from "class-variance-authority"
 import { useRouter } from "next/navigation"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import {
   membershipTermsAndConditions,
   privacyPolicy,
 } from "@/constants/webHrefs"
 import { trpc } from "@/lib/trpc/client"
 
-import Button from "@/components/TempDesignSystem/Button"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
-import DeprecatedPhone from "@/components/TempDesignSystem/Form/DeprecatedPhone"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import useLang from "@/hooks/useLang"
@@ -37,18 +36,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
   const intl = useIntl()
   const router = useRouter()
   const lang = useLang()
-  const country = intl.formatMessage({
-    defaultMessage: "Country",
-  })
-  const email = intl.formatMessage({
-    defaultMessage: "Email address",
-  })
-  const phoneNumber = intl.formatMessage({
-    defaultMessage: "Phone number",
-  })
-  const zipCode = intl.formatMessage({
-    defaultMessage: "Zip code",
-  })
+
   const signupButtonText = intl.formatMessage({
     defaultMessage: "Join now",
   })
@@ -109,8 +97,12 @@ export default function SignupForm({ title }: SignUpFormProps) {
   }
 
   return (
-    <section className={styles.formWrapper}>
-      <Title as="h3">{title}</Title>
+    <div className={styles.formWrapper}>
+      {title ? (
+        <Typography variant="Title/md">
+          <h2>{title}</h2>
+        </Typography>
+      ) : null}
       <FormProvider {...methods}>
         <form
           className={styles.form}
@@ -120,11 +112,13 @@ export default function SignupForm({ title }: SignUpFormProps) {
           <section className={styles.userInfo}>
             <div className={styles.container}>
               <header>
-                <Subtitle type="two">
-                  {intl.formatMessage({
-                    defaultMessage: "Contact information",
-                  })}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <h3>
+                    {intl.formatMessage({
+                      defaultMessage: "Contact information",
+                    })}
+                  </h3>
+                </Typography>
               </header>
               <div className={styles.nameInputs}>
                 <Input
@@ -144,45 +138,58 @@ export default function SignupForm({ title }: SignUpFormProps) {
               </div>
             </div>
             <div className={styles.dateField}>
-              <header>
-                <Caption type="bold">
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <p>
                   {intl.formatMessage({
                     defaultMessage: "Birth date",
                   })}
-                </Caption>
-              </header>
+                </p>
+              </Typography>
               <DateSelect
                 name="dateOfBirth"
                 registerOptions={{ required: true }}
               />
             </div>
-            <div className={styles.container}>
+            <div className={cx(styles.container, styles.additional)}>
               <Input
-                label={zipCode}
+                label={intl.formatMessage({
+                  defaultMessage: "Zip code",
+                })}
                 name="address.zipCode"
                 registerOptions={{ required: true }}
               />
               <CountrySelect
-                label={country}
+                label={intl.formatMessage({
+                  defaultMessage: "Country",
+                })}
                 name="address.countryCode"
                 registerOptions={{ required: true }}
               />
+              <Input
+                label={intl.formatMessage({
+                  defaultMessage: "Email address",
+                })}
+                name="email"
+                registerOptions={{ required: true }}
+                type="email"
+              />
+              <Phone
+                label={intl.formatMessage({
+                  defaultMessage: "Phone number",
+                })}
+                name="phoneNumber"
+              />
             </div>
-            <Input
-              label={email}
-              name="email"
-              registerOptions={{ required: true }}
-              type="email"
-            />
-            <DeprecatedPhone label={phoneNumber} name="phoneNumber" />
           </section>
           <section className={styles.password}>
             <header>
-              <Subtitle type="two">
-                {intl.formatMessage({
-                  defaultMessage: "Password",
-                })}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <h3>
+                  {intl.formatMessage({
+                    defaultMessage: "Password",
+                  })}
+                </h3>
+              </Typography>
             </header>
             <PasswordInput
               name="password"
@@ -194,48 +201,51 @@ export default function SignupForm({ title }: SignUpFormProps) {
           </section>
           <section className={styles.terms}>
             <header>
-              <Subtitle type="two">
-                {intl.formatMessage({
-                  defaultMessage: "Terms and conditions",
-                })}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <h3>
+                  {intl.formatMessage({
+                    defaultMessage: "Terms and conditions",
+                  })}
+                </h3>
+              </Typography>
             </header>
             <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
               {intl.formatMessage({
                 defaultMessage: "I accept",
               })}
             </Checkbox>
-            {/* TODO: Update copy once ready */}
-            <Body>
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
-                },
-                {
-                  termsAndConditionsLink: (str) => (
-                    <Link
-                      textDecoration="underline"
-                      color="Text/Interactive/Secondary"
-                      target="_blank"
-                      href={membershipTermsAndConditions[lang]}
-                    >
-                      {str}
-                    </Link>
-                  ),
-                  privacyPolicy: (str) => (
-                    <Link
-                      textDecoration="underline"
-                      color="Text/Interactive/Secondary"
-                      target="_blank"
-                      href={privacyPolicy[lang]}
-                    >
-                      {str}
-                    </Link>
-                  ),
-                }
-              )}
-            </Body>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>
+                {intl.formatMessage(
+                  {
+                    defaultMessage:
+                      "By accepting the <termsAndConditionsLink>Terms and Conditions for Scandic Friends</termsAndConditionsLink> I understand that my personal data will be processed in accordance with <privacyPolicy>Scandic's Privacy Policy</privacyPolicy>.",
+                  },
+                  {
+                    termsAndConditionsLink: (str) => (
+                      <Link
+                        textDecoration="underline"
+                        color="Text/Interactive/Secondary"
+                        target="_blank"
+                        href={membershipTermsAndConditions[lang]}
+                      >
+                        {str}
+                      </Link>
+                    ),
+                    privacyPolicy: (str) => (
+                      <Link
+                        textDecoration="underline"
+                        color="Text/Interactive/Secondary"
+                        target="_blank"
+                        href={privacyPolicy[lang]}
+                      >
+                        {str}
+                      </Link>
+                    ),
+                  }
+                )}
+              </p>
+            </Typography>
           </section>
 
           {/*
@@ -248,9 +258,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
             <Button
               className={styles.signUpButton}
               type="submit"
-              theme="base"
-              intent="primary"
-              onClick={() => methods.trigger()}
+              variant="Primary"
+              onPress={() => methods.trigger()}
+              typography="Body/Paragraph/mdBold"
               data-testid="trigger-validation"
             >
               {signupButtonText}
@@ -259,9 +269,9 @@ export default function SignupForm({ title }: SignUpFormProps) {
             <Button
               className={styles.signUpButton}
               type="submit"
-              theme="base"
-              intent="primary"
-              disabled={methods.formState.isSubmitting || signup.isPending}
+              variant="Primary"
+              isDisabled={methods.formState.isSubmitting || signup.isPending}
+              typography="Body/Paragraph/mdBold"
               data-testid="submit"
             >
               {signupButtonText}
@@ -269,6 +279,6 @@ export default function SignupForm({ title }: SignUpFormProps) {
           )}
         </form>
       </FormProvider>
-    </section>
+    </div>
   )
 }