tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore(plugin-form-builder): esm imports

Browse Source
This commit is contained in:
Dan Ribbens
2024-03-10 12:12:49 -04:00
parent a742f82370
commit c228421a38
6 changed files with 84 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/plugin-form-builder/src/collections/FormSubmissions/hooks/createCharge.ts
View File

@@ -1,4 +1,4 @@
import type { PluginConfig } from '../../../types'
import type { PluginConfig } from '../../../types.js'
const createCharge = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
const { data, operation } = beforeChangeData

8
packages/plugin-form-builder/src/collections/FormSubmissions/hooks/sendEmail.ts
View File

@@ -1,8 +1,8 @@
import type { Email, FormattedEmail, PluginConfig } from '../../../types'
import type { Email, FormattedEmail, PluginConfig } from '../../../types.js'
import { serializeLexical } from '../../../utilities/lexical/serializeLexical'
import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys'
import { serializeSlate } from '../../../utilities/slate/serializeSlate'
import { serializeLexical } from '../../../utilities/lexical/serializeLexical.js'
import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys.js'
import { serializeSlate } from '../../../utilities/slate/serializeSlate.js'
const sendEmail = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
const { data, operation, req } = beforeChangeData

8
packages/plugin-form-builder/src/collections/FormSubmissions/index.ts
View File

@@ -1,9 +1,9 @@
import type { CollectionConfig } from 'payload/types'
import type { PluginConfig } from '../../types'
import type { PluginConfig } from '../../types.js'
import createCharge from './hooks/createCharge'
import sendEmail from './hooks/sendEmail'
import createCharge from './hooks/createCharge.js'
import sendEmail from './hooks/sendEmail.js'
// all settings can be overridden by the config
export const generateSubmissionCollection = (formConfig: PluginConfig): CollectionConfig => {
@@ -31,7 +31,7 @@ export const generateSubmissionCollection = (formConfig: PluginConfig): Collecti
},
relationTo: formSlug,
required: true,
validate: async (value, { payload, req }) => {
validate: async (value, { req: { payload }, req }) => {
/* Don't run in the client side */
if (!payload) return true

2
packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx
View File

@@ -34,5 +34,7 @@ export const DynamicFieldSelector: React.FC<TextField> = (props) => {
}
}, [fields, getDataByPath])
// TODO: label from config is Record<string, string> | false | string
// but the FormFieldBase type has only label?: string, changing FormFieldBase breaks other ui components
return <Select {...props} options={options} />
}

102
packages/plugin-form-builder/src/collections/Forms/fields.ts
View File

