From 876daf7f84fd53393bf9d8766c35db53f2e8a195 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 4 Jun 2024 21:28:48 -0700
Subject: [PATCH] combine details and landing steps

---
 src/screens/StarterPack/Wizard/State.tsx      | 21 ++++++------
 .../StarterPack/Wizard/StepDetails.tsx        | 20 ++++++++---
 .../StarterPack/Wizard/StepLanding.tsx        | 33 -------------------
 src/screens/StarterPack/Wizard/index.tsx      | 12 ++-----
 4 files changed, 28 insertions(+), 58 deletions(-)
 delete mode 100644 src/screens/StarterPack/Wizard/StepLanding.tsx

diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx
index 5468c07ead..a14ab5ddad 100644
--- a/src/screens/StarterPack/Wizard/State.tsx
+++ b/src/screens/StarterPack/Wizard/State.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {AppBskyActorDefs} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 
-const steps = ['Landing', 'Details', 'Profiles', 'Feeds'] as const
+const steps = ['Details', 'Profiles', 'Feeds'] as const
 type Step = (typeof steps)[number]
 
 type Action =
@@ -40,11 +40,10 @@ function reducer(state: State, action: Action): State {
   let updatedState = state
 
   // -- Navigation
+  const currentIndex = steps.indexOf(state.currentStep)
   if (action.type === 'Next' && state.currentStep !== 'Feeds') {
-    const currentIndex = steps.indexOf(state.currentStep)
     updatedState = {...state, currentStep: steps[currentIndex + 1]}
-  } else if (action.type === 'Back' && state.currentStep !== 'Landing') {
-    const currentIndex = steps.indexOf(state.currentStep)
+  } else if (action.type === 'Back' && state.currentStep !== 'Details') {
     updatedState = {...state, currentStep: steps[currentIndex - 1]}
   }
 
@@ -81,18 +80,18 @@ function reducer(state: State, action: Action): State {
   }
 
   switch (updatedState.currentStep) {
-    case 'Landing':
-      updatedState = {
-        ...updatedState,
-        canNext: true,
-      }
-      break
     case 'Details':
       updatedState = {
         ...updatedState,
         canNext: Boolean(updatedState.description),
       }
       break
+    default: {
+      updatedState = {
+        ...updatedState,
+        canNext: true,
+      }
+    }
   }
 
   return updatedState
@@ -101,7 +100,7 @@ function reducer(state: State, action: Action): State {
 // TODO supply the initial state to this component
 export function Provider({
   initialState,
-  initialStep = 'Landing',
+  initialStep = 'Details',
   children,
 }: {
   initialState?: any // TODO update this type
diff --git a/src/screens/StarterPack/Wizard/StepDetails.tsx b/src/screens/StarterPack/Wizard/StepDetails.tsx
index f6388aed60..55e3a37df9 100644
--- a/src/screens/StarterPack/Wizard/StepDetails.tsx
+++ b/src/screens/StarterPack/Wizard/StepDetails.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useProfileQuery} from 'state/queries/profile'
@@ -9,6 +9,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {Text} from '#/components/Typography'
 
 export function StepDetails() {
   const {_} = useLingui()
@@ -21,12 +22,23 @@ export function StepDetails() {
   })
 
   return (
-    <View style={[a.px_xl, a.gap_xl, a.mt_md]}>
-      <View style={[{height: 65, marginTop: 20, marginBottom: 50}]}>
+    <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
+      <View style={[{height: 65}]}>
         <StarterPackIcon />
       </View>
+      <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
+        <Text style={[a.font_bold, a.text_3xl]}>
+          <Trans>Invites, but personal</Trans>
+        </Text>
+        <Text style={[a.text_center, a.text_md, a.px_md]}>
+          <Trans>
+            Create a starter pack to invite new users to Bluesky and give them
+            your favorite feeds and follows.
+          </Trans>
+        </Text>
+      </View>
       <View>
-        <TextField.LabelText>{_(msg`Starter pack name`)}</TextField.LabelText>
+        <TextField.LabelText>{_(msg`Name`)}</TextField.LabelText>
         <TextField.Input
           label={_(
             msg`${
diff --git a/src/screens/StarterPack/Wizard/StepLanding.tsx b/src/screens/StarterPack/Wizard/StepLanding.tsx
deleted file mode 100644
index a6df20eaa5..0000000000
--- a/src/screens/StarterPack/Wizard/StepLanding.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {Trans} from '@lingui/macro'
-
-import {atoms as a, useTheme} from '#/alf'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
-import {Text} from '#/components/Typography'
-
-export function StepLanding() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.flex_1, a.justify_center, {marginTop: 100}]}>
-      <View style={[{height: 150, marginBottom: 50}]}>
-        <StarterPackIcon />
-      </View>
-      <View style={[a.gap_lg, a.align_center, a.px_md]}>
-        <Text style={[a.font_bold, a.text_lg, t.atoms.text_contrast_medium]}>
-          <Trans>Starter packs</Trans>
-        </Text>
-        <Text style={[a.font_bold, a.text_4xl]}>
-          <Trans>Invites, but personal</Trans>
-        </Text>
-        <Text style={[a.text_center, a.text_md, a.px_md]}>
-          <Trans>
-            Create your own Bluesky starter packs and invite people directly to
-            your favorite feeds, profiles, and more.
-          </Trans>
-        </Text>
-      </View>
-    </View>
-  )
-}
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index cb53185f4c..a2ceb5cfea 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -18,7 +18,6 @@ import {CenteredView} from 'view/com/util/Views'
 import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State'
 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds'
-import {StepLanding} from '#/screens/StarterPack/Wizard/StepLanding'
 import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -93,12 +92,8 @@ function WizardInner() {
 
   const wizardUiStrings: Record<WizardStep, {header: string; button: string}> =
     {
-      Landing: {
-        header: _(msg`Create a starter pack`),
-        button: _(msg`Get started`),
-      },
       Details: {
-        header: _(msg`Details`),
+        header: _(msg`Create a Starter Pack`),
         button: _(msg`Continue`),
       },
       Profiles: {
@@ -143,7 +138,7 @@ function WizardInner() {
       <ViewHeader
         title={uiStrings.header}
         onBackPress={
-          state.currentStep !== 'Landing'
+          state.currentStep !== 'Details'
             ? () => dispatch({type: 'Back'})
             : undefined
         }
@@ -216,9 +211,6 @@ function Container({children}: {children: React.ReactNode}) {
 function StepView() {
   const [state] = useWizardState()
 
-  if (state.currentStep === 'Landing') {
-    return <StepLanding />
-  }
   if (state.currentStep === 'Details') {
     return <StepDetails />
   }