@payez/next-mvp 4.8.1 → 4.8.3

package/src/components/auth/TraditionalAuthSection.tsx

@@ -1,103 +1,103 @@
-'use client';
-
-import React from 'react';
-
-interface Props {
-  email: string;
-  password: string;
-  onEmailChange: (email: string) => void;
-  onPasswordChange: (password: string) => void;
-  onSubmit: (e: React.FormEvent) => void;
-  isLoading?: boolean;
-  buttonText?: string;
-  showForgotPassword?: boolean;
-  onForgotPassword?: () => void;
-}
-
-export function TraditionalAuthSection({
-  email,
-  password,
-  onEmailChange,
-  onPasswordChange,
-  onSubmit,
-  isLoading,
-  buttonText = 'Sign In',
-  showForgotPassword = true,
-  onForgotPassword,
-}: Props) {
-  // text-left is DELIBERATE and load-bearing: a host card with text-align:center made the
-  // Email label render CENTRED while Password stayed left, because Password sits in a flex
-  // row (for the forgot link) that ignores inherited alignment and Email did not. A shared
-  // component must not inherit its alignment from whatever wraps it.
-  return (
-    <form onSubmit={onSubmit} className="space-y-4 text-left">
-      {/* Email */}
-      <div>
-        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
-          Email Address
-        </label>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => onEmailChange(e.target.value)}
-          placeholder="you@example.com"
-          disabled={isLoading}
-          required
-          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-          style={{
-            border: '1px solid var(--border-default)',
-            color: 'var(--text-primary)',
-            background: 'var(--bg-default)',
-          }}
-        />
-      </div>
-
-      {/* Password */}
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <label className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
-            Password
-          </label>
-          {showForgotPassword && onForgotPassword && (
-            <button
-              type="button"
-              onClick={onForgotPassword}
-              className="text-xs hover:underline"
-              style={{ color: 'var(--text-primary)' }}
-            >
-              Forgot?
-            </button>
-          )}
-        </div>
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => onPasswordChange(e.target.value)}
-          placeholder="••••••••"
-          disabled={isLoading}
-          required
-          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
-          style={{
-            border: '1px solid var(--border-default)',
-            color: 'var(--text-primary)',
-            background: 'var(--bg-default)',
-          }}
-        />
-      </div>
-
-      {/* Submit Button */}
-      <button
-        type="submit"
-        disabled={isLoading}
-        className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
-        style={{
-          border: '1px solid var(--border-default)',
-          color: 'white',
-          background: 'var(--color-primary, #10b981)',
-        }}
-      >
-        {isLoading ? 'Signing in...' : buttonText}
-      </button>
-    </form>
-  );
-}
+'use client';
+
+import React from 'react';
+
+interface Props {
+  email: string;
+  password: string;
+  onEmailChange: (email: string) => void;
+  onPasswordChange: (password: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  isLoading?: boolean;
+  buttonText?: string;
+  showForgotPassword?: boolean;
+  onForgotPassword?: () => void;
+}
+
+export function TraditionalAuthSection({
+  email,
+  password,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  isLoading,
+  buttonText = 'Sign In',
+  showForgotPassword = true,
+  onForgotPassword,
+}: Props) {
+  // text-left is DELIBERATE and load-bearing: a host card with text-align:center made the
+  // Email label render CENTRED while Password stayed left, because Password sits in a flex
+  // row (for the forgot link) that ignores inherited alignment and Email did not. A shared
+  // component must not inherit its alignment from whatever wraps it.
+  return (
+    <form onSubmit={onSubmit} className="space-y-4 text-left">
+      {/* Email */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+          Email Address
+        </label>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => onEmailChange(e.target.value)}
+          placeholder="you@example.com"
+          disabled={isLoading}
+          required
+          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+          style={{
+            border: '1px solid var(--border-default)',
+            color: 'var(--text-primary)',
+            background: 'var(--bg-default)',
+          }}
+        />
+      </div>
+
+      {/* Password */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+            Password
+          </label>
+          {showForgotPassword && onForgotPassword && (
+            <button
+              type="button"
+              onClick={onForgotPassword}
+              className="text-xs hover:underline"
+              style={{ color: 'var(--text-primary)' }}
+            >
+              Forgot?
+            </button>
+          )}
+        </div>
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => onPasswordChange(e.target.value)}
+          placeholder="••••••••"
+          disabled={isLoading}
+          required
+          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+          style={{
+            border: '1px solid var(--border-default)',
+            color: 'var(--text-primary)',
+            background: 'var(--bg-default)',
+          }}
+        />
+      </div>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
+        style={{
+          border: '1px solid var(--border-default)',
+          color: 'white',
+          background: 'var(--color-primary, #10b981)',
+        }}
+      >
+        {isLoading ? 'Signing in...' : buttonText}
+      </button>
+    </form>
+  );
+}

package/src/components/recovery/CompleteStep.tsx

@@ -1,36 +1,36 @@
-'use client';
-
-import React from 'react';
-
-interface Props {
-  onGoToLogin: () => void;
-}
-
-export function CompleteStep({ onGoToLogin }: Props) {
-  return (
-    <div className="bg-white border border-gray-300 rounded p-8 text-center">
-      <div className="bg-green-50 border border-green-200 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
-        <svg className="w-8 h-8 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-        </svg>
-      </div>
-
-      <h2 className="text-2xl font-semibold text-gray-900 mb-2">Password Reset Complete</h2>
-
-      <p className="text-gray-600 mb-2">
-        Your password has been successfully reset and your account lockout has been cleared.
-      </p>
-
-      <p className="text-gray-600 mb-6">
-        You can now log in with your new password.
-      </p>
-
-      <button
-        onClick={onGoToLogin}
-        className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900"
-      >
-        Go to Login
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+
+interface Props {
+  onGoToLogin: () => void;
+}
+
+export function CompleteStep({ onGoToLogin }: Props) {
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8 text-center">
+      <div className="bg-green-50 border border-green-200 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+        <svg className="w-8 h-8 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      </div>
+
+      <h2 className="text-2xl font-semibold text-gray-900 mb-2">Password Reset Complete</h2>
+
+      <p className="text-gray-600 mb-2">
+        Your password has been successfully reset and your account lockout has been cleared.
+      </p>
+
+      <p className="text-gray-600 mb-6">
+        You can now log in with your new password.
+      </p>
+
+      <button
+        onClick={onGoToLogin}
+        className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900"
+      >
+        Go to Login
+      </button>
+    </div>
+  );
+}

package/src/components/recovery/InitiateRecoveryStep.tsx

@@ -1,68 +1,68 @@
-'use client';
-
-import React from 'react';
-
-interface Props {
-  email: string;
-  setEmail: (email: string) => void;
-  onSubmit: () => void;
-  loading: boolean;
-}
-
-export function InitiateRecoveryStep({ email, setEmail, onSubmit, loading }: Props) {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onSubmit();
-  };
-
-  return (
-    <div className="rounded-2xl p-8" style={{ background: 'var(--bg-card)', border: '1px solid var(--border-default)' }}>
-      <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>Account Recovery</h2>
-      <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
-        Enter your email address to begin the account recovery process.
-      </p>
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label htmlFor="email" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-primary)' }}>
-            Email Address
-          </label>
-          <input
-            type="email"
-            id="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-            disabled={loading}
-            placeholder="Enter your email address"
-            className="w-full px-3 py-2 rounded focus:ring-2 focus:outline-none disabled:opacity-50"
-            style={{
-              border: '1px solid var(--border-default)',
-              color: 'var(--text-primary)',
-              background: 'var(--bg-default)'
-            }}
-          />
-        </div>
-
-        <button
-          type="submit"
-          disabled={loading || !email}
-          className="w-full py-2 px-4 rounded font-medium focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed"
-          style={{
-            border: '1px solid var(--border-default)',
-            color: 'var(--text-primary)',
-            background: 'var(--bg-default)'
-          }}
-        >
-          {loading ? 'Processing...' : 'Continue'}
-        </button>
-
-        <div className="text-center">
-          <a href="/account-auth/login" className="text-sm hover:underline font-medium" style={{ color: 'var(--text-primary)' }}>
-            Back to Login
-          </a>
-        </div>
-      </form>
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+
+interface Props {
+  email: string;
+  setEmail: (email: string) => void;
+  onSubmit: () => void;
+  loading: boolean;
+}
+
+export function InitiateRecoveryStep({ email, setEmail, onSubmit, loading }: Props) {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <div className="rounded-2xl p-8" style={{ background: 'var(--bg-card)', border: '1px solid var(--border-default)' }}>
+      <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>Account Recovery</h2>
+      <p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
+        Enter your email address to begin the account recovery process.
+      </p>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="email" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-primary)' }}>
+            Email Address
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            disabled={loading}
+            placeholder="Enter your email address"
+            className="w-full px-3 py-2 rounded focus:ring-2 focus:outline-none disabled:opacity-50"
+            style={{
+              border: '1px solid var(--border-default)',
+              color: 'var(--text-primary)',
+              background: 'var(--bg-default)'
+            }}
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading || !email}
+          className="w-full py-2 px-4 rounded font-medium focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed"
+          style={{
+            border: '1px solid var(--border-default)',
+            color: 'var(--text-primary)',
+            background: 'var(--bg-default)'
+          }}
+        >
+          {loading ? 'Processing...' : 'Continue'}
+        </button>
+
+        <div className="text-center">
+          <a href="/account-auth/login" className="text-sm hover:underline font-medium" style={{ color: 'var(--text-primary)' }}>
+            Back to Login
+          </a>
+        </div>
+      </form>
+    </div>
+  );
+}

