Merge pull request #4959 from kiva/donations-education-module-MARS-497

src/pages/Portfolio/ImpactDashboard/EducationModule.vue

@@ -0,0 +1,76 @@
+<template>
+	<async-portfolio-section @visible="whenVisible" data-testid="credit-stats">
+		<kv-grid class="tw-grid-cols-12 tw-items-center">
+			<div class="tw-col-span-12 lg:tw-col-span-6">
+				<div class="tw-flex tw-rounded tw-h-12 tw-w-12 tw-bg-primary tw-p-1 tw-mr-2">
+					<img class="tw-w-10 tw-h-10" alt="Leaf heart" :src="imageRequire(`./leaf_heart.svg`)">
+				</div>
+				<h2 class="tw-mb-0.5">
+					Donations power progress
+				</h2>
+				<p class="tw-text-subhead">
+					<!-- eslint-disable-next-line max-len -->
+					Every dollar donated to Kiva helps bring us one step closer to financial access for all. See what we’ve achieved with your support.
+				</p>
+			</div>
+			<div class="tw-col-span-12 lg:tw-col-span-6">
+				<education-post :post="post" :loading="loading" />
+			</div>
+		</kv-grid>
+	</async-portfolio-section>
+</template>
+
+<script>
+import { gql } from '@apollo/client';
+import AsyncPortfolioSection from './AsyncPortfolioSection';
+import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import EducationPost from './EducationPost';
+
+const imageRequire = require.context('@/assets/images/', true);
+
+export default {
+	name: 'EducationModule',
+	inject: ['apollo'],
+	components: {
+		AsyncPortfolioSection,
+		EducationPost,
+		KvGrid,
+	},
+	data() {
+		return {
+			loading: true,
+			loadingPromise: null,
+			post: null,
+			imageRequire,
+		};
+	},
+	methods: {
+		fetchAsyncData() {
+			if (this.loading && !this.loadingPromise) {
+				this.loadingPromise = this.apollo.query({
+					query: gql`query ContentfulBlogPosts (
+						$customFields: String,
+						$limit: Int
+					) {
+						contentful {
+							blogPosts: entries(contentType:"blogPost", customFields:$customFields, limit:$limit)
+						}
+					}`,
+					variables: {
+						customFields: 'metadata.tags.sys.id[in]=impact-page|order=-fields.originalPublishDate'
+					},
+				}).then(({ data }) => {
+					this.loading = false;
+					this.post = data?.contentful?.blogPosts?.items?.[0]?.fields ?? null;
+					this.$emit('hide-module', this.post === null);
+				}).finally(() => {
+					this.loadingPromise = null;
+				});
+			}
+		},
+		whenVisible() {
+			this.fetchAsyncData();
+		}
+	},
+};
+</script>

src/pages/Portfolio/ImpactDashboard/EducationPost.vue

