# Required - Slack Integration
SLACK_WEBHOOK_URL=https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK

# Required - UNIFORM_API_KEY=your-uniform-api-key
UNIFORM_PROJECT_ID=your-uniform-project-id
UNIFORM_PREVIEW_SECRET=your-preview-secret
UNIFORM_CLI_BASE_URL=https://uniform.app 

# Required - Deployment
NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL=your-domain.com
VERCEL_TOKEN=your-vercel-token # For blob storage

# Optional, defaults to uniform.app# Required - AI Descriptions
OPENAI_API_KEY=sk-your-openai-key

{
  "entity": {
    "id": "composition-id",
    "name": "Homepage",
    "type": "component",
    "url": "<https://canvas.uniform.app/>..."
  },
  "initiator": {
    "email": "user@example.com",
    "id": "user-id",
    "name": "John Doe",
    "is_api_key": false
  },
  "newStage": {
    "stageId": "review",
    "stageName": "Ready for Review",
    "workflowId": "workflow-id",
    "workflowName": "Content Workflow"
  },
  "previousStage": {
    "stageId": "draft",
    "stageName": "Draft",
    "workflowId": "workflow-id",
    "workflowName": "Content Workflow"
  },
  "project": {
    "id": "project-id",
    "url": "<https://canvas.uniform.app/>..."
  },
  "timestamp": "2024-01-01T10:00:00Z"
}

export type WorkflowApprovalData = {
  entity: {
    id: string;
    name: string;
    type: string;
    url: string;
  };
  initiator: {
    email: string;
    id: string;
    is_api_key: boolean;
    name: string;
  };
  newStage: {
    stageId: string;
    stageName: string;
    workflowId: string;
    workflowName: string;
  };
  previousStage: {
    stageId: string;
    stageName: string;
    workflowId: string;
    workflowName: string;
  };
  project: {
    id: string;
    url: string;
  };
  timestamp: string;
};

import { after } from 'next/server';
import { WorkflowApprovalData } from '@/types/workflowApproval';
import processWorkflowApproval from '@/utils/workflow-approval/processWorkflowApproval';

export async function POST(request: Request) {
  try {
    const body = (await request.json()) as WorkflowApprovalData;

    after(async () => {
      await processWorkflowApproval(body);
    });

    return Response.json({ success: 'Request sent to process endpoint' });
  } catch (error) {
    console.error('Error in workflow-approval route:', error);
    return Response.json({ 
      success: false, 
      error: error instanceof Error ? error.message : 'Unknown error' 
    });
  }
}

import { WorkflowApprovalData } from '@/types/workflowApproval';
import processCompositionType from './processCompositionType';
import processEntryType from './processEntryType';

export const previewHost = process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL
  ? `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`
  : '<http://localhost:3000>';

export const VERCEL_FOLDER = 'workflow-approval';
const SUPPORTED_ENTITY_TYPES = ['component', 'entry'];

export const VERCEL_UPLOAD_OPTIONS = {
  access: 'public',
  addRandomSuffix: true,
} as const;

const processWorkflowApproval = async (workflowApprovalData: WorkflowApprovalData) => {
  try {
    console.info('Workflow approval process started');
    const { entity } = workflowApprovalData;

    if (!SUPPORTED_ENTITY_TYPES.includes(entity.type)) {
      console.info(`Skipping non-supported entity type: ${entity.type}`);
      return { success: true };
    }

    if (entity.type === 'component') {
      return processCompositionType(workflowApprovalData);
    }

    if (entity.type === 'entry') {
      return processEntryType(workflowApprovalData);
    }

    return { success: false, error: 'Unsupported entity type' };
  } catch (error) {
    console.error('Error in workflow-approval process:', error);
    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  }
};

export default processWorkflowApproval;

