diff --git a/src/components/Thanks/ThanksPageDonationOnly.vue b/src/components/Thanks/ThanksPageDonationOnly.vue index 33deabbdaf..9af4ffac02 100644 --- a/src/components/Thanks/ThanksPageDonationOnly.vue +++ b/src/components/Thanks/ThanksPageDonationOnly.vue @@ -1,9 +1,34 @@ @@ -120,6 +159,9 @@ import socialSharingMixin from '@/plugins/social-sharing-mixin'; import KvIcon from '@/components/Kv/KvIcon'; import { getFullUrl } from '@/util/urlUtils'; import { gql } from '@apollo/client'; +import KvFrequentlyAskedQuestions from '@/components/Kv/KvFrequentlyAskedQuestions'; +import { formatContentGroupsFlat } from '@/util/contentfulUtils'; +import smoothScrollMixin from '@/plugins/smooth-scroll-mixin'; import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon'; import KvGrid from '~/@kiva/kv-components/vue/KvGrid'; import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer'; @@ -138,12 +180,34 @@ const userQuery = gql`query userQuery { export default { name: 'ThanksPageDonationOnly', - inject: ['apollo'], + inject: ['apollo', 'cookieStore'], + apollo: { + query: gql`query OnlyDonationThanksPageContentful { + contentful { + entries(contentType: "contentGroup", contentKey: "thanks-page-only-donation") + } + general { + doubleDonationEnabled: featureSetting(key: "doubledonation.enabled") { + key + value + description + } + } + } + `, + preFetch: true, + result({ data }) { + const contentfulData = data?.contentful?.entries?.items ?? null; + this.contentfulContent = contentfulData ? formatContentGroupsFlat(contentfulData) : {}; + this.doubleDonationEnabled = data?.general?.doubleDonationEnabled?.value === 'true' ?? false; + } + }, components: { KvIcon, KvMaterialIcon, KvPageContainer, - KvGrid + KvGrid, + KvFrequentlyAskedQuestions }, props: { monthlyDonationAmount: { @@ -151,7 +215,7 @@ export default { default: '' } }, - mixins: [socialSharingMixin], + mixins: [socialSharingMixin, smoothScrollMixin], data() { return { lender: null, @@ -165,8 +229,23 @@ export default { isGuest: false, message: '', utmCampaign: 'social_share_checkout', + contentfulContent: null, + doubleDonationEnabled: false, }; }, + mounted() { + if (this.doubleDonationEnabled) { + const doubleDonationScript = document.createElement('script'); + doubleDonationScript.setAttribute('src', 'https://doublethedonation.com/api/js/ddplugin.js'); + document.head.appendChild(doubleDonationScript); + + window.DDCONF = { API_KEY: 'ODBlMWJiZGItZTY4' }; + if (window.doublethedonation) { + // eslint-disable-next-line no-undef + doublethedonation.plugin.load_streamlined_input(); + } + } + }, computed: { shareMessage() { return this.message.trim(); @@ -195,7 +274,12 @@ export default { if (this.lender?.public && this.lender?.inviterName) return this.lender?.inviterName; return 'anonymous'; }, - + frequentlyAskedQuestionsHeadline() { + return this.contentfulContent?.frequentlyAskedQuestions?.title ?? null; + }, + frequentlyAskedQuestions() { + return this.contentfulContent?.frequentlyAskedQuestions?.contents ?? null; + }, }, methods: { gatherCurrentUserData() { @@ -205,6 +289,11 @@ export default { this.isGuest = !data?.my?.userAccount; this.lender = data?.my?.userAccount ?? {}; }); + }, + scrollToSection(sectionId) { + const elementToScrollTo = document.querySelector(sectionId); + const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0; + this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 }); } }, created() { @@ -220,6 +309,8 @@ export default {