Commit 949cc62a authored by Andrei Mondoc's avatar Andrei Mondoc
Browse files

add PCP and Petition controls

parent 4eac6da2
import { __ } from '@wordpress/i18n'
import { InspectorControls } from '@wordpress/block-editor'
import { PanelBody } from '@wordpress/components'
import ServerSideRender from '@wordpress/server-side-render'
import ComponentControl from './components/ComponentControl'
......@@ -7,6 +8,8 @@ import HijackControl from './components/HijackControl'
import SelectProfileControl from './components/SelectProfileControl'
import SelectEventControl from './components/SelectEventControl'
import SelectContributionPageControl from './components/SelectContributionPageControl'
import SelectPCPControl from './components/SelectPCPControl'
import SelectPetitionControl from './components/SelectPetitionControl'
import ProfileModeControl from './components/ProfileModeControl'
import ModeControl from './components/ModeControl'
import ActionControl from './components/ActionControl'
......@@ -43,6 +46,15 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
)
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
case 'pcp':
selectControl = <SelectPCPControl {...{ id, setAttributes }} />
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
case 'petition':
selectControl = <SelectPetitionControl {...{ id, setAttributes }} />
break
}
let selectControl,
......@@ -55,14 +67,17 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
return (
<>
<InspectorControls key="inspector">
<ComponentControl {...{ component, setAttributes }} />
{selectControl}
{component == 'profile' ? profileModeControl : ''}
{component == 'event' ? actionControl : ''}
{['event', 'contribution'].includes(component)
? modeControl
: ''}
<HijackControl {...{ hijack, setAttributes }} />
<PanelBody>
<ComponentControl {...{ component, setAttributes }} />
{selectControl}
<span style={{ height: '10px', display: 'block' }}></span>
{component == 'profile' ? profileModeControl : ''}
{component == 'event' ? actionControl : ''}
{['event', 'contribution', 'pcp'].includes(component)
? modeControl
: ''}
<HijackControl {...{ hijack, setAttributes }} />
</PanelBody>
<ExtraAttributesListControl
{...{ extra_attributes, setAttributes }}
/>
......
......@@ -13,6 +13,11 @@ const ComponentControl = ({ component, setAttributes }) => {
value: 'contribution',
component: 'CiviContribute',
},
{
label: __('Personal Campaign Page', 'civicrm'),
value: 'pcp',
component: 'CiviContribute',
},
{
label: __('Event Page', 'civicrm'),
value: 'event',
......
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import Select, { components } from 'react-select'
const PCPOption = (props) => {
const { data } = props
console.log(data)
return (
<components.Option {...props}>
<span style={{ fontWeight: 'bold', display: 'block' }}>
{data.title}
</span>
<span style={{ fontSize: '12px', display: 'block' }}>
{__('Page status:', 'civicrm')}:{data['status_id.label']} |{' '}
{__('Page:', 'civicrm')}:{data.page_type}/{data.page_id} | id:
{data.id}
</span>
<span style={{ fontSize: '12px', display: 'block' }}>
{data.intro_text ? data.intro_text.slice(0, 40) : ''}...
</span>
</components.Option>
)
}
const SelectPCPControl = ({ id, setAttributes }) => {
const [pcps, setPCPs] = useState([])
const [pcp, setPCP] = useState({})
useEffect(() => {
CRM.api3('Pcp', 'get', {
sequential: 1,
return: [
'id',
'title',
'status_id.label',
'page_id',
'page_type',
'intro_text',
],
'options.limit': 0,
}).then((result) => {
if (!result?.count) return
const options = result.values.map((pcp) => ({
...pcp,
label: pcp.title,
value: pcp.id,
}))
setPCPs([...pcps, ...options])
})
}, [])
useEffect(() => {
setPCP(pcps.filter((page) => page.id == id)[0])
}, [pcps, id])
return (
<>
<Select
placeholder={__('Select a PCP', 'civicrm')}
value={pcp || 0}
onChange={(option) =>
setAttributes({ id: option.value.toString() })
}
options={pcps}
components={{ Option: PCPOption }}
/>
</>
)
}
export default SelectPCPControl
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import Select from 'react-select'
const SelectPCPControl = ({ id, setAttributes }) => {
const [petitions, setPetitions] = useState([])
const [petition, setPetition] = useState({})
useEffect(() => {
CRM.api3('Survey', 'get', {
sequential: 1,
return: ['id', 'title'],
'options.limit': 0,
}).then((result) => {
if (!result?.count) return
const options = result.values.map((petition) => ({
...petition,
label: petition.title,
value: petition.id,
}))
setPetitions([...petitions, ...options])
})
}, [])
useEffect(() => {
setPetition(petitions.filter((petition) => petition.id == id)[0])
}, [petitions, id])
return (
<>
<Select
placeholder={__('Select a Petition', 'civicrm')}
value={petition || 0}
onChange={(option) =>
setAttributes({ id: option.value.toString() })
}
options={petitions}
/>
</>
)
}
export default SelectPCPControl
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment