bananas-commerce-admin 0.1.0

package/src/extensions/pos/components/ReceiptCard.tsx

@@ -0,0 +1,101 @@
+import Card from "@mui/material/Card";
+import React from "react";
+import { Receipt } from "../types/receipt";
+import CardHeader from "@mui/material/CardHeader";
+import List from "@mui/material/List";
+import { ReceiptLine } from "./ReceiptLine";
+import Divider from "@mui/material/Divider";
+import CardContent from "@mui/material/CardContent";
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell, { tableCellClasses } from "@mui/material/TableCell";
+import { useTheme } from "@mui/material/styles";
+
+interface ReceiptCardProps {
+  receipt: Receipt;
+}
+
+interface ReceiptPriceRowProps {
+  title: string;
+  price: string;
+}
+
+const ReceiptPriceRow: React.FC<ReceiptPriceRowProps> = ({ title, price }) => {
+  return (
+    <TableRow>
+      <TableCell align="right" sx={{ width: "75%" }}>
+        <strong>
+          {title}
+        </strong>
+      </TableCell>
+      <TableCell align="right">
+        {`${price} SEK`}
+      </TableCell>
+    </TableRow>
+  );
+};
+
+export const ReceiptCard: React.FC<ReceiptCardProps> = ({
+  receipt,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Card sx={{ width: 550 }}>
+      <CardHeader title={"Receipt"} />
+      <CardContent>
+        <Divider />
+        <List
+          sx={{
+            width: "100%",
+          }}
+        >
+          {receipt.lines.map((line) => (
+            <ReceiptLine key={line.reference} line={line} />
+          )).reduce(
+            (
+              prev,
+              curr,
+              index,
+            ) => [...prev, <Divider key={index} light />, curr],
+            [] as JSX.Element[],
+          )
+            .slice(1)}
+        </List>
+        <Divider />
+        <TableContainer
+          sx={{
+            paddingTop: theme.spacing(2),
+            paddingX: theme.spacing(4),
+          }}
+        >
+          <Table
+            padding="none"
+            sx={{
+              [`& .${tableCellClasses.root}`]: {
+                borderBottom: "none",
+              },
+            }}
+          >
+            <TableBody sx={{ border: "none" }}>
+              <ReceiptPriceRow
+                title="Discount"
+                price={receipt.total_discount_amount}
+              />
+              <ReceiptPriceRow
+                title="Tax"
+                price={receipt.total_tax_amount}
+              />
+              <ReceiptPriceRow
+                title="Total"
+                price={receipt.total_amount}
+              />
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </CardContent>
+    </Card>
+  );
+};

package/src/extensions/pos/components/ReceiptLine.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { ReceiptLine as ReceiptLineType } from "../types/receipt";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+
+interface ReceiptLineProps {
+  line: ReceiptLineType;
+}
+
+export const ReceiptLine: React.FC<ReceiptLineProps> = ({
+  line,
+}) => {
+  return (
+    <ListItem
+      sx={{ display: "flex", flexDirection: "line", alignItems: "baseline" }}
+    >
+      <ListItemText
+        sx={{ width: "50%" }}
+        primary={line.title}
+        secondary={line.reference}
+      />
+      <Tooltip title="Quantity">
+        <ListItemText
+          sx={{ width: "20%" }}
+          primary={`${line.quantity} st`}
+        />
+      </Tooltip>
+      <ListItemText
+        disableTypography
+        sx={{ width: "30%" }}
+        primary={
+          <Tooltip title="Price">
+            <Typography>{`${line.total_amount} SEK`}</Typography>
+          </Tooltip>
+        }
+        secondary={
+          <>
+            <Tooltip title="Tax">
+              <Typography>{line.total_tax_amount} SEK</Typography>
+            </Tooltip>
+            <Tooltip title="Discount">
+              <Typography>{line.total_discount_amount} SEK</Typography>
+            </Tooltip>
+          </>
+        }
+      />
+    </ListItem>
+  );
+};

package/src/extensions/pos/index.tsx

@@ -0,0 +1,20 @@
+import { RouterExtension } from "../../router/Router";
+import { PageComponent } from "../../types";
+import PurchaseDetailPage from "./pages/purchase/detail";
+import PurchaseListPage from "./pages/purchase/list";
+
+export const posRouterExtension: RouterExtension = {
+  app: "pos",
+  pages: (route) => {
+    if (route.view === "purchase") {
+      switch (route.action) {
+        case "list":
+          return PurchaseListPage as PageComponent;
+        case "detail":
+          return PurchaseDetailPage as PageComponent;
+      }
+    }
+
+    throw new Error("Unknown pos page");
+  },
+};

