C23_WMDE_Desktop_DE_05 #182

Abban · 2023-09-13T13:03:52Z

Adds a load of new Vue inputs and fields to replace the old Buefy ones.
Updates touched components from options to composition API and setup script.
Changes how DonationForm switching is handled to allow it to be A/B tested.
Adds a new donation address page.

Ticket: Ticket: https://phabricator.wikimedia.org/T345528

* Remove component tag to allow easier A/B testing * Improve tests Ticket: https://phabricator.wikimedia.org/T345528

* Moved functionality into composables * Added more tests Ticket: https://phabricator.wikimedia.org/T345528

These inputs are all ripped from Buefy and are going to be replaced Ticket: https://phabricator.wikimedia.org/T345528

This adds a reusable radio field component. Also adds tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Also added tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Added tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Also added tests Ticket: https://phabricator.wikimedia.org/T345528

* Mailing List is what the donors are signing up to so rename it from newsletter. * The CheckboxMultipleFormInput component will be used for the incentive field on the membership form. * Add a model composable. * Add tests for checkbox and mailing list components. Ticket: https://phabricator.wikimedia.org/T345528

Ticket: https://phabricator.wikimedia.org/T345528

@test

* Add tests * Modify the Text Input so it bubbles events properly * Add @test alias to jest and ts configs Ticket: https://phabricator.wikimedia.org/T345528

* New donation form is now functional but ugly * Adjusted form inputs to allow more model types * Fixed DonationForm tests Ticket: https://phabricator.wikimedia.org/T345528

This adds the styles with the new spacing guidelines to the new input fields. Ticket: https://phabricator.wikimedia.org/T345528

Adds hidden fields to post tracking and payment information when the form is submitted. Ticket: https://phabricator.wikimedia.org/T345528

This fixes validation and field names to make sure the form submits to the application correctly. https://phabricator.wikimedia.org/T345528

This adds a new donation summary to cover display of the new company donor with contact details. Ticket: https://phabricator.wikimedia.org/T345528

Add a hidden field to the country autocomplete that contains the country code to be submitted to the application. Ticket: https://phabricator.wikimedia.org/T345528

The salutation should be re-localised if the donor changes language after selecting one. Ticket: https://phabricator.wikimedia.org/T345528

Ticket: https://phabricator.wikimedia.org/T345528

For some (currently unknown reason) the form does not send the IBAN any more when its rendering component has no name attribute

gbirke

I like all the changes you made here. Moving all store-related interactions to composables introduces a nice facade for the store and shows the future API of what state setting and getting we need.
At the moment, I'd leave the composables as-is and only split them further if a feature requires that.

I'm approving this so we can get this off the table quickly, even though some of the changes are confusing to me and I don't feel comfortable working on the frontend as long as there are bits in it I don't understand the purpose of.

gbirke · 2023-09-20T12:59:48Z

src/components/shared/form_fields/CountryAutocompleteField.vue

+
+<style scoped lang="scss">
+
+</style>


The GitHub syntax highlighting for this is broken. We can probably live with that, but it's annoying. Maybe it's the question mark in line 16? You could move that to a computed property or you could raise an issue with the GitHub team

Try hitting Vue Language Server -> Restart in the bottom right of the code window in PhpStorm. We still have some weird issues hanging on where it stops working properly.

gbirke · 2023-09-20T13:13:18Z

src/components/shared/form_fields/useFieldModel.ts