@@ -1,39 +1,41 @@
import type { Block, Field } from 'payload/types'
import type { FieldConfig, PaymentFieldConfig } from '../../types'
import type { FieldConfig, PaymentFieldConfig } from '../../types.js'
import { DynamicFieldSelector } from './DynamicFieldSelector'
import { DynamicPriceSelector } from './DynamicPriceSelector'
import { DynamicFieldSelector } from './DynamicFieldSelector.js'
import { DynamicPriceSelector } from './DynamicPriceSelector.js'
const name: Field = {
name: 'name',
type: 'text',
label: 'Name (lowercase, no special characters)',
required: true,
type: 'text',
}
const label: Field = {
name: 'label',
type: 'text',
label: 'Label',
localized: true,
type: 'text',
}
const required: Field = {
name: 'required',
label: 'Required',
type: 'checkbox',
label: 'Required',
}
const width: Field = {
name: 'width',
label: 'Field Width (percentage)',
type: 'number',
label: 'Field Width (percentage)',
}
const Select: Block = {
slug: 'select',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -48,9 +50,9 @@ const Select: Block = {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -60,42 +62,42 @@ const Select: Block = {
},
{
name: 'defaultValue',
type: 'text',
admin: {
width: '50%',
},
label: 'Default Value',
localized: true,
type: 'text',
},
],
type: 'row',
},
{
name: 'options',
type: 'array',
fields: [
{
type: 'row',
fields: [
{
name: 'label',
type: 'text',
admin: {
width: '50%',
},
label: 'Label',
localized: true,
required: true,
type: 'text',
},
{
name: 'value',
type: 'text',
admin: {
width: '50%',
},
label: 'Value',
required: true,
type: 'text',
},
],
type: 'row',
},
],
label: 'Select Attribute Options',
@@ -103,7 +105,6 @@ const Select: Block = {
plural: 'Options',
singular: 'Option',
},
type: 'array',
},
required,
],
@@ -111,12 +112,13 @@ const Select: Block = {
plural: 'Select Fields',
singular: 'Select',
},
slug: 'select',
}
const Text: Block = {
slug: 'text',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -131,9 +133,9 @@ const Text: Block = {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -143,15 +145,14 @@ const Text: Block = {
},
{
name: 'defaultValue',
type: 'text',
admin: {
width: '50%',
},
label: 'Default Value',
localized: true,
type: 'text',
},
],
type: 'row',
},
required,
],
@@ -159,12 +160,13 @@ const Text: Block = {
plural: 'Text Fields',
singular: 'Text',
},
slug: 'text',
}
const TextArea: Block = {
slug: 'textarea',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -179,9 +181,9 @@ const TextArea: Block = {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -191,15 +193,14 @@ const TextArea: Block = {
},
{
name: 'defaultValue',
type: 'text',
admin: {
width: '50%',
},
label: 'Default Value',
localized: true,
type: 'text',
},
],
type: 'row',
},
required,
],
@@ -207,12 +208,13 @@ const TextArea: Block = {
plural: 'Text Area Fields',
singular: 'Text Area',
},
slug: 'textarea',
}
const Number: Block = {
slug: 'number',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -227,9 +229,9 @@ const Number: Block = {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -239,14 +241,13 @@ const Number: Block = {
},
{
name: 'defaultValue',
type: 'number',
admin: {
width: '50%',
},
label: 'Default Value',
type: 'number',
},
],
type: 'row',
},
required,
],
@@ -254,12 +255,13 @@ const Number: Block = {
plural: 'Number Fields',
singular: 'Number',
},
slug: 'number',
}
const Email: Block = {
slug: 'email',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -274,7 +276,6 @@ const Email: Block = {
},
},
],
type: 'row',
},
width,
required,
@@ -283,12 +284,13 @@ const Email: Block = {
plural: 'Email Fields',
singular: 'Email',
},
slug: 'email',
}
const State: Block = {
slug: 'state',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -303,7 +305,6 @@ const State: Block = {
},
},
],
type: 'row',
},
width,
required,
@@ -312,12 +313,13 @@ const State: Block = {
plural: 'State Fields',
singular: 'State',
},
slug: 'state',
}
const Country: Block = {
slug: 'country',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -332,7 +334,6 @@ const Country: Block = {
},
},
],
type: 'row',
},
width,
required,
@@ -341,12 +342,13 @@ const Country: Block = {
plural: 'Country Fields',
singular: 'Country',
},
slug: 'country',
}
const Checkbox: Block = {
slug: 'checkbox',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -361,9 +363,9 @@ const Checkbox: Block = {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -378,19 +380,17 @@ const Checkbox: Block = {
},
},
],
type: 'row',
},
{
name: 'defaultValue',
label: 'Default Value',
type: 'checkbox',
label: 'Default Value',
},
],
labels: {
plural: 'Checkbox Fields',
singular: 'Checkbox',
},
slug: 'checkbox',
}
const Payment = (fieldConfig: PaymentFieldConfig): Block => {
@@ -398,16 +398,18 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
if (fieldConfig?.paymentProcessor) {
paymentProcessorField = {
name: 'paymentProcessor',
type: 'select',
label: 'Payment Processor',
options: [],
type: 'select',
...fieldConfig.paymentProcessor,
}
}
const fields = {
slug: 'payment',
fields: [
{
type: 'row',
fields: [
{
...name,
@@ -422,9 +424,9 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
},
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
...width,
@@ -434,30 +436,31 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
},
{
name: 'basePrice',
type: 'number',
admin: {
width: '50%',
},
label: 'Base Price',
type: 'number',
},
],
type: 'row',
},
paymentProcessorField,
{
name: 'priceConditions',
type: 'array',
fields: [
{
name: 'fieldToUse',
type: 'text',
admin: {
components: {
Field: DynamicFieldSelector,
},
},
type: 'text',
},
{
name: 'condition',
type: 'select',
defaultValue: 'hasValue',
label: 'Condition',
options: [
@@ -474,19 +477,19 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
value: 'notEquals',
},
],
type: 'select',
},
{
name: 'valueForCondition',
type: 'text',
admin: {
condition: (_: any, { condition }: any) =>
condition === 'equals' || condition === 'notEquals',
},
label: 'Value',
type: 'text',
},
{
name: 'operator',
type: 'select',
defaultValue: 'add',
options: [
{
@@ -506,10 +509,10 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
value: 'divide',
},
],
type: 'select',
},
{
name: 'valueType',
type: 'radio',
admin: {
width: '100%',
},
@@ -525,17 +528,16 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
value: 'valueOfField',
},
],
type: 'radio',
},
{
name: 'valueForOperator',
type: 'text',
admin: {
components: {
Field: DynamicPriceSelector,
},
},
label: 'Value',
type: 'text',
},
],
label: 'Price Conditions',
@@ -543,7 +545,6 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
plural: 'Price Conditions',
singular: 'Price Condition',
},
type: 'array',
},
required,
].filter(Boolean) as Field[],
@@ -551,25 +552,24 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
plural: 'Payment Fields',
singular: 'Payment',
},
slug: 'payment',
}
return fields
}
const Message: Block = {
slug: 'message',
fields: [
{
name: 'message',
localized: true,
type: 'richText',
localized: true,
},
],
labels: {
plural: 'Message Blocks',
singular: 'Message',
},
slug: 'message',
}
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions

