Skip to content

Commit 32e6322

Browse files
tyler-danetyler-dane
authored
Merge branch 'main' into copilot/fix-778
2 parents 4850fa3 + e9a4cb2 commit 32e6322

File tree

8 files changed

+136
-75
lines changed

8 files changed

+136
-75
lines changed

‎packages/web/src/components/Onboarding/components/Onboarding.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import styled from "styled-components";
3+
import { Key } from "ts-key-enum";
34

45
export const OnboardingRoot = styled.div`
56
// background: rgba(0, 0, 0, 0.8);
@@ -138,7 +139,10 @@ export const Onboarding: React.FC<Props> = ({
138139
const handleKeyDown = (event: KeyboardEvent) => {
139140
const currentStep = steps[currentStepIndex];
140141

141-
if (event.key === "ArrowRight" && !currentStep?.disableRightArrow) {
142+
if (
143+
(event.key === Key.ArrowRight || event.key === Key.Enter) &&
144+
!currentStep?.disableRightArrow
145+
) {
142146
event.preventDefault();
143147
handleNext();
144148
} else if (event.key === "ArrowLeft" && !currentStep?.disableLeftArrow) {

‎packages/web/src/components/Onboarding/components/OnboardingForm.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import styled from "styled-components";
2+
3+
export const OnboardingForm = styled.form`
4+
width: 100%;
5+
`;

‎packages/web/src/components/Onboarding/components/styled.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,17 @@ export const OnboardingContent = styled.div`
3131
gap: ${({ theme }) => theme.spacing.l};
3232
`;
3333

34+
export const OnboardingInputContainer = styled.div`
35+
margin-bottom: 40px;
36+
`;
37+
3438
export const OnboardingInputSection = styled.div`
3539
width: 100%;
3640
display: flex;
3741
flex-direction: column;
3842
align-items: flex-start;
3943
gap: ${({ theme }) => theme.spacing.s};
44+
padding-bottom: 20px;
4045
`;
4146

4247
export const OnboardingInputLabel = styled.label`

‎packages/web/src/components/Onboarding/steps/EmailStep.tsx

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from "../components";
1313
import { OnboardingStepProps } from "../components/Onboarding";
1414
import { useOnboarding } from "../components/OnboardingContext";
15+
import { OnboardingForm } from "../components/OnboardingForm";
1516

1617
const Title = styled(OnboardingText)`
1718
margin-bottom: ${({ theme }) => theme.spacing.xl};
@@ -111,23 +112,25 @@ export const EmailStep: React.FC<OnboardingStepProps> = ({
111112
totalSteps={totalSteps}
112113
>
113114
<Title>The gangway lowers only for the chosen.</Title>
114-
<OnboardingInputSection>
115-
<OnboardingInputLabel htmlFor="email">Email</OnboardingInputLabel>
116-
<OnboardingInput
117-
id="email"
118-
type="email"
119-
placeholder=""
120-
value={email}
121-
onChange={(e) => setEmail(e.target.value)}
122-
autoFocus
123-
/>
124-
</OnboardingInputSection>
125-
<SubmitButton
126-
disabled={isLoadingWaitlistStatus || !email.trim()}
127-
onClick={handleSubmit}
128-
>
129-
OK
130-
</SubmitButton>
115+
<OnboardingForm onSubmit={handleSubmit}>
116+
<OnboardingInputSection>
117+
<OnboardingInputLabel htmlFor="email">Email</OnboardingInputLabel>
118+
<OnboardingInput
119+
id="email"
120+
type="email"
121+
placeholder=""
122+
value={email}
123+
onChange={(e) => setEmail(e.target.value)}
124+
autoFocus
125+
/>
126+
</OnboardingInputSection>
127+
<SubmitButton
128+
type="submit"
129+
disabled={isLoadingWaitlistStatus || !email.trim()}
130+
>
131+
OK
132+
</SubmitButton>
133+
</OnboardingForm>
131134
</OnboardingStepBoilerplate>
132135
);
133136
};

‎packages/web/src/components/Onboarding/steps/FinalOnboardingReminder.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
22
import { OnboardingCard, OnboardingText } from "../components/";
33
import { OnboardingStepProps } from "../components/Onboarding";
44

5-
const FADE_IN_MS = 5000;
6-
const READ_MS = 4000;
7-
const FADE_OUT_MS = 2500;
5+
const FADE_IN_MS = 4000;
6+
const READ_MS = 3500;
7+
const FADE_OUT_MS = 2000;
88

99
/**
1010
* This step fades the quote in when it comes into view, allows the user a few
@@ -72,8 +72,11 @@ export const FinalOnboardingReminder: React.FC<OnboardingStepProps> = ({
7272
transition: `opacity ${FADE_IN_MS}ms ease-in-out`,
7373
}}
7474
>
75-
To reach a port we must set sail — sail, not tie at anchor — sail, not
76-
drift.
75+
To reach a port, we must set sail.
76+
<br />
77+
Sail, not tie at anchor.
78+
<br />
79+
Sail, not drift.
7780
</OnboardingText>
7881
</OnboardingCard>
7982
</div>

‎packages/web/src/components/Onboarding/steps/SetHeaderNote.tsx

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import {
88
OnboardingText,
99
} from "../components";
1010
import { OnboardingStepProps } from "../components/Onboarding";
11+
import { OnboardingForm } from "../components/OnboardingForm";
1112

1213
const InputContainer = styled.div`
13-
width: 100%;
1414
position: relative;
1515
margin-top: ${({ theme }) => theme.spacing.l};
16-
margin-bottom: ${({ theme }) => theme.spacing.l};
16+
margin-bottom: 40px;
1717
`;
1818

1919
const Input = styled(OnboardingInputWhite)``;
@@ -23,7 +23,7 @@ const HelpText = styled(OnboardingText)`
2323
top: 100%;
2424
left: 0;
2525
right: 0;
26-
margin-top: 8px;
26+
margin: 8px 0;
2727
font-size: ${({ theme }) => theme.text.size.l};
2828
color: rgb(87, 193, 255);
2929
text-align: center;
@@ -52,6 +52,12 @@ export const SetHeaderNote: React.FC<OnboardingStepProps> = ({
5252
return () => clearTimeout(timer);
5353
}, [headerNote]);
5454

