@visns-studio/visns-components 5.13.8 → 5.13.10

package/src/components/proposal/BrandingProfileCompanyInfo.css

@@ -0,0 +1,213 @@
+/* Branding Profile Company Info Styles */
+.branding-company-info-display,
+.branding-company-info-editor {
+    background: var(--tertiary-color, white);
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid var(--paragraph-color, #e2e8f0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    margin-bottom: 1.5rem;
+}
+
+.branding-company-info-header {
+    margin-bottom: 1.5rem;
+}
+
+.branding-company-info-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.branding-company-info-title h4 {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--header-color, #1f2937);
+}
+
+.branding-company-info-title svg {
+    color: var(--primary-color, #3cbf7d);
+}
+
+.branding-company-info-description {
+    color: var(--paragraph-color, #6b7280);
+    margin: 0;
+    font-size: 0.875rem;
+}
+
+.branding-company-info-edit-btn {
+    background: var(--primary-color, #3cbf7d);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.branding-company-info-edit-btn:hover {
+    background: var(--header-color, #1b3933);
+}
+
+/* Display Mode */
+.branding-company-info-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.branding-company-info-item {
+    display: flex;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
+}
+
+.branding-company-info-item strong {
+    color: var(--header-color, #374151);
+    min-width: 80px;
+    flex-shrink: 0;
+}
+
+.branding-company-info-empty {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: var(--bg-color, #f9fafb);
+    border-radius: 6px;
+    border: 1px dashed var(--paragraph-color, #d1d5db);
+    color: var(--paragraph-color, #6b7280);
+    font-size: 0.875rem;
+}
+
+.branding-company-info-empty svg {
+    color: var(--paragraph-color, #9ca3af);
+}
+
+.branding-company-info-empty p {
+    margin: 0;
+}
+
+/* Edit Mode */
+.branding-company-info-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.branding-company-info-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.branding-company-info-field label {
+    font-weight: 600;
+    color: var(--header-color, #374151);
+    font-size: 0.875rem;
+}
+
+.branding-company-info-field input,
+.branding-company-info-field textarea {
+    padding: 0.75rem;
+    border: 1px solid var(--paragraph-color, #d1d5db);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    transition: all 0.2s;
+    background: var(--tertiary-color, white);
+}
+
+.branding-company-info-field input:focus,
+.branding-company-info-field textarea:focus {
+    outline: none;
+    border-color: var(--primary-color, #3cbf7d);
+    box-shadow: 0 0 0 3px rgba(60, 191, 125, 0.1);
+}
+
+.branding-company-info-field textarea {
+    resize: vertical;
+    min-height: 80px;
+}
+
+.branding-company-info-field input::placeholder,
+.branding-company-info-field textarea::placeholder {
+    color: var(--paragraph-color, #9ca3af);
+}
+
+/* Actions */
+.branding-company-info-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--paragraph-color, #e5e7eb);
+}
+
+.branding-company-info-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+    text-decoration: none;
+}
+
+.branding-company-info-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.branding-company-info-btn.secondary {
+    background: var(--tertiary-color, white);
+    color: var(--paragraph-color, #6b7280);
+    border: 1px solid var(--paragraph-color, #d1d5db);
+}
+
+.branding-company-info-btn.secondary:hover:not(:disabled) {
+    background: var(--bg-color, #f9fafb);
+    border-color: var(--paragraph-color, #9ca3af);
+}
+
+.branding-company-info-btn.primary {
+    background: var(--primary-color, #3cbf7d);
+    color: white;
+    border: 1px solid var(--primary-color, #3cbf7d);
+    box-shadow: 0 2px 4px rgba(60, 191, 125, 0.2);
+}
+
+.branding-company-info-btn.primary:hover:not(:disabled) {
+    background: var(--header-color, #1b3933);
+    border-color: var(--header-color, #1b3933);
+    box-shadow: 0 4px 8px rgba(27, 57, 51, 0.3);
+    transform: translateY(-1px);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .branding-company-info-display,
+    .branding-company-info-editor {
+        padding: 1rem;
+    }
+    
+    .branding-company-info-actions {
+        flex-direction: column-reverse;
+        gap: 0.5rem;
+    }
+    
+    .branding-company-info-btn {
+        width: 100%;
+        justify-content: center;
+    }
+}

package/src/components/proposal/BrandingProfileCompanyInfo.jsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react';
+import { Building, Save, X, Info } from 'lucide-react';
+import { toast } from 'react-toastify';
+import './BrandingProfileCompanyInfo.css';
+
+const BrandingProfileCompanyInfo = ({ 
+    brandingProfile, 
+    onSave, 
+    onCancel, 
+    isEditing = false,
+    apiEndpoint = '/ajax/branding-profiles'
+}) => {
+    const [companyInfo, setCompanyInfo] = useState({
+        address: '',
+        website: '',
+        phone: '',
+        abn: '',
+        ...brandingProfile?.company_info || {}
+    });
+    
+    const [isLoading, setIsLoading] = useState(false);
+
+    const handleInputChange = (field, value) => {
+        setCompanyInfo(prev => ({
+            ...prev,
+            [field]: value
+        }));
+    };
+
+    const handleSave = async () => {
+        try {
+            setIsLoading(true);
+            
+            const response = await fetch(`${apiEndpoint}/${brandingProfile.id}`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify({
+                    ...brandingProfile,
+                    company_info: companyInfo
+                })
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                toast.success('Company information updated successfully');
+                if (onSave) {
+                    onSave({
+                        ...brandingProfile,
+                        company_info: companyInfo
+                    });
+                }
+            } else {
+                throw new Error('Failed to update company information');
+            }
+        } catch (error) {
+            console.error('Error updating company info:', error);
+            toast.error('Failed to update company information');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (!isEditing) {
+        return (
+            <div className="branding-company-info-display">
+                <div className="branding-company-info-header">
+                    <div className="branding-company-info-title">
+                        <Building size={20} />
+                        <h4>Company Information</h4>
+                    </div>
+                    <button 
+                        onClick={() => onSave && onSave(null)} 
+                        className="branding-company-info-edit-btn"
+                    >
+                        Edit
+                    </button>
+                </div>
+                
+                <div className="branding-company-info-content">
+                    {companyInfo.address && (
+                        <div className="branding-company-info-item">
+                            <strong>Address:</strong> {companyInfo.address}
+                        </div>
+                    )}
+                    {companyInfo.website && (
+                        <div className="branding-company-info-item">
+                            <strong>Website:</strong> {companyInfo.website}
+                        </div>
+                    )}
+                    {companyInfo.phone && (
+                        <div className="branding-company-info-item">
+                            <strong>Phone:</strong> {companyInfo.phone}
+                        </div>
+                    )}
+                    {companyInfo.abn && (
+                        <div className="branding-company-info-item">
+                            <strong>ABN:</strong> {companyInfo.abn}
+                        </div>
+                    )}
+                    {!companyInfo.address && !companyInfo.website && !companyInfo.phone && !companyInfo.abn && (
+                        <div className="branding-company-info-empty">
+                            <Info size={16} />
+                            <p>No company information added yet. Click Edit to add details.</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="branding-company-info-editor">
+            <div className="branding-company-info-header">
+                <div className="branding-company-info-title">
+                    <Building size={20} />
+                    <h4>Edit Company Information</h4>
+                </div>
+                <p className="branding-company-info-description">
+                    This information will be used in proposal headers and other branded documents.
+                </p>
+            </div>
+
+            <div className="branding-company-info-form">
+                <div className="branding-company-info-field">
+                    <label htmlFor="company-address">Company Address</label>
+                    <textarea
+                        id="company-address"
+                        value={companyInfo.address}
+                        onChange={(e) => handleInputChange('address', e.target.value)}
+                        placeholder="Enter full company address"
+                        rows={3}
+                    />
+                </div>
+
+                <div className="branding-company-info-field">
+                    <label htmlFor="company-website">Website</label>
+                    <input
+                        type="url"
+                        id="company-website"
+                        value={companyInfo.website}
+                        onChange={(e) => handleInputChange('website', e.target.value)}
+                        placeholder="https://www.yourcompany.com"
+                    />
+                </div>
+
+                <div className="branding-company-info-field">
+                    <label htmlFor="company-phone">Phone Number</label>
+                    <input
+                        type="tel"
+                        id="company-phone"
+                        value={companyInfo.phone}
+                        onChange={(e) => handleInputChange('phone', e.target.value)}
+                        placeholder="(02) 1234 5678"
+                    />
+                </div>
+
+                <div className="branding-company-info-field">
+                    <label htmlFor="company-abn">ABN</label>
+                    <input
+                        type="text"
+                        id="company-abn"
+                        value={companyInfo.abn}
+                        onChange={(e) => handleInputChange('abn', e.target.value)}
+                        placeholder="12 345 678 901"
+                    />
+                </div>
+            </div>
+
+            <div className="branding-company-info-actions">
+                <button
+                    onClick={onCancel}
+                    className="branding-company-info-btn secondary"
+                    disabled={isLoading}
+                >
+                    <X size={16} />
+                    Cancel
+                </button>
+                <button
+                    onClick={handleSave}
+                    className="branding-company-info-btn primary"
+                    disabled={isLoading}
+                >
+                    <Save size={16} />
+                    {isLoading ? 'Saving...' : 'Save Company Info'}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default BrandingProfileCompanyInfo;