@beyondcorp/beyond-ui 1.4.4 → 1.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Auth/ForgotPasswordForm.js +1 -1
- package/dist/components/Auth/ForgotPasswordForm.js.map +1 -1
- package/dist/components/Auth/LoginForm.js +1 -1
- package/dist/components/Auth/LoginForm.js.map +1 -1
- package/dist/components/Auth/ResetPasswordForm.js +1 -1
- package/dist/components/Auth/ResetPasswordForm.js.map +1 -1
- package/dist/components/Auth/SignupForm.js +2 -2
- package/dist/components/Auth/SignupForm.js.map +1 -1
- package/dist/components/Email/EmailShowcase.js +1 -0
- package/dist/components/Email/EmailShowcase.js.map +1 -1
- package/dist/components/Email/components/EmailButton.js +1 -1
- package/dist/components/Email/components/EmailDivider.js +1 -1
- package/dist/components/Email/components/EmailFooter.js +1 -3
- package/dist/components/Email/components/EmailFooter.js.map +1 -1
- package/dist/components/Email/components/EmailHeader.js +1 -2
- package/dist/components/Email/components/EmailHeader.js.map +1 -1
- package/dist/components/Email/components/EmailLayout.js +1 -6
- package/dist/components/Email/components/EmailLayout.js.map +1 -1
- package/dist/components/Email/components/EmailPreviewer.js +1 -1
- package/dist/components/Email/templates/auth/ConfirmEmail.js +2 -2
- package/dist/components/Email/templates/auth/EmailChangeVerification.js +2 -2
- package/dist/components/Email/templates/auth/MagicLinkEmail.js +2 -2
- package/dist/components/Email/templates/auth/ResetPasswordEmail.js +2 -2
- package/dist/components/Email/templates/auth/WelcomeEmail.js +2 -2
- package/dist/components/Email/templates/billing/CreditCardExpiring.js +2 -2
- package/dist/components/Email/templates/billing/InvoiceEmail.js +2 -4
- package/dist/components/Email/templates/billing/InvoiceEmail.js.map +1 -1
- package/dist/components/Email/templates/billing/OverduePaymentNotice.js +2 -2
- package/dist/components/Email/templates/billing/PaymentFailedEmail.js +2 -2
- package/dist/components/Email/templates/billing/PaymentReceipt.js +2 -4
- package/dist/components/Email/templates/billing/PaymentReceipt.js.map +1 -1
- package/dist/components/Email/templates/billing/SubscriptionCancelled.js +2 -2
- package/dist/components/Email/templates/billing/SubscriptionConfirmation.js +2 -2
- package/dist/components/Email/templates/billing/TrialEndingEmail.js +2 -2
- package/dist/components/Email/templates/engagement/FeatureAnnouncement.js +2 -3
- package/dist/components/Email/templates/engagement/FeatureAnnouncement.js.map +1 -1
- package/dist/components/Email/templates/engagement/FeedbackRequestEmail.js +2 -2
- package/dist/components/Email/templates/engagement/InactivityWarning.js +2 -2
- package/dist/components/Email/templates/engagement/MilestoneEmail.js +2 -2
- package/dist/components/Email/templates/engagement/ProductChangelog.js +2 -2
- package/dist/components/Email/templates/engagement/TeamInviteEmail.js +2 -2
- package/dist/components/Email/templates/engagement/TipOfWeek.js +2 -2
- package/dist/components/Email/templates/engagement/WeeklyDigest.js +2 -4
- package/dist/components/Email/templates/engagement/WeeklyDigest.js.map +1 -1
- package/dist/components/Email/templates/growth/ReferralConverted.js +2 -2
- package/dist/components/Email/templates/growth/ReferralInvite.js +2 -2
- package/dist/components/Email/templates/growth/ReferralReward.js +2 -2
- package/dist/components/Email/templates/growth/SocialSharePrompt.js +2 -4
- package/dist/components/Email/templates/growth/SocialSharePrompt.js.map +1 -1
- package/dist/components/Email/templates/growth/WaitlistWelcome.js +2 -2
- package/dist/components/Email/templates/internal/comms/CompanyEventsCalendar.js +2 -4
- package/dist/components/Email/templates/internal/comms/CompanyEventsCalendar.js.map +1 -1
- package/dist/components/Email/templates/internal/comms/LeadershipUpdate.js +2 -1
- package/dist/components/Email/templates/internal/comms/LeadershipUpdate.js.map +1 -1
- package/dist/components/Email/templates/internal/comms/MeetingRecap.js +2 -4
- package/dist/components/Email/templates/internal/comms/MeetingRecap.js.map +1 -1
- package/dist/components/Email/templates/internal/hr/BirthdayAnniversary.js +2 -1
- package/dist/components/Email/templates/internal/hr/BirthdayAnniversary.js.map +1 -1
- package/dist/components/Email/templates/internal/hr/EmployeeFarewell.js +2 -2
- package/dist/components/Email/templates/internal/hr/ExitInterviewRequest.js +2 -2
- package/dist/components/Email/templates/internal/hr/NewHireAnnouncement.js +2 -2
- package/dist/components/Email/templates/internal/hr/PolicyUpdate.js +2 -2
- package/dist/components/Email/templates/internal/it/AppAccessGranted.js +2 -2
- package/dist/components/Email/templates/internal/it/ITOutageReport.js +2 -2
- package/dist/components/Email/templates/internal/it/PasswordRotationReminder.js +2 -2
- package/dist/components/Email/templates/legal/DMCANotice.js +2 -2
- package/dist/components/Email/templates/legal/DPANotice.js +2 -2
- package/dist/components/Email/templates/legal/GDPRCompliance.js +2 -2
- package/dist/components/Email/templates/legal/PrivacyPolicyUpdate.js +2 -2
- package/dist/components/Email/templates/legal/TermsOfServiceUpdate.js +2 -2
- package/dist/components/Email/templates/marketing/affiliate/AffiliateInvite.js +2 -2
- package/dist/components/Email/templates/marketing/affiliate/AffiliatePayout.js +2 -2
- package/dist/components/Email/templates/marketing/affiliate/AffiliateTopPerformer.js +2 -2
- package/dist/components/Email/templates/marketing/affiliate/AffiliateWelcome.js +2 -2
- package/dist/components/Email/templates/marketing/affiliate/PartnerComarketing.js +2 -2
- package/dist/components/Email/templates/marketing/blog/BestOfRoundup.js +2 -2
- package/dist/components/Email/templates/marketing/blog/BlogSeries.js +2 -2
- package/dist/components/Email/templates/marketing/blog/NewBlogPost.js +2 -2
- package/dist/components/Email/templates/marketing/content/InfographicEmail.js +2 -2
- package/dist/components/Email/templates/marketing/content/NewGuideEbook.js +2 -2
- package/dist/components/Email/templates/marketing/content/PodcastEpisode.js +2 -2
- package/dist/components/Email/templates/marketing/content/ToolTemplateDelivery.js +2 -2
- package/dist/components/Email/templates/marketing/content/YouTubeNotification.js +2 -2
- package/dist/components/Email/templates/marketing/events/ConferenceSeries.js +2 -2
- package/dist/components/Email/templates/marketing/events/EarlyBirdReminder.js +2 -2
- package/dist/components/Email/templates/marketing/events/EventAnnouncement.js +2 -2
- package/dist/components/Email/templates/marketing/events/PostEventThankYou.js +2 -2
- package/dist/components/Email/templates/marketing/events/ScheduleReleased.js +2 -2
- package/dist/components/Email/templates/marketing/events/VIPInvite.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/CaseStudyDelivery.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/DripCampaignComplete.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/DripCampaignDay1.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/LeadMagnetDelivery.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/WebinarConfirmation.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/WebinarFollowup.js +2 -2
- package/dist/components/Email/templates/marketing/lead-nurturing/WebinarReminder.js +2 -2
- package/dist/components/Email/templates/marketing/newsletters/CuratedIndustryNews.js +2 -2
- package/dist/components/Email/templates/marketing/newsletters/MonthlyDigest.js +2 -5
- package/dist/components/Email/templates/marketing/newsletters/MonthlyDigest.js.map +1 -1
- package/dist/components/Email/templates/marketing/newsletters/WeeklyNewsletter.js +2 -4
- package/dist/components/Email/templates/marketing/newsletters/WeeklyNewsletter.js.map +1 -1
- package/dist/components/Email/templates/marketing/promotional/AbandonedCart.js +2 -5
- package/dist/components/Email/templates/marketing/promotional/AbandonedCart.js.map +1 -1
- package/dist/components/Email/templates/marketing/promotional/BackInStock.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/BirthdayOffer.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/BrowseAbandonment.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/FlashSale.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/MilestoneDiscount.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/PriceDropAlert.js +2 -2
- package/dist/components/Email/templates/marketing/promotional/SeasonalCampaign.js +2 -2
- package/dist/components/Email/templates/marketing/reengagement/ComeBack60Day.js +2 -2
- package/dist/components/Email/templates/marketing/reengagement/LastChance90Day.js +2 -2
- package/dist/components/Email/templates/marketing/reengagement/ProductUpdateReengagement.js +2 -2
- package/dist/components/Email/templates/marketing/reengagement/WeMissYou30Day.js +2 -2
- package/dist/components/Email/templates/marketing/social/CommunityMilestone.js +2 -2
- package/dist/components/Email/templates/marketing/social/NewFollowerWelcome.js +2 -2
- package/dist/components/Email/templates/marketing/social/ShareYourStory.js +2 -2
- package/dist/components/Email/templates/marketing/social/SocialProof.js +2 -2
- package/dist/components/Email/templates/marketing/social/UserSpotlight.js +2 -2
- package/dist/components/Email/templates/marketing/surveys/BetaFeedback.js +2 -2
- package/dist/components/Email/templates/marketing/surveys/CSATSurvey.js +2 -2
- package/dist/components/Email/templates/marketing/surveys/ExitSurvey.js +2 -3
- package/dist/components/Email/templates/marketing/surveys/ExitSurvey.js.map +1 -1
- package/dist/components/Email/templates/marketing/surveys/NPSSurvey.js +2 -5
- package/dist/components/Email/templates/marketing/surveys/NPSSurvey.js.map +1 -1
- package/dist/components/Email/templates/marketing/surveys/ProductFeedback.js +2 -2
- package/dist/components/Email/templates/sales/ClientReferenceRequest.js +2 -2
- package/dist/components/Email/templates/sales/ClientWinBack.js +2 -2
- package/dist/components/Email/templates/sales/ColdOutreach.js +2 -2
- package/dist/components/Email/templates/sales/FollowUpEmail.js +2 -2
- package/dist/components/Email/templates/sales/ProjectTermination.js +2 -2
- package/dist/components/Email/templates/sales/ProposalAccepted.js +2 -2
- package/dist/components/Email/templates/sales/ScheduleDemo.js +2 -2
- package/dist/components/Email/templates/sales/SendProposal.js +2 -2
- package/dist/components/Email/templates/security/AccountDeletedConfirmation.js +2 -2
- package/dist/components/Email/templates/security/ApiKeyCreated.js +2 -2
- package/dist/components/Email/templates/security/DataExportReady.js +2 -2
- package/dist/components/Email/templates/security/NewLoginAlert.js +2 -2
- package/dist/components/Email/templates/security/PolicyUpdateEmail.js +2 -2
- package/dist/components/Email/templates/security/TwoFactorCode.js +2 -2
- package/dist/components/Email/templates/support/SupportFeedbackRequest.js +2 -4
- package/dist/components/Email/templates/support/SupportFeedbackRequest.js.map +1 -1
- package/dist/components/Email/templates/support/TicketCreatedEmail.js +2 -2
- package/dist/components/Email/templates/support/TicketReplyEmail.js +2 -2
- package/dist/components/Email/templates/support/TicketResolvedEmail.js +2 -2
- package/dist/components/Email/templates/system/IncidentReport.js +2 -2
- package/dist/components/Email/templates/system/MaintenanceNotice.js +2 -2
- package/dist/components/Email/templates/system/NotificationEmail.js +2 -2
- package/dist/components/Email/templates/system/StatusPageUpdate.js +2 -2
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const EmailChangeVerification = ({ userName = 'User', newEmail = 'new@example.com', verificationLink = 'https://example.com/settings/verify-email?token=123', expiryMinutes = 30 }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: "Verify your new email address", title: "Verify Email Change", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Verify your new email" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", you recently requested to change the email address associated with your account to ", jsx("strong", { children: newEmail }), "."] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Please click the button below to confirm this change. This link will expire in ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: verificationLink, children: "Verify New Email" }) })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const MagicLinkEmail = ({ magicLink = 'https://example.com/api/auth/magic?token=123', expiryMinutes = 15 }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "Your magic link is here", title: "Log in to your account", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Log in to your account" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Click the button below to securely log into your account. This link will expire in ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: magicLink, children: "Log in now" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you didn't request this email, you can safely ignore it." })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const ResetPasswordEmail = ({ userName = 'User', resetUrl = 'https://example.com/reset-password', companyName = 'Beyond Corp' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `Reset your ${companyName} password`, title: "Reset Password", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Reset Password" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4", children: ["Hello ", userName, ","] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Someone recently requested a password change for your ", companyName, " account. If this was you, you can set a new password here:"] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: resetUrl, children: "Reset Password" }) }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4", children: "If you don't want to change your password or didn't request this, just ignore and delete this message." }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base", children: ["Thanks,", jsx("br", {}), "The ", companyName, " Team"] })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const WelcomeEmail = ({ userName = 'User', loginUrl = 'https://example.com/login', companyName = 'Beyond Corp' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `Welcome to ${companyName}!`, title: `Welcome to ${companyName}`, children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Welcome to ", companyName, ", ", userName, "!"] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "We're thrilled to have you on board. To get started, please log in to your account." }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: loginUrl, children: "Get Started" }) }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base", children: ["Best,", jsx("br", {}), "The ", companyName, " Team"] })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const CreditCardExpiring = ({ userName = 'User', cardLast4 = '4242', expirationDate = '10/26', updateLink = 'https://example.com/billing/payment-methods' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "Your payment method is expiring soon", title: "Update Payment Method", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Action Required" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", the credit card ending in ", jsx("strong", { children: cardLast4 }), " that we have on file for your subscription is scheduled to expire on ", jsx("strong", { children: expirationDate }), "."] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "To avoid any interruption to your service, please update your payment information as soon as possible." }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: updateLink, children: "Update Payment Details" }) }), jsx(EmailDivider, {})] }));
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section, Row, Column } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
|
|
8
|
-
import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
|
|
9
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
10
8
|
|
|
11
9
|
const InvoiceEmail = ({ userName = 'User', amount = '$29.00', planName = 'Pro Plan', billingPeriod = 'May 2026 - Jun 2026', invoiceUrl = 'https://example.com/invoice' }) => {
|
|
12
10
|
return (jsxs(EmailLayout, { previewText: "Your latest invoice is ready", title: "Invoice Available", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Your Receipt" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", thanks for your continued support! We've successfully processed your payment for the ", planName, "."] }), jsxs(Section, { className: "bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6", children: [jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0", children: "Plan" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-semibold text-gray-900 dark:text-white m-0", children: planName }) })] }), jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0", children: "Period" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-semibold text-gray-900 dark:text-white m-0", children: billingPeriod }) })] }), jsx(EmailDivider, {}), jsxs(Row, { children: [jsx(Column, { children: jsx(Text, { className: "text-gray-900 dark:text-white font-bold m-0", children: "Total" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "font-bold text-blue-600 dark:text-blue-400 m-0", children: amount }) })] })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: invoiceUrl, children: "Download PDF" }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InvoiceEmail.js","sources":["../../../../../src/components/Email/templates/billing/InvoiceEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface InvoiceEmailProps {\n userName?: string;\n amount?: string;\n planName?: string;\n billingPeriod?: string;\n invoiceUrl?: string;\n}\n\nexport const InvoiceEmail: React.FC<InvoiceEmailProps> = ({\n userName = 'User',\n amount = '$29.00',\n planName = 'Pro Plan',\n billingPeriod = 'May 2026 - Jun 2026',\n invoiceUrl = 'https://example.com/invoice'\n}) => {\n return (\n <EmailLayout previewText=\"Your latest invoice is ready\" title=\"Invoice Available\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Your Receipt</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, thanks for your continued support! We've successfully processed your payment for the {planName}.\n </Text>\n \n <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6\">\n <Row className=\"mb-2\">\n <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Plan</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{planName}</Text></Column>\n </Row>\n <Row className=\"mb-2\">\n <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Period</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{billingPeriod}</Text></Column>\n </Row>\n <EmailDivider />\n <Row>\n <Column><Text className=\"text-gray-900 dark:text-white font-bold m-0\">Total</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-bold text-blue-600 dark:text-blue-400 m-0\">{amount}</Text></Column>\n </Row>\n </Section>\n\n <Section className=\"text-center mb-6\">\n <EmailButton href={invoiceUrl}>\n Download PDF\n </EmailButton>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default InvoiceEmail;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InvoiceEmail.js","sources":["../../../../../src/components/Email/templates/billing/InvoiceEmail.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface InvoiceEmailProps {\n userName?: string;\n amount?: string;\n planName?: string;\n billingPeriod?: string;\n invoiceUrl?: string;\n}\n\nexport const InvoiceEmail: React.FC<InvoiceEmailProps> = ({\n userName = 'User',\n amount = '$29.00',\n planName = 'Pro Plan',\n billingPeriod = 'May 2026 - Jun 2026',\n invoiceUrl = 'https://example.com/invoice'\n}) => {\n return (\n <EmailLayout previewText=\"Your latest invoice is ready\" title=\"Invoice Available\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Your Receipt</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, thanks for your continued support! We've successfully processed your payment for the {planName}.\n </Text>\n \n <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6\">\n <Row className=\"mb-2\">\n <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Plan</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{planName}</Text></Column>\n </Row>\n <Row className=\"mb-2\">\n <Column><Text className=\"text-gray-500 dark:text-gray-400 m-0\">Period</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-semibold text-gray-900 dark:text-white m-0\">{billingPeriod}</Text></Column>\n </Row>\n <EmailDivider />\n <Row>\n <Column><Text className=\"text-gray-900 dark:text-white font-bold m-0\">Total</Text></Column>\n <Column className=\"text-right\"><Text className=\"font-bold text-blue-600 dark:text-blue-400 m-0\">{amount}</Text></Column>\n </Row>\n </Section>\n\n <Section className=\"text-center mb-6\">\n <EmailButton href={invoiceUrl}>\n Download PDF\n </EmailButton>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default InvoiceEmail;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAYO,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,QAAQ,EACjB,QAAQ,GAAG,UAAU,EACrB,aAAa,GAAG,qBAAqB,EACrC,UAAU,GAAG,6BAA6B,EAC3C,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,8BAA8B,EAAC,KAAK,EAAC,mBAAmB,EAAA,QAAA,EAAA,CAC/EC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,cAAA,EAAA,CAAoB,EAC3FD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,yFAAA,EAAyF,QAAQ,EAAA,GAAA,CAAA,EAAA,CACxG,EAEPA,KAAC,OAAO,EAAA,EAAC,SAAS,EAAC,iDAAiD,aAClEA,IAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,IAAC,MAAM,EAAA,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,EAAA,CAAS,EACnFA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,YAAE,QAAQ,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CACvH,EACND,IAAA,CAAC,GAAG,IAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CACnBC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,sCAAsC,uBAAc,EAAA,CAAS,EACrFA,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,YAAE,aAAa,EAAA,CAAQ,GAAS,CAAA,EAAA,CAC5H,EACNA,IAAC,YAAY,EAAA,EAAA,CAAG,EAChBD,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,CACFC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,6CAA6C,sBAAa,EAAA,CAAS,EAC3FA,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CACpH,CAAA,EAAA,CACE,EAEVA,GAAA,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,6BAEf,EAAA,CACN,CAAA,EAAA,CACE;AAElB;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const OverduePaymentNotice = ({ userName = 'User', amountDue = '$29.00', suspensionDate = 'May 15, 2026', paymentLink = 'https://example.com/billing/pay' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: "Final Notice: Payment Overdue", title: "Overdue Payment", children: [jsx(Text, { className: "text-2xl font-bold text-red-600 dark:text-red-400 mb-4", children: "Payment Overdue" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", your recent payment of ", jsx("strong", { children: amountDue }), " is currently overdue."] }), jsx(Section, { className: "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-4 rounded-lg mb-6", children: jsxs(Text, { className: "text-red-800 dark:text-red-200 m-0", children: ["To avoid account suspension and keep access to your workspace, please process your payment by ", jsx("strong", { children: suspensionDate }), "."] }) }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: paymentLink, children: "Pay Balance Now" }) })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const PaymentFailedEmail = ({ userName = 'User', amount = '$29.00', updatePaymentLink = 'https://example.com/billing' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "Action Required: Payment Failed", title: "Payment Failed", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Payment Failed" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we were unable to process your recent payment of ", amount, ". To keep your subscription active, please update your payment information."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: updatePaymentLink, children: "Update Payment Details" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you have already updated your payment information, please ignore this email." })] }));
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section, Row, Column } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
-
import { Row } from '../../../../node_modules/@react-email/row/dist/index.js';
|
|
8
|
-
import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
9
7
|
|
|
10
8
|
const PaymentReceipt = ({ userName = 'User', amount = '$49.00', date = 'May 8, 2026', receiptId = 'RCPT-98765', receiptUrl = 'https://example.com/billing/receipts/98765' }) => {
|
|
11
9
|
return (jsxs(EmailLayout, { previewText: `Payment receipt for ${amount}`, title: "Payment Receipt", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Thank you for your payment!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we've successfully received your payment."] }), jsxs(Section, { className: "bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 border border-gray-100 dark:border-gray-600", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 mb-1 text-sm", children: "Amount Paid" }), jsx(Text, { className: "text-3xl font-bold text-gray-900 dark:text-white m-0 mb-4", children: amount }), jsxs(Row, { className: "mb-2", children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 text-sm", children: "Date" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "text-gray-900 dark:text-white font-medium m-0 text-sm", children: date }) })] }), jsxs(Row, { children: [jsx(Column, { children: jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 text-sm", children: "Receipt ID" }) }), jsx(Column, { className: "text-right", children: jsx(Text, { className: "text-gray-900 dark:text-white font-medium m-0 text-sm", children: receiptId }) })] })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: receiptUrl, children: "View Full Receipt" }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentReceipt.js","sources":["../../../../../src/components/Email/templates/billing/PaymentReceipt.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface PaymentReceiptProps {\n userName?: string;\n amount?: string;\n date?: string;\n receiptId?: string;\n receiptUrl?: string;\n}\n\nexport const PaymentReceipt: React.FC<PaymentReceiptProps> = ({\n userName = 'User',\n amount = '$49.00',\n date = 'May 8, 2026',\n receiptId = 'RCPT-98765',\n receiptUrl = 'https://example.com/billing/receipts/98765'\n}) => {\n return (\n <EmailLayout previewText={`Payment receipt for ${amount}`} title=\"Payment Receipt\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Thank you for your payment!</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">Hi {userName}, we've successfully received your payment.</Text>\n <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 border border-gray-100 dark:border-gray-600\">\n <Text className=\"text-gray-500 dark:text-gray-400 m-0 mb-1 text-sm\">Amount Paid</Text>\n <Text className=\"text-3xl font-bold text-gray-900 dark:text-white m-0 mb-4\">{amount}</Text>\n <Row className=\"mb-2\"><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Date</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{date}</Text></Column></Row>\n <Row><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Receipt ID</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{receiptId}</Text></Column></Row>\n </Section>\n <Section className=\"text-center mb-6\">\n <EmailButton href={receiptUrl}>View Full Receipt</EmailButton>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default PaymentReceipt;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PaymentReceipt.js","sources":["../../../../../src/components/Email/templates/billing/PaymentReceipt.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface PaymentReceiptProps {\n userName?: string;\n amount?: string;\n date?: string;\n receiptId?: string;\n receiptUrl?: string;\n}\n\nexport const PaymentReceipt: React.FC<PaymentReceiptProps> = ({\n userName = 'User',\n amount = '$49.00',\n date = 'May 8, 2026',\n receiptId = 'RCPT-98765',\n receiptUrl = 'https://example.com/billing/receipts/98765'\n}) => {\n return (\n <EmailLayout previewText={`Payment receipt for ${amount}`} title=\"Payment Receipt\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Thank you for your payment!</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">Hi {userName}, we've successfully received your payment.</Text>\n <Section className=\"bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 border border-gray-100 dark:border-gray-600\">\n <Text className=\"text-gray-500 dark:text-gray-400 m-0 mb-1 text-sm\">Amount Paid</Text>\n <Text className=\"text-3xl font-bold text-gray-900 dark:text-white m-0 mb-4\">{amount}</Text>\n <Row className=\"mb-2\"><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Date</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{date}</Text></Column></Row>\n <Row><Column><Text className=\"text-gray-500 dark:text-gray-400 m-0 text-sm\">Receipt ID</Text></Column><Column className=\"text-right\"><Text className=\"text-gray-900 dark:text-white font-medium m-0 text-sm\">{receiptId}</Text></Column></Row>\n </Section>\n <Section className=\"text-center mb-6\">\n <EmailButton href={receiptUrl}>View Full Receipt</EmailButton>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default PaymentReceipt;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAYO,MAAM,cAAc,GAAkC,CAAC,EAC5D,QAAQ,GAAG,MAAM,EACjB,MAAM,GAAG,QAAQ,EACjB,IAAI,GAAG,aAAa,EACpB,SAAS,GAAG,YAAY,EACxB,UAAU,GAAG,4CAA4C,EAC1D,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,CAAA,oBAAA,EAAuB,MAAM,CAAA,CAAE,EAAE,KAAK,EAAC,iBAAiB,aAChFC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,6BAAA,EAAA,CAAmC,EAC1GD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAAK,QAAQ,EAAA,6CAAA,CAAA,EAAA,CAAmD,EACjJA,KAAC,OAAO,EAAA,EAAC,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CAC9GC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,aAAA,EAAA,CAAmB,EACtFA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAE,MAAM,EAAA,CAAQ,EAC3FD,IAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAACC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,MAAA,EAAA,CAAY,EAAA,CAAS,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,YAAE,IAAI,EAAA,CAAQ,EAAA,CAAS,CAAA,EAAA,CAAM,EACpPD,IAAA,CAAC,GAAG,EAAA,EAAA,QAAA,EAAA,CAACC,IAAC,MAAM,EAAA,EAAA,QAAA,EAACA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAA,YAAA,EAAA,CAAkB,GAAS,EAAAA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAACA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAE,SAAS,EAAA,CAAQ,EAAA,CAAS,IAAM,CAAA,EAAA,CACtO,EACVA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,YACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,UAAU,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAiC,EAAA,CACtD,CAAA,EAAA,CACE;AAElB;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const SubscriptionCancelled = ({ userName = 'User', planName = 'Pro Plan', cancellationDate = 'June 8, 2026', reactivationLink = 'https://example.com/billing/reactivate' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "Your subscription has been cancelled", title: "Subscription Cancelled", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Subscription Cancelled" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", your ", planName, " subscription has been successfully cancelled. You will continue to have access to your premium features until the end of your current billing cycle on ", jsx("strong", { children: cancellationDate }), "."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: reactivationLink, children: "Reactivate Subscription" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "We're sorry to see you go. If you have a moment, we'd love to hear your feedback on how we can improve." })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const SubscriptionConfirmation = ({ userName = 'User', planName = 'Pro Plan', price = '$29.00', billingCycle = 'per month', dashboardLink = 'https://example.com/dashboard/billing' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `Your ${planName} subscription is active`, title: "Subscription Confirmed", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Subscription Confirmed" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", your account has been successfully upgraded. You now have full access to all the features included in the ", planName, "."] }), jsxs(Section, { className: "bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 text-center border border-gray-100 dark:border-gray-600", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 m-0 mb-2 uppercase tracking-wide text-xs font-bold", children: "Current Plan" }), jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white m-0 mb-1", children: planName }), jsxs(Text, { className: "text-gray-600 dark:text-gray-300 m-0", children: [price, " ", billingCycle] })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: dashboardLink, children: "Go to Dashboard" }) }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4", children: "Thank you for choosing us!" })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const TrialEndingEmail = ({ userName = 'User', trialEndDate = 'in 3 days', upgradeLink = 'https://example.com/upgrade' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: "Your trial is ending soon", title: "Trial Ending Soon", children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Your trial ends ", trialEndDate] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we hope you're enjoying the platform. Your free trial is coming to an end soon. Upgrade your plan today to keep access to all premium features!"] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: upgradeLink, children: "Upgrade Plan" }) })] }));
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Img, Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Text } from '../../../../node_modules/@react-email/text/dist/index.js';
|
|
8
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
9
8
|
|
|
10
9
|
const FeatureAnnouncement = ({ userName = 'User', featureName = 'Dark Mode', description = 'You asked, we listened! Dark mode is finally here. You can now toggle dark mode from your account settings to reduce eye strain and save battery life.', ctaLink = 'https://example.com/dashboard/settings', imageUrl = 'https://via.placeholder.com/600x300' }) => {
|
|
11
10
|
return (jsxs(EmailLayout, { previewText: `Introducing ${featureName}!`, title: "New Feature Announcement", children: [jsx(Img, { src: imageUrl, width: "100%", height: "auto", alt: featureName, className: "rounded-lg mb-6" }), jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Introducing ", featureName, " \uD83C\uDF89"] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ","] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: description }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: ctaLink, children: "Try it now" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "We're constantly working to improve our platform. Let us know what you think!" })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureAnnouncement.js","sources":["../../../../../src/components/Email/templates/engagement/FeatureAnnouncement.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Img } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface FeatureAnnouncementProps {\n userName?: string;\n featureName?: string;\n description?: string;\n ctaLink?: string;\n imageUrl?: string;\n}\n\nexport const FeatureAnnouncement: React.FC<FeatureAnnouncementProps> = ({\n userName = 'User',\n featureName = 'Dark Mode',\n description = 'You asked, we listened! Dark mode is finally here. You can now toggle dark mode from your account settings to reduce eye strain and save battery life.',\n ctaLink = 'https://example.com/dashboard/settings',\n imageUrl = 'https://via.placeholder.com/600x300'\n}) => {\n return (\n <EmailLayout previewText={`Introducing ${featureName}!`} title=\"New Feature Announcement\">\n <Img src={imageUrl} width=\"100%\" height=\"auto\" alt={featureName} className=\"rounded-lg mb-6\" />\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Introducing {featureName} 🎉</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName},\n </Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n {description}\n </Text>\n <Section className=\"text-center mb-6\">\n <EmailButton href={ctaLink}>\n Try it now\n </EmailButton>\n </Section>\n <EmailDivider />\n <Text className=\"text-gray-500 dark:text-gray-400 text-sm\">\n We're constantly working to improve our platform. Let us know what you think!\n </Text>\n </EmailLayout>\n );\n};\n\nexport default FeatureAnnouncement;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FeatureAnnouncement.js","sources":["../../../../../src/components/Email/templates/engagement/FeatureAnnouncement.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Img } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface FeatureAnnouncementProps {\n userName?: string;\n featureName?: string;\n description?: string;\n ctaLink?: string;\n imageUrl?: string;\n}\n\nexport const FeatureAnnouncement: React.FC<FeatureAnnouncementProps> = ({\n userName = 'User',\n featureName = 'Dark Mode',\n description = 'You asked, we listened! Dark mode is finally here. You can now toggle dark mode from your account settings to reduce eye strain and save battery life.',\n ctaLink = 'https://example.com/dashboard/settings',\n imageUrl = 'https://via.placeholder.com/600x300'\n}) => {\n return (\n <EmailLayout previewText={`Introducing ${featureName}!`} title=\"New Feature Announcement\">\n <Img src={imageUrl} width=\"100%\" height=\"auto\" alt={featureName} className=\"rounded-lg mb-6\" />\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Introducing {featureName} 🎉</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName},\n </Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n {description}\n </Text>\n <Section className=\"text-center mb-6\">\n <EmailButton href={ctaLink}>\n Try it now\n </EmailButton>\n </Section>\n <EmailDivider />\n <Text className=\"text-gray-500 dark:text-gray-400 text-sm\">\n We're constantly working to improve our platform. Let us know what you think!\n </Text>\n </EmailLayout>\n );\n};\n\nexport default FeatureAnnouncement;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAYO,MAAM,mBAAmB,GAAuC,CAAC,EACtE,QAAQ,GAAG,MAAM,EACjB,WAAW,GAAG,WAAW,EACzB,WAAW,GAAG,wJAAwJ,EACtK,OAAO,GAAG,wCAAwC,EAClD,QAAQ,GAAG,qCAAqC,EACjD,KAAI;IACH,QACEA,KAAC,WAAW,EAAA,EAAC,WAAW,EAAE,CAAA,YAAA,EAAe,WAAW,CAAA,CAAA,CAAG,EAAE,KAAK,EAAC,0BAA0B,aACvFC,GAAA,CAAC,GAAG,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,iBAAiB,EAAA,CAAG,EAC/FD,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,CAAA,cAAA,EAAc,WAAW,EAAA,eAAA,CAAA,EAAA,CAAW,EAC3GA,KAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,oBAC3E,QAAQ,EAAA,GAAA,CAAA,EAAA,CACP,EACPC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAC9E,WAAW,GACP,EACPA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,OAAO,EAAA,QAAA,EAAA,YAAA,EAAA,CAEZ,EAAA,CACN,EACVA,GAAA,CAAC,YAAY,KAAG,EAChBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,+EAAA,EAAA,CAEnD,CAAA,EAAA,CACK;AAElB;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const FeedbackRequestEmail = ({ userName = 'User', productName = 'Beyond Corp', surveyLink = 'https://example.com/survey/123' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `How is your experience with ${productName}?`, title: "We value your feedback", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "We'd love your feedback!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", thanks for using ", productName, ". We're always trying to improve, and your feedback is incredibly valuable to us."] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "Do you have 2 minutes to answer a quick question about your experience so far?" }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: surveyLink, children: "Take the quick survey" }) })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const InactivityWarning = ({ userName = 'User', daysInactive = 14, ctaLink = 'https://example.com/dashboard', featureHighlights = 'Did you know we recently launched Dark Mode? Log in to check it out!' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: `We miss you, ${userName}!`, title: "We Miss You", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "It's been a while!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we noticed you haven't been active in ", daysInactive, " days. We'd love to see you back on the platform."] }), jsx(Section, { className: "bg-blue-50 dark:bg-blue-900 border border-blue-100 dark:border-blue-800 p-4 rounded-lg mb-6", children: jsxs(Text, { className: "text-blue-800 dark:text-blue-200 m-0", children: [jsx("strong", { children: "What's new:" }), " ", featureHighlights] }) }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: ctaLink, children: "Log In Now" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you're having trouble getting started or need help, just reply to this email!" })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const MilestoneEmail = ({ userName = 'User', milestoneName = 'Tasks Completed', achievementValue = '100', shareLink = 'https://example.com/share/milestone/123' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "You just hit a new milestone! \uD83C\uDF89", title: "Milestone Unlocked", children: [jsx(Text, { className: "text-3xl text-center mb-2", children: "\uD83C\uDFC6" }), jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center", children: ["Incredible work, ", userName, "!"] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6 text-center", children: "You just hit a major milestone on our platform. We are thrilled to celebrate this achievement with you." }), jsxs(Section, { className: "bg-yellow-50 dark:bg-yellow-900 border border-yellow-100 dark:border-yellow-800 p-6 rounded-lg mb-6 text-center", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider text-xs m-0 mb-2", children: milestoneName }), jsx(Text, { className: "text-4xl font-bold text-yellow-600 dark:text-yellow-500 m-0", children: achievementValue })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: shareLink, children: "Share Your Achievement" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm text-center", children: "Keep up the great work! We can't wait to see what you do next." })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const ProductChangelog = ({ version = 'v2.4.0', updates = ['Added multi-user collaborative editing', 'New integration with Slack for real-time notifications', 'Redesigned the dashboard settings panel'], fixes = ['Fixed an issue where exports would occasionally timeout', 'Resolved timezone display bugs in the calendar view'], releaseLink = 'https://example.com/changelog' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `See what's new in ${version}`, title: "Product Changelog", children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Latest Updates: ", version] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "We've been hard at work making the platform better for you. Here is a quick summary of what's new." }), jsxs(Section, { className: "mb-6", children: [jsx(Text, { className: "text-lg font-bold text-blue-600 dark:text-blue-400 mb-2 m-0", children: "\uD83D\uDE80 New Features & Improvements" }), updates.map((item, idx) => (jsxs(Text, { className: "text-gray-700 dark:text-gray-300 m-0 mb-2 flex", children: ["\u2022 ", item] }, idx)))] }), jsxs(Section, { className: "mb-6", children: [jsx(Text, { className: "text-lg font-bold text-green-600 dark:text-green-400 mb-2 m-0", children: "\uD83D\uDEE0 Bug Fixes" }), fixes.map((item, idx) => (jsxs(Text, { className: "text-gray-700 dark:text-gray-300 m-0 mb-2 flex", children: ["\u2022 ", item] }, idx)))] }), jsx(Section, { className: "text-center", children: jsx(EmailButton, { href: releaseLink, children: "Read the full notes" }) })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const TeamInviteEmail = ({ inviterName = 'Alex', teamName = 'Acme Corp', role = 'Editor', inviteLink = 'https://example.com/team/invite/123' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: `You've been invited to join ${teamName}`, title: "Team Invitation", children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["Join ", teamName] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi there, ", jsx("strong", { children: inviterName }), " has invited you to join the ", jsx("strong", { children: teamName }), " team as an ", jsx("strong", { children: role }), "."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: inviteLink, children: "Accept Invitation" }) }), jsx(EmailDivider, {}), jsx(Text, { className: "text-gray-500 dark:text-gray-400 text-sm", children: "If you don't recognize this invitation, you can safely ignore this email." })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const TipOfWeek = ({ userName = 'User', tipTitle = 'Keyboard Shortcuts', tipContent = 'Save time by using keyboard shortcuts! Press Cmd+K (or Ctrl+K on Windows) to open the quick search menu from anywhere in the app.', learnMoreLink = 'https://example.com/help/shortcuts' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `Tip of the Week: ${tipTitle}`, title: "Tip of the Week", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 font-bold tracking-widest text-xs uppercase mb-2", children: "Tip of the Week" }), jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: [tipTitle, " \uD83D\uDCA1"] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ","] }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: tipContent }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: learnMoreLink, children: "Read Full Guide" }) })] }));
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section, Row, Column } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
8
|
-
import { Row } from '../../../../node_modules/@react-email/row/dist/index.js';
|
|
9
|
-
import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
10
8
|
|
|
11
9
|
const WeeklyDigest = ({ userName = 'User', stats = [
|
|
12
10
|
{ label: 'Tasks Completed', value: 42 },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeeklyDigest.js","sources":["../../../../../src/components/Email/templates/engagement/WeeklyDigest.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface WeeklyDigestProps {\n userName?: string;\n stats?: Array<{ label: string; value: string | number }>;\n dashboardLink?: string;\n}\n\nexport const WeeklyDigest: React.FC<WeeklyDigestProps> = ({\n userName = 'User',\n stats = [\n { label: 'Tasks Completed', value: 42 },\n { label: 'Hours Saved', value: '5.2h' },\n { label: 'New Connections', value: 12 }\n ],\n dashboardLink = 'https://example.com/dashboard'\n}) => {\n return (\n <EmailLayout previewText=\"Your weekly activity summary\" title=\"Weekly Activity Digest\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Your Weekly Summary</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, here's a quick look at your activity and achievements from the past week.\n </Text>\n \n <Section className=\"mb-6\">\n {stats.map((stat, index) => (\n <Row key={index} className=\"bg-gray-50 dark:bg-gray-700 p-4 mb-2 rounded-lg border border-gray-100 dark:border-gray-600\">\n <Column>\n <Text className=\"text-gray-600 dark:text-gray-300 m-0 font-medium\">{stat.label}</Text>\n </Column>\n <Column className=\"text-right\">\n <Text className=\"text-blue-600 dark:text-blue-400 font-bold m-0 text-xl\">{stat.value}</Text>\n </Column>\n </Row>\n ))}\n </Section>\n\n <Section className=\"text-center mb-6\">\n <EmailButton href={dashboardLink}>View Full Report</EmailButton>\n </Section>\n <EmailDivider />\n </EmailLayout>\n );\n};\n\nexport default WeeklyDigest;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"WeeklyDigest.js","sources":["../../../../../src/components/Email/templates/engagement/WeeklyDigest.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton, EmailDivider } from '../../components';\n\nexport interface WeeklyDigestProps {\n userName?: string;\n stats?: Array<{ label: string; value: string | number }>;\n dashboardLink?: string;\n}\n\nexport const WeeklyDigest: React.FC<WeeklyDigestProps> = ({\n userName = 'User',\n stats = [\n { label: 'Tasks Completed', value: 42 },\n { label: 'Hours Saved', value: '5.2h' },\n { label: 'New Connections', value: 12 }\n ],\n dashboardLink = 'https://example.com/dashboard'\n}) => {\n return (\n <EmailLayout previewText=\"Your weekly activity summary\" title=\"Weekly Activity Digest\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Your Weekly Summary</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, here's a quick look at your activity and achievements from the past week.\n </Text>\n \n <Section className=\"mb-6\">\n {stats.map((stat, index) => (\n <Row key={index} className=\"bg-gray-50 dark:bg-gray-700 p-4 mb-2 rounded-lg border border-gray-100 dark:border-gray-600\">\n <Column>\n <Text className=\"text-gray-600 dark:text-gray-300 m-0 font-medium\">{stat.label}</Text>\n </Column>\n <Column className=\"text-right\">\n <Text className=\"text-blue-600 dark:text-blue-400 font-bold m-0 text-xl\">{stat.value}</Text>\n </Column>\n </Row>\n ))}\n </Section>\n\n <Section className=\"text-center mb-6\">\n <EmailButton href={dashboardLink}>View Full Report</EmailButton>\n </Section>\n <EmailDivider />\n </EmailLayout>\n );\n};\n\nexport default WeeklyDigest;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAUO,MAAM,YAAY,GAAgC,CAAC,EACxD,QAAQ,GAAG,MAAM,EACjB,KAAK,GAAG;AACN,IAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,EAAE,EAAE;AACvC,IAAA,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE;AACvC,IAAA,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,EAAE;AACtC,CAAA,EACD,aAAa,GAAG,+BAA+B,EAChD,KAAI;IACH,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,8BAA8B,EAAC,KAAK,EAAC,wBAAwB,EAAA,QAAA,EAAA,CACpFC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,qBAAA,EAAA,CAA2B,EAClGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,mFACP,EAEPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrBD,IAAA,CAAC,GAAG,EAAA,EAAa,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CACtHC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EACLA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,kDAAkD,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAA,CAAQ,EAAA,CAC/E,EACTA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,QAAA,EAC5BA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,wDAAwD,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAA,CAAQ,GACrF,CAAA,EAAA,EAND,KAAK,CAOT,CACP,CAAC,EAAA,CACM,EAEVA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EACnCA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,aAAa,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAgC,EAAA,CACxD,EACVA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,CAAA,EAAA,CACJ;AAElB;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const ReferralConverted = ({ userName = 'User', friendName = 'Alex', rewardAmount = '$15 Credit', dashboardLink = 'https://example.com/rewards' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `Your friend ${friendName} just signed up!`, title: "Successful Referral", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Your friend joined!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Great news, ", userName, "! ", jsx("strong", { children: friendName }), " just used your referral link to sign up and start their subscription."] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["As a thank you, we have added ", jsx("strong", { children: rewardAmount }), " to your account balance."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: dashboardLink, children: "View Your Rewards" }) })] }));
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
7
7
|
|
|
8
8
|
const ReferralInvite = ({ referrerName = 'Alex', rewardAmount = '$10', referralLink = 'https://example.com/signup?ref=alex123' }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: `${referrerName} invited you!`, title: "You've been invited", children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["You've been invited by ", referrerName] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi there, ", referrerName, " thinks you'd love our platform! Sign up using their invite link and you'll both get ", rewardAmount, " in credit to use on your first purchase."] }), jsxs(Section, { className: "bg-blue-50 dark:bg-blue-900 border border-blue-100 dark:border-blue-800 p-6 rounded-lg mb-6 text-center", children: [jsxs(Text, { className: "text-blue-600 dark:text-blue-400 font-bold text-lg m-0 mb-4", children: ["Claim your ", rewardAmount, " credit"] }), jsx(EmailButton, { href: referralLink, children: "Accept Invite" })] })] }));
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const ReferralReward = ({ userName = 'User', rewardType = 'Account Credit', rewardValue = '$25', referralCount = 1, redeemLink = 'https://example.com/rewards' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: `You earned a ${rewardValue} reward!`, title: "Referral Reward Earned", children: [jsx(Text, { className: "text-3xl text-center mb-2", children: "\uD83C\uDF81" }), jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center", children: "You earned a reward!" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6 text-center", children: ["Hi ", userName, ", thanks for spreading the word! A friend you referred just joined, and to say thanks, we've added a reward to your account."] }), jsxs(Section, { className: "bg-green-50 dark:bg-green-900 border border-green-100 dark:border-green-800 p-6 rounded-lg mb-6 text-center", children: [jsx(Text, { className: "text-gray-500 dark:text-gray-400 font-semibold uppercase tracking-wider text-xs m-0 mb-2", children: rewardType }), jsx(Text, { className: "text-4xl font-bold text-green-600 dark:text-green-400 m-0", children: rewardValue })] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: redeemLink, children: "Redeem Reward" }) }), jsx(EmailDivider, {}), jsxs(Text, { className: "text-gray-500 dark:text-gray-400 text-sm text-center", children: ["You've successfully referred ", referralCount, " friends so far. Keep sharing your link to earn more!"] })] }));
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section, Row, Column } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
-
import { Row } from '../../../../node_modules/@react-email/row/dist/index.js';
|
|
8
|
-
import { Column } from '../../../../node_modules/@react-email/column/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
9
7
|
|
|
10
8
|
const SocialSharePrompt = ({ userName = 'User', twitterLink = 'https://twitter.com/intent/tweet?text=I%20love%20using%20Beyond%20Corp!', linkedinLink = 'https://www.linkedin.com/sharing/share-offsite/?url=https://example.com' }) => {
|
|
11
9
|
return (jsxs(EmailLayout, { previewText: "Tell the world what you think!", title: "Share your experience", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Enjoying the platform?" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Hi ", userName, ", we noticed you've been getting a lot of value out of our product recently. We rely heavily on word-of-mouth to grow, and it would mean the world to us if you shared your experience on social media!"] }), jsx(Section, { className: "mb-6", children: jsxs(Row, { children: [jsx(Column, { className: "pr-2", children: jsx(EmailButton, { href: twitterLink, children: "Share on X" }) }), jsx(Column, { className: "pl-2", children: jsx(EmailButton, { href: linkedinLink, children: "Share on LinkedIn" }) })] }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SocialSharePrompt.js","sources":["../../../../../src/components/Email/templates/growth/SocialSharePrompt.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../components';\n\nexport interface SocialSharePromptProps {\n userName?: string;\n twitterLink?: string;\n linkedinLink?: string;\n}\n\nexport const SocialSharePrompt: React.FC<SocialSharePromptProps> = ({\n userName = 'User',\n twitterLink = 'https://twitter.com/intent/tweet?text=I%20love%20using%20Beyond%20Corp!',\n linkedinLink = 'https://www.linkedin.com/sharing/share-offsite/?url=https://example.com'\n}) => {\n return (\n <EmailLayout previewText=\"Tell the world what you think!\" title=\"Share your experience\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Enjoying the platform?</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, we noticed you've been getting a lot of value out of our product recently. We rely heavily on word-of-mouth to grow, and it would mean the world to us if you shared your experience on social media!\n </Text>\n <Section className=\"mb-6\">\n <Row>\n <Column className=\"pr-2\"><EmailButton href={twitterLink}>Share on X</EmailButton></Column>\n <Column className=\"pl-2\"><EmailButton href={linkedinLink}>Share on LinkedIn</EmailButton></Column>\n </Row>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default SocialSharePrompt;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SocialSharePrompt.js","sources":["../../../../../src/components/Email/templates/growth/SocialSharePrompt.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../components';\n\nexport interface SocialSharePromptProps {\n userName?: string;\n twitterLink?: string;\n linkedinLink?: string;\n}\n\nexport const SocialSharePrompt: React.FC<SocialSharePromptProps> = ({\n userName = 'User',\n twitterLink = 'https://twitter.com/intent/tweet?text=I%20love%20using%20Beyond%20Corp!',\n linkedinLink = 'https://www.linkedin.com/sharing/share-offsite/?url=https://example.com'\n}) => {\n return (\n <EmailLayout previewText=\"Tell the world what you think!\" title=\"Share your experience\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-4\">Enjoying the platform?</Text>\n <Text className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6\">\n Hi {userName}, we noticed you've been getting a lot of value out of our product recently. We rely heavily on word-of-mouth to grow, and it would mean the world to us if you shared your experience on social media!\n </Text>\n <Section className=\"mb-6\">\n <Row>\n <Column className=\"pr-2\"><EmailButton href={twitterLink}>Share on X</EmailButton></Column>\n <Column className=\"pl-2\"><EmailButton href={linkedinLink}>Share on LinkedIn</EmailButton></Column>\n </Row>\n </Section>\n </EmailLayout>\n );\n};\n\nexport default SocialSharePrompt;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAUO,MAAM,iBAAiB,GAAqC,CAAC,EAClE,QAAQ,GAAG,MAAM,EACjB,WAAW,GAAG,yEAAyE,EACvF,YAAY,GAAG,yEAAyE,EACzF,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAC,gCAAgC,EAAC,KAAK,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACrFC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,wBAAA,EAAA,CAA8B,EACrGD,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAAA,CAAA,KAAA,EAC3E,QAAQ,EAAA,yMAAA,CAAA,EAAA,CACP,EACPC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACvBD,IAAA,CAAC,GAAG,eACFC,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAACA,GAAA,CAAC,WAAW,IAAC,IAAI,EAAE,WAAW,EAAA,QAAA,EAAA,YAAA,EAAA,CAA0B,GAAS,EAC1FA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EAACA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,YAAY,kCAAiC,EAAA,CAAS,CAAA,EAAA,CAC9F,EAAA,CACE,CAAA,EAAA,CACE;AAElB;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../components/EmailButton.js';
|
|
3
4
|
import { EmailDivider } from '../../components/EmailDivider.js';
|
|
4
5
|
import { EmailLayout } from '../../components/EmailLayout.js';
|
|
5
6
|
import 'react';
|
|
6
|
-
import
|
|
7
|
-
import { Section } from '../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
+
import '@react-email/render';
|
|
8
8
|
|
|
9
9
|
const WaitlistWelcome = ({ userName = 'User', position = 1492, estimatedInviteDate = 'Next month', referralLink = 'https://example.com/waitlist?ref=user123' }) => {
|
|
10
10
|
return (jsxs(EmailLayout, { previewText: "You're on the waitlist!", title: "Welcome to the waitlist", children: [jsxs(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: ["You're on the list, ", userName, "!"] }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Thanks for joining the waitlist. We're rolling out access in batches, and you are currently in position ", jsxs("strong", { children: ["#", position.toLocaleString()] }), ". We estimate your invite will arrive ", jsx("strong", { children: estimatedInviteDate }), "."] }), jsx(EmailDivider, {}), jsx(Text, { className: "text-lg font-bold text-gray-900 dark:text-white mb-2", children: "Want to skip the line?" }), jsx(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: "Share your unique referral link with friends. For every friend who joins the waitlist, you'll jump 100 spots ahead!" }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: referralLink, children: "Copy Referral Link" }) })] }));
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text, Section, Row, Column } from '@react-email/components';
|
|
2
3
|
import { EmailButton } from '../../../components/EmailButton.js';
|
|
3
4
|
import { EmailLayout } from '../../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
-
import { Section } from '../../../../../node_modules/@react-email/section/dist/index.js';
|
|
7
|
-
import { Row } from '../../../../../node_modules/@react-email/row/dist/index.js';
|
|
8
|
-
import { Column } from '../../../../../node_modules/@react-email/column/dist/index.js';
|
|
6
|
+
import '@react-email/render';
|
|
9
7
|
|
|
10
8
|
const CompanyEventsCalendar = ({ month = 'November 2026', events = [
|
|
11
9
|
{ date: 'Nov 4', name: 'Town Hall Meeting', time: '10:00 AM' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompanyEventsCalendar.js","sources":["../../../../../../src/components/Email/templates/internal/comms/CompanyEventsCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../../components';\n\nexport interface EventItem {\n date: string;\n name: string;\n time?: string;\n}\n\nexport interface CompanyEventsCalendarProps {\n month?: string;\n events?: EventItem[];\n calendarLink?: string;\n}\n\nexport const CompanyEventsCalendar: React.FC<CompanyEventsCalendarProps> = ({\n month = 'November 2026',\n events = [\n { date: 'Nov 4', name: 'Town Hall Meeting', time: '10:00 AM' },\n { date: 'Nov 11', name: 'Veterans Day (Office Closed)' },\n { date: 'Nov 26', name: 'Thanksgiving Potluck', time: '12:00 PM' }\n ],\n calendarLink = 'https://calendar.example.com'\n}) => {\n return (\n <EmailLayout previewText={`Upcoming events for ${month}`} title=\"Company Events\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-6\">Upcoming Events: {month}</Text>\n <Section className=\"mb-6\">\n {events.map((event, index) => (\n <Row key={index} className=\"bg-gray-50 dark:bg-gray-700 p-4 mb-2 rounded-lg border border-gray-100 dark:border-gray-600\">\n <Column style={{ width: '80px' }}><Text className=\"text-blue-600 dark:text-blue-400 font-bold m-0\">{event.date}</Text></Column>\n <Column><Text className=\"text-gray-900 dark:text-white font-semibold m-0\">{event.name}</Text>{event.time && <Text className=\"text-gray-500 dark:text-gray-400 text-sm m-0 mt-1\">{event.time}</Text>}</Column>\n </Row>\n ))}\n </Section>\n <Section className=\"text-center mb-6\"><EmailButton href={calendarLink}>View Full Calendar</EmailButton></Section>\n </EmailLayout>\n );\n};\n\nexport default CompanyEventsCalendar;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CompanyEventsCalendar.js","sources":["../../../../../../src/components/Email/templates/internal/comms/CompanyEventsCalendar.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Row, Column } from '@react-email/components';\nimport { EmailLayout, EmailButton } from '../../../components';\n\nexport interface EventItem {\n date: string;\n name: string;\n time?: string;\n}\n\nexport interface CompanyEventsCalendarProps {\n month?: string;\n events?: EventItem[];\n calendarLink?: string;\n}\n\nexport const CompanyEventsCalendar: React.FC<CompanyEventsCalendarProps> = ({\n month = 'November 2026',\n events = [\n { date: 'Nov 4', name: 'Town Hall Meeting', time: '10:00 AM' },\n { date: 'Nov 11', name: 'Veterans Day (Office Closed)' },\n { date: 'Nov 26', name: 'Thanksgiving Potluck', time: '12:00 PM' }\n ],\n calendarLink = 'https://calendar.example.com'\n}) => {\n return (\n <EmailLayout previewText={`Upcoming events for ${month}`} title=\"Company Events\">\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-6\">Upcoming Events: {month}</Text>\n <Section className=\"mb-6\">\n {events.map((event, index) => (\n <Row key={index} className=\"bg-gray-50 dark:bg-gray-700 p-4 mb-2 rounded-lg border border-gray-100 dark:border-gray-600\">\n <Column style={{ width: '80px' }}><Text className=\"text-blue-600 dark:text-blue-400 font-bold m-0\">{event.date}</Text></Column>\n <Column><Text className=\"text-gray-900 dark:text-white font-semibold m-0\">{event.name}</Text>{event.time && <Text className=\"text-gray-500 dark:text-gray-400 text-sm m-0 mt-1\">{event.time}</Text>}</Column>\n </Row>\n ))}\n </Section>\n <Section className=\"text-center mb-6\"><EmailButton href={calendarLink}>View Full Calendar</EmailButton></Section>\n </EmailLayout>\n );\n};\n\nexport default CompanyEventsCalendar;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAgBO,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,KAAK,GAAG,eAAe,EACvB,MAAM,GAAG;IACP,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,UAAU,EAAE;AAC9D,IAAA,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,8BAA8B,EAAE;IACxD,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,sBAAsB,EAAE,IAAI,EAAE,UAAU;AACjE,CAAA,EACD,YAAY,GAAG,8BAA8B,EAC9C,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,CAAA,oBAAA,EAAuB,KAAK,CAAA,CAAE,EAAE,KAAK,EAAC,gBAAgB,EAAA,QAAA,EAAA,CAC9EA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAA,CAAA,mBAAA,EAAmB,KAAK,CAAA,EAAA,CAAQ,EACvGC,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,MAAM,EAAA,QAAA,EACtB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACvBD,IAAA,CAAC,GAAG,EAAA,EAAa,SAAS,EAAC,6FAA6F,EAAA,QAAA,EAAA,CACtHC,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAA,QAAA,EAAEA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,gDAAgD,EAAA,QAAA,EAAE,KAAK,CAAC,IAAI,EAAA,CAAQ,EAAA,CAAS,EAC/HD,IAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAA,CAACC,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,iDAAiD,EAAA,QAAA,EAAE,KAAK,CAAC,IAAI,EAAA,CAAQ,EAAC,KAAK,CAAC,IAAI,IAAIA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAE,KAAK,CAAC,IAAI,EAAA,CAAQ,CAAA,EAAA,CAAU,CAAA,EAAA,EAFrM,KAAK,CAGT,CACP,CAAC,EAAA,CACM,EACVA,GAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAACA,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,YAAY,EAAA,QAAA,EAAA,oBAAA,EAAA,CAAkC,EAAA,CAAU,CAAA,EAAA,CACrG;AAElB;;;;"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text } from '@react-email/components';
|
|
2
3
|
import { EmailDivider } from '../../../components/EmailDivider.js';
|
|
3
4
|
import { EmailLayout } from '../../../components/EmailLayout.js';
|
|
4
5
|
import 'react';
|
|
5
|
-
import
|
|
6
|
+
import '@react-email/render';
|
|
6
7
|
|
|
7
8
|
const LeadershipUpdate = ({ senderName = 'Jane Doe', senderTitle = 'CEO', subject = 'Q3 Company Update', messageBlocks = [
|
|
8
9
|
'I want to take a moment to reflect on our outstanding performance this past quarter. Thanks to your hard work, we hit all of our primary OKRs.',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LeadershipUpdate.js","sources":["../../../../../../src/components/Email/templates/internal/comms/LeadershipUpdate.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@react-email/components';\nimport { EmailLayout, EmailDivider } from '../../../components';\n\nexport interface LeadershipUpdateProps {\n senderName?: string;\n senderTitle?: string;\n subject?: string;\n messageBlocks?: string[];\n}\n\nexport const LeadershipUpdate: React.FC<LeadershipUpdateProps> = ({\n senderName = 'Jane Doe',\n senderTitle = 'CEO',\n subject = 'Q3 Company Update',\n messageBlocks = [\n 'I want to take a moment to reflect on our outstanding performance this past quarter. Thanks to your hard work, we hit all of our primary OKRs.',\n 'As we move into Q4, our focus will shift towards expanding our enterprise offerings and finalizing the upcoming product launch.',\n 'Thank you all for your continued dedication.'\n ]\n}) => {\n return (\n <EmailLayout previewText={subject} title={subject}>\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-6\">{subject}</Text>\n {messageBlocks.map((block, index) => (\n <Text key={index} className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4\">\n {block}\n </Text>\n ))}\n <EmailDivider />\n <Text className=\"text-gray-900 dark:text-white font-semibold text-base m-0\">{senderName}</Text>\n <Text className=\"text-gray-500 dark:text-gray-400 text-sm m-0\">{senderTitle}</Text>\n </EmailLayout>\n );\n};\n\nexport default LeadershipUpdate;"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LeadershipUpdate.js","sources":["../../../../../../src/components/Email/templates/internal/comms/LeadershipUpdate.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '@react-email/components';\nimport { EmailLayout, EmailDivider } from '../../../components';\n\nexport interface LeadershipUpdateProps {\n senderName?: string;\n senderTitle?: string;\n subject?: string;\n messageBlocks?: string[];\n}\n\nexport const LeadershipUpdate: React.FC<LeadershipUpdateProps> = ({\n senderName = 'Jane Doe',\n senderTitle = 'CEO',\n subject = 'Q3 Company Update',\n messageBlocks = [\n 'I want to take a moment to reflect on our outstanding performance this past quarter. Thanks to your hard work, we hit all of our primary OKRs.',\n 'As we move into Q4, our focus will shift towards expanding our enterprise offerings and finalizing the upcoming product launch.',\n 'Thank you all for your continued dedication.'\n ]\n}) => {\n return (\n <EmailLayout previewText={subject} title={subject}>\n <Text className=\"text-2xl font-bold text-gray-900 dark:text-white mb-6\">{subject}</Text>\n {messageBlocks.map((block, index) => (\n <Text key={index} className=\"text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4\">\n {block}\n </Text>\n ))}\n <EmailDivider />\n <Text className=\"text-gray-900 dark:text-white font-semibold text-base m-0\">{senderName}</Text>\n <Text className=\"text-gray-500 dark:text-gray-400 text-sm m-0\">{senderTitle}</Text>\n </EmailLayout>\n );\n};\n\nexport default LeadershipUpdate;"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAWO,MAAM,gBAAgB,GAAoC,CAAC,EAChE,UAAU,GAAG,UAAU,EACvB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,mBAAmB,EAC7B,aAAa,GAAG;IACd,gJAAgJ;IAChJ,iIAAiI;IACjI;AACD,CAAA,EACF,KAAI;AACH,IAAA,QACEA,IAAA,CAAC,WAAW,EAAA,EAAC,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAA,QAAA,EAAA,CAC/CC,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,uDAAuD,EAAA,QAAA,EAAE,OAAO,EAAA,CAAQ,EACvF,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC9BA,GAAA,CAAC,IAAI,EAAA,EAAa,SAAS,EAAC,iEAAiE,EAAA,QAAA,EAC1F,KAAK,IADG,KAAK,CAET,CACR,CAAC,EACFA,GAAA,CAAC,YAAY,EAAA,EAAA,CAAG,EAChBA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAE,UAAU,EAAA,CAAQ,EAC/FA,IAAC,IAAI,EAAA,EAAC,SAAS,EAAC,8CAA8C,EAAA,QAAA,EAAE,WAAW,EAAA,CAAQ,CAAA,EAAA,CACvE;AAElB;;;;"}
|