@finos/legend-application-marketplace
Version:
Legend Marketplace application core
83 lines • 6.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2020-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { observer } from 'mobx-react-lite';
import { useState } from 'react';
import { CloseIcon, ErrorWarnIcon, RefreshIcon, SendIcon, SimpleCalendarIcon, } from '@finos/legend-art';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { LEGEND_MARKETPLACE_APP_EVENT } from '../../__lib__/LegendMarketplaceAppEvent.js';
export const DemoModal = observer(() => {
const legendMarketplaceBaseStore = useLegendMarketplaceBaseStore();
const showDemoForm = legendMarketplaceBaseStore.showDemoModal;
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitError, setSubmitError] = useState(null);
const [formErrors, setFormErrors] = useState({});
const [formData, setFormData] = useState({
name: '',
division: '',
reason: '',
});
const closeDemoForm = () => {
legendMarketplaceBaseStore.setDemoModal(false);
setFormData({ name: '', division: '', reason: '' });
setFormErrors({});
setSubmitError(null);
};
const handleInputChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
if (formErrors[field]) {
setFormErrors((prev) => ({ ...prev, [field]: undefined }));
}
// Clear submit error when user starts typing
if (submitError) {
setSubmitError(null);
}
};
const validateForm = () => {
const errors = {};
if (!formData.name.trim()) {
errors.name = 'Name is required';
}
if (!formData.division.trim()) {
errors.division = 'Division/Team name is required';
}
if (!formData.reason.trim()) {
errors.reason = 'Please provide a reason/use case';
}
else if (formData.reason.trim().length < 10) {
errors.reason = 'Please provide more details (minimum 10 characters)';
}
setFormErrors(errors);
return Object.keys(errors).length === 0;
};
const handleSubmitDemo = (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
setSubmitError(null);
legendMarketplaceBaseStore.applicationStore.telemetryService.logEvent(LEGEND_MARKETPLACE_APP_EVENT.SCHEDULE_DEMO, {
name: formData.name,
division: formData.division,
});
};
if (!showDemoForm) {
return null;
}
return (_jsx("div", { className: "demo-form-overlay", children: _jsxs("div", { className: "demo-form-modal", children: [_jsx("button", { className: "close-btn", onClick: closeDemoForm, children: _jsx(CloseIcon, { className: "demo-form-modal__close" }) }), _jsxs("div", { className: "form-header", children: [_jsx("div", { className: "form-icon", children: _jsx(SimpleCalendarIcon, { className: "demo-form-modal__icon" }) }), _jsx("h3", { className: "form-title", children: "Schedule a Demo" }), _jsx("p", { className: "form-subtitle", children: "Get a personalized demonstration of our vendor data management platform" })] }), _jsxs("form", { onSubmit: handleSubmitDemo, className: "demo-form", children: [submitError && (_jsxs("div", { className: "api-error-message", children: [_jsx(ErrorWarnIcon, {}), _jsx("span", { children: submitError })] })), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", className: "form-label", children: "Full Name *" }), _jsx("input", { type: "text", id: "name", className: `form-input ${formErrors.name ? 'error' : ''}`, placeholder: "Enter your full name", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value) }), formErrors.name && (_jsx("span", { className: "error-message", children: formErrors.name }))] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "division", className: "form-label", children: "Division / Team Name *" }), _jsx("input", { type: "text", id: "division", className: `form-input ${formErrors.division ? 'error' : ''}`, placeholder: "e.g., Investment Banking, Risk Management, Trading", value: formData.division, onChange: (e) => handleInputChange('division', e.target.value) }), formErrors.division && (_jsx("span", { className: "error-message", children: formErrors.division }))] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "reason", className: "form-label", children: "Reason / Use Case *" }), _jsx("textarea", { id: "reason", className: `form-textarea ${formErrors.reason ? 'error' : ''}`, placeholder: "Tell us about your specific use case, what challenges you're facing with vendor data management, and what you'd like to see in the demo...", rows: 4, value: formData.reason, onChange: (e) => handleInputChange('reason', e.target.value) }), formErrors.reason && (_jsx("span", { className: "error-message", children: formErrors.reason })), _jsxs("div", { className: "character-count", children: [formData.reason.length, " characters"] })] }), _jsxs("div", { className: "form-actions", children: [_jsx("button", { type: "button", className: "btn-secondary", onClick: closeDemoForm, disabled: isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "btn-primary", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(RefreshIcon, {}), "Submitting..."] })) : (_jsxs(_Fragment, { children: [_jsx(SendIcon, {}), "Schedule Demo"] })) })] })] })] }) }));
});
//# sourceMappingURL=DemoModal.js.map