@kiva/kv-components 3.33.0 → 3.35.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.35.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.34.0...@kiva/kv-components@3.35.0) (2023-08-03)
+
+
+### Features
+
+* adding new option to the loan progress bar bg ([89afa0a](https://github.com/kiva/kv-ui-elements/commit/89afa0ad20cd64a794441d187da534006a3aeef2))
+
+
+
+
+
+# [3.34.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.33.0...@kiva/kv-components@3.34.0) (2023-08-02)
+
+
+### Features
+
+* balance campaign prices added to loan utility ([#277](https://github.com/kiva/kv-ui-elements/issues/277)) ([319707e](https://github.com/kiva/kv-ui-elements/commit/319707e525865077e531ab6f4c378676da7ee53b))
+
+
+
+
+
 # [3.33.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.32.0...@kiva/kv-components@3.33.0) (2023-08-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.33.0",
+  "version": "3.35.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "44902626bb39de1e3df5c60a7708203319aee81f"
+  "gitHead": "4475c2f9110f86d6cc5f743dd2370181c605a4bb"
 }

package/utils/loanUtils.js

@@ -1,6 +1,16 @@
 export const ERL_COOKIE_NAME = 'kverlfivedollarnotes';
 export const TOP_UP_CAMPAIGN = 'TOPUP-VB-BALANCE-MPV1';
 export const BASE_CAMPAIGN = 'BASE-VB_BALANCE_MPV1';
+export const BALANCE_CAMPAIGN = 'REPAYMENT-NOTIFICATION_BALANCE_MPV1';
+export const NO_BALANCE_CAMPAIGN = 'REPAYMENT-NOTIFICATION_NO-BALANCE_MPV1';
+
+function balanceCampaignOptions(val) {
+	if (val > 20) return 25;
+	if (val > 15) return 20;
+	if (val > 10) return 15;
+	if (val > 5) return 10;
+	return 5;
+}
 
 /**
  * Checks if the unreserved amount is between 25 and 50
@@ -42,6 +52,11 @@ export function getLendCtaSelectedOption(
 	userBalance,
 	fiveDollarsSelected,
 ) {
+	// defaulted to $5 for fiveDollarsSelected flag even when users come from email with a different balance
+	if (enableFiveDollarsNotes && fiveDollarsSelected) {
+		return '5';
+	}
+
 	// Don't enable the campaign changes when the user balance is undefined (user not logged in)
 	if (enableFiveDollarsNotes && typeof userBalance !== 'undefined') {
 		let currentCampaign = getCookie?.(ERL_COOKIE_NAME);
@@ -56,7 +71,9 @@ export function getLendCtaSelectedOption(
 			// eslint-disable-next-line no-nested-ternary
 			currentCampaign = campaignToCheck.includes(TOP_UP_CAMPAIGN)
 				? TOP_UP_CAMPAIGN
-				: (campaignToCheck.includes(BASE_CAMPAIGN) ? BASE_CAMPAIGN : '');
+				: campaignToCheck.includes(BASE_CAMPAIGN) ? BASE_CAMPAIGN // eslint-disable-line no-nested-ternary
+					: campaignToCheck.includes(BALANCE_CAMPAIGN) ? BALANCE_CAMPAIGN // eslint-disable-line no-nested-ternary
+						: (campaignToCheck.includes(NO_BALANCE_CAMPAIGN) ? NO_BALANCE_CAMPAIGN : '');
 
 			if (currentCampaign && setCookie) {
 				setCookie(ERL_COOKIE_NAME, currentCampaign, { expires });
@@ -64,25 +81,26 @@ export function getLendCtaSelectedOption(
 		}
 
 		if (currentCampaign) {
+			let val = Math.floor(userBalance / 5) * 5;
+
 			// Base campaign gets largest increment of $5 under the user's balance up to $25 or the unreserved amount
 			if (currentCampaign === BASE_CAMPAIGN) {
-				let val = Math.floor(userBalance / 5) * 5;
-
 				// eslint-disable-next-line no-nested-ternary
 				val = val === 0 ? 5 : (val > 25 ? 25 : val);
 
 				return Number(val <= unreservedAmount ? val : unreservedAmount).toFixed();
 			}
 
-			// Top up campaign defaults to $5
+			if (currentCampaign === BALANCE_CAMPAIGN) {
+				val = balanceCampaignOptions(val);
+				return Number(val).toFixed();
+			}
+
+			// Top up and no balance campaigns defaults to $5
 			return Number(unreservedAmount > 5 ? 5 : unreservedAmount).toFixed();
 		}
 	}
 
-	if (enableFiveDollarsNotes && fiveDollarsSelected) {
-		return '5';
-	}
-
 	// Handle when $5 notes isn't enabled
 	if (isBetween25And50(unreservedAmount) || isLessThan25(unreservedAmount)) {
 		return Number(unreservedAmount).toFixed();

package/vue/KvProgressBar.vue

@@ -2,8 +2,8 @@
 	<div
 		class="
 			tw-h-1 tw-w-full tw-rounded-full tw-overflow-hidden tw-relative
-			tw-bg-secondary
 		"
+		:class="backgroundVariant"
 		role="progressbar"
 		:aria-label="ariaLabel"
 		:aria-valuemin="min"
@@ -77,6 +77,17 @@ export default {
 				return ['primary', 'ghost', 'danger', 'caution'].includes(value);
 			},
 		},
+		/**
+		 * Appearance of the progress bar background
+		 * `secondary (default), tertiary
+		 * */
+		bgVariant: {
+			type: String,
+			default: 'secondary',
+			validator(value) {
+				return ['secondary', 'tertiary'].includes(value);
+			},
+		},
 	},
 	setup(props) {
 		const {
@@ -84,6 +95,7 @@ export default {
 			max,
 			value,
 			variant,
+			bgVariant,
 		} = toRefs(props);
 		const loaded = ref(false);
 
@@ -107,6 +119,15 @@ export default {
 			}
 		});
 
+		const backgroundVariant = computed(() => {
+			switch (bgVariant.value) {
+				case 'tertiary':
+					return 'tw-bg-tertiary';
+				default:
+					return 'tw-bg-secondary';
+			}
+		});
+
 		const animateProgressBar = () => {
 			loaded.value = true;
 		};
@@ -121,6 +142,7 @@ export default {
 			percent,
 			animateProgressBar,
 			variantClass,
+			backgroundVariant,
 		};
 	},
 };

package/vue/stories/KvProgressBar.stories.js

@@ -9,6 +9,7 @@ export default {
 		value: 50,
 		ariaLabel: 'Amount the loan has fundraised',
 		variant: 'primary',
+		bgVariant: 'secondary',
 	},
 };
 
@@ -22,6 +23,7 @@ const Template = (args, { argTypes }) => ({
 			:max="max"
 			:value="value"
 			:variant="variant"
+			:bg-variant="bgVariant"
 
 		></kv-progress-bar>`,
 });
@@ -44,3 +46,8 @@ export const VariantGhost = Template.bind({});
 VariantGhost.args = {
 	variant: 'ghost',
 };
+
+export const BgVariantTertiary = Template.bind({});
+BgVariantTertiary.args = {
+	bgVariant: 'tertiary',
+};