@seeka-labs/cli-apps 3.7.0 → 3.8.2

package/dist/ai-context/internal/examples/v3/google-ads/app/ui/src/components/customer/index.tsx

@@ -0,0 +1,185 @@
+
+import { Autocomplete, Box, CircularProgress, Stack, TextField, Typography } from "@mui/material";
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from "@seeka-labs/sdk-apps-core";
+import { useEffect, useState } from "react";
+import {SeekaAppLoadingSpinner, useTokens} from "@seeka-labs/sdk-apps-react";
+import {GoogleAdsCustomerInfo} from "@seeka-labs-apps/google-ads-lib";
+
+type Props = {
+    customerId: string | null
+    rootCustomerId: string | null
+    onChange: (customerId: string, rootCustomerId: string | null) => void
+    loading: boolean
+}
+
+type GoogleAdsCustomerInfoOption = GoogleAdsCustomerInfo & {
+    rootCustomerId?: string;
+}
+
+export const GoogleCustomer = ({ customerId, rootCustomerId, onChange, loading }: Props) => {
+    // Get query string params from react-router-dom
+    // const location = useLocation();
+    // const searchParams = new URLSearchParams(location.search);
+    const appTokens = useTokens()
+    // const customersQueryString = (searchParams.get('customers') || '').split(',').map(c => c.trim()).filter(Boolean);
+    const [customersState, setCustomersState] = useState<GoogleAdsCustomerInfoOption[] | null>(window.seekaAppConfig?.state?.googleAdsAvailableCustomers || null)
+    // const customers = customersQueryString.length > 0 ? customersQueryString : customersState;
+
+    const [selectedCustomer, setSelectedCustomer] = useState<GoogleAdsCustomerInfoOption | null>(null);
+    // const [hasMcc, setHasMcc] = useState<boolean | null>(null);
+
+    // console.log('heree', customersState)
+    const loadCustomers = async (setValue: boolean) => {
+        try {
+            // setHasMcc(null)
+            const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/customers', {
+                method: 'GET',
+                headers: {
+                    [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                    [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                }
+            })
+
+            const allCustomers = ((await response.json())?.customers as GoogleAdsCustomerInfo[])
+            const customerOptions: GoogleAdsCustomerInfoOption[] = []
+            allCustomers.forEach(customer => {
+                if (customer.children && customer.children.length > 0) {
+                    customerOptions.push({ ...customer, rootCustomerId: customer.customerId, children: [] })
+                    customerOptions.push(...customer.children.map(child => ({ ...child, rootCustomerId: customer.customerId })))
+                }
+                else customerOptions.push({ ...customer, rootCustomerId: '' })
+            })
+            // setHasMcc(Boolean(customerOptions.find(e => e.isManager && e.rootCustomerId)))
+            setCustomersState(customerOptions.sort((a, b) => a.customerName.localeCompare(b.customerName)))
+            if (setValue) {
+                setSelectedCustomer(
+                    customerOptions.find((e) =>
+                        rootCustomerId
+                            ? e.rootCustomerId === rootCustomerId &&
+                            e.customerId === customerId
+                            : e.customerId === customerId
+                    ) || null
+                );
+            }
+            // order customers by customer name
+            // setCustomersState(((await response.json())?.customers as GoogleAdsCustomerInfo[]).sort((a, b) => a.customerName.localeCompare(b.customerName)))
+        }
+        catch (error) {
+            console.error('Failed to load customers', error)
+            setCustomersState(window.seekaAppConfig?.state?.googleAdsAvailableCustomers || null)
+        }
+    }
+
+    useEffect(() => {
+        loadCustomers(true)
+    }, [])
+
+    // console.log('heree customersState', customersState)
+
+    return customersState === null ? (
+        <SeekaAppLoadingSpinner />
+    ) : (
+        <Stack direction="row" alignItems="center" spacing={2}>
+            {/* {JSON.stringify({ loading, customersState })} */}
+            <Autocomplete
+                id="customer-id"
+                options={customersState}
+                //   groupBy={
+                //     !hasMcc ? undefined : (option) => option.rootCustomerId || ""
+                //   }
+                fullWidth
+                getOptionKey={(option) => option.customerId}
+                getOptionLabel={(option) => option.customerName}
+                filterOptions={(options, s) =>
+                    options.filter(
+                        (e) =>
+                            e.customerId.includes(s.inputValue) ||
+                            e.rootCustomerId?.includes(s.inputValue) ||
+                            e.customerName
+                                .toLowerCase()
+                                .includes(s.inputValue.toLowerCase())
+                    )
+                }
+                //   renderGroup={
+                //     !hasMcc
+                //       ? undefined
+                //       : (params) => (
+                //           <li key={params.key}>
+                //             <Box>{params.group}</Box>
+                //             <ul>{params.children}</ul>
+                //           </li>
+                //         )
+                //   }
+                renderOption={(params, option) => {
+                    return (
+                        <li {...params} key={option.customerId}>
+                            <Stack
+                                alignItems={"center"}
+                                justifyContent={"space-between"}
+                                sx={{ width: "100%" }}
+                                direction={"row"}
+                            >
+                                <Box>{option.customerName}</Box>
+                                <Stack
+                                    alignItems={"center"}
+                                    justifyContent={"flex-end"}
+                                    gap={2}
+                                    direction={"row"}
+                                >
+                                    <Box>
+                                        <Typography variant="body1" color="textDisabled">
+                                            {option.isManager ? "MCC" : ""}
+                                        </Typography>
+                                    </Box>
+                                    <Box>{option.customerId}</Box>
+                                </Stack>
+                            </Stack>
+                        </li>
+                    );
+                }}
+                renderInput={(params) => <TextField {...params} />}
+                // renderGroup={
+                //     !hasMcc
+                //         ? undefined
+                //         : (params) => (
+                //             <li key={params.key}>
+                //                 <Box>{params.group}</Box>
+                //                 <ul>{params.children}</ul>
+                //             </li>
+                //         )
+                // }
+                disabled={customersState == null || loading}
+                value={selectedCustomer}
+                onChange={(e, a) => {
+                    setSelectedCustomer(a);
+                    if (!a) {
+                        onChange('', null);
+                        return;
+                    }
+                    if (a.rootCustomerId) {
+                        onChange(a.customerId, a.rootCustomerId);
+                    }
+                    else {
+                        onChange(a?.customerId || "", null);
+                    }
+                }}
+            />
+            {/* <MenuItem value={''}>-- Select Google Ads account --</MenuItem>
+                    {customersState.map((customer, index) => (
+                        <MenuItem key={index} value={customer.customerId}>
+                            <Stack alignItems={'center'} justifyContent={'space-between'} sx={{ width: '100%' }} direction={'row'}>
+                                <Box>{customer.customerName}</Box>
+                                <Stack alignItems={'center'} justifyContent={'flex-end'} gap={2} direction={'row'}>
+                                    <Box><Typography variant="body1" color="textDisabled">{customer.isManager ? 'MCC' : ''}</Typography></Box>
+                                    <Box>{customer.customerId}</Box>
+                                </Stack>
+                            </Stack>
+                        </MenuItem>
+                    ))}
+                </Select> */}
+            <Box sx={{ width: "24px", height: "24px" }}>
+                <CircularProgress size={24} sx={{ display: loading ? "" : "none" }} />
+            </Box>
+        </Stack>
+    );
+}

