@funnelsgrove/cli 0.1.14 → 0.1.18

package/template_scaffold/src/app/subscription-dashboard/page.tsx

@@ -0,0 +1,274 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { apiService, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
+
+export default function ManageSubscriptionPage() {
+  const [data, setData] = useState<ManageSubscriptionsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [updatingSubscriptionId, setUpdatingSubscriptionId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const payload = await apiService.getManageSubscriptions();
+      setData(payload);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load subscriptions');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const mutate = async (subscriptionId: string, action: 'cancel' | 'renew') => {
+    setUpdatingSubscriptionId(subscriptionId);
+    setError(null);
+
+    try {
+      const payload = await apiService.updateSubscription({
+        subscriptionId,
+        action,
+      });
+      setData(payload);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : `Failed to ${action} subscription`);
+    } finally {
+      setUpdatingSubscriptionId(null);
+    }
+  };
+
+  return (
+    <main className="manage-subscription-page">
+      <section className="manage-subscription-card">
+        <header>
+          <p className="manage-subscription-tag">App Deals</p>
+          <h1 className="manage-subscription-title">Manage Subscription</h1>
+          <p className="manage-subscription-description">
+            View active plans and manage cancellation or renewal.
+          </p>
+        </header>
+
+        {loading ? <p className="manage-subscription-muted">Loading subscription data...</p> : null}
+        {error ? <p className="manage-subscription-error">{error}</p> : null}
+
+        {!loading && data?.user ? (
+          <section className="manage-subscription-user">
+            <p>
+              <strong>User ID:</strong> {data.user.user_id}
+            </p>
+            <p>
+              <strong>Email:</strong> {data.user.email || 'Not provided'}
+            </p>
+            <p>
+              <strong>Status:</strong> {data.user.subscriptionStatus || 'unknown'}
+            </p>
+            <p>
+              <strong>Tracked events:</strong> {data.eventsCount}
+            </p>
+          </section>
+        ) : null}
+
+        {!loading && (!data || data.subscriptions.length === 0) ? (
+          <p className="manage-subscription-muted">No subscriptions found for this user.</p>
+        ) : null}
+
+        {!loading && data?.subscriptions.length ? (
+          <ul className="manage-subscription-list">
+            {data.subscriptions.map((subscription) => (
+              <li key={subscription.id} className="manage-subscription-item">
+                <div>
+                  <p className="manage-subscription-item-title">
+                    {subscription.providerSubscriptionId}
+                  </p>
+                  <p className="manage-subscription-item-meta">
+                    {subscription.environment.toUpperCase()} · {subscription.status}
+                  </p>
+                  <p className="manage-subscription-item-meta">
+                    {subscription.cancelAtPeriodEnd
+                      ? 'Will cancel at period end'
+                      : 'Auto-renew is active'}
+                  </p>
+                  {subscription.currentPeriodEnd ? (
+                    <p className="manage-subscription-item-meta">
+                      Current period ends:{' '}
+                      {new Date(subscription.currentPeriodEnd).toLocaleString()}
+                    </p>
+                  ) : null}
+                </div>
+
+                <div className="manage-subscription-actions">
+                  {subscription.cancelAtPeriodEnd ? (
+                    <button
+                      type="button"
+                      className="manage-subscription-button is-secondary"
+                      disabled={updatingSubscriptionId === subscription.id}
+                      onClick={() => mutate(subscription.id, 'renew')}
+                    >
+                      {updatingSubscriptionId === subscription.id ? 'Updating...' : 'Renew'}
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      className="manage-subscription-button"
+                      disabled={updatingSubscriptionId === subscription.id}
+                      onClick={() => mutate(subscription.id, 'cancel')}
+                    >
+                      {updatingSubscriptionId === subscription.id ? 'Updating...' : 'Cancel'}
+                    </button>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        <button type="button" className="manage-subscription-refresh" onClick={() => void load()}>
+          Refresh
+        </button>
+      </section>
+
+      {manageSubscriptionStyles ? <style>{manageSubscriptionStyles}</style> : null}
+    </main>
+  );
+}
+
+const manageSubscriptionStyles = `
+.manage-subscription-page {
+  min-height: 100svh;
+  display: flex;
+  justify-content: center;
+  padding: 24px;
+  background: var(--color-bg);
+  font-family: var(--font-family-base);
+}
+
+.manage-subscription-card {
+  width: min(760px, 100%);
+  border-radius: 20px;
+  background: var(--color-surface);
+  box-shadow: 0 12px 40px rgb(21 39 113 / 10%);
+  padding: 24px;
+}
+
+.manage-subscription-tag {
+  margin: 0;
+  color: var(--color-accent);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.manage-subscription-title {
+  margin: 8px 0 0;
+  color: var(--color-text);
+  font-size: 32px;
+  line-height: 1.15;
+}
+
+.manage-subscription-description {
+  margin: 10px 0 0;
+  color: var(--color-text-muted);
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+.manage-subscription-muted {
+  margin-top: 20px;
+  color: var(--color-text-muted);
+}
+
+.manage-subscription-error {
+  margin-top: 20px;
+  border-radius: 12px;
+  background: #ffecec;
+  color: var(--color-danger);
+  padding: 12px;
+}
+
+.manage-subscription-user {
+  margin-top: 20px;
+  border-radius: 12px;
+  border: 1px solid var(--color-border);
+  padding: 14px;
+}
+
+.manage-subscription-user p {
+  margin: 6px 0;
+  color: var(--color-text);
+}
+
+.manage-subscription-list {
+  list-style: none;
+  margin: 20px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.manage-subscription-item {
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 14px;
+  display: flex;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.manage-subscription-item-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.manage-subscription-item-meta {
+  margin: 6px 0 0;
+  color: var(--color-text-muted);
+  font-size: 13px;
+}
+
+.manage-subscription-actions {
+  display: flex;
+  align-items: center;
+}
+
+.manage-subscription-button {
+  border: none;
+  border-radius: 999px;
+  background: var(--color-button);
+  color: var(--color-button-text);
+  font-weight: 700;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.manage-subscription-button.is-secondary {
+  background: var(--color-accent);
+}
+
+.manage-subscription-button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.manage-subscription-refresh {
+  margin-top: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-accent);
+  font-weight: 700;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+`;

package/template_scaffold/src/assets/claimbee/glow.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 116 109.5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 11" d="M0 22.5L51 0H85L116 22.5V54.5V89L74.5 109.5L42 103L9 89L0 61.5V22.5Z" fill="var(--fill-0, #FEFDF5)"/>
+</svg>

package/template_scaffold/src/assets/claimbee/testimonial-star.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16.1222 15.4039" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Star 1" d="M7.37895 0.495601C7.59366 -0.165201 8.52852 -0.1652 8.74323 0.495602L10.1545 4.83902C10.2505 5.13454 10.5259 5.33462 10.8366 5.33462H15.4036C16.0984 5.33462 16.3873 6.22372 15.8251 6.63212L12.1304 9.3165C11.879 9.49914 11.7738 9.82288 11.8699 10.1184L13.2811 14.4618C13.4958 15.1226 12.7395 15.6721 12.1774 15.2637L8.48267 12.5793C8.23129 12.3967 7.89089 12.3967 7.63951 12.5793L3.94477 15.2637C3.38266 15.6721 2.62635 15.1226 2.84105 14.4618L4.25232 10.1184C4.34834 9.82288 4.24315 9.49914 3.99176 9.3165L0.297032 6.63212C-0.26508 6.22372 0.0238078 5.33462 0.718616 5.33462H5.28555C5.59628 5.33462 5.87167 5.13454 5.96769 4.83902L7.37895 0.495601Z" fill="var(--fill-0, #F28100)"/>
+</svg>

package/template_scaffold/src/components/FunnelEditorPanel.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import type { FunnelExperimentConfig } from '@/runtime/funnel-runtime';
+import type { RuntimeMode } from '@funnelsgrove/runtime';
+
+type FunnelEditorPanelProps = {
+  editorModeEnabled: boolean;
+  editorPanelExpanded: boolean;
+  experimentAssignmentForEditor: (experiment: FunnelExperimentConfig) => string;
+  funnelExperiments: readonly FunnelExperimentConfig[];
+  onRuntimeModeChange: (mode: RuntimeMode) => void;
+  onSelectVariant: (experiment: FunnelExperimentConfig, variantKey: string) => void;
+  onToggleExpanded: () => void;
+  runtimeMode: RuntimeMode;
+};
+
+export function FunnelEditorPanel({
+  editorModeEnabled,
+  editorPanelExpanded,
+  experimentAssignmentForEditor,
+  funnelExperiments,
+  onRuntimeModeChange,
+  onSelectVariant,
+  onToggleExpanded,
+  runtimeMode,
+}: FunnelEditorPanelProps) {
+  if (!editorModeEnabled) {
+    return null;
+  }
+
+  return (
+    <aside className={`funnel-editor-panel ${editorPanelExpanded ? 'is-expanded' : 'is-collapsed'}`}>
+      <button type="button" className="funnel-editor-panel-toggle" onClick={onToggleExpanded}>
+        {editorPanelExpanded ? 'Hide editor' : 'Editor'}
+      </button>
+
+      {editorPanelExpanded ? (
+        <div className="funnel-editor-panel-content">
+          <p className="funnel-editor-panel-label">MODE</p>
+          <div className="funnel-editor-panel-options">
+            <button
+              type="button"
+              className={runtimeMode === 'test' ? 'is-active' : ''}
+              onClick={() => onRuntimeModeChange('test')}
+            >
+              Test
+            </button>
+            <button
+              type="button"
+              className={runtimeMode === 'live' ? 'is-active' : ''}
+              onClick={() => onRuntimeModeChange('live')}
+            >
+              Live
+            </button>
+          </div>
+
+          <div className="funnel-editor-panel-tests">
+            <p className="funnel-editor-panel-label">A/B TESTS</p>
+            {funnelExperiments.length === 0 ? (
+              <p className="funnel-editor-panel-helper">No configured tests.</p>
+            ) : (
+              <div className="funnel-editor-panel-test-list">
+                {funnelExperiments.map((experiment) => {
+                  const assignedVariantKey = experimentAssignmentForEditor(experiment);
+                  return (
+                    <label key={experiment.experimentId} className="funnel-editor-panel-test-item">
+                      <span>{experiment.experimentId}</span>
+                      <select
+                        value={assignedVariantKey}
+                        onChange={(event) => {
+                          onSelectVariant(experiment, event.target.value);
+                        }}
+                      >
+                        {experiment.variants.map((variant) => (
+                          <option key={variant.variantKey} value={variant.variantKey}>
+                            {variant.variantKey}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      ) : null}
+    </aside>
+  );
+}
+
+export const FunnelEditorPanelStyles = `
+.funnel-editor-panel {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  z-index: 1200;
+  border-radius: 12px;
+  border: 1px solid rgba(33, 41, 82, 0.25);
+  background: rgba(255, 255, 255, 0.98);
+  color: #202538;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
+}
+
+.funnel-editor-panel.is-collapsed {
+  width: auto;
+}
+
+.funnel-editor-panel.is-expanded {
+  width: 184px;
+}
+
+.funnel-editor-panel-toggle {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.funnel-editor-panel-content {
+  border-top: 1px solid rgba(33, 41, 82, 0.15);
+  padding: 10px 12px 12px;
+}
+
+.funnel-editor-panel-label {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #53608a;
+}
+
+.funnel-editor-panel-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.funnel-editor-panel-options button {
+  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface) 90%);
+  color: var(--color-primary);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 10px 0;
+  cursor: pointer;
+}
+
+.funnel-editor-panel-options button.is-active {
+  border-color: var(--color-primary);
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+}
+
+.funnel-editor-panel-tests {
+  margin-top: 10px;
+}
+
+.funnel-editor-panel-helper {
+  margin: 0;
+  font-size: 11px;
+  color: #5a6387;
+}
+
+.funnel-editor-panel-test-list {
+  display: grid;
+  gap: 8px;
+}
+
+.funnel-editor-panel-test-item {
+  display: grid;
+  gap: 6px;
+  font-size: 11px;
+  color: #445073;
+}
+
+.funnel-editor-panel-test-item select {
+  height: 28px;
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  border-radius: 8px;
+  background: #f5f7ff;
+  color: #26315a;
+  font-size: 12px;
+  padding: 0 8px;
+}
+`;

package/template_scaffold/src/components/FunnelFlow.test.tsx

@@ -0,0 +1,17 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+describe('FunnelFlow lifecycle wiring', () => {
+  it('delegates one analytics adapter and the authoritative manifest version to the shared controller', () => {
+    const flowSource = readFileSync(new URL('./FunnelFlow.tsx', import.meta.url), 'utf8');
+    const adapterSource = readFileSync(
+      new URL('../runtime/use-funnel-flow-controller.ts', import.meta.url),
+      'utf8',
+    );
+
+    expect(flowSource).toContain('const controller = useFunnelFlowController({');
+    expect(flowSource).not.toContain('publicAnalyticsSdk');
+    expect(adapterSource.match(/analytics: publicAnalyticsSdk/g)).toHaveLength(1);
+    expect(adapterSource.match(/stepContractVersion: funnelManifest\.stepContractVersion/g)).toHaveLength(1);
+  });
+});

package/template_scaffold/src/components/FunnelFlow.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { createElement, useMemo, useSyncExternalStore, type ComponentType } from 'react';
+import {
+  FunnelProvider,
+  PrimaryButton,
+  isPreviewFrameRuntime,
+  usePreviewDefinitionOverrideRevision,
+} from '@funnelsgrove/runtime';
+import { FunnelEditorPanel, FunnelEditorPanelStyles } from './FunnelEditorPanel';
+import type { FunnelStepId } from '@/runtime/funnel-runtime';
+import { useFunnelFlowController } from '@/runtime/use-funnel-flow-controller';
+
+type FunnelFlowProps = {
+  initialStepId?: FunnelStepId;
+  lockToInitialStep?: boolean;
+  isPreviewFrame?: boolean;
+  isPreviewThumbnail?: boolean;
+};
+
+export function FunnelFlow({
+  initialStepId,
+  lockToInitialStep,
+  isPreviewFrame,
+  isPreviewThumbnail,
+}: FunnelFlowProps = {}) {
+  const isPreviewRuntime = useMemo(() => {
+    if (typeof isPreviewFrame === 'boolean') {
+      return isPreviewFrame;
+    }
+
+    return isPreviewFrameRuntime();
+  }, [isPreviewFrame]);
+  const previewFrameMounted = useSyncExternalStore(
+    () => () => undefined,
+    () => isPreviewRuntime,
+    () => false,
+  );
+  const previewDefinitionRevision = usePreviewDefinitionOverrideRevision();
+  const controller = useFunnelFlowController({
+    initialStepId,
+    lockToInitialStep,
+  });
+
+  if (!controller.activeStepComponent || !controller.activeStepMeta || !controller.renderedStepMeta) {
+    return null;
+  }
+
+  const ActiveStep = controller.activeStepComponent as ComponentType<Record<string, never>>;
+
+  return (
+    <FunnelProvider value={controller.contextValue}>
+      <section
+        className="funnel-shell"
+        suppressHydrationWarning
+        data-preview-frame={previewFrameMounted ? 'true' : undefined}
+        data-preview-thumbnail={isPreviewThumbnail ? 'true' : undefined}
+        data-step-kind={controller.renderedStepMeta.kind}
+      >
+        <div className="funnel-content">
+          <div
+            className="step-stage"
+            data-step-id={controller.activeStepId}
+            data-render-step-id={controller.renderedStepId}
+            data-figma-node-id={controller.renderedStepMeta.figmaNodeId}
+            data-render-suspended={controller.renderSuspended ? 'true' : undefined}
+          >
+            {controller.renderSuspended ? (
+              <div
+                className="step-stage-suspended"
+                aria-busy="true"
+                aria-live="polite"
+                style={{ minHeight: '100vh' }}
+              />
+            ) : (
+              <div
+                key={`${controller.activeStepId}:${controller.renderedStepId}:${previewDefinitionRevision}`}
+                className="step-stage-transition"
+              >
+                {createElement(ActiveStep)}
+              </div>
+            )}
+          </div>
+
+          {controller.showShellContinue && !controller.renderSuspended ? (
+            <footer className="action-bar" key={`action-bar-${controller.activeStepId}`}>
+              <PrimaryButton
+                onClick={controller.handleContinue}
+                className={controller.buttonVariant === 'muted' ? 'is-muted' : undefined}
+              >
+                {controller.buttonText}
+              </PrimaryButton>
+            </footer>
+          ) : null}
+        </div>
+
+        <FunnelEditorPanel
+          editorModeEnabled={controller.editorModeEnabled}
+          editorPanelExpanded={controller.editorPanelExpanded}
+          experimentAssignmentForEditor={controller.experimentAssignmentForEditor}
+          funnelExperiments={controller.funnelExperiments}
+          onRuntimeModeChange={controller.setRuntimeMode}
+          onSelectVariant={controller.setEditorVariantSelection}
+          onToggleExpanded={() => {
+            controller.setEditorPanelExpanded((currentValue) => !currentValue);
+          }}
+          runtimeMode={controller.runtimeMode}
+        />
+      </section>
+
+      <style>{FunnelEditorPanelStyles}</style>
+    </FunnelProvider>
+  );
+}

package/template_scaffold/src/components/FunnelStepImage.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { createFunnelStepImageLoader } from '@/components/FunnelStepImage';
+
+describe('FunnelStepImage', () => {
+  it('keeps builder-friendly local and remote image src values unchanged', () => {
+    const loader = createFunnelStepImageLoader();
+
+    expect(loader({ src: '/claimbee/steps-sprite-default.png', width: 430, quality: 75 })).toBe(
+      '/claimbee/steps-sprite-default.png',
+    );
+    expect(loader({ src: 'https://example.com/remote-step-image.png', width: 430, quality: 75 })).toBe(
+      'https://example.com/remote-step-image.png',
+    );
+  });
+});

package/template_scaffold/src/components/FunnelStepImage.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Image, { type ImageLoaderProps, type ImageProps } from 'next/image';
+
+export const createFunnelStepImageLoader = () => {
+  return ({ src }: ImageLoaderProps): string => src;
+};
+
+const funnelStepImageLoader = createFunnelStepImageLoader();
+
+type FunnelStepImageProps = Omit<ImageProps, 'loader' | 'alt'> & {
+  alt: string;
+};
+
+export function FunnelStepImage({
+  alt,
+  unoptimized,
+  ...props
+}: FunnelStepImageProps) {
+  return (
+    <Image
+      {...props}
+      alt={alt}
+      loader={funnelStepImageLoader}
+      unoptimized={unoptimized ?? true}
+    />
+  );
+}