Feat: translate

CAFECA-IO · Oct 9, 2024 · d9b3b8c · d9b3b8c
1 parent 50899cd
commit d9b3b8c
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+39",
+  "version": "0.8.2+40",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/voucher/asset_section.tsx b/src/components/voucher/asset_section.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
 import { FiEdit, FiPlus, FiTrash2 } from 'react-icons/fi';
 import { Button } from '@/components/button/button';
 import { IAssetItem, mockAssetItem } from '@/interfaces/asset';
 
 const AssetSection: React.FC = () => {
+  const { t } = useTranslation('common');
   const [assets, setAssets] = useState<IAssetItem[]>([]);
 
   // ToDo: (20241009 - Julian) Replace with real function to add asset
@@ -63,8 +65,8 @@ const AssetSection: React.FC = () => {
       })
     ) : (
       <div className="flex flex-col items-center text-xs">
-        <p className="text-text-neutral-tertiary">Empty</p>
-        <p className="text-text-neutral-primary">Please add at least 1 asset!</p>
+        <p className="text-text-neutral-tertiary">{t('common:COMMON.EMPTY')}</p>
+        <p className="text-text-neutral-primary">{t('journal:ASSET_SECTION.EMPTY_HINT')}</p>
       </div>
     );
 
@@ -75,7 +77,7 @@ const AssetSection: React.FC = () => {
         <hr className="block flex-1 border-divider-stroke-lv-4 md:hidden" />
         <div className="flex items-center gap-2 text-sm text-divider-text-lv-1">
           <Image src="/icons/asset.svg" width={16} height={16} alt="asset_icon" />
-          <p>Asset</p>
+          <p>{t('journal:ASSET_SECTION.TITLE')}</p>
         </div>
         <hr className="flex-1 border-divider-stroke-lv-4" />
       </div>
@@ -84,7 +86,7 @@ const AssetSection: React.FC = () => {
         {displayedAssetList}
         <Button type="button" variant="secondaryOutline" onClick={generateRandomAsset}>
           <FiPlus size={20} />
-          <p>Add New Asset</p>
+          <p>{t('journal:ASSET_SECTION.ADD_BTN')}</p>
         </Button>
       </div>
     </>

diff --git a/src/components/voucher/new_voucher_form.tsx b/src/components/voucher/new_voucher_form.tsx
@@ -279,11 +279,15 @@ const NewVoucherForm: React.FC = () => {
     setRecurringMenuOpen(!isRecurringMenuOpen);
   };
 
-  // ToDo: (20240926 - Julian) type 字串轉換
+  // Info: (20240926 - Julian) type 字串轉換
   const translateType = (voucherType: string) => {
     return t(`journal:ADD_NEW_VOUCHER.TYPE_${voucherType.toUpperCase()}`);
   };
 
+  const translateUnit = (unit: RecurringUnit) => {
+    return t(`common:COMMON.${unit.toUpperCase()}`);
+  };
+
   // Info: (20241004 - Julian) 清空表單
   const clearAllHandler = () => {
     setDate(default30DayPeriodInSec);
@@ -573,7 +577,7 @@ const NewVoucherForm: React.FC = () => {
             className="py-8px hover:bg-dropdown-surface-menu-background-secondary"
             onClick={recurringUnitClickHandler}
           >
-            {t(`common:COMMON.${unit.toUpperCase()}`)}
+            {translateUnit(unit)}
           </button>
         );
       })}
