@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/components/QuickBuy.js

@@ -0,0 +1,194 @@
+/**
+ * Quick buy — pick a product's options and add it without leaving the list.
+ * Opened by a product card's Buy button (PRODUCT_LIST) when the product has
+ * options; same selection / stock / add logic as the product page
+ * (useProductVariants + useQuickShop).
+ *
+ *   SHEET  a compact panel over the bottom of the card image; on phones a
+ *          bottom sheet
+ *   POPUP  a quick-add dialog: gallery on one side, title / price / options /
+ *          quantity / add on the other; a sheet with the gallery on top on
+ *          phones
+ *
+ * Closing animates first and only then tells the card (`close` on
+ * after-leave) — the card unmounts this component, so emitting straight away
+ * cut the animation off.
+ *
+ * Every click inside stops at the panel: the card around it is a link.
+ */
+
+
+export default function useLogic({ props, emit }) {
+  const { isMobile } = useLayoutShell();
+  const { cartType, store } = useStorefront();
+  const { toggleCartSidebar } = useSidebar();
+  const { mediaUrl } = useMediaUrl();
+  const router = useRouter();
+
+  const variants = useProductVariants(() => props.product);
+  const quickShop = useQuickShop({
+    product: () => props.product,
+    variants,
+    // We close ourselves, after the leave animation (see close()).
+    closeOnAdd: false,
+    onAdded: () => {
+      afterClose = () => (cartType.value === "PAGE" ? router.push("/cart") : toggleCartSidebar(true));
+      shown.value = false;
+    },
+  });
+
+  /* --------------------------------------------------------------- open / close
+   *
+   * Closing = fade out FIRST, then reset. Resetting at the start (the old way)
+   * cleared the picked options and unlocked page scroll mid-animation: the
+   * price, labels and swatches jumped and the scrollbar shifted the page under
+   * the fading dialog. Now `shown` drives the animation; the selection reset,
+   * the scroll unlock and the card's `close` all wait for after-leave.
+   */
+
+  const shown = ref(false);
+  const locked = ref(false);
+  let afterClose = null;
+
+  const inline = computed(() => props.mode === "SHEET" && !isMobile.value);
+  const popup = computed(() => props.mode === "POPUP");
+
+  onMounted(() => {
+    quickShop.open(props.mode === "SHEET" && isMobile.value ? "MOBILE" : "DESKTOP");
+    locked.value = true;
+    shown.value = true;
+  });
+  function close() {
+    shown.value = false;
+  }
+  function onAfterLeave() {
+    quickShop.close(); // resets the selection, releases the phone-sheet lock
+    locked.value = false;
+    emit("close");
+    afterClose?.();
+    afterClose = null;
+  }
+
+  // The popup covers the page on every screen; the sheet only on phones
+  // (useQuickShop locks for that one).
+  useBodyScrollLock(() => locked.value && popup.value);
+
+  function onKey(e) {
+    if (e.key === "Escape" && shown.value) close();
+  }
+  onMounted(() => window.addEventListener("keydown", onKey));
+  onBeforeUnmount(() => window.removeEventListener("keydown", onKey));
+
+  const closeBtn = ref(null);
+  function onAfterEnter() {
+    if (!inline.value) closeBtn.value?.focus({ preventScroll: true });
+  }
+
+  /* ------------------------------------------------------------------- details */
+
+  const isColor = (type) => ["color", "colour"].includes(String(type.name).toLowerCase());
+  const selected = computed(() => variants.selectedVariant.value);
+  const soldOut = computed(() => variants.stockFor(selected.value));
+  // The picked option has no price: shown as unavailable, can't be added.
+  const noPrice = computed(() => !!selected.value && !(Number(selected.value.price) > 0));
+  const currency = computed(
+    () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+  );
+  const money = (n) => (Number.isFinite(Number(n)) && Number(n) > 0 ? `${currency.value}${Number(n)}` : "");
+
+  /** The selected variant's price once chosen; the product's range before. */
+  const price = computed(() => {
+    if (selected.value) {
+      const sale = variants.variantDiscountedPrice(selected.value);
+      const now = sale ?? Number(selected.value.price);
+      const compare = Number(selected.value.compare_at_price) || 0;
+      const was = compare > now ? compare : sale != null ? Number(selected.value.price) : 0;
+      return { now: money(now), was: was ? money(was) : "", sale: sale != null };
+    }
+    const p = props.product;
+    const fmt = (v) =>
+      String(v ?? "")
+        .split("-")
+        .map((x) => money(parseFloat(x)))
+        .filter(Boolean)
+        .join(" – ");
+    const base = fmt(p.price_range);
+    const sale = fmt(p.discounted_price_range);
+    return sale && sale !== base ? { now: sale, was: base, sale: true } : { now: sale || base, was: "", sale: false };
+  });
+
+  /** "Black" next to "Color", once picked. */
+  function pickedName(type) {
+    const picked = variants.selectedOptions.value?.[type.id];
+    const id = picked?.id ?? picked;
+    if (!id) return "";
+    const v = (variants.applyCombinationLogic(type.id) ?? []).find((x) => x.id === id);
+    return v?.name ?? "";
+  }
+
+  /* ------------------------------------------------------------------- gallery */
+
+  const images = computed(() => {
+    const p = props.product;
+    const out = [p.main_image, ...(p.gallery ?? []).map((g) => g?.media)].filter(Boolean);
+    const seen = new Set();
+    return out
+      .map((m) => mediaUrl(m))
+      .filter((src) => src && !seen.has(src) && seen.add(src));
+  });
+  const track = ref(null);
+  const slide = ref(0);
+  function onScroll() {
+    const el = track.value;
+    if (el) slide.value = Math.round(Math.abs(el.scrollLeft) / Math.max(1, el.clientWidth));
+  }
+  function goTo(i) {
+    const el = track.value;
+    if (!el) return;
+    const dir = getComputedStyle(el).direction === "rtl" ? -1 : 1;
+    el.scrollTo({ left: dir * i * el.clientWidth, behavior: "smooth" });
+  }
+
+  /* --------------------------------------------------------------- description */
+
+  const description = computed(() => String(props.product.description || "").trim());
+  const descEl = ref(null);
+  const descLong = ref(false);
+  const descOpen = ref(false);
+  /** "View more" only when the text is actually cut. */
+  function measureDesc() {
+    const el = descEl.value;
+    descLong.value = !!el && el.scrollHeight > el.clientHeight + 2;
+  }
+  watch([shown, description], () => nextTick(measureDesc), { flush: "post" });
+
+  /* ------------------------------------------------------------------ quantity */
+
+  const step = computed(() => Number(props.product.quantity_step) || 1);
+  const qty = ref(step.value);
+  const dec = () => (qty.value = Math.max(step.value, qty.value - step.value));
+  const inc = () => (qty.value += step.value);
+
+  async function add() {
+    if (!variants.isSelectionComplete.value) {
+      quickShop.flashError(`Select a ${variants.missingVariantName.value}`);
+      return;
+    }
+    if (!selected.value) {
+      quickShop.flashError("That combination isn't available.");
+      return;
+    }
+    await quickShop.addVariant(selected.value, qty.value);
+  }
+
+  const ctaLabel = computed(() =>
+    quickShop.errorMessage.value ||
+    (quickShop.adding.value
+      ? "Adding…"
+      : soldOut.value
+        ? "Sold out"
+        : "Add to cart")   // no price: same label, the button is disabled
+  );
+
+  return { isMobile, cartType, store, toggleCartSidebar, mediaUrl, router, variants, quickShop, shown, locked, afterClose, inline, popup, close, onAfterLeave, onKey, closeBtn, onAfterEnter, isColor, selected, soldOut, noPrice, currency, money, price, pickedName, images, track, slide, onScroll, goTo, description, descEl, descLong, descOpen, measureDesc, step, qty, dec, inc, add, ctaLabel };
+}

