Skip to content

Commit

Permalink
feat: shorter version and exp tracking
Browse files Browse the repository at this point in the history
  • Loading branch information
Christian Bedon committed Jun 12, 2024
1 parent 0912049 commit bda7120
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 72 deletions.
5 changes: 5 additions & 0 deletions server/vue-middleware.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
19 changes: 19 additions & 0 deletions src/assets/images/thanks-page/hi-five.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/assets/images/thanks-page/paper-plane.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
210 changes: 141 additions & 69 deletions src/components/Thanks/OptInExpVariation.vue → src/components/Thanks/WhatIsNextTemplate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<h1 class="tw-text-white">
Success!
</h1>
<p class="tw-text-subhead tw-text-white tw-mb-2 tw-px-3">
<p class="tw-text-subhead tw-text-white tw-mb-2 tw-px-3 md:tw-px-8">
{{ headerCopy }}
</p>

Expand Down Expand Up @@ -43,75 +43,116 @@
<div class="tw-relative tw-flex tw-justify-center">
<div class="tw-bg-marigold-1 tw-absolute oval"></div>
<div
class="tw-bg-marigold-1 tw-w-full tw-px-3 tw-border-b tw-border-b-secondary tw-z-1"
class="secondary-container"
>
<h4 class="tw-text-center tw-pt-1">
What to expect next:
</h4>
<opt-in-steps
class="tw-mb-5"
:weeks-to-repay="weeksToRepay"
/>
<div class="tw-flex tw-flex-col tw-gap-2 tw-pb-3">
<template v-if="userOptedOut && isGuest">
<h3 class="tw-text-center">
<!-- eslint-disable-next-line max-len -->
Want to hear how you’re impacting {{ borrowerName }}’s life and more ways to help people like them?
</h3>
<kv-button
v-kv-track-event="[
'thanks',
'click',
'accept-opt-in-request',
]"
>
Yes, keep me updated
</kv-button>
<kv-button
variant="ghost"
class="ghost-button"
v-kv-track-event="[
'thanks',
'click',
'reject-opt-in-request',
]"
>
No, I don’t want to receive updates
</kv-button>
</template>
<template v-else>
<kv-button
to="/portfolio"
v-kv-track-event="[
'thanks',
'click',
'go-to-my-kiva',
]"
>
Go to my kiva
</kv-button>
<template v-if="!selectOption">
<template v-if="!shortVersionEnabled">
<h4 class="tw-text-center tw-pt-1">
What to expect next:
</h4>
<opt-in-steps
class="tw-mb-5"
:weeks-to-repay="weeksToRepay"
/>
</template>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-pb-3">
<h3 class="tw-text-center" v-if="ctaCopy">
{{ ctaCopy }}
</h3>
<template v-if="isGuest && optedIn">
<kv-button
to="/portfolio"
v-kv-track-event="[
'thanks',
'click',
'complete-account',
]"
>
Complete account
</kv-button>
</template>
<template v-else-if="!optedIn">
<kv-button
@click="updateOptIn(true)"
v-kv-track-event="[
'thanks',
'click',
'accept-opt-in-request',
]"
>
Yes, keep me updated
</kv-button>
<kv-button
@click="updateOptIn(false)"
variant="ghost"
class="ghost-button"
v-kv-track-event="[
'thanks',
'click',
'reject-opt-in-request',
]"
>
No, I don’t want to receive updates
</kv-button>
</template>
<template v-else>
<kv-button
to="/portfolio"
v-kv-track-event="[
'thanks',
'click',
'go-to-my-kiva',
]"
>
Go to my kiva
</kv-button>
</template>
</div>
</template>
<template v-else>
<div class="tw-z-5 tw-flex tw-flex-col tw-items-center tw-mt-2.5">
<template v-if="confirmOptedOut">
<img
:src="imageRequire(`./hi-five.svg`)"
class="tw-w-7 tw-h-7 tw-mb-1"
alt="Hi five icon"
>
<h3 class="tw-text-center">
We will keep you updated!
</h3>
</template>
<template v-else>
<img
:src="imageRequire(`./paper-plane.svg`)"
class="tw-w-7 tw-h-7 tw-mb-1"
alt="Paper plane icon"
>
<h3 class="tw-text-center">
You will not receive updates
</h3>
</template>
</div>
</template>
</div>
</div>
<div class="tw-py-5 tw-px-3">
<div class="tw-py-5 tw-px-3 md:tw-px-8">
<div class="tw-mb-2">
<!-- eslint-disable-next-line max-len -->
<div
v-if="userOptedOut && isGuest"
v-if="!optedIn && isGuest"
class="
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
@click="openCreateAccount = !openCreateAccount"
v-kv-track-event="[
'thanks',
'click',
'open-account-creation-drawer',
]"
>
<p>
<p class="tw-font-medium">
Create your account
</p>
<kv-material-icon
Expand Down Expand Up @@ -140,18 +181,18 @@
<!-- eslint-disable-next-line max-len -->
<div
class="
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
@click="openOrderConfirmation = !openOrderConfirmation"
v-kv-track-event="[
'thanks',
'click',
'open-order-confirmation-drawer',
]"
>
<p>
<p class="tw-font-medium">
Show previous loan details
</p>
<kv-material-icon
Expand All @@ -176,18 +217,18 @@
<div>
<div
class="
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
tw-w-full tw-border tw-rounded
tw-flex tw-justify-between tw-cursor-pointer
tw-py-2 tw-px-3
"
@click="openShareModule = !openShareModule"
v-kv-track-event="[
'thanks',
'click',
'open-share-drawer',
]"
>
<p>
<p class="tw-font-medium">
Share
</p>
<kv-material-icon
Expand Down Expand Up @@ -229,8 +270,10 @@ import confetti from 'canvas-confetti';
import KvButton from '~/@kiva/kv-components/vue/KvButton';
import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
const imageRequire = require.context('@/assets/images/thanks-page/', true);
export default {
name: 'OptInExpVariation',
name: 'WhatIsNextTemplate',
components: {
OptInSteps,
KvExpandable,
Expand All @@ -240,7 +283,7 @@ export default {
GuestAccountCreation,
AnimatedSparkles,
KvButton,
KvMaterialIcon
KvMaterialIcon,
},
inject: ['apollo', 'cookieStore'],
props: {
Expand Down Expand Up @@ -268,14 +311,24 @@ export default {
type: Object,
default: () => ({})
},
optedIn: {
type: Boolean,
default: false
},
shortVersionEnabled: {
type: Boolean,
default: false
}
},
data() {
return {
openCreateAccount: false,
openOrderConfirmation: false,
openShareModule: false,
mdiChevronDown,
userOptedOut: false,
confirmOptedOut: false,
selectOption: false,
imageRequire,
};
},
computed: {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit bda7120

Please sign in to comment.