Merge pull request #1260 from near/jh/devFormBugs

fix: adjust styles for form to scroll on select other on motivation page

src/components/research-form-wizard/FormPages/Experience.tsx

@@ -62,7 +62,7 @@ export const ExperienceComponent = () => {
 
  set({
  nextDisabled: !isDisabled,
- currentStepSubmission: { selectedUserTypes: devExperience },
+ currentStepSubmission: { response_developer_experience: devExperience, response_web3_experience: web3Experience },
  });
  }, [devExperience, set]);
 

src/components/research-form-wizard/FormPages/FollowUp.tsx

@@ -128,11 +128,17 @@ const FollowUpComponent = () => {
  let isDisabled = true;
  if (validEmail && agreed) {
  isDisabled = false;
+ } else if (interest === 'No thanks') {
+ isDisabled = false;
  }
 
  set({
  nextDisabled: isDisabled,
- currentStepSubmission: { optIn: interest, emailAddress: email, agreedToTerms: agreed },
+ currentStepSubmission: {
+ response_opt_in: interest,
+ response_email_address: email,
+ response_agreed_to_terms: agreed,
+ },
  });
  }, [interest, email, agreed, set]);
 

src/components/research-form-wizard/FormPages/Motivation.tsx

@@ -1,5 +1,5 @@
 import { useResearchWizardStore } from '@/stores/researchWizard';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 const InterestsContainer = styled.div`
@@ -8,12 +8,12 @@ const InterestsContainer = styled.div`
 `;
 
 const SubTitle = styled.h4`
- margin: 0 0 10px 0;
+ margin: 0 0 8px 0;
 `;
 
 const Text = styled.p`
  margin: 0;
- margin-bottom: 1rem;
+ margin-bottom: 0.5rem;
  color: #868682;
 `;
 
@@ -75,13 +75,24 @@ export const Motivation = () => {
  const [selectedInterests, setSelectedInterests] = useState<string[]>([]);
  const [showOtherInput, setShowOtherInput] = useState(false);
  const [otherInputEntry, setOtherInputEntry] = useState('');
+ const otherInputRef = useRef<HTMLInputElement>(null);
 
  useEffect(() => {
  const isDisabled = selectedInterests.length > 0;
 
- set({ nextDisabled: !isDisabled, currentStepSubmission: { interests: selectedInterests, other: otherInputEntry } });
+ set({
+ nextDisabled: !isDisabled,
+ currentStepSubmission: { response_interests: selectedInterests, other: otherInputEntry },
+ });
  }, [selectedInterests, otherInputEntry, set]);
 
+ useEffect(() => {
+ if (showOtherInput && otherInputRef.current) {
+ otherInputRef.current?.focus();
+ otherInputRef.current.scrollIntoView({ behavior: 'smooth' });
+ }
+ }, [showOtherInput]);
+
  const handleOtherSelected = (interest: string) => {
  if (interest === 'Other') {
  setShowOtherInput(!showOtherInput);
@@ -113,11 +124,13 @@ export const Motivation = () => {
  </ButtonsContainer>
  <OtherLabel visible={showOtherInput}>Other</OtherLabel>
  <OtherInput
+ id="other-input"
  type="text"
  placeholder="I'm here to..."
  visible={showOtherInput}
  value={otherInputEntry}
  onChange={(e) => setOtherInputEntry(e.target.value)}
+ ref={otherInputRef}
  />
  </InterestsContainer>
  );

src/components/research-form-wizard/FormPages/UserType.tsx

@@ -78,7 +78,7 @@ const UserTypeComponent = () => {
 
  set({
  nextDisabled: !isDisabled,
- currentStepSubmission: { selectedUserTypes: selectedTypes, other: otherInputEntry },
+ currentStepSubmission: { response_selected_user_types: selectedTypes, other: otherInputEntry },
  });
  }, [selectedTypes, otherInputEntry, set]);
 

src/components/research-form-wizard/ResearchFormWizard.tsx

@@ -88,8 +88,8 @@ export const ResearchFormWizard = () => {
  questionNumber: `${currentStepIndex + 1}`,
  questionTitle: formSteps[currentStepIndex].title,
  question: formSteps[currentStepIndex].question,
- question2: formSteps[currentStepIndex].question2 || '',
- response: currentStepSubmission,
+ question2: formSteps[currentStepIndex].question2 || null,
+ ...currentStepSubmission,
  });
 
  if (currentStepIndex < formSteps.length - 1) {

src/components/research-form-wizard/StepLayout.tsx

@@ -12,6 +12,7 @@ type StepLayoutProps = {
 const Card = styled.div<{ isMobile?: boolean }>`
  height: 608px;
  width: 400px;
+ overflow-y: auto;
  background: white;
  border-radius: 10px;
  box-shadow: ${(props) => (!props.isMobile ? '0 2px 10px rgba(0, 0, 0, 0.1)' : '0 0px 0px rgba(0, 0, 0, 0.0)')};
@@ -37,6 +38,7 @@ const CloseButton = styled.button`
 
 const ChildSection = styled.div`
  flex-grow: 1;
+ overflow-y: auto;
 `;
 
 const Footer = styled.div`