astro-tractstack 2.3.1 → 2.3.3

package/templates/src/components/form/DateTimeInput.tsx

@@ -40,6 +40,12 @@ const ampmOptions = [
   { value: 'PM', label: 'PM' },
 ];
 
+const datetimeSelectItemHighlightStyles = `
+  .datetime-select-item[data-highlighted] {
+    background-color: #eff6ff;
+  }
+`;
+
 const DateTimeInput = ({
   value,
   onChange,
@@ -450,6 +456,7 @@ const DateTimeInput = ({
       {/* Time Picker Section (only show if withTime is true and not date-only) */}
       {withTime && displayFormat !== 'date' && (
         <div className="space-y-2">
+          <style>{datetimeSelectItemHighlightStyles}</style>
           <div className="text-xs font-bold text-gray-600">
             Time (Local Timezone)
           </div>
@@ -489,7 +496,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -540,7 +547,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>
@@ -589,7 +596,7 @@ const DateTimeInput = ({
                         <Select.Item
                           key={option.value}
                           item={option}
-                          className="flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50 data-[highlighted]:bg-blue-50"
+                          className="datetime-select-item flex cursor-pointer items-center justify-between px-3 py-2 text-sm hover:bg-blue-50"
                         >
                           <Select.ItemText>{option.label}</Select.ItemText>
                           <Select.ItemIndicator>

package/templates/src/components/form/FileUpload.tsx

@@ -1,4 +1,10 @@
-import { useRef, useState, useId } from 'react';
+import {
+  useRef,
+  useState,
+  useId,
+  type ChangeEvent,
+  type DragEvent,
+} from 'react';
 import { classNames } from '@/utils/helpers';
 import {
   validateFile,
@@ -151,14 +157,14 @@ const FileUpload = ({
     }
   };
 
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
       processFile(file);
     }
   };
 
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
 
@@ -170,14 +176,14 @@ const FileUpload = ({
     }
   };
 
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     if (!disabled) {
       setDragOver(true);
     }
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setDragOver(false);
   };

package/templates/src/components/form/NumberInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId } from 'react';
+import { forwardRef, useId, type ChangeEvent } from 'react';
 import { classNames } from '@/utils/helpers';
 
 interface NumberInputProps {
@@ -42,7 +42,7 @@ const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     const errorId = `${inputId}-error`;
     const inputName = customName || inputId;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const newValue = parseFloat(e.target.value);
       if (!isNaN(newValue)) {
         onChange(newValue);

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

@@ -13,13 +13,25 @@ interface APIConfigSectionProps {
   status: AdvancedConfigStatus | null;
 }
 
+const GOOGLE_APP_HOME_URL = 'https://renees.freewebpress.com/';
+const GOOGLE_PRIVACY_URL = 'https://renees.freewebpress.com/privacy';
+const GOOGLE_TERMS_URL = 'https://renees.freewebpress.com/terms';
+const GOOGLE_AUTHORIZED_DOMAIN = 'freewebpress.com';
+const GOOGLE_REDIRECT_URI =
+  'https://renees.freewebpress.com/api/google/oauth/callback';
+const GOOGLE_SCOPE = 'https://www.googleapis.com/auth/calendar.events';
+const GOOGLE_VERIFICATION_VIDEO_URL =
+  'https://www.youtube.com/watch?v=kJI4XdqiiAI';
+
 export default function APIConfigSection({
   formState,
   status,
 }: APIConfigSectionProps) {
-  const { state, updateField, errors } = formState;
+  const { state, updateField, errors, isDirty, saveState } = formState;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isGoogleConnecting, setIsGoogleConnecting] = useState(false);
+  const [isGoogleDisconnecting, setIsGoogleDisconnecting] = useState(false);
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
 
@@ -32,6 +44,18 @@ export default function APIConfigSection({
   const shopifyAdminSlugConfigured = status?.shopifyAdminSlugSet;
   const shopifyWebhooksConfigured = status?.userSetupWebhooks;
   const resendConfigured = status?.resendApiKeySet;
+  const googleHasSync = status?.hasGoogleSync;
+  const googleClientIDConfigured = status?.googleOauthClientIdSet;
+  const googleClientSecretConfigured = status?.googleOauthClientSecretSet;
+  const googleCalendarConfigured = status?.googleCalendarIdSet;
+  const googleCredentialsSaved = Boolean(
+    googleClientIDConfigured &&
+    googleClientSecretConfigured &&
+    googleCalendarConfigured
+  );
+  const googleCredentialsPendingSave = isDirty || saveState === 'saving';
+  const canStartGoogleConnect =
+    googleCredentialsSaved && !googleCredentialsPendingSave && !googleHasSync;
 
   const renderStatusBadge = (isConfigured: boolean | undefined) => {
     if (status === null) {
@@ -52,6 +76,44 @@ export default function APIConfigSection({
     );
   };
 
+  const handleGoogleConnect = async () => {
+    setIsGoogleConnecting(true);
+    try {
+      const response = await fetch('/api/google/oauth/start');
+      const payload = await response.json();
+      if (!response.ok || !payload.authorization) {
+        throw new Error(payload?.error || 'Failed to start Google OAuth');
+      }
+      window.location.href = payload.authorization;
+    } catch (error) {
+      console.error('Failed to start Google OAuth:', error);
+      alert(error instanceof Error ? error.message : 'Google OAuth failed');
+    } finally {
+      setIsGoogleConnecting(false);
+    }
+  };
+
+  const handleGoogleDisconnect = async () => {
+    setIsGoogleDisconnecting(true);
+    try {
+      const response = await fetch('/api/google/oauth/disconnect', {
+        method: 'POST',
+      });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload?.error || 'Failed to disconnect Google OAuth');
+      }
+      window.location.reload();
+    } catch (error) {
+      console.error('Failed to disconnect Google OAuth:', error);
+      alert(
+        error instanceof Error ? error.message : 'Failed to disconnect Google'
+      );
+    } finally {
+      setIsGoogleDisconnecting(false);
+    }
+  };
+
   return (
     <div className="bg-white shadow md:rounded-lg">
       <div className="px-4 py-5 md:p-6">
@@ -212,7 +274,7 @@ export default function APIConfigSection({
 
                   <BooleanToggle
                     label="Webhooks Manually Configured"
-                    description="I have manually created the required webhooks (orders/paid, products/*) in my Shopify Admin."
+                    description="I have manually created the required webhooks in my Shopify Admin."
                     value={state.userSetupWebhooks}
                     onChange={(value) =>
                       updateField('userSetupWebhooks', value)
@@ -244,6 +306,162 @@ export default function APIConfigSection({
               {resendConfigured && ' Leave blank to keep existing key.'}
             </p>
           </div>
+
+          {/* Google Calendar / Meet 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">
+                Google Calendar + Meet (Remote Sync)
+              </h4>
+              {renderStatusBadge(googleHasSync)}
+            </div>
+            <div className="space-y-4">
+              <StringInput
+                label="Google OAuth Client ID"
+                value={state.googleOauthClientId}
+                onChange={(value) => updateField('googleOauthClientId', value)}
+                placeholder={
+                  googleClientIDConfigured
+                    ? '••••••••••••••••'
+                    : 'Enter Google OAuth client ID'
+                }
+              />
+              <StringInput
+                label="Google OAuth Client Secret"
+                value={state.googleOauthClientSecret}
+                onChange={(value) =>
+                  updateField('googleOauthClientSecret', value)
+                }
+                type="password"
+                placeholder={
+                  googleClientSecretConfigured
+                    ? '••••••••••••••••'
+                    : 'Enter Google OAuth client secret'
+                }
+              />
+              <StringInput
+                label="Google Calendar ID"
+                value={state.googleCalendarId}
+                onChange={(value) => updateField('googleCalendarId', value)}
+                placeholder={
+                  googleCalendarConfigured
+                    ? '••••••••••••••••'
+                    : 'example@gmail.com or calendar ID'
+                }
+              />
+              <div className="rounded-md border border-gray-200 bg-gray-50 p-4 text-xs text-gray-700">
+                <p className="font-bold text-gray-900">OAuth setup notes</p>
+                <p className="mt-2">
+                  Ensure Google Calendar API is enabled in APIs &amp; Services
+                  for this same project before running OAuth.
+                </p>
+                <ol className="mt-2 list-decimal space-y-1 pl-4">
+                  <li>
+                    Open Google Auth Platform <strong>Clients</strong>, create a
+                    Web application client, and set Authorized redirect URI to:
+                    <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                      {GOOGLE_REDIRECT_URI}
+                    </code>
+                  </li>
+                  <li>
+                    Open <strong>Audience</strong> and set:
+                    <ul className="mt-1 list-disc space-y-1 pl-4">
+                      <li>App type: External</li>
+                      <li>Publishing status: In production</li>
+                    </ul>
+                  </li>
+                  <li>
+                    Open <strong>Data Access</strong> and add scope:
+                    <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                      {GOOGLE_SCOPE}
+                    </code>
+                  </li>
+                  <li>
+                    Open <strong>Branding</strong> and set:
+                    <ul className="mt-1 list-disc space-y-1 pl-4">
+                      <li>
+                        Application home page:
+                        <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                          {GOOGLE_APP_HOME_URL}
+                        </code>
+                      </li>
+                      <li>
+                        Application privacy policy link:
+                        <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                          {GOOGLE_PRIVACY_URL}
+                        </code>
+                      </li>
+                      <li>
+                        Application terms of service link:
+                        <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                          {GOOGLE_TERMS_URL}
+                        </code>
+                      </li>
+                      <li>
+                        Authorized domain:
+                        <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                          {GOOGLE_AUTHORIZED_DOMAIN}
+                        </code>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Open <strong>Verification Center</strong>, start
+                    verification, and use this default demo video URL:
+                    <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
+                      {GOOGLE_VERIFICATION_VIDEO_URL}
+                    </code>
+                  </li>
+                  <li>
+                    Create client credentials and copy:
+                    <ul className="mt-1 list-disc space-y-1 pl-4">
+                      <li>
+                        web.client_id into Google OAuth Client ID in StoryKeep.
+                      </li>
+                      <li>
+                        web.client_secret into Google OAuth Client Secret in
+                        StoryKeep.
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    Open Google Calendar, select the target calendar, then copy
+                    Calendar ID from Integrate calendar settings.
+                  </li>
+                  <li>
+                    Save credentials in StoryKeep, then click Connect Google to
+                    complete OAuth and store refresh token linkage.
+                  </li>
+                </ol>
+              </div>
+              <div className="flex gap-3">
+                {canStartGoogleConnect ? (
+                  <button
+                    type="button"
+                    onClick={handleGoogleConnect}
+                    disabled={isGoogleConnecting}
+                    className="rounded-md bg-black px-4 py-2 text-xs font-bold text-white hover:bg-gray-800 disabled:opacity-50"
+                  >
+                    {isGoogleConnecting ? 'Connecting...' : 'Connect Google'}
+                  </button>
+                ) : (
+                  <div className="flex items-center rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-bold text-amber-800">
+                    {googleHasSync
+                      ? 'Google is already connected'
+                      : 'Save Google credentials before connecting'}
+                  </div>
+                )}
+                <button
+                  type="button"
+                  onClick={handleGoogleDisconnect}
+                  disabled={isGoogleDisconnecting || !googleHasSync}
+                  className="rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-bold text-gray-700 hover:bg-gray-100 disabled:opacity-50"
+                >
+                  {isGoogleDisconnecting ? 'Disconnecting...' : 'Disconnect'}
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -300,7 +518,7 @@ export default function APIConfigSection({
                     <ul className="mt-2 list-disc space-y-1 pl-5">
                       <li>
                         <strong>Event:</strong> Select the specific event (e.g.,
-                        Order payment, Product creation).
+                        Order payment, Product update).
                       </li>
                       <li>
                         <strong>Format:</strong> Select JSON (TractStack relies
@@ -358,12 +576,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Order payment
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        orders/paid
-                      </li>
                       <li>
                         <span className="font-bold text-gray-900">
                           Purpose:
@@ -374,24 +586,6 @@ export default function APIConfigSection({
                     </ul>
                   </div>
 
-                  <div className="rounded border border-gray-200 bg-gray-50 p-4">
-                    <h5 className="font-bold">2. Product Creation</h5>
-                    <ul className="mt-2 space-y-1 text-xs">
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Shopify Event Name:
-                        </span>{' '}
-                        Product creation
-                      </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/create
-                      </li>
-                    </ul>
-                  </div>
-
                   <div className="rounded border border-gray-200 bg-gray-50 p-4">
                     <h5 className="font-bold">3. Product Update</h5>
                     <ul className="mt-2 space-y-1 text-xs">
@@ -401,12 +595,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Product update
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/update
-                      </li>
                     </ul>
                   </div>
 
@@ -419,12 +607,6 @@ export default function APIConfigSection({
                         </span>{' '}
                         Product deletion
                       </li>
-                      <li>
-                        <span className="font-bold text-gray-900">
-                          Topic Header:
-                        </span>{' '}
-                        products/delete
-                      </li>
                     </ul>
                   </div>
                 </div>

package/templates/src/components/form/brand/SiteConfigSection.tsx

@@ -48,6 +48,16 @@ export default function SiteConfigSection({
           error={errors.footer}
         />
 
+        <StringInput
+          value={state.adminEmail}
+          onChange={(value) => updateField('adminEmail', value)}
+          label="Admin Email"
+          type="email"
+          placeholder="admin@example.com"
+          required={true}
+          error={errors.adminEmail}
+        />
+
         <StringInput
           value={state.gtag}
           onChange={(value) => updateField('gtag', value)}

package/templates/src/components/form/shopify/SchedulingSection.tsx

@@ -222,6 +222,50 @@ export default function SchedulingSection({
                 className="mt-2 block w-full rounded-md border-gray-300 px-2 py-3 focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
               />
             </div>
+            <div className="md:col-span-3 xl:col-span-4">
+              <label className="block text-xs font-black uppercase tracking-widest text-gray-500">
+                Allow Remote Booking
+              </label>
+              <label className="mt-2 flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  checked={config.remoteOnly ? true : config.allowRemote}
+                  disabled={config.remoteOnly}
+                  onChange={(e) =>
+                    updateField('scheduling', {
+                      ...config,
+                      allowRemote: e.target.checked,
+                    })
+                  }
+                  className="h-4 w-4 rounded border-gray-300 text-cyan-700 focus:ring-cyan-700 disabled:opacity-50"
+                />
+                <span className="text-sm font-bold text-gray-700">
+                  Enable remote option in checkout
+                </span>
+              </label>
+            </div>
+            <div className="md:col-span-3 xl:col-span-4">
+              <label className="block text-xs font-black uppercase tracking-widest text-gray-500">
+                Remote Only
+              </label>
+              <label className="mt-2 flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  checked={config.remoteOnly}
+                  onChange={(e) =>
+                    updateField('scheduling', {
+                      ...config,
+                      remoteOnly: e.target.checked,
+                      allowRemote: e.target.checked ? true : config.allowRemote,
+                    })
+                  }
+                  className="h-4 w-4 rounded border-gray-300 text-cyan-700 focus:ring-cyan-700"
+                />
+                <span className="text-sm font-bold text-gray-700">
+                  Force all bookings to remote
+                </span>
+              </label>
+            </div>
           </div>
         </div>
 

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import {
   convertToLocalState,
@@ -28,6 +28,7 @@ export default function StoryKeepDashboard_Advanced({
   const [status, setStatus] = useState<AdvancedConfigStatus | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string>('');
+  const hasHydratedInitialFormState = useRef(false);
 
   // Load status on mount
   useEffect(() => {
@@ -77,6 +78,14 @@ export default function StoryKeepDashboard_Advanced({
     },
   });
 
+  useEffect(() => {
+    if (!status || hasHydratedInitialFormState.current) {
+      return;
+    }
+    formState.resetToState(convertToLocalState(status));
+    hasHydratedInitialFormState.current = true;
+  }, [status, formState]);
+
   if (isLoading) {
     return (
       <div className="flex justify-center py-12">

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

@@ -26,6 +26,7 @@ import ShopifyDashboard_Services from './shopify/ShopifyDashboard_Services';
 import ShopifyDashboard_Schedule from './shopify/ShopifyDashboard_Schedule';
 import ShopifyDashboard_Search from './shopify/ShopifyDashboard_Search';
 import ShopifyDashboard_Bookings from './shopify/ShopifyDashboard_Bookings';
+import ShopifyDashboard_Emails from './shopify/ShopifyDashboard_Emails';
 
 interface DashboardShopifyProps {
   brandConfig: BrandConfig;
@@ -78,7 +79,8 @@ export default function StoryKeepDashboard_Shopify({
     { id: 'products', name: 'Products' },
     { id: 'services', name: 'Services' },
     { id: 'schedule', name: 'Schedule' },
-    { id: 'search', name: 'Search' },
+    { id: 'search', name: 'Import Products' },
+    { id: 'emails', name: 'Emails' },
   ];
 
   useEffect(() => {
@@ -171,7 +173,7 @@ export default function StoryKeepDashboard_Shopify({
 
   const executePreFlightCheck = (category: string, product: ShopifyProduct) => {
     const hasMode = product.options.some((opt) => opt.name === 'Mode');
-    if (hasMode) {
+    if (category === 'service' || hasMode) {
       startCreateFlow(category, product);
     } else {
       setPendingImport({ category, product });
@@ -276,6 +278,12 @@ export default function StoryKeepDashboard_Shopify({
           group: { type: 'string', optional: true },
           shopifyData: { type: 'string', optional: true },
           shopifyImage: { type: 'string', optional: true, defaultValue: '{}' },
+          allowRemote: {
+            type: 'boolean',
+            optional: false,
+            defaultValue: false,
+          },
+          remoteOnly: { type: 'boolean', optional: false, defaultValue: false },
           bookingLengthMinutes: {
             type: 'number',
             optional: false,
@@ -465,15 +473,12 @@ export default function StoryKeepDashboard_Shopify({
           </div>
         )}
 
-        {activeTab === 'dashboards' && (
-          <ShopifyDashboard existingResources={resources} />
-        )}
+        {activeTab === 'dashboards' && <ShopifyDashboard />}
 
         {activeTab === 'bookings' && (
           <ShopifyDashboard_Bookings existingResources={resources} />
         )}
 
-        {/* Local Management Tabs */}
         {activeTab === 'products' && (
           <ShopifyDashboard_Products
             resources={resources}
@@ -492,12 +497,10 @@ export default function StoryKeepDashboard_Shopify({
           />
         )}
 
-        {/* Schedule Tab */}
         {activeTab === 'schedule' && (
           <ShopifyDashboard_Schedule brandConfig={brandConfig} />
         )}
 
-        {/* Catalog Discovery Tab */}
         {activeTab === 'search' && (
           <ShopifyDashboard_Search
             linkedResourceMap={linkedResourceMap}
@@ -507,6 +510,8 @@ export default function StoryKeepDashboard_Shopify({
             onEdit={handleEditFromCatalog}
           />
         )}
+
+        {activeTab === 'emails' && <ShopifyDashboard_Emails />}
       </div>
 
       {/* Shared Modals */}
@@ -652,6 +657,9 @@ export default function StoryKeepDashboard_Shopify({
                     draftResource.categorySlug || ''
                   ] || {}
                 }
+                tenantRemoteOnly={Boolean(
+                  internalBrandConfig?.scheduling?.remoteOnly
+                )}
                 isCreate={isCreateMode}
                 onClose={(saved) => {
                   setShowResourceModal(false);

package/templates/src/components/storykeep/controls/content/BeliefForm.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type KeyboardEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
@@ -125,7 +125,7 @@ export default function BeliefForm({
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       handleAddCustomValue();

package/templates/src/components/storykeep/controls/content/ManageContent.tsx

@@ -278,6 +278,7 @@ const ManageContent = ({
           fullContentMap={currentContentMap}
           categorySlug={activeResourceForm.category}
           categorySchema={knownResources[activeResourceForm.category] || {}}
+          tenantRemoteOnly={Boolean(brandConfig?.SCHEDULING?.remoteOnly)}
           onClose={async (saved: boolean) => {
             setActiveResourceForm(null);
             if (saved) await refreshData();

package/templates/src/components/storykeep/controls/content/ProductTable.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, type ChangeEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
@@ -53,7 +53,7 @@ export default function ProductTable({
     };
   }, []);
 
-  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
     setInputValue(val);
     setIsDebouncing(true);