@seeka-labs/cli-apps 3.7.0 → 3.8.2

package/dist/ai-context/internal/examples/v2/yeastar/app/server/src/lib/state/seeka/installations.ts

@@ -0,0 +1,67 @@
+import type { Logger } from 'winston';
+
+import { YeastarTrackingSettings, YeastarUserMapping } from '@seeka-app-yeastar/lib';
+import { getList, remove, set, tryGet } from '../redis';
+
+export interface SeekaAppInstallState {
+    /** ID of the organisation that installed the app */
+    organisationId: string;
+    /** ID of the brand that installed the app */
+    organisationBrandId: string;
+    /** ID of the installation of the app */
+    applicationInstallId: string;
+    // Installation settings provided by the user installing the app
+    installationSettings: YeastarAppInstallSettings
+    // State relating to the app and installation of the app
+    installationState: YeastarAppInstallState;
+
+    // When the app was installed
+    installedAt: string; // new Date().toISOString()
+}
+
+export interface YeastarAppInstallState {
+    grantedPermissions?: string[]
+    tracking?: YeastarTrackingSettings
+    yeastarUserMappings?: YeastarUserMapping[];
+}
+
+export type YeastarAppInstallSettings = {
+
+}
+
+const stateType = 'install'
+
+export const tryGetInstallation = async (applicationInstallId: string, throwWhenNotFound: boolean, logger: Logger): Promise<SeekaAppInstallState | null> => {
+    const installation = await tryGet<SeekaAppInstallState>(stateType, applicationInstallId);
+    if (installation == null && throwWhenNotFound) {
+        throw new Error(`Seeka installation ${applicationInstallId} not found`);
+    }
+
+    return installation;
+}
+
+export const listInstallations = async (logger: Logger): Promise<SeekaAppInstallState[]> => {
+    const installations = await getList<SeekaAppInstallState>(stateType);
+
+    return installations;
+}
+
+
+export const createOrUpdateInstallation = async (state: SeekaAppInstallState, logger: Logger): Promise<SeekaAppInstallState> => {
+    if (!state.installationState) state.installationState = {};
+    if (!state.installedAt) state.installedAt = new Date().toISOString();
+
+    const creating = (await tryGetInstallation(state.applicationInstallId, false, logger)) === null;
+
+    await set(stateType, state.applicationInstallId, state);
+
+    logger.info(creating ? 'Created installation state' : 'Updated installation state', { applicationInstallId: state.applicationInstallId, organisationId: state.organisationId, organisationBrandId: state.organisationBrandId });
+
+    return state;
+}
+
+export const deleteInstallation = async (applicationInstallId: string, logger: Logger): Promise<void> => {
+    await remove(stateType, applicationInstallId);
+
+    logger.info('Deleted installation state', { applicationInstallId });
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/server/src/lib/yeastar/calls.ts

@@ -0,0 +1,120 @@
+import { getActivityName, PersonIdentifiers, SeekaAppHelper, TrackingActivityNames, TrackingEventSourceOriginType } from "@seeka-labs/sdk-apps-server";
+import { v4 as uuidv4 } from 'uuid';
+import { Logger } from "winston";
+import * as packageJson from '../../../package.json';
+import { SeekaAppInstallState } from "../state/seeka/installations";
+
+export interface CleanedYeastarCallJournalPayload extends Omit<YeastarCallJournalPayload, "Call_From" | "Call_To" | "StartTime" | "EndTime"> {
+    Call_From: string | null;
+    Call_To: string | null;
+    call_from_phone: string | null;
+    call_to_ext: string | null;
+    StartTime: Date | null;
+    EndTime: Date | null;
+}
+
+const journalLogToSeekaProfile = (payload: CleanedYeastarCallJournalPayload): PersonIdentifiers => {
+    const identity: PersonIdentifiers = {}
+    if (payload.call_from_phone) {
+        identity.phone = [payload.call_from_phone]
+    }
+
+    return identity;
+}
+
+export async function trackCallJournalLogInSeeka(payload: CleanedYeastarCallJournalPayload, installation: SeekaAppInstallState, logger: Logger): Promise<void> {
+    if (payload.CallType !== 'Inbound') return;
+
+    const activityNameToTrack = installation.installationState?.tracking?.inboundCall?.activityName
+    if (!activityNameToTrack) return;
+
+    // Create seeka API helper
+    const { name, version }: { name: string, version: string } = packageJson;
+    const helper = SeekaAppHelper.create(process.env['SEEKA_APP_SECRET'] as string, {
+        organisationId: installation.organisationId as string,
+        applicationInstallId: installation.applicationInstallId as string,
+        applicationId: process.env['SEEKA_APP_ID'] as string,
+    }, { name, version: version.split('-')[0] }, installation.installationState.grantedPermissions, logger);
+
+    const activityNameInfo = getActivityName(activityNameToTrack.inputValue)
+
+    const seekaPayload = {
+        activity: {
+            activityId: uuidv4(),
+            activityName: activityNameInfo,
+            activityNameCustom: activityNameInfo === TrackingActivityNames.Custom ? activityNameToTrack.inputValue : undefined,
+            time: payload.StartTime,
+            contentItem: {
+                contentName: payload.CalleeName
+            }
+        },
+        profile: journalLogToSeekaProfile(payload),
+    }
+
+    await helper.api.trackActivityBatch([seekaPayload], { origin: TrackingEventSourceOriginType.Phone })
+
+}
+
+export function cleanYeastarCallJournalPayload(payload: unknown): CleanedYeastarCallJournalPayload {
+    const cleaned: Partial<CleanedYeastarCallJournalPayload> = {};
+
+    // Step 1: Clean all values
+    for (const [key, value] of Object.entries(payload)) {
+        cleaned[key as keyof CleanedYeastarCallJournalPayload] = value === "<no value>" ? null : value;
+    }
+
+    // Step 2: Extract phone and extension
+    const extractBetweenAngleBrackets = (input: string | null): string | null => {
+        if (!input) return null;
+        const match = input.match(/<([^>]+)>/);
+        return match ? match[1] : null;
+    };
+
+    const callFrom = cleaned.Call_From as string | null;
+    const callTo = cleaned.Call_To as string | null;
+
+    cleaned.call_from_phone = extractBetweenAngleBrackets(callFrom);
+    cleaned.call_to_ext = extractBetweenAngleBrackets(callTo);
+
+    // Step 3: Parse Unix timestamps into JS Dates
+    const parseUnixToDate = (unix: string | null): Date | null => {
+        if (!unix || isNaN(Number(unix))) return null;
+        return new Date(Number(unix) * 1000);
+    };
+
+    cleaned.StartTime = parseUnixToDate(cleaned.StartTimeUnix ?? null);
+    cleaned.EndTime = parseUnixToDate(cleaned.EndTimeUnix ?? null);
+
+    return cleaned as CleanedYeastarCallJournalPayload;
+}
+
+export interface YeastarCallJournalPayload {
+    Call_From: string;
+    Call_To: string;
+    Call_Log_Status: string;
+    StartTimeUnix: string; // Unix timestamp as string
+    EndTimeUnix: string;   // Unix timestamp as string
+    StartTime: string;     // Human-readable time string
+    EndTime: string;
+    Talk_Duration: string; // e.g., "00:01:23"
+    Talk_Duration_Sec: string; // e.g., "83"
+    Ring_Duration: string;
+    Ring_Duration_Sec: string;
+    Description: string;
+    Subject: string;
+    RecordPath: string; // May be a URL or file path
+    CallerName: string;
+    CalleeName: string;
+    Direction: string; // "Inbound" or "Outbound"
+    CallType: 'Outbound' | 'Inbound';  // E.g., "External", "Internal", "Trunk"
+    TrunkName: string;
+    TrunkID: string;
+    Extension: string; // Extension number
+    ExtensionName: string;
+    ExtensionOutboundCallerID: string;
+    ExtensionOutboundCallerIDName: string;
+    UniqueID: string;
+    CallerIDNum: string;
+    CalleeIDNum: string;
+    CallID: string;
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/server/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "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"
+  ]
+}

