From 6ddcb0f887495af7c2f32bcafc9cbccbbfeaa434 Mon Sep 17 00:00:00 2001 From: Andrii Date: Fri, 31 Jan 2025 20:52:58 -0800 Subject: [PATCH] A4A: add forms for new signup flow --- .../multi-step-form/blueprint-form/index.tsx | 180 ++++++++++++++++++ .../multi-step-form/blueprint-form/style.scss | 5 + .../choice-blueprint/index.tsx | 36 ++++ .../choice-blueprint/style.scss | 22 +++ .../multi-step-form/contact-form/index.tsx | 4 +- .../multi-step-form/contact-form/style.scss | 34 +--- .../finish-signup-survey/index.tsx | 33 ++++ .../components/multi-step-form/index.tsx | 32 +++- .../multi-step-form/personalization/index.tsx | 170 +++++++++++++++++ .../personalization/style.scss | 91 +++++++++ .../components/multi-step-form/style.scss | 8 +- .../signup-wrapper/sidebar-image.tsx | 26 ++- .../components/signup-wrapper/style.scss | 6 +- .../components/step-progress/style.scss | 4 +- 14 files changed, 593 insertions(+), 58 deletions(-) create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx create mode 100644 client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx new file mode 100644 index 0000000000000..e3d8342c1ce91 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/index.tsx @@ -0,0 +1,180 @@ +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import { useState } from 'react'; +import Form from 'calypso/a8c-for-agencies/components/form'; +import FormField from 'calypso/a8c-for-agencies/components/form/field'; +import FormRadio from 'calypso/components/forms/form-radio'; +import FormTextarea from 'calypso/components/forms/form-textarea'; +import './style.scss'; + +type Props = { + onContinue: () => void; +}; + +type FormData = { + topGoal: string; + mainGoal2025: string; + workModel: string; + specificApproach: string; +}; + +const BlueprintForm: React.FC< Props > = ( { onContinue } ) => { + const translate = useTranslate(); + const [ formData, setFormData ] = useState< FormData >( { + topGoal: '', + mainGoal2025: '', + workModel: '', + specificApproach: '', + } ); + + const handleSubmit = ( e: React.FormEvent ) => { + e.preventDefault(); + onContinue(); + }; + + return ( +
+
+ +
+ setFormData( { ...formData, topGoal: 'cutting_edge_tech' } ) } + /> + setFormData( { ...formData, topGoal: 'comprehensive_support' } ) } + /> + setFormData( { ...formData, topGoal: 'lead_generation' } ) } + /> + setFormData( { ...formData, topGoal: 'training_education' } ) } + /> + setFormData( { ...formData, topGoal: 'exclusive_discounts' } ) } + /> +
+ + + +
+ setFormData( { ...formData, mainGoal2025: 'scaling_agency' } ) } + /> + + setFormData( { ...formData, mainGoal2025: 'diversifying_services' } ) + } + /> + setFormData( { ...formData, mainGoal2025: 'increasing_clients' } ) } + /> + setFormData( { ...formData, mainGoal2025: 'expanding_markets' } ) } + /> + setFormData( { ...formData, mainGoal2025: 'strengthening_brand' } ) } + /> +
+ + + +
+ setFormData( { ...formData, workModel: 'refer_customers' } ) } + /> + setFormData( { ...formData, workModel: 'purchase_resell' } ) } + /> + setFormData( { ...formData, workModel: 'combination' } ) } + /> + setFormData( { ...formData, workModel: 'other' } ) } + /> + { formData.workModel === 'other' && ( + { + // TODO: form data + return; + } } + placeholder={ translate( 'Add your explanation' ) } + /> + ) } +
+ + + + ) => + setFormData( { ...formData, specificApproach: e.target.value } ) + } + placeholder={ translate( 'Add your approach' ) } + /> + + +
+ +
+
+
+ ); +}; + +export default BlueprintForm; diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss new file mode 100644 index 0000000000000..9ab018ae1485f --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/blueprint-form/style.scss @@ -0,0 +1,5 @@ +.blueprint-form { + h1 { + text-wrap: pretty; + } +} diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx new file mode 100644 index 0000000000000..315b784b19193 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx @@ -0,0 +1,36 @@ +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import Form from 'calypso/a8c-for-agencies/components/form'; +import './style.scss'; + +type Props = { + onContinue: () => void; + onSkip: () => void; +}; + +const ChoiceBlueprint: React.FC< Props > = ( { onContinue, onSkip } ) => { + const translate = useTranslate(); + + return ( +
+

{ translate( 'Ready?' ) }

+ +
+ + +
+
+ ); +}; + +export default ChoiceBlueprint; diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss new file mode 100644 index 0000000000000..f214cb6360f4e --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss @@ -0,0 +1,22 @@ +.choice-blueprint-form { + h1 { + text-wrap: pretty; + } +} + +.choice-blueprint__text { + font-size: 1rem; + font-weight: 400; + color: var(--studio-gray-60); + max-width: 460px; +} + +.choice-blueprint__buttons { + display: flex; + gap: 24px; + + .components-button { + width: 180px; + justify-content: center; + } +} \ No newline at end of file diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx index 4f1953ba8a4f2..e679b2775d039 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx @@ -62,9 +62,9 @@ const SignupContactForm = ( { onContinue }: Props ) => { return (
diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss index 69d1e2477e4e4..0899819c8c6c2 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss @@ -5,38 +5,6 @@ overflow-y: auto; flex: 1; - // Customize scrollbar - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-track { - background: var(--studio-gray-0); - border-radius: 4px; - } - - &::-webkit-scrollbar-thumb { - background: var(--studio-gray-20); - border-radius: 4px; - - &:hover { - background: var(--studio-gray-30); - } - } -} - -.signup-contact-form { - &.a4a-form { - gap: 1rem; - } - & .a4a-form__heading { - text-align: left; - margin-bottom: 0; - - & .a4a-form__heading-description { - margin: 0; - } - } } .contact-form__phone-input { @@ -92,7 +60,7 @@ &-label { font-size: 0.875rem; - font-weight: 500; + font-weight: 600; color: var(--studio-gray-80); margin-bottom: 8px; } diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx new file mode 100644 index 0000000000000..9662f0f18d305 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx @@ -0,0 +1,33 @@ +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import Form from 'calypso/a8c-for-agencies/components/form'; + +type Props = { + onContinue: () => void; +}; + +const FinishSignupSurvey: React.FC< Props > = ( { onContinue } ) => { + const translate = useTranslate(); + + return ( + +
+ +
+ + ); +}; + +export default FinishSignupSurvey; diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx index 27073b4fc9e81..a343136197764 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx @@ -1,8 +1,11 @@ import { useTranslate } from 'i18n-calypso'; import { useMemo, useState } from 'react'; import StepProgress from '../step-progress'; +import BlueprintForm from './blueprint-form'; +import ChoiceBlueprint from './choice-blueprint'; import SignupContactForm from './contact-form'; - +import FinishSignupSurvey from './finish-signup-survey'; +import PersonalizationForm from './personalization'; import './style.scss'; const MultiStepForm = () => { @@ -11,11 +14,15 @@ const MultiStepForm = () => { const steps = [ { label: translate( 'Sign up' ), isActive: currentStep === 1, isComplete: currentStep > 1 }, - { label: translate( 'Personalize' ), isActive: currentStep === 2, isComplete: currentStep > 2 }, { - label: translate( 'Complete setup' ), - isActive: currentStep === 3, - isComplete: currentStep > 3, + label: translate( 'Personalize' ), + isActive: currentStep === 2 || currentStep === 3 || currentStep === 4, + isComplete: currentStep > 2, + }, + { + label: translate( 'Finish survey' ), + isActive: currentStep === 5, + isComplete: currentStep > 5, }, ]; @@ -24,9 +31,20 @@ const MultiStepForm = () => { case 1: return setCurrentStep( 2 ) } />; case 2: - return setCurrentStep( 3 ) } />; + return setCurrentStep( 3 ) } />; case 3: - return
Finish
; + return ( + setCurrentStep( 4 ) } + onSkip={ () => setCurrentStep( 5 ) } + /> + ); + case 4: + return setCurrentStep( 5 ) } />; + case 5: + return setCurrentStep( 6 ) } />; + case 6: + return