import { WorkflowApprovalData } from '@/types/workflowApproval';
import { CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';
import { put } from '@vercel/blob';
import getCompositionById from '../canvas/getCompositionById';
import getOpenAIDescription from './getOpenAIDescription';
import { previewHost, VERCEL_FOLDER, VERCEL_UPLOAD_OPTIONS } from './processWorkflowApproval';
import sendSlackNotification from './sendSlackNotification';
import takeScreenshots from './takeScreenshots';

const processCompositionType = async ({
  entity,
  initiator,
  newStage,
  previousStage,
  timestamp,
  project,
}: WorkflowApprovalData) => {
  try {
    console.info(`Processing composition: ${entity.name} (${entity.id})`);

    const compositionId = entity.id;
    const publishedComposition = await getCompositionById({
      compositionId,
      state: CANVAS_PUBLISHED_STATE,
    }).catch(() => Promise.resolve(undefined));

    const isNew = !publishedComposition;

    const latestVersionPreviewUrl = `${previewHost}/workflow-preview/composition?isDraft=true&secret=${process.env.UNIFORM_PREVIEW_SECRET}&compositionId=${compositionId}`;
    const latestPublishedVersionPreviewUrl = !isNew
      ? `${previewHost}/workflow-preview/composition?isDraft=false&secret=${process.env.UNIFORM_PREVIEW_SECRET}&compositionId=${compositionId}`
      : undefined;

    console.info('Taking screenshots...');
    const { latestVersionScreenshot, latestPublishedVersionScreenshot } = await takeScreenshots(
      latestVersionPreviewUrl,
      latestPublishedVersionPreviewUrl
    );
    console.info('Screenshots taken successfully');

    console.info('Uploading screenshots to Vercel Blob...');
    const [uploadedLatestVersionScreenshot, uploadedLatestPublishedVersionScreenshot] = await Promise.all([
      put(
        `${VERCEL_FOLDER}/latest-version-${compositionId}.png`,
        Buffer.from(latestVersionScreenshot),
        VERCEL_UPLOAD_OPTIONS
      ),
      !isNew
        ? put(
            `${VERCEL_FOLDER}/latest-published-version-${compositionId}.png`,
            Buffer.from(latestPublishedVersionScreenshot),
            VERCEL_UPLOAD_OPTIONS
          )
        : Promise.resolve(undefined),
    ]);
    console.info('Screenshots uploaded successfully');

    console.info('Fetching composition versions...');
    const changesDescription = !isNew
      ? await getOpenAIDescription({
          type: 'composition',
          id: compositionId,
        })
      : undefined;

    const latestVersionScreenshotUrl = uploadedLatestVersionScreenshot.url;
    const latestPublishedVersionScreenshotUrl = !isNew ? uploadedLatestPublishedVersionScreenshot.url : undefined;
    const diffUrl = !isNew
      ? `${previewHost}/workflow-preview/composition/diff?latestVersionScreenshotUrl=${latestVersionScreenshotUrl}&latestPublishedVersionScreenshotUrl=${latestPublishedVersionScreenshotUrl}&secret=${process.env.UNIFORM_PREVIEW_SECRET}&id=${compositionId}`
      : undefined;

    console.info('Sending Slack notification...');
    await sendSlackNotification({
      type: 'composition',
      entity,
      initiator,
      newStage,
      previousStage,
      timestamp,
      project,
      latestVersionScreenshotUrl,
      latestPublishedVersionScreenshotUrl,
      latestVersionPreviewUrl,
      latestPublishedVersionPreviewUrl,
      diffUrl,
      changesDescription,
      isNew,
    });

    console.info('Workflow approval process completed successfully');
    return { success: true };
  } catch (error) {
    console.error('Error in workflow-approval process:', error);
    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  }
};

export default processCompositionType;

import { WorkflowApprovalData } from '@/types/workflowApproval';
import { Entry } from '@uniformdev/canvas';
import { put } from '@vercel/blob';
import { contentClient, getEntryById } from '../canvas/serverOnlyContentClient';
import getOpenAIDescription from './getOpenAIDescription';
import { previewHost, VERCEL_FOLDER, VERCEL_UPLOAD_OPTIONS } from './processWorkflowApproval';
import sendSlackNotification from './sendSlackNotification';
import takeScreenshots from './takeScreenshots';

const getPreviewPath = (entry: Entry['entry']) => {
  switch (entry.type) {
    case 'blogPost':
      return `/blogs/${entry._slug}`;
    default:
      return;
  }
};

const processEntryType = async ({
  entity,
  initiator,
  newStage,
  previousStage,
  timestamp,
  project,
}: WorkflowApprovalData) => {
  try {
    const { id, name } = entity;
    console.info(`Processing entry: ${name} (${id})`);
    let entry = await getEntryById({ id, preview: false });

    const isNew = !entry;

    if (isNew) {
      entry = await getEntryById({ id, preview: true });
    }

    if (!entry) {
      console.error(`Entry not found: ${id}`);
      return { success: false, error: 'Entry not found' };
    }

    const contentType = await contentClient
      .getContentTypes()
      .then(res => res.contentTypes.find(ct => ct.id === entry.type));

    if (!contentType) {
      console.error(`Content type not found: ${entry.type}`);
      return { success: false, error: 'Content type not found' };
    }

    if (contentType.previewConfigurations.length === 0) {
      console.error(`No preview configurations found for content type: ${entry.type}`);
      return { success: false, error: 'No preview configurations found' };
    }

    const previewPath = getPreviewPath(entry);

    if (!previewPath) {
      console.error(`No preview path found for entry: ${entry.type}`);
      return { success: false, error: 'No preview path found' };
    }

    const latestVersionPreviewUrl = `${previewHost}/workflow-preview/entry?isDraft=true&secret=${process.env.UNIFORM_PREVIEW_SECRET}&path=${previewPath}`;
    const latestPublishedVersionPreviewUrl = !isNew
      ? `${previewHost}/workflow-preview/entry?isDraft=false&secret=${process.env.UNIFORM_PREVIEW_SECRET}&path=${previewPath}`
      : undefined;

    console.info('Taking screenshots...');
    const { latestVersionScreenshot, latestPublishedVersionScreenshot } = await takeScreenshots(
      latestVersionPreviewUrl,
      latestPublishedVersionPreviewUrl
    );

    console.info('Screenshots taken successfully');

    console.info('Uploading screenshots to Vercel Blob...');
    const [uploadedLatestVersionScreenshot, uploadedLatestPublishedVersionScreenshot] = await Promise.all([
      put(`${VERCEL_FOLDER}/latest-version-${id}.png`, Buffer.from(latestVersionScreenshot), VERCEL_UPLOAD_OPTIONS),
      !isNew
        ? put(
            `${VERCEL_FOLDER}/latest-published-version-${id}.png`,
            Buffer.from(latestPublishedVersionScreenshot),
            VERCEL_UPLOAD_OPTIONS
          )
        : Promise.resolve(undefined),
    ]);
    console.info('Screenshots uploaded successfully');

    console.info('Fetching composition versions...');

    const changesDescription = !isNew
      ? await getOpenAIDescription({
          type: 'entry',
          id,
        })
      : undefined;

    const latestVersionScreenshotUrl = uploadedLatestVersionScreenshot.url;
    const latestPublishedVersionScreenshotUrl = !isNew ? uploadedLatestPublishedVersionScreenshot.url : undefined;
    const diffUrl = !isNew
      ? `${previewHost}/workflow-preview/entry/diff?latestVersionScreenshotUrl=${latestVersionScreenshotUrl}&latestPublishedVersionScreenshotUrl=${latestPublishedVersionScreenshotUrl}&secret=${process.env.UNIFORM_PREVIEW_SECRET}&id=${id}`
      : undefined;

    console.info('Sending Slack notification...');
    await sendSlackNotification({
      type: 'entry',
      entity,
      initiator,
      newStage,
      previousStage,
      timestamp,
      project,
      latestVersionScreenshotUrl,
      latestPublishedVersionScreenshotUrl,
      latestVersionPreviewUrl,
      latestPublishedVersionPreviewUrl,
      diffUrl,
      changesDescription,
      isNew,
    });
  } catch (error) {
    console.error('Error in workflow-approval process:', error);
    return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
  }
};

export default processEntryType;

'use server';

import puppeteer from 'puppeteer';
import puppeteerCore from 'puppeteer-core';
import chromium from '@sparticuz/chromium-min';

const CHROMIUM_EXECUTABLE_PATH =
  '<https://github.com/Sparticuz/chromium/releases/download/v133.0.0/chromium-v133.0.0-pack.tar>';
const VIEWPORT = { width: 1440, height: 900 };
const SCREENSHOT_WAIT_TIME = 5000; // Increased wait time to 5 seconds

const takeScreenshots = async (latestVersionPreviewUrl: string, latestPublishedVersionPreviewUrl?: string) => {
  let browser;
  if (process.env.VERCEL) {
    const executablePath = await chromium.executablePath(CHROMIUM_EXECUTABLE_PATH);
    browser = await puppeteerCore.launch({
      executablePath,
      args: [...chromium.args, '--disable-dev-shm-usage', '--disable-gpu'],
      headless: chromium.headless,
      defaultViewport: VIEWPORT,
    });
  } else {
    browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-gpu'],
      defaultViewport: VIEWPORT,
    });
  }

  try {
    const page = await browser.newPage();
    await page.setViewport(VIEWPORT);

    // Enhanced page load timeout
    page.setDefaultNavigationTimeout(60000);

    // Helper function to properly capture a screenshot with full content loaded
    const captureScreenshot = async (url: string) => {
      await page.goto(url, { waitUntil: 'networkidle2' });

      // Wait additional time for any JavaScript to execute
      await new Promise(resolve => setTimeout(resolve, SCREENSHOT_WAIT_TIME));

      // Scroll through the page to trigger lazy loading
      await page.evaluate(() => {
        // Smooth scroll down and back up to trigger any lazy loading
        const scrollStep = Math.floor(window.innerHeight / 2);
        const scrollHeight = document.body.scrollHeight;

        return new Promise(resolve => {
          let currentPosition = 0;

          // Scroll down
          const scrollDown = () => {
            if (currentPosition < scrollHeight) {
              window.scrollTo(0, currentPosition);
              currentPosition += scrollStep;
              setTimeout(scrollDown, 100);
            } else {
              currentPosition = scrollHeight;
              window.scrollTo(0, currentPosition);
              setTimeout(scrollUp, 500);
            }
          };

          // Scroll back up
          const scrollUp = () => {
            if (currentPosition > 0) {
              currentPosition -= scrollStep;
              window.scrollTo(0, currentPosition);
              setTimeout(scrollUp, 100);
            } else {
              window.scrollTo(0, 0);
              setTimeout(resolve, 500);
            }
          };

          scrollDown();
        });
      });

      // Wait for network to be completely idle
      await page.waitForFunction(
        () => {
          return document.readyState === 'complete';
        },
        { timeout: 15000 }
      );

      // Optional: wait for any loading indicators to disappear
      try {
        // Adjust selector to match your loading indicators if needed
        const loadingIndicators = ['.loading', '.spinner', '[data-loading="true"]'];
        for (const selector of loadingIndicators) {
          const loadingElement = await page.$(selector);
          if (loadingElement) {
            await page
              .waitForSelector(selector, { hidden: true, timeout: 10000 })
              .catch(() => console.info(`Waiting for ${selector} to hide timed out`));
          }
        }
      } catch (e) {
        console.info('No loading indicators found or timeout occurred', e);
      }

      // Take the screenshot with a small delay
      await new Promise(resolve => setTimeout(resolve, 500));
      return await page.screenshot({ fullPage: true, type: 'png' });
    };

    console.info(`Capturing screenshot for latest version: ${latestVersionPreviewUrl}`);
    const latestVersionScreenshot = await captureScreenshot(latestVersionPreviewUrl);

    if (!latestPublishedVersionPreviewUrl) {
      return { latestVersionScreenshot };
    }

    console.info(`Capturing screenshot for published version: ${latestPublishedVersionPreviewUrl}`);
    const latestPublishedVersionScreenshot = await captureScreenshot(latestPublishedVersionPreviewUrl);

    return { latestVersionScreenshot, latestPublishedVersionScreenshot };
  } catch (error) {
    console.error('Error taking screenshots:', error);
    throw error;
  } finally {
    await browser.close();
  }
};

