feature: add sample block

.gitignore

@@ -45,9 +45,13 @@ cache
 node_modules
 public
 .storybook-static
+build
 
 # Composer
 vendor
 
-# Assert directory
+# Assets directory
 assets/dist
+
+# POT File
+languages/give-funds.pot

give-addon-boilerplate.php

@@ -4,6 +4,7 @@
 use GiveAddon\Addon\Activation;
 use GiveAddon\Addon\Environment;
 use GiveAddon\Domain\AddonServiceProvider;
+use GiveAddon\FormExtension\FormExtensionServiceProvider;
 
 /**
  * Plugin Name:         ADDON_NAME
@@ -50,6 +51,7 @@ function () {
         // Check Give min required version.
         if (Environment::giveMinRequiredVersionCheck()) {
             give()->registerServiceProvider(AddonServiceProvider::class);
+            give()->registerServiceProvider(FormExtensionServiceProvider::class);
         }
     }
 );

src/FormExtension/FormBuilder/Actions/LoadFormBuilderAssets.php

@@ -46,7 +46,7 @@ public function __invoke()
             true
         );
 
-        wp_localize_script('givewp-form-extension-ADDON_ID', 'GiveAddon',
+        wp_localize_script('givewp-form-extension-ADDON_ID', 'GiveAddonFormBuilder',
             give(GiveAddonViewModel::class)->exports());
     }
 }

src/FormExtension/FormBuilder/ViewModels/GiveAddonViewModel.php

@@ -12,10 +12,30 @@ class GiveAddonViewModel
      */
     public function exports(): array
     {
+        $colorsArray = [
+            [
+                'value' => 'black',
+                'label' => 'Black',
+                'checked' => true,
+                'isDefault' => true,
+            ],
+            [
+                'value' => 'red',
+                'label' => 'Red',
+                'checked' => true,
+                'isDefault' => false,
+            ],
+            [
+                'value' => 'green',
+                'label' => 'Green',
+                'checked' => false,
+                'isDefault' => false,
+            ]
+        ];
+
         return [
-            'sampleOption1' => 'value1',
-            'sampleOption2' => 'value2',
-            'sampleOption3' => 'value3',
+            'colors' => $colorsArray,
+            'colorSettingsUrl' => esc_url_raw(admin_url('edit.php?post_type=give_forms&page=give-color-settings')),
         ];
     }
 }

src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Edit.tsx

