@seeka-labs/cli-apps 3.5.2 → 3.5.4

package/dist/init-template/app/server-azurefunc/src/functions/seekaAppWebhook.ts

@@ -0,0 +1,202 @@
+import * as winston from 'winston';
+import '../app/logging'
+
+import {app, HttpRequest, HttpResponseInit, InvocationContext} from '@azure/functions';
+import {
+    SeekaActivityAcceptedWebhookPayload, SeekaAppInstalledWebhookPayload,
+    SeekaAppUninstalledWebhookPayload,
+    SeekaIdentityChangedWebhookPayload, SeekaWebhookCallType, SeekaWebhookPayload,
+    throwOnInvalidWebhookSignature
+} from '@seeka-labs/sdk-apps-server';
+
+import {tryGetInstallation,
+    createOrUpdateInstallation, deleteInstallation, getSeekaBrowserPlugin, startServices,
+    webhookLogger,
+    childLogger,
+} from '@seeka-labs/sdk-apps-server-host';
+
+import { validateInstallationSettings, ExampleAppAppBrowserSdkPluginConfig, ExampleAppAppInstallContext} from '@example-org-name/example-app-name-lib'
+
+import type {Logger} from 'winston';
+import {queueNames, triggerBackgroundJob} from '../app/jobs';
+import {TrackExampleAppActivityQueueItem} from "../app/models";
+
+app.http('seekaAppWebhook', {
+    methods: ['POST'],
+    authLevel: 'anonymous',
+    route: 'api/webhook/seeka/app',
+    handler: seekaAppWebhook
+});
+
+export async function seekaAppWebhook(req: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
+    const bodyStr = (await req.text()) as string;
+    if (!bodyStr) {
+        return {
+            status: 400,
+            jsonBody: {error: "Body missing. Ensure body is present and either specify the Content-Length request header OR set Transfer-Encoding request header to 'chunked'"}
+        }
+    }
+    const body = JSON.parse(bodyStr) as SeekaWebhookPayload;
+
+    let logger = webhookLogger(body, context);
+    logger.profile('http.seeka.webhook.app')
+    logger.verbose('Received webhook from Seeka', {body});
+
+    // Handle probe
+    if (body.type === SeekaWebhookCallType.Probe) {
+        return {
+            status: 204
+        }
+    }
+
+    // Validate webhook
+    try {
+        throwOnInvalidWebhookSignature(process.env.SEEKA_APP_SECRET as string, req.headers as Headers, bodyStr);
+        logger.debug('Webhook signature validated', {body});
+    } catch {
+        logger.warn('Webhook signature invalid', {body});
+        return {
+            status: 401,
+            jsonBody: {error: "Webhook call invalid"}
+        }
+    }
+
+    if (body.isTest) {
+        // This is a test webhook call
+        return {
+            status: 204
+        }
+    }
+
+    await startServices(logger);
+
+    // Check if the webhook is for an app we have installed
+    let installation: ExampleAppAppInstallContext | null = null;
+    if (body.type != SeekaWebhookCallType.AppInstalled) {
+        installation = await tryGetInstallation((body as SeekaAppInstalledWebhookPayload).context?.applicationInstallId as string, false, logger);
+        if (installation == null) {
+            logger.warn('Webhook call cannot be processed as the installation ID is not known by this app', {body});
+
+            return {
+                status: 422,
+                jsonBody: {error: "App not installed"}
+            }
+        }
+    }
+
+    logger = childLogger(null, installation, logger, context);
+
+    // Do something
+    let errorMessage: string | null = null;
+    try {
+        switch (body.type) {
+            case SeekaWebhookCallType.AppInstalled: {
+                errorMessage = await onInstallation(body as SeekaAppInstalledWebhookPayload, logger);
+                break;
+            }
+            case SeekaWebhookCallType.AppUninstalled: {
+                if (!body.isTest) {
+                    const payload = body as SeekaAppUninstalledWebhookPayload;
+                    await deleteInstallation(payload.context?.applicationInstallId as string, logger)
+                }
+                break;
+            }
+            case SeekaWebhookCallType.ActivityAccepted: {
+                const payload = body as SeekaActivityAcceptedWebhookPayload;
+                await handleSeekaActivity(payload, installation, context, logger);
+
+                break;
+            }
+            case SeekaWebhookCallType.IdentityChanged: {
+                const payload = body as SeekaIdentityChangedWebhookPayload;
+
+                logger.debug('Identity changed webhook received', {personId: payload.content.personId });
+
+                break;
+            }
+
+            case SeekaWebhookCallType.BrowserSdkPlugin: {
+                // Configuration object passed to the Seeka browser plugin
+                // Under no circumstances should internal or private api keys be exposed to the client/browser via the below object
+                const pluginConfig = {
+                  appId: process.env.SEEKA_APP_ID,
+                  appInstallId: installation.applicationInstallId,
+                  appUrl: process.env.SELF_HOST_BASEURL,
+                  installationSettings: {
+                    browserPluginAppSetting1: installation.installationState?.installationSettings?.browserPluginAppSetting1
+                  }
+                } as ExampleAppAppBrowserSdkPluginConfig;
+                const plugin = await getSeekaBrowserPlugin<ExampleAppAppBrowserSdkPluginConfig>('ExampleAppAppConvergeSdkPlugin', pluginConfig, logger);
+
+                logger.profile('http.seeka.webhook.app')
+                return {
+                    status: 200,
+                    body: JSON.stringify(plugin),
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+            }
+        }
+    } catch (err) {
+        logger.error('Failed to handle webhook', {ex: winston.exceptions.getAllInfo(err)});
+        return {
+            status: 500,
+            jsonBody: {error: "Request failed"}
+        }
+    } finally {
+        logger.profile('http.seeka.webhook.app')
+        logger.verbose('Seeka webhook handled');
+    }
+
+    if (errorMessage) {
+        logger.warn('Webhook call failed', {errorMessage});
+        return {
+            status: 400,
+            jsonBody: {error: {message: errorMessage}}
+        }
+    }
+
+    return {
+        status: 204
+    }
+}
+
+const onInstallation = async (payload: SeekaAppInstalledWebhookPayload, logger: Logger): Promise<string | null> => {
+    if (payload.isTest) return null;
+
+    const errorMessage = await validateInstallationSettings(payload.content?.installationSettings || {}, logger);
+    if (errorMessage) return errorMessage;
+
+    const installation = await createOrUpdateInstallation({
+        ...payload.context,
+        installationState: {
+            grantedPermissions: payload.content?.grantedPermissions || [],
+            installationSettings: payload.content?.installationSettings || {}
+        },
+        applicationInstallId: payload.context?.applicationInstallId as string,
+        organisationBrandId: payload.context?.organisationBrandId as string,
+        organisationId: payload.context?.organisationId as string,
+        installedAt: new Date().toISOString(),
+    }, logger)
+
+    return null;
+}
+
+const handleSeekaActivity = async (activity: SeekaActivityAcceptedWebhookPayload, installation: ExampleAppAppInstallContext, context: InvocationContext, logger: Logger) => {
+    logger = childLogger({
+        'Activity_ActivityIdentifier': activity?.content?.activity?.activityId,
+        'Tracking_Source_Url': activity?.content?.source?.loc,
+        'Activity_Name': activity?.content?.activity?.activityNameCustom || activity?.content?.activity?.activityName?.toString()
+    }, installation, logger, context);
+
+    await triggerBackgroundJob(queueNames.trackActivity, {
+        payload: activity.content,
+        organisationBrandId: installation.organisationBrandId,
+        organisationId: installation.organisationId,
+        applicationInstallId: installation.applicationInstallId,
+        causationId: context.invocationId,
+        correlationId: context.invocationId
+    } as TrackExampleAppActivityQueueItem, logger)
+}
+

package/dist/init-template/app/server-azurefunc/src/functions/trackActivityQueueHandler.ts

@@ -0,0 +1,49 @@
+import * as winston from 'winston';
+import '../app/logging'
+
+import {app, InvocationContext} from '@azure/functions';
+
+import {deserialiseQueuePayload, queueNames, sendQueueMessageToPoisonQueue} from '../app/jobs';
+import {sendActivityToAnotherSoftware} from "../app/services/activites";
+import {TrackExampleAppActivityQueueItem} from "../app/models";
+import {backgroundJobLogger, childLogger, startServices, tryGetInstallation} from "@seeka-labs/sdk-apps-server-host";
+
+app.storageQueue('trackActivityQueueHandler', {
+    queueName: queueNames.trackActivity,
+    connection: 'AzureWebJobsStorage',
+    handler: trackActivityQueueHandler
+});
+
+export async function trackActivityQueueHandler(queueItem: unknown, context: InvocationContext): Promise<void> {
+    const body = typeof queueItem === 'string' ? deserialiseQueuePayload<TrackExampleAppActivityQueueItem>(queueItem) : queueItem as TrackExampleAppActivityQueueItem;
+    let logger = backgroundJobLogger(queueNames.trackActivity, body, context);
+    logger.profile(`queue.${queueNames.trackActivity}`)
+
+    await startServices(logger);
+
+    const applicationInstallId = body.applicationInstallId as string || (body.payload as any)?.applicationInstallId as string; // Support legacy payload / previous bug
+
+    const installation = await tryGetInstallation(applicationInstallId as string, true, logger);
+
+    logger = childLogger({
+        'Activity_ActivityIdentifier': body?.payload?.seekaActivity?.activity?.activityId,
+        'Tracking_Source_Url': body?.payload?.seekaActivity?.source?.loc,
+        'Activity_Name': body?.payload?.seekaActivity?.activity?.activityNameCustom || body?.payload?.seekaActivity?.activity?.activityName?.toString()
+    }, installation, logger, context)
+
+    logger.info('Received request to track activity for ExampleApp', {body});
+
+    try {
+        await sendActivityToAnotherSoftware(body.payload, installation, context.invocationId, context.invocationId, logger);
+    } catch (err) {
+        const ex: any = winston.exceptions.getAllInfo(err);
+        logger.error('Error handling track ExampleApp activity queue item', {ex});
+
+        await sendQueueMessageToPoisonQueue(queueNames.trackActivity, {
+            ...body,
+            correlationId: context.invocationId,
+        } as TrackExampleAppActivityQueueItem, logger);
+    }
+
+    logger.profile(`queue.${queueNames.trackActivity}`)
+}

package/dist/init-template/app/server-azurefunc/src/functions/ui.ts

@@ -0,0 +1,51 @@
+import {app, HttpRequest, HttpResponseInit, InvocationContext} from '@azure/functions';
+import '../app/logging'
+import {
+    ExampleAppAppInstallContext,
+    ExampleAppAppInstallState,
+    ExampleAppAppUiClientInitState
+} from "@example-org-name/example-app-name-lib";
+import { SeekaAppInstallContext } from "@seeka-labs/sdk-apps-core";
+
+import { generateAppUiHttpRequestResponse, HttpMethod} from '@seeka-labs/sdk-apps-server-host';
+import {Logger} from "winston";
+import {apiRouteHandler} from "../app/api/router";
+
+// Define your route and handler for the /ui path
+app.http('ui', {
+    methods: ['GET', 'HEAD', 'POST', 'DELETE'],
+    authLevel: 'anonymous',
+    route: 'app/{*route}',  // Wildcard route under /ui
+    handler: ui
+});
+
+// Function to serve the React app under /app
+export async function ui(req: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
+    const createBrowserInitState = async (installation: ExampleAppAppInstallContext, logger: Logger ): Promise<ExampleAppAppUiClientInitState> => {
+        // Under no circumstances should internal or private api keys be exposed to the client/browser via the below object
+        // Below state will be passed in plain text to the UI app, important to be selective (no spread operators on installation state)
+        // and not expose any internal or private api keys to the client/browser
+        return {
+            exampleInstallSetting1: installation?.installationState?.installationSettings?.exampleInstallSetting1
+        }
+    }
+
+    const res = await generateAppUiHttpRequestResponse(
+        req.url,
+        req.method as HttpMethod,
+        req.headers as Headers,
+        context,
+        createBrowserInitState,
+        async(...args) => {
+            return await apiRouteHandler(req, context, ...args)
+        }
+    )
+
+    return {
+        status: res.status,
+        headers: res.headers as HeadersInit,
+        cookies: res.cookies,
+        body: res.body as HttpResponseInit['body'],
+        jsonBody: res.jsonBody
+    };
+}

package/dist/init-template/app/server-azurefunc/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "esModuleInterop": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "sourceMap": true,
+    "module": "CommonJS",
+    "target": "ES6",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "isolatedModules": false
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/definitions.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/init-template/app/ui/README.md

@@ -0,0 +1,40 @@
+# Material UI - Create React App example in TypeScript
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-cra-ts
+cd material-ui-cra-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm start
+```
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-cra-ts)
+
+## The idea behind the example
+
+This example demonstrates how you can use Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) in [TypeScript](https://github.com/Microsoft/TypeScript).
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v6.
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/material-ui/getting-started/templates/) section.

package/dist/init-template/app/ui/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" href="/favicon.ico"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Seeka ExampleApp</title>
+    <!-- Fonts to support Material Design -->
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
+    <script vite-ignore src="%VITE_BASE_URL%config.js?c=%VITE_RELEASE_TAG%"></script>
+    <script type="module" src="/src/index.tsx"></script>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+
+</html>

package/dist/init-template/app/ui/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@example-org-name/example-app-name-ui",
+  "version": "3.5.4",
+  "description": "Seeka app UI for example-app-name",
+  "author": "Seeka <administrator@seeka.co>",
+  "license": "MIT",
+  "homepage": "/app",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@example-org-name/example-app-name-lib": "workspace:*",
+    "@hookform/resolvers": "^5",
+    "@mui/icons-material": "7",
+    "@mui/lab": "7.0.1-beta.20",
+    "@mui/material": "^7",
+    "@mui/styles": "^6",
+    "@mui/system": "^7",
+    "@reduxjs/toolkit": "^2",
+    "@seeka-labs/converge": "^1",
+    "@seeka-labs/sdk-apps-core": "../../../workspace:* || ^3",
+    "@seeka-labs/sdk-apps-react": "../../../workspace:* || ^3",
+    "lodash-es": "^4",
+    "material-ui-confirm": "^4",
+    "notistack": "^3",
+    "query-string": "^9",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7",
+    "react-redux": "^9",
+    "react-router-dom": "^7",
+    "redux": "^5",
+    "redux-persist": "^6",
+    "uuid": "^13",
+    "vite-plugin-svgr": "^4",
+    "yup": "^1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11",
+    "@types/lodash-es": "^4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^5",
+    "cross-env": "^10",
+    "fs-extra": "^11",
+    "rimraf": "^6",
+    "typescript": "^5",
+    "vite": "^7"
+  },
+  "scripts": {
+    "start": "vite",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf build package dist",
+    "copy-output": "node ./scripts/copy-output.mjs",
+    "dev": "cross-env NODE_ENV=development cross-env VITE_RELEASE_TAG=$(date +%Y%m%d%H%M%S) cross-env VITE_BASE_URL=/app/ vite",
+    "build": "vite build && yarn copy-output",
+    "build:dev": "cross-env NODE_ENV=development VITE_RELEASE_TAG=$(date +%Y%m%d%H%M%S) VITE_BASE_URL=/app/ vite build --watch",
+    "preview": "vite preview"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/dist/init-template/app/ui/scripts/copy-output.mjs

@@ -0,0 +1,30 @@
+
+import {  existsSync, mkdirSync, cpSync } from 'fs';
+import { resolve } from 'path';
+import {rmSync} from "node:fs";
+
+const postBuild = () => {
+    const serverDirNames = ['server-azurefunc']
+
+    serverDirNames.forEach(dirName => {
+        if (existsSync(resolve(`../${dirName}`))) {
+
+            if (!existsSync(resolve(`../${dirName}/dist/src/ui`))) {
+                mkdirSync(resolve(`../${dirName}/dist/src/ui`), {
+                    recursive: true,
+                });
+            }
+            rmSync(resolve(`../${dirName}/dist/src/ui`), { recursive: true });
+            mkdirSync(resolve(`../${dirName}/dist/src/ui`), {
+                recursive: true,
+            });
+
+            // Copy all files in current working dir ../build dir and all files to `../${dirName}/dist/src/ui
+            cpSync(resolve(`./build`), resolve(`../${dirName}/dist/src/ui/build`), {
+                recursive: true,
+            });
+        }
+    })
+}
+
+postBuild();

