shipd 0.1.2 → 0.1.4

package/features/email/emails/payment-failed.tsx

@@ -0,0 +1,167 @@
+import { Text, Link, Section } from '@react-email/components';
+import { EmailLayout, styles } from './components/layout';
+
+interface PaymentFailedEmailProps {
+  planName: string;
+  retryDate: string;
+}
+
+export function PaymentFailedEmail({
+  planName,
+  retryDate,
+}: PaymentFailedEmailProps) {
+  return (
+    <EmailLayout preview="Payment failed - Action required">
+      <Text style={styles.h1}>Payment Failed</Text>
+
+      <Section style={alertBox}>
+        <Text style={alertText}>
+          <strong>Action Required:</strong> We couldn't process your payment for the {planName} subscription.
+        </Text>
+      </Section>
+
+      <Text style={styles.p}>
+        We attempted to charge your payment method on file, but the payment was declined. This can happen for several reasons:
+      </Text>
+
+      <ul style={list}>
+        <li style={listItem}>
+          <Text style={listText}>Insufficient funds</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Expired card</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Card blocked or frozen</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Incorrect billing information</Text>
+        </li>
+      </ul>
+
+      <Text style={styles.h2}>What Happens Next?</Text>
+
+      <Section style={infoBox}>
+        <table style={table}>
+          <tbody>
+            <tr>
+              <td style={labelCell}>Next retry:</td>
+              <td style={valueCell}>{retryDate}</td>
+            </tr>
+            <tr>
+              <td style={labelCell}>Status:</td>
+              <td style={valueCell}>Access maintained until retry</td>
+            </tr>
+          </tbody>
+        </table>
+      </Section>
+
+      <Text style={styles.p}>
+        Your access to SaaS Scaffold will remain active until our next retry attempt. To avoid any interruption, please update your payment method as soon as possible.
+      </Text>
+
+      <Link href="https://saas-scaffold.com/dashboard/billing" style={styles.button}>
+        Update Payment Method
+      </Link>
+
+      <Text style={styles.p}>
+        If the payment issue isn't resolved by the retry date, your subscription will be automatically canceled and access will be revoked.
+      </Text>
+
+      <Section style={supportBox}>
+        <Text style={supportText}>
+          Need help? Contact our support team at{' '}
+          <Link href="mailto:support@saas-scaffold.com" style={supportLink}>
+            support@saas-scaffold.com
+          </Link>
+        </Text>
+      </Section>
+
+      <Text style={styles.p}>
+        Thanks,<br />
+        The SaaS Scaffold Team
+      </Text>
+    </EmailLayout>
+  );
+}
+
+// Additional styles
+const alertBox = {
+  backgroundColor: '#2a1a1a',
+  border: '1px solid #ff5722',
+  borderRadius: '6px',
+  padding: '16px',
+  margin: '0 0 24px',
+};
+
+const alertText = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: '#ff9a80',
+  margin: 0,
+};
+
+const list = {
+  margin: '16px 0',
+  padding: '0 0 0 20px',
+};
+
+const listItem = {
+  margin: '8px 0',
+};
+
+const listText = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: '#cccccc',
+  margin: 0,
+};
+
+const infoBox = {
+  backgroundColor: '#1a1a1a',
+  border: '1px solid #2a2a2a',
+  borderRadius: '6px',
+  padding: '16px',
+  margin: '16px 0',
+};
+
+const table = {
+  width: '100%',
+  borderCollapse: 'collapse' as const,
+};
+
+const labelCell = {
+  fontSize: '14px',
+  color: '#999999',
+  padding: '8px 0',
+  width: '140px',
+};
+
+const valueCell = {
+  fontSize: '14px',
+  color: '#ffffff',
+  fontWeight: '600',
+  padding: '8px 0',
+};
+
+const supportBox = {
+  backgroundColor: '#1a1a1a',
+  border: '1px solid #2a2a2a',
+  borderRadius: '6px',
+  padding: '16px',
+  margin: '24px 0',
+};
+
+const supportText = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: '#cccccc',
+  margin: 0,
+};
+
+const supportLink = {
+  color: '#ff5722',
+  textDecoration: 'none',
+};
+
+export default PaymentFailedEmail;

package/features/email/emails/subscription-confirmation.tsx

