feat(localization): Add en/vi language

src/pages/Trip/components/CancelTrip.tsx

@@ -1,13 +1,15 @@
 import { ModalForm, ProFormTextArea } from '@ant-design/pro-components';
+import { useIntl } from '@umijs/max';
 import { Button, Form } from 'antd';
 interface CancelTripProps {
   onFinished?: (note: string) => void;
 }
 const CancelTrip: React.FC<CancelTripProps> = ({ onFinished }) => {
+  const intl = useIntl();
   const [form] = Form.useForm<{ note: string }>();
   return (
     <ModalForm
-      title="Xác nhận huỷ chuyến đi"
+      title={intl.formatMessage({ id: 'trip.cancelTrip.title' })}
       form={form}
       modalProps={{
         destroyOnHidden: true,
@@ -15,7 +17,7 @@ const CancelTrip: React.FC<CancelTripProps> = ({ onFinished }) => {
       }}
       trigger={
         <Button color="danger" variant="solid">
-          Huỷ chuyến đi
+          {intl.formatMessage({ id: 'trip.cancelTrip.button' })}
         </Button>
       }
       onFinish={async (values) => {
@@ -25,10 +27,13 @@ const CancelTrip: React.FC<CancelTripProps> = ({ onFinished }) => {
     >
       <ProFormTextArea
         name="note"
-        label="Lý do: "
-        placeholder={'Nhập lý do huỷ chuyến đi...'}
+        label={intl.formatMessage({ id: 'trip.cancelTrip.reason' })}
+        placeholder={intl.formatMessage({ id: 'trip.cancelTrip.placeholder' })}
         rules={[
-          { required: true, message: 'Vui lòng nhập lý do huỷ chuyến đi' },
+          {
+            required: true,
+            message: intl.formatMessage({ id: 'trip.cancelTrip.validation' }),
+          },
         ]}
       />
     </ModalForm>