@@ -0,0 +1,11 @@
+import { Ref, ref, UnwrapRef, watch } from 'vue';
+
+export function useFieldModel<T>( modelValue: () => UnwrapRef<T>, initialValue: T ): Ref<UnwrapRef<T>> {


I'm still very confused why we need this and what problem this solves. My best guess that this is something about the hierarchy and two-way data binding: having a "parent" component that receives update events from a child component, sending the value from the event to the store (which might modify them) and then sending the modified value to back to the child component (to update its internal ref)?

Also, why is modelValue an anonymous function that returns something? Is this just convenience for watch? The call of this is confusing, because we always pass in the function made form the prop and then the same prop as initialvalue. coulnd't we call the function for the initial value?

I'm also confused by the usage of the modelValue inside the other composables, maybe you can explain that a bit as well.

Please write some documentation on this pattern

When you pass the model value straight to an input model from the props you get:

VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead.

Also, why is modelValue an anonymous function that returns something?

Looking at it again, I can see I ran into loads of TS typing issues when I try to pass a prop straight through

gbirke · 2023-09-20T14:43:21Z

src/components/shared/form_inputs/CheckboxMultipleFormInput.vue

+
+interface Props {
+	modelValue: Array<string | number>;
+	nativeValue: string | number;


I'm confused by the naming here. What's the purpose and difference between CheckboxMultipleFormInput and CheckboxSingleFormInput?

The docs show that there are different methods of using a checkbox as a group with an array and as a boolean value: https://vuejs.org/guide/essentials/forms.html#checkbox

Rather than have a single one that muddles it's way through how it should bind values differently depending on if it has an Array as it's modelValue or not I decided that WET was better here.

The multiple one will be used on the incentives field in the membership form (But mabe that field should actually be a radio)

gbirke · 2023-09-20T14:47:58Z

src/components/shared/form_inputs/useInputFocusing.ts

+	click(): void,
+};
+
+export function useInputFocusing(): ReturnType {


Could you add a docblock here to explain what this does? It's like a polyfill that unifies label click behavior across browsers, right?

gbirke · 2023-09-20T14:49:36Z

src/components/shared/form_inputs/useInputModel.ts

@@ -0,0 +1,23 @@
+import { computed, ref, UnwrapRef, watch, WritableComputedRef } from 'vue';
+
+export function useInputModel<T>(


This seems to be similar to useFieldModel, could you elaborate on similarities and differences, maybe add a docblock what this is for?

The fieldModel is only for watching updates to it's own v-model so it can pass those updates to the child input. The inputModel is a 2 way binding between the actual html input and the outer v-model, it bubbles change events and also watches for changes in it's outer model.

If a campaign times out then this allows a fallback slot to be rendered. Ticket: https://phabricator.wikimedia.org/T345528

[Follow up] Move styles

If a campaign times out then this allows a fallback slot to be rendered. Ticket: https://phabricator.wikimedia.org/T345528

- A new component that renders different text on the submit button of the donation form, depending on the payment type. - removes info text in the summary that explained the button before - renaming isDirectDebit to isDirectDebitPayment to unify it with the others and the getters in the store - adding a test for the new component Ticket: https://phabricator.wikimedia.org/T344426

* Renames the form_inputs to form_elements * Adds new buttons * Add component and styles for the payment summary Ticket: https://phabricator.wikimedia.org/T345722

New styles for donation payment summary

- the form should submit the values collected in SubmitValues.vue - the code from both useAddressFormEventHandlers was adjusted to not diverge too much - trackFormSubmission() is removed from the DonationReceipt bucket because the tracking currently does not work there belongs to the changes in https://phabricator.wikimedia.org/T345528

[Fix] Use hidden submitvalue fields rather than html field names

Abban requested review from gbirke, moiikana and Sperling-0 September 13, 2023 13:03

Abban mentioned this pull request Sep 13, 2023

Add A/B Test for the first Address Page test campaign #178

Closed

Abban force-pushed the C23_WMDE_Desktop_DE_05 branch from bfc5d1c to 01a2039 Compare September 13, 2023 13:27

Base automatically changed from update-vue to main September 14, 2023 11:29

Abban force-pushed the C23_WMDE_Desktop_DE_05 branch from 11231b9 to bc097da Compare September 15, 2023 10:15

moiikana mentioned this pull request Sep 15, 2023

[WIP][FollowUp] Use new RadioField component in instead of RadioInput #184

Closed

Abban force-pushed the C23_WMDE_Desktop_DE_05 branch 2 times, most recently from 6e46e0e to 4b7e73c Compare September 18, 2023 12:14

Abban added 20 commits September 18, 2023 14:38

Update DonationForm to script setup

2f3435a

* Remove component tag to allow easier A/B testing * Improve tests Ticket: https://phabricator.wikimedia.org/T345528

Convert AddressPage to script setup

1e7b11c

* Moved functionality into composables * Added more tests Ticket: https://phabricator.wikimedia.org/T345528

Rename form_inputs to legacy_form_inputs

0a8769b

These inputs are all ripped from Buefy and are going to be replaced Ticket: https://phabricator.wikimedia.org/T345528

Add new RadioField and RadioFormInput components

d5bde6c

This adds a reusable radio field component. Also adds tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Add a SelectField and SelectFormInput

b10df73

Also added tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Add TextField and TextFormInput

c1d5d8f

Added tests for both. Ticket: https://phabricator.wikimedia.org/T345528

Add new Email field

1407825

Also added tests Ticket: https://phabricator.wikimedia.org/T345528

Add new City Autocomplete field

b770c11

Ticket: https://phabricator.wikimedia.org/T345528

Add composables for AddressType, Newsletter, Receipt

1a888c7

Ticket: https://phabricator.wikimedia.org/T345528

Add Country Autocomplete field

a0ccde3

* Add tests * Modify the Text Input so it bubbles events properly * Add @test alias to jest and ts configs Ticket: https://phabricator.wikimedia.org/T345528

Hook up remaining fields

cf3cafa

* New donation form is now functional but ugly * Adjusted form inputs to allow more model types * Fixed DonationForm tests Ticket: https://phabricator.wikimedia.org/T345528

Fix issues with country autocomplete

587e8e8

Add new i18n keys for items with email

ab81cfb

Add styles for new form fields

04e71d4

This adds the styles with the new spacing guidelines to the new input fields. Ticket: https://phabricator.wikimedia.org/T345528

Add payment and tracking to address form

089f1aa

Adds hidden fields to post tracking and payment information when the form is submitted. Ticket: https://phabricator.wikimedia.org/T345528

Make address form submittable

4a85188

This fixes validation and field names to make sure the form submits to the application correctly. https://phabricator.wikimedia.org/T345528

Add company contact summary

067fd29

This adds a new donation summary to cover display of the new company donor with contact details. Ticket: https://phabricator.wikimedia.org/T345528

Submit country code as country

584ccf8

Add a hidden field to the country autocomplete that contains the country code to be submitted to the application. Ticket: https://phabricator.wikimedia.org/T345528

Update salutation on language change

71a60c4

The salutation should be re-localised if the donor changes language after selecting one. Ticket: https://phabricator.wikimedia.org/T345528

Abban force-pushed the C23_WMDE_Desktop_DE_05 branch from 4b7e73c to 71a60c4 Compare September 18, 2023 12:38

Abban and others added 3 commits September 18, 2023 14:45

Add language keys for test

3ee109e

Ticket: https://phabricator.wikimedia.org/T345528

Show error on receipt not selected

1eb5d00

Ticket: https://phabricator.wikimedia.org/T345528

Quickfix for AccountNumberField

8637b5a

For some (currently unknown reason) the form does not send the IBAN any more when its rendering component has no name attribute

gbirke approved these changes Sep 20, 2023

View reviewed changes

Add a default template option to FeatureToggle

23b4311

If a campaign times out then this allows a fallback slot to be rendered. Ticket: https://phabricator.wikimedia.org/T345528

Abban force-pushed the C23_WMDE_Desktop_DE_05 branch from 8fc28fb to 23b4311 Compare September 21, 2023 05:41

Abban marked this pull request as ready for review September 21, 2023 05:44

Abban added 7 commits September 21, 2023 08:36

Move radio input styles

fa571df

Move form field settings

ead3afd

Move text input styles

0eac2aa

Move checkbox input styles

f444747

Move select input styles

4507661

Move mailing list field

efe4885

Move misc field styles into components

83bba9e

Abban mentioned this pull request Sep 21, 2023

[Follow up] Move styles #195

Merged

Abban and others added 9 commits September 21, 2023 15:17

Merge pull request #195 from wmde/move-styles

6c2b5ba

[Follow up] Move styles

Add a default template option to FeatureToggle

5a4c1c0

If a campaign times out then this allows a fallback slot to be rendered. Ticket: https://phabricator.wikimedia.org/T345528

New styles for donation payment summary

c6bbc28

Fix naming of form fields and elements folders

0eea398

Add styling for buttons and summary

1787769

* Renames the form_inputs to form_elements * Adds new buttons * Add component and styles for the payment summary Ticket: https://phabricator.wikimedia.org/T345722

Remove unused items from form scss settings

cb88c6c

Merge pull request #194 from wmde/payment-summary-style-guide

426768d

New styles for donation payment summary

moiikana mentioned this pull request Sep 22, 2023

[Fix] Use hidden submitvalue fields rather than html field names #196

Merged

moiikana added 2 commits September 25, 2023 11:54

Move submitValuesForm ref to the address form composable

56c92f8

Merge pull request #196 from wmde/switch-back-to-submitvalues

9de3075

[Fix] Use hidden submitvalue fields rather than html field names

moiikana merged commit 68f3b5d into main Sep 25, 2023
1 check passed

moiikana deleted the C23_WMDE_Desktop_DE_05 branch September 25, 2023 10:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

C23_WMDE_Desktop_DE_05 #182

C23_WMDE_Desktop_DE_05 #182

Abban commented Sep 13, 2023 •

edited

Loading

gbirke left a comment

gbirke Sep 20, 2023

Abban Sep 21, 2023

gbirke Sep 20, 2023

Abban Sep 21, 2023

Abban Sep 21, 2023

gbirke Sep 20, 2023

Abban Sep 21, 2023

gbirke Sep 20, 2023

gbirke Sep 20, 2023

Abban Sep 21, 2023

		@@ -0,0 +1,11 @@
		import { Ref, ref, UnwrapRef, watch } from 'vue';

		export function useFieldModel<T>( modelValue: () => UnwrapRef<T>, initialValue: T ): Ref<UnwrapRef<T>> {

		@@ -0,0 +1,23 @@
		import { computed, ref, UnwrapRef, watch, WritableComputedRef } from 'vue';

		export function useInputModel<T>(


		<style scoped lang="scss">

		</style>

C23_WMDE_Desktop_DE_05 #182

C23_WMDE_Desktop_DE_05 #182

Conversation

Abban commented Sep 13, 2023 • edited Loading

gbirke left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Abban commented Sep 13, 2023 •

edited

Loading