| 1 |
/** |
| 2 |
* External dependencies. |
| 3 |
*/ |
| 4 |
import classnames from 'classnames'; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies. |
| 8 |
*/ |
| 9 |
import { Icon } from '@wordpress/components'; |
| 10 |
import { useMemo, WPElement } from '@wordpress/element'; |
| 11 |
import { dateI18n } from '@wordpress/date'; |
| 12 |
import { __, _n, _x, sprintf } from '@wordpress/i18n'; |
| 13 |
|
| 14 |
/** |
| 15 |
* Internal dependencies. |
| 16 |
*/ |
| 17 |
import error from './icons/error'; |
| 18 |
import success from './icons/success'; |
| 19 |
|
| 20 |
/** |
| 21 |
* Delete checkbox component. |
| 22 |
* |
| 23 |
* @param {object} props Component props. |
| 24 |
* @param {number} props.failures Number of failed items. |
| 25 |
* @param {string} props.method Sync method. |
| 26 |
* @param {string} props.stateDatetime Sync end date and time. |
| 27 |
* @param {string} props.status Sync status. |
| 28 |
* @param {string} props.trigger Sync trigger. |
| 29 |
* @returns {WPElement} Sync page component. |
| 30 |
*/ |
| 31 |
export default ({ failures, method, stateDatetime, status, trigger }) => { |
| 32 |
/** |
| 33 |
* When the sync was started. |
| 34 |
*/ |
| 35 |
const when = useMemo(() => dateI18n('l F j, Y g:ia', stateDatetime), [stateDatetime]); |
| 36 |
|
| 37 |
/** |
| 38 |
* How the sync completed. |
| 39 |
*/ |
| 40 |
const how = useMemo(() => { |
| 41 |
switch (status) { |
| 42 |
case 'failed': |
| 43 |
return __('Failed.', 'elasticpress'); |
| 44 |
case 'with_errors': |
| 45 |
return failures |
| 46 |
? sprintf( |
| 47 |
/* translators: number of errors */ |
| 48 |
_n( |
| 49 |
'Completed with %d error.', |
| 50 |
'Completed with %d errors.', |
| 51 |
failures, |
| 52 |
'elasticpress', |
| 53 |
), |
| 54 |
failures, |
| 55 |
) |
| 56 |
: __('Completed with errors.', 'elasticpress'); |
| 57 |
case 'aborted': |
| 58 |
return __('Stopped.', 'elasticpress'); |
| 59 |
case 'success': |
| 60 |
return __('Completed successfully.', 'elasticpress'); |
| 61 |
default: |
| 62 |
return __('Completed.', 'elasticpress'); |
| 63 |
} |
| 64 |
}, [failures, status]); |
| 65 |
|
| 66 |
/** |
| 67 |
* Why the sync was started. |
| 68 |
*/ |
| 69 |
const why = useMemo(() => { |
| 70 |
if (method === 'cli') { |
| 71 |
return __('Manual sync from WP CLI.', 'elasticpress'); |
| 72 |
} |
| 73 |
|
| 74 |
switch (trigger) { |
| 75 |
case 'features': |
| 76 |
return __('Automatic sync after settings change.', 'elasticpress'); |
| 77 |
case 'install': |
| 78 |
return __('Automatic sync after installation.', 'elasticpress'); |
| 79 |
case 'manual': |
| 80 |
return __('Manual sync from Sync Settings.', 'elasticpress'); |
| 81 |
case 'upgrade': |
| 82 |
return __('Automatic sync after plugin update.', 'elasticpress'); |
| 83 |
default: |
| 84 |
return null; |
| 85 |
} |
| 86 |
}, [method, trigger]); |
| 87 |
|
| 88 |
/** |
| 89 |
* Whether the sync has errors. |
| 90 |
*/ |
| 91 |
const isError = useMemo(() => { |
| 92 |
return status === 'failed' || status === 'with_errors' || status === 'aborted'; |
| 93 |
}, [status]); |
| 94 |
|
| 95 |
/** |
| 96 |
* Whether the sync was a success. |
| 97 |
*/ |
| 98 |
const isSuccess = useMemo(() => { |
| 99 |
return status === 'success'; |
| 100 |
}, [status]); |
| 101 |
|
| 102 |
return ( |
| 103 |
<div |
| 104 |
className={classnames('ep-previous-sync', { |
| 105 |
'is-error': isError, |
| 106 |
'is-success': isSuccess, |
| 107 |
})} |
| 108 |
> |
| 109 |
<Icon icon={isError ? error : success} /> |
| 110 |
<div className="ep-previous-sync__title"> |
| 111 |
{why |
| 112 |
? sprintf( |
| 113 |
/* translators: %1$s Sync date and time. %2%s sync trigger. */ _x( |
| 114 |
'%1$s — %2$s', |
| 115 |
'Sync info', |
| 116 |
'elasticpress', |
| 117 |
), |
| 118 |
when, |
| 119 |
why, |
| 120 |
) |
| 121 |
: when} |
| 122 |
</div> |
| 123 |
<div className="ep-previous-sync__help">{how}</div> |
| 124 |
</div> |
| 125 |
); |
| 126 |
}; |
| 127 |
|
