orionplace-react 0.1.0 → 0.2.1

package/templates/stores/orionplaceCatalog.ts

@@ -0,0 +1,144 @@
+import { createStore } from 'zustand/vanilla';
+import type {
+  IAppLoadCommon,
+  ICategory,
+} from '@/interfaces/orionplace';
+import {
+  catalogRepresentatives,
+  findCatalogCategory,
+  navigationCatalogCategories,
+} from '@/lib/orionplace/catalog';
+import { resolveAppLoadProducts } from '@/lib/orionplace/productSeller';
+
+type CatalogTree = NonNullable<IAppLoadCommon['catalog']>;
+type Tariffs = NonNullable<IAppLoadCommon['tariffs']>;
+
+export interface OrionplaceCatalogState {
+  init: IAppLoadCommon | null;
+  catalogSnapshot?: CatalogTree;
+  tariffsSnapshot?: Tariffs;
+  storeTariffsSnapshot?: Tariffs;
+  catalog: CatalogTree;
+  /** What the plan pages show: the store list, a search result or one plan. */
+  tariffs: IAppLoadCommon['tariffs'] | null;
+  /** Every plan the storefront sells; the subscriptions page reads it. */
+  storeTariffs: IAppLoadCommon['tariffs'] | null;
+  setCatalogTree: (tree: CatalogTree) => void;
+  setTariffs: (tariffs: Tariffs) => void;
+  setStoreTariffs: (tariffs: Tariffs) => void;
+  getTariff: (id: number) => Tariffs['data'][number] | undefined;
+  getCatalogCategory: (id: number) => ICategory | undefined;
+  getCatalogProducts: (
+    categoryId: number,
+  ) => ReturnType<typeof catalogRepresentatives>;
+  reconcile: (init: IAppLoadCommon | null) => void;
+  reset: () => void;
+}
+
+export type OrionplaceCatalogStore = ReturnType<
+  typeof createOrionplaceCatalogStore
+>;
+
+function collections(
+  init: IAppLoadCommon | null,
+  catalogSnapshot?: CatalogTree,
+  tariffsSnapshot?: Tariffs,
+  storeTariffsSnapshot?: Tariffs,
+) {
+  const storeTariffs = storeTariffsSnapshot ?? init?.tariffs ?? null;
+
+  return {
+    catalog: catalogSnapshot ?? init?.catalog ?? [],
+    tariffs: tariffsSnapshot ?? storeTariffs,
+    storeTariffs,
+  };
+}
+
+/** Application Load collections and later catalog or tariff replacements. */
+export function createOrionplaceCatalogStore(
+  init: IAppLoadCommon | null = null,
+) {
+  return createStore<OrionplaceCatalogState>()((set, get) => ({
+    init,
+    ...collections(init),
+
+    setCatalogTree(catalogSnapshot) {
+      set({ catalogSnapshot, catalog: catalogSnapshot });
+    },
+
+    // A search result or one plan: only the plan pages show it.
+    setTariffs(tariffsSnapshot) {
+      set({ tariffsSnapshot, tariffs: tariffsSnapshot });
+    },
+
+    // The complete plan list of the storefront, loaded after Application Load.
+    setStoreTariffs(storeTariffsSnapshot) {
+      set({
+        storeTariffsSnapshot,
+        tariffsSnapshot: undefined,
+        tariffs: storeTariffsSnapshot,
+        storeTariffs: storeTariffsSnapshot,
+      });
+    },
+
+    getTariff(id) {
+      return get().tariffs?.data.find((tariff) => tariff.id === id);
+    },
+
+    getCatalogCategory(id) {
+      return findCatalogCategory(get().catalog, id);
+    },
+
+    getCatalogProducts(categoryId) {
+      const current = get();
+      return catalogRepresentatives(
+        current.getCatalogCategory(categoryId),
+        resolveAppLoadProducts(
+          current.init?.products,
+          current.init?.sellers,
+        ),
+        resolveAppLoadProducts(
+          current.init?.featured,
+          current.init?.sellers,
+        ),
+      );
+    },
+
+    reconcile(next) {
+      const current = get();
+      set({
+        init: next,
+        ...collections(
+          next,
+          current.catalogSnapshot,
+          current.tariffsSnapshot,
+          current.storeTariffsSnapshot,
+        ),
+      });
+    },
+
+    reset() {
+      set({
+        init: null,
+        catalogSnapshot: undefined,
+        tariffsSnapshot: undefined,
+        storeTariffsSnapshot: undefined,
+        catalog: [],
+        tariffs: null,
+        storeTariffs: null,
+      });
+    },
+  }));
+}
+
+export const selectCatalogRoots = (state: OrionplaceCatalogState) =>
+  navigationCatalogCategories(state.catalog);
+
+export const selectCatalogShortcuts = (state: OrionplaceCatalogState) =>
+  selectCatalogRoots(state).filter((category) => category.separate_menu);
+
+export const selectCatalogCategories = (state: OrionplaceCatalogState) => {
+  const roots = selectCatalogRoots(state);
+  const regular = roots.filter((category) => !category.separate_menu);
+  return regular.length ? regular : roots;
+};

