#239 part 2

app/Polavi/src/Module/Marketing/Middleware/SubscribeFormWidget/FormMiddleware.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Copyright © Nguyen Huu The <[email protected]>.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Polavi\Module\Marketing\Middleware\SubscribeFormWidget;
+
+
+use function Polavi\get_js_file_url;
+use Polavi\Middleware\MiddlewareAbstract;
+use Polavi\Module\Graphql\Services\GraphqlExecutor;
+use Polavi\Services\Http\Request;
+use Polavi\Services\Http\Response;
+use Polavi\Services\Routing\Router;
+
+class FormMiddleware extends MiddlewareAbstract
+{
+
+    public function __invoke(Request $request, Response $response, $delegate = null)
+    {
+        $id = $request->attributes->get('id', null);
+        if($request->attributes->get('type', null) != "newsletter_form" && $request->attributes->get('type', null) != null)
+            return $delegate;
+
+        if($id)
+            $this->getContainer()
+                ->get(GraphqlExecutor::class)
+                ->waitToExecute([
+                    "query"=>"{
+                            cmsWidget(id: {$id} )
+                            {
+                                id: cms_widget_id
+                                name
+                                status
+                                setting {
+                                    key
+                                    value
+                                }
+                                displaySetting {
+                                    key
+                                    value
+                                }
+                                sort_order
+                            }
+                        }"
+                ])->then(function($result) use (&$fields, $response) {
+                    /**@var \GraphQL\Executor\ExecutionResult $result */
+                    if(isset($result->data['cmsWidget'])) {
+                        $response->addWidget(
+                            'newsletter_form_widget_edit_form',
+                            'widget_edit_form',
+                            10,
+                            get_js_file_url("production/marketing/widget/newsletter_form/form.js", true),
+                            array_merge($result->data['cmsWidget'], [
+                                "formAction" => $this->getContainer()->get(Router::class)->generateUrl("admin.graphql.api"),
+                                "redirect"=> $this->getContainer()->get(Router::class)->generateUrl("widget.grid")
+                            ])
+                        );
+                    }
+                });
+        else
+            $response->addWidget(
+                'newsletter_form_widget_edit_form',
+                'widget_edit_form',
+                10,
+                get_js_file_url("production/marketing/widget/newsletter_form/form.js", true),
+                [
+                    "formAction" => $this->getContainer()->get(Router::class)->generateUrl("admin.graphql.api"),
+                    "redirect"=> $this->getContainer()->get(Router::class)->generateUrl("widget.grid")
+                ]
+            );
+
+        return $delegate;
+    }
+}

app/Polavi/src/Module/Marketing/Middleware/SubscribeFormWidget/NewsletterFormWidgetMiddleware.php

