translate text checkout

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

@@ -24,11 +24,18 @@ const getIconByMethod = (method: "CardOnDelivery" | "Cash" | "Online", _gateway:
 
 export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSectionProps) => {
 
-    const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { t: tOrders } = useTranslation('orders');
     const { data: paymentMethod } = useGetPaymentMethod();
     const { mutate: setPaymentMethod } = useSetPaymentMethod();
     const { setIsSelectedPayment } = useCheckoutStore();
 
+    const getPaymentMethodTranslation = (method: string, fallbackTitle: string) => {
+        const translationKey = `paymentMethod.${method}`;
+        const translation = tOrders(translationKey);
+        return translation !== translationKey ? translation : fallbackTitle;
+    };
+
     const paymentOptions = useMemo(() => {
         if (!paymentMethod?.data) return [];
 
@@ -37,15 +44,15 @@ export const PaymentSection = ({ paymentType, onPaymentTypeChange }: PaymentSect
             .sort((a, b) => a.order - b.order)
             .map(item => ({
                 id: item.id,
-                label: item.title,
+                label: getPaymentMethodTranslation(item.method, item.title),
                 icon: getIconByMethod(item.method, item.gateway),
             }));
-    }, [paymentMethod]);
+    }, [paymentMethod, tOrders]);
 
     return (
         <section className="bg-container rounded-container box-shadow-normal p-4">
             <div className="py-3">
-                <h3 className="text-sm2 font-medium leading-5">{t("SectionPayment.Title")}</h3>
+                <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionPayment.Title")}</h3>
 
                 <div className='flex flex-col gap-5 mt-6'>
                     {paymentOptions.map(({ id, label, icon: Icon }) => (

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

@@ -14,24 +14,30 @@ type ShippingSectionProps = {
 
 export const ShippingSection = ({ deliveryType, onDeliveryTypeChange }: ShippingSectionProps) => {
 
-    const { t } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { t: tOrderDetail } = useTranslation('parallels', { keyPrefix: 'OrderDetail' });
+    const { t: tOrders } = useTranslation('orders');
     const { data: shipmentMethod } = useGetShipmentMethod();
     const { mutate: setDeliveryMethod } = useSetDeliveryMethod();
     const { setIsSelectedShipment } = useCheckoutStore();
 
+    const getDeliveryMethodTranslation = (method: string) => {
+        const translationKey = method === 'pickup' ? 'customerPickup' : method;
+        return tOrders(`deliveryMethod.${translationKey}`);
+    };
+
     const options = shipmentMethod?.data
         .filter((item: DeliveryMethod) => item.enabled)
         .sort((a: DeliveryMethod, b: DeliveryMethod) => a.order - b.order)
         .map((item: DeliveryMethod) => ({
             id: item.id,
-            title: item.title,
+            title: getDeliveryMethodTranslation(item.method),
             icon: Box
         })) || [];
 
     return (
         <section className="bg-container rounded-container box-shadow-normal p-4">
             <div className="py-3">
-                <h3 className="text-sm2 font-medium leading-5">{t("SectionShipping.Title")}</h3>
+                <h3 className="text-sm2 font-medium leading-5">{tOrderDetail("SectionShipping.Title")}</h3>
                 <Combobox
                     className='relative mt-6'
                     icon={Box}

src/locales/fa/orders.json

@@ -7,5 +7,16 @@
     "TrackOrder": "پیگیری سفارش",
     "Reorder": "سفارش مجدد",
     "Rate": "ثبت امتیاز"
+  },
+  "deliveryMethod": {
+    "dineIn": "سرو در رستوران",
+    "customerPickup": "تحویل در رستوران",
+    "deliveryCar": "تحویل به خودرو",
+    "deliveryCourier": "تحویل با پیک"
+  },
+  "paymentMethod": {
+    "Cash": "پرداخت نقدی",
+    "Online": "پرداخت آنلاین",
+    "Wallet": "پرداخت با کیف پول"
   }
 }