package/dist/ai-context/internal/examples/v2/yeastar/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/ai-context/internal/examples/v2/yeastar/app/ui/index.html

@@ -0,0 +1,22 @@
+<!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 Yeastar</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 type="module" src="/src/index.tsx"></script>
+    <script vite-ignore src="%VITE_BASE_URL%config.js?c=%VITE_RELEASE_TAG%"></script>
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+
+</html>

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@seeka-app-yeastar/ui",
+  "version": "2.0.4",
+  "description": "Seeka app seeka-app-yeastar",
+  "author": "Seeka <administrator@seeka.co>",
+  "license": "MIT",
+  "homepage": "/app",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@hookform/resolvers": "^4.1.3",
+    "@mui/icons-material": "6.5.0",
+    "@mui/lab": "6.0.1-beta.34",
+    "@mui/material": "6.5.0",
+    "@mui/styles": "^6.4.11",
+    "@mui/system": "^6.4.11",
+    "@reduxjs/toolkit": "^2.8.2",
+    "@seeka-app-yeastar/lib": "2.0.4",
+    "@seeka-labs-internal/lib-api-app": "^3.0.24-alpha.0",
+    "@seeka-labs-internal/lib-react-common": "^3.0.24-alpha.0",
+    "@seeka-labs/converge": "^1.8.87",
+    "@seeka-labs/sdk-apps-core": "2.0.13-alpha.0",
+    "@types/react": "19.1.8",
+    "@types/react-dom": "19.1.6",
+    "lodash-es": "^4.17.21",
+    "material-ui-confirm": "^3.0.18",
+    "moment": "^2.30.1",
+    "moment-duration-format": "^2.3.2",
+    "notistack": "^3.0.2",
+    "query-string": "^9.2.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-hook-form": "^7.60.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.7.0",
+    "redux": "^5.0.1",
+    "redux-persist": "^6.0.0",
+    "typescript": "5.8.3",
+    "uuid": "^11.1.0",
+    "yup": "^1.6.1"
+  },
+  "scripts": {
+    "start": "vite",
+    "clean": "rimraf build package dist",
+    "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 && rimraf ../server/dist/src/ui && mkdir ../server/dist/src/ui -p && cp -r build/ ../server/dist/src/ui",
+    "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",
+    "refreshapi": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 npx @rtk-query/codegen-openapi src/shared/api/redux/app/openapi-config.json"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rtk-query/codegen-openapi": "^2.0.0",
+    "@types/fs-extra": "^11",
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-react": "^4.7.0",
+    "cross-env": "^7.0.3",
+    "fs-extra": "^11.3.0",
+    "rimraf": "6.0.1",
+    "vite": "^7.0.6"
+  }
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/public/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="initial-scale=1, width=device-width" />
+  <title>CRA + Material UI + TS</title>
+  <!-- Fonts to support Material Design -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
+  <script src="/app/config.js"></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Your Orders",
+  "name": "Your Orders",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/src/App.tsx

