orionplace-nuxt 0.1.3 → 0.2.0

package/templates/app/utils/orionplace/productActions.ts

@@ -0,0 +1,547 @@
+import { ref } from 'vue';
+import type {
+  IProduct,
+  IProductSearchSeller,
+} from '@/interfaces/orionplace/products/IProduct';
+import { productWithSellerPermission } from '@/utils/orionplace/productSeller';
+import type { useOrionplaceStore } from '@/stores/orionplace';
+
+export type ProductActionStore = Pick<
+  ReturnType<typeof useOrionplaceStore>,
+  'getProduct' | 'getProductAvailability' | 'setProduct'
+> &
+  Partial<Pick<ReturnType<typeof useOrionplaceStore>, 'patchProductState'>>;
+export type ProductAction =
+  | 'add'
+  | 'remove'
+  | 'toggleFavorite'
+  | 'subscribe'
+  | 'unsubscribe'
+  | 'preorder';
+export interface ProductActionSelection {
+  product: number;
+  quantity?: number;
+  cartItem?: number;
+  selected?: boolean;
+  email?: string;
+  phone?: string;
+}
+export type ProductActionPatch = Pick<
+  IProduct,
+  'cart_counts' | 'whishlist_id' | 'subscription_id'
+> &
+  Partial<Pick<IProduct, 'c_real_left' | 'seller'>>;
+export interface ProductActionResponse {
+  raw?: { status: number };
+  form_errors?: unknown;
+  success_message?: string;
+  page_data?: unknown;
+}
+export type ProductActionRequest = (
+  name: string,
+  body: Record<string, unknown>,
+  params?: Record<string, number>,
+) => Promise<ProductActionResponse>;
+
+export class ProductActionError extends Error {
+  readonly kind: string;
+  // Messages per form field (`__all__` excluded), to show under the fields.
+  readonly fields: Record<string, string>;
+  // The backend asks the visitor to sign in (error code `sign_in`), for
+  // example when a guest preorder uses a registered customer's contact.
+  readonly signIn: boolean;
+
+  constructor(
+    kind: string,
+    message = '',
+    fields: Record<string, string> = {},
+    signIn = false,
+  ) {
+    super(message);
+    this.kind   = kind;
+    this.fields = fields;
+    this.signIn = signIn;
+  }
+}
+
+export function requireProductActionSuccess(response: ProductActionResponse) {
+  const status = response.raw?.status ?? 0;
+  const data   = response.page_data;
+
+  if (
+    data &&
+    typeof data === 'object' &&
+    'auth' in data &&
+    data.auth === false
+  ) {
+    throw new ProductActionError('login');
+  }
+
+  if (
+    status >= 200 &&
+    status < 300 &&
+    response.form_errors === null &&
+    typeof response.success_message === 'string' &&
+    response.success_message.length > 0
+  ) {
+    return;
+  }
+
+  const errors   = response.form_errors;
+  const entries  =
+    errors && typeof errors === 'object' ? Object.entries(errors) : [];
+  const fields: Record<string, string> = {};
+  const messages = new Set<string>();
+  let signIn     = false;
+
+  for (const [name, value] of entries) {
+    const texts = [value].flat().flatMap((error) => {
+      if (!error || typeof error !== 'object') {
+        return [];
+      }
+      if ('code' in error && error.code === 'sign_in') {
+        signIn = true;
+      }
+      return 'message' in error && typeof error.message === 'string'
+        ? [error.message]
+        : [];
+    });
+
+    texts.forEach((text) => messages.add(text));
+    if (name !== '__all__' && texts.length) {
+      fields[name] = [...new Set(texts)].join(' ');
+    }
+  }
+
+  // OrionMarketplace repeats a field's message in `__all__`: each text is shown once.
+  throw new ProductActionError(
+    'failed',
+    [...messages].join('\n'),
+    fields,
+    signIn,
+  );
+}
+
+export function applyProductActionPatch(
+  store: ProductActionStore,
+  id: number,
+  patch: ProductActionPatch,
+) {
+  if (store.patchProductState) {
+    store.patchProductState(id, patch);
+    return;
+  }
+  for (const collection of ['products', 'featured'] as const) {
+    const product = store.getProduct(id, collection);
+
+    if (product) {
+      store.setProduct({ ...product, ...patch }, collection);
+    }
+  }
+}
+
+export function createProductActions(options: {
+  request: ProductActionRequest;
+  authenticated: () => boolean;
+  email: () => string | undefined;
+  changed: (id: number, patch: ProductActionPatch) => void;
+  counters: (values: {
+    c_cart_positions?: number;
+    c_wishlist?: number;
+  }) => void;
+  // Opens the sign-in page when a clicked action needs an account.
+  signIn?: () => unknown;
+  // Runs after a saved availability subscription, which can change the
+  // customer's optional email notifications.
+  subscribed?: () => unknown;
+}) {
+  const pending      = ref(false);
+  const error        = ref<{
+    kind: string;
+    message: string;
+    fields?: Record<string, string>;
+    signIn?: boolean;
+  }>();
+  const success      = ref(false);
+  const preorderId   = ref<number>();
+  const needsRefresh = ref(false);
+  let refreshTarget: { store: ProductActionStore; id: number } | undefined;
+
+  function report(reason: unknown) {
+    const requiresLogin =
+      reason instanceof ProductActionError && reason.kind === 'login';
+
+    // Every action here starts from the visitor's click, so a guest goes
+    // straight to the sign-in page instead of reading a notice.
+    if (requiresLogin && options.signIn) {
+      error.value = undefined;
+      options.signIn();
+      return;
+    }
+
+    error.value         =
+      reason instanceof ProductActionError
+        ? {
+            kind: reason.kind,
+            message: reason.message,
+            // Only a refusal with field errors or a sign-in request has them.
+            ...(Object.keys(reason.fields).length
+              ? { fields: reason.fields }
+              : {}),
+            ...(reason.signIn ? { signIn: true } : {}),
+          }
+        : { kind: 'failed', message: '' };
+  }
+
+  function commit(
+    store: ProductActionStore,
+    id: number,
+    patch: ProductActionPatch,
+  ) {
+    options.changed(id, patch);
+    applyProductActionPatch(store, id, patch);
+  }
+
+  async function request(
+    name: string,
+    body: Record<string, unknown>,
+    params?: Record<string, number>,
+  ) {
+    const response = await options.request(name, body, params);
+    requireProductActionSuccess(response);
+    return response.page_data;
+  }
+
+  async function refresh() {
+    if (!refreshTarget) {
+      return;
+    }
+
+    const { store, id } = refreshTarget;
+    const data          = (await request('products_search', {
+      filters: { id },
+      paginate: { page: 1, pp_items: 1 },
+    })) as {
+      products?: { data?: IProduct[] };
+      selects?: { sellers?: IProductSearchSeller[] };
+    } | null;
+    const product       = data?.products?.data?.find((item) => item.id === id);
+
+    if (!product) {
+      throw new ProductActionError('refreshFailed');
+    }
+
+    commit(store, id, {
+      subscription_id: product.subscription_id ?? null,
+      whishlist_id: product.whishlist_id ?? null,
+      cart_counts: product.cart_counts ?? null,
+      c_real_left: product.c_real_left,
+      seller: productWithSellerPermission(product, data?.selects?.sellers)
+        .seller,
+    });
+    refreshTarget       = undefined;
+    needsRefresh.value  = false;
+    return product;
+  }
+
+  async function retryRefresh() {
+    if (pending.value || !refreshTarget) {
+      return;
+    }
+
+    pending.value = true;
+    error.value   = undefined;
+
+    try {
+      await refresh();
+      success.value = true;
+    } catch (reason) {
+      reportRefreshError(reason);
+    } finally {
+      pending.value = false;
+    }
+  }
+
+  function reportRefreshError(reason: unknown) {
+    const requiresLogin =
+      reason instanceof ProductActionError && reason.kind === 'login';
+
+    report(requiresLogin ? reason : new ProductActionError('refreshFailed'));
+  }
+
+  async function changeFavorite(
+    store: ProductActionStore,
+    selection: ProductActionSelection,
+  ) {
+    const id       = selection.product;
+
+    if (typeof selection.selected !== 'boolean') {
+      throw new ProductActionError('invalid');
+    }
+
+    const adding   = selection.selected;
+    const response = await options.request(
+      adding
+        ? 'products_whishlist_add'
+        : 'products_whishlist_delete_by_product_id',
+      adding ? { product: id } : {},
+      adding ? undefined : { product_id: id },
+    );
+
+    try {
+      requireProductActionSuccess(response);
+    } catch (reason) {
+      if (await recoverFavorite(store, id, adding, response, reason)) {
+        return;
+      }
+      throw reason;
+    }
+
+    const data     = response.page_data as {
+      wish_id?: number;
+      count?: number;
+    } | null;
+
+    if (
+      adding &&
+      (!Number.isInteger(data?.wish_id) || Number(data?.wish_id) < 1)
+    ) {
+      refreshTarget      = { store, id };
+      needsRefresh.value = true;
+      await refresh();
+    } else {
+      commit(store, id, { whishlist_id: adding ? data!.wish_id : null });
+    }
+    if (Number.isInteger(data?.count)) {
+      options.counters({ c_wishlist: data!.count });
+    }
+  }
+
+  // Another tab may have changed the wishlist already: OrionMarketplace then answers
+  // "Already in whishlist" or "Wish not found" with the current counter.
+  // The product is read again, and the click counts as done when the heart
+  // now matches it.
+  async function recoverFavorite(
+    store: ProductActionStore,
+    id: number,
+    adding: boolean,
+    response: ProductActionResponse,
+    reason: unknown,
+  ) {
+    if (
+      !(reason instanceof ProductActionError) ||
+      reason.kind !== 'failed' ||
+      !response.form_errors
+    ) {
+      return false;
+    }
+
+    const data = response.page_data as { count?: number } | null;
+
+    if (Number.isInteger(data?.count)) {
+      options.counters({ c_wishlist: data!.count });
+    }
+
+    refreshTarget = { store, id };
+    try {
+      const product = await refresh();
+
+      return Boolean(product?.whishlist_id) === adding;
+    } catch {
+      refreshTarget = undefined;
+      return false;
+    }
+  }
+
+  async function changeCart(
+    store: ProductActionStore,
+    action: 'add' | 'remove',
+    selection: ProductActionSelection,
+    product: IProduct,
+  ) {
+    const id           = selection.product;
+    const collection   = store.getProduct(id) ? 'products' : 'featured';
+    const availability = store.getProductAvailability(id, collection);
+
+    const adding       = action === 'add';
+    const quantity     = selection.quantity;
+
+    if (adding) {
+      if (
+        !availability.canAdd ||
+        !Number.isInteger(quantity) ||
+        Number(quantity) < 1 ||
+        Number(quantity) > availability.maxQuantity
+      ) {
+        throw new ProductActionError('invalid');
+      }
+    } else if (
+      !Number.isInteger(selection.cartItem) ||
+      Number(selection.cartItem) < 1 ||
+      selection.cartItem !== product.cart_counts?.cart_id
+    ) {
+      throw new ProductActionError('invalid');
+    }
+
+    const data         = (await request(
+      adding ? 'cart_guest_first_set' : 'cart_guest_remove_by_cart_item',
+      adding ? { product: id, quantity } : {},
+      adding ? undefined : { cart_item_id: selection.cartItem! },
+    )) as {
+      cart_item_id?: number;
+      c_real_left?: number;
+      c_cart_positions?: number;
+    } | null;
+
+    if (
+      adding &&
+      (!Number.isInteger(data?.cart_item_id) || Number(data?.cart_item_id) < 1)
+    ) {
+      refreshTarget      = { store, id };
+      needsRefresh.value = true;
+      await refresh();
+    } else {
+      const patch: ProductActionPatch = {
+        cart_counts: adding
+          ? {
+              ...product.cart_counts,
+              cart_id: data!.cart_item_id,
+              modal_quantity: quantity,
+            }
+          : null,
+      };
+      if (typeof data?.c_real_left === 'number') {
+        patch.c_real_left = data.c_real_left;
+      }
+      commit(store, id, patch);
+    }
+    if (Number.isInteger(data?.c_cart_positions)) {
+      options.counters({ c_cart_positions: data!.c_cart_positions });
+    }
+  }
+
+  async function changeSubscription(
+    store: ProductActionStore,
+    action: 'subscribe' | 'unsubscribe',
+    id: number,
+  ) {
+    await request(
+      action === 'subscribe'
+        ? 'product_subscription_add'
+        : 'product_subscription_delete',
+      {},
+      { product_id: id },
+    );
+    if (action === 'subscribe') {
+      await options.subscribed?.();
+    }
+    // These endpoints return no product or subscription ID.
+    refreshTarget      = { store, id };
+    needsRefresh.value = true;
+    await refresh();
+  }
+
+  async function createPreorder(
+    selection: ProductActionSelection,
+    canPreorder: boolean,
+  ) {
+    const id                            = selection.product;
+
+    if (!canPreorder) {
+      throw new ProductActionError('invalid');
+    }
+
+    const body: Record<string, unknown> = { product: id };
+
+    if (!options.authenticated()) {
+      if (!selection.email?.trim() && !selection.phone?.trim()) {
+        throw new ProductActionError('contact');
+      }
+      if (selection.email?.trim()) {
+        body.email = selection.email.trim();
+      }
+      if (selection.phone?.trim()) {
+        body.phone = selection.phone.trim();
+      }
+    }
+
+    const data                          = (await request('preorders_create', body)) as {
+      id?: number;
+    } | null;
+    preorderId.value                    = data?.id;
+  }
+
+  async function run(
+    store: ProductActionStore,
+    action: ProductAction,
+    selection: ProductActionSelection,
+  ) {
+    if (pending.value || needsRefresh.value) {
+      return false;
+    }
+
+    error.value      = undefined;
+    success.value    = false;
+    preorderId.value = undefined;
+
+    try {
+      if (!Number.isInteger(selection.product) || selection.product < 1) {
+        throw new ProductActionError('invalid');
+      }
+
+      const id            = selection.product;
+      const collection    = store.getProduct(id) ? 'products' : 'featured';
+      const product       = store.getProduct(id, collection);
+      const availability  = store.getProductAvailability(id, collection);
+      const requiresLogin = [
+        'toggleFavorite',
+        'subscribe',
+        'unsubscribe',
+      ].includes(action);
+
+      if (!product) {
+        throw new ProductActionError('invalid');
+      }
+      if (requiresLogin && !options.authenticated()) {
+        throw new ProductActionError('login');
+      }
+      if (action === 'subscribe' && !options.email()) {
+        throw new ProductActionError('email');
+      }
+
+      pending.value       = true;
+
+      if (action === 'toggleFavorite') {
+        await changeFavorite(store, selection);
+      } else if (action === 'add' || action === 'remove') {
+        await changeCart(store, action, selection, product);
+      } else if (action === 'subscribe' || action === 'unsubscribe') {
+        await changeSubscription(store, action, id);
+      } else if (action === 'preorder') {
+        await createPreorder(selection, availability.canPreorder);
+      }
+
+      success.value       = true;
+      return true;
+    } catch (reason) {
+      if (needsRefresh.value) {
+        reportRefreshError(reason);
+      } else {
+        report(reason);
+      }
+      return false;
+    } finally {
+      pending.value = false;
+    }
+  }
+
+  return {
+    run,
+    pending,
+    error,
+    success,
+    preorderId,
+    needsRefresh,
+    retryRefresh,
+  };
+}

