useUserOrder

Features

useUserOrder composable is responsible, as it's name suggests for interactions with user's order history

API

• search - a main querying function that is used to query user's order history and populate the orders object with the result. This method accepts a single params object. The params has the following options:

  • params: OrderSearchParams

type OrderSearchParams = {
  orderId?: string;
  requestParams?: {
    [param: string]: string | string[];
  };
};

search(params: OrderSearchParams): Promise<void>;

---

• orders: Order[] - a main data object that contains an array of orders fetched by searchOrders method.

type Order = {
  id: string;
  attributes: OrderAttributes;
};

interface OrderAttributes {
  merchantReferences: string[];
  itemStates: string[];
  createdAt: string;
  currencyIsoCode: string;
  priceMode: string;
  billingAddress?: CustomerAddressAttributes;
  shippingAddress?: CustomerAddressAttributes;
  bundleItems?: any[];
  calculatedDiscounts?: any[];
  expenses?: any[];
  items?: OrderItem[];
  payments?: {
    amount: number;
    paymentMethod: string;
    paymentProvider: string;
  }[];
  shipments?: {
    carrierName: string;
    currencyIsoCode: string;
    defaultGrossPrice: number;
    defaultNetPrice: number;
    deliveryTime: string | null;
    shipmentMethodName: string;
  }[];
  totals: {
    expenseTotal: number;
    discountTotal: number;
    taxTotal: number;
    subtotal: number;
    grandTotal: number;
    canceledTotal: number;
    remunerationTotal: number;
  };
}

---

• loading: boolean - a reactive object containing information about loading state of your searchOrders method.

---

• error: UseUserOrderErrors - reactive object containing the error message, if some properties failed for any reason.

interface UseUserOrderErrors {
  search: Error;
}

Getters

• getDate - returns order date.

• getId - returns order Id.

• getStatus - returns order status.

• getPrice - returns order price.

• getItems - returns order items.

• getItemSku - returns order item sku.

• getItemName - returns order item name.

• getItemQty - returns order item quantity.

• getItemPrice - returns order item price.

• getFormattedPrice - returns order price with currency sign.

• getItemImage - returns order item image

• getOrderCurrency - returns order item currency

• getItemLink - returns order item link

• getItemPriceExtended - returns order item extended price.

• getOrderStatusExtended - returns order item extended status.

• getFormattedPriceExtended - returns order item extended price with currency sign.

interface UserOrderGetters {
  getDate: (order: Order) => string;
  getId: (order: Order) => string;
  getStatus: (order: Order) => string;
  getPrice: (order: Order) => number;
  getItems: (order: Order) => OrderItem[];
  getItemSku: (item: OrderItem) => string;
  getItemName: (item: OrderItem) => string;
  getItemQty: (item: OrderItem) => number;
  getItemPrice: (item: OrderItem) => number;
  getFormattedPrice: (price: number) => string;
  getItemImage: (item: OrderItem) => string;
  getFormattedPriceExtended: (item: OrderItem) => string | null;
  getOrderCurrency: (item: OrderItem) => string;
  getItemLink: (item: OrderItem) => string;
  getItemPriceExtended: (item: OrderItem) => AgnosticPrice;
  getOrderStatusExtended: (order: Order) => string[];
}

type Order = {
  id: string;
  attributes: OrderAttributes;
};

type OrderItem = {
  amount: number | null;
  bundleItemIdentifier: string | null;
  calculatedDiscounts: any[];
  canceledAmount: number;
  idShipment: number;
  isReturnable: boolean;
  merchantReference: string | null;
  metadata: {
    superAttributes: {
      value: string;
    };
    image: string;
  };
  name: string;
  orderReference: string | null;
  productOptions: any[];
  quantity: number;
  refundableAmount: number;
  relatedBundleItemIdentifier: any;
  salesOrderConfiguredBundle: any;
  salesOrderConfiguredBundleItem: any;
  salesUnit: any;
  sku: string;
  state: string;
  sumDiscountAmountAggregation: number;
  sumDiscountAmountFullAggregation: number;
  sumExpensePriceAggregation: any;
  sumGrossPrice: number;
  sumNetPrice: number;
  sumPrice: number;
  sumPriceToPayAggregation: number;
  sumProductOptionPriceAggregation: number;
  sumSubtotalAggregation: number;
  sumTaxAmountFullAggregation: number;
  taxAmountAfterCancellation: any;
  taxRate: string;
  taxRateAverageAggregation: string;
  unitDiscountAmountAggregation: number;
  unitDiscountAmountFullAggregation: number;
  unitExpensePriceAggregation: number;
  unitGrossPrice: number;
  unitNetPrice: number;
  unitPrice: number;
  unitPriceToPayAggregation: number;
  unitProductOptionPriceAggregation: number;
  unitSubtotalAggregation: number;
  unitTaxAmountFullAggregation: number;
  uuid: string;
};

Example

import { useUserOrder, orderGetters } from '@spryker-vsf/composables'';
import { onSSR } from '@vue-storefront/core';

export default {
  setup() {
    const { orders, search, loading, error } = useUserOrder();

    onSSR(async () => {
      await search();
    });

    return {
      // extract a list of orders from a `orders` object
      orders: computed(() => orderGetters.getItems(shipping.value)),
    };
  },
};