orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/manufacturers/StorefrontManufacturers.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import { navigateTo, useRoute } from '#imports';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import {
+    useOrionplaceFeatureApi,
+    useOrionplaceTask,
+  } from '@/composables/useOrionplaceFeature';
+  import { useOrionplaceManufacturerIndex } from '@/composables/useOrionplaceManufacturerIndex';
+  import { directoryLabels } from '@/utils/orionplace/directoryLabels';
+  import { featureLabels } from '@/utils/orionplace/featureLabels';
+  import { manufacturerIndexLabels } from '@/utils/orionplace/manufacturerIndex';
+  import {
+    getAvailableNestedValueFromObject,
+    plainText,
+  } from '@/utils/orionplace/presentation';
+  import { mergePagination } from '@/utils/orionplace/featureData';
+  import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+  import type {
+    IManufacturer,
+    IManufacturerSearchResponse,
+  } from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+  import ManufacturerIndex from '@/components/orionplace/manufacturers/ManufacturerIndex.vue';
+  import OrionplaceImage from '@/components/orionplace/shared/OrionplaceImage.vue';
+  import StorefrontPagination from '@/components/orionplace/shared/StorefrontPagination.vue';
+  import '@/components/orionplace/shared/features.css';
+  import OrionplaceEmptyState from '@/components/orionplace/shared/OrionplaceEmptyState.vue';
+
+  const props          = defineProps<{
+    manufacturerId?: number;
+    prefix?: string;
+  }>();
+  const route          = useRoute();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const api            = useOrionplaceFeatureApi();
+  const task           = useOrionplaceTask();
+  const index          = useOrionplaceManufacturerIndex({ api });
+  const labels         = computed(() => directoryLabels(selectionStore.localeCode));
+  const common         = computed(() => featureLabels(selectionStore.localeCode));
+  const indexCopy      = computed(() => manufacturerIndexLabels(selectionStore.localeCode));
+  const selected       = props.manufacturerId;
+  const prefix         = ref(props.prefix ?? '');
+  const browsing       = Boolean(props.manufacturerId || props.prefix);
+  const manufacturers  = ref<IManufacturer[]>([]);
+  const pagination     = ref<Partial<IApiPagination>>({});
+  const loaded         = ref(false);
+  const busy           = computed(() => Boolean(task.state.pending));
+
+  function load(page = 1) {
+    return task.run('load', async (signal) => {
+      const data          = await api.request<
+        NonNullable<IManufacturerSearchResponse['page_data']>
+      >(
+        'manufactures_manufactures_get',
+        {
+          filters: selected
+            ? { id: selected }
+            : { name_starts: prefix.value },
+          paginate: { page, pp_items: 20 },
+        },
+        signal,
+      );
+      manufacturers.value = data.manufactures.data;
+      pagination.value    = mergePagination(
+        page === 1 ? {} : pagination.value,
+        data.manufactures.rpag,
+      );
+      loaded.value        = true;
+    });
+  }
+  // Every view has its own address (?prefix=D, ?manufacturer=5), so Back
+  // steps through them and a reload keeps the view; the page remounts this
+  // component for each one.
+  function open(
+    query: { manufacturer?: string; prefix?: string },
+    replace = false,
+  ) {
+    if (!replace) {
+      window.scrollTo({ top: 0, behavior: 'instant' });
+    }
+    void navigateTo(
+      {
+        path: route.path,
+        query: {
+          ...route.query,
+          manufacturer: query.manufacturer,
+          prefix: query.prefix,
+        },
+      },
+      { replace },
+    );
+  }
+  function selectManufacturer(id: number) {
+    if (!busy.value) {
+      open({ manufacturer: String(id) });
+    }
+  }
+  function selectLetter(letter: string) {
+    if (!busy.value) {
+      open({ prefix: letter });
+    }
+  }
+  function search() {
+    if (prefix.value === (props.prefix ?? '')) {
+      void load();
+    } else {
+      open({ prefix: prefix.value || undefined }, true);
+    }
+  }
+  function back() {
+    if (!busy.value) {
+      open({});
+    }
+  }
+  function pitch(item: IManufacturer) {
+    return plainText(
+      getAvailableNestedValueFromObject(
+        item.locale,
+        selectionStore.localeCode,
+        'brand_pitch',
+      ),
+    );
+  }
+  onMounted(() => {
+    void (browsing ? load() : index.load());
+  });
+</script>
+<template>
+  <section
+    class="op-feature @container op-feature-stack"
+    data-feature-part="StorefrontManufacturers"
+  >
+    <ManufacturerIndex
+      v-if="!browsing"
+      :state="index.state"
+      :heading-level="1"
+      @load="index.load()"
+      @retry="index.load()"
+      @select-letter="selectLetter"
+      @select-manufacturer="selectManufacturer"
+    />
+    <template v-else>
+      <div class="op-feature-heading">
+        <h1 class="op-feature-title">
+          {{
+            selected && manufacturers[0]
+              ? manufacturers[0].name
+              : labels.manufacturers
+          }}
+        </h1>
+        <button
+          class="op-feature-button"
+          type="button"
+          :disabled="busy"
+          @click="back"
+        >
+          ← {{ common.back }}
+        </button>
+      </div>
+      <form
+        v-if="!selected"
+        class="op-feature-actions items-end!"
+        @submit.prevent="search"
+      >
+        <label class="op-feature-label flex-1">
+          <span>{{ labels.letter }}</span>
+          <input
+            class="op-feature-input"
+            v-model.trim="prefix"
+            type="search"
+            :disabled="busy"
+          />
+        </label>
+        <button
+          class="op-feature-button"
+          type="submit"
+          :disabled="busy"
+        >
+          {{ common.search }}
+        </button>
+      </form>
+      <div
+        v-if="task.state.error"
+        class="op-notice op-notice-error"
+        role="alert"
+      >
+        {{ task.state.error }}
+        <button
+          class="op-feature-button"
+          type="button"
+          :disabled="busy"
+          @click="load()"
+        >
+          {{ common.retry }}
+        </button>
+      </div>
+      <p
+        class="op-feature-loading"
+        v-if="busy"
+        role="status"
+      >
+        <span class="sr-only">{{ common.loading }}</span>
+      </p>
+      <ul
+        v-if="manufacturers.length"
+        class="op-feature-records grid gap-4! @min-[592px]:grid-cols-2 @min-[960px]:grid-cols-3"
+      >
+        <li
+          v-for="item in manufacturers"
+          :key="item.id"
+          class="op-feature-panel op-feature-stack"
+        >
+          <OrionplaceImage
+            :src="item.image || item.small_image"
+            :alt="item.name"
+            class="
+              h-32 w-full box-border
+              p-4
+              rounded-none bg-orionplace-surface
+            "
+          />
+          <h2 class="op-feature-subtitle">{{ item.name }}</h2>
+          <p
+            v-if="pitch(item)"
+            class="op-feature-copy op-feature-muted leading-7"
+          >
+            {{ pitch(item) }}
+          </p>
+          <div class="op-feature-actions">
+            <button
+              class="op-feature-button"
+              v-if="!selected"
+              type="button"
+              :disabled="busy"
+              @click="selectManufacturer(item.id)"
+            >
+              {{ labels.details }}
+            </button>
+            <NuxtLink
+              class="op-feature-link op-feature-button"
+              :to="{
+                path: '/browse',
+                query: { manufacturer: item.id, locale: selectionStore.localeCode },
+              }"
+            >
+              {{ labels.products }} →
+            </NuxtLink>
+          </div>
+        </li>
+      </ul>
+      <OrionplaceEmptyState
+        v-else-if="loaded && !busy"
+        kind="search"
+        :message="indexCopy.empty"
+      />
+      <StorefrontPagination
+        :pagination="pagination"
+        :pending="busy"
+        @change="load"
+      />
+    </template>
+  </section>
+</template>

