Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@iruzevic
iruzevic committed Aug 28, 2023
1 parent b12d2be commit ef62dcf
Show file tree
Hide file tree
Showing 16 changed files with 128 additions and 304 deletions.
2 changes: 1 addition & 1 deletion eightshift-forms.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level.
* Author: WordPress team @Infinum
* Author URI: https://eightshift.com/
* Version: 4.0.69
* Version: 4.0.70
* Text Domain: eightshift-forms
*
* @package EightshiftForms
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"webpack-cli": "^4.10.0"
},
"dependencies": {
"@eightshift/frontend-libs": "^8.4.2",
"@eightshift/frontend-libs": "^8.4.4",
"autosize": "^6.0.1",
"choices.js": "^10.2.0",
"dropzone": "^6.0.0-beta.2",
Expand Down
41 changes: 12 additions & 29 deletions src/Blocks/components/utils/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -552,9 +552,9 @@ export const DashboardButton = () => {
/**
* Returns output select item with icon.
*
* @returns Component
* @returns object
*/
export const OutputFormSelectItemWithIcon = ({props}) => {
export const outputFormSelectItemWithIcon = (props) => {
const utilsIcons = select(STORE_NAME).getComponent('utils').icons;

const {
Expand All @@ -571,38 +571,21 @@ export const OutputFormSelectItemWithIcon = ({props}) => {
let icon = utilsIcons.post;

if (!outputLabel) {
outputLabel = `Form ${id}`;
outputLabel = __(`Form ${id}`, 'eightshift-forms');
}

if (utilsIcons?.[metadata]) {
icon = utilsIcons[metadata];
}

return (
<span dangerouslySetInnerHTML={{ __html: `<span class="es-display-inline-flex es-vertical-align-middle es-mr-2">${icon}</span>${outputLabel}`}} />
)
}

/**
* Returns output select item.
*
* @returns Component
*/
export const OutputFormSelectItem = ({props}) => {
const {
label,
id,
} = props;

if (!id) {
return '';
}

let outputLabel = unescapeHTML(label);

if (!outputLabel) {
outputLabel = `Form ${id}`;
if (isDeveloperMode()) {
outputLabel = `${outputLabel} (${id})`;
}

return outputLabel;
}
return {
id,
label: <span dangerouslySetInnerHTML={{ __html: `<span class="es-display-inline-flex es-vertical-align-middle es-mr-2">${icon}</span>${outputLabel}`}} />,
value: id,
metadata,
};
};
109 changes: 41 additions & 68 deletions src/Blocks/custom/forms/components/forms-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,20 @@ import { ServerSideRender,
props,
icons,
AsyncSelect,
getFetchWpApi,
getAttrKey,
STORE_NAME,
} from '@eightshift/frontend-libs/scripts';
import { __ } from '@wordpress/i18n';
import { Placeholder } from '@wordpress/components';
import { ConditionalTagsEditor } from '../../../components/conditional-tags/components/conditional-tags-editor';
import { getFilteredAttributes, OutputFormSelectItemWithIcon } from '../../../components/utils';
import { getFilteredAttributes, outputFormSelectItemWithIcon } from '../../../components/utils';

export const FormsEditor = ({ attributes, setAttributes, preview }) => {
export const FormsEditor = ({
attributes,
setAttributes,
preview,
formSelectOptions
}) => {
const manifest = select(STORE_NAME).getBlock('forms');

const {
Expand All @@ -23,44 +27,12 @@ export const FormsEditor = ({ attributes, setAttributes, preview }) => {

const {
attributesSsr,
postType,
} = manifest;

const {
isGeoPreview,
} = preview;


const formSelectOptions = getFetchWpApi(
postType,
{
noCache: true,
processLabel: ({ title: { rendered: label }, integration_type: metadata, id }) => {
return <OutputFormSelectItemWithIcon props={{
label,
id,
metadata,
}} />
},
fields: 'id,title,integration_type',
processMetadata: ({ title: { rendered: label }, integration_type: metadata, id }) => ({
id,
value: id,
label,
metadata,
}),
}
);

const FormSelectValue = ({props}) => {
return <OutputFormSelectItemWithIcon props={{
label: props?.label,
id: props?.id,
metadata: props?.metadata,
}} />
}


const formsFormGeolocationAlternatives = checkAttr('formsFormGeolocationAlternatives', attributes, manifest);
const formsFormPostIdRaw = checkAttr('formsFormPostIdRaw', attributes, manifest);
const formsFormPostId = checkAttr('formsFormPostId', attributes, manifest);
Expand All @@ -75,20 +47,7 @@ export const FormsEditor = ({ attributes, setAttributes, preview }) => {
<AsyncSelect
label={<span className='es-mb-0! es-mx-0! es-mt-1! es-text-3.5 es-font-weight-500'>To get started, select a form:</span>}
help={__('If you can\'t find a form, start typing its name while the dropdown is open.', 'eightshift-forms')}
value={
formsFormPostIdRaw ?
{
...formsFormPostIdRaw,
label: <FormSelectValue props={formsFormPostIdRaw} />,
} :
(formsFormPostId ?
{
label: 'Selected item',
id: parseInt(formsFormPostId ?? -1)
} :
null
)
}
value={outputFormSelectItemWithIcon(Object.keys(formsFormPostIdRaw).length ? formsFormPostIdRaw : {id: formsFormPostId})}
loadOptions={formSelectOptions}
onChange={(value) => {
setAttributes({
Expand All @@ -99,7 +58,7 @@ export const FormsEditor = ({ attributes, setAttributes, preview }) => {
metadata: value?.metadata?.metadata,
},
[getAttrKey('formsFormPostId', attributes, manifest)]: `${value?.value}`,
})
});
}}
noBottomSpacing
/>
Expand All @@ -109,6 +68,12 @@ export const FormsEditor = ({ attributes, setAttributes, preview }) => {

return (
<>
{isGeoPreview &&
<div className='es-text-7 es-mb-8 es-text-align-center es-font-weight-700'>
{__('Original form', 'eightshift-forms')}
</div>
}

<ServerSideRender
block={blockFullName}
attributes={
Expand All @@ -131,24 +96,32 @@ export const FormsEditor = ({ attributes, setAttributes, preview }) => {
<>
{formsFormGeolocationAlternatives.map((item, index) => {
return (
<ServerSideRender
key={index}
block={blockFullName}
attributes={
getFilteredAttributes(
attributes,
[
...attributesSsr,
'formsFormGeolocation',
'formsFormGeolocationAlternatives',
],
{
formsFormPostId: item.formId,
formsServerSideRender: true
}
)
}
/>
<>
<div className='es-mt-20 es-text-7 es-text-align-center es-font-weight-700 es-mb-3'>
{__('Geolocation alternative', 'eightshift-forms')}
</div>
<div className='es-mb-8 es-text-4 es-text-align-center'>
{item.geoLocation.join(', ')}
</div>
<ServerSideRender
key={index}
block={blockFullName}
attributes={
getFilteredAttributes(
attributes,
[
...attributesSsr,
'formsFormGeolocation',
'formsFormGeolocationAlternatives',
],
{
formsFormPostId: item.formId,
formsServerSideRender: true
}
)
}
/>
</>
);
})}
</>
Expand Down
92 changes: 24 additions & 68 deletions src/Blocks/custom/forms/components/forms-options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
icons,
getAttrKey,
checkAttr,
getFetchWpApi,
props,
AsyncSelect,
MultiSelect,
Expand All @@ -26,10 +25,20 @@ import {
STORE_NAME,
} from '@eightshift/frontend-libs/scripts';
import { ConditionalTagsFormsOptions } from '../../../components/conditional-tags/components/conditional-tags-forms-options';
import { FormEditButton, LocationsButton, SettingsButton, getSettingsJsonOptions, OutputFormSelectItemWithIcon, OutputFormSelectItem } from '../../../components/utils';
import { FormEditButton,
LocationsButton,
SettingsButton,
getSettingsJsonOptions,
outputFormSelectItemWithIcon,
} from '../../../components/utils';
import { ROUTES, getRestUrl } from '../../../components/form/assets/state';

export const FormsOptions = ({ attributes, setAttributes, preview }) => {
export const FormsOptions = ({
attributes,
setAttributes,
preview,
formSelectOptions
}) => {
const manifest = select(STORE_NAME).getBlock('forms');

const {
Expand All @@ -38,10 +47,6 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => {
}
} = esFormsLocalization;

const {
postType,
} = manifest;

const {
isGeoPreview,
setIsGeoPreview,
Expand Down Expand Up @@ -87,66 +92,12 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => {
geolocationApi = getRestUrl(ROUTES.COUNTRIES_GEOLOCATION);
}

const formSelectOptionsGeo = getFetchWpApi(
postType,
{
noCache: true,
processLabel: ({ title: { rendered: label }, id }) => {
return <OutputFormSelectItem props={{
label,
id,
}} />
},
}
);
const formSelectOptions = getFetchWpApi(
postType,
{
noCache: true,
processLabel: ({ title: { rendered: label }, integration_type: metadata, id }) => {
return <OutputFormSelectItemWithIcon props={{
label,
id,
metadata,
}} />
},
fields: 'id,title,integration_type',
processMetadata: ({ title: { rendered: label }, integration_type: metadata, id }) => ({
id,
value: id,
label,
metadata,
}),
}
);

const FormSelectValue = ({props}) => {
return <OutputFormSelectItemWithIcon props={{
label: props?.label,
id: props?.id,
metadata: props?.metadata,
}} />
}

return (
<>
<PanelBody title={__('Form', 'eightshift-forms')}>
<AsyncSelect
help={__('If you can\'t find a form, start typing its name while the dropdown is open.', 'eightshift-forms')}
value={
formsFormPostIdRaw ?
{
...formsFormPostIdRaw,
label: <FormSelectValue props={formsFormPostIdRaw} />,
} :
(formsFormPostId ?
{
label: 'Selected item',
id: parseInt(formsFormPostId ?? -1)
} :
null
)
}
value={outputFormSelectItemWithIcon(Object.keys(formsFormPostIdRaw ?? {}).length ? formsFormPostIdRaw : {id: formsFormPostId})}
loadOptions={formSelectOptions}
onChange={(value) => {
setAttributes({
Expand All @@ -156,8 +107,8 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => {
value: value?.metadata?.value,
metadata: value?.metadata?.metadata,
},
[getAttrKey('formsFormPostId', attributes, manifest)]: `${value?.value}`,
})
[getAttrKey('formsFormPostId', attributes, manifest)]: `${value?.value.toString()}`,
});
}}
/>

Expand Down Expand Up @@ -376,13 +327,18 @@ export const FormsOptions = ({ attributes, setAttributes, preview }) => {

{formsFormGeolocationAlternatives?.map((_, index) => {
return (
<div className='es-h-spaced' key={index}>
<div className='es-h-spaced es-mb-2' key={index}>
<AsyncSelect
value={formsFormGeolocationAlternatives?.[index]?.form}
loadOptions={formSelectOptionsGeo}
value={outputFormSelectItemWithIcon(Object.keys(formsFormGeolocationAlternatives?.[index]?.form ?? {}).length ? formsFormGeolocationAlternatives?.[index]?.form : {id: formsFormGeolocationAlternatives?.[index]?.formId})}
loadOptions={formSelectOptions}
onChange={(value) => {
const newData = [...formsFormGeolocationAlternatives];
newData[index].form = value;
newData[index].form = {
id: value?.id,
label: value?.metadata?.label,
value: value?.metadata?.value,
metadata: value?.metadata?.metadata,
};
newData[index].formId = value.value.toString();
setAttributes({ [getAttrKey('formsFormGeolocationAlternatives', attributes, manifest)]: newData });
}}
Expand Down
Loading

0 comments on commit ef62dcf

Please sign in to comment.