salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement Site Builder Metadata and Enhance Wizard Functionality

Browse Source 
- Introduced new models for Site Builder options, including BusinessType, AudienceProfile, BrandPersonality, and HeroImageryDirection.
- Added serializers and views to handle metadata for dropdowns in the Site Builder wizard.
- Updated the SiteBuilderWizard component to load and display metadata, improving user experience with dynamic options.
- Enhanced BusinessDetailsStep and StyleStep components to utilize new metadata for business types and brand personalities.
- Refactored state management in builderStore to include metadata loading and error handling.
- Updated API service to fetch Site Builder metadata, ensuring seamless integration with the frontend.
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-18 12:31:59 +00:00
parent 5d97ab6e49
commit 26ec2ae03e
13 changed files with 1062 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/celerybeat-schedule
View File

Binary file not shown.

159
backend/igny8_core/business/site_building/migrations/0002_sitebuilder_metadata.py Normal file
View File

@@ -0,0 +1,159 @@
from django.db import migrations, models
def seed_site_builder_metadata(apps, schema_editor):
BusinessType = apps.get_model('site_building', 'BusinessType')
AudienceProfile = apps.get_model('site_building', 'AudienceProfile')
BrandPersonality = apps.get_model('site_building', 'BrandPersonality')
HeroImageryDirection = apps.get_model('site_building', 'HeroImageryDirection')
business_types = [
("Productized Services", "Standardized service offering with clear deliverables."),
("B2B SaaS Platform", "Subscription software platform targeting business teams."),
("eCommerce Brand", "Direct-to-consumer catalog with premium merchandising."),
("Marketplace / Platform", "Two-sided marketplace connecting buyers and sellers."),
("Advisory / Consulting", "Expert advisory firm or boutique consultancy."),
("Education / Training", "Learning platform, cohort, or academy."),
("Community / Membership", "Member-driven experience with gated content."),
("Mission-Driven / Nonprofit", "Impact-focused organization or foundation."),
]
audience_profiles = [
("Enterprise Operations Leaders", "COO / Ops executives at scale-ups."),
("Marketing Directors & CMOs", "Growth and brand owners across industries."),
("Founders & Executive Teams", "Visionaries leading fast-moving companies."),
("Revenue & Sales Leaders", "CROs, VPs of Sales, and GTM owners."),
("Product & Innovation Teams", "Product managers and innovation leaders."),
("IT & Engineering Teams", "Technical buyers evaluating new platforms."),
("HR & People Leaders", "People ops and talent professionals."),
("Healthcare Administrators", "Clinical and operational healthcare leads."),
("Financial Services Professionals", "Banking, fintech, and investment teams."),
("Consumers / Prospects", "End-user or prospect-focused experience."),
]
brand_personalities = [
("Bold Visionary", "Decisive, future-forward, and thought-leading."),
("Trusted Advisor", "Calm, credible, and risk-aware guidance."),
("Analytical Expert", "Data-backed, precise, and rigorous."),
("Friendly Guide", "Welcoming, warm, and supportive tone."),
("Luxe & Premium", "High-touch, elevated, and detail-obsessed."),
("Playful Creative", "Vibrant, unexpected, and energetic."),
("Minimalist Modern", "Clean, refined, and confident."),
("Fearless Innovator", "Experimental, edgy, and fast-moving."),
]
hero_imagery = [
("Real team collaboration photography", "Documentary-style shots of real teams."),
("Product close-ups with UI overlays", "Focus on interfaces and feature highlights."),
("Lifestyle scenes featuring customers", "Story-driven photography of real scenarios."),
("Abstract gradients & motion graphics", "Modern, colorful abstract compositions."),
("Illustration + iconography blend", "Custom illustrations paired with icon systems."),
]
for order, (name, description) in enumerate(business_types):
BusinessType.objects.update_or_create(
name=name,
defaults={'description': description, 'order': order, 'is_active': True},
)
for order, (name, description) in enumerate(audience_profiles):
AudienceProfile.objects.update_or_create(
name=name,
defaults={'description': description, 'order': order, 'is_active': True},
)
for order, (name, description) in enumerate(brand_personalities):
BrandPersonality.objects.update_or_create(
name=name,
defaults={'description': description, 'order': order, 'is_active': True},
)
for order, (name, description) in enumerate(hero_imagery):
HeroImageryDirection.objects.update_or_create(
name=name,
defaults={'description': description, 'order': order, 'is_active': True},
)
class Migration(migrations.Migration):
dependencies = [
('site_building', '0001_initial'),
]
operations = [
migrations.CreateModel(
name='AudienceProfile',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('name', models.CharField(max_length=120, unique=True)),
('description', models.CharField(blank=True, max_length=255)),
('is_active', models.BooleanField(default=True)),
('order', models.PositiveIntegerField(default=0)),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
],
options={
'verbose_name': 'Audience Profile',
'verbose_name_plural': 'Audience Profiles',
'db_table': 'igny8_site_builder_audience_profiles',
'ordering': ['order', 'name'],
},
),
migrations.CreateModel(
name='BrandPersonality',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('name', models.CharField(max_length=120, unique=True)),
('description', models.CharField(blank=True, max_length=255)),
('is_active', models.BooleanField(default=True)),
('order', models.PositiveIntegerField(default=0)),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
],
options={
'verbose_name': 'Brand Personality',
'verbose_name_plural': 'Brand Personalities',
'db_table': 'igny8_site_builder_brand_personalities',
'ordering': ['order', 'name'],
},
),
migrations.CreateModel(
name='BusinessType',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('name', models.CharField(max_length=120, unique=True)),
('description', models.CharField(blank=True, max_length=255)),
('is_active', models.BooleanField(default=True)),
('order', models.PositiveIntegerField(default=0)),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
],
options={
'verbose_name': 'Business Type',
'verbose_name_plural': 'Business Types',
'db_table': 'igny8_site_builder_business_types',
'ordering': ['order', 'name'],
},
),
migrations.CreateModel(
name='HeroImageryDirection',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('name', models.CharField(max_length=120, unique=True)),
('description', models.CharField(blank=True, max_length=255)),
('is_active', models.BooleanField(default=True)),
('order', models.PositiveIntegerField(default=0)),
('created_at', models.DateTimeField(auto_now_add=True)),
('updated_at', models.DateTimeField(auto_now=True)),
],
options={
'verbose_name': 'Hero Imagery Direction',
'verbose_name_plural': 'Hero Imagery Directions',
'db_table': 'igny8_site_builder_hero_imagery',
'ordering': ['order', 'name'],
},
),
migrations.RunPython(seed_site_builder_metadata, migrations.RunPython.noop),
]