@@ -0,0 +1,73 @@
+import Box from '@mui/material/Box';
+import { YeastarTrackingSettings, YeastarUserMapping } from '@seeka-app-yeastar/lib';
+import * as React from 'react';
+import {
+  createBrowserRouter,
+  Outlet,
+  RouterProvider,
+} from "react-router-dom";
+import { Index } from './routes/home';
+import { SeekaCoreApiReduxProvider } from './seeka-labs-app-sdk-ui/api/redux';
+import { TokenProvider } from './seeka-labs-app-sdk-ui/shared/auth/tokenProvider';
+
+let basename = (import.meta as any).env.BASE_URL
+// trim last /
+basename = basename.substring(0, basename.length - 1);
+
+function AppLayout() {
+  return (
+    <TokenProvider>
+      <SeekaCoreApiReduxProvider>
+        <Outlet />
+      </SeekaCoreApiReduxProvider>
+    </TokenProvider>
+  );
+}
+
+const router = createBrowserRouter([
+  {
+    element: <AppLayout />,
+    children: [
+      { path: '/', element: <Index /> },
+      // other routes…
+    ],
+  },
+], { basename });
+
+declare global {
+  interface Window {
+    seekaAppConfig: {
+      appBaseUrl: string
+      seekaAppId: string;
+      seekaAppInstallId: string;
+      state: {
+        userMappings?: YeastarUserMapping[],
+        trackingSettings?: YeastarTrackingSettings
+      }
+    };
+  }
+}
+
+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 }}>
+        <RouterProvider router={router} />
+      </Box>
+  );
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/src/assets/yeastar-icon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path fill="#FFF" d="M0 0h90v90H0z"/><path d="M44.283 15.006c-3.094-.186-5.785 3.882-6.094 9.103-.304 5.194 1.942 9.583 4.994 9.77.068.005.142.005.21.005 3 0 5.586-3.994 5.879-9.098.293-5.199-1.937-9.583-4.99-9.78Z" fill="#0098F0"/><path d="M41.471 39.308c-.356-2.224-3.465-3.659-7.915-3.659a21.92 21.92 0 0 0-3.634.315c-5.91 1.003-10.35 4.128-9.89 6.975.357 2.192 3.54 3.664 7.922 3.664a21.92 21.92 0 0 0 3.638-.315c2.827-.48 5.403-1.456 7.262-2.735 1.921-1.328 2.853-2.832 2.617-4.245Z" fill="#77BE00"/><path d="M68.768 31.687c-.618-1.461-2.445-2.293-5-2.293-2.188 0-4.748.603-7.214 1.696-5.528 2.474-9.062 6.767-7.868 9.562.617 1.46 2.44 2.293 4.994 2.293h.005c2.189 0 4.749-.598 7.215-1.696 5.528-2.47 9.062-6.762 7.868-9.562Z" fill="#F5B40A"/><path d="M36.822 49.835a1.911 1.911 0 0 0-.921-.235c-2.361 0-5.235 4.362-6.837 10.383-1.859 6.975-1.414 13.47 1.01 14.782.283.16.597.235.922.235 2.366 0 5.24-4.368 6.837-10.383 1.864-6.975 1.419-13.47-1.01-14.782Zm14.618-2.294c-3.257 0-5.911 3.643-5.911 8.117 0 4.474 2.654 8.1 5.91 8.1 3.272 0 5.927-3.631 5.927-8.1 0-4.469-2.66-8.117-5.927-8.117Z" fill="#0098F0"/></g></svg>

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/src/components/setup/steps/account/index.tsx

