feat: update to use translation function with English fallbacks

zendesk · Feb 11, 2025 · 9ae1976 · 9ae1976
1 parent e574128
commit 9ae1976
Show file tree

Hide file tree

Showing 10 changed files with 490 additions and 98 deletions.
diff --git a/assets/approval-requests-bundle.js b/assets/approval-requests-bundle.js
diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
diff --git a/src/modules/approval-requests/ApprovalRequestListPage.tsx b/src/modules/approval-requests/ApprovalRequestListPage.tsx
@@ -1,4 +1,5 @@
 import { memo, useState, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MD, XXL } from "@zendeskgarden/react-typography";
 import { getColorV8 } from "@zendeskgarden/react-theming";
@@ -35,6 +36,7 @@ function ApprovalRequestListPage({
   baseLocale,
   helpCenterPath,
 }: ApprovalRequestListPageProps) {
+  const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState("");
   const [sortDirection, setSortDirection] = useState<SortDirection>(undefined);
   const {
@@ -82,15 +84,20 @@ function ApprovalRequestListPage({
 
   return (
     <Container>
-      <XXL isBold>Approval requests</XXL>
+      <XXL isBold>
+        {t("approval-requests.list.header", "Approval requests")}
+      </XXL>
       <ApprovalRequestListFilters
         approvalRequestStatus={approvalRequestStatus}
         setApprovalRequestStatus={setApprovalRequestStatus}
         setSearchTerm={setSearchTerm}
       />
       {approvalRequests.length === 0 ? (
         <NoApprovalRequestsText>
-          No approval requests found.
+          {t(
+            "approval-requests.list.no-requests",
+            "No approval requests found."
+          )}
         </NoApprovalRequestsText>
       ) : (
         <ApprovalRequestListTable

diff --git a/...modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx b/...modules/approval-requests/components/approval-request-list/ApprovalRequestListFilters.tsx
@@ -6,6 +6,7 @@ import {
   useMemo,
 } from "react";
 import styled from "styled-components";
+import { useTranslation } from "react-i18next";
 import debounce from "lodash.debounce";
 import SearchIcon from "@zendeskgarden/svg-icons/src/16/search-stroke.svg";
 import {
@@ -59,6 +60,8 @@ function ApprovalRequestListFilters({
   setApprovalRequestStatus,
   setSearchTerm,
 }: ApprovalRequestListFiltersProps) {
+  const { t } = useTranslation();
+
   const handleChange = useCallback<NonNullable<IComboboxProps["onChange"]>>(
     (changes) => {
       if (!changes.selectionValue) {
@@ -88,27 +91,54 @@ function ApprovalRequestListFilters({
   return (
     <FiltersContainer>
       <SearchField>
-        <Label hidden>Search approval requests</Label>
+        <Label hidden>
+          {t(
+            "approval-requests.list.search-placeholder",
+            "Search approval requests"
+          )}
+        </Label>
         <MediaInput
           start={<SearchIcon />}
-          placeholder="Search approval requests"
+          placeholder={t(
+            "approval-requests.list.search-placeholder",
+            "Search approval requests"
+          )}
           onChange={handleSearch}
         />
       </SearchField>
       <DropdownFilterField>
-        <Label>Status:</Label>
+        <Label>
+          {t("approval-requests.list.status-dropdown.label", "Status:")}
+        </Label>
         <Combobox
           isEditable={false}
           onChange={handleChange}
           selectionValue={approvalRequestStatus}
           inputValue={ApprovalRequestStatusInputMap[approvalRequestStatus]}
         >
-          <Option value="any" label="Any" />
-          <Option value="active" label="Decision pending" />
-          {/* <Option value="clarification_requested" label="Info needed" /> */}
-          <Option value="approved" label="Approved" />
-          <Option value="rejected" label="Denied" />
-          <Option value="withdrawn" label="Withdrawn" />
+          <Option
+            value="any"
+            label={t("approval-requests.list.status-dropdown.any", "Any")}
+          />
+          <Option
+            value="active"
+            label={t(
+              "approval-requests.status.decision-pending",
+              "Decision pending"
+            )}
+          />
+          <Option
+            value="approved"
+            label={t("approval-requests.status.approved", "Approved")}
+          />
+          <Option
+            value="rejected"
+            label={t("approval-requests.status.denied", "Denied")}
+          />
+          <Option
+            value="withdrawn"
+            label={t("approval-requests.status.withdrawn", "Withdrawn")}
+          />
         </Combobox>
       </DropdownFilterField>
     </FiltersContainer>

diff --git a/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListTable.tsx b/src/modules/approval-requests/components/approval-request-list/ApprovalRequestListTable.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 import styled from "styled-components";
+import { useTranslation } from "react-i18next";
 import {
   Table,
   Head,
@@ -45,6 +46,8 @@ function ApprovalRequestListTable({
   sortDirection,
   onSortChange,
 }: ApprovalRequestListTableProps) {
+  const { t } = useTranslation();
+
   const handleSortClick = () => {
     if (sortDirection === "asc") {
       onSortChange("desc");
@@ -60,18 +63,27 @@ function ApprovalRequestListTable({
       <Head>
         <HeaderRow>
           <HeaderCell width="40%" isTruncated>
-            Subject
+            {t("approval-requests.list.table.subject", "Subject")}
+          </HeaderCell>
+          <HeaderCell isTruncated>
+            {t("approval-requests.list.table.requester", "Requester")}
+          </HeaderCell>
+          <HeaderCell isTruncated>
+            {t("approval-requests.list.table.sent-by", "Sent by")}
           </HeaderCell>
-          <HeaderCell isTruncated>Requester</HeaderCell>
-          <HeaderCell isTruncated>Sent by</HeaderCell>
           <SortableCell
             onClick={handleSortClick}
             sort={sortDirection}
             cellProps={sortableCellProps}
           >
-            Sent on
+            {t("approval-requests.list.table.sent-on", "Sent on")}
           </SortableCell>
-          <HeaderCell isTruncated>Approval status</HeaderCell>
+          <HeaderCell isTruncated>
+            {t(
+              "approval-requests.list.table.approval-status",
+              "Approval status"
+            )}
+          </HeaderCell>
         </HeaderRow>
       </Head>
       <Body>

diff --git a/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 import styled from "styled-components";
+import { useTranslation } from "react-i18next";
 import { MD } from "@zendeskgarden/react-typography";
 import { getColorV8 } from "@zendeskgarden/react-theming";
 import { Grid, Row, Col } from "@zendeskgarden/react-grid";
@@ -38,22 +39,37 @@ function ApprovalRequestDetails({
   approvalRequest,
   baseLocale,
 }: ApprovalRequestDetailsProps) {
+  const { t } = useTranslation();
+
   return (
     <Container>
       <ApprovalRequestHeader isBold>
-        Approval request details
+        {t(
+          "approval-requests.request.approval-request-details.header",
+          "Approval request details"
+        )}
       </ApprovalRequestHeader>
       <DetailRow>
         <Col size={4}>
-          <FieldLabel>Sent by</FieldLabel>
+          <FieldLabel>
+            {t(
+              "approval-requests.request.approval-request-details.sent-by",
+              "Sent by"
+            )}
+          </FieldLabel>
         </Col>
         <Col size={8}>
           <MD>{approvalRequest.created_by_user.name}</MD>
         </Col>
       </DetailRow>
       <DetailRow>
         <Col size={4}>
-          <FieldLabel>Sent on</FieldLabel>
+          <FieldLabel>
+            {t(
+              "approval-requests.request.approval-request-details.sent-on",
+              "Sent on"
+            )}
+          </FieldLabel>
         </Col>
         <Col size={8}>
           <MD>
@@ -63,15 +79,25 @@ function ApprovalRequestDetails({
       </DetailRow>
       <DetailRow>
         <Col size={4}>
-          <FieldLabel>Approver</FieldLabel>
+          <FieldLabel>
+            {t(
+              "approval-requests.request.approval-request-details.approver",
+              "Approver"
+            )}
+          </FieldLabel>
         </Col>
         <Col size={8}>
           <MD>{approvalRequest.assignee_user.name}</MD>
         </Col>
       </DetailRow>
       <DetailRow>
         <Col size={4}>
-          <FieldLabel>Status</FieldLabel>
+          <FieldLabel>
+            {t(
+              "approval-requests.request.approval-request-details.status",
+              "Status"
+            )}
+          </FieldLabel>
         </Col>
         <Col size={8}>
           <MD>
@@ -82,7 +108,12 @@ function ApprovalRequestDetails({
       {approvalRequest.decision_notes.length > 0 && (
         <DetailRow>
           <Col size={4}>
-            <FieldLabel>Comment</FieldLabel>
+            <FieldLabel>
+              {t(
+                "approval-requests.request.approval-request-details.comment",
+                "Comment"
+              )}
+            </FieldLabel>
           </Col>
           <Col size={8}>
             <MD>{approvalRequest.decision_notes[0]}</MD>
@@ -92,7 +123,16 @@ function ApprovalRequestDetails({
       {approvalRequest.decided_at && (
         <DetailRow>
           <Col size={4}>
-            <FieldLabel>Decided</FieldLabel>
+            <FieldLabel>
+              {t(
+                approvalRequest.status === "withdrawn"
+                  ? "approval-requests.request.approval-request-details.withdrawn-on"
+                  : "approval-requests.request.approval-request-details.decided",
+                approvalRequest.status === "withdrawn"
+                  ? "Withdrawn on"
+                  : "Decided"
+              )}
+            </FieldLabel>
           </Col>
           <Col size={8}>
             <MD>