payaza-storefront-layouts 1.0.13 → 1.0.14

package/dist/preview/LayoutPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutPreview.d.ts","sourceRoot":"","sources":["../../src/preview/LayoutPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAWjE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAiMD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAEtD"}
+{"version":3,"file":"LayoutPreview.d.ts","sourceRoot":"","sources":["../../src/preview/LayoutPreview.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAUjE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,eAAe,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA4LD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAEtD"}

package/dist/preview/LayoutPreview.js

@@ -3,13 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback } from 'react';
 import { getPreviewDataByLayout } from '../lib/preview-data';
 import { ToastProvider, StoreProvider, LoadingProvider, AuthProvider, } from '../index';
-import { ShadowDOMWrapper } from './ShadowDOMWrapper';
 import { PreviewRouter } from './PreviewRouter';
 /**
  * LayoutPreview Component
  *
  * Renders a layout component with embedded preview data and client-side routing.
- * Uses Shadow DOM for complete style/DOM isolation and handles routing via URL query params.
+ * Handles routing via URL query params and provides all necessary context providers.
+ *
+ * Note: This component does NOT include ShadowDOM. For style isolation, wrap this
+ * component with ShadowDOMWrapper from the package.
+ *
  * This component is used to preview layouts in standalone applications
  * and demonstrates that layouts are self-sustaining with embedded data.
  */
@@ -98,21 +101,21 @@ function LayoutPreviewWithRouter({ layout, className, initialRoute, onRouteChang
             window.removeEventListener('hashchange', checkUrlChange);
         };
     }, [isClient, onRouteChange, getRouteFromUrl]);
