orionplace-react 0.7.7 → 0.8.0

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

@@ -1,693 +0,0 @@
-'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>
-  );
-}