feat(localization): Add en/vi language

src/pages/Trip/components/CreateNewHaulOrTrip.tsx

@@ -5,8 +5,8 @@ import {
   updateTripState,
 } from '@/services/controller/TripController';
 import { PlusOutlined } from '@ant-design/icons';
-import { useModel } from '@umijs/max';
-import { Button, Grid, message, theme } from 'antd';
+import { useIntl, useModel } from '@umijs/max';
+import { Button, Grid, message } from 'antd';
 import { useState } from 'react';
 import CreateOrUpdateFishingLog from './CreateOrUpdateFishingLog';
 
@@ -20,7 +20,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   onCallBack,
 }) => {
   const [isFinishHaulModalOpen, setIsFinishHaulModalOpen] = useState(false);
-  const { token } = theme.useToken();
+  const intl = useIntl();
   const { getApi } = useModel('getTrip');
   const checkHaulFinished = () => {
     return trips?.fishing_logs?.some((h) => h.status === 0);
@@ -31,7 +31,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   const createNewHaul = async () => {
     if (trips?.fishing_logs?.some((f) => f.status === 0)) {
       message.warning(
-        'Vui lòng kết thúc mẻ lưới hiện tại trước khi bắt đầu mẻ mới',
+        intl.formatMessage({ id: 'trip.warning.haulNotFinished' }),
       );
       return;
     }
@@ -45,10 +45,10 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
         start_at: new Date(),
         start_lat: gpsData.lat,
         start_lon: gpsData.lon,
-        weather_description: 'Nắng đẹp',
+        weather_description: intl.formatMessage({ id: 'trip.weather' }),
       };
 
-      const resp = await startNewHaul(body);
+      await startNewHaul(body);
       onCallBack?.(STATUS.CREATE_FISHING_LOG_SUCCESS);
       getApi();
     } catch (error) {
@@ -59,11 +59,11 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
 
   const handleStartTrip = async (state: number, note?: string) => {
     if (trips?.trip_status !== 2) {
-      message.warning('Chuyến đi đã được bắt đầu hoặc hoàn thành.');
+      message.warning(intl.formatMessage({ id: 'trip.warning.tripStarted' }));
       return;
     }
     try {
-      const resp = await updateTripState({ status: state, note: note || '' });
+      await updateTripState({ status: state, note: note || '' });
       onCallBack?.(STATUS.START_TRIP_SUCCESS);
       getApi();
     } catch (error) {
@@ -78,17 +78,19 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   }
 
   return (
-    <div style={{
-      padding: screens.sm ? '0px': '10px',
-      marginRight: screens.sm ? '24px': '0px',
-    }}>
+    <div
+      style={{
+        padding: screens.sm ? '0px' : '10px',
+        marginRight: screens.sm ? '24px' : '0px',
+      }}
+    >
       {trips?.trip_status === 2 ? (
         <Button
           color="green"
           variant="solid"
           onClick={async () => handleStartTrip(3)}
         >
-          Bắt đầu chuyến đi
+          {intl.formatMessage({ id: 'trip.startTrip' })}
         </Button>
       ) : checkHaulFinished() ? (
         <Button
@@ -100,7 +102,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
           color="geekblue"
           variant="solid"
         >
-          Kết thúc mẻ lưới
+          {intl.formatMessage({ id: 'trip.finishHaul' })}
         </Button>
       ) : (
         <Button
@@ -112,7 +114,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
           color="cyan"
           variant="solid"
         >
-          Bắt đầu mẻ lưới
+          {intl.formatMessage({ id: 'trip.startHaul' })}
         </Button>
       )}