@deneb-ui/ui 2.0.108 → 2.0.109
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EditableProductCard.d.ts +9 -1
- package/dist/EditableProductCard.js +108 -33
- package/dist/EditableProductGrid.d.ts +4 -1
- package/dist/EditableProductGrid.js +2 -2
- package/dist/EditableProductShowcase.d.ts +2 -0
- package/dist/EditableProductShowcase.js +4 -3
- package/dist/ProductQuickView.d.ts +5 -1
- package/dist/ProductQuickView.js +3 -2
- package/package.json +2 -2
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { MeasurementUnit, ProductVariant } from './utils/productOptions';
|
|
3
3
|
export interface ProductItem {
|
|
4
|
+
href?: string;
|
|
5
|
+
detailHref?: string;
|
|
4
6
|
id?: string | number;
|
|
5
7
|
name?: string;
|
|
6
8
|
title?: string;
|
|
@@ -87,7 +89,13 @@ export interface EditableProductCardProps extends React.HTMLAttributes<HTMLEleme
|
|
|
87
89
|
actionSlot?: React.ReactNode;
|
|
88
90
|
actionLabel?: string;
|
|
89
91
|
actionLabelPath?: string;
|
|
92
|
+
href?: string;
|
|
93
|
+
detailHref?: string;
|
|
94
|
+
showDetailLink?: boolean;
|
|
95
|
+
showDetailButton?: boolean;
|
|
96
|
+
detailButtonText?: string;
|
|
97
|
+
onDetailClick?: (product: ProductItem, url: string) => void;
|
|
90
98
|
onAddToCart?: (product: ProductItem) => void;
|
|
91
99
|
onWhatsAppClick?: (product: ProductItem, url: string) => void;
|
|
92
100
|
}
|
|
93
|
-
export declare function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, onAddToCart, onWhatsAppClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;
|
|
101
|
+
export declare function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, href, detailHref, showDetailLink, showDetailButton, detailButtonText, onDetailClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;
|
|
@@ -8,6 +8,7 @@ const EditableText_1 = require("./EditableText");
|
|
|
8
8
|
const EditableImage_1 = require("./EditableImage");
|
|
9
9
|
const useCart_1 = require("./cart/useCart");
|
|
10
10
|
const productOptions_1 = require("./utils/productOptions");
|
|
11
|
+
const PlatformProductDetail_1 = require("./PlatformProductDetail");
|
|
11
12
|
const COLOR_HEX_MAP = {
|
|
12
13
|
black: '#111827',
|
|
13
14
|
white: '#ffffff',
|
|
@@ -45,8 +46,45 @@ function WhatsAppIcon({ className = '', style = {} }) {
|
|
|
45
46
|
function CartIcon({ className = '', style = {} }) {
|
|
46
47
|
return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, style: { display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "21", r: "1" }), (0, jsx_runtime_1.jsx)("circle", { cx: "20", cy: "21", r: "1" }), (0, jsx_runtime_1.jsx)("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6" })] }));
|
|
47
48
|
}
|
|
48
|
-
function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', currency = 'LKR', showBrand = true, showPrice = true, showDescription = true, showCategory = true, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, onAddToCart, onWhatsAppClick, className = '', style, ...props }) {
|
|
49
|
-
const
|
|
49
|
+
function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', currency = 'LKR', showBrand = true, showPrice = true, showDescription = true, showCategory = true, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, href, detailHref, showDetailLink = true, showDetailButton, detailButtonText, onDetailClick, className = '', style, ...props }) {
|
|
50
|
+
const anyProps = props;
|
|
51
|
+
const product = (0, react_1.useMemo)(() => {
|
|
52
|
+
const base = (productProp || itemProp || {});
|
|
53
|
+
return {
|
|
54
|
+
...base,
|
|
55
|
+
id: base.id ?? anyProps.id,
|
|
56
|
+
name: base.name || anyProps.name,
|
|
57
|
+
title: base.title || anyProps.title,
|
|
58
|
+
productName: base.productName || anyProps.productName,
|
|
59
|
+
brand: base.brand || anyProps.brand,
|
|
60
|
+
price: base.price ?? anyProps.price,
|
|
61
|
+
originalPrice: base.originalPrice ?? anyProps.originalPrice ?? anyProps.compareAtPrice,
|
|
62
|
+
compareAtPrice: base.compareAtPrice ?? anyProps.compareAtPrice,
|
|
63
|
+
description: base.description || anyProps.description || anyProps.desc,
|
|
64
|
+
category: base.category || anyProps.category,
|
|
65
|
+
badge: base.badge || anyProps.badge || anyProps.tag,
|
|
66
|
+
imageUrl: base.imageUrl || anyProps.imageUrl || anyProps.image || anyProps.photo,
|
|
67
|
+
currency: base.currency || anyProps.currency,
|
|
68
|
+
measurement: base.measurement || anyProps.measurement,
|
|
69
|
+
unit: base.unit || anyProps.unit,
|
|
70
|
+
href: base.href || anyProps.href,
|
|
71
|
+
};
|
|
72
|
+
}, [productProp, itemProp, anyProps]);
|
|
73
|
+
const rawId = product?.id ?? product?.productId;
|
|
74
|
+
const resolvedDetailHref = (0, react_1.useMemo)(() => {
|
|
75
|
+
if (href && typeof href === 'string' && href.trim() !== '')
|
|
76
|
+
return href.trim();
|
|
77
|
+
if (detailHref && typeof detailHref === 'string' && detailHref.trim() !== '')
|
|
78
|
+
return detailHref.trim();
|
|
79
|
+
if (product?.href && typeof product.href === 'string' && product.href.trim() !== '') {
|
|
80
|
+
return product.href.trim();
|
|
81
|
+
}
|
|
82
|
+
if (rawId !== undefined && rawId !== null && String(rawId).trim() !== '') {
|
|
83
|
+
return (0, PlatformProductDetail_1.platformProductDetailHref)(rawId);
|
|
84
|
+
}
|
|
85
|
+
return undefined;
|
|
86
|
+
}, [href, detailHref, product?.href, rawId]);
|
|
87
|
+
const resolvedActionLabel = String(actionLabel || detailButtonText || 'View details');
|
|
50
88
|
const whatsappNumber = whatsappPhoneProp || whatsappNumberProp || '94770000000';
|
|
51
89
|
const cart = (0, useCart_1.useOptionalCart)();
|
|
52
90
|
// Dynamic Options, Measurements & Colors resolution
|
|
@@ -279,7 +317,11 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
|
|
|
279
317
|
overflow: 'hidden',
|
|
280
318
|
width: isHorizontal ? '40%' : '100%',
|
|
281
319
|
flexShrink: 0,
|
|
282
|
-
}, children: [
|
|
320
|
+
}, children: [resolvedDetailHref && showDetailLink ? ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
|
|
321
|
+
if (onDetailClick) {
|
|
322
|
+
onDetailClick(product, resolvedDetailHref);
|
|
323
|
+
}
|
|
324
|
+
}, "data-preview-static": "Open the stable live product detail page", style: { display: 'block', width: '100%', height: '100%', textDecoration: 'none' }, title: `View details for ${name}`, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }) })) : ((0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } })), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: `${itemPath}.${badgeKey}`, "data-preview-field-path": `${itemPath}.${badgeKey}`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
283
325
|
padding: '1.25rem',
|
|
284
326
|
display: 'flex',
|
|
285
327
|
flexDirection: 'column',
|
|
@@ -301,13 +343,27 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
|
|
|
301
343
|
backgroundColor: 'var(--tag-bg, var(--color-secondary, rgba(241, 245, 249, 0.9)))',
|
|
302
344
|
padding: '2px 8px',
|
|
303
345
|
borderRadius: '6px',
|
|
304
|
-
} })) : null] }), (0, jsx_runtime_1.jsx)(
|
|
346
|
+
} })) : null] }), resolvedDetailHref && showDetailLink ? ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
|
|
347
|
+
if (onDetailClick) {
|
|
348
|
+
onDetailClick(product, resolvedDetailHref);
|
|
349
|
+
}
|
|
350
|
+
}, "data-preview-static": "Open the stable live product detail page", style: {
|
|
351
|
+
color: 'inherit',
|
|
352
|
+
textDecoration: 'none',
|
|
353
|
+
display: 'inline-block',
|
|
354
|
+
}, className: "hover:underline", children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: name, style: {
|
|
355
|
+
fontSize: '1.125rem',
|
|
356
|
+
fontWeight: 700,
|
|
357
|
+
lineHeight: 1.35,
|
|
358
|
+
color: 'var(--heading-color, #ffffff)',
|
|
359
|
+
marginBottom: '0.375rem',
|
|
360
|
+
} }) })) : ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: name, style: {
|
|
305
361
|
fontSize: '1.125rem',
|
|
306
362
|
fontWeight: 700,
|
|
307
363
|
lineHeight: 1.35,
|
|
308
364
|
color: 'var(--heading-color, #ffffff)',
|
|
309
365
|
marginBottom: '0.375rem',
|
|
310
|
-
} }), showDescription && description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
|
|
366
|
+
} })), showDescription && description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
|
|
311
367
|
fontSize: '0.875rem',
|
|
312
368
|
color: 'var(--muted-text, #94a3b8)',
|
|
313
369
|
lineHeight: 1.5,
|
|
@@ -388,40 +444,59 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
|
|
|
388
444
|
color: 'var(--muted-text, #94a3b8)',
|
|
389
445
|
border: '1px solid rgba(255, 255, 255, 0.12)',
|
|
390
446
|
letterSpacing: '0.01em',
|
|
391
|
-
}, children: "Price on Request" }) })) : null, actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
447
|
+
}, children: "Price on Request" }) })) : null, actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', width: '100%' }, children: [(showWhatsAppButton || showAddToCartButton) && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
448
|
+
display: 'grid',
|
|
449
|
+
gridTemplateColumns: showWhatsAppButton && showAddToCartButton ? '1fr 1fr' : '1fr',
|
|
450
|
+
gap: '0.5rem',
|
|
451
|
+
width: '100%',
|
|
452
|
+
}, children: [showWhatsAppButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleWhatsAppClick, title: "Chat directly on WhatsApp about this product", style: {
|
|
453
|
+
backgroundColor: '#25D366',
|
|
454
|
+
color: '#ffffff',
|
|
455
|
+
border: 'none',
|
|
456
|
+
padding: '0.55rem 0.75rem',
|
|
457
|
+
borderRadius: '10px',
|
|
458
|
+
fontSize: '0.8125rem',
|
|
459
|
+
fontWeight: 600,
|
|
460
|
+
cursor: 'pointer',
|
|
461
|
+
display: 'flex',
|
|
462
|
+
alignItems: 'center',
|
|
463
|
+
justifyContent: 'center',
|
|
464
|
+
gap: '0.375rem',
|
|
465
|
+
transition: 'all 0.2s ease',
|
|
466
|
+
boxShadow: '0 2px 8px rgba(37, 211, 102, 0.25)',
|
|
467
|
+
}, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(WhatsAppIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.whatsappButtonText`, "data-preview-field-path": `${itemPath}.whatsappButtonText`, defaultValue: resolvedWhatsAppText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] })), showAddToCartButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleAddToCartClick, title: "Add this product to shopping cart", style: {
|
|
468
|
+
backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
|
|
469
|
+
color: 'var(--button-text, #ffffff)',
|
|
470
|
+
border: 'none',
|
|
471
|
+
padding: '0.55rem 0.75rem',
|
|
472
|
+
borderRadius: '10px',
|
|
473
|
+
fontSize: '0.8125rem',
|
|
474
|
+
fontWeight: 600,
|
|
475
|
+
cursor: 'pointer',
|
|
476
|
+
display: 'flex',
|
|
477
|
+
alignItems: 'center',
|
|
478
|
+
justifyContent: 'center',
|
|
479
|
+
gap: '0.375rem',
|
|
480
|
+
transition: 'all 0.2s ease',
|
|
481
|
+
boxShadow: '0 2px 8px rgba(37, 99, 235, 0.25)',
|
|
482
|
+
}, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] })), resolvedDetailHref && (showDetailButton || Boolean(actionLabel || actionLabelPath)) && ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
|
|
483
|
+
if (onDetailClick) {
|
|
484
|
+
onDetailClick(product, resolvedDetailHref);
|
|
485
|
+
}
|
|
486
|
+
}, "data-preview-static": "Open the stable live product detail page", style: {
|
|
405
487
|
display: 'flex',
|
|
406
488
|
alignItems: 'center',
|
|
407
489
|
justifyContent: 'center',
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
boxShadow: '0 2px 8px rgba(37, 211, 102, 0.25)',
|
|
411
|
-
}, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(WhatsAppIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.whatsappButtonText`, "data-preview-field-path": `${itemPath}.whatsappButtonText`, defaultValue: resolvedWhatsAppText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] })), showAddToCartButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleAddToCartClick, title: "Add this product to shopping cart", style: {
|
|
412
|
-
backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
|
|
413
|
-
color: 'var(--button-text, #ffffff)',
|
|
414
|
-
border: 'none',
|
|
490
|
+
width: '100%',
|
|
491
|
+
textAlign: 'center',
|
|
415
492
|
padding: '0.55rem 0.75rem',
|
|
416
493
|
borderRadius: '10px',
|
|
417
494
|
fontSize: '0.8125rem',
|
|
418
495
|
fontWeight: 600,
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
gap: '0.375rem',
|
|
496
|
+
backgroundColor: 'var(--button-secondary-bg, rgba(255, 255, 255, 0.08))',
|
|
497
|
+
color: 'var(--button-secondary-text, var(--muted-text, #e2e8f0))',
|
|
498
|
+
border: '1px solid var(--card-border, rgba(226, 232, 240, 0.25))',
|
|
499
|
+
textDecoration: 'none',
|
|
424
500
|
transition: 'all 0.2s ease',
|
|
425
|
-
|
|
426
|
-
}, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
|
|
501
|
+
}, className: "hover:brightness-110 active:scale-95", children: actionLabelPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: actionLabelPath, "data-preview-field-path": actionLabelPath, defaultValue: resolvedActionLabel })) : ((0, jsx_runtime_1.jsx)("span", { children: resolvedActionLabel })) }))] }))] })] })] }));
|
|
427
502
|
}
|
|
@@ -114,6 +114,9 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
|
|
|
114
114
|
currency?: string;
|
|
115
115
|
whatsappNumber?: string;
|
|
116
116
|
whatsappPhone?: string;
|
|
117
|
+
showDetailLink?: boolean;
|
|
118
|
+
showDetailButton?: boolean;
|
|
119
|
+
detailActionLabel?: string;
|
|
117
120
|
className?: string;
|
|
118
121
|
}
|
|
119
122
|
/**
|
|
@@ -124,6 +127,6 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
|
|
|
124
127
|
*
|
|
125
128
|
* Created by Chamika Gayashan & Induranga Kawishwara
|
|
126
129
|
*/
|
|
127
|
-
export declare function EditableProductGrid({ currency, whatsappNumber, whatsappPhone, sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, showSearch, searchPlaceholder, enableBackendSearch, onSearchChange, enablePagination, pageSize, pageSizeOptions, showPageSizeSelector, paginationVariant, hidePaginationOnSinglePage, currentPage: controlledPage, initialPage, onPageChange, scrollToTopOnPageChange, totalProducts, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
|
|
130
|
+
export declare function EditableProductGrid({ currency, whatsappNumber, whatsappPhone, sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, showSearch, searchPlaceholder, enableBackendSearch, onSearchChange, enablePagination, pageSize, pageSizeOptions, showPageSizeSelector, paginationVariant, hidePaginationOnSinglePage, currentPage: controlledPage, initialPage, onPageChange, scrollToTopOnPageChange, totalProducts, showDetailLink, showDetailButton, detailActionLabel, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
|
|
128
131
|
export declare const ProductGrid: typeof EditableProductGrid;
|
|
129
132
|
export type ProductGridItem = ProductItem;
|
|
@@ -14,7 +14,7 @@ const SiteDataProvider_1 = require("./SiteDataProvider");
|
|
|
14
14
|
*
|
|
15
15
|
* Created by Chamika Gayashan & Induranga Kawishwara
|
|
16
16
|
*/
|
|
17
|
-
function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone, sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, className = '', style, ...props }) {
|
|
17
|
+
function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone, sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, showDetailLink = true, showDetailButton, detailActionLabel, className = '', style, ...props }) {
|
|
18
18
|
const sectionRef = (0, react_1.useRef)(null);
|
|
19
19
|
const siteData = (0, SiteDataProvider_1.useSiteData)();
|
|
20
20
|
const siteApi = (0, SiteDataProvider_1.useSiteApi)();
|
|
@@ -226,7 +226,7 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
|
|
|
226
226
|
const itemPath = resolvedListPath
|
|
227
227
|
? `${resolvedListPath}[${effectiveIndex}]`
|
|
228
228
|
: `${sectionPath}.${cardPrefix}${effectiveIndex + 1}`;
|
|
229
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
|
|
229
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, showDetailLink: showDetailLink, showDetailButton: showDetailButton, actionLabel: detailActionLabel, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
|
|
230
230
|
})) : (
|
|
231
231
|
/* Empty State — strictly inside the listPath container */
|
|
232
232
|
(0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16 px-4 rounded-3xl border border-dashed border-slate-300 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: "No products found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto", children: searchQuery
|
|
@@ -19,6 +19,8 @@ export interface ProductShowcaseItem {
|
|
|
19
19
|
badge?: string;
|
|
20
20
|
colors?: Array<ProductShowcaseColor | string>;
|
|
21
21
|
isAvailable?: boolean;
|
|
22
|
+
href?: string;
|
|
23
|
+
detailHref?: string;
|
|
22
24
|
[key: string]: unknown;
|
|
23
25
|
}
|
|
24
26
|
export interface EditableProductShowcaseProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -6,6 +6,7 @@ exports.ProductShowcase = EditableProductShowcase;
|
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const SiteDataProvider_1 = require("./SiteDataProvider");
|
|
9
|
+
const PlatformProductDetail_1 = require("./PlatformProductDetail");
|
|
9
10
|
const DEFAULT_PRODUCTS = [
|
|
10
11
|
{
|
|
11
12
|
id: 'phone-iphone-16-pro',
|
|
@@ -194,8 +195,8 @@ function EditableProductShowcase({ sectionPath = 'home', listPath = 'featuredPho
|
|
|
194
195
|
const activeColorIdx = selectedColors[phoneId] ?? 0;
|
|
195
196
|
const colorsList = phone.colors || [];
|
|
196
197
|
const activeColor = colorsList[activeColorIdx] || colorsList[0] || { name: 'Default', hex: '#9d9890' };
|
|
197
|
-
const detailUrl =
|
|
198
|
-
return ((0, jsx_runtime_1.jsxs)("li", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}]`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].card`, "data-preview-style-type": "card", className: "group relative flex flex-col justify-between p-6 sm:p-7 rounded-3xl border border-black/[0.08] bg-white/95 hover:border-cyan-400/60 transition-all duration-300 hover:-translate-y-1.5 shadow-[0_10px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(0,240,255,0.12)]", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-widest text-cyan-600 font-mono", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-type": "text", children: phone.brand }), (0, jsx_runtime_1.jsx)("h3", { className: "mt-1 text-xl font-bold text-zinc-950 tracking-tight group-hover:text-cyan-600 transition-colors", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-type": "text", children: (0, jsx_runtime_1.jsx)("a", { href: detailUrl, className: "hover:underline", children: phone.name }) }), phone.subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-type": "text", children: phone.subtitle }))] }), phone.badge && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 rounded-full border border-black/[0.08] bg-black/[0.03] px-2.5 py-0.5 text-[10px] font-semibold text-zinc-700 backdrop-blur-md", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-type": "text", children: phone.badge }))] }), (0, jsx_runtime_1.jsxs)("
|
|
198
|
+
const detailUrl = phone.href || phone.detailHref || (0, PlatformProductDetail_1.platformProductDetailHref)(phoneId, productDetailRoutePrefix);
|
|
199
|
+
return ((0, jsx_runtime_1.jsxs)("li", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}]`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].card`, "data-preview-style-type": "card", className: "group relative flex flex-col justify-between p-6 sm:p-7 rounded-3xl border border-black/[0.08] bg-white/95 hover:border-cyan-400/60 transition-all duration-300 hover:-translate-y-1.5 shadow-[0_10px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(0,240,255,0.12)]", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-widest text-cyan-600 font-mono", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-type": "text", children: phone.brand }), (0, jsx_runtime_1.jsx)("h3", { className: "mt-1 text-xl font-bold text-zinc-950 tracking-tight group-hover:text-cyan-600 transition-colors", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-type": "text", children: (0, jsx_runtime_1.jsx)("a", { href: detailUrl, className: "hover:underline", "data-preview-static": "Open the stable live product detail page", children: phone.name }) }), phone.subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-type": "text", children: phone.subtitle }))] }), phone.badge && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 rounded-full border border-black/[0.08] bg-black/[0.03] px-2.5 py-0.5 text-[10px] font-semibold text-zinc-700 backdrop-blur-md", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-type": "text", children: phone.badge }))] }), (0, jsx_runtime_1.jsxs)("a", { href: detailUrl, "data-preview-static": "Open the stable live product detail page", className: "relative my-6 h-60 w-full overflow-clip rounded-2xl border border-black/[0.06] bg-slate-100 flex items-center justify-center block", children: [(0, jsx_runtime_1.jsx)("img", { src: phone.image, alt: phone.name || 'Product Image', "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].image`, className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-108" }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-30" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-black/[0.06]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", "data-preview-list-path": `${sectionPath}.${listPath}[${idx}].colors`, children: [colorsList.map((c, colorIdx) => ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}].colors[${colorIdx}]`, className: "inline-flex items-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
|
|
199
200
|
e.stopPropagation();
|
|
200
201
|
setSelectedColors((prev) => ({ ...prev, [phoneId]: colorIdx }));
|
|
201
202
|
}, "aria-label": c.name, title: c.name, className: `h-4 w-4 rounded-full transition-all cursor-pointer ${activeColorIdx === colorIdx
|
|
@@ -208,6 +209,6 @@ function EditableProductShowcase({ sectionPath = 'home', listPath = 'featuredPho
|
|
|
208
209
|
// eslint-disable-next-line @next/next/no-location-assign-relative-destination
|
|
209
210
|
window.location.href = detailUrl;
|
|
210
211
|
}
|
|
211
|
-
}, className: "flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-black/[0.02] text-zinc-600 hover:text-cyan-600 hover:border-cyan-400/50 hover:bg-cyan-50/50 transition-all cursor-pointer", title: "Quick View", "aria-label": "Quick View Product", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => handleWhatsAppOrder(phone, activeColor.name, e), className: "w-full flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-600 py-3 px-4 text-xs font-bold text-white shadow-[0_4px_15px_rgba(0,240,255,0.25)] hover:shadow-[0_6px_25px_rgba(0,240,255,0.45)] transition-all hover:scale-[1.01] active:scale-[0.99] cursor-pointer", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-white", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.055-.992-.061-.635-.206-1.464-.567-2.527-1.63-1.341-1.341-1.849-2.531-2.006-2.986-.157-.455-.015-.81.212-1.037.202-.202.455-.253.606-.253.152 0 .303.004.436.012.141.008.329-.053.515.394.192.465.657 1.602.714 1.719.057.116.096.253.019.405-.076.152-.114.248-.228.38-.114.133-.24.296-.343.397-.114.114-.233.238-.1.467.133.228.591.976 1.269 1.58 1.077.959 1.83 1.157 2.058 1.271.228.114.362.096.495-.057.133-.152.571-.666.723-.894.152-.228.303-.19.515-.114.212.076 1.346.635 1.575.749.228.114.38.171.436.266.057.095.057.553-.087.958z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-target": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-type": "text", children: whatsappOrderLabel })] })] })] }, phoneId));
|
|
212
|
+
}, className: "flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-black/[0.02] text-zinc-600 hover:text-cyan-600 hover:border-cyan-400/50 hover:bg-cyan-50/50 transition-all cursor-pointer", title: "Quick View", "aria-label": "Quick View Product", "data-preview-static": "Open the product quick view or detail page", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => handleWhatsAppOrder(phone, activeColor.name, e), className: "w-full flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-600 py-3 px-4 text-xs font-bold text-white shadow-[0_4px_15px_rgba(0,240,255,0.25)] hover:shadow-[0_6px_25px_rgba(0,240,255,0.45)] transition-all hover:scale-[1.01] active:scale-[0.99] cursor-pointer", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-white", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.055-.992-.061-.635-.206-1.464-.567-2.527-1.63-1.341-1.341-1.849-2.531-2.006-2.986-.157-.455-.015-.81.212-1.037.202-.202.455-.253.606-.253.152 0 .303.004.436.012.141.008.329-.053.515.394.192.465.657 1.602.714 1.719.057.116.096.253.019.405-.076.152-.114.248-.228.38-.114.133-.24.296-.343.397-.114.114-.233.238-.1.467.133.228.591.976 1.269 1.58 1.077.959 1.83 1.157 2.058 1.271.228.114.362.096.495-.057.133-.152.571-.666.723-.894.152-.228.303-.19.515-.114.212.076 1.346.635 1.575.749.228.114.38.171.436.266.057.095.057.553-.087.958z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-target": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-type": "text", children: whatsappOrderLabel })] })] })] }, phoneId));
|
|
212
213
|
}) })] })] }));
|
|
213
214
|
}
|
|
@@ -13,6 +13,8 @@ export interface ProductQuickViewItem {
|
|
|
13
13
|
isAvailable?: boolean;
|
|
14
14
|
rating?: number;
|
|
15
15
|
reviewCount?: number;
|
|
16
|
+
href?: string;
|
|
17
|
+
detailHref?: string;
|
|
16
18
|
[key: string]: unknown;
|
|
17
19
|
}
|
|
18
20
|
export interface ProductQuickViewProps {
|
|
@@ -27,6 +29,8 @@ export interface ProductQuickViewProps {
|
|
|
27
29
|
*/
|
|
28
30
|
itemPath?: string;
|
|
29
31
|
addToCartLabel?: string;
|
|
32
|
+
showDetailLink?: boolean;
|
|
33
|
+
detailLinkText?: string;
|
|
30
34
|
}
|
|
31
35
|
/**
|
|
32
36
|
* DENEB UI — Product Quick View Modal
|
|
@@ -37,4 +41,4 @@ export interface ProductQuickViewProps {
|
|
|
37
41
|
*
|
|
38
42
|
* Created by Chamika Gayashan & Induranga Kawishwara
|
|
39
43
|
*/
|
|
40
|
-
export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, itemPath, addToCartLabel, }: ProductQuickViewProps): React.JSX.Element | null;
|
|
44
|
+
export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, itemPath, addToCartLabel, showDetailLink, detailLinkText, }: ProductQuickViewProps): React.JSX.Element | null;
|
package/dist/ProductQuickView.js
CHANGED
|
@@ -4,6 +4,7 @@ exports.ProductQuickView = ProductQuickView;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const utils_1 = require("./utils");
|
|
7
|
+
const PlatformProductDetail_1 = require("./PlatformProductDetail");
|
|
7
8
|
/**
|
|
8
9
|
* DENEB UI — Product Quick View Modal
|
|
9
10
|
*
|
|
@@ -13,7 +14,7 @@ const utils_1 = require("./utils");
|
|
|
13
14
|
*
|
|
14
15
|
* Created by Chamika Gayashan & Induranga Kawishwara
|
|
15
16
|
*/
|
|
16
|
-
function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', itemPath, addToCartLabel = 'Add to Selection', }) {
|
|
17
|
+
function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', itemPath, addToCartLabel = 'Add to Selection', showDetailLink = true, detailLinkText = 'View full product details', }) {
|
|
17
18
|
const [quantity, setQuantity] = (0, react_1.useState)(1);
|
|
18
19
|
const [selectedImage, setSelectedImage] = (0, react_1.useState)('');
|
|
19
20
|
(0, react_1.useEffect)(() => {
|
|
@@ -58,5 +59,5 @@ function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '
|
|
|
58
59
|
}, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full max-w-2xl overflow-hidden rounded-3xl bg-white shadow-2xl border border-slate-100 flex flex-col md:flex-row max-h-[90vh]", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 p-2 text-slate-400 hover:text-slate-700 bg-white/80 hover:bg-white rounded-full shadow-sm backdrop-blur transition-colors", "aria-label": "Close modal", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "md:w-1/2 p-6 flex flex-col items-center justify-center bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full aspect-square rounded-2xl overflow-hidden bg-white shadow-sm flex items-center justify-center", children: [product.badge && ((0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.badge` } : {}), className: "absolute top-3 left-3 px-2.5 py-1 text-xs font-bold text-white bg-red-500 rounded-lg shadow-sm", children: product.badge })), selectedImage ? ((0, jsx_runtime_1.jsx)("img", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.image` } : {}), src: (0, utils_1.withBasePath)(selectedImage), alt: product.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-slate-300 text-sm", children: "No image available" }))] }), images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 mt-4 overflow-x-auto max-w-full pb-1", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedImage(img), className: `w-12 h-12 rounded-lg overflow-hidden border-2 transition-all flex-shrink-0 ${selectedImage === img ? 'border-primary shadow-sm' : 'border-slate-200 opacity-60 hover:opacity-100'}`, children: (0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.withBasePath)(img), alt: "", className: "w-full h-full object-cover" }) }, idx))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "md:w-1/2 p-6 flex flex-col justify-between overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold ${isAvailable ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'}`, children: isAvailable ? 'In Stock' : 'Out of Stock' }), product.rating && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-amber-500 flex items-center gap-1 font-medium", children: ["\u2605 ", product.rating, " ", product.reviewCount ? `(${product.reviewCount})` : ''] }))] }), (0, jsx_runtime_1.jsx)("h3", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.name` } : {}), className: "text-xl font-bold text-slate-900 leading-tight", children: product.title }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.price` } : {}), className: "text-2xl font-black text-slate-900", children: [currency, product.price] }), product.originalPrice && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-slate-400 line-through", children: [currency, product.originalPrice] }))] }), product.description && ((0, jsx_runtime_1.jsx)("p", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.description` } : {}), className: "mt-4 text-sm text-slate-600 leading-relaxed", children: product.description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 pt-6 border-t border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-slate-700", children: "Quantity" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center rounded-xl border border-slate-200 bg-slate-50 p-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => Math.max(1, q - 1)), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-10 text-center font-bold text-sm text-slate-800", children: quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => q + 1), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "+" })] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: !isAvailable, onClick: handleAddToCart, className: "w-full py-3.5 px-4 rounded-xl font-bold text-sm text-white shadow-lg transition-all duration-200 active:scale-98 disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 flex items-center justify-center gap-2", style: {
|
|
59
60
|
backgroundColor: 'var(--color-primary, #0f172a)',
|
|
60
61
|
boxShadow: '0 4px 14px rgba(15, 23, 42, 0.25)',
|
|
61
|
-
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), (0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.addToSelectionLabel` } : {}), children: isAvailable ? addToCartLabel : 'Out of Stock' })] })] })] })] }) }));
|
|
62
|
+
}, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), (0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.addToSelectionLabel` } : {}), children: isAvailable ? addToCartLabel : 'Out of Stock' })] }), showDetailLink && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-center", children: (0, jsx_runtime_1.jsxs)("a", { href: product.href || product.detailHref || (0, PlatformProductDetail_1.platformProductDetailHref)(product.id), "data-preview-static": "Open the stable live product detail page", className: "text-xs font-semibold text-slate-500 hover:text-slate-900 transition-colors inline-flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { children: detailLinkText }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2192" })] }) }))] })] })] }) }));
|
|
62
63
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deneb-ui/ui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.109",
|
|
4
4
|
"description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"license": "MIT",
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@deneb-ui/core": "^2.0.
|
|
53
|
+
"@deneb-ui/core": "^2.0.109"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": "^18.0.0 || ^19.0.0",
|