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

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
 }