52
backend/igny8_core/business/site_building/models.py
View File

@@ -166,3 +166,55 @@ class PageBlueprint(SiteSectorBaseModel):
return f"{self.title} ({self.site_blueprint.name})"
class SiteBuilderOption(models.Model):
"""
Base model for Site Builder dropdown metadata.
"""
name = models.CharField(max_length=120, unique=True)
description = models.CharField(max_length=255, blank=True)
is_active = models.BooleanField(default=True)
order = models.PositiveIntegerField(default=0)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
class Meta:
abstract = True
ordering = ['order', 'name']
def __str__(self):
return self.name
class BusinessType(SiteBuilderOption):
class Meta(SiteBuilderOption.Meta):
app_label = 'site_building'
db_table = 'igny8_site_builder_business_types'
verbose_name = 'Business Type'
verbose_name_plural = 'Business Types'
class AudienceProfile(SiteBuilderOption):
class Meta(SiteBuilderOption.Meta):
app_label = 'site_building'
db_table = 'igny8_site_builder_audience_profiles'
verbose_name = 'Audience Profile'
verbose_name_plural = 'Audience Profiles'
class BrandPersonality(SiteBuilderOption):
class Meta(SiteBuilderOption.Meta):
app_label = 'site_building'
db_table = 'igny8_site_builder_brand_personalities'
verbose_name = 'Brand Personality'
verbose_name_plural = 'Brand Personalities'
class HeroImageryDirection(SiteBuilderOption):
class Meta(SiteBuilderOption.Meta):
app_label = 'site_building'
db_table = 'igny8_site_builder_hero_imagery'
verbose_name = 'Hero Imagery Direction'
verbose_name_plural = 'Hero Imagery Directions'

22
backend/igny8_core/modules/site_builder/serializers.py
View File

@@ -1,6 +1,13 @@
from rest_framework import serializers
from igny8_core.business.site_building.models import SiteBlueprint, PageBlueprint
from igny8_core.business.site_building.models import (
AudienceProfile,
BrandPersonality,
BusinessType,
HeroImageryDirection,
PageBlueprint,
SiteBlueprint,
)
class PageBlueprintSerializer(serializers.ModelSerializer):
@@ -76,3 +83,16 @@ class SiteBlueprintSerializer(serializers.ModelSerializer):
attrs['sector_id'] = sector_id
return attrs
class MetadataOptionSerializer(serializers.Serializer):
id = serializers.IntegerField()
name = serializers.CharField()
description = serializers.CharField(required=False, allow_blank=True)
class SiteBuilderMetadataSerializer(serializers.Serializer):
business_types = MetadataOptionSerializer(many=True)
audience_profiles = MetadataOptionSerializer(many=True)
brand_personalities = MetadataOptionSerializer(many=True)
hero_imagery_directions = MetadataOptionSerializer(many=True)

