Merged in fix/LOY-260-use-same-phone-component (pull request #2336)

fix(LOY-260): use same phone component in signup and edit profile as enter details Approved-by: Chuma Mcphoy (We Ahead)
2025-06-12 12:40:36 +00:00
parent 8c6f659f8f 6a0ce38f79
commit 2dd07eb6b8
8 changed files with 188 additions and 442 deletions
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -2,16 +2,17 @@

 import { useIntl } from "react-intl"

+import { Select } from "@scandic-hotels/design-system/Select"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { getLocalizedLanguageOptions } from "@/constants/languages"

 import Divider from "@/components/TempDesignSystem/Divider"
 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 Select from "@/components/TempDesignSystem/Form/Select"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import Phone from "@/components/TempDesignSystem/Form/Phone"
 import useLang from "@/hooks/useLang"

 import styles from "./formContent.module.css"
@@ -19,77 +20,66 @@ import styles from "./formContent.module.css"
 export default function FormContent() {
  const intl = useIntl()
  const lang = useLang()
-
  const languageOptions = getLocalizedLanguageOptions(lang)
-  const city = intl.formatMessage({
-    defaultMessage: "City",
-  })
-  const country = intl.formatMessage({
-    defaultMessage: "Country",
-  })
-  const email = `${intl.formatMessage({
-    defaultMessage: "Email",
-  })} ${intl
-    .formatMessage({
-      defaultMessage: "Address",
-    })
-    .toLowerCase()}`
-  const street = intl.formatMessage({
-    defaultMessage: "Address",
-  })
-  const phoneNumber = intl.formatMessage({
-    defaultMessage: "Phone number",
-  })
-  const currentPassword = intl.formatMessage({
-    defaultMessage: "Current password",
-  })
-  const retypeNewPassword = intl.formatMessage({
-    defaultMessage: "Retype new password",
-  })
-  const zipCode = intl.formatMessage({
-    defaultMessage: "Zip code",
-  })

  return (
    <>
      <section className={styles.user}>
        <header>
-          <Body textTransform="bold">
-            {intl.formatMessage({
-              defaultMessage: "User information",
-            })}
-          </Body>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "User information",
+              })}
+            </p>
+          </Typography>
        </header>
        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
        <Input
          data-hj-suppress
-          label={`${street} 1`}
+          label={`${intl.formatMessage({
+            defaultMessage: "Address",
+          })} 1`}
          name="address.streetAddress"
        />
-        <Input data-hj-suppress label={city} name="address.city" />
+        <Input
+          data-hj-suppress
+          label={intl.formatMessage({
+            defaultMessage: "City",
+          })}
+          name="address.city"
+        />
        <div className={styles.container}>
          <Input
            data-hj-suppress
-            label={zipCode}
+            label={intl.formatMessage({
+              defaultMessage: "Zip code",
+            })}
            name="address.zipCode"
            registerOptions={{ required: true }}
            inputMode="numeric"
          />
          <CountrySelect
-            label={country}
+            label={intl.formatMessage({
+              defaultMessage: "Country",
+            })}
            name="address.countryCode"
            registerOptions={{ required: true }}
          />
        </div>
        <Input
-          label={email}
+          label={intl.formatMessage({
+            defaultMessage: "Email address",
+          })}
          name="email"
          registerOptions={{ required: true }}
          type="email"
          data-hj-suppress
        />
-        <DeprecatedPhone
-          label={phoneNumber}
+        <Phone
+          label={intl.formatMessage({
+            defaultMessage: "Phone number",
+          })}
          name="phoneNumber"
          data-hj-suppress
        />
@@ -104,21 +94,27 @@ export default function FormContent() {
      <Divider className={styles.divider} color="subtle" />
      <section className={styles.password}>
        <header>
-          <Body textTransform="bold">
-            {intl.formatMessage({
-              defaultMessage: "Password",
-            })}
-          </Body>
+          <Typography variant="Body/Paragraph/mdBold">
+            <p>
+              {intl.formatMessage({
+                defaultMessage: "Password",
+              })}
+            </p>
+          </Typography>
        </header>
        <PasswordInput
          data-hj-suppress
-          label={currentPassword}
+          label={intl.formatMessage({
+            defaultMessage: "Current password",
+          })}
          name="password"
        />
        <PasswordInput data-hj-suppress isNewPassword name="newPassword" />
        <PasswordInput
          data-hj-suppress
-          label={retypeNewPassword}
+          label={intl.formatMessage({
+            defaultMessage: "Retype new password",
+          })}
          name="retypeNewPassword"
        />
      </section>