Embedded Apps

import { DrawerView } from '@stripe/ui-extension-sdk/ui';

const SyncDrawer = ({ onClose }) => {
  return (
    <DrawerView title="Brevo Sync Status" onClose={onClose}>
      <Box css={{ padding: 'large' }}>
        <SyncStatusContent />
      </Box>
    </DrawerView>
  );
};

import { ModalView } from '@stripe/ui-extension-sdk/ui';

const SetupModal = ({ onClose }) => {
  return (
    <ModalView title="Brevo Setup" onClose={onClose}>
      <Box css={{ padding: 'xlarge' }}>
        <SetupWizard />
      </Box>
    </ModalView>
  );
};

import {
  Box,           // Layout container
  Inline,        // Inline text/content
  Button,        // Action buttons
  Banner,        // Status messages
  Badge,         // Status indicators
  TextField,     // Text input
  Select,        // Dropdown selection
  Divider,       // Visual separator
  Spinner,       // Loading state
  Icon,          // Stripe icons
  Link,          // Navigation links
} from '@stripe/ui-extension-sdk/ui';

import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const MyView = ({ environment, userContext }: ExtensionContextValue) => {
  // Stripe account info
  const accountId = userContext?.account?.id;
  const accountName = userContext?.account?.name;

  // Current object context (e.g., customer being viewed)
  const customerId = environment.objectContext?.id;
  const mode = environment.mode; // 'live' or 'test'

  return <Box>{/* component */}</Box>;
};