payaza-storefront-layouts 1.0.50 → 1.0.52

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.
Files changed (6) hide show
  1. package/dist/components/ui/video-player.d.ts.map +1 -1
  2. package/dist/components/ui/video-player.js +14 -9
  3. package/dist/layouts/clothing/components/ClothingHomePage.d.ts.map +1 -1
  4. package/dist/layouts/clothing/components/ClothingHomePage.js +1 -1
  5. package/dist/layouts/food/components/FoodHomePage.js +7 -7
  6. package/package.json +1 -1
package/dist/components/ui/video-player.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["../../../src/components/ui/video-player.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,OAAkB,EAClB,QAAgB,EAChB,QAAe,EACf,IAAY,EACZ,KAAa,EACb,SAAS,EACT,WAAW,EACX,OAAO,GACR,EAAE,gBAAgB,2CAmMlB"}
1
+ {"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["../../../src/components/ui/video-player.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,OAAkB,EAClB,QAAgB,EAChB,QAAe,EACf,IAAY,EACZ,KAAa,EACb,SAAS,EACT,WAAW,EACX,OAAO,GACR,EAAE,gBAAgB,2CA6MlB"}
package/dist/components/ui/video-player.js CHANGED
@@ -25,25 +25,30 @@ export function VideoPlayer({ src, poster, context = 'inline', autoplay = false,
25
25
  }, [hasError, onError, src]);
26
26
  // Background video context - use iframe for YouTube/Vimeo, video tag for direct
27
27
  if (context === 'background') {
28
- if (!videoInfo)
28
+ // Helper to render poster fallback
29
+ const renderFallback = () => {
30
+ if (poster) {
31
+ return (_jsx("img", { src: poster, alt: "Hero Background", className: cn('absolute inset-0 w-full h-full object-cover', className) }));
32
+ }
29
33
  return null;
34
+ };
35
+ if (hasError)
36
+ return renderFallback();
37
+ if (!videoInfo)
38
+ return renderFallback();
30
39
  // YouTube or Vimeo - use iframe
31
40
  if (videoInfo.platform === 'youtube' || videoInfo.platform === 'vimeo') {
32
41
  const embedUrl = getBackgroundVideoEmbedUrl(src);
33
42
  if (!embedUrl)
34
- return null;
35
- return (_jsx("iframe", { ref: iframeRef, src: embedUrl, className: cn('absolute inset-0 w-full h-full', className), allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none' }, title: "Background video" }));
43
+ return renderFallback();
44
+ return (_jsx("iframe", { ref: iframeRef, src: embedUrl, className: cn('absolute inset-0 w-full h-full', className), allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none', pointerEvents: 'none' }, title: "Background video" }));
36
45
  }
37
46
  // Direct video file - use video tag
38
47
  if (videoInfo.platform === 'direct' && videoInfo.directUrl) {
39
48
  return (_jsx("video", { ref: videoRef, src: videoInfo.directUrl, poster: poster, autoPlay: true, muted: true, loop: true, playsInline: true, className: cn('absolute inset-0 w-full h-full object-cover', className), onError: () => setHasError(true) }));
40
49
  }
41
- // Instagram/TikTok - not ideal for background, but try to render
42
- if (videoInfo.platform === 'instagram' || videoInfo.platform === 'tiktok') {
43
- // For these platforms, we might want to show a placeholder or fallback
44
- return null;
45
- }
46
- return null;
50
+ // Instagram/TikTok or unknown - not supported for background, use fallback
51
+ return renderFallback();
47
52
  }
48
53
  // Embedded context - use iframe with controls
49
54
  if (context === 'embedded') {
package/dist/layouts/clothing/components/ClothingHomePage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAevD,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAaD,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAkuBrF"}
1
+ {"version":3,"file":"ClothingHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/components/ClothingHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAevD,UAAU,qBAAqB;IAC7B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAaD,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,qBAAqB,2CAquBrF"}
package/dist/layouts/clothing/components/ClothingHomePage.js CHANGED
@@ -263,7 +263,7 @@ export function ClothingHomePage({ storeConfig: initialConfig }) {
263
263
  };
264
264
  const categoryImage = extractCategoryImage(category.image);
265
265
  return (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: `group relative overflow-hidden rounded-2xl aspect-[3/4]`, children: [_jsxs("div", { className: "absolute inset-0 bg-gray-200", children: [_jsx(ImageWithFallback, { src: categoryImage, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "auto" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-80 group-hover:opacity-70 transition-opacity" })] }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-8", children: [_jsx("h3", { className: "text-2xl font-bold text-white mb-2 transform translate-y-0 transition-transform duration-300", children: category.name }), _jsx("div", { className: "h-0.5 w-12 bg-white/0 group-hover:bg-white/100 transition-all duration-500 mb-4" }), _jsxs("span", { className: "inline-flex items-center text-white text-sm font-medium opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300", children: [getLayoutText(storeConfig, 'common.shopNow', 'Shop Now'), " ", _jsx(ArrowRight, { className: "ml-2 h-4 w-4" })] })] })] }, category.id));
266
- }) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { "data-section": "editorial", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5" }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "absolute -bottom-8 -right-8 w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block animate-fade-in-up", style: { animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square" }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", children: layoutConfig?.sections?.marketing?.editorial?.description || "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButton?.text && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.primaryButton.link?.startsWith('/')
266
+ }) })] }) })), layoutConfig?.sections?.marketing?.editorial?.show !== false && (_jsx("section", { "data-section": "editorial", className: "py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-stone-50", children: _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-12 lg:gap-20 items-center", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "aspect-[4/5] rounded-lg overflow-hidden relative", children: _jsx(ImageWithFallback, { src: layoutConfig?.sections?.marketing?.editorial?.image || 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2000&auto=format&fit=crop', alt: "Editorial Lookbook", className: "w-full h-full object-cover", skeletonAspectRatio: "4/5" }) }), (layoutConfig?.sections?.marketing?.editorial?.detailImage) && (_jsx("div", { className: "absolute w-48 h-48 bg-white p-4 shadow-xl rounded-lg hidden md:block z-20 animate-fade-in-up", style: { bottom: '-2rem', right: '-2rem', animationDelay: '0.2s' }, children: _jsx("div", { className: "w-full h-full relative", children: _jsx(ImageWithFallback, { src: layoutConfig.sections.marketing.editorial.detailImage, alt: "Detail Shot", className: "w-full h-full object-cover rounded", skeletonAspectRatio: "square" }) }) }))] }), _jsxs("div", { className: "space-y-8", children: [_jsx("div", { className: "flex flex-col gap-2", children: _jsx("span", { className: "text-sm font-bold tracking-widest text-gray-500 uppercase", children: layoutConfig?.sections?.marketing?.editorial?.badgeText || "Lookbook" }) }), _jsx("h2", { className: "text-4xl md:text-5xl font-bold tracking-tight leading-tight text-gray-900", children: layoutConfig?.sections?.marketing?.editorial?.title ? (layoutConfig.sections.marketing.editorial.title.split('\n').map((line, idx, arr) => (_jsxs("span", { children: [line, idx < arr.length - 1 && _jsx("br", {})] }, idx)))) : (_jsxs(_Fragment, { children: ["Redefining Modern ", _jsx("br", {}), _jsx("span", { className: "italic font-serif", children: "Elegance" })] })) }), _jsx("p", { className: "text-lg text-gray-600 leading-relaxed", children: layoutConfig?.sections?.marketing?.editorial?.description || "Explore our latest editorial featuring timeless pieces crafted for the contemporary wardrobe. From essential basics to statement outwear, find your signature look." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 pt-4", children: [layoutConfig?.sections?.marketing?.editorial?.primaryButton?.text && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.primaryButton.link?.startsWith('/')
267
267
  ? `/${storeConfig.slug}${layoutConfig.sections.marketing.editorial.primaryButton.link}`
268
268
  : (layoutConfig.sections.marketing.editorial.primaryButton.link || `/${storeConfig.slug}/style-guide`), children: _jsx(Button, { className: "rounded-full px-8 py-6 bg-gray-900 hover:bg-black text-white transition-all", children: layoutConfig.sections.marketing.editorial.primaryButton.text }) })), layoutConfig?.sections?.marketing?.editorial?.secondaryButton?.text && (_jsx(Link, { href: layoutConfig.sections.marketing.editorial.secondaryButton.link?.startsWith('/')
269
269
  ? `/${storeConfig.slug}${layoutConfig.sections.marketing.editorial.secondaryButton.link}`
package/dist/layouts/food/components/FoodHomePage.js CHANGED
@@ -92,7 +92,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
92
92
  console.log('[FoodHomePage] Using sections.hero.sliders structure');
93
93
  }
94
94
  heroSlides = layoutConfig.sections.hero.sliders
95
- .filter((slider) => slider && slider.image) // Filter out invalid sliders
95
+ .filter((slider) => slider) // Relaxed filter: allow slides without explicit images
96
96
  .map((slider) => {
97
97
  // Extract button text - only use if not empty
98
98
  const primaryButtonText = slider.primaryButton?.text?.trim() || '';
@@ -100,7 +100,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
100
100
  if (process.env.NODE_ENV === 'development') {
101
101
  console.log('[FoodHomePage] Slider:', {
102
102
  id: slider.id,
103
- image: slider.image ? 'present' : 'missing',
103
+ image: slider.image ? 'present' : 'missing (using fallback)',
104
104
  title: slider.title,
105
105
  primaryButtonText,
106
106
  secondaryButtonText,
@@ -110,9 +110,9 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
110
110
  const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
111
111
  (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
112
112
  return {
113
- image: normalizeStoreImageUrl(slider.image) || '',
113
+ image: normalizeStoreImageUrl(slider.image) || "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop",
114
114
  badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : "#1 Food Delivery in Town",
115
- title: slider.title || "",
115
+ title: slider.title || "Taste the Extraordinary",
116
116
  highlight: slider.highlight || "", // Food layout specific
117
117
  description: slider.description || `${storeConfig.description} Experience culinary excellence delivered straight to your doorstep.`,
118
118
  // Only set button text if it's not empty - this allows button visibility logic to work
@@ -129,7 +129,7 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
129
129
  console.log('[FoodHomePage] Using top-level hero.sliders structure');
130
130
  }
131
131
  heroSlides = layoutConfig.hero.sliders
132
- .filter((slider) => slider && slider.image) // Filter out invalid sliders
132
+ .filter((slider) => slider) // Relaxed filter
133
133
  .map((slider) => {
134
134
  const primaryButtonText = slider.primaryButton?.text?.trim() || '';
135
135
  const secondaryButtonText = slider.secondaryButton?.text?.trim() || '';
@@ -137,9 +137,9 @@ export function FoodHomePage({ storeConfig: initialConfig }) {
137
137
  const showBadges = layoutConfig?.sections?.hero?.showBadges !== false &&
138
138
  (layoutConfig?.hero?.showBadges !== false || layoutConfig?.sections?.hero?.showBadges === undefined);
139
139
  return {
140
- image: normalizeStoreImageUrl(slider.image) || '',
140
+ image: normalizeStoreImageUrl(slider.image) || "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2000&auto=format&fit=crop",
141
141
  badge: (showBadges && slider.badge && slider.badge.trim() !== '') ? slider.badge : "#1 Food Delivery in Town",
142
- title: slider.title || "",
142
+ title: slider.title || "Taste the Extraordinary",
143
143
  highlight: slider.highlight || "", // Food layout specific
144
144
  description: slider.description || `${storeConfig.description} Experience culinary excellence delivered straight to your doorstep.`,
145
145
  primaryBtn: primaryButtonText || getLayoutText(storeConfig, 'common.orderNow', "Order Now"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "payaza-storefront-layouts",
3
- "version": "1.0.50",
3
+ "version": "1.0.52",
4
4
  "type": "module",
5
5
  "description": "Shared layout components for StoreFront applications",
6
6
  "main": "dist/index.js",