Skip to content

Commit

Permalink
Merge pull request #154 from mowolf/Download_Buttons
Browse files Browse the repository at this point in the history 
Download buttons
  • Loading branch information
@PKehnel
PKehnel authored Mar 5, 2021
2 parents fb95389 + 351748d commit d111e4f
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 81 deletions.
23 changes: 19 additions & 4 deletions components/ChatVisualization/ChatVisualization.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<v-row>
<ChatVisualizationChat :chat="chat" :attachments="attachments" />
</v-row>
<v-row justify="center">
<v-row justify="center" id="payButton">
<div class="cta my-md-4">
<div class="text-h3 font-weight-bold pb-4">
We generate your chat PDF
Expand Down Expand Up @@ -33,11 +33,27 @@
<v-icon>mdi-download</v-icon>
Download full chat PDF
</v-btn>
<div
class="link"
v-bind="attrs"
v-on.prevent="on"
@click="
$gtag.event('download-preview-popup-clicked', {
event_category: 'download',
event_label: 'popup-clicked',
value: '0.5',
})
"
>
Retrieve a free preview of your chat
</div>
</template>
<v-card>
<v-card-title class="headline cyan" style="word-break: normal">
<div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
<span>Buy us a ☕️ and get your results for free!!!</span>
<div class="text-h4 font-weight-bold">
This feature is coming on the 03/10/21 !!
</div>
<span>You can still buy us a ☕️ if you like!!!</span>
</v-card-title>

<v-card-text class="pt-3">
Expand Down Expand Up @@ -65,7 +81,6 @@
</v-card-actions>
</v-card>
</v-dialog>
<div class="link">Retrieve a free preview of your chat</div>
</div>
</v-row>
</v-col>
Expand Down
181 changes: 104 additions & 77 deletions components/DownloadPopup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,82 @@
<template>
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red lighten-2"
dark
v-bind="attrs"
v-on="on"
@click="
$gtag.event('donation-popup-clicked', {
event_category: 'donation',
event_label: 'popup-clicked',
value: '1',
})
"
>
<v-icon>mdi-download</v-icon>Download your Results now!
</v-btn>
</template>
<v-col class="my-4 mb-16">
<v-row justify="center">
<div class="cta my-md-4">
<div class="text-h3 font-weight-bold pb-4">
Download all Graphs at once!
</div>
<div class="text-body-1">Currently for free! <br /></div>
<v-dialog v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="#07bc4c"
dark
v-bind="attrs"
v-on="on"
@click="download"
>
<v-icon>mdi-download</v-icon>Download your Results now!
</v-btn>
</template>

<v-card>
<v-card-title class="headline cyan" style="word-break: normal">
<div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
<span>Buy us a ☕️ and get your results for free!!!</span>
</v-card-title>
<v-card>
<v-card-title class="headline cyan" style="word-break: normal">
<div class="text-h4 font-weight-bold">Did we make you go 🥳?</div>
<span>Buy us a ☕️ and get your results for free!!!</span>
</v-card-title>

<v-card-text class="pt-3">
You will get all results as an image exactly as presented on your
device. Generating may take a while.
</v-card-text>
<v-card-text class="pt-3">
You will get all results as an image exactly as presented on your
device. Generating may take a while.
</v-card-text>

<v-row align="center" justify="center" class="mb-3" @click="download">
<form
action="https://www.paypal.com/donate"
method="post"
target="_blank"
>
<input
type="hidden"
name="hosted_button_id"
value="EPCYG8WEF289G"
/>
<input
type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
border="0"
name="submit"
title="PayPal - The safer, easier way to pay online!"
alt="Donate with PayPal button"
/>
<img
alt=""
border="0"
src="https://www.paypal.com/en_US/i/scr/pixel.gif"
width="1"
height="1"
/>
</form>
</v-row>
<v-divider></v-divider>
<v-row
align="center"
justify="center"
class="mb-3"
@click="paypalButtonPressed"
>
<form
action="https://www.paypal.com/donate"
method="post"
target="_blank"
>
<input
type="hidden"
name="hosted_button_id"
value="EPCYG8WEF289G"
/>
<input
type="image"
src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
border="0"
name="submit"
title="PayPal - The safer, easier way to pay online!"
alt="Donate with PayPal button"
/>
<img
alt=""
border="0"
src="https://www.paypal.com/en_US/i/scr/pixel.gif"
width="1"
height="1"
/>
</form>
</v-row>
<v-divider></v-divider>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="red darken-1" text @click="dialog = false">
Close
</v-btn>
<v-btn color="primary" text :loading="true"> Download </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="red darken-1" text @click="dialog = false">
Close
</v-btn>
<v-btn color="primary" text :loading="true"> Download </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-row>
</v-col>
</template>

<script>
Expand All @@ -88,9 +95,10 @@ export default {
async download() {
this.$gtag.event("donation-popup-clicked", {
event_category: "donation",
event_label: "paypal-clicked",
event_label: "popup-clicked",
value: "1",
});
let canvas = html2canvas(this.results.$el, {
scrollX: 0,
scrollY: -window.scrollY,
Expand All @@ -99,18 +107,37 @@ export default {
.slice(0, 2)
.map((person) => person.name)
.join("-");
let timeout = new Promise((res) => setTimeout(() => res(), 20000));
timeout.then(() => {
canvas.then((canvas) => {
downloadBase64File(
canvas.toDataURL(),
"whatsanlazye-results-" + names + ".png"
);
});
canvas.then((canvas) => {
downloadBase64File(
canvas.toDataURL(),
"whatsanlazye-results-" + names + ".png"
);
});
},
paypalButtonPressed() {
this.$gtag.event("donation-popup-clicked", {
event_category: "donation",
event_label: "paypal-clicked",
value: "1",
});
},
},
};
</script>

<style scoped></style>
<style lang="scss" scoped>
.cta {
text-align: center;
background: $c-white;
padding: 2em;
}
.link {
border: none;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
</style>

0 comments on commit d111e4f

Please sign in to comment.