diff --git a/POLICY_API_SETUP.md b/POLICY_API_SETUP.md new file mode 100644 index 00000000..28e256d6 --- /dev/null +++ b/POLICY_API_SETUP.md @@ -0,0 +1,444 @@ +# Policy API Setup - Complete Guide + +## 🎉 Summary + +Successfully created a comprehensive Policy Management System with: +- **3 Policy Types**: Privacy Policy, Terms of Use, Support Policy +- **Professional Enterprise Content**: 13-15 sections per policy with detailed legal and operational information +- **Full CRUD API**: RESTful API endpoints for managing policies +- **Dynamic Frontend**: React-based policy viewer with loading states and error handling + +--- + +## 📋 What Was Created + +### Backend (Django) + +#### 1. **Models** (`backend/policies/models.py`) +- `Policy`: Main policy document with metadata (type, title, version, effective date) +- `PolicySection`: Individual sections within each policy + +#### 2. **API Views** (`backend/policies/views.py`) +- `PolicyViewSet`: RESTful viewset for policy CRUD operations +- Endpoints support filtering by type +- Retrieve by ID or policy type + +#### 3. **Serializers** (`backend/policies/serializers.py`) +- `PolicySerializer`: Full policy with all sections +- `PolicyListSerializer`: Simplified list view +- `PolicySectionSerializer`: Individual section data + +#### 4. **Admin Interface** (`backend/policies/admin.py`) +- Full admin panel integration +- Inline section editing +- List filters and search functionality + +#### 5. **Management Command** (`backend/policies/management/commands/populate_policies.py`) +- Command: `python manage.py populate_policies` +- Creates/updates all 3 policies with professional content +- 42 total sections across all policies + +### Frontend (Next.js) + +#### 1. **API Service** (`lib/api/policyService.ts`) +- `getPolicies()`: Fetch all policies +- `getPolicyByType(type)`: Fetch specific policy +- `getPolicyById(id)`: Fetch by ID + +#### 2. **React Hook** (`lib/hooks/usePolicy.ts`) +- `usePolicies()`: Hook for all policies +- `usePolicy(type)`: Hook for specific policy +- `usePolicyById(id)`: Hook for policy by ID + +#### 3. **Policy Page** (`app/policy/page.tsx`) +- Dynamic page showing policy content +- Query parameter: `?type=privacy|terms|support` +- Loading and error states +- Responsive design +- Styled with inline styles + +#### 4. **Support Center Integration** (`components/pages/support/SupportCenterHero.tsx`) +- Added 3 new clickable cards: + - Privacy Policy → `/policy?type=privacy` + - Terms of Use → `/policy?type=terms` + - Support Policy → `/policy?type=support` + +--- + +## 🚀 Setup Complete! + +### What Was Done: + +```bash +# 1. Created migrations +python manage.py makemigrations policies +✅ Created: policies/migrations/0001_initial.py + +# 2. Applied migrations +python manage.py migrate policies +✅ Created database tables + +# 3. Populated with content +python manage.py populate_policies +✅ Privacy Policy: 13 sections +✅ Terms of Use: 14 sections +✅ Support Policy: 15 sections +``` + +--- + +## 📡 API Endpoints + +### Base URL +``` +http://localhost:8000/api/policies/ +``` + +### Available Endpoints + +#### 1. **List All Policies** +``` +GET /api/policies/ +``` +**Response:** +```json +[ + { + "id": 1, + "type": "privacy", + "title": "Privacy Policy", + "slug": "privacy", + "description": "Our commitment to protecting your privacy and personal data", + "last_updated": "2025-10-08", + "version": "2.1" + }, + ... +] +``` + +#### 2. **Get Specific Policy by Type** +``` +GET /api/policies/privacy/ +GET /api/policies/terms/ +GET /api/policies/support/ +``` +**Response:** +```json +{ + "id": 1, + "type": "privacy", + "title": "Privacy Policy", + "slug": "privacy", + "description": "Our commitment to protecting your privacy and personal data", + "last_updated": "2025-10-08", + "version": "2.1", + "effective_date": "2025-10-08", + "sections": [ + { + "id": 1, + "heading": "1. Introduction and Scope", + "content": "GNX Software Solutions...", + "order": 1 + }, + ... + ] +} +``` + +#### 3. **Get Policy by ID** +``` +GET /api/policies/{id}/ +``` + +--- + +## 🎨 Frontend Usage + +### 1. **Direct Navigation** +```typescript +// Link to policies from anywhere +Privacy Policy +Terms of Use +Support Policy +``` + +### 2. **Using the Hook** +```typescript +import { usePolicy } from '@/lib/hooks/usePolicy'; + +function MyComponent() { + const { data: policy, isLoading, error } = usePolicy('privacy'); + + if (isLoading) return
Loading...
; + if (error) return
Error: {error.message}
; + + return ( +
+

{policy.title}

+ {policy.sections.map(section => ( +
+

{section.heading}

+

{section.content}

+
+ ))} +
+ ); +} +``` + +### 3. **Support Center Cards** +The support center hero now has 6 cards: +- **Top Row** (Opens Modals): + - Submit Tickets + - Knowledge Base + - Track Status +- **Bottom Row** (Navigates to Policy Page): + - Privacy Policy + - Terms of Use + - Support Policy + +--- + +## 📝 Policy Content Overview + +### Privacy Policy (13 Sections) +1. Introduction and Scope +2. Information We Collect +3. How We Collect Information +4. Use of Information +5. Information Sharing and Disclosure +6. Data Security +7. Data Retention +8. Your Rights and Choices +9. International Data Transfers +10. Cookies and Tracking Technologies +11. Children's Privacy +12. Changes to This Privacy Policy +13. Contact Information + +### Terms of Use (14 Sections) +1. Acceptance of Terms +2. Service Description and Scope +3. User Accounts and Registration +4. Acceptable Use Policy +5. Intellectual Property Rights +6. Service Level Agreements +7. Payment Terms and Billing +8. Term and Termination +9. Disclaimer of Warranties +10. Limitation of Liability +11. Dispute Resolution and Governing Law +12. Modifications to Terms +13. General Provisions +14. Contact Information + +### Support Policy (15 Sections) +1. Support Overview and Commitment +2. Support Coverage and Eligibility +3. Support Channels and Access Methods +4. Business Hours and Availability +5. Priority Levels and Response Times +6. Support Request Submission Requirements +7. Support Scope and Covered Activities +8. Exclusions and Limitations +9. Escalation Procedures +10. Knowledge Base and Self-Service Resources +11. Customer Responsibilities +12. Scheduled Maintenance and Updates +13. Service Level Credits and Remedies +14. Feedback and Continuous Improvement +15. Contact Information and Resources + +--- + +## 🔧 Admin Panel + +Access the admin panel to manage policies: + +``` +http://localhost:8000/admin/policies/ +``` + +**Features:** +- ✅ Create/Edit/Delete policies +- ✅ Inline section editing +- ✅ Version management +- ✅ Effective date tracking +- ✅ Active/Inactive toggle +- ✅ Search and filtering + +--- + +## 🎯 Features + +### Backend +- ✅ RESTful API with Django REST Framework +- ✅ Versioned policies +- ✅ Effective date tracking +- ✅ Ordered sections +- ✅ Active/Inactive status +- ✅ Full admin interface +- ✅ Management command for easy population + +### Frontend +- ✅ Dynamic policy loading from API +- ✅ Loading states with spinner +- ✅ Error handling with user-friendly messages +- ✅ Responsive design (mobile-friendly) +- ✅ Version and date display +- ✅ Smooth animations +- ✅ SEO-friendly structure +- ✅ Integration with support center + +--- + +## 🚦 Testing + +### Test the API +```bash +# List all policies +curl http://localhost:8000/api/policies/ + +# Get privacy policy +curl http://localhost:8000/api/policies/privacy/ + +# Get terms of use +curl http://localhost:8000/api/policies/terms/ + +# Get support policy +curl http://localhost:8000/api/policies/support/ +``` + +### Test the Frontend +1. Navigate to: `http://localhost:3000/policy?type=privacy` +2. Navigate to: `http://localhost:3000/policy?type=terms` +3. Navigate to: `http://localhost:3000/policy?type=support` +4. Navigate to: `http://localhost:3000/support-center` +5. Click on any of the 6 feature cards + +--- + +## 📊 Database Schema + +```sql +-- Policy Table +CREATE TABLE policies_policy ( + id INTEGER PRIMARY KEY, + type VARCHAR(50) UNIQUE, + title VARCHAR(200), + slug VARCHAR(100) UNIQUE, + description TEXT, + last_updated DATE, + version VARCHAR(20), + is_active BOOLEAN, + effective_date DATE, + created_at TIMESTAMP, + updated_at TIMESTAMP +); + +-- PolicySection Table +CREATE TABLE policies_policysection ( + id INTEGER PRIMARY KEY, + policy_id INTEGER REFERENCES policies_policy(id), + heading VARCHAR(300), + content TEXT, + order INTEGER, + is_active BOOLEAN, + created_at TIMESTAMP, + updated_at TIMESTAMP +); +``` + +--- + +## 🔄 Updating Policies + +### Via Management Command +```bash +# Re-run to update all policies +cd backend +../venv/bin/python manage.py populate_policies +``` + +### Via Admin Panel +1. Go to `http://localhost:8000/admin/policies/policy/` +2. Click on the policy to edit +3. Modify sections inline +4. Save changes + +### Via API (Programmatic) +```python +from policies.models import Policy, PolicySection + +# Get policy +policy = Policy.objects.get(type='privacy') + +# Add new section +PolicySection.objects.create( + policy=policy, + heading="New Section", + content="Section content...", + order=14 +) +``` + +--- + +## 🎨 Customization + +### Styling +The policy page uses inline styles. To customize: +- Edit `/app/policy/page.tsx` +- Modify the ` + + ); + } + + if (error || !policy) { + return ( +
+
+
+
+
+ +

