@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/sections/CountdownSection.js

@@ -0,0 +1,254 @@
+/**
+ * COUNTDOWN — time remaining until a date.
+ *
+ * Four things make this section fiddly:
+ *
+ * 1. **Hydration.** A server-rendered "04:12:33" is stale by the time it
+ *    reaches the browser, and Vue warns about the mismatch. So the server
+ *    renders dashes and the real numbers appear on mount. That's one frame of
+ *    placeholder, versus a console full of hydration errors and a clock that
+ *    can be minutes wrong on a cached page.
+ * 2. **Timezone.** END_DATE is a naive datetime from the dashboard; the shopper
+ *    is in their own zone. TIMEZONE_MODE says which is meant — STORE treats it
+ *    as a fixed instant via an explicit offset, VISITOR as local wall-clock.
+ *    Getting this wrong ends a sale an hour early for half the world.
+ * 3. **Settings drift.** Different callers of this section have shipped data
+ *    with END_DATE/ENDS_AT and BUTTON_LABEL/CTA_LABEL interchangeably. A
+ *    missing key here doesn't error — it just quietly hides the whole
+ *    section (expired-with-no-target -> ON_EXPIRE=HIDE). So setting
+ *    resolution below accepts both spellings rather than trusting one.
+ * 4. **Box styling is fully merchant-controlled**, including color-scheme
+ *    fallbacks. Every box/value/label style is computed once and applied via
+ *    :style rather than scoped classes, so an empty setting cleanly falls
+ *    back to the store's color scheme instead of leaving a blank value.
+ *
+ * Settings: HEADING, SUBHEADING, END_DATE (alias: ENDS_AT), TIMEZONE_MODE
+ *           (STORE|VISITOR), STORE_UTC_OFFSET, ON_EXPIRE (HIDE|MESSAGE|KEEP),
+ *           EXPIRED_MESSAGE, SHOW_DAYS, SHOW_LABELS, BUTTON_LABEL (alias:
+ *           CTA_LABEL), BUTTON_URL (alias: CTA_URL), DIGIT_STYLE
+ *           (BOX|SOLID|MINIMAL), URGENT_MINUTES (default 60, 0 disables),
+ *           BOX_BACKGROUND, BOX_BORDER_COLOR, BOX_BORDER_WIDTH, BOX_RADIUS,
+ *           BOX_PADDING, UNIT_GAP, VALUE_SIZE, VALUE_COLOR, LABEL_COLOR,
+ *           LABEL_SIZE, URGENT_BACKGROUND, URGENT_VALUE_COLOR,
+ *           HEADING_TEXT_*, SUBHEADING_TEXT_* (size/weight/color/line-height/
+ *           letter-spacing/font, per text_style()), CTA_VARIANT
+ *           (PRIMARY|SECONDARY|LINK), CTA_BACKGROUND, CTA_TEXT_COLOR,
+ *           CTA_RADIUS, CTA_FULL_WIDTH
+ *
+ * Note: the button only renders when BOTH a label and a URL resolve — a
+ * label with no destination isn't shown rather than rendering a dead link.
+ */
+
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } =
+    useSectionShell(() => props.section);
+
+  // Defensive aliasing — different section-data producers have used different
+  // key spellings for the same field. Prefer the canonical key, fall back to
+  // the alternates seen in the wild.
+  const rawEndDate = computed(() => s.value.END_DATE ?? s.value.ENDS_AT ?? s.value.END_AT);
+  const rawButtonLabel = computed(() => s.value.BUTTON_LABEL ?? s.value.CTA_LABEL);
+  const rawButtonUrl = computed(() => s.value.BUTTON_URL ?? s.value.CTA_URL);
+
+  /**
+   * No end date yet: in the editor, count down to a week from now so the
+   * merchant sees a working timer while designing (the schema also pre-fills a
+   * date a week out). On the live store a missing date shows nothing, rather
+   * than a made-up deadline.
+   */
+  const placeholders = usePlaceholders();
+  const demoTarget = new Date(Date.now() + 7 * 86400 * 1000);
+  const isDemo = computed(() => !rawEndDate.value && !!placeholders.allowed?.value);
+
+  const target = computed(() => {
+    const raw = rawEndDate.value;
+    if (!raw) return isDemo.value ? demoTarget : null;
+
+    if (s.value.TIMEZONE_MODE === "STORE") {
+      const offset = s.value.STORE_UTC_OFFSET ?? "+00:00";
+      // Only append an offset when the string doesn't already carry one.
+      const hasZone = /([+-]\d{2}:?\d{2}|Z)$/.test(raw);
+      const value = new Date(hasZone ? raw : `${raw}${offset}`);
+      return Number.isNaN(value.getTime()) ? null : value;
+    }
+
+    const value = new Date(raw);
+    return Number.isNaN(value.getTime()) ? null : value;
+  });
+
+  const remaining = ref(null); // null until mounted — see the hydration note
+  let timer = null;
+
+  function tick() {
+    if (!target.value) {
+      remaining.value = 0;
+      return;
+    }
+    remaining.value = Math.max(0, target.value.getTime() - Date.now());
+  }
+
+  onMounted(() => {
+    tick();
+    timer = setInterval(tick, 1000);
+  });
+  onBeforeUnmount(() => clearInterval(timer));
+
+  // Recompute immediately when the merchant edits the date in the builder.
+  watch(target, () => {
+    if (import.meta.client) tick();
+  });
+
+  const parts = computed(() => {
+    if (remaining.value === null) return null;
+
+    const total = Math.floor(remaining.value / 1000);
+    const showDays = s.value.SHOW_DAYS !== false;
+
+    const days = showDays ? Math.floor(total / 86400) : 0;
+    // Hours absorb the days when the days unit is hidden, so a 3-day sale doesn't
+    // show as "0 hours".
+    const hours = Math.floor((total - days * 86400) / 3600);
+
+    return [
+      ...(showDays ? [{ id: "d", value: days, label: "Days" }] : []),
+      { id: "h", value: hours, label: "Hours" },
+      { id: "m", value: Math.floor((total % 3600) / 60), label: "Minutes" },
+      { id: "s", value: total % 60, label: "Seconds" },
+    ];
+  });
+
+  const expired = computed(() => remaining.value !== null && remaining.value <= 0);
+  // Default MESSAGE, not HIDE: a section that silently vanishes when its date
+  // passes (or was never set) reads as "the countdown is broken".
+  const onExpire = computed(() => s.value.ON_EXPIRE ?? "MESSAGE");
+  const hidden = computed(
+    () => (!target.value && !isDemo.value) || (expired.value && onExpire.value === "HIDE")
+  );
+  const showZeros = computed(() => !expired.value || onExpire.value === "KEEP");
+
+  // Urgency: the closing stretch gets a distinct, merchant-defined visual
+  // state rather than looking identical to a countdown with three days left.
+  const urgentMinutes = computed(() => {
+    const raw = s.value.URGENT_MINUTES;
+    return raw === 0 ? 0 : raw ?? 60;
+  });
+  const isUrgent = computed(() => {
+    if (!urgentMinutes.value || remaining.value === null || expired.value) return false;
+    return remaining.value <= urgentMinutes.value * 60 * 1000;
+  });
+
+  const pad = (value) => String(value).padStart(2, "0");
+
+  const buttonLabel = computed(() => t(rawButtonLabel.value));
+  const buttonUrl = computed(() => rawButtonUrl.value || null);
+  const digitStyle = computed(() => (s.value.DIGIT_STYLE || "BOX").toLowerCase());
+
+  // --- Fully merchant-controlled box styling -------------------------------
+  // Every value here has a sensible fallback to the theme's color-scheme
+  // variables, so an untouched section still looks intentional out of the box.
+
+  const px = (value, fallback) => `${value ?? fallback}px`;
+
+  const unitsStyle = computed(() => ({
+    gap: px(s.value.UNIT_GAP, 12),
+  }));
+
+  const boxStyle = computed(() => {
+    const style = digitStyle.value === "minimal" ? {} : {};
+
+    // Background: SOLID defaults to the theme button color; BOX defaults to
+    // transparent (just a border); MINIMAL never gets a background.
+    if (digitStyle.value !== "minimal") {
+      const defaultBg = digitStyle.value === "solid" ? "var(--osi-btn-bg)" : "transparent";
+      style.background = isUrgent.value
+        ? s.value.URGENT_BACKGROUND || s.value.BOX_BACKGROUND || defaultBg
+        : s.value.BOX_BACKGROUND || defaultBg;
+      style.borderRadius = px(s.value.BOX_RADIUS, 4);
+      style.padding = px(s.value.BOX_PADDING, 12);
+    }
+
+    if (digitStyle.value === "box") {
+      style.borderWidth = px(s.value.BOX_BORDER_WIDTH, 1);
+      style.borderStyle = "solid";
+      style.borderColor = s.value.BOX_BORDER_COLOR || "var(--osi-border)";
+    }
+
+    return style;
+  });
+
+  const valueStyle = computed(() => {
+    const defaultColor = digitStyle.value === "solid" ? "var(--osi-btn-text)" : "inherit";
+    return {
+      fontSize: px(s.value.VALUE_SIZE, 44),
+      color: isUrgent.value
+        ? s.value.URGENT_VALUE_COLOR || s.value.VALUE_COLOR || defaultColor
+        : s.value.VALUE_COLOR || defaultColor,
+    };
+  });
+
+  const labelStyle = computed(() => ({
+    fontSize: px(s.value.LABEL_SIZE, 11),
+    color: s.value.LABEL_COLOR || undefined,
+  }));
+
+  // --- CTA button styling ---------------------------------------------------
+  // Variant sets the base look; CTA_BACKGROUND/CTA_TEXT_COLOR/CTA_RADIUS layer
+  // on top as explicit overrides, same override-over-default pattern as the
+  // box styling above.
+
+  const ctaVariant = computed(() => s.value.CTA_VARIANT || "PRIMARY");
+
+  // CTA_* are this section's own button settings; anything left empty follows
+  // the theme's Buttons group via .osi-btn.
+  const ctaStyle = computed(() => {
+    const style = {};
+    if (s.value.CTA_BACKGROUND) style["--btn-bg"] = s.value.CTA_BACKGROUND;
+    if (s.value.CTA_TEXT_COLOR) style["--btn-fg"] = s.value.CTA_TEXT_COLOR;
+    if (s.value.CTA_RADIUS !== undefined && s.value.CTA_RADIUS !== null && s.value.CTA_RADIUS !== "") {
+      style["--btn-radius"] = `${s.value.CTA_RADIUS}px`;
+    }
+    return style;
+  });
+
+  const ctaClasses = computed(() => [
+    "osi-btn",
+    "osi-cd-button",
+    {
+      PRIMARY: "",
+      // SECONDARY = outline in the CTA's own colour when set, else the
+      // theme's secondary colours.
+      SECONDARY: s.value.CTA_BACKGROUND ? "osi-btn--outline" : "osi-btn--secondary",
+      LINK: "osi-btn--underline",
+    }[ctaVariant.value] ?? "",
+    { "osi-btn--block": !!s.value.CTA_FULL_WIDTH },
+  ]);
+
+  // --- Vertical spacing between blocks --------------------------------------
+  // Previously a single hardcoded `gap: 1rem` on the flex column applied the
+  // same spacing everywhere. These give heading->subheading, text->countdown,
+  // and countdown->button independent control. Only applied when the element
+  // above actually rendered, so an untouched HEADING doesn't leave a phantom
+  // gap at the top when no button is shown, etc.
+
+  const hasHeading = computed(() => !!heading.value);
+  const hasSubheading = computed(() => !!t(s.value.SUBHEADING));
+  const hasTextBlock = computed(() => hasHeading.value || hasSubheading.value);
+
+  const subheadingStyle = computed(() =>
+    hasHeading.value ? { marginTop: px(s.value.HEADING_GAP, 12) } : {}
+  );
+  const countdownBlockStyle = computed(() =>
+    hasTextBlock.value ? { marginTop: px(s.value.CONTENT_GAP, 20) } : {}
+  );
+  const buttonStyle_spacing = computed(() => ({ marginTop: px(s.value.BUTTON_GAP, 20) }));
+
+  // A once-per-minute plain-language string for screen readers, instead of
+  // re-announcing every second like the visual timer does.
+  const srText = computed(() => {
+    if (!parts.value) return "";
+    return parts.value.map((p) => `${p.value} ${p.label}`).join(", ") + " remaining";
+  });
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, rawEndDate, rawButtonLabel, rawButtonUrl, placeholders, demoTarget, isDemo, target, remaining, timer, tick, parts, expired, onExpire, hidden, showZeros, urgentMinutes, isUrgent, pad, buttonLabel, buttonUrl, digitStyle, px, unitsStyle, boxStyle, valueStyle, labelStyle, ctaVariant, ctaStyle, ctaClasses, hasHeading, hasSubheading, hasTextBlock, subheadingStyle, countdownBlockStyle, buttonStyle_spacing, srText };
+}

