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

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 : (

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}

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}

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}

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);

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
 }
 

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

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 {

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
 }

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>

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,
+.label.disabled,
-textarea:disabled {
+input:disabled ~ .label,
-  & ~ .label {
+textarea:disabled ~ .label {
-    color: var(--Text-Interactive-Disabled);
+  color: var(--Text-Interactive-Disabled);
-  }
 }
 
 @media (hover: hover) {

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',

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);