Engineering: Complete Self Managed Trial Key Display Implementation
Overview
This engineering task is to complete the technical implementation for displaying Self Managed trial keys directly on the form submission page, as outlined in issue #623.
Background
The Self Managed Ultimate trial key is currently sent via Marketo email after form submission. Due to email deliverability issues (spam filters, server errors), we need to display the trial key directly on the page after form submit to improve user experience.
Technical Context
Previous work has been started but needs completion:
- CustomersDot endpoints have been updated to remove authentication requirements
- Initial implementation MR exists: buyer-experience!3848 (closed)
- Work was paused due to other priorities (Decap PoC OKR, Vue 3/Nuxt 3 migration)
Current Status
From the existing MR, the following items need to be addressed:
-
Rebase with main
to clear pipeline -
Update styling to match Figma designs -
Fix Marketo redirecting to /pricing and submitting the form after validation -
Make error messages more visible -
Move content to Contentful and fix markdown formatting
Acceptance Criteria
-
CRITICAL: Ensure CORS is properly configured for review apps (*.about.gitlab-review.app) and production (about.gitlab.com) before deployment -
Complete the implementation to display trial keys on form submission -
Implement error handling for failed trial key generation (422 errors for duplicate emails) -
Update styling to match approved Figma designs -
Resolve Marketo form submission and redirect issues -
Add copy functionality for the trial key (key is ~2080+ characters) -
Test with both valid and invalid form submissions -
Verify rate limiting doesn't interfere with legitimate usage
Technical Details
Endpoints
-
Production:
https://customers.gitlab.com/marketo_notification
-
Staging:
https://customers.staging.gitlab.com/marketo_notification
-
Duo Pro endpoint:
/marketo_trial
Key Requirements
- Trial key is ~2080+ characters long
- Need expand/collapse functionality with copy button
- Consider download as .txt file option
- Handle 422 errors for duplicate email submissions with proper error messages
- Implement proper form validation before API call using Marketo's
.OnValidate
CORS Configuration
IMPORTANT: The previous engineer was blocked by CORS errors on review apps. This needs to be resolved before deployment by working with the CustomersDot team to ensure proper Access-Control-Allow-Origin
headers are configured.
Resources
- Original issue: #623
- Existing MR: buyer-experience!3848 (closed)
- Target page: https://about.gitlab.com/free-trial/?hosted=self-managed
- CustomersDot CORS discussion: https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/10487
Definition of Done
-
CORS configuration verified and working for both review apps and production -
Trial key displays correctly after successful form submission -
Error messages display appropriately for failed submissions -
Form validation prevents submission until valid data is entered -
UI matches approved designs -
Code review completed and approved -
QA testing completed successfully