package/templates/stores/orionplaceProducts.ts

@@ -0,0 +1,389 @@
+import { createStore } from 'zustand/vanilla';
+import type { IAppLoadCommon } from '@/interfaces/orionplace';
+import type {
+  IProduct,
+  IProductSearchSeller,
+} from '@/interfaces/orionplace/products/IProduct';
+import type { IProductSecondaryVariantState } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
+import {
+  productWithSellerPermission,
+  resolveAppLoadProducts,
+} from '@/lib/orionplace/productSeller';
+import { guestProduct } from '@/lib/orionplace/guestSession';
+
+export type OrionplaceProductCollection = 'products' | 'featured';
+
+type ProductsInit = Omit<IAppLoadCommon, 'products' | 'featured'> & {
+  products?: IProduct[];
+  featured?: IProduct[];
+};
+
+export interface OrionplaceProductsState {
+  init: ProductsInit | null;
+  updates: Record<OrionplaceProductCollection, Record<number, IProduct>>;
+  requests: Record<number, 'loading' | 'failed'>;
+  secondaryVariants: Record<string, IProductSecondaryVariantState>;
+  homeNewProductIds: number[] | null;
+  pendingFavorites: Record<number, boolean>;
+  productCounters: {
+    c_cart_positions?: number;
+    c_wishlist?: number;
+  };
+  getProduct: (
+    id: number,
+    collection?: OrionplaceProductCollection,
+  ) => IProduct | undefined;
+  setProduct: (
+    product: IProduct,
+    collection?: OrionplaceProductCollection,
+    sellers?: readonly IProductSearchSeller[],
+  ) => void;
+  patchProduct: (id: number, patch: Partial<IProduct>) => void;
+  getProductRequest: (id: number) => 'loading' | 'failed' | undefined;
+  setProductRequest: (id: number, status?: 'loading' | 'failed') => void;
+  getSecondaryVariants: (
+    productGroup: number,
+    mainVariantValue: number,
+  ) => IProductSecondaryVariantState | undefined;
+  setSecondaryVariants: (
+    productGroup: number,
+    mainVariantValue: number,
+    state: IProductSecondaryVariantState,
+  ) => void;
+  setHomeNewProducts: (
+    products: IProduct[],
+    sellers?: readonly IProductSearchSeller[],
+  ) => void;
+  setPendingFavorite: (id: number, selected?: boolean) => void;
+  setProductCounters: (values: {
+    c_cart_positions?: number;
+    c_wishlist?: number;
+  }) => void;
+  synchronizeProductCart: (products: readonly IProduct[]) => void;
+  reconcile: (init: IAppLoadCommon | null) => void;
+  reset: () => void;
+  clearSession: () => void;
+}
+
+export type OrionplaceProductsStore = ReturnType<
+  typeof createOrionplaceProductsStore
+>;
+
+const emptyUpdates = () =>
+  ({
+    products: {},
+    featured: {},
+  }) satisfies OrionplaceProductsState['updates'];
+
+/** Search responses list seller preorder permissions beside their products. */
+function withSearchSellers(
+  product: IProduct,
+  sellers: readonly IProductSearchSeller[],
+) {
+  return sellers.length
+    ? productWithSellerPermission(product, sellers)
+    : product;
+}
+
+function resolveProductInit(init: IAppLoadCommon | null): ProductsInit | null {
+  if (!init) {
+    return null;
+  }
+
+  return {
+    ...init,
+    products: resolveAppLoadProducts(init.products, init.sellers),
+    featured: resolveAppLoadProducts(init.featured, init.sellers),
+  };
+}
+
+/** One request-scoped product catalogue with customer-session updates. */
+export function createOrionplaceProductsStore(
+  init: IAppLoadCommon | null = null,
+) {
+  return createStore<OrionplaceProductsState>()((set, get) => ({
+    init: resolveProductInit(init),
+    updates: emptyUpdates(),
+    requests: {},
+    secondaryVariants: {},
+    homeNewProductIds: null,
+    pendingFavorites: {},
+    productCounters: {},
+
+    getProduct(id, collection = 'products') {
+      const state = get();
+      const base  =
+        collection === 'featured' ? state.init?.featured : state.init?.products;
+
+      return (
+        state.updates[collection][id] ?? base?.find((item) => item.id === id)
+      );
+    },
+
+    setProduct(product, collection = 'products', sellers = []) {
+      if (!get().init || !Number.isInteger(product.id) || product.id <= 0) {
+        return;
+      }
+
+      set((state) => ({
+        updates: {
+          ...state.updates,
+          [collection]: {
+            ...state.updates[collection],
+            [product.id]: withSearchSellers(product, sellers),
+          },
+        },
+      }));
+    },
+
+    patchProduct(id, patch) {
+      if (!Number.isInteger(id) || id <= 0) {
+        return;
+      }
+
+      set((state) => {
+        const updates           = { ...state.updates };
+        let changed             = false;
+        for (const collection of ['products', 'featured'] as const) {
+          const source  =
+            collection === 'featured'
+              ? state.init?.featured
+              : state.init?.products;
+          const product =
+            state.updates[collection][id] ??
+            source?.find((item) => item.id === id);
+          if (product) {
+            updates[collection] = {
+              ...state.updates[collection],
+              [id]: { ...product, ...patch },
+            };
+            changed             = true;
+          }
+        }
+
+        const secondaryVariants = Object.fromEntries(
+          Object.entries(state.secondaryVariants).map(([key, value]) => [
+            key,
+            value.data?.variants.some((entry) => entry.product.id === id)
+              ? {
+                  ...value,
+                  data: {
+                    ...value.data,
+                    variants: value.data.variants.map((entry) =>
+                      entry.product.id === id
+                        ? { ...entry, product: { ...entry.product, ...patch } }
+                        : entry,
+                    ),
+                  },
+                }
+              : value,
+          ]),
+        );
+
+        return changed ||
+          Object.values(state.secondaryVariants).some((value) =>
+            value.data?.variants.some((entry) => entry.product.id === id),
+          )
+          ? { updates, secondaryVariants }
+          : {};
+      });
+    },
+
+    getProductRequest(id) {
+      return get().requests[id];
+    },
+
+    setProductRequest(id, status) {
+      if (!Number.isInteger(id) || id <= 0) {
+        return;
+      }
+
+      set((state) => {
+        const requests = { ...state.requests };
+        if (status) {
+          requests[id] = status;
+        } else {
+          delete requests[id];
+        }
+        return { requests };
+      });
+    },
+
+    getSecondaryVariants(productGroup, mainVariantValue) {
+      return get().secondaryVariants[`${productGroup}:${mainVariantValue}`];
+    },
+
+    setSecondaryVariants(productGroup, mainVariantValue, state) {
+      if (
+        !get().init ||
+        !Number.isInteger(productGroup) ||
+        productGroup <= 0 ||
+        !Number.isInteger(mainVariantValue) ||
+        mainVariantValue <= 0
+      ) {
+        return;
+      }
+      set((current) => ({
+        secondaryVariants: {
+          ...current.secondaryVariants,
+          [`${productGroup}:${mainVariantValue}`]: state,
+        },
+      }));
+    },
+
+    setHomeNewProducts(products, sellers = []) {
+      if (!get().init) {
+        return;
+      }
+
+      set((current) => ({
+        homeNewProductIds: products.map((product) => product.id),
+        updates: {
+          ...current.updates,
+          products: {
+            ...current.updates.products,
+            ...Object.fromEntries(
+              products.map((product) => [
+                product.id,
+                withSearchSellers(product, sellers),
+              ]),
+            ),
+          },
+        },
+      }));
+    },
+
+    setPendingFavorite(id, selected) {
+      if (!Number.isInteger(id) || id <= 0) {
+        return;
+      }
+
+      set((state) => {
+        const pendingFavorites = { ...state.pendingFavorites };
+        if (selected === undefined) {
+          delete pendingFavorites[id];
+        } else {
+          pendingFavorites[id] = selected;
+        }
+
+        return { pendingFavorites };
+      });
+    },
+
+    setProductCounters(values) {
+      set((current) => ({
+        productCounters: {
+          ...current.productCounters,
+          ...values,
+        },
+      }));
+    },
+
+    synchronizeProductCart(products) {
+      const counts = new Map(
+        products.map((product) => [product.id, product.cart_counts ?? null]),
+      );
+      set((state) => {
+        const updates           = { ...state.updates };
+        for (const collection of ['products', 'featured'] as const) {
+          const cached        = new Map([
+            ...(collection === 'featured'
+              ? (state.init?.featured ?? [])
+              : (state.init?.products ?? [])
+            ).map((product) => [product.id, product] as const),
+            ...Object.values(state.updates[collection]).map(
+              (product) => [product.id, product] as const,
+            ),
+          ]);
+          updates[collection] = Object.fromEntries(
+            [...cached.values()].map((product) => [
+              product.id,
+              {
+                ...product,
+                cart_counts: counts.get(product.id) ?? null,
+              },
+            ]),
+          );
+        }
+        const secondaryVariants = Object.fromEntries(
+          Object.entries(state.secondaryVariants).map(([key, value]) => [
+            key,
+            value.data
+              ? {
+                  ...value,
+                  data: {
+                    ...value.data,
+                    variants: value.data.variants.map((variant) => ({
+                      ...variant,
+                      product: {
+                        ...variant.product,
+                        cart_counts: counts.get(variant.product.id) ?? null,
+                      },
+                    })),
+                  },
+                }
+              : value,
+          ]),
+        );
+
+        return { updates, secondaryVariants };
+      });
+    },
+
+    reconcile(next) {
+      set({ init: resolveProductInit(next) });
+    },
+
+    clearSession() {
+      const current           = get();
+      const clean             = (values: Record<number, IProduct>) =>
+        Object.fromEntries(
+          Object.entries(values).map(([id, product]) => [
+            id,
+            guestProduct(product),
+          ]),
+        );
+      const secondaryVariants = Object.fromEntries(
+        Object.entries(current.secondaryVariants).map(([key, state]) => [
+          key,
+          {
+            ...state,
+            ...(state.data
+              ? {
+                  data: {
+                    ...state.data,
+                    variants: state.data.variants.map((variant) => ({
+                      ...variant,
+                      product: guestProduct(variant.product),
+                    })),
+                  },
+                }
+              : {}),
+          },
+        ]),
+      );
+      set({
+        updates: {
+          products: clean(current.updates.products),
+          featured: clean(current.updates.featured),
+        },
+        secondaryVariants,
+        requests: {},
+        pendingFavorites: {},
+        productCounters: {},
+      });
+    },
+
+    reset() {
+      set({
+        init: null,
+        updates: emptyUpdates(),
+        requests: {},
+        secondaryVariants: {},
+        homeNewProductIds: null,
+        pendingFavorites: {},
+        productCounters: {},
+      });
+    },
+  }));
+}

