✨ Send recovery url to users with expired checkout sessions #1555
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughThis change introduces several enhancements to the checkout and abandoned checkout flows. On the Stripe side, new properties have been added to the checkout session creation process, and a new case has been implemented in the webhook handler to process expired sessions. Additionally, a new billing script is added for session creation and expiration. Email functionality is extended with additional abandoned checkout templates, localized content, previews, and improved configuration for sender details. Several UI components were updated to support new properties, and a Signature component was introduced. Changes
Sequence Diagram(s)sequenceDiagram
participant Script as Checkout Expiry Script
participant Stripe as Stripe API
Note over Script,Stripe: Checkout Session Creation & Expiration
Script->>Stripe: Create session with expires_at & after_expiration
Stripe-->>Script: Return session ID & checkout URL
Script->>Stripe: Expire session using session ID
Stripe-->>Script: Confirm session expiry
sequenceDiagram
participant Stripe as Stripe
participant Webhook as Webhook Handler
participant KV as KV Store
participant Email as Email Client
Note over Stripe,Email: Handling Expired Checkout Session Event
Stripe->>Webhook: Send "checkout.session.expired" event
Webhook->>Webhook: Log and extract session details
Webhook->>KV: Check if promo email already sent
alt Email not sent and user eligible
KV-->>Webhook: Not found
Webhook->>Email: Send abandoned checkout email
Webhook->>KV: Set email sent flag (30-day expiry)
else Already sent or missing data
KV-->>Webhook: Already exists / Data missing
Webhook->>Webhook: Log and exit
end
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🔇 Additional comments (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
lukevella
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
packages/billing/src/scripts/checkout-expirey.ts (1)
1-40: Fix typo in filename: "expirey" should be "expiry".The filename contains a spelling error. Rename the file from
checkout-expirey.tstocheckout-expiry.tsto maintain correct spelling.packages/emails/src/templates/abandoned-checkout.tsx (1)
82-82: Consider making the promotion code configurable.The promotion code "GETPRO1Y20" is hardcoded. Consider making it a prop to allow for dynamic promotion codes and A/B testing.
- GETPRO1Y20 + {props.promoCode}packages/emails/src/components/styled-components.tsx (1)
154-182: Consider making the Signature component more configurable.The component has hardcoded values that might need to change:
- Image URL is hardcoded to a specific CDN path
- Name and title are hardcoded
- Image dimensions are fixed
Consider making these configurable through props for better reusability.
-export const Signature = () => { +export const Signature = ({ + name = "Luke Vella", + title = "Founder", + imageUrl = "https://d39ixtfgglw55o.cloudfront.net/images/luke.jpg", + imageSize = 48, +}: { + name?: string; + title?: string; + imageUrl?: string; + imageSize?: number; +}) => { return ( <Section> <UnstyledText style={{ fontSize: 16, margin: 0, fontWeight: "bold", color: darkTextColor, fontFamily, }} > - Luke Vella + {name} </UnstyledText> <UnstyledText style={{ fontSize: 16, margin: 0, color: lightTextColor, fontFamily }} > - Founder + {title} </UnstyledText> <img - src="https://d39ixtfgglw55o.cloudfront.net/images/luke.jpg" - alt="Luke Vella" + src={imageUrl} + alt={name} style={{ borderRadius: "50%", marginTop: 16 }} - width={48} - height={48} + width={imageSize} + height={imageSize} /> </Section> ); };apps/web/src/app/api/stripe/webhook/route.ts (1)
212-232: Enhance error messages for better debuggingThe error handling is good, but the messages could be more descriptive by including the session ID.
- console.info("No user ID found in Checkout Session metadata"); - Sentry.captureMessage("No user ID found in Checkout Session metadata"); + console.info(`No user ID found in Checkout Session metadata (session: ${session.id})`); + Sentry.captureMessage(`No user ID found in Checkout Session metadata (session: ${session.id})`); - console.info("No email or recovery URL found in Checkout Session"); - Sentry.captureMessage( - "No email or recovery URL found in Checkout Session", - ); + console.info(`No email or recovery URL found in Checkout Session (session: ${session.id})`); + Sentry.captureMessage( + `No email or recovery URL found in Checkout Session (session: ${session.id})`, + );packages/billing/package.json (1)
11-11: Fix typo in script nameThe script name contains a typo: "expirey" should be "expiry".
- "checkout-expirey": "dotenv -e ../../.env -- tsx ./src/scripts/checkout-expirey.ts", + "checkout-expiry": "dotenv -e ../../.env -- tsx ./src/scripts/checkout-expiry.ts",Note: This change will require renaming the script file as well.
packages/emails/locales/en/emails.json (1)
60-60: Parameterize the discount percentageThe discount percentage is hardcoded in the string. Consider making it dynamic to allow for different promotional offers.
- "abandoned_checkout_offer": "To help you get started, you can get <b>20% off</b> your first year. Just use the code below when you check out:", + "abandoned_checkout_offer": "To help you get started, you can get <b>{{discountPercentage}}% off</b> your first year. Just use the code below when you check out:",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web/src/app/api/stripe/checkout/route.ts(1 hunks)apps/web/src/app/api/stripe/webhook/route.ts(2 hunks)packages/billing/package.json(1 hunks)packages/billing/src/scripts/checkout-expirey.ts(1 hunks)packages/emails/locales/en/emails.json(1 hunks)packages/emails/src/components/email-layout.tsx(3 hunks)packages/emails/src/components/styled-components.tsx(2 hunks)packages/emails/src/previews/abandoned-checkout.tsx(1 hunks)packages/emails/src/send-email.tsx(2 hunks)packages/emails/src/templates.ts(2 hunks)packages/emails/src/templates/abandoned-checkout.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit tests
- GitHub Check: Integration tests
- GitHub Check: Type check
- GitHub Check: Linting
🔇 Additional comments (10)
packages/emails/src/previews/abandoned-checkout.tsx (1)
1-12: LGTM!The preview component is well-structured and follows the established pattern for email previews. The hardcoded values are appropriate for preview purposes.
packages/emails/src/templates.ts (1)
1-1: LGTM!The AbandonedCheckoutEmail template is correctly imported and added to the templates object, maintaining the file's structure and organization.
Also applies to: 23-23
packages/billing/src/scripts/checkout-expirey.ts (2)
7-19: Verify hardcoded values are for development only.The script contains hardcoded values that should only be used in development:
localhostURLs[email protected]emailfree-useruser IDPlease ensure this script is not used in production.
20-26: LGTM!The expiration and recovery configuration is well-structured:
- 30-minute expiration window
- Recovery enabled with promotion codes
packages/emails/src/components/email-layout.tsx (1)
18-18: LGTM!The changes are well-implemented:
- Optional
poweredByprop with default value maintains backward compatibility- Conditional rendering of the "Powered by" section is correct
- UTM parameters in the link help track email sources
Also applies to: 34-34, 53-71
apps/web/src/app/api/stripe/checkout/route.ts (1)
106-112: LGTM! Good implementation of checkout session expiration and recovery.The 30-minute expiration window and recovery options are well-configured, following Stripe's recommended patterns for abandoned checkout recovery.
packages/emails/src/templates/abandoned-checkout.tsx (1)
1-134: Add tests for the email template.Consider adding tests to verify the template renders correctly with different props combinations (with/without name, different URLs, etc.).
Would you like me to help create a test suite for this component?
packages/emails/src/send-email.tsx (1)
13-21: LGTM! Good implementation of customizable sender details.The changes properly implement optional sender customization while maintaining type safety and backward compatibility.
Also applies to: 113-113
apps/web/src/app/api/stripe/webhook/route.ts (1)
7-7: LGTM!The new imports are correctly added and used appropriately in the new handler.
Also applies to: 12-12
packages/emails/locales/en/emails.json (1)
57-65: LGTM!The email content is well-structured, personalized, and follows the established pattern of other email templates.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/billing/src/scripts/checkout-expiry.ts (1)
39-39: Add error handling for the script execution.The script should handle potential errors that might occur during execution.
-createAndExpireCheckout(); +createAndExpireCheckout() + .catch((error) => { + console.error("❌ Error:", error.message); + process.exit(1); + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/billing/package.json(1 hunks)packages/billing/src/scripts/checkout-expiry.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/billing/package.json
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit tests
- GitHub Check: Integration tests
- GitHub Check: Linting
- GitHub Check: Type check
🔇 Additional comments (3)
packages/billing/src/scripts/checkout-expiry.ts (3)
1-3: LGTM! Clear imports and function naming.The imports provide the necessary Stripe functionality, and the function name clearly describes its purpose.
20-26: LGTM! Well-configured expiration and recovery settings.The expiration time is correctly set to 30 minutes, and the recovery options are properly configured to support the PR's objective of sending recovery URLs to users with expired sessions.
29-37: LGTM! Comprehensive logging and proper session expiration.The code provides helpful debug information and correctly handles session expiration.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/emails/src/templates/abandoned-checkout.tsx (3)
20-27: Consider enhancing the preview text for better engagement.The current preview text "Upgrade to Rallly Pro to get more features and support" could be more engaging. Consider mentioning the 20% discount to increase open rates.
preview={ctx.t("abandoned_checkout_preview", { - defaultValue: "Upgrade to Rallly Pro to get more features and support.", + defaultValue: "Exclusive offer: Get 20% off your first year of Rallly Pro!", ns: "emails", })}
77-98: Consider making the discount code configurable.The discount code "GETPRO1Y20" is hardcoded. Consider making it a prop to allow for dynamic discount codes and A/B testing.
interface AbandonedCheckoutEmailProps { recoveryUrl: string; name?: string; ctx: EmailContext; + discountCode?: string; } // In the component: - GETPRO1Y20 + {props.discountCode ?? "GETPRO1Y20"}
126-134: Consider enhancing the subject line for better open rates.The current subject line could be more engaging by mentioning the 20% discount.
return ctx.t("abandoned_checkout_subject", { - defaultValue: "A special offer for Rallly Pro", + defaultValue: "🎉 Exclusive: 20% off your first year of Rallly Pro", ns: "emails", });packages/emails/src/components/styled-components.tsx (1)
155-183: Consider making the signature configurable.The signature component has hardcoded values for name, title, and image URL. Consider making these configurable to:
- Support different signers
- Allow for environment-specific image URLs
+ interface SignatureProps { + name: string; + title: string; + imageUrl: string; + } - export const Signature = () => { + export const Signature = ({ name, title, imageUrl }: SignatureProps) => { return ( <Section> <UnstyledText style={{ fontSize: 16, margin: 0, fontWeight: "bold", color: darkTextColor, fontFamily, }} > - Luke Vella + {name} </UnstyledText> <UnstyledText style={{ fontSize: 16, margin: 0, color: lightTextColor, fontFamily }} > - Founder + {title} </UnstyledText> <img - src="https://d39ixtfgglw55o.cloudfront.net/images/luke.jpg" - alt="Luke Vella" + src={imageUrl} + alt={name} style={{ borderRadius: "50%", marginTop: 16 }} width={48} height={48} /> </Section> ); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/web/src/utils/emails.ts(1 hunks)packages/emails/locales/en/emails.json(1 hunks)packages/emails/src/components/email-context.tsx(1 hunks)packages/emails/src/components/styled-components.tsx(3 hunks)packages/emails/src/templates/abandoned-checkout.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/emails/src/components/email-context.tsx
- apps/web/src/utils/emails.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/emails/locales/en/emails.json
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit tests
- GitHub Check: Integration tests
- GitHub Check: Type check
- GitHub Check: Linting
🔇 Additional comments (3)
packages/emails/src/templates/abandoned-checkout.tsx (2)
8-18: LGTM!Props interface is well-defined with appropriate types and optionality.
28-49: LGTM!The personalization logic is well-implemented with proper i18n support for both named and anonymous greetings.
packages/emails/src/components/styled-components.tsx (1)
52-52: LGTM!The button styling changes improve visual hierarchy with a more compact and prominent appearance.
Also applies to: 59-60
Summary by CodeRabbit