@mevdragon/vidfarm-devcli 0.5.2 → 0.6.0

package/dist/src/help-page.js

@@ -0,0 +1,346 @@
+import { escapeAttribute, escapeHtml, renderBrandLockup, renderPageShell, renderPrimaryNav } from "./page-shell.js";
+const HELP_SECTION_IDS = new Set(["video_tutorials", "report_bug", "contact_team", "cancel_subscription"]);
+function parseExpandedSections(expand) {
+    if (!expand) {
+        return new Set();
+    }
+    return new Set(expand
+        .split(",")
+        .map((value) => value.trim())
+        .filter((value) => HELP_SECTION_IDS.has(value)));
+}
+function renderHelpDetails(input) {
+    return `
+    <details class="help-details" data-expand-id="${escapeAttribute(input.id)}"${input.open ? " open" : ""}>
+      <summary>
+        <span>${escapeHtml(input.title)}</span>
+      </summary>
+      <div class="help-details-body">
+        ${input.body}
+      </div>
+    </details>
+  `;
+}
+export function renderHelpPage(input) {
+    const expanded = parseExpandedSections(input.expand);
+    return renderPageShell({
+        title: "Help Page",
+        mainClass: "is-wide",
+        body: `
+      <section class="frame help-frame">
+        <header class="topbar">
+          ${renderBrandLockup({
+            displayName: input.account.displayName,
+            email: input.account.email,
+            accountId: input.account.userId
+        })}
+          <div class="topbar-actions">
+            ${renderPrimaryNav({
+            loggedIn: input.account.isLoggedIn,
+            current: "help",
+            accountId: input.account.userId
+        })}
+          </div>
+        </header>
+        <div class="frame-body">
+          <section class="help-shell" aria-labelledby="help-page-title">
+            <div class="help-content">
+              <header class="help-head">
+                <h1 id="help-page-title">Help Page</h1>
+              </header>
+              <div class="help-sections">
+                ${renderHelpDetails({
+            id: "video_tutorials",
+            title: "Video Tutorials",
+            open: expanded.has("video_tutorials"),
+            body: `
+                    <div class="help-video-frame">
+                      <iframe
+                        src="https://www.youtube.com/embed/BG2vuCDzehc"
+                        title="Video Tutorials"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowfullscreen
+                        loading="lazy"
+                        referrerpolicy="strict-origin-when-cross-origin"></iframe>
+                    </div>
+                  `
+        })}
+                ${renderHelpDetails({
+            id: "report_bug",
+            title: "Report a Bug",
+            open: expanded.has("report_bug"),
+            body: `
+                    <iframe
+                      class="help-form-frame"
+                      src="https://tally.so/embed/NpdkNj?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+                      title="Report a Bug"
+                      loading="lazy"></iframe>
+                  `
+        })}
+                ${renderHelpDetails({
+            id: "contact_team",
+            title: "Ask Question / Contact Team",
+            open: expanded.has("contact_team"),
+            body: `
+                    <iframe
+                      class="help-form-frame"
+                      src="https://tally.so/embed/javNVa?alignLeft=1&amp;hideTitle=1&amp;transparentBackground=1"
+                      title="Ask Question / Contact Team"
+                      loading="lazy"></iframe>
+                  `
+        })}
+                ${renderHelpDetails({
+            id: "cancel_subscription",
+            title: "Cancel Subscription",
+            open: expanded.has("cancel_subscription"),
+            body: `
+                    <div class="help-copy-stack">
+                      <p>You can cancel your subscription at any time with a simple self-serve billing portal.</p>
+                      <p>For refunds, we offer 90 day refunds. Email <a href="mailto:operator@zoom-gtm.com">operator@zoom-gtm.com</a> and mention the original email address you used in Stripe so we can find your subscription quickly.</p>
+                      <div>
+                        <a
+                          class="help-link-button"
+                          href="https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE"
+                          target="_blank"
+                          rel="noopener noreferrer">Open Cancellation Portal</a>
+                      </div>
+                    </div>
+                  `
+        })}
+              </div>
+            </div>
+          </section>
+        </div>
+      </section>
+      <script>
+        (() => {
+          const details = Array.from(document.querySelectorAll(".help-details[data-expand-id]"));
+          const allowed = new Set(details.map((detail) => detail.dataset.expandId).filter(Boolean));
+
+          function readExpandedFromUrl() {
+            const params = new URLSearchParams(window.location.search);
+            return new Set((params.get("expand") || "")
+              .split(",")
+              .map((value) => value.trim())
+              .filter((value) => allowed.has(value)));
+          }
+
+          function writeExpandedToUrl() {
+            const expanded = details
+              .filter((detail) => detail.open && detail.dataset.expandId)
+              .map((detail) => detail.dataset.expandId);
+            const url = new URL(window.location.href);
+            if (expanded.length) {
+              url.searchParams.set("expand", expanded.join(","));
+            } else {
+              url.searchParams.delete("expand");
+            }
+            window.history.replaceState(null, "", url.pathname + url.search + url.hash);
+          }
+
+          const initialExpanded = readExpandedFromUrl();
+          for (const detail of details) {
+            const id = detail.dataset.expandId;
+            detail.open = Boolean(id && initialExpanded.has(id));
+            detail.addEventListener("toggle", writeExpandedToUrl);
+          }
+
+          const firstOpen = details.find((detail) => detail.open);
+          if (firstOpen) {
+            requestAnimationFrame(() => {
+              firstOpen.scrollIntoView({ block: "start", behavior: "smooth" });
+            });
+          }
+        })();
+      </script>
+    `,
+        style: `
+      .help-frame {
+        height: 100%;
+        min-height: 0;
+      }
+
+      .help-frame .frame-body {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .help-shell {
+        display: grid;
+        min-height: 0;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.82);
+        border-radius: 32px;
+        background: rgba(255, 251, 245, 0.84);
+        box-shadow: var(--shadow);
+      }
+
+      .help-content {
+        display: grid;
+        align-content: start;
+        gap: 22px;
+        min-height: 0;
+        overflow-y: auto;
+        padding: clamp(22px, 4vw, 48px);
+      }
+
+      .help-head {
+        display: grid;
+        gap: 8px;
+        padding-bottom: 2px;
+      }
+
+      .help-sections {
+        display: grid;
+        gap: 14px;
+        max-width: 980px;
+      }
+
+      .help-details {
+        border: 1px solid rgba(209, 219, 233, 0.92);
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.82);
+        box-shadow: 0 12px 28px rgba(118, 89, 38, 0.08);
+        overflow: hidden;
+      }
+
+      .help-details > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        min-height: 62px;
+        padding: 0 20px;
+        color: #283244;
+        cursor: pointer;
+        font-weight: 800;
+        list-style: none;
+      }
+
+      .help-details > summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .help-details > summary::after {
+        content: "+";
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        border-radius: 999px;
+        border: 1px solid rgba(191, 164, 109, 0.42);
+        color: #6f6451;
+        flex: 0 0 auto;
+      }
+
+      .help-details[open] > summary::after {
+        content: "-";
+      }
+
+      .help-details-body {
+        display: grid;
+        gap: 14px;
+        padding: 0 20px 20px;
+      }
+
+      .help-copy-stack {
+        display: grid;
+        gap: 12px;
+        max-width: 760px;
+        color: #3f4b5f;
+        line-height: 1.6;
+      }
+
+      .help-copy-stack p {
+        margin: 0;
+      }
+
+      .help-link-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 44px;
+        padding: 0 18px;
+        border-radius: 999px;
+        background: #283244;
+        color: #fff9ef;
+        font-weight: 800;
+        text-decoration: none;
+        box-shadow: 0 12px 28px rgba(40, 50, 68, 0.18);
+        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
+      }
+
+      .help-link-button:hover {
+        background: #1f2736;
+        box-shadow: 0 16px 34px rgba(40, 50, 68, 0.22);
+        transform: translateY(-1px);
+      }
+
+      .help-link-button:focus-visible {
+        outline: 3px solid rgba(191, 164, 109, 0.42);
+        outline-offset: 3px;
+      }
+
+      .help-video-frame {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        overflow: hidden;
+        border-radius: 8px;
+        background: #151a23;
+      }
+
+      .help-video-frame iframe,
+      .help-form-frame {
+        display: block;
+        width: 100%;
+        border: 0;
+      }
+
+      .help-video-frame iframe {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+      }
+
+      .help-form-frame {
+        min-height: 680px;
+        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.72);
+      }
+
+      @media (max-width: 1024px) {
+        .help-frame .frame-body,
+        .help-shell,
+        .help-content {
+          overflow: visible;
+        }
+
+        .help-content {
+          padding: 18px 10px 24px;
+        }
+
+        .help-details > summary {
+          min-height: 56px;
+          padding: 0 14px;
+        }
+
+        .help-details-body {
+          padding: 0 14px 14px;
+        }
+
+        .help-form-frame {
+          min-height: 720px;
+        }
+      }
+
+      @media (max-width: 560px) {
+        .help-form-frame {
+          min-height: 75svh;
+        }
+      }
+    `
+    });
+}
+//# sourceMappingURL=help-page.js.map