diff --git a/client/a8c-for-agencies/sections/signup/index.ts b/client/a8c-for-agencies/sections/signup/index.ts index 80777eb4768366..a52da177575e11 100644 --- a/client/a8c-for-agencies/sections/signup/index.ts +++ b/client/a8c-for-agencies/sections/signup/index.ts @@ -1,3 +1,4 @@ +import { isEnabled } from '@automattic/calypso-config'; import page from '@automattic/calypso-router'; import { makeLayout, render as clientRender } from 'calypso/controller'; import * as controller from './controller'; @@ -5,6 +6,8 @@ import * as controller from './controller'; export default function () { page( '/signup', controller.signUpContext, makeLayout, clientRender ); page( '/signup/finish', controller.finishSignUpContext, makeLayout, clientRender ); - page( '/signup/wc-asia', controller.wcAsiaSignupContext, makeLayout, clientRender ); + if ( isEnabled( 'a4a-wc-asia-signup-enabled' ) ) { + page( '/signup/wc-asia', controller.wcAsiaSignupContext, makeLayout, clientRender ); + } page( '/signup/oauth/token', controller.tokenRedirect, makeLayout, clientRender ); } 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 00000000000000..449c06295d7397 --- /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 { preventWidows } from 'calypso/lib/formatting'; + +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/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 00000000000000..af652a7f21b88d --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/index.tsx @@ -0,0 +1,40 @@ +import { Button } from '@wordpress/components'; +import { useTranslate } from 'i18n-calypso'; +import Form from 'calypso/a8c-for-agencies/components/form'; +import { preventWidows } from 'calypso/lib/formatting'; + +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 00000000000000..cf82a9f7a325e9 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/choice-blueprint/style.scss @@ -0,0 +1,16 @@ +.choice-blueprint__text { + font-size: 1rem; + font-weight: 400; + color: var(--color-neutral-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 new file mode 100644 index 00000000000000..a3571b9612a808 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/index.tsx @@ -0,0 +1,162 @@ +import { Gridicon } from '@automattic/components'; +import { localizeUrl } from '@automattic/i18n-utils'; +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 QuerySmsCountries from 'calypso/components/data/query-countries/sms'; +import FormPhoneInput from 'calypso/components/forms/form-phone-input'; +import FormTextInput from 'calypso/components/forms/form-text-input'; +import { useGetSupportedSMSCountries } from 'calypso/jetpack-cloud/sections/agency-dashboard/downtime-monitoring/contact-editor/hooks'; + +import './style.scss'; + +type FormData = { + firstName: string; + lastName: string; + email: string; + agencyName: string; + businessUrl: string; + phoneNumber: string; +}; + +type Props = { + onContinue: () => void; +}; + +const SignupContactForm = ( { onContinue }: Props ) => { + const translate = useTranslate(); + + const countriesList = useGetSupportedSMSCountries(); + const noCountryList = countriesList.length === 0; + + const [ formData, setFormData ] = useState< FormData >( { + firstName: '', + lastName: '', + email: '', + agencyName: '', + businessUrl: '', + phoneNumber: '', + } ); + + const handlePhoneInputChange = ( data: { phoneNumberFull: string } ) => { + setFormData( ( prev ) => ( { + ...prev, + phoneNumber: data.phoneNumberFull, + } ) ); + }; + + const handleInputChange = + ( field: keyof FormData ) => ( event: React.ChangeEvent< HTMLInputElement > ) => { + setFormData( ( prev ) => ( { + ...prev, + [ field ]: event.target.value, + } ) ); + }; + + const handleSubmit = ( e: React.FormEvent ) => { + e.preventDefault(); + onContinue(); + }; + + return ( +
+
+
+ + + + + + + +
+ + + + + + + + + + + + + + { noCountryList && } + + + + + +
+

+ { translate( + "By clicking 'Continue', you agree to the{{break}}{{/break}}{{link}}Terms of the Automattic for Agencies Platform Agreement{{icon}}{{/icon}}{{/link}}.", + { + components: { + break:
, + link: ( + + ), + icon: , + }, + } + ) } +

+
+
+ +
+
+
+ ); +}; + +export default SignupContactForm; 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 new file mode 100644 index 00000000000000..3062539f37da99 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/contact-form/style.scss @@ -0,0 +1,99 @@ +.signup-multi-step-form__fields { + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: auto; + flex: 1; +} + +.contact-form__phone-input { + display: flex; + flex-direction: row; + gap: 1rem; + + .form-phone-input__country { + flex: 1; + } + + .form-phone-input__phone-number { + flex: 1; + } +} + +.signup-contact-form__tos { + p { + font-size: 0.875rem; + } +} + +.signup-multi-step-form__name-fields { + display: flex; + flex-direction: row; + gap: 24px; + + div { + flex-grow: 1; + } +} + +.signup-multi-step-form__terms { + text-align: center; + font-size: 0.875rem; + color: var(--color-neutral-40); + margin-top: 16px; + + a { + color: var(--studio-wordpress-blue); + text-decoration: none; + } + + .signup-multi-step-form__terms a:hover { + text-decoration: underline; + } +} + +// Form field styles +.a4a-form__section-field { + margin-bottom: 0; + padding: 2px; +} + +.a4a-form__section-field-required { + color: var(--studio-red-50); + margin-left: 4px; +} + +.a4a-form__section-field-optional { + color: var(--color-neutral-20); + font-weight: normal; + margin-left: 4px; +} + +.form-text-input { + width: 100%; + padding: 8px 12px; + border: 1px solid var(--color-neutral-10); + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.form-text-input:focus { + border-color: var(--studio-wordpress-blue); + box-shadow: 0 0 0 2px var(--studio-wordpress-blue-20); + outline: none; +} + +.form-text-input.is-error { + border-color: var(--studio-red-50); +} + +.a4a-form__error { + color: var(--studio-red-50); + font-size: 0.75rem; + margin-top: 4px; +} + +.a4a-form__error.hidden { + display: none; +} 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 00000000000000..2cc753a86ee98f --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/finish-signup-survey/index.tsx @@ -0,0 +1,28 @@ +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 new file mode 100644 index 00000000000000..a3431361977640 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/index.tsx @@ -0,0 +1,62 @@ +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 = () => { + const translate = useTranslate(); + const [ currentStep, setCurrentStep ] = useState( 1 ); + + const steps = [ + { label: translate( 'Sign up' ), isActive: currentStep === 1, isComplete: currentStep > 1 }, + { + label: translate( 'Personalize' ), + isActive: currentStep === 2 || currentStep === 3 || currentStep === 4, + isComplete: currentStep > 2, + }, + { + label: translate( 'Finish survey' ), + isActive: currentStep === 5, + isComplete: currentStep > 5, + }, + ]; + + const currentForm = useMemo( () => { + switch ( currentStep ) { + case 1: + return setCurrentStep( 2 ) } />; + case 2: + return setCurrentStep( 3 ) } />; + case 3: + return ( + setCurrentStep( 4 ) } + onSkip={ () => setCurrentStep( 5 ) } + /> + ); + case 4: + return setCurrentStep( 5 ) } />; + case 5: + return setCurrentStep( 6 ) } />; + case 6: + return

Thank you!

; + default: + return null; + } + }, [ currentStep ] ); + + return ( +
+ + + { currentForm } +
+ ); +}; + +export default MultiStepForm; 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 00000000000000..91a11bd83757a9 --- /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 00000000000000..cdabca47d95dd2 --- /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; + } + + .a4a-form__section-field-label { + font-size: rem(14px); + font-weight: 600; + color: var(--color-neutral-80); + margin-bottom: 8px; + } + + .a4a-form__section-field-required { + color: var(--studio-red-50); + margin-left: 4px; + } + + .form-select { + width: 100%; + padding: 8px 12px; + border: 1px solid var(--color-neutral-10); + border-radius: 4px; + font-size: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; + } + + .form-select:focus { + border-color: var(--studio-wordpress-blue); + box-shadow: 0 0 0 2px var(--studio-wordpress-blue-20); + outline: none; + } + + .form-select.is-error { + border-color: var(--studio-red-50); + } + + .searchable-dropdown { + width: 100%; + } + + .multi-checkbox { + display: flex; + flex-wrap: wrap; + gap: 12px 24px; + } + + .multi-checkbox label { + display: flex; + align-items: center; + margin: 0; + cursor: pointer; + font-size: rem(14px); + color: var(--color-neutral-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 + } + } + + .multi-checkbox .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 new file mode 100644 index 00000000000000..cd86ad82f1728b --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/multi-step-form/style.scss @@ -0,0 +1,24 @@ +.signup-multi-step-form { + .a4a-form { + padding: 48px 24px; + max-width: 600px; + width: 100%; + gap: 16px; + } + + .a4a-form__heading { + .a4a-form__heading-title { + font-size: 2rem; + font-weight: 600; + margin-bottom: 16px; + color: var(--color-neutral-100); + } + + .a4a-form__heading-description { + font-size: 1rem; + font-weight: 400; + color: var(--color-neutral-60); + max-width: 460px; + } + } +} diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/index.tsx index 0ba9351a6a7685..54431c8cddb7b7 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/index.tsx +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/signup-wrapper/index.tsx @@ -5,6 +5,7 @@ import A4ALogo, { import { useIsDarkMode } from 'calypso/a8c-for-agencies/hooks/use-is-dark-mode'; import SignupSidebarImage from './sidebar-image'; import SignupTestimonial from './testimonial'; + import './style.scss'; type Props = { 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 452008c94e19af..79ffb88a28de8e 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 0e99465a17e48d..6cedab317d75b2 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 @@ -9,7 +9,7 @@ margin: 16px; border-radius: 16px; //stylelint-disable-line scales/radii - &__left { + .signup-wrapper__left { display: none; position: relative; background: var(--color-neutral-0); @@ -27,11 +27,11 @@ } } - &__logo { + .signup-wrapper__logo { margin-block-start: 1rem; } - &__sidebar-image { + .signup-wrapper__sidebar-image { position: relative; left: 50%; transform: translateX(-50%); @@ -39,12 +39,12 @@ max-width: 100%; height: auto; - circle { - stroke: var(--color-neutral-0); + rect { + fill: var(--color-neutral-0); } } - &__testimonial { + .signup-wrapper-testimonial { color: var(--color-text); padding: 24px; background: var(--color-surface); @@ -53,111 +53,143 @@ position: relative; top: -1rem; - &-text { + .signup-wrapper-testimonial-text { font-size: 1rem; line-height: 1.5; margin-bottom: 24px; color: var(--color-text); } - &-author { + .signup-wrapper-testimonial-author { display: flex; align-items: center; gap: 12px; } - &-avatar { + .signup-wrapper-testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-neutral-5); } - &-info { + .signup-wrapper-testimonial-info { display: flex; flex-direction: column; gap: 4px; } - &-name { + .signup-wrapper-testimonial-name { font-weight: 600; font-size: 1rem; color: var(--color-text); } - &-title { - font-weight: 600; - font-size: 1rem; - color: var(--color-text); + .signup-wrapper-testimonial-title { + font-weight: 600; + font-size: 1rem; + color: var(--color-text); } - &-url { + .signup-wrapper-testimonial-url { font-size: 0.875rem; - color: var(--color-text-subtle);; + color: var(--color-text-subtle); text-decoration: underline; - &:visited { - color: var(--color-text-subtle);; + .signup-wrapper-testimonial-url:visited { + color: var(--color-text-subtle); } } } - &__right { + .signup-wrapper__right { flex: 1; padding: 32px; background: inherit; border-radius: 4px; - overflow: hidden; + overflow-y: auto; + max-height: 100%; + scrollbar-width: thin; + scrollbar-gutter: stable; + + /* Custom scrollbar styling for webkit browsers */ + &::-webkit-scrollbar { + width: 8px; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-neutral-10); + border-radius: 4px; + + &:hover { + background-color: var(--color-neutral-20); + } + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } @include break-medium { - padding: 48px; + padding: 48px 48px 48px 32px; } } @media (prefers-color-scheme: dark) { background-color: #021B24; - &__left { + .signup-wrapper__left { background: #022836; } - &__logo { - fill: var(--studio-white); + .signup-wrapper__logo { + fill: var(--color-surface); } - &__sidebar-image { - circle { - stroke: #022836; + .signup-wrapper__sidebar-image { + rect { + fill: #022836; } } - &__testimonial { - color: var(--studio-white); + .signup-wrapper-testimonial { + color: var(--color-surface); background: #02506E; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); - &-text { - color: var(--studio-gray-0, #f6f7f7); + .signup-wrapper-testimonial-text { + color: var(--color-neutral-0); } - &-avatar { - background: var(--studio-gray-50, #646970); + .signup-wrapper-testimonial-avatar { + background: var(--color-neutral-50); } - &-name { - color: var(--studio-white); + .signup-wrapper-testimonial-name { + color: var(--color-surface); } - &-title { - color: var(--studio-white); + .signup-wrapper-testimonial-title { + color: var(--color-surface); } - &-url { - color: var(--studio-white); + .signup-wrapper-testimonial-url { + color: var(--color-surface); &:visited { - color: var(--studio-white); + color: var(--color-surface); + } + } + } + + .signup-wrapper__right { + &::-webkit-scrollbar-thumb { + background-color: rgba(255, 255, 255, 0.2); + + &:hover { + background-color: rgba(255, 255, 255, 0.3); } } } diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/index.tsx new file mode 100644 index 00000000000000..ab58f3add17c2a --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/index.tsx @@ -0,0 +1,38 @@ +import clsx from 'clsx'; + +import './style.scss'; + +type Step = { + label: string; + isActive: boolean; + isComplete: boolean; +}; + +type Props = { + steps: Step[]; +}; + +const StepProgress = ( { steps }: Props ) => { + return ( +
+
+
+ { steps.map( ( step ) => ( +
+
+ { step.label } +
+ ) ) } +
+
+
+ ); +}; + +export default StepProgress; 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 new file mode 100644 index 00000000000000..0352975c3bd11f --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/components/step-progress/style.scss @@ -0,0 +1,73 @@ +.step-progress { + width: 100%; + background: var(--studio-white); + + .step-progress__steps { + max-width: 600px; + margin: 0 auto; + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + } + + .step-progress__steps-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + width: 100%; + } + + .step-progress__step { + display: flex; + flex-direction: column; + gap: 8px; + } + + .step-progress__step.is-active { + .step-progress__step-indicator { + background-color: var(--color-primary-50); + } + + .step-progress__step-label { + color: var(--color-neutral-80); + font-weight: 600; + } + } + + .step-progress__step.is-complete { + .step-progress__step-indicator { + background-color: var(--color-primary-50); + } + + .step-progress__step-label { + color: var(--color-neutral-80); + font-weight: 600; + } + } + + .step-progress__step:not(.is-active):not(.is-complete) { + .step-progress__step-indicator { + background-color: var(--color-neutral-5); + } + + .step-progress__step-label { + color: var(--color-neutral-40); + } + } + + .step-progress__step-indicator { + height: 8px; + width: 100%; + border-radius: 4px; + transition: background-color 0.2s ease; + } + + .step-progress__step-label { + font-size: 0.875rem; + font-weight: 500; + transition: color 0.2s ease; + order: -1; + margin-bottom: 4px; + } +} \ No newline at end of file diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/index.tsx b/client/a8c-for-agencies/sections/signup/signup-v2/index.tsx index ab58a9fb57bb29..963a85b6ab5410 100644 --- a/client/a8c-for-agencies/sections/signup/signup-v2/index.tsx +++ b/client/a8c-for-agencies/sections/signup/signup-v2/index.tsx @@ -1,15 +1,10 @@ +import MultiStepForm from './components/multi-step-form'; import SignupWrapper from './components/signup-wrapper'; -type Flow = 'regular' | 'wc-asia'; - -type Props = { - flow?: Flow; -}; - -const AgencySignupV2 = ( { flow }: Props ) => { +const AgencySignupV2 = () => { return ( -
Agency Signup V2: { flow }
+ ); }; diff --git a/client/a8c-for-agencies/sections/signup/signup-v2/types.ts b/client/a8c-for-agencies/sections/signup/signup-v2/types.ts new file mode 100644 index 00000000000000..64c508fd0cbd21 --- /dev/null +++ b/client/a8c-for-agencies/sections/signup/signup-v2/types.ts @@ -0,0 +1 @@ +export type Flow = 'regular' | 'wc-asia'; diff --git a/config/a8c-for-agencies-development.json b/config/a8c-for-agencies-development.json index 310e3d2b83290c..cd17d7260f0399 100644 --- a/config/a8c-for-agencies-development.json +++ b/config/a8c-for-agencies-development.json @@ -46,7 +46,8 @@ "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, "a4a-pressable-referrals": true, - "a4a-updated-add-new-site": true + "a4a-updated-add-new-site": true, + "a4a-wc-asia-signup-enabled": true }, "enable_all_sections": false, "sections": { diff --git a/config/a8c-for-agencies-horizon.json b/config/a8c-for-agencies-horizon.json index 1ce052f46e5d04..186080d3ca5589 100644 --- a/config/a8c-for-agencies-horizon.json +++ b/config/a8c-for-agencies-horizon.json @@ -39,7 +39,8 @@ "a4a-migrations-page-v2": true, "a8c-for-agencies-agency-tier": true, "a4a-pressable-referrals": true, - "a4a-updated-add-new-site": true + "a4a-updated-add-new-site": true, + "a4a-wc-asia-signup-enabled": true }, "enable_all_sections": false, "sections": {