@tagadapay/plugin-sdk 4.0.6 → 4.1.0

package/README.md

@@ -2,9 +2,9 @@
 
 A comprehensive React SDK for building plugins on the TagadaPay platform. Create custom checkout experiences, landing pages, and interactive components with automatic configuration injection and advanced routing capabilities.
 
-> **🚀 V2 Now Available!** The new V2 architecture features TanStack Query integration, improved TypeScript support, and better performance. [See V2 Architecture](#-v2-architecture) for details.
+> **🚀 V2 is the supported surface.** TanStack Query integration, improved TypeScript support, and better performance. [See V2 Architecture](#-v2-architecture) for details.
 >
-> **Recommended**: Use `@tagadapay/plugin-sdk/v3` for new projects. V1 (`/react`) is still supported for existing projects.
+> **Recommended**: Use `@tagadapay/plugin-sdk/v2` for new projects. V1 (`/react`) is still supported for existing projects but no longer receives new features.
 
 ## 📚 Documentation
 
@@ -25,7 +25,6 @@ A comprehensive React SDK for building plugins on the TagadaPay platform. Create
 - **[useCheckout (V1)](./docs/README-useCheckout.md)** - Legacy checkout state management
 - **[setCheckoutInfo](./docs/README-setCheckoutInfo.md)** - Customer information and validation
 - **[useOffers (V1)](./docs/README-useOffers.md)** - Legacy dynamic pricing
-- **[usePromotionCodes](./docs/README-usePromotionCodes.md)** - Legacy promotion code management
 - **[Money utilities](./docs/README-money.md)** - Currency formatting and calculations
 - **[URL utilities](./docs/README-urlUtils.md)** - Navigation and routing helpers
 
@@ -147,7 +146,7 @@ import {
   useISOData,
   useCheckout,
   formatMoney,
-} from '@tagadapay/plugin-sdk/v3';
+} from '@tagadapay/plugin-sdk/v2';
 
 function MyPlugin() {
   const { config, storeId, accountId, basePath, loading } = usePluginConfig();
@@ -200,7 +199,7 @@ export default App;
 
 ### What's New in V2
 
-The TagadaPay Plugin SDK v3 introduces a clean architecture with significant improvements:
+The TagadaPay Plugin SDK V2 introduces a clean architecture with significant improvements:
 
 #### **🔄 TanStack Query Integration**
 
@@ -219,7 +218,7 @@ The TagadaPay Plugin SDK v3 introduces a clean architecture with significant imp
 
 ```tsx
 // V2 (Recommended)
-import { useCheckout, useOffers, TagadaProvider } from '@tagadapay/plugin-sdk/v3';
+import { useCheckout, useOffers, TagadaProvider } from '@tagadapay/plugin-sdk/v2';
 
 // Legacy (Still supported)
 import { useCheckout, useOffers, TagadaProvider } from '@tagadapay/plugin-sdk/react';
@@ -258,7 +257,7 @@ import {
   useProducts,
   usePluginConfig,
   formatMoney,
-} from '@tagadapay/plugin-sdk/v3';
+} from '@tagadapay/plugin-sdk/v2';
 
 function CheckoutPage() {
   const [checkoutToken, setCheckoutToken] = useState<string>();
@@ -356,7 +355,7 @@ function App() {
 
 ```tsx
 import React from 'react';
-import { TagadaProvider, useCheckout, useOffers, formatMoney } from '@tagadapay/plugin-sdk/v3';
+import { TagadaProvider, useCheckout, useOffers, formatMoney } from '@tagadapay/plugin-sdk/v2';
 
 // Component 1: Cart Summary
 function CartSummary({ checkoutToken }: { checkoutToken: string }) {
@@ -412,7 +411,7 @@ function CheckoutWithOffers() {
 
 ```tsx
 import React from 'react';
-import { useCheckout } from '@tagadapay/plugin-sdk/v3';
+import { useCheckout } from '@tagadapay/plugin-sdk/v2';
 
 function QuantitySelector({
   checkoutToken,
@@ -556,7 +555,7 @@ interface TagadaProviderProps {
 #### V2 Enhanced Provider Features
 
 ```tsx
-import { TagadaProvider } from '@tagadapay/plugin-sdk/v3';
+import { TagadaProvider } from '@tagadapay/plugin-sdk/v2';
 
 function App() {
   return (
@@ -578,7 +577,7 @@ function App() {
 }
 ```
 
-> **Version Compatibility:** V2 features require `@tagadapay/plugin-sdk/v3`. The `blockUntilSessionReady` option was added in v2.3.0. For older versions, the blocking behavior was the default and only option.
+> **Version Compatibility:** V2 features require `@tagadapay/plugin-sdk/v2`. The `blockUntilSessionReady` option was added in v2.3.0. For older versions, the blocking behavior was the default and only option.
 
 ### Development vs Production
 
@@ -819,7 +818,7 @@ const {
 **Example:**
 
 ```tsx
-import { useStoreConfig } from '@tagadapay/plugin-sdk/v3';
+import { useStoreConfig } from '@tagadapay/plugin-sdk/v2';
 
 function StoreInfo() {
   const { storeConfig, isLoading } = useStoreConfig();
@@ -898,7 +897,7 @@ import {
   useInvalidateQuery,
   usePreloadQuery,
   queryKeys,
-} from '@tagadapay/plugin-sdk/v3';
+} from '@tagadapay/plugin-sdk/v2';
 
 // Custom API queries
 const { data, isLoading } = useApiQuery({
@@ -928,7 +927,7 @@ preloadCheckout({
 Enhanced money formatting with better TypeScript support:
 
 ```typescript
-import { formatMoney, convertCurrency, getCurrencyInfo } from '@tagadapay/plugin-sdk/v3';
+import { formatMoney, convertCurrency, getCurrencyInfo } from '@tagadapay/plugin-sdk/v2';
 
 // Format money with automatic currency detection
 const formatted = formatMoney(2999, 'USD'); // "$29.99"
@@ -957,7 +956,7 @@ import {
   ProductsResource,
   PaymentsResource,
   PluginConfigUtils,
-} from '@tagadapay/plugin-sdk/v3';
+} from '@tagadapay/plugin-sdk/v2';
 
 // Use core functions directly (useful for server-side or non-React contexts)
 const checkoutResource = new CheckoutResource(apiClient);
@@ -973,7 +972,7 @@ const isValid = PluginConfigUtils.validateConfig(config);
 V2 includes built-in debugging tools:
 
 ```tsx
-import { TagadaProvider } from '@tagadapay/plugin-sdk/v3';
+import { TagadaProvider } from '@tagadapay/plugin-sdk/v2';
 
 function App() {
   return (
@@ -1120,7 +1119,7 @@ const handleTouchStart = (e) => {
 ### Multi-language Support
 
 ```typescript
-import { useTranslation } from '@tagadapay/plugin-sdk';
+import { useTranslation } from '@tagadapay/plugin-sdk/v2';
 
 function CheckoutForm() {
   const { t } = useTranslation();
@@ -1137,7 +1136,7 @@ function CheckoutForm() {
 ### Currency Support
 
 ```typescript
-import { useCurrency } from '@tagadapay/plugin-sdk';
+import { useCurrency } from '@tagadapay/plugin-sdk/v2';
 
 function PriceDisplay({ amount }) {
   const { formatPrice, currency } = useCurrency();
@@ -1146,39 +1145,19 @@ function PriceDisplay({ amount }) {
 }
 ```
 
-## 📊 Analytics & Monitoring
+## 📊 Analytics & Tracking
 
-### Event Tracking
+Pixel tracking (Facebook, TikTok, Snapchat, GTM) is configured per-step in
+the CRM step editor and auto-bootstrapped at runtime — no plugin code is
+required. For external (non-Tagadapay-hosted) pages, the lightweight
+external tracker is available:
 
 ```typescript
-import { trackEvent } from '@tagadapay/plugin-sdk';
-
-// Track user interactions
-trackEvent('checkout_started', {
-  product_id: 'prod_123',
-  value: 2999,
-  currency: 'USD',
-});
-
-// Track conversions
-trackEvent('purchase_completed', {
-  transaction_id: 'txn_456',
-  value: 2999,
-  currency: 'USD',
-});
+import { TagadaExternalTracker } from '@tagadapay/plugin-sdk/external-tracker';
 ```
 
-### Performance Monitoring
-
-```typescript
-import { performance } from '@tagadapay/plugin-sdk';
-
-// Measure load times
-performance.mark('checkout-start');
-// ... checkout logic
-performance.mark('checkout-end');
-performance.measure('checkout-duration', 'checkout-start', 'checkout-end');
-```
+See [External Page Tracker docs](../../mintlify/developer-tools/web-integration/external-page-tracker.mdx)
+for the full integration guide.
 
 ## 🤝 Contributing
 

package/dist/external-tracker.js

@@ -1,5 +1,5 @@
 /**
- * TagadaPay External Tracker v4.0.6
+ * TagadaPay External Tracker v4.1.0
  * CDN Bundle - Standalone tracking for external pages (Debug Build)
  * @license MIT
  */
@@ -1144,13 +1144,17 @@ var TagadaTrackerBundle = (() => {
     }
     return scripts.length > 0 ? scripts : void 0;
   }
+  function splitIds(rawId) {
+    if (!rawId) return [];
+    return rawId.split(/[;,]/).map((id) => id.trim()).filter((id) => id.length > 0);
+  }
   function splitPixelConfig(px) {
-    const idField = "containerId" in px ? "containerId" : "pixelId";
-    const rawId = px[idField];
-    if (!rawId || !rawId.includes(";") && !rawId.includes(",")) return [px];
-    const ids = rawId.split(/[;,]/).map((id) => id.trim()).filter((id) => id.length > 0);
-    if (ids.length <= 1) return [px];
-    return ids.map((id) => __spreadProps(__spreadValues({}, px), { [idField]: id }));
+    if ("containerId" in px) {
+      const ids2 = splitIds(px.containerId);
+      return ids2.length === 0 ? [px] : ids2.map((id) => __spreadProps(__spreadValues({}, px), { containerId: id }));
+    }
+    const ids = splitIds(px.pixelId);
+    return ids.length === 0 ? [px] : ids.map((id) => __spreadProps(__spreadValues({}, px), { pixelId: id }));
   }
   function getAssignedPixels() {
     const stepConfig = getAssignedStepConfig();
@@ -3572,48 +3576,111 @@ var TagadaTrackerBundle = (() => {
     }
     return [];
   }
-  function injectScript(script, index) {
-    const position = script.position || "body-end";
-    const scriptId = "tagada-stepconfig-script-".concat(index);
-    if (document.getElementById(scriptId)) {
-      return;
+  function classifyLooseChunk(chunk) {
+    if (!chunk || /^<!--[\s\S]*?-->$/.test(chunk)) return null;
+    const looksLikeMarkup = /^</.test(chunk) || /<\/?[a-zA-Z][\w-]*[\s/>]/.test(chunk);
+    return looksLikeMarkup ? { type: "html", html: chunk } : { type: "inline", code: chunk };
+  }
+  function parseScriptContent(content) {
+    const trimmed = content.trim();
+    if (!/<(?:script|noscript)[\s>]/i.test(trimmed)) {
+      return trimmed ? [{ type: "inline", code: trimmed }] : [];
+    }
+    const elements = [];
+    const tagRegex = /<(script|noscript)([^>]*)>([\s\S]*?)<\/\1>/gi;
+    let lastIndex = 0;
+    let match2;
+    while ((match2 = tagRegex.exec(trimmed)) !== null) {
+      const between = classifyLooseChunk(trimmed.slice(lastIndex, match2.index).trim());
+      if (between) elements.push(between);
+      const [, tagName, attrs, body] = match2;
+      if (tagName.toLowerCase() === "noscript") {
+        if (body.trim()) elements.push({ type: "noscript", html: body.trim() });
+      } else {
+        const srcMatch = attrs.match(/src=["']([^"']+)["']/i);
+        if (srcMatch) {
+          elements.push({
+            type: "external",
+            src: srcMatch[1],
+            async: /\basync\b/i.test(attrs),
+            defer: /\bdefer\b/i.test(attrs)
+          });
+        }
+        if (body.trim()) elements.push({ type: "inline", code: body.trim() });
+      }
+      lastIndex = match2.index + match2[0].length;
     }
-    let scriptBody = script.content.trim();
-    const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
-    if (scriptTagMatch) {
-      scriptBody = scriptTagMatch[1].trim();
-    }
-    if (!scriptBody) return;
-    const wrappedScript = "(function() {\n  try {\n    // Script: " + script.name + "\n" + scriptBody + '\n  } catch (error) {\n    console.error("[TagadaPay] StepConfig script error:", error);\n  }\n})();';
-    const scriptElement = document.createElement("script");
-    scriptElement.id = scriptId;
-    scriptElement.setAttribute("data-tagada-stepconfig-script", "true");
-    scriptElement.setAttribute("data-script-name", script.name);
-    scriptElement.textContent = wrappedScript;
+    const trailing = classifyLooseChunk(trimmed.slice(lastIndex).trim());
+    if (trailing) elements.push(trailing);
+    return elements;
+  }
+  function injectAtPosition(element, position) {
     switch (position) {
       case "head-start":
-        if (document.head.firstChild) {
-          document.head.insertBefore(scriptElement, document.head.firstChild);
-        } else {
-          document.head.appendChild(scriptElement);
-        }
+        if (document.head.firstChild) document.head.insertBefore(element, document.head.firstChild);
+        else document.head.appendChild(element);
         break;
       case "head-end":
-        document.head.appendChild(scriptElement);
+        document.head.appendChild(element);
         break;
       case "body-start":
-        if (document.body.firstChild) {
-          document.body.insertBefore(scriptElement, document.body.firstChild);
-        } else {
-          document.body.appendChild(scriptElement);
-        }
+        if (document.body.firstChild) document.body.insertBefore(element, document.body.firstChild);
+        else document.body.appendChild(element);
         break;
       case "body-end":
       default:
-        document.body.appendChild(scriptElement);
+        document.body.appendChild(element);
         break;
     }
   }
+  function injectScript(script, index) {
+    const position = script.position || "body-end";
+    const content = script.content.trim();
+    if (!content) return;
+    if (document.querySelector('[data-tagada-stepconfig-index="'.concat(index, '"]'))) {
+      return;
+    }
+    parseScriptContent(content).forEach((element, elemIndex) => {
+      const elemId = "tagada-stepconfig-script-".concat(index, "-").concat(elemIndex);
+      if (element.type === "external") {
+        const el = document.createElement("script");
+        el.id = elemId;
+        el.setAttribute("data-tagada-stepconfig-script", "true");
+        el.setAttribute("data-tagada-stepconfig-index", String(index));
+        el.setAttribute("data-script-name", script.name);
+        el.src = element.src;
+        if (element.async) el.async = true;
+        if (element.defer) el.defer = true;
+        injectAtPosition(el, position);
+      } else if (element.type === "inline") {
+        const el = document.createElement("script");
+        el.id = elemId;
+        el.setAttribute("data-tagada-stepconfig-script", "true");
+        el.setAttribute("data-tagada-stepconfig-index", String(index));
+        el.setAttribute("data-script-name", script.name);
+        el.textContent = "(function() {\n  try {\n    // Script: " + script.name + "\n" + element.code + '\n  } catch (error) {\n    console.error("[TagadaPay] StepConfig script error:", error);\n  }\n})();';
+        injectAtPosition(el, position);
+      } else if (element.type === "noscript") {
+        const el = document.createElement("noscript");
+        el.id = elemId;
+        el.setAttribute("data-tagada-stepconfig-script", "true");
+        el.setAttribute("data-tagada-stepconfig-index", String(index));
+        el.innerHTML = element.html;
+        injectAtPosition(el, position);
+      } else if (element.type === "html") {
+        const template = document.createElement("template");
+        template.innerHTML = element.html;
+        Array.from(template.content.childNodes).forEach((node) => {
+          if (node.nodeType !== 1) return;
+          const el = node;
+          el.setAttribute("data-tagada-stepconfig-script", "true");
+          el.setAttribute("data-tagada-stepconfig-index", String(index));
+          el.setAttribute("data-script-name", script.name);
+          injectAtPosition(el, position);
+        });
+      }
+    });
+  }
   function injectStepConfigScripts() {
     const scripts = parseStepConfigScripts();
     if (scripts.length === 0) return;