| 1 |
import React, { useState } from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { Badge } from '../../common/Badge' |
| 4 |
import { Button } from '../../common/Button' |
| 5 |
import { PreviewModal } from '../../common/snippets/SnippetPreviewModal' |
| 6 |
import { DemoPromptBox } from './DemoPromptBox' |
| 7 |
import { hasReached, languageToSnippetType } from './types' |
| 8 |
import type { DemoSnippet, DemoStage } from './types' |
| 9 |
|
| 10 |
interface DemoResultCardProps { |
| 11 |
stage: DemoStage |
| 12 |
snippets: DemoSnippet[] |
| 13 |
typedRefinement: string |
| 14 |
} |
| 15 |
|
| 16 |
interface RowProps { |
| 17 |
snippet: DemoSnippet |
| 18 |
stage: DemoStage |
| 19 |
onPreview: VoidFunction |
| 20 |
} |
| 21 |
|
| 22 |
const ResultRow: React.FC<RowProps> = ({ snippet, stage, onPreview }) => |
| 23 |
<li className="ai-agent-result__row"> |
| 24 |
{hasReached(stage, 'refine-open') && |
| 25 |
<input type="checkbox" checked disabled aria-label={snippet.name} />} |
| 26 |
|
| 27 |
<Badge name={languageToSnippetType(snippet.language)} small /> |
| 28 |
<span className="ai-agent-result__name">{snippet.name}</span> |
| 29 |
|
| 30 |
<Button link type="button" onClick={onPreview}> |
| 31 |
{__('Preview code', 'code-snippets')} |
| 32 |
</Button> |
| 33 |
|
| 34 |
{'applying' !== stage && |
| 35 |
<Button link type="button" className="ai-agent-result__link" aria-hidden="true" tabIndex={-1}> |
| 36 |
{__('Edit', 'code-snippets')} |
| 37 |
</Button>} |
| 38 |
</li> |
| 39 |
|
| 40 |
const RefineSection: React.FC<{ stage: DemoStage, typedRefinement: string }> = ({ stage, typedRefinement }) => |
| 41 |
hasReached(stage, 'refine-open') |
| 42 |
? <> |
| 43 |
<div className="ai-agent-result__edit-head"> |
| 44 |
<span>{__('Select the snippets to change, then describe the change.', 'code-snippets')}</span> |
| 45 |
|
| 46 |
<div className="ai-agent-result__edit-actions"> |
| 47 |
<Button link type="button" aria-hidden="true" tabIndex={-1}> |
| 48 |
{__('Deselect all', 'code-snippets')} |
| 49 |
</Button> |
| 50 |
|
| 51 |
<Button link type="button" aria-hidden="true" tabIndex={-1}> |
| 52 |
{__('Cancel', 'code-snippets')} |
| 53 |
</Button> |
| 54 |
</div> |
| 55 |
</div> |
| 56 |
|
| 57 |
<DemoPromptBox |
| 58 |
value={typedRefinement} |
| 59 |
typing={'typing-refinement' === stage} |
| 60 |
pressed={'applying' === stage} |
| 61 |
submitLabel={__('Apply changes', 'code-snippets')} |
| 62 |
placeholder={__('Describe the changes to the selected snippet(s)…', 'code-snippets')} |
| 63 |
/> |
| 64 |
</> |
| 65 |
: <Button secondary type="button" className="ai-agent-result__make-changes" aria-hidden="true" tabIndex={-1}> |
| 66 |
{__('Make changes', 'code-snippets')} |
| 67 |
</Button> |
| 68 |
|
| 69 |
export const DemoResultCard: React.FC<DemoResultCardProps> = ({ stage, snippets, typedRefinement }) => { |
| 70 |
const [preview, setPreview] = useState<DemoSnippet>() |
| 71 |
|
| 72 |
return ( |
| 73 |
<div className="ai-agent-result"> |
| 74 |
<div className="ai-agent-plan__header"> |
| 75 |
<h2 className="ai-agent-plan__title">{__('Dismissible welcome banner', 'code-snippets')}</h2> |
| 76 |
<span className="ai-agent-plan__badge is-done"> |
| 77 |
{'applying' === stage ? __('Updating…', 'code-snippets') : __('Created', 'code-snippets')} |
| 78 |
</span> |
| 79 |
</div> |
| 80 |
|
| 81 |
<p className="ai-agent-result__lead"> |
| 82 |
{__('In Pro these snippets would now be on your site, inactive. Preview the code, or make changes below.', 'code-snippets')} |
| 83 |
</p> |
| 84 |
|
| 85 |
<ul className="ai-agent-result__rows"> |
| 86 |
{snippets.map(snippet => |
| 87 |
<ResultRow |
| 88 |
key={snippet.key} |
| 89 |
snippet={snippet} |
| 90 |
stage={stage} |
| 91 |
onPreview={() => setPreview(snippet)} |
| 92 |
/>)} |
| 93 |
</ul> |
| 94 |
|
| 95 |
<div className="ai-agent-result__edit"> |
| 96 |
<RefineSection stage={stage} typedRefinement={typedRefinement} /> |
| 97 |
</div> |
| 98 |
|
| 99 |
{preview && <PreviewModal |
| 100 |
title={preview.name} |
| 101 |
code={preview.code} |
| 102 |
type={languageToSnippetType(preview.language)} |
| 103 |
onRequestClose={() => setPreview(undefined)} |
| 104 |
/>} |
| 105 |
</div> |
| 106 |
) |
| 107 |
} |
| 108 |
|
