Refactor: update default field settings, enqueue global form styles, …

…and update form settings tab (impress-org#120)

* refactor: make displayInReceipt enabled by default

* feature: enqueue global form stylesheet to elevate css variables to the root and head tag properly

* refactor: move receipt settings into form tab

*chore: comment out unused settings

packages/form-builder/src/blocks/fields/field.js

@@ -115,6 +115,11 @@ const field = {
                 source: 'attribute',
                 default: true,
             },
+            displayInReceipt: {
+                type: 'boolean',
+                source: 'attribute',
+                default: true,
+            }
         },
         title: __('Text', 'custom-block-editor'),
         icon: () => (

packages/form-builder/src/components/sidebar/primary.js

@@ -1,24 +1,22 @@
-import {createSlotFill, PanelBody} from '@wordpress/components';
+import {createSlotFill} from '@wordpress/components';
 import {__} from '@wordpress/i18n';
 
 import './styles.scss';
 
 import TabPanel from './tab-panel';
 
 import {
+    CustomStyleSettings,
     DonationGoalSettings,
     FormDesignSettings,
     FormSummarySettings,
-    OfflineDonationsSettings,
-    CustomStyleSettings,
     ReceiptSettings,
 } from '../../settings/index.ts';
-import FormFields from '../../settings/form-fields';
 import {PopoutSlot} from './popout';
 import {useEffect} from 'react';
 import useSelectedBlocks from '../../hooks/useSelectedBlocks';
 import BlockCard from "@wordpress/block-editor/build/components/block-card";
-import { settings } from '@wordpress/icons';
+import {settings} from '@wordpress/icons';
 
 const {Slot: InspectorSlot, Fill: InspectorFill} = createSlotFill('StandAloneBlockEditorSidebarInspector');
 
@@ -30,14 +28,16 @@ const tabs = [
         content: () => (
             <>
                 <BlockCard
-                    icon={ settings }
+                    icon={settings}
                     title="Form Settings"
                     description="These settings affect how your form functions and is presented, as well as the form page."
                 />
-                <FormSummarySettings />
-                <DonationGoalSettings />
-                <OfflineDonationsSettings />
-                <FormFields />
+                <FormSummarySettings/>
+                <DonationGoalSettings/>
+                <ReceiptSettings/>
+                {/*The settings below have not been implemented yet.*/}
+                {/*<OfflineDonationsSettings/>*/}
+                {/*<FormFields />*/}
             </>
         ),
     },
@@ -59,7 +59,6 @@ const tabs = [
             <>
                 <FormDesignSettings />
                 <DonationGoalSettings />
-                <ReceiptSettings />
                 <CustomStyleSettings />
             </>
         )

src/NextGen/DonationForm/ViewModels/DonationFormViewModel.php

@@ -11,6 +11,9 @@
 use Give\NextGen\Framework\Blocks\BlockCollection;
 use Give\NextGen\Framework\FormDesigns\Registrars\FormDesignRegistrar;
 
+use function wp_enqueue_style;
+use function wp_print_styles;
+
 /**
  * @unreleased
  */
@@ -25,9 +28,8 @@ class DonationFormViewModel
      */
     private $formBlocks;
     /**
-     * TODO: replace formSettings array with $donationForm->settings object when property gets updated
      *
-     * @var array{designId: string, primaryColor: string, secondaryColor: string, goalType: string}
+     * @var FormSettings
      */
     private $formSettings;
     /**
@@ -73,6 +75,29 @@ public function secondaryColor(): string
         return $this->formSettings->secondaryColor ?? '';
     }
 
+    /**
+     * @unreleased
+     */
+    public function enqueueGlobalStyles()
+    {
+        wp_enqueue_global_styles();
+
+        wp_register_style(
+            'givewp-global-form-styles',
+            GIVE_NEXT_GEN_URL . 'src/NextGen/DonationForm/resources/styles/global.css'
+        );
+
+        wp_add_inline_style(
+            'givewp-global-form-styles',
+            ":root {
+            --givewp-primary-color:{$this->primaryColor()};
+            --givewp-secondary-color:{$this->secondaryColor()}; 
+            }"
+        );
+
+        wp_enqueue_style('givewp-global-form-styles');
+    }
+
     /**
      * @unreleased
      */
@@ -146,7 +171,7 @@ public function exports(): array
      */
     public function render(): string
     {
-        wp_enqueue_global_styles();
+        $this->enqueueGlobalStyles();
 
         $this->enqueueFormScripts(
             $this->donationFormId,
@@ -162,18 +187,14 @@ public function render(): string
             window.giveNextGenExports = <?= wp_json_encode($this->exports()) ?>;
         </script>
 
-        <?php if($this->formSettings->customCss): ?>
-        <style><?php echo $this->formSettings->customCss; ?></style>
-        <?php endif; ?>
-
-        <div
-            id="root-givewp-donation-form"
-            class="givewp-donation-form"
-            style="
-                --givewp-primary-color:<?= $this->primaryColor() ?>;
-                --givewp-secondary-color:<?= $this->secondaryColor() ?>;
-                "
-        ></div>
+        <?php
+        if ($this->formSettings->customCss): ?>
+            <style><?php
+                echo $this->formSettings->customCss; ?></style>
+        <?php
+        endif; ?>
+
+        <div id="root-givewp-donation-form" class="givewp-donation-form"></div>
 
         <?php
         wp_print_footer_scripts();

src/NextGen/DonationForm/resources/styles/global.css

@@ -0,0 +1,7 @@
+/**
+* Next Gen Global Form Styles
+* @handle 'givewp-global-form-styles'
+* The main use for this file is to add dynamic css variables using wp_add_inline_style
+* @see https://developer.wordpress.org/reference/functions/wp_add_inline_style/
+* @unreleased
+*/