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

add PCP and Petition controls

parent 4eac6da2
import { __ } from '@wordpress/i18n' import { __ } from '@wordpress/i18n'
import { InspectorControls } from '@wordpress/block-editor' import { InspectorControls } from '@wordpress/block-editor'
import { PanelBody } from '@wordpress/components'
import ServerSideRender from '@wordpress/server-side-render' import ServerSideRender from '@wordpress/server-side-render'
import ComponentControl from './components/ComponentControl' import ComponentControl from './components/ComponentControl'
...@@ -7,6 +8,8 @@ import HijackControl from './components/HijackControl' ...@@ -7,6 +8,8 @@ import HijackControl from './components/HijackControl'
import SelectProfileControl from './components/SelectProfileControl' import SelectProfileControl from './components/SelectProfileControl'
import SelectEventControl from './components/SelectEventControl' import SelectEventControl from './components/SelectEventControl'
import SelectContributionPageControl from './components/SelectContributionPageControl' import SelectContributionPageControl from './components/SelectContributionPageControl'
import SelectPCPControl from './components/SelectPCPControl'
import SelectPetitionControl from './components/SelectPetitionControl'
import ProfileModeControl from './components/ProfileModeControl' import ProfileModeControl from './components/ProfileModeControl'
import ModeControl from './components/ModeControl' import ModeControl from './components/ModeControl'
import ActionControl from './components/ActionControl' import ActionControl from './components/ActionControl'
...@@ -43,6 +46,15 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => { ...@@ -43,6 +46,15 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
) )
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' }) if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break break
case 'pcp':
selectControl = <SelectPCPControl {...{ id, setAttributes }} />
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
case 'petition':
selectControl = <SelectPetitionControl {...{ id, setAttributes }} />
break
} }
let selectControl, let selectControl,
...@@ -55,14 +67,17 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => { ...@@ -55,14 +67,17 @@ const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
return ( return (
<> <>
<InspectorControls key="inspector"> <InspectorControls key="inspector">
<ComponentControl {...{ component, setAttributes }} /> <PanelBody>
{selectControl} <ComponentControl {...{ component, setAttributes }} />
{component == 'profile' ? profileModeControl : ''} {selectControl}
{component == 'event' ? actionControl : ''} <span style={{ height: '10px', display: 'block' }}></span>
{['event', 'contribution'].includes(component) {component == 'profile' ? profileModeControl : ''}
? modeControl {component == 'event' ? actionControl : ''}
: ''} {['event', 'contribution', 'pcp'].includes(component)
<HijackControl {...{ hijack, setAttributes }} /> ? modeControl
: ''}
<HijackControl {...{ hijack, setAttributes }} />
</PanelBody>
<ExtraAttributesListControl <ExtraAttributesListControl
{...{ extra_attributes, setAttributes }} {...{ extra_attributes, setAttributes }}
/> />
......
...@@ -13,6 +13,11 @@ const ComponentControl = ({ component, setAttributes }) => { ...@@ -13,6 +13,11 @@ const ComponentControl = ({ component, setAttributes }) => {
value: 'contribution', value: 'contribution',
component: 'CiviContribute', component: 'CiviContribute',
}, },
{
label: __('Personal Campaign Page', 'civicrm'),
value: 'pcp',
component: 'CiviContribute',
},
{ {
label: __('Event Page', 'civicrm'), label: __('Event Page', 'civicrm'),
value: 'event', 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