@@ -742,7 +746,7 @@ const NewVoucherForm: React.FC = () => {
                 onClick={recurringUnitToggleHandler}
                 className="relative flex flex-1 items-center justify-between px-12px py-10px text-input-text-input-filled hover:cursor-pointer"
               >
-                <p>{recurringUnit}</p>
+                <p>{translateUnit(recurringUnit)}</p>
                 <FaChevronDown />
                 {/* Info: (20240926 - Julian) recurring unit dropdown */}
                 {recurringUnitMenu}

diff --git a/src/components/voucher/reverse_section.tsx b/src/components/voucher/reverse_section.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
 import { BsChevronDown } from 'react-icons/bs';
 import { FiTrash2 } from 'react-icons/fi';
 import { LuPlus } from 'react-icons/lu';
@@ -15,6 +16,8 @@ interface IReverseSectionProps {
 }
 
 const ReverseLine: React.FC<IReverseSectionProps> = ({ isShowReverseVoucherHint = false }) => {
+  const { t } = useTranslation('common');
+
   const [selectedVoucher, setSelectedVoucher] = useState<IVoucherBeta | null>(null);
   const [reverseAmountInput, setReverseAmountInput] = useState<string>('');
   // ToDo: (20241009 - Julian) Send reverse amount to backend
@@ -57,7 +60,7 @@ const ReverseLine: React.FC<IReverseSectionProps> = ({ isShowReverseVoucherHint
     <p
       className={`truncate text-input-text-input-placeholder ${isShowReverseVoucherHint ? inputStyle.ERROR : inputStyle.NORMAL}`}
     >
-      Please select...
+      {t('journal:REVERSE_SECTION.REVERSE_VOUCHER_PLACEHOLDER')}
     </p>
   );
 
@@ -96,7 +99,7 @@ const ReverseLine: React.FC<IReverseSectionProps> = ({ isShowReverseVoucherHint
       {/* Info: (20241009 - Julian) reverse voucher */}
       <div className="flex flex-1 flex-col gap-8px">
         <p className="font-bold text-input-text-primary">
-          Reverse Voucher
+          {t('journal:REVERSE_SECTION.REVERSE_VOUCHER')}
           <span className="text-text-state-error">*</span>
         </p>
         <div
@@ -113,7 +116,7 @@ const ReverseLine: React.FC<IReverseSectionProps> = ({ isShowReverseVoucherHint
       {/* Info: (20241009 - Julian) reverse amount */}
       <div className="flex flex-col gap-8px">
         <p className="font-bold text-input-text-primary">
-          Reverse Amount
+          {t('journal:REVERSE_SECTION.REVERSE_AMOUNT')}
           <span className="text-text-state-error">*</span>
         </p>
         <div className="flex items-center divide-x divide-input-stroke-input rounded-sm border border-input-stroke-input bg-input-surface-input-background">
@@ -146,6 +149,8 @@ const ReverseLine: React.FC<IReverseSectionProps> = ({ isShowReverseVoucherHint
 };
 
 const ReverseSection: React.FC = () => {
+  const { t } = useTranslation('common');
+
   const [reverseLineItems, setReverseLineItems] = useState<number[]>([1]);
 
   // ToDo: (20241009 - Julian) Implement addReverseLineItem
@@ -164,7 +169,7 @@ const ReverseSection: React.FC = () => {
         <hr className="block flex-1 border-divider-stroke-lv-4 md:hidden" />
         <div className="flex items-center gap-2 text-sm text-divider-text-lv-1">
           <Image src="/icons/bell.svg" width={16} height={16} alt="bell_icon" />
-          <p>Reverse</p>
+          <p>{t('journal:REVERSE_SECTION.TITLE')}</p>
         </div>
         <hr className="flex-1 border-divider-stroke-lv-4" />
       </div>
@@ -178,7 +183,7 @@ const ReverseSection: React.FC = () => {
           onClick={addReverseLineItem}
         >
           <LuPlus />
-          <p>Add more reverse voucher</p>
+          <p>{t('journal:REVERSE_SECTION.ADD_BTN')}</p>
         </button>
       </div>
     </>

diff --git a/src/constants/asset.ts b/src/constants/asset.ts
@@ -67,5 +67,5 @@ export const AccountCodesOfAsset = [
 
 export const AccountCodesOfAPandAR = [
   '1172', // 應收帳款
-  '2170', // 應付帳款
+  '2171', // 應付帳款
 ];
diff --git a/src/locales/cn/journal.json b/src/locales/cn/journal.json
@@ -246,5 +246,17 @@
     "INCOME": "收益",
     "EXPENSE": "支出",
     "GAIN_OR_LOSS": "收益或损失"
+  },
+  "ASSET_SECTION": {
+    "TITLE": "资产",
+    "EMPTY_HINT": "请新增至少 1 笔资产！",
+    "ADD_BTN": "新增资产"
+  },
+  "REVERSE_SECTION": {
+    "TITLE": "冲销",
+    "REVERSE_VOUCHER": "冲销传票",
+    "REVERSE_VOUCHER_PLACEHOLDER": "请选择...",
+    "REVERSE_AMOUNT": "冲销金额",
+    "ADD_BTN": "新增更多冲销传票"
   }
 }
diff --git a/src/locales/en/journal.json b/src/locales/en/journal.json
@@ -246,5 +246,17 @@
     "INCOME": "Income",
     "EXPENSE": "Expenses",
     "GAIN_OR_LOSS": "Gain or Loss"
+  },
+  "ASSET_SECTION": {
+    "TITLE": "Asset",
+    "EMPTY_HINT": "Please add at least 1 asset!",
+    "ADD_BTN": "Add New Asset"
+  },
+  "REVERSE_SECTION": {
+    "TITLE": "Reverse",
+    "REVERSE_VOUCHER": "Reverse Voucher",
+    "REVERSE_VOUCHER_PLACEHOLDER": "Please select...",
+    "REVERSE_AMOUNT": "Reverse Amount",
+    "ADD_BTN": "Add more reverse voucher"
   }
 }
diff --git a/src/locales/tw/journal.json b/src/locales/tw/journal.json
@@ -246,5 +246,17 @@
     "INCOME": "收益",
     "EXPENSE": "支出",
     "GAIN_OR_LOSS": "收益或損失"
+  },
+  "ASSET_SECTION": {
+    "TITLE": "資產",
+    "EMPTY_HINT": "請新增至少 1 筆資產！",
+    "ADD_BTN": "新增資產"
+  },
+  "REVERSE_SECTION": {
+    "TITLE": "沖銷",
+    "REVERSE_VOUCHER": "沖銷傳票",
+    "REVERSE_VOUCHER_PLACEHOLDER": "請選擇...",
+    "REVERSE_AMOUNT": "沖銷金額",
+    "ADD_BTN": "新增更多沖銷傳票"
   }
 }
diff --git a/src/pages/users/accounting/add_new_voucher.tsx b/src/pages/users/accounting/add_new_voucher.tsx
@@ -5,10 +5,37 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { ILocale } from '@/interfaces/locale';
 import NewVoucherForm from '@/components/voucher/new_voucher_form';
 
+// Info: (20241009 - Julian) For layout testing, to be removed
+enum SidebarState {
+  COLLAPSED = 'collapsed',
+  OPEN = 'open',
+  EXPANDED = 'expanded',
+}
+
 const AddNewVoucherPage: React.FC = () => {
   const { t } = useTranslation('common');
 
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+  const [sidebarState, setSidebarState] = useState<SidebarState>(SidebarState.OPEN);
+
+  const isSidebarCollapsed = sidebarState === SidebarState.COLLAPSED;
+  const isSidebarOpen = sidebarState === SidebarState.OPEN;
+  const isSidebarExpanded = sidebarState === SidebarState.EXPANDED;
+
+  const toggleSidebar = () => {
+    if (isSidebarCollapsed) {
+      setSidebarState(SidebarState.OPEN);
+    } else {
+      setSidebarState(SidebarState.COLLAPSED);
+    }
+  };
+
+  const expandSidebar = () => {
+    if (isSidebarOpen) {
+      setSidebarState(SidebarState.EXPANDED);
+    } else {
+      setSidebarState(SidebarState.OPEN);
+    }
+  };
 
   return (
     <>
@@ -19,28 +46,34 @@ const AddNewVoucherPage: React.FC = () => {
         <title>{t('journal:ADD_NEW_VOUCHER.PAGE_TITLE')} - iSunFA</title>
       </Head>
 
-      <button
-        type="button"
-        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
-        className="absolute top-0 bg-rose-300"
-      >
+      <button type="button" onClick={toggleSidebar} className="absolute top-0 z-60 bg-rose-300">
         Sidebar Toggle
       </button>
 
-      <div
-        className={`${isSidebarOpen ? 'ml-280px' : 'ml-0'} bg-text-neutral-secondary p-20px text-center text-white transition-all duration-300 ease-in-out`}
-      >
-        This is header
+      <div className="fixed z-50 flex">
+        <div
+          className={`${!isSidebarCollapsed ? 'w-280px' : 'w-0'} flex h-screen flex-col items-center justify-center overflow-hidden bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
+        >
+          This is sidebar
+          <button type="button" onClick={expandSidebar} className="bg-teal-500">
+            Expand Toggle
+          </button>
+        </div>
+        <div
+          className={`flex ${isSidebarExpanded ? 'w-280px' : 'w-0'} h-screen items-center justify-center overflow-hidden bg-gray-400 text-white transition-all duration-300 ease-in-out`}
+        >
+          Expand Area
+        </div>
       </div>
       <div
-        className={`${isSidebarOpen ? 'w-280px' : 'w-0'} fixed z-50 flex h-screen flex-col items-center justify-center overflow-hidden bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
+        className={`${isSidebarExpanded ? 'ml-560px' : isSidebarOpen ? 'ml-280px' : 'ml-0'} bg-text-neutral-secondary p-20px text-center text-white transition-all duration-300 ease-in-out`}
       >
-        This is sidebar
+        This is header
       </div>
 
       {/* Info: (20240925 - Julian) Body */}
       <main
-        className={`${isSidebarOpen ? 'pl-280px' : 'pl-0'} flex w-screen flex-col overflow-y-auto bg-surface-neutral-main-background font-barlow transition-all duration-300 ease-in-out`}
+        className={`${isSidebarExpanded ? 'pl-560px' : isSidebarOpen ? 'pl-280px' : 'pl-0'} flex w-screen flex-col overflow-y-auto bg-surface-neutral-main-background font-barlow transition-all duration-300 ease-in-out`}
       >
         <NewVoucherForm />
       </main>