wip

impress-org · Oct 31, 2023 · 9cc571c · 9cc571c
1 parent 16a179d
commit 9cc571c
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 25 deletions.
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/EmbedForm/index.tsx b/src/FormBuilder/resources/js/form-builder/src/components/EmbedForm/index.tsx
@@ -1,5 +1,5 @@
-import {useState} from 'react';
-import {useSelect} from '@wordpress/data';
+import {useCallback, useState} from 'react';
+import {useDispatch, useSelect} from '@wordpress/data';
 import {store} from '@wordpress/core-data';
 import {__} from '@wordpress/i18n';
 import {Button, RadioControl, SelectControl, TextControl} from '@wordpress/components';
@@ -8,15 +8,34 @@ import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
 
 import './styles.scss';
 
-export default function EmbedFormModal({handleClose}) {
+interface EmbedFormModalProps {
+    handleClose: Function;
+}
+
+interface StateProps {
+    postType: string;
+    selected: string;
+    isCopied: boolean;
+    isInserting: boolean;
+    inserted: boolean;
+}
+
+export default function EmbedFormModal<EmbedFormModalProps>({handleClose}) {
 
     const {formId} = getWindowData();
-    const [postType, setPostType] = useState<string>('page');
-    const [selected, setSelected] = useState<string>('');
-    const [isCopied, setIsCopied] = useState<boolean>(false);
+    const [state, setState] = useState<StateProps>({
+        postType: 'page',
+        selected: '',
+        isCopied: false,
+        isInserting: false,
+        inserted: false
+    });
+
+    const {editEntityRecord, saveEditedEntityRecord} = useDispatch(store);
+
     const shortcode = `[give_form id=${formId}]`;
 
-    // Get pages
+    // Get posts/pages
     const pages = useSelect((select) => {
         const pages = [];
         const {getEntityRecords} = select(store);
@@ -26,32 +45,55 @@ export default function EmbedFormModal({handleClose}) {
             per_page: -1
         }
 
-        const data = getEntityRecords('postType', postType, query);
+        // @ts-ignore
+        const data = getEntityRecords('postType', state.postType, query);
 
-        const selectLabel = 'page' === postType
+        const selectLabel = 'page' === state.postType
             ? __('Select a page', 'give')
             : __('Select a post', 'give')
 
         pages.push({value: '', label: selectLabel, disabled: true});
 
         data?.forEach(page => {
-            pages.push({value: page.id, label: page.title.rendered})
+            pages.push({
+                value: page.id,
+                label: page.title.rendered,
+                content: page.content.raw,
+                disabled: page.content.raw.includes(shortcode) // disable pages that already have shortcode in content
+            })
         });
 
         return pages;
 
-    }, [postType]);
+    }, [state.postType]);
 
 
-    const handleCopy = () => {
+    const handleCopy = useCallback(() => {
         navigator.clipboard.writeText(shortcode);
 
-        setIsCopied(true);
+        setState(prevState => {
+            return {
+                ...prevState,
+                isCopied: true
+            }
+        });
 
         setTimeout(() => {
-            setIsCopied(false);
+            setState(prevState => {
+                return {
+                    ...prevState,
+                    isCopied: false
+                }
+            });
         }, 2000);
-    }
+    }, []);
+
+    const handleInsert = useCallback(async () => {
+        const content = pages?.find((page) => page.value == state.selected)?.content + `<!-- wp:shortcode -->${shortcode}<!-- /wp:shortcode -->`;
+
+        await editEntityRecord('postType', state.postType, state.selected, {content});
+        await saveEditedEntityRecord('postType', state.postType, state.selected, {content});
+    }, []);
 
     return (
         <ModalDialog
@@ -79,7 +121,7 @@ export default function EmbedFormModal({handleClose}) {
                                 variant="secondary"
                                 onClick={handleCopy}
                             >
-                                {isCopied ? __('Copied!', 'give') : __('Copy Shortcode', 'give')}
+                                {state.isCopied ? __('Copied!', 'give') : __('Copy Shortcode', 'give')}
                             </Button>
                         </div>
                     </div>
@@ -92,30 +134,39 @@ export default function EmbedFormModal({handleClose}) {
                     </strong>
 
                     <RadioControl
-                        selected={postType}
+                        selected={state.postType}
                         options={[
                             {label: 'Page', value: 'page'},
                             {label: 'Post', value: 'post'},
                         ]}
-                        onChange={value => {
-                            setPostType(value);
-                            setSelected('');
-                        }}
+                        onChange={value => setState(prevState => {
+                            return {
+                                ...prevState,
+                                postType: value,
+                                selected: ''
+                            }
+                        })}
                     />
                 </div>
 
                 <div className="give-embed-modal-row">
                     <SelectControl
-                        value={selected}
+                        value={state.selected}
                         options={pages}
-                        onChange={value => setSelected(value)}
+                        onChange={value => setState(prevState => {
+                            return {
+                                ...prevState,
+                                selected: value
+                            }
+                        })}
                     />
                 </div>
 
                 <div className="give-embed-modal-row">
                     <Button
                         variant="secondary"
-                        disabled={!selected}
+                        disabled={!state.selected}
+                        onClick={handleInsert}
                     >
                         {__('Insert Form', 'give')}
                     </Button>

diff --git a/src/FormBuilder/resources/js/form-builder/src/components/EmbedForm/styles.scss b/src/FormBuilder/resources/js/form-builder/src/components/EmbedForm/styles.scss
@@ -30,7 +30,7 @@
     }
 
     &-divider {
-        margin-bottom: 25px;
+        margin-bottom: 30px;
         border-bottom: 1px solid var(--givewp-grey-50);
     }