@kiva/kv-components 3.59.1 → 3.61.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.61.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.60.0...@kiva/kv-components@3.61.0) (2024-03-04)
+
+
+### Features
+
+* fetchlenderinfo method injected to comment item component ([#362](https://github.com/kiva/kv-ui-elements/issues/362)) ([2aba5e0](https://github.com/kiva/kv-ui-elements/commit/2aba5e0837d57eec77f2d1bee48ca2c3c127c1d4))
+
+
+
+
+
+# [3.60.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.59.1...@kiva/kv-components@3.60.0) (2024-03-04)
+
+
+### Bug Fixes
+
+* unit test update ([e0e943b](https://github.com/kiva/kv-ui-elements/commit/e0e943bf51a9f7775f9b1279dc449787d7d05055))
+
+
+### Features
+
+* use new avatar in commenting components ([c707f71](https://github.com/kiva/kv-ui-elements/commit/c707f71e87661feb93486d3b900d4f0a77aff353))
+
+
+
+
+
 ## [3.59.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.59.0...@kiva/kv-components@3.59.1) (2024-03-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.59.1",
+  "version": "3.61.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "eaefca5854f506ac1cd70d1e70ef6a836396416a"
+  "gitHead": "5a1b6f22bba95529946eaf398992273b8e117d6b"
 }

package/tests/unit/specs/components/KvCommentsAdd.spec.js

@@ -19,7 +19,7 @@ describe('KvCommentsAdd', () => {
 			userImageUrl: 'test.com',
 			userDisplayName: 'User',
 		});
-		getByAltText('Lender');
+		getByAltText('Image of lender');
 		getByText('User');
 	});
 

package/tests/unit/specs/components/KvCommentsList.spec.js

@@ -6,7 +6,20 @@ import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvComme
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const renderList = (props = {}) => {
-	return render(ListComponent, { props });
+	return render(ListComponent,
+		{
+			props,
+			// provide function for vue 2 testing
+			provide: {
+				fetchLenderInfo: () => Promise.resolve({}),
+			},
+			// provide function for vue 3 testing
+			global: {
+				provide: {
+					fetchLenderInfo: () => Promise.resolve({}),
+				},
+			},
+		});
 };
 
 const comments = activityFeed.results[0].latest_reactions;

package/tests/unit/specs/components/KvCommentsListItem.spec.js

@@ -7,7 +7,20 @@ import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 const comment = activityFeed.results[0].latest_reactions.comment[0];
 
 const renderComment = (props = {}) => {
-	return render(KvCommentsListItem, { props });
+	return render(KvCommentsListItem,
+		{
+			props,
+			// provide function for vue 2 testing
+			provide: {
+				fetchLenderInfo: () => Promise.resolve({}),
+			},
+			// provide function for vue 3 testing
+			global: {
+				provide: {
+					fetchLenderInfo: () => Promise.resolve({}),
+				},
+			},
+		});
 };
 
 describe('KvCommentsListItem', () => {

package/vue/KvCommentsAdd.vue

@@ -2,20 +2,11 @@
 	<div class="tw-flex tw-flex-col">
 		<div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-0.5 md:tw-gap-1">
 			<div class="tw-flex tw-items-center tw-gap-1">
-				<img
-					v-if="userImageUrl"
-					:src="userImageUrl"
-					alt="Lender"
-					class="
-						data-hj-suppress
-						tw-inline-block
-						tw-w-3.5
-						tw-h-3.5
-						tw-rounded-full
-						tw-overflow-hidden
-						tw-object-fill
-					"
-				>
+				<kv-user-avatar
+					:lender-name="userDisplayName"
+					:lender-image-url="userImageUrl"
+					is-small
+				/>
 				<div class="data-hj-suppress tw-font-medium">
 					{{ userDisplayName }}
 				</div>
@@ -52,6 +43,7 @@
 import { computed, ref } from 'vue-demi';
 import KvButton from './KvButton.vue';
 import KvTextInput from './KvTextInput.vue';
+import KvUserAvatar from './KvUserAvatar.vue';
 
 export const ADD_COMMENT_ID = 'add-comment-value';
 export const ADD_COMMENT_EVENT = 'add-comment';
@@ -62,6 +54,7 @@ export default {
 	components: {
 		KvButton,
 		KvTextInput,
+		KvUserAvatar,
 	},
 	props: {
 		/**

package/vue/KvCommentsContainer.vue

@@ -56,7 +56,7 @@ export default {
 		 */
 		comments: {
 			type: Object,
-			default: () => {},
+			default: () => ({}),
 		},
 	},
 	emits: [ADD_REACTION_EVENT],

package/vue/KvCommentsList.vue

@@ -52,7 +52,7 @@ export default {
 		 */
 		comments: {
 			type: Object,
-			default: () => {},
+			default: () => ({}),
 		},
 	},
 	emits: [ADD_REACTION_EVENT],

package/vue/KvCommentsListItem.vue

@@ -2,23 +2,14 @@
 	<div>
 		<div>
 			<div class="tw-flex tw-items-center tw-gap-1">
-				<img
-					v-if="authorImage"
-					class="
-						data-hj-suppress
-						tw-inline-block
-						tw-w-3.5
-						tw-h-3.5
-						tw-rounded-full
-						tw-overflow-hidden
-						tw-object-fill
-					"
-					:src="authorImage"
-					alt="picture"
-				>
+				<kv-user-avatar
+					:lender-name="authorName"
+					:lender-image-url="authorImage"
+					is-small
+				/>
 				<p
 					v-if="authorName"
-					class="tw-font-medium"
+					class="data-hj-suppress tw-font-medium"
 				>
 					{{ authorName }}
 				</p>
@@ -92,10 +83,13 @@ import {
 	nextTick,
 	computed,
 	toRefs,
+	onMounted,
+	inject,
 } from 'vue-demi';
 import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
 import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
 import KvCommentsAdd from './KvCommentsAdd.vue';
+import KvUserAvatar from './KvUserAvatar.vue';
 
 export const REPLY_COMMENT_EVENT = 'reply-comment';
 export const LIKE_COMMENT_EVENT = 'like-comment';
@@ -107,6 +101,7 @@ export default {
 		KvCommentsReplyButton,
 		KvCommentsHeartButton,
 		KvCommentsAdd,
+		KvUserAvatar,
 	},
 	props: {
 		/**
@@ -156,10 +151,14 @@ export default {
 
 		const showInput = ref(false);
 		const commentsAddRef = ref(null);
+		const authorInfo = ref();
 
 		const commentText = computed(() => comment?.value?.data?.text ?? '');
-		const authorImage = computed(() => comment?.value?.user?.data?.image ?? '');
-		const authorName = computed(() => comment?.value?.user?.data?.name ?? '');
+
+		const authorId = computed(() => comment?.value?.user?.data?.publicLenderId ?? '');
+		const authorImage = computed(() => authorInfo?.value?.image?.url ?? '');
+		const authorName = computed(() => authorInfo?.value?.name ?? '');
+
 		const childComments = computed(() => comment?.value?.latest_children?.comment ?? null);
 		const childLikes = computed(() => comment?.value?.latest_children?.like ?? []);
 		const likedObject = computed(() => childLikes.value.find((child) => child.user.data.publicLenderId === userPublicId.value)); // eslint-disable-line max-len
@@ -192,6 +191,15 @@ export default {
 
 		const numberOfReplies = computed(() => comment?.value?.children_counts?.comment ?? 0);
 
+		const fetchLenderInfo = inject('fetchLenderInfo');
+
+		onMounted(async () => {
+			if (authorId.value) {
+				const authorData = await fetchLenderInfo(authorId.value);
+				authorInfo.value = authorData;
+			}
+		});
+
 		return {
 			hideInput,
 			showInput,

package/vue/KvUserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="data-hj-suppress"
+		class="data-hj-suppress tw-flex"
 		:class="{ 'tw-w-3': isSmall, 'tw-w-6': !isSmall }"
 	>
 		<!-- User is anonymous or data is missing -->