@@ -0,0 +1,123 @@
+import {InspectorControls} from '@wordpress/block-editor';
+import {BlockEditProps} from '@wordpress/blocks';
+import {PanelBody, PanelRow, SelectControl, TextControl} from '@wordpress/components';
+import {__} from '@wordpress/i18n';
+import {OptionsPanel} from '@givewp/form-builder-library';
+import {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
+import {getGiveAddonFormBuilderWindowData} from '../../window';
+import {createInterpolateElement} from '@wordpress/element';
+import {useEffect, useState} from 'react';
+import {colorProps} from '../../types/colorProps';
+
+const filterCheckedOptions = (options: OptionProps[]) => options.filter((option) => option.checked === true);
+
+const mergeOptionsWithColors = (options: OptionProps[], colors: colorProps[]) => {
+    const validOptions = options
+        .map((option) => {
+            const color = colors.find((color) => color.value === option.value);
+
+            if (color) {
+                return option;
+            }
+        })
+        .filter((option) => option);
+
+    const newOptions = colors
+        .map((color) => {
+            const option = options.find((option) => option.value === color.value);
+
+            if (typeof option === 'undefined') {
+                delete color.isDefault;
+                return color as OptionProps;
+            }
+        })
+        .filter((color) => color);
+
+    if (newOptions.length > 0) {
+        return validOptions.concat(newOptions);
+    }
+
+    return validOptions;
+};
+
+/**
+ * @unreleased
+ */
+export default function Edit({attributes, setAttributes}: BlockEditProps<any>) {
+    const {colors, colorSettingsUrl} = getGiveAddonFormBuilderWindowData();
+    const {label, options} = attributes;
+    const [donorSelectOptions, setDonorSelectOptions] = useState(filterCheckedOptions(options));
+    const [isAdminChoice, setIsAdminChoice] = useState(donorSelectOptions.length === 1);
+
+    useEffect(() => {
+        /**
+         * This logic ensures that the Default Color will always be checked when none is,
+         * it happens when a Color previously used as default in the form is deleted.
+         */
+        const enabledOptions = filterCheckedOptions(mergeOptionsWithColors(options, colors));
+        if (enabledOptions.length === 0) {
+            options.find(
+                (option: OptionProps) => option.value === colors.find((fund: colorProps) => fund.isDefault).value
+            ).checked = true;
+            setIsAdminChoice(true);
+        } else {
+            setIsAdminChoice(enabledOptions.length === 1);
+        }
+
+        setDonorSelectOptions(filterCheckedOptions(options));
+    }, [options]);
+
+    return (
+        <>
+            <SelectControl
+                disabled={isAdminChoice}
+                label={label}
+                options={donorSelectOptions}
+                onChange={(value: string) => setAttributes({fund: value})}
+                help={
+                    isAdminChoice &&
+                    __(
+                        "This field won't appear in the donation form if only one color is selected. To enable color selection, add or select more colors in the block setting",
+                        'ADDON_TEXTDOMAIN'
+                    )
+                }
+            />
+            <InspectorControls>
+                <PanelBody title={__('Colors - Sample Block', 'ADDON_TEXTDOMAIN')} initialOpen={true}>
+                    <PanelRow>
+                        <TextControl
+                            label={__('Label', 'ADDON_TEXTDOMAIN')}
+                            placeholder={label}
+                            required={true}
+                            className={'give-is-required'}
+                            value={label}
+                            onChange={(value: string) => setAttributes({label: value})}
+                        />
+                    </PanelRow>
+                    <>
+                        <OptionsPanel
+                            multiple={true}
+                            options={mergeOptionsWithColors(options, colors)}
+                            setOptions={(newOptions: any) => setAttributes({options: newOptions})}
+                            label={__('Funds', 'ADDON_TEXTDOMAIN')}
+                            readOnly={true}
+                            disableSoloCheckedOption={true}
+                        />
+                    </>
+
+                    <p>
+                        {createInterpolateElement(
+                            __(
+                                'Select colors to designate for this donation form. You can add or edit your colors in the <a>colors settings.</a>',
+                                'ADDON_TEXTDOMAIN'
+                            ),
+                            {
+                                a: <a href={colorSettingsUrl} />,
+                            }
+                        )}
+                    </p>
+                </PanelBody>
+            </InspectorControls>
+        </>
+    );
+}

src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/Icon.tsx

@@ -0,0 +1,22 @@
+export default function Icon() {
+    return (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.535 2.307c-.957-1.111-2.524-1.634-4.085-.889-1.815.867-2.609 2.947-1.84 4.774.388.919 1.436 2.595 2.127 3.669l.016.025c.117.181.235.364.35.514.13.17.295.35.53.497.332.206.732.313 1.122.3.277-.009.51-.083.708-.165.174-.072.368-.171.56-.27l.026-.014c1.135-.584 2.88-1.512 3.676-2.114 1.569-1.189 1.966-3.396.786-5.065-.993-1.404-2.593-1.746-3.976-1.262z"
+                fill="#262626"
+            />
+            <path
+                d="M17.709 15.894c0 .791-.523 1.46-1.245 1.684l.464-.021c.507 0 1-.16 1.405-.456l2.829-2.064a1.811 1.811 0 0 1 2.318.16 1.691 1.691 0 0 1 0 2.44L21.053 20a4.73 4.73 0 0 1-2.393 1.246l-3.431.667a4.81 4.81 0 0 1-2.055-.048l-3.103-.754a4.757 4.757 0 0 0-1.134-.136c-.407 0-.61 0-.773-.059a1 1 0 0 1-.606-.605c-.058-.163-.058-.366-.058-.773v-3.43c0-.285 0-.428.037-.56a1 1 0 0 1 .157-.324c.081-.11.194-.198.419-.374l1.185-.93s1.965-.918 3.05-.918c.45 0 .897.054 1.334.163l2.684.667c.79.195 1.343.9 1.343 1.71v.353z"
+                fill="#262626"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.474 13h.052c.21 0 .415 0 .59.012.19.013.415.044.65.14a2 2 0 0 1 1.082 1.083c.097.234.127.46.14.65.012.175.012.38.012.59v5.052c0 .21 0 .415-.012.589a2.03 2.03 0 0 1-.14.65 2 2 0 0 1-1.083 1.082 2.03 2.03 0 0 1-.65.14c-.174.013-.378.013-.589.013h-.052c-.21 0-.415 0-.59-.012a2.03 2.03 0 0 1-.65-.14 2 2 0 0 1-1.082-1.083 2.03 2.03 0 0 1-.14-.65C1 20.942 1 20.737 1 20.527v-5.053c0-.21 0-.415.012-.589a2.03 2.03 0 0 1 .14-.65 2 2 0 0 1 1.083-1.082 2.03 2.03 0 0 1 .65-.14C3.059 13 3.263 13 3.474 13z"
+                fill="#262626"
+            />
+        </svg>
+    );
+}

src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/index.tsx

@@ -0,0 +1,20 @@
+import metadata from './metadata';
+import Icon from './Icon';
+import Edit from './Edit';
+
+const settings = {
+    ...metadata,
+    icon: Icon,
+    save: () => null,
+    edit: Edit,
+};
+
+const ColorsSampleBlock = {
+    name: settings.name,
+    settings,
+};
+
+/**
+ * @since 1.0.0
+ */
+export default ColorsSampleBlock;

src/FormExtension/FormBuilder/resources/js/Blocks/ColorsSampleBlock/metadata.ts

@@ -0,0 +1,32 @@
+import type {BlockConfiguration} from '@wordpress/blocks';
+import {__} from '@wordpress/i18n';
+import {getGiveAddonFormBuilderWindowData} from '../../window';
+
+const {colors} = getGiveAddonFormBuilderWindowData();
+
+const metadata: BlockConfiguration = {
+    name: 'givewp/colors-sample-block',
+    title: __('Colors - Sample Block', 'ADDON_TEXTDOMAIN'),
+    description: __('Set the color you would like to use to customize your swags.', 'ADDON_TEXTDOMAIN'),
+    category: 'addons',
+    icon: 'yes',
+    supports: {
+        multiple: false,
+    },
+    attributes: {
+        label: {
+            type: 'string',
+            default: __('Choose the colors to use in your swags.', 'ADDON_TEXTDOMAIN'),
+        },
+        color: {
+            type: 'array',
+            default: colors[0],
+        },
+        options: {
+            type: 'array',
+            default: colors,
+        },
+    },
+};
+
+export default metadata;

src/FormExtension/FormBuilder/resources/js/index.tsx

@@ -1,14 +1,8 @@
-import {IGiveCore} from './interfaces/IGiveCore';
-import {IGiveAddonFormBuilder} from './interfaces/IGiveAddonFormBuilder';
+import ColorsSampleBlock from './Blocks/ColorsSampleBlock';
+import {getGiveCoreFormBuilderWindowData} from './window';
 
-declare const window: {
-    givewp: IGiveCore;
-    GiveAddon: IGiveAddonFormBuilder;
-} & Window;
+const {form} = getGiveCoreFormBuilderWindowData();
 
-/**
- * @since 1.0.0
- */
-export function getGiveAddonFormBuilderWindowData() {
-    return window.GiveAddon;
-}
+console.log(ColorsSampleBlock);
+
+form.blocks.register(ColorsSampleBlock.name, ColorsSampleBlock.settings);

src/FormExtension/FormBuilder/resources/js/interfaces/IGiveAddonFormBuilder.ts

@@ -1,8 +1,9 @@
-import {GiveAddonSettings} from '../types/GiveAddonSettings';
+import {colorProps} from '../types/colorProps';
 
 /**
  * @since 1.0.0
  */
 export interface IGiveAddonFormBuilder {
-    GiveAddon: GiveAddonSettings;
+    colors: colorProps[];
+    colorSettingsUrl: string;
 }

src/FormExtension/FormBuilder/resources/js/types/colorProps.ts

@@ -0,0 +1,8 @@
+import {OptionProps} from '@givewp/form-builder-library/build/OptionsPanel/types';
+
+/**
+ * @unreleased
+ */
+export type colorProps = OptionProps & {
+    isDefault: boolean;
+};

src/FormExtension/FormBuilder/resources/js/window.ts

@@ -0,0 +1,22 @@
+import {IGiveCore} from './interfaces/IGiveCore';
+import {IGiveAddonFormBuilder} from './interfaces/IGiveAddonFormBuilder';
+
+declare const window: {
+    givewp: IGiveCore;
+    GiveAddonFormBuilder: IGiveAddonFormBuilder;
+} & Window;
+
+/**
+ * @since 1.0.0
+ */
+export function getGiveCoreFormBuilderWindowData() {
+    return window.givewp;
+}
+
+/**
+ * @since 1.0.0
+ */
+export function getGiveAddonFormBuilderWindowData() {
+    console.log(window.GiveAddonFormBuilder);
+    return window.GiveAddonFormBuilder;
+}

src/FormExtension/FormExtensionServiceProvider.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace GiveAddon\Domain;
+namespace GiveAddon\FormExtension;
 
 use Give\Helpers\Hooks;
 use Give\ServiceProviders\ServiceProvider;
@@ -9,7 +9,7 @@
 /**
  * Example of a service provider responsible for Form Extension initialization.
  *
- * @package     GiveAddon\Addon
+ * @package     GiveAddon\FormExtension
  * @copyright   Copyright (c) 2020, GiveWP
  */
 class FormExtensionServiceProvider implements ServiceProvider
@@ -32,9 +32,10 @@ public function boot()
         // Load add-on links.
         //Hooks::addFilter('plugin_action_links_' . ADDON_CONSTANT_BASENAME, Links::class);
 
-        is_admin()
+        $this->loadBackend();
+        /*is_admin()
             ? $this->loadBackend()
-            : $this->loadFrontend();
+            : $this->loadFrontend();*/
     }
 
     /**