package/dist/ai-context/internal/examples/v3/google-ads/app/ui/src/components/google/login/index.tsx

@@ -0,0 +1,123 @@
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from '@seeka-labs/sdk-apps-core';
+import { useConfirm } from "material-ui-confirm";
+import { enqueueSnackbar } from 'notistack';
+import { useEffect, useState } from "react";
+import {SeekaAppLoadingSpinner, useTokens} from "@seeka-labs/sdk-apps-react";
+import {LinkedGoogleAdsUser} from "@seeka-labs-apps/google-ads-lib";
+
+export const GoogleLogin = ({ onChange }: { onChange: (newUser: LinkedGoogleAdsUser | null) => void }) => {
+    const appTokens = useTokens();
+    const appBaseUrl = window.seekaAppConfig?.appBaseUrl || '';
+    const [loading, setLoading] = useState(false);
+    const [waitingForAuth, setWaitingForAuth] = useState(false);
+    const [linkedGoogleAdsUser, setLinkedGoogleAdsUser] = useState(window.seekaAppConfig.state?.linkedGoogleAdsUser || null)
+
+    const confirm = useConfirm();
+    const googleLogin = () => {
+        setLoading(true)
+        setWaitingForAuth(true)
+        window.seekaAppConfig.state.linkedGoogleAdsUser = undefined;
+        window.open(appBaseUrl + '/api/auth/redirect/google?seekaAppId=' + window.seekaAppConfig.seekaAppId + '&seekaAppInstallId=' + window.seekaAppConfig.seekaAppInstallId);
+    }
+
+    const disconnect = async () => {
+        confirm()
+            .then(async () => {
+                setLoading(true)
+                let success = false;
+                try {
+                    const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/auth', {
+                        method: 'DELETE',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                            [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                        }
+                    })
+                    if (response.ok) {
+                        success = true;
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
+                finally {
+                    setLoading(false)
+                }
+                if (success) {
+                    enqueueSnackbar('Disconnected', { variant: 'success' });
+
+                    window.seekaAppConfig.state.linkedGoogleAdsUser = undefined;
+                    window.seekaAppConfig.state.googleAdsAvailableCustomers = [];
+                    window.seekaAppConfig.state.googleAdsCustomerId = undefined;
+                    onChange(null)
+                    setLinkedGoogleAdsUser(null)
+                }
+                else {
+                    enqueueSnackbar('Failed', { variant: 'error' });
+                }
+            })
+            .catch(() => { });
+    }
+
+    const checkLinkedUser = async () => {
+        const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/auth', {
+            method: 'GET',
+            headers: {
+                [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+            }
+        })
+        const res: LinkedGoogleAdsUser | null = (await response.json())?.linkedGoogleAdsUser
+        if (res) {
+            setWaitingForAuth(false)
+            setLoading(false)
+            window.seekaAppConfig.state.linkedGoogleAdsUser = res
+            window.seekaAppConfig.state.googleAdsAvailableCustomers = [];
+            window.seekaAppConfig.state.googleAdsCustomerId = undefined;
+
+            onChange(res)
+            setLinkedGoogleAdsUser(res)
+        }
+    }
+
+    let timer: NodeJS.Timeout | null = null;
+    useEffect(() => {
+        if (waitingForAuth) {
+            if (!timer) setTimeout(() => { timer = setInterval(checkLinkedUser, 2000) }, 2000)
+        }
+        else {
+            if (timer) {
+                clearInterval(timer)
+            }
+        }
+
+        return () => {
+            if (timer) {
+                clearInterval(timer)
+            }
+        }
+    }, [waitingForAuth])
+
+    return (
+        waitingForAuth ? (
+            <SeekaAppLoadingSpinner>Waiting for auth</SeekaAppLoadingSpinner>
+        ) : (
+            <Stack gap={2}>
+                {linkedGoogleAdsUser && <Typography variant="body2">Currently authenticated with <strong>{linkedGoogleAdsUser?.email}</strong></Typography>}
+                <Box>
+                    {linkedGoogleAdsUser ? (
+                        <Button color="primary" variant="text" size={'small'} loading={loading} onClick={googleLogin} endIcon={<RefreshIcon />}>Reauthenticate</Button>
+                    ) : (
+                        <Button color="primary" variant="contained" loading={loading} onClick={googleLogin}>Authenticate Google Ads</Button>
+                    )}
+                    {Boolean(linkedGoogleAdsUser) && <Button color="error" variant="text" size={'small'} loading={loading} onClick={disconnect} endIcon={<DeleteIcon />}>Disconnect</Button>}
+                </Box>
+            </Stack>
+        )
+    );
+}

