orionplace-react 0.1.0

package/templates/app/api/[...orionplace]/route.ts

@@ -0,0 +1,14 @@
+// Every browser request to /api/... reaches your personal marketplace API here.
+import { forwardMarketplace } from '__ORIONPLACE_RUNTIME__';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+function handler(request: Request): Promise<Response> {
+  return forwardMarketplace(request, { mimicFrontDomain: process.env.MIMIC_FRONT_DOMAIN ?? '' });
+}
+
+export {
+  handler as GET, handler as HEAD, handler as OPTIONS, handler as POST,
+  handler as PUT, handler as PATCH, handler as DELETE,
+};

package/templates/app/globals.css

@@ -0,0 +1,10 @@
+:root {
+  color-scheme: light;
+}
+
+body {
+  margin: 0;
+  background: #f5f6f8;
+  color: #202b38;
+  font-family: system-ui, sans-serif;
+}

package/templates/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import { OrionplaceProvider } from '../providers/OrionplaceProvider';
+import { getOrionplaceAppLoad } from '../lib/orionplace/appLoadServer';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Marketplace · AppLoad debug',
+  description: 'Initialization state of your Orionplace marketplace connection.',
+};
+
+// Initialization depends on the request domain and session, so pages are dynamic.
+export const dynamic = 'force-dynamic';
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  // Bootstrap precedes page rendering. Failures stay in the store for the interface to handle.
+  const { result, failure } = await getOrionplaceAppLoad();
+  return (
+    <html lang="en">
+      <body>
+        <OrionplaceProvider result={result} failure={failure}>{children}</OrionplaceProvider>
+      </body>
+    </html>
+  );
+}

package/templates/app/page.module.css

