@djangocfg/layouts 2.1.9 → 2.1.14

package/src/snippets/ContactForm/ContactFormProvider.tsx

@@ -1,153 +0,0 @@
-'use client';
-
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
-import { configureAPI, createLeadsSubmitCreate, Enums } from '@djangocfg/api';
-import type {
-  ContactFormContextValue,
-  ContactFormProviderProps,
-  LeadSubmissionData,
-  LeadSubmissionResult,
-} from './types';
-
-// ============================================================================
-// Context
-// ============================================================================
-
-const ContactFormContext = createContext<ContactFormContextValue | undefined>(undefined);
-
-// ============================================================================
-// Helpers
-// ============================================================================
-
-const CONTACT_TYPE_MAP: Record<string, Enums.LeadSubmissionRequestContactType> = {
-  email: Enums.LeadSubmissionRequestContactType.EMAIL,
-  telegram: Enums.LeadSubmissionRequestContactType.TELEGRAM,
-  whatsapp: Enums.LeadSubmissionRequestContactType.WHATSAPP,
-  phone: Enums.LeadSubmissionRequestContactType.PHONE,
-  other: Enums.LeadSubmissionRequestContactType.OTHER,
-};
-
-// ============================================================================
-// Provider
-// ============================================================================
-
-/**
- * ContactFormProvider - Configures API and provides submit functionality
- *
- * Uses the generated Django-CFG API client for lead submission.
- *
- * @example
- * ```tsx
- * import { ContactFormProvider, ContactForm } from '@djangocfg/layouts';
- *
- * <ContactFormProvider apiUrl="https://api.example.com">
- *   <ContactForm fields={fields} />
- * </ContactFormProvider>
- * ```
- */
-export function ContactFormProvider({ children, apiUrl }: ContactFormProviderProps) {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [lastResponse, setLastResponse] = useState<LeadSubmissionResult | null>(null);
-
-  // Always use local API route to avoid CORS issues
-  // Pass apiUrl in request body so route.ts knows where to proxy
-
-  // Submit function - always uses local API route
-  const submit = useCallback(async (data: LeadSubmissionData): Promise<LeadSubmissionResult> => {
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      // Always use local Next.js API route to avoid CORS issues
-      // Pass apiUrl from ContactPage in the request body so route.ts knows where to proxy
-      const res = await fetch('/api/contact', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          _apiUrl: apiUrl || '', // Pass apiUrl to route.ts for proxying (can be empty for fallback)
-          name: data.name,
-          email: data.email,
-          message: data.message,
-          company: data.company,
-          company_site: data.company_site,
-          contact_type: data.contact_type,
-          contact_value: data.contact_value,
-          subject: data.subject,
-          extra: data.extra,
-          site_url: data.site_url || (typeof window !== 'undefined' ? window.location.origin : undefined),
-        }),
-      });
-
-      if (!res.ok) {
-        const errorData = await res.json().catch(() => ({ message: 'Failed to submit contact form' }));
-        throw new Error(errorData.message || `HTTP ${res.status}`);
-      }
-
-      const response: LeadSubmissionResult = await res.json();
-
-      const result: LeadSubmissionResult = {
-        success: response.success,
-        message: response.message,
-        lead_id: response.lead_id,
-      };
-
-      setLastResponse(result);
-      return result;
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error(String(err));
-      setError(error);
-      throw error;
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [apiUrl]);
-
-  // Reset error state
-  const resetError = useCallback(() => {
-    setError(null);
-  }, []);
-
-  const value: ContactFormContextValue = {
-    apiUrl: '/api/contact', // Always use local endpoint
-    submit,
-    isSubmitting,
-    error,
-    lastResponse,
-    resetError,
-  };
-
-  return (
-    <ContactFormContext.Provider value={value}>
-      {children}
-    </ContactFormContext.Provider>
-  );
-}
-
-// ============================================================================
-// Hooks
-// ============================================================================
-
-/**
- * useContactForm - Access contact form context
- *
- * Must be used within ContactFormProvider
- */
-export function useContactForm(): ContactFormContextValue {
-  const context = useContext(ContactFormContext);
-  if (!context) {
-    throw new Error('useContactForm must be used within ContactFormProvider');
-  }
-  return context;
-}
-
-/**
- * useContactFormOptional - Access contact form context (optional)
- *
- * Returns null if not within ContactFormProvider
- */
-export function useContactFormOptional(): ContactFormContextValue | null {
-  return useContext(ContactFormContext) ?? null;
-}