package/dist/init-template/app/ui/src/App.tsx

@@ -0,0 +1,72 @@
+import { Container, Paper } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ConfirmProvider } from 'material-ui-confirm';
+import * as React from 'react';
+import {
+  createBrowserRouter,
+  Outlet,
+  RouterProvider,
+} from "react-router-dom";
+import { Index } from './routes/home';
+import {TokenProvider, SeekaCoreApiReduxProvider} from "@seeka-labs/sdk-apps-react";
+import {ExampleAppAppUiClientInitConfig} from "@example-org-name/example-app-name-lib";
+
+let basename = (import.meta as any).env.BASE_URL
+// trim last /
+basename = basename.substring(0, basename.length - 1);
+
+function AppLayout() {
+  return (
+    <TokenProvider>
+      <SeekaCoreApiReduxProvider>
+        <ConfirmProvider>
+          <Outlet />
+        </ConfirmProvider>
+      </SeekaCoreApiReduxProvider>
+    </TokenProvider>
+  );
+}
+
+const router = createBrowserRouter([
+  {
+    element: <AppLayout />,
+    children: [
+      { path: '/', element: <Index /> },
+      // other routes…
+    ],
+  },
+], { basename });
+
+declare global {
+  interface Window {
+    seekaAppConfig: ExampleAppAppUiClientInitConfig
+  }
+}
+
+export default function App() {
+  const [loaded, setLoaded] = React.useState(Boolean(window.seekaAppConfig));
+
+  let interval: any = null;
+  if (!loaded && !interval) {
+    interval = setInterval(() => {
+      setLoaded(Boolean(window.seekaAppConfig || process.env.NODE_ENV === 'development'));
+    }, 200);
+  }
+
+  React.useEffect(() => {
+    if (loaded && interval) {
+      clearInterval(interval);
+    }
+  }, [loaded]);
+
+  return (
+    !loaded ? <></> : (
+      <Box sx={{ my: 4, mx: 2 }}>
+        <Container maxWidth='lg'>
+          <Paper sx={{ bgcolor: 'white', p: 3 }} elevation={0}>
+            <RouterProvider router={router} />
+          </Paper></Container>
+      </Box>
+    )
+  );
+}

