Skip to content

Commit b194db9

Browse files
filipKovachevfilipKovachev
committed
add translation
split translation into messages add missing translation add missing thank you messages
1 parent 09402e6 commit b194db9

22 files changed

+2203
-572
lines changed

‎examples/ecommerce-jewellery-store/src/App.tsx‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
22
import Header from "./components/Header";
33
import Footer from "./components/Footer";
4+
import { ShoppingCartList } from "./components/ShoppingCartList";
45
import Contacts from "./pages/Contacts";
56
import ThankYou from "./pages/ThankYou";
67
import PaymentDetails from "./pages/PaymentDetails";
@@ -14,35 +15,37 @@ import { CartProvider } from "./helpers/CartContext";
1415
import { AdminProvider } from './helpers/AdminContext';
1516
import { CategoriesProvider } from './helpers/CategoriesContext';
1617
import { ThemeProvider } from './helpers/ThemeContext';
17-
import { ShoppingCartList } from "./components/ShoppingCartList";
18+
import { LanguageProvider } from "./helpers/LanguageContext";
1819

1920
function App() {
2021
return (
21-
<ThemeProvider>
22-
<CartProvider>
23-
<AdminProvider>
24-
<CategoriesProvider>
25-
<Router basename="/kendo-react/ecommerce-jewellery-store">
26-
<Header />
27-
<SizedParent>
28-
<Routes>
29-
<Route path="/" element={<Home />} />
30-
<Route path="/paymentdetails" element={<PaymentDetails />} />
31-
<Route path="/thankyou" element={<ThankYou />} />
32-
<Route path="/contacts" element={<Contacts />} />
33-
<Route path="/products" element={<AllProductsListView />} />
34-
<Route path="/category" element={<DetailedCategory />} />
35-
<Route path="/product/:id" element={<ProductDetails />} />
36-
<Route path="/shoppingcart" element={<ShoppingCartList />} />
37-
</Routes>
38-
</SizedParent>
39-
<Footer />
40-
</Router>
41-
</CategoriesProvider>
42-
</AdminProvider>
43-
</CartProvider>
44-
</ThemeProvider>
22+
<LanguageProvider>
23+
<ThemeProvider>
24+
<CartProvider>
25+
<AdminProvider>
26+
<CategoriesProvider>
27+
<Router basename="/kendo-react/ecommerce-jewellery-store">
28+
<Header />
29+
<SizedParent>
30+
<Routes>
31+
<Route path="/" element={<Home />} />
32+
<Route path="/paymentdetails" element={<PaymentDetails />} />
33+
<Route path="/thankyou" element={<ThankYou />} />
34+
<Route path="/contacts" element={<Contacts />} />
35+
<Route path="/products" element={<AllProductsListView />} />
36+
<Route path="/category" element={<DetailedCategory />} />
37+
<Route path="/product/:id" element={<ProductDetails />} />
38+
<Route path="/shoppingcart" element={<ShoppingCartList />} />
39+
</Routes>
40+
</SizedParent>
41+
<Footer />
42+
</Router>
43+
</CategoriesProvider>
44+
</AdminProvider>
45+
</CartProvider>
46+
</ThemeProvider>
47+
</LanguageProvider>
4548
);
4649
}
4750

48-
export default App;
51+
export default App;

‎examples/ecommerce-jewellery-store/src/components/AdminView.tsx‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react';
2-
import { getter } from '@progress/kendo-react-common';
1+
import * as React from "react";
2+
import { getter } from "@progress/kendo-react-common";
33
import {
44
Grid,
55
GridColumn,
@@ -10,16 +10,21 @@ import {
1010
getSelectedStateFromKeyDown,
1111
GridSortChangeEvent,
1212
GridPageChangeEvent,
13-
} from '@progress/kendo-react-grid';
13+
} from "@progress/kendo-react-grid";
1414
import {
1515
ChartWizard,
1616
ChartWizardDataRow,
1717
getWizardDataFromGridSelection,
18-
} from '@progress/kendo-react-chart-wizard';
19-
import { Button } from '@progress/kendo-react-buttons';
20-
import { orderBy } from '@progress/kendo-data-query';
21-
import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
22-
import { sampleData } from '../data/shared-gd-sampleChartData';
18+
} from "@progress/kendo-react-chart-wizard";
19+
import { Button } from "@progress/kendo-react-buttons";
20+
import { orderBy } from "@progress/kendo-data-query";
21+
import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
22+
import { sampleData } from "../data/shared-gd-sampleChartData";
23+
import { useLanguageContext } from "../helpers/LanguageContext";
24+
import { LocalizationProvider, loadMessages } from "@progress/kendo-react-intl";
25+
import esMessages from "../data/messages/es";
26+
import frMessages from "../data/messages/fr";
27+
import enMessages from "../data/messages/en";
2328

