Skip to content

Commit

Permalink
Create combined ErrorSummary component
Browse files Browse the repository at this point in the history 
- combines error items for payment and address data

https://phabricator.wikimedia.org/T368525
  • Loading branch information
@moiikana
moiikana committed Sep 4, 2024
1 parent ded856e commit cac260c
Show file tree
Hide file tree
Showing 5 changed files with 454 additions and 11 deletions.
216 changes: 216 additions & 0 deletions src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<template>
<ErrorSummary
v-if="addressType === AddressTypeModel.PERSON || addressType === AddressTypeModel.UNSET"
:is-visible="showErrorSummary"
:items="[
{
validity: store.state.payment.validity.amount,
message: $t( 'error_summary_amount' ),
focusElement: 'amount-500',
scrollElement: 'payment-form-amount-scroll-target',
},
{
validity: store.state.payment.validity.type,
message: $t( 'error_summary_payment_type' ),
focusElement: 'paymentType-0',
scrollElement: 'payment-form-type-scroll-target',
},
{
validity: store.state.bankdata.validity.bankdata,
message: $t( 'donation_form_payment_bankdata_error' ),
focusElement: 'iban',
scrollElement: 'iban-scroll-target'
},
{
validity: store.state.address.validity.addressType,
message: $t( 'donation_form_section_address_error' ),
focusElement: 'addressType-0',
scrollElement: 'address-type-scroll-target'
},
{
validity: store.state.address.validity.salutation,
message: $t( 'donation_form_salutation_error' ),
focusElement: 'person-salutation-0',
scrollElement: 'person-salutation-scroll-target'
},
{
validity: store.state.address.validity.firstName,
message: $t( 'donation_form_firstname_error' ),
focusElement: 'person-first-name',
scrollElement: 'person-first-name-scroll-target'
},
{
validity: store.state.address.validity.lastName,
message: $t( 'donation_form_lastname_error' ),
focusElement: 'person-last-name',
scrollElement: 'person-last-name-scroll-target'
},
{
validity: store.state.address.validity.country,
message: $t( 'donation_form_country_error' ),
focusElement: 'person-country',
scrollElement: 'person-country-scroll-target'
},
{
validity: store.state.address.validity.postcode,
message: $t( 'donation_form_zip_error' ),
focusElement: 'person-post-code',
scrollElement: 'person-post-code-scroll-target'
},
{
validity: store.state.address.validity.city,
message: $t( 'donation_form_city_error' ),
focusElement: 'person-city',
scrollElement: 'person-city-scroll-target'
},
{
validity: store.state.address.validity.street,
message: $t( 'donation_form_street_error' ),
focusElement: 'person-street',
scrollElement: 'person-street-scroll-target'
},
{
validity: store.state.address.validity.email,
message: $t( 'donation_form_email_error' ),
focusElement: 'person-email',
scrollElement: 'person-email-scroll-target'
},
]"
/>
<ErrorSummary
v-if="addressType === AddressTypeModel.COMPANY"
:is-visible="showErrorSummary"
:items="[
{
validity: store.state.payment.validity.amount,
message: $t( 'error_summary_amount' ),
focusElement: 'amount-500',
scrollElement: 'payment-form-amount-scroll-target',
},
{
validity: store.state.payment.validity.type,
message: $t( 'error_summary_payment_type' ),
focusElement: 'paymentType-0',
scrollElement: 'payment-form-type-scroll-target',
},
{
validity: store.state.bankdata.validity.bankdata,
message: $t( 'donation_form_payment_bankdata_error' ),
focusElement: 'iban',
scrollElement: 'iban-scroll-target'
},
{
validity: store.state.address.validity.companyName,
message: $t( 'donation_form_companyname_error' ),
focusElement: 'company-company-name',
scrollElement: 'company-company-name-scroll-target'
},
{
validity: store.state.address.validity.country,
message: $t( 'donation_form_country_error' ),
focusElement: 'company-country',
scrollElement: 'company-country-scroll-target'
},
{
validity: store.state.address.validity.postcode,
message: $t( 'donation_form_zip_error' ),
focusElement: 'company-post-code',
scrollElement: 'company-post-code-scroll-target'
},
{
validity: store.state.address.validity.city,
message: $t( 'donation_form_city_error' ),
focusElement: 'company-city',
scrollElement: 'company-city-scroll-target'
},
{
validity: store.state.address.validity.street,
message: $t( 'donation_form_street_error' ),
focusElement: 'company-street',
scrollElement: 'company-street-scroll-target'
},
{
validity: store.state.address.validity.email,
message: $t( 'donation_form_email_error' ),
focusElement: 'company-email',
scrollElement: 'company-email-scroll-target'
},
]"
/>
<ErrorSummary
v-if="addressType === AddressTypeModel.EMAIL"
:is-visible="showErrorSummary"
:items="[
{
validity: store.state.payment.validity.amount,
message: $t( 'error_summary_amount' ),
focusElement: 'amount-500',
scrollElement: 'payment-form-amount-scroll-target',
},
{
validity: store.state.payment.validity.type,
message: $t( 'error_summary_payment_type' ),
focusElement: 'paymentType-0',
scrollElement: 'payment-form-type-scroll-target',
},
{
validity: store.state.address.validity.salutation,
message: $t( 'donation_form_salutation_error' ),
focusElement: 'email-salutation-0',
scrollElement: 'email-salutation-scroll-target'
},
{
validity: store.state.address.validity.firstName,
message: $t( 'donation_form_firstname_error' ),
focusElement: 'email-first-name',
scrollElement: 'email-first-name-scroll-target'
},
{
validity: store.state.address.validity.lastName,
message: $t( 'donation_form_lastname_error' ),
focusElement: 'email-last-name',
scrollElement: 'email-last-name-scroll-target'
},
{
validity: store.state.address.validity.email,
message: $t( 'donation_form_email_error' ),
focusElement: 'email-email',
scrollElement: 'email-email-scroll-target'
},
]"
/>
<ErrorSummary
v-if="addressType === AddressTypeModel.ANON"
:is-visible="showErrorSummary"
:items="[
{
validity: store.state.payment.validity.amount,
message: $t( 'error_summary_amount' ),
focusElement: 'amount-500',
scrollElement: 'payment-form-amount-scroll-target',
},
{
validity: store.state.payment.validity.type,
message: $t( 'error_summary_payment_type' ),
focusElement: 'paymentType-0',
scrollElement: 'payment-form-type-scroll-target',
},
]"
/>
</template>

