89fa8f81af
Replaced the blank base64 encoded logo with the actual SmoothSchedule logo in the email rendering pipeline. A Playwright E2E test was run to verify that the logo is correctly displayed in the email preview modal, ensuring it loads with natural dimensions and is visible.
86 lines
1.8 KiB
TypeScript
86 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import type { ComponentConfig } from '@measured/puck';
|
|
import type { EmailHeaderProps } from './types';
|
|
|
|
/**
|
|
* EmailHeader - Business logo and name header
|
|
*
|
|
* Displays the business branding at the top of the email.
|
|
* Supports optional logo image and preheader text.
|
|
*/
|
|
const EmailHeaderRender: React.FC<EmailHeaderProps> = ({ logoUrl, businessName, preheader }) => {
|
|
console.log('[RENDER] EmailHeaderRender called with:', { logoUrl, businessName, preheader });
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: '32px 40px',
|
|
textAlign: 'center',
|
|
backgroundColor: '#f8fafc',
|
|
}}
|
|
>
|
|
{/* Hidden preheader text for email clients */}
|
|
{preheader && (
|
|
<div
|
|
style={{
|
|
display: 'none',
|
|
maxHeight: 0,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{preheader}
|
|
</div>
|
|
)}
|
|
|
|
{logoUrl && (
|
|
<img
|
|
src={logoUrl}
|
|
alt={businessName}
|
|
style={{
|
|
maxHeight: '60px',
|
|
maxWidth: '200px',
|
|
marginBottom: '16px',
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{businessName && (
|
|
<div
|
|
style={{
|
|
fontSize: '20px',
|
|
fontWeight: 600,
|
|
color: '#111827',
|
|
}}
|
|
>
|
|
{businessName}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const EmailHeader: ComponentConfig<EmailHeaderProps> = {
|
|
label: 'Email Header',
|
|
fields: {
|
|
logoUrl: {
|
|
type: 'text',
|
|
label: 'Logo URL',
|
|
},
|
|
businessName: {
|
|
type: 'text',
|
|
label: 'Business Name',
|
|
},
|
|
preheader: {
|
|
type: 'text',
|
|
label: 'Preheader Text',
|
|
},
|
|
},
|
|
defaultProps: {
|
|
logoUrl: '',
|
|
businessName: '{{ tenant_name }}',
|
|
preheader: '',
|
|
},
|
|
render: EmailHeaderRender,
|
|
};
|
|
|
|
export default EmailHeader;
|