@kiva/kv-components 3.17.0 → 3.19.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.19.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.18.0...@kiva/kv-components@3.19.0) (2023-05-09)
+
+
+### Features
+
+* loan card CTA fixes needed for home page ([fc1c9f8](https://github.com/kiva/kv-ui-elements/commit/fc1c9f858aeae620f6cfea74da8d15ae859afa3c))
+
+
+
+
+
+# [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.19.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "9d1eae452258b88c989f42b816aa99f87144041a"
+  "gitHead": "b816407effcdecfc0487c5bfb91838f9c4f25a85"
 }

package/vue/KvClassicLoanCard.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		:id="`${loanId}-loan-card`"
 		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1"
 		:class="{ 'tw-p-1': !largeCard }"
 		style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);"
@@ -29,8 +28,10 @@
 						data-testid="loan-card-bookmark"
 						@toggle-bookmark="$emit('toggle-bookmark')"
 					/>
-					<router-link
-						:to="customLoanDetails ? '' : `/lend/${loanId}`"
+					<component
+						:is="tag"
+						:to="readMorePath"
+						:href="readMorePath"
 						class="tw-flex"
 						aria-label="Borrower image"
 						@click="clickReadMore('Photo')"
@@ -74,12 +75,14 @@
 								{{ formattedLocation }}
 							</p>
 						</div>
-					</router-link>
+					</component>
 				</div>
 
 				<!-- Loan tag -->
-				<router-link
-					:to="customLoanDetails ? '' : `/lend/${loanId}`"
+				<component
+					:is="tag"
+					:to="readMorePath"
+					:href="readMorePath"
 					class="tw-flex hover:tw-no-underline focus:tw-no-underline"
 					:class="{ 'tw-px-1': largeCard }"
 					aria-label="Loan tag"
@@ -90,10 +93,12 @@
 						:loan="loan"
 						:kv-track-function="kvTrackFunction"
 					/>
-				</router-link>
+				</component>
 
-				<router-link
-					:to="customLoanDetails ? '' : `/lend/${loanId}`"
+				<component
+					:is="tag"
+					:to="readMorePath"
+					:href="readMorePath"
 					class="loan-card-use tw-text-primary"
 					aria-label="Loan use"
 					@click="clickReadMore('Use')"
@@ -106,11 +111,13 @@
 							:class="{ 'tw-px-1': largeCard }"
 							style="height: 5.5rem;"
 						>
-							<kv-loading-placeholder
+							<div
 								v-for="(_n, i) in [...Array(4)]"
 								:key="i"
-								class="tw-h-2 tw-mb-1 tw-w-1.5"
-							/>
+								class="tw-h-2 tw-mb-1"
+							>
+								<kv-loading-placeholder />
+							</div>
 						</div>
 						<div v-else>
 							<kv-loan-use
@@ -124,7 +131,7 @@
 							/>
 						</div>
 					</div>
-				</router-link>
+				</component>
 			</div>
 
 			<!-- Loan call outs -->
@@ -163,9 +170,11 @@
 				/>
 			</div>
 
-			<router-link
+			<component
+				:is="tag"
 				v-if="unreservedAmount > 0"
-				:to="customLoanDetails ? '' : `/lend/${loanId}`"
+				:to="readMorePath"
+				:href="readMorePath"
 				class="loan-card-progress tw-mt-1"
 				aria-label="Loan progress"
 				@click="clickReadMore('Progress')"
@@ -176,7 +185,7 @@
 					:progress-percent="fundraisingPercent"
 					class="tw-text-black"
 				/>
-			</router-link>
+			</component>
 
 			<!-- CTA Button -->
 			<kv-loading-placeholder
@@ -193,9 +202,13 @@
 				:is-adding="isAdding"
 				:enable-five-dollars-notes="enableFiveDollarsNotes"
 				:kv-track-function="kvTrackFunction"
+				:show-view-loan="showViewLoan"
+				:custom-loan-details="customLoanDetails"
+				:external-links="externalLinks"
 				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>
