Midway scaffold enterprise request form

studio/components/interfaces/Billing/EnterpriseRequest.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react'
+import { Transition } from '@headlessui/react'
+import { Button, Form, Input, IconArrowLeft } from '@supabase/ui'
+
+interface Props {
+  visible: boolean
+  onSelectBack: () => void
+}
+
+const EnterpriseRequest: FC<Props> = ({ visible, onSelectBack }) => {
+  const initialValues = {
+    name: '',
+    email: '',
+    company: '',
+    message: '',
+  }
+
+  return (
+    <Transition
+      show={visible}
+      enter="transition ease-out duration-300"
+      enterFrom="transform opacity-0 translate-x-10"
+      enterTo="transform opacity-100 translate-x-0"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100"
+      leaveTo="transform opacity-0 -translate-x-10"
+    >
+      <div className="space-y-8">
+        <div className="relative">
+          <div className="absolute top-[2px] -left-24">
+            <Button type="text" icon={<IconArrowLeft />} onClick={onSelectBack}>
+              Back
+            </Button>
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-xl">Customised plans tailored for your business needs</h4>
+            <p className="text-scale-1100">
+              Let us know a few details and we’ll be in contact with you!
+            </p>
+          </div>
+          <Form
+            validateOnBlur
+            initialValues={initialValues}
+            onSubmit={async (values: any, { setSubmitting }: any) => {}}
+            validate={(values) => {}}
+          >
+            {({ isSubmitting }: { isSubmitting: boolean }) => (
+              <div className="space-y-4 py-3">
+                <Input layout="horizontal" label="Name" id="name" name="name" />
+                <Input layout="horizontal" label="Email" id="email" name="email" />
+                <Input layout="horizontal" label="Company" id="company" name="company" />
+                <Input.TextArea
+                  label="Let us know what you intend to use Supabase for"
+                  id="message"
+                  name="message"
+                />
+              </div>
+            )}
+          </Form>
+        </div>
+      </div>
+    </Transition>
+  )
+}
+
+export default EnterpriseRequest

studio/components/interfaces/Billing/PlanSelection/PlanSelection.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link'
+import { FC } from 'react'
+import { Loading } from '@supabase/ui'
+import { Transition } from '@headlessui/react'
+
+import Plans from './Plans/Plans'
+import { BillingPlan } from './Plans/Plans.types'
+import { StripeSubscription } from '..'
+
+interface Props {
+  visible: boolean
+  billingPlans: BillingPlan[]
+  currentPlan?: StripeSubscription
+  onSelectPlan: (plan: BillingPlan) => void
+}
+
+const PlanSelection: FC<Props> = ({ visible, billingPlans, currentPlan, onSelectPlan }) => {
+  return (
+    <Transition
+      show={visible}
+      enter="transition ease-out duration-300"
+      enterFrom="transform opacity-0 -translate-x-10"
+      enterTo="transform opacity-100 translate-x-0"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100"
+      leaveTo="transform opacity-0 -translate-x-10"
+    >
+      <div className="space-y-8">
+        <h4 className="text-xl">Change your project's subscription</h4>
+        {/* FE will make a call to fetch all plans first at the page level */}
+        <Loading active={!currentPlan}>
+          <Plans plans={billingPlans} currentPlan={currentPlan} onSelectPlan={onSelectPlan} />
+        </Loading>
+        <div className="flex justify-center items-center">
+          <Link href="https://supabase.com/pricing">
+            <a target="_blank" className="text-sm text-scale-1100 hover:text-scale-1200 transition">
+              See detailed comparisons across plans
+            </a>
+          </Link>
+        </div>
+      </div>
+    </Transition>
+  )
+}
+
+export default PlanSelection

studio/components/interfaces/Billing/PlanSelection/Plans/PlanCTAButton.tsx

@@ -3,7 +3,7 @@ import { Button, IconLoader } from '@supabase/ui'
 
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
 import { BillingPlan } from './Plans.types'
