diff --git a/src/components/ui/navigation-button.tsx b/src/components/ui/navigation-button.tsx
index f3b0dd8..7ee3211 100644
--- a/src/components/ui/navigation-button.tsx
+++ b/src/components/ui/navigation-button.tsx
@@ -108,12 +108,18 @@ export function NavigationButton({
onClick={(event) => {
props.onClick?.(event);
- if (
- !event.defaultPrevented &&
- (icon === "back" || icon === "close") &&
- !props.onClick
- ) {
- router.back();
+ if (!event.defaultPrevented && !props.onClick) {
+ if (icon === "back") {
+ if (typeof window !== "undefined" && (window as any).HabibApp) {
+ (window as any).HabibApp.postMessage(
+ JSON.stringify({ action: "close_service" })
+ );
+ } else {
+ router.back();
+ }
+ } else if (icon === "close") {
+ router.back();
+ }
}
}}
className={[
diff --git a/src/components/ui/report-actions-sheet.tsx b/src/components/ui/report-actions-sheet.tsx
new file mode 100644
index 0000000..6c50340
--- /dev/null
+++ b/src/components/ui/report-actions-sheet.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Button from "@/components/ui/button";
+
+const EXIT_ANIMATION_MS = 220;
+
+type ReportActionsSheetProps = {
+ onClose?: () => void;
+};
+
+declare global {
+ interface Window {
+ HabibApp?: {
+ postMessage: (message: string) => void;
+ };
+ onFlutterResponse?: (event: {
+ action: string;
+ success: boolean;
+ data?: { latitude: number; longitude: number };
+ }) => void;
+ }
+}
+
+export function ReportActionsSheet({ onClose }: ReportActionsSheetProps) {
+ const [isVisible, setIsVisible] = useState(true);
+ const [isEntering, setIsEntering] = useState(true);
+ const [isClosing, setIsClosing] = useState(false);
+
+ const closeSheet = () => {
+ if (isClosing) return;
+ setIsClosing(true);
+ };
+
+ const handleGetLocation = () => {
+ if (typeof window !== "undefined" && window.HabibApp) {
+ window.HabibApp.postMessage(JSON.stringify({ action: "get_location" }));
+ closeSheet();
+ }
+ };
+
+ const handleOpenConsultant = () => {
+ if (typeof window !== "undefined" && window.HabibApp) {
+ window.HabibApp.postMessage(
+ JSON.stringify({
+ action: "open_consultant_page",
+ data: { consultant: "habib@gmail.com" },
+ })
+ );
+ closeSheet();
+ }
+ };
+
+ useEffect(() => {
+ const frameId = window.requestAnimationFrame(() => {
+ setIsEntering(false);
+ });
+ return () => window.cancelAnimationFrame(frameId);
+ }, []);
+
+ useEffect(() => {
+ if (!isVisible) return;
+ const previousBodyOverflow = document.body.style.overflow;
+ const previousHtmlOverflow = document.documentElement.style.overflow;
+ document.body.style.overflow = "hidden";
+ document.documentElement.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = previousBodyOverflow;
+ document.documentElement.style.overflow = previousHtmlOverflow;
+ };
+ }, [isVisible]);
+
+ useEffect(() => {
+ if (!isClosing) return;
+ const timeoutId = window.setTimeout(() => {
+ setIsVisible(false);
+ onClose?.();
+ }, EXIT_ANIMATION_MS);
+ return () => window.clearTimeout(timeoutId);
+ }, [isClosing, onClose]);
+
+ useEffect(() => {
+ window.onFlutterResponse = (event) => {
+ if (event.action === "get_location" && event.success && event.data) {
+ const message = `Location: ${event.data.latitude}, ${event.data.longitude}`;
+ alert(message);
+ }
+ };
+ return () => {
+ window.onFlutterResponse = undefined;
+ };
+ }, []);
+
+ if (!isVisible) return null;
+
+ return (
+
{
+ if (event.target === event.currentTarget) closeSheet();
+ }}
+ >
+
+
+
+
+
+
+
+ );
+}
+
+export default ReportActionsSheet;