@@ -229,7 +242,7 @@ export default {
 	props: {
 		loanId: {
 			type: Number,
-			required: true,
+			default: undefined,
 		},
 		loan: {
 			type: Object,
@@ -283,6 +296,14 @@ export default {
 			type: String,
 			required: true,
 		},
+		showViewLoan: {
+			type: Boolean,
+			default: false,
+		},
+		externalLinks: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -290,8 +311,14 @@ export default {
 		};
 	},
 	computed: {
+		tag() {
+			return this.externalLinks ? 'a' : 'router-link';
+		},
+		readMorePath() {
+			return this.customLoanDetails ? '' : `/lend/${this.loanId}`;
+		},
 		isLoading() {
-			return !this.loan;
+			return !this.loanId || !this.loan;
 		},
 		cardWidth() {
 			return this.useFullWidth ? '100%' : '374px';

package/vue/KvLendAmountButton.vue

@@ -32,10 +32,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		isAdding: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	computed: {
 		amountValue() {
@@ -55,10 +51,6 @@ export default {
 
 			return str;
 		},
-		buttonState() {
-			if (this.isAdding) return 'loading';
-			return '';
-		},
 	},
 	methods: {
 		addToBasket(event) {

package/vue/KvLendCta.vue

@@ -1,7 +1,23 @@
 <template>
 	<div>
+		<kv-ui-button
+			v-if="showViewLoan && !isInBasket"
+			:state="`${allSharesReserved ? 'disabled' : ''}`"
+			:to="!externalLinks ? readMorePath : undefined"
+			:href="externalLinks ? readMorePath : undefined"
+			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 +61,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"
@@ -78,11 +94,12 @@
 
 		<!-- Continue to checkout button -->
 		<kv-ui-button
-			v-if="state === 'basketed'"
+			v-if="isInBasket"
 			variant="secondary"
 			class="tw-inline-flex tw-flex-1"
 			data-testid="bp-lend-cta-checkout-button"
-			to="/basket"
+			:to="!externalLinks ? '/basket' : undefined"
+			:href="externalLinks ? '/basket' : undefined"
 			@click.native="clickCheckout"
 		>
 			Checkout now
@@ -109,9 +126,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 +138,7 @@ export default {
 		KvLendAmountButton,
 		KvUiButton,
 		KvUiSelect,
+		KvMaterialIcon,
 	},
 	props: {
 		loan: {
@@ -145,13 +165,29 @@ export default {
 			type: Function,
 			required: true,
 		},
+		showViewLoan: {
+			type: Boolean,
+			default: false,
+		},
+		customLoanDetails: {
+			type: Boolean,
+			default: false,
+		},
+		externalLinks: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
+			mdiChevronRight,
 			selectedOption: this.getSelectedOption(this.loan?.unreservedAmount),
 		};
 	},
 	computed: {
+		readMorePath() {
+			return this.customLoanDetails ? '' : `/lend/${this.loanId}`;
+		},
 		loanId() {
 			return this.loan?.id;
 		},
@@ -203,7 +239,7 @@ export default {
 		useFormSubmit() {
 			if (this.hideShowLendDropdown
 				|| this.lendButtonVisibility
-				|| this.lendAgainButton
+				|| this.showLendAgain
 				|| this.state === 'lent-to'
 				|| this.isAdding) {
 				return true;

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,21 @@ export const FiveDollarNotes = story({
 	kvTrackFunction,
 	photoPath,
 });
+
+export const ViewLoan = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	showViewLoan: true,
+});
+
+export const LendAgain = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		userProperties: { lentTo: true },
+	},
+	kvTrackFunction,
+	photoPath,
+});

package/vue/stories/KvLendAmountButton.stories.js

@@ -15,7 +15,6 @@ const story = (args) => {
 				:show-now="showNow"
 				:amount-left="amountLeft"
 				:complete-loan="completeLoan"
-				:is-adding="isAdding"
 			/>
 		`,
 	});
@@ -30,5 +29,3 @@ export const ShowNow = story({ showNow: true });
 export const AmountLeft = story({ amountLeft: 5 });
 
 export const CompleteLoan = story({ completeLoan: true });
-
-export const IsAdding = story({ isAdding: 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,
+});