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; + } + } };