package/dist/init-template/app/ui/src/assets/app-icon.svg

@@ -0,0 +1 @@
+<?xml version='1.0' encoding='utf-8'?><!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 268.4 84.7' style='enable-background:new 0 0 268.4 84.7;' xml:space='preserve'><style type='text/css'> .st0{fill:#722ED1;} .st1{enable-background:new ;} </style><path d='M0,72.5c0,6.7,5.5,12.2,12.2,12.2l0,0l0,0l0,0c3.2,0,6.3-1.3,8.6-3.6l12.5-12.6c-0.4,0-0.7,0-1.1,0l0,0 c-4.2,0-8.4-1.7-11.4-4.7l-8.6-8.6l-8.6,8.6C1.3,66.1,0,69.3,0,72.5z'/><g><path d='M40.9,3.6C38.6,1.3,35.6,0,32.3,0S26,1.3,23.7,3.6L11.1,16.1c0.4,0,0.7,0,1.1,0c4.1,0,8.3,1.6,11.5,4.7l8.6,8.6l8.6-8.6 C45.7,16.1,45.7,8.3,40.9,3.6z'/><path d='M2.2,22.2L2.2,22.2L2.2,22.2z'/></g><path class='st0' d='M3.7,41L3.7,41c2.3,2.3,5.3,3.5,8.5,3.5c0,0,0,0,0.1,0c3.2,0,6.3-1.3,8.6-3.6l8.6-8.6l-8.6-8.6 c-2.4-2.4-5.5-3.6-8.6-3.6S6,21.3,3.6,23.7C-1.2,28.4-1.2,36.2,3.7,41L3.7,41z'/><g class='st1'><path d='M76.3,62.6C66,62.6,59.7,57.2,59.6,49h12.5c0,2.8,1.9,4,4.4,4c1.9,0,3.7-1,3.7-2.9c0-2.2-2.9-2.8-6.5-3.4 c-5.9-1-13.6-2.7-13.6-11.9c0-7.6,6.5-12.5,16.1-12.5s15.9,5.1,16,12.8H80.1c0-2.4-1.6-3.5-4-3.5c-2.1,0-3.5,1-3.5,2.8 c0,2.2,2.9,2.7,6.5,3.3C85,38.7,93,40,93,49.5C93,57.4,86.3,62.6,76.3,62.6L76.3,62.6z'/></g><g class='st1'><path d='M138,42.1c0,1.1-0.1,2.3-0.3,3.4h-28.1c0.9,4.3,3.6,6.6,7.7,6.6c3,0,5.6-1.3,6.8-3.5h13c-2.7,8.6-10.3,14-19.8,14 c-11.8,0-20.5-8.6-20.5-20.2s8.7-20.1,20.5-20.1C129.6,22.3,138,31,138,42.1L138,42.1z M109.9,38.3h15.3c-1.1-3.8-3.9-5.8-7.8-5.8 C113.6,32.5,111,34.6,109.9,38.3z'/></g><g class='st1'><path d='M183.6,42.1c0,1.1-0.1,2.3-0.3,3.4h-28.1c0.9,4.3,3.6,6.6,7.7,6.6c3,0,5.6-1.3,6.8-3.5h13c-2.7,8.6-10.3,14-19.8,14 c-11.8,0-20.5-8.6-20.5-20.2s8.7-20.1,20.5-20.1C175.1,22.3,183.6,31,183.6,42.1L183.6,42.1z M155.5,38.3h15.3 c-1.1-3.8-3.9-5.8-7.8-5.8C159.2,32.5,156.5,34.6,155.5,38.3z'/></g><g class='st1'><path d='M211.1,61.4l-9.5-16v16h-13V9.9h13v28.5l9-14.8h14.6l-11.8,18l13,19.8H211.1z'/><path d='M268.4,23.5v37.8h-10.1l-1.1-2.7c-3.1,2.5-7,4-11.4,4c-11.6,0-19.8-8.4-19.8-20.2c0-11.7,8.3-20,19.8-20 c4.5,0,8.4,1.5,11.6,4.1l1.3-2.9L268.4,23.5z M256,42.5c0-4.9-3.6-8.6-8.5-8.6s-8.5,3.7-8.5,8.6s3.6,8.6,8.5,8.6S256,47.4,256,42.5 z'/></g><path d='M12.2,48.5c-0.3,0-0.7,0-1,0L23.7,61c2.3,2.3,5.4,3.6,8.6,3.6l0,0l0,0l0,0c3.3,0,6.3-1.3,8.6-3.6c4.8-4.8,4.7-12.5,0-17.3 l-8.6-8.6l-8.6,8.6C20.7,46.8,16.5,48.5,12.2,48.5L12.2,48.5z'/></svg>

