pixelize-design-library 2.1.26 → 2.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Components/ContactForm/ContactForm.d.ts +1 -1
  2. package/dist/Components/ContactForm/ContactForm.js +23 -22
  3. package/dist/Components/ContactForm/ContactFormProps.d.ts +3 -0
  4. package/package.json +1 -1
package/dist/Components/ContactForm/ContactForm.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ContactFormProps } from "./ContactFormProps";
3
- declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, }: ContactFormProps) => React.JSX.Element;
3
+ declare const ContactForm: ({ apiKey, customFields, getCustomValues, isDisabled, organizationId, customerId, buttonColorScheme, buttonSx, }: ContactFormProps) => React.JSX.Element;
4
4
  export default ContactForm;
package/dist/Components/ContactForm/ContactForm.js CHANGED
@@ -78,22 +78,24 @@ var react_2 = require("@chakra-ui/react");
78
78
  var TextInput_1 = __importDefault(require("../Input/TextInput"));
79
79
  var lucide_react_1 = require("lucide-react");
80
80
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
81
+ var InputTextArea_1 = __importDefault(require("../InputTextArea/InputTextArea"));
82
+ var Button_1 = __importDefault(require("../Button/Button"));
81
83
  var ContactForm = function (_a) {
82
84
  var _b;
83
- var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId;
85
+ var apiKey = _a.apiKey, customFields = _a.customFields, getCustomValues = _a.getCustomValues, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, organizationId = _a.organizationId, customerId = _a.customerId, _d = _a.buttonColorScheme, buttonColorScheme = _d === void 0 ? "primary" : _d, buttonSx = _a.buttonSx;
84
86
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
85
- var _d = (0, react_1.useState)({
87
+ var _e = (0, react_1.useState)({
86
88
  firstName: "",
87
89
  lastName: "",
88
90
  email: "",
89
91
  phone: "",
90
92
  enquiry: "",
91
- }), formData = _d[0], setFormData = _d[1];
92
- var _e = (0, react_1.useState)({
93
+ }), formData = _e[0], setFormData = _e[1];
94
+ var _f = (0, react_1.useState)({
93
95
  title: "",
94
96
  isSuccess: false,
95
- }), response = _e[0], setResponse = _e[1];
96
- var _f = (0, react_1.useState)({}), errors = _f[0], setErrors = _f[1];
97
+ }), response = _f[0], setResponse = _f[1];
98
+ var _g = (0, react_1.useState)({}), errors = _g[0], setErrors = _g[1];
97
99
  var handleChange = function (field, value) {
98
100
  setFormData(function (prev) {
99
101
  var _a;
@@ -108,11 +110,12 @@ var ContactForm = function (_a) {
108
110
  var newErrors = {};
109
111
  if (!formData.firstName.trim())
110
112
  newErrors.firstName = "First name is required";
111
- // if (!formData.email.trim()) {
112
- // newErrors.email = "Email is required";
113
- // } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
114
- // newErrors.email = "Invalid email format";
115
- // }
113
+ if (!formData.email.trim()) {
114
+ // newErrors.email = "Email is required";
115
+ }
116
+ else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
117
+ newErrors.email = "Invalid email format";
118
+ }
116
119
  if (!formData.phone.trim()) {
117
120
  newErrors.phone = "Phone is required";
118
121
  }
@@ -194,22 +197,20 @@ var ContactForm = function (_a) {
194
197
  react_1.default.createElement(react_2.Box, { as: "form", onSubmit: handleSubmit },
195
198
  react_1.default.createElement(react_2.VStack, { spacing: 4 },
196
199
  react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
197
- react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.firstName, isRequired: true },
198
- react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, isRequired: true }),
199
- react_1.default.createElement(react_2.FormErrorMessage, null, errors.firstName)),
200
+ react_1.default.createElement(react_2.FormControl, null,
201
+ react_1.default.createElement(TextInput_1.default, { label: "First Name", placeholder: "Enter first name", value: formData.firstName, onChange: function (e) { return handleChange("firstName", e.target.value); }, error: Boolean(errors.firstName), errorMessage: errors.firstName, isRequired: true })),
200
202
  react_1.default.createElement(react_2.FormControl, null,
201
203
  react_1.default.createElement(TextInput_1.default, { label: "Last Name", placeholder: "Enter last name", value: formData.lastName, onChange: function (e) { return handleChange("lastName", e.target.value); } }))),
202
204
  react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 2 }, spacing: 4, w: "100%" },
203
- react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.phone, isRequired: true },
204
- react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true }),
205
- react_1.default.createElement(react_2.FormErrorMessage, null, errors.phone)),
205
+ react_1.default.createElement(react_2.FormControl, null,
206
+ react_1.default.createElement(TextInput_1.default, { label: "Phone", placeholder: "Enter phone number", value: formData.phone, onChange: function (e) { return handleChange("phone", e.target.value); }, isRequired: true, error: Boolean(errors.phone), errorMessage: errors.phone })),
206
207
  react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.email },
207
- react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); } }),
208
- react_1.default.createElement(react_2.FormErrorMessage, null, errors.email))),
208
+ react_1.default.createElement(TextInput_1.default, { label: "Email", placeholder: "Enter email", value: formData.email, onChange: function (e) { return handleChange("email", e.target.value); }, error: Boolean(errors.email), errorMessage: errors.email }))),
209
209
  customFields,
210
- react_1.default.createElement(react_2.FormControl, { w: "100%" },
210
+ react_1.default.createElement(react_2.FormControl, null,
211
211
  react_1.default.createElement(react_2.Text, { fontSize: "sm", mb: 1 }, "Enquiry"),
212
- react_1.default.createElement(react_2.Textarea, { placeholder: "Enter your enquiry", rows: 5, value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } })),
213
- react_1.default.createElement(react_2.Button, { type: "submit", disabled: isDisabled, colorScheme: "blue", w: "full", mt: 2 }, "Send Message")))));
212
+ react_1.default.createElement(react_2.Box, null,
213
+ react_1.default.createElement(InputTextArea_1.default, { placeholder: "Enter your enquiry", rows: 4, width: "100%", value: formData.enquiry, onChange: function (e) { return handleChange("enquiry", e.target.value); } }))),
214
+ react_1.default.createElement(Button_1.default, { type: "submit", isDisabled: isDisabled, colorScheme: buttonColorScheme, width: "full", sx: buttonSx }, "Send Message")))));
214
215
  };
215
216
  exports.default = ContactForm;
package/dist/Components/ContactForm/ContactFormProps.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { SystemStyleObject } from "@chakra-ui/react";
1
2
  import { ReactNode } from "react";
2
3
  export interface ContactFormProps {
3
4
  apiKey?: string;
@@ -6,4 +7,6 @@ export interface ContactFormProps {
6
7
  isDisabled?: boolean;
7
8
  customFields?: ReactNode;
8
9
  getCustomValues?: () => Record<string, any>;
10
+ buttonColorScheme?: "primary" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "secondary" | "tertiary" | undefined;
11
+ buttonSx?: SystemStyleObject;
9
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.1.26",
3
+ "version": "2.1.28",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",