From d49caab1a862746931e99bc947b18cb992cd422e Mon Sep 17 00:00:00 2001
From: Eddie Ferrer <eddieferrer@user.noreply.github.com>
Date: Tue, 26 Oct 2021 11:47:37 -0700
Subject: [PATCH] fix: fixes FAQs on pages that use ContentfulPage

* Adds a wrapper component that can be used in conjunction with KvFrequentlyAskedQuestions for contentful pages

VUE-790
---
 .../Contentful/FrequentlyAskedQuestions.vue   | 53 ++++++++++++++
 src/components/Kv/KvExpandableQuestion.vue    |  1 -
 .../Kv/KvFrequentlyAskedQuestions.vue         | 73 +++++++------------
 .../AutoDeposit/AutoDepositLandingPage.vue    |  9 ++-
 src/pages/ContentfulPage.vue                  |  4 +-
 src/pages/Donate/DonateSupportUs.vue          |  9 ++-
 .../MonthlyGood/MonthlyGoodLandingPage.vue    |  9 ++-
 7 files changed, 105 insertions(+), 53 deletions(-)
 create mode 100644 src/components/Contentful/FrequentlyAskedQuestions.vue

diff --git a/src/components/Contentful/FrequentlyAskedQuestions.vue b/src/components/Contentful/FrequentlyAskedQuestions.vue
new file mode 100644
index 0000000000..cb9f9526ac
--- /dev/null
+++ b/src/components/Contentful/FrequentlyAskedQuestions.vue
@@ -0,0 +1,53 @@
+<template>
+	<section-with-background-classic
+		:background-content="background"
+		:vertical-padding="verticalPadding"
+	>
+		<template #content>
+			<kv-page-container>
+				<kv-frequently-asked-questions
+					:headline="frequentlyAskedQuestionsHeadline"
+					:questions="frequentlyAskedQuestions"
+				/>
+			</kv-page-container>
+		</template>
+	</section-with-background-classic>
+</template>
+
+<script>
+import contentfulStylesMixin from '@/plugins/contentful-ui-setting-styles-mixin';
+import SectionWithBackgroundClassic from '@/components/Contentful/SectionWithBackgroundClassic';
+import KvFrequentlyAskedQuestions from '@/components/Kv/KvFrequentlyAskedQuestions';
+import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+
+export default {
+	components: {
+		KvFrequentlyAskedQuestions,
+		KvPageContainer,
+		SectionWithBackgroundClassic,
+	},
+	mixins: [contentfulStylesMixin],
+	props: {
+		/**
+		 * Content group content from Contentful
+		* */
+		content: {
+			type: Object,
+			default: () => {},
+		},
+	},
+	computed: {
+		frequentlyAskedQuestionsHeadline() {
+			return this.content?.title ?? null;
+		},
+		frequentlyAskedQuestions() {
+			return this.content?.contents ?? null;
+		},
+		background() {
+			return this.content?.contents?.find(({ contentType }) => {
+				return contentType ? contentType === 'background' : false;
+			});
+		},
+	},
+};
+</script>
diff --git a/src/components/Kv/KvExpandableQuestion.vue b/src/components/Kv/KvExpandableQuestion.vue
index 4ff13233e1..90817e51ee 100644
--- a/src/components/Kv/KvExpandableQuestion.vue
+++ b/src/components/Kv/KvExpandableQuestion.vue
@@ -82,7 +82,6 @@ export default {
 	},
 	methods: {
 		toggleFaq() {
-			console.log('toggle');
 			if (!this.open) {
 				this.$kvTrackEvent(this.analyticsCategory, 'click-faq-expand', this.title);
 			}
diff --git a/src/components/Kv/KvFrequentlyAskedQuestions.vue b/src/components/Kv/KvFrequentlyAskedQuestions.vue
index b9b7ba4fa9..da50010058 100644
--- a/src/components/Kv/KvFrequentlyAskedQuestions.vue
+++ b/src/components/Kv/KvFrequentlyAskedQuestions.vue
@@ -1,33 +1,24 @@
 <template>
-	<section-with-background-classic
-		:background-content="background"
-		:vertical-padding="verticalPadding"
-	>
-		<template #content>
-			<kv-grid>
-				<div v-if="frequentlyAskedQuestionsHeadline">
-					<h2 class="tw-text-h2">
-						{{ frequentlyAskedQuestionsHeadline }}
-					</h2>
-				</div>
-				<div v-if="frequentlyAskedQuestions" class="tw-divide-y">
-					<kv-expandable-question
-						v-for="(question, index) in frequentlyAskedQuestions"
-						:key="index"
-						:title="question.name"
-						:content="convertFromRichTextToHtml(question.richText)"
-						:id="question.name | changeCase('paramCase')"
-					/>
-				</div>
-			</kv-grid>
-		</template>
-	</section-with-background-classic>
+	<kv-grid>
+		<div v-if="headline">
+			<h2 class="tw-text-h2">
+				{{ headline }}
+			</h2>
+		</div>
+		<div v-if="questions" class="tw-divide-y">
+			<kv-expandable-question
+				v-for="(question, index) in questions"
+				:key="index"
+				:title="question.name"
+				:content="convertFromRichTextToHtml(question.richText)"
+				:id="question.name | changeCase('paramCase')"
+			/>
+		</div>
+	</kv-grid>
 </template>
 
 <script>
-import contentfulStylesMixin from '@/plugins/contentful-ui-setting-styles-mixin';
 import KvExpandableQuestion from '@/components/Kv/KvExpandableQuestion';
-import SectionWithBackgroundClassic from '@/components/Contentful/SectionWithBackgroundClassic';
 import { richTextRenderer } from '@/util/contentful/richTextRenderer';
 import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
 
@@ -35,33 +26,21 @@ export default {
 	components: {
 		KvExpandableQuestion,
 		KvGrid,
-		SectionWithBackgroundClassic,
 	},
-	mixins: [contentfulStylesMixin],
 	props: {
 		/**
-		 * Content group content from Contentful
+		 * FAQ Headline
 		* */
-		content: {
-			type: Object,
-			default: () => {},
+		headline: {
+			type: String,
+			default: '',
 		},
-	},
-	data() {
-		return {
-		};
-	},
-	computed: {
-		frequentlyAskedQuestionsHeadline() {
-			return this.content?.title ?? null;
-		},
-		frequentlyAskedQuestions() {
-			return this.content?.contents ?? null;
-		},
-		background() {
-			return this.content?.contents?.find(({ contentType }) => {
-				return contentType ? contentType === 'background' : false;
-			});
+		/**
+		 * Array of questions - output of contentful content field. each questions is a contentful rich text object
+		* */
+		questions: {
+			type: Array,
+			default: () => [],
 		},
 	},
 	methods: {
diff --git a/src/pages/AutoDeposit/AutoDepositLandingPage.vue b/src/pages/AutoDeposit/AutoDepositLandingPage.vue
index 9b155bfc91..ec867b18cb 100644
--- a/src/pages/AutoDeposit/AutoDepositLandingPage.vue
+++ b/src/pages/AutoDeposit/AutoDepositLandingPage.vue
@@ -73,7 +73,8 @@
 		<div class="kv-tailwind row">
 			<kv-frequently-asked-questions
 				class="span-12 column"
-				:content="faqContentGroup"
+				:headline="frequentlyAskedQuestionsHeadline"
+				:questions="frequentlyAskedQuestions"
 			/>
 		</div>
 	</www-page>
@@ -158,6 +159,12 @@ export default {
 				return type ? type === 'frequentlyAskedQuestions' : false;
 			});
 		},
+		frequentlyAskedQuestionsHeadline() {
+			return this.faqContentGroup?.title ?? null;
+		},
+		frequentlyAskedQuestions() {
+			return this.faqContentGroup?.contents ?? null;
+		},
 		ctaContentGroup() {
 			return this.contentGroups?.find(({ key }) => {
 				return key ? key === 'auto-deposit-cta' : false;
diff --git a/src/pages/ContentfulPage.vue b/src/pages/ContentfulPage.vue
index f184c96542..c748db9466 100644
--- a/src/pages/ContentfulPage.vue
+++ b/src/pages/ContentfulPage.vue
@@ -80,7 +80,7 @@ const LoansByCategoryCarousel = () => import('@/components/Contentful/LoansByCat
 
 const MonthlyGoodSelectorWrapper = () => import('@/components/MonthlyGood/MonthlyGoodSelectorWrapper');
 
-const KvFrequentlyAskedQuestions = () => import('@/components/Kv/KvFrequentlyAskedQuestions');
+const FrequentlyAskedQuestions = () => import('@/components/Contentful/FrequentlyAskedQuestions');
 
 const TestimonialCards = () => import('@/components/Contentful/TestimonialCards');
 
@@ -169,7 +169,7 @@ const getComponentFromType = type => {
 		case 'monthlyGoodSelector':
 			return MonthlyGoodSelectorWrapper;
 		case 'frequentlyAskedQuestions':
-			return KvFrequentlyAskedQuestions;
+			return FrequentlyAskedQuestions;
 		case 'testimonialCards':
 			return TestimonialCards;
 		case 'cardRow':
diff --git a/src/pages/Donate/DonateSupportUs.vue b/src/pages/Donate/DonateSupportUs.vue
index 5420b1df16..2f8c14e43c 100644
--- a/src/pages/Donate/DonateSupportUs.vue
+++ b/src/pages/Donate/DonateSupportUs.vue
@@ -22,7 +22,8 @@
 			<div class="small-12 columns donation-faq-holder">
 				<div class="kv-tailwind">
 					<kv-frequently-asked-questions
-						:content="faqContentGroup"
+						:headline="frequentlyAskedQuestionsHeadline"
+						:questions="frequentlyAskedQuestions"
 					/>
 				</div>
 			</div>
@@ -137,6 +138,12 @@ export default {
 		faqContentGroup() {
 			return this.page?.contentGroups?.frequentlyAskedQuestions || {};
 		},
+		frequentlyAskedQuestionsHeadline() {
+			return this.faqContentGroup?.title ?? null;
+		},
+		frequentlyAskedQuestions() {
+			return this.faqContentGroup?.contents ?? null;
+		},
 		donationCalloutsCG() {
 			return this.page?.contentGroups?.webDonateSupportUsDonationCallouts || {};
 		}
diff --git a/src/pages/MonthlyGood/MonthlyGoodLandingPage.vue b/src/pages/MonthlyGood/MonthlyGoodLandingPage.vue
index 564fa515e0..b2492619f9 100644
--- a/src/pages/MonthlyGood/MonthlyGoodLandingPage.vue
+++ b/src/pages/MonthlyGood/MonthlyGoodLandingPage.vue
@@ -75,7 +75,8 @@
 		<div class="kv-tailwind row">
 			<kv-frequently-asked-questions
 				class="span-12 column"
-				:content="faqContentGroup"
+				:headline="frequentlyAskedQuestionsHeadline"
+				:questions="frequentlyAskedQuestions"
 			/>
 		</div>
 	</www-page>
@@ -228,6 +229,12 @@ export default {
 				return type ? type === 'frequentlyAskedQuestions' : false;
 			});
 		},
+		frequentlyAskedQuestionsHeadline() {
+			return this.faqContentGroup?.title ?? null;
+		},
+		frequentlyAskedQuestions() {
+			return this.faqContentGroup?.contents ?? null;
+		},
 		heroContentGroup() {
 			return this.contentGroups?.find(({ key }) => {
 				return key ? key === 'monthlygood-landing-hero' : false;