@brilo/base-blocks 0.1.38 → 0.1.40

package/src/blocks/form/form-field/types.ts

@@ -1,9 +1,16 @@
-import {FIELD_SELECT_MODE_VALUES, FIELD_TEXT_TYPES, FIELD_TEXT_TYPE_VALUES, FIELD_TYPE_VALUES} from './constants'
+import {
+  FIELD_SELECT_MODE_VALUES,
+  FIELD_TEXT_TYPES,
+  FIELD_TEXT_TYPE_VALUES,
+  FIELD_TYPE_VALUES,
+  FILE_BUTTON_VARIANT_VALUES,
+} from './constants'
 import type {BriloBlockType} from '~/types'
 
 export type FormFieldType = (typeof FIELD_TYPE_VALUES)[number]
 export type FormFieldTextType = (typeof FIELD_TEXT_TYPE_VALUES)[number]
 export type FormFieldSelectMode = (typeof FIELD_SELECT_MODE_VALUES)[number]
+export type FormFieldFileButtonVariant = (typeof FILE_BUTTON_VARIANT_VALUES)[number]
 
 export type FormFieldOption = string | {label?: string; value?: string; email?: string}
 
@@ -19,6 +26,14 @@ export interface FormFieldAttributes extends Record<string, unknown> {
   selectMode: FormFieldSelectMode
   defaultValue: string
   value: string
+  isReplyTo: boolean
+  gtmEnabled: boolean
+  multiple: boolean
+  extensionsPreset: string[]
+  extensionsCustom: string
+  buttonVariant: FormFieldFileButtonVariant
+  buttonOutline: boolean
+  buttonLabel: string
 }
 
 export interface FormFieldOptions extends BriloBlockType {}

package/src/blocks/form/form-group/edit.tsx

@@ -1,10 +1,10 @@
 import {InspectorControls, RichText} from '@wordpress/block-editor'
 import {FormTokenField, Notice, PanelBody, SelectControl, TextControl, ToggleControl} from '@wordpress/components'
-import {useDispatch} from '@wordpress/data'
+import {useDispatch, useSelect} from '@wordpress/data'
 import {__} from '@wordpress/i18n'
 import {cleanForSlug} from '@wordpress/url'
 import clsx from 'clsx'
-import {useEffect} from 'react'
+import {useEffect, useMemo} from 'react'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
 import {EXTERNAL_METHODS, INTERNAL_SUBMIT_BEHAVIORS, PROCESSING_MODES} from './constants'
 import type {ExternalMethod, FormGroupAttributes, FormGroupOptions, InternalSubmitBehavior, ProcessingMode} from './types'
@@ -18,6 +18,41 @@ function generateFormId(formName: string): string {
   return `form-${slug}-${hash}`
 }
 
