bananas-commerce-admin 0.1.0

package/src/containers/PageLoader.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Suspense } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { useApi } from "../contexts/ApiContext";
+
+import { RouteInfo } from "../contexts/RouterContext";
+import useAsyncError from "../hooks/useAsyncError";
+import { PageComponent } from "../types";
+import LoadingScreen from "./LoadingScreen";
+
+export class PageLoadFailedError extends Error {
+  readonly response: Response;
+
+  constructor(response: Response, message?: string) {
+    super(message);
+    this.response = response;
+  }
+}
+
+export interface PageLoaderProps {
+  route: RouteInfo;
+  page: PageComponent | Promise<PageComponent>;
+}
+
+const PageLoader: React.FC<PageLoaderProps> = ({ route, page }) => {
+  const Page = React.lazy(async () => ({
+    default: await Promise.resolve(page),
+  }));
+  const api = useApi();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const [data, setData] = React.useState(null);
+  const throwError = useAsyncError();
+
+  React.useEffect(() => {
+    if (data === null) {
+      api.operations[route.id].call({
+        params: params,
+        query: Object.fromEntries(searchParams.entries()),
+      })
+        .then(async (response) => {
+          if (response.ok) {
+            setData(await response.json());
+          } else {
+            throwError(
+              new PageLoadFailedError(
+                response,
+                `Page data load failed with ${response.status} ${response.statusText}`,
+              ),
+            );
+          }
+        })
+        .catch(throwError);
+    }
+  }, [api, params, searchParams, data]);
+
+  return (
+    <Suspense fallback={<LoadingScreen />}>
+      <Page data={data} />
+    </Suspense>
+  );
+};
+
+export default PageLoader;

package/src/contexts/ApiContext.tsx

@@ -0,0 +1,55 @@
+import { useSnackbar } from "notistack";
+import * as React from "react";
+import { ApiClient } from "../api";
+import { getCookie } from "../util/get_cookie";
+
+export interface ApiContextProviderProps {
+  api: ApiClient | string | URL | {
+    schema: string | URL;
+    server?: string | URL;
+  };
+}
+
+const ApiContext = React.createContext<ApiClient>(
+  undefined as unknown as ApiClient,
+);
+export const useApi = () => React.useContext(ApiContext);
+
+export const ApiContextProvider: React.FC<
+  React.PropsWithChildren<ApiContextProviderProps>
+> = (
+  { children, api: init },
+) => {
+  const [api, setApi] = React.useState<ApiClient>();
+  const { enqueueSnackbar } = useSnackbar();
+
+  React.useEffect(() => {
+    if (api === undefined) {
+      (init instanceof ApiClient
+        ? Promise.resolve(init)
+        : typeof init === "string" ||
+            init instanceof URL
+        ? ApiClient.load(init)
+        : ApiClient.load(init.schema, init.server)).then(async (api) => {
+          setApi(api);
+
+          if (getCookie("csrftoken") === undefined) {
+            await api.operations["bananas.csrf:list"].call();
+          }
+        }).catch((e) => {
+          enqueueSnackbar("Failed to load schema, view console for more info", {
+            variant: "error",
+          });
+          throw e;
+        });
+    }
+  }, [api]);
+
+  return (
+    <ApiContext.Provider value={api!}>
+      {children}
+    </ApiContext.Provider>
+  );
+};
+
+export default ApiContext;

