Merge branch 'main' of github.com:calblueprint/bread-and-roses into m…

…elissa/onboarding-review
calblueprint · Oct 26, 2024 · 521b800 · 521b800
2 parents fc20985 + 48c7c71
commit 521b800
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 11 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import StyledComponentsRegistry from '@/lib/registry';
 import { Sans } from '../styles/fonts';
 import '../styles/global.css';
+import { OnboardingProvider } from '../utils/onboardingContext';
 
 // site metadata - what shows up on embeds
 export const metadata: Metadata = {
@@ -17,7 +18,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={Sans.className}>
-        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <StyledComponentsRegistry>
+          <OnboardingProvider>{children}</OnboardingProvider>
+        </StyledComponentsRegistry>
       </body>
     </html>
   );

diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
@@ -1,5 +1,9 @@
 /* eslint-disable react/no-unescaped-entities */
+'use client';
+
+import { useContext } from 'react';
 import Back from '@/public/images/back.svg';
+import { OnboardingContext } from '@/utils/onboardingContext';
 import {
   Background,
   ButtonContainer,
@@ -16,6 +20,20 @@ import {
 import { Checkbox, RedAsterisk, UpdateContainer, UpdateText } from './styles';
 
 export default function Onboarding() {
+  const onboardingContext = useContext(OnboardingContext);
+
+  if (!onboardingContext) return null;
+
+  const { generalInfo, setGeneralInfo } = onboardingContext;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, type, checked, value } = e.target;
+    setGeneralInfo({
+      ...generalInfo,
+      [name]: type === 'checkbox' ? checked : value,
+    });
+  };
+
   return (
     <Background>
       <InlineContainer>
@@ -30,19 +48,36 @@ export default function Onboarding() {
             {' '}
             First Name <RedAsterisk>*</RedAsterisk>{' '}
           </text>
-          <Input />
+          <Input
+            name="firstName"
+            value={generalInfo.firstName}
+            onChange={handleChange}
+          />
           <text>
             {' '}
             Last Name <RedAsterisk>*</RedAsterisk>{' '}
           </text>
-          <Input />
+          <Input
+            name="lastName"
+            value={generalInfo.lastName}
+            onChange={handleChange}
+          />
           <text>
             {' '}
             Phone Number <RedAsterisk>*</RedAsterisk>{' '}
           </text>
-          <Input />
+          <Input
+            name="phoneNumber"
+            value={generalInfo.phoneNumber}
+            onChange={handleChange}
+          />
           <UpdateContainer>
-            <Checkbox type="checkbox" />
+            <Checkbox
+              type="checkbox"
+              name="notifications"
+              checked={generalInfo.notifications}
+              onChange={handleChange}
+            />
             <UpdateText>
               I want to get updated when there's an event that matches my
               interest!

diff --git a/app/onboarding/preferences/page.tsx b/app/onboarding/preferences/page.tsx
@@ -1,5 +1,9 @@
+'use client';
+
+import { useContext } from 'react';
 import Link from 'next/link';
 import Back from '@/public/images/back.svg';
+import { OnboardingContext } from '@/utils/onboardingContext';
 import {
   Background,
   ButtonContainer,
@@ -15,6 +19,16 @@ import {
 } from '../styles';
 
 export default function Onboarding() {
+  const onboardingContext = useContext(OnboardingContext);
+
+  if (!onboardingContext) return null;
+
+  const { preferences, setPreferences } = onboardingContext;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPreferences({ ...preferences, [e.target.name]: e.target.value });
+  };
+
   return (
     <Background>
       <InlineContainer>
@@ -29,17 +43,41 @@ export default function Onboarding() {
         <Container>
           <Title>Help us tailor shows to you!</Title>
           <text>Facility Type</text>
-          <Input />
+          <Input
+            name="facilityType"
+            value={preferences.facilityType}
+            onChange={handleChange}
+          />
           <text>Preferred Location</text>
-          <Input />
+          <Input
+            name="location"
+            value={preferences.location}
+            onChange={handleChange}
+          />
           <text>Audience</text>
-          <Input />
+          <Input
+            name="audience"
+            value={preferences.audience}
+            onChange={handleChange}
+          />
           <text>Preferred Equipment</text>
-          <Input />
+          <Input
+            name="preferredEquipment"
+            value={preferences.preferredEquipment}
+            onChange={handleChange}
+          />
           <text>Type of Act</text>
-          <Input />
+          <Input
+            name="typeOfAct"
+            value={preferences.typeOfAct}
+            onChange={handleChange}
+          />
           <text>Genre</text>
-          <Input />
+          <Input
+            name="genre"
+            value={preferences.genre}
+            onChange={handleChange}
+          />
         </Container>
         <StyledLink href="/onboarding/review">
           <ButtonContainer>

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -1,5 +1,30 @@
 const COLORS = {
   bread1: '#FEFDFC',
+  bread2: '#F5F5F3',
+  bread3: '#F6F3E9',
+  bread4: '#EDE6D5',
+  bread5: '#E6DCC4',
+  bread6: '#DED1AF',
+  bread7: '#D3C193',
+  bread8: '#C3AB6C',
+  bread9: '#A18740',
+  bread10: '#937B3B',
+  bread11: '#776534',
+  bread12: '#3A3528',
+
+  rose1: '#FFFCFC',
+  rose2: '#FFF8F7',
+  rose3: '#FDEBE9',
+  rose4: '#FFDEDB',
+  rose5: '#FED0CD',
+  rose6: '#F7C1BD',
+  rose7: '#EEAEAA',
+  rose8: '#E39591',
+  rose9: '#A4031F',
+  rose10: '#91000F',
+  rose11: '#C6343B',
+  rose12: '#621D1E',
+
   gray1: '#ECECEC',
   gray2: '#E7E7E7',
   gray3: '#DDDDDD',

diff --git a/utils/onboardingContext.tsx b/utils/onboardingContext.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import React, { createContext, ReactNode, useState } from 'react';
+import supabase from '@/api/supabase/createClient';
+
+interface GeneralInfo {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  notifications: boolean;
+}
+
+interface Preferences {
+  facilityType: string;
+  location: string;
+  audience: string;
+  preferredEquipment: string;
+  typeOfAct: string;
+  genre: string;
+}
+
+interface OnboardingContextType {
+  generalInfo: GeneralInfo;
+  setGeneralInfo: (info: GeneralInfo) => void;
+  preferences: Preferences;
+  setPreferences: (preferences: Preferences) => void;
+  submitOnboardingData: () => Promise<void>;
+}
+
+export const OnboardingContext = createContext<
+  OnboardingContextType | undefined
+>(undefined);
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+  const [generalInfo, setGeneralInfo] = useState<GeneralInfo>({
+    firstName: '',
+    lastName: '',
+    phoneNumber: '',
+    notifications: false,
+  });
+
+  const [preferences, setPreferences] = useState<Preferences>({
+    facilityType: '',
+    location: '',
+    audience: '',
+    preferredEquipment: '',
+    typeOfAct: '',
+    genre: '',
+  });
+
+  const submitOnboardingData = async () => {
+    try {
+      const { data: volunteerData, error: volunteerError } = await supabase
+        .from('volunteers')
+        .insert([
+          {
+            first_name: generalInfo.firstName,
+            last_name: generalInfo.lastName,
+            phone_number: generalInfo.phoneNumber,
+          },
+        ]);
+
+      if (volunteerError) throw volunteerError;
+
+      const { data: preferencesData, error: preferencesError } = await supabase
+        .from('volunteer_preferences')
+        .insert([
+          {
+            facility_type: preferences.facilityType,
+            city: preferences.location,
+            audience: preferences.audience,
+            instruments: preferences.preferredEquipment,
+            type_of_act: preferences.typeOfAct,
+            genre: preferences.genre,
+          },
+        ]);
+
+      if (preferencesError) throw preferencesError;
+
+      console.log('Onboarding data submitted successfully:', {
+        volunteerData,
+        preferencesData,
+      });
+    } catch (error) {
+      console.error('Error submitting onboarding data:', error);
+    }
+  };
+
+  return (
+    <OnboardingContext.Provider
+      value={{
+        generalInfo,
+        setGeneralInfo,
+        preferences,
+        setPreferences,
+        submitOnboardingData,
+      }}
+    >
+      {children}
+    </OnboardingContext.Provider>
+  );
+};