mirror of
https://github.com/vercel/commerce.git
synced 2025-05-18 23:46:58 +00:00
60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
const PreviewBar = ({ isPreview, isDevelopmentMode }) => {
|
|
|
|
if (isPreview && !isDevelopmentMode) {
|
|
return (
|
|
<div className="agility-preview-bar">
|
|
<img className="agility-preview-bar__logo" src="https://media.agilitycms.com/preview-bar/2018-11/agility-logo-preview-bar-1.png" alt="Powered by Agility CMS" />
|
|
<span className="agility-preview-bar__text">You are viewing the latest changes in <strong>Preview Mode</strong>.</span>
|
|
<div>
|
|
<button className="agility-preview-bar__btn agility-preview-bar__btn-share" title="Click to generate a share-able link" onClick={getPreviewLink}>Share</button>
|
|
<button className="agility-preview-bar__btn" title="Click to exit preview" onClick={exitPreview}>Exit Preview</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
} else if(isDevelopmentMode) {
|
|
return (
|
|
<div className="agility-preview-bar">
|
|
<img className="agility-preview-bar__logo" src="https://media.agilitycms.com/preview-bar/2018-11/agility-logo-preview-bar-1.png" alt="Powered by Agility CMS" />
|
|
<span className="agility-preview-bar__text">You are viewing the latest changes in <strong>Development Mode</strong>.</span>
|
|
<div></div>
|
|
</div>
|
|
)
|
|
} else {
|
|
return null
|
|
}
|
|
}
|
|
|
|
const exitPreview = () => {
|
|
const exit = confirm("Would you like to exit Preview Mode?");
|
|
if (exit === true) {
|
|
window.location = `/api/exitPreview?slug=${window.location.pathname}`;
|
|
}
|
|
}
|
|
|
|
const getPreviewLink = () => {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.onload = function () {
|
|
|
|
// Process our return data
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
// What do when the request is successful
|
|
|
|
const previewKey = xhr.responseText;
|
|
const previewLink = `${window.location.pathname}?agilitypreviewkey=${escape(previewKey)}`;
|
|
|
|
prompt("To share this page in preview mode with others, copy the link below:", previewLink);
|
|
|
|
} else {
|
|
// What do when the request fails
|
|
alert('Could not generate Preview Link. This indicates a problem with the API route that generates a Preview Link.')
|
|
}
|
|
};
|
|
|
|
// Create and send a GET request
|
|
xhr.open('GET', '/api/generatePreviewKey');
|
|
xhr.send();
|
|
}
|
|
|
|
export default PreviewBar; |