astro-tractstack 2.2.10 → 2.3.1

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

@@ -0,0 +1,354 @@
+import { useState } from 'react';
+import type { BrandConfigState, TimeBlock } from '@/types/tractstack';
+import type { FormStateReturn } from '@/hooks/useFormState';
+
+interface SchedulingSectionProps {
+  formState: FormStateReturn<BrandConfigState>;
+}
+
+const DAYS = [
+  'monday',
+  'tuesday',
+  'wednesday',
+  'thursday',
+  'friday',
+  'saturday',
+  'sunday',
+];
+
+const TIMEZONE_OPTIONS = [
+  {
+    group: 'North America (Canada & US)',
+    zones: [
+      { label: 'Pacific Time (Vancouver / BC)', value: 'America/Vancouver' },
+      {
+        label: 'Pacific Time (Los Angeles / Seattle)',
+        value: 'America/Los_Angeles',
+      },
+      {
+        label: 'Mountain Time (Edmonton / Calgary)',
+        value: 'America/Edmonton',
+      },
+      { label: 'Mountain Time (Denver / Salt Lake)', value: 'America/Denver' },
+      { label: 'Mountain Time - No DST (Phoenix)', value: 'America/Phoenix' },
+      { label: 'Central Time (Winnipeg)', value: 'America/Winnipeg' },
+      { label: 'Central Time (Chicago / Dallas)', value: 'America/Chicago' },
+      { label: 'Eastern Time (Toronto / Montreal)', value: 'America/Toronto' },
+      { label: 'Eastern Time (New York / Miami)', value: 'America/New_York' },
+      { label: 'Atlantic Time (Halifax)', value: 'America/Halifax' },
+      { label: "Newfoundland Time (St. John's)", value: 'America/St_Johns' },
+      { label: 'Alaska Time (Anchorage)', value: 'America/Anchorage' },
+      { label: 'Hawaii Time (Honolulu)', value: 'Pacific/Honolulu' },
+    ],
+  },
+  {
+    group: 'Latin America',
+    zones: [
+      { label: 'Mexico City', value: 'America/Mexico_City' },
+      { label: 'Bogota / Lima', value: 'America/Bogota' },
+      { label: 'São Paulo', value: 'America/Sao_Paulo' },
+    ],
+  },
+  {
+    group: 'Europe & Africa',
+    zones: [
+      { label: 'London / Dublin', value: 'Europe/London' },
+      { label: 'Paris / Berlin / Rome', value: 'Europe/Paris' },
+      { label: 'Athens / Cairo', value: 'Europe/Athens' },
+      { label: 'Lagos', value: 'Africa/Lagos' },
+      { label: 'Johannesburg', value: 'Africa/Johannesburg' },
+    ],
+  },
+  {
+    group: 'Asia & Oceania',
+    zones: [
+      { label: 'Dubai', value: 'Asia/Dubai' },
+      { label: 'Singapore / HK', value: 'Asia/Singapore' },
+      { label: 'Tokyo', value: 'Asia/Tokyo' },
+      { label: 'Sydney / Melbourne', value: 'Australia/Sydney' },
+      { label: 'Auckland', value: 'Pacific/Auckland' },
+    ],
+  },
+  { label: 'UTC / GMT', value: 'UTC' },
+];
+
+function getUtcFromWallTime(wallTimeIso: string, timeZone: string): string {
+  const [datePart, timePart] = wallTimeIso.split('T');
+  const [year, month, day] = datePart.split('-').map(Number);
+  const [hour, minute] = timePart.split(':').map(Number);
+
+  const pad = (n: number) => n.toString().padStart(2, '0');
+  const pseudoUtc = new Date(
+    `${year}-${pad(month)}-${pad(day)}T${pad(hour)}:${pad(minute)}:00Z`
+  );
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const parts = formatter.formatToParts(pseudoUtc);
+  const getPart = (type: string) => parts.find((p) => p.type === type)?.value;
+
+  const tzDate = new Date(
+    `${getPart('year')}-${getPart('month')}-${getPart('day')}T${getPart('hour')}:${getPart('minute')}:00Z`
+  );
+  const diff = pseudoUtc.getTime() - tzDate.getTime();
+
+  return new Date(pseudoUtc.getTime() + diff).toISOString();
+}
+
+export default function SchedulingSection({
+  formState,
+}: SchedulingSectionProps) {
+  const { state, updateField } = formState;
+  const config = state.scheduling;
+  const [newBlock, setNewBlock] = useState<TimeBlock>({ start: '', end: '' });
+
+  const updateHours = (day: string, field: keyof TimeBlock, value: string) => {
+    const updatedHours = { ...config.businessHours };
+    if (!updatedHours[day]) {
+      updatedHours[day] = { start: '09:00', end: '17:00' };
+    }
+    updatedHours[day] = { ...updatedHours[day], [field]: value };
+    updateField('scheduling', { ...config, businessHours: updatedHours });
+  };
+
+  const toggleDay = (day: string) => {
+    const updatedHours = { ...config.businessHours };
+    if (updatedHours[day]) {
+      delete updatedHours[day];
+    } else {
+      updatedHours[day] = { start: '09:00', end: '17:00' };
+    }
+    updateField('scheduling', { ...config, businessHours: updatedHours });
+  };
+
+  const addUnavailableBlock = () => {
+    if (!newBlock.start || !newBlock.end) return;
+
+    const startUtc = getUtcFromWallTime(newBlock.start, config.timezone);
+    const endUtc = getUtcFromWallTime(newBlock.end, config.timezone);
+
+    const updated = [
+      ...config.unavailableHours,
+      { start: startUtc, end: endUtc },
+    ];
+    updateField('scheduling', { ...config, unavailableHours: updated });
+    setNewBlock({ start: '', end: '' });
+  };
+
+  const removeUnavailableBlock = (index: number) => {
+    const updated = config.unavailableHours.filter((_, i) => i !== index);
+    updateField('scheduling', { ...config, unavailableHours: updated });
+  };
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <h3 className="mb-6 text-xl font-extrabold text-gray-900">
+        Shopify Store
+      </h3>
+      <div className="space-y-10 divide-y divide-gray-100">
+        <div className="pt-2">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-6 xl:grid-cols-12">
+            <div className="md:col-span-3 xl:col-span-4">
+              <label className="block text-xs font-black uppercase tracking-widest text-gray-500">
+                Store Timezone
+              </label>
+              <select
+                value={config.timezone}
+                onChange={(e) =>
+                  updateField('scheduling', {
+                    ...config,
+                    timezone: e.target.value,
+                  })
+                }
+                className="mt-2 block w-full rounded-md border-gray-300 bg-white px-2 py-3 focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
+              >
+                {TIMEZONE_OPTIONS.map((opt) =>
+                  opt.group ? (
+                    <optgroup key={opt.group} label={opt.group}>
+                      {opt.zones.map((z) => (
+                        <option key={z.value} value={z.value}>
+                          {z.label}
+                        </option>
+                      ))}
+                    </optgroup>
+                  ) : (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  )
+                )}
+              </select>
+              <p className="mt-1 text-xs font-bold uppercase text-gray-400">
+                Stored: {config.timezone}
+              </p>
+            </div>
+            <div className="md:col-span-3 xl:col-span-4">
+              <label className="block text-xs font-black uppercase tracking-widest text-gray-500">
+                Buffer Gap (Minutes)
+              </label>
+              <input
+                type="number"
+                value={config.bufferGapsMinutes}
+                onChange={(e) =>
+                  updateField('scheduling', {
+                    ...config,
+                    bufferGapsMinutes: parseInt(e.target.value) || 0,
+                  })
+                }
+                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">
+                Max Duration (Minutes)
+              </label>
+              <input
+                type="number"
+                value={config.maxLengthMinutes}
+                onChange={(e) =>
+                  updateField('scheduling', {
+                    ...config,
+                    maxLengthMinutes: parseInt(e.target.value) || 0,
+                  })
+                }
+                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>
+        </div>
+
+        <div className="pt-10">
+          <h4 className="text-sm font-black uppercase tracking-widest text-gray-400">
+            Weekly Business Hours
+          </h4>
+          <div className="mt-6 space-y-6">
+            {DAYS.map((day) => (
+              <div
+                key={day}
+                className="flex flex-wrap items-center gap-4 md:flex-nowrap"
+              >
+                <div className="w-24 text-sm font-bold capitalize text-gray-900 md:w-32">
+                  {day}
+                </div>
+                <button
+                  type="button"
+                  onClick={() => toggleDay(day)}
+                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-700 focus:ring-offset-2 ${config.businessHours[day] ? 'bg-cyan-600' : 'bg-gray-200'}`}
+                >
+                  <span
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${config.businessHours[day] ? 'translate-x-5' : 'translate-x-0'}`}
+                  />
+                </button>
+                {config.businessHours[day] && (
+                  <div className="flex items-center space-x-3">
+                    <input
+                      type="time"
+                      value={config.businessHours[day].start}
+                      onChange={(e) =>
+                        updateHours(day, 'start', e.target.value)
+                      }
+                      className="rounded-md border-gray-300 px-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
+                    />
+                    <span className="text-xs font-bold text-gray-400">TO</span>
+                    <input
+                      type="time"
+                      value={config.businessHours[day].end}
+                      onChange={(e) => updateHours(day, 'end', e.target.value)}
+                      className="rounded-md border-gray-300 px-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pt-10">
+          <h4 className="text-sm font-black uppercase tracking-widest text-gray-400">
+            Blackout Dates
+          </h4>
+          <div className="mt-6 space-y-6">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-4">
+              <input
+                type="datetime-local"
+                value={newBlock.start}
+                onChange={(e) =>
+                  setNewBlock({ ...newBlock, start: e.target.value })
+                }
+                className="rounded-md border-gray-300 px-2 py-3 focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
+              />
+              <input
+                type="datetime-local"
+                value={newBlock.end}
+                onChange={(e) =>
+                  setNewBlock({ ...newBlock, end: e.target.value })
+                }
+                className="rounded-md border-gray-300 px-2 py-3 focus:border-cyan-700 focus:ring-cyan-700 md:text-sm"
+              />
+              <button
+                type="button"
+                onClick={addUnavailableBlock}
+                className="inline-flex justify-center rounded-md border border-transparent bg-cyan-600 px-6 py-3 text-sm font-black uppercase tracking-widest text-white shadow-sm hover:bg-cyan-500 md:col-span-1"
+              >
+                Add Blackout
+              </button>
+            </div>
+            <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {config.unavailableHours.map((block: TimeBlock, idx: number) => (
+                <div
+                  key={idx}
+                  className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 p-4 shadow-sm"
+                >
+                  <div className="flex flex-col">
+                    <span className="text-xs font-black uppercase text-gray-400">
+                      Closed Period
+                    </span>
+                    <span className="text-xs font-bold text-gray-700">
+                      {new Date(block.start).toLocaleString('en-US', {
+                        dateStyle: 'short',
+                        timeStyle: 'short',
+                        timeZone: config.timezone,
+                      })}{' '}
+                      —{' '}
+                      {new Date(block.end).toLocaleString('en-US', {
+                        dateStyle: 'short',
+                        timeStyle: 'short',
+                        timeZone: config.timezone,
+                      })}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => removeUnavailableBlock(idx)}
+                    className="ml-4 rounded-full p-1 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                  >
+                    <svg
+                      className="h-5 w-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+          </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(() => {
@@ -135,7 +149,7 @@ export default function StoryKeepDashboard({
 
       {/* Tab Navigation */}
       <div className="border-b border-gray-200">
-        <nav className="-mb-px flex gap-x-8" aria-label="Tabs">
+        <nav className="-mb-px flex flex-wrap gap-x-8" aria-label="Tabs">
           {tabs.map((tab) => (
             <a
               key={tab.id}

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>
   );
 };