package/src/snippets/ContactForm/ContactInfo.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Button,
-  cn,
-} from '@djangocfg/ui-nextjs';
-import type { ContactInfoProps, ContactDetail } from './types';
-import { DEFAULT_INFO_TITLE } from './types';
-
-/**
- * ContactInfo - Display contact information with optional action card
- *
- * @example
- * ```tsx
- * import { ContactInfo } from '@djangocfg/layouts';
- * import { Mail, Phone, MapPin, Calendar } from 'lucide-react';
- *
- * const details = [
- *   { icon: <Mail />, label: 'Email', value: 'hello@example.com', href: 'mailto:hello@example.com' },
- *   { icon: <Phone />, label: 'Phone', value: '+1 234 567 890', href: 'tel:+1234567890' },
- *   { icon: <MapPin />, label: 'Address', value: '123 Main St, City' },
- * ];
- *
- * <ContactInfo
- *   details={details}
- *   action={{
- *     title: 'Schedule a Meeting',
- *     description: 'Book a 30-minute call',
- *     button: {
- *       icon: <Calendar />,
- *       label: 'Book Now',
- *       href: 'https://calendly.com/...',
- *     },
- *   }}
- * />
- * ```
- */
-export function ContactInfo({
-  details,
-  title = DEFAULT_INFO_TITLE,
-  action,
-  className,
-}: ContactInfoProps) {
-  const renderDetail = (detail: ContactDetail, index: number) => {
-    const content = (
-      <div className="flex items-start gap-3">
-        <div className="text-muted-foreground mt-0.5">{detail.icon}</div>
-        <div>
-          <p className="text-sm text-muted-foreground">{detail.label}</p>
-          <p className="font-medium">{detail.value}</p>
-        </div>
-      </div>
-    );
-
-    if (detail.href) {
-      return (
-        <a
-          key={index}
-          href={detail.href}
-          target={detail.external !== false ? '_blank' : undefined}
-          rel={detail.external !== false ? 'noopener noreferrer' : undefined}
-          className="block hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
-        >
-          {content}
-        </a>
-      );
-    }
-
-    return <div key={index}>{content}</div>;
-  };
-
-  return (
-    <div className={cn('space-y-6', className)}>
-      {/* Contact Details Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{title}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          {details.map(renderDetail)}
-        </CardContent>
-      </Card>
-
-      {/* Action Card */}
-      {action && (
-        <Card className="bg-primary/5 border-primary/20">
-          <CardContent className="pt-6">
-            <h3 className="font-semibold mb-2">{action.title}</h3>
-            {action.description && (
-              <p className="text-sm text-muted-foreground mb-4">
-                {action.description}
-              </p>
-            )}
-            <Button asChild className="w-full">
-              <a
-                href={action.button.href}
-                target={action.button.external !== false ? '_blank' : undefined}
-                rel={action.button.external !== false ? 'noopener noreferrer' : undefined}
-              >
-                {action.button.icon}
-                <span className="ml-2">{action.button.label}</span>
-              </a>
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}

package/src/snippets/ContactForm/ContactPage.tsx

@@ -1,131 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Mail, MapPin, Calendar, MessageCircle } from 'lucide-react';
-import { ContactFormBase as ContactForm } from './ContactForm';
-import { ContactInfo } from './ContactInfo';
-import type { ContactDetail, LeadSubmissionResult } from './types';
-
-// ============================================================================
-// Config
-// ============================================================================
-
-const DEFAULT_CONFIG = {
-  apiUrl: 'https://api.reforms.ai',
-  email: 'markolofsen@gmail.com',
-  whatsapp: '+62 813 39646301',
-  calendly: 'https://calendly.com/markolofsen/meeting',
-};
-
-// ============================================================================
-// Props
-// ============================================================================
-
-export interface ContactPageProps {
-  /** Override API URL (defaults to DEFAULT_CONFIG.apiUrl) */
-  apiUrl?: string;
-  /** Override email */
-  email?: string;
-  /** Override whatsapp */
-  whatsapp?: string;
-  /** Override calendly link */
-  calendlyUrl?: string;
-  /** Page title */
-  title?: React.ReactNode;
-  /** Page subtitle */
-  subtitle?: string;
-  /** Location text */
-  location?: string;
-  /** Hide calendly action card */
-  hideCalendly?: boolean;
-  /** Additional className */
-  className?: string;
-  /** Callback after successful submit */
-  onSuccess?: (result: LeadSubmissionResult) => void;
-}
-
-// ============================================================================
-// Component
-// ============================================================================
-
-/**
- * ContactPageBase - Pre-configured contact page component
- *
- * NOTE: Use ContactPage from index.ts which is dynamically imported (ssr: false)
- *
- * @example
- * ```tsx
- * import { ContactPage } from '@djangocfg/layouts';
- * <ContactPage />
- * ```
- */
-export function ContactPageBase({
-  apiUrl = DEFAULT_CONFIG.apiUrl,
-  email = DEFAULT_CONFIG.email,
-  whatsapp = DEFAULT_CONFIG.whatsapp,
-  calendlyUrl = DEFAULT_CONFIG.calendly,
-  title = 'Get in Touch',
-  subtitle = "Have a question or want to work together? We'd love to hear from you.",
-  location = 'Remote-first team',
-  hideCalendly = false,
-  className,
-  onSuccess,
-}: ContactPageProps) {
-  // Format phone for WhatsApp link (remove spaces and special chars)
-  const whatsappPhone = whatsapp.replace(/[\s\-\(\)]/g, '');
-
-  const contactDetails: ContactDetail[] = [
-    {
-      icon: <Mail className="h-5 w-5" />,
-      label: 'Email',
-      value: email,
-      href: `mailto:${email}`,
-    },
-    {
-      icon: <MessageCircle className="h-5 w-5" />,
-      label: 'WhatsApp',
-      value: whatsapp,
-      href: `https://wa.me/${whatsappPhone}`,
-    },
-    {
-      icon: <MapPin className="h-5 w-5" />,
-      label: 'Location',
-      value: location,
-    },
-  ];
-
-  return (
-    <div className={className}>
-      {/* Header */}
-      <div className="text-center mb-8 md:mb-12">
-        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
-          {title}
-        </h1>
-        <p className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto px-4">
-          {subtitle}
-        </p>
-      </div>
-
-      {/* Content Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full">
-        <div>
-          <ContactForm apiUrl={apiUrl} onSuccess={onSuccess} />
-        </div>
-        <div>
-          <ContactInfo
-            details={contactDetails}
-            action={hideCalendly ? undefined : {
-              title: 'Schedule a Meeting',
-              description: 'Book a time that works for you',
-              button: {
-                icon: <Calendar className="h-4 w-4" />,
-                label: 'Book a Call',
-                href: calendlyUrl,
-              },
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/snippets/ContactForm/dynamic.tsx

@@ -1,55 +0,0 @@
-/**
- * Dynamic ContactForm components (ssr: false)
- *
- * Avoids hydration mismatch when using localStorage for form drafts.
- * Components are loaded client-side only.
- */
-
-'use client';
-
-import dynamic from 'next/dynamic';
-import { Skeleton } from '@djangocfg/ui-nextjs';
-import type { ContactFormProps } from './ContactForm';
-import type { ContactPageProps } from './ContactPage';
-
-function ContactFormSkeleton() {
-  return (
-    <div className="space-y-4">
-      <Skeleton className="w-full h-10" />
-      <Skeleton className="w-full h-10" />
-      <Skeleton className="w-full h-10" />
-      <Skeleton className="w-full h-24" />
-      <Skeleton className="w-full h-10" />
-    </div>
-  );
-}
-
-function ContactPageSkeleton() {
-  return (
-    <div>
-      <div className="text-center mb-8 md:mb-12">
-        <Skeleton className="w-64 h-12 mx-auto mb-4" />
-        <Skeleton className="w-96 h-6 mx-auto" />
-      </div>
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <div className="lg:col-span-2">
-          <ContactFormSkeleton />
-        </div>
-        <div className="space-y-4">
-          <Skeleton className="w-full h-32" />
-          <Skeleton className="w-full h-24" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export const ContactForm = dynamic<ContactFormProps>(
-  () => import('./ContactForm').then((mod) => mod.ContactFormBase),
-  { ssr: false, loading: () => <ContactFormSkeleton /> }
-);
-
-export const ContactPage = dynamic<ContactPageProps>(
-  () => import('./ContactPage').then((mod) => mod.ContactPageBase),
-  { ssr: false, loading: () => <ContactPageSkeleton /> }
-);

package/src/snippets/ContactForm/index.ts

@@ -1,34 +0,0 @@
-// ============================================================================
-// ContactForm - Contact form using Django-CFG Lead API
-// ============================================================================
-
-// Components (dynamic import, ssr: false - no hydration issues)
-export { ContactForm, ContactPage } from './dynamic';
-export { ContactInfo } from './ContactInfo';
-
-// Types
-export type { ContactFormProps } from './ContactForm';
-export type { ContactPageProps } from './ContactPage';
-
-// Provider & Hooks
-export {
-  ContactFormProvider,
-  useContactForm,
-  useContactFormOptional,
-} from './ContactFormProvider';
-
-// Types
-export type {
-  ContactFormProviderProps,
-  ContactFormContextValue,
-  LeadSubmissionData,
-  LeadSubmissionResult,
-  UseContactFormReturn,
-  ContactFormTexts,
-  ContactDetail,
-  ContactAction,
-  ContactInfoProps,
-} from './types';
-
-// Constants
-export { DEFAULT_FORM_TEXTS, DEFAULT_INFO_TITLE } from './types';

package/src/snippets/ContactForm/types.ts

@@ -1,110 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Schemas } from '@djangocfg/api';
-
-// ============================================================================
-// Re-export API Types
-// ============================================================================
-
-/** Lead submission request data - uses generated API type */
-export type LeadSubmissionData = Schemas.LeadSubmissionRequest;
-
-/** Lead submission response - uses generated API type */
-export type LeadSubmissionResult = Schemas.LeadSubmissionResponse;
-
-// ============================================================================
-// Provider Types
-// ============================================================================
-
-export interface ContactFormProviderProps {
-  children: ReactNode;
-  /**
-   * API base URL for lead submission
-   * If not provided or empty, will use local Next.js API route (/api/contact)
-   * @example "https://api.example.com" or undefined to use /api/contact
-   */
-  apiUrl?: string;
-}
-
-// ============================================================================
-// Hook Types
-// ============================================================================
-
-export interface UseContactFormReturn {
-  /** Submit lead data */
-  submit: (data: LeadSubmissionData) => Promise<LeadSubmissionResult>;
-  /** Is currently submitting */
-  isSubmitting: boolean;
-  /** Last error */
-  error: Error | null;
-  /** Last successful response */
-  lastResponse: LeadSubmissionResult | null;
-  /** Reset error state */
-  resetError: () => void;
-}
-
-// ============================================================================
-// Context Types
-// ============================================================================
-
-export interface ContactFormContextValue extends UseContactFormReturn {
-  /** API base URL */
-  apiUrl: string;
-}
-
-// ============================================================================
-// Form Texts
-// ============================================================================
-
-export interface ContactFormTexts {
-  title?: string;
-  description?: string;
-  submitText?: string;
-  loadingText?: string;
-  successTitle?: string;
-  successMessage?: string;
-  errorTitle?: string;
-  errorMessage?: string;
-}
-
-export const DEFAULT_FORM_TEXTS: Required<ContactFormTexts> = {
-  title: 'Send us a message',
-  description: "Fill out the form below and we'll get back to you as soon as possible",
-  submitText: 'Send Message',
-  loadingText: 'Sending...',
-  successTitle: 'Message Sent!',
-  successMessage: "We'll get back to you within 24 hours.",
-  errorTitle: 'Error',
-  errorMessage: 'Failed to send message. Please try again.',
-};
-
-// ============================================================================
-// Contact Info Types
-// ============================================================================
-
-export interface ContactDetail {
-  icon: ReactNode;
-  label: string;
-  value: string;
-  href?: string;
-  external?: boolean;
-}
-
-export interface ContactAction {
-  icon: ReactNode;
-  label: string;
-  href: string;
-  external?: boolean;
-}
-
-export interface ContactInfoProps {
-  details: ContactDetail[];
-  title?: string;
-  action?: {
-    title: string;
-    description?: string;
-    button: ContactAction;
-  };
-  className?: string;
-}
-
-export const DEFAULT_INFO_TITLE = 'Contact Information';