@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/plugins/analytics.client.js

@@ -0,0 +1,99 @@
+import { watch } from "vue";
+import { analytics } from "#osi/utils/analytics";
+
+/**
+ * Starts Google Analytics 4 and the Meta Pixel, and reports page views.
+ *
+ * Client only (.client.js): analytics never runs during SSR, and the scripts
+ * load after hydration so they can't slow the first paint.
+ *
+ * The IDs come from the bootstrap response — `store.google_analytics_id` and
+ * `store.meta_pixel_id` — which app.vue has already put into the "storefront"
+ * state, so on the client it is there before this plugin runs. A store with
+ * neither ID gets nothing: no script, no request, every analytics.* call a
+ * no-op.
+ *
+ * Not loaded inside the dashboard's page-builder preview: a merchant editing
+ * their store must not show up as a visitor in their own reports.
+ *
+ * Page views are sent by hand, because the storefront is a single-page app.
+ * The first one is sent once the app has mounted; later ones when the next page
+ * has rendered, so `page_title` is the new page's, not the previous one's.
+ */
+
+/** The builder iframe / preview routes — same test as app.vue's. */
+function isBuilderPreview() {
+  try {
+    if (window.parent !== window || window.self !== window.top) return true;
+  } catch {
+    return true; // cross-origin parent: we're framed
+  }
+  const { pathname, search } = window.location;
+  if (pathname.includes("__builder-preview")) return true;
+  const params = new URLSearchParams(search);
+  return params.has("osi_preview") || params.has("preview");
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (isBuilderPreview()) return { provide: { analytics } };
+
+  const router = useRouter();
+  const storefront = useState("storefront");
+
+  let lastPath = null;
+  let fallbackTimer = null;
+
+  function trackPage() {
+    if (!analytics.isEnabled()) return;
+    const path = router.currentRoute.value.path;
+    // page:finish, app:mounted and the fallback below can all land on the same
+    // page — whichever comes first reports it, the rest see the same path.
+    if (path === lastPath) return;
+    lastPath = path;
+    analytics.pageView();
+  }
+
+  function start(store) {
+    const started = analytics.start({
+      gaIds: store?.google_analytics_id,
+      pixelIds: store?.meta_pixel_id,
+      currency:
+        store?.default_currency?.code ||
+        store?.currency_code ||
+        (typeof store?.currency === "string" ? store.currency : ""),
+    });
+    // Arrived after the app mounted: there is no app:mounted left to wait for.
+    if (started && nuxtApp.isHydrating === false) setTimeout(trackPage, 0);
+    return started;
+  }
+
+  // Normally the store is already in state and this starts at once. Watching
+  // covers a bootstrap that finishes after the plugin ran.
+  let done = false;
+  watch(
+    () => storefront.value?.store,
+    (store) => {
+      if (done || !store) return;
+      done = true; // the bootstrap is one-shot: decide once
+      start(store);
+    },
+    { immediate: true }
+  );
+
+  // First page: after hydration, when document.title is final.
+  nuxtApp.hook("app:mounted", () => setTimeout(trackPage, 0));
+
+  // Every page after it: once it has rendered.
+  nuxtApp.hook("page:finish", () => setTimeout(trackPage, 0));
+
+  router.afterEach((to, _from, failure) => {
+    if (failure) return;
+    analytics.routeChanged(to.path);
+    // Safety net if page:finish doesn't fire for a navigation: harmless when
+    // it does, because trackPage() skips a path it has already reported.
+    clearTimeout(fallbackTimer);
+    fallbackTimer = setTimeout(trackPage, 2000);
+  });
+
+  return { provide: { analytics } };
+});

package/app/plugins/geo.ts

@@ -0,0 +1,24 @@
+import { useUserStore } from '#osi/stores/userStore'
+import { getBaseUrl } from '#osi/services/ApiServices'
+
+export default defineNuxtPlugin(async () => {
+  const geoCookie = useCookie('geo', { maxAge: 60 * 60 * 24 * 30 }) // 30 days
+
+  // SSR or client: if cookie exists, hydrate the store immediately
+  if (geoCookie.value) {
+    useUserStore().setClientIpInfo(geoCookie.value)
+    return
+  }
+
+  // Client-only: fetch geo from backend (browser sends real user IP)
+  if (import.meta.client) {
+    try {
+      const baseUrl = getBaseUrl()
+      const data = await $fetch(`${baseUrl}client-ip/`)
+      geoCookie.value = data
+      useUserStore().setClientIpInfo(data)
+    } catch (err) {
+      console.error('[GEO] Client-side fetch error:', err)
+    }
+  }
+})