44
packages/plugin-form-builder/src/collections/Forms/index.ts
View File

@@ -2,14 +2,15 @@ import type { Block, CollectionConfig, Field } from 'payload/types'
import merge from 'deepmerge'
import type { FieldConfig, PluginConfig } from '../../types'
import type { FieldConfig, PluginConfig } from '../../types.js'
import { fields } from './fields'
import { fields } from './fields.js'
// all settings can be overridden by the config
export const generateFormCollection = (formConfig: PluginConfig): CollectionConfig => {
const redirect: Field = {
name: 'redirect',
type: 'group',
admin: {
condition: (_, siblingData) => siblingData?.confirmationType === 'redirect',
hideGutter: true,
@@ -17,17 +18,17 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
fields: [
{
name: 'url',
type: 'text',
label: 'URL to redirect to',
required: true,
type: 'text',
},
],
type: 'group',
}
if (formConfig.redirectRelationships) {
redirect.fields.unshift({
name: 'reference',
type: 'relationship',
admin: {
condition: (_, siblingData) => siblingData?.type === 'reference',
},
@@ -35,11 +36,11 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
maxDepth: 2,
relationTo: formConfig.redirectRelationships,
required: true,
type: 'relationship',
})
redirect.fields.unshift({
name: 'type',
type: 'radio',
admin: {
layout: 'horizontal',
},
@@ -54,7 +55,6 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
value: 'custom',
},
],
type: 'radio',
})
if (redirect.fields[2].type !== 'row') redirect.fields[2].label = 'Custom URL'
@@ -66,6 +66,7 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
const config: CollectionConfig = {
...(formConfig?.formOverrides || {}),
slug: formConfig?.formOverrides?.slug || 'forms',
access: {
read: () => true,
...(formConfig?.formOverrides?.access || {}),
@@ -78,11 +79,12 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
fields: [
{
name: 'title',
required: true,
type: 'text',
required: true,
},
{
name: 'fields',
type: 'blocks',
blocks: Object.entries(formConfig?.fields || {})
.map(([fieldKey, fieldConfig]) => {
// let the config enable/disable fields with either boolean values or objects
@@ -109,15 +111,15 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
return null
})
.filter(Boolean) as Block[],
type: 'blocks',
},
{
name: 'submitButtonLabel',
localized: true,
type: 'text',
localized: true,
},
{
name: 'confirmationType',
type: 'radio',
admin: {
description:
'Choose whether to display an on-page message or redirect to a different page after they submit the form.',
@@ -134,101 +136,99 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
value: 'redirect',
},
],
type: 'radio',
},
{
name: 'confirmationMessage',
type: 'richText',
admin: {
condition: (_, siblingData) => siblingData?.confirmationType === 'message',
},
localized: true,
required: true,
type: 'richText',
},
redirect,
{
name: 'emails',
type: 'array',
admin: {
description:
"Send custom emails when the form submits. Use comma separated lists to send the same email to multiple recipients. To reference a value from this form, wrap that field's name with double curly brackets, i.e. {{firstName}}.",
},
fields: [
{
type: 'row',
fields: [
{
name: 'emailTo',
type: 'text',
admin: {
placeholder: '"Email Sender" <sender@email.com>',
width: '100%',
},
label: 'Email To',
type: 'text',
},
{
name: 'cc',
type: 'text',
admin: {
width: '50%',
},
label: 'CC',
type: 'text',
},
{
name: 'bcc',
type: 'text',
admin: {
width: '50%',
},
label: 'BCC',
type: 'text',
},
],
type: 'row',
},
{
type: 'row',
fields: [
{
name: 'replyTo',
type: 'text',
admin: {
placeholder: '"Reply To" <reply-to@email.com>',
width: '50%',
},
label: 'Reply To',
type: 'text',
},
{
name: 'emailFrom',
type: 'text',
admin: {
placeholder: '"Email From" <email-from@email.com>',
width: '50%',
},
label: 'Email From',
type: 'text',
},
],
type: 'row',
},
{
name: 'subject',
type: 'text',
defaultValue: "You've received a new message.",
label: 'Subject',
localized: true,
required: true,
type: 'text',
},
{
name: 'message',
type: 'richText',
admin: {
description: 'Enter the message that should be sent in this email.',
},
label: 'Message',
localized: true,
type: 'richText',
},
],
type: 'array',
},
...(formConfig?.formOverrides?.fields || []),
],
slug: formConfig?.formOverrides?.slug || 'forms',
}
return config