/**
* BLOCK:Complianz Documents block
*
* Registering the Complianz Privacy Suite documents block with Gutenberg.
*/
import * as api from './utils/api';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls, BlockControls, useBlockProps} = wp.blockEditor;
const { PanelBody, PanelRow, SelectControl, TextControl, TextareaControl, ToolbarButton, ToolbarGroup, Icon} = wp.components;
import {useState, useEffect} from "@wordpress/element";
import DOMPurify from 'dompurify';
/**
* Set custom Complianz Icon
*/
// SVG icon
const iconEl = () => (
<Icon icon={
<svg id="uuid-098657ec-4091-4c5d-b2f8-761b37dc9655" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 22 19.26">
<path className="uuid-fb9dd603-42c0-4281-8513-899f01887edf"
d="m13.54,4.47c-.06-.06-.15-.06-.21,0l-4.9,4.9.21.21,4.9-4.9c.06-.06.06-.16,0-.21h0Zm-4.48,3.19c-.06-.06-.15-.06-.21,0l-1.06,1.06.21.21,1.06-1.06c.06-.06.06-.15,0-.21ZM15.14,1.21c.46,0,.9.19,1.22.53.61.66.56,1.7-.08,2.34l-2.89,2.89c-.06.06-.06.15,0,.21.06.06.15.06.21,0l2.89-2.89c.76-.76.8-2.05.04-2.81-.38-.38-.88-.57-1.39-.57s-1,.19-1.39.57l-6.6,6.6.21.21L13.96,1.7c.31-.32.73-.49,1.17-.49h0Zm-5.64,3.46c-.06-.06-.15-.06-.21,0l-2.77,2.78.21.21,2.78-2.78c.06-.06.06-.15,0-.21h0Zm.74-.52l3.09-3.09c.48-.48,1.13-.75,1.81-.75.52,0,1.01.16,1.43.44.06.04.14.04.19-.02.07-.07.06-.18-.02-.23-.48-.33-1.04-.49-1.6-.49-.73,0-1.47.28-2.03.84l-3.09,3.1c-.06.06-.06.15,0,.21.06.06.16.06.21,0h0Zm2.63,3.56c-.06-.06-.15-.06-.21,0l-2.3,2.3c-.06.06-.06.15,0,.21h0c.06.06.15.06.21,0l2.3-2.3c.06-.06.06-.15,0-.21h0Zm3.46-2.39l-5.97,5.97.21.21,5.97-5.97c.06-.06.06-.15,0-.21-.06-.06-.16-.06-.22,0Zm1.2-4.03c-.05-.08-.17-.09-.23-.03-.05.05-.06.13-.02.19.28.42.43.91.43,1.42,0,.64-.23,1.24-.65,1.71-.06.06-.06.15,0,.21.06.06.16.06.22,0,.88-.98.97-2.43.25-3.5h0Zm-3.24,2.66l.93-.93c.06-.06.06-.15,0-.21-.06-.06-.15-.06-.21,0l-.93.93c-.06.06-.06.15,0,.21.06.06.16.06.21,0h0Zm1.59-1.84c-.2-.19-.47-.29-.73-.29s-.54.1-.75.31l-4.8,4.81c-.06.06-.06.15,0,.21.06.06.15.06.21,0l4.78-4.79c.12-.12.28-.21.46-.24.24-.03.47.05.63.21.14.14.22.33.22.53s-.08.39-.22.53l-6.6,6.6.21.21,6.57-6.57c.42-.42.44-1.13.01-1.54h0Z"/>
<g>
<rect className="uuid-fb9dd603-42c0-4281-8513-899f01887edf" x="7.81" y="5.93" width="2.91" height="5.64"
transform="translate(-3.47 9.11) rotate(-45)"/>
<path className="uuid-fb9dd603-42c0-4281-8513-899f01887edf"
d="m10.7,11.35l-4.62-4.62h0l-1.28-1.28c-.55-.55-1.27-.83-1.99-.83s-1.44.27-1.99.83c-1.1,1.1-1.1,2.89,0,3.99l3.54,3.54h0l1.6,1.6c.06.06.15.06.21,0,0,0,0,0,0,0s0,0,0,0l.36-.36.03.88s0,.04.01.06c0,.02.02.04.03.05.06.06.15.06.21,0h0s0-.01,0-.01l3.82-3.82h0s.04-.04.04-.04Z"/>
<path className="uuid-fb9dd603-42c0-4281-8513-899f01887edf"
d="m11.09,10.9l4.62-4.62h0l1.28-1.28c.55-.55.83-1.27.83-1.99s-.27-1.44-.83-1.99c-1.1-1.1-2.89-1.1-3.99,0l-3.54,3.54h0l-1.6,1.6c-.06.06-.06.15,0,.21,0,0,0,0,0,0s0,0,0,0l.36.36-.88.03s-.04,0-.06.01c-.02,0-.04.02-.05.03-.06.06-.06.15,0,.21h0s0,.01,0,.01l3.82,3.82h0s.04.04.04.04Z"/>
</g>
</svg>
} />
);
const selectDocument = ({ className, isSelected, attributes, setAttributes }) => {
const [documents, setDocuments] = useState([]);
const [documentDataLoaded, setDocumentDataLoaded] = useState(false);
const [selectedDocument, setSelectedDocument] = useState(attributes.selectedDocument);
const [documentSyncStatus, setDocumentSyncStatus] = useState(attributes.documentSyncStatus);
const [customDocumentHtml, setCustomDocumentHtml] = useState('');
useEffect(() => {
api.getDocuments().then( ( response ) => {
let documents = response.data;
setDocuments(documents);
setDocumentDataLoaded(true);
let documentData = false;
if ( documents && 0 !== selectedDocument ) {
// If we have a selected document, find that document and add it.
documentData = documents.find( ( item ) => { return item.id === selectedDocument } );
if (documents.length === 0) {
setAttributes({
hasDocuments: false,
});
}
}
let tempHtml = '';
if ( documentData ) {
tempHtml = documentData.content;
}
if ( attributes.customDocument && attributes.customDocument.length>0 ){
tempHtml = attributes.customDocument;
}
setCustomDocumentHtml(tempHtml);
});
}, [])
const onChangeSelectDocument = (value) => {
// Set the state
setSelectedDocument(value);
// Set the attributes
setAttributes({
selectedDocument: value,
});
}
const onChangeCustomDocument = (html) => {
setAttributes({
customDocument: html,
});
}
const onChangeSelectDocumentSyncStatus = (value) =>{
setDocumentSyncStatus(value);
setAttributes({
documentSyncStatus: value,
});
//we reset the customDocument data
const selectedDocumentData = documents.find((item) => {
return item.id === selectedDocument
});
setCustomDocumentHtml(selectedDocumentData.content);
setAttributes({
customDocument: selectedDocumentData.content,
});
}
let options = [{value: 0, label: __('Select a document', 'complianz-gdpr')}];
let output = __('Loading...', 'complianz-gdpr');
let document_status_options = [
{value: 'sync', label: __('Synchronize document with Complianz', 'complianz-gdpr')},
{value: 'unlink', label: __('Edit document and stop synchronization', 'complianz-gdpr')},
];
if ( !attributes.hasDocuments ){
output = __('No documents found. Please finish the Complianz Privacy Suite wizard to generate documents', 'complianz-gdpr');
}
//preview
if ( attributes.preview ) {
return(
<img alt="preview" src={complianz.cmplz_preview} />
);
}
if ( documentDataLoaded ) {
output = isSelected ? __("Select a document type from the dropdownlist", 'complianz-gdpr') : __('Click this block to show the options', 'complianz-gdpr');
documents.forEach((item) => {
options.push({value: item.id, label: item.title});
});
}
//load content
if ( attributes.selectedDocument!==0 && documentDataLoaded && attributes.selectedDocument.length>0 ) {
const documentData = documents.find((item) => {
return item.id === attributes.selectedDocument
});
if (documentData) output = documentData.content;
}
if ( documentSyncStatus==='sync' ) {
return [
!!isSelected && (
<InspectorControls key='inspector-document'>
<PanelBody title={ __('Document settings', 'complianz-gdpr' ) } initialOpen={ true } >
<PanelRow key="1">
<SelectControl onChange={ (e) => onChangeSelectDocument(e) }
value={ selectedDocument }
label={__('Select a document', 'complianz-gdpr')}
options={options}/>
</PanelRow>
<PanelRow key="2">
<SelectControl onChange={(e) => onChangeSelectDocumentSyncStatus(e) }
value={documentSyncStatus}
label={__('Document sync status', 'complianz-gdpr')}
options={document_status_options}/>
</PanelRow>
</PanelBody>
</InspectorControls>
),
<div key={attributes.selectedDocument} className={className} dangerouslySetInnerHTML={{__html: DOMPurify.sanitize( output ) }}></div>,
]
} else {
let html = documentDataLoaded ? customDocumentHtml : __('Loading...', 'complianz-gdpr');
let syncClassName = className + ' cmplz-unlinked-mode';
return [
!!isSelected && (
<InspectorControls key='inspector-document-settings'>
<PanelBody title={ __('Document settings', 'complianz-gdpr' ) } initialOpen={ true } >
<PanelRow>
<SelectControl onChange={(e) => onChangeSelectDocument(e) }
value={attributes.selectedDocument}
label={__('Select a document', 'complianz-gdpr')}
options={options}/>
</PanelRow>
<PanelRow>
<SelectControl onChange={ (e) => onChangeSelectDocumentSyncStatus(e) }
value={documentSyncStatus}
label={__('Document sync status', 'complianz-gdpr')}
options={document_status_options}/>
</PanelRow>
</PanelBody>
</InspectorControls>
),
<div contentEditable={true}
onInput={(e)=>onChangeCustomDocument(e.currentTarget.innerHTML)}
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(customDocumentHtml) }}
className={syncClassName}
></div>
]
}
}
/**
* Register: a Gutenberg Block.
*
* Registers a new block provided a unique name and an object defining its
* behavior. Once registered, the block is made editor as an option to any
* editor interface where blocks are implemented.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/
* @param {string} name Block name.
* @param {Object} settings Block settings.
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
registerBlockType('complianz/document', {
title: __('Legal document - Complianz', 'complianz-gdpr'), // Block title.
icon: iconEl, // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'widgets',
example: {
attributes: {
'preview' : true,
},
},
keywords: [
__('Privacy Statement', 'complianz-gdpr'),
__('Cookie Policy', 'complianz-gdpr'),
__('Disclaimer', 'complianz-gdpr'),
],
//className: 'cmplz-document',
attributes: {
documentSyncStatus: {
type: 'string',
default: 'sync'
},
customDocument: {
type: 'string',
default: ''
},
hasDocuments: {
type: 'string',
default: 'false',
},
content: {
type: 'string',
source: 'children',
selector: 'p',
},
selectedDocument: {
type: 'string',
default: '',
},
documents: {
type: 'array',
},
document: {
type: 'array',
},
preview: {
type: 'boolean',
default: false,
}
},
/**
* The edit function describes the structure of your block in the context of the editor.
* This represents what the editor will render when the block is used.
*
* The "edit" property must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*/
edit:selectDocument,
/**
* The save function defines the way in which the different attributes should be combined
* into the final markup, which is then serialized by Gutenberg into post_content.
*
* The "save" property must be specified and must be a valid function.
*
* @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
*/
save: function() {
// Rendering in PHP
return null;
},
});
registerBlockType( 'complianz/consent-area', {
title: __( 'Consent Area Block' ),
icon: iconEl,
category: 'widgets',
example: {
attributes: {
'preview' : true,
},
},
attributes: {
category:{
type: 'string',
default: 'marketing',
},
service:{
type: 'service',
default: 'general',
},
blockId:{
type: 'string',
default: ''
},
postId:{
type: 'integer',
default: -1,
},
placeholderContent: {
type: 'string',
default: '',
},
consentedContent: {
type: 'string',
default: '',
},
},
edit: ( props ) => {
const { getCurrentPostId } = wp.data.select("core/editor");
const postId = getCurrentPostId();
const { attributes, setAttributes , isSelected, className} = props;
const [ view, setView ] = useState( 'consented' );
const [ isPreview, setIsPreview ] = useState( false );
const onViewChange = ( value ) => {
setView( value );
};
useEffect( () => {
setAttributes( { postId: postId, category:attributes.category, service:attributes.service } );
if (attributes.blockId==='') {
let blockId = (Math.random() + 1).toString(36).substring(7);
setAttributes( { blockId: blockId } );
}
}, [attributes] );
const blockProps = useBlockProps();
let disabled = !complianz.user_can_unfiltered_html;
return [
!!isSelected && (
<InspectorControls key='inspector-document-settings'>
<PanelBody title={ __('Document settings', 'complianz-gdpr' ) } initialOpen={ true } >
<PanelRow key="1">
<SelectControl
disabled={disabled}
label={ __( 'Category','complianz-gdpr' ) }
value={ attributes.category }
options={ [
{ label: __( 'Preferences','complianz-gdpr' ), value: 'preferences' },
{ label: __( 'Statistics','complianz-gdpr' ), value: 'statistics' },
{ label: __( 'Marketing','complianz-gdpr' ), value: 'marketing' },
] }
onChange={ ( value ) => setAttributes( { category: value } ) }
/>
</PanelRow>
<PanelRow key="2">
<TextControl
disabled={disabled}
label={ __( 'Service','complianz-gdpr' ) }
value={ attributes.service }
onChange={ ( value ) => setAttributes( { service: value } ) }
/>
</PanelRow>
<PanelRow key="3">
<SelectControl
disabled={disabled}
label={ __( 'View' ) }
value={ view }
options={ [
{ label: __( 'Placeholder','complianz-gdpr' ), value: 'placeholder' },
{ label: __( 'Default','complianz-gdpr' ), value: 'consented' },
] }
onChange={ (value )=>onViewChange(value) }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
),
<div {...blockProps} key="cmplz-consent-area">
{
<BlockControls>
<ToolbarGroup>
<ToolbarButton
className="components-tab-button"
isPressed={ ! isPreview }
onClick={ () => setIsPreview(false) }
>
HTML
</ToolbarButton>
<ToolbarButton
className="components-tab-button"
isPressed={ isPreview }
onClick={ () => setIsPreview(true) }
>
{ __( 'Preview' ) }
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
}
{disabled && <div>{__("You do not have sufficient permissions to edit this block.","complianz-gdpr")}</div>}
{ !isPreview && <>
{
view==='placeholder' &&
<TextareaControl key="1"
disabled={disabled}
placeholder={ __( 'You can add custom HTML to create your own placeholder. This placeholder is visible before consent.','complianz-gdpr' ) }
className={className}
value={attributes.placeholderContent}
onChange={ ( value ) => setAttributes( { placeholderContent: value } ) }
/>
}
{
view === 'consented' &&
<TextareaControl key="2"
disabled={disabled}
placeholder={ __( 'You can add custom HTML that requires consent. In the right-side bar you will find the options for this custom block. For instructions, please go to complianz.io/gutenberg for more information.','complianz-gdpr' ) }
className={className}
value={attributes.consentedContent}
onChange={ ( value ) => setAttributes( { consentedContent: value } ) }
/>
}
</>}
{ !!isPreview && <>
{ view === 'placeholder' &&
<div>
<div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize( attributes.placeholderContent ) } }></div>
</div>
}
{ view === 'consented' &&
<div>
<div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize( attributes.consentedContent ) } }></div>
</div>
}
</>}
</div>
]
},
save: function() {
return null;
},
} );
في ظل التحول الرقمي المتسارع، أصبح التسويق الإلكتروني أحد أهم الأدوات التي تعتمد عليها المؤسسات والشركات لتحقيق الانتشار والوصول إلى جمهور أوسع.
في هذا الحوار التسجيلي، نسلّط الضوء على مفهوم التسويق الإلكتروني، أهميته في العصر الحديث، وكيف غيّر قواعد اللعبة في عالم المال والأعمال.
ال