select shipment method in payment

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

@@ -1,8 +1,9 @@
 'use client';
 
-import Combobox, { ComboboxOption } from '@/components/combobox/Combobox';
-import { Box, Icon, Shop, TruckTick } from 'iconsax-react';
+import Combobox from '@/components/combobox/Combobox';
+import { Box } from 'iconsax-react';
 import { useTranslation } from 'react-i18next';
+import { useGetShipmentMethod } from '../../hooks/useOrderData';
 
 type ShippingSectionProps = {
     deliveryType: string;
@@ -10,13 +11,15 @@ type ShippingSectionProps = {
 };
 
 export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: ShippingSectionProps) => {
+
+    const { data: shipmentMethod } = useGetShipmentMethod();
     const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
 
-    const deliveryOptions: Array<ComboboxOption> = [
-        { id: '0', title: t("SectionShipping.InputDeliveryType.Options.Delivery"), icon: TruckTick },
-        { id: '1', title: t("SectionShipping.InputDeliveryType.Options.Serve"), icon: Shop },
-        { id: '2', title: t("SectionShipping.InputDeliveryType.Options.Pickup"), icon: Box },
-    ];
+    const options = shipmentMethod?.data.map((item) => ({
+        id: item.id,
+        title: item.shipmentMethod.title,
+        // icon: Box
+    })) || [];
 
     return (
         <section className="bg-container rounded-container box-shadow-normal p-4">
@@ -26,10 +29,16 @@ export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: Shipping
                     className='relative mt-6'
                     icon={Box}
                     title=''
+                    placeholder={'انتخاب روش ارسال'}
                     searchable={false}
-                    options={deliveryOptions}
+                    options={options}
                     selectedId={deliveryType}
-                    onSelectionChange={(e, i) => onDeliveryTypeChange(String(i))}
+                    onSelectionChange={(e, i) => {
+                        const selectedOption = options[i];
+                        if (selectedOption) {
+                            onDeliveryTypeChange(selectedOption.id);
+                        }
+                    }}
                 />
             </div>
         </section>

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

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { getShipmentMethod } from "../service/OrderService";
+import { getPaymentMethod, getShipmentMethod } from "../service/OrderService";
 
 export const useGetShipmentMethod = () => {
   return useQuery({
@@ -7,3 +7,10 @@ export const useGetShipmentMethod = () => {
     queryFn: getShipmentMethod,
   });
 };
+
+export const useGetPaymentMethod = () => {
+  return useQuery({
+    queryKey: ["payment-method"],
+    queryFn: getPaymentMethod,
+  });
+};

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

@@ -1,6 +1,19 @@
 import { api } from "@/config/axios";
+import {
+  ShipmentMethodsResponse,
+  PaymentMethodsResponse,
+} from "../types/Types";
 
-export const getShipmentMethod = async () => {
-  const { data } = await api.get("/public/shipment-methods/restaurant");
+export const getShipmentMethod = async (): Promise<ShipmentMethodsResponse> => {
+  const { data } = await api.get<ShipmentMethodsResponse>(
+    "/public/shipment-methods/restaurant"
+  );
+  return data;
+};
+
+export const getPaymentMethod = async (): Promise<PaymentMethodsResponse> => {
+  const { data } = await api.get<PaymentMethodsResponse>(
+    "/public/payments/methods/restaurant"
+  );
   return data;
 };

src/app/[name]/(Dialogs)/order/checkout/types/Types.ts

@@ -0,0 +1,89 @@
+import { BaseResponse } from "@/app/[name]/(Main)/types/Types";
+
+export interface ShipmentMethod {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+}
+
+export interface RestaurantShipmentMethod {
+  id: string;
+  restaurant: string;
+  shipmentMethod: ShipmentMethod;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  price: number;
+  minOrderPrice: number;
+  isActive: boolean;
+}
+
+export type ShipmentMethodsResponse = BaseResponse<RestaurantShipmentMethod[]>;
+
+export interface ServiceArea {
+  type: "Polygon";
+  coordinates: number[][][];
+}
+
+export interface Restaurant {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  slug: string;
+  logo: string | null;
+  address: string | null;
+  menuColor: string | null;
+  latitude: number | null;
+  longitude: number | null;
+  serviceArea: ServiceArea;
+  isActive: boolean;
+  establishedYear: number | null;
+  phoneNumber: string | null;
+  phone: string;
+  instagram: string | null;
+  telegram: string | null;
+  whatsapp: string | null;
+  description: string | null;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  tagNames: string | null;
+  images: string | null;
+  vat: number;
+}
+
+export interface PaymentMethod {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  name: string;
+  keyName: string;
+  description: string;
+  icon: string | null;
+  isActive: boolean;
+  isOnline: boolean;
+  order: number;
+  paymentUrl: string | null;
+}
+
+export interface RestaurantPaymentMethod {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  restaurant: Restaurant;
+  paymentMethod: PaymentMethod;
+  merchantId: string | null;
+  callbackUrl: string | null;
+  isActive: boolean;
+}
+
+export type PaymentMethodsResponse = BaseResponse<RestaurantPaymentMethod[]>;
+