Skip to content

Commit f455658

Browse files
filipKovachevfilipKovachev
committed
fix avatar, translate app
add files add two other files split messages, adjust switch widht translate remaining parts of the app fix home and footer fix ts errors
1 parent 8b40de8 commit f455658

31 files changed

+3267
-1081
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,5 +135,4 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
135135
<button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
136136
</section>
137137
);
138-
};
139-
138+
};

‎examples/ecommerce-jewellery-store/src/data/mesagges.ts

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
export const messages = {
2+
en: {
3+
title: "Vilora Jewelry",
4+
subtitle: "We offer exquisite jewelry, each showcasing timeless elegance",
5+
buttonText: "See Collections",
6+
bestsellersTitle: "Our Bestsellers",
7+
bestsellersSubtitle: "Enjoy an excellent selection of fine jewelry",
8+
timelessTitle: "Timeless Classics",
9+
timelessSubtitle: "Get our unique handmade collections",
10+
timelessContent: "Jewelry enhances style and adds elegance, with each piece telling a unique story.",
11+
fineJewelryTitle: "Fine Jewelry",
12+
fineJewelrySubtitle: "Get our unique handmade collections",
13+
fineJewelryContent: "Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale.",
14+
ringsTitle: "Our Rings",
15+
ringsSubtitle: "Enjoy an excellent selection of fine rings",
16+
watchesTitle: "Our Watches",
17+
watchesSubtitle: "Enjoy an excellent selection of watches",
18+
servicesTitle: "Services",
19+
servicesSubtitle: "Explore expert repairs to elevate your experience",
20+
servicesContent: "Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.",
21+
filterLabel: "Filter:",
22+
sortByLabel: "Sort by:",
23+
clearFiltersButton: "Clear Filters",
24+
categoryPlaceholder: "Category",
25+
materialPlaceholder: "Material",
26+
categoriesData: ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"],
27+
statusesData: ["Sale", "Recommended", "Must Have"],
28+
materialsData: ["Gold", "Silver"],
29+
addToCartButtonText: "Add to Cart",
30+
shoppingCartTitle: "Shopping Cart",
31+
backButtonText: "Back",
32+
removeButtonText: "Remove",
33+
emptyCartMessage: "Your shopping cart is empty.",
34+
proceedToCheckoutButtonText: "Proceed to Checkout"
35+
},
36+
es: {
37+
title: "Joyería Vilora",
38+
subtitle: "Ofrecemos joyería exquisita, cada una mostrando elegancia atemporal",
39+
buttonText: "Ver Colecciones",
40+
bestsellersTitle: "Nuestros Más Vendidos",
41+
bestsellersSubtitle: "Disfruta de una excelente selección de joyas finas",
42+
timelessTitle: "Clásicos Atemporales",
43+
timelessSubtitle: "Obtén nuestras colecciones únicas hechas a mano",
44+
timelessContent: "Las joyas mejoran el estilo y agregan elegancia, cada pieza cuenta una historia única.",
45+
fineJewelryTitle: "Joyería Fina",
46+
fineJewelrySubtitle: "Obtén nuestras colecciones únicas hechas a mano",
47+
fineJewelryContent: "Las joyas elevan el estilo y aportan sofisticación, cada pieza narra una historia distinta.",
48+
ringsTitle: "Nuestros Anillos",
49+
ringsSubtitle: "Disfruta de una excelente selección de anillos finos",
50+
watchesTitle: "Nuestros Relojes",
51+
watchesSubtitle: "Disfruta de una excelente selección de relojes",
52+
servicesTitle: "Servicios",
53+
servicesSubtitle: "Explora reparaciones expertas para mejorar tu experiencia",
54+
servicesContent: "Vilora ofrece servicios como diseños personalizados, reparaciones y tasaciones para mejorar la experiencia del cliente.",
55+
filterLabel: "Filtrar:",
56+
sortByLabel: "Ordenar por:",
57+
clearFiltersButton: "Borrar filtros",
58+
categoryPlaceholder: "Categoría",
59+
materialPlaceholder: "Material",
60+
categoriesData: ["Pulseras", "Anillos", "Pendientes", "Relojes", "Collares"],
61+
statusesData: ["Oferta", "Recomendado", "Imprescindible"],
62+
materialsData: ["Oro", "Plata"],
63+
addToCartButtonText: "Agregar al Carrito",
64+
shoppingCartTitle: "Carrito de Compras",
65+
backButtonText: "Volver",
66+
removeButtonText: "Eliminar",
67+
emptyCartMessage: "Tu carrito está vacío.",
68+
proceedToCheckoutButtonText: "Proceder al Pago"
69+
},
70+
fr: {
71+
title: "Bijoux Vilora",
72+
subtitle: "Nous proposons des bijoux exquis, chacun illustrant une élégance intemporelle",
73+
buttonText: "Voir les Collections",
74+
bestsellersTitle: "Nos Meilleures Ventes",
75+
bestsellersSubtitle: "Profitez d'une excellente sélection de bijoux fins",
76+
timelessTitle: "Classiques Intemporels",
77+
timelessSubtitle: "Découvrez nos collections artisanales uniques",
78+
timelessContent: "Les bijoux subliment le style et ajoutent de l'élégance, chaque pièce raconte une histoire unique.",
79+
fineJewelryTitle: "Bijoux Fins",
80+
fineJewelrySubtitle: "Découvrez nos collections artisanales uniques",
81+
fineJewelryContent: "Les bijoux rehaussent le style et apportent de la sophistication, chaque pièce raconte une histoire distincte.",
82+
ringsTitle: "Nos Bagues",
83+
ringsSubtitle: "Profitez d'une excellente sélection de bagues fines",
84+
watchesTitle: "Nos Montres",
85+
watchesSubtitle: "Profitez d'une excellente sélection de montres",
86+
servicesTitle: "Services",
87+
servicesSubtitle: "Explorez des réparations expertes pour enrichir votre expérience",
88+
servicesContent: "Vilora propose des services tels que des designs personnalisés, des réparations et des expertises pour enrichir l'expérience client.",
89+
filterLabel: "Filtrer :",
90+
sortByLabel: "Trier par :",
91+
clearFiltersButton: "Effacer les filtres",
92+
categoryPlaceholder: "Catégorie",
93+
materialPlaceholder: "Matériau",
94+
categoriesData: ["Bracelets", "Bagues", "Boucles d'oreilles", "Montres", "Colliers"],
95+
statusesData: ["Vente", "Recommandé", "Indispensable"],
96+
materialsData: ["Or", "Argent"],
97+
addToCartButtonText: "Ajouter au Panier",
98+
shoppingCartTitle: "Panier",
99+
backButtonText: "Retour",
100+
removeButtonText: "Supprimer",
101+
emptyCartMessage: "Votre panier est vide.",
102+
proceedToCheckoutButtonText: "Passer à la caisse",
103+
},
104+
};
105+
106+
export default messages;