package/src/contexts/I18nContext.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { useApi } from "./ApiContext";
+
+export function interpolateString(
+  string: string,
+  params: Record<string, string> | string[],
+): string {
+  return Array.isArray(params)
+    ? params.reduce((s, value) => s.replace(/%[sd]|\{\}/, value), string)
+    : Object.entries(params).reduce(
+      (s, [key, value]) =>
+        s.replace(new RegExp(`%\\(${key}\\)[sd]|\\{${key}\\}`, "g"), value),
+      string,
+    );
+}
+
+interface I18nContext {
+  i18n: any;
+  t: (key: string, params?: Record<string, string> | string[]) => string;
+}
+
+const I18nContext = React.createContext<I18nContext>(
+  undefined as unknown as I18nContext,
+);
+export const useI18n = () => React.useContext(I18nContext);
+
+export const I18nContextProvider: React.FC<React.PropsWithChildren<{}>> = (
+  { children },
+) => {
+  const api = useApi();
+  const [i18n, setI18n] = useLocalStorage("i18n", undefined);
+
+  React.useEffect(() => {
+    if (api && i18n === undefined) {
+      api.operations["bananas.i18n:list"].call().then(async (response) => {
+        const i18n = (await response.json()).catalog;
+        setI18n(i18n);
+      });
+    }
+  }, [api, i18n]);
+
+  const t = (key: string, params?: Record<string, string> | string[]) => {
+    const value = i18n?.[key] ?? key;
+    return params ? interpolateString(value, params) : value;
+  };
+
+  return (
+    <I18nContext.Provider value={{ i18n, t }}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+export default I18nContext;

package/src/contexts/RouterContext.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  getPage,
+  getPath,
+  getTitle,
+  isNavigation,
+  parseOperationId,
+} from "../router/routes";
+import { useApi } from "./ApiContext";
+
+export interface RouteInfo {
+  id: string;
+  app: string;
+  view: string;
+  action: string;
+  title: string;
+  navigation: boolean;
+  path: string;
+  page: string;
+}
+
+interface RouterContext {
+  routes: RouteInfo[];
+  getRoute(reverse: string): RouteInfo | undefined;
+  navigate(
+    route: number | string | RouteInfo,
+    options?: {
+      params?: Record<
+        string,
+        string | number | boolean
+      >;
+      query?: URLSearchParams;
+      replace?: boolean;
+    },
+  ): void;
+}
+
+const RouterContext = React.createContext<RouterContext>(
+  {
+    routes: [],
+    getRoute: (reverse) => void reverse,
+    navigate: (route, options) => void [route, options],
+  },
+);
+export const useRouter = () => React.useContext(RouterContext);
+
+export const RouterContextProvider: React.FC<React.PropsWithChildren<{}>> = (
+  { children },
+) => {
+  const routes: RouteInfo[] = [];
+  const api = useApi();
+  const routerNavigate = useNavigate();
+
+  for (const operation of Object.values(api.operations)) {
+    const parsedOperationId = parseOperationId(operation.id);
+    if (!parsedOperationId) {
+      throw new TypeError(`Could not parse operation id ${operation.id}`);
+    }
+    const { app, view, action } = parsedOperationId;
+    const title = getTitle(view, operation.summary);
+    const navigation = isNavigation(operation.tags);
+    const path = getPath(operation.endpoint, operation.method, action);
+    const page = getPage(path, action);
+    routes.push({
+      id: operation.id,
+      app,
+      view,
+      action,
+      title,
+      navigation,
+      path,
+      page,
+    });
+  }
+
+  const getRoute = (reverse: string) => {
+    return routes.find(({ id }) => reverse === id)!;
+  };
+
+  const navigate = (
+    route: number | string | RouteInfo,
+    options?: {
+      params?: Record<
+        string,
+        string | number | boolean
+      >;
+      query?: URLSearchParams;
+      replace?: boolean;
+    },
+  ) => {
+    // Relative history, e.g. go back or forward x steps
+    if (typeof route === "number") {
+      routerNavigate(route);
+      return;
+    }
+
+    // Direct operation id routes, requires reversing the operation id
+    if (typeof route === "string") {
+      const routeInfo = getRoute(route);
+
+      if (routeInfo === undefined) {
+        throw new Error(`Could not find route with reverse: ${route}`);
+      }
+
+      route = routeInfo;
+    }
+
+    let path = route.path;
+    for (const [key, value] of Object.entries(options?.params ?? {})) {
+      path = path.replace(`:${key}`, encodeURIComponent(value));
+    }
+
+    routerNavigate({
+      pathname: path,
+      search: new URLSearchParams(options?.query).toString(),
+    }, { replace: options?.replace });
+  };
+
+  return (
+    <RouterContext.Provider value={{ routes, getRoute, navigate }}>
+      {children}
+    </RouterContext.Provider>
+  );
+};
+
+export default RouterContext;

package/src/contexts/UserContext.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { useApi } from "./ApiContext";
+
+interface User {
+  id: string;
+  email: string;
+  is_superuser: boolean;
+  groups: string[];
+  full_name: string;
+  username: string;
+  permissions: string[];
+}
+
+interface UserContext {
+  user: User | null;
+  login: (username: string, password: string) => Promise<User | null>;
+  logout: () => Promise<void>;
+  changePassword: (
+    oldPassword: string,
+    newPassword1: string,
+    newPassword2: string,
+  ) => Promise<void>;
+}
+
+const UserContext = React.createContext<UserContext>(
+  undefined as unknown as UserContext,
+);
+export const useUser = () => React.useContext(UserContext);
+
+export const UserContextProvider: React.FC<React.PropsWithChildren<{}>> = (
+  { children },
+) => {
+  const api = useApi();
+  const [user, setUser] = useLocalStorage("user", null);
+
+  React.useEffect(() => {
+    if (api !== undefined) {
+      api.isAuthenticated().then((authenticated) => {
+        if (!authenticated) {
+          setUser(null);
+        }
+      });
+    }
+  }, [user, api]);
+
+  const login = async (username: string, password: string) => {
+    const response = await api?.operations["bananas.login:create"].call({
+      body: { username, password },
+    });
+
+    if (response !== undefined && response.ok) {
+      const user = await response.json();
+      setUser(user);
+      return user;
+    }
+
+    setUser(null);
+    return null;
+  };
+
+  const changePassword = async (
+    oldPassword: string,
+    newPassword1: string,
+    newPassword2: string,
+  ) => {
+    const response = await api?.operations["bananas.change_password:create"]
+      .call({
+        body: {
+          old_password: oldPassword,
+          new_password1: newPassword1,
+          new_password2: newPassword2,
+        },
+      });
+
+    if (!response.ok) {
+      throw new Error("Failed to change password");
+    }
+  };
+
+  const logout = async () => {
+    const response = await api?.operations["bananas.logout:create"].call();
+
+    if (response !== undefined && response.ok) {
+      setUser(null);
+      return;
+    }
+
+    throw new Error("Could not log out");
+  };
+
+  return (
+    <UserContext.Provider value={{ user, login, logout, changePassword }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export default UserContext;

package/src/extensions/bananas/components/PasswordChangeForm.tsx

@@ -0,0 +1,138 @@
+import { useSnackbar } from "notistack";
+import React from "react";
+
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import FormGroup from "@mui/material/FormGroup";
+import FormLabel from "@mui/material/FormLabel";
+import { useTheme } from "@mui/material/styles";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+
+import { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
+import LoadingButton from "@mui/lab/LoadingButton";
+
+const PasswordChangeForm: React.FC = () => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const api = useApi();
+  const { enqueueSnackbar } = useSnackbar();
+  const [loading, setLoading] = React.useState(false);
+
+  const operation = api.operations["bananas.change_password:create"];
+  const { properties } = operation.request.body.schema;
+  const [fields, setFields] = React.useState<Record<string, string>>({
+    "old_password": "",
+    "new_password1": "",
+    "new_password2": "",
+  });
+
+  const { changePassword } = useUser();
+
+  const onSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setLoading(true);
+
+    changePassword(
+      fields.old_password,
+      fields.new_password1,
+      fields.new_password2,
+    ).then(() => {
+      enqueueSnackbar(t("Password changed successfully."), {
+        variant: "success",
+      });
+      setFields({
+        "old_password": "",
+        "new_password1": "",
+        "new_password2": "",
+      });
+    }).catch(() => {
+      enqueueSnackbar(t("Incorrect authentication credentials."), {
+        variant: "error",
+      });
+    }).finally(() => setLoading(false));
+  };
+
+  const onChange = (
+    event: React.ChangeEvent<{ name: string; value: string }>,
+  ) => {
+    setFields({
+      ...fields,
+      [event.target.name]: event.target.value,
+    });
+  };
+
+  return (
+    <Box
+      component="form"
+      onSubmit={onSubmit}
+      sx={{
+        maxWidth: 350,
+      }}
+      data-testid="change-password-form"
+    >
+      <FormLabel
+        component="legend"
+        sx={{
+          marginBottom: theme.spacing(2),
+        }}
+      >
+        {operation.summary}
+      </FormLabel>
+      <Typography>
+        {t(
+          "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly.",
+        )}
+      </Typography>
+      <FormControl fullWidth component="fieldset">
+        <FormGroup>
+          {["old_password", "new_password1", "new_password2"].map((field) => (
+            <TextField
+              key={field}
+              autoComplete={field}
+              sx={{
+                marginTop: theme.spacing(3),
+              }}
+              label={properties[field].title}
+              inputProps={{ "aria-label": properties[field].title }}
+              name={field}
+              value={fields[field]}
+              type="password"
+              onChange={onChange}
+              fullWidth
+              required
+              color="secondary"
+            />
+          ))}
+        </FormGroup>
+      </FormControl>
+
+      <FormControl
+        fullWidth
+        margin="normal"
+        sx={{
+          marginTop: theme.spacing(3),
+          marginBottom: 0,
+        }}
+      >
+        <LoadingButton
+          sx={{
+            margin: "auto",
+          }}
+          variant="outlined"
+          type="submit"
+          color="secondary"
+          fullWidth
+          aria-label="login"
+          loading={loading}
+        >
+          {t("Change my password")}
+        </LoadingButton>
+      </FormControl>
+    </Box>
+  );
+};
+
+export default PasswordChangeForm;

package/src/extensions/bananas/index.ts

@@ -0,0 +1,14 @@
+import { RouterExtension } from "../../router/Router";
+import { PageComponent } from "../../types";
+import MePage from "./pages/me/list";
+
+export const bananasRouterExtension: RouterExtension = {
+  app: "bananas",
+  pages: async (route) => {
+    if (route.view === "me" && route.action === "list") {
+      return MePage as PageComponent;
+    }
+
+    throw new Error("Unknown bananas page");
+  },
+};

package/src/extensions/bananas/pages/me/list.tsx

@@ -0,0 +1,31 @@
+import Paper from "@mui/material/Paper";
+import { useTheme } from "@mui/material/styles";
+import React from "react";
+import Content from "../../../../containers/Content";
+import { useUser } from "../../../../contexts/UserContext";
+import PasswordChangeForm from "../../components/PasswordChangeForm";
+
+interface MePageProps {
+  editable?: boolean;
+}
+
+const MePage: React.FC<MePageProps> = ({}) => {
+  const theme = useTheme();
+
+  return (
+    <Content>
+      <Paper
+        sx={{
+          padding: theme.spacing(3),
+          alignSelf: "flex-start",
+        }}
+        elevation={1}
+        square
+      >
+        <PasswordChangeForm />
+      </Paper>
+    </Content>
+  );
+};
+
+export default MePage;

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

@@ -0,0 +1,42 @@
+import { TableCell, TableRow } from "@mui/material";
+import React from "react";
+import { useRouter } from "../../../contexts/RouterContext";
+import { Purchase } from "../types/purchase";
+
+interface PurchaseRowProps {
+  purchase: Purchase;
+}
+
+export const PurchaseRow: React.FC<PurchaseRowProps> = ({
+  purchase,
+}) => {
+  const { navigate } = useRouter();
+
+  const onClick = () => {
+    navigate(`pos.purchase:detail`, {
+      params: {
+        purchase_number: purchase.number,
+      },
+    });
+  };
+
+  const purchaseNumber = purchase.number
+    ? `#${purchase.number.toString().padStart(4, "0")}`
+    : "-";
+
+  return (
+    <TableRow onClick={onClick} hover>
+      <TableCell>{purchaseNumber}</TableCell>
+      <TableCell>
+        {purchase.email}
+      </TableCell>
+      <TableCell></TableCell>
+      <TableCell>1337 SEK</TableCell>
+      <TableCell>Betald</TableCell>
+      <TableCell>
+        {new Date(purchase.date_initiated).toLocaleString()}
+      </TableCell>
+      <TableCell>-</TableCell>
+    </TableRow>
+  );
+};