Skip to content

Commit

Permalink
fix avatar, translate app
Browse files Browse the repository at this point in the history
add files

add two other files

split messages, adjust switch widht

translate remaining parts of the app

fix home and footer

fix ts errors
  • Loading branch information
filipKovachev committed Dec 4, 2024
1 parent 8b40de8 commit f455658
Show file tree
Hide file tree
Showing 31 changed files with 3,267 additions and 1,081 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -135,5 +135,4 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
<button className="k-button k-button-flat" onClick={clearFilters}>{t.clearFiltersButton}</button>
</section>
);
};

};
106 changes: 106 additions & 0 deletions examples/ecommerce-jewellery-store/src/data/mesagges.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
export const messages = {
en: {
title: "Vilora Jewelry",
subtitle: "We offer exquisite jewelry, each showcasing timeless elegance",
buttonText: "See Collections",
bestsellersTitle: "Our Bestsellers",
bestsellersSubtitle: "Enjoy an excellent selection of fine jewelry",
timelessTitle: "Timeless Classics",
timelessSubtitle: "Get our unique handmade collections",
timelessContent: "Jewelry enhances style and adds elegance, with each piece telling a unique story.",
fineJewelryTitle: "Fine Jewelry",
fineJewelrySubtitle: "Get our unique handmade collections",
fineJewelryContent: "Jewelry elevates one's style and brings sophistication, with every piece narrating a distinct tale.",
ringsTitle: "Our Rings",
ringsSubtitle: "Enjoy an excellent selection of fine rings",
watchesTitle: "Our Watches",
watchesSubtitle: "Enjoy an excellent selection of watches",
servicesTitle: "Services",
servicesSubtitle: "Explore expert repairs to elevate your experience",
servicesContent: "Vilora provides services like custom designs, repairs, and appraisals to enhance the customer experience.",
filterLabel: "Filter:",
sortByLabel: "Sort by:",
clearFiltersButton: "Clear Filters",
categoryPlaceholder: "Category",
materialPlaceholder: "Material",
categoriesData: ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"],
statusesData: ["Sale", "Recommended", "Must Have"],
materialsData: ["Gold", "Silver"],
addToCartButtonText: "Add to Cart",
shoppingCartTitle: "Shopping Cart",
backButtonText: "Back",
removeButtonText: "Remove",
emptyCartMessage: "Your shopping cart is empty.",
proceedToCheckoutButtonText: "Proceed to Checkout"
},
es: {
title: "Joyería Vilora",
subtitle: "Ofrecemos joyería exquisita, cada una mostrando elegancia atemporal",
buttonText: "Ver Colecciones",
bestsellersTitle: "Nuestros Más Vendidos",
bestsellersSubtitle: "Disfruta de una excelente selección de joyas finas",
timelessTitle: "Clásicos Atemporales",
timelessSubtitle: "Obtén nuestras colecciones únicas hechas a mano",
timelessContent: "Las joyas mejoran el estilo y agregan elegancia, cada pieza cuenta una historia única.",
fineJewelryTitle: "Joyería Fina",
fineJewelrySubtitle: "Obtén nuestras colecciones únicas hechas a mano",
fineJewelryContent: "Las joyas elevan el estilo y aportan sofisticación, cada pieza narra una historia distinta.",
ringsTitle: "Nuestros Anillos",
ringsSubtitle: "Disfruta de una excelente selección de anillos finos",
watchesTitle: "Nuestros Relojes",
watchesSubtitle: "Disfruta de una excelente selección de relojes",
servicesTitle: "Servicios",
servicesSubtitle: "Explora reparaciones expertas para mejorar tu experiencia",
servicesContent: "Vilora ofrece servicios como diseños personalizados, reparaciones y tasaciones para mejorar la experiencia del cliente.",
filterLabel: "Filtrar:",
sortByLabel: "Ordenar por:",
clearFiltersButton: "Borrar filtros",
categoryPlaceholder: "Categoría",
materialPlaceholder: "Material",
categoriesData: ["Pulseras", "Anillos", "Pendientes", "Relojes", "Collares"],
statusesData: ["Oferta", "Recomendado", "Imprescindible"],
materialsData: ["Oro", "Plata"],
addToCartButtonText: "Agregar al Carrito",
shoppingCartTitle: "Carrito de Compras",
backButtonText: "Volver",
removeButtonText: "Eliminar",
emptyCartMessage: "Tu carrito está vacío.",
proceedToCheckoutButtonText: "Proceder al Pago"
},
fr: {
title: "Bijoux Vilora",
subtitle: "Nous proposons des bijoux exquis, chacun illustrant une élégance intemporelle",
buttonText: "Voir les Collections",
bestsellersTitle: "Nos Meilleures Ventes",
bestsellersSubtitle: "Profitez d'une excellente sélection de bijoux fins",
timelessTitle: "Classiques Intemporels",
timelessSubtitle: "Découvrez nos collections artisanales uniques",
timelessContent: "Les bijoux subliment le style et ajoutent de l'élégance, chaque pièce raconte une histoire unique.",
fineJewelryTitle: "Bijoux Fins",
fineJewelrySubtitle: "Découvrez nos collections artisanales uniques",
fineJewelryContent: "Les bijoux rehaussent le style et apportent de la sophistication, chaque pièce raconte une histoire distincte.",
ringsTitle: "Nos Bagues",
ringsSubtitle: "Profitez d'une excellente sélection de bagues fines",
watchesTitle: "Nos Montres",
watchesSubtitle: "Profitez d'une excellente sélection de montres",
servicesTitle: "Services",
servicesSubtitle: "Explorez des réparations expertes pour enrichir votre expérience",
servicesContent: "Vilora propose des services tels que des designs personnalisés, des réparations et des expertises pour enrichir l'expérience client.",
filterLabel: "Filtrer :",
sortByLabel: "Trier par :",
clearFiltersButton: "Effacer les filtres",
categoryPlaceholder: "Catégorie",
materialPlaceholder: "Matériau",
categoriesData: ["Bracelets", "Bagues", "Boucles d'oreilles", "Montres", "Colliers"],
statusesData: ["Vente", "Recommandé", "Indispensable"],
materialsData: ["Or", "Argent"],
addToCartButtonText: "Ajouter au Panier",
shoppingCartTitle: "Panier",
backButtonText: "Retour",
removeButtonText: "Supprimer",
emptyCartMessage: "Votre panier est vide.",
proceedToCheckoutButtonText: "Passer à la caisse",
},
};

