@kiva/kv-components 3.17.0 → 3.18.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.18.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.17.0...@kiva/kv-components@3.18.0) (2023-05-05)
+
+
+### Features
+
+* "view loan" CTA ([aa10cf1](https://github.com/kiva/kv-ui-elements/commit/aa10cf17a1ca4978b97fc9541522f31d95cc886f))
+
+
+
+
+
 # [3.17.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.16.0...@kiva/kv-components@3.17.0) (2023-05-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "9d1eae452258b88c989f42b816aa99f87144041a"
+  "gitHead": "68db3fee0d19c1708e9ac97cf69e04ca97fadd62"
 }

package/vue/KvClassicLoanCard.vue

@@ -193,9 +193,12 @@
 				:is-adding="isAdding"
 				:enable-five-dollars-notes="enableFiveDollarsNotes"
 				:kv-track-function="kvTrackFunction"
+				:show-view-loan="showViewLoan"
+				:custom-loan-details="customLoanDetails"
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
+				@show-loan-details="clickReadMore('ViewLoan')"
 			/>
 		</div>
 	</div>
@@ -283,6 +286,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		showViewLoan: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

package/vue/KvLendCta.vue

@@ -1,7 +1,22 @@
 <template>
 	<div>
+		<kv-ui-button
+			v-if="showViewLoan"
+			:state="`${allSharesReserved ? 'disabled' : ''}`"
+			:to="customLoanDetails ? '' : `/lend/${loanId}`"
+			class="tw-mb-0"
+			@click="$emit('show-loan-details')"
+		>
+			<span class="tw-flex">
+				View loan
+				<kv-material-icon
+					class="tw-w-3 tw-h-3 tw-align-middle"
+					:icon="mdiChevronRight"
+				/>
+			</span>
+		</kv-ui-button>
 		<form
-			v-if="useFormSubmit"
+			v-else-if="useFormSubmit"
 			class="tw-w-full tw-flex"
 			@submit.prevent="addToBasket"
 		>
@@ -45,7 +60,7 @@
 
 					<!-- Lend again/lent previously button -->
 					<kv-ui-button
-						v-if="showLendAgain"
+						v-else-if="showLendAgain"
 						key="lendAgainButton"
 						class="lend-again"
 						data-testid="bp-lend-cta-lend-again-button"
@@ -109,9 +124,11 @@
 
 <script>
 import numeral from 'numeral';
+import { mdiChevronRight } from '@mdi/js';
 import KvLendAmountButton from './KvLendAmountButton.vue';
 import KvUiSelect from './KvSelect.vue';
 import KvUiButton from './KvButton.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
 
 export default {
 	name: 'KvLendCta',
@@ -119,6 +136,7 @@ export default {
 		KvLendAmountButton,
 		KvUiButton,
 		KvUiSelect,
+		KvMaterialIcon,
 	},
 	props: {
 		loan: {
@@ -145,9 +163,18 @@ export default {
 			type: Function,
 			required: true,
 		},
+		showViewLoan: {
+			type: Boolean,
+			default: false,
+		},
+		customLoanDetails: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			mdiChevronRight,
 			selectedOption: this.getSelectedOption(this.loan?.unreservedAmount),
 		};
 	},

package/vue/stories/KvClassicLoanCard.stories.js

@@ -26,6 +26,7 @@ const story = (args) => {
 					:is-bookmarked="isBookmarked"
 					:kv-track-function="kvTrackFunction"
 					:photo-path="photoPath"
+					:show-view-loan="showViewLoan"
 				/>
 			</div>
 		`,
@@ -204,3 +205,11 @@ export const FiveDollarNotes = story({
 	kvTrackFunction,
 	photoPath,
 });
+
+export const ViewLoan = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	showViewLoan: true,
+});

package/vue/stories/KvLendCta.stories.js

@@ -18,6 +18,8 @@ const story = (args) => {
 					:is-adding="isAdding"
 					:enable-five-dollars-notes="enableFiveDollarsNotes"
 					:kv-track-function="kvTrackFunction"
+					:show-view-loan="showViewLoan"
+					:custom-loan-details="customLoanDetails"
 				/>
 			</div>
 		`,
@@ -102,3 +104,13 @@ export const LendAgain = story({
 	},
 	kvTrackFunction,
 });
+
+export const ViewLoan = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	kvTrackFunction,
+	showViewLoan: true,
+});