Merge pull request #6109 from kiva/add-more-loan-status-to-recent-borrowers-carousel-MP-MP-1651

Author: christian14b

.storybook/stories/BorrowerStatusCard.stories.js

@@ -2,6 +2,15 @@ import BorrowerStatusCard from '#src/components/MyKiva/BorrowerStatusCard.vue';
 import { mockLoansArray } from '../utils';
 import apolloStoryMixin from "../mixins/apollo-story-mixin";
 import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
+import {
+	PAYING_BACK,
+	FUNDED,
+	FUNDRAISING,
+	RAISED,
+	EXPIRED,
+	REFUNDED,
+	ENDED,
+} from '#src/api/fixtures/LoanStatusEnum';
 
 export default {
 	title: 'MyKiva/BorrowerStatusCard',
@@ -38,4 +47,11 @@ const story = (args = {}) => {
 };
 
 export const Default = story({ loan: mockLoans[0] });
-export const Repaying = story({ loan: { ...mockLoans[0], status: 'payingBack' } });
+export const Repaying = story({ loan: { ...mockLoans[0], status: PAYING_BACK } });
+export const Fundraising = story({ loan: { ...mockLoans[0], status: FUNDRAISING } });
+export const Funded = story({ loan: { ...mockLoans[0], status: FUNDED } });
+export const Raised = story({ loan: { ...mockLoans[0], status: RAISED } });
+export const PayingBackDelinquent = story({ loan: { ...mockLoans[0], status: PAYING_BACK, delinquent: true } });
+export const Expired = story({ loan: { ...mockLoans[0], status: EXPIRED } });
+export const Refunded = story({ loan: { ...mockLoans[0], status: REFUNDED } });
+export const Ended = story({ loan: { ...mockLoans[0], status: ENDED } });

src/components/MyKiva/BorrowerCarousel.vue

@@ -132,7 +132,10 @@ import {
 	PAYING_BACK,
 	FUNDED,
 	FUNDRAISING,
-	RAISED
+	RAISED,
+	EXPIRED,
+	REFUNDED,
+	ENDED,
 } from '#src/api/fixtures/LoanStatusEnum';
 import LoanCommentModal from '#src/pages/Portfolio/ImpactDashboard/LoanCommentModal';
 import ShareButton from '#src/components/BorrowerProfile/ShareButton';
@@ -191,8 +194,18 @@ const commentLoanData = ref({
 const shareLoan = ref(false);
 const previousLastIndex = ref(0);
 
+const VALID_LOAN_STATUS = [
+	FUNDED,
+	FUNDRAISING,
+	PAYING_BACK,
+	RAISED,
+	EXPIRED,
+	REFUNDED,
+	ENDED,
+];
+
 const activeLoans = computed(() => {
-	return loans.value.filter(l => [FUNDED, FUNDRAISING, PAYING_BACK, RAISED].includes(l?.status));
+	return loans.value.filter(l => VALID_LOAN_STATUS.includes(l?.status));
 });
 
 const hasActiveLoans = computed(() => activeLoans.value.length > 0);
@@ -205,7 +218,7 @@ const title = computed(() => {
 });
 
 const filteredLoans = computed(() => {
-	return loans.value.filter(loan => [FUNDED, FUNDRAISING, PAYING_BACK, RAISED]
+	return loans.value.filter(loan => VALID_LOAN_STATUS
 		.includes(loan?.status)).slice(0, props.cardsNumber);
 });
 

src/components/MyKiva/BorrowerStatusCard.vue

@@ -88,17 +88,22 @@
 						<p
 							class="tw-text-action tw-font-medium md:tw-text-black
 								md:tw-w-full md:tw-text-left md:tw-mt-5 md:tw-mb-1"
+							:class="{
+								'!tw-text-action': !showWhatIsNextColumn,
+							}"
 						>
-							What's next
+							{{ stepsCopy }}
 						</p>
 						<KvMaterialIcon
+							v-if="showWhatIsNextColumn"
 							class="tw-w-3 tw-h-3 tw-text-action md:tw-hidden"
 							:icon="open ? mdiChevronUp : mdiChevronDown"
 						/>
 					</button>
 					<kv-expandable easing="ease-in-out" class="tw-block md:tw-hidden">
 						<div v-show="open">
 							<LoanNextSteps
+								v-if="showWhatIsNextColumn"
 								id="loan-next-steps"
 								:weeks-to-repay="weeksToRepay"
 								:current-step="currentStep"
@@ -108,6 +113,7 @@
 						</div>
 					</kv-expandable>
 					<LoanNextSteps
+						v-if="showWhatIsNextColumn"
 						id="loan-next-steps"
 						class="tw-hidden md:tw-block"
 						:weeks-to-repay="weeksToRepay"
@@ -144,6 +150,11 @@ import {
 } from 'vue';
 import {
 	FUNDRAISING,
+	REFUNDED,
+	EXPIRED,
+	PAYING_BACK,
+	ENDED,
+	FUNDED,
 } from '#src/api/fixtures/LoanStatusEnum';
 
 const COMMENT_ID = 'comment';
@@ -203,15 +214,45 @@ const loanUse = computed(() => loan.value?.use ?? '');
 
 const isFundraising = computed(() => loan.value?.status === FUNDRAISING);
 
+const showWhatIsNextColumn = computed(() => {
+	return !([REFUNDED, EXPIRED, ENDED].includes(loan.value?.status));
+});
+
+const stepsCopy = computed(() => {
+	if (!showWhatIsNextColumn.value) {
+		return 'Learn what this means';
+	}
+	return 'What’s next?';
+});
+
 const loanStatus = computed(() => {
-	if (isFundraising.value) {
-		return 'Fundraising';
+	switch (loan.value?.status) {
+		case FUNDRAISING:
+			return 'Fundraising';
+		case FUNDED:
+			return 'Funded';
+		case PAYING_BACK:
+			return 'Repaying';
+		case REFUNDED:
+			return 'Refunded';
+		case EXPIRED:
+			return 'Expired';
+		case ENDED:
+			return 'Ended in default';
+		default:
+			return 'Repaid';
 	}
-	return 'Repaying';
 });
+
 const description = computed(() => {
+	let loanUsageDescription = isFundraising.value ? 'will use ' : 'used ';
+
+	if (showWhatIsNextColumn.value) {
+		loanUsageDescription = 'asked for a loan to ';
+	}
+
 	return `${borrowerName.value}
-		${isFundraising.value ? 'will use' : 'used'}
+		${loanUsageDescription}
 		${pronoun.value} loan ${loanUse.value}`;
 });
 const currentStep = computed(() => {
@@ -247,6 +288,10 @@ const toggleWhatIsNext = () => {
 	if (!open.value) {
 		$kvTrackEvent('portfolio', 'click', 'What’s next?', borrowerName.value, loan.value.id);
 	}
+	if (!showWhatIsNextColumn.value) {
+		// eslint-disable-next-line max-len
+		window.location = 'https://help.kiva.org/s/article/What-happens-if-a-loan-doesn-t-fully-fund-on-Kiva-1611075923145';
+	}
 	emit('toggle-what-is-next', !open.value);
 };
 

src/components/Thanks/LoanNextSteps.vue

@@ -59,9 +59,9 @@ export default {
 			steps: [
 				{ text: 'Your contribution is received ' },
 				{ text: 'Their loan is funded' },
-				{ text: 'They use the money to improve their life' },
+				{ text: 'They used the money to improve their life' },
 				// eslint-disable-next-line max-len
-				{ text: `${this.repaymentsStarted ? 'Their next repayment is coming in' : 'They start repaying you in'} <span class="tw-text-action"> ${this.weeksToRepay} </span>` }
+				{ text: `${this.repaymentsStarted ? `Their next repayment is coming in <span class="tw-text-action"> ${this.weeksToRepay} </span>` : 'They completed their repayments'}` }
 			]
 		};
 	},