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/TempDesignSystem/Form/DeprecatedPhone/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
@@ -1,157 +0,0 @@
-"use client"
-import "react-international-phone/style.css"
-
-import { isValidPhoneNumber, parsePhoneNumber } from "libphonenumber-js"
-import { TextField } from "react-aria-components"
-import { useController, useFormContext, useWatch } from "react-hook-form"
-import {
-  CountrySelector,
-  DialCodePreview,
-  type ParsedCountry,
-  usePhoneInput,
-} from "react-international-phone"
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import { getDefaultCountryFromLang } from "@/constants/languages"
-
-import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
-import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
-import Label from "@/components/TempDesignSystem/Form/Label"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import useLang from "@/hooks/useLang"
-
-import styles from "./phone.module.css"
-
-import type { ChangeEvent } from "react"
-
-import type { PhoneProps } from "@/types/components/form/phone"
-
-export default function Phone({
-  ariaLabel = "Phone number input",
-  className = "",
-  disabled = false,
-  label,
-  name = "phoneNumber",
-  placeholder,
-  readOnly = false,
-  registerOptions = {
-    required: true,
-  },
-}: PhoneProps) {
-  const intl = useIntl()
-  const lang = useLang()
-  const { control, setValue, trigger } = useFormContext()
-  const phone = useWatch({ name })
-
-  const { field, fieldState, formState } = useController({
-    control,
-    disabled,
-    name,
-    rules: registerOptions,
-  })
-
-  const defaultPhoneNumber = formState.defaultValues?.phoneNumber
-
-  // If defaultPhoneNumber exists and is valid, parse it to get the country code,
-  // otherwise set the default country from the lang.
-  const defaultCountry = isValidPhoneNumber(defaultPhoneNumber)
-    ? parsePhoneNumber(defaultPhoneNumber).country?.toLowerCase()
-    : getDefaultCountryFromLang(lang)
-
-  const { country, handlePhoneValueChange, inputValue, setCountry } =
-    usePhoneInput({
-      defaultCountry,
-      disableDialCodeAndPrefix: true,
-      forceDialCode: true,
-      value: phone,
-      onChange: (value) => {
-        // If not checked trigger(name) forces validation on mount
-        // which shows error message before user even can see the form
-        if (value.inputValue) {
-          setValue(name, value.phone)
-          trigger(name)
-        } else {
-          setValue(name, "")
-        }
-      },
-    })
-
-  function handleSelectCountry(value: ParsedCountry) {
-    setCountry(value.iso2)
-  }
-
-  function handleChange(evt: ChangeEvent<HTMLInputElement>) {
-    handlePhoneValueChange(evt)
-  }
-
-  return (
-    <div className={`${styles.phone} ${className}`}>
-      <CountrySelector
-        disabled={readOnly}
-        dropdownArrowClassName={styles.arrow}
-        flagClassName={styles.flag}
-        onSelect={handleSelectCountry}
-        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
-        selectedCountry={country.iso2}
-        renderButtonWrapper={(props) => (
-          <button
-            {...props.rootProps}
-            className={styles.select}
-            tabIndex={0}
-            type="button"
-            data-testid="country-selector"
-          >
-            <Label required={!!registerOptions.required} size="small">
-              {intl.formatMessage({
-                defaultMessage: "Country code",
-              })}
-            </Label>
-            <span className={styles.selectContainer}>
-              {props.children}
-              <Body asChild fontOnly>
-                <DialCodePreview
-                  className={styles.dialCode}
-                  dialCode={country.dialCode}
-                  prefix="+"
-                />
-              </Body>
-              <MaterialIcon
-                icon="keyboard_arrow_down"
-                className={styles.chevron}
-                color="Icon/Default"
-                size={18}
-              />
-            </span>
-          </button>
-        )}
-      />
-      <TextField
-        aria-label={ariaLabel}
-        defaultValue={field.value}
-        isDisabled={disabled ?? field.disabled}
-        isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
-        isReadOnly={readOnly}
-        name={field.name}
-        type="tel"
-      >
-        <AriaInputWithLabel
-          {...field}
-          // hack used since chrome does not respect autocomplete="off"
-          autoComplete="nope"
-          id={field.name}
-          label={label}
-          onChange={handleChange}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          required={!!registerOptions.required}
-          type="tel"
-          value={inputValue}
-        />
-        <ErrorMessage errors={formState.errors} name={field.name} />
-      </TextField>
-    </div>
-  )
-}
--- a/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/phone.module.css
@@ -1,108 +0,0 @@
-.phone {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--Spacing-x2);
-
-  --react-international-phone-background-color: var(--Main-Grey-White);
-  --react-international-phone-border-color: var(--Scandic-Beige-40);
-  --react-international-phone-dropdown-preferred-list-divider-color: var(
-    --Scandic-Brand-Pale-Peach
-  );
-  --react-international-phone-selected-dropdown-item-background-color: var(
-    --Scandic-Blue-00
-  );
-  --react-international-phone-text-color: var(--Main-Grey-100);
-
-  --react-international-phone-dropdown-preferred-list-divider-margin: 8px;
-
-  --react-international-phone-height: 60px;
-  --react-international-phone-dropdown-top: calc(
-    var(--react-international-phone-height) + var(--Spacing-x1)
-  );
-  --react-international-phone-dial-code-preview-font-size: var(
-    --typography-Body-Regular-fontSize
-  );
-}
-
-@media (min-width: 385px) {
-  .phone {
-    grid-template-columns: minmax(124px, 164px) 1fr;
-  }
-}
-
-.phone:has(.input:active, .input:focus) {
-  --react-international-phone-border-color: var(--Scandic-Blue-90);
-}
-
-.phone :global(.react-international-phone-country-selector-dropdown) {
-  background: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-md);
-  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
-  gap: var(--Spacing-x1);
-  outline: none;
-  padding: var(--Spacing-x2);
-}
-
-.phone
-  :global(.react-international-phone-country-selector-dropdown__list-item) {
-  border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
-    var(--Spacing-x-one-and-half);
-}
-
-.phone
-  :global(.react-international-phone-country-selector-button__button-content) {
-  align-self: center;
-}
-
-.select {
-  align-content: center;
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
-  display: grid;
-  gap: var(--Spacing-x-half);
-  grid-template-rows: auto auto;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  transition: border-color 200ms ease;
-}
-
-.select {
-  width: 100%;
-}
-
-.select[aria-expanded="true"] .chevron {
-  transform: rotate(180deg);
-}
-
-.selectContainer {
-  background-color: var(--Main-Grey-White);
-  border: none;
-  display: grid;
-  gap: var(--Spacing-x1);
-  grid-template-columns: auto 1fr auto;
-  height: 18px;
-  justify-content: flex-start;
-  order: 2;
-}
-
-.arrow {
-  display: none;
-}
-
-.flag {
-  height: 18px;
-  margin: 0;
-  width: 18px;
-}
-
-.select .dialCode {
-  border: none;
-  color: var(--UI-Text-High-contrast);
-  line-height: 1;
-  justify-self: flex-start;
-  padding: 0;
-}
--- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
@@ -32,7 +32,7 @@ export default function Phone({
  disabled = false,
  label,
  name = "phoneNumber",
-  placeholder = "",
+  placeholder,
  readOnly = false,
  registerOptions = {
    required: true,
--- a/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
@@ -1,7 +1,7 @@
 .phone {
  display: grid;
  grid-template-columns: 1fr;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);

  --react-international-phone-background-color: var(--Main-Grey-White);
  --react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -17,7 +17,7 @@

  --react-international-phone-height: 60px;
  --react-international-phone-dropdown-top: calc(
-    var(--react-international-phone-height) + var(--Spacing-x1)
+    var(--react-international-phone-height) + var(--Space-x1)
  );
  --react-international-phone-dial-code-preview-font-size: var(
    --Body-Paragraph-Size
@@ -27,7 +27,7 @@
  );
 }

-@media (min-width: 385px) {
+@media (min-width: 400px) {
  .phone {
    grid-template-columns: minmax(124px, 164px) 1fr;
  }
@@ -41,16 +41,15 @@
  background: var(--Main-Grey-White);
  border-radius: var(--Corner-radius-md);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
  outline: none;
-  padding: var(--Spacing-x2);
+  padding: var(--Space-x2);
 }

 .phone
  :global(.react-international-phone-country-selector-dropdown__list-item) {
  border-radius: var(--Corner-radius-md);
-  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
-    var(--Spacing-x-one-and-half);
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
  font-family: var(--Body-Paragraph-Font-family);
 }

@@ -67,14 +66,11 @@
  border-width: 1px;
  border-radius: var(--Corner-radius-md);
  display: grid;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
  grid-template-rows: auto auto;
  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
  transition: border-color 200ms ease;
-}
-
-.select {
  width: 100%;
 }

@@ -86,7 +82,7 @@
  background-color: var(--Main-Grey-White);
  border: none;
  display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
  grid-template-columns: auto 1fr auto;
  height: 18px;
  justify-content: flex-start;