astro-tractstack 2.3.2 → 2.3.3

package/templates/custom/shopify/cart.astro

@@ -18,6 +18,12 @@ const resources = await getHeaderResources(tenantId, resourceCategories);
 
 <Layout title="Your Cart" slug="cart">
   <main class="mx-auto max-w-7xl px-4 py-16 md:px-6 xl:px-8">
-    <Cart resources={resources} embedded={true} client:only="react" />
+    <Cart
+      resources={resources}
+      allowRemote={brandConfig?.SCHEDULING?.allowRemote || false}
+      remoteOnly={brandConfig?.SCHEDULING?.remoteOnly || false}
+      embedded={true}
+      client:only="react"
+    />
   </main>
 </Layout>

package/templates/src/components/Header.astro

@@ -82,7 +82,9 @@ if (hasShopify) {
           <CheckoutModal
             client:only="react"
             resources={shopifyResources}
-            maxLength={brandConfig?.scheduling?.maxLengthMinutes || 180}
+            maxLength={brandConfig?.SCHEDULING?.maxLengthMinutes || 180}
+            allowRemote={brandConfig?.SCHEDULING?.allowRemote || false}
+            remoteOnly={brandConfig?.SCHEDULING?.remoteOnly || false}
           />
         )}
       </>

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">
@@ -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>
 

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

@@ -278,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,
@@ -651,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/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/ResourceForm.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import { convertToLocalState } from '@/utils/api/resourceHelpers';
 import { saveResourceWithStateUpdate } from '@/utils/api/resourceConfig';
@@ -26,6 +27,7 @@ interface ResourceFormProps {
   fullContentMap: FullContentMapItem[];
   categorySlug: string;
   categorySchema: Record<string, FieldDefinition>;
+  tenantRemoteOnly?: boolean;
   isCreate?: boolean;
   onClose?: (saved: boolean) => void;
 }