@@ -0,0 +1,133 @@
+.bootstrap {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 48px 24px;
+}
+
+.bootstrap h1,
+.bootstrap h2 {
+  font-weight: 400;
+  line-height: 1.25;
+}
+
+.bootstrap h1 {
+  margin: 12px 0;
+  font-size: 32px;
+}
+
+.bootstrap h2 {
+  margin: 0;
+  font-size: 21px;
+}
+
+.bootstrap p {
+  line-height: 1.7;
+}
+
+.eyebrow {
+  color: #596777;
+  font-size: 14px;
+}
+
+.bootstrap section {
+  margin-top: 28px;
+  padding: 24px;
+  border: 1px solid #d9dfe6;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.sectionHeading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.state {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 4px;
+  background: #eaf0f5;
+}
+
+.state[data-state='success'] {
+  background: #e6f2ec;
+  color: #245c40;
+}
+
+.state[data-state='error'] {
+  background: #fbeceb;
+  color: #8c302a;
+}
+
+.bootstrap button {
+  padding: 9px 14px;
+  border: 1px solid #bfc9d4;
+  border-radius: 5px;
+  background: #f5f6f8;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.bootstrap button:disabled {
+  opacity: .6;
+  cursor: wait;
+}
+
+.bootstrap button:hover:not(:disabled) {
+  background: #eaf0f5;
+}
+
+.bootstrap a {
+  color: #245786;
+  text-underline-offset: 3px;
+}
+
+.bootstrap :focus-visible {
+  outline: 2px solid #245786;
+  outline-offset: 4px;
+}
+
+.bootstrap code {
+  font-size: .9em;
+  overflow-wrap: anywhere;
+}
+
+.bootstrap dl {
+  margin-bottom: 0;
+}
+
+.bootstrap dl div {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) 2fr;
+  gap: 12px;
+  padding: 12px 0;
+  border-top: 1px solid #e8ecf0;
+}
+
+.bootstrap dt {
+  color: #596777;
+}
+
+.bootstrap dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 520px) {
+  .bootstrap {
+    padding: 24px 16px;
+  }
+
+  .bootstrap section {
+    padding: 18px;
+  }
+
+  .bootstrap dl div {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+}

package/templates/app/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useOrionplace } from '../providers/OrionplaceProvider';
+import { useOrionplaceAppLoad } from '../hooks/useOrionplaceAppLoad';
+import { selectData, selectInit } from '../stores/orionplace';
+import type { AppLoadFailure, AppLoadStatus, IAppLoadPathsRecord } from '../interfaces/orionplace';
+import styles from './page.module.css';
+
+const STATE_LABELS: Record<AppLoadStatus, string> = {
+  idle: 'Not started',
+  pending: 'Loading',
+  success: 'Loaded',
+  error: 'Failed',
+};
+
+const countEndpoints = (routes?: IAppLoadPathsRecord) =>
+  Object.values(routes?.paths ?? {}).reduce((total, section) => total + Object.keys(section).length, 0);
+
+function failureText(failure: AppLoadFailure) {
+  if (failure.kind === 'validation') return 'The backend returned form errors.';
+  if (failure.kind === 'invalid-response') return 'The response is missing required initialization data.';
+  if (failure.kind === 'network') return 'The API request did not complete.';
+  return 'The API returned an HTTP error.';
+}
+
+export default function Home() {
+  const { result, status, failure, refresh } = useOrionplaceAppLoad();
+  const page                                 = useOrionplace(selectData);
+  const init                                 = useOrionplace(selectInit);
+
+  return (
+    <main className={styles.bootstrap}>
+      <header>
+        <p className={styles.eyebrow}>Orionplace · Next.js starter</p>
+        <h1>Your marketplace connection</h1>
+        <p>This first page checks initialization through <code>POST /api/appload</code>.
+          Replace it with your storefront when the connection is ready.</p>
+      </header>
+      <section aria-labelledby="status-title" aria-busy={status === 'pending'}>
+        <div className={styles.sectionHeading}>
+          <h2 id="status-title">AppLoad state</h2>
+          <button type="button" disabled={status === 'pending'} onClick={() => void refresh()}>Reload AppLoad</button>
+        </div>
+        <p role="status" aria-live="polite" className={styles.state} data-state={status}>{STATE_LABELS[status]}</p>
+        {status === 'pending' && <p>Loading initialization data and available API endpoints…</p>}
+        {status !== 'pending' && failure && (
+          <div role="alert">
+            <p>AppLoad could not initialize. {failureText(failure)}</p>
+            {failure.httpStatus ? <p>HTTP status: <code>{failure.httpStatus}</code></p> : null}
+            <p>Check your backend, frontend domain and <code>MIMIC_FRONT_DOMAIN</code> using
+              {' '}<code>npx orionplace-react help</code>. Setup instructions are in <code>orionplace/README.md</code>.</p>
+          </div>
+        )}
+        {status !== 'pending' && !failure && result && init && (
+          <dl>
+            <div><dt>HTTP status</dt><dd>{result.httpStatus}</dd></div>
+            <div><dt>Loaded at (UTC)</dt><dd><time dateTime={result.loadedAt}>{result.loadedAt}</time></dd></div>
+            <div><dt>Session</dt><dd>{init.is_authenticated ? 'Signed in' : 'Guest'}</dd></div>
+            <div><dt>Languages</dt><dd>{Object.keys(init.locale).length}</dd></div>
+            <div><dt>Currencies</dt><dd>{Object.keys(init.currencies).length}</dd></div>
+            <div><dt>Public endpoints</dt><dd>{countEndpoints(page?.unauth)}</dd></div>
+            <div><dt>Authenticated endpoints</dt><dd>{countEndpoints(page?.auth)}</dd></div>
+            <div><dt>Catalog roots</dt><dd>{init.catalog?.length ?? 'Not included'}</dd></div>
+            <div><dt>Initial products</dt><dd>{init.products?.length ?? 'Not included'}</dd></div>
+            <div><dt>Tariffs</dt><dd>{init.tariffs?.data.length ?? 'Not included'}</dd></div>
+          </dl>
+        )}
+      </section>
+      <section aria-labelledby="next-title">
+        <h2 id="next-title">Build from typed initialization data</h2>
+        <p>The root layout awaits <code>lib/orionplace/appLoadServer.ts</code> before this page renders,
+          and passes the snapshot to <code>providers/OrionplaceProvider.tsx</code>. Read it in any client
+          component with <code>useOrionplace()</code>, or await the same loader in a server component.
+          The response and its nested interfaces are in <code>interfaces/orionplace/</code>.</p>
+        <p>This debug page shows section counts. Account details, keys and backend diagnostics are not displayed.</p>
+        <a href="https://orionmarket.place/sandbox">Read the marketplace documentation</a>
+      </section>
+    </main>
+  );
+}