+function slugifyFieldName(raw: string): string {
+  return (raw ?? '')
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-zA-Z0-9_-]/g, '')
+    .replace(/[-_]{2,}/g, '-')
+    .replace(/^[-_]+/g, '')
+    .toLowerCase()
+}
+
+function gtmPlaceholderValue(type?: string, textType?: string): string {
+  if (type === 'select') {
+    return '<vybraná možnost>'
+  }
+
+  if (type === 'textarea') {
+    return '<vyplněný text>'
+  }
+
+  if (textType === 'email') {
+    return '<vyplněný email>'
+  }
+
+  if (textType === 'tel') {
+    return '<vyplněné telefonní číslo>'
+  }
+
+  if (textType === 'number') {
+    return '<vyplněné číslo>'
+  }
+
+  return '<vyplněná hodnota>'
+}
+
 export function createFormGroupEdit(options: FormGroupOptions) {
   return function Edit({
     attributes,
@@ -40,17 +75,59 @@ export function createFormGroupEdit(options: FormGroupOptions) {
     const isRecipientsMissing = isInternal && recipients.length === 0
     const isExternalUrlMissing = isExternal && (attributes.externalUrl ?? '').trim() === ''
 
+    type ChildFieldAttributes = {
+      type?: string
+      selectMode?: string
+      textType?: string
+      isReplyTo?: boolean
+      gtmEnabled?: boolean
+      name?: string
+      label?: string
+    }
+
+    const {replyToCount, gtmFields} = useSelect(
+      (select) => {
+        const editor = select('core/block-editor') as unknown as {
+          getBlocks: (rootClientId: string) => Array<{attributes: ChildFieldAttributes}>
+        }
+        const blocks = editor.getBlocks(clientId) || []
+        const replyToCount = blocks.filter(
+          (block) => block.attributes.type === 'text' && block.attributes.textType === 'email' && block.attributes.isReplyTo === true,
+        ).length
+        const gtmFields = blocks.filter((block) => block.attributes.gtmEnabled).map((block) => block.attributes)
+
+        return {replyToCount, gtmFields}
+      },
+      [clientId],
+    )
+
+    const hasMultipleReplyTo = replyToCount > 1
+
+    const gtmPreview = useMemo(() => {
+      const preview: Record<string, string> = {
+        event: (attributes.gtmEventName ?? '').trim() || '<název eventu>',
+        url: '<URL stránky, odkud bylo odesláno>',
+      }
+
+      gtmFields.forEach((field) => {
+        const name = (field.name && field.name.trim() !== '' ? field.name : slugifyFieldName(field.label ?? '')) || '<pole-bez-nazvu>'
+        preview[name] = gtmPlaceholderValue(field.type, field.textType)
+      })
+
+      return preview
+    }, [attributes.gtmEventName, gtmFields])
+
     useEffect(() => {
       const lockName = `brilo-form-group-${clientId}`
 
-      if (isRecipientsMissing || isExternalUrlMissing) {
+      if (isRecipientsMissing || isExternalUrlMissing || hasMultipleReplyTo) {
         lockPostSaving(lockName)
       } else {
         unlockPostSaving(lockName)
       }
 
       return () => unlockPostSaving(lockName)
-    }, [clientId, isRecipientsMissing, isExternalUrlMissing, lockPostSaving, unlockPostSaving])
+    }, [clientId, isRecipientsMissing, isExternalUrlMissing, hasMultipleReplyTo, lockPostSaving, unlockPostSaving])
 
     // Generated once and persisted into the block's attributes so it stays stable across edits.
     // biome-ignore lint/correctness/useExhaustiveDependencies: must run once on mount only
@@ -177,12 +254,67 @@ export function createFormGroupEdit(options: FormGroupOptions) {
               </>
             )}
 
+            {hasMultipleReplyTo && (
+              <Notice status="warning" isDismissible={false}>
+                {__('Formulář obsahuje více polí označených jako Reply-To. Podporováno je pouze jedno takové pole.', 'brilo-blocks')}
+              </Notice>
+            )}
+
             <TextControl
               label={__('Titulek tlačítka odeslání', 'brilo-blocks')}
               value={attributes.submit?.label ?? 'Odeslat'}
               onChange={(label) => setAttributes({submit: {label}})}
             />
           </PanelBody>
+
+          {isInternal && (
+            <PanelBody title={__('Google Tag Manager', 'brilo-blocks')} initialOpen={false}>
+              <ToggleControl
+                label={__('Odesílat data do dataLayer', 'brilo-blocks')}
+                help={__(
+                  'Po úspěšném odeslání formuláře se pushne event do window.dataLayer. Zbytek (cíle, tagy) se nastavuje v GTM.',
+                  'brilo-blocks',
+                )}
+                checked={attributes.gtmEnabled ?? false}
+                onChange={(gtmEnabled) => setAttributes({gtmEnabled})}
+              />
+
+              {(attributes.gtmEnabled ?? false) && (
+                <>
+                  <TextControl
+                    label={__('Název GTM eventu', 'brilo-blocks')}
+                    placeholder={__('napr. website_form', 'brilo-blocks')}
+                    value={attributes.gtmEventName ?? ''}
+                    onChange={(gtmEventName) => setAttributes({gtmEventName})}
+                    help={__(
+                      'Pushne se { event: <tento název>, url: <stránka, odkud bylo odesláno>, ...pole s GTM }. Jednotlivá pole si zapnete u nich ("Odesílat do GTM").',
+                      'brilo-blocks',
+                    )}
+                  />
+
+                  {(attributes.gtmEventName ?? '').trim() === '' && (
+                    <Notice status="warning" isDismissible={false}>
+                      {__('Bez názvu eventu se dataLayer push neodešle.', 'brilo-blocks')}
+                    </Notice>
+                  )}
+
+                  <p>
+                    <strong>{__('Náhled objektu při úspěšném odeslání:', 'brilo-blocks')}</strong>
+                  </p>
+                  <pre className="g-form__gtm-preview">{JSON.stringify(gtmPreview, null, 2)}</pre>
+
+                  {gtmFields.length === 0 && (
+                    <Notice status="info" isDismissible={false}>
+                      {__(
+                        'Žádné pole formuláře nemá zapnuté "Odesílat do GTM" - do dataLayer půjde jen event a url. Zapněte to u polí, jejichž hodnotu chcete v dataLayer mít.',
+                        'brilo-blocks',
+                      )}
+                    </Notice>
+                  )}
+                </>
+              )}
+            </PanelBody>
+          )}
         </InspectorControls>
 
         <div {...blockProps}>

package/src/blocks/form/form-group/editor.scss

@@ -1,41 +1,54 @@
 .g-form {
   width: 100%;
+}
 
-  &__fields {
-    display: grid;
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-    gap: 16px;
-    padding: 16px;
-    padding-bottom: 56px;
-    outline: 1px dashed #ddd;
+.g-form__fields {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 16px;
+  padding: 16px;
+  padding-bottom: 56px;
+  outline: 1px dashed #ddd;
+}
 
-    > * {
-      max-width: 100%;
-    }
-  }
+.g-form__fields > * {
+  max-width: 100%;
+}
 
-  &__gdpr {
-    margin-top: 16px;
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: #fff;
-  }
+.g-form__gdpr {
+  margin-top: 16px;
+  padding: 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+}
 
-  &__gdpr-header {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
+.g-form__gdpr-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.g-form__gdpr-content {
+  min-height: 56px;
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+}
 
-  &__gdpr-content {
-    min-height: 56px;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    background: #fff;
-  }
+// Rendered inside InspectorControls, not inside the block content area itself.
+.g-form__gtm-preview {
+  max-width: 100%;
+  padding: 8px;
+  overflow-x: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #f0f0f0;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-word;
 }

package/src/blocks/form/form-group/factory.tsx

@@ -29,6 +29,8 @@ export function createFormGroupBlock(options: FormGroupOptions): BlockConfigurat
       submit: {type: 'object', default: {label: 'Odeslat'}},
       gdpr: {type: 'object', default: {content: '', checkbox: true}},
       successMessage: {type: 'string', default: 'Formulář byl úspěšně odeslán.'},
+      gtmEnabled: {type: 'boolean', default: false},
+      gtmEventName: {type: 'string', default: ''},
     },
     edit: createFormGroupEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/form/form-group/types.ts

@@ -18,6 +18,8 @@ export interface FormGroupAttributes extends Record<string, unknown> {
   submit: {label: string}
   gdpr: {content: string; checkbox: boolean}
   successMessage: string
+  gtmEnabled: boolean
+  gtmEventName: string
 }
 
 export interface FormGroupOptions extends BriloBlockType {}