From 4a0fe8bcc94b2158502d5624de82b2e8bd0d013c Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gb@birke-software.de>
Date: Mon, 23 Dec 2024 18:48:43 +0100
Subject: [PATCH] Add survey tile on membership page

Add a survey tile on the membership confirmation page when its language
item containing the link is not empty. The components and tests are
similar to the donation page.

Ticket: https://phabricator.wikimedia.org/T381958
---
 .../MembershipApplicationConfirmationData.ts  |  1 +
 .../pages/MembershipConfirmation.vue          |  6 ++++
 .../MembershipSurvey.vue                      | 18 +++++++++++
 .../pages/MembershipConfirmation.spec.ts      | 31 +++++++++++++++++--
 4 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components/pages/membership_confirmation/MembershipSurvey.vue

diff --git a/src/Domain/Membership/MembershipApplicationConfirmationData.ts b/src/Domain/Membership/MembershipApplicationConfirmationData.ts
index 22d802a42..d9bd40cb3 100644
--- a/src/Domain/Membership/MembershipApplicationConfirmationData.ts
+++ b/src/Domain/Membership/MembershipApplicationConfirmationData.ts
@@ -11,4 +11,5 @@ export interface MembershipApplicationConfirmationData {
 	membershipApplication: MembershipApplication;
 	address: MembershipAddress;
 	countries: Country[];
+	tracking?: string;
 }
diff --git a/src/components/pages/MembershipConfirmation.vue b/src/components/pages/MembershipConfirmation.vue
index 151a2ec34..6cc4085c0 100644
--- a/src/components/pages/MembershipConfirmation.vue
+++ b/src/components/pages/MembershipConfirmation.vue
@@ -23,11 +23,17 @@
 			<p>{{ address.email }}</p>
 		</div>
 
+		<membership-survey
+			v-if="$t( 'membership_confirmation_survey_link') !== ''"
+			:tracking="confirmationData.tracking ?? ''"
+		/>
+
 		<MembershipConfirmationBannerNotifier/>
 	</div>
 </template>
 
 <script setup lang="ts">
+import MembershipSurvey from '@src/components/pages/membership_confirmation/MembershipSurvey.vue';
 import MembershipConfirmationBannerNotifier
 	from '@src/components/pages/membership_confirmation/MembershipConfirmationBannerNotifier.vue';
 import { Salutation } from '@src/view_models/Salutation';
diff --git a/src/components/pages/membership_confirmation/MembershipSurvey.vue b/src/components/pages/membership_confirmation/MembershipSurvey.vue
new file mode 100644
index 000000000..1ccc139be
--- /dev/null
+++ b/src/components/pages/membership_confirmation/MembershipSurvey.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="membership-confirmation-card membership-survey">
+		<h2 class="icon-title"><donor-icon/> {{ $t( 'membership_confirmation_survey_title' ) }}</h2>
+		<p>{{ $t( 'membership_confirmation_survey_content' ) }}</p>
+		<p><a target="_blank" :href="$t( 'membership_confirmation_survey_link', { tracking: tracking } )">{{ $t( 'membership_confirmation_survey_link_text' ) }}</a></p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import DonorIcon from '@src/components/shared/icons/DonorIcon.vue';
+
+interface Props {
+	tracking: string;
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/tests/unit/components/pages/MembershipConfirmation.spec.ts b/tests/unit/components/pages/MembershipConfirmation.spec.ts
index 69942d8f2..b7ee796db 100644
--- a/tests/unit/components/pages/MembershipConfirmation.spec.ts
+++ b/tests/unit/components/pages/MembershipConfirmation.spec.ts
@@ -45,7 +45,8 @@ const yearlyApplication: MembershipApplication = {
 };
 
 describe( 'MembershipConfirmation.vue', () => {
-	const getWrapper = ( membershipApplication: MembershipApplication, address: MembershipAddress ) => {
+	const getWrapper = ( membershipApplication: MembershipApplication, address: MembershipAddress, translationMock?: ( key: string, params?: Object ) => string ) => {
+		const translateFn = translationMock === undefined ? ( key: string, params?: Object ) => JSON.stringify( [ key, params ] ) : translationMock;
 		const confirmationData: MembershipApplicationConfirmationData = {
 			piwik: {
 				membershipApplicationConfirmationGoalId: 123,
@@ -63,7 +64,7 @@ describe( 'MembershipConfirmation.vue', () => {
 			},
 			global: {
 				mocks: {
-					$t: ( key: string, params?: Object ) => JSON.stringify( [ key, params ] ),
+					$t: translateFn,
 					$n: ( amount: string ) => amount,
 				},
 			},
@@ -126,4 +127,30 @@ describe( 'MembershipConfirmation.vue', () => {
 		expect( wrapper.text() ).toContain( 'membership_confirmation_success_text_bank_transfer' );
 	} );
 
+	test( 'shows the survey tile if survey link language item is not empty', () => {
+		const translateMock = ( key: string ): string => {
+			if ( key === 'membership_confirmation_survey_link' ) {
+				return 'https://example.com/survey';
+			}
+
+			return key;
+		};
+		const wrapper = getWrapper( yearlyApplication, privateAddress, translateMock );
+
+		expect( wrapper.find( '.membership-survey' ).exists() ).toBeTruthy();
+	} );
+
+	test( 'hides the survey tile if survey link language item is blank', () => {
+		const translateMock = ( key: string ): string => {
+			if ( key === 'membership_confirmation_survey_link' ) {
+				return '';
+			}
+
+			return key;
+		};
+		const wrapper = getWrapper( yearlyApplication, privateAddress, translateMock );
+
+		expect( wrapper.find( '.membership-survey' ).exists() ).toBeFalsy();
+	} );
+
 } );