@@ -0,0 +1,129 @@
+import { Text, Link, Section } from '@react-email/components';
+import { EmailLayout, styles } from './components/layout';
+
+interface SubscriptionConfirmationEmailProps {
+  planName: string;
+  amount: string;
+}
+
+export function SubscriptionConfirmationEmail({
+  planName,
+  amount,
+}: SubscriptionConfirmationEmailProps) {
+  return (
+    <EmailLayout preview={`Your ${planName} subscription is confirmed`}>
+      <Text style={styles.h1}>Subscription Confirmed! 🎉</Text>
+
+      <Text style={styles.p}>
+        Thank you for subscribing to SaaS Scaffold! Your subscription has been successfully activated.
+      </Text>
+
+      <Section style={summaryBox}>
+        <Text style={summaryTitle}>Subscription Summary</Text>
+        <table style={table}>
+          <tbody>
+            <tr>
+              <td style={labelCell}>Plan:</td>
+              <td style={valueCell}>{planName}</td>
+            </tr>
+            <tr>
+              <td style={labelCell}>Amount:</td>
+              <td style={valueCell}>{amount}</td>
+            </tr>
+            <tr>
+              <td style={labelCell}>Billing:</td>
+              <td style={valueCell}>Monthly (auto-renews)</td>
+            </tr>
+          </tbody>
+        </table>
+      </Section>
+
+      <Text style={styles.h2}>What's Next?</Text>
+
+      <Text style={styles.p}>
+        You now have access to all premium features:
+      </Text>
+
+      <ul style={list}>
+        <li style={listItem}>
+          <Text style={listText}>Generate unlimited projects with our CLI</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Access to all premium templates</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Priority support and updates</Text>
+        </li>
+        <li style={listItem}>
+          <Text style={listText}>Exclusive community access</Text>
+        </li>
+      </ul>
+
+      <Link href="https://saas-scaffold.com/dashboard" style={styles.button}>
+        Go to Dashboard
+      </Link>
+
+      <Text style={styles.p}>
+        You can manage your subscription, update payment methods, or view invoices anytime from your dashboard.
+      </Text>
+
+      <Text style={styles.p}>
+        Thanks for your support!<br />
+        The SaaS Scaffold Team
+      </Text>
+    </EmailLayout>
+  );
+}
+
+// Additional styles
+const summaryBox = {
+  backgroundColor: '#1a1a1a',
+  border: '1px solid #2a2a2a',
+  borderRadius: '6px',
+  padding: '24px',
+  margin: '24px 0',
+};
+
+const summaryTitle = {
+  fontSize: '18px',
+  fontWeight: '600',
+  color: '#ffffff',
+  margin: '0 0 16px',
+};
+
+const table = {
+  width: '100%',
+  borderCollapse: 'collapse' as const,
+};
+
+const labelCell = {
+  fontSize: '14px',
+  color: '#999999',
+  padding: '8px 0',
+  width: '100px',
+};
+
+const valueCell = {
+  fontSize: '14px',
+  color: '#ffffff',
+  fontWeight: '600',
+  padding: '8px 0',
+};
+
+const list = {
+  margin: '16px 0',
+  padding: '0 0 0 20px',
+};
+
+const listItem = {
+  margin: '12px 0',
+};
+
+const listText = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: '#cccccc',
+  margin: 0,
+};
+
+export default SubscriptionConfirmationEmail;

package/features/email/emails/welcome.tsx

@@ -0,0 +1,100 @@
+import { Text, Link, Section } from '@react-email/components';
+import { EmailLayout, styles } from './components/layout';
+
+interface WelcomeEmailProps {
+  userName?: string;
+}
+
+export function WelcomeEmail({ userName = 'there' }: WelcomeEmailProps) {
+  return (
+    <EmailLayout preview="Welcome to SaaS Scaffold! Let's get you started.">
+      <Text style={styles.h1}>Welcome to SaaS Scaffold! 👋</Text>
+
+      <Text style={styles.p}>
+        Hi {userName},
+      </Text>
+
+      <Text style={styles.p}>
+        Thanks for joining SaaS Scaffold! We're excited to help you build and ship your SaaS product faster than ever.
+      </Text>
+
+      <Section style={cardContainer}>
+        <Text style={cardTitle}>What's included in your subscription:</Text>
+        <ul style={list}>
+          <li style={listItem}>
+            <Text style={listText}><strong>Premium Templates</strong> - Production-ready Next.js templates</Text>
+          </li>
+          <li style={listItem}>
+            <Text style={listText}><strong>CLI Tool</strong> - Generate projects in seconds</Text>
+          </li>
+          <li style={listItem}>
+            <Text style={listText}><strong>Authentication</strong> - Better Auth with Polar.sh integration</Text>
+          </li>
+          <li style={listItem}>
+            <Text style={listText}><strong>Billing</strong> - Subscriptions and payments pre-configured</Text>
+          </li>
+          <li style={listItem}>
+            <Text style={listText}><strong>Priority Support</strong> - Get help when you need it</Text>
+          </li>
+        </ul>
+      </Section>
+
+      <Text style={styles.h2}>Get Started</Text>
+
+      <Text style={styles.p}>
+        Ready to create your first project? Run this command in your terminal:
+      </Text>
+
+      <Section style={styles.codeBlock}>
+        npx saas-scaffold init my-project
+      </Section>
+
+      <Link href="https://saas-scaffold.com/docs/getting-started" style={styles.button}>
+        View Documentation
+      </Link>
+
+      <Text style={styles.p}>
+        If you have any questions or need help getting started, don't hesitate to reach out to our support team.
+      </Text>
+
+      <Text style={styles.p}>
+        Happy building!<br />
+        The SaaS Scaffold Team
+      </Text>
+    </EmailLayout>
+  );
+}
+
+// Additional styles
+const cardContainer = {
+  backgroundColor: '#1a1a1a',
+  border: '1px solid #2a2a2a',
+  borderRadius: '6px',
+  padding: '24px',
+  margin: '24px 0',
+};
+
+const cardTitle = {
+  fontSize: '18px',
+  fontWeight: '600',
+  color: '#ffffff',
+  margin: '0 0 16px',
+};
+
+const list = {
+  margin: '0',
+  padding: '0 0 0 20px',
+};
+
+const listItem = {
+  margin: '12px 0',
+};
+
+const listText = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: '#cccccc',
+  margin: 0,
+};
+
+export default WelcomeEmail;

