Skip to content

Commit

Permalink
add translation
Browse files Browse the repository at this point in the history 
split translation into messages

add missing translation

add missing thank you messages

resolve TS error
  • Loading branch information
@filipKovachev
filipKovachev committed Dec 2, 2024
1 parent 09402e6 commit d05ac3a
Show file tree
Hide file tree
Showing 22 changed files with 2,206 additions and 573 deletions.
55 changes: 29 additions & 26 deletions examples/ecommerce-jewellery-store/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import { ShoppingCartList } from "./components/ShoppingCartList";
import Contacts from "./pages/Contacts";
import ThankYou from "./pages/ThankYou";
import PaymentDetails from "./pages/PaymentDetails";
Expand All @@ -14,35 +15,37 @@ import { CartProvider } from "./helpers/CartContext";
import { AdminProvider } from './helpers/AdminContext';
import { CategoriesProvider } from './helpers/CategoriesContext';
import { ThemeProvider } from './helpers/ThemeContext';
import { ShoppingCartList } from "./components/ShoppingCartList";
import { LanguageProvider } from "./helpers/LanguageContext";

function App() {
return (
<ThemeProvider>
<CartProvider>
<AdminProvider>
<CategoriesProvider>
<Router basename="/kendo-react/ecommerce-jewellery-store">
<Header />
<SizedParent>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/paymentdetails" element={<PaymentDetails />} />
<Route path="/thankyou" element={<ThankYou />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="/products" element={<AllProductsListView />} />
<Route path="/category" element={<DetailedCategory />} />
<Route path="/product/:id" element={<ProductDetails />} />
<Route path="/shoppingcart" element={<ShoppingCartList />} />
</Routes>
</SizedParent>
<Footer />
</Router>
</CategoriesProvider>
</AdminProvider>
</CartProvider>
</ThemeProvider>
<LanguageProvider>
<ThemeProvider>
<CartProvider>
<AdminProvider>
<CategoriesProvider>
<Router basename="/kendo-react/ecommerce-jewellery-store">
<Header />
<SizedParent>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/paymentdetails" element={<PaymentDetails />} />
<Route path="/thankyou" element={<ThankYou />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="/products" element={<AllProductsListView />} />
<Route path="/category" element={<DetailedCategory />} />
<Route path="/product/:id" element={<ProductDetails />} />
<Route path="/shoppingcart" element={<ShoppingCartList />} />
</Routes>
</SizedParent>
<Footer />
</Router>
</CategoriesProvider>
</AdminProvider>
</CartProvider>
</ThemeProvider>
</LanguageProvider>
);
}

export default App;
export default App;
82 changes: 50 additions & 32 deletions examples/ecommerce-jewellery-store/src/components/AdminView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { getter } from '@progress/kendo-react-common';
import * as React from "react";
import { getter } from "@progress/kendo-react-common";
import {
Grid,
GridColumn,
Expand All @@ -10,16 +10,21 @@ import {
getSelectedStateFromKeyDown,
GridSortChangeEvent,
GridPageChangeEvent,
} from '@progress/kendo-react-grid';
} from "@progress/kendo-react-grid";
import {
ChartWizard,
ChartWizardDataRow,
getWizardDataFromGridSelection,
} from '@progress/kendo-react-chart-wizard';
import { Button } from '@progress/kendo-react-buttons';
import { orderBy } from '@progress/kendo-data-query';
import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
import { sampleData } from '../data/shared-gd-sampleChartData';
} from "@progress/kendo-react-chart-wizard";
import { Button } from "@progress/kendo-react-buttons";
import { orderBy } from "@progress/kendo-data-query";
import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
import { sampleData } from "../data/shared-gd-sampleChartData";
import { useLanguageContext } from "../helpers/LanguageContext";
import { LocalizationProvider, loadMessages } from "@progress/kendo-react-intl";
import esMessages from "../data/messages/es";
import frMessages from "../data/messages/fr";
import enMessages from "../data/messages/en";

interface SampleDataItem {
ID: string;
Expand All @@ -33,8 +38,8 @@ interface SampleDataItem {
URL: string;
}

const DATA_ITEM_KEY = 'ID';
const SELECTED_FIELD = 'selected';
const DATA_ITEM_KEY = "ID";
const SELECTED_FIELD = "selected";
const idGetter = getter(DATA_ITEM_KEY);

interface SelectedState {
Expand All @@ -44,15 +49,27 @@ interface SelectedState {
const AdminView: React.FC = () => {
const gridRef = React.useRef<GridHandle>(null);
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
{ field: 'Sales', dir: 'desc' },
const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
{ field: "Sales", dir: "desc" },
]);
const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
const [page, setPage] = React.useState<{ skip: number; take: number }>({ skip: 0, take: 4 });

const { t, language } = useLanguageContext();

React.useEffect(() => {
if (language === "es") {
loadMessages(esMessages, "es");
} else if (language === "fr") {
loadMessages(frMessages, "fr");
} else {
loadMessages(enMessages, "en");
}
}, [language]);

const data = sampleData.map((item) => ({
...item,
[SELECTED_FIELD]: selectedState[idGetter(item)],
Expand Down Expand Up @@ -96,7 +113,7 @@ const AdminView: React.FC = () => {
setChartData(chartWizardData);
setShowChartWizard(true);
} else {
console.error('Grid reference is not available.');
console.error("Grid reference is not available.");
}
}, [selectedState]);

Expand All @@ -111,8 +128,8 @@ const AdminView: React.FC = () => {
const sortedTop3Sales = selectedData
.sort(
(a, b) =>
b.find((field) => field.field === 'Total Sales')?.value -
a.find((field) => field.field === 'Total Sales')?.value
b.find((field) => field.field === "Total Sales")?.value -
a.find((field) => field.field === "Total Sales")?.value
)
.slice(0, 3);

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

return (
<>
<div style={{ marginBottom: '10px' }}>
<LocalizationProvider language={language}>
<div style={{ marginBottom: "10px" }}>
<Button
svgIcon={chartAreaStackedIcon}
onClick={handleSelectedChart}
disabled={disabled}
style={{ marginRight: '10px' }}
style={{ marginRight: "10px" }}
>
Chart of Selected Data
{t.chartSelectedDataButton}
</Button>
<Button svgIcon={chartAreaStackedIcon} onClick={handleTop3Sales}>
Top 3 Sales per Category
{t.top3SalesButton}
</Button>
</div>
<Grid
key={language}
ref={gridRef}
style={{ height: '500px' }}
style={{ height: "500px" }}
data={pagedData}
dataItemKey={DATA_ITEM_KEY}
selectedField={SELECTED_FIELD}
Expand All @@ -161,24 +179,24 @@ const AdminView: React.FC = () => {
selectable={{
enabled: true,
drag: true,
mode: 'multiple',
mode: "multiple",
}}
navigatable={true}
onSelectionChange={onSelectionChange}
onKeyDown={onKeyDown}
sortable={true}
sort={sort}
onSortChange={(e: GridSortChangeEvent) => {
setSort(e.sort as { field: string; dir: 'asc' | 'desc' }[]);
setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
}}
>
<GridColumn field="URL" title="Product" cell={URLImageCell} />
<GridColumn field="Product" title="Name" />
<GridColumn field="SKU" title="SKU" />
<GridColumn field="Category" title="Category" />
<GridColumn field="Price" title="Price" />
<GridColumn field="Quantity" title="Quantity" />
<GridColumn field="Sales" title="Total Sales" />
<GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
<GridColumn field="Product" title={t.grid.nameTitle} />
<GridColumn field="SKU" title={t.grid.skuTitle} />
<GridColumn field="Category" title={t.grid.categoryTitle} />
<GridColumn field="Price" title={t.grid.priceTitle} />
<GridColumn field="Quantity" title={t.grid.quantityTitle} />
<GridColumn field="Sales" title={t.grid.totalSalesTitle} />
</Grid>

{showChartWizard && (
Expand All @@ -194,7 +212,7 @@ const AdminView: React.FC = () => {
onClose={() => setTop3Visible(false)}
/>
)}
</>
</LocalizationProvider>
);
};

Expand Down
11 changes: 6 additions & 5 deletions examples/ecommerce-jewellery-store/src/components/CategoryList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@

import { useNavigate } from "react-router-dom";
import { CategoryListProps } from "../data/types";
import { Button } from "@progress/kendo-react-buttons";
import { CardDescriptor } from "../data/types";
import { useLanguageContext } from "../helpers/LanguageContext";

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

const onNavigate = (card: CardDescriptor) => {
if (card.collectionText === `Collection "AURELIA"`) {
navigate("/category")
navigate("/category");
}
}
};

return (
<>
Expand Down Expand Up @@ -48,7 +49,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
}}
>
<Button themeColor={"primary"} size={"large"} onClick={() => onNavigate(card)}>
Buy Now
{t.buyNowButtonText}
</Button>
</div>
</div>
Expand All @@ -57,4 +58,4 @@ export const CategoryList: React.FC<CategoryListProps> = ({ data, title, subtitl
</div>
</>
);
}
};
28 changes: 16 additions & 12 deletions examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,23 @@ import { SvgIcon } from "@progress/kendo-react-common";
import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
import { useCategoriesContext } from "../helpers/CategoriesContext";

const chips = ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"];
const statuses = ["Sale", "Recommended", "Must Have"];
const materials = ["Gold", "Silver"];
import { useLanguageContext } from "../helpers/LanguageContext";

interface FilterComponentProps {
updateUI: (state: State) => void;
}

export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) => {
const { selectedCategory, setSelectedCategory } = useCategoriesContext();
const { t } = useLanguageContext();

const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
const [statusValue, setStatusValue] = React.useState<string>("Recommended");
const [materialValue, setMaterialValue] = React.useState<string>("Material");
const [statusValue, setStatusValue] = React.useState<string>(t.statusRecommended);
const [materialValue, setMaterialValue] = React.useState<string>(t.materialPlaceholder);

const chips = t.categoriesData || [];
const statuses = t.statusesData || [];
const materials = t.materialsData || [];

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

const clearFilters = () => {
setCategoryValue([]);
setStatusValue("Recommended");
setMaterialValue("Material");
setStatusValue(t.statusRecommended);
setMaterialValue(t.materialPlaceholder);
setSelectedCategory(null);
updateUI({ filter: undefined, sort: undefined });
};
Expand All @@ -106,13 +109,13 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
<section className="k-d-flex k-justify-content-between k-align-items-center">
<span className="k-d-flex k-align-items-center">
<span className="k-d-flex k-align-items-center k-pr-2">
<SvgIcon icon={filterIcon}></SvgIcon> Filter:
<SvgIcon icon={filterIcon}></SvgIcon> {t.filterLabel}
</span>
<span className="k-pr-2">
<MultiSelect
data={chips}
value={categoryValue}
placeholder="Category"
placeholder={t.categoryPlaceholder}
onChange={onCategoryChange}
style={{ minWidth: "119px" }}
/>
Expand All @@ -123,13 +126,14 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
</span>
<span className="k-d-flex k-align-items-center">
<span className="k-d-flex k-align-items-center k-pr-2">
<SvgIcon icon={sortAscIcon}></SvgIcon> Sort by:
<SvgIcon icon={sortAscIcon}></SvgIcon> {t.sortByLabel}
</span>
<span>
<DropDownList data={statuses} value={statusValue} onChange={onStatusChange} />
</span>
</span>
<button className="k-button k-button-flat" onClick={clearFilters}>Clear Filters</button>
<button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
</section>
);
};

Loading

0 comments on commit d05ac3a

Please sign in to comment.