Add navigation to App UI

src/components/AppContent.tsx

@@ -0,0 +1,10 @@
+import { Box } from "@saleor/macaw-ui";
+import React from "react";
+
+interface AppContentProps {
+  children: React.ReactNode;
+}
+
+export const AppContent = ({ children }: AppContentProps) => {
+  return <Box __height="90vh">{children}</Box>;
+};

src/components/Navigation.tsx

@@ -1,12 +1,33 @@
-import { Box } from "@saleor/macaw-ui";
+import { Box, ConfigurationIcon, HomeIcon, OrdersIcon, SellsIcon } from "@saleor/macaw-ui";
+import { NavigationTile } from "./NavigationTile";
+
+export const ROUTES = {
+  dashboard: "/dashboard",
+  checkout: "/checkout",
+  transactions: "/transactions",
+  configuration: "/configuration",
+} as const;
 
 export const Navigation = () => {
   return (
-    <Box width="100%" backgroundColor="default2" __height="10%">
+    <Box width="100%" backgroundColor="default2" __height="10vh">
       <Box display="flex" flexDirection="row" gap={4} padding={4}>
-        <Box>Home</Box>
-        <Box>Checkout</Box>
-        <Box>Dashboard</Box>
+        <NavigationTile href={ROUTES.dashboard}>
+          <HomeIcon />
+          Home
+        </NavigationTile>
+        <NavigationTile href={ROUTES.checkout}>
+          <OrdersIcon />
+          Quick checkout
+        </NavigationTile>
+        <NavigationTile href={ROUTES.transactions}>
+          <SellsIcon />
+          Event reporter
+        </NavigationTile>
+        <NavigationTile href={ROUTES.configuration}>
+          <ConfigurationIcon />
+          Configuration
+        </NavigationTile>
       </Box>
     </Box>
   );

src/components/NavigationTile.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Text } from "@saleor/macaw-ui";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+interface NavigationTileProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+export const NavigationTile = ({ href, children }: NavigationTileProps) => {
+  const router = useRouter();
+  const { pathname } = router;
+
+  const isActive = pathname === href;
+  return (
+    <Link href={href}>
+      <Text
+        padding={2}
+        borderRadius={4}
+        backgroundColor={
+          isActive
+            ? "default1Pressed"
+            : {
+                hover: "default1Hovered",
+              }
+        }
+        display="flex"
+        gap={2}
+      >
+        {children}
+      </Text>
+    </Link>
+  );
+};

src/pages/_app.tsx

@@ -10,12 +10,14 @@ import { ThemeProvider } from "@saleor/macaw-ui";
 import { NoSSRWrapper } from "../lib/no-ssr-wrapper";
 import { ThemeSynchronizer } from "../lib/theme-synchronizer";
 import { GraphQLProvider } from "../providers/GraphQLProvider";
+import { Navigation } from "../components/Navigation";
+import { AppContent } from "../components/AppContent";
 
 /**
  * Ensure instance is a singleton.
  * TODO: This is React 18 issue, consider hiding this workaround inside app-sdk
  */
