pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/Checkbox/CheckboxProps.tsx

@@ -0,0 +1,42 @@
+import { CheckboxProps as ChakraButtonProps } from "@chakra-ui/react";
+
+export type CheckboxProps = Pick<
+  ChakraButtonProps,
+  | "spacing"
+  | "isInvalid"
+  | "size"
+  | "iconColor"
+  | "iconSize"
+  | "isChecked"
+  | "isIndeterminate"
+  | "onChange"
+  | "isDisabled"
+  | "value"
+  | "defaultChecked"
+  | "sx"
+> & {
+  label?: string;
+  width?: string | number;
+  variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
+  color?:
+    | "gray"
+    | "red"
+    | "orange"
+    | "yellow"
+    | "green"
+    | "teal"
+    | "blue"
+    | "cyan"
+    | "purple"
+    | "pink"
+    | "whiteAlpha"
+    | "blackAlpha";
+  size?: "sm" | "md" | "lg";
+  isRequired?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  isInformation?: boolean;
+  informationMessage?: string;
+  id?: string;
+  helperText?: string;
+};

package/src/Components/Common/ErrorComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const ErrorComponent = ({ error, errorClassName }: { error: string, errorClassName?: string }) => {
+    return (
+        <p className={`mt-1 text-sm text-[#F2463A] flex items-center gap-1 ${errorClassName}`}>
+            <svg width="12" height="12" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="50" cy="50" r="50" fill="#EF4444" />
+                <rect x="46" y="40" width="8" height="30" rx="2" fill="white" />
+                <circle cx="50" cy="28" r="4" fill="white" />
+            </svg>
+            {error}
+        </p>
+    )
+}
+
+export default ErrorComponent;

package/src/Components/Common/ErrorMessage.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Flex, Text, } from "@chakra-ui/react";
+import { Info } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const ErrorMessage = ({ errorMessage }: { errorMessage?: string }) => {
+
+    const theme = useCustomTheme();
+    return (
+        <Flex
+            align="center"
+            color={theme.colors.red[500]}
+            fontSize="0.875rem"
+            role="alert"
+        >
+            <Info width={"0.875rem"} />
+            <Text ml={"0.188rem"}>{errorMessage ?? "Error"}</Text>
+        </Flex>
+    );
+};
+
+export default ErrorMessage;

package/src/Components/Common/FormLabel.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { FormLabel, Box, Tooltip, Icon } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { InfoIcon } from "lucide-react";
+
+export const TextLabel = ({
+  label,
+  id,
+  isRequired = false,
+  isInformation = false,
+  informationMessage = "",
+}: {
+  label: string;
+  id?: string;
+  isInformation?: boolean;
+  informationMessage?: string;
+  isRequired?: boolean;
+}) => {
+  const theme = useCustomTheme();
+
+  return (
+    <Box >
+      <FormLabel
+        htmlFor={id ?? label}
+        color={theme.colors.gray[600]}
+        fontWeight={400}
+        fontSize="0.875rem"
+      >
+        <Box as="span" display="inline-flex" alignItems="center" gap="0.35rem">
+          {label}
+          {isRequired && (<span style={{ color: theme.colors.semantic.error[500] }}>*</span>)}
+          {isInformation && informationMessage && (
+            <Tooltip
+              label={informationMessage}
+              hasArrow
+              placement="top"
+              bg={theme.colors.gray[600]}
+              color={theme.colors.white}
+              fontSize="0.75rem"
+            >
+              <Icon as={InfoIcon} color={theme.colors.gray[500]} boxSize={4} />
+            </Tooltip>
+          )}
+        </Box>
+      </FormLabel>
+    </Box>
+  );
+};

package/src/Components/Common/HelperText.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { FormHelperText } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const HelperText = ({ helperText }: { helperText: string }) => {
+  const theme = useCustomTheme();
+  return (
+    <FormHelperText mt={1} fontSize={14} color={theme.colors.gray[500]}>
+      {helperText}
+    </FormHelperText>
+  );
+};
+
+export default HelperText;

package/src/Components/Common/Label.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Label = ({ label, labelClassName, isRequired }: { label: string, labelClassName?: string, isRequired?: boolean }) => {
+    return (
+        <label className={`block text-sm font-medium text-[#434853] mb-1 ${labelClassName}`} htmlFor={label}>
+            {label}
+            {isRequired && <span className="text-[#F2463A] ml-1">*</span>}
+        </label>
+    )
+}
+
+export default Label

package/src/Components/ContactForm/ContactForm.tsx

