WIP: Rewrote ViewCustomer page to use PageBuilder

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@deskpro/app-sdk": "^3.0.12",
     "@deskpro/deskpro-ui": "^7.1.0",
+    "@deskpro/app-builder": "^0.0.1",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@heroicons/react": "1.0.6",
     "@tanstack/react-query": "^4.36.1",

src/components/ErrorFallback/ErrorFallback.tsx

@@ -1,5 +1,4 @@
-import get from "lodash/get";
-import { Stack } from "@deskpro/deskpro-ui";
+import { get, map } from "lodash";
 import { DEFAULT_ERROR } from "../../constants";
 import { ShopifyError } from "../../services/shopify";
 import { Container, ErrorBlock } from "../common";
@@ -11,24 +10,20 @@ type Props = Omit<FallbackProps, "error"> & {
 };
 
 const ErrorFallback: FC<Props> = ({ error }) => {
-  let message = DEFAULT_ERROR;
+  let message: string|string[] = DEFAULT_ERROR;
 
   // eslint-disable-next-line no-console
   console.error(error);
 
   if (error instanceof ShopifyError) {
-    message = get(error, ["data", "errors"])
+    message = map(get(error, ["data", "errors"], []), "message")
       || DEFAULT_ERROR;
   }
 
   return (
     <Container>
       <ErrorBlock
-        text={(
-          <Stack gap={6} vertical style={{ padding: "8px" }}>
-            {message}
-          </Stack>
-        )}
+        text={message}
       />
     </Container>
   );

src/components/Home/Home.tsx

@@ -1,7 +1,7 @@
 import get from "lodash/get";
 import { HorizontalDivider } from "@deskpro/app-sdk";
 import { Container } from "../common";
-import { CustomerInfo, Orders, Comments } from "./block";
+import { Orders, Comments } from "./block";
 import type { FC } from "react";
 import type { Maybe } from "../../types";
 import type { CustomerType, Order } from "../../services/shopify/types";
@@ -20,25 +20,13 @@ type Props = {
 const Home: FC<Props> = ({
   orders,
   customer,
-  onNavigateToCustomer,
   onNavigateToOrders,
   onNavigateToOrder,
   getOrderLink,
   getOrdersLink,
-  getCustomerLink,
 }) => {
   return (
     <>
-      <Container>
-        <CustomerInfo
-          customer={customer}
-          link={getCustomerLink(customer?.legacyResourceId)}
-          onNavigateToCustomer={onNavigateToCustomer}
-        />
-      </Container>
-
-      <HorizontalDivider style={{ marginBottom: 10 }}/>
-
       <Container>
         <Orders
           orders={orders}

src/components/common/Error/ErrorBlock.tsx

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { P5 } from "@deskpro/deskpro-ui";
+import { DEFAULT_ERROR } from "../../../constants";
 import type { FC, JSX } from "react";
 import type { Maybe } from "../../../types";
 
-type Props = {
+export type Props = {
   text?: Maybe<string|JSX.Element|Array<string|JSX.Element>>,
 }
 
@@ -15,7 +16,7 @@ const StyledErrorBlock = styled(P5)`
   background-color: ${({ theme }) => theme.colors.red100};
 `;
 
-const ErrorBlock: FC<Props> = ({ text = "An error occurred" }) => (
+const ErrorBlock: FC<Props> = ({ text = DEFAULT_ERROR }) => (
   <>
     {Array.isArray(text)
       ? text.map((msg, idx) => (<StyledErrorBlock key={idx}>{msg}</StyledErrorBlock>))

src/components/index.ts

@@ -2,4 +2,3 @@ export { Home } from "./Home";
 export { LinkCustomer } from "./LinkCustomer";
 export { ListOrders } from "./ListOrders";
 export { ViewOrder } from "./ViewOrder";
-export { ViewCustomer } from "./ViewCustomer";

src/pages/HomePage/HomePage.tsx

@@ -1,6 +1,7 @@
 import { FC, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { LoadingSpinner } from "@deskpro/app-sdk";
+import { PageBuilder } from "@deskpro/app-builder";
 import {
   useSetTitle,
   useExternalLink,
@@ -51,18 +52,108 @@ const HomePage: FC = () => {
       );
     }
 
+    // return (
+    //   <>HomePage</>
+    // );
     return (
-        <Home
-          orders={orders || []}
-          customer={customer}
-          onNavigateToCustomer={onNavigateToCustomer}
-          onNavigateToOrders={onNavigateToOrders}
-          onNavigateToOrder={onNavigateToOrder}
-          getCustomerLink={getCustomerLink}
-          getOrdersLink={getOrdersLink}
-          getOrderLink={getOrderLink}
-        />
+      <Home
+        orders={orders || []}
+        customer={customer}
+        onNavigateToCustomer={onNavigateToCustomer}
+        onNavigateToOrders={onNavigateToOrders}
+        onNavigateToOrder={onNavigateToOrder}
+        getCustomerLink={getCustomerLink}
+        getOrdersLink={getOrdersLink}
+        getOrderLink={getOrderLink}
+      />
     );
+    /*return (
+      <>
+        <PageBuilder
+          store={{ customer, orders }}
+          config={{
+            structure: [
+                ["fullName"],
+                ["email"],
+                ["totalSpent"],
+                ["note"],
+                ["---"],
+                // ["ordersTitle"],
+                ["orders"],
+            ],
+            blocks: {
+                fullName: {
+                    type: "title",
+                    pathInStore: ["customer", "displayName"],
+                    props: {
+                        link: `${getCustomerLink(customer?.legacyResourceId)}`,
+                        to: `/view_customer?customerId=${customer?.id}`,
+                    },
+                },
+                email: {
+                    type: "text",
+                    label: "Email",
+                    pathInStore: ["customer", "email"],
+                },
+                totalSpent: {
+                    type: "price",
+                    label: "Total Spent",
+                    pathInStore: ["customer", "amountSpent"],
+                    props: {
+                        mapper: {
+                            amount: "amount",
+                            currency: "currencyCode",
+                        },
+                    },
+                },
+                note: {
+                    type: "text",
+                    label: "Note",
+                    pathInStore: ["customer", "note"],
+                },
+                "---": {
+                    type: "divider",
+                    full: true,
+                },
+                /!*ordersTitle: {
+                    type: "title",
+                    props: {
+                        value: "Orders",
+                        to: `/list_orders`,
+                        link: `${getOrdersLink()}`,
+                    },
+                },*!/
+                orders: {
+                    type: "iterable",
+                    pathInStore: ["orders"],
+                    config: {
+                      structure: [
+                        ["title"],
+                        ["date", "status"],
+                      ],
+                      blocks: {
+                        title: {
+                          type: "title",
+                          pathInStore: ["id"],
+                        },
+                        date: {
+                          type: "text",
+                          label: "Date",
+                          pathInStore: ["createdAt"],
+                        },
+                        status: {
+                          type: "text",
+                          label: "Status",
+                          pathInStore: ["displayFulfillmentStatus"],
+                        },
+                      },
+                    },
+                },
+            },
+          }}
+        />
+      </>
+    );*/
 };
 
 export { HomePage };