Merge pull request #5626 from kiva/MP-966-connect-journey-tiered-data

feat: connect journey tiered data
kiva · Oct 29, 2024 · e3e25ed · e3e25ed
2 parents cfd1e0e + 93615ee
commit e3e25ed
Show file tree

Hide file tree

Showing 16 changed files with 943 additions and 989 deletions.
diff --git a/.storybook/mock-data/badge-journey-data-mock.js b/.storybook/mock-data/badge-journey-data-mock.js
diff --git a/.storybook/mock-data/badge-svg-data-mock.js b/.storybook/mock-data/badge-svg-data-mock.js
diff --git a/.storybook/stories/BadgeContainer.stories.js b/.storybook/stories/BadgeContainer.stories.js
@@ -9,54 +9,60 @@ import {
 	BADGE_SHAPE_OVAL,
 	BADGE_SHAPE_RECTANGLE
 } from '#src/composables/useBadgeModal';
-import { badgeArch, badgeCircular, badgeOblong, badgeOval, badgeRectangle } from '../mock-data/badge-svg-data-mock';
+import {
+	badgeWomensEquality,
+	badgeUsEconomicEquality,
+	badgeClimateAction,
+	badgeRefugeeEquality,
+	badgeBasicNeeds,
+} from '../mock-data/badge-journey-data-mock';
 
 export default {
 	title: 'MyKiva/BadgeContainer',
 	component: BadgeContainer,
 };
 
-const story = (args = {}, badge) => {
+const story = (args = {}, badgeUrl) => {
 	const template = (_args, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { BadgeContainer },
 		setup() { return { args }; },
 		template: `
 			<badge-container v-bind="args" style="width: 150px; height: 150px;">
-				${badge}
+				<img src="${badgeUrl}" />
 			</badge-container>
 		`,
 	});
 	template.args = args;
 	return template;
 };
 
-export const ArchCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH }, badgeArch);
+export const ArchCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_ARCH }, badgeClimateAction.contentfulData[0].imageUrl);
 
-export const ArchInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_ARCH }, badgeArch);
+export const ArchInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_ARCH }, badgeClimateAction.contentfulData[0].imageUrl);
 
-export const ArchLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_ARCH }, badgeArch);
+export const ArchLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_ARCH }, badgeClimateAction.contentfulData[0].imageUrl);
 
-export const CircleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_CIRCLE }, badgeCircular);
+export const CircleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_CIRCLE }, badgeBasicNeeds.contentfulData[0].imageUrl);
 
-export const CircleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_CIRCLE }, badgeCircular);
+export const CircleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_CIRCLE }, badgeBasicNeeds.contentfulData[0].imageUrl);
 
-export const CircleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_CIRCLE }, badgeCircular);
+export const CircleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_CIRCLE }, badgeBasicNeeds.contentfulData[0].imageUrl);
 
-export const OblongCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_OBLONG }, badgeOblong);
+export const OblongCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_OBLONG }, badgeWomensEquality.contentfulData[0].imageUrl);
 
-export const OblongInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_OBLONG }, badgeOblong);
+export const OblongInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_OBLONG }, badgeWomensEquality.contentfulData[0].imageUrl);
 
-export const OblongLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_OBLONG }, badgeOblong);
+export const OblongLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_OBLONG }, badgeWomensEquality.contentfulData[0].imageUrl);
 
-export const OvalCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_OVAL }, badgeOval);
+export const OvalCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_OVAL }, badgeRefugeeEquality.contentfulData[0].imageUrl);
 
-export const OvalInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_OVAL }, badgeOval);
+export const OvalInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_OVAL }, badgeRefugeeEquality.contentfulData[0].imageUrl);
 
-export const OvalLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_OVAL }, badgeOval);
+export const OvalLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_OVAL }, badgeRefugeeEquality.contentfulData[0].imageUrl);
 
-export const RectangleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_RECTANGLE }, badgeRectangle);
+export const RectangleCompleted = story({ status: BADGE_COMPLETED, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
 
-export const RectangleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_RECTANGLE }, badgeRectangle);
+export const RectangleInProgress = story({ status: BADGE_IN_PROGRESS, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
 
-export const RectangleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_RECTANGLE }, badgeRectangle);
+export const RectangleLocked = story({ status: BADGE_LOCKED, shape: BADGE_SHAPE_RECTANGLE }, badgeUsEconomicEquality.contentfulData[0].imageUrl);
diff --git a/.storybook/stories/MyKivaBadgeCompleted.stories.js b/.storybook/stories/MyKivaBadgeCompleted.stories.js
@@ -1,6 +1,5 @@
 import BadgeCompleted from '#src/components/MyKiva/BadgeCompleted.vue';
-import contentfulBadge from '../mock-data/contentful-badge-data-mock';
-import tieredLendingAchievement from '../mock-data/tiered-lending-achievement-data-mock';
+import { badgeFirstTierComplete } from '../mock-data/badge-journey-data-mock';
 
 export default {
 	title: 'MyKiva/BadgeCompleted',
@@ -21,11 +20,11 @@ const story = (args = {}) => {
 };
 
 export const Default = story({
-	badge: contentfulBadge,
-	lendingAchievement: tieredLendingAchievement[0],
+	badge: badgeFirstTierComplete,
 	lender: {
 		publicName: 'Christian',
 		public: true,
 		publicId: 'christian78848470'
-	}
+	},
+	tier: badgeFirstTierComplete.achievementData.tiers[0],
 });
