stage2-2 and docs

frontend/src/pages/Sites/Builder/steps/BusinessDetailsStep.tsx

@@ -1,363 +1,151 @@
-import { useMemo, useRef, useState } from "react";
-import type {
-  BuilderFormData,
-  SiteBuilderMetadata,
-} from "../../../../types/siteBuilder";
-import { Card } from "../../../../components/ui/card";
-import { useSiteStore } from "../../../../store/siteStore";
-import { Dropdown } from "../../../../components/ui/dropdown/Dropdown";
-import { Check } from "lucide-react";
+/**
+ * Step 1: Business Details
+ * Site type selection, hosting detection, brand inputs
+ */
+import { useState, useEffect } from 'react';
+import { useBuilderWorkflowStore } from '../../../../store/builderWorkflowStore';
+import { fetchSiteBlueprintById, updateSiteBlueprint, SiteBlueprint } from '../../../../services/api';
+import { Card, CardDescription, CardTitle } from '../../../../components/ui/card';
+import Button from '../../../../components/ui/button/Button';
+import Input from '../../../../components/ui/input/Input';
+import Alert from '../../../../components/ui/alert/Alert';
+import { Loader2 } from 'lucide-react';
 
-const inputClass =
-  "h-11 w-full rounded-xl border border-gray-200 bg-white px-4 text-sm font-medium text-gray-900 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-white/10 dark:bg-white/[0.03] dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800";
-
-const labelClass =
-  "text-sm font-semibold text-gray-700 dark:text-white/80 mb-2 inline-block";
-
-interface Props {
-  data: BuilderFormData;
-  metadata?: SiteBuilderMetadata;
-  selectedSectors: Array<{ id: number; name: string }>;
-  onChange: <K extends keyof BuilderFormData>(
-    key: K,
-    value: BuilderFormData[K],
-  ) => void;
+interface BusinessDetailsStepProps {
+  blueprintId: number;
 }
 
-export function BusinessDetailsStep({
-  data,
-  metadata,
-  selectedSectors,
-  onChange,
-}: Props) {
-  const { activeSite } = useSiteStore();
-  const [businessDropdownOpen, setBusinessDropdownOpen] = useState(false);
-  const businessButtonRef = useRef<HTMLButtonElement>(null);
-  const [audienceDropdownOpen, setAudienceDropdownOpen] = useState(false);
-  const audienceButtonRef = useRef<HTMLButtonElement>(null);
+export default function BusinessDetailsStep({ blueprintId }: BusinessDetailsStepProps) {
+  const { context, completeStep, loading } = useBuilderWorkflowStore();
+  const [blueprint, setBlueprint] = useState<SiteBlueprint | null>(null);
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    hosting_type: 'igny8_sites' as const,
+    business_type: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const businessOptions = metadata?.business_types ?? [];
-  const audienceOptions = metadata?.audience_profiles ?? [];
+  useEffect(() => {
+    // Load blueprint data
+    fetchSiteBlueprintById(blueprintId)
+      .then(setBlueprint)
+      .catch(err => setError(err.message));
+  }, [blueprintId]);
 
-  const selectedBusinessType = businessOptions.find(
-    (option) => option.id === data.businessTypeId,
-  );
-
-  const selectedAudienceOptions = useMemo(
-    () =>
-      audienceOptions.filter((option) =>
-        data.targetAudienceIds.includes(option.id),
-      ),
-    [audienceOptions, data.targetAudienceIds],
-  );
-
-  const computeAudienceSummary = (
-    ids: number[],
-    custom?: string,
-  ): string => {
-    const names = audienceOptions
-      .filter((option) => ids.includes(option.id))
-      .map((option) => option.name);
-    if (custom?.trim()) {
-      names.push(custom.trim());
+  useEffect(() => {
+    if (blueprint) {
+      setFormData({
+        name: blueprint.name || '',
+        description: blueprint.description || '',
+        hosting_type: (blueprint.hosting_type as any) || 'igny8_sites',
+        business_type: blueprint.config_json?.business_type || '',
+      });
+    }
+  }, [blueprint]);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setError(null);
+    try {
+      const updated = await updateSiteBlueprint(blueprintId, {
+        name: formData.name,
+        description: formData.description,
+        hosting_type: formData.hosting_type,
+        config_json: {
+          ...blueprint?.config_json,
+          business_type: formData.business_type,
+        },
+      });
+      setBlueprint(updated);
+      
+      // Mark step as complete
+      await completeStep('business_details', {
+        blueprint_name: formData.name,
+        hosting_type: formData.hosting_type,
+      });
+    } catch (err: any) {
+      setError(err.message || 'Failed to save business details');
+    } finally {
+      setSaving(false);
     }
-    return names.join(", ");
   };
 
-  const toggleAudience = (audienceId: number) => {
-    const isSelected = data.targetAudienceIds.includes(audienceId);
-    const next = isSelected
-      ? data.targetAudienceIds.filter((id) => id !== audienceId)
-      : [...data.targetAudienceIds, audienceId];
-    onChange("targetAudienceIds", next);
-    onChange("targetAudience", computeAudienceSummary(next, data.customTargetAudience));
-  };
-
-  const handleCustomAudienceChange = (value: string) => {
-    onChange("customTargetAudience", value);
-    onChange("targetAudience", computeAudienceSummary(data.targetAudienceIds, value));
-  };
-
-  const handleCustomBusinessTypeChange = (value: string) => {
-    onChange("customBusinessType", value);
-    onChange("businessTypeId", null);
-    onChange("businessType", value);
-  };
+  const canProceed = formData.name.trim().length > 0;
 
   return (
-    <div className="space-y-6">
-      <Card variant="panel" padding="lg">
-        <div className="flex flex-col gap-2">
-          <p className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-white/50">
-            Context
-          </p>
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Site &amp; sectors
-          </h3>
-          <p className="text-sm text-gray-500 dark:text-gray-400">
-            IGNY8 will generate a blueprint for every sector configured on this site.
-          </p>
-        </div>
-        <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-          <div className="rounded-2xl border border-brand-100 bg-brand-50/60 p-4 dark:border-brand-500/40 dark:bg-brand-500/10">
-            <p className="text-xs uppercase tracking-wide text-brand-600 dark:text-brand-300">
-              Active site
-            </p>
-            <p className="text-base font-semibold text-brand-700 dark:text-brand-200">
-              {activeSite?.name ?? "No site selected"}
-            </p>
-          </div>
-          <div className="rounded-2xl border border-indigo-100 bg-indigo-50/60 p-4 dark:border-indigo-500/40 dark:bg-indigo-500/10">
-            <p className="text-xs uppercase tracking-wide text-indigo-600 dark:text-indigo-300">
-              Included sectors
-            </p>
-            {selectedSectors.length > 0 ? (
-              <div className="flex flex-wrap gap-2 pt-2">
-                {selectedSectors.map((sector) => (
-                  <span
-                    key={sector.id}
-                    className="inline-flex items-center rounded-full bg-white px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-100"
-                  >
-                    {sector.name}
-                  </span>
-                ))}
-              </div>
-            ) : (
-              <p className="text-sm font-semibold text-indigo-700 dark:text-indigo-200">
-                No sectors configured for this site
-              </p>
-            )}
-          </div>
-        </div>
-      </Card>
+    <Card className="p-6">
+      <CardTitle>Business Details</CardTitle>
+      <CardDescription>
+        Tell us about your business and site type to get started.
+      </CardDescription>
 
-      <Card variant="surface" padding="lg">
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-          <div>
-            <label className={labelClass}>Site name</label>
-            <input
-              className={inputClass}
-              type="text"
-              value={data.siteName}
-              placeholder="Acme Robotics"
-              onChange={(event) => onChange("siteName", event.target.value)}
-            />
-          </div>
-          <div>
-            <label className={labelClass}>Hosting preference</label>
-            <select
-              className={inputClass}
-              value={data.hostingType}
-              onChange={(event) =>
-                onChange(
-                  "hostingType",
-                  event.target.value as BuilderFormData["hostingType"],
-                )
-              }
-            >
-              <option value="igny8_sites">IGNY8 Sites</option>
-              <option value="wordpress">WordPress</option>
-              <option value="shopify">Shopify</option>
-              <option value="multi">Multiple destinations</option>
-            </select>
-          </div>
-        </div>
+      {error && (
+        <Alert variant="error" className="mt-4">
+          {error}
+        </Alert>
+      )}
 
-        <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
-          <div>
-            <label className={labelClass}>Business type</label>
-            <button
-              ref={businessButtonRef}
-              type="button"
-              onClick={() => setBusinessDropdownOpen((open) => !open)}
-              className="dropdown-toggle flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-900 transition hover:border-brand-200 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/90"
-            >
-              <span>
-                {selectedBusinessType?.name ||
-                  "Select a business type from the library"}
-              </span>
-              <svg
-                className="h-4 w-4 text-gray-500 dark:text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <Dropdown
-              isOpen={businessDropdownOpen}
-              onClose={() => setBusinessDropdownOpen(false)}
-              anchorRef={businessButtonRef}
-              placement="bottom-left"
-              className="w-72 max-h-72 overflow-y-auto p-2"
-            >
-              {businessOptions.length === 0 ? (
-                <div className="px-3 py-2 text-sm text-gray-500">
-                  No business types defined yet.
-                </div>
-              ) : (
-                businessOptions.map((option) => {
-                  const isSelected = option.id === data.businessTypeId;
-                  return (
-                    <button
-                      key={option.id}
-                      type="button"
-                      onClick={() => {
-                        onChange("businessTypeId", option.id);
-                        onChange("businessType", option.name);
-                        onChange("customBusinessType", "");
-                        setBusinessDropdownOpen(false);
-                      }}
-                      className={`flex w-full items-start gap-3 rounded-xl px-3 py-2 text-left text-sm ${
-                        isSelected
-                          ? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-100"
-                          : "text-gray-700 hover:bg-gray-100 dark:text-white/80 dark:hover:bg-white/10"
-                      }`}
-                    >
-                      <span className="flex-1">
-                        <span className="font-semibold">{option.name}</span>
-                        {option.description && (
-                          <span className="block text-xs text-gray-500 dark:text-gray-400">
-                            {option.description}
-                          </span>
-                        )}
-                      </span>
-                      {isSelected && <Check className="h-4 w-4" />}
-                    </button>
-                  );
-                })
-              )}
-            </Dropdown>
-            <input
-              className={`${inputClass} mt-3`}
-              type="text"
-              value={data.customBusinessType ?? ""}
-              placeholder="Or describe a custom business model"
-              onChange={(event) =>
-                handleCustomBusinessTypeChange(event.target.value)
-              }
-            />
-          </div>
-          <div>
-            <label className={labelClass}>Industry (from site settings)</label>
-            <div className="flex h-11 items-center rounded-xl border border-gray-100 bg-gray-50 px-4 text-sm font-semibold text-gray-700 dark:border-white/10 dark:bg-white/[0.05] dark:text-white/80">
-              {data.industry || "No industry selected"}
-            </div>
-          </div>
-        </div>
-      </Card>
-
-      <Card variant="surface" padding="lg">
-        <div className="space-y-4">
-          <div>
-            <label className={labelClass}>Target audience</label>
-            <p className="text-xs text-gray-500 dark:text-gray-400">
-              Choose one or more audience profiles from the IGNY8 library. Add your own if needed.
-            </p>
-          </div>
-          <div>
-            <button
-              ref={audienceButtonRef}
-              type="button"
-              onClick={() => setAudienceDropdownOpen((open) => !open)}
-              className="dropdown-toggle flex w-full items-center justify-between rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-900 transition hover:border-brand-200 dark:border-white/10 dark:bg-white/[0.02] dark:text-white/90"
-            >
-              <span>
-                {selectedAudienceOptions.length > 0
-                  ? `${selectedAudienceOptions.length} audience${
-                      selectedAudienceOptions.length > 1 ? "s" : ""
-                    } selected`
-                  : "Select audiences to focus the messaging"}
-              </span>
-              <svg
-                className="h-4 w-4 text-gray-500 dark:text-gray-400"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <Dropdown
-              isOpen={audienceDropdownOpen}
-              onClose={() => setAudienceDropdownOpen(false)}
-              anchorRef={audienceButtonRef}
-              placement="bottom-left"
-              className="w-80 max-h-80 overflow-y-auto p-2"
-            >
-              {audienceOptions.length === 0 ? (
-                <div className="px-3 py-2 text-sm text-gray-500">
-                  No audience profiles defined yet.
-                </div>
-              ) : (
-                audienceOptions.map((option) => {
-                  const isSelected = data.targetAudienceIds.includes(option.id);
-                  return (
-                    <button
-                      key={option.id}
-                      type="button"
-                      onClick={() => toggleAudience(option.id)}
-                      className={`flex w-full items-start gap-3 rounded-xl px-3 py-2 text-left text-sm ${
-                        isSelected
-                          ? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-100"
-                          : "text-gray-700 hover:bg-gray-100 dark:text-white/80 dark:hover:bg-white/10"
-                      }`}
-                    >
-                      <span className="flex-1">
-                        <span className="font-semibold">{option.name}</span>
-                        {option.description && (
-                          <span className="block text-xs text-gray-500 dark:text-gray-400">
-                            {option.description}
-                          </span>
-                        )}
-                      </span>
-                      {isSelected && <Check className="h-4 w-4" />}
-                    </button>
-                  );
-                })
-              )}
-            </Dropdown>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {selectedAudienceOptions.map((option) => (
-              <span
-                key={option.id}
-                className="inline-flex items-center gap-2 rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700 dark:bg-brand-500/10 dark:text-brand-100"
-              >
-                {option.name}
-                <button
-                  type="button"
-                  className="text-brand-600 hover:text-brand-800 dark:text-brand-200 dark:hover:text-brand-50"
-                  onClick={() => toggleAudience(option.id)}
-                  aria-label={`Remove ${option.name}`}
-                >
-                  ×
-                </button>
-              </span>
-            ))}
-            {data.customTargetAudience?.trim() && (
-              <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-white/10 dark:text-white/80">
-                {data.customTargetAudience.trim()}
-              </span>
-            )}
-          </div>
-          <input
-            className={inputClass}
-            type="text"
-            value={data.customTargetAudience ?? ""}
-            placeholder="Add custom audience (e.g., Healthcare innovators)"
-            onChange={(event) => handleCustomAudienceChange(event.target.value)}
+      <div className="mt-6 space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">Site Name *</label>
+          <Input
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder="My Awesome Site"
+            required
           />
         </div>
-      </Card>
-    </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Description</label>
+          <textarea
+            value={formData.description}
+            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            className="w-full px-3 py-2 border rounded-md"
+            rows={3}
+            placeholder="Brief description of your site..."
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-2">Hosting Type</label>
+          <select
+            value={formData.hosting_type}
+            onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value as any })}
+            className="w-full px-3 py-2 border rounded-md"
+          >
+            <option value="igny8_sites">IGNY8 Sites</option>
+            <option value="wordpress">WordPress</option>
+            <option value="shopify">Shopify</option>
+            <option value="multi">Multiple Destinations</option>
+          </select>
+        </div>
+      </div>
+
+      <div className="mt-6 flex justify-end">
+        <Button
+          onClick={handleSave}
+          disabled={!canProceed || saving || loading}
+          variant="primary"
+        >
+          {saving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Saving...
+            </>
+          ) : (
+            'Save & Continue'
+          )}
+        </Button>
+      </div>
+
+      {!canProceed && (
+        <Alert variant="warning" className="mt-4">
+          Please provide a site name to continue.
+        </Alert>
+      )}
+    </Card>
   );
 }
-