package/templates/hooks/useOrionplaceAppLoad.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useOrionplace, useOrionplaceStore } from '../providers/OrionplaceProvider';
+import { requestBrowserAppLoad } from '../lib/orionplace/appLoadClient';
+import { selectFailure, selectIsReady, selectResult, selectStatus } from '../stores/orionplace';
+import type { AppLoadFailure, AppLoadResult, AppLoadStatus } from '../interfaces/orionplace';
+
+export interface OrionplaceAppLoad {
+  result: AppLoadResult | null;
+  status: AppLoadStatus;
+  failure: AppLoadFailure | null;
+  isReady: boolean;
+  initialize: () => Promise<void>;
+  refresh: () => Promise<void>;
+  reset: () => void;
+}
+
+/**
+ * Explicit browser actions. Calling this hook does not start a request: the
+ * server render initializes the marketplace and hydration reuses that snapshot.
+ * After a confirmed login or logout, call reset and then refresh.
+ */
+export function useOrionplaceAppLoad(): OrionplaceAppLoad {
+  const store      = useOrionplaceStore();
+  const result     = useOrionplace(selectResult);
+  const status     = useOrionplace(selectStatus);
+  const failure    = useOrionplace(selectFailure);
+  const isReady    = useOrionplace(selectIsReady);
+  const initialize = useCallback(() => store.getState().load(requestBrowserAppLoad), [store]);
+  const refresh    = useCallback(() => store.getState().load(requestBrowserAppLoad, true), [store]);
+  const reset      = useCallback(() => store.getState().reset(), [store]);
+  return { result, status, failure, isReady, initialize, refresh, reset };
+}

package/templates/interfaces/orionplace/apiBase/TMethod.ts

@@ -0,0 +1 @@
+export type TMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';

package/templates/interfaces/orionplace/appBase/IAppLoad.ts

@@ -0,0 +1,15 @@
+import type { IAppLoadCommon } from './IAppLoadCommon';
+import type { IApploadUserProfile } from './IApploadUserProfile';
+import type { IAppLoadPathsRecord } from './appLoadCommon/IAppLoadCommonPath';
+
+export interface IAppLoad {
+	init: IAppLoadCommon;
+	unauth: IAppLoadPathsRecord;
+	user?: IApploadUserProfile;
+	auth?: IAppLoadPathsRecord;
+	view_key?: string;
+	spent_total?: number;
+	spent_init?: number;
+	unauth_spent?: number;
+	auth_spent?: number;
+}

package/templates/interfaces/orionplace/appBase/IAppLoadCommon.ts

@@ -0,0 +1,54 @@
+import type { IAppLoadCommonLocale } from './appLoadCommon/IAppLoadCommonLocale';
+import type { IAppLoadCommonCurrency } from './appLoadCommon/IAppLoadCommonCurrency';
+import type { IAppLoadCommonUnit } from './appLoadCommon/IAppLoadCommonUnit';
+import type { IAppLoadCommonLogos } from './appLoadCommon/IAppLoadCommonLogos';
+import type { IGeoCoordinates } from '../shared/IGeoCoordinates';
+import type { IAppLoadCommonSeo } from './appLoadCommon/IAppLoadCommonSEO';
+import type { IAppLoadCommonSocial } from './appLoadCommon/IAppLoadCommonSocial';
+import type { IAppLoadCommonVisualSettings } from './appLoadCommon/IAppLoadCommonVisualSettings';
+import type { IAppLoadCommonEvents } from './appLoadCommon/IAppLoadCommonEvents';
+import type { IAppLoadCommonBanner } from './appLoadCommon/IAppLoadCommonBanner';
+import type { ICategory } from '../category/ICategory';
+import type { IProduct } from '../products/IProduct';
+import type { IAppLoadCommonTariff } from './appLoadCommon/IAppLoadCommonTariff';
+import type { IAppLoadCommonWalletValue } from './appLoadCommon/IAppLoadCommonWalletValue';
+import type { IAppLoadCommonVariables } from './appLoadCommon/IAppLoadCommonVariables';
+import type { IAppLoadCommonContact } from './appLoadCommon/IAppLoadCommonContact';
+
+export interface IAppLoadCommon {
+	locale: Record<string, IAppLoadCommonLocale>;
+	currencies: Record<string, IAppLoadCommonCurrency>;
+	weights: Record<string, IAppLoadCommonUnit>;
+	lengths: Record<string, IAppLoadCommonUnit>;
+	geo_location_enabled: boolean;
+	is_authenticated: boolean;
+	wallet?: Record<string, IAppLoadCommonWalletValue>;
+	logos: IAppLoadCommonLogos;
+	public_keys: Record<string, string>;
+	default_map: IGeoCoordinates;
+	seo?: IAppLoadCommonSeo[];
+	sm?: IAppLoadCommonSocial[];
+	variables?: IAppLoadCommonVariables;
+	contact?: IAppLoadCommonContact;
+	visual_settings?: IAppLoadCommonVisualSettings;
+	events?: IAppLoadCommonEvents[];
+	main_banner?: Record<string, IAppLoadCommonBanner[]>;
+	catalog?: ICategory[];
+	products?: IProduct[];
+	featured?: IProduct[];
+	search_hints?: Record<string, string>[];
+	tariffs?: IAppLoadCommonTariff;
+	stock?: { mode: 'bar' | 'qr'; simple: boolean };
+	order?: { order_auto_register_with_carrier: boolean };
+	promo?: { create_benefits: boolean };
+	product?: { common_properties: boolean };
+	app?: { backend: boolean };
+	domains?: IAppLoadDomain[];
+}
+
+export interface IAppLoadDomain {
+	id: number;
+	domain_group: number | null;
+	domain: string;
+	is_active: boolean;
+}

