@medusajs/dashboard 3.0.0-preview-20250211091350 → 3.0.0-preview-20250406164537

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { DashboardPlugin } from "./dashboard-app/dashboard-app"
+export * from "./render"

package/src/lib/payment.ts

@@ -12,10 +12,12 @@ export const getTotalCaptured = (
   }, 0)
 
 export const getTotalPending = (paymentCollections: AdminPaymentCollection[]) =>
-  paymentCollections.reduce((acc, paymentCollection) => {
-    acc +=
-      (paymentCollection.amount as number) -
-      (paymentCollection.captured_amount as number)
+  paymentCollections
+    .filter((pc) => pc.status !== "canceled")
+    .reduce((acc, paymentCollection) => {
+      acc +=
+        (paymentCollection.amount as number) -
+        (paymentCollection.captured_amount as number)
 
-    return acc
-  }, 0)
+      return acc
+    }, 0)

package/src/providers/extension-provider/extension-context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from "react"
+import { DashboardApp } from "../../dashboard-app"
+
+type ExtensionContextValue = DashboardApp["api"]
+
+export const ExtensionContext = createContext<ExtensionContextValue | null>(
+  null
+)

package/src/providers/extension-provider/extension-provider.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react"
+import { DashboardApp } from "../../dashboard-app/dashboard-app"
+import { ExtensionContext } from "./extension-context"
+
+type ExtensionProviderProps = PropsWithChildren<{
+  api: DashboardApp["api"]
+}>
+
+export const ExtensionProvider = ({
+  api,
+  children,
+}: ExtensionProviderProps) => {
+  return (
+    <ExtensionContext.Provider value={api}>
+      {children}
+    </ExtensionContext.Provider>
+  )
+}

package/src/providers/extension-provider/index.ts

@@ -0,0 +1,2 @@
+export { ExtensionProvider } from "./extension-provider"
+export { useExtension } from "./use-extension"

package/src/providers/extension-provider/use-extension.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react"
+import { ExtensionContext } from "./extension-context"
+
+export const useExtension = () => {
+  const context = useContext(ExtensionContext)
+  if (!context) {
+    throw new Error("useExtension must be used within a ExtensionProvider")
+  }
+  return context
+}

package/src/providers/providers.tsx

@@ -3,22 +3,20 @@ import { QueryClientProvider } from "@tanstack/react-query"
 import type { PropsWithChildren } from "react"
 import { HelmetProvider } from "react-helmet-async"
 import { I18n } from "../components/utilities/i18n"
-import {
-  DashboardExtensionManager,
-  DashboardExtensionProvider,
-} from "../extensions"
+import { DashboardApp } from "../dashboard-app"
 import { queryClient } from "../lib/query-client"
+import { ExtensionProvider } from "./extension-provider"
 import { I18nProvider } from "./i18n-provider"
 import { ThemeProvider } from "./theme-provider"
 
 type ProvidersProps = PropsWithChildren<{
-  api: DashboardExtensionManager["api"]
+  api: DashboardApp["api"]
 }>
 
 export const Providers = ({ api, children }: ProvidersProps) => {
   return (
     <TooltipProvider>
-      <DashboardExtensionProvider api={api}>
+      <ExtensionProvider api={api}>
         <HelmetProvider>
           <QueryClientProvider client={queryClient}>
             <ThemeProvider>
@@ -28,7 +26,7 @@ export const Providers = ({ api, children }: ProvidersProps) => {
             </ThemeProvider>
           </QueryClientProvider>
         </HelmetProvider>
-      </DashboardExtensionProvider>
+      </ExtensionProvider>
     </TooltipProvider>
   )
 }

package/src/routes/api-key-management/api-key-management-detail/api-key-management-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useApiKey } from "../../../hooks/api/api-keys"
+import { useExtension } from "../../../providers/extension-provider"
 import { ApiKeyType } from "../common/constants"
 import { ApiKeyGeneralSection } from "./components/api-key-general-section"
 import { ApiKeySalesChannelSection } from "./components/api-key-sales-channel-section"
