orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/orders/OrderDetails.tsx

@@ -0,0 +1,693 @@
+'use client';
+
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { ICurrencyAmounts } from '@/interfaces/orionplace/cart/ICartData';
+import {
+  EOrderPaymentStatus,
+  EOrderStatus,
+} from '@/interfaces/orionplace/orders/IOrderActions';
+import type {
+  IOrder,
+  IOrderOption,
+  IOrderOptionGroup,
+  IOrderShipment,
+  IOrderShipmentItem,
+} from '@/interfaces/orionplace/orders/IOrderHistory';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+import { formatCurrency } from '@/lib/orionplace/currency';
+import { orderLabels } from '@/lib/orionplace/orderLabels';
+import {
+  hasOrderAmount,
+  orderAmount,
+  orderDigitalReturned,
+  orderFilledOptionGroups,
+  orderIconPaths,
+  orderItemRefund,
+  orderItemVariant,
+  orderOptionRefund,
+  orderOptionUnitPrice,
+  orderPaymentBadge,
+  orderShipmentState,
+  orderStatusBadge,
+  orderSteps,
+  orderUnitPrice,
+  type OrderRefundView,
+  type OrderStep,
+} from '@/lib/orionplace/orderPresentation';
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import {
+  refundShipmentView,
+  ticketLabels,
+} from '@/lib/orionplace/ticketLabels';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './OrderDetails.module.css';
+
+export type OrderDownloadKind = 'product' | 'option' | 'group';
+
+export interface OrderDetailsProps {
+  order: IOrder;
+  pending?: boolean;
+  productHref?: (productId: number, locale: string) => string;
+  ticketsHref?: (
+    values: { ticket?: number; item?: number; option?: number; order: number },
+    locale: string,
+  ) => string;
+  onDownload?: (
+    kind: OrderDownloadKind,
+    id: number,
+    filename: string,
+  ) => void;
+}
+
+function Icon({
+  name,
+  strokeWidth = '1.8',
+}: {
+  name: keyof typeof orderIconPaths;
+  strokeWidth?: string;
+}) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={styles.icon}
+    >
+      <path d={orderIconPaths[name]} />
+    </svg>
+  );
+}
+
+export function OrderDetails({
+  order,
+  pending = false,
+  productHref = (productId, locale) =>
+    `/product/${productId}?locale=${encodeURIComponent(locale)}`,
+  ticketsHref = (values, locale) => {
+    const query = new URLSearchParams({ locale });
+    if (values.ticket) {
+      query.set('ticket', String(values.ticket));
+    } else if (values.item) {
+      query.set('item', String(values.item));
+      query.set('order', String(values.order));
+    } else if (values.option) {
+      query.set('option', String(values.option));
+      query.set('order', String(values.order));
+    }
+    return `/tickets?${query}`;
+  },
+  onDownload,
+}: OrderDetailsProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const currency = useOrionplaceSelections(
+    (state) => state.init?.currencies[state.currencyId],
+  );
+  const labels = orderLabels(locale);
+  const returnLabels = ticketLabels(locale);
+  const paid = order.payment_status.int === EOrderPaymentStatus.PAID ||
+    order.payment_status.int === EOrderPaymentStatus.LATE_PAID;
+  const status = orderStatusBadge(order);
+  const payment = orderPaymentBadge(order, currencyId);
+  const steps = orderSteps(order);
+  const shipments = order.delivery_froms ?? [];
+  const recipient = {
+    name: order.contact.reciever_name || order.contact.full_name,
+    phone: order.contact.reciever_phone || order.contact.phone,
+    email: order.contact.email,
+  };
+  const method = getAvailableNestedValueFromObject(
+    order.payment?.locale,
+    locale,
+    'payment_name',
+  );
+
+  function money(amounts: ICurrencyAmounts | null | undefined) {
+    return formatCurrency(orderAmount(amounts, currencyId), currency, locale);
+  }
+
+  function hasMoney(amounts: ICurrencyAmounts | null | undefined) {
+    return hasOrderAmount(amounts, currencyId);
+  }
+
+  function productName(product: IProduct | null) {
+    return getAvailableNestedValueFromObject(
+      product?.locale,
+      locale,
+      'product_name',
+    ) || `#${product?.id ?? ''}`;
+  }
+
+  function unitLine(item: IOrderShipmentItem) {
+    return `${item.quantity} × ${formatCurrency(
+      orderUnitPrice(item, currencyId),
+      currency,
+      locale,
+    )}`;
+  }
+
+  function optionUnitLine(option: IOrderOption) {
+    const unit = orderOptionUnitPrice(option, currencyId);
+    return unit === undefined
+      ? `× ${option.quantity}`
+      : `${option.quantity} × ${formatCurrency(unit, currency, locale)}`;
+  }
+
+  function groupName(group: IOrderOptionGroup) {
+    return getAvailableNestedValueFromObject(
+      group.option_name,
+      locale,
+      'option_group_display_name',
+    ) || labels.options;
+  }
+
+  function stepLabel(step: OrderStep) {
+    if (step.state === 'partial' && step.key === 'shipped') {
+      return labels.statuses.partlyShipped;
+    }
+    if (step.state === 'partial' && step.key === 'delivered') {
+      return labels.statuses.partlyDelivered;
+    }
+    return labels.steps[step.key];
+  }
+
+  function shipmentTitle(index: number) {
+    const title = `${labels.shipment} ${index + 1}`;
+    return shipments.length > 1
+      ? `${title} ${labels.of} ${shipments.length}`
+      : title;
+  }
+
+  function deliveryMethod(shipment: IOrderShipment) {
+    if (!shipment.delivery_method) {
+      return shipment.store?.virtual_goods ? labels.digitalDelivery : '';
+    }
+    return getAvailableNestedValueFromObject(
+      shipment.delivery_method.locales,
+      locale,
+      'tariff_name',
+    ) ?? '';
+  }
+
+  function carrierName(shipment: IOrderShipment) {
+    return getAvailableNestedValueFromObject(
+      shipment.delivery_method?.carrier?.locale,
+      locale,
+      'carrier_name',
+    ) ?? '';
+  }
+
+  function isPickup(shipment: IOrderShipment) {
+    return Boolean(shipment.delivery_method?.delivery_to_carrier_point);
+  }
+
+  function destination(shipment: IOrderShipment) {
+    const data = shipment.delivery_data;
+    if ('delivery_to_code_full_address' in data) {
+      return data.delivery_to_code_full_address;
+    }
+    if (!shipment.delivery_method || isPickup(shipment)) {
+      return '';
+    }
+    const address = 'city' in data ? data : order.main_address;
+    const street = [address.line1, address.house_number]
+      .filter(Boolean)
+      .join(' ');
+    const apartment = address.apt_number
+      ? `${labels.apartment} ${address.apt_number}`
+      : '';
+    return [address.postcode, address.city, street, address.line2, apartment]
+      .filter(Boolean)
+      .join(', ');
+  }
+
+  function shipsFrom(shipment: IOrderShipment) {
+    if (!shipment.store || shipment.store.virtual_goods) {
+      return '';
+    }
+    const city = getAvailableNestedValueFromObject(
+      shipment.store.locale,
+      locale,
+      'store_city',
+    );
+    return [shipment.store.store_name, city].filter(Boolean).join(', ');
+  }
+
+  function expected(shipment: IOrderShipment) {
+    if (
+      shipment.dates?.delivery_date_real ||
+      shipment.dates?.returned_by_carrier ||
+      order.status.int === EOrderStatus.CANCELED ||
+      order.status.int === EOrderStatus.REFUND
+    ) {
+      return '';
+    }
+    const dates = [
+      shipment.estimate.delivery_date_from?.date,
+      shipment.estimate.delivery_date_to?.date,
+    ].filter(Boolean);
+    return [...new Set(dates)].join(' — ');
+  }
+
+  // A line offers a return request while it accepts one: an ordinary
+  // return inside the return period, a defect after it.
+  function requestLabel(kind: 'item' | 'option', refund: OrderRefundView) {
+    if (refund.window === 'defect') {
+      return kind === 'item' ? labels.supportDefect : labels.supportOptionDefect;
+    }
+
+    return kind === 'item' ? labels.support : labels.supportOption;
+  }
+
+  function refundTone(refund: OrderRefundView) {
+    if (!refund.package) {
+      return 'attention';
+    }
+    const tone = refundShipmentView(
+      refund.package.shipment_status,
+      returnLabels,
+    ).tone;
+    return tone === 'success' || tone === 'danger' ? tone : 'attention';
+  }
+
+  function refundPackageText(refund: OrderRefundView) {
+    return refund.package
+      ? refundShipmentView(refund.package.shipment_status, returnLabels).text
+      : '';
+  }
+
+  function ticketUrl(
+    ticket: number | undefined,
+    kind: 'item' | 'option',
+    id: number,
+  ) {
+    return safePublicUrl(ticketsHref({
+      ticket,
+      [kind]: id,
+      order: order.id,
+    }, locale));
+  }
+
+  function refundPanel(
+    refund: OrderRefundView,
+    kind: 'item' | 'option',
+    id: number,
+  ) {
+    if (!refund.active) {
+      return null;
+    }
+    const href = refund.ticketId
+      ? ticketUrl(refund.ticketId, kind, id)
+      : '';
+    return (
+      <div
+        className={`${styles.refund} ${kind === 'item' ? styles.indent : styles.optionIndent}`}
+        data-tone={refundTone(refund)}
+        data-order-item-refund={kind === 'item' ? '' : undefined}
+        data-order-option-refund={kind === 'option' ? '' : undefined}
+      >
+        <h5><Icon name="return" />{labels.returnTitle}</h5>
+        {refundPackageText(refund) ? (
+          <p>{refundPackageText(refund)}</p>
+        ) : null}
+        <dl className={styles.refundRows}>
+          {refund.counts.map((entry) => (
+            <div key={entry.key}>
+              <dt>{labels.returnCounts[entry.key]}</dt>
+              <dd>{entry.count}</dd>
+            </div>
+          ))}
+          {refund.amount ? (
+            <div><dt>{labels.returnAmount}</dt><dd>{money(refund.amount)}</dd></div>
+          ) : null}
+          {refund.package?.track?.track ? (
+            <div>
+              <dt>{labels.returnTrack}</dt>
+              <dd>{refund.package.track.track}</dd>
+            </div>
+          ) : null}
+        </dl>
+        {href ? <a className={styles.link} href={href}>{labels.ticket}</a> : null}
+      </div>
+    );
+  }
+
+  function download(
+    kind: OrderDownloadKind,
+    id: number,
+    filename: string,
+  ) {
+    if (!pending) {
+      onDownload?.(kind, id, filename);
+    }
+  }
+
+  function attachment(
+    kind: Exclude<OrderDownloadKind, 'group'>,
+    file: { attachment_id: number; filename: string; text: string },
+  ) {
+    const indent = kind === 'option' ? ` ${styles.optionIndent}` : '';
+    return (
+      <div key={file.attachment_id} className={`${styles.attachment}${indent}`}>
+        {file.text ? <p className={styles.pre}>{file.text}</p> : null}
+        {file.filename ? (
+          <div className={styles.attachmentRow}>
+            <p className={styles.muted}>{file.filename}</p>
+            <button
+              type="button"
+              disabled={pending}
+              aria-label={`${labels.download}: ${file.filename}`}
+              onClick={() => download(
+                kind,
+                file.attachment_id,
+                file.filename,
+              )}
+            >
+              <Icon name="download" />{labels.download}
+            </button>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  function itemLink(product: IProduct) {
+    return safePublicUrl(productHref(product.id, locale));
+  }
+
+  return (
+    <div className={styles.root} data-feature-part="OrderDetails">
+      <section className={styles.block} aria-labelledby={`order-${order.id}-status`}>
+        <h3 id={`order-${order.id}-status`}>{labels.status}</h3>
+        {steps.length ? (
+          <ol className={styles.steps} data-order-steps>
+            {steps.map((step) => (
+              <li
+                key={step.key}
+                className={styles.step}
+                data-step-state={step.state}
+                data-step-current={String(step.current)}
+              >
+                <span className={styles.stepMarker} aria-hidden="true">
+                  {step.state === 'done' && !step.current ? (
+                    <Icon name="check" strokeWidth="2.5" />
+                  ) : step.current ? <span className={styles.stepDot} /> : null}
+                </span>
+                <span className={styles.stepLabel}>{stepLabel(step)}</span>
+                {step.current ? (
+                  <span className={styles.stepState}>{labels.stepStates.current}</span>
+                ) : null}
+                {step.key === 'placed' && order.time_submited?.date ? (
+                  <span className={styles.stepNote}>{order.time_submited.date}</span>
+                ) : step.total > 1 ? (
+                  <span className={styles.stepNote}>
+                    {step.count} {labels.of} {step.total}
+                  </span>
+                ) : null}
+              </li>
+            ))}
+          </ol>
+        ) : null}
+        <p>{labels.statusHints[status.key]}</p>
+      </section>
+
+      <div className={styles.columns}>
+        <section className={styles.block} aria-labelledby={`order-${order.id}-recipient`}>
+          <h3 id={`order-${order.id}-recipient`}><Icon name="user" />{labels.recipient}</h3>
+          <dl className={styles.pairs}>
+            {recipient.name.trim() ? (
+              <div><dt>{labels.recipient}</dt><dd>{recipient.name}</dd></div>
+            ) : null}
+            {recipient.phone ? (
+              <div><dt>{labels.phone}</dt><dd>{recipient.phone}</dd></div>
+            ) : null}
+            {recipient.email ? (
+              <div><dt>{labels.email}</dt><dd>{recipient.email}</dd></div>
+            ) : null}
+          </dl>
+        </section>
+        <section className={styles.block} aria-labelledby={`order-${order.id}-payment-details`}>
+          <h3 id={`order-${order.id}-payment-details`}><Icon name="card" />{labels.payment}</h3>
+          <dl className={styles.pairs}>
+            {method ? <div><dt>{labels.method}</dt><dd>{method}</dd></div> : null}
+            <div>
+              <dt>{labels.status}</dt>
+              <dd><span className={styles.badge} data-tone={payment.tone}>
+                {labels.payments[payment.key]}
+              </span></dd>
+            </div>
+          </dl>
+        </section>
+      </div>
+
+      {shipments.length ? (
+        <section className={styles.divided} aria-labelledby={`order-${order.id}-shipments`}>
+          <h3 id={`order-${order.id}-shipments`}><Icon name="truck" />{labels.shipments}</h3>
+          <div className={styles.shipments}>
+            {shipments.map((shipment, index) => {
+              const shipmentBadge = orderShipmentState(order, shipment);
+              return (
+                <article
+                  key={shipment.id}
+                  className={styles.shipment}
+                  data-order-shipment
+                  aria-labelledby={`shipment-${shipment.id}-title`}
+                >
+                  <header>
+                    <h4 id={`shipment-${shipment.id}-title`}>
+                      {shipmentTitle(index)}
+                      {shipsFrom(shipment) ? (
+                        <small>{labels.shipsFrom}: {shipsFrom(shipment)}</small>
+                      ) : null}
+                    </h4>
+                    <span className={styles.badge} data-tone={shipmentBadge.tone}>
+                      <Icon name={shipmentBadge.icon} />
+                      {labels.shipmentStates[shipmentBadge.key]}
+                    </span>
+                  </header>
+                  <div className={styles.shipmentBody}>
+                    <dl className={styles.pairs}>
+                      {deliveryMethod(shipment) ? (
+                        <div><dt>{labels.delivery}</dt><dd>{deliveryMethod(shipment)}</dd></div>
+                      ) : null}
+                      {carrierName(shipment) ? (
+                        <div><dt>{labels.carrier}</dt><dd>{carrierName(shipment)}</dd></div>
+                      ) : null}
+                      {destination(shipment) ? (
+                        <div>
+                          <dt>{isPickup(shipment) ? labels.pickupPoint : labels.address}</dt>
+                          <dd>{destination(shipment)}</dd>
+                        </div>
+                      ) : null}
+                      {expected(shipment) ? (
+                        <div><dt>{labels.estimate}</dt><dd>{expected(shipment)}</dd></div>
+                      ) : null}
+                      {shipment.dates?.sent?.date ? (
+                        <div><dt>{labels.sentDate}</dt><dd>{shipment.dates.sent.date}</dd></div>
+                      ) : null}
+                      {shipment.dates?.delivery_date_real?.date ? (
+                        <div>
+                          <dt>{labels.deliveredDate}</dt>
+                          <dd>{shipment.dates.delivery_date_real.date}</dd>
+                        </div>
+                      ) : null}
+                      {shipment.dates?.returned_by_carrier?.date ? (
+                        <div>
+                          <dt>{labels.returnedByCarrierDate}</dt>
+                          <dd data-order-returned-by-carrier>
+                            {shipment.dates.returned_by_carrier.date}
+                          </dd>
+                        </div>
+                      ) : null}
+                      {shipment.track?.track ? (
+                        <div><dt>{labels.tracking}</dt><dd>
+                          <code className={styles.track} data-order-track>
+                            {shipment.track.track}
+                          </code>
+                        </dd></div>
+                      ) : null}
+                      {shipment.track?.status ? (
+                        <div><dt>{labels.trackingStatus}</dt><dd>{shipment.track.status}</dd></div>
+                      ) : null}
+                    </dl>
+                    <ul className={styles.items}>
+                      {(shipment.shipment_items ?? []).map((item) => {
+                        const itemRefund = orderItemRefund(item, currencyId);
+                        const href       = item.product ? itemLink(item.product) : '';
+                        const returned   = orderDigitalReturned(item);
+                        return (
+                          <li key={item.id} data-order-item>
+                            <div className={styles.itemMain}>
+                              <div className={styles.thumb}>
+                                <OrionplaceImage
+                                  src={item.product?.images?.small?.[0]}
+                                  alt={productName(item.product)}
+                                  width={64}
+                                  height={64}
+                                  className={styles.thumbImage}
+                                />
+                              </div>
+                              <div className={styles.itemInfo}>
+                                {item.product && href ? (
+                                  <a href={href}>{productName(item.product)}</a>
+                                ) : <p>{productName(item.product)}</p>}
+                                <strong data-order-item-total>
+                                  <span className={styles.screenReaderOnly}>{labels.lineTotal}:</span>
+                                  {money(item.prices.products_price_after_promo)}
+                                </strong>
+                                {orderItemVariant(item.product, locale) ? (
+                                  <small>{orderItemVariant(item.product, locale)}</small>
+                                ) : null}
+                                <small>
+                                  <span className={styles.screenReaderOnly}>{labels.quantity}:</span>
+                                  {unitLine(item)}
+                                </small>
+                              </div>
+                            </div>
+                            {refundPanel(itemRefund, 'item', item.id)}
+                            {!itemRefund.active && (item.ticket || itemRefund.window) ? (
+                              <a
+                                className={`${styles.link} ${styles.indent}`}
+                                href={ticketUrl(item.ticket?.id, 'item', item.id)}
+                              >
+                                {item.ticket ? labels.ticket : requestLabel('item', itemRefund)}
+                              </a>
+                            ) : null}
+                            {paid && (item.digital_stock?.length || returned) ? (
+                              <div className={`${styles.digital} ${styles.indent}`}>
+                                <h4>{labels.digital}</h4>
+                                {returned ? (
+                                  <p className={styles.muted} data-order-digital-returned>
+                                    {labels.digitalReturned}: {returned}
+                                  </p>
+                                ) : null}
+                                {(item.digital_stock ?? []).map((file) => attachment('product', file))}
+                              </div>
+                            ) : null}
+                            {orderFilledOptionGroups(item).length ? (
+                              <div className={styles.options} data-order-item-options>
+                                {orderFilledOptionGroups(item).map((group) => (
+                                  <div key={group.id} className={styles.optionGroup} data-order-option-group>
+                                    <h4>{groupName(group)}</h4>
+                                    {group.option_text_data ? (
+                                      <p className={styles.pre}>{group.option_text_data}</p>
+                                    ) : null}
+                                    {group.option_file_data ? (
+                                      <div className={styles.attachmentRow}>
+                                        <p className={styles.muted}>{labels.attachment}: {group.option_file_data}</p>
+                                        <button
+                                          type="button"
+                                          disabled={pending}
+                                          aria-label={`${labels.download}: ${group.option_file_data}`}
+                                          onClick={() => download('group', group.id, group.option_file_data)}
+                                        >
+                                          <Icon name="download" />{labels.download}
+                                        </button>
+                                      </div>
+                                    ) : null}
+                                    {group.options.length ? (
+                                      <ul className={styles.optionList}>
+                                        {group.options.map((option) => {
+                                          const optionView     = orderOptionRefund(option, currencyId);
+                                          const optionHref     = option.product ? itemLink(option.product) : '';
+                                          const optionReturned = orderDigitalReturned(option);
+                                          return (
+                                            <li key={option.id} className={styles.optionCard} data-order-option>
+                                              <div className={`${styles.itemMain} ${styles.optionMain}`}>
+                                                <div className={`${styles.thumb} ${styles.thumbSmall}`}>
+                                                  <OrionplaceImage
+                                                    src={option.product?.images?.small?.[0]}
+                                                    alt={productName(option.product)}
+                                                    width={48}
+                                                    height={48}
+                                                    className={styles.thumbImage}
+                                                  />
+                                                </div>
+                                                <div className={`${styles.itemInfo} ${styles.optionInfo}`}>
+                                                  {option.product && optionHref ? (
+                                                    <a href={optionHref}>{productName(option.product)}</a>
+                                                  ) : <p>{productName(option.product)}</p>}
+                                                  {hasMoney(option.prices?.options_price_after_promo) ? (
+                                                    <strong data-order-option-total>
+                                                      <span className={styles.screenReaderOnly}>{labels.lineTotal}:</span>
+                                                      {money(option.prices.options_price_after_promo)}
+                                                    </strong>
+                                                  ) : null}
+                                                  <small data-order-option-quantity>
+                                                    <span className={styles.screenReaderOnly}>{labels.quantity}:</span>
+                                                    {optionUnitLine(option)}
+                                                  </small>
+                                                </div>
+                                              </div>
+                                              {refundPanel(optionView, 'option', option.id)}
+                                              {!optionView.active && (option.ticket || optionView.window) ? (
+                                                <a
+                                                  className={`${styles.link} ${styles.optionIndent}`}
+                                                  href={ticketUrl(option.ticket?.id, 'option', option.id)}
+                                                >
+                                                  {option.ticket ? labels.ticket : requestLabel('option', optionView)}
+                                                </a>
+                                              ) : null}
+                                              {paid && optionReturned ? (
+                                                <p
+                                                  className={`${styles.muted} ${styles.optionIndent}`}
+                                                  data-order-digital-returned
+                                                >
+                                                  {labels.digitalReturned}: {optionReturned}
+                                                </p>
+                                              ) : null}
+                                              {paid
+                                                ? (option.digital_stock ?? []).map((file) => attachment('option', file))
+                                                : null}
+                                            </li>
+                                          );
+                                        })}
+                                      </ul>
+                                    ) : null}
+                                  </div>
+                                ))}
+                              </div>
+                            ) : null}
+                            {hasMoney(item.prices.options_price_after_promo) ? (
+                              <dl
+                                className={`${styles.pairs} ${styles.amounts} ${styles.itemSummary}`}
+                                data-order-item-summary
+                              >
+                                <div>
+                                  <dt>{labels.optionsTotal}</dt>
+                                  <dd>{money(item.prices.options_price_after_promo)}</dd>
+                                </div>
+                                <div className={styles.total}>
+                                  <dt>{labels.itemTotal}</dt>
+                                  <dd>{money(item.prices.total_price_after_promo)}</dd>
+                                </div>
+                              </dl>
+                            ) : null}
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </section>
+      ) : null}
+
+      {order.user_comment ? (
+        <section className={styles.divided} aria-labelledby={`order-${order.id}-comment`}>
+          <h3 id={`order-${order.id}-comment`}>{labels.comment}</h3>
+          <p className={styles.pre}>{order.user_comment}</p>
+        </section>
+      ) : null}
+    </div>
+  );
+}