Single page form file restructure

package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-	"start": "npm run dev",
-	"serve": "npm run dev",
+    "start": "npm run dev",
+    "serve": "npm run dev",
     "dev": "cross-env NODE_ENV=development webpack serve --host 0.0.0.0",
     "build": "cross-env NODE_ENV=production webpack",
     "test:unit": "jest --maxWorkers=1",
     "lint": "eslint --ext .ts,.vue src/ tests/",
     "fix-cs": "eslint --fix --ext .ts,.vue src/",
     "ci": "npm run lint && npm run test:unit",
-	"pally": "pa11y http://localhost:8082/"
+    "pally": "pa11y http://localhost:8082/"
   },
   "dependencies": {
     "@airbrake/browser": "^2.1.8",
@@ -53,9 +53,9 @@
     "eslint-plugin-jsdoc": "^50.4.3",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-json-es": "^1.6.0",
-    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "eslint-plugin-unicorn": "^56.0.0",
     "eslint-plugin-vue": "^9.29.1",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-plugin": "^5.6.2",
     "jest": "^29.7.0",

src/components/layout/Logo.vue

@@ -41,9 +41,6 @@
 </template>
 
 <style lang="scss">
-@import "../../scss/variables";
-@import "~bulma/sass/utilities/mixins";
-
 .wikimedia-logo-graphic {
 	width: 36px;
 	height: 37px;

src/components/pages/DonationForm.vue

@@ -1,68 +1,22 @@
 <template>
-	<div id="laika-donation">
-		<FeatureToggle default-template="campaigns.address_pages.legacy">
-			<template #campaigns.address_pages.legacy>
-				<PaymentSection
-					:payment-amounts="paymentAmounts"
-					:payment-intervals="paymentIntervals"
-					:payment-types="paymentTypes"
-				/>
-				<div class="donation-page-form-section" v-if="isDirectDebit">
-					<IbanFields/>
-				</div>
-				<PersonalDataSection
-					:assets-path="assetsPath"
-					:validate-address-url="validateAddressUrl"
-					:validate-email-url="validateEmailUrl"
-					:validate-bank-data-url="validateBankDataUrl"
-					:validate-legacy-bank-data-url="validateLegacyBankDataUrl"
-					:countries="countries"
-					:salutations="salutations"
-					:tracking-data="trackingData"
-					:campaign-values="campaignValues"
-					:address-validation-patterns="addressValidationPatterns"
-					/>
-			</template>
-			<template #campaigns.address_pages.test_02>
-				<PaymentSection
-					:payment-amounts="paymentAmounts"
-					:payment-intervals="paymentIntervals"
-					:payment-types="paymentTypes"
-				/>
-				<div class="donation-page-form-section" v-if="isDirectDebit">
-					<IbanFields/>
-				</div>
-				<PersonalDataSectionDonationReceipt
-					:assets-path="assetsPath"
-					:validate-address-url="validateAddressUrl"
-					:validate-email-url="validateEmailUrl"
-					:validate-bank-data-url="validateBankDataUrl"
-					:validate-legacy-bank-data-url="validateLegacyBankDataUrl"
-					:countries="countries"
-					:salutations="salutations"
-					:tracking-data="trackingData"
-					:campaign-values="campaignValues"
-					:address-validation-patterns="addressValidationPatterns"
-				/>
-			</template>
-		</FeatureToggle>
-	</div>
+	<FeatureToggle default-template="campaigns.address_pages.legacy">
+		<template #campaigns.address_pages.legacy>
+			<StandardDonationForm v-bind="props"/>
+		</template>
+		<template #campaigns.address_pages.test_02>
+			<ReceiptDonationForm v-bind="props"/>
+		</template>
+	</FeatureToggle>
 </template>
 
 <script setup lang="ts">
 import { TrackingData } from '@src/view_models/TrackingData';
-
 import { Country } from '@src/view_models/Country';
 import { AddressValidation } from '@src/view_models/Validation';
 import { Salutation } from '@src/view_models/Salutation';
 import { CampaignValues } from '@src/view_models/CampaignValues';
-import PaymentSection from '@src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue';
-import PersonalDataSection from '@src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue';
-import PersonalDataSectionDonationReceipt
-	from '@src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue';
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-import IbanFields from '@src/components/shared/IbanFields.vue';
+import StandardDonationForm from '@src/components/pages/donation_form/SubPages/DonationForm.vue';
+import ReceiptDonationForm from '@src/components/pages/donation_form/SubPages/DonationFormReceipt.vue';
 
 defineOptions( {
 	name: 'DonationForm',
@@ -83,10 +37,7 @@ interface Props {
 	campaignValues: CampaignValues;
 	addressValidationPatterns: AddressValidation;
 }
-defineProps<Props>();
-
-const store = useStore();
-const isDirectDebit = computed<boolean>( (): boolean => store.getters[ 'payment/isDirectDebitPayment' ] );
+const props = defineProps<Props>();
 
 </script>
 

src/components/pages/UpdateAddress.vue

@@ -116,13 +116,13 @@ import NameFields from '@src/components/shared/NameFields.vue';
 import PostalAddressFields from '@src/components/shared/PostalAddressFields.vue';
 import FormButton from '@src/components/shared/form_elements/FormButton.vue';
 import CheckboxField from '@src/components/shared/form_fields/CheckboxField.vue';
-import { useAddressTypeFunctions } from '@src/components/pages/donation_form/AddressTypeFunctions';
-import { useReceiptModel } from '@src/components/pages/donation_form/useReceiptModel';
+import { useAddressTypeFunctions } from '@src/components/shared/composables/useAddressTypeFunctions';
 import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
 import ServerMessage from '@src/components/shared/ServerMessage.vue';
 import { addressTypeName } from '@src/view_models/AddressTypeModel';
 import { UpdateAddressResponse } from '@src/api/UpdateAddressResponse';
 import { AddressChangeResource } from '@src/api/AddressChangeResource';
+import { useReceiptModel } from '@src/components/shared/composables/useReceiptModel';
 
 defineOptions( {
 	name: 'UpdateAddress',

src/components/pages/donation_confirmation/AddressUpdateForm.vue

@@ -116,7 +116,7 @@ import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPla
 import NameFields from '@src/components/shared/NameFields.vue';
 import RadioField from '@src/components/shared/form_fields/RadioField.vue';
 import PostalAddressFields from '@src/components/shared/PostalAddressFields.vue';
-import { useAddressTypeFunctions } from '@src/components/pages/donation_form/AddressTypeFunctions';
+import { useAddressTypeFunctions } from '@src/components/shared/composables/useAddressTypeFunctions';
 import { MAILING_LIST_ADDRESS_PAGE } from '@src/config';
 import AddressUpdateFormErrorSummaries
 	from '@src/components/pages/donation_confirmation/AddressUpdateFormErrorSummaries.vue';

src/components/pages/donation_form/AddressForms.vue

@@ -15,30 +15,15 @@
 					field-id-namespace="person"
 					v-on:field-changed="onFieldChange"
 				/>
-				<FeatureToggle default-template="campaigns.address_field_order.legacy">
-					<template #campaigns.address_field_order.legacy>
-						<PostalAddressFields
-							:show-error="fieldErrors"
-							:form-data="formData"
-							:countries="countries"
-							:post-code-validation="addressValidationPatterns.postcode"
-							:country-was-restored="countryWasRestored"
-							field-id-namespace="person"
-							v-on:field-changed="onFieldChange"
-						/>
-					</template>
-					<template #campaigns.address_field_order.new_order>
-						<StreetAutocompletePostalAddressFields
-							:show-error="fieldErrors"
-							:form-data="formData"
-							:countries="countries"
-							:post-code-validation="addressValidationPatterns.postcode"
-							:country-was-restored="countryWasRestored"
-							field-id-namespace="person"
-							v-on:field-changed="onFieldChange"
-						/>
-					</template>
-				</FeatureToggle>
+				<PostalAddressFields
+					:show-error="fieldErrors"
+					:form-data="formData"
+					:countries="countries"
+					:post-code-validation="addressValidationPatterns.postcode"
+					:country-was-restored="countryWasRestored"
+					field-id-namespace="person"
+					v-on:field-changed="onFieldChange"
+				/>
 				<div class="form-field form-field-donation-receipt">
 					<CheckboxSingleFormInput
 						input-id="receipt-option-person"
@@ -83,30 +68,15 @@
 					field-id-namespace="company"
 					v-on:field-changed="onFieldChange"
 				/>
-				<FeatureToggle default-template="campaigns.address_field_order.legacy">
-					<template #campaigns.address_field_order.legacy>
-						<PostalAddressFields
-							:show-error="fieldErrors"
-							:form-data="formData"
-							:countries="countries"
-							:post-code-validation="addressValidationPatterns.postcode"
-							:country-was-restored="countryWasRestored"
-							field-id-namespace="company"
-							v-on:field-changed="onFieldChange"
-						/>
-					</template>
-					<template #campaigns.address_field_order.new_order>
-						<StreetAutocompletePostalAddressFields
-							:show-error="fieldErrors"
-							:form-data="formData"
-							:countries="countries"
-							:post-code-validation="addressValidationPatterns.postcode"
-							:country-was-restored="countryWasRestored"
-							field-id-namespace="company"
-							v-on:field-changed="onFieldChange"
-						/>
-					</template>
-				</FeatureToggle>
+				<PostalAddressFields
+					:show-error="fieldErrors"
+					:form-data="formData"
+					:countries="countries"
+					:post-code-validation="addressValidationPatterns.postcode"
+					:country-was-restored="countryWasRestored"
+					field-id-namespace="company"
+					v-on:field-changed="onFieldChange"
+				/>
 				<div class="form-field form-field-donation-receipt">
 					<CheckboxSingleFormInput
 						input-id="receipt-option-company"
@@ -175,8 +145,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeMount, ref, toRefs } from 'vue';
-import PostalAddressFields from '@src/components/shared/PostalAddressFields.vue';
-import StreetAutocompletePostalAddressFields from '@src/components/pages/donation_form/StreetAutocomplete/PostalAddressFields.vue';
+import PostalAddressFields from '@src/components/pages/donation_form/PostalAddressFields.vue';
 import AutofillHandler from '@src/components/shared/AutofillHandler.vue';
 import CheckboxSingleFormInput from '@src/components/shared/form_elements/CheckboxSingleFormInput.vue';
 import EmailField from '@src/components/shared/form_fields/EmailField.vue';
@@ -192,27 +161,25 @@ import { CampaignValues } from '@src/view_models/CampaignValues';
 import { AddressTypeIds } from '@src/components/pages/donation_form/AddressTypeIds';
 import { Validity } from '@src/view_models/Validity';
 import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
-import { useReceiptModel } from '@src/components/pages/donation_form/useReceiptModel';
 import { useMailingListModel } from '@src/components/shared/form_fields/useMailingListModel';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 import { useStore } from 'vuex';
+import { useReceiptModel } from '@src/components/shared/composables/useReceiptModel';
 
 interface Props {
 	countries: Country[],
 	addressValidationPatterns: AddressValidation,
 	addressType: AddressTypeModel,
-	isFullSelected?: boolean,
 	salutations: Salutation[],
 	trackingData: TrackingData,
 	campaignValues: CampaignValues,
 }
 
 const props = withDefaults( defineProps<Props>(), {
-	isFullSelected: false,
 	addressType: AddressTypeModel.PERSON,
 } );
 
-const { addressType, isFullSelected, addressValidationPatterns } = toRefs( props );
+const { addressType, addressValidationPatterns } = toRefs( props );
 const store = useStore();
 const {
 	formData,
@@ -221,12 +188,13 @@ const {
 	onFieldChange,
 	onAutofill,
 } = useAddressFunctions( { addressValidationPatterns: addressValidationPatterns.value }, store );
+
 const mailingList = useMailingListModel( store );
 
 const { receiptNeeded } = useReceiptModel( store );
 
 const addressTypeId = computed( () => {
-	if ( isFullSelected.value && addressType.value === AddressTypeModel.UNSET ) {
+	if ( addressType.value === AddressTypeModel.UNSET ) {
 		return AddressTypeIds.get( AddressTypeModel.PERSON );
 	}
 	return AddressTypeIds.has( addressType.value ) ? AddressTypeIds.get( addressType.value ) : '';

src/components/pages/donation_form/AddressTypeBasic.vue

@@ -50,12 +50,10 @@ interface Props {
 }
 const props = defineProps<Props>();
 
-const emit = defineEmits( [ 'address-type', 'set-full-selected' ] );
+const emit = defineEmits( [ 'address-type' ] );
 
 const addressType = ref<AddressTypeModel>( props.initialAddressType ?? AddressTypeModel.UNSET );
 
-emit( 'set-full-selected', true );
-
 watch( addressType, newAddressType => {
 	emit( 'address-type', newAddressType );
 } );