This package exports two main components: RightSection and EnquiryForm. Below are their schemas and how to use them.

Installation

npm install my-npm-package

Usage

RightSection

The RightSection component is used to render a section with dynamic form fields. Below is the schema for its propTypes:

RightSection.propTypes = { formData: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, componentType: PropTypes.string.isRequired, subtitle: PropTypes.string, countryCode: PropTypes.string, endPoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), fields: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, displayName: PropTypes.string.isRequired, placeholder: PropTypes.string, type: PropTypes.string.isRequired, validation: PropTypes.object, value: PropTypes.string, options: PropTypes.arrayOf(PropTypes.object), endPoint: PropTypes.shape({url: PropTypes.string, method: PropTypes.string}), })).isRequired, subSection: PropTypes.shape({ componentType: PropTypes.string.isRequired, submitButtonText: PropTypes.string, events: PropTypes.shape({ onChangeEvent: PropTypes.string, onBlur: PropTypes.string, }), resendEndpoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), endPoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), }), submitButtonText: PropTypes.string, })), extraFields: PropTypes.arrayOf(PropTypes.string), externalLink: PropTypes.shape({ privacypolicy: PropTypes.string, termscondition: PropTypes.string, }), trackEvent: PropTypes.func, otpSuccessCallback: PropTypes.func, successCallback: PropTypes.func, utmfields: PropTypes.object, };

Example Usage

import { RightSection } from 'my-npm-package';

const formData = [ { title: "User Information", componentType: "form", subtitle: "Please fill out your details", countryCode: "US", endPoint: { url: "/submit", method: "POST" }, fields: [ { name: "firstName", displayName: "First Name", placeholder: "John", type: "text", validation: { required: true }, value: "", options: [] }, { name: "lastName", displayName: "Last Name", placeholder: "Doe", type: "text", validation: { required: true }, value: "", options: [] } ], submitButtonText: "Submit", }, ];

const MyComponent = () => ( );

EnquiryForm The EnquiryForm component is used to render an enquiry form with a banner. Below is the schema for its propTypes:

EnquiryForm.propTypes = { bannerProps: PropTypes.shape({ bannerTitle: PropTypes.string, listBannerItems: PropTypes.arrayOf(PropTypes.string), bannerImage: PropTypes.string, }), formData: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string, componentType: PropTypes.string.isRequired, subtitle: PropTypes.string, countryCode: PropTypes.string, endPoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), fields: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.isRequired, displayName: PropTypes.string.isRequired, placeholder: PropTypes.string, type: PropTypes.string.isRequired, validation: PropTypes.object, value: PropTypes.string, options: PropTypes.arrayOf(PropTypes.object), endPoint: PropTypes.shape({url: PropTypes.string, method: PropTypes.string}), })).isRequired, subSection: PropTypes.shape({ componentType: PropTypes.string.isRequired, submitButtonText: PropTypes.string, events: PropTypes.shape({ onChangeEvent: PropTypes.string, onBlur: PropTypes.string, }), resendEndpoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), endPoint: PropTypes.shape({ url: PropTypes.string.isRequired, method: PropTypes.string.isRequired, }), }), submitButtonText: PropTypes.string, })), extraFields: PropTypes.arrayOf(PropTypes.string), externalLink: PropTypes.shape({ privacypolicy: PropTypes.string, termscondition: PropTypes.string, }), trackEvent: PropTypes.func, otpSuccessCallback: PropTypes.func, successCallback: PropTypes.func, utmfields: PropTypes.object, };

Example Usage

import { EnquiryForm } from 'my-npm-package';

const bannerProps = { bannerTitle: "Contact Us", listBannerItems: ["24/7 Support", "Free Consultation"], bannerImage: "/path/to/image.jpg", };

const formData = [ { title: "Contact Details", componentType: "form", subtitle: "We would love to hear from you", countryCode: "US", endPoint: { url: "/contact", method: "POST" }, fields: [ { name: "email", displayName: "Email Address", placeholder: "[email protected]", type: "email", validation: { required: true }, value: "", options: [] }, { name: "message", displayName: "Message", placeholder: "Your message", type: "textarea", validation: { required: true }, value: "", options: [] } ], submitButtonText: "Send", }, ];

const MyEnquiryComponent = () => ( ); Props Overview Both RightSection and EnquiryForm have the following props structure:

formData: Array of objects representing the form sections and fields. title: String, title of the form section. componentType: String, type of the component, required. subtitle: String, subtitle of the form section. countryCode: String, country code for the form section. endPoint: Object with url and method for form submission. fields: Array of objects representing individual fields. name: String, name of the field, required. displayName: String, display name of the field, required. placeholder: String, placeholder text for the field. type: String, type of the field (e.g., text, email), required. validation: Object, validation rules for the field. value: String, default value of the field. options: Array of objects for select-type fields. endPoint: Object with url and method for dynamic field validation. subSection: Object representing a subsection within the form. componentType: String, type of the component, required. submitButtonText: String, text for the submit button. events: Object with event handlers (onChangeEvent, onBlur). resendEndpoint: Object with url and method for resending data. endPoint: Object with url and method for subsection submission. submitButtonText: String, text for the submit button. extraFields: Array of strings representing extra fields. externalLink: Object with privacypolicy and termscondition URLs. trackEvent: Function for tracking events. otpSuccessCallback: Function for OTP success callback. successCallback: Function for form submission success callback. utmfields: Object representing UTM fields.

For detailed usage and examples, please refer to the documentation or the example provided above.