package/templates/interfaces/orionplace/appBase/IApploadUserProfile.ts

@@ -0,0 +1,13 @@
+export interface IApploadUserProfile {
+	avatar: string | null;
+	first_name: string;
+	last_name: string;
+	email: string;
+	last_login: string | null;
+	date_joined: string;
+	phone: string;
+	password: boolean;
+	dob: string | null;
+	newsletter_active: boolean;
+	id: number;
+}

package/templates/interfaces/orionplace/appBase/IForm.ts

@@ -0,0 +1,21 @@
+import type { JsonValue } from '../transport';
+
+export type IFormFields = { [name: string]: IFormField | IFormFields };
+export interface IFormField {
+  form_class: string;
+  label: string;
+  required: boolean;
+  input_type: string;
+  attrs: Record<string, JsonValue>;
+  options?: { key: JsonValue; value: JsonValue }[];
+  sub_form?: IFormFields;
+  path?: string;
+}
+export interface IForm {
+  name: string;
+  form_type: 'form' | 'filters' | 'step';
+  tr?: string[];
+  form_data: IFormFields;
+  sub_filters_dict?: Record<string, IFormFields>;
+  filters_dict?: Record<string, JsonValue>;
+}

package/templates/interfaces/orionplace/appBase/ISEO.ts

