Merge pull request #4992 from kiva/remove_lend_urgency_exp

feat: remove lend_urgency exp code

.github/dependabot.yml

@@ -13,10 +13,6 @@ updates:
   - dependency-name: vue-svg-loader
     versions:
     - ">= 0.15.0"
-  # Version 2 of this package is for Vue3
-  - dependency-name: vue-countdown
-    versions:
-    - ">= 1.1.5"
   # clipboard-copy v4 drops IE11 support
   - dependency-name: clipboard-copy
     versions:

package.json

@@ -43,7 +43,6 @@
 		"@babel/eslint-parser": "^7.18.2",
 		"@babel/polyfill": "^7.10.4",
 		"@babel/runtime": "^7.12.5",
-		"@chenfengyuan/vue-countdown": "^1.1.5",
 		"@contentful/rich-text-html-renderer": "^15.13.1",
 		"@contentful/rich-text-types": "^14.1.2",
 		"@godaddy/terminus": "^4.11.0",

src/components/BorrowerProfile/LoanProgress.vue

@@ -90,12 +90,7 @@
 			</template>
 			<template v-else>
 				<p class="tw-flex-auto" data-testid="bp-summary-timeleft">
-					<countdown-timer
-						v-if="urgency"
-						:time="msLeft"
-						class="tw-text-brand tw-text-h3"
-					/>
-					<span v-else class="tw-text-h3 tw-block tw-m-0">
+					<span class="tw-text-h3 tw-block tw-m-0">
 						{{ timeLeft }}
 					</span>
 
@@ -118,14 +113,12 @@
 
 <script>
 import { ALLOWED_LOAN_STATUSES } from '@/util/loanUtils';
