Title

AI Logo Creator → Composer Flow + Rename Button to “Customize Logo”

What to do

Rename button label

Change “Insert into Canvas” to “Customize Logo” everywhere in the AI logo generator UI.

If the button has aria-label/title, update those too.

Navigation (already added)

On click, navigate to:

/brand-development/ai-logo-creator/logo-composer-draft-{uuid}


LogoCustomizerPage must continue to:

Strip logo-composer- → detect draft- → load from sessionStorage.

Draft loader polish (optional)

If a draft is missing (e.g., user refreshed), show a friendly error.

Micro-diffs (examples)
A) Button text change

Use whichever file actually renders the button. If it’s in AILogoCreator.tsx, change there. If the button is inside <LogoAIGenerator>, update that component.

Option 1 — Direct label in AILogoCreator

--- a/client/src/pages/business-development/AILogoCreator.tsx
+++ b/client/src/pages/business-development/AILogoCreator.tsx
@@ -20,7 +20,7 @@ export default function AILogoCreator() {
   return (
     <div>
-      <Button onClick={handleAiLogoGenerated}>Insert into Canvas</Button>
+      <Button aria-label="Customize Logo" title="Customize Logo" onClick={handleAiLogoGenerated}>Customize Logo</Button>
     </div>
   );
 }


Option 2 — Passed as prop to LogoAIGenerator

--- a/client/src/pages/business-development/AILogoCreator.tsx
+++ b/client/src/pages/business-development/AILogoCreator.tsx
@@ -25,7 +25,7 @@ export default function AILogoCreator() {
   return (
-    <LogoAIGenerator onInsert={handleAiLogoGenerated} insertLabel="Insert into Canvas" />
+    <LogoAIGenerator onInsert={handleAiLogoGenerated} insertLabel="Customize Logo" insertAria="Customize Logo" />
   );
 }


Option 3 — Inside the LogoAIGenerator component

--- a/client/src/components/logo/LogoAIGenerator.tsx
+++ b/client/src/components/logo/LogoAIGenerator.tsx
@@ -88,7 +88,7 @@ export function LogoAIGenerator(props) {
-  <Button onClick={onInsert}>Insert into Canvas</Button>
+  <Button aria-label="Customize Logo" title="Customize Logo" onClick={onInsert}>Customize Logo</Button>
 }


Use whichever matches your codebase. The end result should show “Customize Logo”.

B) Draft-missing friendly message (optional)
--- a/client/src/pages/LogoCustomizerPage.tsx
+++ b/client/src/pages/LogoCustomizerPage.tsx
@@ -704,7 +714,11 @@ useEffect(() => {
   if (id.startsWith("draft-")) {
     const raw = sessionStorage.getItem(`logoDraft:${id}`);
-    if (!raw) { setError(`Draft not found: ${id}`); return; }
+    if (!raw) {
+      setError(`This draft isn't available anymore. Generate a new logo and try again.`);
+      // optional: auto-redirect back to generator after a beat
+      // setTimeout(() => navigate('/brand-development/ai-logo-creator'), 1200);
+      return;
+    }
     const { svg } = JSON.parse(raw) as { svg: string };
     setComposer({
       id, name: "AI Draft", svg,

QA (super quick)

Happy path

Generate → Customize Logo → lands on
/brand-development/ai-logo-creator/logo-composer-draft-{uuid}

Composer loads SVG with edit tools.

Refresh resilience

F5 on composer → if sessionStorage missing, see friendly error (optional auto-redirect to generator).

Deep links

/brand-development/ai-logo-creator/logo-composer-<templateId> still loads Firebase template.

/brand-development/ai-logo-creator/<templateId> (param form) still works.

Multi-draft

Generate again → creates a new draft-{uuid} and loads independently.