2429
interface SampleDataItem {
2530
ID: string;
@@ -33,8 +38,8 @@ interface SampleDataItem {
3338
URL: string;
3439
}
3540

36-
const DATA_ITEM_KEY = 'ID';
37-
const SELECTED_FIELD = 'selected';
41+
const DATA_ITEM_KEY = "ID";
42+
const SELECTED_FIELD = "selected";
3843
const idGetter = getter(DATA_ITEM_KEY);
3944

4045
interface SelectedState {
@@ -44,15 +49,27 @@ interface SelectedState {
4449
const AdminView: React.FC = () => {
4550
const gridRef = React.useRef<GridHandle>(null);
4651
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
47-
const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
48-
{ field: 'Sales', dir: 'desc' },
52+
const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
53+
{ field: "Sales", dir: "desc" },
4954
]);
5055
const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
5156
const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
5257
const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
5358
const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
5459
const [page, setPage] = React.useState<{ skip: number; take: number }>({ skip: 0, take: 4 });
5560

61+
const { t, language } = useLanguageContext();
62+
63+
React.useEffect(() => {
64+
if (language === "es") {
65+
loadMessages(esMessages, "es");
66+
} else if (language === "fr") {
67+
loadMessages(frMessages, "fr");
68+
} else {
69+
loadMessages(enMessages, "en");
70+
}
71+
}, [language]);
72+
5673
const data = sampleData.map((item) => ({
5774
...item,
5875
[SELECTED_FIELD]: selectedState[idGetter(item)],
@@ -96,7 +113,7 @@ const AdminView: React.FC = () => {
96113
setChartData(chartWizardData);
97114
setShowChartWizard(true);
98115
} else {
99-
console.error('Grid reference is not available.');
116+
console.error("Grid reference is not available.");
100117
}
101118
}, [selectedState]);
102119

@@ -111,8 +128,8 @@ const AdminView: React.FC = () => {
111128
const sortedTop3Sales = selectedData
112129
.sort(
113130
(a, b) =>
114-
b.find((field) => field.field === 'Total Sales')?.value -
115-
a.find((field) => field.field === 'Total Sales')?.value
131+
b.find((field) => field.field === "Total Sales")?.value -
132+
a.find((field) => field.field === "Total Sales")?.value
116133
)
117134
.slice(0, 3);
118135

@@ -127,29 +144,30 @@ const AdminView: React.FC = () => {
127144
const imageUrl = field && field in dataItem ? (dataItem as Record<string, any>)[field] : dataItem.URL;
128145
return (
129146
<td>
130-
<img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
147+
<img src={imageUrl} alt="Product" style={{ width: "100px", height: "auto" }} />
131148
</td>
132149
);
133150
};
134151

135152
return (
136-
<>
137-
<div style={{ marginBottom: '10px' }}>
153+
<LocalizationProvider language={language}>
154+
<div style={{ marginBottom: "10px" }}>
138155
<Button
139156
svgIcon={chartAreaStackedIcon}
140157
onClick={handleSelectedChart}
141158
disabled={disabled}
142-
style={{ marginRight: '10px' }}
159+
style={{ marginRight: "10px" }}
143160
>
144-
Chart of Selected Data
161+
{t.chartSelectedDataButton}
145162
</Button>
146163
<Button svgIcon={chartAreaStackedIcon} onClick={handleTop3Sales}>
147-
Top 3 Sales per Category
164+
{t.top3SalesButton}
148165
</Button>
149166
</div>
150167
<Grid
168+
key={language}
151169
ref={gridRef}
152-
style={{ height: '500px' }}
170+
style={{ height: "500px" }}
153171
data={pagedData}
154172
dataItemKey={DATA_ITEM_KEY}
155173
selectedField={SELECTED_FIELD}
@@ -161,24 +179,24 @@ const AdminView: React.FC = () => {
161179
selectable={{
162180
enabled: true,
163181
drag: true,
164-
mode: 'multiple',
182+
mode: "multiple",
165183
}}
166184
navigatable={true}
167185
onSelectionChange={onSelectionChange}
168186
onKeyDown={onKeyDown}
169187
sortable={true}
170188
sort={sort}
171189
onSortChange={(e: GridSortChangeEvent) => {
172-
setSort(e.sort as { field: string; dir: 'asc' | 'desc' }[]);
190+
setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
173191
}}
174192
>
175-
<GridColumn field="URL" title="Product" cell={URLImageCell} />
176-
<GridColumn field="Product" title="Name" />
177-
<GridColumn field="SKU" title="SKU" />
178-
<GridColumn field="Category" title="Category" />
179-
<GridColumn field="Price" title="Price" />
180-
<GridColumn field="Quantity" title="Quantity" />
181-
<GridColumn field="Sales" title="Total Sales" />
193+
<GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
194+
<GridColumn field="Product" title={t.grid.nameTitle} />
195+
<GridColumn field="SKU" title={t.grid.skuTitle} />
196+
<GridColumn field="Category" title={t.grid.categoryTitle} />
197+
<GridColumn field="Price" title={t.grid.priceTitle} />
198+
<GridColumn field="Quantity" title={t.grid.quantityTitle} />
199+
<GridColumn field="Sales" title={t.grid.totalSalesTitle} />
182200
</Grid>
183201

184202
{showChartWizard && (
@@ -194,7 +212,7 @@ const AdminView: React.FC = () => {
194212
onClose={() => setTop3Visible(false)}
195213
/>
196214
)}
197-
</>
215+
</LocalizationProvider>
198216
);
199217
};
200218

‎examples/ecommerce-jewellery-store/src/components/CategoryList.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
21
import { useNavigate } from "react-router-dom";
32
import { CategoryListProps } from "../data/types";
43
import { Button } from "@progress/kendo-react-buttons";
54
import { CardDescriptor } from "../data/types";
5+
import { useLanguageContext } from "../helpers/LanguageContext";
66

77
export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitle, colSpan = 4 }) => {
88
const navigate = useNavigate();
9+
const { t } = useLanguageContext();
910

1011
const onNavigate = (card: CardDescriptor) => {
1112
if (card.collectionText === `Collection "AURELIA"`) {
12-
navigate("/category")
13+
navigate("/category");
1314
}
14-
}
15+
};
1516

1617
return (
1718
<>
@@ -48,7 +49,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
4849
}}
4950
>
5051
<Button themeColor={"primary"} size={"large"} onClick={() => onNavigate(card)}>
51-
Buy Now
52+
{t.buyNowButtonText}
5253
</Button>
5354
</div>
5455
</div>
@@ -57,4 +58,4 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
5758
</div>
5859
</>
5960
);
60-
}
61+
};

