@payez/next-mvp 3.3.0 → 3.4.0

package/dist/components/account/UserAvatarMenu.js

@@ -44,7 +44,11 @@ function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true
     if (!session?.user) {
         return null;
     }
-    const userInitial = session.user.email?.charAt(0).toUpperCase() || 'U';
+    // Derive display initial from name or email — ignore anon/internal IDs
+    const userName = session.user?.name;
+    const userEmail = session.user.email;
+    const displaySource = userName || userEmail;
+    const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
     const handleNavigation = (path) => {
         setIsOpen(false);
         router.push(path);
@@ -69,7 +73,7 @@ function UserAvatarMenu({ basePath = '', showProfile = true, showSettings = true
             router.push(item.href);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full bg-[#349AD5] text-white font-semibold text-lg hover:bg-[#2980b9] transition-colors focus:outline-none focus:ring-2 focus:ring-[#349AD5] focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: userInitial }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: session.user.email }) }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "relative", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(!isOpen), className: "flex items-center justify-center h-10 w-10 rounded-full bg-[#349AD5] text-white font-semibold text-lg hover:bg-[#2980b9] transition-colors focus:outline-none focus:ring-2 focus:ring-[#349AD5] focus:ring-offset-2 dark:focus:ring-offset-slate-900", "aria-label": "User menu", "aria-expanded": isOpen, "aria-haspopup": "true", children: userInitial }), isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 mt-2 w-56 rounded-md shadow-lg z-50\r\n            bg-white dark:bg-slate-900\r\n            border border-gray-200 dark:border-slate-700", role: "menu", "aria-orientation": "vertical", children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-slate-700", children: [userName && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-700 dark:text-slate-200 truncate", children: userName })), userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400 truncate", children: userEmail })), !userName && !userEmail && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-slate-400", children: "Signed in" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "py-1", children: [showProfile && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { className: "h-4 w-4" }), label: "Profile", onClick: () => handleNavigation(`${basePath}/profile`) })), showSettings && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-4 w-4" }), label: "Settings", onClick: () => handleNavigation(`${basePath}/settings`) })), showSecurity && ((0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { className: "h-4 w-4" }), label: "Security", onClick: () => handleNavigation(`${basePath}/security`) })), customItems?.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem, { icon: item.icon, label: item.label, onClick: () => handleItemClick(item) }, index)))] }), (0, jsx_runtime_1.jsx)("div", { className: "border-t border-gray-200 dark:border-slate-700 py-1", children: (0, jsx_runtime_1.jsx)(MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), label: "Sign Out", onClick: handleSignOut, variant: "danger" }) })] }))] }));
 }
 function MenuItem({ icon, label, onClick, variant = 'default' }) {
     const baseClasses = "flex items-center w-full px-4 py-2 text-sm cursor-pointer transition-colors";

package/dist/lib/session-store.d.ts

@@ -34,6 +34,10 @@ export declare function createSession(data: SessionData): Promise<string>;
  * @returns The session data, or null if not found.
  */
 export declare function getSession(sessionToken: string): Promise<SessionData | null>;
+/**
+ * Refresh session TTL without reading/writing data (sliding window expiry).
+ */
+export declare function touchSession(token: string): Promise<void>;
 /**
  * Retrieves a session along with a version identifier for optimistic locking.
  * @param sessionToken The session token to look up.

package/dist/lib/session-store.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateSessionToken = generateSessionToken;
 exports.createSession = createSession;
 exports.getSession = getSession;
+exports.touchSession = touchSession;
 exports.getSessionWithVersion = getSessionWithVersion;
 exports.isAccessTokenFresh = isAccessTokenFresh;
 exports.deleteSession = deleteSession;
@@ -95,6 +96,13 @@ async function getSession(sessionToken) {
         return null;
     }
 }
+/**
+ * Refresh session TTL without reading/writing data (sliding window expiry).
+ */
+async function touchSession(token) {
+    const key = getSessionKey(token);
+    await redis_1.default.expire(key, SESSION_TTL);
+}
 /**
  * Retrieves a session along with a version identifier for optimistic locking.
  * @param sessionToken The session token to look up.

package/dist/pages/coming-soon/page.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ComingSoonPageProps {
+    homeUrl?: string;
+    /** Override logo — pass a React node (e.g. inline SVG or themed <img>) */
+    logo?: React.ReactNode;
+}
+export default function ComingSoonPage(props: ComingSoonPageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/pages/coming-soon/page.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComingSoonPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = __importDefault(require("next/link"));
+const useTheme_1 = require("../../theme/useTheme");
+function ComingSoonContent({ homeUrl = '/', logo }) {
+    const branding = (0, useTheme_1.useBranding)();
+    const colors = (0, useTheme_1.useColors)();
+    const fallbackLogo = branding.logo?.dark || branding.logo?.light;
+    const logoAlt = branding.logo?.alt || branding.appName || 'App Logo';
+    const logoHeight = branding.logo?.height || 48;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "min-h-screen flex items-center justify-center p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-md w-full text-center rounded-xl p-8 shadow-lg border", style: {
+                backgroundColor: 'var(--bg-card, #ffffff)',
+                borderColor: 'var(--border-default, #e5e7eb)',
+            }, children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6 flex justify-center", children: logo || (fallbackLogo && ((0, jsx_runtime_1.jsx)("img", { src: fallbackLogo, alt: logoAlt, style: { height: logoHeight } }))) }), (0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold mb-2", style: { color: 'var(--text-primary, #111827)' }, children: branding.appName || 'Our App' }), (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-3 py-1 text-xs font-medium rounded-full lowercase tracking-wide border mb-4", style: {
+                        borderColor: colors.primary || '#3b82f6',
+                        color: colors.primary || '#3b82f6',
+                    }, children: "coming soon" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-6", style: { color: 'var(--text-secondary, #6b7280)' }, children: "We're currently in beta and access is limited to approved users. Check back soon \u2014 we're working hard to open the doors!" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: homeUrl, className: "inline-block w-full font-medium py-3 px-4 rounded-lg transition-colors text-white", style: { backgroundColor: colors.primary || '#3b82f6' }, children: "Go to Home" })] }) }));
+}
+function ComingSoonPage(props) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ComingSoonContent, { ...props }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payez/next-mvp",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "sideEffects": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -816,6 +816,11 @@
       "types": "./dist/pages/client-admin/index.d.ts",
       "require": "./dist/pages/client-admin/index.js",
       "default": "./dist/pages/client-admin/index.js"
+    },
+    "./pages/coming-soon": {
+      "types": "./dist/pages/coming-soon/page.d.ts",
+      "require": "./dist/pages/coming-soon/page.js",
+      "default": "./dist/pages/coming-soon/page.js"
     }
   },
   "peerDependencies": {

package/src/components/account/UserAvatarMenu.tsx

@@ -83,7 +83,11 @@ export function UserAvatarMenu({
     return null;
   }
 
-  const userInitial = session.user.email?.charAt(0).toUpperCase() || 'U';
+  // Derive display initial from name or email — ignore anon/internal IDs
+  const userName = (session.user as any)?.name;
+  const userEmail = session.user.email;
+  const displaySource = userName || userEmail;
+  const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
 
   const handleNavigation = (path: string) => {
     setIsOpen(false);
@@ -132,11 +136,23 @@ export function UserAvatarMenu({
           role="menu"
           aria-orientation="vertical"
         >
-          {/* User email label */}
+          {/* User identity label */}
           <div className="px-4 py-3 border-b border-gray-200 dark:border-slate-700">
-            <p className="text-sm text-gray-500 dark:text-slate-400 truncate">
-              {session.user.email}
-            </p>
+            {userName && (
+              <p className="text-sm font-medium text-gray-700 dark:text-slate-200 truncate">
+                {userName}
+              </p>
+            )}
+            {userEmail && (
+              <p className="text-sm text-gray-500 dark:text-slate-400 truncate">
+                {userEmail}
+              </p>
+            )}
+            {!userName && !userEmail && (
+              <p className="text-sm text-gray-500 dark:text-slate-400">
+                Signed in
+              </p>
+            )}
           </div>
 
           {/* Menu items */}

package/src/lib/session-store.ts

@@ -87,6 +87,14 @@ export async function getSession(sessionToken: string): Promise<SessionData | nu
   }
 }
 
+/**
+ * Refresh session TTL without reading/writing data (sliding window expiry).
+ */
+export async function touchSession(token: string): Promise<void> {
+  const key = getSessionKey(token);
+  await redis.expire(key, SESSION_TTL);
+}
+
 /**
  * Retrieves a session along with a version identifier for optimistic locking.
  * @param sessionToken The session token to look up.

package/src/pages/coming-soon/page.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import React, { Suspense } from 'react';
+import Link from 'next/link';
+import { useBranding, useColors } from '../../theme/useTheme';
+
+interface ComingSoonPageProps {
+  homeUrl?: string;
+  /** Override logo — pass a React node (e.g. inline SVG or themed <img>) */
+  logo?: React.ReactNode;
+}
+
+function ComingSoonContent({ homeUrl = '/', logo }: ComingSoonPageProps) {
+  const branding = useBranding();
+  const colors = useColors();
+
+  const fallbackLogo = branding.logo?.dark || branding.logo?.light;
+  const logoAlt = branding.logo?.alt || branding.appName || 'App Logo';
+  const logoHeight = branding.logo?.height || 48;
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div
+        className="max-w-md w-full text-center rounded-xl p-8 shadow-lg border"
+        style={{
+          backgroundColor: 'var(--bg-card, #ffffff)',
+          borderColor: 'var(--border-default, #e5e7eb)',
+        }}
+      >
+        <div className="mb-6 flex justify-center">
+          {logo || (fallbackLogo && (
+            <img
+              src={fallbackLogo}
+              alt={logoAlt}
+              style={{ height: logoHeight }}
+            />
+          ))}
+        </div>
+
+        <h1
+          className="text-2xl font-bold mb-2"
+          style={{ color: 'var(--text-primary, #111827)' }}
+        >
+          {branding.appName || 'Our App'}
+        </h1>
+
+        <span
+          className="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full lowercase tracking-wide border mb-4"
+          style={{
+            borderColor: colors.primary || '#3b82f6',
+            color: colors.primary || '#3b82f6',
+          }}
+        >
+          coming soon
+        </span>
+
+        <p
+          className="mb-6"
+          style={{ color: 'var(--text-secondary, #6b7280)' }}
+        >
+          We&apos;re currently in beta and access is limited to approved users.
+          Check back soon &mdash; we&apos;re working hard to open the doors!
+        </p>
+
+        <Link
+          href={homeUrl}
+          className="inline-block w-full font-medium py-3 px-4 rounded-lg transition-colors text-white"
+          style={{ backgroundColor: colors.primary || '#3b82f6' }}
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default function ComingSoonPage(props: ComingSoonPageProps) {
+  return (
+    <Suspense>
+      <ComingSoonContent {...props} />
+    </Suspense>
+  );
+}