Custom / headless storefronts & Device Intelligence setup

import {useEffect, useRef} from 'react';
import {useAnalytics} from '@shopify/hydrogen';

/**
 * SEON device-fingerprinting for the storefront.
 *
 * Loads the SEON SDK, generates an encrypted session via seon.getSession(),
 * and stores it in localStorage['seon_visitor_id'] — the key the installed
 * SEON web pixel reads on checkout_completed.
 *
 * Regenerated whenever the cart changes.
 *
 * Must be rendered inside <Analytics.Provider>.
 */

const SEON_ENV_KEY = 'seon_env';
const ENV_DEV = 'development';
const ENV_PROD = 'production';
const STORAGE_CART_TOKEN = 'seon_cart_token';
const STORAGE_VISITOR_ID = 'seon_visitor_id';

type SeonSessionConfig = {
  dnsResolverDomain: string;
  fieldTimeoutMs: number;
  geolocation: {canPrompt: boolean};
  networkTimeoutMs: number;
  region: string;
  silentMode: boolean;
};

declare global {
  interface Window {
    SEON_ENV?: string;
    seon?: {
      init?: () => void;
      getSession?: (config: SeonSessionConfig) => Promise<string>;
    };
  }
}

function getStoredEnv(): string | null {
  try {
    return sessionStorage.getItem(SEON_ENV_KEY);
  } catch {
    return null;
  }
}

function setStoredEnv(value: string): void {
  try {
    sessionStorage.setItem(SEON_ENV_KEY, value);
  } catch {
    // Avoid logging in customer browser.
  }
}

function getSeonEnv(): string {
  const urlEnv = new URLSearchParams(window.location.search).get('seon_env');

  if (urlEnv === ENV_DEV || urlEnv === ENV_PROD) {
    setStoredEnv(urlEnv);
    return urlEnv;
  }

  const stored = getStoredEnv();
  if (stored !== null) return stored;

  return window.SEON_ENV ?? ENV_PROD;
}

function isSeonDevelopment(): boolean {
  return getSeonEnv() === ENV_DEV;
}

function buildSeonSessionConfig(): SeonSessionConfig {
  const dnsResolverDomain = isSeonDevelopment()
    ? 'seondnsresolve.com'
    : 'seonintelligenceresolver.com';

  return {
    dnsResolverDomain,
    fieldTimeoutMs: 2000,
    geolocation: {canPrompt: false},
    networkTimeoutMs: 2000,
    region: 'eu', // Set to your SEON account region. See "Set your region".
    silentMode: true,
  };
}

function getSeonSdkUrl(): string {
  const prodUrl = 'https://cdn.seonintelligence.com/js/v6/agent.umd.js';
  const devUrl = 'https://cdn.seon.io/js/v6/agent.dev.umd.js';

  return isSeonDevelopment() ? devUrl : prodUrl;
}

async function seonPayload(token: string | null): Promise<void> {
  if (!token) return;

  const sdk = window.seon;
  if (!sdk || typeof sdk.getSession !== 'function') return;

  try {
    const data = await sdk.getSession(buildSeonSessionConfig());

    if (typeof data === 'string' && data.trim().length > 0) {
      localStorage.setItem(STORAGE_VISITOR_ID, data);
    }
  } catch {
    // Storefront: avoid logging in customer browser.
  }
}

async function ensureFingerprint(cartToken: string | null): Promise<void> {
  const hasVisitorId = Boolean(localStorage.getItem(STORAGE_VISITOR_ID));

  if (cartToken) {
    const storedToken = localStorage.getItem(STORAGE_CART_TOKEN);
    const tokenChanged = storedToken !== cartToken;

    if (tokenChanged) {
      localStorage.setItem(STORAGE_CART_TOKEN, cartToken);
      localStorage.removeItem(STORAGE_VISITOR_ID);
    }

    if (tokenChanged || !hasVisitorId) {
      await seonPayload(cartToken);
    }

    return;
  }

  if (!hasVisitorId) {
    await seonPayload(crypto.randomUUID());
  }
}

export function SeonFingerprint() {
  const {cart} = useAnalytics();
  const cartId = cart?.id ?? null;

  const injected = useRef(false);
  const sdkReady = useRef(false);
  const cartIdRef = useRef<string | null>(cartId);

  cartIdRef.current = cartId;

  // Inject the SEON SDK once on mount.
  useEffect(() => {
    if (injected.current) return;

    injected.current = true;

    try {
      const src = getSeonSdkUrl();
      const existing = document.querySelector<HTMLScriptElement>(
        `script[data-seon-sdk="${src}"]`,
      );

      if (existing) {
        sdkReady.current = true;
        void ensureFingerprint(cartIdRef.current);
        return;
      }

      const script = document.createElement('script');

      script.src = src;
      script.defer = true;
      script.dataset.seonSdk = src;
      script.setAttribute('fetchpriority', 'low');

      script.onload = () => {
        sdkReady.current = true;
        window.seon?.init?.();
        void ensureFingerprint(cartIdRef.current);
      };

      document.head.appendChild(script);
    } catch {
      // Storefront: avoid logging in customer browser.
    }
  }, []);

  // Regenerate when the cart changes, once the SDK is ready.
  useEffect(() => {
    if (!sdkReady.current) return;

    void ensureFingerprint(cartId);
  }, [cartId]);

  return null;
}

import {SeonFingerprint} from './components/SeonFingerprint';

// ...

return (
  <Analytics.Provider cart={data.cart} shop={data.shop} consent={data.consent}>
    <SeonFingerprint />

    <PageLayout {...data}>
      <Outlet />
    </PageLayout>
  </Analytics.Provider>
);

const {nonce, header, NonceProvider} = createContentSecurityPolicy({
  shop: {
    checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN,
    storeDomain: context.env.PUBLIC_STORE_DOMAIN,
  },

  // SEON device-fingerprinting SDK.
  scriptSrc: [
    "'self'",
    'https://cdn.seonintelligence.com',
    'https://cdn.seon.io',
  ],

  connectSrc: [
    "'self'",
    'https://*.seonintelligenceresolver.com',
    'https://*.seondnsresolve.com',
    'https://*.seonintelligence.com',
    'https://*.seon.io',
  ],
});

region: 'eu', // or 'us'