Skip to content

Formgent integration changes #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devShamim merged 2 commits into from
Dec 3, 2025
Merged

Formgent integration changes #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0680b7
formgent integration code update
tanjimhasan Dec 1, 2025
a0e46bf
integration update
tanjimhasan Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25,037 changes: 23,280 additions & 1,757 deletions assets/css/admin-main.css
View file
Open in desktop

Large diffs are not rendered by default.

25,037 changes: 23,277 additions & 1,760 deletions assets/css/admin-main.rtl.css
View file
Open in desktop

Large diffs are not rendered by default.

4,759 changes: 2,651 additions & 2,108 deletions assets/css/all-listings.css
View file
Open in desktop

Large diffs are not rendered by default.

4,756 changes: 2,648 additions & 2,108 deletions assets/css/all-listings.rtl.css
View file
Open in desktop

Large diffs are not rendered by default.

699 changes: 500 additions & 199 deletions assets/css/formgent-integration.css
View file
Open in desktop

Large diffs are not rendered by default.

697 changes: 498 additions & 199 deletions assets/css/formgent-integration.rtl.css
View file
Open in desktop

Large diffs are not rendered by default.

4,759 changes: 2,651 additions & 2,108 deletions assets/css/public-main.css
View file
Open in desktop

Large diffs are not rendered by default.

4,756 changes: 2,648 additions & 2,108 deletions assets/css/public-main.rtl.css
View file
Open in desktop

Large diffs are not rendered by default.

30,583 changes: 14,776 additions & 15,807 deletions assets/js/formgent-integration.js
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 6 additions & 8 deletions assets/src/js/formgent-integration/components/EnquiriesComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
/**
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { useEffect, useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import Inbox from '../icons/Inbox';
import Envelope from '../icons/Envelope';
import Calendar from '../icons/Calendar';
import Check from '../icons/Check';
import { EnquiriesComponentStyle } from './style';
import Tables from './Table';
import Envelope from '../icons/Envelope';
import Inbox from '../icons/Inbox';
import {
fetchEnquiryKPIs,
fetchAllEnquiries,
fetchEnquiryKPIs,
refreshEnquiryData,
} from '../utils/enquiryUtils';
import { EnquiriesComponentStyle } from './style';
import Tables from './Table';

const EnquiriesComponent = ({ data = {} }) => {
const [responseKPIs, setResponseKPIs] = useState({});
Expand All @@ -25,14 +25,12 @@ const EnquiriesComponent = ({ data = {} }) => {
//get response KPIs
useEffect(() => {
fetchEnquiryKPIs().then((data) => {
console.log('KPIs response:', data);
setResponseKPIs(data);
});
}, []);

useEffect(() => {
fetchAllEnquiries().then((data) => {
console.log('Responses response:', data);
setResponses(data);
});
}, []);
Expand Down
85 changes: 35 additions & 50 deletions assets/src/js/formgent-integration/components/EnquiryDetailsModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
/**
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
import { Modal } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';

/**
* External dependencies
*/
import ReactSVG from 'react-inlinesvg';

/**
* Internal dependencies
*/
import { renderAnswerValue } from '../utils/renderAnswerValue';
import { EnquiryDetailsModalStyle } from './style';
import Reply from '../icons/Reply';
import Check from '../icons/Check';
import Reply from '../icons/Reply';
import Trash from '../icons/Trash';
import {
fetchSingleEnquiry,
findMatchingEnquiry,
getStatusBadgeText,
} from '../utils/enquiryUtils';
import { EnquiryDetailsModalStyle } from './style';

/**
* EnquiryDetailsModal Component
Expand All @@ -43,6 +47,12 @@ export default function EnquiryDetailsModal({
const [matchedEnquiry, setMatchedEnquiry] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const {
TableDrawerAnswer,
getFormattedAnswer,
handleAnswerIcon,
isProActive,
} = window.formgent.directorist_modules;

// Effect to fetch single item data when selectedItem changes
useEffect(() => {
Expand Down Expand Up @@ -94,51 +104,6 @@ export default function EnquiryDetailsModal({
handleMarkAsRead(singleItem.response);
};

// Function to render form answers
const renderFormAnswers = () => {
if (
!singleItem ||
!singleItem.fields ||
!singleItem.response ||
!singleItem.response.answers
) {
return <p>No answers available</p>;
}

const { fields, response } = singleItem;

return (
<div className="directorist-enquiry-answers">
{fields.map((field, index) => {
// Find matching answer by field name
const matchingAnswer = response.answers.find(
(answer) => answer.field_name === field.name
);

return (
<div
key={field.name || index}
className="directorist-enquiry-answer-item"
>
<h4 className="directorist-enquiry-answer-title">
{field.label}
</h4>
<div className="directorist-enquiry-answer-value">
{matchingAnswer ? (
renderAnswerValue(matchingAnswer)
) : (
<span className="directorist-no-answer">
No answer provided
</span>
)}
</div>
</div>
);
})}
</div>
);
};

if (!isOpen || !selectedItem) {
return null;
}
Expand Down Expand Up @@ -215,7 +180,27 @@ export default function EnquiryDetailsModal({
</div>

<div className="directorist-answers-section">
{renderFormAnswers()}
{/* {
singleItem.response.answers.ma
} */}
{singleItem?.response?.answers.map(
(answer, index) => {
return (
<TableDrawerAnswer
key={index}
answer={answer}
handleAnswerIcon={handleAnswerIcon}
getFormattedAnswer={
getFormattedAnswer
}
ReactSVG={ReactSVG}
useState={useState}
useEffect={useEffect}
isLoadedFromDirectorist={true}
/>
);
}
)}
</div>

