Feat/fixSLStyling (#1440)

* fix(sl constants): ensure route is intercepted

* feat(sl): add mocks for sl

* feat(sl): checklist copy changes + copied tooltip

* feat(sl): change API so that step no. can increase

* feat(sl): add storybooks

* fix(cl): fix visual bug for no of tasks

* fix(sl checklist): fix colors

src/contexts/SiteLaunchContext.tsx

@@ -9,6 +9,7 @@ import { useGetSiteLaunchStatus } from "hooks/siteDashboardHooks"
 import { launchSite } from "services/SiteLaunchService"
 
 import {
+  NEW_DOMAIN_SITE_LAUNCH_TASKS_LENGTH,
   SiteLaunchBEStatus,
   SiteLaunchFEStatus,
   SiteLaunchFEStatusType,
@@ -17,6 +18,7 @@ import {
   SiteLaunchTaskTypeIndex,
   SITE_LAUNCH_PAGES,
   SITE_LAUNCH_TASKS,
+  SITE_LAUNCH_TASKS_LENGTH,
 } from "types/siteLaunch"
 
 interface SiteLaunchContextProps {
@@ -29,6 +31,8 @@ interface SiteLaunchContextProps {
   increasePageNumber: () => void
   decreasePageNumber: () => void
   pageNumber: SiteLaunchPageIndex
+  handleIncrementStepNumber: () => void
+  handleDecrementStepNumber: () => void
 }
 
 interface SiteLaunchProviderProps {
@@ -79,7 +83,6 @@ export const SiteLaunchProvider = ({
   })
 
   const { data: siteLaunchDto } = useGetSiteLaunchStatus(siteName)
-
   const queryClient = useQueryClient()
   const refetchSiteLaunchStatus = () => {
     /**
@@ -109,6 +112,29 @@ export const SiteLaunchProvider = ({
     setPageNumber((pageNumber - 1) as SiteLaunchPageIndex)
   }
 
+  const handleIncrementStepNumber = () => {
+    if (
+      siteLaunchStatusProps &&
+      siteLaunchStatusProps.stepNumber < SITE_LAUNCH_TASKS_LENGTH
+    ) {
+      setSiteLaunchStatusProps({
+        ...siteLaunchStatusProps,
+        stepNumber: (siteLaunchStatusProps.stepNumber +
+          1) as SiteLaunchTaskTypeIndex, // safe to assert since we do a check
+        siteLaunchStatus: SiteLaunchFEStatus.ChecklistTasksPending,
+      })
+    }
+  }
+  const handleDecrementStepNumber = () => {
+    if (siteLaunchStatusProps && siteLaunchStatusProps.stepNumber > 0) {
+      setSiteLaunchStatusProps({
+        ...siteLaunchStatusProps,
+        stepNumber: (siteLaunchStatusProps?.stepNumber -
+          1) as SiteLaunchTaskTypeIndex, // safe to assert since we do a check
+      })
+    }
+  }
+
   const generateDNSRecords = async () => {
     if (
       siteLaunchStatusProps.siteUrl &&
@@ -165,6 +191,12 @@ export const SiteLaunchProvider = ({
       !isSiteLaunchFEAndBESynced
     ) {
       setPageNumber(SITE_LAUNCH_PAGES.CHECKLIST)
+      setSiteLaunchStatusProps((prevStatusProps) => ({
+        ...prevStatusProps,
+        stepNumber: prevStatusProps.isNewDomain
+          ? NEW_DOMAIN_SITE_LAUNCH_TASKS_LENGTH
+          : SITE_LAUNCH_TASKS_LENGTH,
+      }))
     }
 
     if (
@@ -185,6 +217,8 @@ export const SiteLaunchProvider = ({
   return (
     <SiteLaunchContext.Provider
       value={{
+        handleDecrementStepNumber,
+        handleIncrementStepNumber,
         siteLaunchStatusProps,
         setSiteLaunchStatusProps,
         generateDNSRecords,

src/layouts/SiteLaunchPad/SiteLaunchPad.stories.tsx

@@ -7,7 +7,9 @@ import { SiteLaunchProvider } from "contexts/SiteLaunchContext"
 import {
   MOCK_FAILURE_LAUNCHED_SITE_LAUNCH_DTO,
   MOCK_LAUNCHING_SITE_LAUNCH_DTO,
+  MOCK_NON_WWW_LAUNCHING_SITE_LAUNCH_DTO,
   MOCK_SUCCESS_LAUNCHED_SITE_LAUNCH_DTO,
+  MOCK_WWW_LAUNCHING_SITE_LAUNCH_DTO,
 } from "mocks/constants"
 import { buildSiteLaunchDto } from "mocks/utils"
 import { SiteLaunchBEStatus, SiteLaunchFEStatus } from "types/siteLaunch"
@@ -48,12 +50,6 @@ const Template: StoryFn<typeof SiteLaunchPad> = (args) => (
 // NOTE: This is just a mock, so no need actual functions
 const siteLaunchPadArgs = {
   pageNumber: 1,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setPageNumber: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  handleDecrementStepNumber: () => {},
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  handleIncrementStepNumber: () => {},
 }
 
 export const Default = Template.bind({})
@@ -87,6 +83,20 @@ siteLaunchChecklistOldDomain.args = {
   pageNumber: 4,
 }
 
+siteLaunchChecklistOldDomain.decorators = [
+  (Story) => {
+    return (
+      <SiteLaunchProvider
+        initialStepNumber={0}
+        initialSiteLaunchStatus={SiteLaunchFEStatus.ChecklistTasksPending}
+        isNewDomain={false}
+      >
+        <Story />
+      </SiteLaunchProvider>
+    )
+  },
+]
+
 export const siteLaunchChecklistNewDomain = Template.bind({})
 
 siteLaunchChecklistNewDomain.args = {
@@ -98,7 +108,7 @@ siteLaunchChecklistNewDomain.decorators = [
   (Story) => {
     return (
       <SiteLaunchProvider
-        initialStepNumber={1}
+        initialStepNumber={0}
         initialSiteLaunchStatus={SiteLaunchFEStatus.ChecklistTasksPending}
         isNewDomain
       >
@@ -108,6 +118,122 @@ siteLaunchChecklistNewDomain.decorators = [
   },
 ]
 
+export const NewDomainNonWwwDnsRecords = Template.bind({})
+
+NewDomainNonWwwDnsRecords.args = {
+  ...siteLaunchPadArgs,
+  pageNumber: 4,
+}
+NewDomainNonWwwDnsRecords.parameters = {
+  msw: {
+    handlers: {
+      siteLaunchStatusProps: buildSiteLaunchDto(
+        MOCK_NON_WWW_LAUNCHING_SITE_LAUNCH_DTO
+      ),
+    },
+  },
+}
+
+NewDomainNonWwwDnsRecords.decorators = [
+  (Story) => {
+    return (
+      <SiteLaunchProvider
+        initialSiteLaunchStatus={SiteLaunchFEStatus.Loading}
+        isNewDomain
+      >
+        <Story />
+      </SiteLaunchProvider>
+    )
+  },
+]
+
+export const NewDomainWwwDnsRecords = Template.bind({})
+
+NewDomainWwwDnsRecords.args = {
+  ...siteLaunchPadArgs,
+  pageNumber: 4,
+}
+NewDomainWwwDnsRecords.parameters = {
+  msw: {
+    handlers: {
+      siteLaunchStatusProps: buildSiteLaunchDto(
+        MOCK_WWW_LAUNCHING_SITE_LAUNCH_DTO
+      ),
+    },
+  },
+}
+
+NewDomainWwwDnsRecords.decorators = [
+  (Story) => {
+    return (
+      <SiteLaunchProvider
+        initialSiteLaunchStatus={SiteLaunchFEStatus.Loading}
+        isNewDomain
+      >
+        <Story />
+      </SiteLaunchProvider>
+    )
+  },
+]
+
+export const OldDomainWwwDnsRecords = Template.bind({})
+
+OldDomainWwwDnsRecords.args = {
+  ...siteLaunchPadArgs,
+  pageNumber: 4,
+}
+OldDomainWwwDnsRecords.parameters = {
+  msw: {
+    handlers: {
+      siteLaunchStatusProps: buildSiteLaunchDto(
+        MOCK_WWW_LAUNCHING_SITE_LAUNCH_DTO
+      ),
+    },
+  },
+}
+
+OldDomainWwwDnsRecords.decorators = [
+  (Story) => {
+    return (
+      <SiteLaunchProvider
+        initialSiteLaunchStatus={SiteLaunchFEStatus.Loading}
+        isNewDomain={false}
+      >
+        <Story />
+      </SiteLaunchProvider>
+    )
+  },
+]
+
+export const OldDomainNonWwwDnsRecords = Template.bind({})
+
+OldDomainNonWwwDnsRecords.args = {
+  ...siteLaunchPadArgs,
+  pageNumber: 4,
+}
+OldDomainNonWwwDnsRecords.parameters = {
+  msw: {
+    handlers: {
+      siteLaunchStatusProps: buildSiteLaunchDto(
+        MOCK_NON_WWW_LAUNCHING_SITE_LAUNCH_DTO
+      ),
+    },
+  },
+}
+
+OldDomainNonWwwDnsRecords.decorators = [
+  (Story) => {
+    return (
+      <SiteLaunchProvider
+        initialSiteLaunchStatus={SiteLaunchFEStatus.Loading}
+        isNewDomain={false}
+      >
+        <Story />
+      </SiteLaunchProvider>
+    )
+  },
+]
+
 export const siteLaunchPendingState = Template.bind({})
 
 siteLaunchPendingState.args = {

src/layouts/SiteLaunchPad/SiteLaunchPad.tsx

@@ -28,12 +28,7 @@ import { SiteViewHeader } from "layouts/layouts/SiteViewLayout/SiteViewHeader"
 
 import { isSiteLaunchEnabled } from "utils/siteLaunchUtils"
 
-import {
-  SiteLaunchFEStatus,
-  SiteLaunchTaskTypeIndex,
-  SITE_LAUNCH_PAGES,
-  SITE_LAUNCH_TASKS_LENGTH,
-} from "types/siteLaunch"
+import { SITE_LAUNCH_PAGES } from "types/siteLaunch"
 import { useErrorToast } from "utils"
 
 import {
@@ -56,9 +51,6 @@ interface RiskAcceptanceModalProps {
 
 interface SiteLaunchPadProps {
   pageNumber: number
-
-  handleDecrementStepNumber: () => void
-  handleIncrementStepNumber: () => void
 }
 
 const RiskAcceptanceModal = ({
@@ -130,8 +122,6 @@ const RiskAcceptanceModal = ({
 
 export const SiteLaunchPad = ({
   pageNumber,
-  handleDecrementStepNumber,
-  handleIncrementStepNumber,
 }: SiteLaunchPadProps): JSX.Element => {
   let title: JSX.Element
   let body: JSX.Element
@@ -147,12 +137,7 @@ export const SiteLaunchPad = ({
       break
     case SITE_LAUNCH_PAGES.CHECKLIST:
       title = <SiteLaunchChecklistTitle />
-      body = (
-        <SiteLaunchChecklistBody
-          handleIncrementStepNumber={handleIncrementStepNumber}
-          handleDecrementStepNumber={handleDecrementStepNumber}
-        />
-      )
+      body = <SiteLaunchChecklistBody />
       break
     case SITE_LAUNCH_PAGES.FINAL_STATE:
       title = <></> // No title for final state
@@ -177,11 +162,7 @@ export const SiteLaunchPad = ({
 }
 
 export const SiteLaunchPadPage = (): JSX.Element => {
-  const {
-    siteLaunchStatusProps,
-    setSiteLaunchStatusProps,
-    pageNumber,
-  } = useSiteLaunchContext()
+  const { pageNumber } = useSiteLaunchContext()
   const { siteName } = useParams<{ siteName: string }>()
 
   const errorToast = useErrorToast()
@@ -197,38 +178,11 @@ export const SiteLaunchPadPage = (): JSX.Element => {
     }
   }, [siteName, errorToast, role, isLoaded])
 
-  const handleIncrementStepNumber = () => {
-    if (
-      siteLaunchStatusProps &&
-      siteLaunchStatusProps.stepNumber < SITE_LAUNCH_TASKS_LENGTH
-    ) {
-      setSiteLaunchStatusProps({
-        ...siteLaunchStatusProps,
-        stepNumber: (siteLaunchStatusProps.stepNumber +
-          1) as SiteLaunchTaskTypeIndex, // safe to assert since we do a check
-        siteLaunchStatus: SiteLaunchFEStatus.ChecklistTasksPending,
-      })
-    }
-  }
-  const handleDecrementStepNumber = () => {
-    if (siteLaunchStatusProps && siteLaunchStatusProps.stepNumber > 0) {
-      setSiteLaunchStatusProps({
-        ...siteLaunchStatusProps,
-        stepNumber: (siteLaunchStatusProps?.stepNumber -
-          1) as SiteLaunchTaskTypeIndex, // safe to assert since we do a check
-      })
-    }
-  }
-
   return (
     <Skeleton isLoaded={isLoaded}>
       <>
         {isSiteLaunchEnabled(siteName, role) ? (
-          <SiteLaunchPad
-            pageNumber={pageNumber}
-            handleDecrementStepNumber={handleDecrementStepNumber}
-            handleIncrementStepNumber={handleIncrementStepNumber}
-          />
+          <SiteLaunchPad pageNumber={pageNumber} />
         ) : (
           /**
            * Without the isLoaded check, the site will redirect prematurely.