add new pricing page

www/src/components/account/billing/BillingManagePlan.tsx

@@ -1,31 +1,113 @@
-import { Div } from 'honorable'
-import { useContext } from 'react'
+import { Button, Flex } from '@pluralsh/design-system'
 
-import SubscriptionContext from '../../../contexts/SubscriptionContext'
+import { useCallback, useContext, useState } from 'react'
 
-import BillingPreview from './BillingPreview'
-import BillingPricingCards from './BillingPricingCards'
+import { useSearchParams } from 'react-router-dom'
+
+import styled, { useTheme } from 'styled-components'
+
+import SubscriptionContext from 'contexts/SubscriptionContext'
+
+import BillingPricingCards, { ContactUs } from './BillingPricingCards'
 import BillingPricingTable from './BillingPricingTable'
 import ConfirmPayment from './ConfirmPayment'
 
-function BillingManagePlan() {
-  const { isEnterprisePlan } = useContext(SubscriptionContext)
+import BillingDowngradeModal from './BillingDowngradeModal'
+import BillingUpgradeToProfessionalModal from './BillingUpgradeToProfessionalModal'
+
+export default function BillingManagePlan() {
+  const theme = useTheme()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [downgradeModalOpen, setDowngradeModalOpen] = useState(false)
+
+  const upgradeToProfessionalModalOpen =
+    typeof searchParams.get('upgrade') === 'string'
+  const setUpgradeToProfessionalModalOpen = useCallback(
+    (isOpen) => {
+      setSearchParams((sp) => {
+        if (isOpen) {
+          sp.set('upgrade', '1')
+        } else {
+          sp.delete('upgrade')
+        }
+
+        return sp
+      })
+    },
+    [setSearchParams]
+  )
 
   return (
-    <>
+    <Flex
+      direction="column"
+      gap="large"
+      paddingBottom={theme.spacing.xxlarge}
+    >
       <ConfirmPayment />
-      {!isEnterprisePlan && <BillingPreview />}
-      <Div marginTop="xxlarge">
-        <BillingPricingCards />
-      </Div>
-      <Div
-        marginTop="xxlarge"
-        marginBottom="large"
-      >
-        <BillingPricingTable />
-      </Div>
-    </>
+      <BillingPricingCards
+        onUpgrade={() => setUpgradeToProfessionalModalOpen(true)}
+        onCancel={() => setDowngradeModalOpen(true)}
+      />
+      <BillingPricingTable
+        onUpgrade={() => setUpgradeToProfessionalModalOpen(true)}
+        onCancel={() => setDowngradeModalOpen(true)}
+      />
+      {/* Modals */}
+      <BillingUpgradeToProfessionalModal
+        open={upgradeToProfessionalModalOpen}
+        onClose={() => setUpgradeToProfessionalModalOpen(false)}
+      />
+      <BillingDowngradeModal
+        open={downgradeModalOpen}
+        onClose={() => setDowngradeModalOpen(false)}
+      />
+    </Flex>
   )
 }
 
-export default BillingManagePlan
+export function ProPlanCTA({
+  onUpgrade,
+  onCancel,
+}: {
+  onUpgrade: () => void
+  onCancel: () => void
+}) {
+  const { isProPlan, isEnterprisePlan } = useContext(SubscriptionContext)
+
+  return isProPlan ? (
+    <ActionBtnSC
+      secondary
+      width="100%"
+      onClick={onCancel}
+    >
+      Cancel plan
+    </ActionBtnSC>
+  ) : isEnterprisePlan ? (
+    <ActionBtnSC
+      primary
+      disabled
+      width="100%"
+    >
+      You have an Enterprise plan
+    </ActionBtnSC>
+  ) : (
+    <ActionBtnSC
+      primary
+      width="100%"
+      onClick={onUpgrade}
+    >
+      Upgrade
+    </ActionBtnSC>
+  )
+}
+
+export function EnterprisePlanCTA() {
+  const { isProPlan } = useContext(SubscriptionContext)
+
+  return isProPlan ? <ContactUs /> : <ContactUs floating />
+}
+
+const ActionBtnSC = styled(Button)({
+  width: '100%',
+})

www/src/components/account/billing/BillingPricingCard.tsx

@@ -67,7 +67,7 @@ function BillingPricingCard({
       </Flex>
       <Div flexGrow={1} />
       <Flex
-        marginTop="large"
+        marginTop="xxlarge"
         align="center"
         justify="center"
       >