export default takeScreenshots;

'use server';

import { WorkflowApprovalData } from '@/types/workflowApproval';

type SendSlackNotificationProps = WorkflowApprovalData & {
  type: 'composition' | 'entry';
  latestVersionScreenshotUrl: string;
  latestPublishedVersionScreenshotUrl?: string;
  latestVersionPreviewUrl: string;
  latestPublishedVersionPreviewUrl?: string;
  diffUrl?: string;
  changesDescription?: string;
  isNew: boolean;
};

const sendSlackNotification = async ({
  entity,
  initiator,
  timestamp,
  type,
  latestVersionScreenshotUrl,
  latestVersionPreviewUrl,
  diffUrl,
  changesDescription = 'No description provided',
  isNew,
}: SendSlackNotificationProps) => {
  const formattedDate = new Date(timestamp).toLocaleString('en-US', {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    hour12: true,
  });

  if (!process.env.SLACK_WEBHOOK_URL) {
    console.error('SLACK_WEBHOOK_URL is not set');
    return;
  }

  const message = {
    blocks: [
      {
        type: 'header',
        text: {
          type: 'plain_text',
          text: isNew
            ? `${initiator.name} created a new ${entity.name} for review on ${formattedDate}`
            : `${initiator.name} requested review on the ${entity.name} on ${formattedDate}`,
          emoji: true,
        },
      },
      { type: 'divider' },
      ...(isNew
        ? [
            {
              type: 'section',
              text: {
                type: 'mrkdwn',
                text: `*✨ New created*\\nThis is a brand new ready for review.`,
              },
            },
          ]
        : [
            {
              type: 'section',
              text: {
                type: 'mrkdwn',
                text: `*📝 What changed*\\n${changesDescription}`,
              },
            },
          ]),
      { type: 'divider' },
      { type: 'section', text: { type: 'mrkdwn', text: '*🖼️ Screenshot*' } },
      {
        type: 'image',
        image_url: latestVersionScreenshotUrl,
        alt_text: isNew ? "New " + type : 'Latest Version',
      },
      { type: 'divider' },
      {
        type: 'section',
        text: {
          type: 'mrkdwn',
          text: '*👀 Direct preview links*',
        },
      },
      {
        type: 'actions',
        elements: [
          ...(isNew
            ? []
            : [
                {
                  type: 'button',
                  text: { type: 'plain_text', emoji: true, text: '🔺 Visual changes' },
                  url: diffUrl,
                  style: 'primary',
                },
              ]),
          {
            type: 'button',
            text: { type: 'plain_text', emoji: true, text: '👁️ Preview' },
            url: latestVersionPreviewUrl,
            style: 'primary',
          },
          {
            type: 'button',
            text: { type: 'plain_text', emoji: true, text: '✏️ Open Editor' },
            url: entity.url,
            style: 'primary',
          },
        ],
      },
      { type: 'divider' },
    ],
  };

  await fetch(process.env.SLACK_WEBHOOK_URL, {
    method: 'POST',
    body: JSON.stringify(message),
  });
};