package/src/components/recovery/RequestedStep.tsx

@@ -1,30 +1,30 @@
-'use client';
-
-import React from 'react';
-
-interface Props {
-  onGoToLogin: () => void;
-}
-
-/**
- * PAY-1588 (rigpert 60711): what a caller sees when the recovery request produced NO recovery session - an unknown
- * address, a locked account, a throttled caller. ONE sentence, identical for all of them, so the screen cannot be used
- * to tell which. It must not claim a reset happened (that is CompleteStep, reached only after a successful reset) and it
- * must not name a cause.
- */
-export function RequestedStep({ onGoToLogin }: Props) {
-  return (
-    <div className="bg-white border border-gray-300 rounded p-8 text-center">
-      <h2 className="text-2xl font-semibold text-gray-900 mb-2">Check your email</h2>
-
-      <p className="text-gray-600 mb-6">If an account exists for that email, we've sent instructions to reset your password.</p>
-
-      <button
-        onClick={onGoToLogin}
-        className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400"
-      >
-        Back to sign in
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+
+interface Props {
+  onGoToLogin: () => void;
+}
+
+/**
+ * PAY-1588 (rigpert 60711): what a caller sees when the recovery request produced NO recovery session - an unknown
+ * address, a locked account, a throttled caller. ONE sentence, identical for all of them, so the screen cannot be used
+ * to tell which. It must not claim a reset happened (that is CompleteStep, reached only after a successful reset) and it
+ * must not name a cause.
+ */
+export function RequestedStep({ onGoToLogin }: Props) {
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8 text-center">
+      <h2 className="text-2xl font-semibold text-gray-900 mb-2">Check your email</h2>
+
+      <p className="text-gray-600 mb-6">If an account exists for that email, we've sent instructions to reset your password.</p>
+
+      <button
+        onClick={onGoToLogin}
+        className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400"
+      >
+        Back to sign in
+      </button>
+    </div>
+  );
+}

package/src/components/recovery/SelectMethodStep.tsx

@@ -1,73 +1,73 @@
-'use client';
-
-import React from 'react';
-import { RecoverySession } from '../../types/recovery';
-
-interface Props {
-  session: RecoverySession;
-  onSelectMethod: (method: 'email' | 'sms' | 'authenticator') => void;
-  loading: boolean;
-}
-
-export function SelectMethodStep({ session, onSelectMethod, loading }: Props) {
-  return (
-    <div className="bg-white border border-gray-300 rounded p-8">
-      <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Verification Method</h2>
-      <p className="text-sm text-gray-600 mb-6">
-        Choose how you would like to receive your verification code.
-      </p>
-
-      <div className="bg-gray-50 border border-gray-200 rounded p-3 mb-6 text-sm">
-        {session.maskedEmail && (
-          <div className="mb-1">
-            <span className="text-gray-600">Email: </span>
-            <span className="text-gray-900 font-medium">{session.maskedEmail}</span>
-          </div>
-        )}
-        {session.maskedPhone && (
-          <div className="mb-1">
-            <span className="text-gray-600">Phone: </span>
-            <span className="text-gray-900 font-medium">{session.maskedPhone}</span>
-          </div>
-        )}
-        {session.hasAuthenticator && (
-          <div className="text-gray-600">
-            * This account has 2FA enabled
-          </div>
-        )}
-      </div>
-
-      <div className="space-y-2">
-        {session.availableMethods.includes('email') && (
-          <button
-            onClick={() => onSelectMethod('email')}
-            disabled={loading}
-            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Send Code via Email
-          </button>
-        )}
-
-        {session.availableMethods.includes('sms') && session.maskedPhone && (
-          <button
-            onClick={() => onSelectMethod('sms')}
-            disabled={loading}
-            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Send Code via SMS
-          </button>
-        )}
-
-        {session.availableMethods.includes('authenticator') && session.hasAuthenticator && (
-          <button
-            onClick={() => onSelectMethod('authenticator')}
-            disabled={loading}
-            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Use Authenticator App
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import React from 'react';
+import { RecoverySession } from '../../types/recovery';
+
+interface Props {
+  session: RecoverySession;
+  onSelectMethod: (method: 'email' | 'sms' | 'authenticator') => void;
+  loading: boolean;
+}
+
+export function SelectMethodStep({ session, onSelectMethod, loading }: Props) {
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8">
+      <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Verification Method</h2>
+      <p className="text-sm text-gray-600 mb-6">
+        Choose how you would like to receive your verification code.
+      </p>
+
+      <div className="bg-gray-50 border border-gray-200 rounded p-3 mb-6 text-sm">
+        {session.maskedEmail && (
+          <div className="mb-1">
+            <span className="text-gray-600">Email: </span>
+            <span className="text-gray-900 font-medium">{session.maskedEmail}</span>
+          </div>
+        )}
+        {session.maskedPhone && (
+          <div className="mb-1">
+            <span className="text-gray-600">Phone: </span>
+            <span className="text-gray-900 font-medium">{session.maskedPhone}</span>
+          </div>
+        )}
+        {session.hasAuthenticator && (
+          <div className="text-gray-600">
+            * This account has 2FA enabled
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        {session.availableMethods.includes('email') && (
+          <button
+            onClick={() => onSelectMethod('email')}
+            disabled={loading}
+            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Send Code via Email
+          </button>
+        )}
+
+        {session.availableMethods.includes('sms') && session.maskedPhone && (
+          <button
+            onClick={() => onSelectMethod('sms')}
+            disabled={loading}
+            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Send Code via SMS
+          </button>
+        )}
+
+        {session.availableMethods.includes('authenticator') && session.hasAuthenticator && (
+          <button
+            onClick={() => onSelectMethod('authenticator')}
+            disabled={loading}
+            className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Use Authenticator App
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}