package/templates/stores/orionplaceScope.ts

@@ -0,0 +1,104 @@
+import type { AppLoadFailure, AppLoadResult } from '@/interfaces/orionplace';
+import {
+  createOrionplaceStore,
+  initialSnapshot,
+  selectInit,
+  selectIsAuthenticated,
+  type OrionplaceState,
+  type OrionplaceStore,
+} from '@/stores/orionplace';
+import {
+  createOrionplaceBrowseStore,
+  type OrionplaceBrowseStore,
+} from '@/stores/orionplaceBrowse';
+import {
+  createOrionplaceCatalogStore,
+  type OrionplaceCatalogStore,
+} from '@/stores/orionplaceCatalog';
+import {
+  createOrionplaceProductsStore,
+  type OrionplaceProductsStore,
+} from '@/stores/orionplaceProducts';
+import {
+  createOrionplaceSelectionsStore,
+  type OrionplaceSelectionsStore,
+} from '@/stores/orionplaceSelections';
+
+export interface OrionplaceStores {
+  store: OrionplaceStore;
+  selections: OrionplaceSelectionsStore;
+  products: OrionplaceProductsStore;
+  catalog: OrionplaceCatalogStore;
+  browse: OrionplaceBrowseStore;
+  connect: () => () => void;
+  dispose: () => void;
+}
+
+type OrionplaceDomainStores = Pick<
+  OrionplaceStores,
+  'selections' | 'products' | 'catalog' | 'browse'
+>;
+
+function synchronizeDomainStores(
+  state: OrionplaceState,
+  stores: OrionplaceDomainStores,
+) {
+  if (state.status === 'success') {
+    const init = selectInit(state);
+
+    stores.selections.getState().reconcile(init);
+    stores.products.getState().reconcile(init);
+    stores.catalog.getState().reconcile(init);
+    stores.browse.getState().reconcile(init);
+    return;
+  }
+
+  if (state.status === 'idle' || state.status === 'error') {
+    stores.selections.getState().reset();
+    stores.products.getState().reset();
+    stores.catalog.getState().reset();
+    stores.browse.getState().reset();
+  }
+}
+
+/** Creates the coordinated stores before any child can start Application Load. */
+export function createOrionplaceStores(
+  result: AppLoadResult | null = null,
+  failure: AppLoadFailure | null = null,
+  locale = '',
+): OrionplaceStores {
+  const init    = failure ? null : (result?.response.page_data.init ?? null);
+  const store   = createOrionplaceStore(initialSnapshot(result, failure));
+  const domains = {
+    selections: createOrionplaceSelectionsStore(init, locale),
+    products: createOrionplaceProductsStore(init),
+    catalog: createOrionplaceCatalogStore(init),
+    browse: createOrionplaceBrowseStore(init),
+  };
+  let unsubscribe: (() => void) | undefined;
+
+  function dispose() {
+    unsubscribe?.();
+    unsubscribe = undefined;
+  }
+
+  function connect() {
+    unsubscribe ??= store.subscribe((state, previous) => {
+      synchronizeDomainStores(state, domains);
+      if (selectIsAuthenticated(previous) && !selectIsAuthenticated(state)) {
+        domains.products.getState().clearSession();
+      }
+    });
+
+    return dispose;
+  }
+
+  connect();
+
+  return {
+    store,
+    ...domains,
+    connect,
+    dispose,
+  };
+}