@@ -0,0 +1,122 @@
+<template>
+	<div class="card-container">
+		<a
+			v-if="!loading"
+			:href="url"
+			class="tw-block"
+			@click="trackEvent('blog-image')"
+		>
+			<kv-contentful-img
+				:alt="headline"
+				:width="344"
+				:contentful-src="imageUrl"
+				class="card-container-image"
+				:source-sizes="sourceSizes"
+				fallback-format="jpg"
+			/>
+		</a>
+		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '16rem' }" />
+		<a
+			v-if="!loading"
+			@click="trackEvent('blog-headline')"
+			class="tw-text-h3 text-overflow tw-line-clamp-2 tw-mb-0.5 tw-decoration-white tw-cursor-pointer"
+		>
+			{{ headline }}
+		</a>
+		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '2rem' }" />
+		<p v-if="!loading" class="tw-text-small text-overflow tw-line-clamp-4">
+			{{ summary }}
+		</p>
+		<kv-loading-placeholder v-else class="placeholder" :style="{ height: '2rem' }" />
+	</div>
+</template>
+
+<script>
+import KvContentfulImg from '~/@kiva/kv-components/vue/KvContentfulImg';
+import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder';
+
+export default {
+	name: 'EducationPost',
+	components: {
+		KvContentfulImg,
+		KvLoadingPlaceholder
+	},
+	props: {
+		post: {
+			type: Object,
+			default: () => {}
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		}
+	},
+	data() {
+		return {
+			sourceSizes: [
+				{
+					width: 344,
+					height: 239,
+					media: 'min-width: 734px',
+				},
+				{
+					width: 278,
+					height: 209,
+					media: 'min-width: 0px',
+				},
+			]
+		};
+	},
+	methods: {
+		trackEvent(property) {
+			this.$kvTrackEvent('portfolio', 'click', 'donation-education', property, this.post?.slug);
+		}
+	},
+	computed: {
+		imageUrl() {
+			return this.post?.image?.fields?.file?.url ?? '';
+		},
+		headline() {
+			return this.post?.promoHeadline ?? this.post?.title ?? '';
+		},
+		summary() {
+			return this.post?.promoSummary ?? this.post?.summary ?? '';
+		},
+		url() {
+			return `https://${this.$appConfig.host}/blog/${this.post?.slug ?? ''}`;
+		}
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+.card-container {
+	height: 387px;
+	@apply tw-block tw-bg-eco-green-4 tw-rounded tw-p-2 tw-grid-rows-3 tw-decoration-white;
+
+	@screen md {
+		height: 418px;
+	}
+}
+
+.card-container-image {
+	@apply tw-w-full tw-h-full tw-mb-1;
+}
+
+.card-container-image >>> img {
+	max-height: 209px;
+	@apply tw-rounded;
+
+	@screen md {
+		max-height: 239px;
+	}
+}
+
+.text-overflow {
+	@apply tw-text-white tw-overflow-hidden tw-text-ellipsis;
+}
+
+.placeholder {
+	@apply tw-w-full tw-mb-2;
+}
+</style>

src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue

@@ -8,11 +8,11 @@
 				<the-portfolio-tertiary-menu class="tw-pt-2 tw-col-span-3 tw-hidden md:tw-block" />
 				<div class="tw-col-span-12 md:tw-col-span-9 tw-pt-3">
 					<account-overview />
+					<lending-insights />
 					<recent-loans-list />
-					<recommended-loans-list />
+					<education-module v-if="showEdModule" @hide-module="hideModule" />
 					<kiva-credit-stats />
 					<account-updates />
-					<lending-insights />
 					<your-teams />
 					<distribution-graphs />
 				</div>
@@ -35,8 +35,8 @@ import DistributionGraphs from './DistributionGraphs';
 import KivaCreditStats from './KivaCreditStats';
 import LendingInsights from './LendingInsights';
 import RecentLoansList from './RecentLoansList';
-import RecommendedLoansList from './RecommendedLoansList';
 import YourTeams from './YourTeams';
+import EducationModule from './EducationModule';
 
 export default {
 	name: 'ImpactDashboardPage',
@@ -45,17 +45,22 @@ export default {
 		AccountOverview,
 		AccountUpdates,
 		DistributionGraphs,
+		EducationModule,
 		KivaCreditStats,
 		KvGrid,
 		KvPageContainer,
 		LendingInsights,
 		RecentLoansList,
-		RecommendedLoansList,
 		TheMyKivaSecondaryMenu,
 		ThePortfolioTertiaryMenu,
 		WwwPage,
 		YourTeams,
 	},
+	data() {
+		return {
+			showEdModule: true
+		};
+	},
 	apollo: {
 		preFetch(config, client) {
 			return client.query({
@@ -70,6 +75,11 @@ export default {
 			});
 		},
 	},
+	methods: {
+		hideModule(payload) {
+			this.showEdModule = !payload;
+		}
+	},
 	mounted() {
 		// Impact Dashboard page redesign experiment MARS-344 MARS-348
 		trackExperimentVersion(