‎examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,23 @@ import { SvgIcon } from "@progress/kendo-react-common";
44
import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
55
import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
66
import { useCategoriesContext } from "../helpers/CategoriesContext";
7-
8-
const chips = ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"];
9-
const statuses = ["Sale", "Recommended", "Must Have"];
10-
const materials = ["Gold", "Silver"];
7+
import { useLanguageContext } from "../helpers/LanguageContext";
118

129
interface FilterComponentProps {
1310
updateUI: (state: State) => void;
1411
}
1512

1613
export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) => {
1714
const { selectedCategory, setSelectedCategory } = useCategoriesContext();
15+
const { t } = useLanguageContext();
16+
1817
const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
19-
const [statusValue, setStatusValue] = React.useState<string>("Recommended");
20-
const [materialValue, setMaterialValue] = React.useState<string>("Material");
18+
const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
19+
const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);
20+
21+
const chips = t.categoriesData || [];
22+
const statuses = t.statusesData || [];
23+
const materials = t.materialsData || [];
2124

2225
useEffect(() => {
2326
if (selectedCategory) {
@@ -96,8 +99,8 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
9699

97100
const clearFilters = () => {
98101
setCategoryValue([]);
99-
setStatusValue("Recommended");
100-
setMaterialValue("Material");
102+
setStatusValue(t.statusRecommended);
103+
setMaterialValue(t.materialPlaceholder);
101104
setSelectedCategory(null);
102105
updateUI({ filter: undefined, sort: undefined });
103106
};
@@ -106,13 +109,13 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
106109
<section className="k-d-flex k-justify-content-between k-align-items-center">
107110
<span className="k-d-flex k-align-items-center">
108111
<span className="k-d-flex k-align-items-center k-pr-2">
109-
<SvgIcon icon={filterIcon}></SvgIcon> Filter:
112+
<SvgIcon icon={filterIcon}></SvgIcon> {t.filterLabel}
110113
</span>
111114
<span className="k-pr-2">
112115
<MultiSelect
113116
data={chips}
114117
value={categoryValue}
115-
placeholder="Category"
118+
placeholder={t.categoryPlaceholder}
116119
onChange={onCategoryChange}
117120
style={{ minWidth: "119px" }}
118121
/>
@@ -123,13 +126,14 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
123126
</span>
124127
<span className="k-d-flex k-align-items-center">
125128
<span className="k-d-flex k-align-items-center k-pr-2">
126-
<SvgIcon icon={sortAscIcon}></SvgIcon> Sort by:
129+
<SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
127130
</span>
128131
<span>
129132
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
130133
</span>
131134
</span>
132-
<button className="k-button k-button-flat" onClick={clearFilters}>Clear Filters</button>
135+
<button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
133136
</section>
134137
);
135138
};
139+

0 commit comments

Comments
 (0)