export default sendSlackNotification;

'use server';

import { createPatch } from 'diff';
import getSerializedData from './getSerializedData';

const askOpenAI = async (patch: string) => {
  const response = await fetch('<https://api.openai.com/v1/chat/completions>', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: "Bearer " + process.env.OPENAI_API_KEY,
    },
    body: JSON.stringify({
      model: 'gpt-4-turbo-preview',
      messages: [
        {
          role: 'system',
          content: `You are a content change analyzer specialized in analyzing JSON diffs. Your task is to identify and clearly describe meaningful content changes from a user perspective, while ignoring technical implementation details.

Focus on:
	•	Changes in text content and user-facing messages
	•	New or removed sections, pages, or content blocks
	•	Changes in navigation structure or menu items
	•	Updates to metadata directly visible to users (titles, descriptions, SEO-relevant content)
	•	Changes in visible links and URLs
	•	Modifications to images, media, or embedded content
	•	Changes in user-visible business logic or functionality (e.g., form behavior, content visibility rules)

Ignore:
	•	JSON structure, formatting, and rich text markup
	•	Whitespace, indentation, and visual styling details
	•	Internal IDs, references, and system-generated fields
	•	Metadata that doesn't affect visible content or SEO
	•	Version numbers, timestamps, and backend configuration details

Output Format:
	•	Use clear, concise language understandable by non-technical stakeholders.
	•	Limit your description to up to 5 sentences or 5 bullet points.
	•	If many changes occurred, prioritize the top 5 most impactful for users.
	•	Do not include personal interpretations, conclusions, or opinions—state only objective facts about what changed.`,
        },
        {
          role: 'user',
          content: "Please analyze these content changes and describe the meaningful updates in up to 5 sentences: " + patch,
        },
      ],
      temperature: 0.7,
      max_tokens: 2000,
    }),
  });

  const data = await response.json();
  return data.choices[0].message.content;
};

