Skip to content

Commit

Permalink
Adapt new BankField changes
Browse files Browse the repository at this point in the history 
- rebased main (new BankFields component got introduced)
- adapted some tests and components for that
  • Loading branch information
@moiikana
moiikana committed Sep 10, 2024
1 parent 5fdcb52 commit b799dad
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 92 deletions.
55 changes: 31 additions & 24 deletions src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<template>

<div
id="single-page-form-section-personal-data"
class="single-page-form-section"
aria-live="assertive"
aria-labelledby="donation-form-subheading donation-form-tagline"
>
<h2 id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
<p id="donation-form-tagline">{{ $t( 'donation_form_section_address_tagline' ) }}</p>

<form v-if="isDirectDebitPayment" id="bank-data-details" @submit="evt => evt.preventDefault()">
<ScrollTarget target-id="iban-scroll-target"/>
<PaymentBankData
:validateBankDataUrl="validateBankDataUrl"
:validateLegacyBankDataUrl="validateLegacyBankDataUrl"
/>
<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_payment_bankdata_title' ) }}</h2>
<BankFields/>
</form>

<form id="address-type-selection" @submit="evt => evt.preventDefault()">
Expand Down Expand Up @@ -83,38 +81,38 @@
<form :action="`/donation/add?${campaignParams}`" method="post" ref="submitValuesForm" id="submit-form">
<SubmitValues :tracking-data="trackingData" :campaign-values="campaignValues"/>
</form>

