feat(Translation): enhance product dialogs and update translation model

- Added new translation files for product dialogs to support additional languages.
- Refactored various components to utilize translation functions for error messages, labels, and placeholders, enhancing localization support.
This commit is contained in:
sebseb7
2025-11-22 09:43:51 +01:00
parent d63c385a97
commit 3389a9b66c
72 changed files with 1625 additions and 196 deletions

View File

@@ -762,7 +762,7 @@ class ProductDetailPage extends Component {
handleEmbedShare = () => {
const embedCode = `<iframe src="${this.getProductUrl()}" width="100%" height="600" frameborder="0"></iframe>`;
navigator.clipboard.writeText(embedCode).then(() => {
this.showSnackbar("Einbettungscode wurde in die Zwischenablage kopiert!");
this.showSnackbar(this.props.t ? this.props.t("productDialogs.shareSuccessEmbed") : "Einbettungscode wurde in die Zwischenablage kopiert!");
}).catch(() => {
// Fallback for older browsers
try {
@@ -772,9 +772,9 @@ class ProductDetailPage extends Component {
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
this.showSnackbar("Einbettungscode wurde in die Zwischenablage kopiert!");
this.showSnackbar(this.props.t ? this.props.t("productDialogs.shareSuccessEmbed") : "Einbettungscode wurde in die Zwischenablage kopiert!");
} catch {
this.showSnackbar("Fehler beim Kopieren des Einbettungscodes", "error");
this.showSnackbar(this.props.t ? this.props.t("productDialogs.shareErrorEmbed") : "Fehler beim Kopieren des Einbettungscodes", "error");
}
});
this.handleShareClose();
@@ -782,7 +782,10 @@ class ProductDetailPage extends Component {
handleWhatsAppShare = () => {
const url = this.getProductUrl();
const text = `Schau dir dieses Produkt an: ${cleanProductName(this.state.product.name)}`;
const productName = cleanProductName(this.state.product.name);
const text = this.props.t
? this.props.t("productDialogs.shareWhatsAppText", { name: productName })
: `Schau dir dieses Produkt an: ${productName}`;
const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`;
window.open(whatsappUrl, '_blank');
this.handleShareClose();
@@ -797,7 +800,10 @@ class ProductDetailPage extends Component {
handleTelegramShare = () => {
const url = this.getProductUrl();
const text = `Schau dir dieses Produkt an: ${cleanProductName(this.state.product.name)}`;
const productName = cleanProductName(this.state.product.name);
const text = this.props.t
? this.props.t("productDialogs.shareTelegramText", { name: productName })
: `Schau dir dieses Produkt an: ${productName}`;
const telegramUrl = `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
window.open(telegramUrl, '_blank');
this.handleShareClose();
@@ -805,8 +811,18 @@ class ProductDetailPage extends Component {
handleEmailShare = () => {
const url = this.getProductUrl();
const subject = `Produktempfehlung: ${cleanProductName(this.state.product.name)}`;
const body = `Hallo,\n\nich möchte dir dieses Produkt empfehlen:\n\n${cleanProductName(this.state.product.name)}\n${url}\n\nViele Grüße`;
const productName = cleanProductName(this.state.product.name);
const subject = this.props.t
? `${this.props.t("productDialogs.shareEmailSubject")}: ${productName}`
: `Produktempfehlung: ${productName}`;
const body = this.props.t
? this.props.t("productDialogs.shareEmailBody", {
name: productName,
url: url
})
: `Hallo,\n\nich möchte dir dieses Produkt empfehlen:\n\n${productName}\n${url}\n\nViele Grüße`;
const emailUrl = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = emailUrl;
this.handleShareClose();
@@ -815,7 +831,7 @@ class ProductDetailPage extends Component {
handleLinkCopy = () => {
const url = this.getProductUrl();
navigator.clipboard.writeText(url).then(() => {
this.showSnackbar("Link wurde in die Zwischenablage kopiert!");
this.showSnackbar(this.props.t ? this.props.t("productDialogs.shareSuccessLink") : "Link wurde in die Zwischenablage kopiert!");
}).catch(() => {
// Fallback for older browsers
try {
@@ -825,7 +841,7 @@ class ProductDetailPage extends Component {
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
this.showSnackbar("Link wurde in die Zwischenablage kopiert!");
this.showSnackbar(this.props.t ? this.props.t("productDialogs.shareSuccessLink") : "Link wurde in die Zwischenablage kopiert!");
} catch {
this.showSnackbar("Fehler beim Kopieren des Links", "error");
}
@@ -968,7 +984,7 @@ class ProductDetailPage extends Component {
}).format(productData.price)}
</Typography>
<Typography variant="caption" color="text.secondary">
inkl. MwSt.
{this.props.t ? this.props.t('product.inclVatSimple') : 'inkl. MwSt.'}
</Typography>
</Box>
</Box>
@@ -1331,7 +1347,7 @@ class ProductDetailPage extends Component {
whiteSpace: "nowrap"
}}
>
Frage zum Artikel
{this.props.t ? this.props.t('productDialogs.questionTitle') : "Frage zum Artikel"}
</Button>
<Button
variant="outlined"
@@ -1345,7 +1361,7 @@ class ProductDetailPage extends Component {
whiteSpace: "nowrap"
}}
>
Artikel Bewerten
{this.props.t ? this.props.t('productDialogs.ratingTitle') : "Artikel Bewerten"}
</Button>
{(product.available !== 1 && product.availableSupplier !== 1) && (
<Button
@@ -1366,7 +1382,7 @@ class ProductDetailPage extends Component {
}
}}
>
Verfügbarkeit anfragen
{this.props.t ? this.props.t('productDialogs.availabilityTitle') : "Verfügbarkeit anfragen"}
</Button>
)}
</Stack>
@@ -1595,7 +1611,7 @@ class ProductDetailPage extends Component {
}}
size="small"
>
Teilen
{this.props.t ? this.props.t("productDialogs.shareTitle") : "Teilen"}
</Button>
<Box
sx={{
@@ -1669,7 +1685,7 @@ class ProductDetailPage extends Component {
<ListItemIcon>
<CodeIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Einbetten" />
<ListItemText primary={this.props.t ? this.props.t("productDialogs.shareEmbed") : "Einbetten"} />
</MenuItem>
<MenuItem onClick={this.handleWhatsAppShare}>
<ListItemIcon>
@@ -1699,7 +1715,7 @@ class ProductDetailPage extends Component {
<ListItemIcon>
<LinkIcon fontSize="small" />
</ListItemIcon>
<ListItemText primary="Link kopieren" />
<ListItemText primary={this.props.t ? this.props.t("productDialogs.shareCopyLink") : "Link kopieren"} />
</MenuItem>
</MenuList>
</Box>