package/dist/init-template/app/ui/src/components/setup/steps/complete/index.tsx

@@ -0,0 +1,32 @@
+import { Button, Typography } from "@mui/material"
+import { Stack } from "@mui/system"
+import {SeekaAppWizardStep, SeekaAppWizardHeading, SeekaAppWizardStepContent, SeekaBotHappy, SeekaAppWizardStepActions, sendSeekaCoreAppCommand} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onBack?: () => void
+}
+
+export const AppSetupCompletedStep = ({ onBack }: Props) => {
+    return (
+        <SeekaAppWizardStep>
+            <Stack direction={"row"} sx={{ width: '100%' }} gap={12} alignItems="center" justifyContent={"center"}>
+                <SeekaBotHappy style={{ width: '260px' }} />
+                <Stack gap={6} alignItems="flex-start" justifyContent={"center"}>
+                    <Stack gap={3}>
+                        <SeekaAppWizardHeading title="Success!" />_b
+
+                        <Typography>ExampleApp™ is now connected to Seeka</Typography>
+                    </Stack>
+
+                    <SeekaAppWizardStepActions StackProps={{ gap: 3 }}>
+                        <Button variant='text' color="primary" onClick={onBack}>Back</Button>
+                        <Button variant='contained' color="primary" onClick={() => sendSeekaCoreAppCommand('dashboard')}>Back to dashboard</Button>
+                        <Button variant='outlined' color="primary" onClick={() => sendSeekaCoreAppCommand('appsList')}>Connect another app</Button>
+                    </SeekaAppWizardStepActions>
+                </Stack>
+
+            </Stack>
+
+        </SeekaAppWizardStep>
+    )
+}

