orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/composables/useOrionplaceSearchScopeNames.ts

@@ -0,0 +1,99 @@
+import { computed, onMounted, onScopeDispose, ref, toValue, watch } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
+import type {
+  ProductSearchScope,
+  ProductSearchScopeNames,
+} from '@/utils/orionplace/productSearchScope';
+import type { IPhysicalStore, IStoreDirectoryResponse } from '@/interfaces/orionplace/stores/IStoreDirectory';
+
+/**
+ * Names for the `/browse` heading and breadcrumbs.
+ *
+ * Manufacturer and seller names come from the scoped search response that the
+ * page already loads: `products_search` always lists a requested
+ * `product_manufacture` / `product_owner` in `page_data.selects`, even when
+ * no product matches. A physical store has no entry there, so its name is
+ * read once from `stores_get` by ID.
+ */
+export function useOrionplaceSearchScopeNames(
+  scope: MaybeRefOrGetter<ProductSearchScope>,
+) {
+  const store     = useOrionplaceStore();
+  const api       = useOrionplaceApi();
+  const storeDetails = ref<IPhysicalStore>();
+  let mounted     = false;
+  let request: AbortController | undefined;
+
+  const names     = computed<ProductSearchScopeNames & { storeDetails?: IPhysicalStore }>(() => {
+    const current = toValue(scope);
+    const selects = store.searchFacets?.selects;
+
+    return {
+      manufacturer: selects?.manufacture?.find(
+        (item) => item.id === current.manufacturerId,
+      )?.name,
+      seller: selects?.sellers?.find((item) => item.id === current.sellerId)
+        ?.seller_name,
+      store: storeDetails.value?.store_name,
+      storeDetails: storeDetails.value,
+    };
+  });
+
+  function cancel() {
+    request?.abort();
+    request = undefined;
+  }
+
+  async function loadStoreName() {
+    cancel();
+    storeDetails.value = undefined;
+
+    const storeId   = toValue(scope).storeId;
+    if (!mounted || !storeId || !store.isReady) {
+      return;
+    }
+
+    const current   = new AbortController();
+    request         = current;
+
+    try {
+      const data = await api.request<
+        NonNullable<IStoreDirectoryResponse['page_data']>
+      >(
+        'stores_get',
+        {
+          filters: { id: storeId },
+          paginate: { page: 1, pp_items: 1 },
+        },
+        current.signal,
+      );
+      const item = data.data.at(0);
+
+      if (!current.signal.aborted && item?.id === storeId) {
+        storeDetails.value = item;
+      }
+    } catch {
+      // The heading keeps its generic caption when the lookup fails.
+    } finally {
+      if (request === current) {
+        request = undefined;
+      }
+    }
+  }
+
+  onMounted(() => {
+    mounted = true;
+    void loadStoreName();
+  });
+  watch(
+    [() => toValue(scope).storeId, () => store.isReady],
+    () => {
+      void loadStoreName();
+    },
+  );
+  onScopeDispose(cancel);
+
+  return names;
+}

package/templates/app/composables/useOrionplaceServerData.ts

@@ -0,0 +1,72 @@
+import { shallowRef } from 'vue';
+import type { Ref } from 'vue';
+import { useAsyncData, useNuxtApp } from '#imports';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { useOrionplaceServerApi } from '@/composables/useOrionplaceApi';
+import type { OrionplaceFeatureApi } from '@/composables/useOrionplaceFeature';
+
+export type OrionplaceServerLoader<T> = (
+  api: OrionplaceFeatureApi,
+) => Promise<T>;
+
+/**
+ * Page data rendered on the server and reused by the browser.
+ *
+ * During a server render the loader sends its requests through the shared
+ * API client with the visitor's cookies, and the page renders the result.
+ * Nuxt adds the result to the page payload, so the browser hydrates the
+ * same data without sending the request again.
+ *
+ * The value is `null` when the page opens by client-side navigation, when
+ * Application Load failed, or when the server request failed. The component
+ * then loads the data in the browser with its own loading state and Retry.
+ * Keep the returned value small: product and article components read
+ * complete records from the store.
+ */
+export async function useOrionplaceServerData<T>(
+  key: string,
+  load: OrionplaceServerLoader<T>,
+  server = import.meta.server,
+): Promise<Ref<T | null>> {
+  const nuxt      = useNuxtApp();
+  const store     = useOrionplaceStore();
+  // Only the first render in the browser reuses the server result. A later
+  // visit to the same address loads current data.
+  const hydrating = Boolean(nuxt.isHydrating);
+  const api       = server ? useOrionplaceServerApi() : undefined;
+  const state     = useAsyncData<T | null>(
+    key,
+    async () => {
+      if (!api || !store.isReady) {
+        return null;
+      }
+
+      try {
+        return await load(api);
+      } catch {
+        return null;
+      }
+    },
+    {
+      server: true,
+      // The browser never runs the loader: it reads the payload or leaves
+      // the data to the component.
+      immediate: server,
+      lazy: true,
+      deep: false,
+      default: () => null,
+    },
+  );
+
+  if (server) {
+    await state;
+
+    return state.data as Ref<T | null>;
+  }
+
+  if (!hydrating) {
+    return shallowRef(null);
+  }
+
+  return shallowRef((state.data.value ?? null) as T | null);
+}

