| 1 |
import React, { useState } from 'react' |
| 2 |
import { __ } from '@wordpress/i18n' |
| 3 |
import { Spinner } from '@wordpress/components' |
| 4 |
import { useRestAPI } from '../../../hooks/useRestAPI' |
| 5 |
import { REST_BASES } from '../../../utils/restAPI' |
| 6 |
import { getSnippetEditUrl, isProSnippet } from '../../../utils/snippets/snippets' |
| 7 |
import { isLicensed } from '../../../utils/screen' |
| 8 |
import { Button } from '../Button' |
| 9 |
import { ErrorTooltip } from '../Tooltip' |
| 10 |
import { UpsellDialog } from '../UpsellDialog' |
| 11 |
import { useCloudSnippetDownloads } from './WithCloudSnippetDownloadsContext' |
| 12 |
import type { CloudSnippetSchema } from '../../../types/schema/CloudSnippetSchema' |
| 13 |
|
| 14 |
export interface DownloadSnippetResponse { |
| 15 |
success: boolean |
| 16 |
snippet_id: number |
| 17 |
link_id: number |
| 18 |
} |
| 19 |
|
| 20 |
export interface CloudSnippetDownloadButtonProps { |
| 21 |
onDownloaded: VoidFunction |
| 22 |
snippet: CloudSnippetSchema |
| 23 |
} |
| 24 |
|
| 25 |
export const CloudSnippetDownloadButton: React.FC<CloudSnippetDownloadButtonProps> = ({ snippet, onDownloaded }) => { |
| 26 |
const { api } = useRestAPI() |
| 27 |
const { downloadRecords, updateDownloadRecord } = useCloudSnippetDownloads() |
| 28 |
const [errorMessage, setErrorMessage] = useState<string>() |
| 29 |
const [isUpsellOpen, setIsUpsellOpen] = useState(false) |
| 30 |
const { isDownloading = false, localId } = downloadRecords[snippet.id] ?? {} |
| 31 |
const localSnippetId = snippet.local_id ?? localId |
| 32 |
|
| 33 |
if (localSnippetId) { |
| 34 |
return ( |
| 35 |
<a className="button button-primary" href={getSnippetEditUrl({ id: localSnippetId })} target="_blank" rel="noopener noreferrer"> |
| 36 |
{__('Edit', 'code-snippets')} |
| 37 |
</a> |
| 38 |
) |
| 39 |
} |
| 40 |
|
| 41 |
if (isProSnippet(snippet) && !isLicensed()) { |
| 42 |
return ( |
| 43 |
<> |
| 44 |
<Button className="cloud-pro-button" onClick={() => setIsUpsellOpen(true)}> |
| 45 |
{__('Pro Only', 'code-snippets')} |
| 46 |
</Button> |
| 47 |
<UpsellDialog isOpen={isUpsellOpen} setIsOpen={setIsUpsellOpen} /> |
| 48 |
</> |
| 49 |
) |
| 50 |
} |
| 51 |
|
| 52 |
const handleDownload = () => { |
| 53 |
updateDownloadRecord(snippet.id, { isDownloading: true }) |
| 54 |
setErrorMessage(undefined) |
| 55 |
|
| 56 |
api.post<DownloadSnippetResponse>(`${REST_BASES.cloud.snippets}/${snippet.id}/download`) |
| 57 |
.then(response => { |
| 58 |
updateDownloadRecord(snippet.id, { localId: response.snippet_id }) |
| 59 |
onDownloaded() |
| 60 |
}) |
| 61 |
.catch((error: unknown) => { |
| 62 |
setErrorMessage('string' === typeof error |
| 63 |
? error |
| 64 |
: __('An error occurred while trying to download the snippet.', 'code-snippets')) |
| 65 |
}) |
| 66 |
.finally(() => updateDownloadRecord(snippet.id, { isDownloading: false })) |
| 67 |
} |
| 68 |
|
| 69 |
return ( |
| 70 |
<> |
| 71 |
{isDownloading && <Spinner />} |
| 72 |
{errorMessage && <ErrorTooltip message={errorMessage} />} |
| 73 |
|
| 74 |
<Button primary onClick={handleDownload} disabled={isDownloading}> |
| 75 |
{__('Download', 'code-snippets')} |
| 76 |
</Button> |
| 77 |
</> |
| 78 |
) |
| 79 |
} |
| 80 |
|
