orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/composables/useOrionplaceProductActions.ts

@@ -0,0 +1,116 @@
+import { onScopeDispose, ref, watch } from 'vue';
+import type { OrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
+import { useOrionplaceProgress } from '@/composables/useOrionplaceProgress';
+import { useOrionplaceSignIn } from '@/composables/useOrionplaceSignIn';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { OrionplaceApiError } from '@/utils/orionplace/api';
+import {
+  createProductActions,
+  ProductActionError,
+  type ProductAction,
+  type ProductActionSelection,
+  type ProductActionResponse,
+} from '@/utils/orionplace/productActions';
+
+export function useOrionplaceProductActions(
+  options: { api?: OrionplaceFeatureApi } = {},
+) {
+  const store    = useOrionplaceStore();
+  const api      = options.api ?? useOrionplaceApi();
+  const preorder = ref<number>();
+  const signIn   = useOrionplaceSignIn();
+  let abort      = new AbortController();
+  watch(
+    () => store.isAuthenticated,
+    () => {
+      abort.abort();
+      abort          = new AbortController();
+      preorder.value = undefined;
+    },
+  );
+  onScopeDispose(() => abort.abort());
+  const actions  = createProductActions({
+    request: async (name, body, params) => {
+      try {
+        const response = await api.requestResponse(
+          name,
+          body,
+          abort.signal,
+          params,
+        );
+        return {
+          ...(response.body as ProductActionResponse),
+          raw: { status: response.status },
+        };
+      } catch (error) {
+        if (error instanceof OrionplaceApiError) {
+          throw new ProductActionError(error.kind);
+        }
+        throw error;
+      }
+    },
+    authenticated: () => store.isAuthenticated,
+    email: () => store.profile?.email ?? undefined,
+    changed: () => {},
+    counters: (values) => store.setProductCounters(values),
+    signIn: () => signIn.requireSignIn(),
+    subscribed: async () => {
+      // The backend can enable optional email notifications together with
+      // the subscription: read the saved state instead of guessing it.
+      try {
+        const response = await api.requestResponse(
+          'profile_notification_settings_get',
+          {},
+          abort.signal,
+        );
+        const body     = response.body as {
+          form_errors?: unknown;
+          page_data?: { notifications_enabled?: unknown };
+        } | null;
+        const enabled  = body?.page_data?.notifications_enabled;
+        if (
+          response.status >= 200 &&
+          response.status < 300 &&
+          body?.form_errors === null &&
+          typeof enabled === 'boolean'
+        ) {
+          store.patchProfile({ notifications_enabled: enabled });
+        }
+      } catch {
+        // The subscription is saved; the profile page reloads the setting.
+      }
+    },
+  });
+
+  useOrionplaceProgress(() => actions.pending.value);
+
+  function run(action: ProductAction, selection: ProductActionSelection) {
+    return actions.run(store, action, selection);
+  }
+
+  function openPreorder(selection: { product: number }) {
+    if (actions.pending.value || actions.needsRefresh.value) {
+      return;
+    }
+    actions.error.value   = undefined;
+    actions.success.value = false;
+    preorder.value        = selection.product;
+  }
+
+  async function submitPreorder(email: string, phone: string) {
+    if (!preorder.value) {
+      return;
+    }
+    const complete = await run('preorder', {
+      product: preorder.value,
+      email,
+      phone,
+    });
+    if (complete) {
+      preorder.value = undefined;
+    }
+  }
+
+  return { ...actions, run, preorder, openPreorder, submitPreorder };
+}

package/templates/app/composables/useOrionplaceProductLink.ts

@@ -0,0 +1,24 @@
+import { inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+
+/** Returns the product page address for a product ID. */
+export type OrionplaceProductLink = (productId: number) => string;
+
+const productLinkKey: InjectionKey<OrionplaceProductLink> = Symbol(
+  'orionplace-product-link',
+);
+
+/**
+ * Gives product cards below this component a product page address. The
+ * cards then render their image and name as links, so the page HTML links
+ * to every listed product; a plain click still emits `select`, and the
+ * host navigates as before.
+ */
+export function provideOrionplaceProductLink(link: OrionplaceProductLink) {
+  provide(productLinkKey, link);
+}
+
+/** The product page address, or undefined when no page provides one. */
+export function useOrionplaceProductLink() {
+  return inject(productLinkKey, undefined);
+}

package/templates/app/composables/useOrionplaceProductSearch.ts

@@ -0,0 +1,259 @@
+import { onMounted, onScopeDispose, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
+import { useOrionplaceProgress } from '@/composables/useOrionplaceProgress';
+import {
+  categorySearchRequest,
+  mergeCategoryPagination,
+} from '@/utils/orionplace/category';
+import {
+  hasFixedSearchScope,
+  scopedSearchRequest,
+} from '@/utils/orionplace/productSearchScope';
+import type { ProductSearchScope } from '@/utils/orionplace/productSearchScope';
+import type {
+  IProduct,
+  IProductPagination,
+  IProductSearchSeller,
+} from '@/interfaces/orionplace/products/IProduct';
+import type { IProductSearchFacets } from '@/interfaces/orionplace/products/IProductSearchFacets';
+import type { OrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+
+export type ProductSearchData = IProductSearchFacets & {
+  products: { data: IProduct[]; rpag?: IProductPagination };
+  selects: IProductSearchFacets['selects'] & {
+    sellers?: IProductSearchSeller[];
+  };
+};
+
+export type ProductSearchContext = ProductSearchScope & { categoryId?: number };
+
+/**
+ * The first result page loaded during a server render. The products and
+ * the filter choices are in the store; this keeps their order and the
+ * pagination for the search that produced them.
+ */
+export interface ProductSearchSnapshot {
+  scope: string;
+  productIds: number[];
+  rpag?: IProductPagination;
+}
+
+type OrionplaceStore = ReturnType<typeof useOrionplaceStore>;
+
+/**
+ * The products_search body for the current scope, filters and page, or
+ * undefined when the scope cannot be searched: an unknown category, a
+ * query shorter than three characters, or featured products for a guest.
+ */
+export function productSearchBody(
+  store: OrionplaceStore,
+  scope: ProductSearchContext,
+  page: number,
+) {
+  const category = scope.categoryId === undefined
+    ? undefined
+    : store.getCatalogCategory(scope.categoryId);
+  const query    = scope.query?.trim() ?? '';
+  // products_search returns no featured products to guests; skip the request.
+  const guest    = Boolean(scope.featured) && !store.isAuthenticated;
+
+  if (!store.isReady || guest) {
+    return undefined;
+  }
+
+  if (scope.categoryId !== undefined) {
+    return category
+      ? categorySearchRequest(category, store.searchFilters, page)
+      : undefined;
+  }
+
+  if (!hasFixedSearchScope(scope) && query.length < 3) {
+    return undefined;
+  }
+
+  return scopedSearchRequest(scope, store.searchFilters, page);
+}
+
+/** Stores the returned products and keeps the scope's first filter choices. */
+export function storeProductSearchPage(
+  store: OrionplaceStore,
+  data: ProductSearchData,
+) {
+  for (const product of data.products.data) {
+    store.setProduct(product, 'products', data.selects?.sellers ?? []);
+  }
+
+  store.preserveSearchFacets(data);
+
+  return data.products.data.map((product) => product.id);
+}
+
+/**
+ * Loads the first result page during a server render, with the filters
+ * currently in the store. Returns null when the scope cannot be searched.
+ */
+export async function loadProductSearchSnapshot(
+  api: Pick<OrionplaceFeatureApi, 'request'>,
+  store: OrionplaceStore,
+  scope: ProductSearchContext,
+): Promise<ProductSearchSnapshot | null> {
+  const body = productSearchBody(store, scope, 1);
+
+  if (!body) {
+    return null;
+  }
+
+  const data = await api.request<ProductSearchData>('products_search', body);
+
+  return {
+    scope: JSON.stringify(scope),
+    productIds: storeProductSearchPage(store, data),
+    rpag: data.products.rpag,
+  };
+}
+
+export function useOrionplaceProductSearch(
+  context: MaybeRefOrGetter<ProductSearchContext>,
+  options: {
+    request?: (
+      body: Record<string, unknown>,
+      signal: AbortSignal,
+    ) => Promise<ProductSearchData>;
+    scrollToTop?: boolean;
+    // The first page from the server render; see useOrionplaceServerData.
+    initial?: ProductSearchSnapshot | null;
+  } = {},
+) {
+  const store       = useOrionplaceStore();
+  const api         = options.request ? undefined : useOrionplaceApi();
+  const requestData =
+    options.request ??
+    ((body, signal) =>
+      api!.request<ProductSearchData>('products_search', body, signal));
+  // The server result is used only for the scope it was loaded for.
+  const initial     =
+    options.initial?.scope === JSON.stringify(toValue(context))
+      ? options.initial
+      : undefined;
+  const productIds  = ref<number[]>(initial ? [...initial.productIds] : []);
+  const pagination  = ref<IProductPagination>(
+    initial ? mergeCategoryPagination({}, initial.rpag) : {},
+  );
+  const page        = ref(1);
+  const pending     = ref(!initial);
+  const failed      = ref(false);
+  const loaded      = ref(Boolean(initial));
+  let mounted       = false;
+  let request: AbortController | undefined;
+
+  useOrionplaceProgress(() => pending.value);
+
+  function cancel() {
+    request?.abort();
+    request       = undefined;
+    pending.value = false;
+  }
+
+  async function load(firstPage = false) {
+    cancel();
+    if (firstPage) {
+      page.value = 1;
+    }
+    failed.value     = false;
+    loaded.value     = false;
+    const body       = mounted
+      ? productSearchBody(store, toValue(context), page.value)
+      : undefined;
+    if (!body) {
+      productIds.value = [];
+      pending.value    = !mounted;
+      return;
+    }
+    const current    = new AbortController();
+    request          = current;
+    pending.value    = true;
+    try {
+      const data       = await requestData(body, current.signal);
+      if (current.signal.aborted) {
+        return;
+      }
+      productIds.value = storeProductSearchPage(store, data);
+      pagination.value = mergeCategoryPagination(
+        pagination.value,
+        data.products.rpag,
+      );
+      loaded.value     = true;
+    } catch {
+      if (!current.signal.aborted) {
+        productIds.value = [];
+        failed.value     = true;
+      }
+    } finally {
+      if (request === current) {
+        request       = undefined;
+        pending.value = false;
+      }
+    }
+  }
+
+  function clearFilters() {
+    store.setSearchFilters({});
+    void load(true);
+  }
+  function reset() {
+    pagination.value = {};
+    productIds.value = [];
+    store.setSearchFacets(null);
+    clearFilters();
+  }
+  function turnPage(value: number) {
+    if (
+      pending.value ||
+      !Number.isInteger(value) ||
+      value < 1 ||
+      value === page.value
+    ) {
+      return;
+    }
+    if (value > page.value && (failed.value || !pagination.value.has_next)) {
+      return;
+    }
+    page.value = value;
+    if (options.scrollToTop !== false) {
+      window.scrollTo({ top: 0, behavior: 'instant' });
+    }
+    void load();
+  }
+  onMounted(() => {
+    mounted = true;
+    // The server already rendered the first page of this scope; filters,
+    // pagination and later scope changes load in the browser as before.
+    if (!initial) {
+      reset();
+    }
+  });
+  watch(
+    [
+      () => JSON.stringify(toValue(context)),
+      () => store.init,
+      () => store.isReady,
+    ],
+    reset,
+    { flush: 'sync' },
+  );
+  onScopeDispose(cancel);
+  return {
+    productIds,
+    pagination,
+    page,
+    pending,
+    failed,
+    loaded,
+    load,
+    reset,
+    clearFilters,
+    turnPage,
+  };
+}

package/templates/app/composables/useOrionplaceProductVariants.ts

@@ -0,0 +1,176 @@
+import { onScopeDispose, ref, watch } from 'vue';
+import type { OrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
+import { useOrionplaceProgress } from '@/composables/useOrionplaceProgress';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { OrionplaceApiError } from '@/utils/orionplace/api';
+import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
+import type {
+  IProduct,
+  IProductSearchSeller,
+  IProductSecondaryVariants,
+  IProductVariantValue,
+} from '@/interfaces/orionplace/products/IProduct';
+
+export function useOrionplaceProductVariants(
+  options: { api?: OrionplaceFeatureApi } = {},
+) {
+  const api      = options.api ?? useOrionplaceApi();
+  const store    = useOrionplaceStore();
+  const requests = new Map<string, AbortController>();
+  // The product each card request loads, so a cancelled request clears its state.
+  const targets  = new Map<string, number>();
+  const error    = ref(false);
+  const pending  = ref(0);
+
+  useOrionplaceProgress(() => pending.value > 0);
+
+  function cancelTarget(key: string) {
+    const target = targets.get(key);
+    targets.delete(key);
+    if (target && store.getProductRequest(target) === 'loading') {
+      store.setProductRequest(target);
+    }
+  }
+
+  function reset() {
+    for (const [key, request] of requests) {
+      request.abort();
+      cancelTarget(key);
+      const [kind, group, value] = key.split(':');
+      const groupId              = Number(group);
+      const valueId              = Number(value);
+      if (
+        kind === 'secondary' &&
+        store.getSecondaryVariants(groupId, valueId)?.status === 'loading'
+      ) {
+        store.setSecondaryVariants(groupId, valueId, { status: 'failed' });
+      }
+    }
+    requests.clear();
+    pending.value = 0;
+    error.value   = false;
+  }
+
+  watch(() => store.init, reset, { flush: 'sync' });
+  onScopeDispose(reset);
+
+  async function select(selection: {
+    product: number;
+    variant: IProductVariantValue;
+  }) {
+    const targetId = selection.variant.reload_product;
+    const key      = `product:${selection.product}`;
+    requests.get(key)?.abort();
+    requests.delete(key);
+    cancelTarget(key);
+    pending.value  = requests.size;
+    error.value    = false;
+    if (!targetId || !Number.isInteger(targetId) || targetId <= 0) {
+      return;
+    }
+
+    if (store.getProduct(targetId) || store.getProduct(targetId, 'featured')) {
+      store.setProductRequest(targetId);
+      return;
+    }
+
+    const request  = new AbortController();
+    requests.set(key, request);
+    targets.set(key, targetId);
+    store.setProductRequest(targetId, 'loading');
+    pending.value  = requests.size;
+    try {
+      const data    = await api.request<{
+        products?: { data?: IProduct[] };
+        selects?: { sellers?: IProductSearchSeller[] };
+      }>(
+        'products_search',
+        {
+          filters: { id: targetId },
+          paginate: { page: 1, pp_items: 1 },
+        },
+        request.signal,
+      );
+      const product = data?.products?.data?.find(
+        (item) => item.id === targetId,
+      );
+      if (!product) {
+        throw new OrionplaceApiError('failed');
+      }
+      if (!request.signal.aborted && requests.get(key) === request) {
+        store.setProduct(product, 'products', data.selects?.sellers);
+        store.setProduct(product, 'featured', data.selects?.sellers);
+        store.setProductRequest(targetId);
+      }
+    } catch {
+      if (!request.signal.aborted && requests.get(key) === request) {
+        error.value = true;
+        store.setProductRequest(targetId, 'failed');
+      }
+    } finally {
+      if (requests.get(key) === request) {
+        requests.delete(key);
+        targets.delete(key);
+        pending.value = requests.size;
+      }
+    }
+  }
+
+  async function requestSecondary(selection: IProductSecondaryVariantRequest) {
+    const group      = selection.productGroup;
+    const value      = selection.variant.id;
+    const key        = `secondary:${group}:${value}`;
+    if (
+      !Number.isInteger(group) ||
+      group <= 0 ||
+      !Number.isInteger(value) ||
+      value <= 0 ||
+      requests.has(key) ||
+      store.getSecondaryVariants(group, value)?.status === 'ready'
+    ) {
+      return;
+    }
+
+    const request    = new AbortController();
+    const generation = store.productSecondaryVariants;
+    requests.set(key, request);
+    pending.value    = requests.size;
+    store.setSecondaryVariants(group, value, { status: 'loading' });
+    try {
+      const data = await api.request<IProductSecondaryVariants>(
+        'products_request_secondary_variants',
+        { product_group: group, main_variant_value: value },
+        request.signal,
+      );
+      if (!data?.secondary || !Array.isArray(data.variants)) {
+        throw new OrionplaceApiError('failed');
+      }
+      if (
+        !request.signal.aborted &&
+        store.productSecondaryVariants === generation
+      ) {
+        store.setSecondaryVariants(group, value, { status: 'ready', data });
+      }
+    } catch (cause) {
+      if (
+        !request.signal.aborted &&
+        store.productSecondaryVariants === generation
+      ) {
+        store.setSecondaryVariants(group, value, {
+          status:
+            cause instanceof OrionplaceApiError && cause.kind === 'unavailable'
+              ? 'unavailable'
+              : 'failed',
+        });
+      }
+    } finally {
+      if (requests.get(key) === request) {
+        requests.delete(key);
+        pending.value = requests.size;
+      }
+    }
+  }
+
+  return { select, requestSecondary, pending, error };
+}