From 5f2e215508baa50a5c68adb600d201435cc86df0 Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Tue, 5 Aug 2025 11:54:41 +0000
Subject: [PATCH] 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
---
 .../EnterDetails/Details/RoomOne/index.tsx          | 10 +++++-----
 .../TempDesignSystem/Form/Input/index.tsx           |  1 +
 .../lib/components/Form/Country/CountryCombobox.tsx |  4 ++--
 .../lib/components/Form/Country/CountrySelect.tsx   |  4 ++--
 .../lib/components/Form/Country/country.module.css  |  6 +++++-
 .../lib/components/Form/Country/country.ts          |  2 +-
 .../lib/components/Form/Phone/index.tsx             | 13 ++++++++-----
 .../lib/components/Form/Phone/phone.module.css      | 13 +++++++++++++
 .../lib/components/Form/Phone/phone.ts              |  1 -
 .../design-system/lib/components/Label/Label.tsx    |  2 ++
 .../lib/components/Label/label.module.css           |  9 ++++-----
 .../design-system/lib/components/Label/variants.ts  |  3 +++
 .../lib/components/Select/select.module.css         |  2 ++
 13 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
index d89c8e547..0aaba54b0 100644
--- 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 : (
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
index e4a7d97a1..20fea8c04 100644
--- 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}
diff --git a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
index 28bd584c2..5a73abd0a 100644
--- 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}
diff --git a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx b/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
index 50a533531..e29868702 100644
--- 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}
diff --git a/packages/design-system/lib/components/Form/Country/country.module.css b/packages/design-system/lib/components/Form/Country/country.module.css
index ebcdecd09..5152f0be4 100644
--- 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);
diff --git a/packages/design-system/lib/components/Form/Country/country.ts b/packages/design-system/lib/components/Form/Country/country.ts
index 4ccbb9afd..98e95da52 100644
--- 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
 }
 
diff --git a/packages/design-system/lib/components/Form/Phone/index.tsx b/packages/design-system/lib/components/Form/Phone/index.tsx
index b7172a28e..a693e6f6b 100644
--- 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
diff --git a/packages/design-system/lib/components/Form/Phone/phone.module.css b/packages/design-system/lib/components/Form/Phone/phone.module.css
index f988d0d55..5be3c8986 100644
--- 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 {
diff --git a/packages/design-system/lib/components/Form/Phone/phone.ts b/packages/design-system/lib/components/Form/Phone/phone.ts
index cdfa79eee..5764ce24d 100644
--- 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
 }
diff --git a/packages/design-system/lib/components/Label/Label.tsx b/packages/design-system/lib/components/Label/Label.tsx
index 70dd9aee3..1cf769890 100644
--- 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>
diff --git a/packages/design-system/lib/components/Label/label.module.css b/packages/design-system/lib/components/Label/label.module.css
index 385d2f5c6..c4d25db61 100644
--- 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) {
diff --git a/packages/design-system/lib/components/Label/variants.ts b/packages/design-system/lib/components/Label/variants.ts
index 53162bc49..55572b1b6 100644
--- 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',
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index f16fabca3..36135afbb 100644
--- 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);