feat(dashboard): Draft orders create (#6680)

**What** - Adds Create draft order form - Updates draft order details page to also display "custom" items. **Note** - Currently, the form is missing a way to input a discount code. Need to rethink this a bit, as the we can't implement the design in Figma. - The current design is missing a way to select from a customers existing shipping addresses, we should add that to keep the features we have today. - This PR uses `useInfiniteQuery` which does not work on our staging (due to duplicate dependencies as a result of building straight from the monorepo), so you will need to test locally.
medusajs · Mar 25, 2024 · 26531c5 · 26531c5
1 parent 20132d7
commit 26531c5
Show file tree

Hide file tree

Showing 54 changed files with 3,395 additions and 517 deletions.
diff --git a/.changeset/thirty-moons-doubt.md b/.changeset/thirty-moons-doubt.md
@@ -0,0 +1,11 @@
+---
+"@medusajs/ui-preset": patch
+"@medusajs/ui": patch
+"@medusajs/medusa": patch
+"@medusajs/client-types": patch
+---
+
+feat(ui-preset): Pull latest styles from Figma.
+fix(ui): Fix invalid state styling of Select, so it correctly shows when aria-invalid is true.
+fix(medusa): Align query params between `/admin/products/:id/variants` and `/admin/variants`.
+chore(client-types): Update `medusa` client types to reflect changes to the API.
diff --git a/packages/admin-next/dashboard/public/locales/en-US/translation.json b/packages/admin-next/dashboard/public/locales/en-US/translation.json
@@ -62,7 +62,8 @@
     "edit": "Edit",
     "download": "Download",
     "clearAll": "Clear all",
-    "apply": "Apply"
+    "apply": "Apply",
+    "add": "Add"
   },
   "filters": {
     "date": {
@@ -391,6 +392,34 @@
     "status": {
       "open": "Open",
       "completed": "Completed"
+    },
+    "create": {
+      "createDraftOrder": "Create Draft Order",
+      "createDraftOrderHint": "Create a new draft order to manage the details of an order before it is placed.",
+      "chooseRegionHint": "Choose region",
+      "existingItemsLabel": "Existing items",
+      "existingItemsHint": "Add existing products to the draft order.",
+      "customItemsLabel": "Custom items",
+      "customItemsHint": "Add custom items to the draft order.",
+      "addExistingItemsAction": "Add existing items",
+      "addCustomItemAction": "Add custom item",
+      "noCustomItemsAddedLabel": "No custom items added yet",
+      "noExistingItemsAddedLabel": "No existing items added yet",
+      "chooseRegionTooltip": "Choose a region first",
+      "useExistingCustomerLabel": "Use existing customer",
+      "addShippingMethodsAction": "Add shipping methods",
+      "unitPriceOverrideLabel": "Unit price override",
+      "shippingOptionLabel": "Shipping option",
+      "shippingOptionHint": "Choose the shipping option for the draft order.",
+      "shippingPriceOverrideLabel": "Shipping price override",
+      "shippingPriceOverrideHint": "Override the shipping price for the draft order.",
+      "sendNotificationLabel": "Send notification",
+      "sendNotificationHint": "Send a notification to the customer when the draft order is created."
+    },
+    "validation": {
+      "requiredEmailOrCustomer": "Email or customer is required.",
+      "requiredItems": "At least one item is required.",
+      "invalidEmail": "Email must be a valid email address."
     }
   },
   "discounts": {
@@ -846,6 +875,7 @@
     "orders": "Orders",
     "account": "Account",
     "total": "Total",
+    "totalExclTax": "Total excl. tax",
     "subtotal": "Subtotal",
     "shipping": "Shipping",
     "tax": "Tax",
@@ -887,6 +917,7 @@
     "thumbnail": "Thumbnail",
     "sku": "SKU",
     "managedInventory": "Managed inventory",
+    "allowBackorder": "Allow backorder",
     "inStock": "In stock",
     "location": "Location",
     "quantity": "Quantity",
@@ -896,9 +927,11 @@
     "maxSubtotal": "Max. Subtotal",
     "shippingProfile": "Shipping Profile",
     "summary": "Summary",
+    "details": "Details",
     "label": "Label",
     "rate": "Rate",
     "requiresShipping": "Requires shipping",
+    "unitPrice": "Unit price",
     "startDate": "Start date",
     "endDate": "End date",
     "draft": "Draft"

diff --git a/packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx b/packages/admin-next/dashboard/src/components/common/combobox/combobox.tsx
@@ -180,7 +180,7 @@ const ComboboxImpl = <T extends Value = string>(
   const results = isSearchControlled ? options : matches
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <Popover.Root modal open={open} onOpenChange={setOpen}>
       <PrimitiveComboboxProvider
         open={open}
         setOpen={setOpen}
@@ -199,7 +199,7 @@ const ComboboxImpl = <T extends Value = string>(
               "bg-ui-bg-field transition-fg shadow-borders-base",
               "hover:bg-ui-bg-field-hover",
               "has-[input:focus]:shadow-borders-interactive-with-active",
-              "has-[:invalid]:shadow-borders-error",
+              "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
               "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
               {
                 "pl-0.5": hasValue && isArrayValue,

diff --git a/...es/admin-next/dashboard/src/components/common/conditional-tooltip/conditional-tooltip.tsx b/...es/admin-next/dashboard/src/components/common/conditional-tooltip/conditional-tooltip.tsx
@@ -0,0 +1,19 @@
+import { Tooltip } from "@medusajs/ui"
+import { PropsWithChildren, ReactNode } from "react"
+
+type ConditionalTooltipProps = PropsWithChildren<{
+  content: ReactNode
+  showTooltip?: boolean
+}>
+
+export const ConditionalTooltip = ({
+  children,
+  content,
+  showTooltip = false,
+}: ConditionalTooltipProps) => {
+  if (showTooltip) {
+    return <Tooltip content={content}>{children}</Tooltip>
+  }
+
+  return children
+}
diff --git a/packages/admin-next/dashboard/src/components/common/conditional-tooltip/index.ts b/packages/admin-next/dashboard/src/components/common/conditional-tooltip/index.ts
@@ -0,0 +1 @@
+export * from "./conditional-tooltip"
diff --git a/packages/admin-next/dashboard/src/components/common/customer-info/customer-info.tsx b/packages/admin-next/dashboard/src/components/common/customer-info/customer-info.tsx
@@ -2,6 +2,7 @@ import { Address, Cart, Order } from "@medusajs/medusa"
 import { Avatar, Copy, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
+import { getFormattedAddress, isSameAddress } from "../../../lib/addresses"
 
 const ID = ({ data }: { data: Cart | Order }) => {
   const { t } = useTranslation()
@@ -182,74 +183,6 @@ export const CustomerInfo = Object.assign(
   }
 )
 
-const isSameAddress = (a: Address | null, b: Address | null) => {
-  if (!a || !b) {
-    return false
-  }
-
-  return (
-    a.first_name === b.first_name &&
-    a.last_name === b.last_name &&
-    a.address_1 === b.address_1 &&
-    a.address_2 === b.address_2 &&
-    a.city === b.city &&
-    a.postal_code === b.postal_code &&
-    a.province === b.province &&
-    a.country_code === b.country_code
-  )
-}
-
-const getFormattedAddress = ({ address }: { address: Address }) => {
-  const {
-    first_name,
-    last_name,
-    company,
-    address_1,
-    address_2,
-    city,
-    postal_code,
-    province,
-    country,
-    country_code,
-  } = address
-
-  const name = [first_name, last_name].filter(Boolean).join(" ")
-
-  const formattedAddress = []
-
-  if (name) {
-    formattedAddress.push(name)
-  }
-
-  if (company) {
-    formattedAddress.push(company)
-  }
-
-  if (address_1) {
-    formattedAddress.push(address_1)
-  }
-
-  if (address_2) {
-    formattedAddress.push(address_2)
-  }
-
-  const cityProvincePostal = [city, province, postal_code]
-    .filter(Boolean)
-    .join(" ")
-
-  if (cityProvincePostal) {
-    formattedAddress.push(cityProvincePostal)
-  }
-
-  if (country) {
-    formattedAddress.push(country.display_name)
-  } else if (country_code) {
-    formattedAddress.push(country_code.toUpperCase())
-  }
-
-  return formattedAddress
-}
-
 const getCartOrOrderCustomer = (obj: Cart | Order) => {
   const { first_name: sFirstName, last_name: sLastName } =
     obj.shipping_address || {}

diff --git a/packages/admin-next/dashboard/src/components/common/divider/divider.tsx b/packages/admin-next/dashboard/src/components/common/divider/divider.tsx
@@ -0,0 +1,31 @@
+import { clx } from "@medusajs/ui"
+import { ComponentPropsWithoutRef } from "react"
+
+interface DividerProps
+  extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  orientation?: "horizontal" | "vertical"
+  variant?: "dashed" | "solid"
+}
+
+export const Divider = ({
+  orientation = "horizontal",
+  variant = "solid",
+  className,
+  ...props
+}: DividerProps) => {
+  return (
+    <div
+      aria-orientation={orientation}
+      role="separator"
+      className={clx(
+        {
+          "w-full border-t": orientation === "horizontal",
+          "h-full border-l": orientation === "vertical",
+          "border-dashed": variant === "dashed",
+        },
+        className
+      )}
+      {...props}
+    />
+  )
+}
diff --git a/packages/admin-next/dashboard/src/components/common/divider/index.ts b/packages/admin-next/dashboard/src/components/common/divider/index.ts
@@ -0,0 +1 @@
+export * from "./divider"
diff --git a/packages/admin-next/dashboard/src/components/common/thumbnail/thumbnail.tsx b/packages/admin-next/dashboard/src/components/common/thumbnail/thumbnail.tsx
@@ -1,9 +1,9 @@
-import { Photo } from "@medusajs/icons";
+import { Photo } from "@medusajs/icons"
 
 type ThumbnailProps = {
-  src?: string | null;
-  alt?: string;
-};
+  src?: string | null
+  alt?: string
+}
 
 export const Thumbnail = ({ src, alt }: ThumbnailProps) => {
   return (
@@ -15,8 +15,8 @@ export const Thumbnail = ({ src, alt }: ThumbnailProps) => {
           className="h-full w-full object-cover object-center"
         />
       ) : (
-        <Photo />
+        <Photo className="text-ui-fg-subtle" />
       )}
     </div>
-  );
-};
+  )
+}