@@ -0,0 +1,103 @@
+<?php
+/**
+ * Copyright © Nguyen Huu The <[email protected]>.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types=1);
+
+namespace Polavi\Module\Marketing\Middleware\SubscribeFormWidget;
+
+
+use function Polavi\array_find;
+use function Polavi\generate_url;
+use function Polavi\get_js_file_url;
+use Polavi\Middleware\MiddlewareAbstract;
+use Polavi\Module\Graphql\Services\GraphqlExecutor;
+use Polavi\Services\Http\Request;
+use Polavi\Services\Http\Response;
+
+class NewsletterFormWidgetMiddleware extends MiddlewareAbstract
+{
+    public function __invoke(Request $request, Response $response, $delegate = null)
+    {
+        if($request->isAdmin() == true)
+            return $delegate;
+
+        $this->getContainer()
+            ->get(GraphqlExecutor::class)
+            ->waitToExecute([
+                "query"=>"{newsletterFormWidgets : widgetCollection (filter : {type : {operator : \"=\" value: \"newsletter_form\"}}) {widgets { cms_widget_id name setting {key value} displaySetting {key value} sort_order }}}"
+            ])->then(function($result) use ($request, $response) {
+                /**@var \GraphQL\Executor\ExecutionResult $result */
+                if(isset($result->data['newsletterFormWidgets'])) {
+                    $matchedRoute = $request->attributes->get('_matched_route');
+                    $widgets = array_filter($result->data['newsletterFormWidgets']['widgets'], function($v) use($matchedRoute) {
+                        $layouts = array_find($v['displaySetting'], function($value, $key) {
+                            if($value['key'] == 'layout')
+                                return json_decode($value['value'], true);
+                            return null;
+                        }, []);
+                        if(empty($layouts))
+                            return true;
+                        $match = false;
+                        foreach ($layouts as $layout) {
+                            if($matchedRoute == $layout) {
+                                $match = true;
+                                break;
+                            }
+                            if (strpos($layout, '|') !== false) {
+                                if(in_array($matchedRoute, explode('|', $layout))) {
+                                    $match = true;
+                                    break;
+                                }
+                            }
+                        }
+                        return $match;
+                    }, ARRAY_FILTER_USE_BOTH);
+                    foreach ($widgets as $widget) {
+                        $title = array_find($widget['setting'], function($value, $key) {
+                            if($value['key'] == 'title')
+                                return $value['value'];
+                            return null;
+                        });
+
+                        $htmlBefore = array_find($widget['setting'], function($value, $key) {
+                            if($value['key'] == 'html_before')
+                                return $value['value'];
+                            return null;
+                        });
+
+                        $htmlAfter = array_find($widget['setting'], function($value, $key) {
+                            if($value['key'] == 'html_after')
+                                return $value['value'];
+                            return null;
+                        });
+
+                        $areas = array_find($widget['displaySetting'], function($value, $key) {
+                            if($value['key'] == 'area')
+                                return json_decode($value['value'], true);
+                            return null;
+                        }, []);
+                        foreach ($areas as $area)
+                            $response->addWidget(
+                                $widget['cms_widget_id'] . '-newsletter-form-widget',
+                                $area,
+                                (int)$widget['sort_order'],
+                                get_js_file_url("production/marketing/newsletter/newsletter_form_widget.js", false),
+                                [
+                                    "id" => $widget['cms_widget_id'] . '-newsletter-form-widget',
+                                    "name" => $widget['name'],
+                                    "title" => $title,
+                                    "html_before" => $htmlBefore,
+                                    "html_after" => $htmlAfter,
+                                    "subscribeUrl" => generate_url("newsletter.subscribe")
+                                ]
+                            );
+                    }
+                }
+            });
+
+        return $delegate;
+    }
+}

app/Polavi/src/Module/Marketing/events.php

@@ -62,3 +62,30 @@ function (&$fields, Container $container) {
     },
     5
 );
+
+$eventDispatcher->addListener(
+    'widget_types',
+    function ($types) {
+        $types[] = ['code' => 'newsletter_form', 'name' => 'Newsletter form widget'];
+
+        return $types;
+    },
+    0
+);
+
+
+$eventDispatcher->addListener('register.widget.create.middleware', function(\Polavi\Services\MiddlewareManager $mm) {
+    $mm->registerMiddleware(\Polavi\Module\Marketing\Middleware\SubscribeFormWidget\FormMiddleware::class, 0);
+});
+
+$eventDispatcher->addListener('register.widget.edit.middleware', function(\Polavi\Services\MiddlewareManager $mm) {
+    $mm->registerMiddleware(\Polavi\Module\Marketing\Middleware\SubscribeFormWidget\FormMiddleware::class, 0);
+});
+
+$eventDispatcher->addListener(
+    'register.core.middleware',
+    function (\Polavi\Services\MiddlewareManager $middlewareManager) {
+        $middlewareManager->registerMiddleware(\Polavi\Module\Marketing\Middleware\SubscribeFormWidget\NewsletterFormWidgetMiddleware::class, 21);
+    },
+    5
+);

public/theme/admin/default/js/dev/marketing/widget/newsletter_form/form.js