package/src/extensions/pos/pages/purchase/detail.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { PurchaseDetail } from "../../types/purchase";
+import { ReceiptCard } from "../../components/ReceiptCard";
+import Content from "../../../../containers/Content";
+
+interface PurchaseDetailPageProps {
+  data: PurchaseDetail;
+}
+
+const PurchaseDetailPage: React.FC<PurchaseDetailPageProps> = (
+  { data },
+) => {
+  return (
+    <Content>
+      {data?.receipts.map((receipt, i) => (
+        <ReceiptCard key={i} receipt={receipt} />
+      ))}
+    </Content>
+  );
+};
+
+export default PurchaseDetailPage;

package/src/extensions/pos/pages/purchase/list.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Tab from "@mui/material/Tab";
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import Box from "@mui/material/Box";
+import TabPanel from "@mui/lab/TabPanel";
+import { PurchaseRow } from "../../components/PurchaseRow";
+import TabList from "@mui/lab/TabList";
+import TabContext from "@mui/lab/TabContext";
+import { Purchase } from "../../types/purchase";
+import Paper from "@mui/material/Paper";
+import TableRow from "@mui/material/TableRow";
+import Content from "../../../../containers/Content";
+
+interface PurchaseListPageProps {
+  data: {
+    results: Purchase[];
+  };
+}
+
+const PurchaseListPage: React.FC<PurchaseListPageProps> = ({ data }) => {
+  return (
+    <Content>
+      <Box sx={{ width: "100%" }}>
+        <TableContainer component={Paper}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Purchase#</TableCell>
+                <TableCell>Kund</TableCell>
+                <TableCell>Adress</TableCell>
+                <TableCell>Ordervärde</TableCell>
+                <TableCell>Betalstatus</TableCell>
+                <TableCell>Orderdatum</TableCell>
+                <TableCell>Leveransdatum</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data?.results.map((purchase) => (
+                <PurchaseRow
+                  key={purchase.number}
+                  purchase={purchase}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Box>
+    </Content>
+  );
+};
+
+export default PurchaseListPage;

package/src/extensions/pos/types/purchase.ts

@@ -0,0 +1,20 @@
+import { Receipt } from "./receipt";
+
+export interface Purchase {
+  number: string;
+  checkout_session?: string;
+  main_payment_identifier?: string;
+  date_initiated: string;
+  date_confirmed: string;
+  currency?: string;
+  site_code: string;
+  locale: string;
+  country_code: string;
+  email: string;
+  phone?: string;
+}
+
+export interface PurchaseDetail {
+  purchase: Purchase;
+  receipts: Receipt[];
+}

package/src/extensions/pos/types/receipt.ts

@@ -0,0 +1,36 @@
+export interface Receipt {
+  number: string;
+  total_amount: string;
+  total_discount_amount: string;
+  total_tax_amount: string;
+  date_settled?: string;
+  /**
+   * |   | Intention    |
+   * | - | ------------ |
+   * | 1 | payment      |
+   * | 2 | cancellation |
+   * | 3 | refund       |
+   */
+  intention: 1 | 2 | 3;
+  lines: ReceiptLine[];
+}
+
+export interface ReceiptLine {
+  reference: string;
+  title: string;
+  line_number: number;
+  item_type: string;
+  quantity: number;
+  unit_price: string;
+  total_amount: string;
+  total_discount_amount: string;
+  discounts: ReceiptLineDiscount[];
+  tax_rate: string;
+  tax_code: string;
+  total_tax_amount: string;
+}
+
+export interface ReceiptLineDiscount {
+  title: string;
+  amount: string;
+}

package/src/forms/LoginForm.tsx

@@ -0,0 +1,99 @@
+import { useSnackbar } from "notistack";
+import React from "react";
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+
+import { useApi } from "../contexts/ApiContext";
+import { useI18n } from "../contexts/I18nContext";
+import { useUser } from "../contexts/UserContext";
+import LoadingButton from "@mui/lab/LoadingButton";
+
+const LoginForm: React.FC = () => {
+  const theme = useTheme();
+  const { enqueueSnackbar } = useSnackbar();
+  const { t } = useI18n();
+  const { login } = useUser();
+  const api = useApi();
+
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const operation = api.operations["bananas.login:create"];
+  const { properties } = operation.request.body.schema;
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setLoading(true);
+    login(username, password).then((user) => {
+      if (user !== null) {
+        enqueueSnackbar(`${t("Welcome,")} ${user.full_name}`, {
+          variant: "success",
+        });
+      } else {
+        enqueueSnackbar(t("Unable to log in with provided credentials."), {
+          variant: "error",
+        });
+      }
+    }).finally(() => setLoading(false));
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit}>
+      <DialogContent>
+        <Stack spacing={1}>
+          <TextField
+            autoFocus
+            fullWidth
+            label={properties.username.title}
+            name="username"
+            type="text"
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+            color={"secondary"}
+            inputProps={{ "aria-label": "Username" }}
+          />
+          <TextField
+            fullWidth
+            label={properties.password.title}
+            name="password"
+            type="password"
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+            color="secondary"
+            inputProps={{ "aria-label": "Password" }}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions
+        sx={{
+          borderTop: `1px solid ${theme.palette.divider}`,
+          margin: 0,
+          padding: theme.spacing(1),
+        }}
+      >
+        <LoadingButton
+          sx={{
+            margin: "auto",
+          }}
+          variant="contained"
+          type="submit"
+          color="secondary"
+          aria-label="login"
+          loading={loading}
+        >
+          {t("Log in")}
+        </LoadingButton>
+      </DialogActions>
+    </Box>
+  );
+};
+
+export default LoginForm;

