From 405841a9b8b44d92c4feb620a0a57517a9ba3c07 Mon Sep 17 00:00:00 2001 From: timEulitz Date: Fri, 15 Nov 2019 09:39:10 +0100 Subject: [PATCH] Implement donation confirmation UI address update --- composer.lock | 209 +++++++++++++----- .../components/pages/DonationConfirmation.vue | 11 +- .../donation_confirmation/AddressModal.vue | 38 ++-- .../pages/donation_form/AddressType.vue | 2 +- .../laika/src/pages/donation_confirmation.ts | 6 +- skins/laika/src/store/donor_update_store.ts | 23 ++ 6 files changed, 211 insertions(+), 78 deletions(-) create mode 100644 skins/laika/src/store/donor_update_store.ts diff --git a/composer.lock b/composer.lock index b009dbf4a7..79b4b1dfd5 100644 --- a/composer.lock +++ b/composer.lock @@ -203,16 +203,16 @@ }, { "name": "doctrine/collections", - "version": "1.6.3", + "version": "1.6.4", "source": { "type": "git", "url": "https://github.com/doctrine/collections.git", - "reference": "037ccc5b1c249275f8f6bb48e35f140fd52fd577" + "reference": "6b1e4b2b66f6d6e49983cebfe23a21b7ccc5b0d7" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/doctrine/collections/zipball/037ccc5b1c249275f8f6bb48e35f140fd52fd577", - "reference": "037ccc5b1c249275f8f6bb48e35f140fd52fd577", + "url": "https://api.github.com/repos/doctrine/collections/zipball/6b1e4b2b66f6d6e49983cebfe23a21b7ccc5b0d7", + "reference": "6b1e4b2b66f6d6e49983cebfe23a21b7ccc5b0d7", "shasum": "" }, "require": { @@ -269,7 +269,7 @@ "iterators", "php" ], - "time": "2019-11-04T15:26:07+00:00" + "time": "2019-11-13T13:07:11+00:00" }, { "name": "doctrine/common", @@ -1534,16 +1534,16 @@ }, { "name": "monolog/monolog", - "version": "1.25.1", + "version": "1.25.2", "source": { "type": "git", "url": "https://github.com/Seldaek/monolog.git", - "reference": "70e65a5470a42cfec1a7da00d30edb6e617e8dcf" + "reference": "d5e2fb341cb44f7e2ab639d12a1e5901091ec287" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/Seldaek/monolog/zipball/70e65a5470a42cfec1a7da00d30edb6e617e8dcf", - "reference": "70e65a5470a42cfec1a7da00d30edb6e617e8dcf", + "url": "https://api.github.com/repos/Seldaek/monolog/zipball/d5e2fb341cb44f7e2ab639d12a1e5901091ec287", + "reference": "d5e2fb341cb44f7e2ab639d12a1e5901091ec287", "shasum": "" }, "require": { @@ -1608,7 +1608,7 @@ "logging", "psr-3" ], - "time": "2019-09-06T13:49:17+00:00" + "time": "2019-11-13T10:00:05+00:00" }, { "name": "nikic/php-parser", @@ -2523,7 +2523,7 @@ }, { "name": "symfony/config", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/config.git", @@ -2587,16 +2587,16 @@ }, { "name": "symfony/console", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/console.git", - "reference": "c7edffb26b29cae972ca4afccb610a38ce8d0ccf" + "reference": "17b154f932c5874cdbda6d05796b6490eec9f9f7" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/console/zipball/c7edffb26b29cae972ca4afccb610a38ce8d0ccf", - "reference": "c7edffb26b29cae972ca4afccb610a38ce8d0ccf", + "url": "https://api.github.com/repos/symfony/console/zipball/17b154f932c5874cdbda6d05796b6490eec9f9f7", + "reference": "17b154f932c5874cdbda6d05796b6490eec9f9f7", "shasum": "" }, "require": { @@ -2655,11 +2655,11 @@ ], "description": "Symfony Console Component", "homepage": "https://symfony.com", - "time": "2019-10-24T15:33:53+00:00" + "time": "2019-11-13T07:12:39+00:00" }, { "name": "symfony/debug", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/debug.git", @@ -2715,7 +2715,7 @@ }, { "name": "symfony/event-dispatcher", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/event-dispatcher.git", @@ -2778,7 +2778,7 @@ }, { "name": "symfony/filesystem", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/filesystem.git", @@ -2828,16 +2828,16 @@ }, { "name": "symfony/http-foundation", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/http-foundation.git", - "reference": "a5d46a33e8649ba802cebe520d188b04385572a2" + "reference": "9e4b3ac8fa3348b4811674d23de32d201de225ce" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/http-foundation/zipball/a5d46a33e8649ba802cebe520d188b04385572a2", - "reference": "a5d46a33e8649ba802cebe520d188b04385572a2", + "url": "https://api.github.com/repos/symfony/http-foundation/zipball/9e4b3ac8fa3348b4811674d23de32d201de225ce", + "reference": "9e4b3ac8fa3348b4811674d23de32d201de225ce", "shasum": "" }, "require": { @@ -2878,20 +2878,20 @@ ], "description": "Symfony HttpFoundation Component", "homepage": "https://symfony.com", - "time": "2019-11-03T02:12:45+00:00" + "time": "2019-11-11T12:53:10+00:00" }, { "name": "symfony/http-kernel", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/http-kernel.git", - "reference": "6cd0e7e22c33b96b4779f40ef5b4053e4dd9dbd2" + "reference": "e1764b3de00ec5636dd03d02fd44bcb1147d70d9" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/symfony/http-kernel/zipball/6cd0e7e22c33b96b4779f40ef5b4053e4dd9dbd2", - "reference": "6cd0e7e22c33b96b4779f40ef5b4053e4dd9dbd2", + "url": "https://api.github.com/repos/symfony/http-kernel/zipball/e1764b3de00ec5636dd03d02fd44bcb1147d70d9", + "reference": "e1764b3de00ec5636dd03d02fd44bcb1147d70d9", "shasum": "" }, "require": { @@ -2900,7 +2900,8 @@ "symfony/debug": "^3.3.3|~4.0", "symfony/event-dispatcher": "~2.8|~3.0|~4.0", "symfony/http-foundation": "~3.4.12|~4.0.12|^4.1.1", - "symfony/polyfill-ctype": "~1.8" + "symfony/polyfill-ctype": "~1.8", + "symfony/polyfill-php56": "~1.8" }, "conflict": { "symfony/config": "<2.8", @@ -2967,11 +2968,11 @@ ], "description": "Symfony HttpKernel Component", "homepage": "https://symfony.com", - "time": "2019-11-11T16:11:23+00:00" + "time": "2019-11-13T08:44:50+00:00" }, { "name": "symfony/inflector", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/inflector.git", @@ -3144,6 +3145,62 @@ ], "time": "2019-08-06T08:03:45+00:00" }, + { + "name": "symfony/polyfill-php56", + "version": "v1.12.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-php56.git", + "reference": "0e3b212e96a51338639d8ce175c046d7729c3403" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-php56/zipball/0e3b212e96a51338639d8ce175c046d7729c3403", + "reference": "0e3b212e96a51338639d8ce175c046d7729c3403", + "shasum": "" + }, + "require": { + "php": ">=5.3.3", + "symfony/polyfill-util": "~1.0" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.12-dev" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Polyfill\\Php56\\": "" + }, + "files": [ + "bootstrap.php" + ] + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony polyfill backporting some PHP 5.6+ features to lower PHP versions", + "homepage": "https://symfony.com", + "keywords": [ + "compatibility", + "polyfill", + "portable", + "shim" + ], + "time": "2019-08-06T08:03:45+00:00" + }, { "name": "symfony/polyfill-php70", "version": "v1.12.0", @@ -3203,9 +3260,61 @@ ], "time": "2019-08-06T08:03:45+00:00" }, + { + "name": "symfony/polyfill-util", + "version": "v1.12.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/polyfill-util.git", + "reference": "4317de1386717b4c22caed7725350a8887ab205c" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/polyfill-util/zipball/4317de1386717b4c22caed7725350a8887ab205c", + "reference": "4317de1386717b4c22caed7725350a8887ab205c", + "shasum": "" + }, + "require": { + "php": ">=5.3.3" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "1.12-dev" + } + }, + "autoload": { + "psr-4": { + "Symfony\\Polyfill\\Util\\": "" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Nicolas Grekas", + "email": "p@tchwork.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Symfony utilities for portability of PHP codes", + "homepage": "https://symfony.com", + "keywords": [ + "compat", + "compatibility", + "polyfill", + "shim" + ], + "time": "2019-08-06T08:03:45+00:00" + }, { "name": "symfony/property-access", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/property-access.git", @@ -3272,7 +3381,7 @@ }, { "name": "symfony/routing", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/routing.git", @@ -3348,7 +3457,7 @@ }, { "name": "symfony/stopwatch", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/stopwatch.git", @@ -3397,7 +3506,7 @@ }, { "name": "symfony/translation", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/translation.git", @@ -3467,7 +3576,7 @@ }, { "name": "symfony/twig-bridge", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/twig-bridge.git", @@ -3644,7 +3753,7 @@ }, { "name": "symfony/yaml", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/yaml.git", @@ -5247,7 +5356,7 @@ "homepage": "https://nette.org/contributors" } ], - "description": "? Nette NEON: encodes and decodes NEON file format.", + "description": "🍸 Nette NEON: encodes and decodes NEON file format.", "homepage": "http://ne-on.org", "keywords": [ "export", @@ -7205,7 +7314,7 @@ }, { "name": "symfony/browser-kit", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/browser-kit.git", @@ -7262,7 +7371,7 @@ }, { "name": "symfony/css-selector", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/css-selector.git", @@ -7315,7 +7424,7 @@ }, { "name": "symfony/dependency-injection", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/dependency-injection.git", @@ -7388,7 +7497,7 @@ }, { "name": "symfony/dom-crawler", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/dom-crawler.git", @@ -7449,7 +7558,7 @@ }, { "name": "symfony/finder", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/finder.git", @@ -7611,7 +7720,7 @@ }, { "name": "symfony/twig-bundle", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/twig-bundle.git", @@ -7686,7 +7795,7 @@ }, { "name": "symfony/var-dumper", - "version": "v4.3.7", + "version": "v4.3.8", "source": { "type": "git", "url": "https://github.com/symfony/var-dumper.git", @@ -7762,7 +7871,7 @@ }, { "name": "symfony/web-profiler-bundle", - "version": "v3.4.34", + "version": "v3.4.35", "source": { "type": "git", "url": "https://github.com/symfony/web-profiler-bundle.git", @@ -8030,12 +8139,12 @@ "source": { "type": "git", "url": "https://github.com/wmde/fundraising-frontend-content", - "reference": "39bc2f789c3994eac795ca96ac0c23ccf51fd547" + "reference": "03cf14a1874650f3b28f78b2bde15389b614e1e2" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/wmde/fundraising-frontend-content/zipball/39bc2f789c3994eac795ca96ac0c23ccf51fd547", - "reference": "39bc2f789c3994eac795ca96ac0c23ccf51fd547", + "url": "https://api.github.com/repos/wmde/fundraising-frontend-content/zipball/03cf14a1874650f3b28f78b2bde15389b614e1e2", + "reference": "03cf14a1874650f3b28f78b2bde15389b614e1e2", "shasum": "" }, "require-dev": { @@ -8068,7 +8177,7 @@ "GPL-2.0+" ], "description": "i18n for FundraisingFrontend", - "time": "2019-11-12T12:52:53+00:00" + "time": "2019-11-13T15:13:34+00:00" }, { "name": "wmde/psr-log-test-doubles", diff --git a/skins/laika/src/components/pages/DonationConfirmation.vue b/skins/laika/src/components/pages/DonationConfirmation.vue index 5716872143..ad4db5c2c6 100644 --- a/skins/laika/src/components/pages/DonationConfirmation.vue +++ b/skins/laika/src/components/pages/DonationConfirmation.vue @@ -19,7 +19,8 @@ :updateDonorUrl="updateDonorUrl" :validate-address-url="validateAddressUrl" :has-errored="addressChangeHasErrored" - v-on:address-update-failed="addressChangeHasErrored = true"> + v-on:address-update-failed="addressChangeHasErrored = true" + v-on:address-updated="updateAddress( $event )"> @@ -51,6 +52,7 @@ import PaymentNotice from '@/components/pages/donation_confirmation/PaymentNotic import SummaryLinks from '@/components/pages/donation_confirmation/SummaryLinks.vue'; import { AddressTypeModel, addressTypeName } from '@/view_models/AddressTypeModel'; import AddressModal from '@/components/pages/donation_confirmation/AddressModal.vue'; +import { AddressFormData } from '@/view_models/Address'; export default Vue.extend( { name: 'DonationConfirmation', @@ -60,7 +62,7 @@ export default Vue.extend( { MembershipInfo, PaymentNotice, SummaryLinks, - AddressModal + AddressModal, }, data: function () { return { @@ -78,6 +80,9 @@ export default Vue.extend( { showAddressModal: function () { this.$data.isAddressModalOpen = true; }, + updateAddress: function ( addressData: AddressFormData ) { + this.confirmationData.address = addressData; + }, }, computed: { showBankTransferCode: function () { @@ -88,7 +93,7 @@ export default Vue.extend( { }, showAddressChangeButton: function () { return this.confirmationData.addressType === addressTypeName( AddressTypeModel.ANON ) && !this.$data.addressChangeHasErrored; - } + }, }, } ); diff --git a/skins/laika/src/components/pages/donation_confirmation/AddressModal.vue b/skins/laika/src/components/pages/donation_confirmation/AddressModal.vue index 53d40f2b88..960a88548f 100644 --- a/skins/laika/src/components/pages/donation_confirmation/AddressModal.vue +++ b/skins/laika/src/components/pages/donation_confirmation/AddressModal.vue @@ -1,26 +1,19 @@ @@ -68,7 +68,7 @@ export default Vue.extend( { Email, NewsletterOptIn, PaymentBankData, - SubmitValues + SubmitValues, }, data: function (): { formData: AddressFormData } { return { @@ -142,7 +142,7 @@ export default Vue.extend( { validateAddressUrl: String, countries: Array as () => Array, hasErrored: Boolean, - hasSucceeded: Boolean + hasSucceeded: Boolean, }, computed: { fieldErrors: { @@ -189,8 +189,8 @@ export default Vue.extend( { jsonForm, { headers: { 'Content-Type': 'multipart/form-data' } } ).then( ( validationResult: AxiosResponse ) => { - if( validationResult.data.status === 'OK' ) { - this.$emit( 'address-updated' ); + if ( validationResult.data.status === 'OK' ) { + this.$emit( 'address-updated', this.$data.formData ); } else { this.$emit( 'address-update-failed' ); } diff --git a/skins/laika/src/components/pages/donation_form/AddressType.vue b/skins/laika/src/components/pages/donation_form/AddressType.vue index 2d6c70abce..316e855eea 100644 --- a/skins/laika/src/components/pages/donation_form/AddressType.vue +++ b/skins/laika/src/components/pages/donation_form/AddressType.vue @@ -40,7 +40,7 @@ export default Vue.extend( { }, props: { disabledAddressTypes: Array, - disabledAnonymousType: Boolean + disabledAnonymousType: Boolean, }, computed: { AddressTypeModel: { diff --git a/skins/laika/src/pages/donation_confirmation.ts b/skins/laika/src/pages/donation_confirmation.ts index 4f5d05c6c6..4c0d28ecfe 100644 --- a/skins/laika/src/pages/donation_confirmation.ts +++ b/skins/laika/src/pages/donation_confirmation.ts @@ -2,15 +2,11 @@ import Vue from 'vue'; import VueI18n from 'vue-i18n'; import PageDataInitializer from '@/page_data_initializer'; import { DEFAULT_LOCALE } from '@/locales'; -import { createStore } from '@/store/update_address_store'; +import { createStore } from '@/store/donor_update_store'; import App from '@/components/App.vue'; import Component from '@/components/pages/DonationConfirmation.vue'; -import { action } from '@/store/util'; -import { NS_ADDRESS } from '@/store/namespaces'; -import { setAddressField } from '@/store/address/actionTypes'; -import { InputField } from "@/view_models/Address"; const PAGE_IDENTIFIER = 'donation-confirmation', IS_FULLWIDTH_PAGE = true, diff --git a/skins/laika/src/store/donor_update_store.ts b/skins/laika/src/store/donor_update_store.ts new file mode 100644 index 0000000000..9b919b7f0a --- /dev/null +++ b/skins/laika/src/store/donor_update_store.ts @@ -0,0 +1,23 @@ +import Vue from 'vue'; +import Vuex, { StoreOptions } from 'vuex'; +import createAddress from '@/store/address'; +import { NS_ADDRESS } from './namespaces'; +import { REQUIRED_FIELDS } from '@/store/address/constants'; + +Vue.use( Vuex ); + +export function createStore() { + const storeBundle: StoreOptions = { + modules: { + [ NS_ADDRESS ]: createAddress( REQUIRED_FIELDS ), + }, + strict: process.env.NODE_ENV !== 'production', + getters: { + isValidating: function ( state ): boolean { + return state[ NS_ADDRESS ].isValidating; + }, + }, + }; + + return new Vuex.Store( storeBundle ); +}