npm - @drttix/drt-sdk - Versions diffs - 0.8.0 → 0.8.2 - Mend

@drttix/drt-sdk 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (583) hide show

package/demo/test.html CHANGED Viewed

@@ -1,870 +1,870 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <title>DRT SDK Test Page</title>
-        <link rel="icon" href="data:," />
-        <style>
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                font-family: system-ui, sans-serif;
-                margin: 0;
-                padding: 0;
-                display: flex;
-                height: 100vh;
-                overflow: hidden;
-            }
-            .main-container {
-                display: flex;
-                width: 100%;
-                height: 100vh;
-                background: #fff;
-            }
-            .left-panel {
-                flex: 1;
-                overflow-y: auto;
-                padding: 1rem 2rem;
-            }
-            .right-panel {
-                flex: 1;
-                background: #1e1e1e;
-                color: #d4d4d4;
-                display: flex;
-                flex-direction: column;
-                border-left: 1px solid #333;
-                position: sticky;
-                top: 0;
-                height: 100vh;
-            }
-            .right-panel h2 {
-                color: #fff;
-                margin: 0;
-                padding: 1rem;
-                background: #2d2d2d;
-                border-bottom: 1px solid #444;
-                font-size: 1rem;
-            }
-            h1 {
-                color: #333;
-                margin-top: 0;
-            }
-            h2 {
-                color: #555;
-                margin-top: 2rem;
-                border-bottom: 1px solid #ddd;
-                padding-bottom: 0.5rem;
-            }
-            h3 {
-                color: #666;
-                margin-top: 1.5rem;
-            }
-            button {
-                padding: 0.5rem 1rem;
-                font-size: 0.9rem;
-                cursor: pointer;
-                margin: 0.25rem;
-                border: 1px solid #ccc;
-                border-radius: 4px;
-                background: #fff;
-            }
-            button:hover {
-                background: #f0f0f0;
-            }
-            button:disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
-            #output-container {
-                flex: 1;
-                overflow: auto;
-                padding: 1rem;
-            }
-            pre {
-                background: transparent;
-                margin: 0;
-                white-space: pre-wrap;
-                word-wrap: break-word;
-                font-size: 0.85rem;
-                font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-            }
-            .success {
-                color: #4ec9b0;
-            }
-            .error {
-                color: #f48771;
-            }
-            #status {
-                padding: 0.5rem 1rem;
-                font-weight: bold;
-                background: #252526;
-                border-bottom: 1px solid #444;
-            }
-            .config-form {
-                background: #f9f9f9;
-                padding: 1rem;
-                border-radius: 4px;
-                margin-bottom: 1rem;
-            }
-            .config-form label {
-                display: block;
-                margin: 0.5rem 0 0.25rem;
-                font-weight: 500;
-            }
-            .config-form input {
-                width: 100%;
-                padding: 0.5rem;
-                font-size: 1rem;
-                box-sizing: border-box;
-                border: 1px solid #ccc;
-                border-radius: 4px;
-            }
-            .btn-group {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 0.5rem;
-                margin: 0.5rem 0;
-            }
-            .input-row {
-                display: flex;
-                gap: 0.5rem;
-                align-items: center;
-                margin: 0.5rem 0;
-            }
-            .input-row input {
-                flex: 1;
-                padding: 0.4rem;
-                font-size: 0.9rem;
-            }
-            .input-row label {
-                min-width: 80px;
-                font-size: 0.85rem;
-            }
-            .tab-container {
-                border-bottom: 2px solid #ddd;
-                margin-bottom: 1rem;
-            }
-            .tab {
-                padding: 0.5rem 1rem;
-                border: none;
-                background: none;
-                cursor: pointer;
-                font-size: 1rem;
-            }
-            .tab.active {
-                border-bottom: 2px solid #007bff;
-                color: #007bff;
-                margin-bottom: -2px;
-            }
-            .tab-content {
-                display: none;
-            }
-            .tab-content.active {
-                display: block;
-            }
-            code {
-                background: #e9e9e9;
-                padding: 0.2rem 0.4rem;
-                border-radius: 3px;
-                font-size: 0.85rem;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="main-container">
-            <div class="left-panel">
-                <h1>DRT SDK Test Page</h1>
-                <h2>1. Create or Initialize SDK</h2>
-                <div class="config-form">
-                    <div
-                        style="
-                            background: #e8f5e9;
-                            padding: 0.75rem;
-                            border-radius: 4px;
-                            margin-bottom: 1rem;
-                        "
-                    >
-                        <strong>Quick Start:</strong> Create a new shopper
-                        session
-                        <div class="input-row" style="margin-top: 0.5rem">
-                            <label>Studio ID:</label>
-                            <input
-                                type="number"
-                                id="createStudioId"
-                                placeholder="e.g., 508"
-                                style="flex: 1"
-                            />
-                            <label>API Key:</label>
-                            <input
-                                type="text"
-                                id="createApiKey"
-                                placeholder="API key"
-                                style="flex: 1"
-                            />
-                            <button id="btn-create-shopper">
-                                Create Shopper
-                            </button>
-                        </div>
-                    </div>
-                    <label for="shopperGuid">Shopper GUID:</label>
-                    <input
-                        type="text"
-                        id="shopperGuid"
-                        placeholder="e.g., F1199DCD-BB45-4BD0-8DED600A3A234C75"
-                    />
-                    <label for="accountId">Account ID:</label>
-                    <input type="text" id="accountId" placeholder="e.g., 508" />
-                    <label for="apiKey">API Key:</label>
-                    <input
-                        type="text"
-                        id="apiKey"
-                        placeholder="e.g., your-api-key"
-                    />
-                    <div style="margin-top: 1rem">
-                        <button id="btn-init">Initialize SDK</button>
-                        <button id="btn-check-sdk">Check SDK Status</button>
-                        <button id="btn-reset">Reset SDK</button>
-                    </div>
-                </div>
-                <h2>2. Test API Calls</h2>
-                <div class="tab-container">
-                    <button class="tab active" data-tab="shopper">
-                        Shopper API
-                    </button>
-                    <button class="tab" data-tab="scanner">Scanner API</button>
-                </div>
-                <!-- SHOPPER API -->
-                <div id="tab-shopper" class="tab-content active">
-                    <h3>Account</h3>
-                    <p>
-                        Basic account/site configuration.
-                        <code>DRT.shopper.account</code>
-                    </p>
-                    <div class="btn-group">
-                        <button id="btn-theme">Get Theme</button>
-                        <button id="btn-disposition">Get Disposition</button>
-                        <button id="btn-root">Get Root Config</button>
-                        <button id="btn-landing">Get Landing Page</button>
-                    </div>
-                    <h3>Events</h3>
-                    <p>
-                        Event listings and details.
-                        <code>DRT.shopper.event</code>
-                    </p>
-                    <div class="btn-group">
-                        <button id="btn-events">Get All Events</button>
-                    </div>
-                    <div class="input-row">
-                        <label>Event:</label>
-                        <select
-                            id="eventSelect"
-                            style="flex: 1; padding: 0.4rem"
-                        >
-                            <option value="">
-                                -- Click "Get All Events" first --
-                            </option>
-                        </select>
-                        <button id="btn-event-details">
-                            Get Event Details
-                        </button>
-                    </div>
-                    <h3>Cart</h3>
-                    <p>
-                        Shopping cart operations. <code>DRT.shopper.cart</code>
-                    </p>
-                    <div class="btn-group">
-                        <button id="btn-cart">Get Cart</button>
-                        <button id="btn-delete-cart">Delete Cart</button>
-                    </div>
-                    <h3>Orders</h3>
-                    <p>
-                        Order receipts and management.
-                        <code>DRT.shopper.order</code>
-                    </p>
-                    <div class="input-row">
-                        <label>Order GUID:</label>
-                        <input
-                            type="text"
-                            id="orderGuid"
-                            placeholder="e.g., ABC123-..."
-                        />
-                        <button id="btn-receipt">Get Receipt</button>
-                    </div>
-                    <h3>Codes/Discounts</h3>
-                    <p>
-                        Promo codes and discounts. <code>DRT.shopper.code</code>
-                    </p>
-                    <div class="input-row">
-                        <label>Code:</label>
-                        <input
-                            type="text"
-                            id="promoCode"
-                            placeholder="e.g., SAVE10"
-                        />
-                        <button id="btn-validate-code">Validate Code</button>
-                    </div>
-                    <h3>Gift Cards</h3>
-                    <p>
-                        Gift card operations. <code>DRT.shopper.giftCard</code>
-                    </p>
-                    <div class="input-row">
-                        <label>Card #:</label>
-                        <input
-                            type="text"
-                            id="giftCardNumber"
-                            placeholder="Gift card number"
-                        />
-                        <button id="btn-gift-balance">Check Balance</button>
-                    </div>
-                </div>
-                <!-- SCANNER API -->
-                <div id="tab-scanner" class="tab-content">
-                    <h3>Scanning</h3>
-                    <p>
-                        Scanner app strings and utilities.
-                        <code>DRT.scanner.scanning</code>
-                    </p>
-                    <div class="btn-group">
-                        <button id="btn-strings">
-                            Get App Strings (no auth)
-                        </button>
-                    </div>
-                    <h3>Database</h3>
-                    <p>
-                        Scanner database operations.
-                        <code>DRT.scanner.database</code>
-                    </p>
-                    <div class="input-row">
-                        <label>Show Code:</label>
-                        <input
-                            type="text"
-                            id="scannerShowCode"
-                            placeholder="e.g., ABC123"
-                        />
-                    </div>
-                    <div class="input-row">
-                        <label>Device:</label>
-                        <input
-                            type="text"
-                            id="scannerDevice"
-                            placeholder="device name"
-                            value="test-device"
-                        />
-                        <label>User:</label>
-                        <input
-                            type="text"
-                            id="scannerUser"
-                            placeholder="username"
-                            value="test-user"
-                        />
-                    </div>
-                    <div class="btn-group">
-                        <button id="btn-scanner-db">Download Database</button>
-                        <button id="btn-scanner-query">Query Sections</button>
-                    </div>
-                    <h3>Orders</h3>
-                    <p>
-                        Order lookup for scanning.
-                        <code>DRT.scanner.orders</code>
-                    </p>
-                    <div class="input-row">
-                        <label>Phone:</label>
-                        <input
-                            type="text"
-                            id="scannerPhone"
-                            placeholder="Phone number"
-                        />
-                        <button id="btn-scanner-by-phone">
-                            Search by Phone
-                        </button>
-                    </div>
-                    <div class="input-row">
-                        <label>Name:</label>
-                        <input
-                            type="text"
-                            id="scannerName"
-                            placeholder="Buyer name"
-                        />
-                        <button id="btn-scanner-by-name">Search by Name</button>
-                    </div>
-                </div>
-            </div>
-            <div class="right-panel">
-                <h2>Output</h2>
-                <div id="status">
-                    SDK loaded! Initialize with your credentials.
-                </div>
-                <div id="output-container">
-                    <pre id="output">
-Initialize the SDK, then click a button to test...</pre
-                    >
-                </div>
-            </div>
-        </div>
-        <script type="module">
-            import { DRT } from '/public/sdk/latest/drt-sdk.js';
-            const out = document.getElementById('output');
-            const status = document.getElementById('status');
-            // Expose DRT globally for console testing
-            window.DRT = DRT;
-            function setStatus(msg, isError = false) {
-                status.textContent = msg;
-                status.className = isError ? 'error' : 'success';
-            }
-            function setOutput(data) {
-                out.textContent =
-                    typeof data === 'string'
-                        ? data
-                        : JSON.stringify(data, null, 4);
-            }
-            function requireInit() {
-                if (!DRT.isReady()) {
-                    setStatus(
-                        'SDK not initialized! Please initialize first.',
-                        true,
-                    );
-                    return false;
-                }
-                return true;
-            }
-            async function callApi(fn, description) {
-                setStatus(`Fetching ${description}...`, false);
-                try {
-                    const result = await fn();
-                    setStatus('Success!', false);
-                    setOutput(result);
-                } catch (err) {
-                    setStatus(`Error: ${err.message}`, true);
-                    setOutput({
-                        error: err.message,
-                        details: err.body || err.toString(),
-                    });
-                    console.error(err);
-                }
-            }
-            // Tab switching
-            document.querySelectorAll('.tab').forEach((tab) => {
-                tab.addEventListener('click', () => {
-                    document
-                        .querySelectorAll('.tab')
-                        .forEach((t) => t.classList.remove('active'));
-                    document
-                        .querySelectorAll('.tab-content')
-                        .forEach((c) => c.classList.remove('active'));
-                    tab.classList.add('active');
-                    document
-                        .getElementById(`tab-${tab.dataset.tab}`)
-                        .classList.add('active');
-                });
-            });
-            // Initialize SDK
-            document
-                .getElementById('btn-init')
-                .addEventListener('click', () => {
-                    const shopperGuid = document
-                        .getElementById('shopperGuid')
-                        .value.trim();
-                    const accountId = document
-                        .getElementById('accountId')
-                        .value.trim();
-                    const apiKey = document
-                        .getElementById('apiKey')
-                        .value.trim();
-                    if (!shopperGuid || !accountId || !apiKey) {
-                        setStatus('Please fill in all fields', true);
-                        return;
-                    }
-                    try {
-                        DRT.init({ shopperGuid, accountId, apiKey });
-                        setStatus('SDK Initialized!', false);
-                        setOutput({
-                            message: 'SDK initialized successfully!',
-                            config: { shopperGuid, accountId, apiKey: '***' },
-                        });
-                    } catch (err) {
-                        setStatus('Init failed: ' + err.message, true);
-                        setOutput({ error: err.message });
-                    }
-                });
-            // Check SDK status
-            document
-                .getElementById('btn-check-sdk')
-                .addEventListener('click', () => {
-                    setStatus('SDK Status', false);
-                    const config = DRT.getConfig();
-                    setOutput({
-                        isReady: DRT.isReady(),
-                        config: config
-                            ? {
-                                  shopperGuid: config.shopperGuid,
-                                  accountId: config.accountId,
-                                  apiKey: '***',
-                              }
-                            : null,
-                        availableServices: {
-                            shopper: Object.keys(DRT.shopper),
-                            scanner: Object.keys(DRT.scanner),
-                            portal: Object.keys(DRT.portal),
-                        },
-                    });
-                });
-            // Reset SDK
-            document
-                .getElementById('btn-reset')
-                .addEventListener('click', () => {
-                    DRT.reset();
-                    setStatus('SDK Reset!', false);
-                    setOutput({
-                        message: 'SDK has been reset. Initialize again to use.',
-                    });
-                });
-            // Create Shopper
-            document
-                .getElementById('btn-create-shopper')
-                .addEventListener('click', async () => {
-                    const studioId = parseInt(
-                        document.getElementById('createStudioId').value,
-                    );
-                    const apiKey = document
-                        .getElementById('createApiKey')
-                        .value.trim();
-                    if (!studioId) {
-                        setStatus('Please enter a Studio ID', true);
-                        return;
-                    }
-                    if (!apiKey) {
-                        setStatus('Please enter an API Key', true);
-                        return;
-                    }
-                    setStatus('Creating shopper session...', false);
-                    try {
-                        const result = await DRT.shopper.session.createSession({
-                            studioId,
-                        });
-                        setStatus('Shopper created!', false);
-                        setOutput(result);
-                        // Populate the form fields
-                        document.getElementById('shopperGuid').value =
-                            result.shopperGuid;
-                        document.getElementById('accountId').value =
-                            result.studioId;
-                        document.getElementById('apiKey').value = apiKey;
-                        // Auto-initialize
-                        DRT.init({
-                            shopperGuid: result.shopperGuid,
-                            accountId: String(result.studioId),
-                            apiKey,
-                        });
-                        setStatus(
-                            'Shopper created and SDK initialized!',
-                            false,
-                        );
-                    } catch (err) {
-                        setStatus(`Error: ${err.message}`, true);
-                        setOutput({
-                            error: err.message,
-                            details: err.body || err.toString(),
-                        });
-                    }
-                });
-            // ==================== SHOPPER API ====================
-            // Account
-            document
-                .getElementById('btn-theme')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.account.getTheme(), 'theme');
-                });
-            document
-                .getElementById('btn-disposition')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(
-                        () => DRT.shopper.account.getDisposition(),
-                        'disposition',
-                    );
-                });
-            document
-                .getElementById('btn-root')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.account.getRoot(), 'root config');
-                });
-            document
-                .getElementById('btn-landing')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(
-                        () => DRT.shopper.account.getLanding(),
-                        'landing page',
-                    );
-                });
-            // Events
-            document
-                .getElementById('btn-events')
-                .addEventListener('click', async () => {
-                    if (!requireInit()) return;
-                    setStatus('Fetching events...', false);
-                    try {
-                        const result = await DRT.shopper.event.getEvents();
-                        setStatus('Success!', false);
-                        setOutput(result);
-                        // Populate the dropdown
-                        const select = document.getElementById('eventSelect');
-                        select.innerHTML =
-                            '<option value="">-- Select an event --</option>';
-                        const events = result.events || result || [];
-                        events.forEach((event) => {
-                            const opt = document.createElement('option');
-                            opt.value = event.eventId || event.id;
-                            opt.textContent = `${event.eventId || event.id}: ${event.eventName || event.name || 'Unnamed'}`;
-                            select.appendChild(opt);
-                        });
-                        setStatus(`Loaded ${events.length} events`, false);
-                    } catch (err) {
-                        setStatus(`Error: ${err.message}`, true);
-                        setOutput({
-                            error: err.message,
-                            details: err.body || err.toString(),
-                        });
-                    }
-                });
-            document
-                .getElementById('btn-event-details')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const id = parseInt(
-                        document.getElementById('eventSelect').value,
-                    );
-                    if (!id) {
-                        setStatus(
-                            'Please select an event from the dropdown',
-                            true,
-                        );
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.event.getEventById(id),
-                        `event ${id}`,
-                    );
-                });
-            // Cart
-            document
-                .getElementById('btn-cart')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.cart.getCart(), 'cart');
-                });
-            document
-                .getElementById('btn-delete-cart')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    callApi(() => DRT.shopper.cart.deleteCart(), 'delete cart');
-                });
-            // Orders
-            document
-                .getElementById('btn-receipt')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const guid = document
-                        .getElementById('orderGuid')
-                        .value.trim();
-                    if (!guid) {
-                        setStatus('Please enter an Order GUID', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.order.getReceipt(guid),
-                        'receipt',
-                    );
-                });
-            // Codes
-            document
-                .getElementById('btn-validate-code')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const code = document
-                        .getElementById('promoCode')
-                        .value.trim();
-                    if (!code) {
-                        setStatus('Please enter a code', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.code.validateCode(code),
-                        `code validation`,
-                    );
-                });
-            // Gift Cards
-            document
-                .getElementById('btn-gift-balance')
-                .addEventListener('click', () => {
-                    if (!requireInit()) return;
-                    const num = document
-                        .getElementById('giftCardNumber')
-                        .value.trim();
-                    if (!num) {
-                        setStatus('Please enter a gift card number', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.shopper.giftCard.getBalance(num),
-                        'gift card balance',
-                    );
-                });
-            // ==================== SCANNER API ====================
-            document
-                .getElementById('btn-strings')
-                .addEventListener('click', () => {
-                    callApi(
-                        () => DRT.scanner.scanning.appControllerGetStrings(),
-                        'scanner strings',
-                    );
-                });
-            document
-                .getElementById('btn-scanner-db')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const device = document
-                        .getElementById('scannerDevice')
-                        .value.trim();
-                    const user = document
-                        .getElementById('scannerUser')
-                        .value.trim();
-                    if (!showCode) {
-                        setStatus('Please enter a Show Code', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.database.download(
-                                showCode,
-                                device,
-                                user,
-                                'en',
-                            ),
-                        `scanner database`,
-                    );
-                });
-            document
-                .getElementById('btn-scanner-query')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    if (!showCode) {
-                        setStatus('Please enter a Show Code', true);
-                        return;
-                    }
-                    callApi(
-                        () => DRT.scanner.database.query(showCode, 'sections'),
-                        `sections query`,
-                    );
-                });
-            document
-                .getElementById('btn-scanner-by-phone')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const phone = document
-                        .getElementById('scannerPhone')
-                        .value.trim();
-                    if (!showCode || !phone) {
-                        setStatus('Please enter Show Code and Phone', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.orders.ordersControllerGetOrdersByPhone(
-                                showCode,
-                                phone,
-                            ),
-                        `orders by phone`,
-                    );
-                });
-            document
-                .getElementById('btn-scanner-by-name')
-                .addEventListener('click', () => {
-                    const showCode = document
-                        .getElementById('scannerShowCode')
-                        .value.trim();
-                    const name = document
-                        .getElementById('scannerName')
-                        .value.trim();
-                    if (!showCode || !name) {
-                        setStatus('Please enter Show Code and Name', true);
-                        return;
-                    }
-                    callApi(
-                        () =>
-                            DRT.scanner.orders.ordersControllerGetOrdersByName(
-                                showCode,
-                                name,
-                            ),
-                        `orders by name`,
-                    );
-                });
-            // Auto-check on load
-            console.log('DRT SDK available at window.DRT for console testing');
-        </script>
-    </body>
-</html>
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>DRT SDK Test Page</title>
+        <link rel="icon" href="data:," />
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+            body {
+                font-family: system-ui, sans-serif;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                height: 100vh;
+                overflow: hidden;
+            }
+            .main-container {
+                display: flex;
+                width: 100%;
+                height: 100vh;
+                background: #fff;
+            }
+            .left-panel {
+                flex: 1;
+                overflow-y: auto;
+                padding: 1rem 2rem;
+            }
+            .right-panel {
+                flex: 1;
+                background: #1e1e1e;
+                color: #d4d4d4;
+                display: flex;
+                flex-direction: column;
+                border-left: 1px solid #333;
+                position: sticky;
+                top: 0;
+                height: 100vh;
+            }
+            .right-panel h2 {
+                color: #fff;
+                margin: 0;
+                padding: 1rem;
+                background: #2d2d2d;
+                border-bottom: 1px solid #444;
+                font-size: 1rem;
+            }
+            h1 {
+                color: #333;
+                margin-top: 0;
+            }
+            h2 {
+                color: #555;
+                margin-top: 2rem;
+                border-bottom: 1px solid #ddd;
+                padding-bottom: 0.5rem;
+            }
+            h3 {
+                color: #666;
+                margin-top: 1.5rem;
+            }
+            button {
+                padding: 0.5rem 1rem;
+                font-size: 0.9rem;
+                cursor: pointer;
+                margin: 0.25rem;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                background: #fff;
+            }
+            button:hover {
+                background: #f0f0f0;
+            }
+            button:disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+            #output-container {
+                flex: 1;
+                overflow: auto;
+                padding: 1rem;
+            }
+            pre {
+                background: transparent;
+                margin: 0;
+                white-space: pre-wrap;
+                word-wrap: break-word;
+                font-size: 0.85rem;
+                font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+            }
+            .success {
+                color: #4ec9b0;
+            }
+            .error {
+                color: #f48771;
+            }
+            #status {
+                padding: 0.5rem 1rem;
+                font-weight: bold;
+                background: #252526;
+                border-bottom: 1px solid #444;
+            }
+            .config-form {
+                background: #f9f9f9;
+                padding: 1rem;
+                border-radius: 4px;
+                margin-bottom: 1rem;
+            }
+            .config-form label {
+                display: block;
+                margin: 0.5rem 0 0.25rem;
+                font-weight: 500;
+            }
+            .config-form input {
+                width: 100%;
+                padding: 0.5rem;
+                font-size: 1rem;
+                box-sizing: border-box;
+                border: 1px solid #ccc;
+                border-radius: 4px;
+            }
+            .btn-group {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+                margin: 0.5rem 0;
+            }
+            .input-row {
+                display: flex;
+                gap: 0.5rem;
+                align-items: center;
+                margin: 0.5rem 0;
+            }
+            .input-row input {
+                flex: 1;
+                padding: 0.4rem;
+                font-size: 0.9rem;
+            }
+            .input-row label {
+                min-width: 80px;
+                font-size: 0.85rem;
+            }
+            .tab-container {
+                border-bottom: 2px solid #ddd;
+                margin-bottom: 1rem;
+            }
+            .tab {
+                padding: 0.5rem 1rem;
+                border: none;
+                background: none;
+                cursor: pointer;
+                font-size: 1rem;
+            }
+            .tab.active {
+                border-bottom: 2px solid #007bff;
+                color: #007bff;
+                margin-bottom: -2px;
+            }
+            .tab-content {
+                display: none;
+            }
+            .tab-content.active {
+                display: block;
+            }
+            code {
+                background: #e9e9e9;
+                padding: 0.2rem 0.4rem;
+                border-radius: 3px;
+                font-size: 0.85rem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="main-container">
+            <div class="left-panel">
+                <h1>DRT SDK Test Page</h1>
+                <h2>1. Create or Initialize SDK</h2>
+                <div class="config-form">
+                    <div
+                        style="
+                            background: #e8f5e9;
+                            padding: 0.75rem;
+                            border-radius: 4px;
+                            margin-bottom: 1rem;
+                        "
+                    >
+                        <strong>Quick Start:</strong> Create a new shopper
+                        session
+                        <div class="input-row" style="margin-top: 0.5rem">
+                            <label>Studio ID:</label>
+                            <input
+                                type="number"
+                                id="createStudioId"
+                                placeholder="e.g., 508"
+                                style="flex: 1"
+                            />
+                            <label>API Key:</label>
+                            <input
+                                type="text"
+                                id="createApiKey"
+                                placeholder="API key"
+                                style="flex: 1"
+                            />
+                            <button id="btn-create-shopper">
+                                Create Shopper
+                            </button>
+                        </div>
+                    </div>
+                    <label for="shopperGuid">Shopper GUID:</label>
+                    <input
+                        type="text"
+                        id="shopperGuid"
+                        placeholder="e.g., F1199DCD-BB45-4BD0-8DED600A3A234C75"
+                    />
+                    <label for="accountId">Account ID:</label>
+                    <input type="text" id="accountId" placeholder="e.g., 508" />
+                    <label for="apiKey">API Key:</label>
+                    <input
+                        type="text"
+                        id="apiKey"
+                        placeholder="e.g., your-api-key"
+                    />
+                    <div style="margin-top: 1rem">
+                        <button id="btn-init">Initialize SDK</button>
+                        <button id="btn-check-sdk">Check SDK Status</button>
+                        <button id="btn-reset">Reset SDK</button>
+                    </div>
+                </div>
+                <h2>2. Test API Calls</h2>
+                <div class="tab-container">
+                    <button class="tab active" data-tab="shopper">
+                        Shopper API
+                    </button>
+                    <button class="tab" data-tab="scanner">Scanner API</button>
+                </div>
+                <!-- SHOPPER API -->
+                <div id="tab-shopper" class="tab-content active">
+                    <h3>Account</h3>
+                    <p>
+                        Basic account/site configuration.
+                        <code>DRT.shopper.account</code>
+                    </p>
+                    <div class="btn-group">
+                        <button id="btn-theme">Get Theme</button>
+                        <button id="btn-disposition">Get Disposition</button>
+                        <button id="btn-root">Get Root Config</button>
+                        <button id="btn-landing">Get Landing Page</button>
+                    </div>
+                    <h3>Events</h3>
+                    <p>
+                        Event listings and details.
+                        <code>DRT.shopper.event</code>
+                    </p>
+                    <div class="btn-group">
+                        <button id="btn-events">Get All Events</button>
+                    </div>
+                    <div class="input-row">
+                        <label>Event:</label>
+                        <select
+                            id="eventSelect"
+                            style="flex: 1; padding: 0.4rem"
+                        >
+                            <option value="">
+                                -- Click "Get All Events" first --
+                            </option>
+                        </select>
+                        <button id="btn-event-details">
+                            Get Event Details
+                        </button>
+                    </div>
+                    <h3>Cart</h3>
+                    <p>
+                        Shopping cart operations. <code>DRT.shopper.cart</code>
+                    </p>
+                    <div class="btn-group">
+                        <button id="btn-cart">Get Cart</button>
+                        <button id="btn-delete-cart">Delete Cart</button>
+                    </div>
+                    <h3>Orders</h3>
+                    <p>
+                        Order receipts and management.
+                        <code>DRT.shopper.order</code>
+                    </p>
+                    <div class="input-row">
+                        <label>Order GUID:</label>
+                        <input
+                            type="text"
+                            id="orderGuid"
+                            placeholder="e.g., ABC123-..."
+                        />
+                        <button id="btn-receipt">Get Receipt</button>
+                    </div>
+                    <h3>Codes/Discounts</h3>
+                    <p>
+                        Promo codes and discounts. <code>DRT.shopper.code</code>
+                    </p>
+                    <div class="input-row">
+                        <label>Code:</label>
+                        <input
+                            type="text"
+                            id="promoCode"
+                            placeholder="e.g., SAVE10"
+                        />
+                        <button id="btn-validate-code">Validate Code</button>
+                    </div>
+                    <h3>Gift Cards</h3>
+                    <p>
+                        Gift card operations. <code>DRT.shopper.giftCard</code>
+                    </p>
+                    <div class="input-row">
+                        <label>Card #:</label>
+                        <input
+                            type="text"
+                            id="giftCardNumber"
+                            placeholder="Gift card number"
+                        />
+                        <button id="btn-gift-balance">Check Balance</button>
+                    </div>
+                </div>
+                <!-- SCANNER API -->
+                <div id="tab-scanner" class="tab-content">
+                    <h3>Scanning</h3>
+                    <p>
+                        Scanner app strings and utilities.
+                        <code>DRT.scanner.scanning</code>
+                    </p>
+                    <div class="btn-group">
+                        <button id="btn-strings">
+                            Get App Strings (no auth)
+                        </button>
+                    </div>
+                    <h3>Database</h3>
+                    <p>
+                        Scanner database operations.
+                        <code>DRT.scanner.database</code>
+                    </p>
+                    <div class="input-row">
+                        <label>Show Code:</label>
+                        <input
+                            type="text"
+                            id="scannerShowCode"
+                            placeholder="e.g., ABC123"
+                        />
+                    </div>
+                    <div class="input-row">
+                        <label>Device:</label>
+                        <input
+                            type="text"
+                            id="scannerDevice"
+                            placeholder="device name"
+                            value="test-device"
+                        />
+                        <label>User:</label>
+                        <input
+                            type="text"
+                            id="scannerUser"
+                            placeholder="username"
+                            value="test-user"
+                        />
+                    </div>
+                    <div class="btn-group">
+                        <button id="btn-scanner-db">Download Database</button>
+                        <button id="btn-scanner-query">Query Sections</button>
+                    </div>
+                    <h3>Orders</h3>
+                    <p>
+                        Order lookup for scanning.
+                        <code>DRT.scanner.orders</code>
+                    </p>
+                    <div class="input-row">
+                        <label>Phone:</label>
+                        <input
+                            type="text"
+                            id="scannerPhone"
+                            placeholder="Phone number"
+                        />
+                        <button id="btn-scanner-by-phone">
+                            Search by Phone
+                        </button>
+                    </div>
+                    <div class="input-row">
+                        <label>Name:</label>
+                        <input
+                            type="text"
+                            id="scannerName"
+                            placeholder="Buyer name"
+                        />
+                        <button id="btn-scanner-by-name">Search by Name</button>
+                    </div>
+                </div>
+            </div>
+            <div class="right-panel">
+                <h2>Output</h2>
+                <div id="status">
+                    SDK loaded! Initialize with your credentials.
+                </div>
+                <div id="output-container">
+                    <pre id="output">
+Initialize the SDK, then click a button to test...</pre
+                    >
+                </div>
+            </div>
+        </div>
+        <script type="module">
+            import { DRT } from '/public/sdk/latest/drt-sdk.js';
+            const out = document.getElementById('output');
+            const status = document.getElementById('status');
+            // Expose DRT globally for console testing
+            window.DRT = DRT;
+            function setStatus(msg, isError = false) {
+                status.textContent = msg;
+                status.className = isError ? 'error' : 'success';
+            }
+            function setOutput(data) {
+                out.textContent =
+                    typeof data === 'string'
+                        ? data
+                        : JSON.stringify(data, null, 4);
+            }
+            function requireInit() {
+                if (!DRT.isReady()) {
+                    setStatus(
+                        'SDK not initialized! Please initialize first.',
+                        true,
+                    );
+                    return false;
+                }
+                return true;
+            }
+            async function callApi(fn, description) {
+                setStatus(`Fetching ${description}...`, false);
+                try {
+                    const result = await fn();
+                    setStatus('Success!', false);
+                    setOutput(result);
+                } catch (err) {
+                    setStatus(`Error: ${err.message}`, true);
+                    setOutput({
+                        error: err.message,
+                        details: err.body || err.toString(),
+                    });
+                    console.error(err);
+                }
+            }
+            // Tab switching
+            document.querySelectorAll('.tab').forEach((tab) => {
+                tab.addEventListener('click', () => {
+                    document
+                        .querySelectorAll('.tab')
+                        .forEach((t) => t.classList.remove('active'));
+                    document
+                        .querySelectorAll('.tab-content')
+                        .forEach((c) => c.classList.remove('active'));
+                    tab.classList.add('active');
+                    document
+                        .getElementById(`tab-${tab.dataset.tab}`)
+                        .classList.add('active');
+                });
+            });
+            // Initialize SDK
+            document
+                .getElementById('btn-init')
+                .addEventListener('click', () => {
+                    const shopperGuid = document
+                        .getElementById('shopperGuid')
+                        .value.trim();
+                    const accountId = document
+                        .getElementById('accountId')
+                        .value.trim();
+                    const apiKey = document
+                        .getElementById('apiKey')
+                        .value.trim();
+                    if (!shopperGuid || !accountId || !apiKey) {
+                        setStatus('Please fill in all fields', true);
+                        return;
+                    }
+                    try {
+                        DRT.init({ shopperGuid, accountId, apiKey });
+                        setStatus('SDK Initialized!', false);
+                        setOutput({
+                            message: 'SDK initialized successfully!',
+                            config: { shopperGuid, accountId, apiKey: '***' },
+                        });
+                    } catch (err) {
+                        setStatus('Init failed: ' + err.message, true);
+                        setOutput({ error: err.message });
+                    }
+                });
+            // Check SDK status
+            document
+                .getElementById('btn-check-sdk')
+                .addEventListener('click', () => {
+                    setStatus('SDK Status', false);
+                    const config = DRT.getConfig();
+                    setOutput({
+                        isReady: DRT.isReady(),
+                        config: config
+                            ? {
+                                  shopperGuid: config.shopperGuid,
+                                  accountId: config.accountId,
+                                  apiKey: '***',
+                              }
+                            : null,
+                        availableServices: {
+                            shopper: Object.keys(DRT.shopper),
+                            scanner: Object.keys(DRT.scanner),
+                            portal: Object.keys(DRT.portal),
+                        },
+                    });
+                });
+            // Reset SDK
+            document
+                .getElementById('btn-reset')
+                .addEventListener('click', () => {
+                    DRT.reset();
+                    setStatus('SDK Reset!', false);
+                    setOutput({
+                        message: 'SDK has been reset. Initialize again to use.',
+                    });
+                });
+            // Create Shopper
+            document
+                .getElementById('btn-create-shopper')
+                .addEventListener('click', async () => {
+                    const studioId = parseInt(
+                        document.getElementById('createStudioId').value,
+                    );
+                    const apiKey = document
+                        .getElementById('createApiKey')
+                        .value.trim();
+                    if (!studioId) {
+                        setStatus('Please enter a Studio ID', true);
+                        return;
+                    }
+                    if (!apiKey) {
+                        setStatus('Please enter an API Key', true);
+                        return;
+                    }
+                    setStatus('Creating shopper session...', false);
+                    try {
+                        const result = await DRT.shopper.session.createSession({
+                            studioId,
+                        });
+                        setStatus('Shopper created!', false);
+                        setOutput(result);
+                        // Populate the form fields
+                        document.getElementById('shopperGuid').value =
+                            result.shopperGuid;
+                        document.getElementById('accountId').value =
+                            result.studioId;
+                        document.getElementById('apiKey').value = apiKey;
+                        // Auto-initialize
+                        DRT.init({
+                            shopperGuid: result.shopperGuid,
+                            accountId: String(result.studioId),
+                            apiKey,
+                        });
+                        setStatus(
+                            'Shopper created and SDK initialized!',
+                            false,
+                        );
+                    } catch (err) {
+                        setStatus(`Error: ${err.message}`, true);
+                        setOutput({
+                            error: err.message,
+                            details: err.body || err.toString(),
+                        });
+                    }
+                });
+            // ==================== SHOPPER API ====================
+            // Account
+            document
+                .getElementById('btn-theme')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.account.getTheme(), 'theme');
+                });
+            document
+                .getElementById('btn-disposition')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(
+                        () => DRT.shopper.account.getDisposition(),
+                        'disposition',
+                    );
+                });
+            document
+                .getElementById('btn-root')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.account.getRoot(), 'root config');
+                });
+            document
+                .getElementById('btn-landing')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(
+                        () => DRT.shopper.account.getLanding(),
+                        'landing page',
+                    );
+                });
+            // Events
+            document
+                .getElementById('btn-events')
+                .addEventListener('click', async () => {
+                    if (!requireInit()) return;
+                    setStatus('Fetching events...', false);
+                    try {
+                        const result = await DRT.shopper.event.getEvents();
+                        setStatus('Success!', false);
+                        setOutput(result);
+                        // Populate the dropdown
+                        const select = document.getElementById('eventSelect');
+                        select.innerHTML =
+                            '<option value="">-- Select an event --</option>';
+                        const events = result.events || result || [];
+                        events.forEach((event) => {
+                            const opt = document.createElement('option');
+                            opt.value = event.eventId || event.id;
+                            opt.textContent = `${event.eventId || event.id}: ${event.eventName || event.name || 'Unnamed'}`;
+                            select.appendChild(opt);
+                        });
+                        setStatus(`Loaded ${events.length} events`, false);
+                    } catch (err) {
+                        setStatus(`Error: ${err.message}`, true);
+                        setOutput({
+                            error: err.message,
+                            details: err.body || err.toString(),
+                        });
+                    }
+                });
+            document
+                .getElementById('btn-event-details')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const id = parseInt(
+                        document.getElementById('eventSelect').value,
+                    );
+                    if (!id) {
+                        setStatus(
+                            'Please select an event from the dropdown',
+                            true,
+                        );
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.event.getEventById(id),
+                        `event ${id}`,
+                    );
+                });
+            // Cart
+            document
+                .getElementById('btn-cart')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.cart.getCart(), 'cart');
+                });
+            document
+                .getElementById('btn-delete-cart')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    callApi(() => DRT.shopper.cart.deleteCart(), 'delete cart');
+                });
+            // Orders
+            document
+                .getElementById('btn-receipt')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const guid = document
+                        .getElementById('orderGuid')
+                        .value.trim();
+                    if (!guid) {
+                        setStatus('Please enter an Order GUID', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.order.getReceipt(guid),
+                        'receipt',
+                    );
+                });
+            // Codes
+            document
+                .getElementById('btn-validate-code')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const code = document
+                        .getElementById('promoCode')
+                        .value.trim();
+                    if (!code) {
+                        setStatus('Please enter a code', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.code.validateCode(code),
+                        `code validation`,
+                    );
+                });
+            // Gift Cards
+            document
+                .getElementById('btn-gift-balance')
+                .addEventListener('click', () => {
+                    if (!requireInit()) return;
+                    const num = document
+                        .getElementById('giftCardNumber')
+                        .value.trim();
+                    if (!num) {
+                        setStatus('Please enter a gift card number', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.shopper.giftCard.getBalance(num),
+                        'gift card balance',
+                    );
+                });
+            // ==================== SCANNER API ====================
+            document
+                .getElementById('btn-strings')
+                .addEventListener('click', () => {
+                    callApi(
+                        () => DRT.scanner.scanning.appControllerGetStrings(),
+                        'scanner strings',
+                    );
+                });
+            document
+                .getElementById('btn-scanner-db')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const device = document
+                        .getElementById('scannerDevice')
+                        .value.trim();
+                    const user = document
+                        .getElementById('scannerUser')
+                        .value.trim();
+                    if (!showCode) {
+                        setStatus('Please enter a Show Code', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.database.download(
+                                showCode,
+                                device,
+                                user,
+                                'en',
+                            ),
+                        `scanner database`,
+                    );
+                });
+            document
+                .getElementById('btn-scanner-query')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    if (!showCode) {
+                        setStatus('Please enter a Show Code', true);
+                        return;
+                    }
+                    callApi(
+                        () => DRT.scanner.database.query(showCode, 'sections'),
+                        `sections query`,
+                    );
+                });
+            document
+                .getElementById('btn-scanner-by-phone')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const phone = document
+                        .getElementById('scannerPhone')
+                        .value.trim();
+                    if (!showCode || !phone) {
+                        setStatus('Please enter Show Code and Phone', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.orders.ordersControllerGetOrdersByPhone(
+                                showCode,
+                                phone,
+                            ),
+                        `orders by phone`,
+                    );
+                });
+            document
+                .getElementById('btn-scanner-by-name')
+                .addEventListener('click', () => {
+                    const showCode = document
+                        .getElementById('scannerShowCode')
+                        .value.trim();
+                    const name = document
+                        .getElementById('scannerName')
+                        .value.trim();
+                    if (!showCode || !name) {
+                        setStatus('Please enter Show Code and Name', true);
+                        return;
+                    }
+                    callApi(
+                        () =>
+                            DRT.scanner.orders.ordersControllerGetOrdersByName(
+                                showCode,
+                                name,
+                            ),
+                        `orders by name`,
+                    );
+                });
+            // Auto-check on load
+            console.log('DRT SDK available at window.DRT for console testing');
+        </script>
+    </body>
+</html>