White-Label Branding

const handleFileUpload = async (event) => {
  const file = event.target.files?.[0];
  
  // Validate file type
  const validTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
  if (!validTypes.includes(file.type)) {
    toast.error('Please upload a valid image file');
    return;
  }
  
  // Validate file size (2MB max)
  if (file.size > 2 * 1024 * 1024) {
    toast.error('File size must be under 2MB');
    return;
  }
  
  // Convert to base64
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64String = reader.result;
    // Save to state and database
  };
  reader.readAsDataURL(file);
};

:root {
  --primary-color: #8B5CF6; /* Updated dynamically */
}

.btn-primary-themed {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.text-primary-themed {
  color: var(--primary-color);
}

const createBrandedStyles = (primaryColor: string) => ({
  brandPrimary: {
    color: primaryColor
  },
  brandBackground: {
    backgroundColor: primaryColor
  },
  brandBorder: {
    borderColor: primaryColor
  }
});

const brandedStyles = createBrandedStyles(data.branding.primaryColor);

export const validateBrandingData = (data: BrandingData) => {
  const errors: ValidationError[] = [];
  
  if (!data.companyName || data.companyName.trim().length < 2) {
    errors.push({
      field: 'companyName',
      message: 'Agency name must be at least 2 characters'
    });
  }
  
  if (data.companyName.length > 50) {
    errors.push({
      field: 'companyName',
      message: 'Agency name cannot exceed 50 characters'
    });
  }
  
  if (data.website && !isValidUrl(data.website)) {
    errors.push({
      field: 'website',
      message: 'Please enter a valid URL'
    });
  }
  
  if (data.supportEmail && !isValidEmail(data.supportEmail)) {
    errors.push({
      field: 'supportEmail',
      message: 'Please enter a valid email address'
    });
  }
  
  return errors;
};

model User {
  id                String   @id @default(cuid())
  email             String   @unique
  
  // White-label branding fields
  whiteLabelEnabled Boolean  @default(false)
  companyName       String?
  website           String?
  supportEmail      String?
  primaryColor      String   @default("#8B5CF6")
  logo              String?  // Base64 data URI
  
  plan              Plan     @default(FREE)
  // ... other fields
}

export const canUseWhiteLabel = (user: User): boolean => {
  // Professional and Agency plans always have access
  if (user.plan === 'PROFESSIONAL' || user.plan === 'AGENCY') {
    return true;
  }
  
  // Starter users can purchase white-label add-on
  if (user.plan === 'STARTER' && user.whiteLabelAddon) {
    return true;
  }
  
  // Users in trial period have temporary access
  if (user.trialEndDate && new Date(user.trialEndDate) > new Date()) {
    return true;
  }
  
  return false;
};

// Logo selection logic
const getLogoUrl = () => {
  const defaultReportrLogo = 'data:image/svg+xml;base64,...';
  
  if (data.branding.whiteLabelEnabled || data.branding.enabled) {
    return data.branding.logo || defaultReportrLogo;
  }
  
  return defaultReportrLogo;
};

// Render with branding
<Page size="A4">
  <Image src={getLogoUrl()} style={styles.logo} />
  
  <Text style={[styles.title, brandedStyles.brandPrimary]}>
    SEO Report
  </Text>
  
  <Text style={styles.clientName}>
    {data.clientName}
  </Text>
  
  {data.branding.whiteLabelEnabled && data.branding.companyName && (
    <Text style={[styles.agencyName, brandedStyles.brandPrimary]}>
      {data.branding.companyName}
    </Text>
  )}
  
  {data.branding.website && (
    <Text style={styles.agencyWebsite}>
      {data.branding.website.replace(/^https?:\/\//, '')}
    </Text>
  )}
</Page>

<Text style={[styles.sectionHeader, brandedStyles.brandPrimary]}>
  Search Console Performance
</Text>

<View style={[styles.divider, brandedStyles.brandBorder]} />

<View style={styles.footer}>
  {data.branding.whiteLabelEnabled ? (
    <Text style={styles.footerText}>
      Report by {data.branding.companyName} | {data.branding.website}
    </Text>
  ) : (
    <Text style={styles.footerText}>
      Powered by Reportr
    </Text>
  )}
</View>