Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/country field disabling when editing Address Form #595

Closed
wants to merge 3 commits into from
Closed

Feature/country field disabling when editing Address Form #595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11bab9f
Add a condition if it's address editing
efremov-av Jul 4, 2024
f16b5ac
add changelog
beatrizmaselli Jul 4, 2024
a064696
Merge branch '4.x' into feature/country-field-disabling-when-edit
beatrizmaselli Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

### Fixed

- Disable editing country for existing address to be compliant with Profile V2 structure.

- Fix the validations rules for Saudi Arabia.

- Enable autocomplete postal code from reference field for ARE [[KI#312132](https://vtexhelp.zendesk.com/agent/tickets/312132)].

## [4.24.4] - 2024-07-05


## [4.24.3] - 2024-06-06

### Fixed
Expand Down
4 changes: 4 additions & 0 deletions react/CountrySelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ class CountrySelector extends Component {
value: address.country.value,
}

if (!!address?.addressId?.value) {
address.country.disabled = true
Copy link
Contributor

@lpolon lpolon Jul 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is not a good way to archive the desired behaviour.

As far as I can tell, even though it is a old project, I can't find any other example in the project where there is a mutation of props.

As far as I can tell, This change is a big no-no, because React assumes that props are readonly:
https://react.dev/reference/rules/components-and-hooks-must-be-pure#props
https://stackoverflow.com/questions/51435476/why-props-in-react-are-read-only

Please let me know whatever I am missing in my understanding.

Reading the project, my understanding is that all address form state should be derived from the address itself while it does not own the state.

My suggestion is to just pass this value where you need. Specifically:
https://github.com/vtex-apps/my-account/blob/8567571485d205a97e38ff1e6ec914096df4d171/react/components/pages/AddressEdit.tsx#L70
Screenshot 2024-07-08 at 12 24 34

}

return (
<InputFieldContainer
intl={intl}
Expand Down
Loading