package/app/logic/sections/CustomHtmlSection.js

@@ -0,0 +1,51 @@
+/**
+ * CUSTOM_HTML — merchant-authored markup, with optional scoped CSS.
+ *
+ * ── What v-html does and doesn't do ────────────────────────────────────────
+ *
+ * Inline <script> tags in v-html do NOT execute — the browser ignores scripts
+ * inserted via innerHTML. Event-handler attributes (onclick, onerror, onload)
+ * DO fire, and so do <iframe>, <object> and <embed>. So this is not a sandbox.
+ *
+ * That's an accepted risk here, at the same trust level as RICH_TEXT's BODY:
+ * the author is the store owner, editing their own storefront, and the payload
+ * only reaches this component through an authenticated dashboard write. If
+ * section content ever becomes writable by anyone less trusted — a staff role
+ * with limited permissions, an app integration, an import — this needs
+ * server-side sanitisation before that ships, not after.
+ *
+ * What is enforced: on SSR the markup renders as-is, but a merchant pasting a
+ * full page (<html>, <head>, <body>) would nest document tags inside a
+ * <section>, which browsers silently discard — so those wrappers are stripped
+ * and the contents kept, rather than the section rendering blank with no
+ * explanation.
+ *
+ * Settings: HTML, CUSTOM_CSS, FULL_WIDTH
+ */
+
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, customClass } = useSectionShell(
+    () => props.section
+  );
+
+  const html = computed(() => {
+    const raw = t(s.value.HTML) || "";
+    if (!raw) return "";
+
+    return raw
+      .replace(/<\/?(?:html|head|body)\b[^>]*>/gi, "")
+      // <title> and <meta> inside the body are inert and confuse the outline.
+      .replace(/<title\b[^>]*>[\s\S]*?<\/title>/gi, "")
+      .replace(/<meta\b[^>]*>/gi, "");
+  });
+
+  // Scoped per section instance so two CUSTOM_HTML blocks on one page can't
+  // overwrite each other's rules.
+  const scopeAttr = computed(() => `[data-osi-section="${props.section.key}"]`);
+  useScopedCss(() => s.value.CUSTOM_CSS, scopeAttr, `osi-html-css-${props.section.key}`);
+
+  const fullWidth = computed(() => !!s.value.FULL_WIDTH);
+
+  return { s, t, shellStyle, innerStyle, customClass, html, scopeAttr, fullWidth };
+}