package/templates/app/utils/orionplace/productAvailability.ts

@@ -0,0 +1,36 @@
+import { EProductStatus } from '@/interfaces/orionplace/products/IProduct';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+
+export function hasLowStockNotice(product: IProduct | undefined) {
+  return Boolean(
+    product?.flags?.flag_is_soon_be_out && product.c_real_left > 0,
+  );
+}
+
+export function productAvailability(
+  product: IProduct | undefined,
+  allowPreorder: boolean | undefined,
+) {
+  const status       = product?.status.status;
+  const stock        = product?.c_real_left ?? 0;
+  const isOnSale     =
+    status === EProductStatus.PUBLISHED ||
+    status === EProductStatus.PUBLISHED_AS_OPTION;
+  const canAdd       = status === EProductStatus.PUBLISHED && stock >= 1;
+  const canSubscribe = Boolean(product) && !(isOnSale && stock > 0);
+  const canPreorder  =
+    Boolean(product) &&
+    allowPreorder === true &&
+    product?.seller?.is_accepting_preorders === true &&
+    stock <= 0 &&
+    (status === EProductStatus.LOW_STOCK ||
+      status === EProductStatus.LOW_SALE_STOCK);
+
+  return {
+    canAdd,
+    canSubscribe,
+    canPreorder,
+    isSubscribed: Boolean(product?.subscription_id),
+    maxQuantity: Math.max(0, Math.floor(stock)),
+  };
+}

