feat : adding dialog to choose language

components/public/guide-image-export.tsx

@@ -6,6 +6,7 @@ import { DownloadIcon } from "lucide-react";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
+import { ExportLanguageDialog } from "@/components/public/export-language-dialog";
 import {
   ExportLanguageToggle,
   useExportLanguage,
@@ -53,6 +54,7 @@ export function GuideImageExport({
   buttonLabel = "ส่งออกภาพ",
   language: controlledLanguage,
   showLanguageSelector = true,
+  promptForLanguage = false,
   localizeFileName = true,
 }: {
   children: ReactNode;
@@ -66,6 +68,7 @@ export function GuideImageExport({
   buttonLabel?: string;
   language?: ExportLanguage;
   showLanguageSelector?: boolean;
+  promptForLanguage?: boolean;
   localizeFileName?: boolean;
 }) {
   const captureRef = useRef<HTMLDivElement>(null);
@@ -75,6 +78,16 @@ export function GuideImageExport({
   const capturing = captureMode !== null;
   const [storedLanguage, setStoredLanguage] = useExportLanguage();
   const language = controlledLanguage ?? storedLanguage;
+  const [pendingCaptureMode, setPendingCaptureMode] = useState<
+    "with-notes" | "without-notes" | null
+  >(null);
+
+  function selectLanguage(nextLanguage: ExportLanguage) {
+    if (!pendingCaptureMode) return;
+    setStoredLanguage(nextLanguage);
+    setCaptureMode(pendingCaptureMode);
+    setPendingCaptureMode(null);
+  }
 
   useEffect(() => {
     if (!capturing) return;
@@ -153,7 +166,10 @@ export function GuideImageExport({
             variant="outline"
             size="sm"
             disabled={capturing || disabled}
-            onClick={() => setCaptureMode(mode)}
+            onClick={() => {
+              if (promptForLanguage) setPendingCaptureMode(mode);
+              else setCaptureMode(mode);
+            }}
           >
             {captureMode === mode ? (
               <Spinner data-icon="inline-start" />
@@ -168,6 +184,13 @@ export function GuideImageExport({
           </Button>
         ))}
       </div>
+      <ExportLanguageDialog
+        open={pendingCaptureMode !== null}
+        onOpenChange={(open) => {
+          if (!open) setPendingCaptureMode(null);
+        }}
+        onSelect={selectLanguage}
+      />
       {capturing
         ? createPortal(
             <div