Amba-Emails/emails/payment-request.tsx

import {
  Heading,
  Section,
  Text,
} from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Card } from './components/Card';
import { Button } from './components/Button';
import { theme } from './theme';

interface PaymentRequestEmailProps {
  userName?: string;
  requesterName?: string;
  amount?: string;
  description?: string;
  requestId?: string;
  dueDate?: string;
}

export const PaymentRequestEmail = ({
  userName = 'Kirubel',
  requesterName = 'Sarah Johnson',
  amount = '$250.00',
  description = 'Dinner bill split - Italian Restaurant',
  requestId = 'REQ-987654321',
  dueDate = 'July 20, 2024',
}: PaymentRequestEmailProps) => {
  return (
    <EmailLayout
      preview={`${requesterName} has sent you a payment request for ${amount}.`}
    >
      <Section>
        <Heading style={heading}>
          New Payment Request 💰
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          <strong>{requesterName}</strong> has sent you a payment request. Here are the details:
        </Text>
        <Card>
          <Section style={detailRow}>
            <Text style={detailLabel}>Requested By:</Text>
            <Text style={detailValue}>{requesterName}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Amount:</Text>
            <Text style={detailAmount}>{amount}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Description:</Text>
            <Text style={detailValue}>{description}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Request ID:</Text>
            <Text style={detailValue}>{requestId}</Text>
          </Section>
          {dueDate && (
            <Section style={detailRow}>
              <Text style={detailLabel}>Due Date:</Text>
              <Text style={detailValue}>{dueDate}</Text>
            </Section>
          )}
        </Card>
        <Text style={text}>
          You can review and pay this request directly from the app. Payment is secure and will be processed immediately.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/payment-requests">
            View & Pay Request
          </Button>
        </Section>
        <Text style={noteText}>
          <strong>Note:</strong> This payment request will remain pending until you complete the payment. You'll receive a confirmation email once the payment is processed.
        </Text>
        <Text style={text}>
          Best regards,<br />
          The Amba Team
        </Text>
      </Section>
    </EmailLayout>
  );
};

const heading = {
  color: theme.colors.primary,
  fontSize: '28px',
  fontWeight: '700',
  margin: '0 0 24px',
};

const text = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0 0 16px',
};

const detailRow = {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '12px',
  paddingBottom: '12px',
  borderBottom: `1px solid ${theme.colors.border}`,
  alignItems: 'flex-start',
};

const detailLabel = {
  color: theme.colors.text,
  fontSize: '14px',
  fontWeight: '600',
  margin: '0',
  flex: '1',
};

const detailValue = {
  color: theme.colors.textDark,
  fontSize: '14px',
  margin: '0',
  textAlign: 'right' as const,
  flex: '1',
};

const detailAmount = {
  color: theme.colors.primary,
  fontSize: '18px',
  fontWeight: '700',
  margin: '0',
  textAlign: 'right' as const,
  flex: '1',
};

const buttonSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
};

const noteText = {
  color: theme.colors.text,
  fontSize: '14px',
  lineHeight: '20px',
  margin: '24px 0 16px',
  padding: '12px',
  backgroundColor: '#fff9e6',
  borderRadius: '4px',
  borderLeft: `3px solid ${theme.colors.accent}`,
};

PaymentRequestEmail.PreviewProps = {
  userName: 'Kirubel',
  requesterName: 'Sarah Johnson',
  amount: '$250.00',
  description: 'Dinner bill split - Italian Restaurant',
  requestId: 'REQ-987654321',
  dueDate: 'July 20, 2024',
} as PaymentRequestEmailProps;

export default PaymentRequestEmail;