package/src/hooks/useAsyncError.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function useAsyncError() {
+  const [_, setError] = React.useState();
+  return React.useCallback(
+    (e: any) => {
+      setError(() => {
+        throw e;
+      });
+    },
+    [setError],
+  );
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,42 @@
+import React from "react";
+
+export default function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [state, setState] = React.useState<T>(getState(key) ?? defaultValue);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (mounted) return;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (localStorage) {
+      const value = getState<T>(key);
+      if (value) setState(value);
+      setMounted(true);
+    }
+  }, [key, mounted]);
+
+  React.useEffect(() => {
+    if (mounted) setLocalState(key, state);
+  }, [state, key, mounted]);
+
+  return [state, setState] as const;
+}
+
+function getState<T>(key: string): T | null {
+  return tryJSONParse<T>(localStorage.getItem(buildStorageKey(key)));
+}
+
+function setLocalState<T>(key: string, state: T) {
+  localStorage.setItem(buildStorageKey(key), JSON.stringify(state));
+}
+
+function buildStorageKey(key: string) {
+  return `__useLocalStorage_${key}`;
+}
+
+function tryJSONParse<T>(json: string | null | undefined): T | null {
+  if (!json) return null;
+  try {
+    return JSON.parse(json) as T;
+  } catch (e) {
+    return null;
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as Content } from "./containers/Content";
+export { default as Logo } from "./components/Logo";
+export { default as Link } from "./components/Link";
+
+export * from "./contexts/ApiContext";
+export * from "./contexts/I18nContext";
+export * from "./contexts/RouterContext";
+export * from "./contexts/UserContext";
+
+export * from "./containers/LoadingScreen";
+
+export { default as Admin } from "./Admin";
+export { default as App } from "./App";
+export * from "./api";
+
+export * from "./extensions/bananas";
+export * from "./extensions/pos";

package/src/pages/DashboardPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+interface DashboardPageProps {}
+
+const DashboardPage: React.FC<DashboardPageProps> = ({}) => {
+  return <h1>Dashboard!</h1>;
+};
+
+export default DashboardPage;

package/src/pages/LoginPage.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Dialog, DialogTitle, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import LoginForm from "../forms/LoginForm";
+import Logo from "../components/Logo";
+import { LogoType } from "../types";
+
+interface LoginPageProps {
+  title?: string;
+  logo?: LogoType;
+  form?: React.ElementType;
+}
+
+const LoginPage: React.FC<LoginPageProps> = (
+  { title, logo, form: Form },
+) => {
+  const theme = useTheme();
+  Form ??= LoginForm;
+
+  return (
+    <Dialog open sx={{ "> * > *": { width: "100%" } }}>
+      <DialogTitle
+        sx={{
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          margin: 0,
+          backgroundColor: theme.palette.primary.main,
+          padding: theme.spacing(2),
+          textAlign: "center",
+          alignItems: "middle",
+          justifyContent: "center",
+          display: "flex",
+        }}
+      >
+        {logo ? <Logo src={logo} /> : (
+          <Typography
+            sx={{
+              color: theme.palette.primary.contrastText,
+              fontWeight: "bold",
+            }}
+          >
+            {title}
+          </Typography>
+        )}
+      </DialogTitle>
+      <Form />
+    </Dialog>
+  );
+};
+
+export default LoginPage;

package/src/router/Router.tsx

@@ -0,0 +1,63 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+
+import { RouteInfo, useRouter } from "../contexts/RouterContext";
+import DashboardPage from "../pages/DashboardPage";
+import PageLoader from "../containers/PageLoader";
+import { PageComponent } from "../types";
+import PageErrorBoundary from "../containers/PageErrorBoundary";
+import ErrorScreen from "../containers/ErrorScreen";
+
+export interface RouterExtension {
+  app: string;
+  pages: (route: RouteInfo) => PageComponent | Promise<PageComponent>;
+}
+
+export interface RouterProps {
+  dashboard?: React.ComponentType;
+  extensions?: RouterExtension[];
+  pages: (route: RouteInfo) => PageComponent | Promise<PageComponent>;
+}
+
+export const Router: React.FC<RouterProps> = (
+  { dashboard, extensions, pages },
+) => {
+  extensions ??= Array.isArray(extensions) ? extensions : [];
+
+  const { routes } = useRouter();
+  const Dashboard = dashboard ?? DashboardPage;
+
+  const extensionsMap = new Map(
+    extensions.map(({ app, pages }) => [app, pages]),
+  );
+  const pageRoutes = routes.map((route) => {
+    const pageLoader = extensionsMap.get(route.app)!;
+    const Element = () => (
+      <PageErrorBoundary errorPage={ErrorScreen}>
+        <PageLoader
+          route={route}
+          page={pageLoader(route)}
+        />
+      </PageErrorBoundary>
+    );
+
+    return (
+      <Route
+        key={route.path}
+        path={route.path}
+        element={<Element />}
+      />
+    );
+  });
+
+  return (
+    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+      <Routes>
+        <Route index element={<Dashboard />} />
+
+        {pageRoutes}
+      </Routes>
+    </Box>
+  );
+};

package/src/router/routes.ts

@@ -0,0 +1,67 @@
+import { capitalize, nthIndexOf } from "../util";
+
+/**
+ * Parses an `operationId` returning app, view and action
+ *
+ * ## Examples
+ *
+ * `bananas.me:list` -> `{ app: "bananas", view: "me", action: "list" }`
+ *
+ * `bananas.login:create` -> `{ app: "bananas", view: "login", action: "create" }`
+ *
+ * `bananas.i18n:list` -> `{ app: "bananas", view: "i18n", action: "list" }`
+ */
+export function parseOperationId(
+  operationId: string,
+): { app: string; view: string; action: string } | undefined {
+  const match = operationId.match(/^(\w+)\.(\w+):(\w+)$/);
+
+  if (match !== null) {
+    return {
+      app: match[1],
+      view: match[2],
+      action: match[3],
+    };
+  }
+
+  return undefined;
+}
+
+export function isNavigation(tags: string[]): boolean {
+  return tags.includes("navigation");
+}
+
+export function getPath(
+  endpoint: string,
+  method: string,
+  action: string | undefined,
+): string {
+  return (method.toLowerCase() === "get"
+    ? endpoint
+    : `${endpoint}${action ?? ""}/`).replace(/{([^}]*)}/, ":$1");
+}
+
+function getBasePath(path: string): string {
+  return path.substring(0, (nthIndexOf(path, "/", 2, 1) + 1) || undefined);
+}
+
+export function getPage(
+  path: string,
+  action: string | undefined,
+): string {
+  const basePath = getBasePath(path);
+  const relativeBasePath = basePath.slice(1);
+  return `${relativeBasePath}${action}`;
+}
+
+function getAppLabel(tags: string[]): string {
+  return tags.filter((tag) => tag.startsWith("app:"))[0]?.split(":")[1];
+}
+
+function getView(id: string): string {
+  return id.substring(id.indexOf(".") + 1, id.indexOf(":"));
+}
+
+export function getTitle(view: string, summary?: string): string {
+  return (summary ?? (view && capitalize(view.replace("_", " "))));
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+declare module "swagger-client";
+
+export type LogoType = boolean | string | React.ElementType;
+export type PageComponent<T = any> = React.ComponentType<{ data: T }>;

package/src/types/swagger-client.d.ts

@@ -0,0 +1 @@
+declare module "swagger-client";