Skip to content

Commit

Permalink
hide purchase controls on succeds/failure; styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcolarosa
marcolarosa committed May 29, 2024
1 parent 3238a28 commit c469f41
Showing 1 changed file with 56 additions and 54 deletions.
110 changes: 56 additions & 54 deletions src/vue-components/PricingComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@

<!--Checkout failed notification -->
<div
class="p-10 flex flex-row space-x-4 place-content-center bg-red-200 rounded-lg text-lg"
class="p-6 flex flex-row space-x-4 place-content-center bg-red-200 rounded-lg text-lg"
v-if="checkoutFailed"
>
<div class="flex flex-col place-content-center text-red-700">
<div class="flex flex-col place-content-center text-red-700 px-6">
<FontAwesomeIcon :icon="faCircleXmark" size="3x"></FontAwesomeIcon>
</div>
<div class="flex flex-col space-y-2">
Expand All @@ -23,12 +23,12 @@
</div>
</div>

<!-- Checkout complete successfully notification -->
<!-- Checkout completed successfully notification -->
<div
class="p-10 flex flex-row space-x-4 place-content-center bg-green-200 rounded-lg text-lg"
class="p-6 flex flex-row space-x-4 place-content-center bg-green-200 rounded-lg text-lg"
v-if="checkoutCompleted"
>
<div class="flex flex-col place-content-center text-green-700">
<div class="flex flex-col place-content-center text-green-700 px-6">
<FontAwesomeIcon :icon="faCircleCheck" size="3x"></FontAwesomeIcon>
</div>
<div class="flex flex-col space-y-2">
Expand All @@ -46,63 +46,65 @@
</div>

<!-- pricing pills and purchase controls -->
<div class="flex flex-row space-x-2">
<Product>
<template #title>General Credits</template>
<template #price>$5 USD</template>
<template #content>
<ul class="pl-10 list-disc">
<li>Text extraction credits for 50 pages</li>
<li>Enough credits to perform entity recognition on 50 pages</li>
<li>
Credits to use the assistant to interrogate the data<sup>*</sup>
<ul class="pl-4 list-disc">
<li>2,000,000 input tokens</li>
<li>16,000 output tokens</li>
</ul>
</li>
</ul>
</template>
<template #controls>
<el-button type="primary" @click="purchaseGeneralCredits">
Purchase General Credits
</el-button>
</template>
</Product>
<Product>
<template #title>Assistant Credits</template>
<template #price>$5 USD</template>
<template #content>
<ul class="pl-10 list-disc">
<li>
Credits to use the assistant to interrogate the data<sup>*</sup>
<ul class="pl-4 list-disc">
<li>4,000,000 input tokens</li>
<li>40,000 output tokens</li>
</ul>
</li>
</ul>
</template>
<template #controls>
<el-button type="primary" @click="purchaseAssistantCredits">
Purchase Assistant Credits
</el-button>
</template>
</Product>
<div v-if="!checkoutCompleted && !checkoutFailed">
<div class="flex flex-row space-x-2">
<Product>
<template #title>General Credits</template>
<template #price>$5 USD</template>
<template #content>
<ul class="pl-10 list-disc">
<li>Text extraction credits for 50 pages</li>
<li>Enough credits to perform entity recognition on 50 pages</li>
<li>
Credits to use the assistant to interrogate the data<sup>*</sup>
<ul class="pl-4 list-disc">
<li>2,000,000 input tokens</li>
<li>16,000 output tokens</li>
</ul>
</li>
</ul>
</template>
<template #controls>
<el-button type="primary" @click="purchaseGeneralCredits">
Purchase General Credits
</el-button>
</template>
</Product>
<Product>
<template #title>Assistant Credits</template>
<template #price>$5 USD</template>
<template #content>
<ul class="pl-10 list-disc">
<li>
Credits to use the assistant to interrogate the data<sup>*</sup>
<ul class="pl-4 list-disc">
<li>4,000,000 input tokens</li>
<li>40,000 output tokens</li>
</ul>
</li>
</ul>
</template>
<template #controls>
<el-button type="primary" @click="purchaseAssistantCredits">
Purchase Assistant Credits
</el-button>
</template>
</Product>
</div>
<div class="p-4">
<sup>*</sup>As a very approximate guide, 1,000,000 input tokens will let you
interrogate approximately 750k words. This is only a guide and can vary based on
what you choose to do with your data.
</div>
</div>
</div>
<div class="p-4">
<sup>*</sup>As a very approximate guide, 1,000,000 input tokens will let you interrogate
approximately 750k words. This is only a guide and can vary based on what you choose to do
with your data.
</div>
</template>

<script setup>
import Terms from "./Terms.vue";
import Product from "./Product.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faCircleInfo, faCircleXmark, faCircleCheck } from "@fortawesome/free-solid-svg-icons";
import { faCircleXmark, faCircleCheck } from "@fortawesome/free-solid-svg-icons";
import { onMounted, ref } from "vue";
import { initializePaddle } from "@paddle/paddle-js";
import { ElButton } from "element-plus";
Expand Down

0 comments on commit c469f41

Please sign in to comment.