Unable to Load Policy

+

{error?.message || 'The requested policy could not be found.'}

+ Return to Support Center +
+
+
+
+ +
+ ); + } + + return ( +
+
+
+
+ {/* Policy Header */} +
+

{policy.title}

+
+

+ Last Updated: {new Date(policy.last_updated).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +

+

Version {policy.version}

+

+ Effective Date: {new Date(policy.effective_date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} +

+
+ {policy.description && ( +

{policy.description}

+ )} +
+ + {/* Policy Content */} +
+ {policy.sections.map((section) => ( +
+

{section.heading}

+

(a)') + .replace(/\(b\)/g, '

(b)') + .replace(/\(c\)/g, '

(c)') + .replace(/\(d\)/g, '

(d)') + .replace(/\(e\)/g, '

(e)') + .replace(/\(f\)/g, '

(f)') + .replace(/\(g\)/g, '

(g)') + .replace(/\(h\)/g, '

(h)') + .replace(/\(i\)/g, '

(i)') + .replace(/\(j\)/g, '

(j)') + .replace(/\(k\)/g, '

(k)') + .replace(/\(l\)/g, '

(l)') + // Handle pipe separators for contact information + .replace(/ \| /g, '
') + .replace(/: /g, ': ') + // Handle semicolon with parenthesis + .replace(/; \(/g, ';

(') + // Add spacing after periods in long sentences + .replace(/\. ([A-Z])/g, '.

$1') + }} /> +
+ ))} +
+ + {/* Contact Section */} +
+
+

Questions?

+

If you have any questions about this policy, please don't hesitate to contact us.

+ Contact Us +
+
+
+
+
+ + +
+ ); +}; + +const PolicyPage = () => { + return ( +
+
+
+ Loading...
}> + + + +