Add survey tile

src/Domain/Membership/MembershipApplicationConfirmationData.ts

@@ -11,4 +11,5 @@ export interface MembershipApplicationConfirmationData {
 	membershipApplication: MembershipApplication;
 	address: MembershipAddress;
 	countries: Country[];
+	tracking?: string;
 }

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';

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>

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();
+	} );
+
 } );