-import { StripeSubscription } from '../index'
+import { StripeSubscription } from '../../index'
 
 interface Props {
   plan: BillingPlan

studio/components/interfaces/Billing/PlanSelection/Plans/Plans.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { Badge } from '@supabase/ui'
 
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
-import { StripeSubscription } from '../index'
+import { StripeSubscription } from '../../index'
 import { BillingPlan } from './Plans.types'
 import PlanCTAButton from './PlanCTAButton'
 
@@ -48,7 +48,7 @@ const Plans: FC<Props> = ({ plans, currentPlan, onSelectPlan }) => {
             {plan.id === STRIPE_PRODUCT_IDS.PRO && <AnimatedGradientBackground />}
 
             {/* Label to show current subscription */}
-            {plan.id === currentPlan?.tier.prod_id && <CurrentSubscriptionBanner />}
+            {plan.id && plan.id === currentPlan?.tier.prod_id && <CurrentSubscriptionBanner />}
 
             <div className="z-10 mb-8">
               <div className="flex items-center space-x-4">

studio/components/interfaces/Billing/index.ts

@@ -1,7 +1,8 @@
 import PAYGUsage from './PAYGUsage/PAYGUsage'
 import Subscription from './Subscription/Subscription'
-import Plans from './Plans/Plans'
+import PlanSelection from './PlanSelection/PlanSelection'
+import EnterpriseRequest from './EnterpriseRequest'
 
 export * from './Subscription/Subscription.types'
 export * from './PAYGUsage/PAYGUsage.constants'
-export { PAYGUsage, Subscription, Plans }
+export { PAYGUsage, Subscription, PlanSelection, EnterpriseRequest }

studio/pages/project/[ref]/settings/billing/update.tsx

@@ -1,17 +1,15 @@
-import Link from 'next/link'
 import { NextPage } from 'next'
 import { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Loading } from '@supabase/ui'
 
 import { withAuth, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { BillingLayout } from 'components/layouts'
-import { Plans, StripeSubscription } from 'components/interfaces/Billing'
+import { PlanSelection, EnterpriseRequest, StripeSubscription } from 'components/interfaces/Billing'
 
-import { BillingPlan } from 'components/interfaces/Billing/Plans/Plans.types'
-import { BILLING_PLANS } from 'components/interfaces/Billing/Plans/Plans.constants'
+import { BillingPlan } from 'components/interfaces/Billing/PlanSelection/Plans/Plans.types'
+import { BILLING_PLANS } from 'components/interfaces/Billing/PlanSelection/Plans/Plans.constants'
 
 const BillingUpdate: NextPage = () => {
   const { ui } = useStore()
@@ -19,6 +17,7 @@ const BillingUpdate: NextPage = () => {
 
   const [loading, setLoading] = useState(false)
   const [subscription, setSubscription] = useState<StripeSubscription>()
+  const [selectedPlan, setSelectedPlan] = useState<BillingPlan>()
 
   useEffect(() => {
     if (projectRef) getSubscription()
@@ -50,26 +49,23 @@ const BillingUpdate: NextPage = () => {
     }
   }
 
-  const onSelectPlan = (plan: BillingPlan) => {
-    console.log('Selected plan', plan)
-  }
+  /**
+   * Existing UI bug: Transition isn't smooth between screens, next "state" is getting rendered too early
+   * Resolve later, don't wanna get stuck now lol
+   */
 
   return (
     <BillingLayout>
-      <div className="space-y-8">
-        <h4 className="text-xl">Change your project's subscription</h4>
-        {/* FE will make a call to fetch all plans first at the page level */}
-        <Loading active={loading}>
-          <Plans plans={BILLING_PLANS} currentPlan={subscription} onSelectPlan={onSelectPlan} />
-        </Loading>
-        <div className="flex justify-center items-center">
-          <Link href="https://supabase.com/pricing">
-            <a target="_blank" className="text-sm text-scale-1100 hover:text-scale-1200 transition">
-              See detailed comparisons across plans
-            </a>
-          </Link>
-        </div>
-      </div>
+      <PlanSelection
+        visible={!selectedPlan}
+        billingPlans={BILLING_PLANS}
+        currentPlan={subscription}
+        onSelectPlan={setSelectedPlan}
+      />
+      <EnterpriseRequest
+        visible={selectedPlan?.name === 'Enterprise'}
+        onSelectBack={() => setSelectedPlan(undefined)}
+      />
     </BillingLayout>
   )
 }