### Create a Next.js Project using CLI

Source: https://simplepdf.com/help/how-to/add-simple-pdf-editor-to-react-next-app

This command initializes a new Next.js project. It interactively prompts for project name, TypeScript usage, and ESLint configuration. Ensure you have Node.js and npm/yarn/pnpm installed.

```bash
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
```

--------------------------------

### Deploy Supabase Edge Function

Source: https://simplepdf.com/help/how-to/save-edited-pdf-form-submissions-to-supabase

Instructions to install dependencies and deploy the SimplePDF Edge Function to Supabase. This function handles incoming webhook data from SimplePDF.

```bash
npm i
npm run deploy
```

--------------------------------

### Get Document

Source: https://simplepdf.com/api

Retrieve details for a specific document using its unique identifier. This endpoint also provides a presigned URL for downloading the document.

```APIDOC
## GET /documents/{document_id}

### Description
Retrieve a specific document.

### Method
GET

### Endpoint
/documents/{document_id}

### Parameters
#### Path Parameters
- **document_id** (string) - Required - The unique identifier (UUID) of the document to retrieve.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the document.
- **name** (string) - The name of the document.
- **type** (string) - The type of the document ('edit_and_submit' or 'submit'). 'edit_and_submit' allows field modification before submission, while 'submit' does not.
- **embed_url** (string) - A URL to embed the document.
- **created_at** (string) - The timestamp when the document was created.
- **updated_at** (string) - The timestamp when the document was last updated.
- **url** (string) - A presigned URL to download the document.

#### Response Example
```json
{
  "id": "05666d45-96d0-42ce-b24b-f1f1af228f57",
  "name": "Document.pdf",
  "type": "edit_and_submit",
  "embed_url": "https://your_company_identifier.simplepdf.com/documents/05666d45-96d0-42ce-b24b-f1f1af228f57",
  "created_at": "2025-03-09T21:35:10.599Z",
  "updated_at": "2025-04-20T13:40:46.594Z",
  "url": "https://presigned-url-to-download-the-document"
}
```
```

--------------------------------

### GET /documents/{document_id}/submissions/{submission_id}

Source: https://simplepdf.com/api

Retrieves details of a specific submission for a given document.

```APIDOC
## GET /documents/{document_id}/submissions/{submission_id}

### Description
Retrieve a specific submission.

### Method
GET

### Endpoint
/documents/{document_id}/submissions/{submission_id}

### Parameters
#### Path Parameters
- **document_id** (string) - Required - The unique identifier of the document.
- **submission_id** (string) - Required - The unique identifier of the submission.

### Responses
#### Success Response (200)
- **id** (string) - The unique identifier of the submission.
- **submitted_at** (string) - The timestamp when the submission was made.
- **context** (object | null) - Additional context about the submission (e.g., environment, customer_id).
- **url** (string) - A presigned URL to download the submission content.

#### Response Example
```json
{
  "id": "05666d45-96d0-42ce-b24b-f1f1af228f57",
  "submitted_at": "2025-03-09T21:35:10.599Z",
  "context": {
    "environment": "production",
    "customer_id": "123"
  },
  "url": "https://presigned-url-to-download-the-submission"
}
```
```

--------------------------------

### Example Context for SimplePDF Webhook

Source: https://simplepdf.com/help/how-to/configure-webhooks-pdf-form-submissions

This JSON object demonstrates how to specify contextual information that can be sent along with PDF submission webhooks. This is useful for tracking submissions across different environments or associating them with specific users.

```json
{
  "environment": "production",
  "customer_id": "123"
}
```

--------------------------------

### GET /documents/{document_id}/submissions

Source: https://simplepdf.com/api

Retrieves a paginated list of all submissions for a specific document.

```APIDOC
## GET /documents/{document_id}/submissions

### Description
Retrieve the paginated list of submissions for a given document.

### Method
GET

### Endpoint
/documents/{document_id}/submissions

### Parameters
#### Path Parameters
- **document_id** (string) - Required - The unique identifier of the document.

#### Query Parameters
- **cursor** (string) - Optional - A cursor for fetching the next page of results.
- **limit** (number) - Optional - The maximum number of submissions to return per page (default: 25, max: 100).

### Responses
#### Success Response (200)
- **next** (string | null) - A cursor for the next page of results, or null if there are no more pages.
- **has_more** (boolean) - Indicates if there are more submissions available.
- **data** (array) - An array of submission objects.
  - **id** (string) - The unique identifier of the submission.
  - **submitted_at** (string) - The timestamp when the submission was made.
  - **context** (object | null) - Additional context about the submission (e.g., environment, customer_id).

#### Response Example
```json
{
  "next": "some_cursor_string",
  "has_more": true,
  "data": [
    {
      "id": "05666d45-96d0-42ce-b24b-f1f1af228f57",
      "submitted_at": "2025-03-09T21:35:10.599Z",
      "context": {
        "environment": "production",
        "customer_id": "123"
      }
    }
  ]
}
```
```