</div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
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 DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
import AddressForms from '@src/components/pages/donation_form/AddressForms.vue';
import SinglePageErrorSummary
from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
import StreetAutocompleteSinglePageErrorSummaries
from '@src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue';
import SubmitValues from '@src/components/pages/donation_form/SubmitValues.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';
import FormSummary from '@src/components/shared/FormSummary.vue';
import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
import { CampaignValues } from '@src/view_models/CampaignValues';
import { Country } from '@src/view_models/Country';
import { Salutation } from '@src/view_models/Salutation';
import { TrackingData } from '@src/view_models/TrackingData';
import { CampaignValues } from '@src/view_models/CampaignValues';
import { AddressValidation } from '@src/view_models/Validation';
import { inject, ref } from 'vue';
import { QUERY_STRING_INJECTION_KEY } from '@src/util/createCampaignQueryString';
import { useStore } from 'vuex';
import { useAddressTypeFunctions } from '@src/components/pages/donation_form/AddressTypeFunctions';
import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
import { trackDynamicForm } from '@src/util/tracking';
import {
usePersonalDataSectionEventHandlers,
} from '@src/components/pages/donation_form/usePersonalDataSectionEventHandlers';
import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
import { useAddressTypeFunctions } from '@src/components/pages/donation_form/AddressTypeFunctions';
import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
import { AddressValidation } from '@src/view_models/Validation';
import { QUERY_STRING_INJECTION_KEY } from '@src/util/createCampaignQueryString';
import { useStore } from 'vuex';
import SinglePageErrorSummary
from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
import StreetAutocompleteSinglePageErrorSummaries
from '@src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue';
import BankFields from '@src/components/shared/BankFields.vue';
interface Props {
assetsPath: string;
Expand All @@ -133,6 +131,7 @@ const props = defineProps<Props>();
const campaignParams = inject<string>( QUERY_STRING_INJECTION_KEY, '' );
const isFullSelected = ref( false );
const store = useStore();
defineExpose( { focus: (): void => pageRef.value.focus() } );
const setFullSelected = ( selected: boolean ) => {
isFullSelected.value = selected;
Expand All @@ -145,7 +144,7 @@ const scrollToPaymentSection = () => {
}
};
// TODO tracking: (form can be tracked normally, doesn't have to do fancy dynamic tracking anymore)
onMounted( trackDynamicForm );
const {
disabledAddressTypes,
Expand All @@ -166,7 +165,6 @@ const {
inlineSummaryLanguageItem,
} = useAddressSummary( store );
// TODO this submit button/behaviour has to be adjusted/rewritten for the new singlepage form
const { submit, submitValuesForm, showErrorSummary } = usePersonalDataSectionEventHandlers(
store,
addressType,
Expand All @@ -176,3 +174,12 @@ const { submit, submitValuesForm, showErrorSummary } = usePersonalDataSectionEve
);
</script>

<style lang="scss">
@use '@src/scss/settings/units';
@use 'sass:map';
.address-type-anonymous-disclaimer {
margin-top: map.get( units.$spacing, 'medium' );
}
</style>
131 changes: 77 additions & 54 deletions ...ponents/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
<template>
<div
id="single-page-form-section-personal-data-donation-receipt"
class="single-page-form-section"
id="single-page-form-section-personal-data-donation-receipt"
aria-labelledby="donation-form-subheading donation-form-tagline"
>

<h2 id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
<p id="donation-form-tagline">{{ $t( 'donation_form_section_address_tagline' ) }}</p>

<form v-if="isDirectDebitPayment" id="bank-data-details" @submit="evt => evt.preventDefault()">
<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_payment_bankdata_title' ) }}</h2>
<BankFields/>
</form>

<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>

<form @submit.prevent="submit" id="donation-form" action="/donation/add" method="post">
<AutofillHandler @autofill="onAutofill">
<ScrollTarget target-id="iban-scroll-target"/>
<PaymentBankData
v-if="isDirectDebitPayment"
:validateBankDataUrl="validateBankDataUrl"
:validateLegacyBankDataUrl="validateLegacyBankDataUrl"
/>

<NameFields
:show-error="fieldErrors"
Expand Down Expand Up @@ -61,23 +63,47 @@
</template>
</RadioField>

<AddressFields
v-if="receiptNeeded"
:show-error="fieldErrors"
:form-data="formData"
:countries="countries"
:post-code-validation="addressValidationPatterns.postcode"
:country-was-restored="countryWasRestored"
@field-changed="onFieldChange"
/>
<FeatureToggle default-template="campaigns.address_field_order.legacy">
<template #campaigns.address_field_order.legacy>
<AddressFields
v-if="receiptNeeded"
:show-error="fieldErrors"
:form-data="formData"
:countries="countries"
:post-code-validation="addressValidationPatterns.postcode"
:country-was-restored="countryWasRestored"
@field-changed="onFieldChange"
/>
<SinglePageErrorSummary
:show-error-summary="showErrorSummary"
:address-type="addressType"
:show-receipt-option-error="showReceiptOptionError"
:receipt-needed="receiptNeeded"
/>
</template>

</AutofillHandler>
<template #campaigns.address_field_order.new_order>
<AddressFieldsStreetAutocomplete
v-if="receiptNeeded"
:show-error="fieldErrors"
:form-data="formData"
:countries="countries"
:post-code-validation="addressValidationPatterns.postcode"
:country-was-restored="countryWasRestored"
@field-changed="onFieldChange"
/>

<SinglePageErrorSummary
:show-error-summary="showErrorSummary"
:address-type="addressType"
:show-receipt-option-error="showReceiptOptionError"
/>
TODO ERROR SUMMARY
<AddressFormErrorSummariesStreetAutocomplete
:show-error-summary="showErrorSummary"
:address-type="addressType"
:show-receipt-option-error="showReceiptOptionError"
:receipt-needed="receiptNeeded"
/>
</template>
</FeatureToggle>

</AutofillHandler>

<FormSummary>
<template #summary-content>
Expand Down Expand Up @@ -110,51 +136,49 @@
<form id="donation-form-submit-values" ref="submitValuesForm" action="/donation/add" method="post">
<submit-values :tracking-data="trackingData" :campaign-values="campaignValues"></submit-values>
</form>

</div>

</template>

<script setup lang="ts">
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';
import { onBeforeMount, onMounted, ref } from 'vue';
import AddressFields from '@src/components/pages/donation_form/DonationReceipt/AddressFields.vue';
import AutofillHandler from '@src/components/shared/AutofillHandler.vue';
import DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
import FormSummary from '@src/components/shared/FormSummary.vue';
import EmailField from '@src/components/shared/form_fields/EmailField.vue';
import FormButton from '@src/components/shared/form_elements/FormButton.vue';
import MailingListField from '@src/components/shared/form_fields/MailingListField.vue';
import NameFields from '@src/components/pages/donation_form/DonationReceipt/NameFields.vue';
import RadioField from '@src/components/shared/form_fields/RadioField.vue';
import AddressFields from '@src/components/pages/donation_form/DonationReceipt/AddressFields.vue';
import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
import FormButton from '@src/components/shared/form_elements/FormButton.vue';
import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
import { AddressValidation } from '@src/view_models/Validation';
import { CampaignValues } from '@src/view_models/CampaignValues';
import { Country } from '@src/view_models/Country';
import { Salutation } from '@src/view_models/Salutation';
import { TrackingData } from '@src/view_models/TrackingData';
import { CampaignValues } from '@src/view_models/CampaignValues';
import { AddressValidation } from '@src/view_models/Validation';
import { useStore } from 'vuex';
import { StoreKey } from '@src/store/donation_store';
import { useAddressType } from '@src/components/pages/donation_form/DonationReceipt/useAddressType';
import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
import { useMailingListModel } from '@src/components/shared/form_fields/useMailingListModel';
import { useReceiptModel } from '@src/components/pages/donation_form/DonationReceipt/useReceiptModel';
import { onBeforeMount, onMounted, ref } from 'vue';
import { useAddressFunctions } from '@src/components/pages/donation_form/AddressFunctions';
import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
import { Validity } from '@src/view_models/Validity';
import { adjustSalutationLocaleIfNeeded } from '@src/components/shared/SalutationLocaleAdjuster';
import { trackDynamicForm } from '@src/util/tracking';
import {
usePersonalDataSectionEventHandlers,
} from '@src/components/pages/donation_form/DonationReceipt/usePersonalDataSectionEventHandlers';
import {
useAddressTypeFromReceiptSetter,
} from '@src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter';
import { Validity } from '@src/view_models/Validity';
import { trackDynamicForm } from '@src/util/tracking';
import { adjustSalutationLocaleIfNeeded } from '@src/components/shared/SalutationLocaleAdjuster';
import { useAddressFunctions } from '@src/components/pages/donation_form/AddressFunctions';
import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
import { useAddressType } from '@src/components/pages/donation_form/DonationReceipt/useAddressType';
import { useAddressTypeFromReceiptSetter } from '@src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter';
import { useMailingListModel } from '@src/components/shared/form_fields/useMailingListModel';
import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
import { useReceiptModel } from '@src/components/pages/donation_form/DonationReceipt/useReceiptModel';
import { useStore } from 'vuex';
import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
import FormSummary from '@src/components/shared/FormSummary.vue';
import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
import SinglePageErrorSummary from '@src/components/pages/donation_form/DonationReceipt/SinglePageErrorSummary.vue';
import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
import BankFields from '@src/components/shared/BankFields.vue';
import AddressFieldsStreetAutocomplete
from '@src/components/pages/donation_form/DonationReceipt/AddressFieldsStreetAutocomplete.vue';
import AddressFormErrorSummariesStreetAutocomplete
from '@src/components/pages/donation_form/DonationReceipt/AddressFormErrorSummariesStreetAutocomplete.vue';
interface Props {
assetsPath: string;
Expand All @@ -170,14 +194,14 @@ interface Props {
}
const props = defineProps<Props>();
const store = useStore( StoreKey );
const store = useStore();
const { addressType, addressTypeName } = useAddressType( store );
const { addressSummary, inlineSummaryLanguageItem } = useAddressSummary( store );
const mailingList = useMailingListModel( store );
const { receiptNeeded, showReceiptOptionError } = useReceiptModel( store );
const countryWasRestored = ref<boolean>( false );
defineExpose( { focus: (): void => pageRef.value.focus() } );
const scrollToPaymentSection = () => {
const scrollIntoViewElement = document.getElementById( 'single-page-form-section-payment' );
if ( scrollIntoViewElement ) {
Expand Down Expand Up @@ -214,7 +238,6 @@ onBeforeMount( () => {
} );
onMounted( () => {
// TODO tracking: needs simple form tracking
trackDynamicForm();
// TODO: This should probably be initialised elsewhere maybe in the entry point?
Expand Down
Loading

0 comments on commit b799dad

Please sign in to comment.