diff --git a/.storybook/stories/NotifyMe.stories.js b/.storybook/stories/NotifyMe.stories.js new file mode 100644 index 0000000000..a6217695a9 --- /dev/null +++ b/.storybook/stories/NotifyMe.stories.js @@ -0,0 +1,34 @@ +import NotifyMe from '@/components/Thanks/NotifyMe'; + +export default { + title: 'Components/Notify Me', + component: NotifyMe, +}; + +const story = (args = {}) => { + const template = (_args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { NotifyMe }, + template: '', + }) + template.args = args; + return template; +}; + +const future = new Date(); +future.setDate(future.getDate() + 2); + +const goal = { + endDate: future.toISOString(), + targets: { + totalCount: 2, + values: [ + { status: 'COMPLETE' }, + { status: 'IN_PROGRESS' }, + ] + } +} + +export const Default = story({ goal }); + +export const Team = story({ goal, teamPublicId: 'aplus' }); diff --git a/src/components/Thanks/NotifyMe.vue b/src/components/Thanks/NotifyMe.vue index b659678030..47de293838 100644 --- a/src/components/Thanks/NotifyMe.vue +++ b/src/components/Thanks/NotifyMe.vue @@ -27,7 +27,12 @@

-

Challenge {{ percentageFunded }}% complete

+

+ Challenge + + {{ percentageFunded }}% complete + +

@@ -68,7 +73,6 @@ import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon'; export default { name: 'NotifyMe', - inject: ['apollo'], mixins: [teamGoalInfo], components: { KvProgressCircle, @@ -82,7 +86,11 @@ export default { email: { type: String, default: '', - } + }, + teamPublicId: { + type: String, + default: '', + }, }, data() { return { @@ -105,7 +113,10 @@ export default { iterableListIdString() { const isProd = window.location.hostname === 'www.kiva.org'; return isProd ? '0daedc50-6b66-44de-898d-fc7365f64da5' : '84945c52-fd49-4ae8-9ab6-4daa11eb6052'; - } + }, + teamChallengePath() { + return this.teamPublicId ? `/team/challenge/${this.teamPublicId}` : '/teams'; + }, }, methods: { async notify() { diff --git a/src/graphql/query/thanksPage.graphql b/src/graphql/query/thanksPage.graphql index 852a58e370..629880d0a6 100644 --- a/src/graphql/query/thanksPage.graphql +++ b/src/graphql/query/thanksPage.graphql @@ -87,9 +87,9 @@ query checkoutReceipt($checkoutId: Int!, $visitorId: String) { } team { id + teamPublicId name } - } } } diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue index 83f173d64c..401041a0dc 100644 --- a/src/pages/Thanks/ThanksPage.vue +++ b/src/pages/Thanks/ThanksPage.vue @@ -7,7 +7,7 @@