unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Compare commits

base: unchained:a47698d5cab6cbe9c763d5ef58f685609a61a7ec
Branches Tags
unchained:master unchained:feature/i18n-multi-currency unchained:dev unchained:feature/storefront-redesign unchained:feature/005-remove-woocommerce unchained:feature/004-saleor-checkout unchained:feature/003-saleor-cart unchained:feature/002-saleor-products unchained:feature/001-saleor-graphql-client
..
compare: unchained:9d639fbd643deeade6a4fd4d76ba664213cb0041
Branches Tags
unchained:feature/i18n-multi-currency unchained:dev unchained:master unchained:feature/storefront-redesign unchained:feature/005-remove-woocommerce unchained:feature/004-saleor-checkout unchained:feature/003-saleor-cart unchained:feature/002-saleor-products unchained:feature/001-saleor-graphql-client

4 Commits
a47698d5ca ... 9d639fbd64

Author SHA1 Message Date
Unchained
9d639fbd64 fix: Parse JSON description in NewHero component 
- Import parseDescription in NewHero.tsx
- Use parseDescription for featured product description
 2026-03-21 13:12:30 +02:00
Unchained
0831968881 fix: Suppress hydration warnings from browser extensions 
- Add suppressHydrationWarning to html and body elements
- Prevents FoxClocks and other extensions from causing errors
- Extensions modifying DOM won't break React hydration
 2026-03-21 13:09:31 +02:00
Unchained
3aaad57076 fix: Parse Saleor JSON description format to plain text 
- Add parseDescription() helper to extract text from EditorJS JSON
- Update getLocalizedProduct to use parsed description
- Fix product descriptions showing raw JSON on frontend
 2026-03-21 13:06:14 +02:00
Unchained
01d553bfea fix: Add error boundary to handle browser extension errors 
- Create ErrorBoundary component to catch extension errors
- Ignore TronLink and other chrome-extension errors
- Prevent extension conflicts from crashing the app
 2026-03-21 13:02:55 +02:00
5 changed files with 111 additions and 6 deletions
Expand all files Collapse all files

12
src/app/layout.tsx
View File

@@ -1,5 +1,6 @@
import "./globals.css"; import "./globals.css";
import type { Metadata } from "next"; import type { Metadata } from "next";
import ErrorBoundary from "@/components/providers/ErrorBoundary";
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@@ -16,15 +17,20 @@ export const metadata: Metadata = {
}, },
}; };
// Suppress extension-caused hydration warnings
const suppressHydrationWarning = true;
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en" suppressHydrationWarning>
<body className="antialiased"> <body className="antialiased" suppressHydrationWarning>
{children} <ErrorBoundary>
{children}
</ErrorBoundary>
</body> </body>
</html> </html>
); );

4
src/components/home/NewHero.tsx
View File

@@ -6,7 +6,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore"; import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import type { Product } from "@/types/saleor"; import type { Product } from "@/types/saleor";
import { getProductPrice, getProductImage, formatPrice } from "@/lib/saleor"; import { getProductPrice, getProductImage, formatPrice, parseDescription } from "@/lib/saleor";
interface NewHeroProps { interface NewHeroProps {
featuredProduct?: Product; featuredProduct?: Product;
@@ -87,7 +87,7 @@ export default function NewHero({ featuredProduct }: NewHeroProps) {
{/* Description */} {/* Description */}
<p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2"> <p className="text-sm text-[#4A4A4A]/70 mt-1 line-clamp-2">
{featuredProduct.description?.replace(/<[^>]*>/g, "").slice(0, 100) || {parseDescription(featuredProduct.description).slice(0, 100) ||
"Premium natural oil for hair and skin care"} "Premium natural oil for hair and skin care"}
</p> </p>

63
src/components/providers/ErrorBoundary.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { Component, ErrorInfo, ReactNode } from "react";
interface Props {
children: ReactNode;
}
interface State {
hasError: boolean;
error?: Error;
}
export default class ErrorBoundary extends Component<Props, State> {
public state: State = {
hasError: false,
};
public static getDerivedStateFromError(error: Error): State {
return { hasError: true, error };
}
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
// Ignore browser extension errors
if (error.message?.includes('tron') ||
error.message?.includes('chrome-extension') ||
error.stack?.includes('chrome-extension')) {
console.warn('Browser extension error ignored:', error.message);
// Reset error state to continue rendering
this.setState({ hasError: false });
return;
}
console.error("Uncaught error:", error, errorInfo);
}
public render() {
if (this.state.hasError) {
// Check if it's an extension error
if (this.state.error?.message?.includes('tron') ||
this.state.error?.stack?.includes('chrome-extension')) {
// Silently recover and render children
return this.props.children;
}
return (
<div className="min-h-screen flex items-center justify-center p-4">
<div className="text-center">
<h2 className="text-2xl font-serif mb-4">Something went wrong</h2>
<button
onClick={() => this.setState({ hasError: false })}
className="px-6 py-3 bg-foreground text-white"
>
Try again
</button>
</div>
</div>
);
}
return this.props.children;
}
}

1
src/lib/saleor/index.ts
View File

@@ -32,4 +32,5 @@ export {
isProductAvailable, isProductAvailable,
formatPrice, formatPrice,
getLocalizedProduct, getLocalizedProduct,
parseDescription,
} from "./products"; } from "./products";

37
src/lib/saleor/products.ts
View File

@@ -81,6 +81,39 @@ export function formatPrice(amount: number, currency: string = "RSD"): string {
}).format(amount); }).format(amount);
} }
// Parse Saleor's JSON description format (EditorJS) to plain text/HTML
export function parseDescription(description: string | null | undefined): string {
if (!description) return "";
// If it's already plain text (not JSON), return as-is
if (!description.startsWith("{")) {
return description;
}
try {
const parsed = JSON.parse(description);
// Handle EditorJS format: { blocks: [{ data: { text: "..." } }] }
if (parsed.blocks && Array.isArray(parsed.blocks)) {
return parsed.blocks
.map((block: any) => {
if (block.data?.text) {
return block.data.text;
}
return "";
})
.filter(Boolean)
.join("\n\n");
}
// Fallback: return stringified if unknown format
return description;
} catch (e) {
// If JSON parse fails, return original
return description;
}
}
// Get localized product data // Get localized product data
export function getLocalizedProduct( export function getLocalizedProduct(
product: Product, product: Product,
@@ -95,10 +128,12 @@ export function getLocalizedProduct(
const isEnglish = locale.toLowerCase() === "en"; const isEnglish = locale.toLowerCase() === "en";
const translation = isEnglish ? product.translation : null; const translation = isEnglish ? product.translation : null;
const rawDescription = translation?.description || product.description;
return { return {
name: translation?.name || product.name, name: translation?.name || product.name,
slug: translation?.slug || product.slug, slug: translation?.slug || product.slug,
description: translation?.description || product.description, description: parseDescription(rawDescription),
seoTitle: translation?.seoTitle || product.seoTitle, seoTitle: translation?.seoTitle || product.seoTitle,
seoDescription: translation?.seoDescription || product.seoDescription, seoDescription: translation?.seoDescription || product.seoDescription,
}; };