@osimart/create-storefront 1.0.4 → 1.0.7

package/app/app.vue

@@ -4,12 +4,28 @@ import "#osi/assets/css/osi-controls.css";
 import { parseIds } from "#osi/utils/analytics";
 
 const { load, dir, store, error } = useStorefront();
+// Captured before the first await (the request event needs Nuxt's context).
+const requestEvent = import.meta.server ? useRequestEvent() : null;
 const { tokens, rootClasses, fontLinks } = useThemeTokens();
 const { start: startBuilderPreview, stop: stopBuilderPreview } = useBuilderPreview();
 
 const { error: fetchError } = await useAsyncData("storefront", () => load());
 const shown = computed(() => error.value ?? fetchError.value ?? null);
 
+const unavailableStatus = computed(() => {
+  const e = shown.value;
+  if (!e) return null;
+  const status = Number(e.status ?? e.statusCode) || 0;
+  return status >= 400 && status < 500 ? status : 503;
+});
+if (requestEvent && unavailableStatus.value) {
+  setResponseStatus(requestEvent, unavailableStatus.value);
+}
+
+const publicConfig = useRuntimeConfig().public;
+const osimartUrl = String(publicConfig.osimartUrl || "https://osimart.com").replace(/\/+$/, "");
+const signupUrl = publicConfig.osimartSignupUrl || `${osimartUrl}/`;
+
 const isDev = import.meta.dev;
 
 onMounted(() => {
@@ -39,6 +55,8 @@ onBeforeUnmount(() => {
 useThemeSeo();
 
 useHead({
+  title: computed(() => (shown.value ? "Store unavailable" : undefined)),
+  meta: computed(() => (shown.value ? [{ name: "robots", content: "noindex" }] : [])),
   htmlAttrs: computed(() => ({ dir: dir.value })),
   noscript: computed(() =>
     parseIds(store.value?.meta_pixel_id, "pixel").map((id) => ({
@@ -46,10 +64,14 @@ useHead({
       innerHTML: `<img height="1" width="1" style="display:none" alt="" src="https://www.facebook.com/tr?id=${id}&ev=PageView&noscript=1" />`,
     })),
   ),
-  bodyAttrs: computed(() => ({
-    style: tokens.value,
-    class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
-  })),
+  bodyAttrs: computed(() =>
+    shown.value
+      ? { class: "osi-unavailable-body" }
+      : {
+          style: tokens.value,
+          class: rootClasses.value.filter((c) => /^osi-(btns|inputs|labels)/.test(c)),
+        }
+  ),
     // A getter, not a snapshot: a font picked in the editor (or a theme that
   // loads later) must add its stylesheet.
   link: computed(() => [
@@ -63,13 +85,17 @@ useHead({
 </script>
 
 <template>
-  <div v-if="shown" class="osi-fatal">
-    <p>This store isn't available right now.</p>
+  <main v-if="shown" class="osi-unavailable" dir="ltr">
+    <a :href="osimartUrl" class="osi-unavailable-back">
+      <span aria-hidden="true">&larr;</span>
+      Osimart
+    </a>
+    <h1 class="osi-unavailable-title">This store is currently unavailable.</h1>
+    <a :href="signupUrl" class="osi-unavailable-cta">Start a free trial</a>
 
-   
     <pre v-if="isDev" class="osi-fatal-detail">{{ shown.status ? `HTTP ${shown.status} — ` : "" }}{{ shown.message }}<template v-if="shown.data">
 {{ shown.data }}</template></pre>
-  </div>
+  </main>
 
   <div v-else class="osi-root" :class="rootClasses" :style="tokens" :dir="dir">
    <NuxtLoadingIndicator
@@ -134,14 +160,74 @@ body .font-thoren {
 body .font-heading {
   font-family: var(--osi-font-heading);
 }
-.osi-fatal {
-  padding: 4rem 1rem;
+/* ---- Store unavailable (Shopify-style) — no theme tokens on purpose. */
+body.osi-unavailable-body {
+  margin: 0;
+  background: #20336b;
+}
+.osi-unavailable {
+  min-height: 100vh;
+  min-height: 100dvh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: clamp(5rem, 18vh, 10.5rem) 1.5rem 4rem;
+  background: #20336b;
+  color: #fff;
   text-align: center;
-  font-family: system-ui, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+.osi-unavailable a {
+  color: inherit;
+  text-decoration: none;
+}
+.osi-unavailable-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  opacity: 0.95;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-back:hover {
+  opacity: 0.7;
+}
+.osi-unavailable-title {
+  margin: 2.25rem 0 0;
+  max-width: 18ch;
+  font-size: clamp(2.5rem, 5.6vw, 4.75rem);
+  font-weight: 400;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+@media (min-width: 900px) {
+  .osi-unavailable-title {
+    max-width: none;
+  }
+}
+.osi-unavailable-cta {
+  margin-top: 1.75rem;
+  padding-bottom: 0.15rem;
+  font-size: 1.375rem;
+  line-height: 1.3;
+  border-bottom: 2px solid currentColor;
+  transition: opacity 0.15s ease;
+}
+.osi-unavailable-cta:hover {
+  opacity: 0.75;
+}
+.osi-unavailable :focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 4px;
+  border-radius: 2px;
 }
 .osi-fatal-detail {
   display: inline-block;
-  margin-top: 1rem;
+  margin-top: 3rem;
   padding: 0.75rem 1rem;
   text-align: start;
   background: #fef2f2;

package/app/components/SectionRenderer.vue

@@ -16,7 +16,9 @@ defineProps({
 // Hover / selection outlines are drawn by BuilderOverlay (pages/__builder-preview),
 // not here: a CSS outline gets clipped by overflow, can't carry a name tag or
 // buttons, and a nested block's outline would fight its section's.
-const { isPreview } = useBuilderPreview();
+//
+// A hidden section (disabled) isn't rendered at all — in the editor's preview
+// too, like Shopify — so the preview shows exactly what the live store will.
 </script>
 
 <template>
@@ -24,11 +26,10 @@ const { isPreview } = useBuilderPreview();
     <template v-for="(section, i) in sections" :key="section.key">
       <component
         :is="resolveSection(section.type)"
-        v-if="resolveSection(section.type)"
+        v-if="!section.disabled && resolveSection(section.type)"
         :section="section"
         :index="i"
         :data-osi-section="section.key"
-        :class="{ 'osi-preview-disabled': isPreview && section.disabled }"
       />
     </template>
   </div>
@@ -38,9 +39,4 @@ const { isPreview } = useBuilderPreview();
 .osi-sections > :deep(*) + :deep(*) {
   margin-top: 0;
 }
-
-/* Editor only — never rendered on a live storefront. */
-.osi-preview-disabled {
-  opacity: 0.45;
-}
 </style>

package/app/composables/useContentTree.js

@@ -238,9 +238,18 @@ export function useContentTree(section, options = {}) {
   const HEADINGS = ["H1", "H2", "H3", "H4", "H5", "H6"];
 
   const plain = (html) => String(html || "").replace(/<(img|video|iframe)\b/gi, "x").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").trim();
-  // A heading preset renders as <hN>: its richtext paragraphs become lines.
+  // A heading preset renders as <hN>, which can't hold blocks: the editor's
+  // paragraphs, headings and list items become lines (<br>) inside it.
+  // Inline formatting (<b>, <i>, <a>, …) is kept.
   const inline = (html) =>
-    String(html).replace(/<\/p>\s*<p[^>]*>/gi, "<br>").replace(/^\s*<p[^>]*>/i, "").replace(/<\/p>\s*$/i, "");
+    String(html)
+      .replace(/<(p|h[1-6]|li)\b[^>]*>\s*<br\s*\/?>\s*<\/\1>/gi, "<$1></$1>") // a blank line = one <br>
+      .replace(/<\/?(ul|ol)\b[^>]*>/gi, "")
+      .replace(/<(p|h[1-6]|li|blockquote|div)\b[^>]*>/gi, "")
+      .replace(/<\/(p|h[1-6]|li|blockquote|div)>/gi, "<br>")
+      .replace(/^(\s*<br\s*\/?>)+/i, "")
+      .replace(/(<br\s*\/?>\s*)+$/i, "")
+      .trim();
 
   /* ------------------------------------------------------------ the tree */
 

package/app/composables/useStoreInit.js

@@ -47,6 +47,7 @@ const API_ROOT = storeApiBase
       console.log("storedataaaaa", bootstrapData.value);
     } catch (error) {
       console.error('[useStoreInit] Failed to fetch bootstrap data:', error);
+      throw error;
     }
 
     return bootstrapData.value;

package/app/composables/useStorefront.js

@@ -22,6 +22,13 @@ const FOOTER_APPEARANCE = [
   "FOOTER_LINK_COLOR", "FOOTER_LINK_HOVER_COLOR",
 ];
 
+function unavailable(status, message) {
+  const err = new Error(message);
+  err.status = status;
+  err.code = "STORE_UNAVAILABLE";
+  return err;
+}
+
 /** Menus arrive as a map keyed by handle from bootstrap, and as a plain list
  *  from the dashboard's MENUS message. Normalize to the map either way. */
 function menusAsMap(value) {
@@ -120,8 +127,7 @@ export function useStorefront() {
 
     // The bar's own on / off is now "is the section there (and shown)".
     const bar = chrome.find((s) => s.type === "ANNOUNCEMENT_BAR");
-    out.ANNOUNCEMENT_ENABLED =
-      !!bar && (!bar.disabled || !!previewState.value);
+    out.ANNOUNCEMENT_ENABLED = !!bar && !bar.disabled;
     return out;
   });
 
@@ -185,7 +191,14 @@ export function useStorefront() {
       // and derives baseUrl from the store's username in the response. Reuse
       // that payload instead of firing a second, redundant bootstrap request.
       if (!bootstrapData.value) await init();
-      data.value = bootstrapData.value;
+      const payload = bootstrapData.value;
+
+      if (!payload?.store) throw unavailable(404, "No store for this address");
+      if (payload.store.is_active === false || payload.store.available === false) {
+        throw unavailable(402, "This store is currently unavailable");
+      }
+
+      data.value = payload;
 
       const available = data.value?.store?.locales ?? ["en"];
       if (!available.includes(locale.value)) {

package/app/logic/layouts/default.js

@@ -39,13 +39,13 @@ export default function useLogic() {
   const { sectionGroups } = useStorefront();
   const { isPreview } = useBuilderPreview();
   const headerSections = computed(() => {
-    const list = (sectionGroups.value?.header ?? []).filter((s) => isPreview.value || !s.disabled);
+const list = (sectionGroups.value?.header ?? []).filter((s) => !s.disabled);
     if (chrome.value === "bare") return [];
     return chrome.value === "minimal" ? list.filter((s) => s.type === "HEADER") : list;
   });
   const footerSections = computed(() =>
     chrome.value === "full"
-      ? (sectionGroups.value?.footer ?? []).filter((s) => isPreview.value || !s.disabled)
+      ? (sectionGroups.value?.footer ?? []).filter((s) => !s.disabled)
       : []
   );
 

package/app/pages/login.vue

@@ -471,9 +471,14 @@ export default {
               confirmPassword: "",
             };
 
-            for (const messages of Object.values(apiErrors)) {
-              errorMessages.push(...messages);
-            }
+              const collect = (v) =>
+  typeof v === "string"
+    ? [v]
+    : v && typeof v === "object"
+    ? Object.values(v).flatMap(collect)
+    : [];
+
+errorMessages.push(...collect(apiErrors));
 
             // Display errors in toast
             if (errorMessages.length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",