@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/composables/useAnnouncements.js

@@ -0,0 +1,29 @@
+import HomeServices from "#osi/services/HomeServices";
+
+export function useAnnouncements() {
+  const announcements = useState("announcements-data", () => null);
+  const announcementsLoaded = useState("announcements-loaded", () => false);
+  // Read now, in setup scope, while the Nuxt instance is still available —
+  // not inside loadAnnouncements(), which runs after app.vue's own await and
+  // would otherwise lose the ability to call useState() on the server.
+  const baseUrl = useState("base-url", () => "");
+
+  const loadAnnouncements = async () => {
+    if (announcementsLoaded.value) return announcements.value;
+
+    try {
+      const data = await HomeServices.getAnnouncements(baseUrl.value);
+      announcements.value = data;
+      announcementsLoaded.value = true;
+    } catch (error) {
+      console.error("[useAnnouncements] Error loading announcements:", error);
+    }
+    return announcements.value;
+  };
+
+  return {
+    announcements,
+    announcementsLoaded,
+    loadAnnouncements,
+  };
+}

package/app/composables/useApiErrorToast.js

@@ -0,0 +1,104 @@
+import { useToast } from "vue-toastification";
+
+/**
+ * Turn an apiService error into a toast.
+ *
+ * The same flattening block was copy-pasted into checkout (x3), the homepage,
+ * the product page, profile-details and the cart sidebar — each copy slightly
+ * different, and one of them (checkout's submitForm) referenced `messages`
+ * before declaring it, so every checkout failure showed the generic fallback.
+ *
+ * apiService attaches the parsed body as `error.data`, which DRF returns in
+ * several shapes:
+ *   ["Not enough stock"]                       list serializer / non_field
+ *   { email: ["Already taken"], name: [...] }  field errors
+ *   { detail: "Not found" }                    APIException
+ *   { address: { country: ["Required"] } }     nested serializer
+ * AuthenticationService.register rejects with the bare body, so the error
+ * itself can be the field-error object with no `.data` at all.
+ */
+export function useApiErrorToast() {
+  /** Depth-first flatten to a flat array of strings. */
+ function collect(value, out = [], label = null) {
+  if (value === null || value === undefined) return out;
+
+  if (typeof value === "string") {
+    if (value.trim()) out.push(label ? `${label}: ${value.trim()}` : value.trim());
+    return out;
+  }
+
+  if (Array.isArray(value)) {
+    value.forEach((entry) => collect(entry, out, label));
+    return out;
+  }
+
+  if (typeof value === "object") {
+    Object.entries(value).forEach(([key, entry]) => collect(entry, out, key));
+    return out;
+  }
+
+  out.push(label ? `${label}: ${String(value)}` : String(value));
+  return out;
+}
+
+  /**
+   * Every human-readable message in an error, deduped and in order.
+   * Returns [] when there's nothing usable — callers fall back themselves.
+   */
+  function messagesFrom(error) {
+    if (!error) return [];
+
+    // `detail` is the whole message when present; the other keys are noise.
+    const body = error.data ?? error;
+    if (body && typeof body === "object" && typeof body.detail === "string") {
+      return [body.detail];
+    }
+
+    let messages = [];
+    if (body && typeof body === "object") messages = collect(body);
+
+    // A bare Error (network failure, thrown guard) has no body worth reading.
+    if (!messages.length && typeof error.message === "string" && error.message) {
+      messages = [error.message];
+    }
+
+    return [...new Set(messages)];
+  }
+
+  /** One message plain; several as a bulleted list, matching the old behaviour. */
+  function formatMessages(messages) {
+    if (!messages.length) return "";
+    return messages.length === 1
+      ? messages[0]
+      : messages.map((message) => `\u2022 ${message}`).join("\n");
+  }
+
+  /**
+   * @param {unknown} error
+   * @param {string} fallback  shown when the error carries nothing readable
+   */
+  function showApiError(error, fallback = "Something went wrong. Please try again.") {
+    const text = formatMessages(messagesFrom(error)) || fallback;
+
+    // useToast() needs an active Vue instance. Every old copy of this block
+    // wrapped it defensively because services throw from places that don't have
+    // one — keep that, and never let reporting an error throw a second error.
+    try {
+      useToast().error(text);
+    } catch {
+      console.error("[api]", text, error);
+    }
+
+    return text;
+  }
+
+  function showApiSuccess(message) {
+    try {
+      useToast().success(message);
+    } catch {
+      /* no active instance — nothing to show */
+    }
+  }
+
+  return { showApiError, showApiSuccess, messagesFrom, formatMessages };
+}

