feat: implemented MyKiva TY flow

.storybook/stories/ThanksBadges.stories.js

@@ -5,33 +5,46 @@ import {
 	mockedReceiptData,
 	mockLender,
 	mockLoans,
-	mockOldBadge,
-	mockTieredBadge,
+	mockUserAchievementProgress,
+	mockContentful,
+	MOCK_OLD_BADGE_ID,
+	MOCK_TIERED_BADGE_ID,
 } from '../mock-data/thanks-badges-mock-data';
 
 export default {
 	title: 'MyKiva/Thanks',
 	component: ThanksBadges,
 };
 
-const story = (args = {}) => {
+const queryResult = {
+	data: {
+		userAchievementProgress: mockUserAchievementProgress,
+		contentful: mockContentful,
+	}
+};
+
+const mockOldBadge = { achievementId: MOCK_OLD_BADGE_ID };
+
+const mockTieredBadge = { achievementId: MOCK_TIERED_BADGE_ID };
+
+const story = (args = {}, result = queryResult) => {
 	const template = (_args, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { ThanksBadges },
-		mixins: [apolloStoryMixin(), cookieStoreStoryMixin()],
+		mixins: [apolloStoryMixin({ queryResult: result }), cookieStoreStoryMixin()],
 		setup() { return { args }; },
 		template: '<ThanksBadges v-bind="args" />',
 	});
 	template.args = args;
 	return template;
 };
 
-export const UserGuest = story({
+export const Loading = story({
+	isOptedIn: true,
 	lender: mockLender,
 	loans: mockLoans,
 	receipt: mockedReceiptData,
-	badgesAchieved: [mockTieredBadge],
-});
+}, {});
 
 export const UserLoggedIn = story({
 	isGuest: false,
@@ -43,13 +56,19 @@ export const UserLoggedIn = story({
 
 export const UserLoggedInNotOptedIn = story({
 	isGuest: false,
-	isOptedIn: true,
 	lender: mockLender,
 	loans: mockLoans.slice(0, 1),
 	receipt: mockedReceiptData,
 	badgesAchieved: [mockTieredBadge],
 });
 
+export const UserLoggedInNotOptedInNoBadge = story({
+	isGuest: false,
+	lender: mockLender,
+	loans: mockLoans.slice(0, 1),
+	receipt: mockedReceiptData,
+});
+
 export const UserLoggedInOptedInSingleLoan = story({
 	isGuest: false,
 	isOptedIn: true,
@@ -100,29 +119,27 @@ export const BadgeMultiple = story({
 
 export const UserGuestOptedOutWithOneLoan = story({
 	lender: mockLender,
-	isGuest: false,
-	optedIn: false,
 	receipt: mockedReceiptData,
 	loans: mockLoans.slice(0, 1),
 	selectedLoan: mockLoans[0],
-	badgesAchieved: [mockTieredBadge],
 });
 
 export const UserGuestOptedOutWithTwoLoans = story({
 	lender: mockLender,
-	isGuest: false,
-	optedIn: false,
 	receipt: mockedReceiptData,
 	loans: mockLoans.slice(0, 2),
-	badgesAchieved: [mockTieredBadge],
 });
 
 export const UserGuestOptedOutWithThreeOrMoreLoans = story({
 	lender: mockLender,
-	isGuest: false,
-	optedIn: false,
 	receipt: mockedReceiptData,
 	loans: mockLoans.slice(0, 3),
-	badgesAchieved: [mockTieredBadge],
 });
 
+export const UserGuestOptedIn = story({
+	lender: mockLender,
+	isOptedIn: true,
+	receipt: mockedReceiptData,
+	loans: mockLoans.slice(0, 1),
+	selectedLoan: mockLoans[0],
+});