@seeka-labs/cli-apps 3.7.0 → 3.8.2

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

@@ -0,0 +1,281 @@
+import { yupResolver } from '@hookform/resolvers/yup'
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'
+import { Alert, Box, Button, Stack } from "@mui/material"
+import { getActivityName, TrackingActivityNames } from "@seeka-labs/converge"
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from "@seeka-labs/sdk-apps-core"
+import { enqueueSnackbar } from "notistack"
+import { useEffect, useMemo, useState } from "react"
+import { useFieldArray, useForm } from "react-hook-form"
+import { v4 as uuidv4 } from 'uuid'
+import * as yup from 'yup'
+import googleAdsIcon from '../../../../assets/app-icon.svg'
+import { ConversionMappingRow } from "./row"
+import {
+    ActivityPipelineActivityFilterFormSchema,
+    ActivityPipelineActivityFilterSourceItemType, ActivityPipelineActivityFilterType, appApi, ConditionComparer,
+    FormProvider,
+    SeekaAppWizardHeading,
+    SeekaAppWizardStep, SeekaAppWizardStepActions,
+    SeekaAppWizardStepContent,
+    useTokens,
+} from "@seeka-labs/sdk-apps-react";
+import {
+    GoogleAdsConversionActionInfo,
+    SeekaActivityToGoogleConversionActionMapping
+} from "@seeka-labs-apps/google-ads-lib";
+import {getActivityNameTitle} from "@seeka-labs/sdk-apps-react";
+
+type Props = {
+    onNext?: () => void
+    onBack?: () => void
+}
+
+export const GoogleConversionMappingFormSchema = yup
+    .object<{ mappings: SeekaActivityToGoogleConversionActionMapping[] }>()
+    .shape({
+        mappings: yup
+            .array()
+            .of(
+                yup
+                    .object<SeekaActivityToGoogleConversionActionMapping>()
+                    .shape({
+                        // top‐level props
+                        id: yup
+                            .string()
+                            .uuid('Must be a valid UUID')
+                            .nonNullable()
+                            .required('Required'),
+                        googleConversionAction: yup
+                            .object<GoogleAdsConversionActionInfo>()
+                            .shape({
+                                resourceName: yup.string().nonNullable().required('Required'),
+                                name: yup.string().nonNullable().required('Required'),
+                                status: yup.string().nonNullable().required('Required'),
+                                type: yup.string().nonNullable().required('Required'),
+                                category: yup.string().nonNullable().required('Required'),
+                                id: yup.number().nonNullable().required('Required'),
+                            }).nonNullable()
+                            .required('Required'),
+                        active: yup
+                            .boolean()
+                            .nonNullable()
+                            .required('Required'),
+                        // nested object
+                        seekaActivityMatch: ActivityPipelineActivityFilterFormSchema
+                    })
+            )
+            .min(1, 'At least one mapping is required')
+            .required('At least one mapping is required'),
+    })
+    .required()
+
+export type GoogleConversionMappingFormType = yup.InferType<
+    typeof GoogleConversionMappingFormSchema
+>;
+
+export const GoogleConversionMappingStep = ({ onNext, onBack }: Props) => {
+    const [saving, setSaving] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const appTokens = useTokens();
+    const [accountConversionActions, setAccountConversionActions] = useState<GoogleAdsConversionActionInfo[] | null>(null);
+    const activityNamesQuery = appApi.endpoints.referenceDataGetAllActivityNames.useQuery({ organisationBrandId: window.seekaAppConfig.organisationBrandId })
+    const activityFilterSourcesQuery = appApi.endpoints.referenceDataGetAllActivityFilterSources.useQuery({ organisationBrandId: window.seekaAppConfig.organisationBrandId })
+    const googleCustomerId = window.seekaAppConfig.state.googleAdsCustomerId || '';
+    const googleAdsRootCustomerId = window.seekaAppConfig.state.googleAdsRootCustomerId || '';
+
+    const serverConversions = window.seekaAppConfig.state.conversions?.serverConversions || [];
+    const methods = useForm<GoogleConversionMappingFormType>({
+        resolver: yupResolver(GoogleConversionMappingFormSchema),
+        mode: "all",
+        reValidateMode: "onChange",
+        defaultValues: {
+            mappings: serverConversions
+        }
+    });
+    const { control, handleSubmit, watch, formState: { errors, isDirty } } = methods
+    const mappings = useFieldArray({
+        name: "mappings",
+        control: control,
+    });
+
+    const isValid = Object.keys(errors || {}).length === 0 && mappings.fields.length > 0
+
+    const loadAccountConversionActions = async (partial: boolean) => {
+        if (!partial) { setLoading(true) }
+        try {
+            const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/google/customer/conversions/actions?customerId=' + googleCustomerId + '&rootCustomerId=' + googleAdsRootCustomerId, {
+                method: 'GET',
+                headers: {
+                    [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                    [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                }
+            })
+            setAccountConversionActions((await response.json() as GoogleAdsConversionActionInfo[]).filter(e =>
+                (e.type === 'UPLOAD_CLICKS' || e.type === 'UPLOAD_CALLS' || e.type === 'WEBPAGE' || e.type === 'AD_CALL') && e.status === 'ENABLED'
+            ))
+        }
+        catch (error) {
+            setAccountConversionActions(null)
+        }
+        finally {
+            if (!partial) { setLoading(false) }
+        }
+    }
+
+    const activityNameOptions = useMemo(() => {
+        return (activityNamesQuery?.data?.result || []).filter(Boolean).map(e => ({
+            activityName: getActivityName(e),
+            activityNameCustom: getActivityName(e) === TrackingActivityNames.Custom ? e : undefined,
+            label: getActivityNameTitle(e),
+            key: e
+        }));
+
+    }, [activityNamesQuery?.data?.result])
+
+    const activityFilterSourceOptions = useMemo(() => {
+        return activityFilterSourcesQuery?.data?.result || [];
+    }, [activityFilterSourcesQuery?.data?.result])
+
+    const onAdd = () => {
+        mappings.append({
+            id: uuidv4(),
+            googleConversionAction: null as any,
+            active: true,
+            seekaActivityMatch: {
+                id: uuidv4(),
+                type: ActivityPipelineActivityFilterType.ActivityTracked,
+                activityNames: [],
+                sourceFilter: {
+                    comparer: ConditionComparer.Or,
+                    filters: [{ type: ActivityPipelineActivityFilterSourceItemType.Wildcard, key: '*', label: 'Any source', textMatch: null }],
+                    description: '',
+                }
+            }
+        })
+    }
+
+    useEffect(() => {
+        if (googleCustomerId) {
+            loadAccountConversionActions(false)
+        }
+        else {
+            setAccountConversionActions(null)
+            setLoading(false)
+        }
+    }, [googleCustomerId])
+    // const noMappings = mappings.fields.length === 0
+
+    const onDelete = (mappingIndex: number) => {
+        mappings.remove(mappingIndex)
+    }
+
+    const onSubmit = async (data: GoogleConversionMappingFormType) => {
+        setSaving(true)
+        let success = false;
+        try {
+            const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/settings/conversions/mappings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                    [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                },
+                body: JSON.stringify({ mappings: data.mappings })
+            })
+            if (response.ok) {
+                success = true;
+                window.seekaAppConfig.state.conversions = { ...window.seekaAppConfig.state.conversions, serverConversions: (window.seekaAppConfig.state.conversions?.serverConversions || []) }
+                window.seekaAppConfig.state.conversions.serverConversions = data.mappings as any
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            setSaving(false)
+        }
+        if (success) {
+            enqueueSnackbar('Saved', { variant: 'success' });
+            if (onNext) {
+                onNext()
+            }
+        }
+        else {
+            enqueueSnackbar('Failed', { variant: 'error' });
+        }
+    };
+
+    const isLoading = loading || activityFilterSourcesQuery?.isLoading || activityNamesQuery?.isLoading || accountConversionActions === null || activityNameOptions.length === 0 || activityFilterSourceOptions.length === 0;
+
+    return (<FormProvider methods={methods}>
+        <SeekaAppWizardStep loading={isLoading}>
+
+            <SeekaAppWizardHeading title="Configure Conversions" image={googleAdsIcon}>
+                In this step you will map Seeka events to Google Ads™ conversion actions.
+            </SeekaAppWizardHeading>
+            <SeekaAppWizardStepContent subtitle="In the below step you will be able to match Seeka events to existing conversion actions in Google Ads™.">
+                <ol>
+                    <li>Ensure you have created the conversions you wish to map in Google Ads™.</li>
+                    <li>GA4 imported conversions cannot be reused, website conversion action must exist in ad account summary prior to app connection.</li>
+                    <li>In the left dropdown select the Seeka event you want to match to a conversion action.</li>
+                    <li>In the right dropdown select the relevant Google Ads™ conversion action you wish to match to the Seeka event.</li>
+                    <li>To active the sending of data to this pairing, toggle the event to active.</li>
+                </ol>
+            </SeekaAppWizardStepContent>
+
+            {accountConversionActions && accountConversionActions.length === 0 && (
+                <Alert severity="error" action={onBack ? <Button variant='text' onClick={onBack}>Select another account</Button> : undefined}>No conversion actions found in Google Ads account {googleCustomerId}</Alert>
+            )}
+
+            <Box sx={{ mt: 2, mb: 2, width: '100%' }}>
+                {accountConversionActions && accountConversionActions.length > 0 && <Stack alignItems={'center'} justifyContent={'space-between'} sx={{ width: '100%' }} gap={2} direction={'column'}>
+                    {mappings && mappings.fields && accountConversionActions && mappings.fields.map((m, i) => (
+                        <ConversionMappingRow key={i} sourceActivityNames={activityNameOptions} sourceLookupValues={activityFilterSourceOptions} onDelete={() => onDelete(i)} mappingIndex={i} onRefreshGoogleActions={() => loadAccountConversionActions(true)} googleConversionActions={accountConversionActions} />
+                    ))}
+
+                    <Button
+                        startIcon={<AddCircleOutlineIcon />}
+                        size="small"
+                        variant="text"
+                        onClick={onAdd}
+                    >
+                        Add conversion
+                    </Button>
+                </Stack>}
+            </Box>
+
+            {/* <div style={{ marginBottom: '20px' }}>
+                    <pre>
+                        <code>{JSON.stringify(watch(), null, 1)}</code>
+                    </pre>
+                </div>
+                <div>
+                    <pre>
+                        <code>{JSON.stringify(errors, null, 1)}</code>
+                    </pre>
+                </div>
+                <div>
+                    <pre>
+                        <code>{JSON.stringify({
+                            isDirty,
+                            isValid,
+                            saving,
+                            loading
+                        }, null, 1)}</code>
+                    </pre>
+                </div> */}
+
+            <SeekaAppWizardStepActions>
+                <Stack direction="row" spacing={2}>
+                    {onBack && <Button variant='text' color="primary" onClick={onBack}>Back</Button>}
+                    {/* {onSkip && <Button variant='text' color="primary" onClick={onSkip}>Skip</Button>} */}
+                </Stack>
+
+                <Button variant='contained' loading={saving || loading} type="submit" onClick={handleSubmit(onSubmit)} color="primary"
+                    disabled={(accountConversionActions && accountConversionActions.length === 0) || (!isDirty && isValid) || (!isValid || saving || loading)}
+                >Next</Button>
+            </SeekaAppWizardStepActions>
+        </SeekaAppWizardStep>
+    </FormProvider>
+    )
+}

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

