plugin updates
This commit is contained in:
@@ -1,81 +0,0 @@
|
||||
import React, { Fragment, useEffect } from 'react';
|
||||
import { portalId, refreshToken } from '../../constants/leadinConfig';
|
||||
import UISpacer from '../UIComponents/UISpacer';
|
||||
import PreviewForm from './PreviewForm';
|
||||
import FormSelect from './FormSelect';
|
||||
import { IFormBlockProps } from '../../gutenberg/FormBlock/registerFormBlock';
|
||||
import {
|
||||
usePostBackgroundMessage,
|
||||
BackgroudAppContext,
|
||||
useBackgroundAppContext,
|
||||
} from '../../iframe/useBackgroundApp';
|
||||
import { ProxyMessages } from '../../iframe/integratedMessages';
|
||||
import LoadingBlock from '../Common/LoadingBlock';
|
||||
import { getOrCreateBackgroundApp } from '../../utils/backgroundAppUtils';
|
||||
|
||||
interface IFormEditProps extends IFormBlockProps {
|
||||
preview: boolean;
|
||||
origin: 'gutenberg' | 'elementor';
|
||||
}
|
||||
|
||||
function FormEdit({
|
||||
attributes,
|
||||
isSelected,
|
||||
setAttributes,
|
||||
preview = true,
|
||||
origin = 'gutenberg',
|
||||
}: IFormEditProps) {
|
||||
const { formId, formName } = attributes;
|
||||
const formSelected = portalId && formId;
|
||||
|
||||
const isBackgroundAppReady = useBackgroundAppContext();
|
||||
const monitorFormPreviewRender = usePostBackgroundMessage();
|
||||
|
||||
const handleChange = (selectedForm: { value: string; label: string }) => {
|
||||
setAttributes({
|
||||
portalId,
|
||||
formId: selectedForm.value,
|
||||
formName: selectedForm.label,
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
monitorFormPreviewRender({
|
||||
key: ProxyMessages.TrackFormPreviewRender,
|
||||
payload: {
|
||||
origin,
|
||||
},
|
||||
});
|
||||
}, [origin]);
|
||||
|
||||
return !isBackgroundAppReady ? (
|
||||
<LoadingBlock />
|
||||
) : (
|
||||
<Fragment>
|
||||
{(isSelected || !formSelected) && (
|
||||
<FormSelect
|
||||
formId={formId}
|
||||
formName={formName}
|
||||
handleChange={handleChange}
|
||||
origin={origin}
|
||||
/>
|
||||
)}
|
||||
{formSelected && (
|
||||
<Fragment>
|
||||
{isSelected && <UISpacer />}
|
||||
{preview && <PreviewForm portalId={portalId} formId={formId} />}
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FormEditContainer(props: IFormEditProps) {
|
||||
return (
|
||||
<BackgroudAppContext.Provider
|
||||
value={refreshToken && getOrCreateBackgroundApp(refreshToken)}
|
||||
>
|
||||
<FormEdit {...props} />
|
||||
</BackgroudAppContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import React from 'react';
|
||||
import FormSelector from './FormSelector';
|
||||
import LoadingBlock from '../Common/LoadingBlock';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import useForms from './hooks/useForms';
|
||||
import useCreateFormFromTemplate from './hooks/useCreateFormFromTemplate';
|
||||
import { FormType, isDefaultForm } from '../../constants/defaultFormOptions';
|
||||
import ErrorHandler from '../Common/ErrorHandler';
|
||||
|
||||
interface IFormSelectProps {
|
||||
formId: string;
|
||||
formName: string;
|
||||
handleChange: Function;
|
||||
origin: 'gutenberg' | 'elementor';
|
||||
}
|
||||
|
||||
export default function FormSelect({
|
||||
formId,
|
||||
formName,
|
||||
handleChange,
|
||||
origin = 'gutenberg',
|
||||
}: IFormSelectProps) {
|
||||
const { search, formApiError, reset } = useForms();
|
||||
const {
|
||||
createFormByTemplate,
|
||||
reset: createReset,
|
||||
isCreating,
|
||||
hasError,
|
||||
formApiError: createApiError,
|
||||
} = useCreateFormFromTemplate(origin);
|
||||
const value =
|
||||
formId && formName
|
||||
? {
|
||||
label: formName,
|
||||
value: formId,
|
||||
}
|
||||
: null;
|
||||
|
||||
const handleLocalChange = (option: { value: FormType }) => {
|
||||
if (isDefaultForm(option.value)) {
|
||||
createFormByTemplate(option.value).then(({ guid, name }) => {
|
||||
handleChange({
|
||||
value: guid,
|
||||
label: name,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
handleChange(option);
|
||||
}
|
||||
};
|
||||
|
||||
return isCreating ? (
|
||||
<LoadingBlock />
|
||||
) : formApiError || createApiError ? (
|
||||
<ErrorHandler
|
||||
status={formApiError ? formApiError.status : createApiError.status}
|
||||
resetErrorState={() => {
|
||||
if (hasError) {
|
||||
createReset();
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
}}
|
||||
errorInfo={{
|
||||
header: __('There was a problem retrieving your forms', 'leadin'),
|
||||
message: __(
|
||||
'Please refresh your forms or try again in a few minutes',
|
||||
'leadin'
|
||||
),
|
||||
action: __('Refresh forms', 'leadin'),
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FormSelector
|
||||
loadOptions={search}
|
||||
onChange={(option: { value: FormType }) => handleLocalChange(option)}
|
||||
value={value}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import HubspotWrapper from '../Common/HubspotWrapper';
|
||||
import { pluginPath } from '../../constants/leadinConfig';
|
||||
import AsyncSelect from '../Common/AsyncSelect';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
interface IFormSelectorProps {
|
||||
loadOptions: Function;
|
||||
onChange: Function;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export default function FormSelector({
|
||||
loadOptions,
|
||||
onChange,
|
||||
value,
|
||||
}: IFormSelectorProps) {
|
||||
return (
|
||||
<HubspotWrapper pluginPath={pluginPath}>
|
||||
<p data-test-id="leadin-form-select">
|
||||
<b>
|
||||
{__(
|
||||
'Select an existing form or create a new one from a template',
|
||||
'leadin'
|
||||
)}
|
||||
</b>
|
||||
</p>
|
||||
<AsyncSelect
|
||||
placeholder={__('Search for a form', 'leadin')}
|
||||
value={value}
|
||||
loadOptions={loadOptions}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</HubspotWrapper>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import UIOverlay from '../UIComponents/UIOverlay';
|
||||
import { formsScriptPayload, hublet } from '../../constants/leadinConfig';
|
||||
import useFormScript from './hooks/useFormsScript';
|
||||
|
||||
export default function PreviewForm({
|
||||
portalId,
|
||||
formId,
|
||||
}: {
|
||||
portalId: number;
|
||||
formId: string;
|
||||
}) {
|
||||
const inputEl = useRef<HTMLDivElement>(null);
|
||||
const ready = useFormScript();
|
||||
|
||||
useEffect(() => {
|
||||
if (!ready) {
|
||||
return;
|
||||
}
|
||||
if (inputEl.current) {
|
||||
inputEl.current.innerHTML = '';
|
||||
const embedScript = document.createElement('script');
|
||||
embedScript.innerHTML = `hbspt.forms.create({ portalId: '${portalId}', formId: '${formId}', region: '${hublet}', ${formsScriptPayload} });`;
|
||||
inputEl.current.appendChild(embedScript);
|
||||
}
|
||||
}, [formId, portalId, ready, inputEl]);
|
||||
|
||||
return <UIOverlay ref={inputEl} />;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
usePostAsyncBackgroundMessage,
|
||||
usePostBackgroundMessage,
|
||||
} from '../../../iframe/useBackgroundApp';
|
||||
import { FormType } from '../../../constants/defaultFormOptions';
|
||||
import LoadState, { LoadStateType } from '../../enums/loadState';
|
||||
import { ProxyMessages } from '../../../iframe/integratedMessages';
|
||||
|
||||
export default function useCreateFormFromTemplate(origin = 'gutenberg') {
|
||||
const proxy = usePostAsyncBackgroundMessage();
|
||||
const track = usePostBackgroundMessage();
|
||||
const [loadState, setLoadState] = useState<LoadStateType>(LoadState.Idle);
|
||||
const [formApiError, setFormApiError] = useState<any>(null);
|
||||
|
||||
const createFormByTemplate = (type: FormType) => {
|
||||
setLoadState(LoadState.Loading);
|
||||
track({
|
||||
key: ProxyMessages.TrackFormCreatedFromTemplate,
|
||||
payload: {
|
||||
type,
|
||||
origin,
|
||||
},
|
||||
});
|
||||
|
||||
return proxy({
|
||||
key: ProxyMessages.CreateFormFromTemplate,
|
||||
payload: type,
|
||||
})
|
||||
.then(form => {
|
||||
setLoadState(LoadState.Idle);
|
||||
return form;
|
||||
})
|
||||
.catch(err => {
|
||||
setFormApiError(err);
|
||||
track({
|
||||
key: ProxyMessages.TrackFormCreationFailed,
|
||||
payload: {
|
||||
origin,
|
||||
},
|
||||
});
|
||||
setLoadState(LoadState.Failed);
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
isCreating: loadState === LoadState.Loading,
|
||||
hasError: loadState === LoadState.Failed,
|
||||
formApiError,
|
||||
createFormByTemplate,
|
||||
reset: () => setLoadState(LoadState.Idle),
|
||||
};
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { usePostAsyncBackgroundMessage } from '../../../iframe/useBackgroundApp';
|
||||
import { DEFAULT_OPTIONS } from '../../../constants/defaultFormOptions';
|
||||
import { ProxyMessages } from '../../../iframe/integratedMessages';
|
||||
import { IForm } from '../../types';
|
||||
|
||||
export default function useForms() {
|
||||
const proxy = usePostAsyncBackgroundMessage();
|
||||
const [formApiError, setFormApiError] = useState<any>(null);
|
||||
|
||||
const search = debounce(
|
||||
(search: string, callback: Function) => {
|
||||
return proxy({
|
||||
key: ProxyMessages.FetchForms,
|
||||
payload: {
|
||||
search,
|
||||
},
|
||||
})
|
||||
.then(forms => {
|
||||
callback([
|
||||
...forms.map((form: IForm) => ({
|
||||
label: form.name,
|
||||
value: form.guid,
|
||||
})),
|
||||
DEFAULT_OPTIONS,
|
||||
]);
|
||||
})
|
||||
.catch(error => {
|
||||
setFormApiError(error);
|
||||
});
|
||||
},
|
||||
300,
|
||||
{ trailing: true }
|
||||
);
|
||||
|
||||
return {
|
||||
search,
|
||||
formApiError,
|
||||
reset: () => setFormApiError(null),
|
||||
};
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import $ from 'jquery';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { formsScript } from '../../../constants/leadinConfig';
|
||||
import Raven from '../../../lib/Raven';
|
||||
|
||||
let promise: Promise<string | undefined>;
|
||||
|
||||
function loadFormsScript() {
|
||||
if (!promise) {
|
||||
promise = new Promise((resolve, reject) =>
|
||||
$.getScript(formsScript)
|
||||
.done(resolve)
|
||||
.fail(reject)
|
||||
);
|
||||
}
|
||||
return promise;
|
||||
}
|
||||
|
||||
export default function useFormScript() {
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadFormsScript()
|
||||
.then(() => setReady(true))
|
||||
.catch(error => Raven.captureException(error));
|
||||
}, []);
|
||||
|
||||
return ready;
|
||||
}
|
||||
Reference in New Issue
Block a user