astro-tractstack 2.3.2 → 2.3.4

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

@@ -13,13 +13,28 @@ 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_SCOPES = [
+  'https://www.googleapis.com/auth/calendar.events',
+  'https://www.googleapis.com/auth/calendar.readonly',
+] as const;
+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';
 
@@ -31,7 +46,20 @@ export default function APIConfigSection({
   const shopifyVersionConfigured = Boolean(status?.shopifyApiVersion);
   const shopifyAdminSlugConfigured = status?.shopifyAdminSlugSet;
   const shopifyWebhooksConfigured = status?.userSetupWebhooks;
-  const resendConfigured = status?.resendApiKeySet;
+  const resendConfigured = status?.hasResend;
+  const resendKeyConfigured = 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 +80,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">
@@ -236,13 +302,192 @@ export default function APIConfigSection({
               value={state.resendApiKey}
               onChange={(value) => updateField('resendApiKey', value)}
               type="password"
-              placeholder={resendConfigured ? '••••••••••••••••' : 're_...'}
+              placeholder={resendKeyConfigured ? '••••••••••••••••' : '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.'}
+              {resendKeyConfigured && ' Leave blank to keep existing key.'}
             </p>
+            <StringInput
+              label="From Email"
+              value={state.adminEmail}
+              onChange={(value) => updateField('adminEmail', value)}
+              type="email"
+              placeholder="admin@example.com"
+              required={true}
+              error={errors.adminEmail}
+            />
+            <StringInput
+              label="From Name"
+              value={state.adminEmailName}
+              onChange={(value) => updateField('adminEmailName', value)}
+              placeholder="Your Site Name"
+              required={true}
+              error={errors.adminEmailName}
+            />
+          </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 scopes:
+                    <ul className="mt-1 list-disc space-y-1 pl-4">
+                      {GOOGLE_SCOPES.map((scope) => (
+                        <li key={scope}>
+                          <code className="rounded bg-gray-100 px-1 py-0.5">
+                            {scope}
+                          </code>
+                        </li>
+                      ))}
+                    </ul>
+                  </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/brand/SiteConfigSection.tsx

@@ -58,6 +58,15 @@ export default function SiteConfigSection({
           error={errors.adminEmail}
         />
 
+        <StringInput
+          value={state.adminEmailName}
+          onChange={(value) => updateField('adminEmailName', value)}
+          label="Admin Email Name"
+          placeholder="Your Site Name"
+          required={true}
+          error={errors.adminEmailName}
+        />
+
         <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,42 +1,71 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import {
-  convertToLocalState,
+  convertToLocalState as convertAdvancedToLocalState,
   convertToBackendFormat,
   validateAdvancedConfig,
   advancedStateIntercept,
 } from '@/utils/api/advancedHelpers';
+import {
+  convertToLocalState as convertBrandToLocalState,
+  convertToBackendFormat as convertBrandToBackendFormat,
+  validateBrandConfig,
+} from '@/utils/api/brandHelpers';
 import {
   getAdvancedConfigStatus,
   saveAdvancedConfig,
 } from '@/utils/api/advancedConfig';
+import { getBrandConfig, saveBrandConfig } from '@/utils/api/brandConfig';
 import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
 import AuthConfigSection from '@/components/form/advanced/AuthConfigSection';
 import APIConfigSection from '@/components/form/advanced/APIConfigSection';
 import type {
   AdvancedConfigState,
   AdvancedConfigStatus,
+  BrandConfig,
 } from '@/types/tractstack';
 
 interface StoryKeepDashboardAdvancedProps {
+  brandConfig: BrandConfig;
   initialize?: boolean;
 }
 
 export default function StoryKeepDashboard_Advanced({
+  brandConfig,
   initialize = false,
 }: StoryKeepDashboardAdvancedProps) {
   const [status, setStatus] = useState<AdvancedConfigStatus | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string>('');
+  const hasHydratedInitialFormState = useRef(false);
+
+  const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+
+  const validateAdvancedForm = useCallback(
+    (state: AdvancedConfigState) => {
+      const advancedErrors = validateAdvancedConfig(state);
+      const brandLocal = {
+        ...convertBrandToLocalState(brandConfig),
+        adminEmail: state.adminEmail,
+        adminEmailName: state.adminEmailName,
+      };
+      const brandErrors = validateBrandConfig(brandLocal);
+      return {
+        ...advancedErrors,
+        ...(brandErrors.adminEmail && { adminEmail: brandErrors.adminEmail }),
+        ...(brandErrors.adminEmailName && {
+          adminEmailName: brandErrors.adminEmailName,
+        }),
+      };
+    },
+    [brandConfig]
+  );
 
-  // Load status on mount
   useEffect(() => {
     async function loadStatus() {
       try {
         setIsLoading(true);
-        const statusData = await getAdvancedConfigStatus(
-          window.TRACTSTACK_CONFIG?.tenantId || 'default'
-        );
+        const statusData = await getAdvancedConfigStatus(tenantId);
         setStatus(statusData);
       } catch (err) {
         setError(
@@ -49,27 +78,31 @@ export default function StoryKeepDashboard_Advanced({
       }
     }
     loadStatus();
-  }, []);
+  }, [tenantId]);
 
   const formState = useFormState<AdvancedConfigState>({
-    initialData: convertToLocalState(status),
-    validator: validateAdvancedConfig,
+    initialData: convertAdvancedToLocalState(status),
+    validator: validateAdvancedForm,
     interceptor: advancedStateIntercept,
     onSave: async (state: AdvancedConfigState) => {
       const backendPayload = convertToBackendFormat(state);
-      await saveAdvancedConfig(
-        window.TRACTSTACK_CONFIG?.tenantId || 'default',
-        backendPayload
-      );
-
-      // Reload status after save
-      const newStatus = await getAdvancedConfigStatus(
-        window.TRACTSTACK_CONFIG?.tenantId || 'default'
-      );
+      await saveAdvancedConfig(tenantId, backendPayload);
+
+      const brandConfigFresh = await getBrandConfig(tenantId);
+      const brandLocal = convertBrandToLocalState(brandConfigFresh);
+      brandLocal.adminEmail = state.adminEmail.trim();
+      brandLocal.adminEmailName = state.adminEmailName.trim();
+      await saveBrandConfig(tenantId, convertBrandToBackendFormat(brandLocal));
+
+      const newStatus = await getAdvancedConfigStatus(tenantId);
       setStatus(newStatus);
 
-      // Reset form to new state (clears password fields and isDirty)
-      const newState = convertToLocalState(newStatus);
+      const brandLocalHydrate = convertBrandToLocalState(brandConfigFresh);
+      const newState = {
+        ...convertAdvancedToLocalState(newStatus),
+        adminEmail: brandLocalHydrate.adminEmail,
+        adminEmailName: brandLocalHydrate.adminEmailName,
+      };
       formState.resetToState(newState);
 
       window.location.reload();
@@ -77,6 +110,19 @@ export default function StoryKeepDashboard_Advanced({
     },
   });
 
+  useEffect(() => {
+    if (!status || hasHydratedInitialFormState.current) {
+      return;
+    }
+    const brandLocal = convertBrandToLocalState(brandConfig);
+    formState.resetToState({
+      ...convertAdvancedToLocalState(status),
+      adminEmail: brandLocal.adminEmail,
+      adminEmailName: brandLocal.adminEmailName,
+    });
+    hasHydratedInitialFormState.current = true;
+  }, [status, formState, brandConfig]);
+
   if (isLoading) {
     return (
       <div className="flex justify-center py-12">
@@ -93,7 +139,6 @@ export default function StoryKeepDashboard_Advanced({
     );
   }
 
-  // Database status component
   const DatabaseStatusSection = () => {
     const databaseType = status?.tursoEnabled
       ? 'Turso Cloud Database'