From 2582aa3b314ce7e00a3a58ec6d7ea5e0064ef565 Mon Sep 17 00:00:00 2001
From: pubkey <8926560+pubkey@users.noreply.github.com>
Date: Sun, 25 Feb 2024 00:25:48 +0100
Subject: [PATCH] FIX lead tracking

---
 docs-src/src/pages/newsletter.tsx        |  8 ++-
 docs-src/src/pages/premium-submitted.tsx | 64 ++++++++++++++++++++++++
 docs-src/src/pages/premium.tsx           | 38 ++++++++------
 3 files changed, 93 insertions(+), 17 deletions(-)
 create mode 100644 docs-src/src/pages/premium-submitted.tsx

diff --git a/docs-src/src/pages/newsletter.tsx b/docs-src/src/pages/newsletter.tsx
index c59bcd40ec4..b911d14e85f 100644
--- a/docs-src/src/pages/newsletter.tsx
+++ b/docs-src/src/pages/newsletter.tsx
@@ -3,11 +3,15 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import Layout from '@theme/Layout';
 import React, { useEffect } from 'react';
 
-export default function Home() {
+export default function Newsletter() {
     const { siteConfig } = useDocusaurusContext();
 
     const isBrowser = useIsBrowser();
-    useEffect(() => { if (isBrowser) { window.trigger('get_newsletter', 0.40); } });
+    useEffect(() => {
+        if (isBrowser) {
+            window.trigger('get_newsletter', 0.40);
+        }
+    });
 
     return (
         <Layout
diff --git a/docs-src/src/pages/premium-submitted.tsx b/docs-src/src/pages/premium-submitted.tsx
new file mode 100644
index 00000000000..51ea0549a05
--- /dev/null
+++ b/docs-src/src/pages/premium-submitted.tsx
@@ -0,0 +1,64 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import Layout from '@theme/Layout';
+import React, { useEffect } from 'react';
+import { getDatabase, hasIndexedDB } from '../components/database';
+import { FORM_VALUE_DOCUMENT_ID, FormValueDocData } from './premium';
+
+export default function PremiumSubmitted() {
+    const { siteConfig } = useDocusaurusContext();
+
+    const isBrowser = useIsBrowser();
+    useEffect(() => {
+        if (!isBrowser || !hasIndexedDB()) {
+            return;
+        }
+
+        /**
+         * Trigger conversion tracking with correct country
+         * and lead value
+         */
+        (async () => {
+            const database = await getDatabase();
+            const formValueDoc = await database.getLocal<FormValueDocData>(FORM_VALUE_DOCUMENT_ID);
+            if (!formValueDoc) {
+                window.trigger('premium_lead_unknown', 300);
+            } else {
+                window.trigger(
+                    'premium_lead_' + formValueDoc._data.data.homeCountry.toLowerCase(),
+                    Math.floor(formValueDoc._data.data.price / 3) // assume lead-to-sale-rate is 33%.
+                );
+            }
+        })();
+    });
+
+    return (
+        <main>
+            <br />
+            <br />
+            <br />
+            <br />
+            <div className='redirectBox' style={{ textAlign: 'center' }}>
+                <a href="/" target="_blank">
+                    <div className="logo">
+                        <img src="/files/logo/logo_text.svg" alt="RxDB" width={120} />
+                    </div>
+                </a>
+                <br />
+                <br />
+                <h1>RxDB Premium Form Submitted</h1>
+                <br />
+                <p style={{ padding: 50 }}>
+                    Thank you for submitting the form. You will directly get a confirmation email.
+                    <br />
+                    <b>Please check your spam folder!</b>.
+                    <br />
+                    In the next 24 hours you will get an email with
+                    a preview of the license agreement.
+                </p>
+                <br />
+                <br />
+            </div>
+        </main >
+    );
+}
diff --git a/docs-src/src/pages/premium.tsx b/docs-src/src/pages/premium.tsx
index 3bfe7b730f0..a10fea13de3 100644
--- a/docs-src/src/pages/premium.tsx
+++ b/docs-src/src/pages/premium.tsx
@@ -18,20 +18,23 @@ import { getDatabase, hasIndexedDB } from '../components/database';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
-type FormValueDocData = {
+export type FormValueDocData = {
     homeCountry: string;
     companySize: number;
     projectAmount: ProjectAmount;
     licensePeriod: LicensePeriod;
     packages: PackageName[];
+    price: number;
 };
-const FORM_VALUE_DOCUMENT_ID = 'premium-price-form-value';
+export const FORM_VALUE_DOCUMENT_ID = 'premium-price-form-value';
 
 export default function Premium() {
     const { siteConfig } = useDocusaurusContext();
     const isBrowser = useIsBrowser();
     useEffect(() => {
-        if (isBrowser) { window.trigger('premium_request', 1); }
+        if (isBrowser) {
+            window.trigger('open_pricing_page', 1);
+        }
 
         (async () => {
             if (!isBrowser || !hasIndexedDB()) {
@@ -627,18 +630,6 @@ export default function Premium() {
                                                 const packages: PackageName[] = packageFields
                                                     .map(([k]) => lastOfArray(k.split('-')) as any);
 
-                                                const database = await getDatabase();
-                                                /**
-                                                 * Save the input
-                                                 * so we have to not re-insert manually on page reload.
-                                                 */
-                                                await database.upsertLocal<FormValueDocData>(FORM_VALUE_DOCUMENT_ID, {
-                                                    companySize: formData['company-size'] as any,
-                                                    projectAmount: formData['project-amount'] as any,
-                                                    licensePeriod: formData['license-period'] as any,
-                                                    homeCountry: homeCountry.name,
-                                                    packages
-                                                });
                                                 const priceCalculationInput: PriceCalculationInput = {
                                                     companySize: parseInt(formData['company-size'] as any, 10),
                                                     teamSize: formData['developer-count'] as any,
@@ -652,6 +643,7 @@ export default function Premium() {
                                                 console.log('priceResult:');
                                                 console.log(JSON.stringify(priceResult, null, 4));
 
+
                                                 const $priceCalculatorResult = ensureNotFalsy(document.getElementById('price-calculator-result'));
                                                 const $priceCalculatorResultPerMonth = ensureNotFalsy(document.getElementById('total-per-project-per-month'));
                                                 // const $priceCalculatorResultPerYear = ensureNotFalsy(document.getElementById('total-per-year'));
@@ -670,6 +662,22 @@ export default function Premium() {
                                                 }
                                                 // setPrice($priceCalculatorResultPerYear, pricePerYear);
                                                 setPrice($priceCalculatorResultTotal, priceResult.totalPrice);
+
+                                                /**
+                                                 * Save the input
+                                                 * so we have to not re-insert manually on page reload.
+                                                 */
+                                                const database = await getDatabase();
+                                                await database.upsertLocal<FormValueDocData>(FORM_VALUE_DOCUMENT_ID, {
+                                                    companySize: formData['company-size'] as any,
+                                                    projectAmount: formData['project-amount'] as any,
+                                                    licensePeriod: formData['license-period'] as any,
+                                                    homeCountry: homeCountry.name,
+                                                    packages,
+                                                    price: priceResult.totalPrice
+                                                });
+
+
                                                 $priceCalculatorResult.style.display = 'block';
                                             }}
                                         >