تضمين العناصر

import {
  EndorsedProvider,
  EnvelopeStatus,
  SignerInfo,
  SignatureField,
  useSigningSession,
} from '@endorsed/elements';

// 1. Wrap once at the app root (or per-signing-route).
export function App({ children }: { children: React.ReactNode }) {
  return (
    <EndorsedProvider
      baseUrl={process.env.NEXT_PUBLIC_ENDORSED_BASE_URL}
      // No API key in the browser. The provider only holds config.
    >
      {children}
    </EndorsedProvider>
  );
}

// 2. Render the signing surface. Compose these primitives into your
//    own page shell — headers, footers, and layout stay yours.
export function SigningPage({ sessionToken }: { sessionToken: string }) {
  const { status, envelope, signer } = useSigningSession(sessionToken);

  if (status === 'loading') return <p>Loading signing session…</p>;
  if (status === 'expired' || status === 'revoked') return <p>This link has expired.</p>;

  return (
    <section>
      <EnvelopeStatus value={envelope.status} />
      <SignerInfo values={{ name: signer.name, email: signer.email }} />
      <SignatureField
        onSubmitted={(result) => {
          // Advance your product state — redirect, mark task done, etc.
          console.log('Signature captured', result.signatureId);
        }}
      />
    </section>
  );
}