@@ -0,0 +1,100 @@
+import Text from "../../../../../../../../js/production/form/fields/text.js";
+import {LayoutList} from "../../../../production/cms/widget/layout_list.js";
+import {AreaList} from "../../../../production/cms/widget/area_list.js";
+import {Form} from "../../../../../../../../js/production/form/form.js";
+import {ADD_ALERT} from "../../../../../../../../js/production/event-types.js";
+import {Fetch} from "../../../../../../../../js/production/fetch.js";
+import Switch from "../../../../../../../../js/production/form/fields/switch.js";
+import Textarea from "../../../../../../../../js/production/form/fields/textarea.js";
+
+export default function NewsletterWidget({id, name, status, setting, displaySetting, sort_order, formAction, redirect, areaProps}) {
+    const layout = _.find(displaySetting, {key:'layout'}) !== undefined ?
+        JSON.parse(_.get(_.find(displaySetting, {key:'layout'}), 'value', [])) : [];
+    const area = _.find(displaySetting, {key:'area'}) !== undefined ?
+        JSON.parse(_.get(_.find(displaySetting, {key:'area'}), 'value', [])) : [];
+
+    const dispatch = ReactRedux.useDispatch();
+    const onComplete = (response) => {
+        if(_.get(response, 'payload.data.createWidget.status') === true) {
+            dispatch({'type' : ADD_ALERT, 'payload': {alerts: [{id: "widget_update_success", message: 'Widget has been saved successfully', type: "success"}]}});
+            Fetch(redirect, true);
+        } else
+            dispatch({'type' : ADD_ALERT, 'payload': {alerts: [{id: "widget_update_error", message: _.get(response, 'payload.data.createWidget.message', 'Something wrong, please try again'), type: "error"}]}});
+    };
+
+    if(areaProps.type !== 'newsletter_form')
+        return null;
+
+    return <div className="mt-4">
+        <Form
+            id="newsletter-form-widget-edit-form"
+            action={formAction}
+            onComplete={onComplete}
+            submitText={null}
+        >
+            <div className="row">
+                <div className="col-8">
+                    <div className="sml-block">
+                        <div className="sml-block-title">Newsletter form widget</div>
+                        <input type='text' name="query" value="mutation CreateNewsletterFormWidget($widget: WidgetInput!) { createWidget (widget: $widget) {status message}}" readOnly style={{display:'none'}}/>
+                        <input type='text' name="variables[widget][type]" value="newsletter_form" readOnly style={{display:'none'}}/>
+                        {id && <input type='text' name="variables[widget][id]" value={id} readOnly style={{display:'none'}}/>}
+                        <Text
+                            name="variables[widget][name]"
+                            value={name}
+                            formId="newsletter-form-widget-edit-form"
+                            validation_rules={['notEmpty']}
+                            label={"Name"}
+                        />
+                        <Switch
+                            name="variables[widget][status]"
+                            value={status}
+                            formId="newsletter-form-widget-edit-form"
+                            label="Status"
+                        />
+                        <input type='text' name="variables[widget][setting][0][key]" value="title" readOnly style={{display:'none'}}/>
+                        <Text
+                            name="variables[widget][setting][0][value]"
+                            value={_.find(setting, {key:'title'}) !== undefined ? _.get(_.find(setting, {key:'title'}), 'value', '') : ''}
+                            formId="newsletter-form-widget-edit-form"
+                            label={"Title"}
+                        />
+                        <input type='text' name="variables[widget][setting][1][key]" value="html_before" readOnly style={{display:'none'}}/>
+                        <Textarea
+                            name="variables[widget][setting][1][value]"
+                            value={_.find(setting, {key:'html_before'}) !== undefined ? _.get(_.find(setting, {key:'html_before'}), 'value', '') : ''}
+                            formId="newsletter-form-widget-edit-form"
+                            label={"Html before input"}
+                        />
+                        <input type='text' name="variables[widget][setting][2][key]" value="html_after" readOnly style={{display:'none'}}/>
+                        <Textarea
+                            name="variables[widget][setting][2][value]"
+                            value={_.find(setting, {key:'html_after'}) !== undefined ? _.get(_.find(setting, {key:'html_after'}), 'value', '') : ''}
+                            formId="newsletter-form-widget-edit-form"
+                            label={"Html after input"}
+                        />
+                        <div className="mt-4 text-right">
+                            <button type="submit" className="btn btn-primary">Submit</button>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-4">
+                    <div className="sml-block">
+                        <div className="sml-block-title">Select page layout</div>
+                        <LayoutList formId={"newsletter-form-widget-edit-form"} selectedLayouts={layout}/>
+                    </div>
+                    <div className="sml-block mt-4">
+                        <div className="sml-block-title">Select area</div>
+                        <AreaList formId={"newsletter-form-widget-edit-form"} selectedAreas={area}/>
+                        <Text
+                            name="variables[widget][sort_order]"
+                            value={sort_order}
+                            formId="newsletter-form-widget-edit-form"
+                            label={"Sort order"}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Form>
+    </div>
+}