@kiva/kv-components 3.78.1 → 3.79.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.79.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.78.2...@kiva/kv-components@3.79.0) (2024-05-21)
+
+
+### Bug Fixes
+
+* change cta2ButtonText to loanInBasketButtonText ([f052b7b](https://github.com/kiva/kv-ui-elements/commit/f052b7bdee874b5e2447b437cd90c7751ced4bce))
+* remove button story edits ([9dfbf98](https://github.com/kiva/kv-ui-elements/commit/9dfbf981adc2f90384650044f35e6179dbbd851f))
+* remove showSecondaryButton in favor of condition to make code more readable ([8223460](https://github.com/kiva/kv-ui-elements/commit/8223460d56480267b2d4f16e99c7becc1e72b40e))
+* set consistent default values for buttons ([041fef2](https://github.com/kiva/kv-ui-elements/commit/041fef2cc21b11b4b4d11f342c8fb7a7dcee222f))
+
+
+### Features
+
+* loan card primary and secondary button customization options ([77ecb2e](https://github.com/kiva/kv-ui-elements/commit/77ecb2e90c1df81201029ba8906f217cf9f9d6b2))
+
+
+
+
+
+## [3.78.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.78.1...@kiva/kv-components@3.78.2) (2024-05-20)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 ## [3.78.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.78.0...@kiva/kv-components@3.78.1) (2024-05-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.78.1",
+  "version": "3.79.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -39,7 +39,7 @@
     "postcss": "^8.4.5",
     "postcss-loader": "^4.3.0",
     "style-loader": "^2.0.0",
-    "tailwindcss": "^3.0.18",
+    "tailwindcss": "^3.4.3",
     "vue": "^2.6.14",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.2",
@@ -53,7 +53,7 @@
     "build": "echo No build needed for @kiva/kv-components."
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^2.11.1",
+    "@kiva/kv-tokens": "^2.11.2",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "b5b74f8e63914076537541d4460777494c56ae58"
+  "gitHead": "dcf6cda7c9e7fc9437c2f5e0a607cebeb503eea2"
 }

package/vue/KvClassicLoanCard.vue

@@ -223,10 +223,14 @@
 				:set-cookie="setCookie"
 				:enable-huge-amount="enableHugeAmount"
 				:is-visitor="isVisitor"
+				:primary-button-text="primaryButtonText"
+				:secondary-button-text="secondaryButtonText"
+				:secondary-button-handler="secondaryButtonHandler"
 				class="tw-mt-auto"
 				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
 				@add-to-basket="$emit('add-to-basket', $event)"
 				@show-loan-details="clickReadMore('ViewLoan')"
+				@remove-from-basket="$emit('remove-from-basket', $event)"
 			/>
 		</div>
 		<div
@@ -397,6 +401,18 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		primaryButtonText: {
+			type: String,
+			default: 'Lend',
+		},
+		secondaryButtonHandler: {
+			type: Function,
+			default: undefined,
+		},
+		secondaryButtonText: {
+			type: String,
+			default: 'Checkout now',
+		},
 	},
 	setup(props) {
 		const {

package/vue/KvLendCta.vue

@@ -8,9 +8,9 @@
 			data-testid="bp-lend-cta-checkout-button"
 			:to="!externalLinks ? '/basket' : undefined"
 			:href="externalLinks ? '/basket' : undefined"
-			@click.native="clickCheckout"
+			@click.native="clickSecondaryButton"
 		>
-			Checkout now
+			{{ loanInBasketButtonText }}
 		</kv-ui-button>
 
 		<!-- Refunded, allSharesReserved button -->
@@ -98,7 +98,7 @@
 						data-testid="bp-lend-cta-lend-again-button"
 						type="submit"
 					>
-						Lend again
+						{{ primaryButtonText || 'Lend' }} again
 					</kv-ui-button>
 				</div>
 
@@ -206,6 +206,18 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		primaryButtonText: {
+			type: String,
+			default: 'Lend',
+		},
+		secondaryButtonText: {
+			type: String,
+			default: 'Checkout now',
+		},
+		secondaryButtonHandler: {
+			type: Function,
+			default: undefined,
+		},
 	},
 	data() {
 		return {
@@ -261,7 +273,7 @@ export default {
 		},
 		ctaButtonText() {
 			if (this.isCompleteLoanActive) {
-				return 'Lend';
+				return this.primaryButtonText || 'Lend';
 			}
 			switch (this.state) {
 				case 'loading':
@@ -269,9 +281,12 @@ export default {
 				case 'refunded':
 				case 'expired':
 				default:
-					return 'Lend';
+					return this.primaryButtonText || 'Lend';
 			}
 		},
+		loanInBasketButtonText() {
+			return this.secondaryButtonText;
+		},
 		useFormSubmit() {
 			if (this.hideShowLendDropdown
 				|| this.lendButtonVisibility
@@ -392,7 +407,16 @@ export default {
 		clickDropdown() {
 			this.kvTrackFunction('Lending', 'click-Modify loan amount', 'open dialog', this.loanId, this.loanId);
 		},
-		clickCheckout() {
+		clickSecondaryButton() {
+			if (this.secondaryButtonHandler) {
+				// Custom secondary button behavior
+				this.secondaryButtonHandler();
+			} else {
+				// Default secondary button behavior
+				this.handleCheckout();
+			}
+		},
+		handleCheckout() {
 			this.kvTrackFunction(
 				'Lending',
 				'click-Continue-to-checkout',

package/vue/stories/KvClassicLoanCard.stories.js

@@ -33,6 +33,9 @@ const story = (args) => {
 					:combined-activities="combinedActivities"
 					:enable-huge-amount="enableHugeAmount"
 					:enable-clickable-tags="enableClickableTags"
+					:primary-button-text="primaryButtonText"
+					:secondary-button-text="secondaryButtonText"
+					:secondary-button-handler="secondaryButtonHandler"
 				/>
 			</div>
 		`,
@@ -397,3 +400,32 @@ export const ClickableTags = story({
 	photoPath,
 	enableClickableTags: true,
 });
+
+export const SupportButton = story({
+	loanId: loan.id,
+	loan,
+	primaryButtonText: 'Support',
+	kvTrackFunction,
+	photoPath,
+});
+
+export const SupportAgain = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		userProperties: { lentTo: true },
+	},
+	primaryButtonText: 'Support',
+	kvTrackFunction,
+	photoPath,
+});
+
+export const RemoveButton = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	basketItems: [{ id: loan.id, __typename: 'LoanReservation' }],
+	secondaryButtonText: 'Remove Loan',
+	secondaryButtonHandler: () => {},
+});