<div className="directorist-enquiry-modal-footer">
Expand Down
185 changes: 152 additions & 33 deletions assets/src/js/formgent-integration/components/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,9 @@ const EnquiryDetailsModalStyle = styled.div`
}
}
.directorist-enquiry-listing {
margin-bottom: 24px;
margin-bottom: 16px;
border-bottom: 1px solid var(--directorist-color-border);
padding-bottom: 16px;
h3 {
margin: 0 0 4px 0;
font-size: 16px;
Expand Down Expand Up @@ -268,40 +270,32 @@ const EnquiryDetailsModalStyle = styled.div`
font-size: 14px;
font-weight: 400;
}
.directorist-enquiry-answer-repeater {
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #eee;
}

thead {
background: linear-gradient(to bottom, #f9f9f9, #f1f3f5);
}

th {
text-align: left;
padding: 12px 16px;
font-weight: 600;
font-size: 14px;
color: #333;
}

td {
padding: 12px 16px;
font-size: 14px;
color: #000;
border-top: 1px solid #eee;
}

/* Hover effect */
tr:hover td {
background-color: #fafafa;
.directorist-repeater-table-wrapper {
max-width: 600px;
@media (max-width: 768px) {
max-width: 500px;
}
}
.formgent-editor-rating {
display: flex;
align-items: center;
gap: 12px;
margin: 5px 0;
}
.formgent-editor-rating__icons {
display: flex;
align-items: center;
gap: 5px;
}
.formgent-editor-rating__icons
.formgent-editor-rating__icon--active
svg
path {
fill: var(--directorist-color-primary);
}
.formgent-google-map-external-link {
color: var(--directorist-color-info);
}
//stick footer to bottom
.directorist-enquiry-modal-footer {
border-top: 1px solid #e5e7eb;
Expand Down Expand Up @@ -353,6 +347,131 @@ const EnquiryDetailsModalStyle = styled.div`
color: var(--directorist-color-info);
}
}
.directorist-answers-section {
display: flex;
gap: 24px;
flex-direction: column;
align-items: flex-start;
}

.formgent-response-badge {
background-color: var(--directorist-color-light);
padding: 0 8px;
color: var(--directorist-color-dark);
font-size: 14px;
line-height: 1.6;
font-weight: 400;
border-radius: 4px;
}

.formgent-response-table__drawer__tab__item {
display: flex;
gap: 12px;
width: 100%;
&.formgent-response-table__drawer__tab__item--tag {
.formgent-response-table__drawer__tab__item__title {
height: 40px;
}
}
.formgent-response-table__drawer__tab__item__icon {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
min-width: 40px;
border-radius: 10px;
color: var(--directorist-color-dark);
background-color: var(--directorist-color-light);
}
.formgent-response-table__drawer__tab__item__content {
display: flex;
gap: 6px;
flex-direction: column;
flex: 1;
}
.formgent-response-table__drawer__tab__item__title {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--formgent-color-dark);
margin: 0;
&:first-letter {
text-transform: uppercase;
}
}
.formgent-response-table__drawer__tab__item__desc {
display: flex;
gap: 5px;
flex-wrap: wrap;
font-size: 14px;
font-weight: 400;
color: var(--directorist-color-light-gray);
margin: 0;
img {
max-width: 200px;
}
.formgent-signature-image-preview,
.formgent-file-upload-preview {
width: 100%;
max-width: 350px;
}
.formgent-file-upload-answer {
padding: 8px 0;
&:last-child {
border-bottom: 0 none;
padding-bottom: 0;
}
}
}
.formgent-response-table__drawer__tab__item__desc__key {
font-size: 14px;
font-weight: 500;
display: inline-flex;
padding-right: 4px;
&::first-letter {
text-transform: uppercase;
}
}
.formgent-response-table__drawer__tab__item__desc__value {
font-size: 14px;
color: var(--directorist-color-light-gray);
}
.formgent-response-table__drawer__tab__item__add {
display: flex;
align-items: center;
background: transparent;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
&:hover {
color: var(--directorist-color-primary);
}
}
.formgent-response-table__drawer__tab__item__btns {
display: flex;
gap: 8px;
flex-wrap: wrap;
.formgent-response-table__drawer__tab__item__btn {
font-size: 14px;
font-weight: 500;
padding: 0 8px;
margin: 0;
height: 28px;
color: var(--directorist-color-gray);
background: var(--formgent-color-border);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all ease 0.3s;
&:hover {
color: var(--formgent-color-white);
background: var(--formgent-color-light-gray);
}
}
}
}
`;

export { EnquiriesComponentStyle, EnquiryDetailsModalStyle };
Loading