feat: goals category update

src/components/GoalSetting/GoalSettingContainer.vue

@@ -36,9 +36,10 @@
 				v-show="showCategories"
 			>
 				<h2
-					v-html="title"
 					class="tw-mb-3 tw-text-left lg:tw-text-center"
-				></h2>
+				>
+					Choose an impact area
+				</h2>
 				<CategoryForm
 					:key="categoryFormKey"
 					:categories="categories"
@@ -68,7 +69,6 @@ import {
 	ref,
 	inject,
 	onMounted,
-	computed
 } from 'vue';
 import { useRouter } from 'vue-router';
 import { mdiChevronLeft } from '@mdi/js';
@@ -127,10 +127,6 @@ const categories = getCategories(props.categoriesLoanCount, props.totalLoans);
 
 const selectedCategory = ref(categories[0]);
 
-const title = computed(() => {
-	return `Make <span class="tw-text-eco-green-3">${loanTarget.value} loans</span> to...`;
-});
-
 const editGoalCategory = () => {
 	// Force CategoryForm to re-render so it reverts to the default selected category
 	categoryFormKey.value += 1;

src/components/MyKiva/GoalSetting/CategoryForm.vue

@@ -1,16 +1,59 @@
 <template>
-	<KvImpactVerticalSelector
-		:category-list="categories"
-		:pre-selected-category="preSelectedCategory"
-		@category-selected="$emit('category-selected', $event)"
-	/>
+	<div class="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 md:tw-gap-3">
+		<KvCardFrame
+			v-for="category in categories"
+			:key="category.id"
+			class="tw-transition-all tw-duration-200 hover:tw-shadow-lg"
+			:bg-color-class="selectedCategory === category.id ? 'tw-bg-secondary' : 'tw-bg-white'"
+			:border-class="
+				selectedCategory === category.id
+					? 'tw-border-2 tw-border-action'
+					: 'tw-border-2 tw-border-transparent'
+			"
+			@click="selectCategory(category.id)"
+		>
+			<div
+				class="tw-p-1 md:tw-p-2 tw-flex tw-flex-row tw-items-center tw-cursor-pointer
+					md:tw-flex-col md:tw-justify-center"
+				:style="cardStylings"
+			>
+				<img
+					class="tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-1.5"
+					:alt="`${category.name} image`"
+					:src="category.customImage"
+					:height="isMedium ? 64 : 54"
+				>
+				<div class="md:tw-text-center">
+					<p class="md:tw-mb-0.5 tw-font-medium">
+						{{ category.name }}
+					</p>
+					<p
+						v-show="selectedCategory === category.id"
+						class="tw-text-small"
+					>
+						{{ category.description }}
+					</p>
+				</div>
+			</div>
+		</KvCardFrame>
+	</div>
 </template>
 
 <script setup>
-import { KvImpactVerticalSelector } from '@kiva/kv-components';
-import { defineProps, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
+import useBreakpoints from '#src/composables/useBreakpoints';
+import { KvCardFrame } from '@kiva/kv-components';
 
-defineProps({
+const MOBILE_WIDTH = '100%';
+const MOBILE_HEIGHT = '70px';
+const DESKTOP_WIDTH = '198px';
+const DESKTOP_HEIGHT = '174px';
+
+const emit = defineEmits(['category-selected']);
+
+const { isMedium } = useBreakpoints();
+
+const props = defineProps({
 	categories: {
 		type: Array,
 		required: true,
@@ -21,5 +64,22 @@ defineProps({
 	},
 });
 
-defineEmits(['category-selected']);
+const selectedCategory = ref(props.preSelectedCategory);
+
+const cardStylings = computed(() => {
+	const minWidth = isMedium.value ? DESKTOP_WIDTH : MOBILE_WIDTH;
+	const maxWidth = isMedium.value ? DESKTOP_WIDTH : MOBILE_WIDTH;
+	const minHeight = isMedium.value ? DESKTOP_HEIGHT : MOBILE_HEIGHT;
+
+	return {
+		minWidth,
+		maxWidth,
+		minHeight,
+	};
+});
+
+const selectCategory = categoryId => {
+	selectedCategory.value = categoryId;
+	emit('category-selected', categoryId);
+};
 </script>

src/components/MyKiva/GoalSettingModal.vue

@@ -8,17 +8,17 @@
 		<template #header>
 			<h2
 				v-if="!isMobile && (showCategories || isThanksPage)"
-				v-html="title"
-				class="tw-mb-3 tw-text-center"
-				:class="{ '!tw-text-left': goalsV2Enabled }"
-			></h2>
+				class="tw-mb-3 tw-text-left md:tw-text-center"
+			>
+				Choose an impact area
+			</h2>
 		</template>
 		<h2
 			v-if="isMobile && (showCategories || isThanksPage)"
-			v-html="title"
-			class="tw-mb-3 tw-text-center"
-			:class="{ '!tw-text-left': goalsV2Enabled }"
-		></h2>
+			class="tw-mb-3 tw-text-left md:tw-text-center"
+		>
+			Choose an impact area
+		</h2>
 		<GoalSelector
 			v-if="showGoalSelector && goalsV2Enabled"
 			v-show="!showCategories"
@@ -160,19 +160,6 @@ const ctaCopy = computed(() => {
 	return formStep.value === 1 ? 'Continue' : 'Set my goal';
 });
 
-const title = computed(() => {
-	if (props.goalsV2Enabled) {
-		return `Make <span class="tw-text-eco-green-3">${selectedGoalNumber.value} loans</span> to...`;
-	}
-	if (formStep.value === 1) {
-		return 'Choose your impact goal category';
-	}
-	if (selectedCategory.value?.title) {
-		return `How many more loans to ${selectedCategory.value?.title} will you support this year?`;
-	}
-	return 'How many more people will you support this year?';
-});
-
 const ctaHref = computed(() => {
 	// Use goalProgress which tracks current year progress
 	return getCtaHref(

src/composables/useGoalData.js

@@ -174,13 +174,13 @@ export default function useGoalData({ apollo } = {}) {
 			},
 			{
 				id: '2',
-				name: 'Refugees',
-				description: 'Transform the future for refugees',
-				eventProp: 'refugees',
-				customImage: refugeesImg,
-				loanCount: categoriesLoanCount?.[ID_REFUGEE_EQUALITY],
-				title: 'refugees',
-				badgeId: ID_REFUGEE_EQUALITY,
+				name: 'Choose as I go',
+				description: 'Support a variety of borrowers',
+				eventProp: 'help-everyone',
+				customImage: supportAllImg,
+				loanCount: totalLoans,
+				title: null,
+				badgeId: ID_SUPPORT_ALL,
 			},
 			{
 				id: '3',
@@ -194,16 +194,6 @@ export default function useGoalData({ apollo } = {}) {
 			},
 			{
 				id: '4',
-				name: 'U.S. Entrepreneurs',
-				description: 'Support small businesses in the U.S.',
-				eventProp: 'us-entrepreneur',
-				customImage: usEntrepreneursImg,
-				loanCount: categoriesLoanCount?.[ID_US_ECONOMIC_EQUALITY],
-				title: 'US entrepreneurs',
-				badgeId: ID_US_ECONOMIC_EQUALITY,
-			},
-			{
-				id: '5',
 				name: 'Basic Needs',
 				description: 'Clean water, healthcare, and sanitation',
 				eventProp: 'basic-needs',
@@ -212,16 +202,26 @@ export default function useGoalData({ apollo } = {}) {
 				title: 'basic needs',
 				badgeId: ID_BASIC_NEEDS,
 			},
+			{
+				id: '5',
+				name: 'Refugees',
+				description: 'Transform the future for refugees',
+				eventProp: 'refugees',
+				customImage: refugeesImg,
+				loanCount: categoriesLoanCount?.[ID_REFUGEE_EQUALITY],
+				title: 'refugees',
+				badgeId: ID_REFUGEE_EQUALITY,
+			},
 			{
 				id: '6',
-				name: 'Choose as I go',
-				description: 'Support a variety of borrowers',
-				eventProp: 'help-everyone',
-				customImage: supportAllImg,
-				loanCount: totalLoans,
-				title: null,
-				badgeId: ID_SUPPORT_ALL,
-			}
+				name: 'U.S. Entrepreneurs',
+				description: 'Support small businesses in the U.S.',
+				eventProp: 'us-entrepreneur',
+				customImage: usEntrepreneursImg,
+				loanCount: categoriesLoanCount?.[ID_US_ECONOMIC_EQUALITY],
+				title: 'US entrepreneurs',
+				badgeId: ID_US_ECONOMIC_EQUALITY,
+			},
 		];
 	}
 

test/unit/specs/composables/useGoalData.spec.js

@@ -1827,8 +1827,8 @@ describe('useGoalData', () => {
 				badgeId: ID_WOMENS_EQUALITY,
 			});
 
-			expect(categories[5]).toEqual({
-				id: '6',
+			expect(categories[1]).toEqual({
+				id: '2',
 				name: 'Choose as I go',
 				description: 'Support a variety of borrowers',
 				eventProp: 'help-everyone',
@@ -1843,14 +1843,14 @@ describe('useGoalData', () => {
 			const categories = composable.getCategories(undefined, 15);
 
 			expect(categories[0].loanCount).toBeUndefined();
-			expect(categories[5].loanCount).toBe(15);
+			expect(categories[1].loanCount).toBe(15);
 		});
 
 		it('should handle null categoriesLoanCount', () => {
 			const categories = composable.getCategories(null, 20);
 
-			expect(categories[1].loanCount).toBeUndefined();
-			expect(categories[5].loanCount).toBe(20);
+			expect(categories[3].loanCount).toBeUndefined();
+			expect(categories[1].loanCount).toBe(20);
 		});
 	});