Skip to content

Commit

Permalink
added pricing tiers
Browse files Browse the repository at this point in the history
  • Loading branch information
athi committed Jan 10, 2025
1 parent 202df8e commit 44e4804
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 62 deletions.
13 changes: 1 addition & 12 deletions components/ChatVisualization/ChatVisualization.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,6 @@
<v-row>
<Chat :attachments="attachments" :chat="chat" @setEgo="setEgo" />
</v-row>

<v-row justify="center">
<PdfDownload
:attachments="attachments"
:chat="chat"
:currency="currency"
:ego="ego"
:price="price"
:isValidSubscription="isValidSubscription"
/>
</v-row>
</v-col>
</template>

Expand All @@ -41,7 +30,7 @@ export default {
return {
// its possible that the first person did not write any message at all
ego: this.chat.messagesPerPerson[0]?.name,
price: 4.99,
price: 7.99,
currency: "EUR"
};
},
Expand Down
179 changes: 130 additions & 49 deletions components/ChatVisualization/PdfDownloadPopup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,59 +38,98 @@
<!-- Download dialog -->
<v-dialog v-model="showDownloadPopup" width="550">
<template #activator="{ on, attrs }">
<v-row class="pa-0 ma-0" justify="center">

<!-- Free Preview PDF button -->
<v-col
class="pa-0 ma-0"
v-if="!isValidSubscription"
>
<v-btn elevation="10" @click="downloadSample">
<v-icon class="mr-1">mdi-download</v-icon>
<span v-html="$t('downloadFreePreviewPDF')"></span>
</v-btn>
<v-col class="mt-2">
<v-row align="center" justify="center">
<b style="color: green">{{ 0 + ' ' + currency }}</b>
</v-row>
<!-- Pricing Section -->
<div class="pricing-section mt-10">
<div class="text-h2 font-weight-bold pb-5 ">{{ $t("pricingTitle") }}</div>
<div class="text-subtitle-1 ">{{ $t("pricingSubtitle") }}</div>
<v-row justify="center" align="center" class="py-5">
<!-- Free Tier -->
<v-col cols="12" sm="4">
<div class="pricing-card text-center py-5 px-4">
<div class="text-h3 font-weight-bold title">{{ $t("freeTierTitle") }}</div>
<div class="text-body-1 py-3 subtitle">{{ $t("freeTierDescription") }}</div>
<v-btn
color="primary"
outlined
class="mt-3 mb-4"
@click="handleFreePdfClick"
>
<v-icon class="mr-1">mdi-download</v-icon>
<span v-html="$t('downloadFreePreviewPDF')"></span>
</v-btn>
<div class="price-description">
<b style="color: green">{{ 0 + ' ' + currency }}</b>
</div>
</div>
</v-col>
</v-col>

<!-- Full PDF button -->
<v-col class="pa-0 ma-0">
<v-btn
class="white--text btn-color"
dark
elevation="10"
style="max-width: 100%"
v-bind="attrs"
@click="gtagEvent('full_pdf_pressed', GTAG_PAYMENT)"
v-on="on"
>
<v-icon class="mr-1">mdi-download</v-icon>
<span v-html="$t('downloadFullChatPDF')"></span>
</v-btn>

<v-col
class="mt-2"
v-if="!isValidSubscription"
>
<v-row align="center" justify="center">
<b style="color: green">{{ price + ' ' + currency }}</b>
<span
class="px-1 ml-2"
style="color: white; background: red; border-radius: 5px"
>-66%</span>
</v-row>
<v-row align="center" justify="center">
<s style="color: grey">{{ 15 + ' ' + currency }}</s>
</v-row>

<!-- One-Time Payment -->
<v-col cols="12" sm="4">
<div class="pricing-card text-center py-5 px-4">
<div class="text-h3 font-weight-bold title">{{ $t("oneTimeTitle") }}</div>
<div class="text-body-1 py-3 subtitle">{{ $t("oneTimeDescription") }}</div>
<v-btn
color="success"
class="mt-3 mb-4"
v-bind="attrs"
@click="gtagEvent('full_pdf_pressed', GTAG_PAYMENT)"
v-on="on"
>
<v-icon class="mr-1">mdi-download</v-icon>
<span v-html="$t('downloadFullChatPDF')"></span>
</v-btn>
<div class="price-description">
<v-row align="center" justify="center">
<b style="color: green">{{ price + ' ' + currency }}</b>
<span
class="px-1 ml-2"
style="color: white; background: red; border-radius: 5px"
>
-50%
</span>
</v-row>
<v-row align="center" justify="center">
<s style="color: grey">{{ 15 + ' ' + currency }}</s>
</v-row>
</div>
</div>
</v-col>
</v-col>