package/app/logic/sections/DividerSection.js

@@ -0,0 +1,31 @@
+/**
+ * DIVIDER — a visible line between sections.
+ *
+ * Spacing above and below is the section's own padding (common settings,
+ * with phone values), so a divider can hug the sections around it or stand
+ * apart. SPACER is the empty-space sibling.
+ *
+ * Settings: DIVIDER_STYLE (SOLID | DASHED | DOTTED | DOUBLE), DIVIDER_THICKNESS,
+ *           DIVIDER_WIDTH (%), DIVIDER_COLOR, DIVIDER_ALIGNMENT, DIVIDER_LABEL
+ *           (optional text in the middle of the line)
+ */
+
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const label = computed(() => t(s.value.DIVIDER_LABEL));
+
+  const vars = computed(() => ({
+    "--dv-style": String(s.value.DIVIDER_STYLE || "SOLID").toLowerCase(),
+    "--dv-w": `${has(s.value.DIVIDER_THICKNESS) ? Number(s.value.DIVIDER_THICKNESS) : 1}px`,
+    "--dv-width": `${has(s.value.DIVIDER_WIDTH) ? Number(s.value.DIVIDER_WIDTH) : 100}%`,
+    "--dv-color": s.value.DIVIDER_COLOR || "var(--osi-border, #e5e5e5)",
+    "--dv-justify":
+      { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" }[String(s.value.DIVIDER_ALIGNMENT || "CENTER").toUpperCase()] ??
+      "center",
+  }));
+
+  return { s, t, shellStyle, innerStyle, customClass, has, label, vars };
+}

