@kiva/kv-components 3.18.0 → 3.20.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.20.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.19.0...@kiva/kv-components@3.20.0) (2023-05-11)
+
+
+### Features
+
+* handle view loan when funded ([b6a392b](https://github.com/kiva/kv-ui-elements/commit/b6a392b0bbdcb09db37eba3d72e4b52b44eed41a))
+
+
+
+
+
+# [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)
 
 

package/package.json

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

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
@@ -195,6 +204,7 @@
 				: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)"
@@ -232,7 +242,7 @@ export default {
 	props: {
 		loanId: {
 			type: Number,
-			required: true,
+			default: undefined,
 		},
 		loan: {
 			type: Object,
@@ -290,6 +300,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		externalLinks: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -297,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,9 +1,40 @@
 <template>
 	<div>
+		<!-- Continue to checkout button -->
+		<kv-ui-button
+			v-if="isInBasket"
+			variant="secondary"
+			class="tw-inline-flex tw-flex-1"
+			data-testid="bp-lend-cta-checkout-button"
+			:to="!externalLinks ? '/basket' : undefined"
+			:href="externalLinks ? '/basket' : undefined"
+			@click.native="clickCheckout"
+		>
+			Checkout now
+		</kv-ui-button>
+
+		<!-- Refunded, allSharesReserved button -->
+		<kv-ui-button
+			v-else-if="showNonActionableLoanButton"
+			class="tw-inline-flex tw-flex-1"
+		>
+			{{ ctaButtonText }}
+		</kv-ui-button>
+
+		<!-- Funded / expired -->
+		<div
+			v-else-if="isFunded"
+			class="tw-w-full tw-text-center tw-rounded tw-p-2"
+			style="background: #f1f1f1;"
+		>
+			This loan was just funded! 🎉
+		</div>
+
 		<kv-ui-button
-			v-if="showViewLoan"
+			v-else-if="showViewLoan"
 			:state="`${allSharesReserved ? 'disabled' : ''}`"
-			:to="customLoanDetails ? '' : `/lend/${loanId}`"
+			:to="!externalLinks ? readMorePath : undefined"
+			:href="externalLinks ? readMorePath : undefined"
 			class="tw-mb-0"
 			@click="$emit('show-loan-details')"
 		>
@@ -15,6 +46,7 @@
 				/>
 			</span>
 		</kv-ui-button>
+
 		<form
 			v-else-if="useFormSubmit"
 			class="tw-w-full tw-flex"
@@ -90,35 +122,6 @@
 				</kv-ui-button>
 			</fieldset>
 		</form>
-
-		<!-- Continue to checkout button -->
-		<kv-ui-button
-			v-if="state === 'basketed'"
-			variant="secondary"
-			class="tw-inline-flex tw-flex-1"
-			data-testid="bp-lend-cta-checkout-button"
-			to="/basket"
-			@click.native="clickCheckout"
-		>
-			Checkout now
-		</kv-ui-button>
-
-		<!-- Refunded, allSharesReserved button -->
-		<kv-ui-button
-			v-if="showNonActionableLoanButton"
-			class="tw-inline-flex tw-flex-1"
-		>
-			{{ ctaButtonText }}
-		</kv-ui-button>
-
-		<!-- Funded / expired -->
-		<div
-			v-if="isFunded"
-			class="tw-w-full tw-text-center tw-rounded tw-p-2"
-			style="background: #f1f1f1;"
-		>
-			This loan was just funded! 🎉
-		</div>
 	</div>
 </template>
 
@@ -171,6 +174,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		externalLinks: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -179,6 +186,9 @@ export default {
 		};
 	},
 	computed: {
+		readMorePath() {
+			return this.customLoanDetails ? '' : `/lend/${this.loanId}`;
+		},
 		loanId() {
 			return this.loan?.id;
 		},
@@ -230,7 +240,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

@@ -143,7 +143,7 @@ export const AllSharesReserved = story({
 	},
 	kvTrackFunction,
 	photoPath,
-}, false, { unreservedAmount: '0.00', fundraisingPercent: 1 });
+});
 
 export const InBasket = story({
 	loanId: loan.id,
@@ -213,3 +213,25 @@ export const ViewLoan = story({
 	photoPath,
 	showViewLoan: true,
 });
+
+export const ViewLoanFunded = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '0.00',
+		fundraisingPercent: 1,
+	},
+	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

@@ -114,3 +114,10 @@ export const ViewLoan = story({
 	kvTrackFunction,
 	showViewLoan: true,
 });
+
+export const ViewLoanFunded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+	showViewLoan: true,
+});