feat: form submission components blocks and styling
This commit is contained in:
parent
d8d7532169
commit
a85fba4882
@ -15,6 +15,7 @@
|
||||
"@payloadcms/db-postgres": "^3.35.1",
|
||||
"@payloadcms/next": "^3.35.1",
|
||||
"@payloadcms/payload-cloud": "^3.35.1",
|
||||
"@payloadcms/plugin-form-builder": "^3.35.1",
|
||||
"@payloadcms/richtext-lexical": "^3.35.1",
|
||||
"@payloadcms/storage-s3": "^3.35.1",
|
||||
"country-state-city": "^3.2.1",
|
||||
@ -25,6 +26,7 @@
|
||||
"qs-esm": "^7.0.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.56.1",
|
||||
"react-select": "^5.10.1",
|
||||
"swiper": "^11.2.6"
|
||||
},
|
||||
|
||||
@ -1482,168 +1482,168 @@ $(function () {
|
||||
}
|
||||
|
||||
// Select2
|
||||
if (plugins.selectFilter.length) {
|
||||
var i;
|
||||
for (i = 0; i < plugins.selectFilter.length; i++) {
|
||||
var select = $(plugins.selectFilter[i]);
|
||||
// if (plugins.selectFilter.length) {
|
||||
// var i;
|
||||
// for (i = 0; i < plugins.selectFilter.length; i++) {
|
||||
// var select = $(plugins.selectFilter[i]);
|
||||
|
||||
select.select2({
|
||||
placeholder: select.attr("data-placeholder") ? select.attr("data-placeholder") : false,
|
||||
minimumResultsForSearch: select.attr("data-minimum-results-search") ? select.attr("data-minimum-results-search") : -1,
|
||||
maximumSelectionSize: 3,
|
||||
dropdownCssClass: select.attr("data-class") ? select.attr("data-class") : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
// select.select2({
|
||||
// placeholder: select.attr("data-placeholder") ? select.attr("data-placeholder") : false,
|
||||
// minimumResultsForSearch: select.attr("data-minimum-results-search") ? select.attr("data-minimum-results-search") : -1,
|
||||
// maximumSelectionSize: 3,
|
||||
// dropdownCssClass: select.attr("data-class") ? select.attr("data-class") : ''
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// RD Mailform
|
||||
if (plugins.rdMailForm.length) {
|
||||
var i, j, k,
|
||||
msg = {
|
||||
'MF000': 'Successfully sent!',
|
||||
'MF001': 'Recipients are not set!',
|
||||
'MF002': 'Form will not work locally!',
|
||||
'MF003': 'Please, define email field in your form!',
|
||||
'MF004': 'Please, define type of your form!',
|
||||
'MF254': 'Something went wrong with PHPMailer!',
|
||||
'MF255': 'Aw, snap! Something went wrong.'
|
||||
};
|
||||
// if (plugins.rdMailForm.length) {
|
||||
// var i, j, k,
|
||||
// msg = {
|
||||
// 'MF000': 'Successfully sent!',
|
||||
// 'MF001': 'Recipients are not set!',
|
||||
// 'MF002': 'Form will not work locally!',
|
||||
// 'MF003': 'Please, define email field in your form!',
|
||||
// 'MF004': 'Please, define type of your form!',
|
||||
// 'MF254': 'Something went wrong with PHPMailer!',
|
||||
// 'MF255': 'Aw, snap! Something went wrong.'
|
||||
// };
|
||||
|
||||
for (i = 0; i < plugins.rdMailForm.length; i++) {
|
||||
var $form = $(plugins.rdMailForm[i]),
|
||||
formHasCaptcha = false;
|
||||
// for (i = 0; i < plugins.rdMailForm.length; i++) {
|
||||
// var $form = $(plugins.rdMailForm[i]),
|
||||
// formHasCaptcha = false;
|
||||
|
||||
$form.attr('novalidate', 'novalidate').ajaxForm({
|
||||
data: {
|
||||
"form-type": $form.attr("data-form-type") || "contact",
|
||||
"counter": i
|
||||
},
|
||||
beforeSubmit: function (arr, $form, options) {
|
||||
if (isNoviBuilder)
|
||||
return;
|
||||
// $form.attr('novalidate', 'novalidate').ajaxForm({
|
||||
// data: {
|
||||
// "form-type": $form.attr("data-form-type") || "contact",
|
||||
// "counter": i
|
||||
// },
|
||||
// beforeSubmit: function (arr, $form, options) {
|
||||
// if (isNoviBuilder)
|
||||
// return;
|
||||
|
||||
var form = $(plugins.rdMailForm[this.extraData.counter]),
|
||||
inputs = form.find("[data-constraints]"),
|
||||
output = $("#" + form.attr("data-form-output")),
|
||||
captcha = form.find('.recaptcha'),
|
||||
captchaFlag = true;
|
||||
// var form = $(plugins.rdMailForm[this.extraData.counter]),
|
||||
// inputs = form.find("[data-constraints]"),
|
||||
// output = $("#" + form.attr("data-form-output")),
|
||||
// captcha = form.find('.recaptcha'),
|
||||
// captchaFlag = true;
|
||||
|
||||
output.removeClass("active error success");
|
||||
// output.removeClass("active error success");
|
||||
|
||||
if (isValidated(inputs, captcha)) {
|
||||
// if (isValidated(inputs, captcha)) {
|
||||
|
||||
// veify reCaptcha
|
||||
if (captcha.length) {
|
||||
var captchaToken = captcha.find('.g-recaptcha-response').val(),
|
||||
captchaMsg = {
|
||||
'CPT001': 'Please, setup you "site key" and "secret key" of reCaptcha',
|
||||
'CPT002': 'Something wrong with google reCaptcha'
|
||||
};
|
||||
// // veify reCaptcha
|
||||
// if (captcha.length) {
|
||||
// var captchaToken = captcha.find('.g-recaptcha-response').val(),
|
||||
// captchaMsg = {
|
||||
// 'CPT001': 'Please, setup you "site key" and "secret key" of reCaptcha',
|
||||
// 'CPT002': 'Something wrong with google reCaptcha'
|
||||
// };
|
||||
|
||||
formHasCaptcha = true;
|
||||
// formHasCaptcha = true;
|
||||
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "bat/reCaptcha.php",
|
||||
data: { 'g-recaptcha-response': captchaToken },
|
||||
async: false
|
||||
})
|
||||
.done(function (responceCode) {
|
||||
if (responceCode !== 'CPT000') {
|
||||
if (output.hasClass("snackbars")) {
|
||||
output.html('<p><span class="icon text-middle mdi mdi-check icon-xxs"></span><span>' + captchaMsg[responceCode] + '</span></p>')
|
||||
// $.ajax({
|
||||
// method: "POST",
|
||||
// url: "bat/reCaptcha.php",
|
||||
// data: { 'g-recaptcha-response': captchaToken },
|
||||
// async: false
|
||||
// })
|
||||
// .done(function (responceCode) {
|
||||
// if (responceCode !== 'CPT000') {
|
||||
// if (output.hasClass("snackbars")) {
|
||||
// output.html('<p><span class="icon text-middle mdi mdi-check icon-xxs"></span><span>' + captchaMsg[responceCode] + '</span></p>')
|
||||
|
||||
setTimeout(function () {
|
||||
output.removeClass("active");
|
||||
}, 3500);
|
||||
// setTimeout(function () {
|
||||
// output.removeClass("active");
|
||||
// }, 3500);
|
||||
|
||||
captchaFlag = false;
|
||||
} else {
|
||||
output.html(captchaMsg[responceCode]);
|
||||
}
|
||||
// captchaFlag = false;
|
||||
// } else {
|
||||
// output.html(captchaMsg[responceCode]);
|
||||
// }
|
||||
|
||||
output.addClass("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
// output.addClass("active");
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
if (!captchaFlag) {
|
||||
return false;
|
||||
}
|
||||
// if (!captchaFlag) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
form.addClass('form-in-process');
|
||||
// form.addClass('form-in-process');
|
||||
|
||||
if (output.hasClass("snackbars")) {
|
||||
output.html('<p><span class="icon text-middle fa fa-circle-o-notch fa-spin icon-xxs"></span><span>Sending</span></p>');
|
||||
output.addClass("active");
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
error: function (result) {
|
||||
if (isNoviBuilder)
|
||||
return;
|
||||
// if (output.hasClass("snackbars")) {
|
||||
// output.html('<p><span class="icon text-middle fa fa-circle-o-notch fa-spin icon-xxs"></span><span>Sending</span></p>');
|
||||
// output.addClass("active");
|
||||
// }
|
||||
// } else {
|
||||
// return false;
|
||||
// }
|
||||
// },
|
||||
// error: function (result) {
|
||||
// if (isNoviBuilder)
|
||||
// return;
|
||||
|
||||
var output = $("#" + $(plugins.rdMailForm[this.extraData.counter]).attr("data-form-output")),
|
||||
form = $(plugins.rdMailForm[this.extraData.counter]);
|
||||
// var output = $("#" + $(plugins.rdMailForm[this.extraData.counter]).attr("data-form-output")),
|
||||
// form = $(plugins.rdMailForm[this.extraData.counter]);
|
||||
|
||||
output.text(msg[result]);
|
||||
form.removeClass('form-in-process');
|
||||
// output.text(msg[result]);
|
||||
// form.removeClass('form-in-process');
|
||||
|
||||
if (formHasCaptcha) {
|
||||
grecaptcha.reset();
|
||||
}
|
||||
},
|
||||
success: function (result) {
|
||||
if (isNoviBuilder)
|
||||
return;
|
||||
// if (formHasCaptcha) {
|
||||
// grecaptcha.reset();
|
||||
// }
|
||||
// },
|
||||
// success: function (result) {
|
||||
// if (isNoviBuilder)
|
||||
// return;
|
||||
|
||||
var form = $(plugins.rdMailForm[this.extraData.counter]),
|
||||
output = $("#" + form.attr("data-form-output")),
|
||||
select = form.find('select');
|
||||
// var form = $(plugins.rdMailForm[this.extraData.counter]),
|
||||
// output = $("#" + form.attr("data-form-output")),
|
||||
// select = form.find('select');
|
||||
|
||||
form
|
||||
.addClass('success')
|
||||
.removeClass('form-in-process');
|
||||
// form
|
||||
// .addClass('success')
|
||||
// .removeClass('form-in-process');
|
||||
|
||||
if (formHasCaptcha) {
|
||||
grecaptcha.reset();
|
||||
}
|
||||
// if (formHasCaptcha) {
|
||||
// grecaptcha.reset();
|
||||
// }
|
||||
|
||||
result = result.length === 5 ? result : 'MF255';
|
||||
output.text(msg[result]);
|
||||
// result = result.length === 5 ? result : 'MF255';
|
||||
// output.text(msg[result]);
|
||||
|
||||
if (result === "MF000") {
|
||||
if (output.hasClass("snackbars")) {
|
||||
output.html('<p><span class="icon text-middle mdi mdi-check icon-xxs"></span><span>' + msg[result] + '</span></p>');
|
||||
} else {
|
||||
output.addClass("active success");
|
||||
}
|
||||
} else {
|
||||
if (output.hasClass("snackbars")) {
|
||||
output.html(' <p class="snackbars-left"><span class="icon icon-xxs mdi mdi-alert-outline text-middle"></span><span>' + msg[result] + '</span></p>');
|
||||
} else {
|
||||
output.addClass("active error");
|
||||
}
|
||||
}
|
||||
// if (result === "MF000") {
|
||||
// if (output.hasClass("snackbars")) {
|
||||
// output.html('<p><span class="icon text-middle mdi mdi-check icon-xxs"></span><span>' + msg[result] + '</span></p>');
|
||||
// } else {
|
||||
// output.addClass("active success");
|
||||
// }
|
||||
// } else {
|
||||
// if (output.hasClass("snackbars")) {
|
||||
// output.html(' <p class="snackbars-left"><span class="icon icon-xxs mdi mdi-alert-outline text-middle"></span><span>' + msg[result] + '</span></p>');
|
||||
// } else {
|
||||
// output.addClass("active error");
|
||||
// }
|
||||
// }
|
||||
|
||||
form.clearForm();
|
||||
// form.clearForm();
|
||||
|
||||
if (select.length) {
|
||||
select.select2("val", "");
|
||||
}
|
||||
// if (select.length) {
|
||||
// select.select2("val", "");
|
||||
// }
|
||||
|
||||
form.find('input, textarea').trigger('blur');
|
||||
// form.find('input, textarea').trigger('blur');
|
||||
|
||||
setTimeout(function () {
|
||||
output.removeClass("active error success");
|
||||
form.removeClass('success');
|
||||
}, 3500);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// setTimeout(function () {
|
||||
// output.removeClass("active error success");
|
||||
// form.removeClass('success');
|
||||
// }, 3500);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// RD Filepicker
|
||||
if ((plugins.filePicker.length || plugins.fileDrop.length) && !isNoviBuilder) {
|
||||
|
||||
15
src/blocks/Content.ts
Normal file
15
src/blocks/Content.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { lexicalEditor } from "@payloadcms/richtext-lexical";
|
||||
import { Block } from "payload";
|
||||
|
||||
export const ContentBlock: Block = {
|
||||
slug: "contentBlock",
|
||||
labels: { plural: "Contents", singular: "Content" },
|
||||
fields: [
|
||||
{
|
||||
name: "content",
|
||||
type: "richText",
|
||||
editor: lexicalEditor({}),
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
33
src/blocks/Form.ts
Normal file
33
src/blocks/Form.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import type { Block } from "payload";
|
||||
|
||||
export const FormBlock: Block = {
|
||||
slug: "formBlock",
|
||||
fields: [
|
||||
{
|
||||
name: "form",
|
||||
type: "relationship",
|
||||
relationTo: "forms",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "enableIntro",
|
||||
type: "checkbox",
|
||||
label: "Enable Intro Content",
|
||||
},
|
||||
{
|
||||
name: "introContent",
|
||||
type: "richText",
|
||||
admin: {
|
||||
condition: (_, { enableIntro }) => Boolean(enableIntro),
|
||||
},
|
||||
label: "Intro Content",
|
||||
},
|
||||
],
|
||||
graphQL: {
|
||||
singularName: "FormBlock",
|
||||
},
|
||||
labels: {
|
||||
plural: "Form Blocks",
|
||||
singular: "Form Block",
|
||||
},
|
||||
};
|
||||
92
src/collections/Pages.ts
Normal file
92
src/collections/Pages.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import { ContentBlock } from "@/blocks/Content";
|
||||
import { FormBlock } from "@/blocks/Form";
|
||||
import formatSlug from "@/utils/payload/formatSlug";
|
||||
import setAuthor from "@/utils/payload/setAuthor";
|
||||
import { CollectionConfig } from "payload";
|
||||
|
||||
export const Pages: CollectionConfig = {
|
||||
slug: "pages",
|
||||
versions: {
|
||||
drafts: {
|
||||
validate: true,
|
||||
},
|
||||
},
|
||||
fields: [
|
||||
{
|
||||
name: "title",
|
||||
label: "Page Title",
|
||||
type: "text",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "hero_img",
|
||||
label: "Hero Image",
|
||||
type: "upload",
|
||||
relationTo: "media",
|
||||
},
|
||||
{
|
||||
name: "slug",
|
||||
label: "Page Slug",
|
||||
type: "text",
|
||||
hooks: {
|
||||
beforeValidate: [formatSlug("title")],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "layout",
|
||||
label: "Page Layout",
|
||||
type: "blocks",
|
||||
minRows: 1,
|
||||
blocks: [ContentBlock, FormBlock],
|
||||
},
|
||||
{
|
||||
name: "meta",
|
||||
label: "Page Meta",
|
||||
type: "group",
|
||||
fields: [
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "textarea",
|
||||
},
|
||||
{
|
||||
name: "canonical_url",
|
||||
label: "Canonical Url",
|
||||
type: "text",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "createdBy",
|
||||
type: "relationship",
|
||||
relationTo: "users",
|
||||
hooks: {
|
||||
beforeChange: [setAuthor],
|
||||
},
|
||||
admin: {
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "updatedBy",
|
||||
type: "relationship",
|
||||
relationTo: "users",
|
||||
hooks: {
|
||||
beforeChange: [setAuthor],
|
||||
},
|
||||
admin: {
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
admin: {
|
||||
hideAPIURL: true,
|
||||
group: "General",
|
||||
useAsTitle: "title",
|
||||
},
|
||||
};
|
||||
@ -1,66 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { useFormQuery } from "@/services/hooks/form";
|
||||
import { useEffect } from "react";
|
||||
import { FormBlock } from "@/components/blocks/Form";
|
||||
|
||||
export default function ContactFormBox() {
|
||||
const form = useFormQuery();
|
||||
|
||||
useEffect(() => {
|
||||
form._fetch(1);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="lg:w-1/3 box-1-cell height-fill hidden! lg:flex! context-dark bg-colorContactForm/80! z-20!">
|
||||
<div className="box-1-bg-shape">
|
||||
<img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
|
||||
</div>
|
||||
<div className="cell-inner box-1-outer">
|
||||
<div className="box-1">
|
||||
<h2>Get in Touch with Us Today!</h2>
|
||||
<form className="rd-form">
|
||||
<div className="row row-x-20 row-20">
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="First Name" name="first_name" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="Last Name" name="last_name" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input type="email" className="form-input" placeholder="E-Mail" name="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="Phone Number" name="phone" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12 col-lg-12 col-xl-12">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<select
|
||||
className="form-input select-filter"
|
||||
name="interest"
|
||||
data-style="modern"
|
||||
data-classname="select-dropdown-context-dark"
|
||||
data-placeholder="I'm interested in"
|
||||
data-minimum-results-for-search="Infinity"
|
||||
data-constraints="@Required"
|
||||
>
|
||||
<option label="placeholder"></option>
|
||||
<option value="2">Buying</option>
|
||||
<option value="3">Selling</option>
|
||||
<option value="4">Renting</option>
|
||||
</select>
|
||||
<span className="select-arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12 col-lg-12 col-xl-12">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<textarea className="form-input" placeholder="Questions/Comments" name="question"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<a className="button button-primary-outline min-w-[150px]" href="search-results.html">
|
||||
Send
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,66 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { FormBlock } from "@/components/blocks/Form";
|
||||
import { useFormQuery } from "@/services/hooks/form";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function ContactFormSection() {
|
||||
const form = useFormQuery();
|
||||
|
||||
useEffect(() => {
|
||||
form._fetch(1);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="box-1-cell height-fill context-dark bg-colorContactForm! z-20!">
|
||||
<div className="box-1-bg-shape">
|
||||
<img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
|
||||
</div>
|
||||
<div className="cell-inner box-1-outer">
|
||||
<div className="box-1">
|
||||
<h2>Get in Touch with Us Today!</h2>
|
||||
<form className="rd-form">
|
||||
<div className="row row-x-20 row-20">
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="First Name" name="first_name" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="Last Name" name="last_name" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input type="email" className="form-input" placeholder="E-Mail" name="email" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<input className="form-input" placeholder="Phone Number" name="phone" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12 col-lg-12 col-xl-12">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<select
|
||||
className="form-input select-filter"
|
||||
name="interest"
|
||||
data-style="modern"
|
||||
data-classname="select-dropdown-context-dark"
|
||||
data-placeholder="I'm interested in"
|
||||
data-minimum-results-for-search="Infinity"
|
||||
data-constraints="@Required"
|
||||
>
|
||||
<option label="placeholder"></option>
|
||||
<option value="2">Buying</option>
|
||||
<option value="3">Selling</option>
|
||||
<option value="4">Renting</option>
|
||||
</select>
|
||||
<span className="select-arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12 col-lg-12 col-xl-12">
|
||||
<div className="form-wrap form-wrap-validation">
|
||||
<textarea className="form-input" placeholder="Questions/Comments" name="question"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6 col-lg-12 col-xl-6">
|
||||
<a className="button button-primary-outline min-w-[150px]" href="search-results.html">
|
||||
Send
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="box-1">{!form.isFetching && !!form.data && <FormBlock form={form.data} />}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { Autoplay } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import ContactFormBox from "./ContactFormBox";
|
||||
import { Autoplay } from "swiper/modules";
|
||||
import { useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
type HeroSliderProps = {
|
||||
onClickBook?: () => void;
|
||||
|
||||
26
src/components/blocks/Content/index.tsx
Normal file
26
src/components/blocks/Content/index.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { RichText } from "@payloadcms/richtext-lexical/react";
|
||||
|
||||
// type Props = extract
|
||||
|
||||
export function ContentBlock(props: any) {
|
||||
return (
|
||||
<div className="container relative">
|
||||
<div className="row">
|
||||
{/* Content */}
|
||||
<div className="col-md-10 offset-md-1 col-lg-10 offset-lg-1">
|
||||
{/* Post */}
|
||||
<div className="blog-item mb-10">
|
||||
<div className="blog-item-body">
|
||||
<div>
|
||||
{/* @ts-ignore */}
|
||||
<RichText data={props.content} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Post */}
|
||||
</div>
|
||||
{/* End Content */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
src/components/blocks/Form/Button/index.tsx
Normal file
54
src/components/blocks/Form/Button/index.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import type { ElementType } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
export type Props = {
|
||||
appearance?: "default" | "primary" | "secondary";
|
||||
className?: string;
|
||||
el?: "a" | "button" | "link";
|
||||
form?: string;
|
||||
href?: string;
|
||||
label?: string;
|
||||
newTab?: boolean | null;
|
||||
onClick?: () => void;
|
||||
isLoading?: boolean;
|
||||
};
|
||||
|
||||
export const Button: React.FC<Props> = ({
|
||||
className: classNameFromProps,
|
||||
el = "button",
|
||||
form,
|
||||
href,
|
||||
label,
|
||||
newTab,
|
||||
isLoading,
|
||||
}) => {
|
||||
const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
|
||||
const Element: ElementType = el;
|
||||
const className = [classNameFromProps].filter(Boolean).join(" ");
|
||||
|
||||
const elementProps = {
|
||||
...newTabProps,
|
||||
className,
|
||||
form,
|
||||
href,
|
||||
};
|
||||
|
||||
return (
|
||||
<Element {...elementProps} className="button button-primary-outline" {...{ disabled: isLoading }}>
|
||||
<React.Fragment>
|
||||
{(el === "link" || el === "a") && (
|
||||
<Link {...newTabProps} href={href || ""}>
|
||||
{label}
|
||||
</Link>
|
||||
)}
|
||||
{el === "button" && (
|
||||
<>
|
||||
{label} {isLoading && <span className="fa fa-spinner animate-spin ml-2" />}
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
</Element>
|
||||
);
|
||||
};
|
||||
34
src/components/blocks/Form/Checkbox/index.tsx
Normal file
34
src/components/blocks/Form/Checkbox/index.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import type { CheckboxField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Checkbox: React.FC<
|
||||
{
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
getValues: any;
|
||||
register: UseFormRegister<any & FieldValues>;
|
||||
setValue: any;
|
||||
} & CheckboxField
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap pr-4">
|
||||
<div className="flex">
|
||||
<input className="form-input mr-2 p-2" type="checkbox" {...register(name, { required: requiredFromProps })} />
|
||||
<label className="form-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
35
src/components/blocks/Form/Email/index.tsx
Normal file
35
src/components/blocks/Form/Email/index.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import type { EmailField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Email: React.FC<
|
||||
{
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
register: UseFormRegister<any & FieldValues>;
|
||||
} & EmailField
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap">
|
||||
<input
|
||||
type="email"
|
||||
className="form-input"
|
||||
id={name}
|
||||
{...register(name, { pattern: /^\S[^\s@]*@\S+$/, required: requiredFromProps })}
|
||||
/>
|
||||
<label className="form-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
4
src/components/blocks/Form/Error/index.scss
Normal file
4
src/components/blocks/Form/Error/index.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.error {
|
||||
margin-top: 5px;
|
||||
color: var(--color-red);
|
||||
}
|
||||
5
src/components/blocks/Form/Error/index.tsx
Normal file
5
src/components/blocks/Form/Error/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
import * as React from "react";
|
||||
|
||||
export const Error: React.FC = () => {
|
||||
return <div className="text-red-500">This field is required</div>;
|
||||
};
|
||||
72
src/components/blocks/Form/Link/index.tsx
Normal file
72
src/components/blocks/Form/Link/index.tsx
Normal file
@ -0,0 +1,72 @@
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
// @ts-ignore
|
||||
import type { Page } from "@/payload-types";
|
||||
|
||||
import { Button } from "../Button";
|
||||
|
||||
export type CMSLinkType = {
|
||||
appearance?: "default" | "primary" | "secondary";
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
label?: string;
|
||||
newTab?: boolean | null;
|
||||
reference?: {
|
||||
relationTo: "pages";
|
||||
value: number | Page | string;
|
||||
} | null;
|
||||
type?: "custom" | "reference" | null;
|
||||
url?: null | string;
|
||||
};
|
||||
|
||||
export const CMSLink: React.FC<CMSLinkType> = ({
|
||||
type,
|
||||
appearance,
|
||||
children,
|
||||
className,
|
||||
label,
|
||||
newTab,
|
||||
reference,
|
||||
url,
|
||||
}) => {
|
||||
const href =
|
||||
type === "reference" && typeof reference?.value === "object" && reference.value.slug
|
||||
? `${reference?.relationTo !== "pages" ? `/${reference?.relationTo}` : ""}/${reference.value.slug}`
|
||||
: url;
|
||||
|
||||
if (!href) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!appearance) {
|
||||
const newTabProps = newTab ? { rel: "noopener noreferrer", target: "_blank" } : {};
|
||||
|
||||
if (type === "custom") {
|
||||
return (
|
||||
<a href={url || ""} {...newTabProps} className={className}>
|
||||
{label && label}
|
||||
{children ? <>{children}</> : null}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
<Link href={href} {...newTabProps} className={className} prefetch={false}>
|
||||
{label && label}
|
||||
{children ? <>{children}</> : null}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const buttonProps = {
|
||||
appearance,
|
||||
href,
|
||||
label,
|
||||
newTab,
|
||||
};
|
||||
|
||||
return <Button className={className} {...buttonProps} el="link" />;
|
||||
};
|
||||
30
src/components/blocks/Form/Number/index.tsx
Normal file
30
src/components/blocks/Form/Number/index.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import type { TextField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Number: React.FC<
|
||||
{
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
register: UseFormRegister<any & FieldValues>;
|
||||
} & TextField
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap">
|
||||
<input type="number" className="form-input" id={name} {...register(name, { required: requiredFromProps })} />
|
||||
<label className="form-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
24
src/components/blocks/Form/RichText/index.tsx
Normal file
24
src/components/blocks/Form/RichText/index.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
|
||||
import { serializeLexical } from './serialize'
|
||||
|
||||
const RichText: React.FC<{ className?: string; content: any; enableGutter?: boolean }> = ({
|
||||
className,
|
||||
content,
|
||||
}) => {
|
||||
if (!content) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[className].filter(Boolean).join(' ')}>
|
||||
{content &&
|
||||
!Array.isArray(content) &&
|
||||
typeof content === 'object' &&
|
||||
'root' in content &&
|
||||
serializeLexical({ nodes: content?.root?.children })}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RichText
|
||||
118
src/components/blocks/Form/RichText/nodeFormat.tsx
Normal file
118
src/components/blocks/Form/RichText/nodeFormat.tsx
Normal file
@ -0,0 +1,118 @@
|
||||
// @ts-nocheck
|
||||
//This copy-and-pasted from lexical here here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
|
||||
|
||||
import type { ElementFormatType, TextFormatType } from "@payloadcms/richtext-lexical/lexical";
|
||||
import type { TextDetailType, TextModeType } from "lexical/nodes/LexicalTextNode";
|
||||
|
||||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
*/
|
||||
|
||||
// DOM
|
||||
export const DOM_ELEMENT_TYPE = 1;
|
||||
export const DOM_TEXT_TYPE = 3;
|
||||
|
||||
// Reconciling
|
||||
export const NO_DIRTY_NODES = 0;
|
||||
export const HAS_DIRTY_NODES = 1;
|
||||
export const FULL_RECONCILE = 2;
|
||||
|
||||
// Text node modes
|
||||
export const IS_NORMAL = 0;
|
||||
export const IS_TOKEN = 1;
|
||||
export const IS_SEGMENTED = 2;
|
||||
// IS_INERT = 3
|
||||
|
||||
// Text node formatting
|
||||
export const IS_BOLD = 1;
|
||||
export const IS_ITALIC = 1 << 1;
|
||||
export const IS_STRIKETHROUGH = 1 << 2;
|
||||
export const IS_UNDERLINE = 1 << 3;
|
||||
export const IS_CODE = 1 << 4;
|
||||
export const IS_SUBSCRIPT = 1 << 5;
|
||||
export const IS_SUPERSCRIPT = 1 << 6;
|
||||
export const IS_HIGHLIGHT = 1 << 7;
|
||||
|
||||
export const IS_ALL_FORMATTING =
|
||||
IS_BOLD | IS_ITALIC | IS_STRIKETHROUGH | IS_UNDERLINE | IS_CODE | IS_SUBSCRIPT | IS_SUPERSCRIPT | IS_HIGHLIGHT;
|
||||
|
||||
// Text node details
|
||||
export const IS_DIRECTIONLESS = 1;
|
||||
export const IS_UNMERGEABLE = 1 << 1;
|
||||
|
||||
// Element node formatting
|
||||
export const IS_ALIGN_LEFT = 1;
|
||||
export const IS_ALIGN_CENTER = 2;
|
||||
export const IS_ALIGN_RIGHT = 3;
|
||||
export const IS_ALIGN_JUSTIFY = 4;
|
||||
export const IS_ALIGN_START = 5;
|
||||
export const IS_ALIGN_END = 6;
|
||||
|
||||
// Reconciliation
|
||||
export const NON_BREAKING_SPACE = "\u00A0";
|
||||
// const ZERO_WIDTH_SPACE = '\u200b'
|
||||
|
||||
export const DOUBLE_LINE_BREAK = "\n\n";
|
||||
|
||||
// For FF, we need to use a non-breaking space, or it gets composition
|
||||
// in a stuck state.
|
||||
|
||||
const RTL = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
|
||||
const LTR =
|
||||
"A-Za-z\u00C0-\u00D6\u00D8-\u00F6" +
|
||||
"\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C" +
|
||||
"\uFE00-\uFE6F\uFEFD-\uFFFF";
|
||||
|
||||
export const RTL_REGEX = new RegExp("^[^" + LTR + "]*[" + RTL + "]");
|
||||
|
||||
export const LTR_REGEX = new RegExp("^[^" + RTL + "]*[" + LTR + "]");
|
||||
|
||||
export const TEXT_TYPE_TO_FORMAT: Record<string | TextFormatType, number> = {
|
||||
bold: IS_BOLD,
|
||||
code: IS_CODE,
|
||||
highlight: IS_HIGHLIGHT,
|
||||
italic: IS_ITALIC,
|
||||
strikethrough: IS_STRIKETHROUGH,
|
||||
subscript: IS_SUBSCRIPT,
|
||||
superscript: IS_SUPERSCRIPT,
|
||||
underline: IS_UNDERLINE,
|
||||
};
|
||||
|
||||
export const DETAIL_TYPE_TO_DETAIL: Record<string | TextDetailType, number> = {
|
||||
directionless: IS_DIRECTIONLESS,
|
||||
unmergeable: IS_UNMERGEABLE,
|
||||
};
|
||||
|
||||
export const ELEMENT_TYPE_TO_FORMAT: Record<Exclude<ElementFormatType, "">, number> = {
|
||||
center: IS_ALIGN_CENTER,
|
||||
end: IS_ALIGN_END,
|
||||
justify: IS_ALIGN_JUSTIFY,
|
||||
left: IS_ALIGN_LEFT,
|
||||
right: IS_ALIGN_RIGHT,
|
||||
start: IS_ALIGN_START,
|
||||
};
|
||||
|
||||
export const ELEMENT_FORMAT_TO_TYPE: Record<number, ElementFormatType> = {
|
||||
[IS_ALIGN_CENTER]: "center",
|
||||
[IS_ALIGN_END]: "end",
|
||||
[IS_ALIGN_JUSTIFY]: "justify",
|
||||
[IS_ALIGN_LEFT]: "left",
|
||||
[IS_ALIGN_RIGHT]: "right",
|
||||
[IS_ALIGN_START]: "start",
|
||||
};
|
||||
|
||||
export const TEXT_MODE_TO_TYPE: Record<TextModeType, 0 | 1 | 2> = {
|
||||
normal: IS_NORMAL,
|
||||
segmented: IS_SEGMENTED,
|
||||
token: IS_TOKEN,
|
||||
};
|
||||
|
||||
export const TEXT_TYPE_TO_MODE: Record<number, TextModeType> = {
|
||||
[IS_NORMAL]: "normal",
|
||||
[IS_SEGMENTED]: "segmented",
|
||||
[IS_TOKEN]: "token",
|
||||
};
|
||||
173
src/components/blocks/Form/RichText/serialize.tsx
Normal file
173
src/components/blocks/Form/RichText/serialize.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
// @ts-nocheck
|
||||
import type { LinkFields, SerializedLinkNode } from "@payloadcms/richtext-lexical";
|
||||
import type {
|
||||
SerializedElementNode,
|
||||
SerializedLexicalNode,
|
||||
SerializedTextNode,
|
||||
} from "@payloadcms/richtext-lexical/lexical";
|
||||
import type { SerializedListItemNode, SerializedListNode } from "@payloadcms/richtext-lexical/lexical/list";
|
||||
import type { SerializedHeadingNode } from "@payloadcms/richtext-lexical/lexical/rich-text";
|
||||
import type { JSX } from "react";
|
||||
|
||||
import React, { Fragment } from "react";
|
||||
|
||||
import { CMSLink } from "../Link";
|
||||
import {
|
||||
IS_BOLD,
|
||||
IS_CODE,
|
||||
IS_ITALIC,
|
||||
IS_STRIKETHROUGH,
|
||||
IS_SUBSCRIPT,
|
||||
IS_SUPERSCRIPT,
|
||||
IS_UNDERLINE,
|
||||
} from "./nodeFormat";
|
||||
|
||||
interface Props {
|
||||
nodes: SerializedLexicalNode[];
|
||||
}
|
||||
|
||||
export function serializeLexical({ nodes }: Props): JSX.Element {
|
||||
return (
|
||||
<Fragment>
|
||||
{nodes?.map((_node, index): JSX.Element | null => {
|
||||
if (_node.type === "text") {
|
||||
const node = _node as SerializedTextNode;
|
||||
let text = <React.Fragment key={index}>{node.text}</React.Fragment>;
|
||||
if (node.format & IS_BOLD) {
|
||||
text = <strong key={index}>{text}</strong>;
|
||||
}
|
||||
if (node.format & IS_ITALIC) {
|
||||
text = <em key={index}>{text}</em>;
|
||||
}
|
||||
if (node.format & IS_STRIKETHROUGH) {
|
||||
text = (
|
||||
<span key={index} style={{ textDecoration: "line-through" }}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (node.format & IS_UNDERLINE) {
|
||||
text = (
|
||||
<span key={index} style={{ textDecoration: "underline" }}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (node.format & IS_CODE) {
|
||||
text = <code key={index}>{node.text}</code>;
|
||||
}
|
||||
if (node.format & IS_SUBSCRIPT) {
|
||||
text = <sub key={index}>{text}</sub>;
|
||||
}
|
||||
if (node.format & IS_SUPERSCRIPT) {
|
||||
text = <sup key={index}>{text}</sup>;
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
if (_node == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// NOTE: Hacky fix for
|
||||
// https://github.com/facebook/lexical/blob/d10c4e6e55261b2fdd7d1845aed46151d0f06a8c/packages/lexical-list/src/LexicalListItemNode.ts#L133
|
||||
// which does not return checked: false (only true - i.e. there is no prop for false)
|
||||
const serializedChildrenFn = (node: SerializedElementNode): JSX.Element | null => {
|
||||
if (node.children == null) {
|
||||
return null;
|
||||
} else {
|
||||
if (node?.type === "list" && (node as SerializedListNode)?.listType === "check") {
|
||||
for (const item of node.children) {
|
||||
if ("checked" in item) {
|
||||
if (!item?.checked) {
|
||||
item.checked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return serializeLexical({ nodes: node.children });
|
||||
} else {
|
||||
return serializeLexical({ nodes: node.children });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const serializedChildren = "children" in _node ? serializedChildrenFn(_node as SerializedElementNode) : "";
|
||||
|
||||
switch (_node.type) {
|
||||
case "heading": {
|
||||
const node = _node as SerializedHeadingNode;
|
||||
|
||||
type Heading = Extract<keyof JSX.IntrinsicElements, "h1" | "h2" | "h3" | "h4" | "h5">;
|
||||
const Tag = node?.tag as Heading;
|
||||
return <Tag key={index}>{serializedChildren}</Tag>;
|
||||
}
|
||||
case "linebreak": {
|
||||
return <br key={index} />;
|
||||
}
|
||||
case "link": {
|
||||
const node = _node as SerializedLinkNode;
|
||||
|
||||
const fields: LinkFields = node.fields;
|
||||
|
||||
return (
|
||||
<CMSLink
|
||||
key={index}
|
||||
newTab={Boolean(fields?.newTab)}
|
||||
reference={fields.doc as any}
|
||||
type={fields.linkType === "internal" ? "reference" : "custom"}
|
||||
url={fields.url}
|
||||
>
|
||||
{serializedChildren}
|
||||
</CMSLink>
|
||||
);
|
||||
}
|
||||
case "list": {
|
||||
const node = _node as SerializedListNode;
|
||||
|
||||
type List = Extract<keyof JSX.IntrinsicElements, "ol" | "ul">;
|
||||
const Tag = node?.tag as List;
|
||||
return (
|
||||
<Tag className="list" key={index}>
|
||||
{serializedChildren}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
case "listitem": {
|
||||
const node = _node as SerializedListItemNode;
|
||||
|
||||
if (node?.checked != null) {
|
||||
return (
|
||||
<li
|
||||
aria-checked={node.checked ? "true" : "false"}
|
||||
className={` ${node.checked ? "" : ""}`}
|
||||
key={index}
|
||||
role="checkbox"
|
||||
tabIndex={-1}
|
||||
value={node?.value}
|
||||
>
|
||||
{serializedChildren}
|
||||
</li>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<li key={index} value={node?.value}>
|
||||
{serializedChildren}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
case "paragraph": {
|
||||
return <p key={index}>{serializedChildren}</p>;
|
||||
}
|
||||
case "quote": {
|
||||
return <blockquote key={index}>{serializedChildren}</blockquote>;
|
||||
}
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
54
src/components/blocks/Form/Select/index.tsx
Normal file
54
src/components/blocks/Form/Select/index.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import type { SelectField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { Control, FieldErrorsImpl, FieldValues } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
import { Controller } from "react-hook-form";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Select: React.FC<
|
||||
{
|
||||
control: Control<FieldValues, any>;
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
} & SelectField
|
||||
> = ({ name, control, errors, label, options, required, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap relative">
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name={name}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<>
|
||||
{/* <ReactSelect
|
||||
classNamePrefix="rs"
|
||||
inputId={name}
|
||||
instanceId={name}
|
||||
onChange={(val) => onChange(val ? val.value : "")}
|
||||
options={options}
|
||||
value={options.find((s) => s.value === value)}
|
||||
/> */}
|
||||
<select className="form-input select-filter" name="interest" onChange={onChange} value={value}>
|
||||
<option value="">{label}</option>
|
||||
{options.map((opt, idx) => (
|
||||
<option key={idx} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="absolute right-2 top-3 fa fa-caret-down text-black"></span>
|
||||
</>
|
||||
)}
|
||||
rules={{ required }}
|
||||
/>
|
||||
{required && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
30
src/components/blocks/Form/Text/index.tsx
Normal file
30
src/components/blocks/Form/Text/index.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import type { TextField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Text: React.FC<
|
||||
{
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
register: UseFormRegister<any & FieldValues>;
|
||||
} & TextField
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap">
|
||||
<input type="text" id={name} className="form-input" {...register(name, { required: requiredFromProps })} />
|
||||
<label className="form-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
31
src/components/blocks/Form/Textarea/index.tsx
Normal file
31
src/components/blocks/Form/Textarea/index.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import type { TextField } from "@payloadcms/plugin-form-builder/types";
|
||||
import type { FieldErrorsImpl, FieldValues, UseFormRegister } from "react-hook-form";
|
||||
|
||||
import React from "react";
|
||||
|
||||
import { Error } from "../Error";
|
||||
import { Width } from "../Width";
|
||||
|
||||
export const Textarea: React.FC<
|
||||
{
|
||||
errors: Partial<
|
||||
FieldErrorsImpl<{
|
||||
[x: string]: any;
|
||||
}>
|
||||
>;
|
||||
register: UseFormRegister<any & FieldValues>;
|
||||
rows?: number;
|
||||
} & TextField
|
||||
> = ({ name, errors, label, register, required: requiredFromProps, rows = 3, width }) => {
|
||||
return (
|
||||
<Width width={width}>
|
||||
<div className="form-wrap">
|
||||
<textarea className="form-input" id={name} rows={rows} {...register(name, { required: requiredFromProps })} />
|
||||
<label className="form-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{requiredFromProps && errors[name] && <Error />}
|
||||
</div>
|
||||
</Width>
|
||||
);
|
||||
};
|
||||
13
src/components/blocks/Form/Width/index.tsx
Normal file
13
src/components/blocks/Form/Width/index.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import * as React from "react";
|
||||
|
||||
export const Width: React.FC<{
|
||||
children: React.ReactNode;
|
||||
width?: number;
|
||||
}> = ({ children, width }) => {
|
||||
let colXl = "col-xl-12";
|
||||
if (!!width && width === 50) {
|
||||
colXl = "col-xl-6";
|
||||
}
|
||||
|
||||
return <div className={`col-sm-6 col-lg-12 ${colXl}`}>{children}</div>;
|
||||
};
|
||||
43
src/components/blocks/Form/buildInitialFormState.tsx
Normal file
43
src/components/blocks/Form/buildInitialFormState.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
// @ts-nocheck
|
||||
import type { FormFieldBlock } from "@payloadcms/plugin-form-builder/types";
|
||||
|
||||
export const buildInitialFormState = (fields: FormFieldBlock[]) => {
|
||||
return fields.reduce((initialSchema, field) => {
|
||||
if (field.blockType === "checkbox") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: false,
|
||||
};
|
||||
}
|
||||
if (field.blockType === "country") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: "",
|
||||
};
|
||||
}
|
||||
if (field.blockType === "email") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: "",
|
||||
};
|
||||
}
|
||||
if (field.blockType === "text") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: "",
|
||||
};
|
||||
}
|
||||
if (field.blockType === "select") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: "",
|
||||
};
|
||||
}
|
||||
if (field.blockType === "state") {
|
||||
return {
|
||||
...initialSchema,
|
||||
[field.name]: "",
|
||||
};
|
||||
}
|
||||
}, {});
|
||||
};
|
||||
15
src/components/blocks/Form/fields.tsx
Normal file
15
src/components/blocks/Form/fields.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Checkbox } from "./Checkbox";
|
||||
import { Email } from "./Email";
|
||||
import { Number } from "./Number";
|
||||
import { Select } from "./Select";
|
||||
import { Text } from "./Text";
|
||||
import { Textarea } from "./Textarea";
|
||||
|
||||
export const fields = {
|
||||
checkbox: Checkbox,
|
||||
email: Email,
|
||||
number: Number,
|
||||
select: Select,
|
||||
text: Text,
|
||||
textarea: Textarea,
|
||||
};
|
||||
180
src/components/blocks/Form/index.tsx
Normal file
180
src/components/blocks/Form/index.tsx
Normal file
@ -0,0 +1,180 @@
|
||||
// @ts-nocheck
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import { Form } from "@/payload-types";
|
||||
import { Button } from "./Button";
|
||||
import RichText from "./RichText";
|
||||
import { buildInitialFormState } from "./buildInitialFormState";
|
||||
import { fields } from "./fields";
|
||||
|
||||
export type Value = unknown;
|
||||
|
||||
export interface Property {
|
||||
[key: string]: Value;
|
||||
}
|
||||
|
||||
export interface Data {
|
||||
[key: string]: Property | Property[] | Value;
|
||||
}
|
||||
|
||||
export type FormBlockType = {
|
||||
blockName?: string;
|
||||
blockType?: "formBlock";
|
||||
enableIntro?: boolean | null;
|
||||
form: number | Form;
|
||||
introContent?: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ("ltr" | "rtl") | null;
|
||||
format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
} | null;
|
||||
};
|
||||
|
||||
export const FormBlock: React.FC<
|
||||
FormBlockType & {
|
||||
id?: string | null;
|
||||
}
|
||||
> = (props) => {
|
||||
const {
|
||||
enableIntro,
|
||||
form: formFromProps,
|
||||
form: { id: formID, confirmationMessage, confirmationType, redirect, submitButtonLabel } = {},
|
||||
introContent,
|
||||
} = props;
|
||||
|
||||
const formMethods = useForm({
|
||||
defaultValues: buildInitialFormState(formFromProps.fields),
|
||||
});
|
||||
const {
|
||||
control,
|
||||
formState: { errors },
|
||||
handleSubmit,
|
||||
register,
|
||||
// getValues,
|
||||
// setValue,
|
||||
} = formMethods;
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [hasSubmitted, setHasSubmitted] = useState<boolean>();
|
||||
const [error, setError] = useState<{ message: string; status?: string } | undefined>();
|
||||
const router = useRouter();
|
||||
|
||||
const onSubmit = useCallback(
|
||||
(data: Data) => {
|
||||
let loadingTimerID: ReturnType<typeof setTimeout>;
|
||||
const submitForm = async () => {
|
||||
setError(undefined);
|
||||
|
||||
const dataToSend = Object.entries(data).map(([name, value]) => ({
|
||||
field: name,
|
||||
value,
|
||||
}));
|
||||
|
||||
// delay loading indicator by 1s
|
||||
loadingTimerID = setTimeout(() => {
|
||||
setIsLoading(true);
|
||||
}, 250);
|
||||
|
||||
try {
|
||||
const req = await fetch(`/api/form-submissions`, {
|
||||
body: JSON.stringify({
|
||||
form: formID,
|
||||
submissionData: dataToSend,
|
||||
}),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
const res = await req.json();
|
||||
|
||||
clearTimeout(loadingTimerID);
|
||||
|
||||
if (req.status >= 400) {
|
||||
setIsLoading(false);
|
||||
|
||||
setError({
|
||||
message: res.errors?.[0]?.message || "Internal Server Error",
|
||||
status: res.status,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
setHasSubmitted(true);
|
||||
|
||||
if (confirmationType === "redirect" && redirect) {
|
||||
const { url } = redirect;
|
||||
|
||||
const redirectUrl = url;
|
||||
|
||||
if (redirectUrl) router.push(redirectUrl);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
setIsLoading(false);
|
||||
setError({
|
||||
message: "Something went wrong.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
void submitForm();
|
||||
},
|
||||
[router, formID, redirect, confirmationType]
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!!formFromProps?.title && <h2>{formFromProps.title}</h2>}
|
||||
<div className="mt-4">
|
||||
{!!enableIntro && introContent && !hasSubmitted && <RichText content={introContent} />}
|
||||
{!isLoading && hasSubmitted && confirmationType === "message" && <RichText content={confirmationMessage} />}
|
||||
{isLoading && !hasSubmitted && <p>Loading, please wait...</p>}
|
||||
{error && <div className="text-red-500">{`${error.status || "500"}: ${error.message || ""}`}</div>}
|
||||
{!hasSubmitted && (
|
||||
<form id={formID} onSubmit={handleSubmit(onSubmit)} className="rd-form">
|
||||
<div className="row space-y-4">
|
||||
{formFromProps &&
|
||||
formFromProps.fields &&
|
||||
formFromProps.fields.map((field, index) => {
|
||||
const Field: React.FC<any> = fields?.[field.blockType];
|
||||
if (Field) {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<Field
|
||||
form={formFromProps}
|
||||
{...field}
|
||||
{...formMethods}
|
||||
control={control}
|
||||
errors={errors}
|
||||
register={register}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
<Button appearance="primary" el="button" form={formID} label={submitButtonLabel} isLoading={isLoading} />
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
42
src/components/blocks/Form/shared.scss
Normal file
42
src/components/blocks/Form/shared.scss
Normal file
@ -0,0 +1,42 @@
|
||||
@use "../css/common.scss" as *;
|
||||
|
||||
@mixin formInput() {
|
||||
all: unset;
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
font-family: var(--font-body);
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-black);
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
font-size: 1rem;
|
||||
height: calc(var(--base) * 2.5);
|
||||
line-height: var(--base);
|
||||
padding: calc(var(--base) * 0.75);
|
||||
|
||||
&::-moz-placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: var(--color-mid-gray);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-mid-gray);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: var(--color-gray);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--color-light-gray);
|
||||
color: var(--color-gray);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
56
src/components/blocks/RenderBlocks.tsx
Normal file
56
src/components/blocks/RenderBlocks.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React, { Fragment } from "react";
|
||||
|
||||
import type { Page } from "@/payload-types";
|
||||
import { ContentBlock } from "./Content";
|
||||
import { FormBlock } from "./Form";
|
||||
|
||||
const blockComponents = {
|
||||
contentBlock: ContentBlock,
|
||||
formBlock: FormBlock,
|
||||
};
|
||||
|
||||
export const RenderBlocks: React.FC<{
|
||||
blocks: Page["layout"];
|
||||
}> = (props) => {
|
||||
const { blocks } = props;
|
||||
|
||||
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
|
||||
|
||||
if (hasBlocks) {
|
||||
return (
|
||||
<Fragment>
|
||||
{blocks.map((block, index) => {
|
||||
const { blockType } = block;
|
||||
|
||||
if (blockType && blockType in blockComponents) {
|
||||
const Block = blockComponents[blockType];
|
||||
if (!Block) return null;
|
||||
|
||||
if (blockType === "formBlock") {
|
||||
return (
|
||||
<div className="my-10" key={index}>
|
||||
<FormBlock
|
||||
id={block.id}
|
||||
enableIntro={block.enableIntro}
|
||||
introContent={block.introContent}
|
||||
form={block.form}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="my-10" key={index}>
|
||||
{/* @ts-ignore */}
|
||||
<Block {...block} disableInnerContainer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import HeroSlider from "@/components/HeroSlider";
|
||||
import ContactFormSection from "@/components/ContactFormSection";
|
||||
import { useRef } from "react";
|
||||
import ContactFormSection from "../ContactFormSection";
|
||||
|
||||
export default function HomeTopSection() {
|
||||
const formRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
@ -74,6 +74,9 @@ export interface Config {
|
||||
blogs: Blog;
|
||||
propertyFeatures: PropertyFeature;
|
||||
properties: Property;
|
||||
pages: Page;
|
||||
forms: Form;
|
||||
'form-submissions': FormSubmission;
|
||||
'payload-locked-documents': PayloadLockedDocument;
|
||||
'payload-preferences': PayloadPreference;
|
||||
'payload-migrations': PayloadMigration;
|
||||
@ -87,6 +90,9 @@ export interface Config {
|
||||
blogs: BlogsSelect<false> | BlogsSelect<true>;
|
||||
propertyFeatures: PropertyFeaturesSelect<false> | PropertyFeaturesSelect<true>;
|
||||
properties: PropertiesSelect<false> | PropertiesSelect<true>;
|
||||
pages: PagesSelect<false> | PagesSelect<true>;
|
||||
forms: FormsSelect<false> | FormsSelect<true>;
|
||||
'form-submissions': FormSubmissionsSelect<false> | FormSubmissionsSelect<true>;
|
||||
'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
|
||||
'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
|
||||
'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
|
||||
@ -285,6 +291,245 @@ export interface Property {
|
||||
createdAt: string;
|
||||
_status?: ('draft' | 'published') | null;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "pages".
|
||||
*/
|
||||
export interface Page {
|
||||
id: number;
|
||||
title: string;
|
||||
hero_img?: (number | null) | Media;
|
||||
slug?: string | null;
|
||||
layout?:
|
||||
| (
|
||||
| {
|
||||
content: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ('ltr' | 'rtl') | null;
|
||||
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
};
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'contentBlock';
|
||||
}
|
||||
| {
|
||||
form: number | Form;
|
||||
enableIntro?: boolean | null;
|
||||
introContent?: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ('ltr' | 'rtl') | null;
|
||||
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
} | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'formBlock';
|
||||
}
|
||||
)[]
|
||||
| null;
|
||||
meta?: {
|
||||
title?: string | null;
|
||||
description?: string | null;
|
||||
canonical_url?: string | null;
|
||||
};
|
||||
createdBy?: (number | null) | User;
|
||||
updatedBy?: (number | null) | User;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
_status?: ('draft' | 'published') | null;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "forms".
|
||||
*/
|
||||
export interface Form {
|
||||
id: number;
|
||||
title: string;
|
||||
fields?:
|
||||
| (
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
required?: boolean | null;
|
||||
defaultValue?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'checkbox';
|
||||
}
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
required?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'email';
|
||||
}
|
||||
| {
|
||||
message?: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ('ltr' | 'rtl') | null;
|
||||
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
} | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'message';
|
||||
}
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
defaultValue?: number | null;
|
||||
required?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'number';
|
||||
}
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
defaultValue?: string | null;
|
||||
placeholder?: string | null;
|
||||
options?:
|
||||
| {
|
||||
label: string;
|
||||
value: string;
|
||||
id?: string | null;
|
||||
}[]
|
||||
| null;
|
||||
required?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'select';
|
||||
}
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
defaultValue?: string | null;
|
||||
required?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'text';
|
||||
}
|
||||
| {
|
||||
name: string;
|
||||
label?: string | null;
|
||||
width?: number | null;
|
||||
defaultValue?: string | null;
|
||||
required?: boolean | null;
|
||||
id?: string | null;
|
||||
blockName?: string | null;
|
||||
blockType: 'textarea';
|
||||
}
|
||||
)[]
|
||||
| null;
|
||||
submitButtonLabel?: string | null;
|
||||
/**
|
||||
* Choose whether to display an on-page message or redirect to a different page after they submit the form.
|
||||
*/
|
||||
confirmationType?: ('message' | 'redirect') | null;
|
||||
confirmationMessage?: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ('ltr' | 'rtl') | null;
|
||||
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
} | null;
|
||||
redirect?: {
|
||||
url: string;
|
||||
};
|
||||
/**
|
||||
* 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}}. You can use a wildcard {{*}} to output all data and {{*:table}} to format it as an HTML table in the email.
|
||||
*/
|
||||
emails?:
|
||||
| {
|
||||
emailTo?: string | null;
|
||||
cc?: string | null;
|
||||
bcc?: string | null;
|
||||
replyTo?: string | null;
|
||||
emailFrom?: string | null;
|
||||
subject: string;
|
||||
/**
|
||||
* Enter the message that should be sent in this email.
|
||||
*/
|
||||
message?: {
|
||||
root: {
|
||||
type: string;
|
||||
children: {
|
||||
type: string;
|
||||
version: number;
|
||||
[k: string]: unknown;
|
||||
}[];
|
||||
direction: ('ltr' | 'rtl') | null;
|
||||
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
|
||||
indent: number;
|
||||
version: number;
|
||||
};
|
||||
[k: string]: unknown;
|
||||
} | null;
|
||||
id?: string | null;
|
||||
}[]
|
||||
| null;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "form-submissions".
|
||||
*/
|
||||
export interface FormSubmission {
|
||||
id: number;
|
||||
form: number | Form;
|
||||
submissionData?:
|
||||
| {
|
||||
field: string;
|
||||
value: string;
|
||||
id?: string | null;
|
||||
}[]
|
||||
| null;
|
||||
updatedAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "payload-locked-documents".
|
||||
@ -319,6 +564,18 @@ export interface PayloadLockedDocument {
|
||||
| ({
|
||||
relationTo: 'properties';
|
||||
value: number | Property;
|
||||
} | null)
|
||||
| ({
|
||||
relationTo: 'pages';
|
||||
value: number | Page;
|
||||
} | null)
|
||||
| ({
|
||||
relationTo: 'forms';
|
||||
value: number | Form;
|
||||
} | null)
|
||||
| ({
|
||||
relationTo: 'form-submissions';
|
||||
value: number | FormSubmission;
|
||||
} | null);
|
||||
globalSlug?: string | null;
|
||||
user: {
|
||||
@ -494,6 +751,176 @@ export interface PropertiesSelect<T extends boolean = true> {
|
||||
createdAt?: T;
|
||||
_status?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "pages_select".
|
||||
*/
|
||||
export interface PagesSelect<T extends boolean = true> {
|
||||
title?: T;
|
||||
hero_img?: T;
|
||||
slug?: T;
|
||||
layout?:
|
||||
| T
|
||||
| {
|
||||
contentBlock?:
|
||||
| T
|
||||
| {
|
||||
content?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
formBlock?:
|
||||
| T
|
||||
| {
|
||||
form?: T;
|
||||
enableIntro?: T;
|
||||
introContent?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
};
|
||||
meta?:
|
||||
| T
|
||||
| {
|
||||
title?: T;
|
||||
description?: T;
|
||||
canonical_url?: T;
|
||||
};
|
||||
createdBy?: T;
|
||||
updatedBy?: T;
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
_status?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "forms_select".
|
||||
*/
|
||||
export interface FormsSelect<T extends boolean = true> {
|
||||
title?: T;
|
||||
fields?:
|
||||
| T
|
||||
| {
|
||||
checkbox?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
required?: T;
|
||||
defaultValue?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
email?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
required?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
message?:
|
||||
| T
|
||||
| {
|
||||
message?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
number?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
defaultValue?: T;
|
||||
required?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
select?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
defaultValue?: T;
|
||||
placeholder?: T;
|
||||
options?:
|
||||
| T
|
||||
| {
|
||||
label?: T;
|
||||
value?: T;
|
||||
id?: T;
|
||||
};
|
||||
required?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
text?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
defaultValue?: T;
|
||||
required?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
textarea?:
|
||||
| T
|
||||
| {
|
||||
name?: T;
|
||||
label?: T;
|
||||
width?: T;
|
||||
defaultValue?: T;
|
||||
required?: T;
|
||||
id?: T;
|
||||
blockName?: T;
|
||||
};
|
||||
};
|
||||
submitButtonLabel?: T;
|
||||
confirmationType?: T;
|
||||
confirmationMessage?: T;
|
||||
redirect?:
|
||||
| T
|
||||
| {
|
||||
url?: T;
|
||||
};
|
||||
emails?:
|
||||
| T
|
||||
| {
|
||||
emailTo?: T;
|
||||
cc?: T;
|
||||
bcc?: T;
|
||||
replyTo?: T;
|
||||
emailFrom?: T;
|
||||
subject?: T;
|
||||
message?: T;
|
||||
id?: T;
|
||||
};
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "form-submissions_select".
|
||||
*/
|
||||
export interface FormSubmissionsSelect<T extends boolean = true> {
|
||||
form?: T;
|
||||
submissionData?:
|
||||
| T
|
||||
| {
|
||||
field?: T;
|
||||
value?: T;
|
||||
id?: T;
|
||||
};
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "payload-locked-documents_select".
|
||||
|
||||
@ -15,6 +15,8 @@ import { BlogCategories } from "@/collections/BlogCategories";
|
||||
import { Blogs } from "@/collections/Blogs";
|
||||
import { PropertyFeatures } from "@/collections/PropertyFeatures";
|
||||
import { Properties } from "./collections/Properties";
|
||||
import { Pages } from "@/collections/Pages";
|
||||
import { formBuilderPlugin } from "@payloadcms/plugin-form-builder";
|
||||
|
||||
const filename = fileURLToPath(import.meta.url);
|
||||
const dirname = path.dirname(filename);
|
||||
@ -39,7 +41,7 @@ export default buildConfig({
|
||||
},
|
||||
theme: "dark",
|
||||
},
|
||||
collections: [Users, Media, BlogTags, BlogCategories, Blogs, PropertyFeatures, Properties],
|
||||
collections: [Users, Media, BlogTags, BlogCategories, Blogs, PropertyFeatures, Properties, Pages],
|
||||
editor: lexicalEditor(),
|
||||
secret: process.env.PAYLOAD_SECRET || "",
|
||||
typescript: {
|
||||
@ -71,5 +73,55 @@ export default buildConfig({
|
||||
endpoint: process.env.S3_ENDPOINT,
|
||||
},
|
||||
}),
|
||||
// form builder
|
||||
formBuilderPlugin({
|
||||
fields: {
|
||||
checkbox: true,
|
||||
email: true,
|
||||
number: true,
|
||||
select: true,
|
||||
text: true,
|
||||
textarea: true,
|
||||
country: false,
|
||||
state: false,
|
||||
payment: false,
|
||||
},
|
||||
formOverrides: {
|
||||
fields: undefined,
|
||||
admin: {
|
||||
group: "General",
|
||||
useAsTitle: "title",
|
||||
},
|
||||
},
|
||||
formSubmissionOverrides: {
|
||||
fields: undefined,
|
||||
admin: {
|
||||
group: "General",
|
||||
useAsTitle: "form",
|
||||
},
|
||||
},
|
||||
// beforeEmail: (emailsToSend, beforeChangeParams) => {
|
||||
// if (beforeChangeParams.data.form === 1) {
|
||||
// const submissionData: Record<string, any> = {};
|
||||
// for (const s of beforeChangeParams.data.submissionData) {
|
||||
// submissionData[s.field] = s.value;
|
||||
// }
|
||||
|
||||
// submissionData["confirmation"] = submissionData["confirmation"]
|
||||
// ? "I consent to receive text messages and emails, and that I am 18+ years old."
|
||||
// : "";
|
||||
|
||||
// // modify the emails in any way before they are sent
|
||||
// return emailsToSend.map((email) => {
|
||||
// return {
|
||||
// ...email,
|
||||
// html: loadEmailTemplate("contact-form-email.html", submissionData),
|
||||
// };
|
||||
// });
|
||||
// }
|
||||
|
||||
// return emailsToSend;
|
||||
// },
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
26
src/services/hooks/form.ts
Normal file
26
src/services/hooks/form.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { Form } from "@/payload-types";
|
||||
import { useState } from "react";
|
||||
import { fetchFormREST } from "../rest/form";
|
||||
|
||||
export function useFormQuery() {
|
||||
const [data, setData] = useState<Form | null>(null);
|
||||
const [isFetching, setFetching] = useState(false);
|
||||
|
||||
async function _fetch(id: number) {
|
||||
setFetching(true);
|
||||
const res = await fetchFormREST(id);
|
||||
setFetching(false);
|
||||
|
||||
if (!!res) {
|
||||
setData(res);
|
||||
} else {
|
||||
setData(null);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
_fetch,
|
||||
data,
|
||||
isFetching,
|
||||
};
|
||||
}
|
||||
12
src/services/payload/form.ts
Normal file
12
src/services/payload/form.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import payloadConfig from "@/payload.config";
|
||||
import { getPayload } from "payload";
|
||||
|
||||
export async function fetchForm(formID: number) {
|
||||
const payload = await getPayload({ config: payloadConfig });
|
||||
const formRes = await payload.findByID({
|
||||
collection: "forms",
|
||||
id: formID,
|
||||
});
|
||||
|
||||
return formRes;
|
||||
}
|
||||
11
src/services/rest/form.ts
Normal file
11
src/services/rest/form.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { Form } from "@/payload-types";
|
||||
|
||||
export async function fetchFormREST(id: number) {
|
||||
const req = await fetch(`/api/forms/${id}`);
|
||||
if (req.ok) {
|
||||
const resData = (await req.json()) as Form;
|
||||
return resData;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
27
yarn.lock
27
yarn.lock
@ -2673,6 +2673,20 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@payloadcms/plugin-form-builder@npm:^3.35.1":
|
||||
version: 3.35.1
|
||||
resolution: "@payloadcms/plugin-form-builder@npm:3.35.1"
|
||||
dependencies:
|
||||
"@payloadcms/ui": "npm:3.35.1"
|
||||
escape-html: "npm:^1.0.3"
|
||||
peerDependencies:
|
||||
payload: 3.35.1
|
||||
react: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
|
||||
react-dom: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
|
||||
checksum: 10c0/48a7f5ecbf0c7c3b46fcc0a92ca3c2ff3c759f16c568973c19ccd8c38cfc93ffdd8ddbee76266ac7063de3d6b1ba9916da07ea13fd6828ad12ae6be7ea2cca8f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@payloadcms/richtext-lexical@npm:^3.35.1":
|
||||
version: 3.35.1
|
||||
resolution: "@payloadcms/richtext-lexical@npm:3.35.1"
|
||||
@ -5023,6 +5037,7 @@ __metadata:
|
||||
"@payloadcms/db-postgres": "npm:^3.35.1"
|
||||
"@payloadcms/next": "npm:^3.35.1"
|
||||
"@payloadcms/payload-cloud": "npm:^3.35.1"
|
||||
"@payloadcms/plugin-form-builder": "npm:^3.35.1"
|
||||
"@payloadcms/richtext-lexical": "npm:^3.35.1"
|
||||
"@payloadcms/storage-s3": "npm:^3.35.1"
|
||||
"@tailwindcss/postcss": "npm:^4"
|
||||
@ -5042,6 +5057,7 @@ __metadata:
|
||||
qs-esm: "npm:^7.0.2"
|
||||
react: "npm:^19.0.0"
|
||||
react-dom: "npm:^19.0.0"
|
||||
react-hook-form: "npm:^7.56.1"
|
||||
react-select: "npm:^5.10.1"
|
||||
swiper: "npm:^11.2.6"
|
||||
tailwindcss: "npm:^4"
|
||||
@ -5510,7 +5526,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"escape-html@npm:1.0.3":
|
||||
"escape-html@npm:1.0.3, escape-html@npm:^1.0.3":
|
||||
version: 1.0.3
|
||||
resolution: "escape-html@npm:1.0.3"
|
||||
checksum: 10c0/524c739d776b36c3d29fa08a22e03e8824e3b2fd57500e5e44ecf3cc4707c34c60f9ca0781c0e33d191f2991161504c295e98f68c78fe7baa6e57081ec6ac0a3
|
||||
@ -8782,6 +8798,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-hook-form@npm:^7.56.1":
|
||||
version: 7.56.1
|
||||
resolution: "react-hook-form@npm:7.56.1"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17 || ^18 || ^19
|
||||
checksum: 10c0/26eafd54bf47167628e34c2f22ea27ea7bdd5b4231a56af5be31ccedfb2a721708b308026ea4a17f2fb15c7b5fff83c0feb4acc7aa07bd6faa8506e917810cab
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-image-crop@npm:10.1.8":
|
||||
version: 10.1.8
|
||||
resolution: "react-image-crop@npm:10.1.8"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user