package/app/logic/components/SearchOverlay.js

@@ -0,0 +1,41 @@
+
+export default function useLogic({ props, emit }) {
+  const router = useRouter();
+  const query = ref("");
+  const error = ref("");
+  const input = ref(null);
+
+  useBodyScrollLock(() => props.open);
+
+  watch(
+    () => props.open,
+    async (open) => {
+      if (!open) {
+        query.value = "";
+        error.value = "";
+        return;
+      }
+      await nextTick();
+      input.value?.focus();
+    }
+  );
+
+  function submit() {
+    const value = query.value.trim();
+    if (!value) {
+      // Terazar shook the field with no message. A shake alone doesn't tell a
+      // screen-reader user anything, so the message carries the meaning and the
+      // shake is decoration on top.
+      error.value = "Enter something to search for.";
+      return;
+    }
+    emit("close");
+    router.push(`/search?q=${encodeURIComponent(value)}`);
+  }
+
+  function clearError() {
+    error.value = "";
+  }
+
+  return { router, query, error, input, submit, clearError };
+}

package/app/logic/components/SidebarMenuItem.js

@@ -0,0 +1,39 @@
+/**
+ * One sidebar row, recursive.
+ *
+ * Nesting depth is whatever the merchant's menu has, so the component renders
+ * itself rather than assuming two levels. SIDEBAR_MAX_DEPTH stops the
+ * recursion — a menu that accidentally references itself would otherwise
+ * recurse until the tab dies, and a 6-deep menu in a 380px drawer is unusable
+ * long before that.
+ *
+ * Expansion state is owned by the drawer and reached through inject(), not
+ * passed down: a level-3 item has to be able to close its level-3 siblings,
+ * and threading that through every intermediate level as props is how the
+ * "close others" setting ends up working on some levels and not others.
+ */
+
+
+export default function useLogic({ props }) {
+  const nav = inject("osi-sidebar-nav");
+
+  const canExpand = computed(
+    () => props.item.children?.length && props.depth + 1 < nav.maxDepth.value
+  );
+  const isOpen = computed(() => nav.isOpen(props.item.id));
+  const isActive = computed(() => nav.isActive(props.item));
+
+  // A parent deeper than the top level that links somewhere is two controls:
+  // its name goes to its page, its arrow opens its submenu. (Top-level items
+  // toggle on the whole row; their page is the backend's "View all" row.)
+  const split = computed(
+    () => canExpand.value && props.depth > 0 && !!props.item.url && props.item.url !== "/" && props.item.url !== "#"
+  );
+
+  const childIds = computed(() => (props.item.children ?? []).map((c) => c.id));
+  const rowStyle = computed(() => ({
+    paddingInlineStart: `calc(var(--osi-sb-pad-x) + ${props.depth} * var(--osi-sb-indent))`,
+  }));
+
+  return { nav, canExpand, isOpen, isActive, split, childIds, rowStyle };
+}