astro-tractstack 2.2.10 → 2.3.1

package/templates/src/components/Header.astro

@@ -4,13 +4,19 @@ import SearchWrapper from '@/components/search/SearchWrapper';
 import { getFullContentMap } from '@/stores/analytics';
 import { isAuthenticated, isAdmin, getUserRole } from '@/utils/auth';
 import ImpressionWrapper from '@/components/widgets/ImpressionWrapper';
-import type { MenuNode } from '@/types/tractstack';
 import type { ImpressionNode } from '@/types/compositorTypes';
+import { getHeaderResources } from '@/lib/resources';
+import ShopifyCartManager from '@/custom/shopify/ShopifyCartManager';
+import CartIcon from '@/custom/shopify/CartIcon';
+import CartModal from '@/custom/shopify/CartModal';
+import CheckoutModal from '@/custom/shopify/CheckoutModal';
+import type { MenuNode, BrandConfig } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   title: string;
   slug: string;
-  brandConfig: any;
+  brandConfig: BrandConfig;
   isContext?: boolean;
   isStoryKeep?: boolean;
   isEditable?: boolean;
@@ -32,13 +38,11 @@ const {
   storyfragmentId = undefined,
   impressions = [],
 } = Astro.props;
-
 const isHome = slug === brandConfig?.HOME_SLUG;
 
 const tenantId =
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
 const fullContentMap = await getFullContentMap(tenantId);
