diff --git a/server/vue-middleware.js b/server/vue-middleware.js
index 88366eac31..d07387403b 100644
--- a/server/vue-middleware.js
+++ b/server/vue-middleware.js
@@ -65,6 +65,11 @@ module.exports = function createMiddleware({
device
};
+ // Set the first user visit to the web
+ if (!req.session?.firstVisit) {
+ req.session.firstVisit = req.url;
+ }
+
// set html response headers
res.setHeader('Content-Type', 'text/html');
// Set strict cache-control headers for protected pages
diff --git a/src/assets/images/thanks-page/hi-five.svg b/src/assets/images/thanks-page/hi-five.svg
new file mode 100644
index 0000000000..bfb37c5822
--- /dev/null
+++ b/src/assets/images/thanks-page/hi-five.svg
@@ -0,0 +1,19 @@
+
diff --git a/src/assets/images/thanks-page/paper-plane.svg b/src/assets/images/thanks-page/paper-plane.svg
new file mode 100644
index 0000000000..b798181843
--- /dev/null
+++ b/src/assets/images/thanks-page/paper-plane.svg
@@ -0,0 +1,12 @@
+
diff --git a/src/components/Thanks/OptInExpVariation.vue b/src/components/Thanks/WhatIsNextTemplate.vue
similarity index 69%
rename from src/components/Thanks/OptInExpVariation.vue
rename to src/components/Thanks/WhatIsNextTemplate.vue
index 2c17444140..41ade3bd1e 100644
--- a/src/components/Thanks/OptInExpVariation.vue
+++ b/src/components/Thanks/WhatIsNextTemplate.vue
@@ -5,7 +5,7 @@
Success!
-
+
{{ headerCopy }}
@@ -43,67 +43,108 @@
-
- What to expect next:
-
-
-
-
-
-
- Want to hear how you’re impacting {{ borrowerName }}’s life and more ways to help people like them?
-
-
- Yes, keep me updated
-
-
- No, I don’t want to receive updates
-
-
-
-
- Go to my kiva
-
+
+
+
+ What to expect next:
+
+
-
+
+
+ {{ ctaCopy }}
+
+
+
+ Complete account
+
+
+
+
+ Yes, keep me updated
+
+
+ No, I don’t want to receive updates
+
+
+
+
+ Go to my kiva
+
+
+
+
+
+
+
+
+
+ We will keep you updated!
+
+
+
+
+
+ You will not receive updates
+
+
+
+
-
+
-
+
Create your account
-
+
Show previous loan details
-
+
Share
({})
},
+ optedIn: {
+ type: Boolean,
+ default: false
+ },
+ shortVersionEnabled: {
+ type: Boolean,
+ default: false
+ }
},
data() {
return {
@@ -275,7 +326,9 @@ export default {
openOrderConfirmation: false,
openShareModule: false,
mdiChevronDown,
- userOptedOut: false,
+ confirmOptedOut: false,
+ selectOption: false,
+ imageRequire,
};
},
computed: {
@@ -331,15 +384,29 @@ export default {
return `${beginning} ${this.loans[2].name}'s journey now`;
}
return `${beginning} ${this.loans.length - 2} others journey now`;
+ },
+ ctaCopy() {
+ if (this.optedIn && this.isGuest) {
+ return 'Complete your account to track your impact and manage repayments.';
+ }
+ if (!this.optedIn) {
+ return `Want to hear how you\’re impacting ${this.borrowerName}\’s life and more ways to help people like them?`;
+ }
+
+ return '';
}
},
methods: {
hash(loan) {
return loan?.image?.hash ?? '';
+ },
+ updateOptIn(value) {
+ this.selectOption = true;
+ this.openCreateAccount = true;
+ this.confirmOptedOut = !value;
}
},
created() {
- this.userOptedOut = this.$route.query.optOut === '1';
this.$kvTrackEvent('thanks', 'view', 'opt-in-request', this.isGuest ? 'guest' : 'signed-in');
},
mounted() {
@@ -404,6 +471,11 @@ export default {
@apply tw-bg-marigold-1;
}
+.secondary-container {
+ border-bottom-color: #ECE4D5;
+ @apply tw-bg-marigold-1 tw-w-full tw-px-3 md:tw-px-8 tw-border-b tw-z-1 tw-pb-5;
+}
+
@keyframes fadein {
0% {
opacity: 0;
diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue
index 45c1f73cb1..c575a9f0ec 100644
--- a/src/pages/Thanks/ThanksPage.vue
+++ b/src/pages/Thanks/ThanksPage.vue
@@ -130,7 +130,7 @@
/>
-
@@ -167,7 +169,8 @@ import { joinArray } from '@/util/joinArray';
import ChallengeHeader from '@/components/Thanks/ChallengeHeader';
import ShareChallenge from '@/components/Thanks/ShareChallenge';
import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
-import OptInExpVariation from '@/components/Thanks/OptInExpVariation';
+import WhatIsNextTemplate from '@/components/Thanks/WhatIsNextTemplate';
+import { trackExperimentVersion } from '@/util/experiment/experimentUtils';
import KvButton from '~/@kiva/kv-components/vue/KvButton';
import { fetchGoals } from '../../util/teamsUtil';
import teamsGoalsQuery from '../../graphql/query/teamsGoals.graphql';
@@ -175,6 +178,7 @@ import teamsGoalsQuery from '../../graphql/query/teamsGoals.graphql';
const hasLentBeforeCookie = 'kvu_lb';
const hasDepositBeforeCookie = 'kvu_db';
const CHALLENGE_HEADER_EXP = 'filters_challenge_header';
+const NEW_THANKS_PAGE_EXP = 'new_ty_page_minimal';
const getLoans = receipt => {
const loansResponse = receipt?.items?.values ?? [];
@@ -211,7 +215,7 @@ export default {
ThanksPageDonationOnly,
ChallengeHeader,
ShareChallenge,
- OptInExpVariation,
+ WhatIsNextTemplate,
},
inject: ['apollo', 'cookieStore'],
metaInfo() {
@@ -237,6 +241,8 @@ export default {
showChallengeHeader: false,
enableMayChallengeHeader: false,
showOldThanksPage: false,
+ optedIn: false,
+ enableShortVersion: false,
};
},
apollo: {
@@ -494,6 +500,21 @@ export default {
if (landedLoan?.geocode?.country?.isoCode === 'US') {
this.showOldThanksPage = true;
}
+
+ // New Thanks Page Experiment
+ const isUsaLoan = false;
+ if (!isUsaLoan) {
+ const { version } = trackExperimentVersion(
+ this.apollo,
+ this.$kvTrackEvent,
+ 'thanks',
+ NEW_THANKS_PAGE_EXP,
+ 'EXP-MP-267-Jun2024',
+ );
+ if (version === 'b') {
+ this.enableShortVersion = true;
+ }
+ }
},
methods: {
createGuestAccount() {