package/templates/app/composables/useOrionplaceSignIn.ts

@@ -0,0 +1,66 @@
+import { hasInjectionContext, inject, provide } from 'vue';
+import type { InjectionKey } from 'vue';
+import { navigateTo, useRoute } from '#imports';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { signInPageLocation } from '@/utils/orionplace/signInReturn';
+
+export type OrionplaceSignInLocation = ReturnType<typeof signInPageLocation>;
+export type OrionplaceSignInHandler  = (
+  location: OrionplaceSignInLocation,
+) => unknown;
+
+const signInKey: InjectionKey<OrionplaceSignInHandler> = Symbol(
+  'orionplace-sign-in',
+);
+
+/**
+ * Replaces the navigation to the sign-in page inside this component subtree,
+ * for example in a preview that records the destination instead.
+ */
+export function provideOrionplaceSignIn(handler: OrionplaceSignInHandler) {
+  provide(signInKey, handler);
+}
+
+/*
+ * A guest who clicks an action that needs an account (a review, a reaction,
+ * a favorite, a plan subscription) goes straight to the /profile sign-in page,
+ * which returns to `redirect` afterwards. Call requireSignIn() only from the
+ * visitor's own click: background requests and an ended session never
+ * navigate.
+ */
+export function useOrionplaceSignIn() {
+  const store   = useOrionplaceStore();
+  const route   = useRoute();
+  const handler = hasInjectionContext()
+    ? inject(signInKey, undefined)
+    : undefined;
+
+  // On /profile itself the page keeps its own return target.
+  function currentPage() {
+    if (route.path === '/profile') {
+      return route.query.redirect;
+    }
+
+    return route.fullPath;
+  }
+
+  /** The sign-in page route that returns to `returnTo` or the current page. */
+  function signInLocation(returnTo?: unknown) {
+    const target = returnTo === undefined ? currentPage() : returnTo;
+
+    return signInPageLocation(target, store.localeCode);
+  }
+
+  /** Opens the sign-in page at once; `returnTo` defaults to this page. */
+  function requireSignIn(returnTo?: unknown) {
+    const location = signInLocation(returnTo);
+
+    if (handler) {
+      return handler(location);
+    }
+
+    return navigateTo(location);
+  }
+
+  return { requireSignIn, signInLocation };
+}

package/templates/app/composables/useOrionplaceStableHeight.ts

@@ -0,0 +1,69 @@
+import { onMounted, onScopeDispose, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+
+export function useOrionplaceStableHeight(
+  element: Ref<HTMLElement | undefined>,
+) {
+  const minHeight = ref<string>();
+  let observer: ResizeObserver | undefined;
+  let width       = 0;
+  let retained    = 0;
+  let frame       = 0;
+
+  function measure() {
+    const node      = element.value;
+    if (!node) {
+      return;
+    }
+    retained        = Math.max(
+      retained,
+      Math.ceil(node.getBoundingClientRect().height),
+    );
+    minHeight.value = `${retained}px`;
+  }
+  function reset() {
+    if (typeof requestAnimationFrame !== 'function') {
+      return;
+    }
+    retained        = 0;
+    minHeight.value = undefined;
+    cancelAnimationFrame(frame);
+    frame           = requestAnimationFrame(measure);
+  }
+  onMounted(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    observer = new ResizeObserver(([entry]) => {
+      if (!entry) {
+        return;
+      }
+      // A whole pixel of width can cross a container step (the compact
+      // card's 22rem), so it measures afresh; sub-pixel jitter keeps it.
+      if (Math.abs(entry.contentRect.width - width) > 0.5) {
+        width = entry.contentRect.width;
+        reset();
+      } else {
+        measure();
+      }
+    });
+    if (element.value) {
+      observer.observe(element.value);
+    }
+  });
+  watch(element, (node, previous) => {
+    if (previous) {
+      observer?.unobserve(previous);
+    }
+    if (node) {
+      observer?.observe(node);
+    }
+  });
+  onScopeDispose(() => {
+    observer?.disconnect();
+    if (typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(frame);
+    }
+  });
+  return { minHeight, reset };
+}