-
 const getAssetPath = (configPath: string, fallback: string) => {
   // Always prioritize brandConfig values when they exist
   if (configPath && configPath !== '') {
@@ -52,17 +56,39 @@ const wordmarkMode =
   brandConfig?.WORDMARK_MODE && brandConfig.WORDMARK_MODE !== ''
     ? brandConfig.WORDMARK_MODE
     : 'default';
-
 // Auth status
 const authStatus = {
   isAuthenticated: isAuthenticated(Astro),
   isAdmin: isAdmin(Astro),
   userRole: getUserRole(Astro),
 };
+
+const hasShopify = brandConfig?.HAS_SHOPIFY;
+let shopifyResources: ResourceNode[] = [];
+if (hasShopify) {
+  shopifyResources = await getHeaderResources(tenantId, ['product', 'service']);
+}
 ---
 
 <header class="relative shadow-inner">
-  <!-- TOP ROW: Logo/Wordmark + Menu + Auth Controls -->
+  {
+    hasShopify ? (
+      <>
+        {slug !== `cart` ? (
+          <div class="flex w-full justify-end px-4 py-2 md:px-8">
+            <CartIcon client:only="react" />
+          </div>
+        ) : (
+          <CheckoutModal
+            client:only="react"
+            resources={shopifyResources}
+            maxLength={brandConfig?.scheduling?.maxLengthMinutes || 180}
+          />
+        )}
+      </>
+    ) : null
+  }
+
   <div
     class="flex flex-row flex-nowrap items-center justify-between px-4 py-3 md:px-8"
   >
@@ -72,10 +98,12 @@ const authStatus = {
           [`default`, `logo`].includes(wordmarkMode) ? (
             <>
               <img
+                id="t8k-logo"
                 src={logo}
                 alt="Logo"
                 class="pointer-events-none h-8 w-auto"
               />
+
               <span class="w-2" />
             </>
           ) : null
@@ -83,6 +111,7 @@ const authStatus = {
         {
           [`default`, `wordmark`].includes(wordmarkMode) ? (
             <img
+              id="t8k-wordmark"
               src={wordmark}
               alt="Wordmark"
               class="pointer-events-none h-14 w-auto max-w-48 md:max-w-72"
@@ -105,7 +134,6 @@ const authStatus = {
     }
   </div>
 
-  <!-- BOTTOM ROW: Title + Action Icons -->
   <div
     class="flex flex-row flex-nowrap justify-between bg-mywhite px-4 pb-3 pt-4 shadow-inner md:px-8"
   >
@@ -198,7 +226,6 @@ const authStatus = {
             localStorage.getItem('tractstack_has_profile') === '1';
 
           if (!sessionId) return;
-
           const rememberMeContainer = document.getElementById(
             'remember-me-container'
           );
@@ -211,7 +238,6 @@ const authStatus = {
               consent || hasProfile
                 ? '<svg class="h-6 w-6 text-myblue/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>'
                 : '<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" /></svg>';
-
             rememberMeContainer.innerHTML = `
         <a href="/storykeep/profile" 
            class="hover:text-myblue hover:rotate-6" 
@@ -339,6 +365,15 @@ const authStatus = {
   )
 }
 
+{
+  !isStoryKeep && hasShopify && (
+    <>
+      <ShopifyCartManager resources={shopifyResources} client:only="react" />
+      <CartModal client:only="react" />
+    </>
+  )
+}
+
 <script>
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', setupAdminModal);
@@ -383,7 +418,6 @@ const authStatus = {
             tractStackKeys.forEach((key) => localStorage.removeItem(key));
 
             console.log('TractStack: Complete logout finished');
-
             // Redirect to home page
             window.location.href = '/';
           } else {
@@ -432,7 +466,6 @@ const authStatus = {
         return;
       }
     });
-
     document.addEventListener('keydown', function (e) {
       if (e.key === 'Escape') {
         const modal = document.getElementById('admin-modal');
@@ -441,7 +474,6 @@ const authStatus = {
         }
       }
     });
-
     function closeModal() {
       const modal = document.getElementById('admin-modal');
       const heartBtn = document.getElementById('admin-heart-btn');

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -276,9 +276,9 @@ const AddPaneNewPanel = ({
         {!hasAssemblyAI && (
           <div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-4 shadow-sm">
             <p className="text-sm text-blue-800">
-              Tract Stack uses AssemblyAI AskLemur service to generate designs,
-              describe content, and streamline the management of your site. We
-              strongly recommend enabling these features. See{' '}
+              Tract Stack uses AssemblyAI to generate designs, describe content,
+              and streamline the management of your site. We strongly recommend
+              enabling these features. See{' '}
               <a
                 href="https://freewebpress.org"
                 target="_blank"

package/templates/src/components/edit/pane/AiRestylePaneModal.tsx

@@ -11,7 +11,7 @@ import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { AiRefineDesignStep } from './steps/AiRefineDesignStep';
 import prompts from '@/constants/prompts.json';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { PaneNode, TemplatePane } from '@/types/compositorTypes';
 
 interface AiRestylePaneModalProps {
@@ -87,7 +87,7 @@ export const AiRestylePaneModal = ({
         .replace('{{COPY_INPUT}}', 'A generic content section')
         .replace('{{LAYOUT_TYPE}}', 'Text Only');
 
-      const resultStr = await callAskLemurAPI({
+      const resultStr = await callAaiAPI({
         prompt: formattedPrompt,
         context: shellPromptDetails.system || '',
         expectJson: true,

package/templates/src/components/edit/pane/steps/AiCreativeDesignStep.tsx

@@ -6,7 +6,7 @@ import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRou
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
 import type { TemplatePane } from '@/types/compositorTypes';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import BooleanToggle from '@/components/form/BooleanToggle';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
 
@@ -86,7 +86,7 @@ export const AiCreativeDesignStep = ({
       userPrompt = userPrompt.replace('{{DESIGN_NOTES}}', combinedNotes);
 
       // Use shared infrastructure utility
-      const rawHtml = await callAskLemurAPI({
+      const rawHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,

package/templates/src/components/edit/pane/steps/AiLibraryCopyStep.tsx

@@ -6,7 +6,7 @@ import {
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import type { DesignLibraryEntry } from '@/types/tractstack';
 import type { TemplatePane } from '@/types/compositorTypes';
@@ -159,7 +159,7 @@ export const AiLibraryCopyStep = ({
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
-            const copyResult = await callAskLemurAPI({
+            const copyResult = await callAaiAPI({
               prompt: formattedCopyPrompt,
               context: copyPromptDetails.system || '',
               expectJson: false,
@@ -201,7 +201,7 @@ export const AiLibraryCopyStep = ({
             .replace('{{LAYOUT_TYPE}}', layoutType)
             .replace('{{SHELL_JSON}}', shellResult);
 
-          const copyResult = await callAskLemurAPI({
+          const copyResult = await callAaiAPI({
             prompt: formattedCopyPrompt,
             context: copyPromptDetails.system || '',
             expectJson: false,

package/templates/src/components/edit/pane/steps/AiRefineDesignStep.tsx

@@ -5,7 +5,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst, cleanHtml } from '@/utils/compositor/htmlAst';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { TemplatePane } from '@/types/compositorTypes';
 
 interface AiRefineDesignStepProps {
@@ -54,7 +54,7 @@ export const AiRefineDesignStep = ({
       userPrompt = userPrompt.replace('{{HTML_INPUT}}', cleanHtml(initialHtml));
 
       // 1. Get RAW output from AI
-      const resultHtml = await callAskLemurAPI({
+      const resultHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,

package/templates/src/components/edit/pane/steps/AiStandardDesignStep.tsx

@@ -4,7 +4,7 @@ import {
   parseAiPane,
   createDefaultShell,
 } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import { markdownToHtml } from '@/utils/compositor/htmlAst';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
@@ -148,7 +148,7 @@ export const AiStandardDesignStep = ({
       let shellResult = '';
 
       if (isAiStyling) {
-        // AI Path: Generate Shell via AskLemur
+        // AI Path: Generate Shell via Aai
         let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
         if (aiDesignConfig.baseColor)
           designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
@@ -173,7 +173,7 @@ export const AiStandardDesignStep = ({
           );
         }
 
-        shellResult = await callAskLemurAPI({
+        shellResult = await callAaiAPI({
           prompt: formattedShellPrompt,
           context: masterShellSystem,
           expectJson: true,
@@ -204,7 +204,7 @@ export const AiStandardDesignStep = ({
             .replace('{{LAYOUT_TYPE}}', layoutType)
             .replace('{{SHELL_JSON}}', shellResult);
 
-          finalHtml = await callAskLemurAPI({
+          finalHtml = await callAaiAPI({
             prompt: formattedCopyPrompt,
             context: masterCopySystem,
             expectJson: false,
@@ -218,7 +218,7 @@ export const AiStandardDesignStep = ({
               .replace('{{SHELL_JSON}}', shellResult)
               .replace('{{COPY_INPUT}}', copyValue);
 
-            finalHtml = await callAskLemurAPI({
+            finalHtml = await callAaiAPI({
               prompt: formattedStylePrompt,
               context: masterStyleSystem,
               expectJson: false,
@@ -246,7 +246,7 @@ export const AiStandardDesignStep = ({
                 .replace('{{SHELL_JSON}}', shellResult)
                 .replace('{{COPY_INPUT}}', content);
 
-              const styledHtml = await callAskLemurAPI({
+              const styledHtml = await callAaiAPI({
                 prompt: formattedStylePrompt,
                 context: masterStyleSystem,
                 expectJson: false,
@@ -289,7 +289,7 @@ export const AiStandardDesignStep = ({
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
-            const copyResult = await callAskLemurAPI({
+            const copyResult = await callAaiAPI({
               prompt: formattedCopyPrompt,
               context: masterCopySystem,
               expectJson: false,