</v-row>
<!-- Monthly Subscription -->
<v-col cols="12" sm="4">
<div class="pricing-card text-center py-5 px-4">
<div class="text-h3 font-weight-bold title">{{ $t("subscriptionTitle") }}</div>
<div class="text-body-1 py-3 subtitle">{{ $t("subscriptionDescription") }}</div>
<v-btn
color="secondary"
class="mt-3 mb-4"
elevation="10"
style="max-width: 100%"
v-bind="attrs"
@click="gtagEvent('subscription_pressed', GTAG_PAYMENT)"
v-on="on"
>
{{ $t("chooseSubscription") }}
</v-btn>
<div class="price-description">
<v-row align="center" justify="center">
<b style="color: green">{{ price - 3 + ' ' + currency }}</b>
<span
class="px-1 ml-2"
style="color: white; background: red; border-radius: 5px"
>
-80%
</span>
</v-row>
<v-row align="center" justify="center">
<s style="color: grey">{{ 24.95 + ' ' + currency }}</s>
</v-row>
</div>
</div>
</v-col>
</v-row>
</div>
</template>

<v-card>
<!-- Popup title + subtitle -->
<v-card-title class="headline cyan" style="word-break: normal">
Expand Down Expand Up @@ -148,6 +187,7 @@
</v-dialog>
</div>
</template>

<!-- eslint-enable vue/no-v-html -->
<script>
import { GTAG_PAYMENT, GTAG_PDF, gtagEvent } from "~/utils/gtagValues";
Expand Down Expand Up @@ -177,6 +217,10 @@ export default {
};
},
methods: {
handleFreePdfClick() {
this.downloadSample();
this.gtagEvent('free_pdf_pressed', GTAG_PAYMENT);
},
downloadFull() {
gtagEvent("full_download", GTAG_PDF, 3);
this.download(false);
Expand Down Expand Up @@ -244,3 +288,40 @@ export default {
}
};
</script>

<style scoped>
.pricing-card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%; /* Ensures equal height for all cards */
text-align: center;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-height: 400px; /* Adjust height as needed */
min-height: 350px; /* Ensures equal card height */
}

.price-description {
margin-top: 10px;
}
.subtitle {
min-height: 100px; /* Ensures equal height for subtitles */
display: flex;
align-items: center;
text-align: center;
}

.title {
min-height: 100px; /* Ensures equal height for subtitles */
display: flex;
align-items: center;
text-align: center;
}



</style>
18 changes: 17 additions & 1 deletion utils/translations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,23 @@ export const messages = {
downloadNow: "Download now",
subscriptionHint: "You can also get a <span>subscription</span> for unlimited PDFs here",
openSubscriptionPage: "Open <span>Subscription Page</span>",
closeButton: "Close"
closeButton: "Close",
// subscriptions
pricingTitle: "Choose Your Plan",
pricingSubtitle: "Select a plan that fits your needs.",
freeTierTitle: "Free Tier",
freeTierDescription: "Limited results and one-time preview download.",
chooseFreeTier: "Choose Free",
oneTimeTitle: "One-Time Payment",
oneTimeDescription: "Download a full PDF report of your chat. For just 7,99 Euro.",
oneTimePrice: "€9,99",
chooseOneTime: "Buy Now",
subscriptionTitle: "Monthly Subscription",
subscriptionDescription: "Access unlimited results and updates every month. First month for €4,99, then €9,99 per month.",
subscriptionPriceFirstMonth: "€4,99 First Month",
subscriptionPriceAfter: "€9,99/month",
chooseSubscription: "Subscribe Now",
then: "then",
},
de: {
titleGoogle: "WhatsAnalyze - The WhatsApp Chat Analyzer",
Expand Down

0 comments on commit 44e4804

Please sign in to comment.