@@ -0,0 +1,250 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Button,
+  Heading,
+  Text,
+  VStack,
+  SimpleGrid,
+  FormControl,
+  FormErrorMessage,
+  Textarea,
+  Text as ChakraText,
+  Alert,
+} from "@chakra-ui/react";
+import TextInput from "../Input/TextInput";
+import { ContactFormProps } from "./ContactFormProps";
+import { CircleCheck, CircleX } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+
+const ContactForm = ({
+  apiKey,
+  customFields,
+  getCustomValues,
+  isDisabled = false,
+  organizationId,
+  customerId,
+}: ContactFormProps) => {
+  const { colors } = useCustomTheme();
+  const [formData, setFormData] = useState<{
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    enquiry: string;
+  }>({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+    enquiry: "",
+  });
+
+  const [response, setResponse] = useState<{
+    title: string;
+    isSuccess: boolean;
+  }>({
+    title: "",
+    isSuccess: false,
+  });
+
+  const [errors, setErrors] = useState<
+    Partial<Record<keyof typeof formData, string>>
+  >({});
+
+  const handleChange = <T,>(field: keyof typeof formData, value: T) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({ ...prev, [field]: "" }));
+  };
+
+  const validate = () => {
+    const newErrors: typeof errors = {};
+
+    if (!formData.firstName.trim())
+      newErrors.firstName = "First name is required";
+
+    // if (!formData.email.trim()) {
+    //   newErrors.email = "Email is required";
+    // } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+    //   newErrors.email = "Invalid email format";
+    // }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = "Phone is required";
+    } else if (!/^\d{7,15}$/.test(formData.phone)) {
+      newErrors.phone = "Phone must be 7–15 digits";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isDisabled) return;
+    if (!validate()) return;
+
+    if (!apiKey) {
+      setResponse({
+        title: "API key missing",
+        isSuccess: false,
+      });
+      return;
+    }
+
+    const customValues = getCustomValues?.() ?? {};
+
+    const payload = {
+      name: formData?.firstName + " " + formData?.lastName,
+      firstName: formData?.firstName,
+      lastName: formData?.lastName,
+      email: formData.email,
+      phone: formData.phone,
+      message: formData.enquiry,
+      ...customValues,
+      customerId,
+      organizationId,
+    };
+
+    try {
+      const response = await fetch(apiKey, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) throw new Error(result.message || "Submission failed");
+
+      // onSubmit(formData);
+      setFormData({
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        enquiry: "",
+      });
+
+      setResponse({
+        title: "Message Sent Successfully",
+        isSuccess: true,
+      });
+    } catch (error: any) {
+      setResponse({
+        title: "Failed to send message",
+        isSuccess: false,
+      });
+    }
+  };
+
+  return (
+    <Box
+      maxW="lg"
+      mx="auto"
+      p={8}
+      borderRadius="2xl"
+      boxShadow="lg"
+      bg={colors?.background?.[300]}
+    >
+      {response.title ? (
+        <Alert
+          status={response?.isSuccess ? "success" : "error"}
+          fontWeight={"bold"}
+          variant="solid"
+          mb={1}
+        >
+          {response?.isSuccess ? <CircleCheck /> : <CircleX />} &nbsp;{" "}
+          {response.title}
+        </Alert>
+      ) : null}
+
+      <Heading textAlign="center" size="lg" mb={2}>
+        Contact Us
+      </Heading>
+      <Text textAlign="center" mb={6} color="gray.500">
+        Fill in the form below to reach out to us.
+      </Text>
+
+      <Box as="form" onSubmit={handleSubmit}>
+        <VStack spacing={4}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="100%">
+            <FormControl isInvalid={!!errors.firstName} isRequired>
+              <TextInput
+                label="First Name"
+                placeholder="Enter first name"
+                value={formData.firstName}
+                onChange={(e) => handleChange("firstName", e.target.value)}
+                isRequired
+              />
+              <FormErrorMessage>{errors.firstName}</FormErrorMessage>
+            </FormControl>
+
+            <FormControl>
+              <TextInput
+                label="Last Name"
+                placeholder="Enter last name"
+                value={formData.lastName}
+                onChange={(e) => handleChange("lastName", e.target.value)}
+              />
+            </FormControl>
+          </SimpleGrid>
+
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="100%">
+            <FormControl isInvalid={!!errors.phone} isRequired>
+              <TextInput
+                label="Phone"
+                placeholder="Enter phone number"
+                value={formData.phone}
+                onChange={(e) => handleChange("phone", e.target.value)}
+                isRequired
+              />
+              <FormErrorMessage>{errors.phone}</FormErrorMessage>
+            </FormControl>
+            <FormControl isInvalid={!!errors.email}>
+              <TextInput
+                label="Email"
+                placeholder="Enter email"
+                value={formData.email}
+                onChange={(e) => handleChange("email", e.target.value)}
+                // isRequired
+              />
+              <FormErrorMessage>{errors.email}</FormErrorMessage>
+            </FormControl>
+          </SimpleGrid>
+
+          {/* Custom fields from parent */}
+          {customFields}
+
+          {/* Enquiry */}
+          <FormControl w="100%">
+            <ChakraText fontSize="sm" mb={1}>
+              Enquiry
+            </ChakraText>
+            <Textarea
+              placeholder="Enter your enquiry"
+              rows={5}
+              value={formData.enquiry}
+              onChange={(e) => handleChange("enquiry", e.target.value)}
+            />
+          </FormControl>
+
+          <Button
+            type="submit"
+            disabled={isDisabled}
+            colorScheme="blue"
+            w="full"
+            mt={2}
+          >
+            Send Message
+          </Button>
+        </VStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default ContactForm;

package/src/Components/ContactForm/ContactFormProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export interface ContactFormProps {
+  apiKey?: string;
+  customerId: string | number;
+  organizationId: string | number;
+  isDisabled?: boolean;
+  customFields?: ReactNode;
+  getCustomValues?: () => Record<string, any>;
+}