ProductPreviewDialog: close dialog after product adding

src/pages/menu/components/ProductPreviewDialog/ProductPreviewDialog.tsx

@@ -28,7 +28,7 @@ export function ProductPreviewDialog({
         minWidth: "80vw",
       }}
     >
-      <ProductDetailPage />
+      <ProductDetailPage onClose={onClose} />
     </Modal>
   );
 }

src/pages/product/components/ProductFooter.tsx

@@ -20,6 +20,7 @@ export default function ProductFooter({
   selectedExtras,
   selectedGroups,
   quantity,
+  onClose,
 }: {
   product: Product;
   isValid?: boolean;
@@ -27,6 +28,7 @@ export default function ProductFooter({
   selectedExtras: string[];
   selectedGroups: string[];
   quantity: number;
+  onClose?: () => void;
 }) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -34,6 +36,7 @@ export default function ProductFooter({
   const { specialRequest } = useAppSelector(selectCart);
   const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
   const { isMobile, isDesktop } = useBreakPoint();
+  const { isRTL } = useAppSelector((state) => state.locale);
 
   // Check if product has any customization options
   const hasCustomizationOptions = useMemo(() => {
@@ -71,7 +74,10 @@ export default function ProductFooter({
         }),
       );
       // Navigate back to menu - scroll position will be restored automatically
-      window.history.back();
+      if (!isDesktop) window.history.back();
+      else {
+        onClose?.();
+      }
     }
   };
 
@@ -101,7 +107,7 @@ export default function ProductFooter({
             : {
                 position: "absolute",
                 bottom: 0,
-                left: 0,
+                [isRTL ? "right" : "left"]: 0,
                 width: hasCustomizationOptions ? "50%" : "100%",
               }),
           height: "10vh",

src/pages/product/page.tsx

@@ -18,7 +18,7 @@ import ProductFooter from "./components/ProductFooter";
 import Variants from "./components/Variants";
 import styles from "./product.module.css";
 
-export default function ProductDetailPage() {
+export default function ProductDetailPage({ onClose }: { onClose: () => void }) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const { isDesktop } = useBreakPoint();
   const [quantity, setQuantity] = useState(1);
@@ -277,6 +277,7 @@ export default function ProductDetailPage() {
                 selectedExtras={selectedExtras}
                 selectedGroups={Object.values(selectedExtrasByGroup).flat()}
                 quantity={quantity}
+                onClose={onClose}
               />
             )}
           </div>