import { createApp } from '@launchmystore/app-bridge';

const app = createApp({
  apiKey: 'your-app-client-id',
  host: new URLSearchParams(location.search).get('host'), // base64-encoded origin
});

// Fire-and-forget: show a toast on the host
app.dispatch('TOAST_SHOW', {
  message: 'Saved!',
  duration: 3000,
  type: 'success',
});

// Round-trip: open a resource picker and wait for the selection
const result = await app.dispatchAndWait('RESOURCE_PICKER_OPEN', {
  resourceType: 'Product',
  multiple: true,
});
console.log(result.selection);

app.dispatch('TOAST_SHOW', { message: 'Hello!', type: 'info' });
app.dispatch('MODAL_CLOSE');                  // no payload
app.dispatch('REDIRECT', { url: '/orders' });

const { token } = await app.dispatchAndWait('SESSION_TOKEN_REQUEST');

const cart = await app.dispatchAndWait('CART_GET');
console.log(cart.items, cart.itemCount, cart.currency);

try {
  const result = await app.dispatchAndWait('RESOURCE_PICKER_OPEN', {
    resourceType: 'Product',
  });
} catch (err) {
  // No `err.code` — branch on err.message
  if (err.message.includes('timeout')) {
    console.error('Host did not respond in 10s');
  } else {
    console.error(err.message);
  }
}

const unsubscribe = app.subscribe('MODAL_PRIMARY_ACTION', (payload) => {
  console.log('User clicked primary button on modal', payload.modalId);
});

// Later
unsubscribe();

const token = await app.getSessionToken();

const response = await fetch('/api/orders', {
  headers: { Authorization: `Bearer ${token}` },
});

window.parent.postMessage({
  type: 'APP_BRIDGE_ACTION',
  action: 'TOAST_SHOW',           // screaming-snake action name
  id: 'ab_1700000000000_1',       // round-trip correlation id (any unique string)
  payload: {
    message: 'Saved',
    apiKey: 'your-app-client-id', // the SDK appends this for you
  },
}, '*');

{
  type: 'APP_BRIDGE_RESPONSE',
  action: 'TOAST_SHOW',
  id: 'ab_1700000000000_1',
  payload: { ok: true },
  // error?: string — present on failure
}

window.parent.postMessage({
  type: 'APP_BRIDGE_RESIZE',
  extensionId: '<your manifest handle>',  // required so the host knows which iframe to resize
  height: document.body.scrollHeight,
}, '*');

npm install @launchmystore/app-bridge @launchmystore/app-bridge-react

import { AppBridgeProvider, useToast, useSessionToken } from '@launchmystore/app-bridge-react';

function Root() {
  return (
    <AppBridgeProvider
      config={{
        apiKey: process.env.NEXT_PUBLIC_APP_CLIENT_ID,
        host: new URLSearchParams(location.search).get('host'),
      }}
    >
      <SaveButton />
    </AppBridgeProvider>
  );
}

function SaveButton() {
  const toast = useToast();      // { show, success, error, warning, info }
  const { getToken } = useSessionToken();

  const onClick = async () => {
    const token = await getToken();
    const res = await fetch('/api/save', {
      method: 'POST',
      headers: { Authorization: `Bearer ${token}` },
    });
    if (res.ok) toast.success('Saved!');
    else        toast.error('Save failed');
  };

  return <button onClick={onClick}>Save</button>;
}

const result = await app.dispatchAndWait('RESOURCE_PICKER_OPEN', {
  resourceType: 'Product',       // PascalCase or lowercase both accepted
  multiple: true,
  initialSelectionIds: [{ id: 'prod_abc' }],
  filter: { query: 'shirt', variants: true },
});

if (!result.cancelled) {
  console.log(result.selection); // array of selected entities
}

import { ResourcePicker } from '@launchmystore/app-bridge/actions';

ResourcePicker.create(app, { resourceType: 'Customer', multiple: false })
  .subscribe('select', (payload) => console.log(payload.selection))
  .subscribe('cancel', () => console.log('cancelled'))
  .dispatch();

const token = await app.getSessionToken();

{
  "iss": "https://launchmystore.io",
  "aud": "your-app-client-id",
  "sub": "merchant-store-id (immutable store UUID)",
  "exp": 1700003600,
  "iat": 1700000000,
  "nbf": 1700000000,
  "sid": "unique-token-id"
}

import { useApi } from '@launchmystore/app-bridge-react';

function ProductBlock() {
  const { data, restApi } = useApi();

  // Identify the shop + user
  const { domainSlug, shop, user } = data;
  console.log(`Running on ${shop?.shopDomain} for ${user?.email}`);

  // Authenticated REST call — restApi wires `Authorization` automatically.
  restApi.get(`/api/v1/my-app/config?domainSlug=${domainSlug}`);
}