checkout

src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx

@@ -4,6 +4,9 @@ import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
 import Button from '@/components/button/PrimaryButton';
 import { ChevronLeft } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { useCheckoutStore } from '../../store/Store';
+import { toast } from '@/components/Toast';
+import { useCreateOrder } from '../../hooks/useOrderData';
 
 type SummarySectionProps = {
     cartModal: boolean;
@@ -11,7 +14,35 @@ type SummarySectionProps = {
 };
 
 export const SummarySection = ({ cartModal, onToggleCartModal }: SummarySectionProps) => {
+
     const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { isSelectedAddress, isSelectedShipment, isSelectedPayment } = useCheckoutStore();
+    const { mutate: createOrder } = useCreateOrder();
+
+    const handleSubmit = () => {
+        if (!isSelectedAddress) {
+            toast('لطفا آدرس را انتخاب کنید', 'error');
+            return;
+        }
+        if (!isSelectedShipment) {
+            toast('لطفا روش تحویل را انتخاب کنید', 'error');
+            return;
+        }
+        if (!isSelectedPayment) {
+            toast('لطفا روش پرداخت را انتخاب کنید', 'error');
+            return;
+        }
+
+        createOrder(undefined, {
+            onSuccess: () => {
+                toast('سفارش با موفقیت ثبت شد', 'success');
+                onToggleCartModal();
+            },
+            onError: () => {
+                toast('خطا در ثبت سفارش', 'error');
+            }
+        });
+    };
 
     return (
         <>
@@ -37,7 +68,7 @@ export const SummarySection = ({ cartModal, onToggleCartModal }: SummarySectionP
                         <span className='font-medium '>{t("SectionSummary.TotalLabel")}</span>
                         <span className='font-bold  place-self-end'>110,000 T</span>
                     </div>
-                    <Button className='mt-6'>
+                    <Button onClick={handleSubmit} className='mt-6'>
                         {t("ButtonSubmit")}
                     </Button>
                 </div>

src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import useToggle from '@/hooks/helpers/useToggle';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { AddressSection } from './components/AddressSection';
 import { CheckoutHeader } from './components/CheckoutHeader';
 import { CouponSection } from './components/CouponSection';
@@ -9,6 +9,7 @@ import { PaymentSection } from './components/PaymentSection';
 import { ShippingSection } from './components/ShippingSection';
 import { SummarySection } from './components/SummarySection';
 import { TableSection } from './components/TableSection';
+import { useGetShipmentMethod } from '../hooks/useOrderData';
 
 function OrderDetailInex() {
     const [deliveryType, setDeliveryType] = React.useState<string>('0');
@@ -18,6 +19,7 @@ function OrderDetailInex() {
     const [couponCodeError, setCouponCodeError] = React.useState<string>('');
     const [tableNumber, setTableNumber] = useState(0);
     const { state: cartModal, toggle: toggleCartModal } = useToggle();
+    const { data: shipmentMethod } = useGetShipmentMethod();
 
     const incrementTableNumber = () => setTableNumber((prev) => prev + 1);
     const decrementTableNumber = () => setTableNumber((prev) => prev - 1);
@@ -40,6 +42,16 @@ function OrderDetailInex() {
         setCouponCode(value);
     }, []);
 
+    const selectedDeliveryMethod = useMemo(() => {
+        if (!shipmentMethod?.data || !deliveryType) return null;
+        return shipmentMethod.data.find((item) => item.id === deliveryType);
+    }, [shipmentMethod?.data, deliveryType]);
+
+    const shouldShowAddress = useMemo(() => {
+        if (!selectedDeliveryMethod) return true;
+        return selectedDeliveryMethod.method !== 'dineIn' && selectedDeliveryMethod.method !== 'deliveryCar';
+    }, [selectedDeliveryMethod]);
+
     return (
         <div className='h-full bg-inherit flex flex-col gap-5'>
             <CheckoutHeader />
@@ -49,7 +61,7 @@ function OrderDetailInex() {
                 onDeliveryTypeChange={changeDeliveryType}
             />
 
-            {deliveryType === '0' && (
+            {shouldShowAddress && (
                 <AddressSection />
             )}
 

src/app/[name]/(Dialogs)/order/checkout/hooks/useOrderData.ts

@@ -5,6 +5,7 @@ import {
   setAddressCart,
   setDeliveryMethod,
   setPaymentMethod,
+  createOrder,
 } from "../service/OrderService";
 
 export const useGetShipmentMethod = () => {
@@ -38,3 +39,9 @@ export const useSetPaymentMethod = () => {
     mutationFn: setPaymentMethod,
   });
 };
+
+export const useCreateOrder = () => {
+  return useMutation({
+    mutationFn: createOrder,
+  });
+};

src/app/[name]/(Dialogs)/order/checkout/service/OrderService.ts

@@ -36,3 +36,8 @@ export const setPaymentMethod = async (id: string) => {
   });
   return data;
 };
+
+export const createOrder = async () => {
+  const { data } = await api.post("/public/checkout");
+  return data;
+};