package/dist/ai-context/internal/examples/v3/google-ads/app/ui/src/components/setup/steps/account/index.tsx

@@ -0,0 +1,222 @@
+import { GoogleCustomer } from "@/components/customer"
+import { Alert, Box, Button, Stack } from "@mui/material"
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from "@seeka-labs/sdk-apps-core"
+import { enqueueSnackbar } from "notistack"
+import { useEffect, useState } from "react"
+import googleAdsIcon from '../../../../assets/app-icon.svg'
+import {DetailedGoogleAdsCustomerInfo} from "@seeka-labs-apps/google-ads-lib";
+import {
+    SeekaAppWizardHeading,
+    SeekaAppWizardStep, SeekaAppWizardStepActions,
+    SeekaAppWizardStepContent,
+    useTokens
+} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onBack?: () => void
+    onNext: () => void
+}
+
+export const GoogleAccountStep = ({ onBack, onNext }: Props) => {
+    const appTokens = useTokens();
+    const initialCustomerId = window.seekaAppConfig.state.googleAdsCustomerId || '';
+    const initialRootCustomerId = window.seekaAppConfig.state.googleAdsRootCustomerId || '';
+    const [customerId, setCustomerId] = useState(initialCustomerId);
+    const [rootCustomerId, setRootCustomerId] = useState(initialRootCustomerId);
+    const [saving, setSaving] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [detailedCustomer, setDetailedCustomer] = useState<DetailedGoogleAdsCustomerInfo | null>(null);
+
+    const loadCustomer = async (cId: string, rCId: string | null) => {
+        setLoading(true)
+        try {
+            const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/customer?customerId=' + cId + '&rootCustomerId=' + (rCId || ''), {
+                method: 'GET',
+                headers: {
+                    [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                    [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                }
+            })
+            setDetailedCustomer(await response.json())
+            setLoading(false)
+        }
+        catch (error) {
+            setDetailedCustomer(null)
+        }
+    }
+
+    useEffect(() => {
+        if (customerId) {
+            loadCustomer(customerId, rootCustomerId)
+        }
+        else {
+            setDetailedCustomer(null)
+        }
+    }, [customerId, rootCustomerId])
+
+    useEffect(() => {
+        if (customerId) {
+            loadCustomer(customerId, rootCustomerId)
+        }
+        else {
+            setDetailedCustomer(null)
+        }
+    }, [])
+
+    const handleSave = async () => {
+        if (customerId) {
+            setSaving(true)
+            let success = true;
+            try {
+                const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/customer', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                        [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                    },
+                    body: JSON.stringify({ customerId, rootCustomerId })
+                })
+                if (!response.ok) {
+                    success = false;
+                }
+                else {
+                    window.seekaAppConfig.state.googleAdsCustomerId = customerId
+                    window.seekaAppConfig.state.googleAdsRootCustomerId = rootCustomerId
+                }
+            }
+            catch (error) {
+                console.error(error);
+                success = false;
+            }
+            finally {
+                setSaving(false)
+            }
+            if (success) {
+                enqueueSnackbar('Saved', { variant: 'success' });
+                onNext()
+            }
+            else {
+                enqueueSnackbar('Failed', { variant: 'error' });
+            }
+        }
+    }
+
+    return (
+        <SeekaAppWizardStep>
+            {/* {JSON.stringify(detailedCustomer)} */}
+            <SeekaAppWizardHeading title="Select Google Ads™ account" image={googleAdsIcon}>
+                In this step you will select the Google Ads™ account to your Seeka brand.
+            </SeekaAppWizardHeading>
+
+            <SeekaAppWizardStepContent title="Instructions" subtitle="Select Google Ads™ Account">
+                <ol>
+                    <li>
+                        <Stack gap={1}>
+                            Ensure you have selected the correct Google Ads™ account from the dropdown below
+                            <GoogleCustomer customerId={customerId} rootCustomerId={rootCustomerId} loading={loading || saving} onChange={(c, r) => { setCustomerId(c); setRootCustomerId(r || ''); }} />
+                        </Stack>
+                    </li>
+                </ol>
+            </SeekaAppWizardStepContent>
+
+            {/* Customer data terms */}
+            {!loading && customerId && !detailedCustomer?.customerDataTermsAccepted && (
+                <SeekaAppWizardStepContent subtitle="Customer data terms">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="error">
+                            Customer data terms are not accepted in Google Ads™
+                        </Alert>
+                    </Box>
+                    <ol>
+                        <li>Head to your Google Ads™ account.</li>
+                        <li>In the top horizontal menu, click <strong>'Tools and Settings'</strong>.</li>
+                        <li>From the dropdown, click <strong>'Conversions'</strong>.</li>
+                        <li>In the top left menu select <strong>'Settings'</strong>.</li>
+                        <li>Select <strong>'Customer data terms'</strong> from the middle menu.</li>
+                        <li>Read the terms and then check the box to accept terms.</li>
+                    </ol>
+                </SeekaAppWizardStepContent>)}
+            {!loading && customerId && detailedCustomer?.customerDataTermsAccepted && (
+                <SeekaAppWizardStepContent subtitle="Customer data terms">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="success">
+                            Customer data terms are accepted in Google Ads™
+                        </Alert>
+                    </Box>
+                </SeekaAppWizardStepContent>)}
+
+            {/* Enhanced conversions for leads */}
+            {!loading && customerId && !detailedCustomer?.enhancedConversionsForLeadsEnabled && (
+                <SeekaAppWizardStepContent subtitle="Enhanced conversions for Leads">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="error">
+                            Enhanced conversions for Leads are not enabled in Google Ads™
+                        </Alert>
+                    </Box>
+                    <ol>
+                        <li>Head to your Google Ads™ account.</li>
+                        <li>In the top horizontal menu, click <strong>'Tools and Settings'</strong>.</li>
+                        <li>From the dropdown, click <strong>'Conversions'</strong>.</li>
+                        <li>In the top left menu select <strong>'Settings'</strong>.</li>
+                        <li>Select <strong>'Customer data terms'</strong> from the middle menu.</li>
+                        <li>Read the terms and then check the box to accept terms.</li>
+                    </ol>
+                </SeekaAppWizardStepContent>)}
+            {!loading && customerId && detailedCustomer?.enhancedConversionsForLeadsEnabled && (
+                <SeekaAppWizardStepContent subtitle="Enhanced conversions for Leads">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="success">
+                            Enhanced conversions for Leads are enabled in Google Ads™
+                        </Alert>
+                    </Box>
+                </SeekaAppWizardStepContent>)}
+
+            <SeekaAppWizardStepContent subtitle="Enhanced conversions method">
+                <Box pt={1} ml={2}>
+                    <Alert severity="warning">
+                        Ensure correct enhanced conversions method in Google Ads™
+                    </Alert>
+                </Box>
+                <ol>
+                    <li>Head to your Google Ads™ account.</li>
+                    <li>In the top horizontal menu, click <strong>'Goals'</strong>.</li>
+                    <li>In the conversions menu select <strong>'Settings'</strong>.</li>
+                    <li>Activate Enhanced conversions with <strong>Google Ads API as the method</strong>.</li>
+                    <li>Activate Enhanced conversions for leads with <strong>Google Tag as the method</strong>.</li>
+                </ol>
+            </SeekaAppWizardStepContent>
+
+            {/* Enhanced conversions */}
+            {/* {!loading && customerId && !detailedCustomer?.enhancedConversionsEnabled && (
+                <SeekaAppWizardStepContent subtitle="Enhanced conversions">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="error">
+                            Enhanced conversions are not enabled in Google Ads™
+                        </Alert>
+                    </Box>
+                    <ol>
+                        <li>Head to your Google Ads™ account.</li>
+                        <li>In the top horizontal menu, click <strong>'Tools and Settings'</strong>.</li>
+                        <li>From the dropdown, click <strong>'Conversions'</strong>.</li>
+                        <li>In the top left menu select <strong>'Settings'</strong>.</li>
+                        <li>Select <strong>'Customer data terms'</strong> from the middle menu.</li>
+                        <li>Read the terms and then check the box to accept terms.</li>
+                    </ol>
+                </SeekaAppWizardStepContent>)}
+            {!loading && customerId && detailedCustomer?.enhancedConversionsEnabled && (
+                <SeekaAppWizardStepContent subtitle="Enhanced conversions">
+                    <Box pt={1} ml={2}>
+                        <Alert severity="success">
+                            Enhanced conversions are enabled in Google Ads™
+                        </Alert>
+                    </Box>
+                </SeekaAppWizardStepContent>)} */}
+
+            <SeekaAppWizardStepActions>
+                <Button variant='text' disabled={saving} onClick={onBack}>Back</Button>
+                <Button variant='contained' loading={saving || loading} color="primary" disabled={!customerId || !detailedCustomer?.customerDataTermsAccepted} onClick={handleSave}>Next</Button>
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    )
+}