package/dist/init-template/app/ui/src/components/setup/steps/first/index.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@mui/material"
+import seekaAppIcon from '../../../../assets/app-icon.svg'
+import {SeekaAppWizardStep, SeekaAppWizardHeading, SeekaAppWizardStepContent, SeekaAppWizardStepActions} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onNext?: () => void
+}
+
+export const AppSetupFirstStep = ({ onNext }: Props) => {    return (
+        <SeekaAppWizardStep>
+            <SeekaAppWizardHeading title="Connect to ExampleApp™" image={seekaAppIcon}>
+                Connecting your ExampleApp™ to Seeka is super easy and can be done in around 3 minutes by anyone with Admin access to ExampleApp™.
+            </SeekaAppWizardHeading>
+            <SeekaAppWizardStepContent title="Instructions" subtitle="Authenticate ExampleApp">
+                <ol>
+                    <li>Click the Authenticate ExampleApp button</li>
+                    <li>Select the account that is authorised to your ExampleApp™ account</li>
+                    <li>Follow the guided prompts to authorise Seeka.</li>
+                </ol>
+            </SeekaAppWizardStepContent>
+
+            <SeekaAppWizardStepActions>
+                {onNext && <Button variant='contained' color="primary" onClick={onNext}>Next</Button>}
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    )
+}

package/dist/init-template/app/ui/src/components/setup/steps/index.tsx

@@ -0,0 +1,22 @@
+
+import { Box } from "@mui/material";
+import { useState } from "react";
+import { AppSetupFirstStep } from "./first";
+import { AppSetupSecondStep } from "./second";
+import { AppSetupCompletedStep } from "./complete";
+import {SeekaAppLoadingSpinner} from "@seeka-labs/sdk-apps-react";
+
+export const SetupSteps = () => {
+    const [activeStep, setActiveStep] = useState<number | null>(0)
+    const [loading, setLoading] = useState(true)
+
+    if (activeStep === null || loading) return <Box><SeekaAppLoadingSpinner /></Box>
+
+    return (
+        <Box>
+            {activeStep === 0 && <AppSetupFirstStep onNext={() => setActiveStep(1)} />}
+            {activeStep === 0 && <AppSetupSecondStep onNext={() => setActiveStep(2)} onBack={() => setActiveStep(1)} />}
+            {activeStep === 3 && <AppSetupCompletedStep onBack={() => setActiveStep(1)} />}
+        </Box>
+    )
+}