tee3apps-cms-sdk-react 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/PageFormComponents/BoxRenderer.tsx

@@ -9,6 +9,7 @@ import InputField from './InputField';
 import RadioField from './RadioField';
 import SelectField from './SelectField';
 import ImageComponent from './ImageComponent';
+import TermsAndCondition from './TermsAndCondition';
 
 interface BoxRendererProps {
   box: Box;
@@ -19,6 +20,9 @@ interface BoxRendererProps {
   validationErrors?: Record<string, boolean>;
   onFieldChange?: (code: string, value: any) => void;
   onFormSubmit?: () => void;
+  onFormReset?: () => void;
+  onFormCancel?: () => void;
+  isSubmitting?: boolean;
 }
 
 const BoxRenderer: React.FC<BoxRendererProps> = ({ 
@@ -29,7 +33,10 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
   formValues = {},
   validationErrors = {},
   onFieldChange,
-  onFormSubmit
+  onFormSubmit,
+  onFormReset,
+  onFormCancel,
+  isSubmitting = false
 }) => {
   // Get colspan based on device mode
   const getColspan = () => {
@@ -211,8 +218,35 @@ const BoxRenderer: React.FC<BoxRendererProps> = ({
             );
           } else if (component.name === 'TextComponent') {
             return <TextComponent key={index} props={component.props} />;
+          } else if (component.name === 'TermsAndCondition' ) {
+            const code = getFieldCode(component);
+            const hasError = validationErrors[code];
+            return (
+              <div key={index} style={{ width: '100%' }}>
+                <TermsAndCondition 
+                  props={component.props} 
+                  value={formValues[code] ?? component.props.checked ?? false} 
+                  onChange={onFieldChange} 
+                />
+                {hasError && (component.props.isRequired || component.props.required) && (
+                  <div style={{ color: 'red', fontSize: '12px', marginTop: '4px' }}>
+                    This field is required
+                  </div>
+                )}
+              </div>
+            );
           } else if (component.name === 'ButtonField') {
-            return <Button key={index} props={component.props} onFormSubmit={onFormSubmit} />;
+            return (
+              <Button 
+                key={index} 
+                props={component.props} 
+                onFormSubmit={onFormSubmit}
+                onFormReset={onFormReset}
+                onFormCancel={onFormCancel}
+                isSubmitting={isSubmitting}
+                deviceMode={deviceMode}
+              />
+            );
           } else {
             return (
               <div key={index} className="mb-4 p-4 bg-gray-100 rounded-md border-2 border-dashed border-gray-300">

package/src/PageFormComponents/Button.tsx

@@ -20,13 +20,43 @@ interface ButtonModeProps {
 interface ButtonProps {
   props: ComponentProps;
   onFormSubmit?: () => void;
+  onFormReset?: () => void;
+  onFormCancel?: () => void;
+  isSubmitting?: boolean;
+  deviceMode?: string;
 }
 
-const Button: React.FC<ButtonProps> = ({ props, onFormSubmit }) => {
+const Button: React.FC<ButtonProps> = ({ 
+  props, 
+  onFormSubmit, 
+  onFormReset,
+  onFormCancel,
+  isSubmitting = false,
+  deviceMode = 'web'
+}) => {
   // Get device-specific mode properties with proper typing
   const getCurrentMode = (): ButtonModeProps => {
+    let modeProps: ButtonModeProps | undefined;
+    
+    // Get mode based on deviceMode
+    switch (deviceMode) {
+      case 'mobileweb':
+        modeProps = props.mode?.mobileweb as ButtonModeProps;
+        break;
+      case 'mobileapp':
+        modeProps = props.mode?.mobileapp as ButtonModeProps;
+        break;
+      case 'tablet':
+        modeProps = props.mode?.tablet as ButtonModeProps;
+        break;
+      case 'web':
+      default:
+        modeProps = props.mode?.web as ButtonModeProps;
+        break;
+    }
+    
     // Default to web mode if not specified
-    return (props.mode?.web as ButtonModeProps) || {
+    return modeProps || {
       radius: '4px',
       bgColor: '#3498db',
       textstyle: {
@@ -54,28 +84,61 @@ const Button: React.FC<ButtonProps> = ({ props, onFormSubmit }) => {
     }
   };
 
-  // Handle button click
-  const handleClick = () => {
-    // You can add button click logic here
-    console.log('Button clicked:', props.name?.all || 'Button');
+  // Handle button click based on button type
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // Prevent default form submission behavior
+    e.preventDefault();
+    e.stopPropagation();
     
-    // Trigger form submission if handler is provided
-    if (onFormSubmit) {
-      onFormSubmit();
+    const buttonType = props.buttonType || 'submit';
+    
+    // Handle different button types
+    switch (buttonType) {
+      case 'submit':
+        // Trigger form submission if handler is provided
+        if (onFormSubmit) {
+          onFormSubmit();
+        }
+        break;
+      case 'reset':
+        // Trigger form reset if handler is provided
+        if (onFormReset) {
+          onFormReset();
+        }
+        break;
+      case 'cancel':
+        // Trigger form cancel if handler is provided
+        if (onFormCancel) {
+          onFormCancel();
+        }
+        break;
+      default:
+        // Default to submit behavior
+        if (onFormSubmit) {
+          onFormSubmit();
+        }
+        break;
     }
     
-    // If there's a link configured, handle it
-    if (props.linktype === 'EXTERNAL' && props.link?.url) {
+    // If there's a link configured, handle it (only for non-submit buttons or when not submitting)
+    if (props.linktype === 'EXTERNAL' && props.link?.url && buttonType !== 'submit') {
       window.open(props.link.url, props.link.target || '_blank');
     }
   };
 
-  // Get button text - handle both string and {all: string} formats
+  // Get button text - handle both string and {all: string, locale: string} formats
   const getButtonText = () => {
     if (typeof props.text === 'string') {
       return props.text;
-    } else if (props.text?.all) {
-      return props.text.all;
+    } else if (props.text && typeof props.text === 'object') {
+      // Try to get locale-specific text first, then fall back to 'all'
+      // You can extend this to detect current locale
+      const locale = 'en-IN'; // Default locale, can be made dynamic
+      if (props.text[locale]) {
+        return props.text[locale];
+      } else if (props.text.all) {
+        return props.text.all;
+      }
     } else if (props.name?.all) {
       return props.name.all;
     }
@@ -86,7 +149,8 @@ const Button: React.FC<ButtonProps> = ({ props, onFormSubmit }) => {
     <div className="mb-6">
       <button
         onClick={handleClick}
-        disabled={props.disabled}
+        type="button"
+        disabled={props.disabled || (isSubmitting && props.buttonType === 'submit')}
         style={{
           backgroundColor: currentMode.bgColor || '#3498db',
           color: textStyle.fontColor,
@@ -98,25 +162,25 @@ const Button: React.FC<ButtonProps> = ({ props, onFormSubmit }) => {
           borderRadius: currentMode.radius || '4px',
           padding: '10px 20px',
           border: 'none',
-          cursor: props.disabled ? 'not-allowed' : 'pointer',
-          opacity: props.disabled ? 0.6 : 1,
+          cursor: (props.disabled || (isSubmitting && props.buttonType === 'submit')) ? 'not-allowed' : 'pointer',
+          opacity: (props.disabled || (isSubmitting && props.buttonType === 'submit')) ? 0.6 : 1,
           transition: 'all 0.2s ease-in-out',
           minWidth: '120px'
         }}
         onMouseEnter={(e) => {
-          if (!props.disabled) {
+          if (!props.disabled && !(isSubmitting && props.buttonType === 'submit')) {
             e.currentTarget.style.opacity = '0.8';
             e.currentTarget.style.transform = 'translateY(-1px)';
           }
         }}
         onMouseLeave={(e) => {
-          if (!props.disabled) {
+          if (!props.disabled && !(isSubmitting && props.buttonType === 'submit')) {
             e.currentTarget.style.opacity = '1';
             e.currentTarget.style.transform = 'translateY(0)';
           }
         }}
       >
-        {getButtonText()}
+        {(isSubmitting && props.buttonType === 'submit') ? 'Submitting...' : getButtonText()}
       </button>
 
       

package/src/PageFormComponents/InputField.tsx

@@ -10,13 +10,36 @@ interface InputFieldProps {
 
 const InputField: React.FC<InputFieldProps> = ({ props, value = '', onChange }) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const newValue = e.target.value;
+    let newValue = e.target.value;
+    
+    // Handle postal code formatting
+    if (props.format === 'Postalcode' && !props.textArea) {
+      // Remove non-alphanumeric characters for postal code
+      newValue = newValue.replace(/[^a-zA-Z0-9\s-]/g, '');
+      
+      // Apply formatting based on postaltype
+      if (props.postaltype === 'State') {
+        // US postal code format: 12345 or 12345-6789
+        newValue = newValue.replace(/(\d{5})(\d{0,4})/, (match, p1, p2) => {
+          return p2 ? `${p1}-${p2}` : p1;
+        });
+      }
+    }
+    
     if (onChange) {
       const code = props.code || `inputfield_${props.name?.all || 'field'}`;
       onChange(code, newValue);
     }
   };
 
+  // Determine input type based on format
+  const getInputType = () => {
+    if (props.format === 'Postalcode') {
+      return 'text'; // Use text to allow formatting
+    }
+    return 'text';
+  };
+
   return (
     <div className="input-field">
       <label className="input-field__label">
@@ -28,6 +51,7 @@ const InputField: React.FC<InputFieldProps> = ({ props, value = '', onChange })
         <textarea
           value={value || ''}
           onChange={handleChange}
+          placeholder={props.helperText || ''}
           minLength={props.minLength}
           maxLength={props.maxLength}
           rows={4}
@@ -36,9 +60,10 @@ const InputField: React.FC<InputFieldProps> = ({ props, value = '', onChange })
         />
       ) : (
         <input
-          type="text"
+          type={getInputType()}
           value={value || ''}
           onChange={handleChange}
+          placeholder={props.helperText || ''}
           minLength={props.minLength}
           maxLength={props.maxLength}
           required={props.required}
@@ -46,10 +71,6 @@ const InputField: React.FC<InputFieldProps> = ({ props, value = '', onChange })
         />
       )}
 
-      {props.helperText && (
-        <p className="input-field__helper-text">{props.helperText}</p>
-      )}
-
       <div className="input-field__status">
         {props.format && `Format: ${props.format}`}
         {props.postaltype && ` • Type: ${props.postaltype}`}

package/src/PageFormComponents/NumberField.tsx

@@ -16,6 +16,11 @@ const NumberField: React.FC<NumberFieldProps> = ({ props, value = '', onChange }
     }
   };
 
+  // Parse HTML content safely
+  const createMarkup = (html: string) => {
+    return { __html: html };
+  };
+
   return (
     <div className="number-field">
       <label className="number-field__label">
@@ -32,6 +37,7 @@ const NumberField: React.FC<NumberFieldProps> = ({ props, value = '', onChange }
           max={props.max}
           step={props.step}
           required={props.required}
+          placeholder={props.helperText || ''}
           className="number-field__input"
         />
 
@@ -42,12 +48,19 @@ const NumberField: React.FC<NumberFieldProps> = ({ props, value = '', onChange }
         )}
       </div>
 
-      {props.helperText && (
-        <p className="number-field__helper-text">{props.helperText}</p>
+      {props.termsandcondition?.all && (
+        <div 
+          className="number-field__terms"
+          dangerouslySetInnerHTML={createMarkup(props.termsandcondition.all)}
+        />
       )}
 
       <div className="number-field__status">
-        Range: {props.min}-{props.max} • Step: {props.step}
+        {props.onText && props.offText ? (
+          <span>{props.onText} / {props.offText}</span>
+        ) : (
+          <span>Range: {props.min}-{props.max} • Step: {props.step}</span>
+        )}
       </div>
     </div>
   );

package/src/PageFormComponents/PageForm.tsx

@@ -6,6 +6,9 @@ import './PageForm.css'; // Import the new CSS file
 interface PageFormProps {
   jsonData: Row[];
   onSubmit?: (data: Record<string, any>) => void;
+  isUrl?: boolean;
+  method?: 'POST' | 'GET' | 'post' | 'get';
+  url?: string;
 }
 
 interface Toast {
@@ -14,12 +17,13 @@ interface Toast {
   type: 'error' | 'success' | 'info' | 'warning';
 }
 
-const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
+const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit, isUrl = false, method = 'POST', url }) => {
   // Form state to store all field values
   const [formValues, setFormValues] = useState<Record<string, any>>({});
   const [deviceMode, setDeviceMode] = useState<string>('web');
   const [validationErrors, setValidationErrors] = useState<Record<string, boolean>>({});
   const [toasts, setToasts] = useState<Toast[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 
   // Function to determine device mode based on screen width
   const getDeviceMode = (width: number) => {
@@ -47,7 +51,7 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
       row.columns?.forEach((box) => {
         box.components?.forEach((component) => {
           // Check if component is a form field
-          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField', 'TermsAndCondition', 'TERMSANDCONDITION'];
           if (fieldTypes.includes(component.name)) {
             const code = getFieldCode(component);
             const name = getFieldName(component);
@@ -68,8 +72,8 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
       row.columns?.forEach((box) => {
         box.components?.forEach((component) => {
           // Check if component is a form field and is required
-          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField'];
-          if (fieldTypes.includes(component.name) && component.props.required) {
+          const fieldTypes = ['DateField', 'NumberField', 'SelectField', 'RadioField', 'InputField', 'BooleanField', 'TermsAndCondition', 'TERMSANDCONDITION'];
+          if (fieldTypes.includes(component.name) && (component.props.required || component.props.isRequired)) {
             const code = getFieldCode(component);
             const name = getFieldName(component);
             requiredFields[code] = { code, name };
@@ -138,11 +142,12 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
     
     Object.keys(requiredFields).forEach((code) => {
       const value = formValues[code];
-      // Check if value is empty, null, undefined, empty array, or empty string
+      // Check if value is empty, null, undefined, empty array, empty string, or false (for checkboxes)
       if (
         value === undefined ||
         value === null ||
         value === '' ||
+        value === false ||
         (Array.isArray(value) && value.length === 0)
       ) {
         errors[code] = true;
@@ -171,28 +176,123 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
     setToasts(prev => prev.filter(toast => toast.id !== id));
   }, []);
 
-  // Single method to handle form submission - validates, transforms, and sends data to parent
-  const handleFormSubmit = useCallback(() => {
+  // Handler to reset form values
+  const handleFormReset = useCallback(() => {
+    setFormValues({});
+    setValidationErrors({});
+    showToast('Form has been reset', 'info');
+  }, [showToast]);
+
+  // Handler to cancel form (same as reset for now, but can be customized)
+  const handleFormCancel = useCallback(() => {
+    setFormValues({});
+    setValidationErrors({});
+    showToast('Form has been cancelled', 'info');
+  }, [showToast]);
+
+  // Single method to handle form submission - validates, transforms, and sends data to parent or API
+  const handleFormSubmit = useCallback(async () => {
     // Validate form and get validation result
     const { isValid, errors } = validateForm();
     
-    if (isValid) {
-      // Transform form values to use field names instead of codes
-      const transformedData = transformFormValuesToNames();
-      
-      // Send transformed data back to parent component
-      if (onSubmit) {
-        onSubmit(transformedData);
-      }
-    } else {
+    if (!isValid) {
       // If validation fails, show error message with field names
       const requiredFields = getRequiredFields();
       const errorFields = Object.keys(errors)
         .map(code => requiredFields[code]?.name || code)
         .join(', ');
       showToast(`Please fill in all required fields: ${errorFields}`, 'error');
+      return;
+    }
+
+    // Transform form values to use field names instead of codes
+    const transformedData = transformFormValuesToNames();
+
+    // Check if we should send to URL or use onSubmit callback
+    // If URL is provided, automatically use it for API submission
+    if (url && url.trim() !== '') {
+      // Send data to API URL
+      setIsSubmitting(true);
+      try {
+        const httpMethod = method.toUpperCase();
+        const requestOptions: RequestInit = {
+          method: httpMethod,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        };
+
+        // For GET requests, append data as query parameters
+        // For POST requests, send data in the body
+        let requestUrl = url.trim();
+        if (httpMethod === 'GET') {
+          const queryParams = new URLSearchParams();
+          Object.keys(transformedData).forEach((key) => {
+            const value = transformedData[key];
+            if (value !== null && value !== undefined && value !== '') {
+              queryParams.append(key, String(value));
+            }
+          });
+          const queryString = queryParams.toString();
+          requestUrl = queryString ? `${requestUrl}?${queryString}` : requestUrl;
+        } else {
+          // POST, PUT, PATCH, etc.
+          requestOptions.body = JSON.stringify(transformedData);
+        }
+
+        const response = await fetch(requestUrl, requestOptions);
+        
+        // Read response as text first (can only read body once)
+        const responseText = await response.text().catch(() => '');
+        
+        if (!response.ok) {
+          const errorText = responseText || response.statusText || `HTTP ${response.status}`;
+          throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
+        }
+
+        // Try to parse as JSON, fallback to text if not JSON
+        let responseData;
+        const contentType = response.headers.get('content-type');
+        if (contentType && contentType.includes('application/json') && responseText) {
+          try {
+            responseData = JSON.parse(responseText);
+          } catch {
+            // If JSON parsing fails, use text as message
+            responseData = { message: responseText };
+          }
+        } else {
+          // Not JSON or empty response, use text as message
+          responseData = responseText ? { message: responseText } : { message: 'Success' };
+        }
+        
+        setIsSubmitting(false);
+        showToast('Form submitted successfully!', 'success');
+        
+        // Also call onSubmit if provided, passing the response data
+        if (onSubmit) {
+          onSubmit(responseData || transformedData);
+        }
+      } catch (error) {
+        setIsSubmitting(false);
+        const errorMessage = error instanceof Error ? error.message : 'Failed to submit form';
+        console.error('Form submission error:', error);
+        showToast(`Error submitting form: ${errorMessage}`, 'error');
+        
+        // Still call onSubmit with error data if provided
+        if (onSubmit) {
+          onSubmit({ error: errorMessage, data: transformedData });
+        }
+      }
+    } else {
+      // Send transformed data back to parent component via onSubmit callback
+      if (onSubmit) {
+        onSubmit(transformedData);
+      } else {
+        // If neither URL nor onSubmit is provided, show a warning
+        showToast('No submission handler configured. Please provide either a URL or onSubmit callback.', 'warning');
+      }
     }
-  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit, showToast]);
+  }, [formValues, validateForm, getRequiredFields, transformFormValuesToNames, onSubmit, showToast, isUrl, method, url]);
 
   return (
     <div className="page-form">
@@ -207,6 +307,9 @@ const PageForm: React.FC<PageFormProps> = ({ jsonData, onSubmit }) => {
             validationErrors={validationErrors}
             onFieldChange={handleFieldChange}
             onFormSubmit={handleFormSubmit}
+            onFormReset={handleFormReset}
+            onFormCancel={handleFormCancel}
+            isSubmitting={isSubmitting}
           />
         ))}
 

package/src/PageFormComponents/RadioField.tsx

@@ -20,6 +20,9 @@ const RadioField: React.FC<RadioFieldProps> = ({ props, value = '', onChange })
     <div className="radio-field">
       <label className="radio-field__label">
         {props.name?.all || 'Radio Field'}
+        {props.helperText && (
+          <span className="radio-field__placeholder"> ({props.helperText})</span>
+        )}
         {props.required && <span className="radio-field__required">*</span>}
       </label>
 
@@ -46,12 +49,6 @@ const RadioField: React.FC<RadioFieldProps> = ({ props, value = '', onChange })
           ))
         )}
       </div>
-
-      {props.helperText && (
-        <p className="radio-field__helper-text">{props.helperText}</p>
-      )}
-
-      
     </div>
   );
 };

package/src/PageFormComponents/RowComponent.tsx

@@ -9,6 +9,9 @@ interface RowComponentProps {
   validationErrors?: Record<string, boolean>;
   onFieldChange?: (code: string, value: any) => void;
   onFormSubmit?: () => void;
+  onFormReset?: () => void;
+  onFormCancel?: () => void;
+  isSubmitting?: boolean;
 }
 
 const RowComponent: React.FC<RowComponentProps> = ({ 
@@ -17,7 +20,10 @@ const RowComponent: React.FC<RowComponentProps> = ({
   formValues = {},
   validationErrors = {},
   onFieldChange,
-  onFormSubmit
+  onFormSubmit,
+  onFormReset,
+  onFormCancel,
+  isSubmitting = false
 }) => {
   const getCurrentMode = () => {
     switch(deviceMode) {
@@ -70,6 +76,9 @@ const RowComponent: React.FC<RowComponentProps> = ({
             validationErrors={validationErrors}
             onFieldChange={onFieldChange}
             onFormSubmit={onFormSubmit}
+            onFormReset={onFormReset}
+            onFormCancel={onFormCancel}
+            isSubmitting={isSubmitting}
           />
         ))}
         {/* Clear float after all children */}

package/src/PageFormComponents/Styles/InputField.css

@@ -37,6 +37,12 @@
   resize: vertical;
 }
 
+.input-field__input::placeholder,
+.input-field__textarea::placeholder {
+  color: #9ca3af; /* gray-400 */
+  opacity: 1;
+}
+
 .input-field__helper-text {
   margin-top: 0.25rem;
   font-size: 0.75rem;

package/src/PageFormComponents/Styles/NumberField.css

@@ -50,6 +50,22 @@
   color: #6b7280; /* gray-500 */
 }
 
+.number-field__terms {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #4b5563; /* gray-600 */
+  line-height: 1.5;
+}
+
+.number-field__terms p {
+  margin: 0;
+}
+
+.number-field__input::placeholder {
+  color: #9ca3af; /* gray-400 */
+  opacity: 1;
+}
+
 .number-field__status {
   margin-top: 0.25rem;
   font-size: 0.75rem;

package/src/PageFormComponents/Styles/RadioField.css

@@ -10,6 +10,12 @@
   margin-bottom: 0.5rem;
 }
 
+.radio-field__placeholder {
+  color: #9ca3af; /* gray-400 */
+  font-weight: 400;
+  font-style: italic;
+}
+
 .radio-field__required {
   color: #ef4444; /* red-500 */
   margin-left: 0.25rem;