feat(dashboard,types,js-sdk,ui): Add missing Price List features (#7856)

**What**
- Adds missing features to Price List domain
- Adds `StackedFocusModal` and `StackedDrawer` components that should replace SplitView across the project.
- Add Footer to FocusModal
- Adds missing js-sdk functions and types

**Note**
The DatePickers in the PriceLists forms do not work as intended atm. The component is broken, and needs to be fixed. I am working on a fix, but choose to move that work into a separate branch, to prevent this PR from getting bigger then it already is. Will update once the fixes have been merged.
This commit is contained in:
Kasper Fabricius Kristensen
2024-06-28 14:08:23 +00:00
committed by GitHub
parent 9f3998393b
commit c1740218e9
295 changed files with 4488 additions and 2350 deletions
@@ -171,7 +171,7 @@ export const useGlobalShortcuts = () => {
},
label: t("app.keyboardShortcuts.goToPriceLists"),
type: "pageShortcut",
callback: () => navigate("/pricing"),
callback: () => navigate("/price-lists"),
},
{
keys: {
@@ -332,45 +332,51 @@ export const RouteMap: RouteObject[] = [
],
},
{
path: "/pricing",
path: "/price-lists",
handle: {
crumb: () => "Pricing",
crumb: () => "Price Lists",
},
children: [
{
path: "",
lazy: () => import("../../routes/pricing/pricing-list"),
lazy: () => import("../../routes/price-lists/price-list-list"),
children: [
{
path: "create",
lazy: () => import("../../routes/pricing/pricing-create"),
lazy: () =>
import("../../routes/price-lists/price-list-create"),
},
],
},
{
path: ":id",
lazy: () => import("../../routes/pricing/pricing-detail"),
lazy: () =>
import("../../routes/price-lists/price-list-detail"),
handle: {
crumb: (data: PriceListRes) => data.price_list.title,
},
children: [
{
path: "edit",
lazy: () => import("../../routes/pricing/pricing-edit"),
lazy: () =>
import("../../routes/price-lists/price-list-edit"),
},
{
path: "configuration",
lazy: () =>
import("../../routes/pricing/pricing-configuration"),
import(
"../../routes/price-lists/price-list-configuration"
),
},
{
path: "products/add",
lazy: () => import("../../routes/pricing/pricing-products"),
lazy: () =>
import("../../routes/price-lists/price-list-prices-add"),
},
{
path: "products/edit",
lazy: () =>
import("../../routes/pricing/pricing-products-prices"),
import("../../routes/price-lists/price-list-prices-edit"),
},
],
},
@@ -780,7 +786,8 @@ export const RouteMap: RouteObject[] = [
{
path: ":id",
handle: {
crumb: (data) => data.shipping_profile.name,
crumb: (data: HttpTypes.AdminShippingProfileResponse) =>
data.shipping_profile.name,
},
lazy: () =>
import(
@@ -1,3 +1,3 @@
export type { Theme } from "./theme-context";
export * from "./theme-provider";
export * from "./use-theme";
export type { Theme } from "./theme-context"
export * from "./theme-provider"
export * from "./use-theme"
@@ -1,26 +1,26 @@
import { PropsWithChildren, useEffect, useState } from "react";
import { Theme, ThemeContext } from "./theme-context";
import { PropsWithChildren, useEffect, useState } from "react"
import { Theme, ThemeContext } from "./theme-context"
const THEME_KEY = "medusa_admin_theme";
const THEME_KEY = "medusa_admin_theme"
export const ThemeProvider = ({ children }: PropsWithChildren) => {
const [state, setState] = useState<Theme>(
(localStorage?.getItem(THEME_KEY) as Theme) || "light"
);
)
const setTheme = (theme: Theme) => {
localStorage.setItem(THEME_KEY, theme);
setState(theme);
};
localStorage.setItem(THEME_KEY, theme)
setState(theme)
}
useEffect(() => {
const html = document.querySelector("html");
const html = document.querySelector("html")
if (html) {
/**
* Temporarily disable transitions to prevent
* the theme change from flashing.
*/
const css = document.createElement("style");
const css = document.createElement("style")
css.appendChild(
document.createTextNode(
`* {
@@ -31,24 +31,24 @@ export const ThemeProvider = ({ children }: PropsWithChildren) => {
transition: none !important;
}`
)
);
document.head.appendChild(css);
)
document.head.appendChild(css)
html.classList.remove(state === "light" ? "dark" : "light");
html.classList.add(state);
html.classList.remove(state === "light" ? "dark" : "light")
html.classList.add(state)
/**
* Re-enable transitions after the theme has been set,
* and force the browser to repaint.
*/
window.getComputedStyle(css).opacity;
document.head.removeChild(css);
window.getComputedStyle(css).opacity
document.head.removeChild(css)
}
}, [state]);
}, [state])
return (
<ThemeContext.Provider value={{ theme: state, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
)
}
@@ -1,10 +1,10 @@
import { useContext } from "react";
import { ThemeContext } from "./theme-context";
import { useContext } from "react"
import { ThemeContext } from "./theme-context"
export const useTheme = () => {
const context = useContext(ThemeContext);
const context = useContext(ThemeContext)
if (!context) {
throw new Error("useTheme must be used within a ThemeProvider");
throw new Error("useTheme must be used within a ThemeProvider")
}
return context;
};
return context
}