Refactor app flows and refresh UI components
This commit is contained in:
Jacques_tirot
+102
-14
@@ -52,10 +52,106 @@ function basicTemplate({ title = '', content = '', button = null }) {
|
||||
</body></html>`
|
||||
}
|
||||
|
||||
function welcomeTemplate({ firstName = '', lastName = '' }) {
|
||||
const fullName = [firstName, lastName].filter(Boolean).join(' ').trim()
|
||||
const greeting = fullName ? `Salut ${fullName},` : 'Salut,'
|
||||
return `<!doctype html><html lang="fr" style="background-color:#0b0b10"><head>
|
||||
function cleanEmailName(firstName) {
|
||||
return typeof firstName === 'string' ? firstName.replace(/[\r\n]+/g, ' ').trim() : ''
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
}
|
||||
|
||||
function getWelcomeLanguage(preferredLanguage) {
|
||||
return preferredLanguage === 'en' ? 'en' : 'fr'
|
||||
}
|
||||
|
||||
function welcomeEmailSubject({ firstName = '', preferredLanguage = 'fr' } = {}) {
|
||||
const language = getWelcomeLanguage(preferredLanguage)
|
||||
const cleanFirstName = cleanEmailName(firstName)
|
||||
const subject = language === 'en' ? 'Welcome to Musicland' : 'Bienvenue à MusicLand'
|
||||
return cleanFirstName ? `${subject}, ${cleanFirstName}` : subject
|
||||
}
|
||||
|
||||
function welcomeTemplate({ firstName = '', preferredLanguage = 'fr' } = {}) {
|
||||
const language = getWelcomeLanguage(preferredLanguage)
|
||||
const cleanFirstName = cleanEmailName(firstName)
|
||||
const safeFirstName = escapeHtml(cleanFirstName)
|
||||
const greeting =
|
||||
language === 'en'
|
||||
? safeFirstName
|
||||
? `Hi ${safeFirstName},`
|
||||
: 'Hi,'
|
||||
: safeFirstName
|
||||
? `Salut ${safeFirstName},`
|
||||
: 'Salut,'
|
||||
const content =
|
||||
language === 'en'
|
||||
? `
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
That’s it, you’ve got your pass to MusicLand. Welcome to the land of song!
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
You’re about to embark on an extraordinary adventure!
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
You’ll write your own lyrics, add a melody, shoot your music video… and upload your song to the MusicLand streaming platform.
|
||||
</p>
|
||||
<p style="margin:0 0 10px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Three areas await you:
|
||||
</p>
|
||||
<ul style="margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
<li style="margin-bottom:8px">The Songwriting Area: Céline will help you write original lyrics.</li>
|
||||
<li style="margin-bottom:8px">The Studio: Malik will turn it into beautiful music.</li>
|
||||
<li>The Video Studio: With Théo, you’ll direct your first music video.</li>
|
||||
</ul>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
And don’t worry, you don’t need to know how to sing, you don’t need any musical or technical skills, and you’ll be blown away by the result.
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
See you soon in the halls of MusicLand,
|
||||
</p>
|
||||
<p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
And… Feel the good vibe!
|
||||
</p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
<strong>The MusicLand Team</strong>
|
||||
</p>`
|
||||
: `
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Ça y est : tu as ton pass pour MusicLand. Bienvenue au pays de la chanson !
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Tu vas vivre une aventure extraordinaire!
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Tu vas écrire tes paroles, habiller ta mélodie, tourner ton clip… et déposer <strong>ta</strong> chanson sur la plateforme de streaming de MusicLand.
|
||||
</p>
|
||||
<p style="margin:0 0 10px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Trois espaces t'attendent:
|
||||
</p>
|
||||
<ul style="margin:0 0 16px;padding-left:22px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
<li style="margin-bottom:8px">L'espace Écriture: Céline va t’aider à composer un texte original.</li>
|
||||
<li style="margin-bottom:8px">Le studio: Malik va le sublimer en musique.</li>
|
||||
<li>Le studio vidéo: avec Théo tu réaliseras ton premier clip vidéo.</li>
|
||||
</ul>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Et rassure toi, tu n’as pas besoin de savoir chanter, tu n'as besoin d’aucune compétence musicale ou technique et tu vas être bluffé par le résultat.
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
À très vite dans les allées de MusicLand,
|
||||
</p>
|
||||
<p style="margin:0 0 24px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
And… Feel the good vibe!
|
||||
</p>
|
||||
<p style="margin:0;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
<strong>L'équipe MusicLand</strong>
|
||||
</p>`
|
||||
|
||||
return `<!doctype html><html lang="${language}" style="background-color:#0b0b10"><head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="color-scheme" content="dark" />
|
||||
<meta name="supported-color-schemes" content="dark" />
|
||||
@@ -86,16 +182,7 @@ function welcomeTemplate({ firstName = '', lastName = '' }) {
|
||||
/>
|
||||
</div>
|
||||
<p style="margin:0 0 12px;font-size:16px;letter-spacing:0.2px;color:#ffffff!important">${greeting}</p>
|
||||
<h1 style="margin:0 0 16px;font-size:28px;line-height:1.2;color:#ffffff!important">Bienvenue sur MusicLand</h1>
|
||||
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:#ffffff!important">
|
||||
Nous sommes ravis de t'accueillir dans la communauté des artistes et passionnés de MusicLand.
|
||||
</p>
|
||||
<p style="margin:0 0 16px;font-size:15px;line-height:1.6;color:#ffffff!important">
|
||||
Explore les playlists collaboratives, dépose tes projets et découvre ce que prépare la scène émergente.
|
||||
</p>
|
||||
<p style="margin:0;font-size:15px;line-height:1.6;color:#ffffff!important">
|
||||
L'équipe MusicLand
|
||||
</p>
|
||||
${content}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -107,4 +194,5 @@ function welcomeTemplate({ firstName = '', lastName = '' }) {
|
||||
}
|
||||
|
||||
exports.basicTemplate = basicTemplate
|
||||
exports.welcomeEmailSubject = welcomeEmailSubject
|
||||
exports.welcomeTemplate = welcomeTemplate
|
||||
|
||||
Reference in New Issue
Block a user