| 1 |
/** |
| 2 |
* Edit component for User Dashboard block. |
| 3 |
* |
| 4 |
* @package Better_Payment |
| 5 |
*/ |
| 6 |
|
| 7 |
import { __ } from '@wordpress/i18n'; |
| 8 |
import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; |
| 9 |
import { memo, useEffect } from '@wordpress/element'; |
| 10 |
import { withBlockContext, BlockProps } from '@better-payment/controls'; |
| 11 |
import classnames from 'classnames'; |
| 12 |
|
| 13 |
// Import components |
| 14 |
import Inspector from './inspector'; |
| 15 |
import DashboardPreview from './preview'; |
| 16 |
import Style from './style'; |
| 17 |
import defaultAttributes from './attributes'; |
| 18 |
|
| 19 |
/** |
| 20 |
* Edit component - displayed in the block editor. |
| 21 |
* |
| 22 |
* @param {Object} props Block properties |
| 23 |
* @param {Object} props.attributes Block attributes |
| 24 |
* @param {Function} props.setAttributes Function to update attributes |
| 25 |
* @param {string} props.clientId Block client ID |
| 26 |
* @param {boolean} props.isSelected Whether block is selected |
| 27 |
* @returns {JSX.Element} Edit component |
| 28 |
*/ |
| 29 |
function Edit(props) { |
| 30 |
const { attributes, setAttributes, clientId, isSelected } = props; |
| 31 |
const { blockId, dashboardLayout } = attributes; |
| 32 |
|
| 33 |
// Set blockId from clientId on first insert |
| 34 |
useEffect(() => { |
| 35 |
if (!blockId) { |
| 36 |
setAttributes({ blockId: clientId }); |
| 37 |
} |
| 38 |
}, []); |
| 39 |
|
| 40 |
// Build block props with custom classes |
| 41 |
const blockProps = useBlockProps({ |
| 42 |
className: classnames( |
| 43 |
'better-payment-user-dashboard', |
| 44 |
blockId && `bp-${blockId}`, |
| 45 |
`bp-dashboard-${dashboardLayout}` |
| 46 |
), |
| 47 |
}); |
| 48 |
|
| 49 |
// Wire Style component into BlockProps.Edit via enhancedProps |
| 50 |
const enhancedProps = { |
| 51 |
...props, |
| 52 |
style: <Style {...props} />, |
| 53 |
}; |
| 54 |
|
| 55 |
return ( |
| 56 |
<> |
| 57 |
{isSelected && ( |
| 58 |
<InspectorControls> |
| 59 |
<Inspector attributes={attributes} setAttributes={setAttributes} /> |
| 60 |
</InspectorControls> |
| 61 |
)} |
| 62 |
<BlockProps.Edit {...enhancedProps}> |
| 63 |
<div {...blockProps}> |
| 64 |
<DashboardPreview attributes={attributes} /> |
| 65 |
</div> |
| 66 |
</BlockProps.Edit> |
| 67 |
</> |
| 68 |
); |
| 69 |
} |
| 70 |
|
| 71 |
export default memo(withBlockContext(defaultAttributes)(Edit)); |
| 72 |
|
