@funnelsgrove/runtime 0.1.0 → 0.1.1

package/dist/components/RuntimeDevInfoBox.js

@@ -0,0 +1,363 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { clearPaywallStateValue } from '../services/funnel-state.service.js';
+import { RUNTIME_PUBLIC_ENV_KEYS, runtimePublicConfig, } from '../services/public-env.js';
+const normalizeDisplayValue = (value) => {
+    if (value === null || typeof value === 'undefined' || value === '') {
+        return '(empty)';
+    }
+    return String(value);
+};
+const getCanonicalRuntimeEnvKey = (envKeys) => {
+    var _a, _b;
+    return (_b = (_a = envKeys.find((envKey) => envKey.startsWith('NEXT_PUBLIC_'))) !== null && _a !== void 0 ? _a : envKeys[0]) !== null && _b !== void 0 ? _b : '';
+};
+const runtimePublicConfigEntries = () => {
+    return Object.entries(RUNTIME_PUBLIC_ENV_KEYS).map(([configKey, envKey]) => ({
+        label: configKey,
+        source: getCanonicalRuntimeEnvKey(envKey),
+        value: runtimePublicConfig[configKey],
+    }));
+};
+const canUseDom = () => {
+    return typeof window !== 'undefined';
+};
+export const copyRuntimeDevInfoValue = async (value) => {
+    var _a, _b;
+    if (!value || value === '(empty)') {
+        return false;
+    }
+    if (typeof document !== 'undefined' && document.body) {
+        const textarea = document.createElement('textarea');
+        textarea.value = value;
+        textarea.setAttribute('readonly', '');
+        textarea.style.position = 'fixed';
+        textarea.style.left = '-9999px';
+        textarea.style.top = '0';
+        document.body.appendChild(textarea);
+        (_a = textarea.focus) === null || _a === void 0 ? void 0 : _a.call(textarea);
+        textarea.select();
+        (_b = textarea.setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(textarea, 0, value.length);
+        try {
+            if (document.execCommand('copy')) {
+                return true;
+            }
+        }
+        catch (_c) {
+            // fall through to async clipboard
+        }
+        finally {
+            document.body.removeChild(textarea);
+        }
+    }
+    const clipboard = typeof navigator !== 'undefined' ? navigator.clipboard : undefined;
+    if (!(clipboard === null || clipboard === void 0 ? void 0 : clipboard.writeText)) {
+        return false;
+    }
+    try {
+        await clipboard.writeText(value);
+        return true;
+    }
+    catch (_d) {
+        return false;
+    }
+};
+export function RuntimeDevInfoBox({ runtimeMode, user, onSwitchToLiveMode, configValues = [], initialConfigOpen = false, initialExpanded = false, paywallStateOptions, reloadOnReset = true, title = 'Funnel sandbox', }) {
+    const [expanded, setExpanded] = useState(initialExpanded);
+    const [configOpen, setConfigOpen] = useState(initialConfigOpen);
+    const [copiedKey, setCopiedKey] = useState(null);
+    const [resetDone, setResetDone] = useState(false);
+    const configItems = useMemo(() => [...configValues, ...runtimePublicConfigEntries()], [configValues]);
+    if (runtimeMode !== 'test') {
+        return null;
+    }
+    const markCopied = (key) => {
+        setCopiedKey(key);
+        if (canUseDom()) {
+            window.setTimeout(() => setCopiedKey(null), 1200);
+        }
+    };
+    const copyValue = (value, key) => {
+        void copyRuntimeDevInfoValue(value).then((copied) => {
+            if (copied) {
+                markCopied(key);
+            }
+        });
+    };
+    const handleResetState = () => {
+        clearPaywallStateValue(paywallStateOptions);
+        setResetDone(true);
+        if (reloadOnReset && canUseDom()) {
+            window.location.reload();
+        }
+    };
+    const userRows = [
+        {
+            key: 'user-id',
+            label: 'Funnel user ID',
+            value: normalizeDisplayValue(user.id),
+        },
+        {
+            key: 'user-email',
+            label: 'Email',
+            value: normalizeDisplayValue(user.email),
+        },
+    ];
+    return (_jsxs("aside", { className: `runtime-dev-info ${expanded ? 'is-expanded' : 'is-collapsed'}`, children: [_jsxs("button", { type: 'button', className: 'runtime-dev-info-pill', onClick: () => setExpanded((current) => !current), "aria-expanded": expanded, children: [_jsx("span", { className: 'runtime-dev-info-wordmark', children: "funnelgrove" }), _jsx("span", { className: 'runtime-dev-info-chevron', "aria-hidden": 'true', children: expanded ? 'v' : '>' })] }), expanded ? (_jsxs("div", { className: 'runtime-dev-info-panel', children: [_jsxs("div", { className: 'runtime-dev-info-status-row', children: [_jsx("p", { className: 'runtime-dev-info-title', children: title }), _jsx("span", { className: 'runtime-dev-info-badge', children: "Test" })] }), _jsx("div", { className: 'runtime-dev-info-identities', children: userRows.map((row) => (_jsxs("div", { className: 'runtime-dev-info-identity-card', children: [_jsxs("div", { className: 'runtime-dev-info-identity-main', children: [_jsx("code", { className: 'runtime-dev-info-identity-value', children: row.value }), _jsx("button", { type: 'button', onClick: () => copyValue(row.value, row.key), children: copiedKey === row.key ? 'Copied' : 'Copy' })] }), _jsx("span", { className: 'runtime-dev-info-identity-label', children: row.label })] }, row.key))) }), _jsxs("div", { className: 'runtime-dev-info-actions', children: [_jsx("button", { type: 'button', onClick: () => setConfigOpen((current) => !current), children: configOpen ? 'Hide config' : 'View config' }), _jsx("button", { type: 'button', onClick: onSwitchToLiveMode, children: "Switch to live mode" }), _jsx("button", { type: 'button', onClick: handleResetState, children: resetDone ? 'Timers reset' : 'Reset timers' })] }), configOpen ? (_jsxs("div", { className: 'runtime-dev-info-config', children: [_jsxs("div", { className: 'runtime-dev-info-config-head', children: [_jsx("p", { children: "Runtime config" }), _jsx("button", { type: 'button', onClick: () => {
+                                            const value = configItems
+                                                .map((item) => `${item.source || item.label}=${normalizeDisplayValue(item.value)}`)
+                                                .join('\n');
+                                            copyValue(value, 'config');
+                                        }, children: copiedKey === 'config' ? 'Copied' : 'Copy all' })] }), _jsx("div", { className: 'runtime-dev-info-config-list', children: configItems.map((item) => (_jsxs("div", { className: 'runtime-dev-info-config-row', children: [_jsx("code", { className: 'runtime-dev-info-config-value', children: normalizeDisplayValue(item.value) }), _jsx("span", { className: 'runtime-dev-info-config-name', children: item.source || item.label })] }, `${item.source || item.label}:${item.label}`))) })] })) : null, _jsxs("div", { className: 'runtime-dev-info-help', children: [_jsxs("p", { children: ["Use ", _jsx("code", { children: "?mode=test" }), " to force test mode."] }), _jsxs("p", { children: ["Use ", _jsx("code", { children: "?mode=prod" }), " or ", _jsx("code", { children: "?mode=production" }), " for live mode."] })] })] })) : null] }));
+}
+export const runtimeDevInfoBoxStyles = `
+.runtime-dev-info {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 1400;
+  width: min(392px, calc(100vw - 32px));
+  color: #f8fafc;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  pointer-events: none;
+}
+
+.runtime-dev-info * {
+  box-sizing: border-box;
+}
+
+.runtime-dev-info-pill,
+.runtime-dev-info-panel {
+  pointer-events: auto;
+}
+
+.runtime-dev-info.is-collapsed {
+  width: auto;
+}
+
+.runtime-dev-info-pill {
+  min-height: 56px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 28px;
+  background: #11161d;
+  color: inherit;
+  padding: 0 20px;
+  box-shadow: 0 18px 42px rgb(15 23 42 / 24%);
+  cursor: pointer;
+}
+
+.runtime-dev-info-wordmark {
+  font-size: 17px;
+  font-weight: 800;
+  letter-spacing: 0;
+}
+
+.runtime-dev-info-chevron {
+  color: #cbd5e1;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.runtime-dev-info-panel {
+  margin-top: 10px;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 20px;
+  background: #11161d;
+  box-shadow: 0 22px 50px rgb(15 23 42 / 30%);
+  overflow: hidden;
+}
+
+.runtime-dev-info-status-row,
+.runtime-dev-info-config-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.runtime-dev-info-status-row {
+  padding: 18px 20px 14px;
+}
+
+.runtime-dev-info-title,
+.runtime-dev-info-config-head p,
+.runtime-dev-info-help p {
+  margin: 0;
+}
+
+.runtime-dev-info-title {
+  color: #e5e7eb;
+  font-size: 16px;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.runtime-dev-info-badge {
+  border: 1px solid #3b82f6;
+  border-radius: 999px;
+  color: #60a5fa;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1;
+  padding: 7px 10px;
+}
+
+.runtime-dev-info-identities {
+  display: grid;
+  gap: 10px;
+  padding: 0 20px 18px;
+}
+
+.runtime-dev-info-identity-card {
+  min-width: 0;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 10px;
+  background: rgb(255 255 255 / 4%);
+  padding: 10px;
+}
+
+.runtime-dev-info-identity-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.runtime-dev-info-identity-value {
+  min-width: 0;
+  flex: 1;
+  color: #f8fafc;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.runtime-dev-info-identity-label,
+.runtime-dev-info-config-name {
+  display: block;
+  margin-top: 5px;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.25;
+}
+
+.runtime-dev-info-identity-value,
+.runtime-dev-info-config-value,
+.runtime-dev-info-help code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 12px;
+  letter-spacing: 0;
+}
+
+.runtime-dev-info-config-value,
+.runtime-dev-info-help code {
+  color: #dbeafe;
+}
+
+.runtime-dev-info-identity-main button,
+.runtime-dev-info-actions button,
+.runtime-dev-info-config-head button {
+  min-height: 30px;
+  border: 1px solid rgb(255 255 255 / 14%);
+  border-radius: 8px;
+  background: rgb(255 255 255 / 6%);
+  color: #e5e7eb;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.runtime-dev-info-identity-main button {
+  flex: 0 0 auto;
+  padding: 0 9px;
+}
+
+.runtime-dev-info-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  padding: 14px 20px;
+}
+
+.runtime-dev-info-actions button {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.runtime-dev-info-actions button:hover,
+.runtime-dev-info-identity-main button:hover,
+.runtime-dev-info-config-head button:hover {
+  background: rgb(255 255 255 / 12%);
+}
+
+.runtime-dev-info-config {
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  padding: 14px 20px;
+}
+
+.runtime-dev-info-config-head {
+  margin-bottom: 10px;
+  color: #e5e7eb;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.runtime-dev-info-config-head button {
+  padding: 0 10px;
+}
+
+.runtime-dev-info-config-list {
+  display: grid;
+  gap: 5px;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.runtime-dev-info-config-row {
+  min-width: 0;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  padding: 7px 0;
+}
+
+.runtime-dev-info-config-value {
+  display: block;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.runtime-dev-info-config-name {
+  font-size: 11px;
+}
+
+.runtime-dev-info-help {
+  display: grid;
+  gap: 6px;
+  border-top: 1px solid rgb(255 255 255 / 10%);
+  padding: 14px 20px 18px;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+@media (max-width: 430px) {
+  .runtime-dev-info {
+    right: 10px;
+    bottom: 10px;
+    width: min(360px, calc(100vw - 20px));
+  }
+
+  .runtime-dev-info-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .runtime-dev-info-identity-main {
+    align-items: flex-start;
+  }
+}
+`;

package/dist/components/SubscriptionHandoffScreen.d.ts

@@ -0,0 +1,31 @@
+import type { StoreLinkItem } from '../content/step-content.js';
+export type SubscriptionHandoffContent = {
+    kicker: string;
+    title: string;
+    copyWithQr: string;
+    copyWithoutQr: string;
+    note: string;
+    openAppLabel: string;
+    emailButtonLabel: string;
+    emailSubject: string;
+    emailIntro: string;
+    emailOpenAppLabel: string;
+    emailIosDeepLinkLabel: string;
+    emailAndroidDeepLinkLabel: string;
+    emailStoreLabels: {
+        ios: string;
+        android: string;
+    };
+    storeLinks: readonly StoreLinkItem[];
+    emailSentStatus: string;
+    autoOpenStatus: string;
+    qrOpenLabel: string;
+};
+type SubscriptionHandoffScreenProps = {
+    stepId: string;
+    content: SubscriptionHandoffContent;
+    confirmationUrl?: string | null;
+    nodeId?: string;
+};
+export declare function SubscriptionHandoffScreen({ stepId, content, confirmationUrl, nodeId, }: SubscriptionHandoffScreenProps): import("react/jsx-runtime").JSX.Element;
+export {};