@wix/agent-skills 1.26.0 → 1.27.0

package/skills/wix-headless-templates/members/app/wix/members/member-store.ts

@@ -0,0 +1,133 @@
+// Member session state — a module-scope store, deliberately NOT a React context.
+// A context can't span Astro islands (each island is its own React root); a module
+// singleton is shared by every island in the page bundle, and works identically in a
+// single-root SPA. Consume it through useMember() (hooks/), or subscribe directly.
+import { fetchCurrentMember } from "./members";
+import {
+  loggedInHint,
+  loginMember,
+  logoutMember,
+  registerMember,
+  verifyMemberEmail,
+  type LoginOptions,
+  type LoginResult,
+} from "./auth";
+import type { CurrentMember } from "./types";
+
+export interface MemberState {
+  member: CurrentMember | null;
+  /** True for a logged-in member — can be true with `member` null when the Members Area app is absent. */
+  loggedIn: boolean;
+  /** True until the first session read settles — render skeletons, not the logged-out state. */
+  loading: boolean;
+  /** Last failed operation's message — render it; a new operation clears it. */
+  error: string | null;
+}
+
+const EMPTY: MemberState = {
+  member: null,
+  loggedIn: false,
+  loading: true,
+  error: null,
+};
+
+let state: MemberState = EMPTY;
+const listeners = new Set<() => void>();
+let started = false;
+
+function setState(patch: Partial<MemberState>): void {
+  state = { ...state, ...patch };
+  for (const l of listeners) l();
+}
+
+export function getMemberState(): MemberState {
+  return state;
+}
+
+/** Adopt an SSR-resolved member (Astro island props) so no client re-fetch happens. */
+export function hydrateMember(member: CurrentMember | null): void {
+  if (started) return;
+  started = true;
+  state = { member, loggedIn: member !== null, loading: false, error: null };
+}
+
+export function subscribeMember(listener: () => void): () => void {
+  listeners.add(listener);
+  // First subscriber triggers the initial session read (browser only — SSR renders `loading`).
+  if (!started && typeof window !== "undefined") {
+    started = true;
+    void refreshMember();
+  }
+  return () => listeners.delete(listener);
+}
+
+/** Re-read the session — call after anything that may have changed it. */
+export async function refreshMember(): Promise<void> {
+  setState({ loading: true, error: null });
+  const hint = loggedInHint();
+  if (hint === false) {
+    setState({ member: null, loggedIn: false, loading: false });
+    return;
+  }
+  // hint true → read the profile (null = profile data missing, still logged in).
+  // hint null (ambient) → the member read IS the session check: null = anonymous.
+  const member = await fetchCurrentMember();
+  setState({ member, loggedIn: hint ?? member !== null, loading: false });
+}
+
+async function runLogin(
+  action: () => Promise<LoginResult>,
+): Promise<LoginResult> {
+  try {
+    const result = await action();
+    // Managed Astro: the session is written by the callback the browser is about to visit; navigate
+    // and do nothing else here (the page unloads). Manual: the tokens are already in place — re-read.
+    if (result.state === "SUCCESS" && result.redirectUrl) {
+      window.location.assign(result.redirectUrl);
+      return result;
+    }
+    if (result.state === "SUCCESS") await refreshMember();
+    if (result.state === "FAILURE")
+      setState({
+        error: result.error ?? result.errorCode ?? "Could not log in.",
+      });
+    return result;
+  } catch (e) {
+    setState({ error: e instanceof Error ? e.message : String(e) });
+    throw e;
+  }
+}
+
+/**
+ * Submit the branded in-app sign-in form. `returnTo` is where a SUCCESS lands (managed Astro: the
+ * callback's destination; the caller navigates itself otherwise).
+ */
+export function login(email: string, password: string, options?: LoginOptions): Promise<LoginResult> {
+  return runLogin(() => loginMember(email, password, options));
+}
+
+/** Submit the branded in-app sign-up form (names only where PROFILE_ON_SIGNUP is true). */
+export function register(
+  email: string,
+  password: string,
+  profile?: { firstName?: string; lastName?: string },
+  options?: LoginOptions,
+): Promise<LoginResult> {
+  return runLogin(() => registerMember(email, password, profile, options));
+}
+
+/** Finish an email-verification branch from the same in-app form. */
+export function verifyEmail(code: string): Promise<LoginResult> {
+  return runLogin(() => verifyMemberEmail(code));
+}
+
+/** Log out (navigates away); local state resets for the instant before the redirect lands. */
+export async function logout(returnTo?: string): Promise<void> {
+  setState({ member: null, loggedIn: false });
+  try {
+    await logoutMember(returnTo);
+  } catch (e) {
+    setState({ error: e instanceof Error ? e.message : String(e) });
+    throw e;
+  }
+}