package/app/logic/sections/FaqSection.js

@@ -0,0 +1,53 @@
+
+export default function useLogic({ props }) {
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "LEFT", POSITION: "TOP", GAP: 24 };
+
+  const { t } = useSectionShell(() => props.section);
+
+  const structuredData = computed(() => {
+    const blocks = props.section.blocks ?? [];
+    const byKey = new Map(blocks.map((b) => [b.key, b]));
+
+    // Live only if the block and every group above it are enabled and present.
+    const live = (block, depth = 0) => {
+      if (!block || block.disabled || depth > 16) return false;
+      if (!block.parent_key) return true;
+      return live(byKey.get(block.parent_key), depth + 1);
+    };
+
+    const entries = blocks
+      .filter((b) => b.type === "FAQ_ITEM" && live(b))
+      .filter((b) => {
+        const accordion = byKey.get(b.parent_key);
+        return accordion?.type === "ACCORDION" && accordion.settings?.FAQ_SCHEMA !== false;
+      })
+      .map((b) => ({ question: t(b.settings?.QUESTION), answer: t(b.settings?.ANSWER) }))
+      .filter((e) => e.question && e.answer);
+
+    if (!entries.length) return null;
+    return {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      mainEntity: entries.map((e) => ({
+        "@type": "Question",
+        name: e.question,
+        acceptedAnswer: { "@type": "Answer", text: e.answer },
+      })),
+    };
+  });
+
+  useHead(() => ({
+    script: structuredData.value
+      ? [
+          {
+            key: `faq-ld-${props.section.key}`,
+            type: "application/ld+json",
+            // "</" can't appear inside a script element's text.
+            innerHTML: JSON.stringify(structuredData.value).replace(/</g, "\\u003c"),
+          },
+        ]
+      : [],
+  }));
+
+  return { ROOT_DEFAULTS, t, structuredData };
+}