@@ -15,7 +15,7 @@ export const ApiKeyManagementDetail = () => {
   >
 
   const { id } = useParams()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { api_key, isLoading, isError, error } = useApiKey(id!, {
     initialData: initialData,

package/src/routes/api-key-management/api-key-management-detail/components/api-key-general-section/api-key-general-section.tsx

@@ -154,7 +154,9 @@ export const ApiKeyGeneralSection = ({ apiKey }: ApiKeyGeneralSectionProps) => {
           {t("fields.key")}
         </Text>
         {apiKey.type === "secret" ? (
-          <Badge size="2xsmall">{prettifyRedactedToken(apiKey.redacted)}</Badge>
+          <Badge size="2xsmall" className="inline-block w-fit">
+            {prettifyRedactedToken(apiKey.redacted)}
+          </Badge>
         ) : (
           <Copy asChild content={apiKey.token} className="cursor-pointer">
             <Badge size="2xsmall" className="text-ui-tag-neutral-text">

package/src/routes/api-key-management/api-key-management-list/api-key-management-list.tsx

@@ -3,11 +3,11 @@ import { getApiKeyTypeFromPathname } from "../common/utils"
 import { ApiKeyManagementListTable } from "./components/api-key-management-list-table"
 
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const ApiKeyManagementList = () => {
   const { pathname } = useLocation()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const keyType = getApiKeyTypeFromPathname(pathname)
 

package/src/routes/campaigns/campaign-detail/campaign-detail.tsx

@@ -9,7 +9,7 @@ import { campaignLoader } from "./loader"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CampaignConfigurationSection } from "./components/campaign-configuration-section"
 import { CAMPAIGN_DETAIL_FIELDS } from "./constants"
 
@@ -25,7 +25,7 @@ export const CampaignDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !campaign) {
     return (

package/src/routes/campaigns/campaign-list/campaign-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CampaignListTable } from "./components/campaign-list-table"
 
 export const CampaignList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

package/src/routes/categories/category-detail/category-detail.tsx

@@ -7,7 +7,7 @@ import { categoryLoader } from "./loader"
 
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 
 export const CategoryDetail = () => {
   const { id } = useParams()
@@ -16,7 +16,7 @@ export const CategoryDetail = () => {
     ReturnType<typeof categoryLoader>
   >
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { product_category, isLoading, isError, error } = useProductCategory(
     id!,

package/src/routes/categories/category-list/category-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CategoryListTable } from "./components/category-list-table"
 
 export const CategoryList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

package/src/routes/collections/collection-detail/collection-detail.tsx

@@ -2,8 +2,8 @@ import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
 import { useCollection } from "../../../hooks/api/collections"
+import { useExtension } from "../../../providers/extension-provider"
 import { CollectionGeneralSection } from "./components/collection-general-section"
 import { CollectionProductSection } from "./components/collection-product-section"
 import { collectionLoader } from "./loader"
@@ -18,7 +18,7 @@ export const CollectionDetail = () => {
     initialData,
   })
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !collection) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

package/src/routes/collections/collection-list/collection-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CollectionListTable } from "./components/collection-list-table"
 
 export const CollectionList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

package/src/routes/customer-groups/customer-group-detail/customer-group-detail.tsx

@@ -7,7 +7,7 @@ import { CustomerGroupGeneralSection } from "./components/customer-group-general
 import { customerGroupLoader } from "./loader"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CUSTOMER_GROUP_DETAIL_FIELDS } from "./constants"
 
 export const CustomerGroupDetail = () => {
@@ -24,7 +24,7 @@ export const CustomerGroupDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !customer_group) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />

package/src/routes/customer-groups/customer-group-list/components/customer-group-list-table/customer-group-list-table.tsx

@@ -1,10 +1,10 @@
 import { PencilSquare, Trash } from "@medusajs/icons"
 import { HttpTypes } from "@medusajs/types"
 import {
-    Container,
-    createDataTableColumnHelper,
-    toast,
-    usePrompt,
+  Container,
+  createDataTableColumnHelper,
+  toast,
+  usePrompt,
 } from "@medusajs/ui"
 import { keepPreviousData } from "@tanstack/react-query"
 import { useCallback, useMemo } from "react"
@@ -14,19 +14,19 @@ import { useNavigate } from "react-router-dom"
 import { DataTable } from "../../../../../components/data-table"
 import { useDataTableDateFilters } from "../../../../../components/data-table/helpers/general/use-data-table-date-filters"
 import { SingleColumnPage } from "../../../../../components/layout/pages"
-import { useDashboardExtension } from "../../../../../extensions"
 import {
-    useCustomerGroups,
-    useDeleteCustomerGroupLazy,
+  useCustomerGroups,
+  useDeleteCustomerGroupLazy,
 } from "../../../../../hooks/api"
 import { useDate } from "../../../../../hooks/use-date"
 import { useQueryParams } from "../../../../../hooks/use-query-params"
+import { useExtension } from "../../../../../providers/extension-provider"
 
 const PAGE_SIZE = 10
 
 export const CustomerGroupListTable = () => {
   const { t } = useTranslation()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const { q, order, offset, created_at, updated_at } = useQueryParams([
     "q",

package/src/routes/customer-groups/customer-group-list/customer-group-list.tsx

@@ -1,9 +1,9 @@
 import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { CustomerGroupListTable } from "./components/customer-group-list-table"
 
 export const CustomerGroupsList = () => {
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   return (
     <SingleColumnPage

package/src/routes/customers/customer-create-address/components/create-customer-address-form/create-customer-address-form.tsx

@@ -0,0 +1,282 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, Heading, Input, Text, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import * as zod from "zod"
+import { Form } from "../../../../../components/common/form"
+import { CountrySelect } from "../../../../../components/inputs/country-select"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useCreateCustomerAddress } from "../../../../../hooks/api/customers"
+
+const CreateCustomerAddressSchema = zod.object({
+  address_name: zod.string().min(1),
+  address_1: zod.string().min(1),
+  address_2: zod.string().optional(),
+  country_code: zod.string().min(2).max(2),
+  city: zod.string().optional(),
+  postal_code: zod.string().optional(),
+  province: zod.string().optional(),
+  company: zod.string().optional(),
+  phone: zod.string().optional(),
+})
+
+export const CreateCustomerAddressForm = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const { handleSuccess } = useRouteModal()
+
+  const form = useForm<zod.infer<typeof CreateCustomerAddressSchema>>({
+    defaultValues: {
+      address_name: "",
+      address_1: "",
+      address_2: "",
+      city: "",
+      company: "",
+      country_code: "",
+      phone: "",
+      postal_code: "",
+      province: "",
+    },
+    resolver: zodResolver(CreateCustomerAddressSchema),
+  })
+
+  const { mutateAsync, isPending } = useCreateCustomerAddress(id!)
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(
+      {
+        address_name: values.address_name,
+        address_1: values.address_1,
+        address_2: values.address_2,
+        country_code: values.country_code,
+        city: values.city,
+        postal_code: values.postal_code,
+        province: values.province,
+        company: values.company,
+        phone: values.phone,
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("customers.addresses.create.successToast"))
+
+          handleSuccess(`/customers/${id}`)
+        },
+        onError: (e) => {
+          toast.error(e.message)
+        },
+      }
+    )
+  })
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <RouteFocusModal.Header />
+        <RouteFocusModal.Body className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 flex-col items-center overflow-y-auto">
+            <div className="flex w-full max-w-[720px] flex-col gap-y-8 px-2 py-16">
+              <div>
+                <Heading className="capitalize">
+                  {t("customers.addresses.create.header")}
+                </Heading>
+                <Text size="small" className="text-ui-fg-subtle">
+                  {t("customers.addresses.create.hint")}
+                </Text>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="address_name"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {t("customers.addresses.fields.addressName")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="address_name"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Form.Field
+                  control={form.control}
+                  name="address_1"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.address")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="address_1"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="address_2"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.address2")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="address_2"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="postal_code"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>
+                          {t("fields.postalCode")}
+                        </Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="postal_code"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="city"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.city")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" autoComplete="city" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="country_code"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>{t("fields.country")}</Form.Label>
+                        <Form.Control>
+                          <CountrySelect
+                            autoComplete="country_code"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="province"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.state")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="province"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="company"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.company")}</Form.Label>
+                        <Form.Control>
+                          <Input
+                            size="small"
+                            autoComplete="company"
+                            {...field}
+                          />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+                <Form.Field
+                  control={form.control}
+                  name="phone"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label optional>{t("fields.phone")}</Form.Label>
+                        <Form.Control>
+                          <Input size="small" autoComplete="phone" {...field} />
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
+              </Button>
+            </RouteFocusModal.Close>
+            <Button type="submit" size="small" isLoading={isPending}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/customers/customer-create-address/components/create-customer-address-form/index.ts

@@ -0,0 +1 @@
+export * from "./create-customer-address-form"

package/src/routes/customers/customer-create-address/customer-create-address.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/modals"
+import { CreateCustomerAddressForm } from "./components/create-customer-address-form"
+
+export const CustomerCreateAddress = () => {
+  return (
+    <RouteFocusModal>
+      <CreateCustomerAddressForm />
+    </RouteFocusModal>
+  )
+}

package/src/routes/customers/customer-create-address/index.ts

@@ -0,0 +1 @@
+export { CustomerCreateAddress as Component } from "./customer-create-address"