@@ -0,0 +1,253 @@
+import DeleteIcon from "@mui/icons-material/Delete";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import {
+    Box,
+    createFilterOptions,
+    FormControlLabel,
+    IconButton,
+    Stack,
+    Switch,
+    Typography
+} from "@mui/material";
+import { sortBy } from "lodash-es";
+import { useMemo } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { GoogleConversionMappingFormType } from "..";
+import {
+    ActivityNameItem, ActivityNameSelect,
+    ActivityPipelineActivityFilterSourceItem, ActivitySourceSelect,
+    RhfAutocomplete,
+    sentenceCase
+} from "@seeka-labs/sdk-apps-react";
+import {GoogleAdsConversionActionInfo} from "@seeka-labs-apps/google-ads-lib";
+
+type Props = {
+    googleConversionActions: GoogleAdsConversionActionInfo[]
+    onRefreshGoogleActions: () => void
+    onDelete: () => void
+    mappingIndex: number
+    sourceActivityNames: ActivityNameItem[]
+    sourceLookupValues: ActivityPipelineActivityFilterSourceItem[]
+}
+
+export const ConversionMappingRow = ({ googleConversionActions, onRefreshGoogleActions, mappingIndex, onDelete, sourceActivityNames, sourceLookupValues }: Props) => {
+    const htmlElementFormIdentifier = `mappings.${mappingIndex}` as 'mappings.0'
+    const methods = useFormContext<GoogleConversionMappingFormType>();
+    const { control, watch } = methods;
+
+    const conversionActionWatch = watch(htmlElementFormIdentifier + ".googleConversionAction" as "mappings.0.googleConversionAction");
+
+    const sortConversionActions = (options: GoogleAdsConversionActionInfo[]) => {
+        return sortBy((options || []), [
+            // first by your group key…
+            opt => opt.type || '',
+            // …then by whatever label you’re showing
+            opt => opt.name
+        ])
+    }
+
+    const googleConversionActionsOptions = useMemo(() => {
+        return sortConversionActions((googleConversionActions || []))
+        // return (googleConversionActions || []).filter(e => e.type !== "GOOGLE_ANALYTICS_4_CUSTOM").map(e => ({
+        //     inputValue: e.id.toString(),
+        //     isCustomInputValue: false,
+        //     groupName: sentenceCase(e.type),
+        //     attributes: { ...e },
+        //     title: e.name
+        // }))
+    }, [googleConversionActions])
+
+    const conversionActionFilters = createFilterOptions<GoogleAdsConversionActionInfo>({ stringify: (opt) => opt.name });
+
+    return (
+        <Box
+            sx={{
+                border: "1px solid #ccc",
+                borderRadius: "8px",
+                padding: "12px",
+                width: "100%",
+            }}
+        >
+            <Stack
+                gap={1}
+                direction={"column"}
+                sx={{ width: "100%" }}
+                justifyContent={"space-between"}
+                alignItems={"flex-start"}
+            >
+                <Stack
+                    gap={2}
+                    direction={"row"}
+                    justifyContent={"space-between"}
+                    alignItems={"center"}
+                    sx={{ width: "100%" }}
+                >
+                    <Stack direction="row" gap={1}>
+                        {/* <RouteIcon /> */}
+                        <Typography variant="h5">
+                            {conversionActionWatch ? conversionActionWatch.name : `Conversion mapping ${mappingIndex + 1}`}
+                        </Typography>
+                    </Stack>
+
+                    <Stack
+                        gap={2}
+                        direction={"row"}
+                        justifyContent={"flex-end"}
+                        alignItems={"center"}
+                    >
+                        <Controller
+                            name={
+                                (htmlElementFormIdentifier + ".active") as "mappings.0.active"
+                            }
+                            control={control}
+                            render={({ field: { onChange, value } }) => (
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            size="small"
+                                            checked={value}
+                                            onChange={onChange}
+                                        />
+                                    }
+                                    label="Active"
+                                />
+                            )}
+                        />
+                        <IconButton onClick={onDelete}>
+                            <DeleteIcon />
+                        </IconButton>
+                    </Stack>
+                </Stack>
+
+                <Stack
+                    gap={4}
+                    direction={"column"}
+                    sx={{ width: "100%" }}
+                    justifyContent={"space-around"}
+                    alignItems={"flex-start"}
+                >
+                    <Stack
+                        gap={2}
+                        direction={"row"}
+                        sx={{ width: "100%" }}
+                        justifyContent={"flex-start"}
+                        alignItems={"center"}
+                    >
+                        <Typography
+                            variant="body1"
+                            style={{
+                                display: "inline-block",
+                                marginLeft: "10px",
+                                marginTop: "4px",
+                                whiteSpace: "nowrap",
+                            }}
+                        >
+                            When
+                        </Typography>
+                        <ActivityNameSelect
+                            activityNames={sourceActivityNames}
+                            name={
+                                `${htmlElementFormIdentifier}.seekaActivityMatch.activityNames` as "mappings.0.seekaActivityMatch.activityNames"
+                            }
+                            multiple
+                            stringValues
+                            allowCustomActivity
+                        />
+                        <Typography
+                            variant="body1"
+                            style={{
+                                display: "inline-block",
+                                marginLeft: "10px",
+                                marginTop: "4px",
+                                whiteSpace: "nowrap",
+                            }}
+                        >
+                            is tracked on
+                        </Typography>
+
+                        <Box display="flex" alignContent={"center"} alignItems={"center"}>
+                            <ActivitySourceSelect
+                                name={
+                                    `${htmlElementFormIdentifier}.seekaActivityMatch.sourceFilter.filters` as "mappings.0.seekaActivityMatch.sourceFilter.filters"
+                                }
+                                sourceLookupValues={sourceLookupValues}
+                            />
+                        </Box>
+                    </Stack>
+
+                    <Stack
+                        gap={2}
+                        direction={"row"}
+                        sx={{ width: "100%" }}
+                        justifyContent={"flex-start"}
+                        alignItems={"center"}
+                    >
+                        <Typography
+                            variant="body1"
+                            style={{
+                                display: "inline-block",
+                                marginLeft: "10px",
+                                marginTop: "4px",
+                                whiteSpace: "nowrap",
+                            }}
+                        >
+                            Then track conversion
+                        </Typography>
+
+                        <RhfAutocomplete
+                            size="small"
+                            options={googleConversionActionsOptions}
+                            groupBy={(option) => sentenceCase(option.type || "")}
+                            getOptionLabel={(opt) => (opt as GoogleAdsConversionActionInfo)?.name}
+                            // getOptionLabel={(opt) =>
+                            //     [
+                            //         (opt as GoogleAdsConversionActionInfo).name,
+                            //         (opt as GoogleAdsConversionActionInfo).conversionId
+                            //             ? (opt as GoogleAdsConversionActionInfo).conversionId +
+                            //             "/" +
+                            //             (opt as GoogleAdsConversionActionInfo).conversionLabel
+                            //             : null,
+                            //     ]
+                            //         .filter(Boolean)
+                            //         .join(" - ")
+                            // }
+                            name={
+                                (htmlElementFormIdentifier +
+                                    ".googleConversionAction") as "mappings.0.googleConversionAction"
+                            }
+                            sx={{ minWidth: "477px" }}
+                            filterOptions={(opts, params) => {
+                                const filtered = sortConversionActions(
+                                    conversionActionFilters(opts, params)
+                                );
+                                return filtered;
+                            }}
+                            variant="standard"
+                            isOptionEqualToValue={(opt, val) => opt.id === val.id}
+                            renderOption={(props, option) => {
+                                return (
+                                    <li {...props} key={props.key}>
+                                        <Stack
+                                            sx={{ width: "100%" }}
+                                            direction="row"
+                                            alignItems={"center"}
+                                            justifyContent={"space-between"}
+                                        >
+                                            <Typography noWrap>{option.name}</Typography>
+                                            <Typography variant="body2" color="textSecondary">
+                                                {sentenceCase(option.category)}
+                                            </Typography>
+                                        </Stack>
+                                    </li>
+                                );
+                            }}
+                        />
+                        <IconButton onClick={onRefreshGoogleActions} size="small">
+                            <RefreshIcon />
+                        </IconButton>
+                    </Stack>
+                </Stack>
+            </Stack>
+        </Box>
+    );
+}

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

