payload-wordpress-migrator
Version:
A PayloadCMS plugin for WordPress migration - migrate and manage WordPress content directly in your Payload admin dashboard
223 lines (222 loc) • 12.7 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import styles from './BeforeDashboardClient.module.css';
export const BeforeDashboardClient = ({ forms: initialForms })=>{
const [loading, setLoading] = useState(false);
const [copiedId, setCopiedId] = useState(null);
const [forms, setForms] = useState(initialForms || []);
if (!forms || !Array.isArray(forms)) {
return /*#__PURE__*/ _jsx("div", {
children: "No HubSpot forms available"
});
}
const totalSubmissions = forms.reduce((sum, form)=>sum + form.stats.submissions, 0);
const totalViews = forms.reduce((sum, form)=>sum + form.stats.views, 0);
const validConversionRates = forms.filter((form)=>form.stats.conversionRate !== undefined);
const averageConversionRate = validConversionRates.length > 0 ? validConversionRates.reduce((sum, form)=>sum + form.stats.conversionRate, 0) / validConversionRates.length : undefined;
const copyToClipboard = (text)=>{
void navigator.clipboard.writeText(text);
setCopiedId(text);
setTimeout(()=>setCopiedId(null), 2000);
};
if (loading) {
return /*#__PURE__*/ _jsxs("div", {
className: styles.hubspotDashboard,
children: [
/*#__PURE__*/ _jsx("div", {
className: styles.loadingSpinner
}),
"Loading HubSpot dashboard..."
]
});
}
return /*#__PURE__*/ _jsxs("div", {
className: "gutter--left gutter--right collection-list__wrap",
children: [
/*#__PURE__*/ _jsxs("div", {
className: styles.hubspotDashboardHeader,
children: [
/*#__PURE__*/ _jsx("h1", {
children: "HubSpot Forms Overview"
}),
/*#__PURE__*/ _jsx("button", {
className: styles.refreshButton,
onClick: async ()=>{
try {
setLoading(true);
const response = await fetch('/api/hubspot/forms?refresh=true');
if (!response.ok) {
throw new Error('Failed to refresh forms');
}
const newForms = await response.json();
setForms(newForms);
} catch (error) {
console.error('Error refreshing forms:', error);
} finally{
setLoading(false);
}
},
type: "button",
children: "Refresh Data"
})
]
}),
/*#__PURE__*/ _jsxs("div", {
className: styles.hubspotDashboardStats,
children: [
/*#__PURE__*/ _jsxs("div", {
className: styles.statCard,
children: [
/*#__PURE__*/ _jsx("h3", {
children: "Total Forms"
}),
/*#__PURE__*/ _jsx("p", {
children: forms.length
})
]
}),
/*#__PURE__*/ _jsxs("div", {
className: styles.statCard,
children: [
/*#__PURE__*/ _jsx("h3", {
children: "Total Views"
}),
/*#__PURE__*/ _jsx("p", {
children: totalViews
})
]
}),
/*#__PURE__*/ _jsxs("div", {
className: styles.statCard,
children: [
/*#__PURE__*/ _jsx("h3", {
children: "Total Submissions"
}),
/*#__PURE__*/ _jsx("p", {
children: totalSubmissions
})
]
}),
/*#__PURE__*/ _jsxs("div", {
className: styles.statCard,
children: [
/*#__PURE__*/ _jsx("h3", {
children: "Avg. Conversion Rate"
}),
/*#__PURE__*/ _jsx("p", {
children: averageConversionRate ? `${(averageConversionRate * 100).toFixed(1)}%` : 'N/A'
})
]
})
]
}),
/*#__PURE__*/ _jsxs("div", {
className: styles.hubspotDashboardRecent,
children: [
/*#__PURE__*/ _jsx("h3", {
children: "All Available Forms"
}),
/*#__PURE__*/ _jsx("div", {
className: styles.tableContainer,
children: /*#__PURE__*/ _jsxs("table", {
children: [
/*#__PURE__*/ _jsx("thead", {
children: /*#__PURE__*/ _jsxs("tr", {
children: [
/*#__PURE__*/ _jsx("th", {
children: "Form Name"
}),
/*#__PURE__*/ _jsx("th", {
children: "Form ID"
}),
/*#__PURE__*/ _jsx("th", {
children: "Views"
}),
/*#__PURE__*/ _jsx("th", {
children: "Submissions"
}),
/*#__PURE__*/ _jsx("th", {
children: "Conversion Rate"
})
]
})
}),
/*#__PURE__*/ _jsx("tbody", {
children: forms.sort((a, b)=>b.stats.views - a.stats.views).map((form)=>/*#__PURE__*/ _jsxs("tr", {
children: [
/*#__PURE__*/ _jsx("td", {
children: form.name
}),
/*#__PURE__*/ _jsx("td", {
children: /*#__PURE__*/ _jsxs("div", {
className: styles.copyContainer,
children: [
form.guid,
/*#__PURE__*/ _jsx("button", {
className: styles.copyButton,
onClick: ()=>copyToClipboard(form.guid),
title: "Copy to clipboard",
type: "button",
children: copiedId === form.guid ? /*#__PURE__*/ _jsx("svg", {
fill: "none",
height: "16",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
width: "16",
xmlns: "http://www.w3.org/2000/svg",
children: /*#__PURE__*/ _jsx("polyline", {
points: "20 6 9 17 4 12"
})
}) : /*#__PURE__*/ _jsxs("svg", {
fill: "none",
height: "16",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
width: "16",
xmlns: "http://www.w3.org/2000/svg",
children: [
/*#__PURE__*/ _jsx("rect", {
height: "13",
rx: "2",
ry: "2",
width: "13",
x: "9",
y: "9"
}),
/*#__PURE__*/ _jsx("path", {
d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
})
]
})
})
]
})
}),
/*#__PURE__*/ _jsx("td", {
children: form.stats.views
}),
/*#__PURE__*/ _jsx("td", {
children: form.stats.submissions
}),
/*#__PURE__*/ _jsx("td", {
children: form.stats.conversionRate === undefined ? 'N/A' : `${(form.stats.conversionRate * 100).toFixed(1)}%`
})
]
}, form.guid))
})
]
})
})
]
})
]
});
};
//# sourceMappingURL=BeforeDashboardClient.js.map