Josh Knapp
91a6b6f34b
Rebuilt the visual site builder from scratch using Craft.js, React 18, and TypeScript. The new editor renders directly in the DOM (no iframe), supports 40+ components, multi-page with shared header/footer, 16 templates, full-spectrum color/gradient controls, custom head code injection, save/publish workflow, and auto-save. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
452 lines
17 KiB
TypeScript
452 lines
17 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
|
|
interface PricingPlan {
|
|
name: string;
|
|
price: string;
|
|
period: string;
|
|
features: string[];
|
|
buttonText: string;
|
|
buttonHref: string;
|
|
isFeatured: boolean;
|
|
}
|
|
|
|
interface PricingTableProps {
|
|
plans?: PricingPlan[];
|
|
style?: CSSProperties;
|
|
featuredBg?: string;
|
|
bulletType?: string;
|
|
}
|
|
|
|
const bulletChars: Record<string, string> = {
|
|
check: '✓', dot: '●', arrow: '→', star: '★', dash: '—', none: '',
|
|
};
|
|
|
|
const defaultPlans: PricingPlan[] = [
|
|
{
|
|
name: 'Basic',
|
|
price: '$9',
|
|
period: '/month',
|
|
features: ['1 Website', '10 GB Storage', 'Free SSL Certificate', 'Email Support'],
|
|
buttonText: 'Get Started',
|
|
buttonHref: '#',
|
|
isFeatured: false,
|
|
},
|
|
{
|
|
name: 'Pro',
|
|
price: '$29',
|
|
period: '/month',
|
|
features: ['10 Websites', '100 GB Storage', 'Free SSL Certificate', 'Priority Support', 'Custom Domain', 'Analytics Dashboard'],
|
|
buttonText: 'Get Started',
|
|
buttonHref: '#',
|
|
isFeatured: true,
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
price: '$99',
|
|
period: '/month',
|
|
features: ['Unlimited Websites', '1 TB Storage', 'Free SSL Certificate', '24/7 Phone Support', 'Custom Domain', 'Advanced Analytics', 'API Access', 'Team Collaboration'],
|
|
buttonText: 'Contact Sales',
|
|
buttonHref: '#',
|
|
isFeatured: false,
|
|
},
|
|
];
|
|
|
|
export const PricingTable: UserComponent<PricingTableProps> = ({
|
|
plans = defaultPlans,
|
|
style = {},
|
|
featuredBg = '#3b82f6',
|
|
bulletType = 'check',
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
return (
|
|
<section
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
style={{
|
|
padding: '80px 20px',
|
|
backgroundColor: '#ffffff',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
...style,
|
|
}}
|
|
>
|
|
<div style={{
|
|
maxWidth: '1100px',
|
|
margin: '0 auto',
|
|
display: 'flex',
|
|
gap: '24px',
|
|
justifyContent: 'center',
|
|
alignItems: 'stretch',
|
|
flexWrap: 'wrap',
|
|
}}>
|
|
{plans.map((plan, i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
flex: '1 1 280px',
|
|
maxWidth: '360px',
|
|
backgroundColor: plan.isFeatured ? featuredBg : '#ffffff',
|
|
border: plan.isFeatured ? 'none' : '1px solid #e2e8f0',
|
|
borderRadius: '16px',
|
|
padding: '40px 32px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
position: 'relative',
|
|
transform: plan.isFeatured ? 'scale(1.05)' : 'none',
|
|
boxShadow: plan.isFeatured ? '0 20px 60px rgba(59,130,246,0.3)' : '0 1px 3px rgba(0,0,0,0.06)',
|
|
}}
|
|
>
|
|
{plan.isFeatured && (
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: '-12px',
|
|
backgroundColor: '#facc15',
|
|
color: '#18181b',
|
|
padding: '4px 16px',
|
|
borderRadius: '9999px',
|
|
fontSize: '12px',
|
|
fontWeight: '700',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.5px',
|
|
}}>
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
<h3 style={{
|
|
fontSize: '20px',
|
|
fontWeight: '600',
|
|
color: plan.isFeatured ? '#ffffff' : '#18181b',
|
|
marginBottom: '8px',
|
|
marginTop: plan.isFeatured ? '8px' : '0',
|
|
}}>
|
|
{plan.name}
|
|
</h3>
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<span style={{
|
|
fontSize: '48px',
|
|
fontWeight: '700',
|
|
color: plan.isFeatured ? '#ffffff' : '#18181b',
|
|
lineHeight: '1',
|
|
}}>
|
|
{plan.price}
|
|
</span>
|
|
<span style={{
|
|
fontSize: '16px',
|
|
color: plan.isFeatured ? 'rgba(255,255,255,0.8)' : '#64748b',
|
|
}}>
|
|
{plan.period}
|
|
</span>
|
|
</div>
|
|
<ul style={{
|
|
listStyle: 'none',
|
|
padding: '0',
|
|
margin: '0 0 32px 0',
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '12px',
|
|
}}>
|
|
{(Array.isArray(plan.features) ? plan.features : []).map((feature, fi) => (
|
|
<li key={fi} style={{
|
|
fontSize: '14px',
|
|
color: plan.isFeatured ? 'rgba(255,255,255,0.9)' : '#4b5563',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
}}>
|
|
<span style={{ color: plan.isFeatured ? '#bbf7d0' : '#10b981', fontWeight: '700' }}>{bulletChars[bulletType] || '✓'}</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<a
|
|
href={plan.buttonHref}
|
|
onClick={(e) => e.preventDefault()}
|
|
style={{
|
|
marginTop: 'auto',
|
|
display: 'inline-block',
|
|
padding: '14px 32px',
|
|
backgroundColor: plan.isFeatured ? '#ffffff' : featuredBg,
|
|
color: plan.isFeatured ? featuredBg : '#ffffff',
|
|
textDecoration: 'none',
|
|
borderRadius: '8px',
|
|
fontWeight: '600',
|
|
fontSize: '14px',
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{plan.buttonText}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
/* ---------- Settings panel ---------- */
|
|
|
|
const PricingTableSettings: React.FC = () => {
|
|
const { actions: { setProp }, props } = useNode((node) => ({
|
|
props: node.data.props as PricingTableProps,
|
|
}));
|
|
|
|
const plans = props.plans || defaultPlans;
|
|
|
|
const inputStyle: CSSProperties = {
|
|
width: '100%', padding: '3px 6px', background: '#27272a', color: '#e4e4e7',
|
|
border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
|
|
};
|
|
|
|
const labelStyle: CSSProperties = { fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 };
|
|
|
|
const updatePlan = (index: number, field: keyof PricingPlan, value: any) => {
|
|
setProp((p: PricingTableProps) => {
|
|
const updated = [...(p.plans || defaultPlans)];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
p.plans = updated;
|
|
});
|
|
};
|
|
|
|
const updateFeature = (planIndex: number, featureIndex: number, value: string) => {
|
|
setProp((p: PricingTableProps) => {
|
|
const updated = [...(p.plans || defaultPlans)];
|
|
const features = [...(Array.isArray(updated[planIndex].features) ? updated[planIndex].features : [])];
|
|
features[featureIndex] = value;
|
|
updated[planIndex] = { ...updated[planIndex], features };
|
|
p.plans = updated;
|
|
});
|
|
};
|
|
|
|
const addFeature = (planIndex: number) => {
|
|
setProp((p: PricingTableProps) => {
|
|
const updated = [...(p.plans || defaultPlans)];
|
|
updated[planIndex] = { ...updated[planIndex], features: [...updated[planIndex].features, 'New Feature'] };
|
|
p.plans = updated;
|
|
});
|
|
};
|
|
|
|
const removeFeature = (planIndex: number, featureIndex: number) => {
|
|
setProp((p: PricingTableProps) => {
|
|
const updated = [...(p.plans || defaultPlans)];
|
|
const features = [...(Array.isArray(updated[planIndex].features) ? updated[planIndex].features : [])];
|
|
features.splice(featureIndex, 1);
|
|
updated[planIndex] = { ...updated[planIndex], features };
|
|
p.plans = updated;
|
|
});
|
|
};
|
|
|
|
const addPlan = () => {
|
|
setProp((p: PricingTableProps) => {
|
|
p.plans = [...(p.plans || defaultPlans), {
|
|
name: 'New Plan',
|
|
price: '$19',
|
|
period: '/month',
|
|
features: ['Feature 1', 'Feature 2'],
|
|
buttonText: 'Get Started',
|
|
buttonHref: '#',
|
|
isFeatured: false,
|
|
}];
|
|
});
|
|
};
|
|
|
|
const removePlan = (index: number) => {
|
|
setProp((p: PricingTableProps) => {
|
|
const updated = [...(p.plans || defaultPlans)];
|
|
updated.splice(index, 1);
|
|
p.plans = updated;
|
|
});
|
|
};
|
|
|
|
const bgPresets = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#18181b', '#0f172a', '#7c3aed'];
|
|
|
|
return (
|
|
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
|
<div>
|
|
<label style={labelStyle}>Background</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{['#ffffff', '#f8fafc', '#f1f5f9', '#18181b', '#0f172a'].map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: PricingTableProps) => { p.style = { ...p.style, backgroundColor: c }; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: props.style?.backgroundColor === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={labelStyle}>Featured Plan Color</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{bgPresets.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: PricingTableProps) => { p.featuredBg = c; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: props.featuredBg === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={labelStyle}>Plans</label>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
{plans.map((plan, i) => (
|
|
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<input type="text" value={plan.name} onChange={(e) => updatePlan(i, 'name', e.target.value)} placeholder="Plan Name" style={{ ...inputStyle, flex: 1 }} />
|
|
<button
|
|
onClick={() => removePlan(i)}
|
|
style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<input type="text" value={plan.price} onChange={(e) => updatePlan(i, 'price', e.target.value)} placeholder="$29" style={{ ...inputStyle, width: '60px', flex: 'none' }} />
|
|
<input type="text" value={plan.period} onChange={(e) => updatePlan(i, 'period', e.target.value)} placeholder="/month" style={{ ...inputStyle, width: '70px', flex: 'none' }} />
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#a1a1aa', marginLeft: 'auto' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={plan.isFeatured}
|
|
onChange={(e) => updatePlan(i, 'isFeatured', e.target.checked)}
|
|
/>
|
|
Featured
|
|
</label>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<input type="text" value={plan.buttonText} onChange={(e) => updatePlan(i, 'buttonText', e.target.value)} placeholder="Button Text" style={{ ...inputStyle, flex: 1 }} />
|
|
<input type="text" value={plan.buttonHref} onChange={(e) => updatePlan(i, 'buttonHref', e.target.value)} placeholder="URL" style={{ ...inputStyle, flex: 1 }} />
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<div style={{ marginTop: 4 }}>
|
|
<span style={{ fontSize: 10, color: '#71717a' }}>Features:</span>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 2 }}>
|
|
{(Array.isArray(plan.features) ? plan.features : []).map((feat, fi) => (
|
|
<div key={fi} style={{ display: 'flex', gap: 2 }}>
|
|
<input type="text" value={feat} onChange={(e) => updateFeature(i, fi, e.target.value)} style={{ ...inputStyle, flex: 1 }} />
|
|
<button
|
|
onClick={() => removeFeature(i, fi)}
|
|
style={{ padding: '1px 4px', fontSize: 10, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 3, cursor: 'pointer' }}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={() => addFeature(i)}
|
|
style={{ marginTop: 2, width: '100%', padding: '3px', fontSize: 10, background: '#27272a', color: '#a1a1aa', border: '1px solid #3f3f46', borderRadius: 3, cursor: 'pointer' }}
|
|
>
|
|
+ Feature
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={addPlan}
|
|
style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
+ Add Plan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
PricingTable.craft = {
|
|
displayName: 'Pricing Table',
|
|
props: {
|
|
plans: defaultPlans,
|
|
style: { backgroundColor: '#ffffff' },
|
|
featuredBg: '#3b82f6',
|
|
bulletType: 'check',
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
related: {
|
|
settings: PricingTableSettings,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(PricingTable as any).toHtml = (props: PricingTableProps, _childrenHtml: string) => {
|
|
const esc = (s: string) => s.replace(/</g, '<').replace(/>/g, '>');
|
|
const bulletType = props.bulletType || 'check';
|
|
const sectionStyle = cssPropsToString({
|
|
padding: '80px 20px',
|
|
...props.style,
|
|
});
|
|
const plans = props.plans || defaultPlans;
|
|
const featuredBg = props.featuredBg || '#3b82f6';
|
|
|
|
const cards = plans.map((plan) => {
|
|
const cardBg = plan.isFeatured ? featuredBg : '#ffffff';
|
|
const cardBorder = plan.isFeatured ? 'border:none;' : 'border:1px solid #e2e8f0;';
|
|
const textColor = plan.isFeatured ? '#ffffff' : '#18181b';
|
|
const subColor = plan.isFeatured ? 'rgba(255,255,255,0.8)' : '#64748b';
|
|
const featColor = plan.isFeatured ? 'rgba(255,255,255,0.9)' : '#4b5563';
|
|
const checkColor = plan.isFeatured ? '#bbf7d0' : '#10b981';
|
|
const btnBg = plan.isFeatured ? '#ffffff' : featuredBg;
|
|
const btnColor = plan.isFeatured ? featuredBg : '#ffffff';
|
|
const scale = plan.isFeatured ? 'transform:scale(1.05);' : '';
|
|
const shadow = plan.isFeatured ? 'box-shadow:0 20px 60px rgba(59,130,246,0.3);' : 'box-shadow:0 1px 3px rgba(0,0,0,0.06);';
|
|
|
|
const featuresHtml = (Array.isArray(plan.features) ? plan.features : []).map((f) =>
|
|
`<li style="font-size:14px;color:${featColor};display:flex;align-items:center;gap:8px"><span style="color:${checkColor};font-weight:700">${bulletChars[bulletType] || '✓'}</span>${esc(f)}</li>`
|
|
).join('\n ');
|
|
|
|
const badge = plan.isFeatured
|
|
? `<div style="position:absolute;top:-12px;background-color:#facc15;color:#18181b;padding:4px 16px;border-radius:9999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px">Most Popular</div>`
|
|
: '';
|
|
|
|
return `<div style="flex:1 1 280px;max-width:360px;background-color:${cardBg};${cardBorder}border-radius:16px;padding:40px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;${scale}${shadow}">
|
|
${badge}
|
|
<h3 style="font-size:20px;font-weight:600;color:${textColor};margin-bottom:8px;${plan.isFeatured ? 'margin-top:8px;' : ''}">${esc(plan.name)}</h3>
|
|
<div style="margin-bottom:24px">
|
|
<span style="font-size:48px;font-weight:700;color:${textColor};line-height:1">${esc(plan.price)}</span>
|
|
<span style="font-size:16px;color:${subColor}">${esc(plan.period)}</span>
|
|
</div>
|
|
<ul style="list-style:none;padding:0;margin:0 0 32px 0;width:100%;display:flex;flex-direction:column;gap:12px">
|
|
${featuresHtml}
|
|
</ul>
|
|
<a href="${plan.buttonHref || '#'}" style="margin-top:auto;display:inline-block;padding:14px 32px;background-color:${btnBg};color:${btnColor};text-decoration:none;border-radius:8px;font-weight:600;font-size:14px;width:100%;text-align:center">${esc(plan.buttonText)}</a>
|
|
</div>`;
|
|
}).join('\n ');
|
|
|
|
return {
|
|
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
|
|
<div style="max-width:1100px;margin:0 auto;display:flex;gap:24px;justify-content:center;align-items:stretch;flex-wrap:wrap">
|
|
${cards}
|
|
</div>
|
|
</section>`,
|
|
};
|
|
};
|