Merge pull request #13 from tebexjaames/add-auto-theme

Add "auto" theme option, for automatically selecting theme based on user's system preferences
tebexio · Oct 9, 2024 · 4bbad7c · 4bbad7c
2 parents e59ab54 + 526d932
commit 4bbad7c
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 18 deletions.
diff --git a/dist/tebex.cjs b/dist/tebex.cjs
@@ -12474,10 +12474,10 @@
     const DEFAULT_WIDTH = "800px";
     const DEFAULT_HEIGHT = "760px";
     const THEME_NAMES = [
+        "auto",
         "default",
         "light",
-        "dark",
-        // "auto", TODO: detect user's preference for light/dark theme
+        "dark"
     ];
     const COLOR_NAMES = [
         "primary",
@@ -12656,8 +12656,10 @@
             isApplePayAvailable: isApplePayAvailable(),
             isEmbedded: !popup,
             referrer: url.hostname,
+            origin: url.origin,
             path: url.pathname,
-            version: "1.3.0"
+            params: url.search,
+            version: "1.4.0",
         });
         await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
         __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12860,7 +12862,7 @@
     /**
      * Current Tebex.js package version
      */
-    const version = "1.3.0";
+    const version = "1.4.0";
     /**
      * Tebex checkout API
      */

diff --git a/dist/tebex.min.js b/dist/tebex.min.js
diff --git a/dist/tebex.min.js.map b/dist/tebex.min.js.map
diff --git a/dist/tebex.mjs b/dist/tebex.mjs
@@ -12468,10 +12468,10 @@ var _Checkout_instances, _Checkout_didRender, _Checkout_onRender, _Checkout_show
 const DEFAULT_WIDTH = "800px";
 const DEFAULT_HEIGHT = "760px";
 const THEME_NAMES = [
+    "auto",
     "default",
     "light",
-    "dark",
-    // "auto", TODO: detect user's preference for light/dark theme
+    "dark"
 ];
 const COLOR_NAMES = [
     "primary",
@@ -12650,8 +12650,10 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         isApplePayAvailable: isApplePayAvailable(),
         isEmbedded: !popup,
         referrer: url.hostname,
+        origin: url.origin,
         path: url.pathname,
-        version: "1.3.0"
+        params: url.search,
+        version: "1.4.0",
     });
     await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
     __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12854,7 +12856,7 @@ if (isEnvBrowser())
 /**
  * Current Tebex.js package version
  */
-const version = "1.3.0";
+const version = "1.4.0";
 /**
  * Tebex checkout API
  */

diff --git a/dist/types/checkout.d.ts b/dist/types/checkout.d.ts
@@ -1,6 +1,6 @@
 import { Lightbox } from "./lightbox";
 import { type CssDimension, type Implements } from "./utils";
-export declare const THEME_NAMES: readonly ["default", "light", "dark"];
+export declare const THEME_NAMES: readonly ["auto", "default", "light", "dark"];
 export declare const COLOR_NAMES: readonly ["primary", "secondary"];
 export declare const EVENT_NAMES: readonly ["open", "close", "payment:complete", "payment:error"];
 /**

diff --git a/example/index.html b/example/index.html
@@ -34,6 +34,7 @@ <h3>No hidden fees, 3-day payouts & chargeback insurance.</h3>
                         <span>Theme</span>
                         <select id="popup-theme">
                             <option value="default">Default</option>
+                            <option value="auto">Auto</option>
                             <option value="light">Light</option>
                             <option value="dark">Dark</option>
                         </select>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tebexio/tebex.js",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Integrate Tebex Checkout directly into your own website or game using our embedded checkout experience.",
   "type": "module",
   "main": "dist/tebex.cjs",

diff --git a/src/checkout.ts b/src/checkout.ts
@@ -19,10 +19,10 @@ const DEFAULT_WIDTH = "800px";
 const DEFAULT_HEIGHT = "760px";
 
 export const THEME_NAMES = [
+    "auto",
     "default",
     "light",
-    "dark",
-    // "auto", TODO: detect user's preference for light/dark theme
+    "dark"
 ] as const;
 
 export const COLOR_NAMES = [
@@ -293,8 +293,10 @@ export default class Checkout {
             isApplePayAvailable: isApplePayAvailable(),
             isEmbedded: !popup,
             referrer: url.hostname,
+            origin: url.origin,
             path: url.pathname,
-            version: __VERSION__
+            params: url.search,
+            version: __VERSION__,
         });
 
         await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");

diff --git a/tests/index.test-d.ts b/tests/index.test-d.ts
@@ -51,7 +51,7 @@ describe("Typechecks", () => {
             expectTypeOf(tebex.checkout.init).returns.toMatchTypeOf<void>();
             expectTypeOf(tebex.checkout.init).parameter(0).toMatchTypeOf<{
                 ident: string;
-                theme?: "light" | "dark" | "default";
+                theme?: "light" | "dark" | "default" | "auto";
                 colors?: {
                     name: "primary" | "secondary",
                     color: string