@@ -0,0 +1,70 @@
+import { Box } from "@mui/material";
+import { appAccessTokenHeaderName, coreApiAccessTokenHeaderName } from "@seeka-labs/sdk-apps-core";
+import { useEffect, useState } from "react";
+import { GoogleAccountStep } from "./account";
+import { GoogleAuthStep } from "./auth";
+import { GoogleCompletedStep } from "./complete";
+import { GoogleConversionMappingStep } from "./conversion-mapping";
+import {appApi, SeekaAppLoadingSpinner, useTokens} from "@seeka-labs/sdk-apps-react";
+
+export const SetupSteps = () => {
+    const appConfig = window.seekaAppConfig?.state;
+    const [activeStep, setActiveStep] = useState<number | null>(null)
+    const [loading, setLoading] = useState(true)
+    const appTokens = useTokens();
+    const googleAdsCustomerId = appConfig?.googleAdsCustomerId
+    const hasCustomers = appConfig?.googleAdsAvailableCustomers && appConfig?.googleAdsAvailableCustomers.length > 0
+    const hasCustomer = Boolean(appConfig?.googleAdsCustomerId)
+
+    const convergeConfigQuery = appApi.endpoints.convergeGetDefaultSingleInstanceForBrand.useQuery({ organisationBrandId: window.seekaAppConfig.organisationBrandId })
+
+    const setTrackingConfig = async () => {
+        try {
+            const response = await fetch(window.seekaAppConfig.appBaseUrl + '/app/api/settings/tracking', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    [appAccessTokenHeaderName]: 'Bearer ' + appTokens?.appAccessToken,
+                    [coreApiAccessTokenHeaderName]: 'Bearer ' + appTokens?.coreApiAccessToken,
+                },
+                body: JSON.stringify({ trackingSettings: convergeConfigQuery.data?.result?.websiteTrackingConfiguration })
+            })
+            if (response.ok) {
+                setLoading(false)
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+
+    useEffect(() => {
+        if (convergeConfigQuery.data?.result?.websiteTrackingConfiguration) {
+            setTrackingConfig();
+
+        }
+    }, [convergeConfigQuery.isLoading])
+
+    useEffect(() => {
+        if (hasCustomer) {
+            setActiveStep(2)
+        }
+        else if (hasCustomers) {
+            setActiveStep(1)
+        }
+        else {
+            setActiveStep(0)
+        }
+    }, [])
+
+    if (activeStep === null || loading) return <Box><SeekaAppLoadingSpinner /></Box>
+
+    return (
+        <Box>
+            {activeStep === 0 && <GoogleAuthStep onSkip={() => setActiveStep(1)} />}
+            {activeStep === 1 && <GoogleAccountStep onNext={() => setActiveStep(2)} onBack={() => setActiveStep(0)} />}
+            {activeStep === 2 && googleAdsCustomerId && <GoogleConversionMappingStep onNext={() => setActiveStep(3)} onBack={() => setActiveStep(1)} />}
+            {activeStep === 3 && <GoogleCompletedStep onBack={() => setActiveStep(2)} />}
+        </Box>
+    )
+}

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

@@ -0,0 +1,45 @@
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import { SnackbarProvider } from 'notistack';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './App';
+
+import { fetchBaseQuery } from '@reduxjs/toolkit/query';
+
+import { appAccessTokenQueryParamName, coreApiAccessTokenQueryParamName } from '@seeka-labs/sdk-apps-core';
+import queryString from 'query-string';
+import {SeekaAppMaterialUiTheme, setBaseQueryFn} from "@seeka-labs/sdk-apps-react";
+
+setBaseQueryFn(
+  fetchBaseQuery({
+    baseUrl: (import.meta as any).env.VITE_URLS_SEEKA_API_CORE || "https://api.seeka.services",
+    prepareHeaders(headers, api) {
+      const searchParams = new URLSearchParams(location.search);
+      const appAccessToken = searchParams.get(appAccessTokenQueryParamName);
+      const coreApiAccessToken = searchParams.get(coreApiAccessTokenQueryParamName);
+
+      headers.set('Authorization', 'Bearer ' + coreApiAccessToken);
+      return headers;
+    },
+    paramsSerializer(params) {
+      return queryString.stringify(params);
+    },
+  })
+);
+
+const rootElement = document.getElementById('root');
+const root = ReactDOM.createRoot(rootElement!);
+
+root.render(
+  <React.StrictMode>
+    <ThemeProvider theme={SeekaAppMaterialUiTheme}>
+      <CssBaseline />
+
+      <SnackbarProvider anchorOrigin={{ horizontal: 'right', vertical: 'top' }} >
+        <App />
+      </SnackbarProvider>
+
+    </ThemeProvider>
+  </React.StrictMode>
+);

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

@@ -0,0 +1,30 @@
+import { SetupSteps } from "@/components/setup/steps";
+import { Alert, AlertTitle, Container } from "@mui/material";
+import { useLocation } from 'react-router-dom';
+
+export const Index = () => {
+    const location = useLocation();
+    const searchParams = new URLSearchParams(location.search);
+    const error = searchParams.get('error') as 'invalid_scopes' | string | null;
+
+    let errorMessage: string | null = null;
+    if (error === 'invalid_scopes') {
+        errorMessage = 'Invalid permissions granted. Try again ensuring to select all permissions when logging into Google.';
+    }
+    else {
+        errorMessage = error;
+    }
+
+    if (errorMessage) {
+        return (
+            <Container maxWidth="md">
+                <Alert severity="error"><AlertTitle>Authentication error</AlertTitle>{errorMessage}</Alert>
+            </Container>
+        )
+    }
+
+    return (
+
+        <SetupSteps />
+    );
+}