package/app/composables/useAuth.js

@@ -0,0 +1,99 @@
+import AuthenticationService from "#osi/services/Authentication/AuthenticationService";
+import CartServices from "#osi/services/CartServices";
+import { authBus } from "#osi/services/AuthBus";
+import { eventBus } from "#osi/utils/eventBus";
+import { getDeviceInfo } from "#osi/utils/device";
+import { analytics } from "#osi/utils/analytics";
+import { useToast } from "vue-toastification";
+
+export function useAuth() {
+  const router = useRouter();
+  const route = useRoute();
+  const isLoginLoading = useState("auth-login-loading", () => false);
+  const isRegisterLoading = useState("auth-register-loading", () => false);
+
+  const isLoggedIn = computed(() => authBus.isLoggedIn);
+  const userInfo = computed(() => authBus.userInfo);
+
+  function isValidEmail(email) {
+    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return regex.test(email);
+  }
+
+  async function login(formData) {
+    const toast = useToast();
+    isLoginLoading.value = true;
+    try {
+      const deviceInfo = getDeviceInfo();
+      const response = await AuthenticationService.login({
+        ...formData,
+        ...deviceInfo,
+      });
+
+      toast.success("You have successfully signed into your account!");
+      await authBus.checkAuth();
+      analytics.login("email");
+      const person = authBus.userInfo;
+      if (person) {
+        analytics.identify({
+          email: person.email,
+          phone: person.mobile_number,
+          firstName: person.first_name,
+          lastName: person.last_name,
+        });
+      }
+      await CartServices.mergeCart();
+
+      eventBus.emit("cartUpdated");
+      const redirectPath = route.query.redirect || "/";
+      router.push(redirectPath);
+      return response;
+    } catch (error) {
+      toast.error("Wrong email or password");
+      throw error;
+    } finally {
+      isLoginLoading.value = false;
+    }
+  }
+
+  async function register(registerData) {
+    const toast = useToast();
+    isRegisterLoading.value = true;
+    try {
+      const response = await AuthenticationService.register(registerData);
+      router.push({
+        path: "/verificationcode",
+        query: { email: registerData.email },
+      });
+      return response;
+    } catch (error) {
+      if (error && typeof error === 'object') {
+        const errorMessages = Object.values(error).flat();
+        if (errorMessages.length > 1) {
+          toast.error(`• ${errorMessages.join("\n• ")}`);
+        } else if (errorMessages.length === 1) {
+          toast.error(errorMessages[0]);
+        }
+      }
+      throw error;
+    } finally {
+      isRegisterLoading.value = false;
+    }
+  }
+
+  async function logout() {
+    await authBus.logout();
+    router.push("/");
+  }
+
+  return {
+    isLoggedIn,
+    userInfo,
+    isLoginLoading,
+    isRegisterLoading,
+    isValidEmail,
+    login,
+    register,
+    logout,
+  };
+}

package/app/composables/useBanners.js

@@ -0,0 +1,25 @@
+import HomeServices from "#osi/services/HomeServices";
+
+export function useBanners() {
+  // Resolved here, synchronously in setup, before useAsyncData's fetcher
+  // (which runs later, past the point where useState() is safe on the server).
+  const baseUrl = useState("base-url", () => "");
+
+  const { data, pending, error, refresh } = useAsyncData(
+    "banners",
+    async () => {
+      const response = await HomeServices.getBanners(baseUrl.value);
+      return Array.isArray(response) ? response : (response?.results || []);
+    },
+    {
+      default: () => [],
+    }
+  );
+
+  return {
+    banners: data,
+    isLoading: pending,
+    error,
+    fetchBanners: refresh,
+  };
+}

package/app/composables/useBuilderPreview.js