package/templates/app/composables/useOrionplaceStorefront.ts

@@ -0,0 +1,29 @@
+import { inject, provide, ref } from 'vue';
+import type { InjectionKey } from 'vue';
+import { useOrionplaceProductActions } from '@/composables/useOrionplaceProductActions';
+import { useOrionplaceProductVariants } from '@/composables/useOrionplaceProductVariants';
+
+function createStorefront() {
+  return {
+    actions: useOrionplaceProductActions(),
+    variants: useOrionplaceProductVariants(),
+    selection: ref(''),
+  };
+}
+const storefrontKey: InjectionKey<ReturnType<typeof createStorefront>> = Symbol(
+  'orionplace-storefront',
+);
+
+export function provideOrionplaceStorefront() {
+  const storefront = createStorefront();
+  provide(storefrontKey, storefront);
+  return storefront;
+}
+
+export function useOrionplaceStorefront() {
+  const storefront = inject(storefrontKey);
+  if (!storefront) {
+    throw new Error('The storefront page requires the default layout.');
+  }
+  return storefront;
+}

package/templates/app/composables/useOrionplaceSubscriptions.ts

@@ -0,0 +1,217 @@
+import { onMounted, ref, shallowRef, watch } from 'vue';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import {
+  useOrionplaceFeatureApi,
+  useOrionplaceTask,
+} from '@/composables/useOrionplaceFeature';
+import { useOrionplaceSignIn } from '@/composables/useOrionplaceSignIn';
+import type {
+  ICustomerSubscription,
+  ICustomerSubscriptionsResponse,
+  ISubscriptionCancelRequest,
+  ISubscriptionChangeOptionRequest,
+  ISubscriptionChangeTariffRequest,
+  ISubscriptionCreateRequest,
+  ISubscriptionRenewRequest,
+  ISubscriptionRenewalSettingRequest,
+} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import type { IProfileData } from '@/interfaces/orionplace/accounts/IProfileData';
+
+export function useOrionplaceSubscriptions(loadOnMount = true) {
+  const store         = useOrionplaceStore();
+  const api           = useOrionplaceFeatureApi();
+  const task          = useOrionplaceTask();
+  const signIn        = useOrionplaceSignIn();
+  const subscriptions = shallowRef<ICustomerSubscription[]>([]);
+  const tariffs       = shallowRef<
+    NonNullable<ICustomerSubscriptionsResponse['page_data']>['tariffs']
+  >([]);
+  const loaded        = ref(false);
+  const completed     = ref(false);
+  const needsRefresh  = ref(false);
+  let purchased       = '';
+
+  async function fetchAccount(signal: AbortSignal) {
+    const result        = await api.request<
+      NonNullable<ICustomerSubscriptionsResponse['page_data']>
+    >('subscriptions_get', {}, signal);
+    subscriptions.value = result.data;
+    tariffs.value       = result.tariffs;
+    loaded.value        = true;
+    const profileData   = await api.request<{ profile_info: IProfileData[] }>(
+      'profile_get',
+      { filters: {} },
+      signal,
+    );
+    const profile       = profileData.profile_info.find(
+      (item) => item.id === store.profile?.id,
+    );
+    if (profile?.wallet) {
+      store.patchWallet(profile.wallet);
+    }
+    needsRefresh.value  = false;
+  }
+
+  function load() {
+    if (store.isAuthenticated) {
+      return task.run('load', fetchAccount);
+    }
+  }
+
+  /*
+   * Each plan the customer buys is its own subscription, so a purchase that
+   * already succeeded must not block the next one. Only repeating the same
+   * purchase is refused, which keeps a confirmed dialog from charging the
+   * balance twice; `completed` reports the last purchase.
+   */
+  function subscribe(request: ISubscriptionCreateRequest) {
+    const payload = JSON.stringify(request);
+
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+    if (completed.value && payload === purchased) {
+      return;
+    }
+    purchased       = payload;
+    completed.value = false;
+
+    return task.run('subscribe', async (signal) => {
+      await api.request('subscriptions_subscribe', { ...request }, signal);
+      completed.value    = true;
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  /*
+   * A guest reaching an account action goes to the sign-in page, which
+   * returns to this page. The request itself runs only for a signed-in
+   * customer and the list is reloaded from the confirmed response.
+   */
+  function guest() {
+    if (store.isAuthenticated) {
+      return false;
+    }
+    signIn.requireSignIn();
+
+    return true;
+  }
+
+  /** Writes the automatic renewal of one subscription. */
+  function setRenewal(request: ISubscriptionRenewalSettingRequest) {
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+
+    return task.run('renewal', async (signal) => {
+      await api.request('subscriptions_change_renew', { ...request }, signal);
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  /** Pays for one more period of the subscription from the balance. */
+  function renew(request: ISubscriptionRenewRequest) {
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+
+    return task.run('renew', async (signal) => {
+      await api.request('subscriptions_renew', { ...request }, signal);
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  function stopRenewal(id: number) {
+    return setRenewal({ existed_subscription: id });
+  }
+
+  /*
+   * Moving a subscription to another plan or to another service option is one
+   * payment: the backend refunds the unused days of the current period to the
+   * account balance and charges the selected period in full. The request
+   * carries the automatic renewal that applies afterwards, because the
+   * backend writes `renew_period` from what it receives and a request without
+   * it leaves automatic renewal off.
+   */
+  function changeTariff(request: ISubscriptionChangeTariffRequest) {
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+
+    return task.run('change', async (signal) => {
+      await api.request('subscriptions_change_tariff', { ...request }, signal);
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  /** Changes the service option inside the plan the subscription runs on. */
+  function changeOption(request: ISubscriptionChangeOptionRequest) {
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+
+    return task.run('change', async (signal) => {
+      await api.request('subscriptions_change_option', { ...request }, signal);
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  /*
+   * Stops automatic renewal and records `cancelled_date`. Nothing is refunded
+   * and the paid period stays available; saving a renewal period again
+   * restarts automatic renewal and clears that date.
+   */
+  function cancel(request: ISubscriptionCancelRequest) {
+    if (guest() || needsRefresh.value) {
+      return;
+    }
+
+    return task.run('cancel', async (signal) => {
+      await api.request('subscriptions_cancel', { ...request }, signal);
+      needsRefresh.value = true;
+      await fetchAccount(signal);
+    });
+  }
+
+  watch(
+    () => store.isAuthenticated,
+    () => {
+      task.cancel();
+      subscriptions.value = [];
+      tariffs.value       = [];
+      purchased           = '';
+      completed.value     = false;
+      loaded.value        = false;
+      needsRefresh.value  = false;
+      if (loadOnMount) {
+        void load();
+      }
+    },
+  );
+  onMounted(() => {
+    if (loadOnMount) {
+      void load();
+    }
+  });
+  return {
+    task,
+    subscriptions,
+    tariffs,
+    loaded,
+    completed,
+    needsRefresh,
+    load,
+    subscribe,
+    renew,
+    setRenewal,
+    stopRenewal,
+    changeTariff,
+    changeOption,
+    cancel,
+  };
+}

package/templates/app/composables/useOrionplaceTheme.ts

@@ -0,0 +1,27 @@
+import { useState } from '#imports';
+import {
+  defaultOrionplaceTheme,
+  orionplaceThemeNames,
+  resolveOrionplaceThemeName,
+} from '@/themes/orionplace';
+import type { OrionplaceThemeMode } from '@/themes/orionplace';
+
+export function useOrionplaceTheme() {
+  // Nuxt keeps this state per SSR request and carries it into the browser.
+  const mode = useState<OrionplaceThemeMode>(
+    'orionplace:theme',
+    () => defaultOrionplaceTheme,
+  );
+
+  function setTheme(name: OrionplaceThemeMode) {
+    mode.value = resolveOrionplaceThemeName(name);
+  }
+
+  function toggle() {
+    const currentIndex = orionplaceThemeNames.indexOf(mode.value);
+    const nextIndex    = (currentIndex + 1) % orionplaceThemeNames.length;
+    setTheme(orionplaceThemeNames[nextIndex] ?? defaultOrionplaceTheme);
+  }
+
+  return { mode, themes: orionplaceThemeNames, setTheme, toggle };
+}