orionplace-nuxt 0.1.2 → 0.2.0

package/src/setup.mjs

@@ -6,7 +6,7 @@ import { backendUrl, frontendDomain } from './validation.mjs';
 import { projectReadme } from './project-readme.mjs';
 
 const metadata = JSON.parse(await readFile(new URL('../package.json', import.meta.url), 'utf8'));
-const hash = text => createHash('sha256').update(text).digest('hex');
+const hash     = text => createHash('sha256').update(text).digest('hex');
 async function read(path) {
   try { return await readFile(path, 'utf8'); }
   catch (error) { if (error.code === 'ENOENT') return null; throw error; }
@@ -14,7 +14,7 @@ async function read(path) {
 async function safePath(root, name) {
   const target = resolve(root, name);
   if (relative(root, target).startsWith('..') || target === root) throw new Error('Invalid generated path');
-  let cursor = root;
+  let cursor   = root;
   for (const piece of relative(root, target).split(sep)) {
     cursor = resolve(cursor, piece);
     try { if ((await lstat(cursor)).isSymbolicLink()) throw new Error(`Refusing symbolic link: ${name}`); }
@@ -24,10 +24,12 @@ async function safePath(root, name) {
 }
 function configureNuxt(source) {
   try {
-    const module = parseModule(source);
-    const options = module.exports.default.$type === 'function-call'
+    const module      = parseModule(source);
+    const options     = module.exports.default.$type === 'function-call'
       ? module.exports.default.$args[0] : module.exports.default;
     if (!options || options.$type !== 'object') throw new Error('Dynamic configuration');
+    // Pin the existing Nuxt fallback without changing a customer's chosen date.
+    if (options.compatibilityDate === undefined) options.compatibilityDate = '2025-07-15';
     if (options.nitro?.preset && options.nitro.preset !== 'node-server') throw new Error('Unsupported Nitro preset');
     if (options.srcDir || options.serverDir || options.extends) throw new Error('Custom directories or layers');
     for (const route of ['/api', '/api/**', '/api/*']) {
@@ -35,6 +37,11 @@ function configureNuxt(source) {
     }
     if (options.vite?.server?.proxy?.['/api']) throw new Error('Conflicting Vite proxy');
     options.modules ||= [];
+    if (!Array.from(options.modules).some(item => item === '@pinia/nuxt' || (Array.isArray(item) && item[0] === '@pinia/nuxt'))) {
+      options.modules.unshift('@pinia/nuxt');
+    }
+    if (options.pages === false) throw new Error('Route middleware requires Nuxt pages');
+    options.pages     = true;
     if (!Array.from(options.modules).some(item => item === 'orionplace-nuxt' || (Array.isArray(item) && item[0] === 'orionplace-nuxt'))) {
       options.modules.push('orionplace-nuxt');
     }
@@ -44,8 +51,8 @@ function configureNuxt(source) {
   }
 }
 function updateEnvironment(source, domain) {
-  const lines = (source || '').split(/\r?\n/);
-  let updated = false;
+  const lines  = (source || '').split(/\r?\n/);
+  let updated  = false;
   const result = lines.flatMap(line => {
     if (!/^\s*(?:export\s+)?MIMIC_FRONT_DOMAIN\s*=/.test(line)) return [line];
     if (updated) return [];
@@ -57,27 +64,36 @@ function updateEnvironment(source, domain) {
 }
 
 export async function setupProject({ cwd = process.cwd(), action = 'set', field, value, dryRun = false } = {}) {
-  if (!['set', 'add', 'remove'].includes(action) || (action !== 'set' && field !== 'frontend')) {
+  if (!['set', 'add', 'remove', 'update'].includes(action) ||
+      (['add', 'remove'].includes(action) && field !== 'frontend') || (action === 'update' && field)) {
     throw new Error('Use set backend, add frontend, remove frontend, set mimic, or set frontend.');
   }
-  const root = resolve(cwd);
-  const setting = field === 'backend' ? backendUrl(value) : ['frontend', 'mimic'].includes(field) ? frontendDomain(value) : null;
+  const root                                  = resolve(cwd);
+  const setting                               = field === 'backend' ? backendUrl(value) : ['frontend', 'mimic'].includes(field) ? frontendDomain(value) : null;
   if (field && !setting) throw new Error('Choose backend, frontend, or mimic.');
-  const names = ['package.json', 'nuxt.config.ts', 'nuxt.config.js', 'nuxt.config.mjs', 'orionplace/settings.json', 'orionplace/.generated.json', '.env', '.gitignore'];
-  const current = {};
+  const names                                 = ['package.json', 'nuxt.config.ts', 'nuxt.config.js', 'nuxt.config.mjs', 'orionplace/settings.json', 'orionplace/.generated.json', '.env', '.gitignore'];
+  const current                               = {};
   for (const name of names) current[name] = await read(await safePath(root, name));
-  const pkg = current['package.json'] ? JSON.parse(current['package.json']) : { name: 'orionplace-storefront', private: true, type: 'module' };
-  const dependencies = { ...pkg.devDependencies, ...pkg.dependencies };
+  const pkg                                   = current['package.json'] ? JSON.parse(current['package.json']) : { name: 'orionplace-storefront', private: true, type: 'module' };
+  const dependencies                          = { ...pkg.devDependencies, ...pkg.dependencies };
+  for (const name of ['tailwindcss', '@tailwindcss/vite']) {
+    if (dependencies[name] && !/^(?:[~^]|>=)?4(?:\.|$)/.test(dependencies[name])) {
+      throw new Error(`Orionplace components require ${name} 4. Upgrade the existing dependency before setup. No files were changed.`);
+    }
+  }
+  if (action === 'update' && (!dependencies.nuxt || !current['orionplace/settings.json'] || !current['orionplace/.generated.json'])) {
+    throw new Error('Update requires an initialized Orionplace Nuxt project. Run init first.');
+  }
   if (!dependencies.nuxt && ['next', '@sveltejs/kit'].some(name => dependencies[name])) throw new Error('This package sets up Nuxt projects only.');
   if (dependencies.nuxt && !/^(?:[~^]|>=)?4(?:\.|$)/.test(dependencies.nuxt)) {
     throw new Error('This release supports Nuxt 4. Upgrade your Nuxt dependency before setup.');
   }
-  const configs = ['nuxt.config.ts', 'nuxt.config.js', 'nuxt.config.mjs'].filter(name => current[name] !== null);
+  const configs                               = ['nuxt.config.ts', 'nuxt.config.js', 'nuxt.config.mjs'].filter(name => current[name] !== null);
   if (configs.length > 1) throw new Error('Multiple Nuxt configuration files found; keep one root config.');
-  const configName = configs[0] || 'nuxt.config.ts';
-  const config = configureNuxt(current[configName] || 'export default defineNuxtConfig({ modules: [] });\n');
+  const configName                            = configs[0] || 'nuxt.config.ts';
+  const config                                = configureNuxt(current[configName] || 'export default defineNuxtConfig({ modules: [] });\n');
   for (const directory of ['server/api', 'server/routes/api']) {
-    const path = await safePath(root, directory);
+    const path  = await safePath(root, directory);
     let entries = [];
     try { entries = await readdir(path); }
     catch (error) { if (error.code !== 'ENOENT') throw error; }
@@ -85,17 +101,17 @@ export async function setupProject({ cwd = process.cwd(), action = 'set', field,
       throw new Error(`Existing API catch-all in ${directory}. Resolve this route conflict first.`);
     }
   }
-  const settings = current['orionplace/settings.json'] ? JSON.parse(current['orionplace/settings.json']) : {};
-  const previous = current['orionplace/.generated.json'] ? JSON.parse(current['orionplace/.generated.json']) : {};
+  const settings                              = current['orionplace/settings.json'] ? JSON.parse(current['orionplace/settings.json']) : {};
+  const previous                              = current['orionplace/.generated.json'] ? JSON.parse(current['orionplace/.generated.json']) : {};
   if (settings.backend) settings.backend = backendUrl(settings.backend);
   if (settings.frontend) settings.frontend = frontendDomain(settings.frontend);
-  const oldFrontend = settings.frontend;
+  const oldFrontend                           = settings.frontend;
   // Migrate the initial single-domain format, including its previously generated mappings.
-  const legacyDomains = Object.keys(previous)
+  const legacyDomains                         = Object.keys(previous)
     .map(name => /^sitemaps\/([^/]+)\.cfg$/.exec(name)?.[1]).filter(Boolean);
-  const frontends = settings.frontends ?? [settings.frontend, ...legacyDomains].filter(Boolean);
+  const frontends                             = settings.frontends ?? [settings.frontend, ...legacyDomains].filter(Boolean);
   if (!Array.isArray(frontends)) throw new Error('settings.frontends must be an array of domain names.');
-  settings.frontends = [...new Set(frontends.map(frontendDomain))];
+  settings.frontends                          = [...new Set(frontends.map(frontendDomain))];
   if (settings.frontend && !settings.frontends.includes(settings.frontend)) settings.frontends.unshift(settings.frontend);
   if (field === 'backend') settings.backend = setting;
   if (field === 'mimic') {
@@ -115,13 +131,13 @@ export async function setupProject({ cwd = process.cwd(), action = 'set', field,
       if (action === 'set' || !settings.frontend) settings.frontend = setting;
     }
   }
-  settings.frontend ||= settings.frontends[0];
+  settings.frontend                         ||= settings.frontends[0];
   if (!settings.frontend) delete settings.frontend;
-  const manifest = { ...previous };
-  const changes = new Map();
-  const preserved = [];
+  const manifest                              = { ...previous };
+  const changes                               = new Map();
+  const preserved                             = [];
   async function plan(name, content, { managed = false, preserve = false } = {}) {
-    const path = await safePath(root, name);
+    const path     = await safePath(root, name);
     const existing = await read(path);
     if (managed && existing !== null && existing !== content && previous[name] !== hash(existing)) {
       if (preserve && previous[name]) { preserved.push(name); return; }
@@ -140,38 +156,71 @@ export async function setupProject({ cwd = process.cwd(), action = 'set', field,
   }
   // All checks and content generation happen before the first write.
   await plan(configName, config);
-  const isNewNuxt = !dependencies.nuxt;
-  pkg.scripts ||= {};
-  pkg.scripts.dev ||= 'nuxt dev';
-  pkg.scripts.build ||= 'nuxt build';
-  pkg.scripts.preview ||= 'nuxt preview';
-  pkg.scripts['orionplace:backend'] ||= 'orionplace-nuxt set backend';
-  pkg.scripts['orionplace:frontend'] ||= 'orionplace-nuxt set frontend';
-  pkg.scripts['orionplace:add-frontend'] ||= 'orionplace-nuxt add frontend';
+  const isNewNuxt                             = !dependencies.nuxt;
+  pkg.scripts                               ||= {};
+  pkg.scripts.dev                           ||= 'nuxt dev';
+  pkg.scripts.build                         ||= 'nuxt build';
+  pkg.scripts.preview                       ||= 'nuxt preview';
+  pkg.scripts['orionplace:backend']         ||= 'orionplace-nuxt set backend';
+  pkg.scripts['orionplace:frontend']        ||= 'orionplace-nuxt set frontend';
+  pkg.scripts['orionplace:add-frontend']    ||= 'orionplace-nuxt add frontend';
   pkg.scripts['orionplace:remove-frontend'] ||= 'orionplace-nuxt remove frontend';
-  pkg.scripts['orionplace:mimic'] ||= 'orionplace-nuxt set mimic';
-  pkg.scripts['orionplace:help'] ||= 'orionplace-nuxt help';
-  pkg.dependencies ||= {};
-  pkg.dependencies['orionplace-nuxt'] ||= dependencies['orionplace-nuxt'] || `^${metadata.version}`;
+  pkg.scripts['orionplace:mimic']           ||= 'orionplace-nuxt set mimic';
+  pkg.scripts['orionplace:help']            ||= 'orionplace-nuxt help';
+  pkg.scripts['orionplace:update']          ||= 'orionplace-nuxt update';
+  pkg.dependencies                          ||= {};
+  pkg.dependencies['libphonenumber-js']     ||= dependencies['libphonenumber-js'] || '^1.13.10';
+  pkg.dependencies['country-flag-icons']    ||= dependencies['country-flag-icons'] || '^1.6.20';
+  pkg.dependencies.dompurify               ||= dependencies.dompurify || '^3.4.13';
+  pkg.dependencies.pinia                    ||= dependencies.pinia || '^4.0.2';
+  pkg.dependencies['@pinia/nuxt']           ||= dependencies['@pinia/nuxt'] || '^1.0.1';
+  pkg.dependencies['orionplace-nuxt']       ||= dependencies['orionplace-nuxt'] || `^${metadata.version}`;
+  if (action === 'update') {
+    pkg.dependencies['orionplace-nuxt'] = metadata.version;
+    if (pkg.devDependencies) delete pkg.devDependencies['orionplace-nuxt'];
+  }
   if (isNewNuxt) {
-    pkg.dependencies.nuxt = '^4.5.0';
-    pkg.dependencies.vue ||= '^3.5.0';
+    pkg.dependencies.nuxt            = '^4.5.0';
+    pkg.dependencies.vue           ||= '^3.5.0';
     pkg.dependencies['vue-router'] ||= '^5.0.0';
   }
+  // Install the complete editable AppLoad source. Never replace a customer's app.
+  const appPath                               = 'app/app.vue';
+  const existingApp                           = await read(await safePath(root, appPath));
+  const installApp                            = existingApp === null || Boolean(previous[appPath]);
+  const templateRoot                          = new URL('../templates/', import.meta.url);
+  async function planTemplates(directory = '') {
+    for (const entry of await readdir(new URL(directory, templateRoot), { withFileTypes: true })) {
+      const name = directory + entry.name;
+      if (entry.isDirectory()) { await planTemplates(name + '/'); continue; }
+      if (name === appPath && !installApp) continue;
+      // A customer's own home page and editor settings stay theirs.
+      if (['app/pages/index.vue', '.vscode/settings.json'].includes(name) && !previous[name] && await read(await safePath(root, name)) !== null) continue;
+      await plan(name, await readFile(new URL(name, templateRoot), 'utf8'), { managed: true, preserve: true });
+    }
+  }
+  await planTemplates();
+  pkg.devDependencies                       ||= {};
+  for (const name of ['tailwindcss', '@tailwindcss/vite']) {
+    if (!dependencies[name]) pkg.devDependencies[name] = '^4.3.3';
+  }
+  if (!await read(await safePath(root, 'tsconfig.json'))) {
+    await plan('tsconfig.json', JSON.stringify({ files: [], references: [
+      { path: './.nuxt/tsconfig.app.json' }, { path: './.nuxt/tsconfig.server.json' },
+      { path: './.nuxt/tsconfig.shared.json' }, { path: './.nuxt/tsconfig.node.json' },
+    ] }, null, 2) + '\n', { managed: true });
+  }
   await plan('package.json', JSON.stringify(pkg, null, 2) + '\n');
   for (const file of ['marketplace.mjs', 'api.mjs', 'domain.mjs']) {
     await plan(`orionplace/runtime/${file}`, await readFile(new URL(`../runtime/${file}`, import.meta.url), 'utf8'), { managed: true, preserve: true });
   }
   await plan('orionplace/README.md', projectReadme(settings), { managed: true, preserve: true });
-  if (isNewNuxt && !(await read(await safePath(root, 'app/app.vue')))) {
-    await plan('app/app.vue', '<template>\n  <main>\n    <h1>Your marketplace</h1>\n    <p>Domain setup and API instructions are in orionplace/README.md.</p>\n  </main>\n</template>\n', { managed: true });
-  }
   // A new project starts explicitly empty; keep a pre-existing manual setting on init.
-  const hasMimicSetting = /^\s*(?:export\s+)?MIMIC_FRONT_DOMAIN\s*=/m.test(current['.env'] || '');
-  if (settings.frontend || oldFrontend || !hasMimicSetting) {
+  const hasMimicSetting                       = /^\s*(?:export\s+)?MIMIC_FRONT_DOMAIN\s*=/m.test(current['.env'] || '');
+  if (action !== 'update' && (settings.frontend || oldFrontend || !hasMimicSetting)) {
     await plan('.env', updateEnvironment(current['.env'], settings.frontend || ''));
   }
-  if (settings.backend) {
+  if (settings.backend && action !== 'update') {
     const mappings = action === 'remove' || field === 'mimic' ? []
       : field === 'frontend' ? [setting] : settings.frontends;
     for (const domain of mappings) {
@@ -179,16 +228,16 @@ export async function setupProject({ cwd = process.cwd(), action = 'set', field,
     }
   }
   if (action === 'remove') await planRemoval(`sitemaps/${setting}.cfg`);
-  let ignore = current['.gitignore'] || '';
+  let ignore                                  = current['.gitignore'] || '';
   for (const entry of ['node_modules/', '.nuxt/', '.output/', '.env', '.env.*', '!.env.example']) {
     if (!ignore.split(/\r?\n/).includes(entry)) ignore = ignore.replace(/\n*$/, '\n') + entry + '\n';
   }
   await plan('.gitignore', ignore);
-  await plan('orionplace/settings.json', JSON.stringify(settings, null, 2) + '\n');
+  if (action !== 'update') await plan('orionplace/settings.json', JSON.stringify(settings, null, 2) + '\n');
   await plan('orionplace/.generated.json', JSON.stringify(manifest, null, 2) + '\n');
   if (!dryRun) {
     for (const [name, content] of changes) {
-      const target = await safePath(root, name);
+      const target    = await safePath(root, name);
       if (content === null) { await unlink(target); continue; }
       await mkdir(dirname(target), { recursive: true });
       const temporary = `${target}.orionplace-${process.pid}.tmp`;

package/src/update.mjs

@@ -0,0 +1,36 @@
+import { spawn } from 'node:child_process';
+import { resolve } from 'node:path';
+import { setupProject } from './setup.mjs';
+
+export function runNpm(args, cwd) {
+  const npmCli      = process.env.npm_execpath;
+  const command     = npmCli ? process.execPath : 'npm';
+  const commandArgs = npmCli ? [npmCli, ...args] : args;
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, commandArgs, { cwd, stdio: 'inherit', shell: false });
+    child.once('error', reject);
+    child.once('exit', (code, signal) => code === 0 ? resolve() : reject(new Error(
+      `npm ${args[0]} failed (${signal || code}).`,
+    )));
+  });
+}
+
+export async function updateProject({ cwd = process.cwd(), dryRun = false, local = false, npm = runNpm } = {}) {
+  cwd = resolve(cwd);
+  // Validate before downloading or writing; the latest CLI repeats preflight with its own templates.
+  const preview = await setupProject({ cwd, action: 'update', dryRun: true });
+  if (!local) {
+    console.log('Checking the latest Orionplace Nuxt release…');
+    await npm(['exec', '--yes', '--prefer-online', '--package=orionplace-nuxt@latest', '--',
+      'orionplace-nuxt', 'update', '--local', '--cwd', cwd, ...(dryRun ? ['--dry-run'] : [])], cwd);
+    return null; // The latest CLI reports its own changes.
+  }
+  if (dryRun) return preview;
+  const result = await setupProject({ cwd, action: 'update' });
+  try {
+    await npm(['install', '--no-audit', '--no-fund'], cwd);
+  } catch (error) {
+    throw new Error(`Source files were updated, but dependency installation failed. Run npm install in the project, then retry update. ${error.message}`);
+  }
+  return result;
+}

package/src/validation.mjs

@@ -25,3 +25,9 @@ export function backendUrl(value) {
   }
   return `${url.origin}/api`;
 }
+
+// The Android app sends its API requests to this public storefront over HTTPS.
+export function appOrigin(value) {
+  if (/^\s*http:/i.test(value)) throw new Error('ORIONPLACE_APP_ORIGIN must use HTTPS.');
+  return `https://${frontendDomain(value.trim())}`;
+}

package/templates/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  // The storefront styles use Tailwind's @apply, @reference and @theme, which
+  // the editor's CSS checker does not know; the build handles them.
+  "css.lint.unknownAtRules": "ignore"
+}

package/templates/app/app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import { watch } from 'vue';
+  import { useOrionplaceStore } from '@/stores/orionplace';
+  import { NuxtLayout, NuxtLoadingIndicator, NuxtPage } from '#components';
+  import { showError, useHead, useRoute } from '#imports';
+  import OrionplaceThemeProvider from '@/components/orionplace/theme/OrionplaceThemeProvider.vue';
+  import { useOrionplaceTheme } from '@/composables/useOrionplaceTheme';
+  import { storefrontPageError } from '@/composables/useOrionplaceMissingPage';
+
+  const store    = useOrionplaceStore();
+  const route    = useRoute();
+  const { mode } = useOrionplaceTheme();
+
+  useHead(() => ({
+    htmlAttrs: { lang: store.localeCode },
+  }));
+
+  // The middleware opens the 503 error page during navigation. A refresh that
+  // fails while a page is open, for example after sign-in, opens it too.
+  watch(
+    () => store.status,
+    (status) => {
+      const error = route.matched.length
+        ? storefrontPageError(status, false, '')
+        : undefined;
+
+      if (error) {
+        void showError(error);
+      }
+    },
+  );
+</script>
+
+<template>
+  <OrionplaceThemeProvider
+    :mode="mode"
+    class="min-h-screen"
+  >
+    <NuxtLoadingIndicator
+      :height="2"
+      color="var(--orionplace-inverse-text)"
+      error-color="var(--orionplace-danger)"
+    />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </OrionplaceThemeProvider>
+</template>

package/templates/app/assets/css/orionplace-tokens.css

@@ -0,0 +1,21 @@
+@theme inline {
+  --font-orionplace: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui,
+    sans-serif;
+  --color-orionplace-background: var(--orionplace-background);
+  --color-orionplace-surface: var(--orionplace-surface);
+  --color-orionplace-muted-surface: var(--orionplace-muted-surface);
+  --color-orionplace-text: var(--orionplace-text);
+  --color-orionplace-muted: var(--orionplace-muted);
+  --color-orionplace-border: var(--orionplace-border);
+  --color-orionplace-accent: var(--orionplace-accent);
+  --color-orionplace-hover: var(--orionplace-hover);
+  --color-orionplace-inverse-surface: var(--orionplace-inverse-surface);
+  --color-orionplace-inverse-text: var(--orionplace-inverse-text);
+  --color-orionplace-inverse-muted: var(--orionplace-inverse-muted);
+  --color-orionplace-success: var(--orionplace-success);
+  --color-orionplace-success-surface: var(--orionplace-success-surface);
+  --color-orionplace-danger: var(--orionplace-danger);
+  --color-orionplace-danger-surface: var(--orionplace-danger-surface);
+  --color-orionplace-attention: var(--orionplace-attention);
+  --color-orionplace-attention-surface: var(--orionplace-attention-surface);
+}

package/templates/app/assets/css/orionplace.css

@@ -0,0 +1,28 @@
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "@/assets/css/orionplace-tokens.css";
+
+@source "../../components/";
+@source "../../pages/";
+@source "../../layouts/";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  a {
+    text-decoration: none;
+  }
+
+  /*
+   * Tailwind's preflight is not loaded, so form controls would keep the
+   * browser's own font (system-ui) inside the storefront's theme font.
+   * Sizes stay with each component's classes.
+   */
+  button,
+  input,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+}

package/templates/app/components/orionplace/account/AccountActivity.README.md

@@ -0,0 +1,31 @@
+# AccountActivity · Nuxt
+
+The user’s promo codes, reviews and sign-in history.
+
+The supplied storefront uses this component at `/activity`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/activity) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/activity)
+
+## Contract and dependencies
+
+Opening shows the promo codes. A `tab` in the address opens that section
+instead, so `/activity?tab=logs` leads straight to the sign-in history; an
+unknown value opens the promo codes. Switching sections creates the selected
+component and loads its data. The parent `AccountSection` opens private
+sections after sign-in.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/account/AccountActivity.vue`; the primary interface is `app/interfaces/orionplace/accounts/IProfileData.ts`.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+- `profile_get_logs`
+- `profile_promocodes_get`
+- `products_feedbacks_mine_get`

package/templates/app/components/orionplace/account/AccountActivity.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  import { computed, ref, watch } from 'vue';
+  import { useRoute } from '#imports';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import { activityLabels } from '@/utils/orionplace/activityLabels';
+  import SignInHistory from '@/components/orionplace/account/SignInHistory.vue';
+  import AccountPromocodes from '@/components/orionplace/account/AccountPromocodes.vue';
+  import ProductReviews from '@/components/orionplace/products/ProductReviews.vue';
+  import '@/components/orionplace/shared/features.css';
+  import '@/components/orionplace/account/account.css';
+
+  const route          = useRoute();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const labels         = computed(() => activityLabels(selectionStore.localeCode));
+  const tabs           = computed(() => ({
+    promocodes: labels.value.promocodesTab,
+    reviews: labels.value.reviewsTab,
+    logs: labels.value.logsTab,
+  }));
+
+  // A `tab` in the address opens that section, so a link can lead straight to
+  // the promo codes. Any other value opens the first section.
+  function requested() {
+    const value = String(route.query.tab ?? '');
+
+    return value in tabs.value ? value : 'promocodes';
+  }
+
+  const active = ref(requested());
+
+  watch(() => route.query.tab, () => {
+    active.value = requested();
+  });
+</script>
+<template>
+  <section
+    class="op-feature @container op-feature-stack op-account"
+    data-feature-part="AccountActivity"
+  >
+    <h1 class="op-feature-title">{{ labels.title }}</h1>
+    <div class="op-feature-actions op-account-tabs">
+      <button
+        class="op-feature-button"
+        v-for="[key, title] in Object.entries(tabs)"
+        :key="key"
+        type="button"
+        :data-activity-tab="key"
+        :aria-pressed="active === key"
+        @click="active = key"
+      >
+        {{ title }}
+      </button>
+    </div>
+    <AccountPromocodes v-if="active === 'promocodes'" />
+    <ProductReviews
+      v-else-if="active === 'reviews'"
+      own
+    />
+    <SignInHistory v-else />
+  </section>
+</template>

package/templates/app/components/orionplace/account/AccountPromocodes.README.md

@@ -0,0 +1,50 @@
+# AccountPromocodes · Nuxt
+
+Available promo codes and applying a selected code to the cart.
+
+The supplied storefront uses this component at `/activity`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/account-promocodes) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/account-promocodes)
+
+## Contract and dependencies
+
+`profile_promocodes_get` loads the codes issued to the user. Every code shows
+its conditions in separate rows: the discount and, for a percentage code,
+its maximum (`maximum_discount`), the products, categories or sellers the offer
+covers, the minimum order (`minimum_order_amount`: what the covered products must cost
+together, the whole cart when the offer names none;
+a dollar amount, shown as “$ 544 ≈ 40 256 ₽” in another currency and “$ 544” in dollars), “Only for the first
+purchase in the store” when `first_order_only` is `true`, whether items that
+already have a discount count, the dates the offer runs between and how many
+uses are left. A row whose field is missing is left out. A code without a use limit shows no counter.
+
+The badge beside a code names the one reason it cannot be applied now: it is
+already applied to the cart, it is not available, its offer has run out, or it
+starts on a later date (a scheduled offer stays inactive until that day). Only
+a code without such a reason shows Apply.
+
+Applying sends `code_value` to `marketing_promo_promo_apply`. The
+`applyed_to_cart` mark changes after confirmation, then the list refreshes. A
+refused code shows the reason in its own card, under its buttons, where a
+phone shows it; a list that fails to load shows its error above the list with
+Retry. The
+cart link opens the cart with its current totals. Each code also links to the
+products its offer applies to, passing the code in that address so the path of
+the products page can name it.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/account/AccountPromocodes.vue`; the primary interface is `app/interfaces/orionplace/marketing/IPromoActions.ts`.
+The component belongs to the `activity` composition; render it with that
+parent's controller and context.
+
+The configured Nuxt starter initializes Application Load and its named API client.
+Component-source ZIPs contain imported children, types,
+composables, labels and styles. The included `orionplace/COMPONENT-DOWNLOAD.md`
+describes dependencies, theme and consumer configuration. Standalone file
+copying requires the same dependencies. Links to storefront routes use the
+pages supplied by the full starter.
+
+## Endpoint coverage
+
+- `profile_promocodes_get`
+- `marketing_promo_promo_apply`