package/templates/app/utils/orionplace/productGallery.ts

@@ -0,0 +1,72 @@
+export interface IThumbnailRailMetrics {
+  position: number;
+  size: number;
+  viewport: number;
+}
+
+export interface IThumbnailRailEdges {
+  back: boolean;
+  forward: boolean;
+}
+
+// Browsers report fractional scroll positions on zoomed pages; one pixel of
+// tolerance keeps an arrow from staying visible at the very end of the rail.
+const edgeTolerance = 1;
+
+export function thumbnailRailEdges(
+  metrics: IThumbnailRailMetrics,
+): IThumbnailRailEdges {
+  const end = metrics.position + metrics.viewport;
+
+  return {
+    back: metrics.position > edgeTolerance,
+    forward: end < metrics.size - edgeTolerance,
+  };
+}
+
+// Returns the scroll position that reveals a thumbnail, keeping `inset`
+// pixels free for the arrow buttons that overlay both ends of the rail.
+// A thumbnail that is already visible needs no scrolling.
+export function thumbnailScrollTarget(
+  thumbnail: { start: number; length: number },
+  metrics: IThumbnailRailMetrics,
+  inset: number,
+): number | undefined {
+  const visibleStart = metrics.position + inset;
+  const visibleEnd   = metrics.position + metrics.viewport - inset;
+  const end          = thumbnail.start + thumbnail.length;
+  const last         = Math.max(0, metrics.size - metrics.viewport);
+  let target: number | undefined;
+
+  if (thumbnail.start < visibleStart) {
+    target = Math.max(0, thumbnail.start - inset);
+  } else if (end > visibleEnd) {
+    target = Math.min(last, end - metrics.viewport + inset);
+  }
+
+  return target === metrics.position ? undefined : target;
+}
+
+export function thumbnailKeyTarget(
+  key: string,
+  index: number,
+  count: number,
+): number | undefined {
+  if (key === 'ArrowUp' || key === 'ArrowLeft') {
+    return Math.max(0, index - 1);
+  }
+
+  if (key === 'ArrowDown' || key === 'ArrowRight') {
+    return Math.min(count - 1, index + 1);
+  }
+
+  if (key === 'Home') {
+    return 0;
+  }
+
+  if (key === 'End') {
+    return count - 1;
+  }
+
+  return undefined;
+}