-
Notifications
You must be signed in to change notification settings - Fork 2k
/
index.jsx
131 lines (116 loc) · 4.27 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { sprintf } from '@wordpress/i18n';
import { useI18n } from '@wordpress/react-i18n';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { useRef, useState, useEffect } from 'react';
import { LoadingEllipsis } from 'calypso/components/loading-ellipsis';
import { useInterval } from 'calypso/lib/interval/use-interval';
import './style.scss';
// Default estimated time to perform "loading"
const DURATION_IN_MS = 6000;
const flowsWithDesignPicker = [ 'setup-site', 'do-it-for-me' ];
const useSteps = ( { flowName, hasPaidDomain, isDestinationSetupSiteFlow } ) => {
const { __ } = useI18n();
let steps = [];
switch ( flowName ) {
case 'launch-site':
steps = [ { title: __( 'Your site will be live shortly.' ) } ]; // copy from 'packages/launch/src/focused-launch/success'
break;
case 'domain':
steps = [ { title: __( 'Preparing your domain' ) } ];
break;
case 'site-content-collection':
steps = [ { title: __( 'Saving your content' ) }, { title: __( 'Closing the loop' ) } ];
break;
default:
steps = [
! isDestinationSetupSiteFlow && { title: __( 'Building your site' ) },
hasPaidDomain && { title: __( 'Getting your domain' ) },
! isDestinationSetupSiteFlow && { title: __( 'Applying design' ) },
];
}
if ( flowsWithDesignPicker.includes( flowName ) ) {
// Custom durations give a more believable loading effect while setting up
// the site with headstart. Which can take quite a long time.
steps = [
{ title: __( 'Laying the foundations' ), duration: 7000 },
{ title: __( 'Turning on the lights' ), duration: 3000 },
{ title: __( 'Making it beautiful' ), duration: 4000 },
{ title: __( 'Personalizing your site' ), duration: 7000 },
{ title: __( 'Sprinkling some magic' ), duration: 4000 },
{ title: __( 'Securing your data' ), duration: 9000 },
{ title: __( 'Enabling encryption' ), duration: 3000 },
{ title: __( 'Optimizing your content' ), duration: 6000 },
{ title: __( 'Applying a shiny top coat' ), duration: 4000 },
{ title: __( 'Closing the loop' ) },
];
}
return useRef( steps.filter( Boolean ) );
};
// This component is cloned from the CreateSite component of Gutenboarding flow
// to work with the onboarding signup flow.
export default function ReskinnedProcessingScreen( props ) {
const { __ } = useI18n();
const steps = useSteps( props );
const { isDestinationSetupSiteFlow, flowName } = props;
const totalSteps = steps.current.length;
const shouldShowNewSpinner =
isDestinationSetupSiteFlow || flowsWithDesignPicker.includes( flowName );
const [ currentStep, setCurrentStep ] = useState( 0 );
const defaultDuration = DURATION_IN_MS / totalSteps;
const duration = steps.current[ currentStep ]?.duration || defaultDuration;
/**
* Completion progress: 0 <= progress <= 1
*/
const progress = ( currentStep + 1 ) / totalSteps;
const isComplete = progress >= 1;
useInterval(
() => setCurrentStep( ( s ) => s + 1 ),
// Enable the interval when progress is incomplete.
isComplete ? null : duration
);
// Force animated progress bar to start at 0
const [ hasStarted, setHasStarted ] = useState( false );
useEffect( () => {
const id = setTimeout( () => setHasStarted( true ), 750 );
return () => clearTimeout( id );
}, [] );
return (
<div
className={ classnames( 'reskinned-processing-screen', {
'is-force-centered': shouldShowNewSpinner && totalSteps === 0,
} ) }
>
<h1 className="reskinned-processing-screen__progress-step">
{ steps.current[ currentStep ]?.title }
</h1>
{ shouldShowNewSpinner && <LoadingEllipsis /> }
{ ! shouldShowNewSpinner && (
<>
<div
className="reskinned-processing-screen__progress-bar"
style={ {
'--progress': ! hasStarted ? /* initial 10% progress */ 0.1 : progress,
} }
/>
{ totalSteps > 1 && (
<p className="reskinned-processing-screen__progress-numbered-steps">
{
// translators: these are progress steps. Eg: step 1 of 4.
sprintf( __( 'Step %(currentStep)d of %(totalSteps)d' ), {
currentStep: currentStep + 1,
totalSteps,
} )
}
</p>
) }
</>
) }
</div>
);
}
ReskinnedProcessingScreen.propTypes = {
flowName: PropTypes.string,
hasPaidDomain: PropTypes.bool,
isDestinationSetupSiteFlow: PropTypes.bool,
};