Merged in fix/SW-2188-disable-fields-logged-in-user-enter-details (pull request #2595)

fix(SW-2188): disable enter details fields when logged in * fix(SW-2188): disable enter details fields when logged in Approved-by: Anton Gunnarsson
2025-08-05 11:54:41 +00:00
parent 1bd8fe6821
commit 5f2e215508
13 changed files with 48 additions and 22 deletions
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
@@ -155,7 +155,7 @@ export default function Details({ user }: DetailsProps) {
            })}
            maxLength={30}
            name="firstName"
-            readOnly={!!user}
+            disabled={!!user}
            registerOptions={{ required: true, onBlur: updateDetailsStore }}
          />
          <Input
@@ -165,7 +165,7 @@ export default function Details({ user }: DetailsProps) {
            })}
            maxLength={30}
            name="lastName"
-            readOnly={!!user}
+            disabled={!!user}
            registerOptions={{ required: true, onBlur: updateDetailsStore }}
          />
          <CountrySelect
@@ -180,8 +180,8 @@ export default function Details({ user }: DetailsProps) {
              formState.errors.countryCode?.message
            )}
            name="countryCode"
-            readOnly={!!user}
            registerOptions={{ required: true, onBlur: updateDetailsStore }}
+            disabled={!!user}
          />
          <Input
            autoComplete="email"
@@ -190,7 +190,7 @@ export default function Details({ user }: DetailsProps) {
              defaultMessage: "Email address",
            })}
            name="email"
-            readOnly={!!user}
+            disabled={!!user}
            registerOptions={{ required: true, onBlur: updateDetailsStore }}
          />
          <Phone
@@ -208,7 +208,7 @@ export default function Details({ user }: DetailsProps) {
              defaultMessage: "Phone number",
            })}
            name="phoneNumber"