@@ -0,0 +1,21 @@
+export interface ISeoOg {
+	id?: number;
+	cat_id?: number;
+	og_property_name: string;
+	locale: Record<string, ISeoOgLocale>;
+}
+
+export interface ISeoOgLocale {
+	og_content_value?: string;
+}
+
+export interface ISeoTwitter {
+	id?: number;
+	cat_id?: number;
+	extra_meta_name: string;
+	locale: Record<string, ITwitterLocale>;
+}
+
+export interface ITwitterLocale {
+	extra_meta_content?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonBanner.ts

@@ -0,0 +1,11 @@
+export interface IAppLoadCommonBanner {
+	id: number;
+	target_locale: string;
+	category?: number;
+	images_desktop: string[];
+	images_wide: string[];
+	images_tablet: string[];
+	images_mobile: string[];
+}
+
+export type TBannerFormats = 'desktop' | 'wide' | 'tablet' | 'mobile';

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts

@@ -0,0 +1,8 @@
+export interface IAppLoadCommonContact {
+	company_name: string;
+	company_legal_name: string;
+	company_contact_phone: string;
+	company_contact_address: string;
+	company_tax_id: string;
+	company_organization_id: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonCurrency.ts

@@ -0,0 +1,15 @@
+export interface IAppLoadCommonCurrency {
+	id: number;
+	currency_code: string;
+	symbol_left: string;
+	symbol_right: string;
+	value?: number;
+	locales: Record<string, IAppLoadCommonCurrencyLocale>;
+	decimal_place?: number;
+	allowed_select: boolean;
+}
+
+export interface IAppLoadCommonCurrencyLocale {
+	id?: number;
+	currency_title?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents.ts

@@ -0,0 +1,18 @@
+export interface IAppLoadCommonEvents {
+	id: number;
+	locale: string;
+	image: string | null;
+	image_wide: string | null;
+	image_tablet: string | null;
+	image_account: string | null;
+	image_mobile: string | null;
+	promo: boolean;
+	is_layout?: boolean;
+	is_modal?: boolean;
+	model_delay_sec?: number;
+	modal_display_count?: number;
+	modal_display_count_days?: number;
+}
+
+export type TEventsFormat =
+	'desktop' | 'wide' | 'tablet' | 'account' | 'mobile';

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLocale.ts

@@ -0,0 +1,14 @@
+export interface IAppLoadCommonLocale {
+	code?: string;
+	id?: number;
+	currency?: number;
+	weight?: number;
+	length?: number;
+	flag_img?: string;
+	human_name?: string;
+	locale?: Record<string, IAppLoadCommonLocaleName>;
+}
+
+export interface IAppLoadCommonLocaleName {
+	name?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLogos.ts

@@ -0,0 +1,6 @@
+export interface IAppLoadCommonLogos {
+	big: string | null;
+	medium: string | null;
+	small: string | null;
+	ico: string | null;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonPath.ts

@@ -0,0 +1,22 @@
+import type { TMethod } from '../../apiBase/TMethod';
+import type { IForm } from '../IForm';
+
+export interface IAppLoadPathsRecord {
+	paths: IAppLoadPathObject;
+}
+
+export interface IAppLoadPathObject {
+	[key: string]: {
+		[key: string]: IAppLoadPath;
+	};
+}
+
+export interface IAppLoadPath {
+	url_name: string;
+	target: string;
+	methods: TMethod[];
+	ready?: string;
+	summary?: string;
+	description?: string;
+	forms: IForm[];
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonSEO.ts

@@ -0,0 +1,13 @@
+import type { ISeoOg, ISeoTwitter } from '../ISEO';
+
+export interface IAppLoadCommonSeo {
+	locale: Record<string, IAppLoadCommonSeoLocale>;
+	og: ISeoOg[];
+	twitter: ISeoTwitter[];
+}
+
+export interface IAppLoadCommonSeoLocale {
+	page_title?: string;
+	meta_description?: string;
+	meta_keywords?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonSocial.ts

@@ -0,0 +1,15 @@
+export interface IAppLoadCommonSocial {
+	id: number;
+	link: string;
+	image_position: string;
+	sm_image: string;
+	sm_image_width: number;
+	sm_image_height: number;
+	locale: Record<string, IAppLoadCommonSocialLocale>;
+}
+
+export interface IAppLoadCommonSocialLocale {
+	id?: number;
+	caption?: string;
+	title?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonTariff.ts

@@ -0,0 +1,7 @@
+import type { ISubscribeTariff } from '../../subscribeTariff/ISubscribeTariff';
+import type { ISubscribe } from '../../subscribes/ISubscribe';
+
+export interface IAppLoadCommonTariff {
+	data: ISubscribeTariff[];
+	subscriptions: ISubscribe[];
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonUnit.ts

@@ -0,0 +1,12 @@
+export interface IAppLoadCommonUnit {
+	id: number;
+	unit: string;
+	value: number | string;
+	locales: Record<string, IAppLoadCommonUnitLocale>;
+}
+
+export interface IAppLoadCommonUnitLocale {
+	id?: number;
+	title?: string;
+	unit?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonVariables.ts

@@ -0,0 +1,7 @@
+export interface IAppLoadCommonVariables {
+	default_feedback_status?: number;
+	c_cart_positions?: number;
+	c_wishlist?: number;
+	default_blog_comment_status?: number;
+	allow_preorder?: boolean;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonVisualSettings.ts

@@ -0,0 +1,11 @@
+export interface IAppLoadCommonVisualSettings {
+	menu_image: boolean;
+	catalog_menu_image: boolean;
+	mobile_show_arrows: boolean;
+	show_filter_counters: boolean;
+	single_seller_mode: boolean;
+	blog_view_type?: number;
+	front_categories_count?: number;
+	front_categories_ordering?: string;
+	front_categories_ordering_direction?: string;
+}

package/templates/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonWalletValue.ts

@@ -0,0 +1,3 @@
+export interface IAppLoadCommonWalletValue {
+	transform_value: number;
+}

package/templates/interfaces/orionplace/category/ICategory.ts

@@ -0,0 +1,40 @@
+import type { ISeoOg, ISeoTwitter } from '../appBase/ISEO';
+
+export interface ICategory {
+	id: number;
+	ordering?: number;
+	c_views?: number;
+	search_target?: boolean;
+	depth: number;
+	numchild: number;
+	logo_image?: string | null;
+	logo_image_id?: number | null;
+	menu_image?: string | null;
+	menu_image_id?: number | null;
+	separate_menu: boolean;
+	is_public: boolean;
+	c_images: number;
+	product_rep_1_id?: number | null;
+	product_rep_2_id?: number | null;
+	og?: ISeoOg[] | null;
+	twitter?: ISeoTwitter[] | null;
+	weight_filter?: boolean;
+	category_image_bg: string;
+	use_localized_banner: boolean;
+	locale: Record<string, ICategoryLocale>;
+	path_to_top?: number[];
+	childs?: ICategory[];
+}
+
+export interface ICategoryLocale {
+	id?: number;
+	cg_name?: string;
+	cg_description?: string;
+	cg_title?: string;
+	cg_slug?: string;
+	meta_description?: string;
+	meta_keywords?: string;
+	link?: string;
+	banner_image?: string | null;
+	banner_image_id?: number | null;
+}