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/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
 }