package/features/email/feature.config.json

@@ -0,0 +1,22 @@
+{
+  "name": "email",
+  "version": "1.0.0",
+  "description": "Resend email integration with React Email templates",
+  "dependencies": {
+    "resend": "^6.6.0",
+    "@react-email/components": "^1.0.2",
+    "@react-email/render": "^2.0.0"
+  },
+  "devDependencies": {},
+  "envVars": [
+    "RESEND_API_KEY",
+    "EMAIL_FROM"
+  ],
+  "files": [
+    "lib/email.ts",
+    "emails/**/*"
+  ],
+  "requires": [],
+  "conflicts": []
+}
+

package/features/email/lib/email.ts

@@ -0,0 +1,118 @@
+import { Resend } from 'resend';
+
+// Check if email is configured
+const isEmailConfigured = !!process.env.RESEND_API_KEY;
+
+if (!isEmailConfigured && process.env.NODE_ENV === 'development') {
+  console.warn('⚠️  Resend not configured - email sending disabled. Set RESEND_API_KEY to enable emails.');
+}
+
+export const resend = isEmailConfigured ? new Resend(process.env.RESEND_API_KEY) : null;
+
+/**
+ * Send an email using Resend
+ * @param to - Recipient email address
+ * @param subject - Email subject line
+ * @param react - React email component
+ * @param from - Sender email (defaults to noreply@yourdomain.com)
+ */
+export async function sendEmail({
+  to,
+  subject,
+  react,
+  from = process.env.EMAIL_FROM || 'SaaS Scaffold <noreply@saas-scaffold.com>',
+}: {
+  to: string;
+  subject: string;
+  react: React.ReactElement;
+  from?: string;
+}) {
+  // Skip if email is not configured
+  if (!resend) {
+    console.log(`📧 Email not sent (Resend not configured): ${subject} to ${to}`);
+    return { success: true, skipped: true };
+  }
+
+  try {
+    const { data, error } = await resend.emails.send({
+      from,
+      to,
+      subject,
+      react,
+    });
+
+    if (error) {
+      console.error('Failed to send email:', error);
+      throw new Error(`Email send failed: ${error.message}`);
+    }
+
+    console.log('Email sent successfully:', data);
+    return { success: true, data };
+  } catch (error) {
+    console.error('Email send error:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error'
+    };
+  }
+}
+
+/**
+ * Send welcome email to new users
+ */
+export async function sendWelcomeEmail(email: string, name?: string) {
+  const { WelcomeEmail } = await import('@/emails/welcome');
+
+  return sendEmail({
+    to: email,
+    subject: 'Welcome to SaaS Scaffold!',
+    react: WelcomeEmail({ userName: name || 'there' }),
+  });
+}
+
+/**
+ * Send password reset email
+ */
+export async function sendPasswordResetEmail(email: string, resetUrl: string) {
+  const { PasswordResetEmail } = await import('@/emails/password-reset');
+
+  return sendEmail({
+    to: email,
+    subject: 'Reset your password',
+    react: PasswordResetEmail({ resetUrl }),
+  });
+}
+
+/**
+ * Send subscription confirmation email
+ */
+export async function sendSubscriptionConfirmationEmail(
+  email: string,
+  planName: string,
+  amount: string
+) {
+  const { SubscriptionConfirmationEmail } = await import('@/emails/subscription-confirmation');
+
+  return sendEmail({
+    to: email,
+    subject: `Subscription confirmed: ${planName}`,
+    react: SubscriptionConfirmationEmail({ planName, amount }),
+  });
+}
+
+/**
+ * Send payment failed email
+ */
+export async function sendPaymentFailedEmail(
+  email: string,
+  planName: string,
+  retryDate: string
+) {
+  const { PaymentFailedEmail } = await import('@/emails/payment-failed');
+
+  return sendEmail({
+    to: email,
+    subject: 'Payment failed - Action required',
+    react: PaymentFailedEmail({ planName, retryDate }),
+  });
+}