@beyondcorp/beyond-ui 1.4.4 → 1.4.6
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/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/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailShowcase.js","sources":["../../../src/components/Email/EmailShowcase.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { EmailPreviewer } from './components';\nimport * as AllTemplates from './templates';\n\n// We map known template names to explicit categories.\n// Any missed/new exports automatically fall into an \"Uncategorized\" section!\nconst CATEGORY_MAP: Record<string, string[]> = {\n \"Marketing: Newsletters\": [\"WeeklyNewsletter\", \"MonthlyDigest\", \"CuratedIndustryNews\"],\n \"Marketing: Blog\": [\"NewBlogPost\", \"BlogSeries\", \"BestOfRoundup\"],\n \"Marketing: Lead Nurturing\": [\"LeadMagnetDelivery\", \"WebinarConfirmation\", \"WebinarReminder\", \"WebinarFollowup\", \"DripCampaignDay1\", \"DripCampaignComplete\", \"CaseStudyDelivery\"],\n \"Marketing: Promotional\": [\"AbandonedCart\", \"FlashSale\", \"BrowseAbandonment\", \"PriceDropAlert\", \"BackInStock\", \"SeasonalCampaign\", \"BirthdayOffer\", \"MilestoneDiscount\"],\n \"Marketing: Events\": [\"EventAnnouncement\", \"EarlyBirdReminder\", \"ScheduleReleased\", \"VIPInvite\", \"PostEventThankYou\", \"ConferenceSeries\"],\n \"Marketing: Re-engagement\": [\"WeMissYou30Day\", \"ComeBack60Day\", \"LastChance90Day\", \"ProductUpdateReengagement\"],\n \"Marketing: Social\": [\"SocialProof\", \"NewFollowerWelcome\", \"ShareYourStory\", \"UserSpotlight\", \"CommunityMilestone\"],\n \"Marketing: Surveys\": [\"NPSSurvey\", \"ExitSurvey\", \"CSATSurvey\", \"ProductFeedback\", \"BetaFeedback\"],\n \"Marketing: Affiliate\": [\"AffiliateInvite\", \"AffiliateWelcome\", \"AffiliatePayout\", \"AffiliateTopPerformer\", \"PartnerComarketing\"],\n \"Marketing: Content\": [\"NewGuideEbook\", \"ToolTemplateDelivery\", \"InfographicEmail\", \"PodcastEpisode\", \"YouTubeNotification\"],\n \"Sales\": [\"ColdOutreach\", \"FollowUpEmail\", \"ScheduleDemo\", \"SendProposal\", \"ProposalAccepted\", \"ProjectTermination\", \"ClientWinBack\", \"ClientReferenceRequest\"],\n \"Legal\": [\"PrivacyPolicyUpdate\", \"TermsOfServiceUpdate\", \"DPANotice\", \"DMCANotice\", \"GDPRCompliance\"],\n \"Internal: HR\": [\"NewHireAnnouncement\", \"BirthdayAnniversary\", \"EmployeeFarewell\", \"PolicyUpdate\", \"ExitInterviewRequest\"],\n \"Internal: IT\": [\"ITOutageReport\", \"PasswordRotationReminder\", \"AppAccessGranted\"],\n \"Internal: Comms\": [\"LeadershipUpdate\", \"MeetingRecap\", \"CompanyEventsCalendar\"],\n \"Billing\": [\"InvoiceEmail\", \"PaymentFailedEmail\", \"SubscriptionConfirmation\", \"SubscriptionCancelled\", \"TrialEndingEmail\", \"CreditCardExpiring\", \"PaymentReceipt\", \"OverduePaymentNotice\"],\n \"Authentication\": [\"WelcomeEmail\", \"ConfirmEmail\", \"MagicLinkEmail\", \"ResetPasswordEmail\", \"EmailChangeVerification\", \"TwoFactorCodeEmail\"],\n \"Support\": [\"TicketCreatedEmail\", \"TicketReplyEmail\", \"TicketResolvedEmail\", \"SupportFeedbackRequest\"],\n \"Engagement\": [\"WeeklyDigest\", \"FeatureAnnouncement\", \"MilestoneEmail\", \"InactivityWarning\", \"TipOfWeek\", \"ProductChangelog\"],\n \"Growth\": [\"ReferralInvite\", \"ReferralReward\", \"ReferralConverted\", \"WaitlistWelcome\", \"SocialSharePrompt\"],\n \"Security\": [\"NewLoginAlert\", \"PolicyUpdateEmail\", \"AccountDeletedConfirmation\", \"DataExportReady\", \"ApiKeyCreated\"],\n \"System\": [\"MaintenanceNotice\", \"IncidentReport\", \"StatusPageUpdate\"]\n};\n\nexport const EmailShowcase = () => {\n const { categories, flatTemplates, defaultTemplateId } = useMemo(() => {\n const parsedCategories: Record<string, Record<string, { name: string; component: React.ReactElement }>> = {};\n const flat: Record<string, React.ReactElement> = {};\n let firstId = '';\n\n // 1. Process known categories\n Object.entries(CATEGORY_MAP).forEach(([categoryName, componentNames]) => {\n componentNames.forEach(compName => {\n const Component = (AllTemplates as any)[compName];\n if (Component && typeof Component === 'function') {\n if (!parsedCategories[categoryName]) parsedCategories[categoryName] = {};\n \n // Automatically add spaces before Capital letters (e.g., WeeklyNewsletter -> Weekly Newsletter)\n const formattedName = compName.replace(/([A-Z])/g, ' $1').trim();\n const element = <Component />;\n \n parsedCategories[categoryName][compName] = { name: formattedName, component: element };\n flat[compName] = element;\n if (!firstId) firstId = compName;\n }\n });\n });\n\n // 2. Discover any newly added exports (Uncategorized Fallback)\n Object.entries(AllTemplates).forEach(([compName, Component]) => {\n if (\n compName === 'default' || \n flat[compName] || \n typeof Component !== 'function' ||\n /^[a-z]/.test(compName) // Ignore utility functions like renderEmailParams\n ) {\n return;\n }\n \n const categoryName = \"Uncategorized\";\n if (!parsedCategories[categoryName]) parsedCategories[categoryName] = {};\n \n const formattedName = compName.replace(/([A-Z])/g, ' $1').trim();\n const element = <Component />;\n \n parsedCategories[categoryName][compName] = { name: formattedName, component: element };\n flat[compName] = element;\n if (!firstId) firstId = compName;\n });\n\n return { categories: parsedCategories, flatTemplates: flat, defaultTemplateId: firstId };\n }, []);\n\n const [activeTemplate, setActiveTemplate] = useState(defaultTemplateId);\n\n // Keep state in sync if defaultTemplateId changes when component mounts\n React.useEffect(() => {\n if (!activeTemplate && defaultTemplateId) setActiveTemplate(defaultTemplateId);\n }, [defaultTemplateId, activeTemplate]);\n\n return (\n <div className=\"space-y-6\">\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-4 mb-4\">\n <label className=\"font-medium text-gray-700 dark:text-gray-300\">Select Template:</label>\n <select \n className=\"border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 rounded-md px-3 py-2 text-sm text-gray-900 dark:text-white min-w-[250px] focus:outline-none focus:ring-2 focus:ring-primary-500\"\n value={activeTemplate}\n onChange={(e) => setActiveTemplate(e.target.value)}\n >\n {Object.entries(categories).map(([categoryName, templates]) => (\n <optgroup key={categoryName} label={categoryName}>\n {Object.entries(templates).map(([id, data]) => (\n <option key={id} value={id}>{data.name}</option>\n ))}\n </optgroup>\n ))}\n </select>\n </div>\n\n <div className=\"w-full bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800\">\n <EmailPreviewer component={flatTemplates[activeTemplate] || <div className=\"p-10 text-center text-gray-500\">No template selected</div>} />\n </div>\n </div>\n );\n};"],"names":["AllTemplates","_jsx","React","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EmailShowcase.js","sources":["../../../src/components/Email/EmailShowcase.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { EmailPreviewer } from './components';\nimport * as AllTemplates from './templates';\n\n// We map known template names to explicit categories.\n// Any missed/new exports automatically fall into an \"Uncategorized\" section!\nconst CATEGORY_MAP: Record<string, string[]> = {\n \"Marketing: Newsletters\": [\"WeeklyNewsletter\", \"MonthlyDigest\", \"CuratedIndustryNews\"],\n \"Marketing: Blog\": [\"NewBlogPost\", \"BlogSeries\", \"BestOfRoundup\"],\n \"Marketing: Lead Nurturing\": [\"LeadMagnetDelivery\", \"WebinarConfirmation\", \"WebinarReminder\", \"WebinarFollowup\", \"DripCampaignDay1\", \"DripCampaignComplete\", \"CaseStudyDelivery\"],\n \"Marketing: Promotional\": [\"AbandonedCart\", \"FlashSale\", \"BrowseAbandonment\", \"PriceDropAlert\", \"BackInStock\", \"SeasonalCampaign\", \"BirthdayOffer\", \"MilestoneDiscount\"],\n \"Marketing: Events\": [\"EventAnnouncement\", \"EarlyBirdReminder\", \"ScheduleReleased\", \"VIPInvite\", \"PostEventThankYou\", \"ConferenceSeries\"],\n \"Marketing: Re-engagement\": [\"WeMissYou30Day\", \"ComeBack60Day\", \"LastChance90Day\", \"ProductUpdateReengagement\"],\n \"Marketing: Social\": [\"SocialProof\", \"NewFollowerWelcome\", \"ShareYourStory\", \"UserSpotlight\", \"CommunityMilestone\"],\n \"Marketing: Surveys\": [\"NPSSurvey\", \"ExitSurvey\", \"CSATSurvey\", \"ProductFeedback\", \"BetaFeedback\"],\n \"Marketing: Affiliate\": [\"AffiliateInvite\", \"AffiliateWelcome\", \"AffiliatePayout\", \"AffiliateTopPerformer\", \"PartnerComarketing\"],\n \"Marketing: Content\": [\"NewGuideEbook\", \"ToolTemplateDelivery\", \"InfographicEmail\", \"PodcastEpisode\", \"YouTubeNotification\"],\n \"Sales\": [\"ColdOutreach\", \"FollowUpEmail\", \"ScheduleDemo\", \"SendProposal\", \"ProposalAccepted\", \"ProjectTermination\", \"ClientWinBack\", \"ClientReferenceRequest\"],\n \"Legal\": [\"PrivacyPolicyUpdate\", \"TermsOfServiceUpdate\", \"DPANotice\", \"DMCANotice\", \"GDPRCompliance\"],\n \"Internal: HR\": [\"NewHireAnnouncement\", \"BirthdayAnniversary\", \"EmployeeFarewell\", \"PolicyUpdate\", \"ExitInterviewRequest\"],\n \"Internal: IT\": [\"ITOutageReport\", \"PasswordRotationReminder\", \"AppAccessGranted\"],\n \"Internal: Comms\": [\"LeadershipUpdate\", \"MeetingRecap\", \"CompanyEventsCalendar\"],\n \"Billing\": [\"InvoiceEmail\", \"PaymentFailedEmail\", \"SubscriptionConfirmation\", \"SubscriptionCancelled\", \"TrialEndingEmail\", \"CreditCardExpiring\", \"PaymentReceipt\", \"OverduePaymentNotice\"],\n \"Authentication\": [\"WelcomeEmail\", \"ConfirmEmail\", \"MagicLinkEmail\", \"ResetPasswordEmail\", \"EmailChangeVerification\", \"TwoFactorCodeEmail\"],\n \"Support\": [\"TicketCreatedEmail\", \"TicketReplyEmail\", \"TicketResolvedEmail\", \"SupportFeedbackRequest\"],\n \"Engagement\": [\"WeeklyDigest\", \"FeatureAnnouncement\", \"MilestoneEmail\", \"InactivityWarning\", \"TipOfWeek\", \"ProductChangelog\"],\n \"Growth\": [\"ReferralInvite\", \"ReferralReward\", \"ReferralConverted\", \"WaitlistWelcome\", \"SocialSharePrompt\"],\n \"Security\": [\"NewLoginAlert\", \"PolicyUpdateEmail\", \"AccountDeletedConfirmation\", \"DataExportReady\", \"ApiKeyCreated\"],\n \"System\": [\"MaintenanceNotice\", \"IncidentReport\", \"StatusPageUpdate\"]\n};\n\nexport const EmailShowcase = () => {\n const { categories, flatTemplates, defaultTemplateId } = useMemo(() => {\n const parsedCategories: Record<string, Record<string, { name: string; component: React.ReactElement }>> = {};\n const flat: Record<string, React.ReactElement> = {};\n let firstId = '';\n\n // 1. Process known categories\n Object.entries(CATEGORY_MAP).forEach(([categoryName, componentNames]) => {\n componentNames.forEach(compName => {\n const Component = (AllTemplates as any)[compName];\n if (Component && typeof Component === 'function') {\n if (!parsedCategories[categoryName]) parsedCategories[categoryName] = {};\n \n // Automatically add spaces before Capital letters (e.g., WeeklyNewsletter -> Weekly Newsletter)\n const formattedName = compName.replace(/([A-Z])/g, ' $1').trim();\n const element = <Component />;\n \n parsedCategories[categoryName][compName] = { name: formattedName, component: element };\n flat[compName] = element;\n if (!firstId) firstId = compName;\n }\n });\n });\n\n // 2. Discover any newly added exports (Uncategorized Fallback)\n Object.entries(AllTemplates).forEach(([compName, Component]) => {\n if (\n compName === 'default' || \n flat[compName] || \n typeof Component !== 'function' ||\n /^[a-z]/.test(compName) // Ignore utility functions like renderEmailParams\n ) {\n return;\n }\n \n const categoryName = \"Uncategorized\";\n if (!parsedCategories[categoryName]) parsedCategories[categoryName] = {};\n \n const formattedName = compName.replace(/([A-Z])/g, ' $1').trim();\n const element = <Component />;\n \n parsedCategories[categoryName][compName] = { name: formattedName, component: element };\n flat[compName] = element;\n if (!firstId) firstId = compName;\n });\n\n return { categories: parsedCategories, flatTemplates: flat, defaultTemplateId: firstId };\n }, []);\n\n const [activeTemplate, setActiveTemplate] = useState(defaultTemplateId);\n\n // Keep state in sync if defaultTemplateId changes when component mounts\n React.useEffect(() => {\n if (!activeTemplate && defaultTemplateId) setActiveTemplate(defaultTemplateId);\n }, [defaultTemplateId, activeTemplate]);\n\n return (\n <div className=\"space-y-6\">\n <div className=\"flex flex-col sm:flex-row sm:items-center gap-4 mb-4\">\n <label className=\"font-medium text-gray-700 dark:text-gray-300\">Select Template:</label>\n <select \n className=\"border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 rounded-md px-3 py-2 text-sm text-gray-900 dark:text-white min-w-[250px] focus:outline-none focus:ring-2 focus:ring-primary-500\"\n value={activeTemplate}\n onChange={(e) => setActiveTemplate(e.target.value)}\n >\n {Object.entries(categories).map(([categoryName, templates]) => (\n <optgroup key={categoryName} label={categoryName}>\n {Object.entries(templates).map(([id, data]) => (\n <option key={id} value={id}>{data.name}</option>\n ))}\n </optgroup>\n ))}\n </select>\n </div>\n\n <div className=\"w-full bg-white dark:bg-gray-900 rounded-lg shadow-sm border border-gray-200 dark:border-gray-800\">\n <EmailPreviewer component={flatTemplates[activeTemplate] || <div className=\"p-10 text-center text-gray-500\">No template selected</div>} />\n </div>\n </div>\n );\n};"],"names":["AllTemplates","_jsx","React","_jsxs"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Button } from '
|
|
2
|
+
import { Button } from '@react-email/components';
|
|
3
3
|
|
|
4
4
|
const EmailButton = ({ children, href }) => (jsx(Button, { href: href, className: "bg-blue-600 rounded text-white text-[15px] font-semibold no-underline text-center px-6 py-3 inline-block", children: children }));
|
|
5
5
|
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Section } from '
|
|
3
|
-
import { Text } from '../../../node_modules/@react-email/text/dist/index.js';
|
|
4
|
-
import { Link } from '../../../node_modules/@react-email/link/dist/index.js';
|
|
2
|
+
import { Section, Text, Link } from '@react-email/components';
|
|
5
3
|
|
|
6
4
|
const EmailFooter = ({ companyName = 'Beyond Corp' }) => (jsxs(Section, { className: "mt-8 text-center", children: [jsxs(Text, { className: "text-gray-400 dark:text-gray-500 text-xs", children: ["\u00A9 ", new Date().getFullYear(), " ", companyName, ". All rights reserved."] }), jsxs(Text, { className: "text-gray-400 dark:text-gray-500 text-xs mt-2", children: ["If you no longer wish to receive these emails, you can ", jsx(Link, { href: "#", className: "text-gray-500 dark:text-gray-400 underline", children: "unsubscribe" }), "."] })] }));
|
|
7
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailFooter.js","sources":["../../../../src/components/Email/components/EmailFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Link } from '@react-email/components';\n\nexport const EmailFooter = ({ companyName = 'Beyond Corp' }) => (\n <Section className=\"mt-8 text-center\">\n <Text className=\"text-gray-400 dark:text-gray-500 text-xs\">\n © {new Date().getFullYear()} {companyName}. All rights reserved.\n </Text>\n <Text className=\"text-gray-400 dark:text-gray-500 text-xs mt-2\">\n If you no longer wish to receive these emails, you can <Link href=\"#\" className=\"text-gray-500 dark:text-gray-400 underline\">unsubscribe</Link>.\n </Text>\n </Section>\n);"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmailFooter.js","sources":["../../../../src/components/Email/components/EmailFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, Section, Link } from '@react-email/components';\n\nexport const EmailFooter = ({ companyName = 'Beyond Corp' }) => (\n <Section className=\"mt-8 text-center\">\n <Text className=\"text-gray-400 dark:text-gray-500 text-xs\">\n © {new Date().getFullYear()} {companyName}. All rights reserved.\n </Text>\n <Text className=\"text-gray-400 dark:text-gray-500 text-xs mt-2\">\n If you no longer wish to receive these emails, you can <Link href=\"#\" className=\"text-gray-500 dark:text-gray-400 underline\">unsubscribe</Link>.\n </Text>\n </Section>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,WAAW,GAAG,CAAC,EAAE,WAAW,GAAG,aAAa,EAAE,MACzDA,IAAA,CAAC,OAAO,EAAA,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,CACnCA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,CAAA,SAAA,EACrD,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAA,GAAA,EAAG,WAAW,EAAA,wBAAA,CAAA,EAAA,CACpC,EACPA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,+CAA+C,EAAA,QAAA,EAAA,CAAA,yDAAA,EACNC,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,EAAC,4CAA4C,EAAA,QAAA,EAAA,aAAA,EAAA,CAAmB,EAAA,GAAA,CAAA,EAAA,CAC1I,CAAA,EAAA,CACC;;;;"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { Img } from '
|
|
3
|
-
import { Section } from '../../../node_modules/@react-email/section/dist/index.js';
|
|
2
|
+
import { Section, Img } from '@react-email/components';
|
|
4
3
|
|
|
5
4
|
const EmailHeader = ({ logoUrl = 'https://via.placeholder.com/150x50', companyName = 'Beyond Corp' }) => (jsx(Section, { className: "mt-8 mb-8", children: jsx(Img, { src: logoUrl, width: "150", height: "50", alt: companyName, className: "mx-auto" }) }));
|
|
6
5
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailHeader.js","sources":["../../../../src/components/Email/components/EmailHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Img, Section } from '@react-email/components';\n\nexport const EmailHeader = ({ logoUrl = 'https://via.placeholder.com/150x50', companyName = 'Beyond Corp' }) => (\n <Section className=\"mt-8 mb-8\">\n <Img src={logoUrl} width=\"150\" height=\"50\" alt={companyName} className=\"mx-auto\" />\n </Section>\n);"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmailHeader.js","sources":["../../../../src/components/Email/components/EmailHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { Img, Section } from '@react-email/components';\n\nexport const EmailHeader = ({ logoUrl = 'https://via.placeholder.com/150x50', companyName = 'Beyond Corp' }) => (\n <Section className=\"mt-8 mb-8\">\n <Img src={logoUrl} width=\"150\" height=\"50\" alt={companyName} className=\"mx-auto\" />\n </Section>\n);"],"names":["_jsx"],"mappings":";;;MAGa,WAAW,GAAG,CAAC,EAAE,OAAO,GAAG,oCAAoC,EAAE,WAAW,GAAG,aAAa,EAAE,MACzGA,IAAC,OAAO,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,QAAA,EAC5BA,IAAC,GAAG,EAAA,EAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CAC3E;;;;"}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { Html, Tailwind, Head, Preview, Body, Container } from '@react-email/components';
|
|
2
3
|
import { EmailHeader } from './EmailHeader.js';
|
|
3
4
|
import { EmailFooter } from './EmailFooter.js';
|
|
4
5
|
import { theme } from './theme.js';
|
|
5
|
-
import { Html } from '../../../node_modules/@react-email/html/dist/index.js';
|
|
6
|
-
import { Tailwind } from '../../../node_modules/@react-email/tailwind/dist/index.js';
|
|
7
|
-
import { Head } from '../../../node_modules/@react-email/head/dist/index.js';
|
|
8
|
-
import { Preview } from '../../../node_modules/@react-email/preview/dist/index.js';
|
|
9
|
-
import { Body } from '../../../node_modules/@react-email/body/dist/index.js';
|
|
10
|
-
import { Container } from '../../../node_modules/@react-email/container/dist/index.js';
|
|
11
6
|
|
|
12
7
|
const EmailLayout = ({ children, previewText, title }) => (jsx(Html, { children: jsxs(Tailwind, { config: { theme: { extend: { colors: theme.colors } } }, children: [jsx(Head, { children: jsx("title", { children: title }) }), previewText && jsx(Preview, { children: previewText }), jsx(Body, { className: "bg-gray-50 dark:bg-gray-900 my-auto mx-auto font-sans px-2", children: jsxs(Container, { className: "max-w-[600px] mx-auto bg-white dark:bg-gray-800 rounded-lg p-8 my-8 shadow-sm border border-gray-100 dark:border-gray-700", children: [jsx(EmailHeader, {}), children, jsx(EmailFooter, {})] }) })] }) }));
|
|
13
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmailLayout.js","sources":["../../../../src/components/Email/components/EmailLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { Html, Body, Container, Tailwind, Head, Preview } from '@react-email/components';\nimport { EmailHeader } from './EmailHeader';\nimport { EmailFooter } from './EmailFooter';\nimport { theme } from './theme';\n\nexport const EmailLayout = ({ children, previewText, title }: { \n children: React.ReactNode; \n previewText?: string; \n title?: string;\n}) => (\n <Html>\n <Tailwind config={{ theme: { extend: { colors: theme.colors } } }}>\n <Head><title>{title}</title></Head>\n {previewText && <Preview>{previewText}</Preview>}\n <Body className=\"bg-gray-50 dark:bg-gray-900 my-auto mx-auto font-sans px-2\">\n <Container className=\"max-w-[600px] mx-auto bg-white dark:bg-gray-800 rounded-lg p-8 my-8 shadow-sm border border-gray-100 dark:border-gray-700\">\n <EmailHeader />\n {children}\n <EmailFooter />\n </Container>\n </Body>\n </Tailwind>\n </Html>\n);"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmailLayout.js","sources":["../../../../src/components/Email/components/EmailLayout.tsx"],"sourcesContent":["import React from 'react';\nimport { Html, Body, Container, Tailwind, Head, Preview } from '@react-email/components';\nimport { EmailHeader } from './EmailHeader';\nimport { EmailFooter } from './EmailFooter';\nimport { theme } from './theme';\n\nexport const EmailLayout = ({ children, previewText, title }: { \n children: React.ReactNode; \n previewText?: string; \n title?: string;\n}) => (\n <Html>\n <Tailwind config={{ theme: { extend: { colors: theme.colors } } }}>\n <Head><title>{title}</title></Head>\n {previewText && <Preview>{previewText}</Preview>}\n <Body className=\"bg-gray-50 dark:bg-gray-900 my-auto mx-auto font-sans px-2\">\n <Container className=\"max-w-[600px] mx-auto bg-white dark:bg-gray-800 rounded-lg p-8 my-8 shadow-sm border border-gray-100 dark:border-gray-700\">\n <EmailHeader />\n {children}\n <EmailFooter />\n </Container>\n </Body>\n </Tailwind>\n </Html>\n);"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAMO,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAIzD,MACCA,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EACHC,IAAA,CAAC,QAAQ,EAAA,EAAC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,aAC/DD,GAAA,CAAC,IAAI,EAAA,EAAA,QAAA,EAACA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAQ,KAAK,EAAA,CAAS,EAAA,CAAO,EAClC,WAAW,IAAIA,IAAC,OAAO,EAAA,EAAA,QAAA,EAAE,WAAW,EAAA,CAAW,EAChDA,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,4DAA4D,EAAA,QAAA,EAC1EC,IAAA,CAAC,SAAS,EAAA,EAAC,SAAS,EAAC,2HAA2H,aAC9ID,GAAA,CAAC,WAAW,KAAG,EACd,QAAQ,EACTA,GAAA,CAAC,WAAW,EAAA,EAAA,CAAG,CAAA,EAAA,CACL,GACP,CAAA,EAAA,CACE,EAAA,CACN;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, useEffect } from 'react';
|
|
3
|
-
import { render } from '
|
|
3
|
+
import { render } from '@react-email/render';
|
|
4
4
|
|
|
5
5
|
const EmailPreviewer = ({ component }) => {
|
|
6
6
|
const [html, setHtml] = useState('');
|
|
@@ -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 ConfirmEmail = ({ confirmationLink = 'https://example.com/confirm', expiryMinutes = 15 }) => {
|
|
9
9
|
return (jsxs(EmailLayout, { previewText: "Confirm your email address", title: "Confirm your email", children: [jsx(Text, { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", children: "Confirm your email address" }), jsxs(Text, { className: "text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-6", children: ["Please confirm that you want to use this as your account email address. This link is valid for ", expiryMinutes, " minutes."] }), jsx(Section, { className: "text-center mb-6", children: jsx(EmailButton, { href: confirmationLink, children: "Verify 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 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 },
|