Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 4x 4x | import React, { FC, useEffect, useMemo, useState } from 'react';
import { RouteComponentProps } from '@reach/router';
import { Layout } from './Layout';
import { useTranslation } from 'react-i18next';
import { Loading } from 'ag-ems-ui-library';
import { format, formatToPrice } from '../../helpers';
import { navigate } from 'gatsby';
import { useQuery } from '@apollo/client';
import { GET_STRAPI_PRODUCTS } from '../../contexts/cartContext/queries';
import { STRAPI_URL } from '../../configs/config';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
import { GET_USER_ORDER } from '../../contexts/userContext/queries';
const styles = require('./Profile.module.css');
export const UserOrder: FC<RouteComponentProps<{ number: string }>> = ({ number }) => {
const { t } = useTranslation();
const { data: orderData } = useQuery(GET_USER_ORDER, {
variables: { orderNumber: number }
});
const order = useMemo(() =>
orderData
? orderData.customer.orders.total_count > 0
? orderData.customer.orders.items[0]
: navigate('/profile/orders')
: null,
[orderData]);
const { data: strapiData } = useQuery(GET_STRAPI_PRODUCTS, {
variables: { ids: order ? order.items.map(item => item.product_sku) : [] },
context: { client: 'strapi' },
skip: !order
});
const [products, setProducts] = useState<any[]>();
useEffect(() => {
if (order && strapiData) {
const products = order.items.map(item => {
const strapiProduct = strapiData.products.filter(product => product.sku === item.product_sku);
return {
...item,
strapiProduct: strapiProduct.length ? strapiProduct[0] : null
}
});
setProducts(products);
}
}, [order, strapiData]);
console.groupCollapsed('Order');
console.log(order);
console.groupEnd();
console.groupCollapsed('Products');
console.log(products);
console.groupEnd();
// const [preloader, setPreloader] = useState(false);
const productItems = useMemo(() =>
products ? products.map(product =>
product.strapiProduct
? <div key={product.product_sku} className={styles.ProfileOrderProduct}>
<Link className={styles.ProfileOrderProductImage} to={'/' + product.strapiProduct.slug}>
<img
src={STRAPI_URL + product.strapiProduct.thumbnail.formats.thumbnail.url}
alt={product.strapiProduct.name}
/>
</Link>
<p className={styles.ProfileOrderProductLocation}>{product.strapiProduct.location.name}</p>
<Link className={styles.ProfileOrderProductName} to={'/' + product.strapiProduct.slug}>
{product.strapiProduct.name} ({product.product_sku})
</Link>
{/*<div className={styles.ProfileOrderProductQuantity}>*/}
{/* {product.quantity_ordered}*/}
{/*</div>*/}
<p>
{formatToPrice(product.product_sale_price.value)} x {product.quantity_ordered}
</p>
</div>
: <div key={product.product_sku} className={styles.ProfileOrderProduct}>{t('noData')}</div>
) : null, [products]);
return <Layout current="orders" classes={styles.ProfileOrders}>
<h1>{t('order')} #{number}</h1>
{order && strapiData ? <>
<div className={`${styles.ProfileOrder} ${styles.ProfileOrdersHeader}`}>
<p className={styles.ProfileOrderNumber}><span className={styles.ProfileOrderProp}>{t('order')}</span></p>
<p className={styles.ProfileOrderDate}><span className={styles.ProfileOrderProp}>{t('date')}</span></p>
<p className={styles.ProfileOrderTotal}><span className={styles.ProfileOrderProp}>{t('orderTotal')}</span></p>
<p className={styles.ProfileOrderStatus}><span className={styles.ProfileOrderProp}>{t('status')}</span></p>
</div>
<div key={order.id} className={styles.ProfileOrder}>
<p className={`${styles.ProfileOrderNumber} ${styles.black}`}>
<span className={styles.ProfileOrderProp}>{t('order')}:</span>
{order.number}
</p>
<p className={styles.ProfileOrderDate}>
<span className={styles.ProfileOrderProp}>{t('date')}:</span>
{format(order.order_date, 'dd.MM.yyyy')}
</p>
<p className={styles.ProfileOrderTotal}>
<span className={styles.ProfileOrderProp}>{t('orderTotal')}:</span>
{formatToPrice(order.total.grand_total.value)}
</p>
<p className={styles.ProfileOrderStatus}>
<span className={styles.ProfileOrderProp}>{t('status')}:</span>
{order.status}
</p>
</div>
<div className={styles.ProfileOrderProducts}>
<h2>{t('checkout.products')}</h2>
{productItems}
</div>
</> : <Loading color="#007c00" />}
{/*{preloader && <Loading color="#007c00" />}*/}
</Layout>;
};
|