plugin updates
This commit is contained in:
Tony Volpe
@@ -1,27 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function CalendarIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_903_1965)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13.519 2.48009H15.069H15.0697C16.2619 2.48719 17.2262 3.45597 17.2262 4.65016V12.7434C17.223 12.9953 17.1203 13.2226 16.9549 13.3886L12.6148 17.7287C12.4488 17.8941 12.2214 17.9968 11.9689 18H3.29508C2.09637 18 1.125 17.0286 1.125 15.8299V4.65016C1.125 3.45404 2.09314 2.48396 3.28862 2.48009H4.83867V0.930032C4.83867 0.416577 5.25525 0 5.7687 0C6.28216 0 6.69874 0.416577 6.69874 0.930032V2.48009H11.6589V0.930032C11.6589 0.416577 12.0755 0 12.5889 0C13.1024 0 13.519 0.416577 13.519 0.930032V2.48009ZM2.98506 15.8312C2.99863 15.9882 3.12909 16.1115 3.28862 16.1141H11.5814L11.6589 16.0366V13.634C11.6589 12.9494 12.2143 12.394 12.899 12.394H15.2951L15.3726 12.3165V7.4338H2.98506V15.8312ZM4.83868 8.68029H6.07873H6.07937C6.42684 8.68029 6.71037 8.95478 6.72458 9.30032V14.2863C6.72458 14.6428 6.43524 14.9322 6.07873 14.9322H4.83868C4.48217 14.9322 4.19283 14.6428 4.19283 14.2863V9.32615C4.19283 8.96964 4.48217 8.68029 4.83868 8.68029ZM8.53298 8.68029H9.82469H9.82534C10.1728 8.68029 10.4563 8.95478 10.4705 9.30032V14.2863C10.4705 14.6428 10.1812 14.9322 9.82469 14.9322H8.53298C8.17647 14.9322 7.88712 14.6428 7.88712 14.2863V9.32615C7.88712 8.96964 8.17647 8.68029 8.53298 8.68029ZM13.519 8.68029H12.2789C11.9366 8.68029 11.6589 8.95801 11.6589 9.30032V10.5404C11.6589 10.8827 11.9366 11.1604 12.2789 11.1604H13.519C13.8613 11.1604 14.139 10.8827 14.139 10.5404V9.30032C14.139 8.95801 13.8613 8.68029 13.519 8.68029Z"
|
||||
fill="#FF7A59"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_903_1965">
|
||||
<rect width="18" height="18" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function SidebarSprocketIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="20px"
|
||||
height="20px"
|
||||
version="1.1"
|
||||
viewBox="0 0 40 42"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<path
|
||||
d="M28.8989809,30.0402293 C25.817707,30.0402293 23.319363,27.5423949 23.319363,24.461121 C23.319363,21.3798471 25.817707,18.881758 28.8989809,18.881758 C31.98,18.881758 34.4780892,21.3798471 34.4780892,24.461121 C34.4780892,27.5423949 31.98,30.0402293 28.8989809,30.0402293 M30.5692994,13.7199745 L30.5692994,8.75717196 C31.864586,8.14519744 32.7723567,6.8346242 32.7723567,5.31360508 L32.7723567,5.1989554 C32.7723567,3.10010191 31.0546497,1.38264968 28.956051,1.38264968 L28.8414013,1.38264968 C26.7425478,1.38264968 25.0248408,3.10010191 25.0248408,5.1989554 L25.0248408,5.31360508 C25.0248408,6.8346242 25.9328662,8.14519744 27.2281529,8.75717196 L27.2281529,13.7202293 C25.2994904,14.0180637 23.5371974,14.8137325 22.0829299,15.9844331 L8.45643312,5.38417836 C8.54611464,5.0392102 8.6090446,4.6835414 8.60955416,4.310293 C8.61261148,1.93271338 6.68777072,0.00303184713 4.31019108,-2.5477707e-05 C1.93286624,-0.00308280255 0.0029299363,1.92175796 0.000127388535,4.29933756 C-0.0029299363,6.67666244 1.92191083,8.60634396 4.29949044,8.60940128 C5.07426752,8.6104204 5.7912102,8.390293 6.42,8.03284076 L19.8243312,18.4603567 C18.6842038,20.181121 18.0166879,22.2422675 18.0166879,24.461121 C18.0166879,26.7841784 18.7504458,28.9327134 19.9907006,30.7001019 L15.9142675,34.776535 C15.5919745,34.6799745 15.2574522,34.6122038 14.9033121,34.6122038 C12.9499363,34.6122038 11.3659873,36.1961529 11.3659873,38.1497834 C11.3659873,40.103414 12.9499363,41.6871084 14.9033121,41.6871084 C16.8571974,41.6871084 18.4408917,40.103414 18.4408917,38.1497834 C18.4408917,37.7958981 18.3733758,37.461121 18.2765605,37.1390828 L22.3089172,33.1067261 C24.1392357,34.5041784 26.4184713,35.3431592 28.8989809,35.3431592 C34.9089172,35.3431592 39.7810191,30.4710573 39.7810191,24.461121 C39.7810191,19.0203567 35.7840764,14.5255796 30.5692994,13.7199745"
|
||||
id="Fill-1"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function SprocketIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="40px"
|
||||
height="42px"
|
||||
viewBox="0 0 40 42"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<defs>
|
||||
<polygon
|
||||
id="path-1"
|
||||
points="0.000123751494 0 39.7808917 0 39.7808917 41.6871084 0.000123751494 41.6871084"
|
||||
/>
|
||||
</defs>
|
||||
<g
|
||||
id="Page-1"
|
||||
stroke="none"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
>
|
||||
<g id="HubSpot-Sprocket---Full-Color">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlinkHref="#path-1" />
|
||||
</mask>
|
||||
<g id="path-1" />
|
||||
<path
|
||||
d="M28.8989809,30.0402293 C25.817707,30.0402293 23.319363,27.5423949 23.319363,24.461121 C23.319363,21.3798471 25.817707,18.881758 28.8989809,18.881758 C31.98,18.881758 34.4780892,21.3798471 34.4780892,24.461121 C34.4780892,27.5423949 31.98,30.0402293 28.8989809,30.0402293 M30.5692994,13.7199745 L30.5692994,8.75717196 C31.864586,8.14519744 32.7723567,6.8346242 32.7723567,5.31360508 L32.7723567,5.1989554 C32.7723567,3.10010191 31.0546497,1.38264968 28.956051,1.38264968 L28.8414013,1.38264968 C26.7425478,1.38264968 25.0248408,3.10010191 25.0248408,5.1989554 L25.0248408,5.31360508 C25.0248408,6.8346242 25.9328662,8.14519744 27.2281529,8.75717196 L27.2281529,13.7202293 C25.2994904,14.0180637 23.5371974,14.8137325 22.0829299,15.9844331 L8.45643312,5.38417836 C8.54611464,5.0392102 8.6090446,4.6835414 8.60955416,4.310293 C8.61261148,1.93271338 6.68777072,0.00303184713 4.31019108,-2.5477707e-05 C1.93286624,-0.00308280255 0.0029299363,1.92175796 0.000127388535,4.29933756 C-0.0029299363,6.67666244 1.92191083,8.60634396 4.29949044,8.60940128 C5.07426752,8.6104204 5.7912102,8.390293 6.42,8.03284076 L19.8243312,18.4603567 C18.6842038,20.181121 18.0166879,22.2422675 18.0166879,24.461121 C18.0166879,26.7841784 18.7504458,28.9327134 19.9907006,30.7001019 L15.9142675,34.776535 C15.5919745,34.6799745 15.2574522,34.6122038 14.9033121,34.6122038 C12.9499363,34.6122038 11.3659873,36.1961529 11.3659873,38.1497834 C11.3659873,40.103414 12.9499363,41.6871084 14.9033121,41.6871084 C16.8571974,41.6871084 18.4408917,40.103414 18.4408917,38.1497834 C18.4408917,37.7958981 18.3733758,37.461121 18.2765605,37.1390828 L22.3089172,33.1067261 C24.1392357,34.5041784 26.4184713,35.3431592 28.8989809,35.3431592 C34.9089172,35.3431592 39.7810191,30.4710573 39.7810191,24.461121 C39.7810191,19.0203567 35.7840764,14.5255796 30.5692994,13.7199745"
|
||||
id="Fill-1"
|
||||
fill="#F3785B"
|
||||
fillRule="nonzero"
|
||||
mask="url(#mask-2)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { RawHTML } from '@wordpress/element';
|
||||
import { IFormBlockAttributes } from './registerFormBlock';
|
||||
|
||||
export default function FormSaveBlock({ attributes }: IFormBlockAttributes) {
|
||||
const { portalId, formId } = attributes;
|
||||
|
||||
if (portalId && formId) {
|
||||
return (
|
||||
<RawHTML className="wp-block-leadin-hubspot-form-block">
|
||||
{`[hubspot portal="${portalId}" id="${formId}" type="form"]`}
|
||||
</RawHTML>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { pluginPath } from '../../constants/leadinConfig';
|
||||
import UIImage from '../UIComponents/UIImage';
|
||||
|
||||
export default function FormGutenbergPreview() {
|
||||
return (
|
||||
<Fragment>
|
||||
<UIImage
|
||||
alt="Create a new Hubspot Form"
|
||||
src={`${pluginPath}/public/assets/images/hubspot-form.png`}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import React from 'react';
|
||||
import * as WpBlocksApi from '@wordpress/blocks';
|
||||
import SprocketIcon from '../Common/SprocketIcon';
|
||||
import FormBlockSave from './FormBlockSave';
|
||||
import { connectionStatus } from '../../constants/leadinConfig';
|
||||
import FormGutenbergPreview from './FormGutenbergPreview';
|
||||
import ErrorHandler from '../../shared/Common/ErrorHandler';
|
||||
import FormEdit from '../../shared/Form/FormEdit';
|
||||
import ConnectionStatus from '../../shared/enums/connectionStatus';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isFullSiteEditor } from '../../utils/withMetaData';
|
||||
|
||||
export interface IFormBlockAttributes {
|
||||
attributes: {
|
||||
portalId: string;
|
||||
formId: string;
|
||||
preview?: boolean;
|
||||
formName: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface IFormBlockProps extends IFormBlockAttributes {
|
||||
setAttributes: Function;
|
||||
isSelected: boolean;
|
||||
context?: any;
|
||||
}
|
||||
|
||||
export default function registerFormBlock() {
|
||||
const editComponent = (props: IFormBlockProps) => {
|
||||
if (props.attributes.preview) {
|
||||
return <FormGutenbergPreview />;
|
||||
} else if (connectionStatus === ConnectionStatus.Connected) {
|
||||
return <FormEdit {...props} origin="gutenberg" preview={true} />;
|
||||
} else {
|
||||
return <ErrorHandler status={401} />;
|
||||
}
|
||||
};
|
||||
|
||||
// We do not support the full site editor: https://issues.hubspotcentral.com/browse/WP-1033
|
||||
if (!WpBlocksApi || isFullSiteEditor()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
WpBlocksApi.registerBlockType('leadin/hubspot-form-block', {
|
||||
title: __('HubSpot Form', 'leadin'),
|
||||
description: __('Select and embed a HubSpot form', 'leadin'),
|
||||
icon: SprocketIcon,
|
||||
category: 'leadin-blocks',
|
||||
attributes: {
|
||||
portalId: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
} as WpBlocksApi.BlockAttribute<string>,
|
||||
formId: {
|
||||
type: 'string',
|
||||
} as WpBlocksApi.BlockAttribute<string>,
|
||||
formName: {
|
||||
type: 'string',
|
||||
} as WpBlocksApi.BlockAttribute<string>,
|
||||
preview: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
} as WpBlocksApi.BlockAttribute<boolean>,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
preview: true,
|
||||
},
|
||||
},
|
||||
edit: editComponent,
|
||||
save: props => <FormBlockSave {...props} />,
|
||||
});
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { pluginPath } from '../../constants/leadinConfig';
|
||||
import UIImage from '../UIComponents/UIImage';
|
||||
|
||||
export default function MeetingGutenbergPreview() {
|
||||
return (
|
||||
<Fragment>
|
||||
<UIImage
|
||||
alt="Create a new Hubspot Meeting"
|
||||
width="100%"
|
||||
src={`${pluginPath}/public/assets/images/hubspot-meetings.png`}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from 'react';
|
||||
import { RawHTML } from '@wordpress/element';
|
||||
import { IMeetingBlockAttributes } from './registerMeetingBlock';
|
||||
|
||||
export default function MeetingSaveBlock({
|
||||
attributes,
|
||||
}: IMeetingBlockAttributes) {
|
||||
const { url } = attributes;
|
||||
|
||||
if (url) {
|
||||
return (
|
||||
<RawHTML className="wp-block-leadin-hubspot-meeting-block">{`[hubspot url="${url}" type="meeting"]`}</RawHTML>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from 'react';
|
||||
import * as WpBlocksApi from '@wordpress/blocks';
|
||||
import CalendarIcon from '../Common/CalendarIcon';
|
||||
import { connectionStatus } from '../../constants/leadinConfig';
|
||||
import MeetingGutenbergPreview from './MeetingGutenbergPreview';
|
||||
import MeetingSaveBlock from './MeetingSaveBlock';
|
||||
import MeetingEdit from '../../shared/Meeting/MeetingEdit';
|
||||
import ErrorHandler from '../../shared/Common/ErrorHandler';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { isFullSiteEditor } from '../../utils/withMetaData';
|
||||
|
||||
const ConnectionStatus = {
|
||||
Connected: 'Connected',
|
||||
NotConnected: 'NotConnected',
|
||||
};
|
||||
|
||||
export interface IMeetingBlockAttributes {
|
||||
attributes: {
|
||||
url: string;
|
||||
preview?: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export interface IMeetingBlockProps extends IMeetingBlockAttributes {
|
||||
setAttributes: Function;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
export default function registerMeetingBlock() {
|
||||
const editComponent = (props: IMeetingBlockProps) => {
|
||||
if (props.attributes.preview) {
|
||||
return <MeetingGutenbergPreview />;
|
||||
} else if (connectionStatus === ConnectionStatus.Connected) {
|
||||
return <MeetingEdit {...props} preview={true} origin="gutenberg" />;
|
||||
} else {
|
||||
return <ErrorHandler status={401} />;
|
||||
}
|
||||
};
|
||||
|
||||
// We do not support the full site editor: https://issues.hubspotcentral.com/browse/WP-1033
|
||||
if (!WpBlocksApi || isFullSiteEditor()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
WpBlocksApi.registerBlockType('leadin/hubspot-meeting-block', {
|
||||
title: __('Hubspot Meetings Scheduler', 'leadin'),
|
||||
description: __(
|
||||
'Schedule meetings faster and forget the back-and-forth emails Your calendar stays full, and you stay productive',
|
||||
'leadin'
|
||||
),
|
||||
icon: CalendarIcon,
|
||||
category: 'leadin-blocks',
|
||||
attributes: {
|
||||
url: {
|
||||
type: 'string',
|
||||
default: '',
|
||||
} as WpBlocksApi.BlockAttribute<string>,
|
||||
preview: {
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
} as WpBlocksApi.BlockAttribute<boolean>,
|
||||
},
|
||||
example: {
|
||||
attributes: {
|
||||
preview: true,
|
||||
},
|
||||
},
|
||||
edit: editComponent,
|
||||
save: props => <MeetingSaveBlock {...props} />,
|
||||
});
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
import * as WpPluginsLib from '@wordpress/plugins';
|
||||
import { PluginSidebar } from '@wordpress/edit-post';
|
||||
import { PanelBody, Icon } from '@wordpress/components';
|
||||
import { withSelect } from '@wordpress/data';
|
||||
import UISidebarSelectControl from '../UIComponents/UISidebarSelectControl';
|
||||
import SidebarSprocketIcon from '../Common/SidebarSprocketIcon';
|
||||
import styled from 'styled-components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { BackgroudAppContext } from '../../iframe/useBackgroundApp';
|
||||
import { refreshToken } from '../../constants/leadinConfig';
|
||||
import { getOrCreateBackgroundApp } from '../../utils/backgroundAppUtils';
|
||||
|
||||
export function registerHubspotSidebar() {
|
||||
const ContentTypeLabelStyle = styled.div`
|
||||
white-space: normal;
|
||||
text-transform: none;
|
||||
`;
|
||||
|
||||
const ContentTypeLabel = (
|
||||
<ContentTypeLabelStyle>
|
||||
{__(
|
||||
'Select the content type HubSpot Analytics uses to track this page',
|
||||
'leadin'
|
||||
)}
|
||||
</ContentTypeLabelStyle>
|
||||
);
|
||||
|
||||
const LeadinPluginSidebar = ({ postType }: { postType: string }) =>
|
||||
postType ? (
|
||||
<PluginSidebar
|
||||
name="leadin"
|
||||
title="HubSpot"
|
||||
icon={
|
||||
<Icon
|
||||
className="hs-plugin-sidebar-sprocket"
|
||||
icon={SidebarSprocketIcon()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<PanelBody title={__('HubSpot Analytics', 'leadin')} initialOpen={true}>
|
||||
<BackgroudAppContext.Provider
|
||||
value={refreshToken && getOrCreateBackgroundApp(refreshToken)}
|
||||
>
|
||||
<UISidebarSelectControl
|
||||
metaKey="content-type"
|
||||
className="select-content-type"
|
||||
label={ContentTypeLabel}
|
||||
options={[
|
||||
{ label: __('Detect Automatically', 'leadin'), value: '' },
|
||||
{ label: __('Blog Post', 'leadin'), value: 'blog-post' },
|
||||
{
|
||||
label: __('Knowledge Article', 'leadin'),
|
||||
value: 'knowledge-article',
|
||||
},
|
||||
{ label: __('Landing Page', 'leadin'), value: 'landing-page' },
|
||||
{ label: __('Listing Page', 'leadin'), value: 'listing-page' },
|
||||
{
|
||||
label: __('Standard Page', 'leadin'),
|
||||
value: 'standard-page',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</BackgroudAppContext.Provider>
|
||||
</PanelBody>
|
||||
</PluginSidebar>
|
||||
) : null;
|
||||
const LeadinPluginSidebarWrapper = withSelect((select: Function) => {
|
||||
const data = select('core/editor');
|
||||
return {
|
||||
postType:
|
||||
data &&
|
||||
data.getCurrentPostType() &&
|
||||
data.getEditedPostAttribute('meta'),
|
||||
};
|
||||
})(LeadinPluginSidebar);
|
||||
if (WpPluginsLib) {
|
||||
WpPluginsLib.registerPlugin('leadin', {
|
||||
render: LeadinPluginSidebarWrapper,
|
||||
icon: SidebarSprocketIcon,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import { styled } from '@linaria/react';
|
||||
|
||||
export default styled.img`
|
||||
height: ${props => (props.height ? props.height : 'auto')};
|
||||
width: ${props => (props.width ? props.width : 'auto')};
|
||||
`;
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { SelectControl } from '@wordpress/components';
|
||||
import withMetaData from '../../utils/withMetaData';
|
||||
import {
|
||||
useBackgroundAppContext,
|
||||
usePostBackgroundMessage,
|
||||
} from '../../iframe/useBackgroundApp';
|
||||
import { ProxyMessages } from '../../iframe/integratedMessages';
|
||||
|
||||
interface IOption {
|
||||
label: string;
|
||||
value: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface IUISidebarSelectControlProps {
|
||||
metaValue?: string;
|
||||
metaKey: string;
|
||||
setMetaValue?: Function;
|
||||
options: IOption[];
|
||||
className: string;
|
||||
label: JSX.Element;
|
||||
}
|
||||
|
||||
const UISidebarSelectControl = (props: IUISidebarSelectControlProps) => {
|
||||
const isBackgroundAppReady = useBackgroundAppContext();
|
||||
|
||||
const monitorSidebarMetaChange = usePostBackgroundMessage();
|
||||
|
||||
return (
|
||||
<SelectControl
|
||||
value={props.metaValue}
|
||||
onChange={content => {
|
||||
if (props.setMetaValue) {
|
||||
props.setMetaValue(content);
|
||||
}
|
||||
isBackgroundAppReady &&
|
||||
monitorSidebarMetaChange({
|
||||
key: ProxyMessages.TrackSidebarMetaChange,
|
||||
payload: {
|
||||
metaKey: props.metaKey,
|
||||
},
|
||||
});
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default withMetaData(UISidebarSelectControl);
|
||||
Reference in New Issue
Block a user