From 24d5d1ad7667dd57d6cd9d581ba10282a3decb78 Mon Sep 17 00:00:00 2001
From: Marco La Rosa <m@lr.id.au>
Date: Thu, 11 Jul 2024 14:39:11 +1000
Subject: [PATCH] refactor; add text extraction and entity recognition products

---
 src/pricing.md                          |  45 +---------
 src/vue-components/PricingComponent.vue | 113 +++++++++++++++++++-----
 src/vue-components/Product.vue          |   4 +-
 src/vue-components/Terms.vue            |  12 ++-
 4 files changed, 99 insertions(+), 75 deletions(-)

diff --git a/src/pricing.md b/src/pricing.md
index 99a57e6..85d06b3 100644
--- a/src/pricing.md
+++ b/src/pricing.md
@@ -13,52 +13,11 @@ layout: home
     <div class="text-2xl">
         Describo Cloud
     </div>
-    <Terms/>
-    <div class="flex flex-row space-x-2">
-        <Product class="flex-grow">
-            <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>
-        </Product>
-        <Product class="flex-grow">
-            <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>
-        </Product>
-    </div>
-    <div class="p-2">
-        <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>
-
+    <PricingComponent :display-only="true"/>
 </div>
 
 <FooterComponent class="mt-6"/>
 
 <script setup>
-    import Terms from "./vue-components/Terms.vue";
-    import Product from './vue-components/Product.vue'
+    import PricingComponent from './vue-components/PricingComponent.vue'
 </script>
diff --git a/src/vue-components/PricingComponent.vue b/src/vue-components/PricingComponent.vue
index 1f0ce46..a56fe5e 100644
--- a/src/vue-components/PricingComponent.vue
+++ b/src/vue-components/PricingComponent.vue
@@ -6,7 +6,7 @@
         <!--Checkout failed notification  -->
         <div
             class="p-6 flex flex-row space-x-4 place-content-center bg-red-200 rounded-lg text-lg"
-            v-if="checkoutFailed"
+            v-if="!props.displayOnly && checkoutFailed"
         >
             <div class="flex flex-col place-content-center text-red-700 px-6">
                 <FontAwesomeIcon :icon="faCircleXmark" size="3x"></FontAwesomeIcon>
@@ -26,7 +26,7 @@
         <!-- Checkout completed successfully notification  -->
         <div
             class="p-6 flex flex-row space-x-4 place-content-center bg-green-200 rounded-lg text-lg"
-            v-if="checkoutCompleted"
+            v-if="!props.displayOnly && checkoutCompleted"
         >
             <div class="flex flex-col place-content-center text-green-700 px-6">
                 <FontAwesomeIcon :icon="faCircleCheck" size="3x"></FontAwesomeIcon>
@@ -46,9 +46,9 @@
         </div>
 
         <!-- pricing pills and purchase controls -->
-        <div v-if="!checkoutCompleted && !checkoutFailed">
+        <div v-if="!checkoutCompleted && !checkoutFailed" class="flex flex-col space-y-2">
             <div class="flex flex-row space-x-2">
-                <Product>
+                <Product class="w-1/2">
                     <template #title>General Credits</template>
                     <template #price>$5 USD</template>
                     <template #content>
@@ -64,13 +64,13 @@
                             </li>
                         </ul>
                     </template>
-                    <template #controls>
-                        <el-button type="primary" @click="purchaseGeneralCredits">
-                            Purchase General Credits
+                    <template #controls v-if="!props.displayOnly">
+                        <el-button type="primary" @click="purchaseCredits('general')">
+                            Purchase Credits
                         </el-button>
                     </template>
                 </Product>
-                <Product>
+                <Product class="w-1/2">
                     <template #title>Assistant Credits</template>
                     <template #price>$5 USD</template>
                     <template #content>
@@ -84,9 +84,43 @@
                             </li>
                         </ul>
                     </template>
-                    <template #controls>
-                        <el-button type="primary" @click="purchaseAssistantCredits">
-                            Purchase Assistant Credits
+                    <template #controls v-if="!props.displayOnly">
+                        <el-button type="primary" @click="purchaseCredits('assistant')">
+                            Purchase Credits
+                        </el-button>
+                    </template>
+                </Product>
+            </div>
+            <div class="flex flex-row space-x-2">
+                <Product class="w-1/2">
+                    <template #title>Entity Recognition Credits</template>
+                    <template #price>$5 USD</template>
+                    <template #content>
+                        <ul class="pl-4 list-disc">
+                            <li>
+                                Enough credits to process about 200 pages of A4 text using a
+                                standard sized font
+                            </li>
+                        </ul>
+                    </template>
+                    <template #controls v-if="!props.displayOnly">
+                        <el-button type="primary" @click="purchaseCredits('entityRecognition')">
+                            Purchase Credits
+                        </el-button>
+                    </template>
+                </Product>
+
+                <Product class="w-1/2">
+                    <template #title>Text Extraction Credits</template>
+                    <template #price>$5 USD</template>
+                    <template #content>
+                        <ul class="pl-4 list-disc">
+                            <li>Text extraction credits to process 200 images</li>
+                        </ul>
+                    </template>
+                    <template #controls v-if="!props.displayOnly">
+                        <el-button type="primary" @click="purchaseCredits('textExtraction')">
+                            Purchase Credits
                         </el-button>
                     </template>
                 </Product>