package/skills/wix-headless-templates/members/app/wix/members/members-core.ts

@@ -0,0 +1,43 @@
+// Member rules and DTO mapping — transport-agnostic, imported by BOTH transports: ./members.ts (the
+// SDK, managed Astro and React) and the REST twin in templates/members/rest/members.ts (fetch, a
+// static site or a port to another language). The one rule about who a member "is" on screen lives
+// HERE, once. A raw member comes from the SDK (`_id`, `_createdDate`) or from REST (`id`,
+// `createdDate`); the mapper accepts both. Imports are type-only so a strip to JS emits no imports.
+import type { CurrentMember } from "./types";
+
+/** A raw Members V1 member as either transport returns it. */
+export type Raw = Record<string, any>;
+/** Media value + size → https URL. Injected: the SDK transport scales through @wix/sdk, REST through the URL form. */
+export type ImgSrc = (value: any, width: number, height: number) => string;
+
+// Requested on the current-member read. FULL → loginEmail, status, the contact's names, the profile
+// (nickname, photo), and the dates; the default PUBLIC fieldset has no login email and no names.
+export const MEMBER_FIELDSETS = ["FULL"] as const;
+
+/** The member's id on either transport; "" when the raw object isn't a member. */
+export const memberId = (raw: Raw | undefined): string => raw?._id ?? raw?.id ?? "";
+
+/**
+ * Raw member → CurrentMember. displayName is the first non-empty of nickname, "first last", the
+ * login email's local part, "Member". photoUrl is "" without a profile photo. memberSince is the
+ * creation date as "YYYY-MM-DD" ("" when unknown).
+ */
+export function toCurrentMember(raw: Raw, imgSrc: ImgSrc): CurrentMember {
+  const nickname: string = raw.profile?.nickname ?? "";
+  const firstName: string = raw.contact?.firstName ?? "";
+  const lastName: string = raw.contact?.lastName ?? "";
+  const loginEmail: string = raw.loginEmail ?? "";
+  const fullName = [firstName, lastName].filter(Boolean).join(" ");
+  const created = raw._createdDate ?? raw.createdDate;
+  return {
+    id: memberId(raw),
+    loginEmail,
+    displayName: nickname || fullName || loginEmail.split("@")[0] || "Member",
+    firstName,
+    lastName,
+    nickname,
+    photoUrl: imgSrc(raw.profile?.photo, 200, 200),
+    contactId: raw.contactId ?? "",
+    memberSince: created ? new Date(created).toISOString().slice(0, 10) : "",
+  };
+}

package/skills/wix-headless-templates/members/app/wix/members/members.ts

@@ -0,0 +1,29 @@
+// Current-member read (Wix Members) over the SDK — the only file that touches raw member entities
+// on this transport. The DTO mapper lives in ./members-core (shared with the REST twin in
+// templates/members/rest/members.ts); this file is the transport only. Identity vs. profile are
+// different layers: "is this caller logged in?" needs no app install, but getCurrentMember returns
+// profile DATA only once the Wix Members Area app is installed (the seed installs it). Copy as-is;
+// extend by adding functions, not by editing these.
+// docs: https://dev.wix.com/docs/api-reference/crm/members-contacts/members/member-management/members/get-my-member.md
+import { membersApi } from "./client";
+import { imgSrc } from "../media";
+import { MEMBER_FIELDSETS, memberId, toCurrentMember, type Raw } from "./members-core";
+import type { CurrentMember } from "./types";
+
+/**
+ * The current member, or null for an anonymous visitor — and null for a LOGGED-IN member
+ * when the Members Area app isn't installed (setup, not a code bug; the seed installs it).
+ * Never throws: anonymous is a normal state for the client-side custom-login gate.
+ * The SDK export is getCurrentMember — the REST name "Get My Member" does not exist on
+ * the module; getMyMember(...) throws `is not a function`, and only once a real member
+ * loads the page.
+ */
+export async function fetchCurrentMember(): Promise<CurrentMember | null> {
+  try {
+    const res = await membersApi.getCurrentMember({ fieldsets: [...MEMBER_FIELDSETS] as any });
+    const raw = res.member as Raw | undefined;
+    return raw && memberId(raw) ? toCurrentMember(raw, imgSrc) : null;
+  } catch {
+    return null;
+  }
+}