--------------------------------

### Install SimplePDF React Embed Dependency

Source: https://simplepdf.com/help/how-to/add-simple-pdf-editor-to-react-next-app

This command adds the SimplePDF React embed package to your Next.js project's dependencies. This package allows you to easily embed the SimplePDF editor within your React components. Make sure you are in your project's root directory.

```bash
yarn add @simplepdf/react-embed-pdf
# or
npm install @simplepdf/react-embed-pdf
```

--------------------------------

### SimplePDF Submission Webhook Payload Example

Source: https://simplepdf.com/help/how-to/configure-webhooks-pdf-form-submissions

This JSON payload represents the data sent by SimplePDF when a new PDF form is submitted. It includes details about the document, the submission itself (like URL and timestamp), and contextual information provided during integration.

```json
{
  "type": "submission.created",
  "data": {
    "document": {
      "id": "b7615a68-9e1f-4eac-bd20-5e80632a4d9e",
      "name": "your_document.pdf"
    },
    "submission": {
      "id": "80146d5b-a068-490f-8eb9-fe393ba11396",
      "submitted_at": "2023-06-04T11:54:58.995Z",
      "url": "short_lived_15min_url"
    },
    "context": {
      "environment": "production",
      "customer_id": "123"
    }
  }
}
```

--------------------------------

### Configure API Reference Theme

Source: https://simplepdf.com/api

Sets the visual theme for the API reference documentation. This is achieved by stringifying a configuration object and assigning it to a data attribute on an HTML element.

```javascript
var configuration = {
  theme: 'default',
};
document.getElementById('api-reference').dataset.configuration = JSON.stringify(configuration);
```

--------------------------------

### List Documents

Source: https://simplepdf.com/api

Retrieve a paginated list of your uploaded documents. You can control the number of documents returned per page using the 'limit' parameter and navigate through pages using the 'cursor'.

```APIDOC
## GET /documents

### Description
Retrieve the paginated list of documents.

### Method
GET

### Endpoint
/documents

### Parameters
#### Query Parameters
- **cursor** (string) - Optional - Used for pagination to specify the starting point for the next set of results.
- **limit** (number) - Optional - The maximum number of documents to return in a single response. Defaults to 25, with a maximum of 100.

### Response
#### Success Response (200)
- **next** (string) - The cursor for the next page of results, or null if there are no more pages.
- **has_more** (boolean) - Indicates if there are more documents available beyond the current page.
- **data** (array) - An array of document objects, each containing:
  - **id** (string) - The unique identifier for the document.
  - **name** (string) - The name of the document.
  - **type** (string) - The type of the document ('edit_and_submit' or 'submit'). 'edit_and_submit' allows field modification before submission, while 'submit' does not.
  - **embed_url** (string) - A URL to embed the document.
  - **created_at** (string) - The timestamp when the document was created.
  - **updated_at** (string) - The timestamp when the document was last updated.

#### Response Example
```json
{
  "next": "some_cursor_string",
  "has_more": true,
  "data": [
    {
      "id": "05666d45-96d0-42ce-b24b-f1f1af228f57",
      "name": "Document.pdf",
      "type": "edit_and_submit",
      "embed_url": "https://your_company_identifier.simplepdf.com/documents/05666d45-96d0-42ce-b24b-f1f1af228f57",
      "created_at": "2025-03-09T21:35:10.599Z",
      "updated_at": "2025-04-20T13:40:46.594Z"
    }
  ]
}
```
```

--------------------------------

### Clean Next.js Page Structure

Source: https://simplepdf.com/help/how-to/add-simple-pdf-editor-to-react-next-app

This code snippet shows the basic structure of a Next.js page after removing default content and updating the title. It sets up the necessary imports for Head, Inter, styles, and prepares the main section for content.

```javascript
import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
      </main>
    </>
  )
}
```

--------------------------------

### Define Delete Document Submission Operation (OpenAPI)

Source: https://simplepdf.com/api