diff --git a/src/components/MyKiva/BadgeCompleted.vue b/src/components/MyKiva/BadgeCompleted.vue
@@ -113,7 +113,7 @@ const badgeImage = computed(() => {
 	return badgeData.value.contentfulData?.imageUrl ?? '';
 });
 
-const badgeCategory = computed(() => badgeData.value?.contentfulData?.challengeName ?? '');
+const badgeCategory = computed(() => badgeData.value?.challengeName ?? '');
 
 const badgeLevel = computed(() => {
 	return badgeData.value?.achievementData?.target ?? 0;

diff --git a/src/components/MyKiva/BadgeContainer.vue b/src/components/MyKiva/BadgeContainer.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="tw-relative tw-inline-block tw-cursor-pointer"
-		:class="{ 'tw-grayscale': isInProgress }"
+		:class="{ 'tw-grayscale': isInProgress, 'invisible-badge': isLocked }"
 		@click="handleBadgeClick"
 	>
 		<slot></slot>
@@ -11,12 +11,17 @@
 			class="tw-absolute tw-h-full tw-top-0"
 			:style="outlineStyles"
 		/>
-		<component v-else-if="isLocked" :is="solidComponent" class="tw-absolute tw-h-full tw-top-0" />
+		<component
+			v-else-if="isLocked"
+			:is="solidComponent"
+			class="tw-absolute tw-top-0"
+			style="height: 96%;"
+		/>
 		<div
 			v-if="isLocked"
 			class="tw-absolute tw-flex"
 			:class="{ 'animate-wiggle': animateLock }"
-			style="left: calc(50% - 14px); top: calc(50% - 14px)"
+			style="left: calc(50% - 14px); top: calc(48% - 14px)"
 		>
 			<KvMaterialIcon
 				class="tw-w-3.5 tw-h-3.5 tw-text-white"
@@ -130,6 +135,10 @@ const handleBadgeClick = () => {
 	@apply tw-h-full tw-w-full;
 }
 
+.invisible-badge :deep(img) {
+	@apply tw-invisible;
+}
+
 @keyframes wiggle {
   0%, 7% {
     transform: rotateZ(0);

diff --git a/src/components/MyKiva/BadgeInProgress.vue b/src/components/MyKiva/BadgeInProgress.vue
@@ -7,8 +7,7 @@
 				<img
 					:src="badgeImage"
 					alt="Badge"
-					style="max-height: 133px;"
-					@load="isBadgeImageLoaded = true"
+					style="height: 133px; width: 133px;"
 				>
 			</BadgeContainer>
 			<div>
@@ -97,29 +96,6 @@ import useIsMobile from '#src/composables/useIsMobile';
 import BadgeContainer from './BadgeContainer';
 
 const props = defineProps({
-	/**
-	 * {
-	 *   id: '',
-	 *   fields: {
-	 *     challengeName: '',
-	 *     shareFact: '',
-	 *     badgeImage: {
-	 *       fields: {
-	 *         file: {
-	 *           url: '',
-	 *         },
-	 *       },
-	 *     },
-	 *   },
-	 *   totalProgressToAchievement,
-	 *   tiers: [
-	 *     {
-	 *       target: 2,
-	 *       completedDate: null,
-	 *     },
-	 *   ],
-	 * }
-	 */
 	badge: {
 		type: Object,
 		default: () => ({}),
@@ -200,11 +176,11 @@ const onInteractCarousel = interaction => {
 	$kvTrackEvent('carousel', 'click-carousel-horizontal-scroll', interaction);
 };
 
-const badgeName = computed(() => props.badge?.fields?.challengeName ?? '');
+const badgeName = computed(() => props.badge?.challengeName ?? '');
 // TODO: Replace once the work of using the icon of the correct in-progress badge level is complete
 const badgeImage = computed(() => props.badge?.fields?.badgeImage?.fields?.file?.url ?? '');
 const badgeLevel = computed(() => props.badge?.fields?.level ?? '');
-const totalProgress = computed(() => props.badge?.totalProgressToAchievement ?? 0);
+const totalProgress = computed(() => props.badge?.achievementData?.totalProgressToAchievement ?? 0);
 const tiers = computed(() => props.badge?.tiers ?? []);
 
 const sortedTiers = computed(() => {

diff --git a/src/components/MyKiva/BadgeModal.vue b/src/components/MyKiva/BadgeModal.vue
@@ -41,30 +41,6 @@ const props = defineProps({
 		type: Object,
 		default: () => ({}),
 	},
-	/**
-	 * {
-	 *   id: '',
-	 *   fields: {
-	 *     challengeName: '',
-	 *     shareFact: '',
-	 *     badgeImage: {
-	 *       fields: {
-	 *         file: {
-	 *           url: '',
-	 *         },
-	 *       },
-	 *     },
-	 *   },
-	 *   tiers: [
-	 *     {
-	 *       target: 2,
-	 *       learnMoreUrl: '',
-	 *       completedDate: null,
-	 *       tierStatement: ""
-	 *     },
-	 *   ],
-	 * }
-	 */
 	badge: {
 		type: Object,
 		required: true,
@@ -86,9 +62,9 @@ const handleBadgeLevelClicked = e => {
 
 const title = computed(() => {
 	if (props.state === STATE_JOURNEY) {
-		return props.badge?.contentfulData?.[props.tier]?.challengeName ?? '';
+		return props.badge?.challengeName ?? '';
 	}
-	return null;
+	return '';
 });
 
 const contentComponent = computed(() => {