[demo] [utils] [refactor] Minor refactoring and cleanup for the demo …

…and some utilities.
Freemius · Sep 13, 2024 · 86c4632 · 86c4632
1 parent c5df7ff
commit 86c4632
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 103 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,12 +1,16 @@
+# This environment file holds a dummy plugin from Freemius for testing purposes.
 # PLUGIN ID
-VITE_PLUGIN_ID=0000
+VITE_PLUGIN_ID=311
 # PUBLIC KEY
-VITE_PUBLIC_KEY="pk_0000"
+VITE_PUBLIC_KEY="pk_a42d2ee6de0b31c389d5d11e36211"
 # PLAN IDs
-VITE_PLAN_ONE=0000
-VITE_PLAN_TWO=0001
-VITE_PLAN_THREE=0002
+# Plan Starter
+#VITE_PLAN_ONE=0000
+# Plan Professional
+VITE_PLAN_TWO=437
+# Plan Business
+VITE_PLAN_THREE=20074
 # Add a Sandbox Token (optional)
-# VITE_SANDBOX_TOKEN="xxxxxxxx"
+VITE_SANDBOX_TOKEN="5548f3de8a7e02a838427c549a588644"
 # Add a Sandbox Context (optional)
-# VITE_SANDBOX_CTX="0000000"
+VITE_SANDBOX_CTX="1626969480"
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
diff --git a/README.md b/README.md
@@ -237,7 +237,7 @@ handler.open({
 This is useful when you have multiple checkouts related to different plans,
 billing cycles, licenses, trials etc.
 
-See the [source code of the demo](./src/test.ts) to learn more.
+See the [source code of the demo](./src/demo.ts) to learn more.
 
 To close the popup programmatically, call the `close` method.
 

diff --git a/index.html b/index.html
@@ -1,42 +1,46 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="color-scheme" content="dark" />
-    <title>Freemius Checkout JS - Without jQuery or other dependencies</title>
-  </head>
-  <body>
-    <div id="app">
-      <p>
-        <label for="site">Number of Sites</label>
-      </p>
-      <p>
-        <select name="site" id="site">
-          <option value="1" selected>Single</option>
-          <option value="2">2 Sites</option>
-          <option value="5">5 Sites</option>
-          <option value="10">10 Sites</option>
-        </select>
-      </p>
-      <p>
-        <label for="frequency">Billing Frequency</label>
-      </p>
-      <p>
-        <select name="frequency" id="frequency">
-          <option value="annual">Yearly</option>
-          <option value="monthly">Monthly</option>
-          <option value="lifetime">Lifetime</option>
-        </select>
-      </p>
-      <p>
-        <button id="plan-1">PLAN 1</button>
-        <button id="plan-2">PLAN 2</button>
-        <button id="plan-3">PLAN 3</button>
-      </p>
-			<p>Check Browser DevTool for more information</p>
-    </div>
-    <script type="module" src="/src/test.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="dark" />
+        <title>
+            Freemius Checkout JS - Without jQuery or other dependencies
+        </title>
+    </head>
+    <body>
+        <div id="app">
+            <p>
+                <label for="site">Number of Licenses</label>
+            </p>
+            <p>
+                <select name="site" id="site">
+                    <option value="1" selected>Single</option>
+                    <option value="5">5 Sites</option>
+                    <option value="0">Unlimited Sites</option>
+                </select>
+            </p>
+            <p style="font-size: 10px; font-style: italic">
+                Some licenses may not be available for all plans
+            </p>
+            <p>
+                <label for="frequency">Billing Frequency</label>
+            </p>
+            <p>
+                <select name="frequency" id="frequency">
+                    <option value="annual">Yearly</option>
+                    <option value="monthly">Monthly</option>
+                    <option value="lifetime">Lifetime</option>
+                </select>
+            </p>
+            <p>
+                <button id="plan-1">Buy Starter</button>
+                <button id="plan-2">Buy Professional</button>
+                <button id="plan-3">Buy Business</button>
+            </p>
+            <p>Check Browser DevTool for more information</p>
+        </div>
+        <script type="module" src="/src/demo.ts"></script>
+    </body>
 </html>
diff --git a/src/demo.ts b/src/demo.ts
@@ -86,38 +86,25 @@ document.addEventListener('DOMContentLoaded', () => {
         };
     }
 
-    document.querySelector('#plan-1')?.addEventListener('click', (e) => {
-        e.preventDefault();
-        fsCheckout.open({
-            plan_id: Number.parseInt(
-                import.meta.env.VITE_PLAN_ONE as string,
-                10
-            ),
-            ...getLicensesAndFrequency(),
-            ...getEventLoggers(),
-        });
-    });
-    document.querySelector('#plan-2')?.addEventListener('click', (e) => {
-        e.preventDefault();
-        fsCheckout.open({
-            plan_id: Number.parseInt(
-                import.meta.env.VITE_PLAN_TWO as string,
-                10
-            ),
-            ...getLicensesAndFrequency(),
-            ...getEventLoggers(),
-        });
-    });
-    document.querySelector('#plan-3')?.addEventListener('click', (e) => {
-        e.preventDefault();
-        fsCheckout.open({
-            plan_id: Number.parseInt(
-                import.meta.env.VITE_PLAN_THREE as string,
-                10
-            ),
-            ...getLicensesAndFrequency(),
-            ...getEventLoggers(),
-        });
+    const plans = {
+        '#plan-1': import.meta.env.VITE_PLAN_ONE as string,
+        '#plan-2': import.meta.env.VITE_PLAN_TWO as string,
+        '#plan-3': import.meta.env.VITE_PLAN_THREE as string,
+    };
+
+    Object.entries(plans).forEach(([selector, planId]) => {
+        if (!planId) {
+            document.querySelector(selector)?.remove();
+        } else {
+            document.querySelector(selector)?.addEventListener('click', (e) => {
+                e.preventDefault();
+                fsCheckout.open({
+                    plan_id: Number.parseInt(planId, 10),
+                    ...getLicensesAndFrequency(),
+                    ...getEventLoggers(),
+                });
+            });
+        }
     });
 
     console.log(

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 export { postman } from './lib/services/postman';
 export {
     buildFreemiusQueryFromOptions,
-    generateUID,
+    generateGuid,
     getIsFlashingBrowser,
     isExitAttempt,
     MAX_ZINDEX,

diff --git a/src/lib/checkout.ts b/src/lib/checkout.ts
@@ -1,4 +1,4 @@
-import { generateUID, isSsr } from './utils/ops';
+import { generateGuid, isSsr } from './utils/ops';
 import { Logger } from './services/logger';
 import type { PostmanEvents } from './services/postman';
 import type { CheckoutOptions } from './types';
@@ -44,7 +44,7 @@ export class Checkout {
         }
 
         this.options = options;
-        this.guid = generateUID();
+        this.guid = generateGuid();
 
         if (isSsr()) {
             return;

diff --git a/src/lib/services/checkout-popup/CheckoutIFrameBuilder.ts b/src/lib/services/checkout-popup/CheckoutIFrameBuilder.ts
@@ -1,5 +1,5 @@
 import { CheckoutPopupOptions } from '../../contracts/CheckoutPopupOptions';
-import { isQueryItemInValid, MAX_ZINDEX } from '../../utils/ops';
+import { isQueryItemInvalid, MAX_ZINDEX } from '../../utils/ops';
 import { CheckoutIFrame } from './CheckoutIFrame';
 import { IStyle } from '../../contracts/IStyle';
 
@@ -47,7 +47,7 @@ export class CheckoutIFrameBuilder {
         };
 
         Object.entries(options).forEach(([key, value]) => {
-            if (!isQueryItemInValid(value)) {
+            if (!isQueryItemInvalid(value)) {
                 queryParams[key] = value;
             }
         });

diff --git a/src/lib/utils/ops.ts b/src/lib/utils/ops.ts
@@ -6,24 +6,29 @@
 export const MAX_ZINDEX = 2147483647;
 
 /**
- * Generate a random UID for use in freemius checkout. This is a simple
- * implementation and is not as robust as nanoid or shortid, but it gets the
- * job done and is very small.
- *
- * @link https://stackoverflow.com/a/6248722/2754557
- *
- * @returns A random UID.
+ * Generates a random GUID. It has the original implementation of the legacy Freemius Checkout for backward compatibility.
  */
-export function generateUID() {
-    // I generate the UID from two parts here
-    // to ensure the random number provide enough bits.
-    const firstPart = (Math.random() * 46656) | 0;
-    const firstPartStr = `000${firstPart.toString(36)}`.slice(-3);
-
-    const secondPart = (Math.random() * 46656) | 0;
-    const secondPartStr = `000${secondPart.toString(36)}`.slice(-3);
+export function generateGuid() {
+    const _s4 = function () {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    };
 
-    return firstPartStr + secondPartStr;
+    return (
+        _s4() +
+        _s4() +
+        '-' +
+        _s4() +
+        '-' +
+        _s4() +
+        '-' +
+        _s4() +
+        '-' +
+        _s4() +
+        _s4() +
+        _s4()
+    );
 }
 
 export function getIsFlashingBrowser(): boolean {
@@ -49,7 +54,7 @@ export function getIsFlashingBrowser(): boolean {
     return isFlashingBrowser;
 }
 
-export function isQueryItemInValid(item: any): boolean {
+export function isQueryItemInvalid(item: any): boolean {
     return (
         typeof item === 'undefined' ||
         typeof item === 'function' ||
@@ -58,7 +63,7 @@ export function isQueryItemInValid(item: any): boolean {
 }
 
 export function getQueryValueFromItem(item: any): string | null {
-    if (isQueryItemInValid(item)) {
+    if (isQueryItemInvalid(item)) {
         return null;
     }
 
@@ -89,6 +94,7 @@ export function buildFreemiusQueryFromOptions(options: Record<string, any>) {
     Object.keys(options).forEach((key) => {
         const item = options[key];
         const value = getQueryValueFromItem(item);
+
         if (value !== null) {
             query.push(`${key}=${value}`);
         }