package/app/plugins/reveal.client.js

@@ -0,0 +1,53 @@
+/**
+ * Theme "Animations → Reveal sections on scroll".
+ *
+ * Sections fade and rise in as they enter the screen. CSS does the motion
+ * (osi-controls.css, under `.osi-reveal`); this only marks each section once
+ * it's in view. A MutationObserver picks up sections added later — client
+ * navigation, the dashboard adding one in the preview.
+ *
+ * Off unless the theme turns it on (the root gets `.osi-reveal`), and CSS
+ * skips it entirely for visitors who prefer reduced motion.
+ */
+export default defineNuxtPlugin(() => {
+  if (typeof IntersectionObserver === "undefined") return;
+
+  const seen = new WeakSet();
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        entry.target.classList.add("is-revealed");
+        io.unobserve(entry.target);
+      }
+    },
+    { rootMargin: "0px 0px -8% 0px", threshold: 0.05 }
+  );
+
+  function scan(root = document) {
+    root.querySelectorAll?.(".osi-section").forEach((el) => {
+      if (seen.has(el)) return;
+      seen.add(el);
+      io.observe(el);
+    });
+  }
+
+  const start = () => {
+    scan();
+    new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        m.addedNodes.forEach((node) => {
+          if (node.nodeType !== 1) return;
+          if (node.classList?.contains("osi-section") && !seen.has(node)) {
+            seen.add(node);
+            io.observe(node);
+          }
+          scan(node);
+        });
+      }
+    }).observe(document.body, { childList: true, subtree: true });
+  };
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
+  else start();
+});

package/app/plugins/toast.js

@@ -0,0 +1,10 @@
+import { defineNuxtPlugin } from '#app';
+import Toast from 'vue-toastification';
+import 'vue-toastification/dist/index.css';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Toast, {
+    position: 'top-center',
+    timeout: 3000
+  });
+});

package/app/plugins/vue-query.ts

@@ -0,0 +1,5 @@
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueQueryPlugin)
+})

package/app/services/ApiServices.js

@@ -0,0 +1,74 @@
+import { authBus } from "./AuthBus";
+import { tokenService } from "./Authentication/TokenService";
+
+function safeState(key, fallback) {
+  try {
+    return useState(key, () => fallback).value;
+  } catch {
+    return fallback;
+  }
+}
+
+function safeHost() {
+  try {
+    if (import.meta.server) {
+      const headers = useRequestHeaders(["host", "x-forwarded-host"]);
+      return headers["x-forwarded-host"] || headers.host || "";
+    }
+  } catch {
+  }
+  return typeof location !== "undefined" ? location.host : "";
+}
+
+export function getBaseUrl() {
+  const fromState = safeState("base-url", "");
+  if (fromState) return fromState;
+
+  const host = safeHost();
+  return host ? `https://${host}/` : "";
+}
+
+
+export const apiService = async (url, options = {}) => {
+  const { host: hostOption, ...fetchOptions } = options;
+
+  let token = tokenService.getToken();
+  const host = hostOption ?? safeHost();
+
+  const headers = {
+    ...fetchOptions.headers,
+    "Content-Type": "application/json",
+    // ...(host && { "X-Osimart-Store": host }),
+    ...(token && { Authorization: `Bearer ${token}` }),
+  };
+
+  let response = await fetch(url, { ...fetchOptions, headers });
+
+  // Handle 401 error
+  if (response.status === 401 && token && !fetchOptions.skipAuthRefresh) {
+    console.warn("401 detected, queuing request for refresh...");
+
+    return new Promise((resolve, reject) => {
+      authBus.failedRequests.push({ url, options, resolve, reject });
+
+      if (!authBus.isRefreshing) {
+        authBus.refreshToken().then(() => {
+          authBus.retryFailedRequests();
+        });
+      }
+    });
+  }
+
+  if (!response.ok) {
+    const errorBody = await response.json().catch(() => ({}));
+    const err = new Error(
+      errorBody.detail || errorBody.message || `HTTP ${response.status}`
+    );
+    err.status = response.status;
+    err.data = errorBody;
+    throw err;
+  }
+
+  if (response.status === 204) return null;
+  return response.json();
+};

