Implement address update modal for anon donations #1662
Conversation
| data: function () { | ||
| return { | ||
| isAddressModalOpen: false, | ||
| addressChangeHasErrored: false, |
There was a problem hiding this comment.
To make the address data dynamic, copy it here from this.props.confirmationData into the state to initialize it (and change the markup placeholders accordingly).
| :validate-address-url="validateAddressUrl" | ||
| :has-errored="addressChangeHasErrored" | ||
| v-on:address-update-failed="addressChangeHasErrored = true"> | ||
| </address-modal> |
There was a problem hiding this comment.
You could add an event handler for address-updated here, to handle the address update.
skins/laika/src/components/pages/donation_confirmation/AddressModal.vue
Outdated
Show resolved
Hide resolved
| this.$emit( 'address-updated' ); | ||
| } else { | ||
| this.$emit( 'address-update-failed' ); | ||
| } |
There was a problem hiding this comment.
With the current event handler setup in DonationConfirmation, the modal will close when the server returns an error. This seems like a sensible behavior to me (because "retrying" it in the model probably won't help), but maybe we should pass the error message key in the event and display it in DonationConfirmation.
There was a problem hiding this comment.
I am not sure if you miswrote or if the behavior broke in the meantime but the modal will / should not close when an error is received. I think Jan mentioned this during a UX meeting and his reasoning was sort of like "the user should have time to read the text an move on on their own terms" so the modal stays up.
There was a problem hiding this comment.
I did not user-test that, I deducted the behavior from the code. Good to know, I'll user-test it then when the PR is finished.
|
@gbirke Still WIP, I will pick it up in the morning. |
timEulitz
force-pushed
the
donation_confirmation_address_data
branch
2 times, most recently
from
ff0cd9d
to
405841a
Compare
timEulitz
force-pushed
the
donation_confirmation_address_data
branch
from
405841a
to
cbb979c
Compare
| @@ -25,6 +27,26 @@ public function updateDonor( Request $request, FunFunFactory $ffFactory, Applica | |||
| $responseModel = $ffFactory | |||
| ->newUpdateDonorUseCase( $updateToken, $accessToken ) | |||
| ->updateDonor( $this->newRequestModel( $request ) ); | |||
| if ( $request->getAcceptableContentTypes()[0] === 'application/json' ) { | |||
There was a problem hiding this comment.
There should be an E2E test that covers this code branch.
* Avoid modifying props - The `FormData` format was not compatible with confirmationData.donation.adddres. Also, props should never be modified, only data. * Add spinner on submit button * Fix CS * Remove receipt opt-out on modal, since the button for the modal says "I want a receipt"
https://phabricator.wikimedia.org/T237272