<script setup lang="ts">
import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
import { useStore } from 'vuex';
import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
interface Props {
showErrorSummary: boolean;
addressType: AddressTypeModel;
}
defineProps<Props>();
const store = useStore();
</script>
11 changes: 6 additions & 5 deletions src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@

<FeatureToggle default-template="campaigns.address_field_order.legacy">
<template #campaigns.address_field_order.legacy>
<AddressFormErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
<SinglePageErrorSummary :show-error-summary="showErrorSummary" :address-type="addressType"/>
</template>

<template #campaigns.address_field_order.new_order>
<StreetAutocompleteAddressFormErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
<StreetAutocompleteSinglePageErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
</template>
</FeatureToggle>

Expand Down Expand Up @@ -92,9 +92,10 @@ import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
import AddressTypeBasic from '@src/components/pages/donation_form/AddressTypeBasic.vue';
import AddressForms from '@src/components/pages/donation_form/AddressForms.vue';
import AddressFormErrorSummaries from '@src/components/pages/donation_form/AddressFormErrorSummaries.vue';
import StreetAutocompleteAddressFormErrorSummaries
from '@src/components/pages/donation_form/StreetAutocomplete/AddressFormErrorSummaries.vue';
import SinglePageErrorSummary
from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
import StreetAutocompleteSinglePageErrorSummaries
from '@src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue';
import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
import FormButton from '@src/components/shared/form_elements/FormButton.vue';
import DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
Expand Down
5 changes: 2 additions & 3 deletions ...ponents/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@

</AutofillHandler>

<AddressFormErrorSummaries
<SinglePageErrorSummary
:show-error-summary="showErrorSummary"
:address-type="addressType"
:show-receipt-option-error="showReceiptOptionError"
Expand Down Expand Up @@ -117,8 +117,6 @@

<script setup lang="ts">
import AddressFormErrorSummaries
from '@src/components/pages/donation_form/DonationReceipt/AddressFormErrorSummaries.vue';
import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
import EmailField from '@src/components/shared/form_fields/EmailField.vue';
import MailingListField from '@src/components/shared/form_fields/MailingListField.vue';
Expand Down Expand Up @@ -156,6 +154,7 @@ import {
import { Validity } from '@src/view_models/Validity';
import { trackDynamicForm } from '@src/util/tracking';
import { adjustSalutationLocaleIfNeeded } from '@src/components/shared/SalutationLocaleAdjuster';
import SinglePageErrorSummary from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
interface Props {
assetsPath: string;
Expand Down
Loading

0 comments on commit cac260c

Please sign in to comment.