98d195bb-03ab-4091-8fdd-68090ebcf23f/sms-extension
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Business scraping modal changes

This commit is contained in:
Ritul Jadhav 2026-04-01 11:23:27 +05:30
parent 3ca86c53c6
commit 6bbfc1b740
1 changed files with 70 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
client/src/pages/Businesses.jsx
View File

@ -156,33 +156,33 @@ function BusinessCreatedModal({ business, onClose }) {
const cdnUrls = extractCdnUrls(business?.scrapeArtifacts?.cdnUrls?.length ? { relevantImagePaths: business.scrapeArtifacts.cdnUrls } : business);
const links = normalizeScrapeLinks(business?.scrapeArtifacts?.links);
const prettyJson = useMemo(() => formatPrettyJson(business?.scrapeArtifacts?.json), [business]);
const [viewportWidth, setViewportWidth] = useState(() => (
typeof window === 'undefined' ? 1200 : window.innerWidth
));
useEffect(() => {
if (typeof window === 'undefined') return undefined;
const previousBodyOverflow = document.body.style.overflow;
const previousBodyOverscroll = document.body.style.overscrollBehavior;
const previousHtmlOverflow = document.documentElement.style.overflow;
const previousHtmlOverscroll = document.documentElement.style.overscrollBehavior;
const handleResize = () => setViewportWidth(window.innerWidth);
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
document.body.style.overflow = 'hidden';
document.body.style.overscrollBehavior = 'none';
document.documentElement.style.overflow = 'hidden';
document.documentElement.style.overscrollBehavior = 'none';
return () => {
document.body.style.overflow = previousBodyOverflow;
document.body.style.overscrollBehavior = previousBodyOverscroll;
document.documentElement.style.overflow = previousHtmlOverflow;
document.documentElement.style.overscrollBehavior = previousHtmlOverscroll;
};
}, []);
const preferredWidth = prettyJson
? 1080
: cdnUrls.length > 0 || links.length > 0
? 860
: 560;
const modalWidth = Math.max(320, Math.min(viewportWidth - 32, preferredWidth));
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/55 p-4 backdrop-blur-sm">
<div
className="w-full overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl"
style={{ width: `${modalWidth}px`, maxWidth: 'calc(100vw - 2rem)', maxHeight: '88vh' }}
className="flex h-full w-full flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl"
style={{ width: '920px', maxWidth: 'calc(100vw - 2rem)', height: 'min(78vh, 760px)' }}
>
<div className="flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-5">
<div className="shrink-0 flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-5">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Business created</p>
<h2 className="mt-2 text-2xl font-semibold text-gray-900">{name}</h2>
@ -200,7 +200,8 @@ function BusinessCreatedModal({ business, onClose }) {
</button>
</div>
<div className="overflow-y-auto px-6 py-5 space-y-6">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-5">
<div className="space-y-5 pb-2">
<div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
<div className="flex items-start gap-4">
<div className="w-16 h-16 rounded-xl overflow-hidden bg-white border border-gray-200 shrink-0 flex items-center justify-center">
@ -232,7 +233,7 @@ function BusinessCreatedModal({ business, onClose }) {
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400">Images</p>
<p className="mt-1 text-sm text-gray-500">Captured storefront images are available below.</p>
</div>
<CdnGallery urls={cdnUrls} />
<CdnGallery urls={cdnUrls} compact showLabels={false} />
</section>
)}
@ -243,7 +244,7 @@ function BusinessCreatedModal({ business, onClose }) {
<p className="mt-1 text-sm text-gray-500">Raw storefront data captured during onboarding.</p>
</div>
<div className="overflow-hidden rounded-xl border border-gray-200 bg-gray-950">
<pre className="max-h-80 overflow-auto px-4 py-4 text-xs leading-relaxed text-gray-100">
<pre className="max-h-56 overflow-auto px-4 py-4 text-xs leading-relaxed text-gray-100">
{prettyJson}
</pre>
</div>
@ -275,8 +276,9 @@ function BusinessCreatedModal({ business, onClose }) {
</section>
)}
</div>
</div>
<div className="border-t border-gray-200 px-6 py-4">
<div className="shrink-0 border-t border-gray-200 px-6 py-4">
<button
onClick={onClose}
className="w-full rounded-lg bg-primary-blue py-2 text-sm font-medium text-white transition hover:bg-primary-dark"