-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Domains: Create 100-Year Domain flow #95081
Changes from all commits
74bdffb
17b7c6f
27572cb
8e6a4d4
7ee7f6c
9aef942
c1f458c
08b950c
d84de94
ee06ed1
e1b2ff0
cbd3235
01dfd5c
9a5fce3
0f5c74c
55e23ea
4e48a3d
93cf947
df1c64b
a28c102
85d3a3b
0b08d84
44d33a2
6b904b5
38d3f45
60ac351
d5d233d
dd890b5
95f0522
f2770c6
d2783e2
b5a4110
7f029cd
55931ca
0fd483f
8cc35b8
214dcd3
d4e0192
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
import { OnboardSelect } from '@automattic/data-stores'; | ||
import { HUNDRED_YEAR_DOMAIN_FLOW, addProductsToCart } from '@automattic/onboarding'; | ||
import { MinimalRequestCartProduct } from '@automattic/shopping-cart'; | ||
import { useDispatch, useSelect } from '@wordpress/data'; | ||
import { translate } from 'i18n-calypso'; | ||
import { domainRegistration } from 'calypso/lib/cart-values/cart-items'; | ||
import { | ||
clearSignupDestinationCookie, | ||
setSignupCompleteSlug, | ||
setSignupCompleteFlowName, | ||
} from 'calypso/signup/storageUtils'; | ||
import { ONBOARD_STORE } from '../stores'; | ||
import { stepsWithRequiredLogin } from '../utils/steps-with-required-login'; | ||
import type { ProvidedDependencies, Flow } from './internals/types'; | ||
|
||
const HundredYearDomainFlow: Flow = { | ||
name: HUNDRED_YEAR_DOMAIN_FLOW, | ||
isSignupFlow: true, | ||
|
||
get title() { | ||
return translate( '100-Year Domain' ); | ||
}, | ||
|
||
useSteps() { | ||
const steps = [ | ||
{ | ||
slug: 'domains', | ||
asyncComponent: () => import( './internals/steps-repository/domains' ), | ||
}, | ||
...stepsWithRequiredLogin( [ | ||
{ | ||
slug: 'processing', | ||
asyncComponent: () => import( './internals/steps-repository/processing-step' ), | ||
}, | ||
] ), | ||
]; | ||
|
||
return steps; | ||
}, | ||
|
||
useStepNavigation( _currentStep, navigate ) { | ||
const flowName = this.name; | ||
const checkoutBackUrl = new URL( `/setup/${ flowName }/domains`, window.location.href ); | ||
|
||
const { setDomainCartItem } = useDispatch( ONBOARD_STORE ); | ||
|
||
const { domainCartItem } = useSelect( | ||
( select ) => ( { | ||
domainCartItem: ( select( ONBOARD_STORE ) as OnboardSelect ).getDomainCartItem(), | ||
} ), | ||
[] | ||
); | ||
|
||
async function submit( providedDependencies: ProvidedDependencies = {} ) { | ||
const { domainName, productSlug } = providedDependencies; | ||
|
||
const submittedDomainCartItem = domainRegistration( { | ||
productSlug: productSlug as string, | ||
domain: domainName as string, | ||
extra: { is_hundred_year_domain: true }, | ||
} ); | ||
|
||
switch ( _currentStep ) { | ||
case 'domains': | ||
clearSignupDestinationCookie(); | ||
setDomainCartItem( submittedDomainCartItem ); | ||
return navigate( 'processing' ); | ||
|
||
case 'processing': | ||
setSignupCompleteSlug( providedDependencies.siteSlug ); | ||
setSignupCompleteFlowName( flowName ); | ||
|
||
await addProductsToCart( 'no-site', flowName, [ | ||
domainCartItem as MinimalRequestCartProduct, | ||
] ); | ||
// Delay to keep the "Setting up your legacy..." page showing for 2 seconds | ||
// since there's nothing to actually process in that step | ||
await new Promise( ( resolve ) => setTimeout( resolve, 2000 ) ); | ||
|
||
// use replace instead of assign to remove the processing URL from history | ||
return window.location.replace( | ||
`/checkout/no-site?signup=1&isDomainOnly=1&checkoutBackUrl=${ encodeURIComponent( | ||
checkoutBackUrl.href | ||
) }` | ||
); | ||
} | ||
} | ||
|
||
return { submit }; | ||
}, | ||
}; | ||
|
||
export default HundredYearDomainFlow; |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not certain where best to comment, I think it's this file :) Everything I tested and looked at is working perfectly, it looks really great on all screen sizes. I just found one small inconsistency, a margin of 20px on the left at the 600px breakpoint, classes [.domains .step-container] 100-year-domain_left-margin.mov |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was removed in #84171 but I'm not sure why. Without this, the "Select" domain button doesn't have a "busy" state when it's clicked.