| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import Column from './Column'; |
| 3 |
|
| 4 |
/** |
| 5 |
* Campaign canvas — renders the page-level column layout. |
| 6 |
* Empty state shows a "+" icon prompting the user to drag elements in. |
| 7 |
* @dnd-kit DndContext is wired in App.js (parent). |
| 8 |
*/ |
| 9 |
export default function Canvas( { layout, meta, campaignId, selectedElementId, dispatch, activeDragSource, dropTargetElementId } ) { |
| 10 |
const columns = layout?.columns || []; |
| 11 |
|
| 12 |
if ( columns.length === 0 ) { |
| 13 |
return ( |
| 14 |
<div className="bp-cb-canvas bp-cb-canvas--empty"> |
| 15 |
<div className="bp-cb-canvas-placeholder"> |
| 16 |
<button |
| 17 |
className="bp-cb-canvas-placeholder__add" |
| 18 |
title={ __( 'Choose a template to start', 'better-payment' ) } |
| 19 |
onClick={ () => dispatch( { type: 'OPEN_TEMPLATE_MODAL' } ) } |
| 20 |
> |
| 21 |
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"> |
| 22 |
<circle cx="16" cy="16" r="15" stroke="#bbb" strokeWidth="1.5"/> |
| 23 |
<path d="M16 10v12M10 16h12" stroke="#bbb" strokeWidth="2" strokeLinecap="round"/> |
| 24 |
</svg> |
| 25 |
</button> |
| 26 |
<p>{ __( 'Drag elements from the right panel, or choose a template.', 'better-payment' ) }</p> |
| 27 |
</div> |
| 28 |
</div> |
| 29 |
); |
| 30 |
} |
| 31 |
|
| 32 |
const layoutClass = `bp-cb-canvas bp-cb-canvas--${ layout.layout || '1-column' }`; |
| 33 |
|
| 34 |
return ( |
| 35 |
<div className={ layoutClass } onClick={ () => dispatch( { type: 'DESELECT_ELEMENT' } ) }> |
| 36 |
<div className="bp-canvas-columns-wrap"> |
| 37 |
{ columns.map( ( column ) => ( |
| 38 |
<Column |
| 39 |
key={ column.id } |
| 40 |
column={ column } |
| 41 |
meta={ meta } |
| 42 |
campaignId={ campaignId } |
| 43 |
selectedElementId={ selectedElementId } |
| 44 |
dispatch={ dispatch } |
| 45 |
isActiveDropTarget={ activeDragSource === 'panel' } |
| 46 |
dropTargetElementId={ dropTargetElementId } |
| 47 |
/> |
| 48 |
) ) } |
| 49 |
</div> |
| 50 |
</div> |
| 51 |
); |
| 52 |
} |
| 53 |
|
