From eef97881cea05a5ec71044ee05a73cd400f56402 Mon Sep 17 00:00:00 2001
From: Sebastian Florek <sebastian@plural.sh>
Date: Mon, 13 Nov 2023 17:51:07 +0100
Subject: [PATCH] feat: add cd onboarding path (#1269)

Co-authored-by: Klink <85062+dogmar@users.noreply.github.com>
---
 .../shell/onboarding/Onboarding.tsx           |  20 ++-
 .../shell/onboarding/OnboardingCardButton.tsx |   1 +
 .../shell/onboarding/OnboardingFlow.tsx       |   7 +-
 .../shell/onboarding/OnboardingHeader.tsx     |   7 +-
 .../shell/onboarding/context/hooks.ts         |  35 ++++--
 .../shell/onboarding/context/onboarding.ts    |   5 +
 .../shell/onboarding/context/types.ts         |   8 ++
 .../onboarding/sections/cloud/CloudOption.tsx |   6 +-
 .../sections/cloud/ProviderSelection.tsx      |  55 +++++----
 .../sections/overview/OverviewStep.tsx        |  77 ++++++++----
 .../sections/welcome/PathOption.tsx           |  50 ++++++++
 .../sections/welcome/WelcomeStep.tsx          | 114 ++++++++++++++++++
 12 files changed, 316 insertions(+), 69 deletions(-)
 create mode 100644 www/src/components/shell/onboarding/sections/welcome/PathOption.tsx
 create mode 100644 www/src/components/shell/onboarding/sections/welcome/WelcomeStep.tsx

diff --git a/www/src/components/shell/onboarding/Onboarding.tsx b/www/src/components/shell/onboarding/Onboarding.tsx
index 47cbe5e9a..810f243da 100644
--- a/www/src/components/shell/onboarding/Onboarding.tsx
+++ b/www/src/components/shell/onboarding/Onboarding.tsx
@@ -17,6 +17,7 @@ import { ContextProps, OnboardingContext } from './context/onboarding'
 import {
   CloudProps,
   CreateCloudShellSectionState,
+  OnboardingPath,
   SCMProps,
   Section,
   SectionKey,
@@ -112,13 +113,18 @@ interface OnboardingProps {
 function OnboardingWithContext({ ...props }: OnboardingProps): ReactElement {
   const { restoredContext, reset } = useContextStorage()
 
-  const [scm, setSCM] = useState<SCMProps>(restoredContext?.scm ?? {})
+  const [scm, setSCM] = useState<SCMProps>(
+    restoredContext?.scm ?? ({} as SCMProps)
+  )
   const [valid, setValid] = useState<boolean>(restoredContext?.valid ?? true)
-  const [cloud, setCloud] = useState<CloudProps>(restoredContext?.cloud ?? {})
-  const [sections, setSections] = useState<Sections>(defaultSections())
-  const [section, setSection] = useState<Section>(
-    sections[SectionKey.ONBOARDING_OVERVIEW]!
+  const [cloud, setCloud] = useState<CloudProps>(
+    restoredContext?.cloud ?? ({} as CloudProps)
   )
+  const [path, setPath] = useState<OnboardingPath>(
+    restoredContext?.path ?? OnboardingPath.None
+  )
+  const [sections, setSections] = useState<Sections>(defaultSections())
+  const [section, setSection] = useState<Section>(sections[SectionKey.WELCOME]!)
   const [workspace, setWorkspace] = useState<WorkspaceProps>(
     restoredContext?.workspace ?? {}
   )
@@ -146,8 +152,10 @@ function OnboardingWithContext({ ...props }: OnboardingProps): ReactElement {
       workspace,
       setWorkspace,
       impersonation,
+      path,
+      setPath,
     }),
-    [scm, cloud, valid, sections, section, workspace, impersonation]
+    [scm, cloud, valid, sections, section, workspace, impersonation, path]
   )
 
   return (
diff --git a/www/src/components/shell/onboarding/OnboardingCardButton.tsx b/www/src/components/shell/onboarding/OnboardingCardButton.tsx
index 91c0697bb..5bf3f8100 100644
--- a/www/src/components/shell/onboarding/OnboardingCardButton.tsx
+++ b/www/src/components/shell/onboarding/OnboardingCardButton.tsx
@@ -33,6 +33,7 @@ function OnboardingCardButton({ selected = false, children, ...props }: any) {
       backgroundColor="fill-two"
       border="1px solid border-fill-two"
       borderColor={selected ? 'action-link-inline' : 'border-fill-two'}
+      width="100%"
       _hover={{
         backgroundColor: 'fill-two-hover',
         borderColor: selected ? 'action-link-inline' : 'border-fill-two',
diff --git a/www/src/components/shell/onboarding/OnboardingFlow.tsx b/www/src/components/shell/onboarding/OnboardingFlow.tsx
index 3a68ab10d..63937fc63 100644
--- a/www/src/components/shell/onboarding/OnboardingFlow.tsx
+++ b/www/src/components/shell/onboarding/OnboardingFlow.tsx
@@ -16,6 +16,7 @@ import { CreateCloudShellSectionState, SectionKey } from './context/types'
 import CreateShellStep from './sections/shell/CreateShellStep'
 import OverviewStep from './sections/overview/OverviewStep'
 import OnboardingTips from './OnboardingTips'
+import WelcomeStep from './sections/welcome/WelcomeStep'
 
 function OnboardingFlow({ onNext, onBack }) {
   const token = useToken() || ''
@@ -48,8 +49,12 @@ function OnboardingFlow({ onNext, onBack }) {
         title={isCreating ? '' : section.title}
         mode={isCreating ? 'Compact' : 'Default'}
       >
+        {section?.key === SectionKey.WELCOME && <WelcomeStep onNext={onNext} />}
         {section?.key === SectionKey.ONBOARDING_OVERVIEW && (
-          <OverviewStep onNext={onNext} />
+          <OverviewStep
+            onBack={onBack}
+            onNext={onNext}
+          />
         )}
         {section?.key === SectionKey.CONFIGURE_CLOUD && (
           <CloudStep
diff --git a/www/src/components/shell/onboarding/OnboardingHeader.tsx b/www/src/components/shell/onboarding/OnboardingHeader.tsx
index 2c3beb7a0..431feaf1b 100644
--- a/www/src/components/shell/onboarding/OnboardingHeader.tsx
+++ b/www/src/components/shell/onboarding/OnboardingHeader.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from 'styled-components'
 import { Dispatch, useState } from 'react'
 import {
   Button,
@@ -73,7 +72,6 @@ function OnboardingHeader({
   onRestart,
   mode = 'wizard',
 }: OnboardingHeaderProps) {
-  const theme = useTheme()
   const [open, setOpen] = useState(false)
   const { section } = useSection()
 
@@ -81,8 +79,9 @@ function OnboardingHeader({
     <Sidebar
       variant="app"
       layout="horizontal"
-      background={theme.colors['fill-one']}
-      maxHeight={56}
+      css={{
+        maxHeight: 56,
+      }}
     >
       <SidebarSection
         grow={1}
diff --git a/www/src/components/shell/onboarding/context/hooks.ts b/www/src/components/shell/onboarding/context/hooks.ts
index a58c24693..09f9860c0 100644
--- a/www/src/components/shell/onboarding/context/hooks.ts
+++ b/www/src/components/shell/onboarding/context/hooks.ts
@@ -1,5 +1,6 @@
 import { Dispatch, useCallback, useContext, useEffect, useMemo } from 'react'
 import {
+  AppsIcon,
   ChecklistIcon,
   CloudIcon,
   ListIcon,
@@ -26,26 +27,32 @@ import {
 
 const defaultSections = (): Sections => {
   const sections: Sections = {
-    [SectionKey.ONBOARDING_OVERVIEW]: {
+    [SectionKey.WELCOME]: {
       index: 0,
+      key: SectionKey.WELCOME,
+      title: 'Welcome to Plural!',
+      IconComponent: AppsIcon,
+    },
+    [SectionKey.ONBOARDING_OVERVIEW]: {
+      index: 1,
       key: SectionKey.ONBOARDING_OVERVIEW,
       title: 'Onboarding overview',
       IconComponent: ChecklistIcon,
     },
     [SectionKey.CONFIGURE_CLOUD]: {
-      index: 1,
+      index: 2,
       key: SectionKey.CONFIGURE_CLOUD,
       title: 'Configure credentials',
       IconComponent: CloudIcon,
     },
     [SectionKey.CONFIGURE_WORKSPACE]: {
-      index: 2,
+      index: 3,
       key: SectionKey.CONFIGURE_WORKSPACE,
       title: 'Configure workspace',
       IconComponent: WorkspaceIcon,
     },
     [SectionKey.CREATE_CLOUD_SHELL]: {
-      index: 3,
+      index: 4,
       key: SectionKey.CREATE_CLOUD_SHELL,
       title: 'Create cloud shell',
       IconComponent: TerminalIcon,
@@ -53,8 +60,11 @@ const defaultSections = (): Sections => {
   }
 
   // build sections flow
+  sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
+
   sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
     sections[SectionKey.CONFIGURE_CLOUD]
+  sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
 
   sections[SectionKey.CONFIGURE_CLOUD]!.prev =
     sections[SectionKey.ONBOARDING_OVERVIEW]
@@ -74,26 +84,32 @@ const defaultSections = (): Sections => {
 
 const localCLISections = (): Sections => {
   const sections: Sections = {
-    [SectionKey.ONBOARDING_OVERVIEW]: {
+    [SectionKey.WELCOME]: {
       index: 0,
+      key: SectionKey.WELCOME,
+      title: 'Welcome to Plural!',
+      IconComponent: ChecklistIcon,
+    },
+    [SectionKey.ONBOARDING_OVERVIEW]: {
+      index: 1,
       key: SectionKey.ONBOARDING_OVERVIEW,
       title: 'Onboarding overview',
       IconComponent: ChecklistIcon,
     },
     [SectionKey.CONFIGURE_CLOUD]: {
-      index: 1,
+      index: 2,
       key: SectionKey.CONFIGURE_CLOUD,
       title: 'Configure credentials',
       IconComponent: CloudIcon,
     },
     [SectionKey.INSTALL_CLI]: {
-      index: 2,
+      index: 3,
       key: SectionKey.INSTALL_CLI,
       title: 'Install Plural CLI',
       IconComponent: TerminalIcon,
     },
     [SectionKey.COMPLETE_SETUP]: {
-      index: 3,
+      index: 4,
       key: SectionKey.COMPLETE_SETUP,
       title: 'Complete Setup',
       IconComponent: ListIcon,
@@ -101,8 +117,11 @@ const localCLISections = (): Sections => {
   }
 
   // build sections flow
+  sections[SectionKey.WELCOME]!.next = sections[SectionKey.ONBOARDING_OVERVIEW]
+
   sections[SectionKey.ONBOARDING_OVERVIEW]!.next =
     sections[SectionKey.CONFIGURE_CLOUD]
+  sections[SectionKey.ONBOARDING_OVERVIEW]!.prev = sections[SectionKey.WELCOME]
 
   sections[SectionKey.CONFIGURE_CLOUD]!.prev =
     sections[SectionKey.ONBOARDING_OVERVIEW]
diff --git a/www/src/components/shell/onboarding/context/onboarding.ts b/www/src/components/shell/onboarding/context/onboarding.ts
index ab234f651..86bc486b6 100644
--- a/www/src/components/shell/onboarding/context/onboarding.ts
+++ b/www/src/components/shell/onboarding/context/onboarding.ts
@@ -3,6 +3,7 @@ import { Dispatch, SetStateAction, createContext } from 'react'
 import {
   CloudProps,
   Impersonation,
+  OnboardingPath,
   SCMProps,
   Section,
   Sections,
@@ -22,6 +23,8 @@ interface ContextProps {
   setSections: Dispatch<SetStateAction<Sections>>
   section: Section
   setSection: Dispatch<SetStateAction<Section>>
+  path: OnboardingPath
+  setPath: Dispatch<SetStateAction<OnboardingPath>>
 }
 
 interface SerializableContextProps {
@@ -32,6 +35,7 @@ interface SerializableContextProps {
   section: Section
   sections?: Sections
   impersonation?: Impersonation
+  path?: OnboardingPath
 }
 
 const toSerializableSection = (section: Section): Partial<Section> => ({
@@ -54,6 +58,7 @@ const toSerializableContext = (
   },
   section: toSerializableSection(context.section) as Section,
   impersonation,
+  path: context?.path,
 })
 
 const OnboardingContext = createContext<ContextProps>({} as ContextProps)
diff --git a/www/src/components/shell/onboarding/context/types.ts b/www/src/components/shell/onboarding/context/types.ts
index 3126ef1eb..c5b9c40aa 100644
--- a/www/src/components/shell/onboarding/context/types.ts
+++ b/www/src/components/shell/onboarding/context/types.ts
@@ -28,6 +28,7 @@ enum CloudProviderToProvider {
 }
 
 enum SectionKey {
+  WELCOME = 'WELCOME',
   ONBOARDING_OVERVIEW = 'ONBOARDING_OVERVIEW',
   CONFIGURE_CLOUD = 'CONFIGURE_CLOUD',
   CONFIGURE_WORKSPACE = 'CONFIGURE_WORKSPACE',
@@ -133,6 +134,12 @@ interface Impersonation {
   user?: User
 }
 
+enum OnboardingPath {
+  None,
+  CD,
+  OSS,
+}
+
 export type {
   Sections,
   Section,
@@ -155,4 +162,5 @@ export {
   CloudProviderToProvider,
   CreateCloudShellSectionState,
   ConfigureCloudSectionState,
+  OnboardingPath,
 }
diff --git a/www/src/components/shell/onboarding/sections/cloud/CloudOption.tsx b/www/src/components/shell/onboarding/sections/cloud/CloudOption.tsx
index ba5b391fb..370396b78 100644
--- a/www/src/components/shell/onboarding/sections/cloud/CloudOption.tsx
+++ b/www/src/components/shell/onboarding/sections/cloud/CloudOption.tsx
@@ -22,7 +22,11 @@ function CloudOption({
         />
       }
     >
-      <div>
+      <div
+        css={{
+          width: '100%',
+        }}
+      >
         <OnboardingCardButton
           position="relative"
           selected={selected}
diff --git a/www/src/components/shell/onboarding/sections/cloud/ProviderSelection.tsx b/www/src/components/shell/onboarding/sections/cloud/ProviderSelection.tsx
index 69f6d0de5..0d6e98c94 100644
--- a/www/src/components/shell/onboarding/sections/cloud/ProviderSelection.tsx
+++ b/www/src/components/shell/onboarding/sections/cloud/ProviderSelection.tsx
@@ -13,16 +13,23 @@ import { ImpersonationContext } from '../../../context/impersonation'
 import GCPLogoIcon from '../../assets/GCPLogoIcon.svg'
 
 import { OnboardingContext } from '../../context/onboarding'
-import { CloudType } from '../../context/types'
+import { CloudType, OnboardingPath } from '../../context/types'
 
 import { CloudOption } from './CloudOption'
 
 function ProviderSelection() {
-  const { cloud, setCloud, setValid } = useContext(OnboardingContext)
+  const {
+    cloud,
+    setCloud,
+    setValid,
+    path: onboardingPath,
+  } = useContext(OnboardingContext)
   const {
     user: { demoed },
   } = useContext(ImpersonationContext)
-  const [path, setPath] = useState(cloud?.type)
+  const [path, setPath] = useState(
+    onboardingPath === OnboardingPath.CD ? CloudType.Cloud : cloud?.type
+  )
   const isValid = useMemo(() => path !== undefined, [path])
 
   useEffect(() => setCloud((c) => ({ ...c, type: path })), [path, setCloud])
@@ -49,27 +56,29 @@ function ProviderSelection() {
           header="Use your own cloud"
           description="Connect your own cloud credentials and spin up your own cluster."
         />
-        <CloudOption
-          data-phid="select-cloud-demo"
-          selected={path === CloudType.Demo}
-          onClick={() => setPath(CloudType.Demo)}
-          disabled={demoed}
-          tooltip={
-            demoed
-              ? 'You have reached the maximum number of demo environment usage.'
-              : undefined
-          }
-          icon={
-            <img
-              src={GCPLogoIcon}
-              width={40}
-            />
-          }
-          header="Try free demo"
-          description="A six-hour GCP sandbox for you to test-drive Plural."
-        />
+        {onboardingPath === OnboardingPath.OSS && (
+          <CloudOption
+            data-phid="select-cloud-demo"
+            selected={path === CloudType.Demo}
+            onClick={() => setPath(CloudType.Demo)}
+            disabled={demoed}
+            tooltip={
+              demoed
+                ? 'You have reached the maximum number of demo environment usage.'
+                : undefined
+            }
+            icon={
+              <img
+                src={GCPLogoIcon}
+                width={40}
+              />
+            }
+            header="Try free demo"
+            description="A six-hour GCP sandbox for you to test-drive Plural."
+          />
+        )}
       </Flex>
-      <PricingCalculator />
+      {onboardingPath === OnboardingPath.OSS && <PricingCalculator />}
       {(path === CloudType.Cloud || path === CloudType.Local) && (
         <Flex
           direction="column"
diff --git a/www/src/components/shell/onboarding/sections/overview/OverviewStep.tsx b/www/src/components/shell/onboarding/sections/overview/OverviewStep.tsx
index 190c44caa..728d24803 100644
--- a/www/src/components/shell/onboarding/sections/overview/OverviewStep.tsx
+++ b/www/src/components/shell/onboarding/sections/overview/OverviewStep.tsx
@@ -2,14 +2,16 @@ import { A, Flex, Span } from 'honorable'
 import { Button } from '@pluralsh/design-system'
 import { useNavigate } from 'react-router-dom'
 import { PopupModal } from 'react-calendly'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 
 import useOnboarded from '../../../hooks/useOnboarded'
-import CalendarIcon from '../../assets/CalendarIcon.svg'
+import { OnboardingContext } from '../../context/onboarding'
+import { OnboardingPath } from '../../context/types'
 
-function OverviewStep({ onNext }) {
+function OverviewStep({ onBack, onNext }) {
   const navigate = useNavigate()
   const { fresh: isOnboarding, mutation } = useOnboarded()
+  const { path } = useContext(OnboardingContext)
 
   const [calendlyOpen, setCalendlyOpen] = useState(false)
 
@@ -22,17 +24,27 @@ function OverviewStep({ onNext }) {
         direction="column"
         gap="large"
       >
-        <Span body2>
-          Deploy your cluster and applications with Plural in about 30 minutes,
-          then access it via Plural Console.&nbsp;
-          <A
-            inline
-            href="https://www.plural.sh/demo-login"
-            target="_blank"
-          >
-            View a demo environment of our Console.
-          </A>
-        </Span>
+        {path === OnboardingPath.OSS && (
+          <Span body2>
+            Deploy your cluster and applications with Plural in about 30
+            minutes, then access it via Plural Console.&nbsp;
+            <A
+              inline
+              href="https://www.plural.sh/demo-login"
+              target="_blank"
+            >
+              View a demo environment of our Console.
+            </A>
+          </Span>
+        )}
+
+        {path === OnboardingPath.CD && (
+          <Span body2>
+            Deployments are managed in the Plural Console, which we’ll deploy on
+            a Management Cluster for you in your cloud environment. You can then
+            navigate to the Console to start deploying your applications.
+          </Span>
+        )}
 
         <Flex
           direction="column"
@@ -45,12 +57,27 @@ function OverviewStep({ onNext }) {
             What to expect:
           </Span>
 
-          <Span>1. Configure your cloud and git credentials.</Span>
-          <Span>2. Configure your cluster’s workspace.</Span>
-          <Span>
-            3. Create your cloud shell where you can install applications. (25
-            minutes deploy wait time)
-          </Span>
+          {path === OnboardingPath.CD && (
+            <>
+              <Span>1. Configure your cloud and Git credentials.</Span>
+              <Span>2. Configure your Management Cluster's workspace.</Span>
+              <Span>
+                3. Create your cloud shell to deploy your Plural Console. (25
+                minute deploy wait time)
+              </Span>
+            </>
+          )}
+
+          {path === OnboardingPath.OSS && (
+            <>
+              <Span>1. Configure your cloud and Git credentials.</Span>
+              <Span>2. Configure your cluster’s workspace.</Span>
+              <Span>
+                3. Create your cloud shell where you can install applications.
+                (25 minute deploy wait time)
+              </Span>
+            </>
+          )}
         </Flex>
       </Flex>
       <Flex
@@ -77,13 +104,11 @@ function OverviewStep({ onNext }) {
           justify="space-between"
         >
           <Button
-            data-phid="schedule-personalized-onboarding"
+            data-phid="back-from-onboarding-overview"
             secondary
-            backgroundColor="fill-two"
-            startIcon={<img src={CalendarIcon} />}
-            onClick={() => setCalendlyOpen(true)}
+            onClick={onBack}
           >
-            Schedule personalized onboarding
+            Back
           </Button>
           <PopupModal
             url="https://calendly.com/m_plural/30min"
@@ -95,7 +120,7 @@ function OverviewStep({ onNext }) {
             data-phid="cont-from-onboarding-overview"
             onClick={onNext}
           >
-            Get started
+            Continue
           </Button>
         </Flex>
       </Flex>
diff --git a/www/src/components/shell/onboarding/sections/welcome/PathOption.tsx b/www/src/components/shell/onboarding/sections/welcome/PathOption.tsx
new file mode 100644
index 000000000..ab66939d2
--- /dev/null
+++ b/www/src/components/shell/onboarding/sections/welcome/PathOption.tsx
@@ -0,0 +1,50 @@
+import { Div, Flex, Span } from 'honorable'
+
+import OnboardingCardButton from '../../OnboardingCardButton'
+
+function PathOption({
+  icon,
+  header,
+  description,
+  selected,
+  disabled,
+  ...props
+}: any) {
+  return (
+    <OnboardingCardButton
+      position="relative"
+      selected={selected}
+      disabled={disabled}
+      {...props}
+    >
+      <Flex
+        direction="column"
+        gap="xxsmall"
+      >
+        <Div
+          marginHorizontal="auto"
+          maxWidth={40}
+          maxHeight={40}
+          overflow="visible"
+        >
+          {icon}
+        </Div>
+        <Span
+          body1
+          bold
+          marginTop="small"
+        >
+          {header}
+        </Span>
+        <Span
+          caption
+          color={disabled ? 'text-disabled' : 'text-light'}
+        >
+          {description}
+        </Span>
+      </Flex>
+    </OnboardingCardButton>
+  )
+}
+
+export { PathOption }
diff --git a/www/src/components/shell/onboarding/sections/welcome/WelcomeStep.tsx b/www/src/components/shell/onboarding/sections/welcome/WelcomeStep.tsx
new file mode 100644
index 000000000..ba31c0f83
--- /dev/null
+++ b/www/src/components/shell/onboarding/sections/welcome/WelcomeStep.tsx
@@ -0,0 +1,114 @@
+import { Flex, Span } from 'honorable'
+import { BrowseAppsIcon, Button, CloudIcon } from '@pluralsh/design-system'
+import { useNavigate } from 'react-router-dom'
+import { PopupModal } from 'react-calendly'
+import { useContext, useState } from 'react'
+
+import useOnboarded from '../../../hooks/useOnboarded'
+import CalendarIcon from '../../assets/CalendarIcon.svg'
+
+import { OnboardingContext } from '../../context/onboarding'
+
+import { OnboardingPath } from '../../context/types'
+
+import { PathOption } from './PathOption'
+
+function WelcomeStep({ onNext }) {
+  const navigate = useNavigate()
+  const { fresh: isOnboarding, mutation } = useOnboarded()
+  const { path, setPath } = useContext(OnboardingContext)
+
+  const [calendlyOpen, setCalendlyOpen] = useState(false)
+
+  return (
+    <Flex
+      direction="column"
+      gap="xlarge"
+    >
+      <Flex
+        direction="column"
+        gap="large"
+      >
+        <Span body2>How would you like to get started today?</Span>
+
+        <Flex gap="large">
+          <PathOption
+            data-phid="deploy-own-app"
+            selected={path === OnboardingPath.CD}
+            onClick={() => setPath(OnboardingPath.CD)}
+            icon={
+              <CloudIcon
+                size={40}
+                color="text-light"
+              />
+            }
+            header="Deploy your own applications"
+            description="Use Plural Continuous Deployments to deploy applications and services from your organization."
+          />
+          <PathOption
+            data-phid="deploy-oss-app"
+            selected={path === OnboardingPath.OSS}
+            onClick={() => setPath(OnboardingPath.OSS)}
+            icon={
+              <BrowseAppsIcon
+                size={32}
+                color="text-light"
+              />
+            }
+            header="Deploy OSS applications"
+            description="Explore our marketplace for open-source applications to deploy."
+          />
+        </Flex>
+      </Flex>
+      <Flex
+        gap="medium"
+        justify={isOnboarding ? 'space-between' : 'flex-end'}
+        borderTop="1px solid border"
+        paddingTop="large"
+      >
+        {isOnboarding && (
+          <Button
+            data-phid="skip-onboarding"
+            secondary
+            onClick={() => {
+              mutation()
+              navigate('/overview/clusters')
+            }}
+          >
+            Skip onboarding
+          </Button>
+        )}
+        <Flex
+          grow={isOnboarding ? 0 : 1}
+          gap="medium"
+          justify="space-between"
+        >
+          <Button
+            data-phid="schedule-personalized-onboarding"
+            secondary
+            backgroundColor="fill-two"
+            startIcon={<img src={CalendarIcon} />}
+            onClick={() => setCalendlyOpen(true)}
+          >
+            Schedule personalized onboarding
+          </Button>
+          <PopupModal
+            url="https://calendly.com/m_plural/30min"
+            rootElement={document.getElementById('root')!}
+            open={calendlyOpen}
+            onModalClose={() => setCalendlyOpen(false)}
+          />
+          <Button
+            data-phid="cont-from-onboarding-overview"
+            disabled={path === OnboardingPath.None}
+            onClick={onNext}
+          >
+            Get started
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default WelcomeStep