[style] error screens in view plants & review add details (#65)

Co-authored-by: Catherine Tan <[email protected]>
calblueprint · Dec 23, 2024 · 5159c2a · 5159c2a
1 parent 6601db6
commit 5159c2a
Show file tree

Hide file tree

Showing 12 changed files with 287 additions and 91 deletions.
diff --git a/app/add-details/page.tsx b/app/add-details/page.tsx
@@ -6,11 +6,53 @@ import { insertUserPlants } from '@/api/supabase/queries/userPlants';
 import PlantDetails from '@/components/PlantDetails';
 import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
-import { H1, P1 } from '@/styles/text';
-import { UserPlant } from '@/types/schema';
+import { H1, H4, P1, P2 } from '@/styles/text';
+import { PlantingTypeEnum, UserPlant } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';
+import { plantingTypeLabels } from '@/utils/helpers';
 import { useProfile } from '@/utils/ProfileProvider';
-import { ButtonDiv, FooterButton, MoveButton } from './styles';
+import {
+  ButtonDiv,
+  FooterButton,
+  MoveButton,
+  ReviewDetailsContainer,
+  ReviewGrid,
+  ReviewHeader,
+} from './styles';
+
+function ReviewPlant({
+  plantName,
+  dateAdded,
+  plantingType,
+}: {
+  plantName: string;
+  dateAdded: string;
+  plantingType: PlantingTypeEnum;
+}) {
+  return (
+    <Flex $direction="column" $gap="8px" $mb="16px">
+      <H4 $fontWeight={500} $color={COLORS.shrub}>
+        {plantName}
+      </H4>
+      <ReviewGrid>
+        <P2 $fontWeight={500}>Date Planted</P2>
+        <P2>{dateAdded}</P2>
+        <P2 $fontWeight={500}>Planting Type</P2>
+        <P2>{plantingTypeLabels[plantingType]}</P2>
+      </ReviewGrid>
+      {/* <CustomSelect
+        label="Planting Type"
+        value={detail.planting_type}
+        options={plantingTypeOptions}
+        onChange={value => updateInput('planting_type', value, index)}
+      />
+      <DateInput
+        value={detail.date_added}
+        onChange={value => updateInput('date_added', value, index)}
+      /> */}
+    </Flex>
+  );
+}
 
 export default function Home() {
   const { profileData, profileReady, plantsToAdd } = useProfile();
@@ -29,15 +71,15 @@ export default function Home() {
 
   // Navigate between plants and save input data
   function move(steps: number) {
-    const currentDetail = details[currentIndex - 1];
-
     // Set curr date in details to default date if not on submission page
-    if (
-      (!currentDetail || !currentDetail.date_added) &&
-      currentIndex <= plantsToAdd.length
-    ) {
-      updateInput('date_added', getDefaultDate());
+
+    if (currentIndex <= plantsToAdd.length) {
+      const currentDetail = details[currentIndex - 1];
+      if (!currentDetail || !currentDetail.date_added) {
+        updateInput('date_added', getDefaultDate(), currentIndex - 1);
+      }
     }
+
     // For valid moves, move to next page
     if (
       steps !== 0 &&
@@ -53,10 +95,10 @@ export default function Home() {
     currentIndex <= plantsToAdd.length &&
     !details[currentIndex - 1].planting_type;
 
-  function updateInput(field: string, value: string) {
+  function updateInput(field: string, value: string, index: number) {
     const updatedDetails = [...details];
-    updatedDetails[currentIndex - 1] = {
-      ...updatedDetails[currentIndex - 1],
+    updatedDetails[index] = {
+      ...updatedDetails[index],
       [field]: value,
     };
     setDetails(updatedDetails);
@@ -87,8 +129,12 @@ export default function Home() {
               plant={plantsToAdd[currentIndex - 1]}
               date={details[currentIndex - 1].date_added ?? getDefaultDate()}
               plantingType={details[currentIndex - 1].planting_type ?? ''}
-              onDateChange={date => updateInput('date_added', date)}
-              onPlantingTypeChange={type => updateInput('planting_type', type)}
+              onDateChange={date =>
+                updateInput('date_added', date, currentIndex - 1)
+              }
+              onPlantingTypeChange={type =>
+                updateInput('planting_type', type, currentIndex - 1)
+              }
             />
           </Flex>
           <FooterButton>
@@ -117,14 +163,49 @@ export default function Home() {
         </Flex>
       )}
       {currentIndex === plantsToAdd.length + 1 && (
-        <div>
-          <button type="button" onClick={() => move(-1)}>
-            Back
-          </button>
-          <button type="button" onClick={handleSubmit}>
-            Submit
-          </button>
-        </div>
+        <Flex
+          $minH="full-screen"
+          $direction="column"
+          $align="center"
+          $justify="center"
+        >
+          <Flex
+            $direction="column"
+            $maxW="500px"
+            $align="center"
+            $h="max-content"
+            $p="24px"
+          >
+            <ReviewHeader>Review & Submit</ReviewHeader>
+            <ReviewDetailsContainer>
+              {details.map((detail, index) => (
+                <ReviewPlant
+                  key={plantsToAdd[index].id}
+                  plantName={plantsToAdd[index].plant_name}
+                  plantingType={detail.planting_type!}
+                  dateAdded={detail.date_added!}
+                />
+              ))}
+            </ReviewDetailsContainer>
+            <Flex $direction="row" $justify="between" $maxW="500px" $mt="24px">
+              <MoveButton
+                type="button"
+                onClick={() => move(-1)}
+                $secondaryColor={COLORS.shrub}
+              >
+                Back
+              </MoveButton>
+              <MoveButton
+                type="button"
+                onClick={handleSubmit}
+                $primaryColor={disableNext ? COLORS.midgray : COLORS.shrub}
+                $secondaryColor="white"
+              >
+                Submit
+              </MoveButton>
+            </Flex>
+          </Flex>
+        </Flex>
       )}
     </>
   );

diff --git a/app/add-details/styles.ts b/app/add-details/styles.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 import { SmallRoundedButton } from '@/components/Button';
+import COLORS from '@/styles/colors';
+import { H3 } from '../onboarding/styles';
 
 export const MoveButton = styled(SmallRoundedButton)`
   border: 1px solid;
@@ -32,3 +34,24 @@ export const ButtonDiv = styled.div`
     justify-content: flex-end;
   }
 `;
+
+export const ReviewHeader = styled(H3)`
+  text-align: center;
+  color: ${COLORS.shrub};
+  margin-bottom: 40px;
+`;
+
+export const ReviewDetailsContainer = styled.div`
+  padding: 24px;
+  padding-top: 32px;
+  border-radius: 5px;
+  border: 1px solid ${COLORS.lightgray};
+  width: 100%;
+`;
+
+export const ReviewGrid = styled.div`
+  display: grid;
+  column-gap: 8px;
+  row-gap: 4px;
+  grid-template-columns: auto 1fr;
+`;
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
@@ -8,15 +8,12 @@ import LabeledCustomSelect from '@/components/EditableInput';
 import COLORS from '@/styles/colors';
 import { DropdownOption, Profile, UserTypeEnum } from '@/types/schema';
 import { useAuth } from '@/utils/AuthProvider';
+import { usStateOptions } from '@/utils/dropdownOptions';
 import { useProfile } from '@/utils/ProfileProvider';
 import { H3, PageContainer, ReviewContainer } from './styles';
 
 // Define the possible options for each question
-const stateOptions: DropdownOption<string>[] = [
-  { label: 'Tennessee', value: 'TENNESSEE' },
-  { label: 'Missouri', value: 'MISSOURI' },
-];
-
+// usStateOptions imported from elsewhere
 const gardenTypeOptions: DropdownOption<UserTypeEnum>[] = [
   { label: 'Individual', value: 'INDIV' },
   { label: 'Community', value: 'ORG' },
@@ -67,7 +64,7 @@ const StateSelection = ({
         <option value="" disabled>
           Select a state
         </option>
-        {stateOptions.map(state => (
+        {usStateOptions.map(state => (
           <option key={state.label} value={state.value}>
             {state.label}
           </option>
@@ -168,7 +165,7 @@ const ReviewPage = ({
         <LabeledCustomSelect
           label="State Location"
           value={selectedState}
-          options={stateOptions}
+          options={usStateOptions}
           onChange={setSelectedState}
         />
 

diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
@@ -9,6 +9,11 @@ import COLORS from '@/styles/colors';
 import { Box } from '@/styles/containers';
 import { H1, H3 } from '@/styles/text';
 import { DropdownOption, PlantingTypeEnum, SeasonEnum } from '@/types/schema';
+import {
+  plantingTypeOptions,
+  seasonOptions,
+  usStateOptions,
+} from '@/utils/dropdownOptions';
 import { useProfile } from '@/utils/ProfileProvider';
 import {
   FilterContainer,
@@ -18,32 +23,9 @@ import {
   StateOptionsContainer,
 } from './styles';
 
-// Declaring (static) filter options outside so they're not re-rendered
-// TODO: Maybe export shared filter options from a centralized file
-const growingSeasonOptions: DropdownOption<SeasonEnum>[] = [
-  { label: 'Spring', value: 'SPRING' },
-  { label: 'Summer', value: 'SUMMER' },
-  { label: 'Fall', value: 'FALL' },
-  { label: 'Winter', value: 'WINTER' },
-];
-const harvestSeasonOptions: DropdownOption<SeasonEnum>[] = [
-  { label: 'Spring', value: 'SPRING' },
-  { label: 'Summer', value: 'SUMMER' },
-  { label: 'Fall', value: 'FALL' },
-  { label: 'Winter', value: 'WINTER' },
-];
-const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
-  { label: 'Start Seeds Indoors', value: 'INDOORS' },
-  { label: 'Start Seeds Outdoors', value: 'OUTDOORS' },
-  {
-    label: 'Plant Seedlings/Transplant Outdoors',
-    value: 'TRANSPLANT',
-  },
-];
-const usStateOptions: DropdownOption[] = [
-  { label: 'Tennessee', value: 'TENNESSEE' },
-  { label: 'Missouri', value: 'MISSOURI' },
-];
+// (static) filter options imported from utils/dropdownOptions
+const growingSeasonOptions = seasonOptions;
+const harvestSeasonOptions = seasonOptions;
 
 export default function SeasonalPlantingGuide() {
   const { profileData, profileReady } = useProfile();