@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/services/UserServices.js

@@ -0,0 +1,105 @@
+import { apiService, getBaseUrl } from "./ApiServices";
+
+const getUserDetail = async (token) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/customer-info/`, {
+      method: "GET",
+    });
+    return responseData;
+  } catch (error) {
+    console.error('Cart fetch error:', error);
+    throw error;
+  }
+};
+
+const getUserOrders = async () => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/order-summaries/`, {
+      method: "GET",
+    });
+    return responseData;
+  } catch (error) {
+    console.error('Cart fetch error:', error);
+    throw error;
+  }
+};
+
+const updateUserDetail = async (data) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/customer-info/modify/`, {
+      method: "PUT",
+      body: JSON.stringify(data),
+    });
+    return responseData;
+  } catch (error) {
+    console.error('update user error:', error);
+    throw error;
+  }
+};
+
+const addAddress = async (address, country, postal_code) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/customer-addresses/`, {
+      method: "POST",
+      body: JSON.stringify({ address, country, postal_code }),
+    });
+    return responseData;
+  } catch (error) {
+    console.error('Cart fetch error:', error);
+    throw error;
+  }
+};
+
+const editAddress = async (id, address, country, postal_code) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/customer-addresses/${id}/`, {
+      method: "PATCH",
+      body: JSON.stringify({ address, country, postal_code }),
+    });
+    return responseData;
+  } catch (error) {
+    console.error('Cart fetch error:', error);
+    throw error;
+  }
+};
+
+const deleteAddress = async (id) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/customer-addresses/${id}/`, {
+      method: "DELETE",
+    });
+    return responseData;
+  } catch (error) {
+    console.error("Cart fetch error:", error);
+    throw error;
+  }
+};
+
+const contact = async (first_name, last_name, email, subject, message) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/contactmessage/`, {
+      method: "POST",
+      body: JSON.stringify({ first_name, last_name, email, subject, message }),
+    });
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default {
+  getUserDetail,
+  getUserOrders,
+  addAddress,
+  editAddress,
+  deleteAddress,
+  updateUserDetail,
+  contact,
+};

package/app/services/UtilsServices.js

@@ -0,0 +1,46 @@
+import { apiService, getBaseUrl } from "./ApiServices";
+
+const getCountries = async () => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/shippingcountries/`, {
+      method: "GET",
+    });
+
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const getPaymentMethods = async () => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/payment-methods/`, {
+      method: "GET",
+    });
+
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const getAvailablePaymentMethods = async () => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/available-payment-methods/`, {
+      method: "GET",
+    });
+
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export default {
+  getCountries,
+  getPaymentMethods,
+  getAvailablePaymentMethods,
+};

package/app/services/WishlistServices.js

@@ -0,0 +1,51 @@
+import { apiService, getBaseUrl } from './ApiServices';
+
+const addToWishlist = async (productId) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/wishlist/`, {
+      method: 'POST',
+      body: JSON.stringify({ product_id: productId, action: "add" }),
+    });
+
+    return responseData;
+  } catch (error) {
+    console.error('failed to add to wishlist:', error);
+    throw error;
+  }
+};
+
+const removeFromWishlist = async (productId) => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/wishlist/`, {
+      method: 'POST',
+      body: JSON.stringify({ product_id: productId, action: "remove" }),
+    });
+
+    return responseData;
+  } catch (error) {
+    console.error('failed to remove from wishlist:', error);
+    throw error;
+  }
+};
+
+const getWishlists = async () => {
+  try {
+    const baseUrl = getBaseUrl();
+    const responseData = await apiService(`${baseUrl}store/apis/wishlist/`, {
+      method: 'GET',
+    });
+
+    return responseData;
+  } catch (error) {
+    console.error('failed to get wishlist:', error);
+    throw error;
+  }
+};
+
+export default {
+  addToWishlist,
+  getWishlists,
+  removeFromWishlist,
+};

package/app/services/storefront.service.js