package/dist/ai-context/internal/examples/v3/google-ads/app/ui/src/components/setup/steps/auth/index.tsx

@@ -0,0 +1,42 @@
+import { GoogleLogin } from "@/components/google/login"
+import { Button } from "@mui/material"
+import { useEffect, useState } from "react"
+import googleAdsIcon from '../../../../assets/app-icon.svg'
+import {
+    SeekaAppWizardHeading,
+    SeekaAppWizardStep,
+    SeekaAppWizardStepActions,
+    SeekaAppWizardStepContent
+} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onSkip?: () => void
+}
+
+export const GoogleAuthStep = ({ onSkip }: Props) => {
+    const [linkedGoogleAdsUser, setLinkedGoogleAdsUser] = useState(window.seekaAppConfig.state?.linkedGoogleAdsUser || null)
+
+    useEffect(() => {
+
+    }, [linkedGoogleAdsUser])
+
+    return (
+        <SeekaAppWizardStep>
+            <SeekaAppWizardHeading title="Connect to Google Ads™" image={googleAdsIcon}>
+                Connecting your Google Ads™ to Seeka is super easy and can be done in around 3 minutes by anyone with Admin access to Google Ads™.
+            </SeekaAppWizardHeading>
+            <SeekaAppWizardStepContent title="Instructions" subtitle="Authenticate Google Ads">
+                <ol>
+                    <li>Click the Authenticate Google Ads button</li>
+                    <li>Select the Google™ account that is authorised to your Google Ads™ account</li>
+                    <li>Follow the guided prompts to authorise Seeka.</li>
+                </ol>
+            </SeekaAppWizardStepContent>
+
+            <SeekaAppWizardStepActions>
+                <GoogleLogin onChange={(u) => setLinkedGoogleAdsUser(u || null)} />
+                {onSkip && linkedGoogleAdsUser && <Button variant='contained' color="primary" onClick={onSkip}>Next</Button>}
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    )
+}

package/dist/ai-context/internal/examples/v3/google-ads/app/ui/src/components/setup/steps/complete/index.tsx

@@ -0,0 +1,37 @@
+import { Button, Typography } from "@mui/material"
+import { Stack } from "@mui/system"
+import {
+    SeekaAppWizardHeading,
+    SeekaAppWizardStep,
+    SeekaAppWizardStepActions, SeekaBotHappy,
+    sendSeekaCoreAppCommand
+} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onBack?: () => void
+}
+
+export const GoogleCompletedStep = ({ 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!" />
+
+                        <Typography>Google Ads™ 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>
+    )
+}