CAFECA-IO · Luphia · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.0+66",
+  "version": "0.8.0+68",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/add_account_title_modal/add_account_title_modal.tsx b/src/components/add_account_title_modal/add_account_title_modal.tsx
@@ -239,7 +239,6 @@ const AddAccountTitleModal = ({
               type="text"
               value={nameValue}
               onChange={handleNameChange}
-              // Info: (20240805 - Anna) placeholder="Enter name"
               placeholder={t('setting:SETTING.ENTER_NAME')}
               required
               className="rounded-md border border-input-stroke-input bg-transparent px-12px py-10px text-input-text-input-filled outline-none disabled:border-input-stroke-disable disabled:bg-input-surface-input-disable disabled:text-input-text-disable"

diff --git a/src/components/edit_account_title_modal/edit_account_title_modal.tsx b/src/components/edit_account_title_modal/edit_account_title_modal.tsx
@@ -247,7 +247,6 @@ const EditAccountTitleModal = ({
               type="text"
               value={nameValue}
               onChange={handleNameChange}
-              // Info: (20240805 - Anna) placeholder="Enter name"
               placeholder={t('setting:SETTING.ENTER_NAME')}
               className="rounded-md border border-input-stroke-input bg-transparent px-12px py-10px text-input-text-input-filled outline-none disabled:border-input-stroke-disable disabled:bg-input-surface-input-disable disabled:text-input-text-disable"
             />

diff --git a/src/components/new_journal_form/new_journal_form.tsx b/src/components/new_journal_form/new_journal_form.tsx
@@ -441,9 +441,8 @@ const NewJournalForm = () => {
     } else if (updateSuccess === false) {
       messageModalDataHandler({
         messageType: MessageType.ERROR,
-        // ToDo: (20240902 - Shirley) i18n
-        title: 'Update Invoice Failed',
-        content: `Update Invoice failed: ${updateCode}`,
+        title: t('journal:JOURNAL.UPDATE_INVOICE_FAILED'),
+        content: t('journal:JOURNAL.UPDATE_INVOICE_FAILED_CODE', { updateCode }),
         submitBtnStr: t('common:COMMON.CLOSE'),
         submitBtnFunction: messageModalVisibilityHandler,
       });

diff --git a/src/components/pending_report_item/pending_report_item.tsx b/src/components/pending_report_item/pending_report_item.tsx
@@ -81,10 +81,8 @@ const PendingReportItem = ({
   const deleteClickHandler = () => {
     messageModalDataHandler({
       title: '',
-      // ToDo: (20240902 - Shirley) i18n
-      subtitle: 'Are you sure\n you want to delete the process?',
-      content: `It will take 30 - 40 minutes\n
-      if you want to apply it again.`,
+      subtitle: t('report_401:MY_REPORTS_SECTION.DELETE_PROCESS'),
+      content: t('report_401:MY_REPORTS_SECTION.APPLY_AGAIN'),
       submitBtnStr: t('report_401:PENDING_REPORT_ITEM.YES_DELETE_IT'),
       submitBtnFunction: deleteItem,
       messageType: MessageType.WARNING,

diff --git a/src/components/pending_report_list/pending_report_list.tsx b/src/components/pending_report_list/pending_report_list.tsx
@@ -74,10 +74,8 @@ const PendingReportList = ({ reports }: IReportListProps) => {
 
     messageModalDataHandler({
       title: '',
-      // ToDo: (20240902 - Shirley) i18n
-      subtitle: 'Are you sure\n you want to delete the process?',
-      content: `It will take 30 - 40 minutes\n
-      if you want to apply it again.`,
+      subtitle: t('report_401:MY_REPORTS_SECTION.DELETE_PROCESS'),
+      content: t('report_401:MY_REPORTS_SECTION.APPLY_AGAIN'),
       submitBtnStr: t('report_401:PENDING_REPORT_ITEM.YES_DELETE_IT'),
       submitBtnFunction: deleteSelectedReports,
       messageType: MessageType.WARNING,

diff --git a/src/components/preview_invoice_modal/preview_invoice_modal.tsx b/src/components/preview_invoice_modal/preview_invoice_modal.tsx
@@ -41,9 +41,8 @@ const PreviewInvoiceModal = ({
   // Info: (20240508 - Julian) 下載
   const downloadClickHandler = () => {
     messageModalDataHandler({
-      // ToDo: (20240902 - Shirley) i18n
-      title: 'Download Selected Voucher',
-      content: 'Are you sure you want to download the selected items?',
+      title: t('journal:JOURNAL.DOWNLOAD_SELECTED_VOUCHER'),
+      content: t('journal:JOURNAL.DOWNLOAD_SELECTED_ITEMS'),
       messageType: MessageType.INFO,
       submitBtnStr: t('journal:JOURNAL.DOWNLOAD'),
       // ToDo: (20240508 - Julian) [Beta] 下載功能

diff --git a/src/components/salary_book_confirm_modal/salary_book_confirm_modal.tsx b/src/components/salary_book_confirm_modal/salary_book_confirm_modal.tsx
@@ -2,6 +2,7 @@ import { numberWithCommas, timestampToString } from '@/lib/utils/common';
 import Image from 'next/image';
 import { RxCross2 } from 'react-icons/rx';
 import { Button } from '@/components/button/button';
+import { useTranslation } from 'next-i18next';
 
 interface ISalaryBookConfirmModal {
   isModalVisible: boolean;
@@ -15,6 +16,7 @@ const SalaryBookConfirmModal = ({
   isModalVisible,
   modalVisibilityHandler,
 }: ISalaryBookConfirmModal) => {
+  const { t } = useTranslation(['common', 'salary']);
   // ToDo: (20240716 - Julian) [Beta] Replace with real data
   const type = 'Salary Bookkeeping';
   const dateTimestamp = 1705646390;
@@ -30,7 +32,6 @@ const SalaryBookConfirmModal = ({
 
     modalVisibilityHandler();
   };
-  // ToDo: (20240902 - Shirley) 整個的 i18n
   const isDisplayedModal = isModalVisible ? (
     <div className="fixed inset-0 z-70 flex items-center justify-center bg-black/50">
       <div className="relative flex w-90vw flex-col rounded-sm bg-surface-neutral-surface-lv2 py-16px font-barlow">
@@ -56,49 +57,50 @@ const SalaryBookConfirmModal = ({
         <div className="my-20px flex flex-col gap-y-16px bg-surface-neutral-main-background p-20px text-xs md:bg-transparent md:text-base">
           {/* Info: (20240716 - Julian) type */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Type</p>
+            <p className="text-text-neutral-secondary">{t('common:COMMON.TYPE')}</p>
             <p className="font-semibold text-text-brand-primary-lv2">{type}</p>
           </div>
           {/* Info: (20240716 - Julian) date */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Date</p>
+            <p className="text-text-neutral-secondary">{t('common:DATE_PICKER.DATE')}</p>
             <p className="font-semibold text-text-neutral-primary">
               {timestampToString(dateTimestamp).date}
             </p>
           </div>
           {/* Info: (20240716 - Julian) Employee */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Employee</p>
+            <p className="text-text-neutral-secondary">{t('common:COMMON.EMPLOYEE')}</p>
             <p className="font-semibold text-text-neutral-primary">{employeeName}</p>
           </div>
           {/* Info: (20240716 - Julian) Description */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Description</p>
+            <p className="text-text-neutral-secondary">{t('common:COMMON.DESCRIPTION')}</p>
             <p className="font-semibold text-text-neutral-primary">{description}</p>
           </div>
           {/* Info: (20240716 - Julian) Total Price */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Total Price</p>
+            <p className="text-text-neutral-secondary">{t('common:COMMON.TOTAL_PRICE')}</p>
             <p className="font-semibold text-text-neutral-primary">
-              {numberWithCommas(totalPrice)} <span className="text-text-neutral-tertiary">TWD</span>
+              {numberWithCommas(totalPrice)}{' '}
+              <span className="text-text-neutral-tertiary">{t('common:COMMON.TWD')}</span>
             </p>
           </div>
           {/* Info: (20240716 - Julian) Working hours */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Working hours for the period</p>
+            <p className="text-text-neutral-secondary">{t('salary:SALARY.WORKING_HOURS')}</p>
             <p className="font-semibold text-text-neutral-primary">{workingHours}</p>
           </div>
           {/* Info: (20240716 - Julian) Insurance Payments */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Insurance Payments</p>
+            <p className="text-text-neutral-secondary">{t('salary:SALARY.INSURANCE_PAYMENTS')}</p>
             <p className="font-semibold text-text-neutral-primary">
               {numberWithCommas(insurancePayments)}{' '}
-              <span className="text-text-neutral-tertiary">TWD</span>
+              <span className="text-text-neutral-tertiary">{t('common:COMMON.TWD')}</span>
             </p>
           </div>
           {/* Info: (20240716 - Julian) Payment Status */}
           <div className="flex w-full items-center justify-between">
-            <p className="text-text-neutral-secondary">Payment Status</p>
+            <p className="text-text-neutral-secondary">{t('common:COMMON.PAYMENT_STATUS')}</p>
             <p className="font-semibold text-text-neutral-primary">{paymentStatus}</p>
           </div>
         </div>
@@ -110,15 +112,15 @@ const SalaryBookConfirmModal = ({
             variant={null}
             onClick={modalVisibilityHandler}
           >
-            Cancel
+            {t('common:COMMON.CANCEL')}
           </Button>
           <Button
             id="salary-bookkeeping-confirm"
             type="button"
             variant="tertiary"
             onClick={confirmHandler}
           >
-            Confirm
+            {t('common:COMMON.CONFIRM')}
           </Button>
         </div>
       </div>

diff --git a/src/components/salary_record_form/salary_record_form.tsx b/src/components/salary_record_form/salary_record_form.tsx
@@ -110,13 +110,12 @@ const SalaryRecordForm = () => {
       </div>
     </div>
   );
-  // ToDo: (20240902 - Shirley) 整個 i18n
   const workingHoursPart = isRecordWorkingHours ? (
     <div className="grid grid-flow-row grid-cols-1 gap-x-60px gap-y-40px md:grid-cols-2">
       {/* Info: (20240715 - Julian) Working hours for the period */}
       <div className="flex w-full flex-1 flex-col items-start gap-8px">
         <p className="text-sm font-semibold text-input-text-primary">
-          Working hours for the period
+          {t('salary:SALARY.WORKING_HOURS')}
         </p>
         <NumericInput
           id="input-working-hours"
@@ -129,7 +128,7 @@ const SalaryRecordForm = () => {
       {/* Info: (20240715 - Julian) Number of Participating Projects */}
       <div className="flex w-full flex-1 flex-col items-start gap-8px">
         <p className="text-sm font-semibold text-input-text-primary">
-          Number of Participating Projects
+          {t('salary:SALARY.NUMBER_OF_PARTICIPATING_PROJECTS')}
         </p>
         <NumericInput
           id="input-participating-projects"
@@ -140,7 +139,9 @@ const SalaryRecordForm = () => {
       </div>
       {/* Info: (20240715 - Julian) iSunFA (hours) */}
       <div className="flex w-full flex-1 flex-col items-start gap-8px">
-        <p className="text-sm font-semibold text-input-text-primary">iSunFA (hours)</p>
+        <p className="text-sm font-semibold text-input-text-primary">
+          {t('salary:SALARY.ISUNFA_HOURS')}
+        </p>
         <NumericInput
           id="input-isunfa-hours"
           value={isunfaHours}
@@ -151,7 +152,9 @@ const SalaryRecordForm = () => {
       </div>
       {/* Info: (20240715 - Julian) Routine work (hours) */}
       <div className="flex w-full flex-1 flex-col items-start gap-8px">
-        <p className="text-sm font-semibold text-input-text-primary">Routine work (hours)</p>
+        <p className="text-sm font-semibold text-input-text-primary">
+          {t('salary:SALARY.ROUTINE_WORK_HOURS')}
+        </p>
         <NumericInput
           id="input-routine-work-hours"
           value={routineWorkHours}
@@ -164,7 +167,7 @@ const SalaryRecordForm = () => {
   ) : (
     <div className="my-20px flex items-center gap-x-8px text-base text-text-brand-secondary-lv2">
       <div className="h-8px w-8px rounded-full bg-surface-support-strong-maple"></div>
-      <p> Working hours for the period : {workingHours} pts</p>
+      <p>{t('salary:SALARY.WORKING_HOURS_PERIOD', { workingHours })}</p>
     </div>
   );
 
@@ -174,7 +177,7 @@ const SalaryRecordForm = () => {
       <div className="flex items-center gap-4 font-medium">
         <div className="flex items-center gap-2 text-sm text-divider-text-lv-1">
           <Image src="/icons/record.svg" width={16} height={16} alt="record_icon" />
-          <p>Create new payroll records</p>
+          <p>{t('salary:SALARY.CREATE_NEW_PAYROLL_RECORDS')}</p>
         </div>
         <hr className="flex-1 border-divider-stroke-lv-3" />
       </div>
@@ -195,7 +198,9 @@ const SalaryRecordForm = () => {
           </div>
           {/* Info: (20240715 - Julian) Departments */}
           <div className="relative flex w-full flex-col items-start gap-8px md:w-200px">
-            <p className="text-sm font-semibold text-input-text-primary">Departments</p>
+            <p className="text-sm font-semibold text-input-text-primary">
+              {t('common:COMMON.DEPARTMENTS')}
+            </p>
             <div
               id="dropdown-department"
               onClick={departmentToggleHandler}
@@ -210,14 +215,16 @@ const SalaryRecordForm = () => {
           </div>
           {/* Info: (20240715 - Julian) Employee */}
           <div className="flex w-full flex-1 flex-col items-start gap-8px">
-            <p className="text-sm font-semibold text-input-text-primary">Employee</p>
+            <p className="text-sm font-semibold text-input-text-primary">
+              {t('common:COMMON.EMPLOYEE')}
+            </p>
             <input
               id="input-employee-name"
               type="text"
               className="h-44px w-full rounded-sm border border-input-stroke-input bg-input-surface-input-background px-12px outline-none placeholder:text-input-text-input-placeholder"
               value={employeeName}
               onChange={nameChangeHandler}
-              placeholder="Employee Name"
+              placeholder={t('common:COMMON.EMPLOYEE_NAME')}
               required
             />
           </div>
@@ -226,7 +233,9 @@ const SalaryRecordForm = () => {
         <div className="flex flex-col items-end gap-x-60px gap-y-24px md:flex-row">
           {/* Info: (20240715 - Julian) Salary */}
           <div className="flex w-full flex-1 flex-col items-start gap-8px">
-            <p className="text-sm font-semibold text-input-text-primary">Salary</p>
+            <p className="text-sm font-semibold text-input-text-primary">
+              {t('salary:SALARY.SALARY')}
+            </p>
             <NumericInput
               id="input-salary-amount"
               value={salaryAmount}
@@ -238,7 +247,9 @@ const SalaryRecordForm = () => {
           </div>
           {/* Info: (20240715 - Julian) Bonus */}
           <div className="flex w-full flex-1 flex-col items-start gap-8px">
-            <p className="text-sm font-semibold text-input-text-primary">Bonus</p>
+            <p className="text-sm font-semibold text-input-text-primary">
+              {t('salary:SALARY.BONUS')}
+            </p>
             <NumericInput
               id="input-bonus-amount"
               value={bonusAmount}
@@ -251,7 +262,9 @@ const SalaryRecordForm = () => {
         </div>
         {/* Info: (20240715 - Julian) Third Column */}
         <div className="flex flex-col gap-8px">
-          <p className="text-sm font-semibold text-input-text-primary">Insurance Payments</p>
+          <p className="text-sm font-semibold text-input-text-primary">
+            {t('salary:SALARY.INSURANCE_PAYMENTS')}
+          </p>
           <div className="flex h-46px w-full items-center justify-between divide-x divide-input-stroke-input rounded-sm border border-input-stroke-input bg-input-surface-input-background">
             <NumericInput
               id="input-insurance-payments"
@@ -281,7 +294,9 @@ const SalaryRecordForm = () => {
         </div>
         {/* Info: (20240715 - Julian) Fourth Column */}
         <div className="flex flex-col gap-8px">
-          <p className="text-sm font-semibold text-input-text-primary">Description</p>
+          <p className="text-sm font-semibold text-input-text-primary">
+            {t('common:COMMON.DESCRIPTION')}
+          </p>
           <input
             id="input-description"
             value={description}
@@ -295,7 +310,7 @@ const SalaryRecordForm = () => {
       <div className="mt-20px flex items-center gap-4 font-medium">
         <div className="flex items-center gap-2 text-sm text-divider-text-lv-1">
           <Image src="/icons/work.svg" width={16} height={16} alt="work_icon" />
-          <p>Working hours</p>
+          <p>{t('salary:SALARY.WORKING_HOURS_ALONE')}</p>
         </div>
         <hr className="flex-1 border-divider-stroke-lv-3" />
       </div>
@@ -304,20 +319,15 @@ const SalaryRecordForm = () => {
         {/* Info: (20240716 - Julian) Toggle */}
         <div className="flex flex-col gap-y-8px">
           <div className="flex items-center gap-x-16px text-switch-text-primary">
-            <p>Record Working hours</p>
+            <p>{t('salary:SALARY.RECORD_WORKING_HOURS')}</p>
             <Toggle
               id="toggle-record-working-hours"
               initialToggleState={isRecordWorkingHours}
               getToggledState={recordWorkingHoursHandler}
             />
           </div>
           <p className="text-xs text-text-brand-secondary-lv2">
-            iSUNFA Working Hours enables you to accurately calculate employee working hours. By
-            entering the hours and calculating project labor costs based on percentages, you can
-            allocate work hours to specific projects. If no hours are entered, all work hours will
-            be recorded as regular work, and individual project costs cannot be calculated
-            separately. Regardless of whether hours are entered, an accounting voucher will be
-            issued.
+            {t('salary:SALARY.DESCRIPTION_OF_WORKING_HOURS')}
           </p>
         </div>
         {/* Info: (20240716 - Julian) Inputs */}
@@ -326,10 +336,10 @@ const SalaryRecordForm = () => {
       {/* Info: (20240715 - Julian) Hours */}
       <div className="ml-auto mt-20px flex items-center gap-24px">
         <Button type="button" variant={null} onClick={cancelHandler}>
-          Cancel
+          {t('common:COMMON.CANCEL')}
         </Button>
         <Button type="submit" variant="default" disabled={disableSubmit}>
-          Submit
+          {t('common:CONTACT_US.SUBMIT')}
         </Button>
       </div>
     </form>