55+
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
56+
const value = e.target.value;
57+
setHeaderNote(value);
58+
localStorage.setItem(STORAGE_KEYS.HEADER_NOTE, value.trim() || PLACEHOLDER);
59+
};
60+
5561
const handleNext = () => {
5662
localStorage.setItem(
5763
STORAGE_KEYS.HEADER_NOTE,
@@ -60,6 +66,11 @@ export const SetHeaderNote: React.FC<OnboardingStepProps> = ({
6066
onNext();
6167
};
6268

69+
const handleSubmit = (e: React.FormEvent) => {
70+
e.preventDefault();
71+
handleNext();
72+
};
73+
6374
return (
6475
<OnboardingStepBoilerplate
6576
currentStep={currentStep}
@@ -75,23 +86,26 @@ export const SetHeaderNote: React.FC<OnboardingStepProps> = ({
7586
everything else will become easier or unnecessary?
7687
</OnboardingText>
7788

78-
<InputContainer>
79-
<Input
80-
placeholder={PLACEHOLDER}
81-
value={headerNote}
82-
onChange={(e) => setHeaderNote(e.target.value)}
83-
/>
84-
{showHelpText && (
85-
<HelpText>Fear not, you can always change this later.</HelpText>
86-
)}
87-
</InputContainer>
89+
<OnboardingForm onSubmit={handleSubmit}>
90+
<InputContainer>
91+
<Input
92+
placeholder={PLACEHOLDER}
93+
value={headerNote}
94+
onChange={handleInputChange}
95+
autoFocus
96+
/>
97+
{showHelpText && (
98+
<HelpText>Fear not, you can always change this later.</HelpText>
99+
)}
100+
</InputContainer>
88101

89-
<OnboardingFooter
90-
onSkip={onSkip}
91-
onPrev={onPrevious}
92-
onNext={handleNext}
93-
nextBtnDisabled={!!headerNote && !headerNote.trim()}
94-
/>
102+
<OnboardingFooter
103+
onSkip={onSkip}
104+
onPrev={onPrevious}
105+
onNext={handleNext}
106+
nextBtnDisabled={!!headerNote && !headerNote.trim()}
107+
/>
108+
</OnboardingForm>
95109
</OnboardingStepBoilerplate>
96110
);
97111
};

‎packages/web/src/components/Onboarding/steps/SetSomedayEvents.tsx

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@ import { createEventSlice } from "@web/ducks/events/slices/event.slice";
88
import { useAppDispatch } from "@web/store/store.hooks";
99
import {
1010
OnboardingFooter,
11+
OnboardingInputContainer,
1112
OnboardingInputLabel,
1213
OnboardingInputSection,
1314
OnboardingInputWhite,
1415
OnboardingStepBoilerplate,
1516
OnboardingText,
1617
} from "../components";
1718
import { OnboardingStepProps } from "../components/Onboarding";
19+
import { OnboardingForm } from "../components/OnboardingForm";
1820

1921
const SOMEDAY_EVENT_ONE_PLACEHOLDER = "RSVP to Pip’s wedding invite";
2022
const SOMEDAY_EVENT_TWO_PLACEHOLDER = "Order mahogany peg leg";
@@ -66,6 +68,11 @@ export const SetSomedayEvents: React.FC<OnboardingStepProps> = ({
6668
onNext();
6769
};
6870

71+
const handleSubmit = async (e: React.FormEvent) => {
72+
e.preventDefault();
73+
await handleNext();
74+
};
75+
6976
return (
7077
<OnboardingStepBoilerplate
7178
currentStep={currentStep}
@@ -76,39 +83,44 @@ export const SetSomedayEvents: React.FC<OnboardingStepProps> = ({
7683
Enter two tasks you want to do this month.
7784
</OnboardingText>
7885

79-
<OnboardingInputSection>
80-
<OnboardingInputLabel htmlFor="someday-event-1">
81-
Task 1:
82-
</OnboardingInputLabel>
83-
<OnboardingInputWhite
84-
id="someday-event-1"
85-
placeholder={SOMEDAY_EVENT_ONE_PLACEHOLDER}
86-
value={somedayEventOne}
87-
onChange={(e) => setSomedayEventOne(e.target.value)}
88-
/>
89-
</OnboardingInputSection>
86+
<OnboardingForm onSubmit={handleSubmit}>
87+
<OnboardingInputContainer>
88+
<OnboardingInputSection>
89+
<OnboardingInputLabel htmlFor="someday-event-1">
90+
Task 1:
91+
</OnboardingInputLabel>
92+
<OnboardingInputWhite
93+
autoFocus
94+
id="someday-event-1"
95+
placeholder={SOMEDAY_EVENT_ONE_PLACEHOLDER}
96+
value={somedayEventOne}
97+
onChange={(e) => setSomedayEventOne(e.target.value)}
98+
/>
99+
</OnboardingInputSection>
90100

91-
<OnboardingInputSection>
92-
<OnboardingInputLabel htmlFor="someday-event-2">
93-
Task 2:
94-
</OnboardingInputLabel>
95-
<OnboardingInputWhite
96-
id="someday-event-2"
97-
placeholder={SOMEDAY_EVENT_TWO_PLACEHOLDER}
98-
value={somedayEventTwo}
99-
onChange={(e) => setSomedayEventTwo(e.target.value)}
100-
/>
101-
</OnboardingInputSection>
101+
<OnboardingInputSection>
102+
<OnboardingInputLabel htmlFor="someday-event-2">
103+
Task 2:
104+
</OnboardingInputLabel>
105+
<OnboardingInputWhite
106+
id="someday-event-2"
107+
placeholder={SOMEDAY_EVENT_TWO_PLACEHOLDER}
108+
value={somedayEventTwo}
109+
onChange={(e) => setSomedayEventTwo(e.target.value)}
110+
/>
111+
</OnboardingInputSection>
112+
</OnboardingInputContainer>
102113

103-
<OnboardingFooter
104-
onSkip={onSkip}
105-
onPrev={onPrevious}
106-
onNext={handleNext}
107-
nextBtnDisabled={
108-
(!!somedayEventOne && !somedayEventOne.trim()) ||
109-
(!!somedayEventTwo && !somedayEventTwo.trim())
110-
}
111-
/>
114+
<OnboardingFooter
115+
onSkip={onSkip}
116+
onPrev={onPrevious}
117+
onNext={handleNext}
118+
nextBtnDisabled={
119+
(!!somedayEventOne && !somedayEventOne.trim()) ||
120+
(!!somedayEventTwo && !somedayEventTwo.trim())
121+
}
122+
/>
123+
</OnboardingForm>
112124
</OnboardingStepBoilerplate>
113125
);
114126
};

‎packages/web/src/components/Onboarding/steps/SignInWithGoogle.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from "react";
1+
import React, { useEffect } from "react";
22
import { useNavigate } from "react-router-dom";
3+
import { Key } from "ts-key-enum";
34
import { AuthApi } from "@web/common/apis/auth.api";
45
import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
56
import { GoogleButton } from "@web/components/oauth/google/GoogleButton";
@@ -11,7 +12,6 @@ export const SignInWithGoogle: React.FC<OnboardingStepProps> = ({
1112
currentStep,
1213
totalSteps,
1314
onNext,
14-
// onPrevious,
1515
}) => {
1616
const navigate = useNavigate();
1717

@@ -28,6 +28,21 @@ export const SignInWithGoogle: React.FC<OnboardingStepProps> = ({
2828
},
2929
});
3030

31+
useEffect(() => {
32+
const handleKeyDown = (event: KeyboardEvent) => {
33+
if (
34+
(event.key === Key.Enter || event.key === Key.ArrowRight) &&
35+
!loading
36+
) {
37+
event.preventDefault();
38+
login();
39+
}
40+
};
41+
42+
document.addEventListener("keydown", handleKeyDown);
43+
return () => document.removeEventListener("keydown", handleKeyDown);
44+
}, [login, loading]);
45+
3146
return (
3247
<OnboardingStepBoilerplate
3348
currentStep={currentStep}

0 commit comments

Comments
 (0)