@@ -0,0 +1,320 @@
+const PROTOCOL = "osimart-builder/1";
+
+/**
+ * Raw preview overlay state.
+ *
+ * Split out from useBuilderPreview() so useStorefront() can read the overlay
+ * without pulling in the message handling — that would be a cycle, since
+ * onMessage calls useStorefront().setLocale().
+ *
+ * useState, never module refs: one Nuxt process serves every tenant.
+ */
+export function usePreviewOverlay() {
+  return {
+    active: useState("preview-active", () => false),
+    state: useState("preview-state", () => null),
+    theme: useState("preview-theme", () => null),
+    menus: useState("preview-menus", () => null),
+    device: useState("preview-device", () => "DESKTOP"),
+    selectedKey: useState("preview-selected", () => null),
+    hoveredKey: useState("preview-hovered", () => null),
+    // key -> { label, hint, container } for the editor overlay's name tags,
+    // sent by the dashboard with every STATE (the preview has no schemas).
+    labels: useState("preview-labels", () => ({})),
+    // The editor overlay on / off — the dashboard's top-bar toggle.
+    overlayOn: useState("preview-overlay-on", () => true),
+  };
+}
+
+/** CSS selector for a section / block key. */
+export function previewSelector(key) {
+  return `[data-osi-block="${CSS.escape(key)}"], [data-osi-section="${CSS.escape(key)}"]`;
+}
+
+/** The key an element stands for (block or section), or null. */
+export function previewKeyOf(el) {
+  return el?.dataset?.osiBlock ?? el?.dataset?.osiSection ?? null;
+}
+
+/**
+ * Every live (not cloned) element for a key. One block key can be drawn many
+ * times — a card template's parts appear once per item in a list — and
+ * carousels / the marquee render `inert` copies, which never count.
+ */
+export function findPreviewElements(key, max = 60) {
+  if (!import.meta.client || !key) return [];
+  const out = [];
+  for (const el of document.querySelectorAll(previewSelector(key))) {
+    if (el.closest("[inert]")) continue;
+    out.push(el);
+    if (out.length >= max) break;
+  }
+  return out;
+}
+
+/** The first live element for a key. */
+export function findPreviewElement(key) {
+  return findPreviewElements(key, 1)[0] ?? null;
+}
+
+/**
+ * The exact elements the pointer is on / last clicked.
+ *
+ * A key alone can't say WHICH copy of a repeated block (the title of the
+ * second card, not the first) — the overlay needs the element. Module-level
+ * and non-reactive on purpose: DOM nodes only exist on the client (never in
+ * SSR state, so nothing leaks between tenants), and the overlay polls them
+ * every frame anyway.
+ */
+export const previewElements = { hover: null, selected: null };
+
+/**
+ * `hint` when it's still on the page and still stands for `key`; else the
+ * first live element for `key`.
+ */
+export function resolvePreviewElement(key, hint) {
+  if (!key) return null;
+  if (hint?.isConnected && previewKeyOf(hint) === key && !hint.closest("[inert]")) return hint;
+  return findPreviewElement(key);
+}
+
+/** Accept either { settings: {...} } or an already-flat settings map. */
+function settingsOf(payload) {
+  if (!payload) return null;
+  return payload.settings ?? payload;
+}
+
+/**
+ * The dashboard's live preview bridge.
+ *
+ * The builder iframes this storefront and drives it over postMessage. On the
+ * initial load the page fetches from the API so a hard refresh works; after the
+ * READY handshake every edit arrives over the wire and the page re-renders from
+ * memory. Nothing unsaved ever touches the database.
+ *
+ * Envelope: { protocol: "osimart-builder/1", type, payload }
+ *
+ * Storefront -> dashboard:  READY, SECTION_CLICK, HOVER,
+ *                           ADD_BLOCK, ADD_SECTION, ACTION   (editor overlay)
+ * Dashboard -> storefront:  STATE (+ labels), THEME, SETTING, MENUS, DEVICE,
+ *                           LOCALE, SELECT, HOVER, OVERLAY { on }
+ *
+ * Hover comes from the pointer here (deepest block under it) and from the
+ * dashboard's layer tree; both land in hoveredKey, which BuilderOverlay draws.
+ *
+ * Three messages carry theme data rather than one, because they run at very
+ * different rates:
+ *
+ *   STATE    whole editor snapshot — section add/remove/reorder
+ *   THEME    the full theme settings map — any settings-panel commit
+ *   SETTING  one { key, value } — colour pickers and sliders, which fire on
+ *            every mouse move and must not re-serialize the whole theme
+ *
+ * MENUS is separate from STATE for a different reason: menus are not part of
+ * the theme. A merchant can create one in another tab, and the preview has to
+ * be able to render a handle that was never in the bootstrap payload.
+ */
+export function useBuilderPreview() {
+  const {
+    active: isPreview,
+    state,
+    theme: previewThemeState,
+    menus: previewMenusState,
+    device,
+    selectedKey,
+    hoveredKey,
+    labels,
+    overlayOn,
+  } = usePreviewOverlay();
+
+  function send(type, payload = null) {
+    if (!import.meta.client) return;
+    if (window.parent === window) return;
+    window.parent.postMessage({ protocol: PROTOCOL, type, payload }, "*");
+  }
+
+  function onMessage(e) {
+    const d = e.data;
+    if (!d || d.protocol !== PROTOCOL) return;
+
+    switch (d.type) {
+      case "STATE": {
+        const payload = d.payload ?? {};
+        state.value = payload;
+
+        // Only overwrite the overlays this STATE actually carries. A STATE
+        // sent for a section reorder must not wipe a SETTING pushed a moment
+        // earlier — that reads as the colour snapping back mid-drag.
+        if (payload.theme !== undefined) {
+          previewThemeState.value = settingsOf(payload.theme);
+        }
+        if (payload.menus !== undefined) {
+          previewMenusState.value = payload.menus;
+        }
+        if (payload.labels !== undefined) {
+          labels.value = payload.labels ?? {};
+        }
+        break;
+      }
+
+      case "THEME":
+        previewThemeState.value = settingsOf(d.payload);
+        break;
+
+      case "SETTING": {
+        const { key, value } = d.payload ?? {};
+        if (!key) break;
+        previewThemeState.value = { ...(previewThemeState.value ?? {}), [key]: value };
+        break;
+      }
+
+      case "MENUS":
+        previewMenusState.value = d.payload ?? [];
+        break;
+
+      case "DEVICE":
+        device.value = d.payload;
+        break;
+
+      case "LOCALE":
+        useStorefront().setLocale(d.payload);
+        break;
+
+      case "SELECT": {
+        selectedKey.value = d.payload?.key ?? null;
+        // Selected from the dashboard's layer tree: no particular copy — the
+        // overlay falls back to the first. From a click here: the clicked one.
+        if (previewKeyOf(previewElements.selected) !== selectedKey.value) previewElements.selected = null;
+        // Bring it into view only if it isn't already — a click in the
+        // preview selects what's on screen and must not make the page jump.
+        const el = resolvePreviewElement(selectedKey.value, previewElements.selected);
+        if (el) {
+          const r = el.getBoundingClientRect();
+          const visible = r.bottom > 0 && r.top < window.innerHeight;
+          if (!visible) el.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+        break;
+      }
+
+      case "HOVER":
+        // From the layer tree: a key, not a copy.
+        previewElements.hover = null;
+        hoveredKey.value = d.payload?.key ?? null;
+        break;
+
+      case "OVERLAY":
+        overlayOn.value = d.payload?.on !== false;
+        break;
+    }
+  }
+
+  /**
+   * Hover from the pointer: the deepest live block (or section) under it.
+   * Pointer over the overlay's own controls keeps the current hover, or the
+   * "+" buttons would vanish the moment you reach for them.
+   */
+  let lastHover = null;
+  function onPointerMove(e) {
+    if (e.target.closest?.("[data-osi-overlay]")) return;
+    let el = e.target.closest?.("[data-osi-block], [data-osi-section]") ?? null;
+    while (el && el.closest("[inert]")) {
+      el = el.parentElement?.closest("[data-osi-block], [data-osi-section]") ?? null;
+    }
+    // Always the element under the pointer, even when the key is unchanged:
+    // moving from card 1's title to card 2's title is the same key, another
+    // box.
+    previewElements.hover = el;
+    const next = el
+      ? el.dataset.osiBlock
+        ? { type: "BLOCK", key: el.dataset.osiBlock }
+        : { type: "SECTION", key: el.dataset.osiSection }
+      : null;
+    if (next?.key === lastHover?.key) return;
+    lastHover = next;
+    hoveredKey.value = next?.key ?? null;
+    send("HOVER", next);
+  }
+  function onPointerLeave() {
+    previewElements.hover = null;
+    if (!lastHover) return;
+    lastHover = null;
+    hoveredKey.value = null;
+    send("HOVER", null);
+  }
+
+  function onClick(e) {
+    // The overlay's buttons do their own thing.
+    if (e.target.closest?.("[data-osi-overlay]")) return;
+    const section = e.target.closest("[data-osi-section]");
+    if (!section) return;
+    const block = e.target.closest("[data-osi-block]");
+    // Remember which copy was clicked, so the selection box lands on it (a
+    // carousel's inert clone can't carry a box: the first live copy then).
+    const picked = block ?? section;
+    previewElements.selected = picked.closest("[inert]") ? null : picked;
+    // Inside the editor a click means "select this", not "navigate away".
+    e.preventDefault();
+    send("SECTION_CLICK", {
+      key: section.dataset.osiSection,
+      blockKey: block?.dataset.osiBlock ?? null,
+    });
+  }
+
+  function start() {
+    if (!import.meta.client) return;
+    try {
+      if (window.parent === window && window.self === window.top) {
+        const route = useRoute();
+        if (
+          !route?.path?.includes("__builder-preview") &&
+          route?.query?.osi_preview === undefined &&
+          route?.query?.preview === undefined
+        ) {
+          return;
+        }
+      }
+    } catch {
+      // In restricted iframe
+    }
+
+    isPreview.value = true;
+    window.addEventListener("message", onMessage);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("pointermove", onPointerMove, { passive: true });
+    document.documentElement.addEventListener("pointerleave", onPointerLeave);
+
+    // READY goes LAST. The dashboard answers it immediately with STATE, THEME,
+    // MENUS, DEVICE and LOCALE — a listener attached after this misses all of
+    // them, and the preview sits there looking broken with nothing in the
+    // console.
+    send("READY");
+  }
+
+  function stop() {
+    if (!import.meta.client) return;
+    window.removeEventListener("message", onMessage);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("pointermove", onPointerMove);
+    document.documentElement.removeEventListener("pointerleave", onPointerLeave);
+    isPreview.value = false;
+  }
+
+  /**
+   * Sections to render: live editor state once connected, the fetched payload
+   * before the handshake or on a hard refresh.
+   */
+  function sectionsFrom(fallback) {
+    return computed(() => state.value?.sections ?? unref(fallback) ?? []);
+  }
+
+  /**
+   * Kept for compatibility. Prefer useStorefront().theme — it already layers
+   * this overlay over the saved settings, so it works in and out of preview.
+   */
+  const previewTheme = computed(() => previewThemeState.value);
+
+  return {
+    isPreview, state, device, selectedKey, hoveredKey, labels, overlayOn, previewTheme,
+    start, stop, send, sectionsFrom,
+  };
+}

package/app/composables/useButtonStyle.js

@@ -0,0 +1,107 @@
+import {
+  BUTTON_HOVERS,
+  BUTTON_STYLES,
+  FONT_FAMILIES,
+  TEXT_TRANSFORMS,
+  color,
+  compact,
+  has,
+  letterSpacing,
+  pick,
+  px,
+  shadow,
+  weight,
+} from "#osi/theme/controls";
+
+/**
+ * A section's / block's BUTTON_* settings -> one button's overrides.
+ *
+ * Returns CSS custom properties (--btn-*), not properties. The element must
+ * carry the `osi-btn` class (see useButtonClasses below), which is where
+ * the look is actually drawn — from these variables first, then the theme's
+ * --osi-button-* set, then the colour scheme. So:
+ *
+ *   - a setting the merchant filled in on this section wins,
+ *   - a setting left empty follows the theme's Buttons group,
+ *   - a colour left empty in both follows the section's colour scheme.
+ *
+ * Variables rather than inline `background:` so :hover still works — an
+ * inline property can't be overridden by a stylesheet hover rule, an inline
+ * variable can be read by one.
+ *
+ *   const buttonStyle   = useButtonStyle(() => s.value)
+ *   const buttonClasses = useButtonClasses(() => s.value)
+ *   <a class="my-cta" :class="buttonClasses" :style="buttonStyle">…</a>
+ *
+ * Takes a prefix so a section with two buttons (BUTTON_*, SECONDARY_BUTTON_*)
+ * can call it twice.
+ *
+ * `defaults` is accepted for backwards compatibility and ignored for size and
+ * padding: those used to be pinned here (15px / 12px 28px), which is exactly
+ * what stopped the theme's button size from reaching any section.
+ *
+ * @param {object|Ref|(() => object)} settings
+ * @param {object} [options]
+ * @param {string} [options.prefix='BUTTON']
+ * @returns {ComputedRef<object>}
+ */
+export function useButtonStyle(settings, options = {}) {
+  const { prefix = "BUTTON" } = options;
+  return computed(() => buttonVars(toValue(settings) ?? {}, prefix));
+}
+
+/** Non-reactive form, for per-block buttons rendered in a v-for. */
+export function buttonVars(s, prefix = "BUTTON") {
+  const get = (key) => s?.[`${prefix}_${key}`];
+
+  // BUTTON_SIZE is a px number on older sections and SMALL/MEDIUM/LARGE on
+  // newer ones; the enum is handled as a class in buttonClasses().
+  const size = get("SIZE");
+  const sizePx = has(size) && Number.isFinite(Number(size)) ? px(size) : undefined;
+
+  const shadowValue = has(get("SHADOW")) ? shadow(get("SHADOW"), get("SHADOW_COLOR")) : undefined;
+
+  return compact({
+    "--btn-bg": color(get("BG_COLOR")),
+    "--btn-fg": color(get("TEXT_COLOR")),
+    "--btn-border-color": color(get("BORDER_COLOR")),
+    "--btn-hover-bg": color(get("HOVER_BG_COLOR")),
+    "--btn-hover-fg": color(get("HOVER_TEXT_COLOR")),
+    "--btn-radius": px(get("RADIUS")),
+    "--btn-border-w": px(get("BORDER_WIDTH")),
+    "--btn-shadow": shadowValue,
+    "--btn-pad-y": px(get("PADDING_Y")),
+    "--btn-pad-x": px(get("PADDING_X")),
+    "--btn-fs": sizePx ?? px(get("FONT_SIZE")),
+    "--btn-fw": weight(get("FONT_WEIGHT") ?? get("WEIGHT")),
+    "--btn-ff": FONT_FAMILIES[get("FONT")],
+    "--btn-tt": TEXT_TRANSFORMS[get("TRANSFORM")],
+    "--btn-ls": letterSpacing(get("LETTER_SPACING")),
+  });
+}
+
+/**
+ * The class list that goes with useButtonStyle(): `osi-btn` plus the variant
+ * classes for whatever enum settings this section set. Unset style means the
+ * theme's BUTTON_STYLE applies (a root class does that), so no variant class
+ * is added for it.
+ */
+export function useButtonClasses(settings, options = {}) {
+  const { prefix = "BUTTON", extra = [] } = options;
+  return computed(() => buttonClasses(toValue(settings) ?? {}, prefix, toValue(extra)));
+}
+
+export function buttonClasses(s, prefix = "BUTTON", extra = []) {
+  const get = (key) => s?.[`${prefix}_${key}`];
+  const style = pick(get("STYLE"), BUTTON_STYLES);
+  const hover = pick(get("HOVER_EFFECT"), BUTTON_HOVERS);
+  const size = pick(get("SIZE"), ["SMALL", "MEDIUM", "LARGE"]);
+  return [
+    "osi-btn",
+    style && `osi-btn--${style.toLowerCase()}`,
+    hover && `osi-btn-hover--${hover.toLowerCase()}`,
+    size && size !== "MEDIUM" && `osi-btn--${size === "SMALL" ? "sm" : "lg"}`,
+    get("WIDTH") === "FULL" && "osi-btn--block",
+    ...[].concat(extra ?? []),
+  ].filter(Boolean);
+}