@@ -0,0 +1,39 @@
+import { useTokens } from "@/seeka-labs-app-sdk-ui/shared/auth/useTokens"
+import { SeekaAppWizardHeading } from "@/seeka-labs-app-sdk-ui/wizard/heading"
+import { SeekaAppWizardStep } from "@/seeka-labs-app-sdk-ui/wizard/step"
+import { SeekaAppWizardStepActions } from "@/seeka-labs-app-sdk-ui/wizard/step/actions"
+import { SeekaAppWizardStepContent } from "@/seeka-labs-app-sdk-ui/wizard/step/content"
+import { Button } from "@mui/material"
+import { appAccessTokenQueryParamName, coreApiAccessTokenQueryParamName } from "@seeka-labs/sdk-apps-core"
+import yeastarIcon from '../../../../assets/yeastar-icon.svg'
+
+type Props = {
+    onBack?: () => void
+    onNext: () => void
+}
+
+export const YeastarAccountStep = ({ onBack, onNext }: Props) => {
+
+    const appTokens = useTokens();
+
+    const downloadConfig = async () => {
+        window.open(`${window.seekaAppConfig.appBaseUrl}/app/api/settings/yeastar/config?${appAccessTokenQueryParamName}=${appTokens?.appAccessToken}&${coreApiAccessTokenQueryParamName}=${appTokens?.coreApiAccessToken}`)
+    }
+
+    return (
+        <SeekaAppWizardStep>
+            {/* {JSON.stringify(detailedCustomer)} */}
+            <SeekaAppWizardHeading image={yeastarIcon} title="Yeastar™ config">
+                Download the config and upload it to your Yeastar™ CRM.
+            </SeekaAppWizardHeading>
+
+            <SeekaAppWizardStepContent>
+                <Button variant="contained" onClick={downloadConfig}>Download Config</Button>
+            </SeekaAppWizardStepContent>
+
+            <SeekaAppWizardStepActions>
+                <Button variant='outlined' color="primary" onClick={onNext}>Next</Button>
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    )
+}

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/src/components/setup/steps/index.tsx