@@ -0,0 +1,57 @@
+import { apiService } from "./ApiServices";
+
+/**
+ * Page builder read API — store/apis/theme/…
+ *
+ * Every method takes `{ baseUrl, host }` explicitly rather than reaching for
+ * getBaseUrl() internally. On the server, Nuxt's async context is lost across
+ * every await, so a service that calls useState()/useRequestHeaders() after one
+ * throws "A composable that requires access to the Nuxt instance…".
+ *
+ * The caller resolves both while it still has context and passes them down.
+ * See useStorefront().load().
+ */
+
+function withQuery(url, params = {}) {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined && value !== null && value !== "") {
+      search.append(key, value);
+    }
+  }
+  const qs = search.toString();
+  return qs ? `${url}?${qs}` : url;
+}
+
+function endpoint(baseUrl, path) {
+  if (!baseUrl) {
+    throw new Error(
+      "storefront.service: no baseUrl. Resolve it with getBaseUrl() in setup " +
+        "or before your first await, then pass it in."
+    );
+  }
+  // Tolerate a base URL with or without its trailing slash.
+  return `${baseUrl.replace(/\/+$/, "")}/${path}`;
+}
+
+export const storefrontService = {
+  bootstrap: ({ baseUrl, host } = {}) =>
+    apiService(endpoint(baseUrl, "store/apis/theme/bootstrap/"), { host }),
+
+  render: ({ baseUrl, host, path } = {}) =>
+    apiService(
+      withQuery(endpoint(baseUrl, "store/apis/theme/render/"), { path }),
+      { host }
+    ),
+
+  preview: ({ baseUrl, host, theme, template, suffix, token } = {}) =>
+    apiService(
+      withQuery(endpoint(baseUrl, "store/apis/theme/preview/"), {
+        theme,
+        template,
+        suffix,
+        preview_token: token,
+      }),
+      { host }
+    ),
+};

package/app/stores/userStore.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    clientIpInfo: null,
+  }),
+  actions: {
+    setClientIpInfo(info) {
+      this.clientIpInfo = info
+    }
+  },
+  getters: {}
+})

package/app/theme/categoryTree.js

@@ -0,0 +1,68 @@
+/**
+ * Category trees, one way.
+ *
+ * The categories endpoint nests children under a key that isn't the same
+ * everywhere (`children`, `sub_categories`, `subcategories`,
+ * `child_categories`). Every place that walks the tree reads it through here,
+ * so a subcategory is found no matter which one the API used.
+ *
+ * Flattened rows are stamped with where they sat in the tree (_depth,
+ * _parentId). A nested child often has no `parent` field of its own — its
+ * parent is implied by where it's nested — and without the stamp "top-level
+ * only" couldn't tell it apart from a root.
+ */
+
+const CHILD_KEYS = ["children", "sub_categories", "subcategories", "child_categories"];
+
+export function childrenOf(row) {
+  if (!row || typeof row !== "object") return [];
+  for (const key of CHILD_KEYS) {
+    if (Array.isArray(row[key]) && row[key].length) return row[key];
+  }
+  return [];
+}
+
+/** The parent's id, from the row itself or from where it was nested. */
+export function parentIdOf(row) {
+  if (!row) return null;
+  if (row._parentId != null) return row._parentId;
+  const p = row.parent ?? row.parent_id ?? row.parent_category ?? null;
+  if (p == null || p === "") return null;
+  return typeof p === "object" ? p.id ?? null : p;
+}
+
+export function isTopLevel(row) {
+  return parentIdOf(row) == null;
+}
+
+/**
+ * Depth-first: each parent followed by its children. Deduplicated by id, so a
+ * payload that lists every category flat AND nests children under their parent
+ * doesn't show each child twice.
+ */
+export function flattenCategories(rows) {
+  const out = [];
+  const seen = new Set();
+  const walk = (list, depth, parentId) => {
+    for (const row of list ?? []) {
+      if (!row || typeof row !== "object") continue;
+      const key = row.id ?? row.slugified_name;
+      if (key != null && seen.has(key)) continue;
+      if (key != null) seen.add(key);
+      out.push(
+        depth === 0 && row._parentId === undefined
+          ? row
+          : { ...row, _depth: depth, _parentId: row._parentId ?? parentId }
+      );
+      walk(childrenOf(row), depth + 1, row.id ?? null);
+    }
+  };
+  walk(rows, 0, null);
+  return out;
+}
+
+/** Settings arrive as true / false / "true" / "false" depending on the path. */
+export function isOn(value, fallback) {
+  if (value === undefined || value === null || value === "") return fallback;
+  return value === true || value === "true" || value === 1 || value === "1";
+}

package/app/theme/controls.js

