plugin updates

This commit is contained in:
Tony Volpe
2024-06-17 15:33:26 -04:00
parent 3751a5a1a6
commit e4e274a9a7
2674 changed files with 0 additions and 507851 deletions

View File

@@ -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>
);
}

View File

@@ -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}
/>
);
}

View File

@@ -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>
);
}

View File

@@ -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} />;
}

View File

@@ -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),
};
}

View File

@@ -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),
};
}

View File

@@ -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;
}