Dis 186 settings plan upgrade frontend

[ChloeXiao0409]

This pull request introduces feature gating for the "Company Info" and "Calendar Integrations" admin settings sections, making them editable only for users on a Pro plan. It adds UI elements to indicate Pro-only features, disables editing for non-Pro users, and provides upgrade prompts and modals to encourage upgrading. The changes also improve component flexibility and UX by passing down editability and badge props, and by ensuring disabled controls are visually and functionally consistent.

Feature gating and Pro plan enforcement:

• Both CompanyInfoSection and IntegrationsSection now accept editable and showProBadge props, which control whether the section is editable and whether a "PRO" badge is displayed. Editing is only enabled for Pro plan users, determined in SettingsSection using the subscription state.
• For non-Pro users, attempting to edit triggers a ProFeatureModal prompting upgrade, and an "Unlock with Pro" button is shown for gated actions.

UI/UX improvements for Pro features:

• Added a styled "PRO" badge next to section headers when the feature is Pro-only and the user is not eligible to edit.
• Disabled buttons and controls for non-Pro users, including visual feedback and prevented event handlers from firing if not editable.

Component and prop improvements:

• Updated various components (EditableSection, SectionHeader, EditModal, CalendarOptionsList) to accept ReactNode for titles and new props for editability and event handling, increasing flexibility and supporting the new Pro badge UI.

User information handling:

• The user's email is now dynamically displayed in the integrations sections, replacing hardcoded placeholders.

Integration with billing/upgrade flow:

• The upgrade modal's "Upgrade" button redirects users to the billing page, streamlining the upgrade process.

[Copilot]

Pull Request Overview

This PR implements feature gating for the "Company Info" and "Calendar Integrations" admin settings sections, restricting editing to Pro plan users. Non-Pro users see a PRO badge, disabled controls, and upgrade prompts when attempting to edit restricted features.

Key Changes

• Feature gating based on subscription plan tier using useSubscription hook and isProPlan utility
• UI enhancements including PRO badges, disabled states for non-Pro users, and "Unlock with Pro" buttons
• Integration of ProFeatureModal to prompt upgrades with billing page redirection

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
SettingsSection.tsx	Adds subscription checking and passes editable and showProBadge props to gated sections
CompanyInfo.tsx	Implements Pro feature gating with modal, badge display, and conditional edit handling
CalendarIntegrations.tsx	Adds Pro feature gating, displays user email, and disables controls for non-Pro users
SectionHeader.tsx	Changes title prop type from string to React.ReactNode to support badge rendering
EditableSection.tsx	Adds onEdit prop to allow custom edit behavior and changes title to React.ReactNode
EditModal.tsx	Changes title prop type from string to React.ReactNode for consistency
CalendarForm.tsx	Adds editable prop to control switch interactivity and disabled state

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}