@@ -0,0 +1,31 @@
+import { SeekaAppLoadingSpinner } from "@/seeka-labs-app-sdk-ui/shared/loading-spinner";
+import { Box } from "@mui/material";
+import { useState } from "react";
+import { YeastarAccountStep } from "./account";
+import { TrackingSettingsStep } from "./tracking";
+import { YeastarUserMappingStep } from "./user-mapping";
+
+export const SetupSteps = () => {
+    const [activeStep, setActiveStep] = useState<number | null>(0)
+
+    // useEffect(() => {
+    //     if (hasCustomer) {
+    //         setActiveStep(2)
+    //     }
+    //     else if (hasCustomers) {
+    //         setActiveStep(1)
+    //     }259
+    //     else {
+    //         setActiveStep(0)
+    //     } 
+    // }, [])
+
+    return (
+        <Box>
+            {activeStep === null && <SeekaAppLoadingSpinner />}
+            {activeStep === 0 && <YeastarAccountStep onNext={() => setActiveStep(1)} />}
+            {activeStep === 1 && <YeastarUserMappingStep onSkip={() => setActiveStep(2)} onNext={() => setActiveStep(2)} onBack={() => setActiveStep(0)} />}
+            {activeStep === 2 && <TrackingSettingsStep onBack={() => setActiveStep(1)} />}
+        </Box>
+    );
+};

package/dist/ai-context/internal/examples/v2/yeastar/app/ui/src/components/setup/steps/tracking/index.tsx

