919ebfe755
Première moitié de la feature marque blanche : la machinerie complète qui permet à un compte Business d'envoyer ses emails de relance avec son propre logo, ses propres couleurs et son nom comme expéditeur, à la place du branding Rubis. Architecture : - Nouvelle colonne JSONB `organizations.brand_settings` (12 tokens customisables : logo, senderName, et 10 couleurs — primary, banner, body bg, card bg, text, text muted, border, link, button text). Null = palette Rubis intacte. Validation hex stricte (#RRGGBB). - Service `#services/brand` avec `resolveBrandTokens(org)` qui merge defaults + overrides en respectant le plan (couleurs/logo = Business only ; senderName = cascade pour tous les plans). Mergeurs avec sémantique "null = reset au default sur ce champ précis" pour les patches partiels. - Service mutualisé `#services/media_storage` qui remplace l'ancien `blog_uploads.ts`. Scopes `blog` (4 MB, jpg/png/webp) et `brand-logo` (1 MB, + svg accepté). Cleanup automatique du logo précédent lors d'un remplacement (pas de versioning — la conv produit est "on écrase"). - Controller `BrandController` (5 endpoints) + middleware `AssertBusinessPlanMiddleware` qui throw 403 `business_plan_required` (code matché par le SPA pour l'upsell card). - Refactor des 3 templates mail (relance, payment thanks, checkin) + layout commun pour accepter `tokens: BrandTokens` en prop. Le dispatcher résout les tokens per-org pour relance + remerciement (= user → client, branded), et passe `DEFAULT_BRAND` au checkin (= Rubis → user, toujours Rubis-branded). - Routes publiques pour le logo : `/api/v1/uploads/brand-logos/:filename` (sans auth, cache immutable, X-Content-Type-Options: nosniff pour les SVG). UI self-service arrive dans la prochaine version (v1.12.0). En attendant, un compte Business peut être configuré via Bruno / API directe. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
220 lines
6.7 KiB
TypeScript
220 lines
6.7 KiB
TypeScript
/**
|
|
* Squelette commun à tous les templates Rubis : bandeau header avec
|
|
* logo/brand + container + footer "Émis via Rubis sur l'ongle" (masqué
|
|
* pour les orgs sur plan Business avec marque blanche activée).
|
|
*
|
|
* Tokens visuels passés en prop `tokens` (cf. `#services/brand`). Tous les
|
|
* styles sont déclarés à l'intérieur de la fonction pour fermer sur la
|
|
* valeur runtime des tokens — un même `<EmailLayout/>` rend en couleurs
|
|
* Rubis ou en couleurs Business selon ce qu'on lui passe.
|
|
*
|
|
* Approche : styles inline (les `style` props que React Email convertit en
|
|
* HTML inline). Compatible Gmail, Outlook, Apple Mail. Pas de Tailwind ici.
|
|
*
|
|
* Dark mode : forcé en light only (Outlook.com et Gmail mobile auto-
|
|
* invertissent agressivement, ce qui casse les fonds rubis-deep). Les
|
|
* sélecteurs `[data-ogsc]` ré-imposent nos couleurs pour ces clients.
|
|
*/
|
|
|
|
import * as React from 'react'
|
|
import {
|
|
Html,
|
|
Head,
|
|
Preview,
|
|
Body,
|
|
Container,
|
|
Section,
|
|
Row,
|
|
Column,
|
|
Text,
|
|
Link,
|
|
Img,
|
|
} from '@react-email/components'
|
|
|
|
import type { BrandTokens } from '#services/brand'
|
|
import { sp } from './_brand.js'
|
|
|
|
type LayoutProps = {
|
|
/** Tokens résolus pour l'org (cf. resolveBrandTokens). */
|
|
tokens: BrandTokens
|
|
/** Aperçu dans la liste mail (Gmail preview text). */
|
|
preview: string
|
|
/** Sous-titre header (ex: numéro de facture, date). Optionnel. */
|
|
brandSubtitle?: string | null
|
|
/** URL de la landing publique — footer "Rubis sur l'ongle". null = masque le footer (marque blanche). */
|
|
landingUrl?: string | null
|
|
/** Masque le footer Rubis (pour plan Business qui ne veut pas du tout du wordmark). Default false. */
|
|
hideRubisFooter?: boolean
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export function EmailLayout({
|
|
tokens,
|
|
preview,
|
|
brandSubtitle,
|
|
landingUrl,
|
|
hideRubisFooter = false,
|
|
children,
|
|
}: LayoutProps) {
|
|
const bodyStyle: React.CSSProperties = {
|
|
backgroundColor: tokens.bodyBg,
|
|
fontFamily: tokens.fontBody,
|
|
margin: 0,
|
|
padding: 0,
|
|
color: tokens.text,
|
|
}
|
|
|
|
const containerStyle: React.CSSProperties = {
|
|
backgroundColor: tokens.cardBg,
|
|
margin: '0 auto',
|
|
maxWidth: '560px',
|
|
overflow: 'hidden',
|
|
}
|
|
|
|
const headerStyle: React.CSSProperties = {
|
|
backgroundColor: tokens.banner,
|
|
padding: `${sp.xl} ${sp.xl}`,
|
|
}
|
|
|
|
const headerBrandStyle: React.CSSProperties = {
|
|
color: tokens.white,
|
|
fontSize: '20px',
|
|
fontWeight: 800,
|
|
letterSpacing: '-0.01em',
|
|
margin: 0,
|
|
lineHeight: '1.1',
|
|
}
|
|
|
|
const gemStyle: React.CSSProperties = {
|
|
display: 'inline-block',
|
|
marginRight: sp.sm,
|
|
color: tokens.primaryGlow,
|
|
fontSize: '18px',
|
|
verticalAlign: '-1px',
|
|
}
|
|
|
|
const headerSubtitleStyle: React.CSSProperties = {
|
|
color: tokens.primaryGlow,
|
|
fontSize: '12px',
|
|
margin: `${sp.xs} 0 0 0`,
|
|
letterSpacing: '0.04em',
|
|
textTransform: 'uppercase',
|
|
fontWeight: 600,
|
|
}
|
|
|
|
const contentStyle: React.CSSProperties = {
|
|
padding: `${sp.xl} ${sp.xl}`,
|
|
}
|
|
|
|
const footerStyle: React.CSSProperties = {
|
|
borderTop: `1px solid ${tokens.border}`,
|
|
backgroundColor: tokens.bodyBg,
|
|
padding: `${sp.lg} ${sp.xl}`,
|
|
}
|
|
|
|
const footerTextStyle: React.CSSProperties = {
|
|
color: tokens.textVeryMuted,
|
|
fontSize: '11px',
|
|
lineHeight: '1.5',
|
|
margin: 0,
|
|
textAlign: 'center',
|
|
}
|
|
|
|
const footerLinkStyle: React.CSSProperties = {
|
|
color: tokens.primary,
|
|
fontWeight: 600,
|
|
textDecoration: 'none',
|
|
}
|
|
|
|
return (
|
|
<Html lang="fr">
|
|
<Head>
|
|
{/* Force light mode sur les clients qui auto-invertissent. */}
|
|
<meta name="color-scheme" content="light only" />
|
|
<meta name="supported-color-schemes" content="light only" />
|
|
<style
|
|
// eslint-disable-next-line react/no-danger -- nécessaire dans <style>
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
:root {
|
|
color-scheme: light only;
|
|
supported-color-schemes: light only;
|
|
}
|
|
/* Outlook.com / Hotmail dark mode — force nos couleurs */
|
|
[data-ogsc] body,
|
|
[data-ogsb] body {
|
|
background-color: ${tokens.bodyBg} !important;
|
|
}
|
|
[data-ogsc] .rubis-container,
|
|
[data-ogsb] .rubis-container {
|
|
background-color: ${tokens.cardBg} !important;
|
|
}
|
|
[data-ogsc] .rubis-header,
|
|
[data-ogsb] .rubis-header {
|
|
background-color: ${tokens.banner} !important;
|
|
}
|
|
[data-ogsc] .rubis-footer,
|
|
[data-ogsb] .rubis-footer {
|
|
background-color: ${tokens.bodyBg} !important;
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
</Head>
|
|
<Preview>{preview}</Preview>
|
|
<Body style={bodyStyle} className="rubis-body">
|
|
<Container style={containerStyle} className="rubis-container">
|
|
{/* Bandeau header — logo image si configuré, sinon wordmark texte. */}
|
|
<Section style={headerStyle} className="rubis-header">
|
|
<Row>
|
|
<Column style={{ verticalAlign: 'middle' }}>
|
|
{tokens.logoUrl ? (
|
|
<Img
|
|
src={tokens.logoUrl}
|
|
alt={tokens.senderName}
|
|
height="32"
|
|
style={{ display: 'block', maxHeight: '32px', width: 'auto' }}
|
|
/>
|
|
) : (
|
|
<Text style={headerBrandStyle}>
|
|
<span style={gemStyle}>◆</span>
|
|
{tokens.senderName}
|
|
</Text>
|
|
)}
|
|
{brandSubtitle ? (
|
|
<Text style={headerSubtitleStyle}>{brandSubtitle}</Text>
|
|
) : null}
|
|
</Column>
|
|
</Row>
|
|
</Section>
|
|
|
|
{/* Corps de l'email */}
|
|
<Section style={contentStyle}>{children}</Section>
|
|
|
|
{/* Footer Rubis — masqué en marque blanche complète. */}
|
|
{!hideRubisFooter && (
|
|
<Section style={footerStyle} className="rubis-footer">
|
|
<Text style={footerTextStyle}>
|
|
Émis via{' '}
|
|
{landingUrl ? (
|
|
<Link href={landingUrl} style={footerLinkStyle}>
|
|
Rubis sur l'ongle
|
|
</Link>
|
|
) : (
|
|
<strong style={{ color: tokens.textMuted }}>
|
|
Rubis sur l'ongle
|
|
</strong>
|
|
)}
|
|
{' — '}
|
|
<span style={{ color: tokens.textVeryMuted }}>
|
|
vos factures relancées toutes seules pendant que vous travaillez.
|
|
</span>
|
|
</Text>
|
|
</Section>
|
|
)}
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
)
|
|
}
|