Page Design

In the Business Buddy app, the Products page looks like this:

We create a design like this, one that is consistent with the rest of the pages in the dashboard, using the React components provided by the Wix Design System.

Products page

In the Business Buddy app, the Products page is built from:

  • Two main components
  • One wrapper component for initializing React context providers
  • Some CSS

The Products page UI is defined as follows in the dashboard folder:

  • /pages/products/page.tsx: The header and the top cell that it used for selecting the product to chat about
  • /pages/products/ProductChat.tsx: The bottom cell that displays the selected product and the chat
  • /pages/products/ProductChat.module.css: CSS for the ProductChat component
  • /withProviders.tsx: QueryClientProvider and WixStyleReactProvider wrapper

Let's take a look at the code used to build the page's UI. We'll take a look at the code for the page's functionality a bit later.

page.tsx

Notice how the code uses components from the Wix Design System to build the page. Other than that, it's pretty much just a standard React component.

Note: At this point, we're showing the code with a hardcoded, dummy product object just to demonstrate how the page will look once a product is selected. We'll see how to get a real product in there a bit later.

Copy
1
import {
2
  AutoComplete,
3
  Card,
4
  Cell,
5
  Divider,
6
  Layout,
7
  Page,
8
} from '@wix/design-system';
9
import '@wix/design-system/styles.global.css';
10
import React from 'react';
11
import { withProviders } from '../../withProviders';
12
import { ProductChat } from './ProductChat';
13
import './styles.global.css';
14


15
export default withProviders(function ProductsPage() {
16
  const [currentProduct, setCurrentProduct] = React.useState({
17
    name: 'Test Name',
18
    sku: 'Test SKU',
19
  });
20
  const [searchQuery, setSearchQuery] = React.useState('');
21


22
  return (
23
    <Page>
24
      <Page.Header title='Chat about Products' />
25
      <Page.Content>
26
        <Layout>
27
          <Cell>
28
            <Card>
29
              <Card.Header title='Select a product to chat about' />
30
              <Card.Content>
31
                <AutoComplete
32
                  placeholder='Select product to chat about'
33
                  size='large'
34
                />
35
              </Card.Content>
36
            </Card>
37
          </Cell>
38


39
          <Divider />
40
          <Cell>
41
            {currentProduct && <ProductChat product={currentProduct} />}
42
          </Cell>
43
        </Layout>
44
      </Page.Content>
45
    </Page>
46
  );
47
});

ProductChat.tsx

Here again, the code uses Wix Design System components to build the component UI.

Copy
1
import { Text, Box, Card, Input, Loader } from '@wix/design-system';
2
import { products } from '@wix/stores';
3
import React from 'react';
4
import * as Icons from '@wix/wix-ui-icons-common';
5
import styles from './ProductChat.module.css';
6


7
type Message = {
8
  author: 'Business Buddy' | 'User';
9
  text: string;
10
};
11


12
export function ProductChat(props: { product: products.Product }) {
13
  const [isWaitingForBusinessBuddy, setIsWaitingForBusinessBuddy] =
14
    React.useState(false);
15
  const [messageDraft, setMessageDraft] = React.useState<string | undefined>(
16
    undefined
17
  );
18
  const [chatMessages, setChatMessages] = React.useState([] as Message[]);
19


20
  return (
21
    <Card>
22
      <Card.Header
23
        title={`Ask Business Buddy about "${props.product.name}"`}
24
        subtitle={`SKU: ${props.product.sku}`}
25
      />
26
      <Card.Content>
27
        <Box width={'100%'}>
28
          <Input
29
            disabled={isWaitingForBusinessBuddy}
30
            className={styles.userInput}
31
            suffix={
32
              <Input.IconAffix>
33
                <Icons.Send />
34
              </Input.IconAffix>
35
            }
36
            placeholder='Ask Business Buddy something...'
37
            onChange={(e) => {
38
              setMessageDraft(e.target.value);
39
            }}
40
            value={messageDraft}
41
          />
42
        </Box>
43
        {chatMessages.map((message) => (
44
          <Box>
45
            <Text tabName='p'>
46
              <b>{message.author}</b>: {message.text}
47
            </Text>
48
          </Box>
49
        ))}
50
        {isWaitingForBusinessBuddy && (
51
          <Box align='center' padding='8px 0px'>
52
            <Loader size='small' />
53
          </Box>
54
        )}
55
      </Card.Content>
56
    </Card>
57
  );
58
}

ProductChat.module.css

You can also use CSS to style the elements in a component.

This ProductChat component uses the following CSS to define the width of the input element.

Copy
1
.userInput {
2
  width: 100%;
3
}

withProviders.tsx

Finally, here is the code for the QueryClientProvider wrapper. We use the withDashboard() higher order component from the Wix Dashboard React SDK to wrap this component. This will allow us to make Wix SDK calls from inside the component's code.

Note: Make sure to install both the @wix/dashboard-react and @wix/sdk-react packages to use with this code.

Copy
1
import React from 'react';
2
import { QueryClient, QueryClientProvider } from 'react-query';
3
import { WixStyleReactProvider } from '@wix/design-system';
4
import { withDashboard } from '@wix/dashboard-react';
5


6
export function withProviders(Component: React.ComponentType) {
7
  return withDashboard(function () {
8
    return (
9
      <WixStyleReactProvider>
10
        <QueryClientProvider client={new QueryClient()}>
11
          <Component />
12
        </QueryClientProvider>
13
      </WixStyleReactProvider>
14
    );
15
  });
16
}

Up next

Now that you understand how dashboard pages are designed, we can now see how to add functionality to it.

Was this helpful?
Yes
No