package/templates/app/components/orionplace/orders/OrderDetails.README.md

@@ -0,0 +1,39 @@
+# OrderDetails · Nuxt
+
+Order items, shipments, tracking, purchased content and attachments.
+
+The supplied storefront uses this component at `/orders`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/order-details) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/order-details)
+
+## Contract and dependencies
+
+The component receives a confirmed order through `order` and splits it into labelled blocks. Status shows the Placed → Shipped → Delivered steps on one rail, counted from the dates of every shipment in `delivery_froms`; a step only some shipments have reached reads as Partly shipped or Partly delivered with its count, for example 1 of 2: a completed step has a filled marker and a solid rail, the current step an outlined attention marker with the word Now, and a step still ahead a muted outline. The current step is the last one the order has reached, fully or partly: Placed while no shipment has been sent, Shipped or Partly shipped once some have, Delivered or Partly delivered once some have arrived. Canceled and returned orders show only the explanation. Recipient shows the name, phone and email from `contact`.
+
+Each shipment is a bordered card opened by a tinted strip with its number, the store it leaves from and its own state, taken from its own dates: `dates.returned_by_carrier` reads as Returned by carrier (the carrier brought the package back undelivered, so its units are returned and refunded), `dates.delivery_date_real` as Delivered, `dates.sent` as On its way, and a shipment with none of them as Being prepared; a canceled order marks them Canceled. Inside, the card shows the delivery method and carrier, the address or pickup point, expected, sent, delivered and returned-by-carrier dates and the tracking number, shown apart from the other values in a monospace frame and selected whole with one click. Its items are separated from each other inside the card, so the card border stays the strongest boundary. Each item shows a thumbnail, name, variant, `quantity × unit price` and the amount of the products of that line, `prices.products_price_after_promo`.
+
+An item or option being returned shows a Return panel with a row for every stage that still has units: `refund_stats.c_refund_wait` as To send back, `refund_stats.c_refund_delivered` as Received back and `refund_stats.c_refund_to_pay` as Approved for refund; `refund_stats.c_refund_defect` adds Of them defective, the received or approved units returned as a defect. The panel adds the refund amount, `prices.products_refund_price_to_pay` for an item and `prices.refund_price_to_pay` for an option, the state and tracking number of the return shipment from `ticket.refund`, and a link to that conversation. Its accent follows that state: green for `EOrderRefundShipmentStatus.DONE`, red for `CANCELED` and `PROBLEM`. An item with no return units offers a return request while `refund_window` accepts one: `regular` inside the return period offers Request a return, `defect` after it offers Return this item as defective, and `null` offers nothing. A backend without `refund_window` sends only `refund_allowed`, which reads as `regular` (`orderRefundWindow()`). The link opens the conversation form for that item at `/tickets?item=<id>&order=<order id>` (an option uses `option=<id>`), so the form can show the item and the defect choice; an item that already has a conversation links to it.
+
+Only what the customer filled in is shown (`orderFilledOptionGroups()` in `app/utils/orionplace/orderPresentation.ts`): options ordered in a positive `quantity`, and groups that hold a text, a file or at least one such option; a group left empty is not shown. The option groups of an item follow it indented, tied to the item by one branch line and opened by the small uppercase group name from `option_name`. An ordered option is a smaller card with its picture, name, `quantity × unit price` and the amount of its own line from `prices.options_price_after_promo`; the price of one piece is that amount divided by `quantity`, because the backend stores the option price for the whole line. A group also shows the text the customer typed in `option_text_data` and the file in `option_file_data`. Under the groups, Options repeats `prices.options_price_after_promo` of the item and Item total shows `prices.total_price_after_promo`, the products of the line plus its options. The Summary of the order card has no separate option amount, because `profile_orders_get` returns none at order level.
+
+The Payment block shows the payment method and payment status; it shares one row with Recipient from a 48rem container width. The amounts of the order — items, discounts, delivery, total, paid, amount due, refund approved and refunded — belong to the Summary block of the order card in `StorefrontOrders`, which is visible without opening the details, so this component repeats none of them.
+
+`EOrderPaymentStatus.PAID` or `EOrderPaymentStatus.LATE_PAID` enables purchased content from `digital_stock`. Returned content is no longer listed there and can not be downloaded; a digital item or option whose units were received back or approved for refund shows Returned with their count instead (`orderDigitalReturned()`). Download buttons emit attachment IDs to the parent. The parent requests the file and displays API failures instead of downloading an error response. A user-supplied option-group attachment uses `group.id`.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/orders/OrderDetails.vue`; the primary interface is `app/interfaces/orionplace/orders/IOrderHistory.ts`.
+The component belongs to the `orders` 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
+
+- `orders_optiongroup_file_get`
+- `profile_get_orders_shipment_attachment`
+- `profile_get_orders_options_shipment_attachment`