Merge pull request #5263 from kiva/green-dynamic-banner-MP-94

feat: deposit incentive banner component and story

.storybook/stories/DepositIncentiveBanner.stories.js

@@ -0,0 +1,58 @@
+import Vue from 'vue'
+import DepositIncentiveBanner from '@/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue';
+import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
+
+// import plugins
+import kivaPlugins from '@/plugins';
+Vue.use(kivaPlugins);
+
+export default {
+	title: 'WwwFrame/Banners/DepositIncentiveBanner',
+	component: DepositIncentiveBanner,
+};
+
+const provideMockedApollo = (mockedResult) => {
+	return {
+		readQuery() {
+			return mockedResult;
+		},
+		query() {
+			return Promise.resolve(mockedResult);
+		},
+	};
+};
+
+const userInfo = {
+  my: {
+		id: 1017469,
+		depositIncentiveAmountToLend: 20,
+  }
+}
+
+export const Default = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+  mixins: [cookieStoreStoryMixin()],
+	components: {
+		DepositIncentiveBanner
+	},
+  provide: {
+		apollo: provideMockedApollo({}),
+	},
+	template: `
+		<deposit-incentive-banner />
+	`,
+});
+
+export const WithBalance = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+  mixins: [cookieStoreStoryMixin()],
+	components: {
+		DepositIncentiveBanner
+	},
+  provide: {
+		apollo: provideMockedApollo(userInfo),
+	},
+	template: `
+		<deposit-incentive-banner />
+	`,
+});

src/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue

@@ -0,0 +1,62 @@
+<template>
+	<generic-promo-banner
+		:promo-banner-content="promoBannerContent"
+	/>
+</template>
+
+<script>
+import GenericPromoBanner from '@/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner';
+import numeral from 'numeral';
+import { gql } from '@apollo/client';
+
+const amountToLendQuery = {
+	query: gql`
+    query RewardBalanceQuery {
+      my {
+        id
+        depositIncentiveAmountToLend
+      }
+    }
+  `,
+};
+
+export default {
+	name: 'DepositIncentiveBanner',
+	components: {
+		GenericPromoBanner,
+	},
+	data() {
+		return {
+			amountToLend: 0,
+		};
+	},
+	inject: ['apollo', 'cookieStore'],
+	preFetch() {
+		return this.apollo.query({ query: amountToLendQuery });
+	},
+	computed: {
+		promoBannerContent() {
+			const richText = this.amountToLend
+				? `Just for you! Lend ${numeral(this.amountToLend).format('$0,0')} and get a $25 lending credit!`
+				: 'Lend & get a free lending credit reward! Log in or sign up to get started →';
+
+			const link = this.amountToLend
+				? '/lend-by-category'
+				: '/ui-login?force=true&doneUrl=/lend-by-category';
+
+			return {
+				richText,
+				link,
+				disclaimer: '',
+			};
+		}
+	},
+	mounted() {
+		const userInfo = this.apollo.readQuery({
+			query: amountToLendQuery,
+		});
+
+		this.amountToLend = userInfo?.my?.depositIncentiveAmountToLend ?? 0;
+	}
+};
+</script>

src/components/WwwFrame/PromotionalBanner/GlobalPromotionalBannerContentful.vue

@@ -1,18 +1,23 @@
 <template>
 	<div>
-		<generic-promo-banner
-			v-show="isPromoEnabled"
-			:icon-key="promoBannerContent.iconKey"
-			:promo-banner-content="promoBannerContent"
-		/>
-		<appeal-banner-circular-container
-			v-if="appealEnabled"
-			:appeal-banner-content="appealBannerContent.fields"
-		/>
-		<donation-banner-container
-			v-if="donationEnabled"
-			:donation-banner-content="donationBannerContent.fields"
+		<deposit-incentive-banner
+			v-if="enableDepositExperiment"
 		/>
+		<template v-else>
+			<generic-promo-banner
+				v-show="isPromoEnabled"
+				:icon-key="promoBannerContent.iconKey"
+				:promo-banner-content="promoBannerContent"
+			/>
+			<appeal-banner-circular-container
+				v-if="appealEnabled"
+				:appeal-banner-content="appealBannerContent.fields"
+			/>
+			<donation-banner-container
+				v-if="donationEnabled"
+				:donation-banner-content="donationBannerContent.fields"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -27,13 +32,21 @@ import AppealBannerCircularContainer
 	from '@/components/WwwFrame/PromotionalBanner/Banners/AppealBanner/AppealBannerCircularContainer';
 import GenericPromoBanner from '@/components/WwwFrame/PromotionalBanner/Banners/GenericPromoBanner';
 import DonationBannerContainer from '@/components/WwwFrame/PromotionalBanner/Banners/Donation/DonationBannerContainer';
+import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
+import DepositIncentiveBanner from '@/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner';
 
 import { documentToHtmlString } from '~/@contentful/rich-text-html-renderer';
 
+const DEPOSIT_REWARD_EXP_KEY = 'deposit_incentive_banner';
+
 const bannerQuery = gql`query bannerQuery {
 	contentful {
 		entries(contentType: "uiSetting", contentKey: "ui-global-promo")
 	}
+	experiment(id: "deposit_incentive_banner") @client {
+		id
+		version
+	}
 }`;
 
 export default {
@@ -42,6 +55,7 @@ export default {
 		AppealBannerCircularContainer,
 		GenericPromoBanner,
 		DonationBannerContainer,
+		DepositIncentiveBanner,
 	},
 	props: {
 		hasPromoSession: {
@@ -58,6 +72,7 @@ export default {
 			appealEnabled: false,
 			donationEnabled: false,
 			customAppealEnabled: false,
+			enableDepositExperiment: false,
 		};
 	},
 	inject: ['apollo', 'cookieStore'],
@@ -145,5 +160,15 @@ export default {
 			}
 		}
 	},
+	created() {
+		const { version } = this.apollo.readFragment({
+			id: `Experiment:${DEPOSIT_REWARD_EXP_KEY}`,
+			fragment: experimentVersionFragment,
+		}) ?? {};
+
+		if (version === 'b') {
+			this.enableDepositExperiment = true;
+		}
+	}
 };
 </script>