astro-tractstack 2.2.10 → 2.3.0

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -16,53 +16,180 @@ export default function APIConfigSection({
 }: APIConfigSectionProps) {
   const { state, updateField, errors } = formState;
 
+  // Status flags
   const aaiConfigured = status?.aaiAPIKeySet;
+  const shopifyStorefrontConfigured = status?.shopifyStorefrontTokenSet;
+  const shopifySecretConfigured = status?.shopifyApiSecretSet;
+  const shopifyDomainConfigured = status?.shopifyStoreDomainSet;
+  const shopifyVersionConfigured = Boolean(status?.shopifyApiVersion);
+
+  const resendConfigured = status?.resendApiKeySet;
+
+  const renderStatusBadge = (isConfigured: boolean | undefined) => {
+    if (status === null) {
+      return (
+        <span className="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+          Loading...
+        </span>
+      );
+    }
+    return isConfigured ? (
+      <span className="ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-bold text-green-800">
+        ✓ Set
+      </span>
+    ) : (
+      <span className="ml-2 inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-bold text-yellow-800">
+        Not Set
+      </span>
+    );
+  };
 
   return (
     <div className="bg-white shadow md:rounded-lg">
       <div className="px-4 py-5 md:p-6">
-        <div className="flex items-center justify-between">
-          <h3 className="text-base font-bold leading-6 text-gray-900">
-            API Configuration
-          </h3>
-          <div className="flex items-center">
-            {aaiConfigured ? (
-              <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-bold text-green-800">
-                ✓ Configured
-              </span>
-            ) : status !== null ? (
-              <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-bold text-yellow-800">
-                Optional
-              </span>
-            ) : (
-              <span className="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-bold text-gray-800">
-                Loading...
-              </span>
-            )}
-          </div>
-        </div>
+        <h3 className="text-base font-bold leading-6 text-gray-900">
+          API Integrations
+        </h3>
         <div className="mt-2 max-w-xl text-sm text-gray-500">
-          <p>Configure external API keys for enhanced functionality.</p>
-        </div>
-        <div className="mt-5">
-          <StringInput
-            label="AssemblyAI API Key"
-            value={state.aaiApiKey}
-            onChange={(value) => updateField('aaiApiKey', value)}
-            type="password"
-            placeholder={
-              aaiConfigured ? '••••••••••••••••' : 'Enter AssemblyAI API key'
-            }
-            error={errors.aaiApiKey}
-          />
-        </div>
-        <div className="mt-3 text-xs text-gray-500">
           <p>
-            Used for audio transcription and analysis features. Optional but
-            required for audio processing.
-            {aaiConfigured && ' Leave blank to keep existing key.'}
+            Configure external services to enable advanced features like AI,
+            Commerce, and Email.
           </p>
         </div>
+
+        <div className="mt-6 space-y-8">
+          {/* AssemblyAI Section */}
+          <div className="border-t border-gray-100 pt-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h4 className="text-sm font-bold text-gray-900">
+                AssemblyAI (Audio Intelligence)
+              </h4>
+              {renderStatusBadge(aaiConfigured)}
+            </div>
+            <StringInput
+              label="API Key"
+              value={state.aaiApiKey}
+              onChange={(value) => updateField('aaiApiKey', value)}
+              type="password"
+              placeholder={
+                aaiConfigured ? '••••••••••••••••' : 'Enter AssemblyAI API key'
+              }
+              error={errors.aaiApiKey}
+            />
+            <p className="mt-2 text-xs text-gray-500">
+              Required for audio transcription and analysis.
+              {aaiConfigured && ' Leave blank to keep existing key.'}
+            </p>
+          </div>
+
+          {/* Shopify Section */}
+          <div className="border-t border-gray-100 pt-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h4 className="text-sm font-bold text-gray-900">
+                Shopify (Commerce)
+              </h4>
+              {renderStatusBadge(
+                shopifyStorefrontConfigured &&
+                  shopifySecretConfigured &&
+                  shopifyDomainConfigured &&
+                  shopifyVersionConfigured
+              )}
+            </div>
+            <div className="space-y-4">
+              <div>
+                <StringInput
+                  label="Shopify Store Domain"
+                  value={state.shopifyStoreDomain}
+                  onChange={(value) => updateField('shopifyStoreDomain', value)}
+                  placeholder={
+                    shopifyDomainConfigured
+                      ? 'your-shop.myshopify.com'
+                      : 'your-shop.myshopify.com'
+                  }
+                  error={errors.shopifyStoreDomain}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  The primary .myshopify.com domain for your store.
+                </p>
+              </div>
+
+              <div>
+                <StringInput
+                  label="API Version"
+                  value={state.shopifyApiVersion}
+                  onChange={(value) => updateField('shopifyApiVersion', value)}
+                  type="text"
+                  placeholder="2026-01"
+                  error={errors.shopifyApiVersion}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Target specific Shopify API version (YYYY-MM).
+                </p>
+              </div>
+
+              <div>
+                <StringInput
+                  label="Headless channel, Private Access Token"
+                  value={state.shopifyStorefrontToken}
+                  onChange={(value) =>
+                    updateField('shopifyStorefrontToken', value)
+                  }
+                  type="password"
+                  placeholder={
+                    shopifyStorefrontConfigured
+                      ? '••••••••••••••••'
+                      : 'shpat_...'
+                  }
+                  error={errors.shopifyStorefrontToken}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Private access token for fetching products.
+                  {shopifyStorefrontConfigured &&
+                    ' Leave blank to keep existing.'}
+                </p>
+              </div>
+
+              <div>
+                <StringInput
+                  label="API Secret Key"
+                  value={state.shopifyApiSecret}
+                  onChange={(value) => updateField('shopifyApiSecret', value)}
+                  type="password"
+                  placeholder={
+                    shopifySecretConfigured ? '••••••••••••••••' : 'shpss_...'
+                  }
+                  error={errors.shopifyApiSecret}
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  Required for Webhook signature verification.
+                  {shopifySecretConfigured && ' Leave blank to keep existing.'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Resend Section */}
+          <div className="border-t border-gray-100 pt-6">
+            <div className="mb-4 flex items-center justify-between">
+              <h4 className="text-sm font-bold text-gray-900">
+                Resend (Transactional Email)
+              </h4>
+              {renderStatusBadge(resendConfigured)}
+            </div>
+            <StringInput
+              label="API Key"
+              value={state.resendApiKey}
+              onChange={(value) => updateField('resendApiKey', value)}
+              type="password"
+              placeholder={resendConfigured ? '••••••••••••••••' : 're_...'}
+              error={errors.resendApiKey}
+            />
+            <p className="mt-2 text-xs text-gray-500">
+              Required for sending system emails.
+              {resendConfigured && ' Leave blank to keep existing key.'}
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );

package/templates/src/components/storykeep/Dashboard.tsx

@@ -52,9 +52,14 @@ export default function StoryKeepDashboard({
           current: shouldShowInactiveTabs ? false : activeTab === 'analytics',
         },
         {
-          id: 'content',
-          name: 'Content',
-          current: activeTab === 'content',
+          id: 'pages',
+          name: 'Web Pages',
+          current: activeTab === 'pages',
+        },
+        {
+          id: 'manage',
+          name: 'Manage Content',
+          current: activeTab === 'manage',
         },
         {
           id: 'branding',
@@ -70,6 +75,15 @@ export default function StoryKeepDashboard({
               },
             ]
           : []),
+        ...(currentBrandConfig?.HAS_SHOPIFY
+          ? [
+              {
+                id: 'shopify',
+                name: 'Shopify',
+                current: activeTab === 'shopify',
+              },
+            ]
+          : []),
       ];
 
   useEffect(() => {

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -72,6 +72,7 @@ export default function StoryKeepDashboard_Advanced({
       const newState = convertToLocalState(newStatus);
       formState.resetToState(newState);
 
+      window.location.reload();
       return newState;
     },
   });

package/templates/src/components/storykeep/Dashboard_Content.tsx

@@ -1,39 +1,17 @@
 import { useState, useEffect } from 'react';
-import { classNames } from '@/utils/helpers';
 import { TractStackAPI } from '@/utils/api';
-import {
-  handleContentSubtabChange,
-  restoreTabNavigation,
-} from '@/stores/navigation';
 import ContentBrowser from './controls/content/ContentBrowser';
-import ManageContent from './controls/content/ManageContent';
 import type { FullContentMapItem } from '@/types/tractstack';
 
 interface StoryKeepDashboardContentProps {
   fullContentMap: FullContentMapItem[];
   homeSlug: string;
-  createMenu: boolean;
 }
 
-interface ContentTab {
-  id: string;
-  name: string;
-}
-
-const contentTabs: ContentTab[] = [
-  { id: 'webpages', name: 'Web Pages' },
-  { id: 'manage', name: 'Manage Content' },
-];
-
 const StoryKeepDashboard_Content = ({
   fullContentMap,
   homeSlug,
-  createMenu,
 }: StoryKeepDashboardContentProps) => {
-  const [activeContentTab, setActiveContentTab] = useState('webpages');
-  const [navigationRestored, setNavigationRestored] = useState(false);
-
-  // Lightweight analytics data state - only for hotContent
   const [analytics, setAnalytics] = useState<{
     dashboard: {
       hotContent?: Array<{ id: string; totalEvents: number }>;
@@ -48,29 +26,6 @@ const StoryKeepDashboard_Content = ({
     error: null,
   });
 
-  // Restore navigation state when component mounts or when returning to Content tab
-  useEffect(() => {
-    if (!navigationRestored) {
-      const contentNavigation = restoreTabNavigation();
-      if (contentNavigation) {
-        setActiveContentTab(contentNavigation.subtab);
-      }
-      setNavigationRestored(true);
-    }
-  }, [navigationRestored]);
-
-  // Enhanced content tab change with navigation tracking
-  const handleContentTabChange = (tabId: string) => {
-    handleContentSubtabChange(tabId as any, setActiveContentTab);
-  };
-
-  useEffect(() => {
-    if (createMenu) {
-      setActiveContentTab('manage');
-    }
-  }, [createMenu]);
-
-  // Lightweight content summary fetch with retry logic
   useEffect(() => {
     let retryCount = 0;
     const maxRetries = 2;
@@ -79,7 +34,6 @@ const StoryKeepDashboard_Content = ({
       try {
         setAnalytics((prev) => ({ ...prev, isLoading: true, error: null }));
 
-        // Use TractStackAPI like FetchAnalytics does
         const api = new TractStackAPI(
           window.TRACTSTACK_CONFIG?.tenantId || 'default'
         );
@@ -91,8 +45,6 @@ const StoryKeepDashboard_Content = ({
         }
 
         const data = response.data;
-
-        // Check if we got actual data
         const hasData = data.hotContent && data.hotContent.length > 0;
 
         setAnalytics({
@@ -140,56 +92,13 @@ const StoryKeepDashboard_Content = ({
     fetchContentSummary();
   }, []);
 
-  const renderContentTabContent = () => {
-    switch (activeContentTab) {
-      case 'webpages':
-        return (
-          <ContentBrowser
-            analytics={analytics}
-            fullContentMap={fullContentMap}
-            homeSlug={homeSlug}
-          />
-        );
-      case 'manage':
-        return (
-          <ManageContent
-            fullContentMap={fullContentMap}
-            homeSlug={homeSlug}
-            createMenu={createMenu}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
   return (
     <div className="w-full">
-      {/* Content Sub-Navigation */}
-      <div className="mb-6">
-        <div className="border-b border-gray-200">
-          <nav className="-mb-px flex gap-x-6" aria-label="Content tabs">
-            {contentTabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => handleContentTabChange(tab.id)}
-                className={classNames(
-                  activeContentTab === tab.id
-                    ? 'border-cyan-500 text-cyan-600'
-                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                  'whitespace-nowrap border-b-2 px-1 py-3 text-sm font-bold'
-                )}
-                aria-current={activeContentTab === tab.id ? 'page' : undefined}
-              >
-                {tab.name}
-              </button>
-            ))}
-          </nav>
-        </div>
-      </div>
-
-      {/* Content Tab Content */}
-      {renderContentTabContent()}
+      <ContentBrowser
+        analytics={analytics}
+        fullContentMap={fullContentMap}
+        homeSlug={homeSlug}
+      />
     </div>
   );
 };