package/app/logic/sections/FeatureListSection.js

@@ -0,0 +1,6 @@
+
+export default function useLogic() {
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "TOP", GAP: 32 };
+
+  return { ROOT_DEFAULTS };
+}

package/app/logic/sections/FeaturedProductSection.js

@@ -0,0 +1,40 @@
+
+export default function useLogic({ props }) {
+  const DEFAULT_BLOCKS = [
+    { id: "fp-title", type: "TITLE", settings: {} },
+    { id: "fp-price", type: "PRICE", settings: {} },
+    { id: "fp-picker", type: "VARIANT_PICKER", settings: {} },
+    { id: "fp-buy", type: "BUY_BUTTONS", settings: { BUTTON_HEIGHT: 44 } },
+    { id: "fp-description", type: "DESCRIPTION", settings: { DESCRIPTION_COLLAPSE: true, DESCRIPTION_CLAMP: 3 } },
+    {
+      id: "fp-more",
+      type: "BUTTON",
+      settings: { LABEL: "View full details", LINK_TO_PRODUCT: true, BUTTON_STYLE: "UNDERLINE" },
+    },
+  ];
+
+  /**
+   * The gallery is always a carousel here, desktop and phones (the section's
+   * schema has no layout picker). Unless the merchant set them: image and
+   * details share the row 50 / 50, the image square, the details filling their
+   * column. Side by side from tablets up (`featured` below), stacked on phones.
+   */
+  const FIXED = { MEDIA_LAYOUT: "CAROUSEL", MOBILE_MEDIA_LAYOUT: "CAROUSEL" };
+  const SMALLER = { MEDIA_WIDTH: 50, MEDIA_RATIO: "SQUARE" };
+  const blank = (v) => v === undefined || v === null || v === "";
+
+  const withBlocks = computed(() => {
+    const settings = { ...(props.section.settings ?? {}) };
+    for (const [key, value] of Object.entries(SMALLER)) if (blank(settings[key])) settings[key] = value;
+    Object.assign(settings, FIXED);
+    return {
+      ...props.section,
+      settings,
+      blocks: (props.section.blocks ?? []).length ? props.section.blocks : DEFAULT_BLOCKS,
+    };
+  });
+
+  const productId = computed(() => props.section.settings?.PRODUCT ?? props.section.data?.product ?? null);
+
+  return { DEFAULT_BLOCKS, FIXED, SMALLER, blank, withBlocks, productId };
+}

