diff --git a/apps/web/app/(app)/environments/[environmentId]/workspace/unify/sources/components/create-connector-modal.tsx b/apps/web/app/(app)/environments/[environmentId]/workspace/unify/sources/components/create-connector-modal.tsx index d5b486d81b..c250bdf119 100644 --- a/apps/web/app/(app)/environments/[environmentId]/workspace/unify/sources/components/create-connector-modal.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/workspace/unify/sources/components/create-connector-modal.tsx @@ -44,6 +44,84 @@ interface CreateConnectorModalProps { environmentId: string; } +const getDialogTitle = ( + step: TCreateConnectorStep, + type: TConnectorType | null, + t: (key: string) => string +): string => { + if (step === "selectType") return t("environments.unify.add_feedback_source"); + if (type === "formbricks") return t("environments.unify.select_survey_and_questions"); + if (type === "csv") return t("environments.unify.import_csv_data"); + return t("environments.unify.configure_mapping"); +}; + +const getDialogDescription = ( + step: TCreateConnectorStep, + type: TConnectorType | null, + t: (key: string) => string +): string => { + if (step === "selectType") return t("environments.unify.select_source_type_description"); + if (type === "formbricks") return t("environments.unify.select_survey_questions_description"); + if (type === "csv") return t("environments.unify.upload_csv_data_description"); + return t("environments.unify.configure_mapping"); +}; + +const getNextStepButtonLabel = (type: TConnectorType | null, t: (key: string) => string): string => { + if (type === "formbricks") return t("environments.unify.select_elements"); + if (type === "csv") return t("environments.unify.configure_import"); + return t("environments.unify.create_mapping"); +}; + +const getCreateDisabled = ( + type: TConnectorType | null, + isFormbricksValid: boolean, + isCsvValid: boolean, + allRequiredMapped: boolean +): boolean => { + if (type === "formbricks") return !isFormbricksValid; + if (type === "csv") return !isCsvValid; + return !allRequiredMapped; +}; + +interface HistoricalImportSectionProps { + responseCount: number; + elementCount: number; + totalFeedbackRecords: number; + importHistorical: boolean; + onImportHistoricalChange: (checked: boolean) => void; + t: (key: string, options?: Record) => string; +} + +const HistoricalImportSection = ({ + responseCount, + elementCount, + totalFeedbackRecords, + importHistorical, + onImportHistoricalChange, + t, +}: HistoricalImportSectionProps) => ( +
+

+ {t("environments.unify.existing_responses_info", { + responseCount, + elementCount, + total: totalFeedbackRecords, + })} +

+ +
+); + export const CreateConnectorModal = ({ open, onOpenChange, @@ -109,30 +187,21 @@ export const CreateConnectorModal = ({ }; const handleOpenChange = (newOpen: boolean) => { - if (!newOpen && !isImporting) { - resetForm(); - } - if (!isImporting) { - onOpenChange(newOpen); - } + if (isImporting) return; + if (!newOpen) resetForm(); + onOpenChange(newOpen); }; const handleNextStep = () => { - if (currentStep === "selectType" && selectedType) { - if (selectedType === "formbricks") { - const selectedSurvey = surveys.find((s) => s.id === selectedSurveyId); + if (currentStep !== "selectType" || !selectedType) return; - setConnectorName( - selectedSurvey - ? `${selectedSurvey.name} ${t("environments.unify.connection")}` - : defaultConnectorName[selectedType] - ); - } else { - setConnectorName(defaultConnectorName[selectedType]); - } - - setCurrentStep("mapping"); - } + const selectedSurvey = surveys.find((s) => s.id === selectedSurveyId); + setConnectorName( + selectedType === "formbricks" && selectedSurvey + ? `${selectedSurvey.name} ${t("environments.unify.connection")}` + : defaultConnectorName[selectedType] + ); + setCurrentStep("mapping"); }; const handleSurveySelect = (surveyId: string | null) => { @@ -169,18 +238,27 @@ export const CreateConnectorModal = ({ } }; + const handleHistoricalImport = async (connectorId: string, surveyId: string) => { + setIsImporting(true); + const importResult = await importHistoricalResponsesAction({ connectorId, environmentId, surveyId }); + setIsImporting(false); + + if (importResult?.data) { + toast.success( + t("environments.unify.historical_import_complete", { + successes: importResult.data.successes, + failures: importResult.data.failures, + skipped: importResult.data.skipped, + }) + ); + } else { + toast.error(getFormattedErrorMessage(importResult)); + } + }; + const handleCreate = async () => { if (!selectedType || !connectorName.trim()) return; - if (selectedType !== "formbricks") { - const requiredFields = FEEDBACK_RECORD_FIELDS.filter((f) => f.required); - const allRequired = requiredFields.every((field) => mappings.some((m) => m.targetFieldId === field.id)); - - if (!allRequired) { - console.warn("Not all required fields are mapped"); - } - } - setIsCreating(true); const connectorId = await onCreateConnector({ @@ -192,26 +270,7 @@ export const CreateConnectorModal = ({ }); if (connectorId && importHistorical && selectedSurveyId && selectedType === "formbricks") { - setIsImporting(true); - const importResult = await importHistoricalResponsesAction({ - connectorId, - environmentId, - surveyId: selectedSurveyId, - }); - - setIsImporting(false); - - if (importResult?.data) { - toast.success( - t("environments.unify.historical_import_complete", { - successes: importResult.data.successes, - failures: importResult.data.failures, - skipped: importResult.data.skipped, - }) - ); - } else { - toast.error(getFormattedErrorMessage(importResult)); - } + await handleHistoricalImport(connectorId, selectedSurveyId); } setIsCreating(false); @@ -261,30 +320,16 @@ export const CreateConnectorModal = ({ )} - - {currentStep === "selectType" - ? t("environments.unify.add_feedback_source") - : selectedType === "formbricks" - ? t("environments.unify.select_survey_and_questions") - : selectedType === "csv" - ? t("environments.unify.import_csv_data") - : t("environments.unify.configure_mapping")} - - - {currentStep === "selectType" - ? t("environments.unify.select_source_type_description") - : selectedType === "formbricks" - ? t("environments.unify.select_survey_questions_description") - : selectedType === "csv" - ? t("environments.unify.upload_csv_data_description") - : t("environments.unify.configure_mapping")} - + {getDialogTitle(currentStep, selectedType, t)} + {getDialogDescription(currentStep, selectedType, t)}
- {currentStep === "selectType" ? ( + {currentStep === "selectType" && ( - ) : selectedType === "formbricks" ? ( + )} + + {currentStep === "mapping" && selectedType === "formbricks" && (
@@ -308,30 +353,23 @@ export const CreateConnectorModal = ({ />
- {responseCount !== null && responseCount > 0 && selectedElementIds.length > 0 && ( -
-

- {t("environments.unify.existing_responses_info", { - responseCount, - elementCount: selectedElementIds.length, - total: totalFeedbackRecords, - })} -

- -
- )} + {responseCount !== null && + responseCount > 0 && + selectedElementIds.length > 0 && + totalFeedbackRecords !== null && ( + + )}
- ) : selectedType === "csv" ? ( + )} + + {currentStep === "mapping" && selectedType === "csv" && (
@@ -353,7 +391,7 @@ export const CreateConnectorModal = ({ />
- ) : null} + )}
@@ -364,11 +402,7 @@ export const CreateConnectorModal = ({ )} {currentStep === "selectType" ? ( ) : (