Defines the 'deleteDocumentSubmission' operation in an API, allowing for the irreversible deletion of a document submission and its associated file. It includes path parameters for document and submission IDs and specifies responses for success and various error conditions.

```yaml
delete:
  operationId: "deleteDocumentSubmission"
  description: "Delete the submission. This action is irreversible. Deleting the submission will also delete the stored file."
  tags:
    - "Submission"
  security:
    - Authorization: []
  parameters:
    - in: path
      name: document_id
      schema:
        type: string
        format: uuid
      required: true
    - in: path
      name: submission_id
      schema:
        type: string
        format: uuid
      required: true
  responses:
    "200":
      description: "Successful response"
      content:
        application/json:
          schema:
            type: object
            properties:
              id:
                type: string
                example: "05666d45-96d0-42ce-b24b-f1f1af228f57"
            required: ["id"]
    "400":
      description: "Bad request"
      content:
        application/json:
          schema:
            $ref: "#/components/schemas/error.BAD_REQUEST"
    "401":
      description: "Unauthorized"
      content:
        application/json:
          schema:
            $ref: "#/components/schemas/error.UNAUTHORIZED"
    "404":
      description: "Not found"
      content:
        application/json:
          schema:
            $ref: "#/components/schemas/error.NOT_FOUND"
    "429":
      description: "Too many requests"
      content:
        application/json:
          schema:
            $ref: "#/components/schemas/error.TOO_MANY_REQUESTS"
```

--------------------------------

### Configure Supabase RLS Policy for Edge Function

Source: https://simplepdf.com/help/how-to/save-edited-pdf-form-submissions-to-supabase

SQL command to alter the Row Level Security (RLS) policy for the 'simplepdf_submissions' table. This allows the anonymous edge function to insert rows, with a recommendation for stricter policies in production.

```sql
alter policy "Allow edge function to insert into simplepdf_submissions"
  on "public"."simplepdf_submissions"
  to anon
  with check (true);
```

--------------------------------

### Define HTTP Error Responses (OpenAPI)

Source: https://simplepdf.com/api

Defines standard error responses for API operations using OpenAPI specifications. This includes schemas for Bad Request (400), Unauthorized (401), Not Found (404), and Too Many Requests (429) errors.

```yaml
components:
  schemas:
    error.BAD_REQUEST:
      type: object
      properties:
        error:
          code:
            type: string
            description: The error code
            example: "bad_request"
          message:
            type: string
            description: The error message
            example: "Bad request"
      required: ["message", "code"]
      title: "Bad request error (400)"
      description: "The error information"
      example: {"error": {"code": "bad_request", "message": "Bad request"}}
    error.UNAUTHORIZED:
      type: object
      properties:
        error:
          code:
            type: string
            description: The error code
            example: "unauthorized"
          message:
            type: string
            description: The error message
            example: "Unauthorized"
      required: ["message", "code"]
      title: "Unauthorized error (401)"
      description: "The error information"
      example: {"error": {"code": "unauthorized", "message": "Unauthorized"}}
    error.TOO_MANY_REQUESTS:
      type: object
      properties:
        error:
          code:
            type: string
            description: The error code
            example: "too_many_requests"
          message:
            type: string
            description: The error message
            example: "Too many requests"
      required: ["message", "code"]
      title: "Too many requests error (429)"
      description: "The error information"
      example: {"error": {"code": "too_many_requests", "message": "Too many requests"}}
    error.NOT_FOUND:
      type: object
      properties:
        error:
          code:
            type: string
            description: The error code
            example: "not_found"
          message:
            type: string
            description: The error message
            example: "Not found"
      required: ["message", "code"]
      title: "Not found error (404)"
      description: "The error information"
      example: {"error": {"code": "not_found", "message": "Not found"}}
```

--------------------------------

### DELETE /documents/{document_id}

Source: https://simplepdf.com/api

Deletes a document irreversibly. This action also removes the stored file and all associated submissions.

```APIDOC
## DELETE /documents/{document_id}

### Description
Delete the document. This action is irreversible. Deleting the document will also delete the stored file as well as all submissions.

### Method
DELETE

### Endpoint
/documents/{document_id}

### Parameters
#### Path Parameters
- **document_id** (string) - Required - The unique identifier of the document to delete.

### Responses
#### Success Response (200)
- **id** (string) - The identifier of the deleted document.

#### Response Example
```json
{
  "id": "05666d45-96d0-42ce-b24b-f1f1af228f57"
}
```
```