@@ -35,6 +37,7 @@ export default function ResourceForm({
   fullContentMap,
   categorySlug,
   categorySchema,
+  tenantRemoteOnly = false,
   isCreate = false,
   onClose,
 }: ResourceFormProps) {
@@ -184,6 +187,31 @@ export default function ResourceForm({
   });
 
   const { state, updateField, errors } = formState;
+  const isServiceCategory = categorySlug === 'service';
+  const serviceRemoteOnly = Boolean(state.optionsPayload?.remoteOnly);
+  const effectiveServiceRemoteOnly = tenantRemoteOnly || serviceRemoteOnly;
+
+  useEffect(() => {
+    if (!isServiceCategory) return;
+    if (!effectiveServiceRemoteOnly) return;
+
+    const nextPayload = {
+      ...state.optionsPayload,
+      allowRemote: true,
+      remoteOnly: true,
+    };
+    const needsUpdate =
+      state.optionsPayload?.allowRemote !== true ||
+      state.optionsPayload?.remoteOnly !== true;
+    if (needsUpdate) {
+      updateField('optionsPayload', nextPayload);
+    }
+  }, [
+    effectiveServiceRemoteOnly,
+    isServiceCategory,
+    state.optionsPayload,
+    updateField,
+  ]);
 
   // Helper to get category reference options for a field
   const getCategoryReferenceOptions = (belongsToCategory: string) => {
@@ -213,6 +241,13 @@ export default function ResourceForm({
   };
 
   const renderDynamicField = (fieldName: string, fieldDef: FieldDefinition) => {
+    if (
+      !isServiceCategory &&
+      (fieldName === 'allowRemote' || fieldName === 'remoteOnly')
+    ) {
+      return null;
+    }
+
     if (
       resourceFormHideFields.includes(fieldName)
       // && initialData.optionsPayload?.[fieldName]
@@ -322,6 +357,51 @@ export default function ResourceForm({
         );
 
       case 'boolean':
+        if (isServiceCategory && fieldName === 'allowRemote') {
+          const locked = effectiveServiceRemoteOnly;
+          return (
+            <BooleanToggle
+              key={fieldName}
+              label="Allow Remote"
+              value={locked ? true : Boolean(fieldValue)}
+              onChange={(value) =>
+                updateOptionsField(fieldName, locked ? true : Boolean(value))
+              }
+              error={fieldError}
+              disabled={locked}
+              description={
+                locked
+                  ? 'Locked to true because remoteOnly is enabled at tenant or service scope.'
+                  : undefined
+              }
+            />
+          );
+        }
+        if (isServiceCategory && fieldName === 'remoteOnly') {
+          const locked = tenantRemoteOnly;
+          return (
+            <BooleanToggle
+              key={fieldName}
+              label="Remote Only"
+              value={locked ? true : Boolean(fieldValue)}
+              onChange={(value) => {
+                const next = Boolean(value);
+                updateOptionsField(fieldName, locked ? true : next);
+                if (next || locked) {
+                  updateOptionsField('allowRemote', true);
+                }
+              }}
+              error={fieldError}
+              disabled={locked}
+              description={
+                locked
+                  ? 'Locked to true because tenant scheduling is set to remoteOnly.'
+                  : 'When enabled, this service can only be booked remotely.'
+              }
+            />
+          );
+        }
+
         return (
           <BooleanToggle
             key={fieldName}

package/templates/src/components/storykeep/shopify/ShopifyDashboard_Bookings.tsx

@@ -118,6 +118,26 @@ export default function ShopifyDashboard_Bookings({
     }
   };
 
+  const getModeColor = (mode?: string) => {
+    if (mode === 'REMOTE') return 'bg-violet-100 text-violet-800';
+    return 'bg-slate-100 text-slate-700';
+  };
+
+  const getSyncColor = (syncStatus?: string) => {
+    switch (syncStatus) {
+      case 'SYNCED':
+      case 'DELETE_SYNCED':
+        return 'bg-green-100 text-green-800';
+      case 'FAILED':
+        return 'bg-red-100 text-red-800';
+      case 'PENDING':
+      case 'DELETE_PENDING':
+        return 'bg-amber-100 text-amber-800';
+      default:
+        return 'bg-gray-100 text-gray-700';
+    }
+  };
+
   const todayStr = `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`;
 
   const renderCustomerInfo = (booking: BookingEntity) => {
@@ -213,15 +233,31 @@ export default function ShopifyDashboard_Bookings({
                   dayBookings.map((booking) => (
                     <div
                       key={booking.id}
-                      className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-cyan-200"
+                      className={`rounded-lg border p-4 shadow-sm transition-colors hover:border-cyan-200 ${
+                        booking.appointmentMode === 'REMOTE'
+                          ? 'border-violet-200 bg-violet-50'
+                          : 'border-gray-200 bg-white'
+                      }`}
                     >
                       <div className="flex items-start justify-between">
                         <div className="space-y-1">
-                          <span
-                            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getStatusColor(booking.status)}`}
-                          >
-                            {booking.status}
-                          </span>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getStatusColor(booking.status)}`}
+                            >
+                              {booking.status}
+                            </span>
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getModeColor(booking.appointmentMode)}`}
+                            >
+                              {booking.appointmentMode || 'IN_PERSON'}
+                            </span>
+                            <span
+                              className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-bold ${getSyncColor(booking.googleSyncStatus)}`}
+                            >
+                              {booking.googleSyncStatus || 'NOT_SYNCED'}
+                            </span>
+                          </div>
                           <div className="text-sm font-bold text-gray-900">
                             {new Date(booking.startTime).toLocaleTimeString(
                               'en-US',
@@ -273,6 +309,21 @@ export default function ShopifyDashboard_Bookings({
                             )
                             .join(', ')}
                         </div>
+                        {booking.googleMeetURL && (
+                          <a
+                            className="text-cyan-700 underline"
+                            href={booking.googleMeetURL}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            Open Meet Link
+                          </a>
+                        )}
+                        {booking.googleLastError && (
+                          <div className="text-xs font-bold text-red-700">
+                            Google sync error: {booking.googleLastError}
+                          </div>
+                        )}
                       </div>
                     </div>
                   ))
@@ -295,6 +346,9 @@ export default function ShopifyDashboard_Bookings({
                   <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                     Status
                   </th>
+                  <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
+                    Mode / Sync
+                  </th>
                   <th className="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider text-gray-500">
                     Service(s)
                   </th>
@@ -312,13 +366,13 @@ export default function ShopifyDashboard_Bookings({
               <tbody className="divide-y divide-gray-200 bg-white">
                 {isLoading ? (
                   <tr>
-                    <td colSpan={5} className="py-12 text-center">
+                    <td colSpan={6} className="py-12 text-center">
                       <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-cyan-600" />
                     </td>
                   </tr>
                 ) : bookings.length === 0 ? (
                   <tr>
-                    <td colSpan={5} className="py-12 text-center text-gray-500">
+                    <td colSpan={6} className="py-12 text-center text-gray-500">
                       No bookings found.
                     </td>
                   </tr>
@@ -334,6 +388,30 @@ export default function ShopifyDashboard_Bookings({
                           {booking.status}
                         </span>
                       </td>
+                      <td className="whitespace-nowrap px-6 py-4 text-xs">
+                        <div className="flex flex-col gap-1">
+                          <span
+                            className={`inline-flex w-fit items-center rounded-full px-2 py-0.5 font-bold ${getModeColor(booking.appointmentMode)}`}
+                          >
+                            {booking.appointmentMode || 'IN_PERSON'}
+                          </span>
+                          <span
+                            className={`inline-flex w-fit items-center rounded-full px-2 py-0.5 font-bold ${getSyncColor(booking.googleSyncStatus)}`}
+                          >
+                            {booking.googleSyncStatus || 'NOT_SYNCED'}
+                          </span>
+                          {booking.googleMeetURL && (
+                            <a
+                              className="text-cyan-700 underline"
+                              href={booking.googleMeetURL}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              Meet link
+                            </a>
+                          )}
+                        </div>
+                      </td>
                       <td className="px-6 py-4 text-sm text-gray-900">
                         {booking.resourceIds
                           .map((id) => resourceMap.get(id) || 'Unknown Service')

package/templates/src/constants.ts

@@ -7,6 +7,8 @@ export const MAX_ANALYTICS_HOURS = 672;
 
 export const reservedSlugs = [
   `api`,
+  `privacy`,
+  `terms`,
   `collections`,
   `create`,
   `edit`,