@@ -0,0 +1,125 @@
+import { useTokens } from "@/seeka-labs-app-sdk-ui/shared/auth/useTokens"
+import { ActivityNameItem } from "@/seeka-labs-app-sdk-ui/shared/form/fields/activities"
+import { ActivitySourceActivityNameFilterSelect } from "@/seeka-labs-app-sdk-ui/shared/form/fields/activitySourceActivityNameFilterSelect"
+import { FormProvider } from "@/seeka-labs-app-sdk-ui/shared/form/provider"
+import { SeekaAppWizardHeading } from "@/seeka-labs-app-sdk-ui/wizard/heading"
+import { SeekaAppWizardStep } from "@/seeka-labs-app-sdk-ui/wizard/step"
+import { SeekaAppWizardStepActions } from "@/seeka-labs-app-sdk-ui/wizard/step/actions"
+import { SeekaAppWizardStepContent } from "@/seeka-labs-app-sdk-ui/wizard/step/content"
+import { yupResolver } from "@hookform/resolvers/yup"
+import { Button } from "@mui/material"
+import { YeastarTrackingSettings } from "@seeka-app-yeastar/lib"
+import { appApi, getActivityNameTitle, RhfAutocompleteOption, TrackingActivityNames } from "@seeka-labs-internal/lib-react-common"
+import { getActivityName } from "@seeka-labs/converge"
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from "@seeka-labs/sdk-apps-core"
+import { enqueueSnackbar } from "notistack"
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import * as yup from 'yup'
+import yeastarIcon from '../../../../assets/yeastar-icon.svg'
+
+type Props = {
+    onBack?: () => void
+    onNext?: () => void
+}
+
+export const YeastarTrackingSettingsFormSchema = yup.object({
+    inboundCall: yup.object().shape({
+        activityName: yup.mixed<RhfAutocompleteOption>().required()
+    })
+}).required();
+
+export type YeastarTrackingSettingsFormType = yup.InferType<
+    typeof YeastarTrackingSettingsFormSchema
+>;
+
+export const TrackingSettingsStep = ({ onBack, onNext }: Props) => {
+    const appTokens = useTokens();
+    const [saving, setSaving] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const activityNamesQuery = appApi.endpoints.referenceDataGetAllActivityNames.useQuery({})
+    const [activityNames, setActivityNames] = useState<ActivityNameItem[]>([]);
+
+    const trackingSettings: YeastarTrackingSettings | null = window.seekaAppConfig.state.trackingSettings || null;
+    const methods = useForm<YeastarTrackingSettingsFormType>({
+        resolver: yupResolver(YeastarTrackingSettingsFormSchema),
+        mode: "onBlur",
+        criteriaMode: "all",
+        defaultValues: {
+            inboundCall: {
+                activityName: trackingSettings?.inboundCall?.activityName || {}
+            }
+        }
+    });
+    const { control, handleSubmit, watch, formState: { errors, isValid, isDirty } } = methods
+
+    const loadMetadata = async () => {
+        const activityNames = activityNamesQuery.data?.result || [];
+        setActivityNames(activityNames.map(e => ({
+            activityName: getActivityName(e),
+            activityNameCustom: getActivityName(e) === TrackingActivityNames.Custom ? e : undefined,
+            label: getActivityNameTitle(e),
+            key: e
+        })))
+    }
+
+    useEffect(() => {
+        loadMetadata()
+    }, [activityNamesQuery.data])
+    // const noMappings = mappings.fields.length === 0
+
+    const onSubmit = async (data: YeastarTrackingSettingsFormType) => {
+        try {
+            setSaving(true)
+            let success = true;
+            try {
+                const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/settings/yeastar/config/tracking', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                        [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                    },
+                    body: JSON.stringify(data)
+                })
+                if (!response.ok) {
+                    success = false;
+                }
+            }
+            catch (error) {
+                console.error(error);
+                success = false;
+            }
+            finally {
+                setSaving(false)
+            }
+            if (success) {
+                enqueueSnackbar('Saved', { variant: 'success' });
+            }
+            else {
+                enqueueSnackbar('Failed', { variant: 'error' });
+            }
+        } catch (err) {
+            enqueueSnackbar('Error updating', { variant: 'error' });
+        }
+    };
+
+    return (
+        <SeekaAppWizardStep>
+            {/* {JSON.stringify(detailedCustomer)} */}
+            <SeekaAppWizardHeading title="Yeastar Tracking settings" image={yeastarIcon}>
+                In this step you will select the activities to track.
+            </SeekaAppWizardHeading>
+
+            <SeekaAppWizardStepContent>
+                <FormProvider methods={methods}>
+                    <ActivitySourceActivityNameFilterSelect label="Activity to track when a call is received" name="inboundCall.activityName" allowActivityNameOverride activityNames={activityNames} />
+                </FormProvider>
+            </SeekaAppWizardStepContent>
+
+            <SeekaAppWizardStepActions>
+                <Button variant='contained' color="primary" loading={saving} type="submit" onClick={handleSubmit(onSubmit)}>Save</Button>
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    )
+}