@kiva/kv-components 3.28.0 → 3.29.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.29.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.28.0...@kiva/kv-components@3.29.0) (2023-07-14)
+
+
+### Features
+
+* created generic countdown component ([a321379](https://github.com/kiva/kv-ui-elements/commit/a321379aee166c3f8e91def8e2be42b4d42d5896))
+* custom countdown for vue 2 + 3 ([2bafad9](https://github.com/kiva/kv-ui-elements/commit/2bafad90df469b447d472926fa82d119711f2885))
+
+
+
+
+
 # [3.28.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.27.0...@kiva/kv-components@3.28.0) (2023-07-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -53,7 +53,6 @@
     "build": "echo No build needed for @kiva/kv-components."
   },
   "dependencies": {
-    "@chenfengyuan/vue-countdown": "^1.1.5",
     "@kiva/kv-tokens": "^2.8.0",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
@@ -62,6 +61,7 @@
     "date-fns": "^2.30.0",
     "embla-carousel": "^4.5.3",
     "focus-trap": "^6.7.2",
+    "moment": "^2.29.4",
     "nanoid": "^3.1.23",
     "numeral": "^2.0.6",
     "vue-demi": "^0.12.1"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "c61bf2fb46b8da3b2ddd69836e3b62500e314fa1"
+  "gitHead": "c6cb925341942eed7b7e89a469e1b6bd0878af27"
 }

package/vue/KvCountdownTimer.vue

@@ -0,0 +1,50 @@
+<template>
+	<span v-if="timeLeft">
+		{{ timeLeft.hours() }}h {{ timeLeft.minutes() }}m {{ timeLeft.seconds() }}s
+	</span>
+</template>
+
+<script>
+import {
+	ref,
+	toRefs,
+	onBeforeUnmount,
+	onMounted,
+} from 'vue-demi';
+import moment from 'moment';
+
+export default {
+	props: {
+		msLeft: {
+			type: Number,
+			required: true,
+		},
+	},
+	setup(props) {
+		const { msLeft } = toRefs(props);
+
+		const interval = ref(null);
+		const timeLeft = ref(null);
+
+		onMounted(() => {
+			timeLeft.value = moment.duration(msLeft.value > 0 ? msLeft.value : 0, 'milliseconds');
+
+			const countdownInterval = 1000;
+
+			interval.value = setInterval(() => {
+				timeLeft.value = moment.duration(timeLeft.value - countdownInterval, 'milliseconds');
+
+				if (timeLeft.value <= 0) {
+					clearInterval(interval.value);
+				}
+			}, countdownInterval);
+		});
+
+		onBeforeUnmount(() => {
+			clearInterval(interval.value);
+		});
+
+		return { timeLeft };
+	},
+};
+</script>

package/vue/KvLoanTag.vue

@@ -1,36 +1,27 @@
 <template>
 	<div
-		v-if="!!variation && timeLeftMs > 0"
+		v-if="!!variation"
 		class="tw-text-small tw-font-medium tw-pt-0.5 tw-line-clamp-1"
 		style="color: #CE4A00;"
 	>
 		{{ tagText }}
-		<!-- TODO: ensure countdown works in Vue 3 apps -->
-		<!-- <vue-countdown
-			v-if="variation === 'ending-soon' && isMounted"
-			:time="timeLeftMs"
-			:emit-events="false"
-			:transform="transform"
-		>
-			<template slot-scope="props">
-				{{ props.hours }}h {{ props.minutes }}m {{ props.seconds }}s
-			</template>
-		</vue-countdown> -->
+		<kv-countdown-timer
+			v-if="variation === 'ending-soon'"
+			:ms-left="msLeft"
+		/>
 	</div>
 </template>
 
 <script>
 import { differenceInDays, parseISO } from 'date-fns';
-// TODO: ensure countdown works in Vue 3 apps
-// import VueCountdown from '@chenfengyuan/vue-countdown';
 import numeral from 'numeral';
+import KvCountdownTimer from './KvCountdownTimer.vue';
 
 export default {
 	name: 'KvLoanTag',
-	// TODO: ensure countdown works in Vue 3 apps
-	// components: {
-	// 	VueCountdown,
-	// },
+	components: {
+		KvCountdownTimer,
+	},
 	props: {
 		loan: {
 			type: Object,
@@ -43,7 +34,8 @@ export default {
 	},
 	data() {
 		return {
-			isMounted: false,
+			interval: null,
+			msLeft: parseISO(this.loan?.plannedExpirationDate).getTime() - new Date().getTime(),
 		};
 	},
 	computed: {
@@ -66,48 +58,12 @@ export default {
 			switch (this.variation) {
 				case 'almost-funded': return 'Almost funded';
 				case 'matched-loan': return `${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;
-				default: return 'Ending soon';
-				// TODO: ensure countdown works in Vue 3 apps
-				// default: return 'Ending soon: ';
+				default: return 'Ending soon: ';
 			}
 		},
-		timeLeftMs() {
-			const msLeft = parseISO(this.loan?.plannedExpirationDate).getTime() - new Date().getTime();
-			return msLeft > 0 ? msLeft : 0;
-		},
 		matchRatio() {
 			return this.loan?.matchRatio;
 		},
 	},
-	mounted() {
-		this.isMounted = true;
-
-		if (this.variation) {
-			this.kvTrackFunction(
-				'loan-card',
-				'show',
-				`tag-${this.variation}`,
-			);
-		}
-	},
-	methods: {
-		transform(props) {
-			Object.entries(props).forEach(([key, value]) => {
-				// Adds leading zero
-				if (value < 10) {
-					// eslint-disable-next-line no-param-reassign
-					props[key] = `0${value}`;
-				} else {
-					// eslint-disable-next-line no-param-reassign
-					props[key] = value;
-				}
-			});
-
-			// Adds days to hours
-			// eslint-disable-next-line radix, no-param-reassign
-			props.hours = parseInt(props.hours) + parseInt(props.days) * 24;
-			return props;
-		},
-	},
 };
 </script>

package/vue/stories/KvCountdownTimer.stories.js

@@ -0,0 +1,27 @@
+import KvCountdownTimer from '../KvCountdownTimer.vue';
+
+export default {
+	title: 'KvCountdownTimer',
+	component: KvCountdownTimer,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: {
+			KvCountdownTimer,
+		},
+		template: `
+			<kv-countdown-timer
+				:ms-left="msLeft"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Seconds = story({ msLeft: 1000 * 10 });
+
+// One second less than 24 hours (since we don't show days in timer)
+export const Tomorrow = story({ msLeft: 1000 * 60 * 60 * 24 - 1000 });

package/vue/stories/KvLoanTag.stories.js

@@ -1,4 +1,5 @@
 import KvLoanTag from '../KvLoanTag.vue';
+import KvCountdownTimer from '../KvCountdownTimer.vue';
 
 export default {
 	title: 'KvLoanTag',
@@ -8,7 +9,10 @@ export default {
 const story = (args) => {
 	const template = (_args, { argTypes }) => ({
 		props: Object.keys(argTypes),
-		components: { KvLoanTag },
+		components: {
+			KvLoanTag,
+			KvCountdownTimer,
+		},
 		template: `
 			<kv-loan-tag
 				:loan="loan"
@@ -26,7 +30,7 @@ tomorrow.setDate(tomorrow.getDate() + 1);
 const nextWeek = new Date();
 nextWeek.setDate(new Date().getDate() + 7);
 
-const kvTrackFunction = () => {};
+const kvTrackFunction = () => { };
 
 export const EndingSoon = story({ loan: { plannedExpirationDate: tomorrow.toISOString() }, kvTrackFunction });