From 48c7c719eafbe1ff1fba9382c0fa301e770f6d8b Mon Sep 17 00:00:00 2001
From: Melissa <122945886+me-liu@users.noreply.github.com>
Date: Sat, 26 Oct 2024 15:35:06 -0700
Subject: [PATCH] Feat: onboarding context (#18)
* onboarding context
* feat: more global colors
---
app/layout.tsx | 5 +-
app/onboarding/general/page.tsx | 43 ++++++++++--
app/onboarding/preferences/page.tsx | 50 ++++++++++++--
styles/colors.ts | 25 +++++++
utils/onboardingContext.tsx | 102 ++++++++++++++++++++++++++++
5 files changed, 214 insertions(+), 11 deletions(-)
create mode 100644 utils/onboardingContext.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
index af25d98..7be9d86 100644
--- 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 (
- {children}
+
+ {children}
+
);
diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
index 63d22b1..473e26a 100644
--- 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) => {
+ const { name, type, checked, value } = e.target;
+ setGeneralInfo({
+ ...generalInfo,
+ [name]: type === 'checkbox' ? checked : value,
+ });
+ };
+
return (
@@ -30,19 +48,36 @@ export default function Onboarding() {
{' '}
First Name *{' '}
-
+
{' '}
Last Name *{' '}
-
+
{' '}
Phone Number *{' '}
-
+
-
+
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
index f02e143..8f2e941 100644
--- 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,
@@ -14,6 +18,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) => {
+ setPreferences({ ...preferences, [e.target.name]: e.target.value });
+ };
+
return (
@@ -28,17 +42,41 @@ export default function Onboarding() {
Help us tailor shows to you!
Facility Type
-
+
Preferred Location
-
+
Audience
-
+
Preferred Equipment
-
+
Type of Act
-
+
Genre
-
+
diff --git a/styles/colors.ts b/styles/colors.ts
index 242c22c..95ed867 100644
--- 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
new file mode 100644
index 0000000..3dc3363
--- /dev/null
+++ 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;
+}
+
+export const OnboardingContext = createContext<
+ OnboardingContextType | undefined
+>(undefined);
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+ const [generalInfo, setGeneralInfo] = useState({
+ firstName: '',
+ lastName: '',
+ phoneNumber: '',
+ notifications: false,
+ });
+
+ const [preferences, setPreferences] = useState({
+ 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 (
+
+ {children}
+
+ );
+};