From cd446b659d1fd65c11ac389ef65a60deeded90f1 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Thu, 19 Sep 2024 18:45:24 +0200
Subject: [PATCH] Create new scroll target for top of payment section

- this will prevent content from getting overlapped by the navigation bar

https://phabricator.wikimedia.org/T368525
---
 .../donation_form/singlePageFormSections/PaymentSection.vue     | 2 ++
 .../singlePageFormSections/PersonalDataSection.vue              | 2 +-
 .../PersonalDataSectionDonationReceipt.vue                      | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue b/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue
index 2b21c7a2c..cbecd2afc 100644
--- a/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue
+++ b/src/components/pages/donation_form/singlePageFormSections/PaymentSection.vue
@@ -1,4 +1,5 @@
 <template>
+	<ScrollTarget target-id="payment-section-top-scroll-target"/>
 	<div
 		id="donation-page-form-section-payment"
 		class="donation-page-form-section"
@@ -22,6 +23,7 @@
 
 <script setup lang="ts">
 import Payment from '@src/components/pages/donation_form/Payment.vue';
+import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 
 interface Props {
 	paymentAmounts: number[];
diff --git a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue
index 69a81ee4f..3f28596e5 100644
--- a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue
+++ b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue
@@ -137,7 +137,7 @@ const setFullSelected = ( selected: boolean ) => {
 };
 
 const scrollToPaymentSection = () => {
-	const scrollIntoViewElement = document.getElementById( 'donation-page-form-section-payment' );
+	const scrollIntoViewElement = document.getElementById( 'payment-section-top-scroll-target' );
 	if ( scrollIntoViewElement ) {
 		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
 	}
diff --git a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue
index 8a0fc35aa..d9b08c7d0 100644
--- a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue
+++ b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSectionDonationReceipt.vue
@@ -200,7 +200,7 @@ const mailingList = useMailingListModel( store );
 const { receiptNeeded, showReceiptOptionError } = useReceiptModel( store );
 const countryWasRestored = ref<boolean>( false );
 const scrollToPaymentSection = () => {
-	const scrollIntoViewElement = document.getElementById( 'donation-page-form-section-payment' );
+	const scrollIntoViewElement = document.getElementById( 'payment-section-top-scroll-target' );
 	if ( scrollIntoViewElement ) {
 		scrollIntoViewElement.scrollIntoView( { behavior: 'smooth' } );
 	}