export default messages;
Original file line number Diff line number Diff line change
Expand Up @@ -108,4 +108,4 @@ export const AllProductsListView = () => {
</Layout>
</>
);
};
};
2 changes: 1 addition & 1 deletion examples/ecommerce-jewellery-store/src/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,4 +149,4 @@ const Home: React.FC = () => {
);
};

export default Home;
export default Home;

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@ 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 { useStore } from "@nanostores/react";
import { selectedLanguage } from "../helpers/languageStore";
import enMessages from "../data/messages/en";
import frMessages from "../data/messages/fr";
import esMessages from "../data/messages/es";

const translations = {
en: enMessages,
fr: frMessages,
es: esMessages,
};

const DATA_ITEM_KEY = "ID";
const SELECTED_FIELD = "selected";
Expand All @@ -35,6 +46,8 @@ interface PageState {
}

const AdminView: React.FC = () => {
const language = useStore(selectedLanguage);
const t = translations[language];
const gridRef = React.useRef<GridHandle>(null);
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
Expand Down Expand Up @@ -134,10 +147,10 @@ const AdminView: React.FC = () => {
disabled={disabled}
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
Expand Down Expand Up @@ -165,13 +178,13 @@ const AdminView: React.FC = () => {
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 Down
Original file line number Diff line number Diff line change
@@ -1,94 +1,134 @@
import * as React from "react";
import React, { useState, useEffect, useCallback } from "react";
import { Layout } from "../components/Layout";
import { OrderedImgText } from "../components/OrderedImageCard";
import { CustomSection } from "../components/CustomizedSection";
import { listData } from "../data/listData";
import { FilterComponent } from "../components/FilterComponent";
import { CardsList } from "../components/CardsList";
import { CategoryList } from "../components/CategoryList";
import { CardDescriptor } from "../data/types";
import { DataModel } from "../data/types";

import { Breadcrumb } from "@progress/kendo-react-layout";
import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
import { process, State } from "@progress/kendo-data-query";
import getTranslatedListData from "../data/listData";
import { useStore } from "@nanostores/react";
import { selectedLanguage } from "../helpers/languageStore";
import { loadMessages, LocalizationProvider } from "@progress/kendo-react-intl";

import enMessages from "../data/messages/en";
import frMessages from "../data/messages/fr";
import esMessages from "../data/messages/es";

loadMessages(enMessages, "en");
loadMessages(frMessages, "fr");
loadMessages(esMessages, "es");

const messages = {
en: enMessages,
fr: frMessages,
es: esMessages,
};

export const AllProductsListView: React.FC = () => {
const language = useStore(selectedLanguage);
const t = messages[language];

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

const [data, setData] = React.useState(listData);
useEffect(() => {
const updatedData = getTranslatedListData();
setTranslatedData(updatedData);
setFilteredData(updatedData);
}, [language]);

const updateUI = (newState: State) => {
const newData = process(listData, newState);
setData(newData.data);
};
const updateUI = useCallback(
(newState: State) => {
const updatedData = process(translatedData, newState).data;
setFilteredData(updatedData);
},
[translatedData]
);

const cards: CardDescriptor[] = [
const cards = [
{
img: "/kendo-react/kendo-react-e-commerce-astro-app/necklace_1.jfif",
collectionText: 'Collection "SERENE"',
collectionText: t.collectionSerene,
},
{
img: "/kendo-react/kendo-react-e-commerce-astro-app/ring_1.jfif",
collectionText: 'Collection "AURELIA"',
collectionText: t.collectionAurelia,
},
{
img: "/kendo-react/kendo-react-e-commerce-astro-app/1111.jfif",
collectionText: 'Collection "RAVINA"',
collectionText: t.collectionRavina,
},
];

const BreakcrumbData: DataModel[] = [
{ text: "Home" },
{ text: "Jewelry" },
const breadcrumbData = [
{ text: t.breadcrumbHome },
{ text: t.breadcrumbJewelry },
];

return (
<>
<Layout>
<section
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
style={{
paddingTop: "60px",
}}
>
<OrderedImgText
title={title}
subtitle={subtitle}
contentText={contentText}
img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
order={order}
link={null}
/>
</section>
</Layout>
<Layout>
<CustomSection>
<CategoryList title="Our Collections" subtitle="Enjoy an excellent selection of fine jewelry" data={cards} />
</CustomSection>
</Layout>
<Layout>
<section className="k-d-flex k-justify-content-between">
<Breadcrumb data={BreakcrumbData} />
<ButtonGroup>
<Button fillMode={"flat"} svgIcon={gridLayoutIcon} />
<Button fillMode={"flat"} svgIcon={layout2By2Icon} />
</ButtonGroup>
</section>
</Layout>
<Layout>
<FilterComponent updateUI={updateUI} />
</Layout>
<Layout>
<CardsList data={data} />
</Layout>
</>
<LocalizationProvider language={language}>
<>
<Layout>
<section
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
style={{ paddingTop: "60px" }}
>
<OrderedImgText
title={t.allProductsTitle}
subtitle={t.allProductsSubtitle}
contentText={t.allProductsContentText}
img="/kendo-react/kendo-react-e-commerce-astro-app/bracelets.png"
order="first"
link={null}
/>
</section>
</Layout>

<Layout>
<CustomSection>
<CategoryList
title={t.ourCollectionsTitle}
subtitle={t.ourCollectionsSubtitle}
data={cards}
/>
</CustomSection>
</Layout>

<Layout>
<section className="k-d-flex k-justify-content-between k-align-items-center k-py-4">
<Breadcrumb data={breadcrumbData} />
<ButtonGroup>
<Button
fillMode="flat"
svgIcon={gridLayoutIcon}
selected={currentLayout === "grid"}
onClick={() => setCurrentLayout("grid")}
/>
<Button
fillMode="flat"
svgIcon={layout2By2Icon}
selected={currentLayout === "list"}
onClick={() => setCurrentLayout("list")}
/>
</ButtonGroup>
</section>
</Layout>

<Layout>
<FilterComponent updateUI={updateUI} />
</Layout>

<Layout>
<CardsList data={filteredData} layout={currentLayout} />
</Layout>
</>
</LocalizationProvider>
);
};

export default AllProductsListView
export default AllProductsListView;
Loading

0 comments on commit f455658

Please sign in to comment.