@@ -109,6 +143,10 @@ import { onMounted, ref } from "vue";
 import { initializePaddle } from "@paddle/paddle-js";
 import { ElButton } from "element-plus";
 
+const props = defineProps({
+    displayOnly: { type: Boolean, required: true },
+});
+
 const pricing = {
     development: {
         assistant: {
@@ -119,6 +157,14 @@ const pricing = {
             priceId: "pri_01htbs2ws69sfb2ffsc6ja1mwc",
             quantity: 1,
         },
+        textExtraction: {
+            priceId: "pri_01j2fze6r2ecy86ygfhdfbbnjr",
+            quantity: 1,
+        },
+        entityRecognition: {
+            priceId: "pri_01j2fzfef6s0hqdxc40q4xnn8q",
+            quantity: 1,
+        },
     },
     production: {
         assistant: {
@@ -129,6 +175,14 @@ const pricing = {
             priceId: "pri_01htc281zscjy7z0zgbcknps6q",
             quantity: 1,
         },
+        textExtraction: {
+            priceId: "pri_01j2fz8vd990v0g44gp90nw7rh",
+            quantity: 1,
+        },
+        entityRecognition: {
+            priceId: "pri_01j2fzc28gk5ry77npqa3b8ea1",
+            quantity: 1,
+        },
     },
 };
 
@@ -139,6 +193,8 @@ let items;
 let paddle;
 
 onMounted(async () => {
+    if (props.displayOnly) return;
+
     const params = new URLSearchParams(window.location.search);
     let environment;
     try {
@@ -192,25 +248,36 @@ onMounted(async () => {
     paddle = await initializePaddle(config);
 });
 
-function purchaseGeneralCredits() {
+function purchaseCredits(type) {
     checkoutCompleted.value = false;
     checkoutFailed.value = false;
     paddle.Checkout.open({
-        items: [items.general],
+        items: [items[type]],
         customer: {
             email,
         },
     });
 }
 
-function purchaseAssistantCredits() {
-    checkoutCompleted.value = false;
-    checkoutFailed.value = false;
-    paddle.Checkout.open({
-        items: [items.assistant],
-        customer: {
-            email,
-        },
-    });
-}
+// function purchaseGeneralCredits() {
+//     checkoutCompleted.value = false;
+//     checkoutFailed.value = false;
+//     paddle.Checkout.open({
+//         items: [items.general],
+//         customer: {
+//             email,
+//         },
+//     });
+// }
+
+// function purchaseAssistantCredits() {
+//     checkoutCompleted.value = false;
+//     checkoutFailed.value = false;
+//     paddle.Checkout.open({
+//         items: [items.assistant],
+//         customer: {
+//             email,
+//         },
+//     });
+// }
 </script>
diff --git a/src/vue-components/Product.vue b/src/vue-components/Product.vue
index 0dceffa..c38869c 100644
--- a/src/vue-components/Product.vue
+++ b/src/vue-components/Product.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="flex flex-row space-x-2 p-5 bg-slate-200 rounded-lg flex-grow">
-        <div class="flex flex-col space-y-10 place-content-between">
+    <div class="flex flex-row space-x-2 p-5 bg-slate-200 rounded flex-grow">
+        <div class="flex flex-col space-y-10 flex-grow place-content-between">
             <div class="flex flex-col space-y-2">
                 <div><slot name="title"></slot></div>
                 <div class="text-3xl"><slot name="price"></slot></div>
diff --git a/src/vue-components/Terms.vue b/src/vue-components/Terms.vue
index 8bdc665..5411796 100644
--- a/src/vue-components/Terms.vue
+++ b/src/vue-components/Terms.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-6 flex flex-row space-x-4 place-content-center bg-blue-100 rounded-lg">
+    <div class="p-6 flex flex-row space-x-4 place-content-center bg-blue-100 rounded">
         <div class="flex flex-col place-content-center px-6">
             <FontAwesomeIcon :icon="faCircleInfo" size="3x" class="text-blue-600"></FontAwesomeIcon>
         </div>
@@ -16,21 +16,19 @@
                 </li>
                 <li>
                     Subscription and purchase of credits indicates acceptance of the
-                    <a href="https://describo.github.io/terms-and-conditions" target="_blank"
+                    <a href="/terms-and-conditions" target="_blank"
                         >Terms and Conditions of use.
                     </a>
                 </li>
                 <li>
                     Our
-                    <a href="https://describo.github.io/privacy-policy" target="_blank"
-                        >Privacy Policy</a
-                    >
+                    <a href="/privacy-policy" target="_blank">Privacy Policy</a>
                     tells you what data we collect, where we collect it and how it's used.
                 </li>
                 <li>
                     See
-                    <a href="/docs/guide/configuration/data-processing.html"
-                        >/docs/guide/configuration/data-processing.html</a
+                    <a href="/docs/guide/data-processing" target="_blank"
+                        >Cloud Services and Data Processing</a
                     >
                     to find out how and where your data is processed.
                 </li>