package/app/services/AuthBus.js

@@ -0,0 +1,162 @@
+import { reactive, watch } from "vue";
+import { tokenService } from "./Authentication/TokenService";
+import UserServices from "./UserServices";
+import { eventBus } from "../utils/eventBus";
+import { useToast } from "vue-toastification";
+import { navigateTo } from "nuxt/app";
+import AuthenticationService from "./Authentication/AuthenticationService";
+import { getBaseUrl } from "./ApiServices";
+
+let hasAlerted = false;
+
+export const authBus = reactive({
+  isLoggedIn: !!tokenService.getToken(),
+  userInfo: null,
+  isRefreshing: false,
+  failedRequests: [],
+  isLoggingOut: false,
+
+  async checkAuth() {
+    const token = tokenService.getToken();
+    this.isLoggedIn = !!token;
+
+    if (!this.isLoggedIn) {
+      this.userInfo = null;
+      return;
+    }
+
+    try {
+      this.userInfo = await UserServices.getUserDetail(token);
+    } catch (error) {
+      if (error.status === 401) {
+        return this.handle401();
+      }
+      console.error("Auth check failed:", error);
+      await this.logout();
+    }
+  },
+
+  async handle401() {
+    return new Promise((resolve, reject) => {
+      this.failedRequests.push({ resolve, reject });
+      if (!this.isRefreshing) {
+        this.refreshToken().then(resolve).catch(reject);
+      }
+    });
+  },
+
+  async refreshToken() {
+    if (this.isRefreshing) return;
+
+    this.isRefreshing = true;
+
+    try {
+      const refreshToken = tokenService.getRefreshToken();
+      if (!refreshToken) throw new Error("No refresh token available");
+
+      const baseUrl = getBaseUrl();
+      const response = await fetch(`${baseUrl}auth/refresh/`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${refreshToken}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error("Refresh failed");
+      }
+
+      const data = await response.json();
+      tokenService.setToken(data.access_token);
+      tokenService.setRefreshToken(data.refresh_token);
+
+      await this.retryFailedRequests();
+
+      return data.access_token;
+    } catch (error) {
+      await this.logout();
+
+      if (!hasAlerted) {
+        hasAlerted = true;
+        try {
+          const toast = useToast();
+          toast.error("Session expired. Please log in again.");
+        } catch {
+          /* ignore toast error if outside vue context */
+        }
+        navigateTo("/login");
+      }
+
+      throw error;
+    } finally {
+      this.isRefreshing = false;
+
+      setTimeout(() => {
+        hasAlerted = false;
+      }, 1000);
+    }
+  },
+
+  async retryFailedRequests() {
+    if (this.failedRequests.length === 0) return;
+
+    const newToken = tokenService.getToken();
+
+    for (const { url, options, resolve, reject } of this.failedRequests) {
+      const updatedOptions = {
+        ...options,
+        headers: {
+          ...options.headers,
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${newToken}`,
+        },
+      };
+
+      try {
+        const response = await fetch(url, updatedOptions);
+
+        if (!response.ok) {
+          const errorBody = await response.json().catch(() => ({}));
+          const err = new Error(errorBody.detail || errorBody.message || `HTTP ${response.status}`);
+          err.status = response.status;
+          err.data = errorBody;
+          throw err;
+        }
+
+        if (response.status === 204) {
+          resolve(null);
+        } else {
+          resolve(await response.json());
+        }
+      } catch (error) {
+        reject(error);
+      }
+    }
+
+    this.failedRequests = [];
+  },
+
+  async logout() {
+    if (this.isLoggingOut || !this.isLoggedIn) {
+      return;
+    }
+    this.isLoggingOut = true;
+
+    try {
+      await AuthenticationService.logout({ session_id: tokenService.getSessionId() });
+    } catch (error) {
+      console.error('Logout request failed, clearing local session anyway:', error);
+    } finally {
+      tokenService.removeToken();
+      tokenService.removeRefreshToken();
+      tokenService.removeSessionId();
+      if (typeof localStorage !== 'undefined') localStorage.clear();
+      this.isLoggedIn = false;
+      this.userInfo = null;
+      eventBus.emit("cartUpdated");
+      eventBus.emit("authChanged", { isLoggedIn: false });
+      this.isLoggingOut = false;
+    }
+  },
+});

package/app/services/Authentication/AuthenticationService.js

@@ -0,0 +1,133 @@
+import { apiService, getBaseUrl } from '../ApiServices';
+import { tokenService } from './TokenService';
+import { eventBus } from '../../utils/eventBus';
+
+const login = async (data) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/login/`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    tokenService.setToken(responseData.access_token);
+    tokenService.setRefreshToken(responseData.refresh_token);
+    tokenService.setSessionId(responseData.session_id);
+    eventBus.emit("authChanged", { isLoggedIn: true });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const register = async (data) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/register/`, {
+      method: "POST",
+      body: JSON.stringify(data),
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const forgotPassword = async (email) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/forgot-password/`, {
+      method: 'POST',
+      body: JSON.stringify({ email, reset_as: 'customer' })
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const resetPassword = async (email, code, password) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/reset-password/`, {
+      method: 'POST',
+      body: JSON.stringify({ email, code, password, reset_as: 'customer' }),
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const changePassword = async (data) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/change-password/`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const verificationCode = async (email, code, deviceInfo = {}) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/verify/`, {
+      method: 'POST',
+      body: JSON.stringify({
+        email,
+        code,
+        verify_as: 'customer',
+        device_id: deviceInfo.device_id,
+        device_name: deviceInfo.device_name,
+      }),
+    });
+    tokenService.setToken(responseData.access_token);
+    tokenService.setSessionId(responseData.session_id);
+    tokenService.setRefreshToken(responseData.refresh_token);
+    eventBus.emit("authChanged", { isLoggedIn: true });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const resendVerificationCode = async (email) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/regen/`, {
+      method: 'POST',
+      body: JSON.stringify({ email, verify_as: 'customer' }),
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const logout = async (data) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}auth/logout/`, {
+      method: "POST",
+      body: JSON.stringify({ ...data }),
+      skipAuthRefresh: true,
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default {
+  login,
+  register,
+  resendVerificationCode,
+  verificationCode,
+  forgotPassword,
+  resetPassword,
+  changePassword,
+  logout,
+};

package/app/services/Authentication/TokenService.js

@@ -0,0 +1,62 @@
+import Cookies from "js-cookie";
+import { eventBus } from "../../utils/eventBus";
+
+export const tokenService = {
+  setToken(token) {
+    Cookies.set("token", token, { expires: 7 });
+  },
+
+  setSessionId(id) {
+    Cookies.set("session_id", id, { expires: 7 });
+  },
+
+  setRefreshToken(refreshToken) {
+    Cookies.set("refresh_token", refreshToken, { expires: 7 });
+  },
+
+  getRefreshToken() {
+    return Cookies.get("refresh_token");
+  },
+
+  removeRefreshToken() {
+    Cookies.remove("refresh_token");
+  },
+
+  getToken() {
+    return Cookies.get("token");
+  },
+
+  getSessionId() {
+    return Cookies.get("session_id");
+  },
+
+  removeToken() {
+    Cookies.remove("token");
+  },
+
+  removeSessionId() {
+    Cookies.remove("session_id");
+  },
+
+  setExpiration(expiresIn) {
+    const expiration = Date.now() + expiresIn * 1000;
+    Cookies.set("tokenExpiration", expiration);
+  },
+
+  getExpiration() {
+    return parseInt(Cookies.get("tokenExpiration")) || 0;
+  },
+
+  isTokenValid() {
+    return Date.now() < this.getExpiration();
+  },
+
+  isAuthenticated() {
+    return !!this.getToken();
+  },
+
+  clearCart() {
+    Cookies.remove("cart");
+    eventBus.emit("cartUpdated");
+  },
+};