-    // Link click handler - passed to ShadowDOMWrapper to handle clicks inside Shadow DOM
-    const handleLinkClick = useCallback((route) => {
+    // Navigation handler - called by PreviewRouter or external navigation
+    const handleNavigate = useCallback((route) => {
         // Normalize route (ensure it starts with /)
         const normalizedRoute = route.startsWith('/') ? route : `/${route}`;
-        // Update URL with query param using pushState
-        // PreviewClient will sync with searchParams and trigger re-render
+        // Update state immediately for instant UI update
+        setCurrentRoute(normalizedRoute);
+        onRouteChange?.(normalizedRoute);
+        // Update URL with query param using pushState if in browser
+        // This allows external components (like ShadowDOMWrapper) to sync
         if (typeof window !== 'undefined') {
             const newUrl = new URL(window.location.href);
             // Encode the route for URL (handles /contact -> %2Fcontact)
             newUrl.searchParams.set('route', normalizedRoute);
             window.history.pushState({ route: normalizedRoute }, '', newUrl.toString());
-            // Update state immediately for instant UI update
-            setCurrentRoute(normalizedRoute);
-            onRouteChange?.(normalizedRoute);
-            // Trigger a custom event to notify PreviewClient of the change
+            // Trigger a custom event to notify external components of the change
             // This ensures Next.js searchParams updates
             window.dispatchEvent(new PopStateEvent('popstate'));
         }
@@ -129,11 +132,7 @@ function LayoutPreviewWithRouter({ layout, className, initialRoute, onRouteChang
     if (!isClient) {
         return (_jsx("div", { className: `flex items-center justify-center p-8 ${className || ''}`, children: _jsx("div", { className: "text-center", children: _jsx("p", { className: "text-sm text-gray-500", children: "Loading preview..." }) }) }));
     }
-    return (_jsx("div", { style: style, className: `min-h-screen w-full ${className || ''}`, children: _jsx(ShadowDOMWrapper, { onLinkClick: handleLinkClick, storeSlug: previewData.slug, children: _jsx(ToastProvider, { children: _jsx(StoreProvider, { initialConfig: previewData, storeSlug: previewData.slug, children: _jsx(LoadingProvider, { children: _jsx(AuthProvider, { children: _jsx(PreviewRouter, { storeConfig: previewData, route: currentRoute.startsWith('/') ? currentRoute : `/${currentRoute}`, onNavigate: (route) => {
-                                    const normalized = route.startsWith('/') ? route : `/${route}`;
-                                    setCurrentRoute(normalized);
-                                    onRouteChange?.(normalized);
-                                } }) }) }) }) }) }) }));
+    return (_jsx("div", { style: style, className: `min-h-screen w-full ${className || ''}`, children: _jsx(ToastProvider, { children: _jsx(StoreProvider, { initialConfig: previewData, storeSlug: previewData.slug, children: _jsx(LoadingProvider, { children: _jsx(AuthProvider, { children: _jsx(PreviewRouter, { storeConfig: previewData, route: currentRoute.startsWith('/') ? currentRoute : `/${currentRoute}`, onNavigate: handleNavigate }) }) }) }) }) }));
 }
 // Main component - always uses the same implementation
 // Router hooks are called conditionally inside, but component structure is consistent

package/dist/preview/PreviewRouter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewRouter.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewRouter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsGhD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAkHD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CAsgBnF"}
+{"version":3,"file":"PreviewRouter.d.ts","sourceRoot":"","sources":["../../src/preview/PreviewRouter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAsGhD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAkHD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,kBAAkB,2CA+oBnF"}

package/dist/preview/PreviewRouter.js

@@ -399,7 +399,20 @@ export function PreviewRouter({ storeConfig, route, onNavigate }) {
         return _jsx("div", { children: "Contact page not available" });
     }
     // Route: /account
-    if (firstSegment === 'account') {
+    if (firstSegment === 'account' && !secondSegment) {
+        if (isElectronics) {
+            return (_jsx(ElectronicsPageWrapper, { storeConfig: storeConfig, children: _jsx(AccountPage, { storeConfig: storeConfig }) }));
+        }
+        if (isMotivational) {
+            return (_jsx(MotivationalPageWrapper, { storeConfig: storeConfig, children: _jsx(AccountPage, { storeConfig: storeConfig }) }));
+        }
+        return _jsx(AccountPage, { storeConfig: storeConfig });
+    }
+    // Route: /account/orders/[orderId]
+    if (firstSegment === 'account' && secondSegment === 'orders' && thirdSegment) {
+        // Render AccountPage with orders tab - order detail can be shown within AccountPage
+        // AccountPage uses searchParams for tab, so we navigate to account with tab=orders
+        // For preview, we'll show AccountPage with orders tab active
         if (isElectronics) {
             return (_jsx(ElectronicsPageWrapper, { storeConfig: storeConfig, children: _jsx(AccountPage, { storeConfig: storeConfig }) }));
         }
@@ -448,6 +461,22 @@ export function PreviewRouter({ storeConfig, route, onNavigate }) {
         }
         return _jsx(SizeGuidePage, { storeConfig: storeConfig });
     }
+    // Route: /order/success
+    if (firstSegment === 'order' && secondSegment === 'success') {
+        // Simple order success page
+        const primaryColor = storeConfig.branding.primaryColor;
+        return (_jsx(GenericPageWrapper, { storeConfig: storeConfig, children: _jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", children: _jsx("div", { className: "max-w-md w-full space-y-8 bg-white p-8 rounded-xl shadow-sm", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mx-auto h-16 w-16 mb-4 rounded-full flex items-center justify-center", style: { backgroundColor: `${primaryColor}20`, color: primaryColor }, children: _jsx("svg", { className: "h-8 w-8", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }), _jsx("h2", { className: "text-3xl font-extrabold text-gray-900 mb-2", children: "Order Confirmed!" }), _jsx("p", { className: "text-gray-600 mb-8", children: "Thank you for your purchase. Your order has been received." }), _jsxs("div", { className: "space-y-4", children: [_jsx("button", { onClick: () => onNavigate?.('/'), className: "w-full px-4 py-2 rounded-lg text-white font-medium", style: { backgroundColor: primaryColor }, children: "Continue Shopping" }), _jsx("button", { onClick: () => onNavigate?.('/account'), className: "w-full px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50", children: "View Order Details" })] })] }) }) }) }));
+    }
+    // Route: /payment/callback
+    if (firstSegment === 'payment' && secondSegment === 'callback') {
+        // Simple payment callback success page
+        return (_jsx(GenericPageWrapper, { storeConfig: storeConfig, children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-4 bg-gray-50", children: _jsxs("div", { className: "max-w-md w-full bg-white rounded-2xl shadow-sm p-8 text-center", children: [_jsx("div", { className: "flex justify-center mb-6", children: _jsx("div", { className: "h-16 w-16 rounded-full bg-green-100 flex items-center justify-center", children: _jsx("svg", { className: "h-8 w-8 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }), _jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Payment Successful" }), _jsx("p", { className: "text-gray-600 mb-8", children: "Your payment has been processed successfully." }), _jsx("button", { onClick: () => onNavigate?.('/order/success'), className: "w-full px-4 py-2 rounded-lg text-white font-medium", style: { backgroundColor: storeConfig.branding.primaryColor }, children: "View Order Confirmation" })] }) }) }));
+    }
+    // Route: /payment/error
+    if (firstSegment === 'payment' && secondSegment === 'error') {
+        // Simple payment error page
+        return (_jsx(GenericPageWrapper, { storeConfig: storeConfig, children: _jsx("div", { className: "min-h-screen flex items-center justify-center p-4 bg-gray-50", children: _jsxs("div", { className: "max-w-md w-full bg-white rounded-2xl shadow-sm p-8 text-center", children: [_jsx("div", { className: "flex justify-center mb-6", children: _jsx("div", { className: "h-16 w-16 rounded-full bg-red-100 flex items-center justify-center", children: _jsx("svg", { className: "h-8 w-8 text-red-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }) }), _jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Payment Failed" }), _jsx("p", { className: "text-gray-600 mb-8", children: "There was an issue processing your payment. Please try again." }), _jsxs("div", { className: "space-y-3", children: [_jsx("button", { onClick: () => onNavigate?.('/checkout'), className: "w-full px-4 py-2 rounded-lg text-white font-medium", style: { backgroundColor: storeConfig.branding.primaryColor }, children: "Return to Checkout" }), _jsx("button", { onClick: () => onNavigate?.('/cart'), className: "w-full px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50", children: "Return to Cart" })] })] }) }) }));
+    }
     // Fallback for generic pages - show 404 for now
     if (firstSegment) {
         return (_jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-lg font-semibold text-gray-600", children: "Page not found" }), _jsxs("p", { className: "text-sm text-gray-500 mt-2", children: ["Route: ", route] })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Shared layout components for StoreFront applications",
   "main": "dist/index.js",
   "module": "dist/index.js",