‎examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,4 +108,4 @@ export const AllProductsListView = () => {
108108
</Layout>
109109
</>
110110
);
111-
};
111+
};

‎examples/ecommerce-jewellery-store/src/pages/Home.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,4 +149,4 @@ const Home: React.FC = () => {
149149
);
150150
};
151151

152-
export default Home;
152+
export default Home;

‎examples/kendo-react-e-commerce-astro-app/package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,17 @@ import { Button } from "@progress/kendo-react-buttons";
2020
import { orderBy } from "@progress/kendo-data-query";
2121
import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
2222
import { sampleData } from "../data/shared-gd-sampleChartData";
23+
import { useStore } from "@nanostores/react";
24+
import { selectedLanguage } from "../helpers/languageStore";
25+
import enMessages from "../data/messages/en";
26+
import frMessages from "../data/messages/fr";
27+
import esMessages from "../data/messages/es";
28+
29+
const translations = {
30+
en: enMessages,
31+
fr: frMessages,
32+
es: esMessages,
33+
};
2334

2435
const DATA_ITEM_KEY = "ID";
2536
const SELECTED_FIELD = "selected";
@@ -35,6 +46,8 @@ interface PageState {
3546
}
3647

3748
const AdminView: React.FC = () => {
49+
const language = useStore(selectedLanguage);
50+
const t = translations[language];
3851
const gridRef = React.useRef<GridHandle>(null);
3952
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
4053
const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
@@ -134,10 +147,10 @@ const AdminView: React.FC = () => {
134147
disabled={disabled}
135148
style={{ marginRight: "10px" }}
136149
>
137-
Chart of Selected Data
150+
{t.chartSelectedDataButton}
138151
</Button>
139152
<Button svgIcon={chartAreaStackedIcon} onClick={handleTop3Sales}>
140-
Top 3 Sales per Category
153+
{t.top3SalesButton}
141154
</Button>
142155
</div>
143156
<Grid
@@ -165,13 +178,13 @@ const AdminView: React.FC = () => {
165178
setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
166179
}}
167180
>
168-
<GridColumn field="URL" title="Product" cell={URLImageCell} />
169-
<GridColumn field="Product" title="Name" />
170-
<GridColumn field="SKU" title="SKU" />
171-
<GridColumn field="Category" title="Category" />
172-
<GridColumn field="Price" title="Price" />
173-
<GridColumn field="Quantity" title="Quantity" />
174-
<GridColumn field="Sales" title="Total Sales" />
181+
<GridColumn field="URL" title={t.grid.productTitle} cell={URLImageCell} />
182+
<GridColumn field="Product" title={t.grid.nameTitle} />
183+
<GridColumn field="SKU" title={t.grid.skuTitle} />
184+
<GridColumn field="Category" title={t.grid.categoryTitle} />
185+
<GridColumn field="Price" title={t.grid.priceTitle} />
186+
<GridColumn field="Quantity" title={t.grid.quantityTitle} />
187+
<GridColumn field="Sales" title={t.grid.totalSalesTitle} />
175188
</Grid>
176189

177190
{showChartWizard && (

‎examples/kendo-react-e-commerce-astro-app/src/components/AllProductsListView.tsx

Lines changed: 103 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,134 @@
1-
import * as React from "react";
1+
import React, { useState, useEffect, useCallback } from "react";
22
import { Layout } from "../components/Layout";
33
import { OrderedImgText } from "../components/OrderedImageCard";
44
import { CustomSection } from "../components/CustomizedSection";
5-
import { listData } from "../data/listData";
65
import { FilterComponent } from "../components/FilterComponent";
76
import { CardsList } from "../components/CardsList";
87
import { CategoryList } from "../components/CategoryList";
9-
import { CardDescriptor } from "../data/types";
10-
import { DataModel } from "../data/types";
11-
128
import { Breadcrumb } from "@progress/kendo-react-layout";
139
import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
1410
import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
1511
import { process, State } from "@progress/kendo-data-query";
12+
import getTranslatedListData from "../data/listData";
13+
import { useStore } from "@nanostores/react";
14+
import { selectedLanguage } from "../helpers/languageStore";
15+
import { loadMessages, LocalizationProvider } from "@progress/kendo-react-intl";
16+
17+
import enMessages from "../data/messages/en";
18+
import frMessages from "../data/messages/fr";
19+
import esMessages from "../data/messages/es";
20+
21+
loadMessages(enMessages, "en");
22+
loadMessages(frMessages, "fr");
23+
loadMessages(esMessages, "es");
24+
25+
const messages = {
26+
en: enMessages,
27+
fr: frMessages,
28+
es: esMessages,
29+
};
30+
31+
export const AllProductsListView: React.FC = () => {
32+
const language = useStore(selectedLanguage);
33+
const t = messages[language];
1634

17-
export const AllProductsListView = () => {
18-
const title = "Fine Selection";
19-
const subtitle = "Enjoy the real craftsmanship";
20-
const contentText =
21-
"Jewelry is a meaningful form of self-expression that enhances personal style and adds beauty to any occasion.";
22-
const order = "first";
35+
const [translatedData, setTranslatedData] = useState(() => getTranslatedListData());
36+
const [filteredData, setFilteredData] = useState(translatedData);
37+
const [currentLayout, setCurrentLayout] = useState<"grid" | "list">("grid");
2338

24-
const [data, setData] = React.useState(listData);
39+
useEffect(() => {
40+
const updatedData = getTranslatedListData();
41+
setTranslatedData(updatedData);
42+
setFilteredData(updatedData);
43+
}, [language]);
2544

26-
const updateUI = (newState: State) => {
27-
const newData = process(listData, newState);
28-
setData(newData.data);
29-
};
45+
const updateUI = useCallback(
46+
(newState: State) => {
47+
const updatedData = process(translatedData, newState).data;
48+
setFilteredData(updatedData);
49+
},
50+
[translatedData]
51+
);
3052

31-
const cards: CardDescriptor[] = [
53+
const cards = [
3254
{
3355
img: "/kendo-react/kendo-react-e-commerce-astro-app/necklace_1.jfif",
34-
collectionText: 'Collection "SERENE"',
56+
collectionText: t.collectionSerene,
3557
},
3658
{
3759
img: "/kendo-react/kendo-react-e-commerce-astro-app/ring_1.jfif",
38-
collectionText: 'Collection "AURELIA"',
60+
collectionText: t.collectionAurelia,
3961
},
4062
{
4163
img: "/kendo-react/kendo-react-e-commerce-astro-app/1111.jfif",
42-
collectionText: 'Collection "RAVINA"',
64+
collectionText: t.collectionRavina,
4365
},
4466
];
4567

46-
const BreakcrumbData: DataModel[] = [
47-
{ text: "Home" },
48-
{ text: "Jewelry" },
68+
const breadcrumbData = [
69+
{ text: t.breadcrumbHome },
70+
{ text: t.breadcrumbJewelry },
4971
];
5072

5173
return (
52-
<>
53-
<Layout>
54-
<section
55-
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
56-
style={{
57-
paddingTop: "60px",
58-
}}
59-
>
60-
<OrderedImgText
61-
title={title}
62-
subtitle={subtitle}
63-
contentText={contentText}
64-
img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
65-
order={order}
66-
link={null}
67-
/>
68-
</section>
69-
</Layout>
70-
<Layout>
71-
<CustomSection>
72-
<CategoryList title="Our Collections" subtitle="Enjoy an excellent selection of fine jewelry" data={cards} />
73-
</CustomSection>
74-
</Layout>
75-
<Layout>
76-
<section className="k-d-flex k-justify-content-between">
77-
<Breadcrumb data={BreakcrumbData} />
78-
<ButtonGroup>
79-
<Button fillMode={"flat"} svgIcon={gridLayoutIcon} />
80-
<Button fillMode={"flat"} svgIcon={layout2By2Icon} />
81-
</ButtonGroup>
82-
</section>
83-
</Layout>
84-
<Layout>
85-
<FilterComponent updateUI={updateUI} />
86-
</Layout>
87-
<Layout>
88-
<CardsList data={data} />
89-
</Layout>
90-
</>
74+
<LocalizationProvider language={language}>
75+
<>
76+
<Layout>
77+
<section
78+
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
79+
style={{ paddingTop: "60px" }}
80+
>
81+
<OrderedImgText
82+
title={t.allProductsTitle}
83+
subtitle={t.allProductsSubtitle}
84+
contentText={t.allProductsContentText}
85+
img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
86+
order="first"
87+
link={null}
88+
/>
89+
</section>
90+
</Layout>
91+
92+
<Layout>
93+
<CustomSection>
94+
<CategoryList
95+
title={t.ourCollectionsTitle}
96+
subtitle={t.ourCollectionsSubtitle}
97+
data={cards}
98+
/>
99+
</CustomSection>
100+
</Layout>
101+
102+
<Layout>
103+
<section className="k-d-flex k-justify-content-between k-align-items-center k-py-4">
104+
<Breadcrumb data={breadcrumbData} />
105+
<ButtonGroup>
106+
<Button
107+
fillMode="flat"
108+
svgIcon={gridLayoutIcon}
109+
selected={currentLayout === "grid"}
110+
onClick={() => setCurrentLayout("grid")}
111+
/>
112+
<Button
113+
fillMode="flat"
114+
svgIcon={layout2By2Icon}
115+
selected={currentLayout === "list"}
116+
onClick={() => setCurrentLayout("list")}
117+
/>
118+
</ButtonGroup>
119+
</section>
120+
</Layout>
121+
122+
<Layout>
123+
<FilterComponent updateUI={updateUI} />
124+
</Layout>
125+
126+
<Layout>
127+
<CardsList data={filteredData} layout={currentLayout} />
128+
</Layout>
129+
</>
130+
</LocalizationProvider>
91131
);
92132
};
93133

94-
export default AllProductsListView
134+
export default AllProductsListView;

0 commit comments

Comments
 (0)