@designcrowd/library.brand-page 5.18.2 → 5.18.3-actionable-buttons-2

package/lib/src/plugins/google-maps-plugin/google-maps-plugin.d.ts

@@ -1,4 +1,3 @@
-export declare const PLACE_CHANGED = "place_changed";
 export declare const PLACE_ID_QUERY_PREFIX = "place_id:";
 export interface GoogleMapsPluginOptions {
     readonly apiKey: string;
@@ -9,13 +8,26 @@ export interface GetEmbedGoogleMapsOptions {
     readonly query: string;
     readonly locale?: string;
 }
+export interface AddressDetails {
+    readonly formattedAddress: string;
+    readonly placeId: string;
+}
 export declare class GoogleMapsPlugin {
     private initialised;
     private initialising;
     private readonly _options;
     constructor(options: GoogleMapsPluginOptions);
     private initialise;
-    createAutoCompleteWidget(input: HTMLInputElement, options?: google.maps.places.AutocompleteOptions): Promise<google.maps.places.Autocomplete>;
+    private getPlacesLibrary;
+    /**
+     * Creates Google's official Places Autocomplete widget (new Places API).
+     * It renders its own input + dropdown with built-in icons, formatting,
+     * keyboard/a11y support and the required "Powered by Google" attribution,
+     * and manages session tokens internally. Listen for `gmp-select` to read the
+     * chosen prediction, then pass it to {@link fetchAddressDetails}.
+     */
+    createPlaceAutocompleteElement(options?: google.maps.places.PlaceAutocompleteElementOptions): Promise<google.maps.places.PlaceAutocompleteElement>;
+    fetchAddressDetails(prediction: google.maps.places.PlacePrediction): Promise<AddressDetails | undefined>;
     private createGoogleMapsScriptElement;
     private getGoogleScriptUrl;
     getEmbedGoogleMapsSrc(options: GetEmbedGoogleMapsOptions): string;

package/lib/src/plugins/google-maps-plugin/google-maps-plugin.js

@@ -8,7 +8,6 @@ const delayInMS = (delay) => {
 const DELAY_MS = 100;
 const MAP_MODE_PLACE = 'place';
 const SCRIPT_TAG_NAME = 'SCRIPT';
-export const PLACE_CHANGED = 'place_changed';
 export const PLACE_ID_QUERY_PREFIX = 'place_id:';
 export class GoogleMapsPlugin {
     initialised = false;
@@ -30,16 +29,23 @@ export class GoogleMapsPlugin {
                 return;
             }
             const url = this.getGoogleScriptUrl();
-            let googleMapsScript;
-            googleMapsScript = Array.from(document.head.children).find((c) => c.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
+            const existingScript = Array.from(document.head.children).find((c) => c.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
                 c.hasAttribute('src') &&
                 c.getAttribute('src') === url);
-            if (googleMapsScript) {
-                return;
+            if (!existingScript) {
+                document.head.appendChild(this.createGoogleMapsScriptElement(url));
             }
-            googleMapsScript = this.createGoogleMapsScriptElement(url);
-            document.head.appendChild(googleMapsScript);
-            while (typeof google !== 'object') {
+            // Wait for the specific class we use. The `places` library loads eagerly
+            // via the `libraries=places` script param, so the new Places classes are
+            // on the `google.maps.places` namespace once ready. We avoid
+            // `importLibrary` (absent in some hosts that already loaded Maps).
+            //
+            // `typeof google === 'undefined'` must be checked first and on its own:
+            // `typeof` only suppresses ReferenceError for a bare identifier, so
+            // touching `google.maps` while `google` is still undeclared (before the
+            // script executes) throws "google is not defined".
+            while (typeof google === 'undefined' ||
+                typeof google.maps?.places?.PlaceAutocompleteElement !== 'function') {
                 await delayInMS(DELAY_MS);
             }
             this.initialised = true;
@@ -48,16 +54,40 @@ export class GoogleMapsPlugin {
             this.initialising = false;
         }
     }
-    async createAutoCompleteWidget(input, options) {
+    async getPlacesLibrary() {
         await this.initialise();
         while (!this.initialised) {
             await delayInMS(DELAY_MS);
         }
-        const autoComplete = new google.maps.places.Autocomplete(input, options);
+        return google.maps.places;
+    }
+    /**
+     * Creates Google's official Places Autocomplete widget (new Places API).
+     * It renders its own input + dropdown with built-in icons, formatting,
+     * keyboard/a11y support and the required "Powered by Google" attribution,
+     * and manages session tokens internally. Listen for `gmp-select` to read the
+     * chosen prediction, then pass it to {@link fetchAddressDetails}.
+     */
+    async createPlaceAutocompleteElement(options) {
+        const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
+        return new PlaceAutocompleteElement({
+            requestedLanguage: this._options.locale,
+            ...options,
+        });
+    }
+    async fetchAddressDetails(prediction) {
+        const place = prediction.toPlace();
         // NOTE: additional fields may incur a charge, check before adding a new field
         // See https://developers.google.com/maps/billing-and-pricing/pricing#basic-data for more information
-        autoComplete.setFields(['formatted_address', 'place_id']);
-        return autoComplete;
+        // The widget's session token is included automatically on this first fetch.
+        await place.fetchFields({ fields: ['formattedAddress', 'id'] });
+        if (!place.formattedAddress || !place.id) {
+            return undefined;
+        }
+        return {
+            formattedAddress: place.formattedAddress,
+            placeId: place.id,
+        };
     }
     createGoogleMapsScriptElement(url) {
         const scriptElement = document.createElement(SCRIPT_TAG_NAME);
@@ -67,7 +97,7 @@ export class GoogleMapsPlugin {
         return scriptElement;
     }
     getGoogleScriptUrl() {
-        const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places`;
+        const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
         return this._options.locale
             ? `${baseUrl}&language=${this._options.locale}`
             : baseUrl;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.18.2",
+  "version": "5.18.3-actionable-buttons-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -141,7 +141,7 @@
     "@types/dompurify": "3.2.0",
     "@types/express": "4.17.21",
     "@types/faker": "6.6.8",
-    "@types/google.maps": "3.55.1",
+    "@types/google.maps": "3.65.1",
     "@types/istanbul-lib-report": "3.0.3",
     "@types/jquery": "3.5.30",
     "@types/lodash.clonedeep": "4.5.9",

package/src/brand-page-maker/components/ai-text-edit/AiActionButtons.vue

@@ -9,13 +9,25 @@
         icon-left="stop"
         @click="$emit('stop-generation')"
       />
-      <Button
-        v-else-if="showUseButton"
-        :label="useButtonLabel"
-        variant="primary"
-        size="small"
-        @click="$emit('use-content')"
-      />
+      <template v-else>
+        <Button
+          v-for="action in actions"
+          :key="action.type"
+          :label="action.label"
+          variant="primary"
+          size="small"
+          :icon-left="action.icon || undefined"
+          classes="ai-cta-button"
+          @click="$emit('action-click', action.type)"
+        />
+        <Button
+          v-if="showUseButton"
+          :label="useButtonLabel"
+          variant="primary"
+          size="small"
+          @click="$emit('use-content')"
+        />
+      </template>
       <Button
         v-if="showRegenerateButton && !isTyping"
         label="Regenerate"
@@ -31,12 +43,14 @@
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
 import { generateAiModalTr } from '../../../composables/useTranslate';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Props {
   isTyping?: boolean;
   showUseButton?: boolean;
   showRegenerateButton?: boolean;
   useButtonLabel?: string;
+  actions?: AgentAction[];
 }
 
 withDefaults(defineProps<Props>(), {
@@ -44,11 +58,24 @@ withDefaults(defineProps<Props>(), {
   showUseButton: false,
   showRegenerateButton: false,
   useButtonLabel: 'Use text',
+  actions: () => [],
 });
 
 defineEmits<{
   'use-content': [];
   'stop-generation': [];
   regenerate: [];
+  'action-click': [type: AgentAction['type']];
 }>();
 </script>
+
+<style scoped>
+/* The upgrade glyph (`upgrade-alt`) is a hairline faceted gem that barely reads
+   at button size. Give it a stroke in the current text colour so the icon is
+   distinguishable from afar. Scoped to the CTA button via the `ai-cta-button`
+   class passed to the design-system Button. */
+:deep(.ai-cta-button svg path) {
+  stroke: currentColor;
+  stroke-width: 1;
+}
+</style>

package/src/brand-page-maker/components/ai-text-edit/AiChatbox.vue

@@ -11,6 +11,7 @@
           @use-text="$emit('use-text', message.props.text)"
           @stop-generation="$emit('stop-generation')"
           @use-image="$emit('use-image', $event)"
+          @action-click="$emit('action-click', $event)"
         >
           <template v-if="message.content" #default>
             {{ message.content }}
@@ -49,6 +50,7 @@ import { ref, watch, nextTick, onMounted } from 'vue';
 import { Button } from '@designcrowd/fe-shared-lib';
 import TextBubble from './TextBubble.vue';
 import ImageBubble from './ImageBubble.vue';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Message {
   type: 'text' | 'image';
@@ -86,6 +88,7 @@ const emit = defineEmits<{
   'stop-generation': [];
   'use-image': [images: any[]];
   'prompt-click': [prompt: SuggestedPrompt];
+  'action-click': [type: AgentAction['type']];
 }>();
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null);

package/src/brand-page-maker/components/ai-text-edit/TextBubble.vue

@@ -32,10 +32,12 @@
             :is-typing="isTyping || isAnimating"
             :show-use-button="showUseButton"
             :show-regenerate-button="showRegenerateButton"
+            :actions="actions"
             use-button-label="Use text"
             @use-content="$emit('use-text')"
             @stop-generation="$emit('stop-generation')"
             @regenerate="$emit('regenerate')"
+            @action-click="$emit('action-click', $event)"
           >
             <slot name="actions" />
           </AiActionButtons>
@@ -59,6 +61,7 @@ import AiActionButtons from './AiActionButtons.vue';
 import AiProgressFeed from './AiProgressFeed.vue';
 import { generateAiModalTr } from '../../../composables/useTranslate';
 import { type PlanItem } from '../../../clients/websocket-gateway-client';
+import type { AgentAction } from '../../composables/ai-chat/types';
 
 interface Props {
   text?: string;
@@ -75,6 +78,7 @@ interface Props {
   initialMessage?: string;
   planItems?: PlanItem[];
   completedItemIds?: string[];
+  actions?: AgentAction[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -92,12 +96,14 @@ const props = withDefaults(defineProps<Props>(), {
   initialMessage: undefined,
   planItems: () => [],
   completedItemIds: () => [],
+  actions: () => [],
 });
 
 defineEmits<{
   'use-text': [];
   'stop-generation': [];
   regenerate: [];
+  'action-click': [type: AgentAction['type']];
 }>();
 
 const copiedFeedback = ref(false);
@@ -220,7 +226,7 @@ const showActions = computed(() => {
     props.isAi &&
     !props.isTyping &&
     !isAnimating.value &&
-    props.showUseButton
+    (props.showUseButton || (props.actions?.length ?? 0) > 0)
   );
 });
 </script>

package/src/brand-page-maker/components/ai-website-builder/AiWebsiteBuilder.vue

@@ -14,6 +14,7 @@
       class="tw-flex-1 tw-overflow-hidden tw-px-5"
       @send="onSendMessage"
       @stop-generation="onStopGeneration"
+      @action-click="onActionClick"
     />
   </div>
 </template>
@@ -24,12 +25,22 @@ import { storeToRefs } from 'pinia';
 import SideBarSettingsHeader from '../../../shared/common/SideBarSettingsHeader.vue';
 import AiChatbox from '../ai-text-edit/AiChatbox.vue';
 import { useUiSideBarStore } from '../../../shared/side-bar/store';
-import { useSnapshotStore, useAiWebsiteBuilderThreadStore } from '../../stores';
+import {
+  useSnapshotStore,
+  useAiWebsiteBuilderThreadStore,
+  useBrandPageContainerStore,
+} from '../../stores';
 import { SIDE_BAR_TAB_NAMES } from '../../constants';
 import { useAiWebsiteBuilderChat } from '../../composables/ai-chat/useAiWebsiteBuilderChat';
+import {
+  UI_ACTIONS,
+  type AgentActionType,
+} from '../../composables/ai-chat/ui-actions';
+import { AI_CTA_LOCATIONS } from '../../composables/useEventTracker';
 
 const sideBarStore = useUiSideBarStore();
 const snapshotStore = useSnapshotStore();
+const brandPageContainerStore = useBrandPageContainerStore();
 const aiWebsiteBuilderThreadStore = useAiWebsiteBuilderThreadStore();
 const { promptText } = storeToRefs(aiWebsiteBuilderThreadStore);
 
@@ -60,6 +71,15 @@ const onStopGeneration = async () => {
   await stopGenerationAsync();
 };
 
+const onActionClick = async (type: AgentActionType) => {
+  if (type === UI_ACTIONS.UPGRADE) {
+    await brandPageContainerStore.showUpgradeModalAndSaveAsync(
+      undefined,
+      AI_CTA_LOCATIONS.AI_BUILDER_CHAT_UPSELL,
+    );
+  }
+};
+
 defineExpose({
   stopGenerationAsync,
 });

package/src/brand-page-maker/components/brandpage-settings/BrandPageSettings.vue

@@ -14,6 +14,7 @@
           v-if="isPublished"
           data-component="collapsible-panel"
           :title="commonTr('domains')"
+          :is-collapsed="true"
         >
           <!-- Start URL Section -->
           <UrlSettings
@@ -27,6 +28,7 @@
         <CollapsiblePanel
           data-component="collapsible-panel"
           :title="brandPageSettingsTr('seoSettings')"
+          :is-collapsed="true"
         >
           <PageSettings
             v-if="designDraftToken"
@@ -60,6 +62,7 @@
         <CollapsiblePanel
           data-component="collapsible-panel"
           :title="brandPageSettingsTr('integrationSettings')"
+          :is-collapsed="true"
         >
           <GoogleAnalytics
             :value="measurementID"
@@ -72,6 +75,7 @@
         <CollapsiblePanel
           data-component="collapsible-panel"
           :title="brandPageSettingsTr('socialShareTitle')"
+          :is-collapsed="true"
         >
           <SocialShare
             :value="ogImageUrl"
@@ -86,6 +90,7 @@
           v-if="isPaymentProvidersSectionEnabled && !isPrePurchase"
           data-component="collapsible-panel"
           :title="brandPageSettingsTr('paymentProvidersTitle')"
+          :is-collapsed="true"
         >
           <div class="tw-mt-5">
             <SideBarSectionTitle
@@ -115,6 +120,7 @@
           v-if="designDraftToken"
           data-component="collapsible-panel"
           :title="commonTr('sensitiveContent')"
+          :is-collapsed="true"
         >
           <div class="tw-mt-2">
             <SensitiveContent
@@ -130,6 +136,7 @@
           ref="saveContactPanel"
           data-component="collapsible-panel"
           :title="saveContactSettingsTr('saveContactLabel')"
+          :is-collapsed="true"
         >
           <div class="tw-mt-2">
             <SaveContact
@@ -142,6 +149,7 @@
         <CollapsiblePanel
           data-component="collapsible-panel"
           :title="brandPageSettingsTr('cookieCollection')"
+          :is-collapsed="true"
         >
           <CookieSettings :view-model="brandPageViewModel.cookieOptions" />
         </CollapsiblePanel>

package/src/brand-page-maker/composables/ai-chat/types.ts

@@ -1,5 +1,10 @@
 import type { ComputedRef, Ref } from 'vue';
 import { type PlanItem } from '../../../clients/websocket-gateway-client';
+import type { AgentAction } from './ui-actions';
+
+// Re-exported for the chat components that consume it; defined alongside the
+// UI-action registry in ./ui-actions.
+export type { AgentAction };
 
 export interface BaseThreadMessage {
   id: string;
@@ -16,6 +21,7 @@ export interface TextThreadMessage extends BaseThreadMessage {
   initialMessage?: string;
   planItems?: PlanItem[];
   completedItemIds?: string[];
+  actions?: AgentAction[];
 }
 
 export interface ImageThreadMessage extends BaseThreadMessage {

package/src/brand-page-maker/composables/ai-chat/ui-actions.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest';
+import {
+  partitionAiToolCalls,
+  UI_ACTIONS,
+  AI_CHAT_UI_ACTIONS,
+} from './ui-actions';
+import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
+
+const tc = (fn: string, toolId = fn, args = '{}'): AiAssistantToolCall => ({
+  toolId,
+  function: fn,
+  arguments: args,
+});
+
+describe('partitionAiToolCalls', () => {
+  // The core invariant: a UI-action CTA must never land in mutationToolCalls,
+  // because those feed applyToolCallsAsync -> toolResults -> submitToolResults.
+  // A UI action has no tool result, so leaking one would leave an unresolved
+  // tool call in the thread and break the next LLM turn.
+  it('keeps an upgrade CTA out of the mutation set', () => {
+    const mutation = tc('build_banner_section', 'm1');
+    const upgrade = tc(UI_ACTIONS.UPGRADE, 'u1');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([
+      mutation,
+      upgrade,
+    ]);
+
+    expect(mutationToolCalls).toEqual([mutation]);
+    expect(
+      mutationToolCalls.some((t) => t.function === UI_ACTIONS.UPGRADE),
+    ).toBe(false);
+    expect(actions).toEqual([
+      { type: UI_ACTIONS.UPGRADE, ...AI_CHAT_UI_ACTIONS[UI_ACTIONS.UPGRADE] },
+    ]);
+  });
+
+  it('routes a standalone upgrade to actions with zero mutations', () => {
+    const { mutationToolCalls, actions } = partitionAiToolCalls([
+      tc(UI_ACTIONS.UPGRADE),
+    ]);
+
+    expect(mutationToolCalls).toEqual([]);
+    expect(actions.map((a) => a.type)).toEqual([UI_ACTIONS.UPGRADE]);
+  });
+
+  it('treats unknown tool names as mutations (never swallows a real tool call)', () => {
+    const unknown = tc('some_future_tool');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([unknown]);
+
+    expect(mutationToolCalls).toEqual([unknown]);
+    expect(actions).toEqual([]);
+  });
+
+  it('does not treat inherited Object keys (e.g. "constructor") as UI actions', () => {
+    const ctor = tc('constructor');
+
+    const { mutationToolCalls, actions } = partitionAiToolCalls([ctor]);
+
+    expect(mutationToolCalls).toEqual([ctor]);
+    expect(actions).toEqual([]);
+  });
+
+  it('resolves label/icon from the registry, not the wire arguments', () => {
+    const { actions } = partitionAiToolCalls([
+      tc(UI_ACTIONS.UPGRADE, 'u1', '{"label":"WRONG","icon":"WRONG"}'),
+    ]);
+
+    expect(actions[0].label).toBe('Upgrade');
+    expect(actions[0].icon).toBe('upgrade-alt');
+  });
+
+  it('returns empty partitions for no tool calls', () => {
+    expect(partitionAiToolCalls([])).toEqual({
+      mutationToolCalls: [],
+      actions: [],
+    });
+  });
+});

package/src/brand-page-maker/composables/ai-chat/ui-actions.ts

@@ -0,0 +1,58 @@
+// Single source of truth for the AI-chat actionable buttons (the Upgrade CTA, etc.).
+//
+// The AI pipeline decides WHICH action to surface and WHETHER the user is
+// eligible, then emits only the action identity as a tool call. How each action
+// looks — its button label and icon — is a frontend concern and lives here.
+// Click behaviour is wired in AiWebsiteBuilder, where the relevant stores live.
+import type { AiAssistantToolCall } from '../../../clients/ai-assistant-client';
+
+// Action identities — must match the tool names emitted by the AI pipeline.
+export const UI_ACTIONS = {
+  UPGRADE: 'upgrade',
+} as const;
+
+export const AI_CHAT_UI_ACTIONS = {
+  [UI_ACTIONS.UPGRADE]: { label: 'Upgrade', icon: 'upgrade-alt' },
+} as const;
+
+export type AgentActionType = keyof typeof AI_CHAT_UI_ACTIONS;
+
+// A resolved actionable button shown under an AI message. `type` identifies the
+// action; `label`/`icon` are resolved from AI_CHAT_UI_ACTIONS, never from the wire.
+export type AgentAction = {
+  type: AgentActionType;
+  label: string;
+  icon?: string;
+};
+
+// `hasOwnProperty` (not `in`) so inherited Object keys like "constructor" are never
+// mistaken for a UI action.
+const isUiActionFn = (fn: string | undefined): fn is AgentActionType =>
+  !!fn && Object.prototype.hasOwnProperty.call(AI_CHAT_UI_ACTIONS, fn);
+
+/**
+ * Split server tool calls into page mutations and UI-action CTAs.
+ *
+ * Mutations are executed by the metadata-builder and answered with tool results;
+ * UI actions (e.g. the Upgrade button) are rendered only. UI actions MUST stay out
+ * of `mutationToolCalls`: they are never executed and never get a tool result, so
+ * leaking one into the mutation set would leave an unresolved tool call and break
+ * the next LLM turn on the same thread.
+ */
+export function partitionAiToolCalls(toolCalls: AiAssistantToolCall[]): {
+  mutationToolCalls: AiAssistantToolCall[];
+  actions: AgentAction[];
+} {
+  const mutationToolCalls: AiAssistantToolCall[] = [];
+  const actions: AgentAction[] = [];
+
+  for (const tc of toolCalls) {
+    if (isUiActionFn(tc.function)) {
+      actions.push({ type: tc.function, ...AI_CHAT_UI_ACTIONS[tc.function] });
+    } else {
+      mutationToolCalls.push(tc);
+    }
+  }
+
+  return { mutationToolCalls, actions };
+}