CampaignShortcode.php
1 year ago
app.tsx
1 year ago
block.json
1 year ago
edit.tsx
1 year ago
index.tsx
1 year ago
render.php
1 year ago
types.ts
1 year ago
edit.tsx
151 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import React, {CSSProperties, useState} from 'react'; |
| 3 | import {InspectorControls, useBlockProps} from '@wordpress/block-editor'; |
| 4 | import {BlockEditProps} from '@wordpress/blocks'; |
| 5 | import {PanelBody, ToggleControl} from '@wordpress/components'; |
| 6 | import {CampaignBlockType} from './types'; |
| 7 | import CampaignSelector from '../shared/components/CampaignSelector'; |
| 8 | import CampaignCard from '../shared/components/CampaignCard'; |
| 9 | import {BlockNotice} from '@givewp/form-builder-library'; |
| 10 | import {getCampaignOptionsWindowData, updateUserNoticeOptions, useCampaignEntityRecord, createCampaignPage} from '@givewp/campaigns/utils'; |
| 11 | |
| 12 | |
| 13 | const styles = { |
| 14 | title: { |
| 15 | fontWeight: 600 |
| 16 | }, |
| 17 | notice: { |
| 18 | position: 'relative', |
| 19 | display: 'flex', |
| 20 | flexDirection: 'column', |
| 21 | gap: 8, |
| 22 | padding: 16, |
| 23 | borderRadius: 2, |
| 24 | color: '#0e0e0e', |
| 25 | background: '#f2f2f2', |
| 26 | fontSize: 12, |
| 27 | lineHeight: 1.33, |
| 28 | }, |
| 29 | close: { |
| 30 | position: 'absolute', |
| 31 | cursor: 'pointer', |
| 32 | right: 16, |
| 33 | top: 16, |
| 34 | }, |
| 35 | link: { |
| 36 | color: '#0e0e0e', |
| 37 | } |
| 38 | } as CSSProperties; |
| 39 | |
| 40 | const CloseIcon = () => ( |
| 41 | <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 42 | <path |
| 43 | d="M11.805 5.138a.667.667 0 1 0-.943-.943L8 7.057 5.138 4.195a.667.667 0 1 0-.943.943L7.057 8l-2.862 2.862a.667.667 0 1 0 .943.943L8 8.943l2.862 2.862a.667.667 0 1 0 .943-.943L8.943 8l2.862-2.862z" |
| 44 | fill="#0E0E0E" /> |
| 45 | </svg> |
| 46 | ) |
| 47 | |
| 48 | export default function Edit({attributes, setAttributes}: BlockEditProps<CampaignBlockType>) { |
| 49 | const blockProps = useBlockProps(); |
| 50 | const campaignWindowData = getCampaignOptionsWindowData(); |
| 51 | const [showNotification, setShowNotification] = useState(campaignWindowData.admin.showCampaignInteractionNotice); |
| 52 | const {campaign, hasResolved, edit, save} = useCampaignEntityRecord(attributes.campaignId); |
| 53 | |
| 54 | |
| 55 | const Notices = () => { |
| 56 | if (!attributes.campaignId) { |
| 57 | return null; |
| 58 | } |
| 59 | |
| 60 | if (campaign.pageId) { |
| 61 | if (!showNotification) { |
| 62 | return null; |
| 63 | } |
| 64 | |
| 65 | return ( |
| 66 | <p style={styles['notice']}> |
| 67 | <span |
| 68 | style={styles['close']} |
| 69 | onClick={() => { |
| 70 | updateUserNoticeOptions('givewp_campaign_interaction_notice').then(() => setShowNotification(false)) |
| 71 | }}> |
| 72 | <CloseIcon /> |
| 73 | </span> |
| 74 | <span style={styles['title']}> |
| 75 | {__('Campaign interaction', 'give ')} |
| 76 | </span> |
| 77 | <span> |
| 78 | {__('Users will be redirected to campaign page.', 'give')} |
| 79 | </span> |
| 80 | </p> |
| 81 | ) |
| 82 | } |
| 83 | |
| 84 | return ( |
| 85 | <BlockNotice |
| 86 | title={__('There is no Campaign page for this campaign.', 'give ')} |
| 87 | description={__('For this campaign block to work properly, create a campaign page.', 'give')} |
| 88 | > |
| 89 | <a |
| 90 | href="#" |
| 91 | onClick={async (e) => { |
| 92 | e.preventDefault(); |
| 93 | const campaignPageResponse = await createCampaignPage(campaign.id) |
| 94 | |
| 95 | if (campaignPageResponse) { |
| 96 | edit({...campaign, pageId: campaignPageResponse?.id}); |
| 97 | |
| 98 | await save(); |
| 99 | } |
| 100 | }} |
| 101 | style={styles['link']} |
| 102 | > |
| 103 | {__('Create campaign page.', 'give')} |
| 104 | </a> |
| 105 | </BlockNotice> |
| 106 | ) |
| 107 | }; |
| 108 | |
| 109 | return ( |
| 110 | <div {...blockProps}> |
| 111 | {hasResolved && ( |
| 112 | <> |
| 113 | <CampaignSelector |
| 114 | campaignId={attributes.campaignId} |
| 115 | handleSelect={(campaignId: number) => setAttributes({campaignId})} |
| 116 | showInspectorControl={true} |
| 117 | inspectorControls={<Notices />} |
| 118 | > |
| 119 | <CampaignCard |
| 120 | campaign={campaign} |
| 121 | showImage={attributes.showImage} |
| 122 | showDescription={attributes.showDescription} |
| 123 | showGoal={attributes.showGoal} |
| 124 | /> |
| 125 | </CampaignSelector> |
| 126 | |
| 127 | <InspectorControls> |
| 128 | <PanelBody title={__('Display Elements', 'give')} initialOpen={true}> |
| 129 | <ToggleControl |
| 130 | label={__('Show campaign image', 'give')} |
| 131 | checked={attributes.showImage} |
| 132 | onChange={(showImage) => setAttributes({showImage})} |
| 133 | /> |
| 134 | <ToggleControl |
| 135 | label={__('Show description', 'give')} |
| 136 | checked={attributes.showDescription} |
| 137 | onChange={(showDescription) => setAttributes({showDescription})} |
| 138 | /> |
| 139 | <ToggleControl |
| 140 | label={__('Show goal', 'give')} |
| 141 | checked={attributes.showGoal} |
| 142 | onChange={(showGoal) => setAttributes({showGoal})} |
| 143 | /> |
| 144 | </PanelBody> |
| 145 | </InspectorControls> |
| 146 | </> |
| 147 | )} |
| 148 | </div> |
| 149 | ) |
| 150 | } |
| 151 |