-            readOnly={!!user}
+            disabled={!!user}
            registerOptions={{ required: true, onBlur: updateDetailsStore }}
          />
          {user ? null : (
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
@@ -72,6 +72,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
            maxLength={maxLength}
            placeholder={placeholder}
            readOnly={readOnly}
+            disabled={disabled}
            required={!!registerOptions.required}
            type={type}
            inputMode={inputMode}
--- a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
@@ -32,7 +32,7 @@ export default function CountryCombobox({
  lang = 'en',
  countries,
  name = 'country',
-  readOnly = false,
+  disabled = false,
  registerOptions = {},
 }: CountryProps) {
  const { startsWith } = useFilter({ sensitivity: 'base' })
@@ -84,7 +84,7 @@ export default function CountryCombobox({
        aria-label={label}
        className={styles.select}
        data-testid={name}
-        isReadOnly={readOnly}
+        isDisabled={disabled}
        isRequired={Boolean(registerOptions?.required)}
        isInvalid={fieldState.invalid}
        name={name}
--- a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
@@ -18,7 +18,7 @@ export default function CountrySelect({
  countries,
  lang = 'en',
  name = 'country',
-  readOnly = false,
+  disabled = false,
  registerOptions = {},
 }: CountryProps) {
  const { field, formState, fieldState } = useController({
@@ -53,7 +53,7 @@ export default function CountrySelect({
      <Select
        items={items}
        label={label}
-        isReadOnly={readOnly}
+        isDisabled={disabled}
        isRequired={Boolean(registerOptions?.required)}
        isInvalid={fieldState.invalid}
        name={name}
--- a/packages/design-system/lib/components/Form/Country/country.module.css
+++ b/packages/design-system/lib/components/Form/Country/country.module.css
@@ -34,6 +34,8 @@
  }

  &[data-disabled] {
+    border: transparent;
+
    .inner {
      background-color: var(--Surface-Primary-Disabled);
      color: var(--Text-Interactive-Disabled);
@@ -41,7 +43,8 @@

    .button,
    .input,
-    .label {
+    .label,
+    .chevron {
      color: var(--Text-Interactive-Disabled);
    }
  }
@@ -54,6 +57,7 @@
 .inner {
  align-items: center;
  box-sizing: border-box;
+  border-radius: var(--Corner-radius-md);
  display: flex;
  gap: var(--Space-x1);
  padding: var(--Space-x15);
--- a/packages/design-system/lib/components/Form/Country/country.ts
+++ b/packages/design-system/lib/components/Form/Country/country.ts
@@ -13,7 +13,7 @@ export type CountryProps = {
  lang?: string
  name?: string
  placeholder?: string
-  readOnly?: boolean
+  disabled?: boolean
  registerOptions?: RegisterOptions
 }

--- a/packages/design-system/lib/components/Form/Phone/index.tsx
+++ b/packages/design-system/lib/components/Form/Phone/index.tsx
@@ -36,7 +36,6 @@ export default function Phone({
  label,
  name = 'phoneNumber',
  placeholder,
-  readOnly = false,
  registerOptions = {
    required: true,
  },
@@ -87,7 +86,7 @@ export default function Phone({
    <div className={`${styles.phone} ${className}`}>
      <CountrySelector
        countries={countries}
-        disabled={readOnly}
+        disabled={disabled}
        dropdownArrowClassName={styles.arrow}
        flagClassName={styles.flag}
        onSelect={handleSelectCountry}
@@ -101,7 +100,11 @@ export default function Phone({
            type="button"
            data-testid="country-selector"
          >
-            <Label required={!!registerOptions.required} size="small">
+            <Label
+              required={!!registerOptions.required}
+              size="small"
+              disabled={disabled}
+            >
              {countryLabel}
            </Label>
            <span className={styles.selectContainer}>
@@ -111,6 +114,7 @@ export default function Phone({
                  className={styles.dialCode}
                  dialCode={country.dialCode}
                  prefix="+"
+                  disabled={disabled}
                />
              </Body>
              <MaterialIcon
@@ -128,7 +132,6 @@ export default function Phone({
        isDisabled={disabled || registerOptions.disabled}
        isInvalid={fieldState.invalid}
        isRequired={!!registerOptions?.required}
-        isReadOnly={readOnly}
        name={name}
        type="tel"
        value={phoneNumber}
@@ -138,7 +141,7 @@ export default function Phone({
          autoComplete="tel-national"
          label={label}
          placeholder={placeholder}
-          readOnly={readOnly}
+          disabled={disabled}
          type="tel"
        />
        <ErrorMessage
--- a/packages/design-system/lib/components/Form/Phone/phone.module.css
+++ b/packages/design-system/lib/components/Form/Phone/phone.module.css
@@ -77,6 +77,19 @@
    outline-offset: -2px;
    outline: 2px solid var(--Border-Interactive-Focus);
  }
+
+  &:disabled {
+    background-color: var(--Surface-Primary-Disabled);
+    color: var(--Text-Interactive-Disabled);
+    border: none;
+
+    .selectContainer,
+    .chevron,
+    .dialCode {
+      background-color: var(--Surface-Primary-Disabled);
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
 }

 .select[aria-expanded='true'] .chevron {
--- a/packages/design-system/lib/components/Form/Phone/phone.ts
+++ b/packages/design-system/lib/components/Form/Phone/phone.ts
@@ -16,6 +16,5 @@ export interface PhoneProps {
  defaultCountryCode: string
  name?: string
  placeholder?: string
-  readOnly?: boolean
  registerOptions?: RegisterOptions
 }
--- a/packages/design-system/lib/components/Label/Label.tsx
+++ b/packages/design-system/lib/components/Label/Label.tsx
@@ -7,6 +7,7 @@ export function Label({
  className,
  selected,
  required,
+  disabled,
  size,
 }: LabelProps) {
  const classNames = labelVariants({
@@ -14,6 +15,7 @@ export function Label({
    size,
    required,
    selected,
+    disabled,
  })

  return <span className={classNames}>{children}</span>
--- a/packages/design-system/lib/components/Label/label.module.css
+++ b/packages/design-system/lib/components/Label/label.module.css
@@ -61,11 +61,10 @@ textarea[value]:not([value='']) ~ .label,
  margin-bottom: var(--Space-x025);
 }

-input:disabled,
-textarea:disabled {
-  & ~ .label {
-    color: var(--Text-Interactive-Disabled);
-  }
+.label.disabled,
+input:disabled ~ .label,
+textarea:disabled ~ .label {
+  color: var(--Text-Interactive-Disabled);
 }

@media (hover: hover) {
--- a/packages/design-system/lib/components/Label/variants.ts
+++ b/packages/design-system/lib/components/Label/variants.ts
@@ -15,6 +15,9 @@ export const labelVariants = cva(styles.label, {
    selected: {
      true: styles.selected,
    },
+    disabled: {
+      true: styles.disabled,
+    },
  },
  defaultVariants: {
    size: 'regular',
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -37,6 +37,7 @@
    }
  }
  &[data-disabled] {
+    border: none;
    .inner {
      background-color: var(--Surface-Primary-Disabled);
      color: var(--Text-Interactive-Disabled);
@@ -63,6 +64,7 @@
  width: 100%;
  height: 100%;
  box-sizing: border-box;
+  border-radius: var(--Corner-radius-md);

  &.button {
    padding: 0 var(--Space-x15);