Thank you!

; default: return null; } diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx new file mode 100644 index 0000000000000..91a11bd83757a --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/index.tsx @@ -0,0 +1,170 @@ +import { SearchableDropdown } from '@automattic/components'; +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import { useState, ChangeEvent } from 'react'; +import Form from 'calypso/a8c-for-agencies/components/form'; +import FormField from 'calypso/a8c-for-agencies/components/form/field'; +import { useCountriesAndStates } from 'calypso/a8c-for-agencies/sections/signup/agency-details-form/hooks/use-countries-and-states'; +import FormFieldset from 'calypso/components/forms/form-fieldset'; +import FormSelect from 'calypso/components/forms/form-select'; +import MultiCheckbox from 'calypso/components/forms/multi-checkbox'; + +import './style.scss'; + +interface Props { + onContinue: () => void; +} + +export default function PersonalizationForm( { onContinue }: Props ) { + const translate = useTranslate(); + const { countryOptions } = useCountriesAndStates(); + + const [ country, setCountry ] = useState( '' ); + const [ userType, setUserType ] = useState( '' ); + const [ managedSites, setManagedSites ] = useState( '' ); + const [ servicesOffered, setServicesOffered ] = useState< string[] >( [] ); + const [ productsOffered, setProductsOffered ] = useState< string[] >( [] ); + + const handleSetServicesOffered = ( services: { value: string[] } ) => { + setServicesOffered( services.value ); + }; + + const handleSetProductsOffered = ( products: { value: string[] } ) => { + setProductsOffered( products.value ); + }; + + const handleSubmit = async ( e: React.FormEvent ) => { + e.preventDefault(); + + onContinue(); + }; + + return ( +
+
+
+ + + { + setCountry( value ?? '' ); + } } + options={ countryOptions } + label={ translate( 'Select country' ) } + /> + + + + + + ) => { + setUserType( e.target.value ); + } } + > + + + + + + + + + + + + + ) => { + setManagedSites( e.target.value ); + } } + > + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+ ); +} diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss new file mode 100644 index 0000000000000..cebfcbb0c08d9 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/personalization/style.scss @@ -0,0 +1,91 @@ +.signup-personalization-form { + .signup-multi-step-form__fields { + display: flex; + flex-direction: column; + overflow-y: auto; + flex: 1; + } + + .signup-personalization-form__products-checkbox { + .multi-checkbox label { + flex: 0 1 calc(32% - 16px); // 3 columns for products + + @media (max-width: 782px) { + flex: 0 1 calc(50% - 12px); // 2 columns on tablets + } + + @media (max-width: 600px) { + flex: 0 1 100%; // Full width on mobile + } + } + } + + .form-fieldset { + margin: 0; + padding: 2px; + } + + // Form field styles + .a4a-form__section-field { + margin-bottom: 0; + + &-label { + font-size: rem(14px); + font-weight: 600; + color: var(--studio-gray-80); + margin-bottom: 8px; + } + + &-required { + color: var(--studio-red-50); + margin-left: 4px; + } + } + + .form-select { + width: 100%; + padding: 8px 12px; + border: 1px solid var(--studio-gray-10); + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + + &:focus { + border-color: var(--studio-wordpress-blue); + box-shadow: 0 0 0 2px var(--studio-wordpress-blue-20); + outline: none; + } + + &.is-error { + border-color: var(--studio-red-50); + } + } + + .searchable-dropdown { + width: 100%; + } + + .multi-checkbox { + display: flex; + flex-wrap: wrap; + gap: 12px 24px; + + label { + display: flex; + align-items: center; + margin: 0; + cursor: pointer; + font-size: rem(14px); + color: var(--studio-gray-80); + flex: 0 1 calc(50% - 12px); // 2 columns by default, accounting for gap + + @media (max-width: 600px) { + flex: 0 1 100%; // Full width on mobile + } + } + + .form-checkbox + span { + margin-left: 8px; + } + } +} \ No newline at end of file diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/style.scss index 513436d438f43..4781b8a4a27ae 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/style.scss +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/style.scss @@ -14,15 +14,11 @@ flex-direction: column; padding: 48px 24px; max-width: 600px; - margin: 0 auto; width: 100%; + gap: 16px; } .a4a-form__heading { - text-align: center; - margin-bottom: 40px; - flex-shrink: 0; - &-title { font-size: 2rem; font-weight: 600; @@ -32,9 +28,9 @@ &-description { font-size: 1rem; + font-weight: 400; color: var(--studio-gray-60); max-width: 460px; - margin: 0 auto; } } } diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/sidebar-image.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/sidebar-image.tsx index 452008c94e19a..79ffb88a28de8 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/sidebar-image.tsx +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/sidebar-image.tsx @@ -7,21 +7,37 @@ const SignupSidebarImage = ( { className }: Props ) => { return ( - + - + + + + + + + ); }; diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/style.scss index 0e99465a17e48..47667eef1f832 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/style.scss +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/style.scss @@ -40,7 +40,7 @@ height: auto; circle { - stroke: var(--color-neutral-0); + fill: var(--color-neutral-0); } } @@ -126,8 +126,8 @@ } &__sidebar-image { - circle { - stroke: #022836; + rect { + fill: #022836; } } diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/style.scss b/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/style.scss index e0d19189753fb..e30b91be855ac 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/style.scss +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/style.scss @@ -25,7 +25,7 @@ &.is-active { .step-progress__step-indicator { - background-color: var(--studio-wordpress-blue); + background-color: var(--color-primary-50); } .step-progress__step-label { @@ -36,7 +36,7 @@ &.is-complete { .step-progress__step-indicator { - background-color: var(--studio-wordpress-blue); + background-color: var(--color-primary-50); } .step-progress__step-label {