2
backend/igny8_core/modules/site_builder/urls.py
View File

@@ -5,6 +5,7 @@ from igny8_core.modules.site_builder.views import (
PageBlueprintViewSet,
SiteAssetView,
SiteBlueprintViewSet,
SiteBuilderMetadataView,
)
router = DefaultRouter()
@@ -14,5 +15,6 @@ router.register(r'pages', PageBlueprintViewSet, basename='page_blueprint')
urlpatterns = [
path('', include(router.urls)),
path('assets/', SiteAssetView.as_view(), name='site_builder_assets'),
path('metadata/', SiteBuilderMetadataView.as_view(), name='site_builder_metadata'),
]

46
backend/igny8_core/modules/site_builder/views.py
View File

@@ -9,7 +9,14 @@ from igny8_core.api.base import SiteSectorModelViewSet
from igny8_core.api.permissions import IsAuthenticatedAndActive, IsEditorOrAbove
from igny8_core.api.response import success_response, error_response
from igny8_core.api.throttles import DebugScopedRateThrottle
from igny8_core.business.site_building.models import SiteBlueprint, PageBlueprint
from igny8_core.business.site_building.models import (
AudienceProfile,
BrandPersonality,
BusinessType,
HeroImageryDirection,
PageBlueprint,
SiteBlueprint,
)
from igny8_core.business.site_building.services import (
PageGenerationService,
SiteBuilderFileService,
@@ -18,6 +25,7 @@ from igny8_core.business.site_building.services import (
from igny8_core.modules.site_builder.serializers import (
PageBlueprintSerializer,
SiteBlueprintSerializer,
SiteBuilderMetadataSerializer,
)
@@ -205,3 +213,39 @@ class SiteAssetView(APIView):
return error_response('File not found', status.HTTP_404_NOT_FOUND, request)
class SiteBuilderMetadataView(APIView):
"""
Read-only metadata for Site Builder dropdowns.
"""
permission_classes = [IsAuthenticatedAndActive, IsEditorOrAbove]
def get(self, request, *args, **kwargs):
def serialize_queryset(qs):
return [
{
'id': item.id,
'name': item.name,
'description': item.description or '',
}
for item in qs
]
data = {
'business_types': serialize_queryset(
BusinessType.objects.filter(is_active=True).order_by('order', 'name')
),
'audience_profiles': serialize_queryset(
AudienceProfile.objects.filter(is_active=True).order_by('order', 'name')
),
'brand_personalities': serialize_queryset(
BrandPersonality.objects.filter(is_active=True).order_by('order', 'name')
),
'hero_imagery_directions': serialize_queryset(
HeroImageryDirection.objects.filter(is_active=True).order_by('order', 'name')
),
}
serializer = SiteBuilderMetadataSerializer(data)
return Response(serializer.data)

10
frontend/src/components/common/SiteAndSectorSelector.tsx
View File

@@ -11,7 +11,13 @@ import { useSiteStore } from '../../store/siteStore';
import { useSectorStore } from '../../store/sectorStore';
import { useAuthStore } from '../../store/authStore';
export default function SiteAndSectorSelector() {
interface SiteAndSectorSelectorProps {
hideSectorSelector?: boolean;
}
export default function SiteAndSectorSelector({
hideSectorSelector = false,
}: SiteAndSectorSelectorProps) {
const toast = useToast();
const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
const { activeSector, sectors, setActiveSector, loading: sectorsLoading } = useSectorStore();
@@ -170,7 +176,7 @@ export default function SiteAndSectorSelector() {
</div>
{/* Sector Selector */}
{!sectorsLoading && sectors.length > 0 && (
{!hideSectorSelector && !sectorsLoading && sectors.length > 0 && (
<div className="relative inline-block">
<button
ref={sectorButtonRef}

70
frontend/src/pages/Sites/Builder/Wizard.tsx
View File

@@ -26,7 +26,7 @@ import { StyleStep } from "./steps/StyleStep";
export default function SiteBuilderWizard() {
const navigate = useNavigate();
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const { sectors } = useSectorStore();
const {
form,
currentStep,
@@ -46,18 +46,40 @@ export default function SiteBuilderWizard() {
generationProgress,
isGenerating,
syncContextFromStores,
metadata,
metadataError,
isMetadataLoading,
loadMetadata,
} = useBuilderStore();
useEffect(() => {
syncContextFromStores();
}, [activeSite?.id, activeSite?.name, activeSector?.id]);
}, [activeSite?.id, activeSite?.name]);
useEffect(() => {
loadMetadata();
}, [loadMetadata]);
const selectedSectors = useMemo(
() =>
form.sectorIds.map((id) => ({
id,
name: sectors.find((sector) => sector.id === id)?.name || `Sector #${id}`,
})),
[form.sectorIds, sectors],
);
const steps = useMemo(
() => [
{
title: "Business context",
component: (
<BusinessDetailsStep data={form} onChange={setField} />
<BusinessDetailsStep
data={form}
onChange={setField}
metadata={metadata}
selectedSectors={selectedSectors}
/>
),
},
{
@@ -79,16 +101,31 @@ export default function SiteBuilderWizard() {
component: (
<StyleStep
style={form.style}
onChange={updateStyle}
metadata={metadata}
brandPersonalityIds={form.brandPersonalityIds}
customBrandPersonality={form.customBrandPersonality}
heroImageryDirectionId={form.heroImageryDirectionId}
customHeroImageryDirection={form.customHeroImageryDirection}
onStyleChange={updateStyle}
onChange={setField}
/>
),
},
],
[form, setField, updateStyle, addObjective, removeObjective],
[
form,
metadata,
selectedSectors,
setField,
updateStyle,
addObjective,
removeObjective,
],
);
const isLastStep = currentStep === steps.length - 1;
const missingContext = !activeSite || !activeSector;
const missingContext =
!activeSite || !form.sectorIds || form.sectorIds.length === 0;
const handlePrimary = async () => {
if (isLastStep) {
@@ -123,13 +160,28 @@ export default function SiteBuilderWizard() {
</Button>
</div>
<SiteAndSectorSelector />
<SiteAndSectorSelector hideSectorSelector />
{metadataError && (
<Alert
variant="warning"
title="Metadata unavailable"
message={`${metadataError}. You can still enter custom values.`}
/>
)}
{isMetadataLoading && !metadata && (
<Alert
variant="info"
title="Loading Site Builder library"
message="Fetching business types, audiences, and style presets..."
/>
)}
{missingContext && (
<Alert
variant="warning"
title="Select site & sector"
message="Choose an active site and sector using the selector above before running the wizard."
title="Missing site configuration"
message="Choose an active site and ensure it has at least one sector configured (Sites → All Sites) before running the wizard."
/>
)}

298
frontend/src/pages/Sites/Builder/steps/BusinessDetailsStep.tsx
View File

@@ -1,7 +1,12 @@
import type { BuilderFormData } from "../../../../types/siteBuilder";
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 { useSectorStore } from "../../../../store/sectorStore";
import { Dropdown } from "../../../../components/ui/dropdown/Dropdown";
import { Check } 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";
@@ -11,15 +16,73 @@ const labelClass =
interface Props {
data: BuilderFormData;
metadata?: SiteBuilderMetadata;
selectedSectors: Array<{ id: number; name: string }>;
onChange: <K extends keyof BuilderFormData>(
key: K,
value: BuilderFormData[K],
) => void;
}
export function BusinessDetailsStep({ data, onChange }: Props) {
export function BusinessDetailsStep({
data,
metadata,
selectedSectors,
onChange,
}: Props) {
const { activeSite } = useSiteStore();
const { activeSector } = useSectorStore();
const [businessDropdownOpen, setBusinessDropdownOpen] = useState(false);
const businessButtonRef = useRef<HTMLButtonElement>(null);
const [audienceDropdownOpen, setAudienceDropdownOpen] = useState(false);
const audienceButtonRef = useRef<HTMLButtonElement>(null);
const businessOptions = metadata?.business_types ?? [];
const audienceOptions = metadata?.audience_profiles ?? [];
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());
}
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);
};
return (
<div className="space-y-6">
@@ -29,17 +92,16 @@ export function BusinessDetailsStep({ data, onChange }: Props) {
Context
</p>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Site &amp; Sector
Site &amp; sectors
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
The wizard will use your currently active site and sector. Switch
them from the header at any time.
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
Active site
</p>
<p className="text-base font-semibold text-brand-700 dark:text-brand-200">
{activeSite?.name ?? "No site selected"}
@@ -47,11 +109,24 @@ export function BusinessDetailsStep({ data, onChange }: Props) {
</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">
Active Sector
</p>
<p className="text-base font-semibold text-indigo-700 dark:text-indigo-200">
{activeSector?.name ?? "All sectors"}
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>
@@ -74,7 +149,10 @@ export function BusinessDetailsStep({ data, onChange }: Props) {
className={inputClass}
value={data.hostingType}
onChange={(event) =>
onChange("hostingType", event.target.value as BuilderFormData["hostingType"])
onChange(
"hostingType",
event.target.value as BuilderFormData["hostingType"],
)
}
>
<option value="igny8_sites">IGNY8 Sites</option>
@@ -88,34 +166,194 @@ export function BusinessDetailsStep({ data, onChange }: Props) {
<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}
className={`${inputClass} mt-3`}
type="text"
value={data.businessType}
placeholder="B2B SaaS platform"
onChange={(event) => onChange("businessType", event.target.value)}
value={data.customBusinessType ?? ""}
placeholder="Or describe a custom business model"
onChange={(event) =>
handleCustomBusinessTypeChange(event.target.value)
}
/>
</div>
<div>
<label className={labelClass}>Industry</label>
<input
className={inputClass}
type="text"
value={data.industry}
placeholder="Supply chain automation"
onChange={(event) => onChange("industry", event.target.value)}
/>
<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>
<div className="mt-6">
<label className={labelClass}>Target audience</label>
<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.targetAudience}
placeholder="Operations leaders at fast-scaling eCommerce brands"
onChange={(event) => onChange("targetAudience", event.target.value)}
value={data.customTargetAudience ?? ""}
placeholder="Add custom audience (e.g., Healthcare innovators)"
onChange={(event) => handleCustomAudienceChange(event.target.value)}
/>
</div>
</Card>

265
frontend/src/pages/Sites/Builder/steps/StyleStep.tsx
View File

@@ -1,10 +1,19 @@
import type { StylePreferences } from "../../../../types/siteBuilder";
import { useMemo, useRef, useState } from "react";
import type {
BuilderFormData,
SiteBuilderMetadata,
StylePreferences,
} from "../../../../types/siteBuilder";
import { Card } from "../../../../components/ui/card";
import { Dropdown } from "../../../../components/ui/dropdown/Dropdown";
import { Check } from "lucide-react";
const labelClass =
"text-sm font-semibold text-gray-700 dark:text-white/80 mb-2 inline-block";
const selectClass =
"h-11 w-full rounded-xl border border-gray-200 bg-white px-4 text-sm font-medium text-gray-900 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:focus:border-brand-800";
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 textareaClass =
"w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 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";
@@ -24,10 +33,53 @@ const typography = [
interface Props {
style: StylePreferences;
onChange: (partial: Partial<StylePreferences>) => void;
metadata?: SiteBuilderMetadata;
brandPersonalityIds: number[];
customBrandPersonality?: string;
heroImageryDirectionId: number | null;
customHeroImageryDirection?: string;
onStyleChange: (partial: Partial<StylePreferences>) => void;
onChange: <K extends keyof BuilderFormData>(
key: K,
value: BuilderFormData[K],
) => void;
}
export function StyleStep({ style, onChange }: Props) {
export function StyleStep({
style,
metadata,
brandPersonalityIds,
customBrandPersonality,
heroImageryDirectionId,
customHeroImageryDirection,
onStyleChange,
onChange,
}: Props) {
const brandOptions = metadata?.brand_personalities ?? [];
const heroOptions = metadata?.hero_imagery_directions ?? [];
const [heroDropdownOpen, setHeroDropdownOpen] = useState(false);
const heroButtonRef = useRef<HTMLButtonElement>(null);
const [brandDropdownOpen, setBrandDropdownOpen] = useState(false);
const brandButtonRef = useRef<HTMLButtonElement>(null);
const selectedBrandOptions = useMemo(
() => brandOptions.filter((option) => brandPersonalityIds.includes(option.id)),
[brandOptions, brandPersonalityIds],
);
const selectedHero = heroOptions.find(
(option) => option.id === heroImageryDirectionId,
);
const toggleBrand = (id: number) => {
const isSelected = brandPersonalityIds.includes(id);
const next = isSelected
? brandPersonalityIds.filter((value) => value !== id)
: [...brandPersonalityIds, id];
onChange("brandPersonalityIds", next);
};
return (
<Card variant="surface" padding="lg">
<div className="space-y-6">
@@ -39,8 +91,7 @@ export function StyleStep({ style, onChange }: Props) {
Visual direction
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
Capture the brand personality so the preview canvas mirrors the
right tone.
Capture the brand personality so the preview canvas mirrors the right tone.
</p>
</div>
@@ -50,7 +101,7 @@ export function StyleStep({ style, onChange }: Props) {
<select
className={selectClass}
value={style.palette}
onChange={(event) => onChange({ palette: event.target.value })}
onChange={(event) => onStyleChange({ palette: event.target.value })}
>
{palettes.map((option) => (
<option key={option} value={option}>
@@ -64,7 +115,9 @@ export function StyleStep({ style, onChange }: Props) {
<select
className={selectClass}
value={style.typography}
onChange={(event) => onChange({ typography: event.target.value })}
onChange={(event) =>
onStyleChange({ typography: event.target.value })
}
>
{typography.map((option) => (
<option key={option} value={option}>
@@ -75,26 +128,212 @@ export function StyleStep({ style, onChange }: Props) {
</div>
</div>
<div className="space-y-4">
<div>
<label className={labelClass}>Brand personality profiles</label>
<p className="text-xs text-gray-500 dark:text-gray-400">
Select up to three descriptors that define the brand tone.
</p>
</div>
<div>
<button
ref={brandButtonRef}
type="button"
onClick={() => setBrandDropdownOpen((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>
{brandPersonalityIds.length > 0
? `${brandPersonalityIds.length} personality${
brandPersonalityIds.length > 1 ? " descriptors" : " descriptor"
} selected`
: "Choose personalities from the IGNY8 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={brandDropdownOpen}
onClose={() => setBrandDropdownOpen(false)}
anchorRef={brandButtonRef}
placement="bottom-left"
className="w-80 max-h-80 overflow-y-auto p-2"
>
{brandOptions.length === 0 ? (
<div className="px-3 py-2 text-sm text-gray-500">
No brand personalities defined yet. Use the custom field below.
</div>
) : (
brandOptions.map((option) => {
const isSelected = brandPersonalityIds.includes(option.id);
const disabled =
!isSelected && brandPersonalityIds.length >= 3;
return (
<button
key={option.id}
type="button"
disabled={disabled}
onClick={() => toggleBrand(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 disabled:opacity-50 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">
{selectedBrandOptions.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-100 dark:hover:text-brand-50"
onClick={() => toggleBrand(option.id)}
aria-label={`Remove ${option.name}`}
>
×
</button>
</span>
))}
{customBrandPersonality?.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">
{customBrandPersonality.trim()}
</span>
)}
</div>
<input
className={inputClass}
type="text"
value={customBrandPersonality ?? ""}
placeholder="Add custom personality descriptor"
onChange={(event) =>
onChange("customBrandPersonality", event.target.value)
}
/>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<div>
<label className={labelClass}>Brand personality</label>
<label className={labelClass}>Brand personality narrative</label>
<textarea
className={textareaClass}
rows={3}
rows={4}
value={style.personality}
onChange={(event) =>
onChange({ personality: event.target.value })
onStyleChange({ personality: event.target.value })
}
/>
</div>
<div>
<label className={labelClass}>Hero imagery direction</label>
<button
ref={heroButtonRef}
type="button"
onClick={() => setHeroDropdownOpen((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>
{selectedHero?.name ||
"Select a hero imagery direction 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={heroDropdownOpen}
onClose={() => setHeroDropdownOpen(false)}
anchorRef={heroButtonRef}
placement="bottom-left"
className="w-80 max-h-72 overflow-y-auto p-2"
>
{heroOptions.length === 0 ? (
<div className="px-3 py-2 text-sm text-gray-500">
No hero imagery directions defined yet.
</div>
) : (
heroOptions.map((option) => {
const isSelected = option.id === heroImageryDirectionId;
return (
<button
key={option.id}
type="button"
onClick={() => {
onChange("heroImageryDirectionId", option.id);
onChange("customHeroImageryDirection", "");
onStyleChange({ heroImagery: option.name });
setHeroDropdownOpen(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={customHeroImageryDirection ?? ""}
placeholder="Or describe a custom hero imagery direction"
onChange={(event) => {
onChange("customHeroImageryDirection", event.target.value);
onChange("heroImageryDirectionId", null);
}}
/>
<textarea
className={textareaClass}
rows={3}
className={`${textareaClass} mt-3`}
rows={4}
value={style.heroImagery}
onChange={(event) =>
onChange({ heroImagery: event.target.value })
onStyleChange({ heroImagery: event.target.value })
}
/>
</div>

8
frontend/src/services/siteBuilder.api.ts
View File

@@ -8,6 +8,7 @@ import type {
PageBlueprint,
SiteStructure,
BuilderFormData,
SiteBuilderMetadata,
} from '../types/siteBuilder';
export interface CreateBlueprintPayload {
@@ -121,5 +122,12 @@ export const siteBuilderApi = {
// Handle unified response format
return response?.data || response;
},
/**
* Load dropdown metadata for wizard fields
*/
async getMetadata(): Promise<SiteBuilderMetadata> {
return fetchAPI('/v1/site-builder/metadata/');
},
};

203
frontend/src/store/builderStore.ts
View File

@@ -1,6 +1,5 @@
import { create } from "zustand";
import { useSiteStore } from "./siteStore";
import { useSectorStore } from "./sectorStore";
import { useSiteDefinitionStore } from "./siteDefinitionStore";
import { siteBuilderApi } from "../services/siteBuilder.api";
import type {
@@ -8,6 +7,9 @@ import type {
PageBlueprint,
SiteBlueprint,
StylePreferences,
SiteStructure,
SiteBuilderMetadata,
SiteBuilderMetadataOption,
} from "../types/siteBuilder";
const defaultStyle: StylePreferences = {
@@ -19,19 +21,26 @@ const defaultStyle: StylePreferences = {
const buildDefaultForm = (): BuilderFormData => {
const site = useSiteStore.getState().activeSite;
const sector = useSectorStore.getState().activeSector;
return {
siteId: site?.id ?? null,
sectorId: sector?.id ?? null,
sectorIds: site?.selected_sectors ?? [],
siteName: site?.name ?? "",
businessTypeId: null,
businessType: "",
industry: "",
customBusinessType: "",
industry: site?.industry_name ?? "",
targetAudienceIds: [],
targetAudience: "",
customTargetAudience: "",
hostingType: "igny8_sites",
businessBrief: "",
objectives: ["Launch a conversion-focused marketing site"],
style: defaultStyle,
brandPersonalityIds: [],
customBrandPersonality: "",
heroImageryDirectionId: null,
customHeroImageryDirection: "",
style: { ...defaultStyle },
};
};
@@ -41,6 +50,9 @@ interface BuilderState {
isSubmitting: boolean;
isGenerating: boolean;
isLoadingBlueprint: boolean;
metadata?: SiteBuilderMetadata;
isMetadataLoading: boolean;
metadataError?: string;
error?: string;
activeBlueprint?: SiteBlueprint;
pages: PageBlueprint[];
@@ -70,6 +82,7 @@ interface BuilderState {
clearPageSelection: () => void;
loadBlueprint: (blueprintId: number) => Promise<void>;
generateAllPages: (blueprintId: number, force?: boolean) => Promise<void>;
loadMetadata: () => Promise<void>;
}
export const useBuilderStore = create<BuilderState>((set, get) => ({
@@ -78,6 +91,9 @@ export const useBuilderStore = create<BuilderState>((set, get) => ({
isSubmitting: false,
isGenerating: false,
isLoadingBlueprint: false,
metadata: undefined,
isMetadataLoading: false,
metadataError: undefined,
pages: [],
selectedPageIds: [],
@@ -130,62 +146,156 @@ export const useBuilderStore = create<BuilderState>((set, get) => ({
syncContextFromStores: () => {
const site = useSiteStore.getState().activeSite;
const sector = useSectorStore.getState().activeSector;
set((state) => ({
form: {
...state.form,
siteId: site?.id ?? state.form.siteId,
siteName: site?.name ?? state.form.siteName,
sectorId: sector?.id ?? state.form.sectorId,
sectorIds: site?.selected_sectors ?? state.form.sectorIds,
industry: site?.industry_name ?? state.form.industry,
},
}));
},
submitWizard: async () => {
const { form } = get();
if (!form.siteId || !form.sectorId) {
const { form, metadata } = get();
if (!form.siteId) {
set({
error: "Select an active site before running the Site Builder wizard.",
});
return;
}
if (!form.sectorIds?.length) {
set({
error:
"Select an active site and sector before running the Site Builder wizard.",
"This site has no sectors configured. Add sectors in Sites → All Sites before running the wizard.",
});
return;
}
set({ isSubmitting: true, error: undefined });
const findOptionName = (
options: SiteBuilderMetadataOption[] | undefined,
id: number | null | undefined,
) => options?.find((option) => option.id === id)?.name;
const businessTypeName =
findOptionName(metadata?.business_types, form.businessTypeId) ||
form.customBusinessType?.trim() ||
form.businessType ||
"General business";
const selectedAudienceOptions =
metadata?.audience_profiles?.filter((option) =>
form.targetAudienceIds.includes(option.id),
) ?? [];
const audienceNames = selectedAudienceOptions.map((option) => option.name);
if (form.customTargetAudience?.trim()) {
audienceNames.push(form.customTargetAudience.trim());
}
const targetAudienceSummary = audienceNames.join(", ");
const selectedBrandPersonalities =
metadata?.brand_personalities?.filter((option) =>
form.brandPersonalityIds.includes(option.id),
) ?? [];
const brandPersonalityNames = selectedBrandPersonalities.map(
(option) => option.name,
);
if (form.customBrandPersonality?.trim()) {
brandPersonalityNames.push(form.customBrandPersonality.trim());
}
const personalityDescription =
brandPersonalityNames.length > 0
? brandPersonalityNames.join(", ")
: form.style.personality;
const heroImageryName =
findOptionName(
metadata?.hero_imagery_directions,
form.heroImageryDirectionId,
) ||
form.customHeroImageryDirection?.trim() ||
form.style.heroImagery;
const preparedForm: BuilderFormData = {
...form,
businessType: businessTypeName,
targetAudience: targetAudienceSummary,
};
const stylePreferences: StylePreferences = {
...preparedForm.style,
personality: personalityDescription,
heroImagery: heroImageryName,
};
set({
form: { ...preparedForm, style: stylePreferences },
isSubmitting: true,
error: undefined,
});
try {
const payload = {
name: form.siteName || `Site Blueprint (${form.industry || "New"})`,
description: form.businessType
? `${form.businessType} for ${form.targetAudience}`
: undefined,
site_id: form.siteId,
sector_id: form.sectorId,
hosting_type: form.hostingType,
config_json: {
business_type: form.businessType,
industry: form.industry,
target_audience: form.targetAudience,
},
};
let lastBlueprint: SiteBlueprint | undefined;
let lastStructure: SiteStructure | undefined;
for (const sectorId of preparedForm.sectorIds) {
const payload = {
name:
preparedForm.siteName ||
`Site Blueprint (${preparedForm.industry || "New"})`,
description: targetAudienceSummary
? `${businessTypeName} • ${targetAudienceSummary}`
: businessTypeName,
site_id: preparedForm.siteId!,
sector_id: sectorId,
hosting_type: preparedForm.hostingType,
config_json: {
business_type_id: preparedForm.businessTypeId,
business_type: businessTypeName,
custom_business_type: preparedForm.customBusinessType,
industry: preparedForm.industry,
target_audience_ids: preparedForm.targetAudienceIds,
target_audience: audienceNames,
custom_target_audience: preparedForm.customTargetAudience,
brand_personality_ids: preparedForm.brandPersonalityIds,
brand_personality: brandPersonalityNames,
custom_brand_personality: preparedForm.customBrandPersonality,
hero_imagery_direction_id: preparedForm.heroImageryDirectionId,
hero_imagery_direction: heroImageryName,
custom_hero_imagery_direction:
preparedForm.customHeroImageryDirection,
sector_id: sectorId,
},
};
const blueprint = await siteBuilderApi.createBlueprint(payload);
set({ activeBlueprint: blueprint });
const blueprint = await siteBuilderApi.createBlueprint(payload);
lastBlueprint = blueprint;
const generation = await siteBuilderApi.generateStructure(
blueprint.id,
{
business_brief: form.businessBrief,
objectives: form.objectives,
style: form.style,
metadata: { targetAudience: form.targetAudience },
},
);
const generation = await siteBuilderApi.generateStructure(
blueprint.id,
{
business_brief: preparedForm.businessBrief,
objectives: preparedForm.objectives,
style: stylePreferences,
metadata: {
targetAudience: audienceNames,
brandPersonality: brandPersonalityNames,
sectorId,
},
},
);
if (generation?.structure) {
useSiteDefinitionStore.getState().setStructure(generation.structure);
if (generation?.structure) {
lastStructure = generation.structure;
}
}
await get().refreshPages(blueprint.id);
if (lastBlueprint) {
set({ activeBlueprint: lastBlueprint });
if (lastStructure) {
useSiteDefinitionStore.getState().setStructure(lastStructure);
}
await get().refreshPages(lastBlueprint.id);
}
} catch (error: any) {
set({
error: error?.message || "Unexpected error while running wizard",
@@ -285,5 +395,20 @@ export const useBuilderStore = create<BuilderState>((set, get) => ({
set({ isGenerating: false });
}
},
loadMetadata: async () => {
if (get().metadata || get().isMetadataLoading) return;
set({ isMetadataLoading: true, metadataError: undefined });
try {
const metadata = await siteBuilderApi.getMetadata();
set({ metadata, isMetadataLoading: false });
} catch (error: any) {
set({
metadataError:
error?.message || "Unable to load Site Builder metadata",
isMetadataLoading: false,
});
}
},
}));

23
frontend/src/types/siteBuilder.ts
View File

@@ -9,14 +9,22 @@ export interface StylePreferences {
export interface BuilderFormData {
siteId: number | null;
sectorId: number | null;
sectorIds: number[];
siteName: string;
businessTypeId: number | null;
businessType: string;
customBusinessType?: string;
industry: string;
targetAudienceIds: number[];
targetAudience: string;
customTargetAudience?: string;
hostingType: HostingType;
businessBrief: string;
objectives: string[];
brandPersonalityIds: number[];
customBrandPersonality?: string;
heroImageryDirectionId: number | null;
customHeroImageryDirection?: string;
style: StylePreferences;
}
@@ -86,3 +94,16 @@ export interface ApiError {
detail?: string;
}
export interface SiteBuilderMetadataOption {
id: number;
name: string;
description?: string;
}
export interface SiteBuilderMetadata {
business_types: SiteBuilderMetadataOption[];
audience_profiles: SiteBuilderMetadataOption[];
brand_personalities: SiteBuilderMetadataOption[];
hero_imagery_directions: SiteBuilderMetadataOption[];
}