chore: edge function examples filter stripe example (enabled features) (#38746)

* chore: edge function examples filter stripe example (enabled features)

* nit

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx

@@ -1,6 +1,7 @@
 import { Code, Github, Lock, Play, Server, Terminal } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useMemo } from 'react'
 
 import { useParams } from 'common'
 import { ScaffoldSectionTitle } from 'components/layouts/Scaffold'
@@ -8,6 +9,7 @@ import { DocsButton } from 'components/ui/DocsButton'
 import { ResourceItem } from 'components/ui/Resource/ResourceItem'
 import { ResourceList } from 'components/ui/Resource/ResourceList'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import {
@@ -39,6 +41,16 @@ export const FunctionsEmptyState = () => {
   const { mutate: sendEvent } = useSendEventMutation()
   const { data: org } = useSelectedOrganizationQuery()
 
+  const showStripeExample = useIsFeatureEnabled('edge_functions:show_stripe_example')
+  const templates = useMemo(() => {
+    if (showStripeExample) {
+      return EDGE_FUNCTION_TEMPLATES
+    }
+
+    // Filter out Stripe template
+    return EDGE_FUNCTION_TEMPLATES.filter((template) => template.value !== 'stripe-webhook')
+  }, [showStripeExample])
+
   return (
     <>
       <Card>
@@ -157,7 +169,7 @@ export const FunctionsEmptyState = () => {
         Start with a template
       </ScaffoldSectionTitle>
       <ResourceList>
-        {EDGE_FUNCTION_TEMPLATES.map((template) => (
+        {templates.map((template) => (
           <ResourceItem
             key={template.name}
             media={<Code strokeWidth={1.5} size={16} className="-translate-y-[9px]" />}
@@ -181,6 +193,16 @@ export const FunctionsEmptyState = () => {
 }
 
 export const FunctionsEmptyStateLocal = () => {
+  const showStripeExample = useIsFeatureEnabled('edge_functions:show_stripe_example')
+  const templates = useMemo(() => {
+    if (showStripeExample) {
+      return EDGE_FUNCTION_TEMPLATES
+    }
+
+    // Filter out Stripe template
+    return EDGE_FUNCTION_TEMPLATES.filter((template) => template.value !== 'stripe-webhook')
+  }, [showStripeExample])
+
   return (
     <>
       <div className="flex flex-col gap-y-4">
@@ -295,7 +317,7 @@ curl --request POST 'http://localhost:54321/functions/v1/hello-world' \\
 
         <ScaffoldSectionTitle className="text-xl mt-12">Explore our templates</ScaffoldSectionTitle>
         <ResourceList>
-          {EDGE_FUNCTION_TEMPLATES.map((template) => (
+          {templates.map((template) => (
             <Dialog>
               <DialogTrigger asChild>
                 <ResourceItem

apps/studio/pages/project/[ref]/functions/new.tsx

@@ -1,7 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { AlertCircle, Book, Check } from 'lucide-react'
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
@@ -14,7 +14,7 @@ import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import FileExplorerAndEditor from 'components/ui/FileExplorerAndEditor/FileExplorerAndEditor'
 import { useEdgeFunctionDeployMutation } from 'data/edge-functions/edge-functions-deploy-mutation'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import { useOrgAiOptInLevel } from 'hooks/misc/useOrgOptedIntoAi'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { BASE_PATH } from 'lib/constants'
@@ -103,6 +103,7 @@ const NewFunctionPage = () => {
   const { data: org } = useSelectedOrganizationQuery()
   const snap = useAiAssistantStateSnapshot()
   const { mutate: sendEvent } = useSendEventMutation()
+  const showStripeExample = useIsFeatureEnabled('edge_functions:show_stripe_example')
 
   const [files, setFiles] = useState<
     { id: number; name: string; content: string; selected?: boolean }[]
@@ -118,6 +119,14 @@ const NewFunctionPage = () => {
   const [isPreviewingTemplate, setIsPreviewingTemplate] = useState(false)
   const [savedCode, setSavedCode] = useState<string>('')
 
+  const templates = useMemo(() => {
+    if (showStripeExample) {
+      return EDGE_FUNCTION_TEMPLATES
+    }
+    // Filter out Stripe template
+    return EDGE_FUNCTION_TEMPLATES.filter((template) => template.value !== 'stripe-webhook')
+  }, [showStripeExample])
+
   const form = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
@@ -288,7 +297,7 @@ const NewFunctionPage = () => {
                 <CommandList_Shadcn_>
                   <CommandEmpty_Shadcn_>No templates found.</CommandEmpty_Shadcn_>
                   <CommandGroup_Shadcn_>
-                    {EDGE_FUNCTION_TEMPLATES.map((template) => (
+                    {templates.map((template) => (
                       <CommandItem_Shadcn_
                         key={template.value}
                         value={template.value}

packages/common/enabled-features/enabled-features.json

@@ -51,6 +51,8 @@
   "docs:production_checklist": true,
   "docs:web_apps": true,
 
+  "edge_functions:show_stripe_example": true,
+
   "feedback:docs": true,
 
   "integrations:partners": true,

packages/common/enabled-features/enabled-features.schema.json

@@ -185,6 +185,11 @@
       "description": "Enable web apps getting started documentation"
     },
 
+    "edge_functions:show_stripe_example": {
+      "type": "boolean",
+      "description": "Show all the Stripe example in edge function templates in the edge functions page."
+    },
+
     "feedback:docs": {
       "type": "boolean",
       "description": "Enable feedback submission for docs site"