feat: ubb beta welcome (#8269)

* feat: ubb beta welcome

* feat: Refactor import statements and add 'Learn more' button with link and dismiss functionality

* feat: Format code, add useDismissible hook and fix conditional rendering in RecentHeader component

* feat: Format code, fix import path and create UBBBetaWelcomeBanner component

* feat: Fix issue with RecentHeader component not rendering the TopBanner., add TopBanner component to RecentHeader. and format code in RecentHeader component.

* Update UBBBetaWelcomeBanner.tsx

* Update useWorkspaceFeatureFlags.ts

Author: danilowoz

packages/app/src/app/components/StripeMessages/SandboxLimitation.tsx

@@ -4,12 +4,15 @@ import { MessageStripe } from '@codesandbox/components';
 import { useAppState } from 'app/overmind';
 import { useWorkspaceLimits } from 'app/hooks/useWorkspaceLimits';
 import { useScopedPersistedState } from 'app/hooks/usePersistedState';
+import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags';
 
 const SANDBOX_INCREASE_LIMIT_REQUEST_FORM =
   'https://webforms.pipedrive.com/f/cB3DfL4Vg41gVPKuA6MLRpr8YI6L8KCzxiulfpjgnBdFBxa4xkJpqMSE6g8yHTjjtF';
-const SANDBOX_LIMIT_ANNOUNCEMENT = 'https://www.codesandbox.community/c/api-billing-updates/upcoming-pricing-billing-changes';
+const SANDBOX_LIMIT_ANNOUNCEMENT =
+  'https://www.codesandbox.community/c/api-billing-updates/upcoming-pricing-billing-changes';
 
 export const SandboxLimitation: React.FC = () => {
+  const { ubbBeta } = useWorkspaceFeatureFlags();
   const { activeTeam } = useAppState();
   const { hasOver20Sandboxes, hasOver200Sandboxes } = useWorkspaceLimits();
   const [
@@ -21,6 +24,10 @@ export const SandboxLimitation: React.FC = () => {
     setSandboxBannerDismissed(true);
   };
 
+  if (ubbBeta) {
+    return null;
+  }
+
   const buildCopy = () => {
     if (hasOver200Sandboxes) {
       return 'Starting on Jan 30th, your Free plan will be limited to 20 sandboxes. Request an increase to avoid disruption to your service.';

packages/app/src/app/components/UBBBetaWelcomeBanner.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import { dashboard as dashboardURLs } from '@codesandbox/common/lib/utils/url-generator';
+import { Banner, Button, Stack, Text, Icon } from '@codesandbox/components';
+
+import { useDismissible } from 'app/hooks';
+import { Link } from 'react-router-dom';
+import { SUBSCRIPTION_DOCS_URLS } from 'app/constants';
+import { useURLSearchParams } from 'app/hooks/useURLSearchParams';
+
+export const UBBBetaWelcomeBanner: React.FC = () => {
+  const [isBannerDismissed, dismissBanner] = useDismissible(
+    'DASHBOARD_UBB_BETA_WELCOME'
+  );
+
+  if (isBannerDismissed) {
+    return null;
+  }
+
+  return (
+    <Banner onDismiss={dismissBanner}>
+      <Stack gap={2} direction="vertical">
+        <Text color="#EDFFA5" size={6} weight="500">
+          Welcome to the usage-based billing beta
+        </Text>
+        <Text>
+          This workspace has been added to an early beta experience. You can
+          now:
+        </Text>
+      </Stack>
+
+      <StyledFeatures />
+
+      <Stack
+        align="center"
+        gap={2}
+        css={{
+          marginTop: '24px',
+        }}
+      >
+        <Button
+          target="_blank"
+          autoWidth
+          onClick={() => {
+            window.open(SUBSCRIPTION_DOCS_URLS.teams.non_trial);
+            dismissBanner();
+          }}
+        >
+          Learn more
+        </Button>
+        <Button autoWidth variant="ghost" onClick={dismissBanner}>
+          Dismiss
+        </Button>
+      </Stack>
+    </Banner>
+  );
+};
+
+const StyledFeatures: React.FC = () => {
+  const { getQueryParam } = useURLSearchParams();
+  const workspaceId = getQueryParam('workspace');
+
+  return (
+    <Stack
+      gap={6}
+      as="ul"
+      css={{
+        listStyle: 'none',
+        padding: '12px 0 24px 0',
+        maxWidth: 724,
+      }}
+    >
+      <Stack gap={3} as="li">
+        <Icon css={{ flexShrink: 0, color: '#C2C2C2' }} name="lock" />
+        <Text css={{ color: '#999' }} size={3}>
+          Create private sandboxes and devboxes for free.
+        </Text>
+      </Stack>
+
+      <Stack gap={3} as="li">
+        <Icon css={{ flexShrink: 0, color: '#C2C2C2' }} name="server" />
+        <Text css={{ color: '#999' }} size={3}>
+          Customize Virtual Machine specs through the new{' '}
+          <Link to={dashboardURLs.portalRelativePath(workspaceId)}>
+            customer portal.
+          </Link>
+        </Text>
+      </Stack>
+
+      <Stack gap={3} as="li">
+        <Icon css={{ flexShrink: 0, color: '#C2C2C2' }} name="sandbox" />
+        <Text css={{ color: '#999' }} size={3}>
+          Run devboxes and repositories on credits.
+        </Text>
+      </Stack>
+    </Stack>
+  );
+};

packages/app/src/app/pages/Dashboard/Content/routes/Recent/RecentHeader.tsx

@@ -5,7 +5,9 @@ import {
   IMPORT_BUTTON_DESCRIPTION,
   SANDBOX_BUTTON_DESCRIPTION,
 } from 'app/components/Create/utils/constants';
+import { UBBBetaWelcomeBanner } from 'app/components/UBBBetaWelcomeBanner';
 import { LargeCTAButton } from 'app/components/dashboard/LargeCTAButton';
+import { useDismissible } from 'app/hooks';
 import { useWorkspaceFeatureFlags } from 'app/hooks/useWorkspaceFeatureFlags';
 import { useActions } from 'app/overmind';
 import { EmptyPage } from 'app/pages/Dashboard/Components/EmptyPage';
@@ -17,12 +19,10 @@ import React from 'react';
 
 export const RecentHeader: React.FC<{ title: string }> = ({ title }) => {
   const actions = useActions();
-  const { ubbBeta } = useWorkspaceFeatureFlags();
 
   return (
     <Stack direction="vertical" gap={8}>
-      {ubbBeta ? <UbbUpgradeBanner /> : <UpgradeBanner />}
-
+      <TopBanner />
       <Text
         as="h1"
         css={{
@@ -95,3 +95,18 @@ export const RecentHeader: React.FC<{ title: string }> = ({ title }) => {
     </Stack>
   );
 };
+
+const TopBanner = () => {
+  const { ubbBeta } = useWorkspaceFeatureFlags();
+  const [welcomeBannerDismissed] = useDismissible('DASHBOARD_UBB_BETA_WELCOME');
+
+  if (ubbBeta) {
+    if (welcomeBannerDismissed) {
+      return <UbbUpgradeBanner />;
+    }
+
+    return <UBBBetaWelcomeBanner />;
+  }
+
+  return <UpgradeBanner />;
+};