site-builder/craft/src/components/forms/SubscribeForm.tsx

import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml, escapeAttr } from '../../utils/escape';

interface SubscribeFormProps {
  heading?: string;
  placeholder?: string;
  buttonText?: string;
  buttonColor?: string;
  layout?: 'inline' | 'stacked';
  style?: CSSProperties;
}

export const SubscribeForm: UserComponent<SubscribeFormProps> = ({
  heading = 'Subscribe to our newsletter',
  placeholder = 'Enter your email',
  buttonText = 'Subscribe',
  buttonColor = '#3b82f6',
  layout = 'inline',
  style = {},
}) => {
  const {
    connectors: { connect, drag },
    selected,
  } = useNode((node) => ({
    selected: node.events.selected,
  }));

  const isInline = layout === 'inline';

  return (
    <div
      ref={(ref: HTMLDivElement | null): void => { if (ref) connect(drag(ref)); }}
      style={{
        padding: '40px 24px',
        textAlign: 'center',
        outline: selected ? '2px solid #3b82f6' : 'none',
        ...style,
      }}
    >
      {heading && (
        <h3 style={{
          fontSize: '22px',
          fontWeight: '600',
          color: '#1f2937',
          marginBottom: '20px',
          fontFamily: 'Inter, sans-serif',
        }}>
          {heading}
        </h3>
      )}
      <form
        onSubmit={(e) => e.preventDefault()}
        style={{
          display: 'flex',
          flexDirection: isInline ? 'row' : 'column',
          gap: isInline ? '0' : '12px',
          maxWidth: isInline ? '480px' : '360px',
          margin: '0 auto',
          alignItems: 'stretch',
        }}
      >
        <input
          type="email"
          placeholder={placeholder}
          style={{
            flex: 1,
            padding: '12px 16px',
            fontSize: '15px',
            fontFamily: 'Inter, sans-serif',
            border: '1px solid #d1d5db',
            borderRadius: isInline ? '8px 0 0 8px' : '8px',
            backgroundColor: '#ffffff',
            color: '#1f2937',
            outline: 'none',
            boxSizing: 'border-box',
          }}
        />
        <button
          type="submit"
          style={{
            padding: '12px 24px',
            fontSize: '15px',
            fontWeight: '600',
            fontFamily: 'Inter, sans-serif',
            color: '#ffffff',
            backgroundColor: buttonColor,
            border: 'none',
            borderRadius: isInline ? '0 8px 8px 0' : '8px',
            cursor: 'pointer',
            whiteSpace: 'nowrap',
          }}
        >
          {buttonText}
        </button>
      </form>
    </div>
  );
};

/* ---------- Craft config ---------- */

SubscribeForm.craft = {
  displayName: 'Subscribe Form',
  props: {
    heading: 'Subscribe to our newsletter',
    placeholder: 'Enter your email',
    buttonText: 'Subscribe',
    buttonColor: '#3b82f6',
    layout: 'inline',
    style: { backgroundColor: '#f8fafc' },
  },
  rules: {
    canDrag: () => true,
    canMoveIn: () => false,
    canMoveOut: () => true,
  },
};

/* ---------- HTML export ---------- */

(SubscribeForm as any).toHtml = (props: SubscribeFormProps, _childrenHtml: string) => {
  const {
    heading = 'Subscribe to our newsletter',
    placeholder = 'Enter your email',
    buttonText = 'Subscribe',
    buttonColor = '#3b82f6',
    layout = 'inline',
    style = {},
  } = props;

  const isInline = layout === 'inline';

  const wrapperStyle = cssPropsToString({
    padding: '40px 24px',
    textAlign: 'center',
    ...style,
  });

  const headingHtml = heading
    ? `<h3 style="font-size:22px;font-weight:600;color:#1f2937;margin-bottom:20px;font-family:Inter,sans-serif">${escapeHtml(heading)}</h3>`
    : '';

  const formStyle = cssPropsToString({
    display: 'flex',
    flexDirection: isInline ? 'row' : 'column',
    gap: isInline ? '0' : '12px',
    maxWidth: isInline ? '480px' : '360px',
    margin: '0 auto',
    alignItems: 'stretch',
  });

  const inputStyleStr = `flex:1;padding:12px 16px;font-size:15px;font-family:Inter,sans-serif;border:1px solid #d1d5db;border-radius:${isInline ? '8px 0 0 8px' : '8px'};background-color:#ffffff;color:#1f2937;outline:none;box-sizing:border-box`;

  const btnStyle = cssPropsToString({
    padding: '12px 24px',
    fontSize: '15px',
    fontWeight: '600',
    fontFamily: 'Inter, sans-serif',
    color: '#ffffff',
    backgroundColor: buttonColor,
    border: 'none',
    borderRadius: isInline ? '0 8px 8px 0' : '8px',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
  });

  return {
    html: `<div${wrapperStyle ? ` style="${wrapperStyle}"` : ''}>
  ${headingHtml}
  <form method="POST"${formStyle ? ` style="${formStyle}"` : ''}>
    <input type="email" name="email" placeholder="${escapeAttr(placeholder)}" required style="${inputStyleStr}" />
    <button type="submit"${btnStyle ? ` style="${btnStyle}"` : ''}>${escapeHtml(buttonText)}</button>
  </form>
</div>`,
  };
};