-const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
+export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
 
 function NextApp({ Component, pageProps }: AppProps) {
   /**
@@ -32,10 +34,13 @@ function NextApp({ Component, pageProps }: AppProps) {
     <NoSSRWrapper>
       <AppBridgeProvider appBridgeInstance={appBridgeInstance}>
         <GraphQLProvider>
-          <ThemeProvider >
+          <ThemeProvider>
             <ThemeSynchronizer />
             <RoutePropagator />
-            <Component {...pageProps} />
+            <Navigation />
+            <AppContent>
+              <Component {...pageProps} />
+            </AppContent>
           </ThemeProvider>
         </GraphQLProvider>
       </AppBridgeProvider>

src/pages/checkout.tsx

@@ -1,14 +1,6 @@
 // pages/checkout.tsx
 import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
-import {
-  ArrowRightIcon,
-  Box,
-  Button,
-  Combobox,
-  ExternalLinkIcon,
-  Switch,
-  Text,
-} from "@saleor/macaw-ui";
+import { ArrowRightIcon, Box, Button, Combobox, ExternalLinkIcon, Text } from "@saleor/macaw-ui";
 import {
   useCompleteCheckoutMutation,
   useCreateCheckoutMutation,
@@ -90,104 +82,109 @@ const CheckoutPage = () => {
   console.log(response);
 
   return (
-    <Box display="flex" flexDirection="column" alignItems="center" gap={4}>
-      <Text size={8} marginTop={4}>
-        Quick checkout tool
-      </Text>
-      <Box display="flex" gap={4} marginTop={2} alignItems="center">
-        <Button onClick={() => handleExecuteCheckoutCreate()}>Create checkout</Button>
-        <ArrowRightIcon />
-        <Button onClick={() => handleExecuteDeliveryUpdate()} disabled={!checkoutCreateResult.data}>
-          Set delivery
-        </Button>
-        <ArrowRightIcon />
-        <Button
-          disabled={!checkoutCreateResult.data}
-          onClick={() => handleExecuteInitializeTransaction()}
-        >
-          Initialize transaction
-        </Button>
-        <ArrowRightIcon />
-        <Button
-          disabled={!checkoutCreateResult.data || !deliveryUpdateResult.data}
-          onClick={() => handleExecuteCompleteCheckout()}
-        >
-          Complete checkout
-        </Button>
-      </Box>
-      <Box display="flex" gap={2} alignItems="center">
-        <Text>Select transaction response:</Text>
-        <Combobox
-          // label="Transaction response"
-          options={transactionEventTypeSchema.options.map((value) => ({
-            label: value,
-            value,
-          }))}
-          value={response}
-          onChange={(value) => setResponse(value as TransactionResponseOptions)}
-          size="small"
-          __width="250px"
-        />
-      </Box>
-      {checkoutCreateResult.data && (
-        <Box display="flex" flexDirection="column" gap={4}>
-          <Box display="flex" flexDirection="column" gap={2}>
-            <Text fontWeight="bold">Checkout created: </Text>
-            <Text>
-              Checkout ID: {checkoutCreateResult.data.checkoutCreate?.checkout?.id ?? "Error"}
-            </Text>
-            <Text>
-              Available gateways:{" "}
-              {checkoutCreateResult.data.checkoutCreate?.checkout?.availablePaymentGateways?.map(
-                (gateway) => <Text key={gateway?.id}>{gateway?.name} </Text>
-              ) ?? "Error "}
-            </Text>
-          </Box>
-          {deliveryUpdateResult.data &&
-            (!!deliveryUpdateResult.error ? (
-              <Text color="critical1" fontWeight="bold">
-                Error setting shipping method
+    <>
+      <Box display="flex" flexDirection="column" alignItems="center" gap={4}>
+        <Text size={8} marginTop={4}>
+          Quick checkout tool
+        </Text>
+        <Box display="flex" gap={4} marginTop={2} alignItems="center">
+          <Button onClick={() => handleExecuteCheckoutCreate()}>Create checkout</Button>
+          <ArrowRightIcon />
+          <Button
+            onClick={() => handleExecuteDeliveryUpdate()}
+            disabled={!checkoutCreateResult.data}
+          >
+            Set delivery
+          </Button>
+          <ArrowRightIcon />
+          <Button
+            disabled={!checkoutCreateResult.data}
+            onClick={() => handleExecuteInitializeTransaction()}
+          >
+            Initialize transaction
+          </Button>
+          <ArrowRightIcon />
+          <Button
+            disabled={!checkoutCreateResult.data || !deliveryUpdateResult.data}
+            onClick={() => handleExecuteCompleteCheckout()}
+          >
+            Complete checkout
+          </Button>
+        </Box>
+        <Box display="flex" gap={2} alignItems="center">
+          <Text>Select transaction response:</Text>
+          <Combobox
+            // label="Transaction response"
+            options={transactionEventTypeSchema.options.map((value) => ({
+              label: value,
+              value,
+            }))}
+            value={response}
+            onChange={(value) => setResponse(value as TransactionResponseOptions)}
+            size="small"
+            __width="250px"
+          />
+        </Box>
+        {checkoutCreateResult.data && (
+          <Box display="flex" flexDirection="column" gap={4}>
+            <Box display="flex" flexDirection="column" gap={2}>
+              <Text fontWeight="bold">Checkout created: </Text>
+              <Text>
+                Checkout ID: {checkoutCreateResult.data.checkoutCreate?.checkout?.id ?? "Error"}
               </Text>
-            ) : (
-              <Text fontWeight="bold">Shipping method set!</Text>
-            ))}
-          <Box display="flex" flexDirection="column" gap={2}>
-            {transactionInitializeResult.data && (
-              <>
-                <Text fontWeight="bold">Transaction initialized: </Text>
-                <Text>
-                  {transactionInitializeResult.data.transactionInitialize?.transactionEvent
-                    ?.pspReference ?? "Error PSP Reference"}
+              <Text>
+                Available gateways:{" "}
+                {checkoutCreateResult.data.checkoutCreate?.checkout?.availablePaymentGateways?.map(
+                  (gateway) => <Text key={gateway?.id}>{gateway?.name} </Text>
+                ) ?? "Error "}
+              </Text>
+            </Box>
+            {deliveryUpdateResult.data &&
+              (!!deliveryUpdateResult.error ? (
+                <Text color="critical1" fontWeight="bold">
+                  Error setting shipping method
                 </Text>
-                <Text>
-                  {transactionInitializeResult.data.transactionInitialize?.transactionEvent?.type ??
-                    "Error type"}
+              ) : (
+                <Text fontWeight="bold">Shipping method set!</Text>
+              ))}
+            <Box display="flex" flexDirection="column" gap={2}>
+              {transactionInitializeResult.data && (
+                <>
+                  <Text fontWeight="bold">Transaction initialized: </Text>
+                  <Text>
+                    {transactionInitializeResult.data.transactionInitialize?.transactionEvent
+                      ?.pspReference ?? "Error PSP Reference"}
+                  </Text>
+                  <Text>
+                    {transactionInitializeResult.data.transactionInitialize?.transactionEvent
+                      ?.type ?? "Error type"}
+                  </Text>
+                </>
+              )}
+            </Box>
+
+            {completeCheckoutResult.data && (
+              <Box
+                onClick={() =>
+                  navigateToOrder(completeCheckoutResult.data?.checkoutComplete?.order?.id ?? "")
+                }
+                cursor="pointer"
+                color="accent1"
+                display="flex"
+                gap={2}
+                alignItems="center"
+              >
+                <ExternalLinkIcon />
+                <Text fontWeight="bold" color="accent1">
+                  Created order{" "}
+                  {completeCheckoutResult.data.checkoutComplete?.order?.number ?? "Error"}
                 </Text>
-              </>
+              </Box>
             )}
           </Box>
-
-          {completeCheckoutResult.data && (
-            <Box
-              onClick={() =>
-                navigateToOrder(completeCheckoutResult.data?.checkoutComplete?.order?.id ?? "")
-              }
-              cursor="pointer"
-              color="accent1"
-              display="flex"
-              gap={2}
-              alignItems="center"
-            >
-              <ExternalLinkIcon />
-              <Text fontWeight="bold" color="accent1">
-                Created order{" "}
-                {completeCheckoutResult.data.checkoutComplete?.order?.number ?? "Error"}
-              </Text>
-            </Box>
-          )}
-        </Box>
-      )}
-    </Box>
+        )}
+      </Box>
+    </>
   );
 };
 

src/pages/configuration.tsx

@@ -0,0 +1,21 @@
+import { Box, Text } from "@saleor/macaw-ui";
+
+const ConfigurationPage = () => {
+  return (
+    <>
+      <Box
+        display="flex"
+        flexDirection="column"
+        height="100%"
+        width="100%"
+        justifyContent="center"
+        alignItems="center"
+        gap={4}
+      >
+        <Text size={7}>🚀 Welcome to Dummy Payment App!</Text>
+      </Box>
+    </>
+  );
+};
+
+export default ConfigurationPage;

src/pages/dashboard.tsx

@@ -1,12 +1,9 @@
 // pages/dashboard.tsx
-import { Box, Switch, Text } from "@saleor/macaw-ui";
-import { Navigation } from "../components/Navigation";
-import Link from "next/link";
+import { Box, Text } from "@saleor/macaw-ui";
 
 const DashboardPage = () => {
   return (
     <>
-      <Navigation />
       <Box
         display="flex"
         flexDirection="column"
@@ -16,23 +13,7 @@ const DashboardPage = () => {
         alignItems="center"
         gap={4}
       >
-        <Switch defaultValue="1">
-          <Switch.Item id="1" value="1">
-            <Link href="/checkout">Create checkout</Link>
-          </Switch.Item>
-          <Switch.Item id="2" value="2">
-            Create transaction
-          </Switch.Item>
-        </Switch>
-        <Box display="flex" flexDirection="row" gap={4} backgroundColor="default2">
-          <Text size={4}>Create checkout</Text>
-          <Text size={4}>Create transaction</Text>
-          <Text size={4}>Transasction list</Text>
-          <Text size={4}>Flow settings</Text>
-        </Box>
-        <Box __width="75%" textAlign="center">
-          <Text size={5}>Welcome to the Dummy Payment App Dashboard</Text>
-        </Box>
+        <Text size={7}>🚀 Welcome to Dummy Payment App!</Text>
       </Box>
     </>
   );