import { coreState } from "@corejam/core-components";
import { authStore } from "@corejam/plugin-auth";
import { Component, h, Host, Prop, State, Watch } from "@stencil/core";
import gql from "graphql-tag";
import { orderById } from "../../../shared/graphql/Queries/Order";
import { OrderDB } from "../../../shared/types/Order";
@Component({
tag: "dershop-order-view",
})
export class OrderView {
@Prop() orderId: string;
@State() _data: OrderDB;
@Watch("orderId")
rerenderForId() {
this.queryData();
}
async queryData() {
const request = await coreState.client.query({
query: gql(orderById),
variables: {
id: this.orderId,
},
});
this._data = request.data.orderById;
}
async componentWillRender() {
if (authStore.identity) await this.queryData();
}
render() {
if (!authStore.identity) return Not authorized;
return (
Order Info - {this._data.id}
Product
Price
Quantity
Total
{this._data.items.map((item) => (
{item.product.name}
{item.price.net}€
{item.quantity}
{item.price.net * item.quantity}€
))}
Order Status
{this._data.status}
Shipping Address
{this._data.user.firstName} - {this._data.user.lastName}
{this._data.addressShipping.city} - {this._data.addressShipping.country}
Billing Address
{this._data.addressBilling.city} - {this._data.addressBilling.country}
Order Total
{this._data.price.net} €
);
}
}