[TOOL-4277] Dashboard: Update gated features (#6838)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the handling of team billing plans across various components in the application. It introduces new properties for better plan management and refines the UI elements related to billing features.

### Detailed summary
- Added `teamSlug` prop to several components for better context.
- Changed `validTeamPlan` to `teamPlan` in multiple files for consistency.
- Introduced `planToTierRecordForGating` to manage billing plans.
- Updated UI components to reflect new billing logic and props.
- Refactored `GatedSwitch` to utilize `currentPlan` and `requiredPlan`.
- Enhanced form handling in `InAppWalletSettingsUI` and other components to reflect billing plan changes.
- Renamed story exports for clarity in `GatedSwitch` stories.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/account-abstraction/settings/page.tsx

@@ -60,6 +60,7 @@ export default async function Page(props: {
         trackingCategory="account-abstraction-project-settings"
         project={project}
         teamId={team.id}
+        teamSlug={team.slug}
         validTeamPlan={getValidTeamPlan(team)}
       />
     </ChakraProviderSetup>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/in-app-wallets/settings/page.tsx

@@ -30,7 +30,7 @@ export default async function Page(props: {
       teamId={team.id}
       trackingCategory="in-app-wallet-project-settings"
       teamSlug={team_slug}
-      validTeamPlan={getValidTeamPlan(team)}
+      teamPlan={getValidTeamPlan(team)}
       smsCountryTiers={smsCountryTiers}
     />
   );

apps/dashboard/src/components/embedded-wallets/Configure/InAppWalletSettingsUI.stories.tsx

@@ -1,6 +1,6 @@
+import type { Team } from "@/api/team";
 import type { Meta, StoryObj } from "@storybook/react";
 import { projectStub } from "../../../stories/stubs";
-import { mobileViewport } from "../../../stories/utils";
 import { InAppWalletSettingsUI } from "./index";
 
 const meta = {
@@ -16,44 +16,44 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const GrowthPlan: Story = {
+export const FreePlan: Story = {
   args: {
-    canEditAdvancedFeatures: true,
+    currentPlan: "free",
   },
 };
 
-export const FreePlan: Story = {
+export const GrowthPlan: Story = {
   args: {
-    canEditAdvancedFeatures: false,
+    currentPlan: "growth",
   },
 };
 
-export const GrowthPlanMobile: Story = {
+export const AcceleratePlan: Story = {
   args: {
-    canEditAdvancedFeatures: true,
-  },
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+    currentPlan: "accelerate",
   },
 };
 
-export const FreePlanMobile: Story = {
+export const GrowthLegacyPlan: Story = {
   args: {
-    canEditAdvancedFeatures: false,
+    currentPlan: "growth_legacy",
   },
-  parameters: {
-    viewport: mobileViewport("iphone14"),
+};
+
+export const ProPlan: Story = {
+  args: {
+    currentPlan: "pro",
   },
 };
 
 function Variants(props: {
-  canEditAdvancedFeatures: boolean;
+  currentPlan: Team["billingPlan"];
 }) {
   return (
     <div className="mx-auto w-full max-w-[1140px] px-4 py-6">
       <div className="flex flex-col gap-10">
         <InAppWalletSettingsUI
-          canEditAdvancedFeatures={props.canEditAdvancedFeatures}
+          teamPlan={props.currentPlan}
           project={projectStub("foo", "bar")}
           teamId="bar"
           embeddedWalletService={{