feat(common): add order page for modal

Author: chanceaclark

components/error.tsx

@@ -1,11 +1,23 @@
 import { H3, Panel } from '@bigcommerce/big-design';
-import { ErrorMessageProps } from '../types';
+import { ErrorMessageProps, ErrorProps } from '../types';
 
-const ErrorMessage = ({ error }: ErrorMessageProps) => (
-    <Panel>
+const ErrorContent = ({ message }: Pick<ErrorProps, 'message'>) => (
+    <>
         <H3>Failed to load</H3>
-        {error && error.message}
-    </Panel>
-);
+        {message}
+    </>
+)
+
+const ErrorMessage = ({ error, renderPanel = true }: ErrorMessageProps) => {
+    if (renderPanel) {
+        return (
+            <Panel>
+                <ErrorContent message={error.message} />
+            </Panel>
+        )
+    }
+
+    return <ErrorContent message={error.message} />
+};
 
 export default ErrorMessage;

components/header.tsx

@@ -13,13 +13,19 @@ export const TabRoutes = {
     [TabIds.PRODUCTS]: '/products',
 };
 
+const HeaderlessRoutes = [
+    '/orders/[orderId]/labels',
+    '/orders/[orderId]/modal',
+]
+
 const InnerRoutes = [
     '/products/[pid]',
 ];
 
 const HeaderTypes = {
     GLOBAL: 'global',
     INNER: 'inner',
+    HEADERLESS: 'headerless',
 };
 
 const Header = () => {
@@ -32,6 +38,8 @@ const Header = () => {
         if (InnerRoutes.includes(pathname)) {
             // Use InnerHeader if route matches inner routes
             setHeaderType(HeaderTypes.INNER);
+        } else if (HeaderlessRoutes.includes(pathname)) {
+            setHeaderType(HeaderTypes.HEADERLESS);
         } else {
             // Check if new route matches TabRoutes
             const tabKey = Object.keys(TabRoutes).find(key => TabRoutes[key] === pathname);
@@ -59,6 +67,7 @@ const Header = () => {
         return router.push(TabRoutes[tabId]);
     };
 
+    if (headerType === HeaderTypes.HEADERLESS) return null;
     if (headerType === HeaderTypes.INNER) return <InnerHeader />;
 
     return (

lib/auth.ts

@@ -23,15 +23,16 @@ const bigcommerceSigned = new BigCommerce({
     responseType: 'json',
 });
 
-export function bigcommerceClient(accessToken: string, storeHash: string) {
+export function bigcommerceClient(accessToken: string, storeHash: string, apiVersion = 'v3') {
     return new BigCommerce({
         clientId: CLIENT_ID,
         accessToken,
         storeHash,
         responseType: 'json',
-        apiVersion: 'v3',
+        apiVersion,
     });
 }
+
 // Authorizes app on install
 export function getBCAuth(query: QueryParams) {
     return bigcommerce.authorize(query);

lib/hooks.ts

@@ -1,6 +1,6 @@
 import useSWR from 'swr';
 import { useSession } from '../context/session';
-import { ErrorProps, ListItem, QueryParams } from '../types';
+import { ErrorProps, ListItem, Order, QueryParams } from '../types';
 
 async function fetcher(url: string, query: string) {
     const res = await fetch(`${url}?${query}`);
@@ -60,3 +60,18 @@ export function useProductInfo(pid: number, list: ListItem[]) {
         error,
     };
 }
+
+export const useOrder = (orderId: number) => {
+    const { context } = useSession();
+    const params = new URLSearchParams({ context }).toString();
+    const shouldFetch = context && orderId !== undefined;
+
+    // Conditionally fetch orderId is defined
+    const { data, error } = useSWR<Order, ErrorProps>(shouldFetch ? [`/api/orders/${orderId}`, params] : null, fetcher);
+
+    return {
+        order: data,
+        isLoading: !data && !error,
+        error,
+    };
+}

pages/_app.tsx

@@ -9,7 +9,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
     return (
         <ThemeProvider theme={defaultTheme}>
             <GlobalStyles />
-            <Box marginHorizontal="xxxLarge" marginVertical="xxLarge">
+            <Box
+                marginHorizontal={{ mobile: 'none', tablet: 'xxxLarge' }}
+                marginVertical={{ mobile: 'none', tablet: "xxLarge" }}
+            >
                 <Header />
                 <SessionProvider>
                     <Component {...pageProps} />

pages/api/orders/[orderId]/index.ts

@@ -0,0 +1,33 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { bigcommerceClient, getSession } from '../../../../lib/auth';
+
+export default async function orderId(req: NextApiRequest, res: NextApiResponse) {
+    const {
+        query: { orderId },
+        method,
+    } = req;
+
+    try {
+        const { accessToken, storeHash } = await getSession(req);
+        const bigcommerce = bigcommerceClient(accessToken, storeHash , 'v2');
+
+        switch (method) {
+            case 'GET': {
+                const data = await bigcommerce.get(`/orders/${orderId}`);
+
+                res.status(200).json(data);
+
+                break;
+            }
+        
+            default: {
+                res.setHeader('Allow', ['GET']);
+                res.status(405).end(`Method ${method} Not Allowed`);
+            }
+        }
+        
+    } catch (error) {
+        const { message, response } = error;
+        res.status(response?.status || 500).json({ message });
+    }
+}

pages/orders/[orderId]/modal.tsx

@@ -0,0 +1,121 @@
+import { Badge, Flex, Grid, GridItem, H3, Text } from '@bigcommerce/big-design';
+import { useRouter } from 'next/router';
+import React from 'react';
+import styled from 'styled-components';
+
+import ErrorMessage from '../../../components/error';
+import { useOrder } from '../../../lib/hooks';
+import { Order } from '../../../types';
+
+const StyledAddress = styled.address`
+    color: ${({ theme }) => theme.colors.secondary70};
+    font-style: normal;
+    line-height: ${({ theme }) => theme.lineHeight.medium};
+`;
+
+const StyledDl = styled.dl`
+    color: ${({ theme }) => theme.colors.secondary70};
+    display: grid;
+    grid-template: 'dt dd' auto / 1fr auto;
+    grid-auto-rows: auto;
+    line-height: ${({ theme }) => theme.lineHeight.medium};
+    margin: 0;
+
+    dt {
+        grid-area: 'dt';
+    }
+
+    dd {
+        grid-area: 'dd';
+        text-align: right;
+    }
+`;
+
+const InternalOrderModalPage = (order: Order) => {
+    const { billing_address } = order;
+
+    const formatCurrency = (amount: string) =>
+        new Intl.NumberFormat(order.customer_locale, { style: 'currency', currency: order.currency_code }).format(parseFloat(amount));
+
+    return (
+        <Grid gridColumns="repeat(auto-fill, minmax(16rem, 1fr))" gridGap="3rem">
+            <GridItem>
+                <H3>Billing information</H3>
+                <StyledAddress>
+                    <div>
+                        {billing_address.first_name} {billing_address.last_name}
+                    </div>
+                    <div>{billing_address.street_1}</div>
+                    {billing_address.street_2 && <div>{billing_address.street_2}</div>}
+                    <div>
+                        {billing_address.city}, {billing_address.state}, {billing_address.zip}
+                    </div>
+                    <div>{billing_address.country}</div>
+                </StyledAddress>
+            </GridItem>
+            <GridItem>
+                <Flex
+                    alignItems="center"
+                    flexDirection="row"
+                    flexWrap="nowrap"
+                    justifyContent="space-between"
+                    marginBottom="small"
+                >
+                    <H3 marginBottom="none">Payment details</H3>
+                    <Badge label={order.payment_status} variant="success" />
+                </Flex>
+                <StyledDl>
+                    <dt>Subtotal</dt>
+                    <dd>{formatCurrency(order.subtotal_ex_tax)}</dd>
+                    <dt>Discount</dt>
+                    <dd>-{formatCurrency(order.discount_amount)}</dd>
+                    <dt>Shipping</dt>
+                    <dd>{formatCurrency(order.shipping_cost_ex_tax)}</dd>
+                    <dt>Tax</dt>
+                    <dd>{formatCurrency(order.total_tax)}</dd>
+                    <dt>
+                        <Text as="span" bold marginBottom="none">Grand total</Text>
+                    </dt>
+                    <dd>
+                        <Text as="span" bold  marginBottom="none">{formatCurrency(order.total_inc_tax)}</Text>
+                    </dd>
+                </StyledDl>
+            </GridItem>
+            <GridItem>
+                <H3>Order information</H3>
+                <StyledDl>
+                    <dt>ID</dt>
+                    <dd>{order.id}</dd>
+                    <dt>Type</dt>
+                    <dd>
+                        <span style={{ textTransform: 'capitalize' }}>{order.order_source}</span>
+                    </dd>
+                    <dt>Status</dt>
+                    <dd>{order.status}</dd>
+                    <dt>Total items</dt>
+                    <dd>
+                        {order.items_total > 1 ? `${order.items_total} items` : `${order.items_total} item`}
+                    </dd>
+                </StyledDl>
+            </GridItem>
+        </Grid>
+    );
+};
+
+const OrderModalPage = () => {
+    const router = useRouter();
+    const { orderId } = router.query;
+    const { isLoading, order, error } = useOrder(parseInt(`${orderId}`, 10));
+
+    if (isLoading) {
+        return null;
+    }
+
+    if (error) {
+        return <ErrorMessage error={error} renderPanel={false} />
+    }
+
+    return <InternalOrderModalPage {...order} />;
+};
+
+export default OrderModalPage;

types/error.ts

@@ -4,4 +4,5 @@ export interface ErrorProps extends Error {
 
 export interface ErrorMessageProps {
     error?: ErrorProps;
+    renderPanel?: boolean;
 }

types/index.ts

@@ -2,3 +2,4 @@ export * from './auth';
 export * from './data';
 export * from './db';
 export * from './error';
+export * from './order';

types/order.ts

@@ -0,0 +1,30 @@
+export interface BillingAddress {
+    // Additional fields exist, type as needed
+    [key: string]: unknown;
+    first_name: string;
+    last_name: string;
+    street_1: string;
+    street_2: string;
+    city: string;
+    state: string;
+    zip: string;
+    country: string;
+}
+
+export interface Order {
+    // Additional fields exist, type as needed
+    [key: string]: unknown;
+    billing_address: BillingAddress;
+    currency_code: string;
+    customer_locale: string;
+    discount_amount: string;
+    id: number;
+    items_total: number;
+    order_source: string;
+    payment_status: string;
+    status: string;
+    subtotal_ex_tax: string;
+    shipping_cost_ex_tax: string;
+    total_inc_tax: string;
+    total_tax: string;
+}