45 | {isHovering ? (
46 |
60 | );
61 | };
--------------------------------------------------------------------------------
/apps/web/src/components/common/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React, { Component, ErrorInfo, ReactNode } from 'react';
4 |
5 | interface Props {
6 | children: ReactNode;
7 | fallback?: ReactNode; // Optional custom fallback component
8 | }
9 |
10 | interface State {
11 | hasError: boolean;
12 | error?: Error;
13 | }
14 |
15 | class ErrorBoundary extends Component
47 |
50 | ) : (
51 | children || (
52 | {activeText}
49 |
53 |
57 | )
58 | )}
59 | Drag and drop file here
55 |(or use the import button)
56 |
38 |
48 | );
49 | }
50 |
51 | return this.props.children;
52 | }
53 | }
54 |
55 | export default ErrorBoundary;
--------------------------------------------------------------------------------
/apps/web/src/components/common/FileDataDisplay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface FileDataDisplayProps {
4 | content: string;
5 | title?: string;
6 | }
7 |
8 | /**
9 | * A component to display string content, typically loaded from a file,
10 | * within a formatted, read-only container.
11 | */
12 | export const FileDataDisplay: React.FCOops, something went wrong.
39 |40 | We encountered an error. Please try refreshing the page or contact support if the problem persists. 41 |
42 | {this.state.error && ( 43 |
44 | {this.state.error.message}
45 |
46 | )}
47 |
15 | {title && (
16 |
24 | );
25 | };
--------------------------------------------------------------------------------
/apps/web/src/components/common/MarkdownRenderer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactMarkdown from 'react-markdown';
3 | import remarkGfm from 'remark-gfm';
4 | import { Prism } from 'react-syntax-highlighter';
5 | import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
6 |
7 | export interface MarkdownRendererProps {
8 | content: string;
9 | className?: string;
10 | }
11 |
12 | export const MarkdownRenderer: React.FC17 | {title} 18 |
19 | )} 20 |
21 | {content}
22 |
23 |
28 | & { inline?: boolean; children?: React.ReactNode }) {
32 | const match = /language-(\w+)/.exec(className || '');
33 | if (inline || !className) {
34 | return (
35 |
55 |
56 | );
57 | };
--------------------------------------------------------------------------------
/apps/web/src/components/common/TextInputArea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Textarea } from '@/components/ui/textarea';
3 | import { Label } from '@/components/ui/label';
4 |
5 | interface TextInputAreaProps {
6 | value: string;
7 | onChange: (value: string) => void;
8 | disabled?: boolean;
9 | label: string;
10 | placeholder?: string;
11 | id?: string;
12 | rows?: number;
13 | dataTestId?: string;
14 | }
15 |
16 | /**
17 | * A reusable textarea input component with a label.
18 | * (Refactored from MnemonicInputArea)
19 | */
20 | export const TextInputArea: React.FC
36 | {children}
37 |
38 | );
39 | }
40 | return (
41 |
42 |
46 | {String(children).replace(/\n$/, '')}
47 |
48 |
49 | );
50 | },
51 | }}
52 | >
53 | {content}
54 |
37 |
38 |
48 |
49 | );
50 | };
--------------------------------------------------------------------------------
/apps/web/src/components/demos/WalletBackupDemo/GenerateMnemonicButton.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent } from '@testing-library/react';
2 | import { describe, it, expect, vi } from 'vitest';
3 | import { GenerateMnemonicButton } from './GenerateMnemonicButton'; // Assuming this path
4 |
5 | describe('GenerateMnemonicButton Component', () => {
6 | it('should render a button with text "Generate Mnemonic"', () => {
7 | render(
13 | {children}
15 |
16 | {/*
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/src/components/marketing/Badges.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from '../../hooks/useTheme';
2 |
3 | export function Badges() {
4 | const { colorMode } = useTheme();
5 |
6 | const badgeTheme = colorMode === 'dark' ? 'dark' : 'light';
7 |
8 | const imageUrlPH = `https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=956609&theme=${badgeTheme}&t=${Date.now()}`;
9 |
10 | return (
11 |
28 | );
29 | }
--------------------------------------------------------------------------------
/apps/web/src/components/organizations/AdminBadge.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Badge } from "@/components/ui/badge";
3 |
4 | export const AdminBadge: React.FC = () => {
5 | return (
6 | 
27 |
40 | ) : currentOrganizationDetails ? (
41 |
28 |
31 |
32 |
35 |
36 |
39 |
42 |
49 | ) : (
50 | Name: {currentOrganizationDetails.name}
43 | Visibility: {currentOrganizationDetails.visibility}
44 | Created:
45 | {new Date(currentOrganizationDetails.created_at).toLocaleDateString()}
46 |
47 | {/* Add other details as needed */}
48 | No organization selected or details unavailable.
51 | )} 52 |
16 |
19 | );
20 | }
21 |
22 | if (capabilityError) {
23 | // Optional: Show an error if platform detection failed
24 | return (
25 | {children}
60 |
47 |
49 | )}
50 |
8 |
12 | );
13 | }
--------------------------------------------------------------------------------
/apps/web/src/pages/Notifications.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import { useNotificationStore } from '@paynless/store';
3 | import { logger } from '@paynless/utils';
4 | import { NotificationCard } from '@/components/notifications/NotificationCard';
5 |
6 | export const Notifications: React.FC = () => {
7 | const { notifications, fetchNotifications } = useNotificationStore(state => ({
8 | notifications: state.notifications,
9 | fetchNotifications: state.fetchNotifications,
10 | }));
11 |
12 | useEffect(() => {
13 | if (notifications.length === 0) {
14 | logger.debug('[NotificationsPage] No notifications in store, fetching...');
15 | fetchNotifications();
16 | }
17 | }, [notifications.length, fetchNotifications]);
18 |
19 | return (
20 |
9 |
11 |
21 |
34 | );
35 | };
36 |
37 | export default Notifications;
38 |
--------------------------------------------------------------------------------
/apps/web/src/pages/Profile.tsx:
--------------------------------------------------------------------------------
1 | import { useAuthStore } from '@paynless/store'
2 | import { ProfileEditor } from '../components/profile/ProfileEditor'
3 | import { ProfilePrivacySettingsCard } from '../components/profile/ProfilePrivacySettingsCard'
4 | export function ProfilePage() {
5 | const {
6 | profile: currentProfile,
7 | isLoading: authLoading,
8 | error: authError,
9 | } = useAuthStore((state) => ({
10 | profile: state.profile,
11 | isLoading: state.isLoading,
12 | error: state.error,
13 | }))
14 |
15 | if (authLoading && !currentProfile) {
16 | return (
17 |
22 |
33 | Notification History
23 | {notifications.length === 0 ? ( 24 |You have no notifications.
25 | ) : ( 26 |
27 | {notifications.map((notification) => (
28 |
31 | )}
32 |
18 |
22 | )
23 | }
24 |
25 | if (!currentProfile) {
26 | return (
27 |
19 |
21 | Loading profile...
20 |
28 |
32 | )
33 | }
34 |
35 | return (
36 |
29 | Could not load profile data. {authError?.message}
30 |
31 |
37 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/apps/web/src/pages/Register.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import { BrowserRouter } from 'react-router-dom';
3 | import { describe, it, expect, vi } from 'vitest';
4 | import { RegisterPage } from './Register';
5 |
6 | // Mock the RegisterForm component to isolate the RegisterPage test
7 | vi.mock('../../components/auth/RegisterForm', () => ({
8 | RegisterForm: () => (
9 |
38 |
41 | {/* Feedback moved inside ProfileEditor or handled via store state globally */}
42 |
10 |
11 |
12 | {/* Keep mock simple for page test */}
13 |
14 |
15 | ),
16 | }));
17 |
18 | // REMOVE Layout mock - RegisterPage doesn't render it directly
19 | // vi.mock('../components/layout/Layout', () => ({
20 | // // eslint-disable-next-line @typescript-eslint/no-explicit-any
21 | // Layout: ({ children }: { children: any }) => {children}
,
22 | // }));
23 |
24 |
25 | describe('RegisterPage Component', () => {
26 | const renderRegisterPage = () => {
27 | return render(
28 |
8 |
12 | );
13 | }
--------------------------------------------------------------------------------
/apps/web/src/pages/SubscriptionSuccess.tsx:
--------------------------------------------------------------------------------
1 | // src/pages/SubscriptionSuccess.tsx
2 | import { useEffect } from 'react';
3 | import { useAuthStore, useSubscriptionStore } from '@paynless/store';
4 | import { useNavigate } from 'react-router-dom';
5 | import { CheckCircle } from 'lucide-react';
6 |
7 | export function SubscriptionSuccessPage() {
8 | const user = useAuthStore(state => state.user);
9 | const refreshSubscription = useSubscriptionStore(state => state.refreshSubscription);
10 | const navigate = useNavigate();
11 |
12 | useEffect(() => {
13 | // Refresh subscription data when the component mounts
14 | if (user) {
15 | refreshSubscription();
16 | }
17 |
18 | // Redirect to dashboard after 5 seconds
19 | const timer = setTimeout(() => {
20 | navigate('/dashboard');
21 | }, 5000);
22 |
23 | return () => clearTimeout(timer);
24 | }, [user, refreshSubscription, navigate]);
25 |
26 | return (
27 |
9 |
11 |
28 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/apps/web/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
29 |
52 |
30 |
51 |
31 |
33 | 34 | Thank you for your subscription! 35 |
36 |37 | Your subscription has been processed successfully. You now have access to all the premium features. 38 |
39 |
40 |
50 | 41 | You will be redirected to the dashboard in a few seconds. If you're not redirected, please{' '} 42 | . 48 |
49 |Welcome to Tauri
14 | 15 | 34 |
18 | 
25 | 
32 | Click on the Tauri logo to learn more about the framework
35 | 36 | 40 | 41 |