@@ -0,0 +1,88 @@
+/**
+ * Shared vocabulary for the theme's BUTTONS and INPUTS groups.
+ *
+ * Every storefront control reads the same CSS variables:
+ *
+ *   --osi-button-*   theme-level button look      (useThemeTokens → .osi-root)
+ *   --osi-input-*    theme-level field look       (useThemeTokens → .osi-root)
+ *   --btn-*          ONE button's own overrides   (useButtonStyle → inline)
+ *   --in-*           ONE field's own overrides    (useInputStyle  → inline)
+ *
+ * assets/css/osi-controls.css resolves them in that order:
+ *
+ *   individual (--btn-* / --in-*)  →  theme (--osi-button-* / --osi-input-*)
+ *   →  colour scheme (--osi-btn-bg, --osi-border…)  →  hard default
+ *
+ * so a section that sets its own radius wins, a section that doesn't follows
+ * the theme, and a theme that doesn't set a colour follows the scheme.
+ *
+ * Unset means "emit nothing": an undefined value never becomes a variable, so
+ * the next level down shows through instead of being pinned to a default.
+ */
+
+export const SHADOWS = {
+  NONE: "none",
+  SMALL: "0 1px 2px rgba(0,0,0,.12)",
+  MEDIUM: "0 4px 10px -2px rgba(0,0,0,.16)",
+  LARGE: "0 12px 24px -6px rgba(0,0,0,.22)",
+};
+
+export const FONT_WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+export const TEXT_TRANSFORMS = {
+  NONE: "none",
+  UPPERCASE: "uppercase",
+  LOWERCASE: "lowercase",
+  CAPITALIZE: "capitalize",
+};
+export const FONT_FAMILIES = { HEADING: "var(--osi-font-heading)", BODY: "var(--osi-font-body)" };
+
+export const BUTTON_STYLES = ["SOLID", "OUTLINE", "UNDERLINE", "TEXT"];
+export const BUTTON_HOVERS = ["FADE", "DARKEN", "INVERT", "LIFT", "NONE"];
+export const INPUT_STYLES = ["OUTLINE", "FILLED", "UNDERLINE"];
+export const LABEL_STYLES = ["FLOATING", "ABOVE", "PLACEHOLDER"];
+
+/** Empty string, null and undefined mean "not set" — 0 and false do not. */
+export function has(value) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+export function px(value) {
+  return has(value) && Number.isFinite(Number(value)) ? `${Number(value)}px` : undefined;
+}
+
+export function color(value) {
+  return has(value) ? String(value) : undefined;
+}
+
+/** Picks value when it's one of allowed, else undefined (= inherit). */
+export function pick(value, allowed) {
+  return allowed.includes(value) ? value : undefined;
+}
+
+/**
+ * BUTTON_SHADOW started life as a BOOLEAN. Old themes still store true/false,
+ * new ones store a SHADOWS key; both resolve here.
+ */
+export function shadow(value, shadowColor) {
+  if (value === true || value === "true") value = "SMALL";
+  if (value === false || value === "false") value = "NONE";
+  const preset = SHADOWS[value];
+  if (!preset) return undefined;
+  if (!shadowColor || preset === "none") return preset;
+  // A colour override swaps the rgba() in the preset for the merchant's.
+  return preset.replace(/rgba\([^)]*\)/, shadowColor);
+}
+
+export function weight(value) {
+  if (!has(value)) return undefined;
+  return FONT_WEIGHTS[value] ?? (Number.isFinite(Number(value)) ? Number(value) : undefined);
+}
+
+export function letterSpacing(value) {
+  return has(value) && Number.isFinite(Number(value)) ? `${Number(value) / 100}em` : undefined;
+}
+
+/** Drops undefined entries so nothing unset reaches the DOM. */
+export function compact(object) {
+  return Object.fromEntries(Object.entries(object).filter(([, v]) => v !== undefined));
+}

package/app/theme/registry.js

@@ -0,0 +1,56 @@
+/**
+ * Section type -> component.
+ *
+ * The map is generated at build time by nuxt/osi-sections.ts from the theme's
+ * `app/sections/*Section.vue` (every layer is scanned; the store's theme wins):
+ *
+ *   app/sections/HeroSection.vue      -> HERO
+ *   app/sections/LookbookSection.vue  -> LOOKBOOK (a store's own type)
+ *
+ * Adding a section is one file and no registry edit.
+ *
+ * Naming is the contract:
+ *
+ *   HeroSection.vue                -> HERO
+ *   ProductListSection.vue         -> PRODUCT_LIST
+ *   ClassificationListSection.vue  -> CLASSIFICATION_LIST
+ *   CustomHtmlSection.vue          -> CUSTOM_HTML
+ *
+ * The type must match the backend's SectionType (or the store's own section
+ * type) exactly.
+ */
+import { sectionLoaders } from "#build/osi-sections.mjs";
+
+export const SECTION_COMPONENTS = Object.fromEntries(
+  Object.entries(sectionLoaders).map(([type, loader]) => [type, defineAsyncComponent(loader)])
+);
+
+const warned = new Set();
+
+/**
+ * Unknown types render nothing rather than a broken box. A merchant can author
+ * a custom section type (StoreSection backend-side) with no component here yet,
+ * and a blank gap beats a visible error on a live storefront.
+ */
+export function resolveSection(type) {
+  const component = SECTION_COMPONENTS[type];
+  if (component) return component;
+
+  if (import.meta.dev && !warned.has(type)) {
+    warned.add(type);
+    console.warn(
+      `[storefront] No component for section type "${type}". ` +
+        `Create app/sections/${pascal(type)}Section.vue in the theme.`
+    );
+  }
+  return null;
+}
+
+/** MEDIA_WITH_TEXT -> MediaWithText, for the dev warning above. */
+function pascal(type) {
+  return String(type)
+    .toLowerCase()
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}