package/app/logic/sections/FooterSection.js

@@ -0,0 +1,16 @@
+import { FooterBlock } from "#components";
+
+export default function useLogic({ props }) {
+  const { tree } = useContentTree(() => props.section, {
+    rootDefaults: { DIRECTION: "HORIZONTAL", ALIGNMENT: "SPACE_BETWEEN", POSITION: "TOP", GAP: 40 },
+    custom: {
+      FOOTER_MENU: FooterBlock,
+      FOOTER_LOGO: FooterBlock,
+      FOOTER_NEWSLETTER: FooterBlock,
+      FOOTER_SOCIAL: FooterBlock,
+    },
+    index: () => props.index,
+  });
+
+  return { tree };
+}

package/app/logic/sections/FooterUtilitiesSection.js

@@ -0,0 +1,24 @@
+
+export default function useLogic({ props }) {
+  // The blocks' keys, so SiteFooter can tag their parts for the editor.
+  const keyOf = (type) =>
+    (props.section.blocks ?? []).find((b) => b.type === type && !b.disabled)?.key ?? null;
+  // …and their places: the bar shows its parts in block order (drag to reorder).
+  const orderOf = (type) =>
+    (props.section.blocks ?? []).filter((b) => !b.disabled).findIndex((b) => b.type === type);
+  provide(
+    "osiUtilityBlocks",
+    computed(() => ({
+      copyright: keyOf("UTILITY_COPYRIGHT"),
+      policies: keyOf("UTILITY_POLICIES"),
+      social: keyOf("UTILITY_SOCIAL"),
+      order: {
+        copyright: orderOf("UTILITY_COPYRIGHT"),
+        policies: orderOf("UTILITY_POLICIES"),
+        social: orderOf("UTILITY_SOCIAL"),
+      },
+    }))
+  );
+
+  return { keyOf, orderOf };
+}