Core 158

src/components/BorrowerProfile/LendCta.vue

@@ -149,7 +149,7 @@
 						v-if="freeCreditWarning"
 						class="tw-text-h4 tw-text-secondary tw-inline-block tw-text-center tw-w-full"
 					>
-						Not eligilble for lending credit
+						Not eligible for lending credit
 					</p>
 					<p
 						v-if="allSharesReserved"

src/components/BorrowerProfile/LoanDescription.vue

@@ -24,11 +24,11 @@
 				</p>
 			</section>
 
-			<section>
-				<!--
-				"Previous Loan sections" omitted. Needs separate ticket
-				-->
-			</section>
+			<previous-loan-description
+				v-if="previousLoanId"
+				:loan-id="loanId"
+				:previous-loan-id="previousLoanId"
+			/>
 
 			<section v-if="storyTranslation">
 				<img
@@ -66,8 +66,12 @@
 </template>
 
 <script>
+import previousLoanDescription from '@/components/BorrowerProfile/PreviousLoanDescription';
 
 export default {
+	components: {
+		previousLoanDescription,
+	},
 	props: {
 		partnerName: { // LoanPartner.partnerName
 			type: String,
@@ -105,6 +109,14 @@ export default {
 			type: Object,
 			default: () => {},
 		},
+		previousLoanId: { // LoanBasic.previousLoanId
+			type: Number,
+			default: 0,
+		},
+		loanId: {
+			type: Number,
+			default: 0,
+		}
 	},
 	computed: {
 		borrowersList() {

src/components/BorrowerProfile/LoanStory.vue

@@ -22,6 +22,7 @@
 			]"
 		/>
 		<loan-description
+			:loan-id="loanId"
 			:anonymization-level="anonymizationLevel"
 			:borrower-count="borrowerCount"
 			:borrower-or-group-name="name"
@@ -31,6 +32,7 @@
 			:partner-name="partnerName"
 			:reviewer="reviewer"
 			:story-description="description"
+			:previous-loan-id="previousLoanId"
 		/>
 	</article>
 </template>
@@ -79,6 +81,7 @@ export default {
 						firstName
 					}
 					description
+					previousLoanId
 					# TEMPORARILY Disabled for MVP
 					# descriptionInOriginalLanguage
 					image {
@@ -128,6 +131,7 @@ export default {
 			this.originalLanguage = loan?.originalLanguage ?? {};
 			this.partnerName = loan?.partnerName ?? '';
 			this.reviewer = loan?.reviewer ?? {};
+			this.previousLoanId = loan?.previousLoanId ?? '';
 		},
 	},
 };

src/components/BorrowerProfile/PreviousLoanDescription.vue

@@ -0,0 +1,104 @@
+<template>
+	<section>
+		<kv-text-link
+			v-if="previousLoanId"
+			v-kv-track-event="['Borrower profile', 'click-Loan details', 'Show previous loan details', this.loanId]"
+			@click.prevent="performClick"
+		>
+			Show previous loan details
+			<kv-material-icon
+				:icon="mdiChevronDown"
+				class="tw-align-middle tw-mb-0.5 tw-transition-transform tw-ease-in-out tw-duration-500"
+				:class="{'tw-rotate-180' : previousLoanDetailsOpen}"
+			/>
+		</kv-text-link>
+		<kv-expandable
+			v-show="previousLoanDetailsOpen"
+			easing="ease-in-out"
+		>
+			<div>
+				<h2>Previous loan details</h2>
+
+				<p
+					v-for="(paragraph, index) in formatedPreviousLoanDescription"
+					:key="index"
+					v-html="paragraph"
+				>
+				</p>
+			</div>
+		</kv-expandable>
+	</section>
+</template>
+
+<script>
+import { mdiChevronDown } from '@mdi/js';
+import gql from 'graphql-tag';
+import KvExpandable from '@/components/Kv/KvExpandable';
+import KvTextLink from '~/@kiva/kv-components/vue/KvTextLink';
+import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
+
+const previousLoanQuery = gql`query previousLoanQuery($id: Int!) {
+	lend {
+		loan(id: $id) {
+			id
+			description
+		}
+	}
+}`;
+
+export default {
+	components: {
+		KvTextLink,
+		KvMaterialIcon,
+		KvExpandable,
+	},
+	data() {
+		return {
+			mdiChevronDown,
+			previousLoanDetailsOpen: false,
+			previousLoanDescription: '',
+		};
+	},
+	inject: ['apollo'],
+	props: {
+		loanId: {
+			type: Number,
+			default: 0,
+		},
+		previousLoanId: {
+			type: Number,
+			default: 0,
+		}
+	},
+	computed: {
+		formatedPreviousLoanDescription() {
+			return this.toParagraphs(this.previousLoanDescription);
+		},
+	},
+	methods: {
+		toParagraphs(text) {
+			return String(text).replace(/\r|\n|<br\s*\/?>/g, '\n').split(/\n+/);
+		},
+		fetchPreviousLoanDescription() {
+			this.apollo.query({
+				query: previousLoanQuery,
+				variables: {
+					id: this.previousLoanId
+				}
+			}).then(({ data }) => {
+				this.previousLoanDescription = data.lend?.loan?.description;
+			});
+		},
+		togglePreviousLoanDetails() {
+			this.previousLoanDetailsOpen = !this.previousLoanDetailsOpen;
+		},
+		performClick() {
+			this.togglePreviousLoanDetails();
+			if (this.previousLoanDescription === '') {
+				this.fetchPreviousLoanDescription();
+			}
+		},
+	}
+};
+
+</script>