package/skills/wix-headless-templates/members/app/wix/members/types.ts

@@ -0,0 +1,21 @@
+// Members DTOs — the serializable shapes every hook, component, and page consumes.
+// Plain JSON: safe as Astro island props or across server/client boundaries. The photo is a
+// resolved https URL.
+
+/** The logged-in member as the header/account surfaces need it. */
+export interface CurrentMember {
+  id: string;
+  /** Email the member logs in with ("" when the fieldset hides it). */
+  loginEmail: string;
+  /** Best display name: nickname → first+last → the login email's local part. */
+  displayName: string;
+  firstName: string;
+  lastName: string;
+  nickname: string;
+  /** Resolved https URL ("" when the member has no photo). */
+  photoUrl: string;
+  /** Contact-list id — the key for member-owned CMS/content lookups. */
+  contactId: string;
+  /** "YYYY-MM-DD" the membership was created ("" when unknown). */
+  memberSince: string;
+}

package/skills/wix-headless-templates/members/app-astro/layouts/SiteLayout.astro

@@ -0,0 +1,42 @@
+---
+// The site chrome for every members page — THIS file (header/footer/nav) plus the @theme
+// token block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" />
+// in <head>, the global.css import, and one <MemberMenu client:only="react"> in the header
+// (it reads browser session state and must not server-render). (If another vertical is also
+// deployed, its SiteLayout won — mount MemberMenu in that header instead.)
+import MemberMenu from "../components/members/MemberMenu";
+import "../styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <slot name="seo-tags" />
+  </head>
+  <body>
+    <header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
+      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
+        <nav class="flex items-center gap-6 text-sm">
+          <MemberMenu client:only="react" />
+        </nav>
+      </div>
+    </header>
+    <main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
+      <slot />
+    </main>
+    <footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
+      © Brand Name
+    </footer>
+  </body>
+</html>

package/skills/wix-headless-templates/members/app-astro/pages/account.astro

@@ -0,0 +1,9 @@
+---
+import SiteLayout from "../layouts/SiteLayout.astro";
+import AccountPage from "../components/members/AccountPage";
+---
+
+<SiteLayout title="My account">
+  <h1 class="mb-8 text-2xl font-semibold tracking-tight">My account</h1>
+  <AccountPage client:only="react" />
+</SiteLayout>

package/skills/wix-headless-templates/members/app-astro/pages/login.astro

@@ -0,0 +1,11 @@
+---
+import SiteLayout from "../layouts/SiteLayout.astro";
+import LoginForm from "../components/members/LoginForm";
+---
+
+<SiteLayout title="Log in">
+  <section class="mx-auto max-w-md">
+    <h1 class="mb-6 text-2xl font-semibold">Welcome</h1>
+    <LoginForm client:only="react" />
+  </section>
+</SiteLayout>

package/skills/wix-headless-templates/members/project/README.md

@@ -0,0 +1,15 @@
+# Wix Astro Blank Template
+
+**[Live demo](https://h6s-1a31f9730cd85b-headlessstack.wix-site-host.com)**
+
+Our Astro templates are still in development and subject to change.
+
+To use a template, follow the [Wix CLI for Headless Quick Start](https://dev.wix.com/docs/go-headless/get-started/quick-starts/wix-managed-headless/quick-start-with-the-wix-cli), and select the desired template during the setup process.
+
+## Need help?
+
+For documentation and support, check out:
+
+- [Wix Headless Documentation](https://dev.wix.com/docs/go-headless)
+- [Wix SDK Documentation](https://dev.wix.com/docs/sdk)
+- [Community on Discord](https://discord.gg/n6TBrSnYTp)

package/skills/wix-headless-templates/members/project/astro.config.mjs

@@ -0,0 +1,22 @@
+import tailwindcss from "@tailwindcss/vite";
+// @ts-check
+import { defineConfig } from 'astro/config';
+import wix from "@wix/astro";
+import wixPages from "@wix/astro-pages";
+
+import react from "@astrojs/react";
+import wixHostingAdapter from "@wix/astro-wix-hosting-adapter";
+
+// https://astro.build/config
+export default defineConfig({
+  vite: { plugins: [tailwindcss()] },
+  integrations: [wix(), wixPages(), react()],
+  security: { checkOrigin: false },
+  adapter: wixHostingAdapter(),
+
+  image: {
+    domains: ["static.wixstatic.com"],
+  },
+
+  output: "server",
+});