> ## Documentation Index > Fetch the complete documentation index at: https://docs.useparagon.com/llms.txt > Use this file to discover all available pages before exploring further. # Shopify > Connect to your users' Shopify accounts. export const IntegrationsCompatibility = ({workflows = true, actionkit = false, proxy = true, managedSync = false, authType = "Basic Auth", integrationName: integrationNameProp, integrationSlug: integrationSlugProp}) => { const FEATURE_REQUEST_ENDPOINT = "https://agosnlmllwykglihfhiw.supabase.co/functions/v1/handle-vote"; const FEATURE_REQUEST_HEADERS = { "Content-Type": "application/json", "Authorization": `Bearer sb_publishable_DlIzCjWe8NiqjZnLziegbg_P-w5L9X4`, 'apikey': `sb_pubishable_DlIzCjWe8NiqjZnLziegbg_P-w5L9X4` }; const SESSION_VOTE_PREFIX = "paragon_compat_vote:"; const PURPLE = "rgb(102, 69, 230)"; const slugifyFeature = label => label.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, ""); const integrationKeyFromPathname = pathname => { if (!pathname) return ""; const match = pathname.match(/\/(?:resources\/)?integrations\/([^/?#]+)/); return match ? decodeURIComponent(match[1]).replace(/\/$/, "") : ""; }; const voteStorageKey = (integrationKey, featureKey) => `${SESSION_VOTE_PREFIX}${integrationKey}:${featureKey}`; const readVoteFromStorage = (integrationKey, featureKey) => { if (typeof sessionStorage === "undefined") return false; try { return sessionStorage.getItem(voteStorageKey(integrationKey, featureKey)) === "1"; } catch { return false; } }; const writeVoteToStorage = (integrationKey, featureKey) => { try { sessionStorage.setItem(voteStorageKey(integrationKey, featureKey), "1"); } catch {} }; const readPageTitleFallback = () => { if (typeof document === "undefined") return ""; const h1 = document.querySelector("article h1") || document.querySelector("main h1") || document.querySelector('[class*="title"] h1') || document.querySelector("h1"); const text = h1?.textContent?.trim(); return text || ""; }; const getRuntimeConfig = () => { if (typeof window === "undefined") return null; return window.__PARAGON_FEATURE_REQUEST__ ?? null; }; const resolveEndpoint = () => { const rt = getRuntimeConfig(); if (rt?.endpoint) return String(rt.endpoint).trim(); return String(FEATURE_REQUEST_ENDPOINT || "").trim(); }; const resolveHeaders = () => { const rt = getRuntimeConfig(); const base = { ...FEATURE_REQUEST_HEADERS, ...rt?.headers && typeof rt.headers === "object" ? rt.headers : {} }; return base; }; const isValidEmail = s => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/).test(String(s).trim()); const renderCompatCheckSvg = (sizePx = 18) => ; const products = useMemo(() => [{ label: "Managed Sync", value: managedSync }, { label: "ActionKit", value: actionkit }, { label: "Workflows", value: workflows }, { label: "Proxy API", value: proxy }, { label: "Auth Type", value: authType }], [actionkit, managedSync, workflows, proxy, authType]); const [mounted, setMounted] = useState(false); const [resolvedIntegrationKey, setResolvedIntegrationKey] = useState(() => integrationSlugProp?.trim() || ""); const [resolvedDisplayName, setResolvedDisplayName] = useState(() => integrationNameProp?.trim() || "Integration"); const [inlineFormOpen, setInlineFormOpen] = useState(false); const [formFeature, setFormFeature] = useState({ featureLabel: "", featureKey: "" }); const [email, setEmail] = useState(""); const [description, setDescription] = useState(""); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(""); const [voteClickError, setVoteClickError] = useState(""); const [voteLogging, setVoteLogging] = useState(false); const [loggingFeatureKey, setLoggingFeatureKey] = useState(""); const [, bumpVoteUi] = useState(0); const inlineCardRef = useRef(null); useEffect(() => { setMounted(true); const path = typeof window !== "undefined" ? window.location.pathname : ""; const fromPath = integrationSlugProp?.trim() || integrationKeyFromPathname(path); setResolvedIntegrationKey(fromPath); const fromDom = readPageTitleFallback(); const name = integrationNameProp?.trim() || fromDom || (fromPath ? fromPath.replace(/-/g, " ") : "Integration"); setResolvedDisplayName(name); }, [integrationNameProp, integrationSlugProp]); const dismissInlineForm = useCallback(() => { setInlineFormOpen(false); setSubmitError(""); }, []); const handleRequestClick = useCallback(async ({featureLabel, featureKey}) => { setVoteClickError(""); const integrationKey = resolvedIntegrationKey || integrationKeyFromPathname(typeof window !== "undefined" ? window.location.pathname : ""); if (!integrationKey) { setVoteClickError("Could not determine integration. Set the integrationSlug prop on this page."); return; } if (readVoteFromStorage(integrationKey, featureKey)) { return; } setLoggingFeatureKey(featureKey); setVoteLogging(true); const votedAt = new Date().toISOString(); const ctaPayload = { integration_key: integrationKey, integration_name: resolvedDisplayName, feature_key: featureKey, feature_label: featureLabel, vote_phase: "cta_click", voted_at: votedAt }; try { const endpoint = resolveEndpoint(); if (endpoint) { const res = await fetch(endpoint, { method: "POST", headers: resolveHeaders(), body: JSON.stringify(ctaPayload) }); if (!res.ok) { const text = await res.text().catch(() => ""); throw new Error(text || `Request failed (${res.status})`); } } else if (typeof console !== "undefined" && console.warn) { console.warn("[IntegrationsCompatibility] FEATURE_REQUEST_ENDPOINT is empty; vote not sent. Set endpoint or window.__PARAGON_FEATURE_REQUEST__."); } writeVoteToStorage(integrationKey, featureKey); bumpVoteUi(v => v + 1); setFormFeature({ featureLabel, featureKey }); setEmail(""); setDescription(""); setSubmitError(""); setInlineFormOpen(true); } catch (err) { setVoteClickError(err instanceof Error ? err.message : "Could not log your vote. Please try again."); } finally { setVoteLogging(false); setLoggingFeatureKey(""); } }, [resolvedIntegrationKey, resolvedDisplayName]); useEffect(() => { if (!inlineFormOpen) return undefined; const id = window.setTimeout(() => { inlineCardRef.current?.scrollIntoView?.({ behavior: "smooth", block: "nearest" }); }, 80); return () => window.clearTimeout(id); }, [inlineFormOpen]); const submitEnrichment = useCallback(async () => { const trimmed = email.trim(); if (!isValidEmail(trimmed)) { setSubmitError("Please enter a valid work email."); return; } const integrationKey = resolvedIntegrationKey || integrationKeyFromPathname(typeof window !== "undefined" ? window.location.pathname : ""); if (!integrationKey) { setSubmitError("Could not determine integration. Set the integrationSlug prop on this page."); return; } const {featureKey, featureLabel} = formFeature; const endpoint = resolveEndpoint(); const enrichedAt = new Date().toISOString(); const payload = { integration_key: integrationKey, integration_name: resolvedDisplayName, feature_key: featureKey, feature_label: featureLabel, vote_phase: "enrichment", email: trimmed, description: description.trim() || undefined, voted_at: enrichedAt, enriched_at: enrichedAt }; setSubmitting(true); setSubmitError(""); try { if (endpoint) { const res = await fetch(endpoint, { method: "POST", headers: resolveHeaders(), body: JSON.stringify(payload) }); if (!res.ok) { const text = await res.text().catch(() => ""); throw new Error(text || `Request failed (${res.status})`); } } else if (typeof console !== "undefined" && console.warn) { console.warn("[IntegrationsCompatibility] FEATURE_REQUEST_ENDPOINT is empty; enrichment not sent. Set endpoint or window.__PARAGON_FEATURE_REQUEST__."); } setInlineFormOpen(false); setEmail(""); setDescription(""); } catch (err) { setSubmitError(err instanceof Error ? err.message : "Something went wrong. Please try again."); } finally { setSubmitting(false); } }, [email, description, formFeature, resolvedDisplayName, resolvedIntegrationKey]); const renderCompatProductCell = ({product, integrationKey, onRequestClick, alignWide, voteLogging, loggingFeatureKey}) => { const isAuthType = product.label === "Auth Type"; const href = typeof product.value === "string" && !isAuthType ? product.value : null; const featureKey = slugifyFeature(product.label); const alreadyVoted = !isAuthType && integrationKey && !href && !product.value ? readVoteFromStorage(integrationKey, featureKey) : false; const unsupported = !isAuthType && !href && !product.value; const cellInner = isAuthType ? product.value : href ?
{renderCompatCheckSvg()} Docs
: product.value ? renderCompatCheckSvg() : alreadyVoted ? Requested : ; if (alignWide) { return
{cellInner}
; } return {cellInner} ; }; return
{products.map(f =>
{f.label}
{renderCompatProductCell({ product: f, integrationKey: mounted ? resolvedIntegrationKey : "", onRequestClick: handleRequestClick, alignWide: true, voteLogging, loggingFeatureKey })}
)}
Product Supported
{products.map(f =>
{f.label} {renderCompatProductCell({ product: f, integrationKey: mounted ? resolvedIntegrationKey : "", onRequestClick: handleRequestClick, alignWide: false, voteLogging, loggingFeatureKey })}
)}
{voteClickError ?

{voteClickError}

: null} {inlineFormOpen ?
Feature request

Request support for {formFeature.featureLabel}

Your vote has been recorded. Add your email and an optional note and we'll notify you when support is added.