type GetOpenAIDescriptionProps = {
  type: 'composition' | 'entry';
  id: string;
};

const getOpenAIDescription = async ({ type, id }: GetOpenAIDescriptionProps) => {
  const [draftVersion, publishedVersion] = await Promise.all([
    getSerializedData({ type, id, preview: true }),
    getSerializedData({ type, id, preview: false }),
  ]);

  console.info('Creating diff...');
  const patch = createPatch('diff', publishedVersion, draftVersion, 'Published Version', 'Draft Version', {
    ignoreWhitespace: true,
    ignoreNewlineAtEof: true,
  });

  console.info('Getting OpenAI description...');
  let changesDescription;
  try {
    changesDescription = await askOpenAI(patch);
  } catch (error) {
    console.error('Error getting OpenAI description:', error);
    changesDescription = 'Unable to generate changes description. Please review the diff manually.';
  }

  return changesDescription;
};

export default getOpenAIDescription;

import { CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';
import { CANVAS_DRAFT_STATE } from '@uniformdev/canvas';
import getCompositionById from '../canvas/getCompositionById';
import { getEntryById } from '../canvas/serverOnlyContentClient';

type GetSerializedDataProps = {
  type: 'composition' | 'entry';
  id: string;
  preview?: boolean;
};

const getSerializedData = async ({ type, id, preview }: GetSerializedDataProps) => {
  if (type === 'composition') {
    return getCompositionById({
      compositionId: id,
      state: preview ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE,
    }).then(res => JSON.stringify(res, null, 2));
  }

  if (type === 'entry') {
    return getEntryById({
      id,
      preview,
    }).then(res => JSON.stringify(res, null, 2));
  }
};

export default getSerializedData;

import { notFound } from 'next/navigation';
import { CANVAS_DRAFT_STATE, CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';
import { UniformComposition } from '@uniformdev/canvas-next-rsc';
import resolve from '@/canvas/resolvers/app';
import getCompositionRoute from '@/utils/canvas/getCompositionRoute';
import { noCacheRouteClient } from '@/utils/canvas/routeClient';

type PageParameters = {
  params: Promise<{
    type?: 'composition' | 'entry';
  }>;
  searchParams: Promise<{ isDraft?: string; secret?: string; compositionId?: string; path?: string }>;
};

const getRoute = async ({
  compositionId,
  path,
  type,
  state,
}: {
  compositionId?: string;
  path?: string;
  type: 'composition' | 'entry';
  state: typeof CANVAS_DRAFT_STATE | typeof CANVAS_PUBLISHED_STATE;
}) => {
  if (type === 'composition') {
    return getCompositionRoute({
      compositionId,
      state,
    });
  }

  if (type === 'entry') {
    return noCacheRouteClient.getRoute({
      path,
      state,
      ...(state === CANVAS_DRAFT_STATE ? { dataSourceVariant: 'unpublished' } : {}),
    });
  }
};

const Page = async (props: PageParameters) => {
  const searchParams = await props.searchParams;
  const { type } = await props.params;
  const { isDraft, secret, compositionId, path } = searchParams;

  if (secret !== process.env.UNIFORM_PREVIEW_SECRET) return notFound();

  const state = isDraft === 'true' ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE;

  const route = await getRoute({
    compositionId,
    path,
    type,
    state,
  });

  if (!route) return notFound();

  return (
    <UniformComposition
      {...props}
      params={Promise.resolve({ path: type })}
      searchParams={Promise.resolve({ workflowPreview: 'true' })}
      route={route}
      resolveComponent={resolve}
      mode="server"
    />
  );
};

export const dynamic = 'force-dynamic';
export const fetchCache = 'force-no-store';

export default Page;

import { notFound } from 'next/navigation';
import CompositionDiffViewer from '@/components/CompositionDiffViewer';
import getSerializedData from '@/utils/workflow-approval/getSerializedData';

type PageParameters = {
  params: Promise<{ type?: 'composition' | 'entry' }>;
  searchParams: Promise<{
    draftVersionId?: string;
    publishedVersionId?: string;
    secret?: string;
    latestVersionScreenshotUrl?: string;
    latestPublishedVersionScreenshotUrl?: string;
    id?: string;
  }>;
};

const Page = async (props: PageParameters) => {
  const { secret, latestVersionScreenshotUrl, latestPublishedVersionScreenshotUrl, id } = await props.searchParams;
  const { type } = await props.params;

  if (secret !== process.env.UNIFORM_PREVIEW_SECRET) return notFound();

  const [draftVersion, publishedVersion] = await Promise.all([
    getSerializedData({ type, id, preview: true }),
    getSerializedData({ type, id, preview: false }),
  ]);

  return (
    <CompositionDiffViewer
      draftVersion={draftVersion}
      publishedVersion={publishedVersion}
      latestVersionScreenshotUrl={latestVersionScreenshotUrl}
      latestPublishedVersionScreenshotUrl={latestPublishedVersionScreenshotUrl}
    />
  );
};

export const dynamic = 'force-dynamic';
export const fetchCache = 'force-no-store';

export default Page;

'use server';

import { getCanvasClient } from '@uniformdev/canvas-next-rsc';

const canvasClient = getCanvasClient({
  cache: {
    type: 'revalidate',
    interval: 0,
  },
});

const getCompositionById = async ({ compositionId, state }: { compositionId: string; state: number }) => {
  const { composition } = await canvasClient.getCompositionById({
    compositionId,
    state,
  });

  return composition;
};

export default getCompositionById;

'server-only';

import { CANVAS_DRAFT_STATE, CANVAS_PUBLISHED_STATE } from '@uniformdev/canvas';
import { ContentClient } from '@uniformdev/canvas';

export const contentClient = new ContentClient({
  apiKey: process.env.UNIFORM_API_KEY,
  apiHost: process.env.UNIFORM_CLI_BASE_URL,
  projectId: process.env.UNIFORM_PROJECT_ID,
  edgeApiHost: '<https://uniform.global>',
});

export const getEntryById = async ({ id, preview = false }: { preview?: boolean; id: string }) => {
  return await contentClient
    .getEntries({
      filters: {
        entityId: { eq: id },
      },
      state: preview ? CANVAS_DRAFT_STATE : CANVAS_PUBLISHED_STATE,
    })
    .then(res => res.entries?.[0]?.entry);
};

'server-only';
import { RouteClient } from '@uniformdev/canvas';

const routeClient = new RouteClient({
  apiKey: process.env.UNIFORM_API_KEY,
  projectId: process.env.UNIFORM_PROJECT_ID,
});

export const noCacheRouteClient = new RouteClient({
  apiKey: process.env.UNIFORM_API_KEY,
  projectId: process.env.UNIFORM_PROJECT_ID,
  bypassCache: true,
  disableSWR: true,
});

export default routeClient;

import { ProjectMapClient } from '@uniformdev/project-map';

export const projectMapClient = new ProjectMapClient({
  apiKey: process.env.UNIFORM_API_KEY,
  apiHost: process.env.UNIFORM_CLI_BASE_URL,
  projectId: process.env.UNIFORM_PROJECT_ID,
});

'use server';

import { CANVAS_DRAFT_STATE } from '@uniformdev/canvas';
import { projectMapClient } from './projectMapClient';
import routeClient from './routeClient';

// Utility function to construct full path from project map nodes
const constructFullPath = (nodes: any[], targetCompositionId: string): string | null => {
  const targetNode = nodes.find(node => node.compositionId === targetCompositionId);

  if (!targetNode) {
    return null;
  }

  const segmentToPreviewMap = new Map<string, string>();
  nodes.forEach(node => {
    if (node.pathSegment && node.pathSegment.startsWith(':') && node.data?.previewValue) {
      segmentToPreviewMap.set(node.pathSegment, node.data.previewValue);
    }
  });

  let fullPath = targetNode.path;

  // Replace each path parameter with its corresponding preview value
  const pathSegments = fullPath.split('/');
  const updatedSegments = pathSegments.map(segment => {
    if (segment.startsWith(':')) {
      // Look up the preview value for this specific parameter
      const previewValue = segmentToPreviewMap.get(segment);
      return previewValue || segment; // fallback to original segment if no preview found
    }
    return segment;
  });

  fullPath = updatedSegments.join('/');
  return fullPath;
};

const getCompositionRoute = async ({ compositionId, state }: { compositionId: string; state: number }) => {
  const projectMapNodes = await projectMapClient.getNodes({
    includeAncestors: true,
    compositionId,
    expanded: true,
  });

  const path = constructFullPath(projectMapNodes.nodes, compositionId);

  return routeClient.getRoute({
    path,
    state,
    ...(state === CANVAS_DRAFT_STATE ? { dataSourceVariant: 'unpublished' } : {}),
  });
};

export default getCompositionRoute;

const getPreviewPath = (entry: Entry['entry']) => {
  switch (entry.type) {
    case 'blogPost':
      return "/blogs/" + entry._slug;
    case 'landingPage':
      return "pages/" + entry._slug;
    case 'productPage':
      return "/products/" + entry._slug;
    default:
      return;
  }
};