orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/components/orionplace/support/TicketConversation.vue

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+  import {
+    refundShipmentView,
+    ticketLabels,
+    ticketSolutionText,
+    ticketSolutionTone,
+    ticketStatusView,
+    ticketReplyWaitText,
+    ticketTypeText,
+  } from '@/utils/orionplace/ticketLabels';
+  import { featureLabels } from '@/utils/orionplace/featureLabels';
+  import { orderRefundEntries } from '@/utils/orionplace/orderPresentation';
+  import {
+    orderTicketLines,
+    ticketOrderLine,
+  } from '@/utils/orionplace/ticketItems';
+  import { getAvailableNestedValueFromObject } from '@/utils/orionplace/presentation';
+  import {
+    ECustomerTicketStatus,
+    ECustomerTicketSolution,
+    ECustomerTicketType,
+    ETicketReplyDirection,
+  } from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
+  import type {
+    ICustomerTicket,
+    ICustomerTicketReply,
+  } from '@/interfaces/orionplace/tickets/ICustomerTicketApi';
+  import TicketMessageForm from '@/components/orionplace/support/TicketMessageForm.vue';
+  import TicketImage from '@/components/orionplace/support/TicketImage.vue';
+  import TicketItemCard from '@/components/orionplace/support/TicketItemCard.vue';
+  import TicketSubscriptionCard from '@/components/orionplace/support/TicketSubscriptionCard.vue';
+  import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+  import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+  import OrionplaceSelect from '@/components/orionplace/shared/OrionplaceSelect.vue';
+  import '@/components/orionplace/shared/features.css';
+  import '@/components/orionplace/account/account.css';
+
+  // `subscription` and `subscriptionPlan` describe the subscription the
+  // conversation is about (`related_paid_subscription_id`); the host loads
+  // both, so the conversation itself sends no extra request.
+  const props        = defineProps<{
+    ticket: ICustomerTicket;
+    replies: ICustomerTicketReply[];
+    pending?: boolean;
+    sentRevision?: number;
+    subscription?: ICustomerSubscription;
+    subscriptionPlan?: ISubscribeTariff;
+  }>();
+  const emit         = defineEmits<{
+    submit: [text: string, files: File[]];
+    close: [];
+    delete: [];
+    rate: [rating: number];
+    refresh: [];
+  }>();
+  const selectionStore = useOrionplaceSelectionsStore();
+  const labels         = computed(() => ticketLabels(selectionStore.localeCode));
+  const common         = computed(() => featureLabels(selectionStore.localeCode));
+  const confirmation   = ref<'close' | 'delete'>();
+  const rating         = ref('0');
+  const ratings        = computed(() => ({
+    0: labels.value.unrated,
+    1: '★',
+    2: '★★',
+    3: '★★★',
+    4: '★★★★',
+    5: '★★★★★',
+  }));
+  const status       = computed(() =>
+    ticketStatusView(props.ticket.status, labels.value),
+  );
+  const type         = computed(() =>
+    ticketTypeText(props.ticket.type, labels.value),
+  );
+  const refund       = computed(() => props.ticket.refund);
+  const refundState  = computed(() =>
+    refund.value
+      ? refundShipmentView(refund.value.shipment_status, labels.value)
+      : undefined,
+  );
+  const carrier      = computed(() =>
+    getAvailableNestedValueFromObject(
+      refund.value?.track?.carrier_name,
+      selectionStore.localeCode,
+      'carrier_name',
+    ),
+  );
+  // The order returned with the refund lists every item the return covers,
+  // and the same order names the option a returned option belongs to.
+  const orderLines   = computed(() =>
+    orderTicketLines(refund.value?.order, selectionStore.localeCode),
+  );
+  const refundItems  = computed(() =>
+    orderRefundEntries(refund.value?.order, selectionStore.currencyId).map((entry) => ({
+      ...entry,
+      option: orderLines.value.find((line) => line.key === entry.key)?.option,
+    })),
+  );
+  // A conversation about one purchased item or option shows that item, so the
+  // customer recognises it without opening the order.
+  const subject      = computed(() => {
+    if (props.ticket.type.int !== ECustomerTicketType.ORDER) {
+      return undefined;
+    }
+
+    const line = ticketOrderLine(props.ticket, orderLines.value);
+
+    if (!props.ticket.product && !line?.product) {
+      return undefined;
+    }
+
+    return {
+      product: line?.product ?? props.ticket.product ?? null,
+      quantity: line?.quantity,
+      option: line?.option,
+      amount: line?.amount,
+    };
+  });
+  const decision     = computed(() => {
+    if (props.ticket.type.int !== ECustomerTicketType.ORDER) {
+      return undefined;
+    }
+
+    return {
+      text: ticketSolutionText(props.ticket.solution, labels.value),
+      tone: ticketSolutionTone(props.ticket.solution),
+    };
+  });
+  const created      = computed(() =>
+    [props.ticket.time_created?.date, props.ticket.time_created?.time]
+      .filter(Boolean)
+      .join(' '),
+  );
+  const canDelete    = computed(
+    () =>
+      props.ticket.counts.c_total_messages <= 1 &&
+      props.ticket.solution.int !== ECustomerTicketSolution.SOLUTION_APROOVED,
+  );
+  // A `delay` wait ends by itself, so a timer unlocks the form; a
+  // `support_reply` wait ends when a refresh brings the support reply.
+  const waitOver     = ref(false);
+  let waitTimer: ReturnType<typeof setTimeout> | undefined;
+  const waitHint     = computed(() =>
+    waitOver.value
+      ? ''
+      : ticketReplyWaitText(props.ticket.reply_wait, labels.value),
+  );
+
+  function scheduleWaitEnd() {
+    const wait     = props.ticket.reply_wait;
+    clearTimeout(waitTimer);
+    waitOver.value = false;
+    if (wait?.reason === 'delay' && wait.seconds) {
+      waitTimer = setTimeout(() => {
+        waitOver.value = true;
+      }, wait.seconds * 1000);
+    }
+  }
+  onMounted(scheduleWaitEnd);
+  watch(() => props.ticket.reply_wait, scheduleWaitEnd);
+  onBeforeUnmount(() => clearTimeout(waitTimer));
+  watch(
+    () => props.ticket.rating,
+    (value) => {
+      rating.value = String(value);
+    },
+    { immediate: true },
+  );
+
+  function isOwn(reply: ICustomerTicketReply) {
+    return reply.direction.int === ETicketReplyDirection.TO_MANAGMENT;
+  }
+
+  function confirm() {
+    if (confirmation.value === 'close') {
+      emit('close');
+    } else if (confirmation.value === 'delete') {
+      emit('delete');
+    }
+    confirmation.value = undefined;
+  }
+</script>
+
+<template>
+  <section class="op-feature-stack op-account op-support-conversation">
+    <header class="op-support-header">
+      <div class="op-support-heading">
+        <h2 class="op-feature-subtitle">
+          {{ labels.ticket }} #{{ ticket.id }}
+        </h2>
+        <p class="op-support-meta">
+          <span v-if="type">{{ type }}</span>
+          <span
+            v-if="ticket.is_defect"
+            class="op-support-defect-mark"
+            data-ticket-defect
+          >
+            {{ labels.defect }}
+          </span>
+          <span
+            v-if="status.text"
+            class="op-support-status"
+            :data-ticket-status="status.icon"
+          >
+            <svg
+              class="op-support-icon op-support-status-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect
+                x="5"
+                y="11"
+                width="14"
+                height="10"
+              />
+              <path
+                v-if="status.icon === 'lock'"
+                d="M8 11V7a4 4 0 0 1 8 0v4"
+              />
+              <path
+                v-else
+                d="M8 11V7a4 4 0 0 1 7.6-1.7"
+              />
+            </svg>
+            {{ status.text }}
+          </span>
+          <span
+            v-if="decision"
+            class="op-support-decision"
+            :data-tone="decision.tone"
+          >
+            {{ labels.decision }}: {{ decision.text }}
+          </span>
+          <time v-if="created">{{ created }}</time>
+        </p>
+        <NuxtLink
+          class="op-feature-link op-support-order"
+          v-if="ticket.order_id"
+          :to="{
+            path: '/orders',
+            query: { order: ticket.order_id, locale: selectionStore.localeCode },
+          }"
+        >
+          {{ labels.order }} #{{ ticket.order_id }}
+        </NuxtLink>
+      </div>
+      <div class="op-support-tools">
+        <button
+          class="op-support-tool op-support-tool-icon"
+          type="button"
+          :aria-label="common.refresh"
+          :title="common.refresh"
+          :disabled="pending"
+          @click="emit('refresh')"
+        >
+          <svg
+            class="op-support-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M20 11a8 8 0 1 0-2.3 5.7" />
+            <path d="M20 4v7h-7" />
+          </svg>
+        </button>
+        <button
+          class="op-support-tool"
+          v-if="ticket.status.int === ECustomerTicketStatus.OPEN"
+          type="button"
+          :disabled="pending"
+          :aria-label="labels.closeHint"
+          @click="confirmation = 'close'"
+        >
+          <svg
+            class="op-support-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="9"
+            />
+            <path d="m8 12.5 2.5 2.5L16 9.5" />
+          </svg>
+          {{ labels.close }}
+        </button>
+        <button
+          class="op-support-tool op-support-tool-danger"
+          v-if="canDelete"
+          type="button"
+          :disabled="pending"
+          :aria-label="labels.deleteHint"
+          @click="confirmation = 'delete'"
+        >
+          <svg
+            class="op-support-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M4 7h16" />
+            <path d="M9 7V4h6v3" />
+            <path d="M6 7l1 13h10l1-13" />
+            <path d="M10 11v5m4-5v5" />
+          </svg>
+          {{ labels.delete }}
+        </button>
+      </div>
+    </header>
+    <section
+      v-if="subject"
+      class="op-feature-panel op-support-subject"
+      data-ticket-subject
+      :aria-labelledby="`ticket-${ticket.id}-subject`"
+    >
+      <h3
+        :id="`ticket-${ticket.id}-subject`"
+        class="op-support-refund-subtitle"
+      >
+        {{ labels.subject }}
+      </h3>
+      <TicketItemCard
+        :product="subject.product"
+        :quantity="subject.quantity"
+        :option="subject.option"
+        :amount="subject.amount"
+        gallery
+        data-feature-part="TicketItemCard"
+      />
+    </section>
+    <section
+      v-if="subscription"
+      class="op-feature-panel op-support-subject"
+      data-ticket-subscription-subject
+      :aria-labelledby="`ticket-${ticket.id}-subscription`"
+    >
+      <h3
+        :id="`ticket-${ticket.id}-subscription`"
+        class="op-support-refund-subtitle"
+      >
+        {{ labels.subscriptionSubject }}
+      </h3>
+      <TicketSubscriptionCard
+        :subscription="subscription"
+        :plan="subscriptionPlan"
+        data-feature-part="TicketSubscriptionCard"
+      />
+    </section>
+    <section
+      v-if="refund && refundState"
+      class="op-support-refund"
+      :data-tone="refundState.tone"
+      data-ticket-refund
+      :aria-labelledby="`ticket-${ticket.id}-refund`"
+    >
+      <header class="op-support-refund-head">
+        <h3
+          :id="`ticket-${ticket.id}-refund`"
+          class="op-support-refund-title"
+        >
+          {{ labels.refund }} #{{ refund.id }}
+        </h3>
+        <span class="op-support-refund-state">{{ refundState.text }}</span>
+      </header>
+      <p
+        v-if="refundState.hint"
+        class="op-feature-copy"
+      >
+        {{ refundState.hint }}
+      </p>
+      <dl class="op-support-refund-rows">
+        <div v-if="carrier">
+          <dt>{{ labels.refundCarrier }}</dt>
+          <dd>{{ carrier }}</dd>
+        </div>
+        <div v-if="refund.track?.track">
+          <dt>{{ labels.refundTrack }}</dt>
+          <dd class="op-support-refund-track">{{ refund.track.track }}</dd>
+        </div>
+        <div v-if="refund.track?.status">
+          <dt>{{ labels.refundCarrierStatus }}</dt>
+          <dd>{{ refund.track.status }}</dd>
+        </div>
+      </dl>
+      <template v-if="refundItems.length">
+        <h4 class="op-support-refund-subtitle">{{ labels.refundItems }}</h4>
+        <ul class="op-support-refund-items">
+          <li
+            v-for="entry in refundItems"
+            :key="entry.key"
+            class="op-support-refund-item"
+          >
+            <TicketItemCard
+              :product="entry.product"
+              :quantity="entry.quantity"
+              :option="entry.option"
+              :amount="entry.refund.amount"
+              :amount-label="labels.refundAmount"
+              data-feature-part="TicketItemCard"
+            >
+              <span
+                v-for="count in entry.refund.counts"
+                :key="count.key"
+                class="op-support-refund-count"
+              >
+                {{ labels.refundCounts[count.key] }}: {{ count.count }}
+              </span>
+            </TicketItemCard>
+          </li>
+        </ul>
+      </template>
+    </section>
+    <div
+      v-if="confirmation"
+      class="op-notice op-support-confirm"
+    >
+      <p>
+        {{
+          confirmation === 'close'
+            ? labels.closeQuestion
+            : labels.deleteQuestion
+        }}
+      </p>
+      <div class="op-feature-actions">
+        <button
+          class="op-feature-button op-feature-primary"
+          type="button"
+          :disabled="pending"
+          @click="confirm"
+        >
+          {{ common.continue }}
+        </button>
+        <button
+          class="op-feature-button"
+          type="button"
+          :disabled="pending"
+          @click="confirmation = undefined"
+        >
+          {{ common.back }}
+        </button>
+      </div>
+    </div>
+    <ol
+      class="op-support-messages"
+      aria-live="polite"
+    >
+      <li
+        v-for="reply in replies"
+        :key="reply.id"
+        class="op-support-message"
+        :class="{ 'op-support-own': isOwn(reply) }"
+      >
+        <div class="op-support-bubble">
+          <p class="op-support-sender">
+            {{ reply.sender.first_name }} {{ reply.sender.last_name }}
+          </p>
+          <p class="op-support-text">{{ reply.reply_text }}</p>
+          <div
+            v-if="reply.reply_images.length"
+            class="op-support-attachments"
+          >
+            <TicketImage
+              v-for="file in reply.reply_images"
+              :key="file.id"
+              :image-id="file.id"
+              data-feature-part="TicketImage"
+            />
+          </div>
+        </div>
+        <time class="op-support-time">
+          {{ reply.reply_time?.date }} {{ reply.reply_time?.time }}
+        </time>
+      </li>
+    </ol>
+    <TicketMessageForm
+      v-if="ticket.status.int === ECustomerTicketStatus.OPEN"
+      :key="`${ticket.id}:${sentRevision}`"
+      :pending="pending"
+      :wait-hint="waitHint"
+      data-feature-part="TicketMessageForm"
+      @submit="(text, files) => emit('submit', text, files)"
+    />
+    <form
+      v-else
+      class="op-feature-panel op-support-rating"
+      @submit.prevent="emit('rate', Number(rating))"
+    >
+      <OrionplaceSelect
+        v-model="rating"
+        :options="ratings"
+        :label="labels.rating"
+        :disabled="pending"
+      />
+      <button
+        class="op-feature-button"
+        type="submit"
+        :disabled="pending"
+      >
+        {{ common.save }}
+      </button>
+    </form>
+  </section>
+</template>

package/templates/app/components/orionplace/support/TicketImage.README.md

@@ -0,0 +1,27 @@
+# TicketImage · Nuxt
+
+Loading and viewing an image from the user’s conversation.
+
+The supplied storefront uses this component at `/tickets`.
+[English guide](https://orionmarket.place/en/sandbox/components/nuxt/ticket-image) ·
+[Russian guide](https://orionmarket.place/ru/sandbox/components/nuxt/ticket-image)
+
+## Contract and dependencies
+
+Opening requests `customer_tickets_ticket_images` with `imageId`. The returned file is shown as a 112 × 112 pixel square thumbnail linked to the full image in a separate tab. A failure shows an image icon, a message and a retry button. The temporary URL is released when replaced or when the component closes.
+
+The guide describes its inputs and events. Source is maintained in
+`app/components/orionplace/support/TicketImage.vue`; the primary interface is `app/interfaces/orionplace/tickets/ICustomerTicketApi.ts`.
+The component belongs to the `ticket-conversation` 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
+
+- `customer_tickets_ticket_images`