diff --git a/.storybook/stories/DepositIncentiveBanner.stories.js b/.storybook/stories/DepositIncentiveBanner.stories.js
new file mode 100644
index 0000000000..e880f83f1b
--- /dev/null
+++ b/.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: `
+
+ `,
+});
+
+export const WithBalance = (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ mixins: [cookieStoreStoryMixin()],
+ components: {
+ DepositIncentiveBanner
+ },
+ provide: {
+ apollo: provideMockedApollo(userInfo),
+ },
+ template: `
+
+ `,
+});
diff --git a/src/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue b/src/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue
new file mode 100644
index 0000000000..e87529f040
--- /dev/null
+++ b/src/components/WwwFrame/PromotionalBanner/Banners/DepositIncentiveBanner.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/src/components/WwwFrame/PromotionalBanner/GlobalPromotionalBannerContentful.vue b/src/components/WwwFrame/PromotionalBanner/GlobalPromotionalBannerContentful.vue
index 76c423c6f6..0e183ff3bc 100644
--- a/src/components/WwwFrame/PromotionalBanner/GlobalPromotionalBannerContentful.vue
+++ b/src/components/WwwFrame/PromotionalBanner/GlobalPromotionalBannerContentful.vue
@@ -1,18 +1,23 @@
@@ -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;
+ }
+ }
};