Refactor contact form to forms

Author: nedimf

example/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

example/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

example/.gitignore

@@ -0,0 +1,75 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+**/.xcode.env.local
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+.cxx/
+*.keystore
+!debug.keystore
+.kotlin/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
+
+# Bundle artifact
+*.jsbundle
+
+# Ruby / CocoaPods
+**/Pods/
+/vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/.watchmanconfig

@@ -0,0 +1 @@
+{}

src/client/AppgramClient.ts

@@ -25,9 +25,9 @@ import type {
   SurveyNode,
   SurveyResponse,
   SurveySubmitInput,
-  ContactForm,
-  ContactFormSubmission,
-  ContactFormSubmitInput,
+  Form,
+  FormSubmission,
+  FormSubmitInput,
   StatusPageOverview,
   BlogPost,
   BlogPostsResponse,
@@ -675,21 +675,13 @@ export class AppgramClient {
   }
 
   // ============================================================================
-  // Contact Forms
+  // Forms
   // ============================================================================
 
   /**
-   * Get a public contact form by ID (legacy endpoint)
-   * @deprecated Use getContactForm instead
+   * Get a form by ID via portal endpoint
    */
-  async getPublicForm(formId: string): Promise<ApiResponse<ContactForm>> {
-    return this.get<ContactForm>(`/api/v1/forms/${formId}`)
-  }
-
-  /**
-   * Get a contact form by ID via portal endpoint
-   */
-  async getContactForm(formId: string): Promise<ApiResponse<ContactForm>> {
+  async getForm(formId: string): Promise<ApiResponse<Form>> {
     const response = await this.get<{ contact_form: {
       id: string
       name: string
@@ -717,7 +709,7 @@ export class AppgramClient {
     if (!response.success || !response.data?.contact_form) {
       return {
         success: false,
-        error: response.error || { code: 'NOT_FOUND', message: 'Contact form not found' },
+        error: response.error || { code: 'NOT_FOUND', message: 'Form not found' },
       }
     }
 
@@ -730,7 +722,7 @@ export class AppgramClient {
         description: raw.description,
         fields: raw.fields.map(f => ({
           id: f.id,
-          type: f.type as ContactForm['fields'][0]['type'],
+          type: f.type as Form['fields'][0]['type'],
           label: f.label,
           placeholder: f.placeholder,
           required: f.required,
@@ -749,9 +741,9 @@ export class AppgramClient {
   }
 
   /**
-   * Track a contact form view (call when form is displayed)
+   * Track a form view (call when form is displayed)
    */
-  async trackContactFormView(formId: string): Promise<ApiResponse<{ tracked: boolean }>> {
+  async trackFormView(formId: string): Promise<ApiResponse<{ tracked: boolean }>> {
     const endpoint = `/projects/${this.projectId}/contact-forms/${formId}/view`
     const url = `${this.baseUrl}${endpoint}`
 
@@ -806,13 +798,13 @@ export class AppgramClient {
   }
 
   /**
-   * Submit a contact form
+   * Submit a form
    */
-  async submitContactForm(
+  async submitForm(
     projectId: string,
     formId: string,
-    data: ContactFormSubmitInput
-  ): Promise<ApiResponse<ContactFormSubmission>> {
+    data: FormSubmitInput
+  ): Promise<ApiResponse<FormSubmission>> {
     const url = `${this.baseUrl}/api/v1/projects/${projectId}/contact-forms/${formId}/submit`
 
     try {
@@ -876,7 +868,7 @@ export class AppgramClient {
 
       return {
         success: true,
-        data: (result.data as ContactFormSubmission) || {
+        data: (result.data as FormSubmission) || {
           id: '',
           form_id: formId,
           project_id: projectId,

src/components/feedback/SubmitWishSheet.tsx

@@ -15,7 +15,7 @@ import {
 } from 'react-native'
 import { X, Send, Sparkles } from 'lucide-react-native'
 import { useAppgramTheme, useAppgramContext } from '../../provider'
-import type { Wish, ContactForm, ContactFormField } from '../../types'
+import type { Wish, Form, FormField } from '../../types'
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window')
 
@@ -136,8 +136,8 @@ export function SubmitWishSheet({
   const [error, setError] = useState<string | null>(null)
 
   // Auto-detect custom form from project customization
-  const [customForm, setCustomForm] = useState<ContactForm | null>(null)
-  const [customFormFields, setCustomFormFields] = useState<ContactFormField[]>([])
+  const [customForm, setCustomForm] = useState<Form | null>(null)
+  const [customFormFields, setCustomFormFields] = useState<FormField[]>([])
   const [customFieldValues, setCustomFieldValues] = useState<Record<string, string | boolean>>({})
   const [isLoadingCustomization, setIsLoadingCustomization] = useState(false)
 
@@ -154,7 +154,7 @@ export function SubmitWishSheet({
         if (response.success && response.data?.customization_data) {
           const customizationData = response.data.customization_data as {
             content?: { feedback?: { customFormId?: string } }
-            contactForms?: Record<string, ContactForm & { integration?: { type: string } }>
+            contactForms?: Record<string, Form & { integration?: { type: string } }>
           }
 
           const contactForms = customizationData.contactForms || {}
@@ -164,7 +164,7 @@ export function SubmitWishSheet({
           if (explicitFormId && contactForms[explicitFormId]) {
             const form = contactForms[explicitFormId]
             if (form.enabled && form.integration?.type === 'wish') {
-              setCustomForm(form as ContactForm)
+              setCustomForm(form as Form)
               // Filter out built-in fields
               const extraFields = form.fields.filter(
                 (f) => !['title', 'description', 'email', 'name', 'message'].includes(f.id.toLowerCase())
@@ -184,7 +184,7 @@ export function SubmitWishSheet({
 
           if (wishFormEntry) {
             const [, form] = wishFormEntry
-            setCustomForm(form as ContactForm)
+            setCustomForm(form as Form)
             // Filter out built-in fields
             const extraFields = form.fields.filter(
               (f) => !['title', 'description', 'email', 'name', 'message'].includes(f.id.toLowerCase())
@@ -553,7 +553,7 @@ export function SubmitWishSheet({
 // ============================================================================
 
 interface CustomFieldInputProps {
-  field: ContactFormField
+  field: FormField
   value: string | boolean | undefined
   onChange: (value: string | boolean) => void
   colors: {

…components/forms/ContactFormRenderer.tsx src/components/forms/FormRenderer.tsxsrc/components/forms/ContactFormRenderer.tsx renamed to src/components/forms/FormRenderer.tsx src/components/forms/ContactFormRenderer.tsx renamed to src/components/forms/FormRenderer.tsx

@@ -11,11 +11,11 @@ import {
   type ViewStyle,
 } from 'react-native'
 import { useAppgramTheme, useAppgramContext } from '../../provider'
-import { useContactForm, useContactFormSubmit } from '../../hooks'
+import { useForm, useFormSubmit } from '../../hooks'
 import { Button, Card } from '../base'
-import type { ContactFormField } from '../../types'
+import type { FormField } from '../../types'
 
-export interface ContactFormRendererProps {
+export interface FormRendererProps {
   formId: string
   projectId?: string
   title?: string
@@ -26,19 +26,19 @@ export interface ContactFormRendererProps {
 }
 
 /**
- * ContactFormRenderer Component
+ * FormRenderer Component
  *
- * Renders a dynamic contact form based on form configuration.
+ * Renders a dynamic form based on form configuration.
  * Supports text, email, textarea, checkbox, select, and radio fields.
  *
  * @example
  * ```tsx
- * import { ContactFormRenderer } from '@appgram/react-native'
+ * import { FormRenderer } from '@appgram/react-native'
  *
- * function ContactScreen() {
+ * function FormScreen() {
  *   return (
- *     <ContactFormRenderer
- *       formId="contact-form-id"
+ *     <FormRenderer
+ *       formId="form-id"
  *       title="Contact Us"
  *       description="We'd love to hear from you"
  *       onSuccess={() => {
@@ -54,28 +54,28 @@ export interface ContactFormRendererProps {
  * @example
  * ```tsx
  * // With custom project ID
- * <ContactFormRenderer
+ * <FormRenderer
  *   formId="feedback-form"
  *   projectId="custom-project-id"
  *   onSuccess={() => setShowThankYou(true)}
  * />
  * ```
  */
-export function ContactFormRenderer({
+export function FormRenderer({
   formId,
   projectId: propProjectId,
   title,
   description,
   onSuccess,
   onError,
   style,
-}: ContactFormRendererProps): React.ReactElement {
+}: FormRendererProps): React.ReactElement {
   const { colors, radius, typography, spacing } = useAppgramTheme()
   const { config } = useAppgramContext()
   const projectId = propProjectId || config.projectId
 
-  const { form, isLoading: formLoading, error: formError } = useContactForm(formId)
-  const { submitForm, isSubmitting, error: submitError, successMessage } = useContactFormSubmit({
+  const { form, isLoading: formLoading, error: formError } = useForm(formId)
+  const { submitForm, isSubmitting, error: submitError, successMessage } = useFormSubmit({
     onSuccess,
     onError,
   })
@@ -148,7 +148,7 @@ export function ContactFormRenderer({
     paddingVertical: 12,
   }
 
-  const renderField = (field: ContactFormField) => {
+  const renderField = (field: FormField) => {
     const error = fieldErrors[field.id]
     const value = formData[field.id]
 
@@ -424,4 +424,4 @@ export function ContactFormRenderer({
   )
 }
 
-export default ContactFormRenderer
+export default FormRenderer

src/components/forms/index.ts

@@ -1,7 +1,7 @@
 /**
  * Forms Components
  *
- * Components for rendering dynamic contact forms.
+ * Components for rendering dynamic forms.
  */
 
-export { ContactFormRenderer, type ContactFormRendererProps } from './ContactFormRenderer'
+export { FormRenderer, type FormRendererProps } from './FormRenderer'

src/components/index.ts

@@ -39,8 +39,8 @@ export {
 
 // Forms components
 export {
-  ContactFormRenderer,
-  type ContactFormRendererProps,
+  FormRenderer,
+  type FormRendererProps,
 } from './forms'
 
 // Help components