feat(ui/cloud): add cloud checkout button (#14259)

ui/src/cloud/components/AssetLimitAlert.tsx

@@ -10,6 +10,7 @@ import {
   IconFont,
   ComponentColor,
   Alert,
+  JustifyContent,
 } from '@influxdata/clockface'
 
 // Constants
@@ -17,6 +18,7 @@ import {CLOUD} from 'src/shared/constants'
 
 // Types
 import {LimitStatus} from 'src/cloud/actions/limits'
+import CheckoutButton from 'src/cloud/components/CheckoutButton'
 
 interface Props {
   resourceName: string
@@ -34,13 +36,19 @@ export default class AssetLimitAlert extends PureComponent<Props> {
           margin={ComponentSize.Large}
         >
           <Alert icon={IconFont.Cloud} color={ComponentColor.Primary}>
-            <p>
-              {`Hey there, looks like you have reached the maximum number of
+            <ComponentSpacer
+              alignItems={AlignItems.Center}
+              direction={FlexDirection.Row}
+              justifyContent={JustifyContent.SpaceBetween}
+              margin={ComponentSize.Medium}
+            >
+              <div>
+                {`Hey there, looks like you have reached the maximum number of
               ${resourceName} you can create as part of your plan.`}
-              <br />
-              Want to remove these restrictions? Upgrade any time by sending an
-              email to <a href="#">cloudbeta@influxdata.com</a>
-            </p>
+                <br />
+              </div>
+              <CheckoutButton />
+            </ComponentSpacer>
           </Alert>
           {this.props.children}
         </ComponentSpacer>

ui/src/cloud/components/CheckoutButton.tsx

@@ -0,0 +1,40 @@
+import React, {FunctionComponent} from 'react'
+
+// Components
+import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import {
+  Button,
+  ComponentColor,
+  ComponentSize,
+  ComponentSpacer,
+  FlexDirection,
+  JustifyContent,
+} from '@influxdata/clockface'
+
+// Constants
+import {CLOUD_CHECKOUT_PATH, CLOUD_URL} from 'src/shared/constants'
+
+const CheckoutButton: FunctionComponent<{}> = () => {
+  const checkoutURL = `${CLOUD_URL}${CLOUD_CHECKOUT_PATH}`
+  const onClick = () => (window.location.href = checkoutURL)
+
+  return (
+    <FeatureFlag name="cloudBilling">
+      <ComponentSpacer
+        direction={FlexDirection.Row}
+        justifyContent={JustifyContent.SpaceAround}
+        margin={ComponentSize.Small}
+      >
+        <div>Want to remove these limits?</div>
+        <Button
+          color={ComponentColor.Primary}
+          onClick={onClick}
+          text="Upgrade Now"
+          size={ComponentSize.Small}
+        />
+      </ComponentSpacer>
+    </FeatureFlag>
+  )
+}
+
+export default CheckoutButton

ui/src/shared/constants/index.ts

@@ -49,6 +49,8 @@ export const CLOUD_SIGNIN_PATHNAME = '/api/v2/signin'
 export const CLOUD_SIGNOUT_URL = process.env.CLOUD_LOGOUT_URL
 export const CLOUD_BILLING_VISIBLE =
   CLOUD && process.env.CLOUD_BILLING_VISIBLE === 'true'
+export const CLOUD_URL = process.env.CLOUD_URL
+export const CLOUD_CHECKOUT_PATH = process.env.CLOUD_CHECKOUT_PATH
 
 export const VIS_THEME: Partial<Config> = {
   axisColor: '#31313d',