-import CountdownTimer from '@/components/BorrowerProfile/CountdownTimer';
 import numeral from 'numeral';
 import KvProgressBar from '~/@kiva/kv-components/vue/KvProgressBar';
 
 export default {
 	name: 'LoanProgress',
 	components: {
-		CountdownTimer,
 		KvProgressBar,
 	},
 	props: {
@@ -141,14 +134,6 @@ export default {
 			type: String,
 			default: '',
 		},
-		urgency: {
-			type: Boolean,
-			default: false,
-		},
-		msLeft: {
-			type: Number,
-			default: 0,
-		},
 		loanStatus: {
 			type: String,
 			default: 'fundraising',

src/components/BorrowerProfile/SummaryCard.vue

@@ -66,8 +66,6 @@
 						:money-left="unreservedAmount"
 						:progress-percent="fundraisingPercent"
 						:time-left="timeLeft"
-						:urgency="showUrgencyExp && timeLeftMs > 0"
-						:ms-left="timeLeftMs"
 						:loan-status="inPfp ? 'pfp' : 'fundraising'"
 						:number-of-lenders="numLenders"
 						:pfp-min-lenders="pfpMinLenders"
@@ -203,12 +201,6 @@ export default {
 		KvLoadingPlaceholder,
 		HeartComment,
 	},
-	props: {
-		showUrgencyExp: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	data() {
 		return {
 			isLoading: true,
@@ -226,7 +218,6 @@ export default {
 			distributionModel: '',
 			city: '',
 			state: '',
-			timeLeftMs: 0,
 			inPfp: false,
 			pfpMinLenders: 0,
 			numLenders: 0,
@@ -269,7 +260,6 @@ export default {
 		this.distributionModel = loan?.distributionModel ?? '';
 		this.city = loan?.geocode?.city ?? '';
 		this.state = loan?.geocode?.state ?? '';
-		this.timeLeftMs = loan?.fundraisingTimeLeftMilliseconds > 0 ? loan?.fundraisingTimeLeftMilliseconds : 0;
 		// If all shares are reserved in baskets, set the fundraising meter to 100%
 		if (this.unreservedAmount === '0') {
 			this.fundraisingPercent = 1;

src/components/LoanCollections/KivaClassicMultiCategoryCarousel.vue

@@ -19,10 +19,6 @@
 import { gql } from '@apollo/client';
 import KivaClassicLoanCarousel from '@/components/LoanCollections/KivaClassicLoanCarousel';
 import KivaClassicLoanCategorySelector from '@/components/LoanCollections/KivaClassicLoanCategorySelector';
-import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
-import experimentAssignmentQuery from '@/graphql/query/experimentAssignment.graphql';
-
-const LEND_URGENCY_EXP = 'lend_urgency';
 
 export default {
 	name: 'KivaClassicMultiCategoryCarousel',
@@ -55,25 +51,17 @@ export default {
 			loanChannelData: [],
 			selectedChannel: {},
 			showCarousel: false,
-			isUrgencyExpVersionShown: false
 		};
 	},
 	computed: {
-		loanChannelsWithUrgencyExperiment() {
-			if (this.isUrgencyExpVersionShown) {
-				// if urgency experiment, insert ending soon as first loan channel
-				return [{ id: 3, shortName: 'Ending Soon' }, ...this.contentfulLoanChannels];
-			}
-			return this.contentfulLoanChannels;
-		},
 		combinedLoanChannelData() {
-			return this.loanChannelsWithUrgencyExperiment.map(channel => {
+			return this.contentfulLoanChannels.map(channel => {
 				const matchedLoanChannel = this.loanChannelData.find(lc => lc.id === channel.id);
 				return { ...matchedLoanChannel, ...channel };
 			});
 		},
 		loanChannelIds() {
-			return this.loanChannelsWithUrgencyExperiment.map(channelSetting => {
+			return this.contentfulLoanChannels.map(channelSetting => {
 				return channelSetting.id;
 			});
 		},
@@ -93,30 +81,6 @@ export default {
 	mounted() {
 		this.fetchLoanChannel();
 	},
-	apollo: {
-		preFetch(_, client) {
-			return client.query({ query: experimentAssignmentQuery, variables: { id: LEND_URGENCY_EXP } });
-		},
-	},
-	created() {
-		// run urgency experiment if we are on the homepage
-		if (this.$route.name === 'homepage') {
-			const urgencyExperiment = this.apollo.readFragment({
-				id: `Experiment:${LEND_URGENCY_EXP}`,
-				fragment: experimentVersionFragment,
-			}) || {};
-			this.isUrgencyExpVersionShown = urgencyExperiment.version === 'shown';
-
-			// Fire Event for Exp ACK-291 Urgency Experiment
-			if (urgencyExperiment.version && urgencyExperiment.version !== 'unassigned') {
-				this.$kvTrackEvent(
-					'Lending',
-					'EXP-ACK-291-May2022',
-					this.isUrgencyExpVersionShown ? 'b' : 'a'
-				);
-			}
-		}
-	},
 	methods: {
 		handleCategoryClick(payload) {
 			this.selectedChannel = this.combinedLoanChannelData.find(

src/pages/BorrowerProfile/BorrowerProfile.vue

@@ -23,7 +23,6 @@
 					<summary-card
 						data-testid="bp-summary"
 						class="tw-relative lg:tw--mb-1.5"
-						:show-urgency-exp="showUrgencyExp"
 					/>
 				</content-container>
 			</div>
@@ -136,7 +135,6 @@ import {
 	format, parseISO, differenceInCalendarDays
 } from 'date-fns';
 import { gql } from '@apollo/client';
-import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
 import experimentAssignmentQuery from '@/graphql/query/experimentAssignment.graphql';
 import fiveDollarsTest, { FIVE_DOLLARS_NOTES_EXP } from '@/plugins/five-dollars-test-mixin';
 import guestComment from '@/plugins/guest-comment-mixin';
@@ -166,7 +164,6 @@ import KvLoadingPlaceholder from '~/@kiva/kv-components/vue/KvLoadingPlaceholder
 
 const getPublicId = route => route?.query?.utm_content ?? route?.query?.name ?? '';
 
-const LEND_URGENCY_EXP = 'lend_urgency';
 const SHARE_LANGUAGE_EXP = 'share_language_bp';
 
 const preFetchQuery = gql`
@@ -179,10 +176,6 @@ const preFetchQuery = gql`
 		$imgRetinaSize: String = "w960h720"
 	) {
 		general {
-			lendUrgency: uiExperimentSetting(key: "lend_urgency") {
-				key
-				value
-			}
 			uiExperimentSetting(key: "share_language_bp") {
 				key
 				value
@@ -387,7 +380,6 @@ export default {
 			showLenders: true,
 			showTeams: true,
 			showUpdates: true,
-			isUrgencyExpVersionShown: false,
 			hasThreeDaysOrLessLeft: false,
 			// meta fields
 			endDate: '',
@@ -456,7 +448,6 @@ export default {
 					}
 
 					return Promise.all([
-						client.query({ query: experimentAssignmentQuery, variables: { id: LEND_URGENCY_EXP } }),
 						client.query({ query: experimentAssignmentQuery, variables: { id: SHARE_LANGUAGE_EXP } }),
 						client.query({ query: experimentAssignmentQuery, variables: { id: FIVE_DOLLARS_NOTES_EXP } }),
 					]);
@@ -585,9 +576,6 @@ export default {
 			}
 			return `${name} - ${this.countryName}`;
 		},
-		showUrgencyExp() {
-			return this.hasThreeDaysOrLessLeft && this.isUrgencyExpVersionShown;
-		},
 		amountLeft() {
 			return this.loanAmount - this.loanFundraisingInfo.fundedAmount;
 		},
@@ -644,24 +632,6 @@ export default {
 		}
 	},
 	created() {
-		const urgencyExperiment = this.apollo.readFragment({
-			id: `Experiment:${LEND_URGENCY_EXP}`,
-			fragment: experimentVersionFragment,
-		}) || {};
-
-		this.isUrgencyExpVersionShown = urgencyExperiment.version === 'shown';
-
-		if (this.hasThreeDaysOrLessLeft) {
-			// Fire Event for Exp ACK-291 Urgency Experiment
-			if (urgencyExperiment.version && urgencyExperiment.version !== 'unassigned') {
-				this.$kvTrackEvent(
-					'Lending',
-					'EXP-ACK-291-May2022',
-					this.isUrgencyExpVersionShown ? 'b' : 'a'
-				);
-			}
-		}
-
 		const publicId = getPublicId(this.$route);
 		this.inviterIsGuestOrAnonymous = publicId === 'anonymous' || publicId === 'guest';