@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102125810

package/src/routes/login/components/cloud-auth-login.tsx

@@ -0,0 +1,114 @@
+import { Button, toast } from "@medusajs/ui"
+import { useMutation } from "@tanstack/react-query"
+import { useEffect, useRef } from "react"
+import { useTranslation } from "react-i18next"
+import { decodeToken } from "react-jwt"
+import { useNavigate, useSearchParams } from "react-router-dom"
+import { useCreateCloudAuthUser } from "../../../hooks/api/cloud"
+import { sdk } from "../../../lib/client"
+
+const CLOUD_AUTH_PROVIDER = "cloud"
+
+export const CloudAuthLogin = () => {
+  const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
+
+  const { handleCallback, isCallbackPending } = useAuthCallback(searchParams)
+
+  // Check if we're returning from the OAuth callback
+  const hasCallbackParams =
+    searchParams.get("auth_provider") === CLOUD_AUTH_PROVIDER &&
+    searchParams.has("code") &&
+    searchParams.has("state")
+
+  const callbackInitiated = useRef(false) // ref to prevent duplicate calls in React strict mode and other unmounting+mounting scenarios
+  useEffect(() => {
+    if (hasCallbackParams && !callbackInitiated.current) {
+      callbackInitiated.current = true
+      handleCallback()
+    }
+  }, [hasCallbackParams, handleCallback])
+
+  const handleCloudLogin = async () => {
+    try {
+      const result = await sdk.auth.login("user", CLOUD_AUTH_PROVIDER, {
+        // in case the admin is on a different domain, or the backend URL is set to just "/" which won't work for the callback
+        callback_url: `${window.location.origin}${window.location.pathname}?auth_provider=${CLOUD_AUTH_PROVIDER}`,
+      })
+
+      if (typeof result === "object" && result.location) {
+        // Redirect to Medusa Cloud for authentication
+        window.location.href = result.location
+        return
+      }
+
+      throw new Error("Unexpected login response")
+    } catch {
+      toast.error(t("auth.login.authenticationFailed"))
+    }
+  }
+
+  return (
+    <>
+      <hr className="bg-ui-border-base my-4" />
+      <Button
+        variant="secondary"
+        onClick={handleCloudLogin}
+        className="w-full"
+        disabled={isCallbackPending}
+        isLoading={isCallbackPending}
+      >
+        {t("auth.login.cloud")}
+      </Button>
+    </>
+  )
+}
+
+const useAuthCallback = (searchParams: URLSearchParams) => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { mutateAsync: createCloudAuthUser } = useCreateCloudAuthUser()
+
+  const { mutateAsync: handleCallback, isPending: isCallbackPending } =
+    useMutation({
+      mutationFn: async () => {
+        let token: string
+        try {
+          const query = Object.fromEntries(searchParams)
+          delete query.auth_provider // BE doesn't need this
+
+          token = await sdk.auth.callback("user", CLOUD_AUTH_PROVIDER, query)
+        } catch (error) {
+          throw new Error("Authentication callback failed")
+        }
+
+        const decodedToken = decodeToken(token) as {
+          actor_id: string
+          user_metadata: Record<string, unknown>
+        }
+
+        // If user doesn't exist, create it
+        if (!decodedToken?.actor_id) {
+          await createCloudAuthUser()
+
+          // Refresh token to get the updated token with actor_id
+          const refreshedToken = await sdk.auth.refresh({
+            Authorization: `Bearer ${token}`, // passing it manually in case the auth type is session
+          })
+          if (!refreshedToken) {
+            throw new Error("Failed to refresh token after user creation")
+          }
+        }
+
+        return true
+      },
+      onSuccess: () => {
+        navigate("/")
+      },
+      onError: () => {
+        toast.error(t("auth.login.authenticationFailed"))
+      },
+    })
+
+  return { handleCallback, isCallbackPending }
+}

package/src/routes/login/login.tsx

@@ -8,8 +8,10 @@ import * as z from "zod"
 import { Form } from "../../components/common/form"
 import AvatarBox from "../../components/common/logo-box/avatar-box"
 import { useSignInWithEmailPass } from "../../hooks/api"
+import { useCloudAuthEnabled } from "../../hooks/api/cloud"
 import { isFetchError } from "../../lib/is-fetch-error"
 import { useExtension } from "../../providers/extension-provider"
+import { CloudAuthLogin } from "./components/cloud-auth-login"
 
 const LoginSchema = z.object({
   email: z.string().email(),
@@ -21,6 +23,7 @@ export const Login = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const { getWidgets } = useExtension()
+  const { data: cloudAuth } = useCloudAuthEnabled()
 
   const from = location.state?.from?.pathname || "/orders"
 
@@ -70,6 +73,11 @@ export const Login = () => {
     form.formState.errors.email?.message ||
     form.formState.errors.password?.message
 
+  const loginAfterWidgets = [...getWidgets("login.after")] // cloning to avoid mutating the original array below
+  if (cloudAuth?.enabled) {
+    loginAfterWidgets.push(CloudAuthLogin)
+  }
+
   return (
     <div className="bg-ui-bg-subtle flex min-h-dvh w-dvw items-center justify-center">
       <div className="m-4 flex w-full max-w-[280px] flex-col items-center">
@@ -150,7 +158,7 @@ export const Login = () => {
               </Button>
             </form>
           </Form>
-          {getWidgets("login.after").map((Component, i) => {
+          {loginAfterWidgets.map((Component, i) => {
             return <Component key={i} />
           })}
         </div>

package/src/routes/orders/order-create-edit/components/order-edit-create-form/order-edit-item.tsx

@@ -180,6 +180,7 @@ function OrderEditItem({ item, currencyCode, orderId }: OrderEditItemProps) {
             <Input
               className="bg-ui-bg-base txt-small w-[67px] rounded-lg [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               type="number"
+              step="any"
               disabled={item.detail.fulfilled_quantity === item.quantity}
               min={item.detail.fulfilled_quantity}
               defaultValue={item.quantity}

package/src/routes/orders/order-edit-billing-address/components/edit-order-billing-address-form/edit-order-billing-address-form.tsx

@@ -16,6 +16,8 @@ type EditOrderBillingAddressFormProps = {
 }
 
 const EditOrderBillingAddressSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional(),
   address_1: zod.string().min(1),
   address_2: zod.string().optional(),
   country_code: zod.string().min(2).max(2),
@@ -34,6 +36,8 @@ export function EditOrderBillingAddressForm({
 
   const form = useForm<zod.infer<typeof EditOrderBillingAddressSchema>>({
     defaultValues: {
+      first_name: order.billing_address?.first_name || "",
+      last_name: order.billing_address?.last_name || "",
       address_1: order.billing_address?.address_1 || "",
       address_2: order.billing_address?.address_2 || "",
       city: order.billing_address?.city || "",
@@ -158,6 +162,36 @@ export function EditOrderBillingAddressForm({
                 )
               }}
             />
+            <Form.Field
+              control={form.control}
+              name="first_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="last_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                    <Form.ErrorMessage />
+                  </Form.Item>
+                )
+              }}
+            />
             <Form.Field
               control={form.control}
               name="company"

package/src/routes/orders/order-edit-shipping-address/components/edit-order-shipping-address-form/edit-order-shipping-address-form.tsx

@@ -16,6 +16,8 @@ type EditOrderShippingAddressFormProps = {
 }
 
 const EditOrderShippingAddressSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional(),
   address_1: zod.string().min(1),
   address_2: zod.string().optional(),
   country_code: zod.string().min(2).max(2),
@@ -34,6 +36,8 @@ export function EditOrderShippingAddressForm({
 
   const form = useForm<zod.infer<typeof EditOrderShippingAddressSchema>>({
     defaultValues: {
+      first_name: order.shipping_address?.first_name || "",
+      last_name: order.shipping_address?.last_name || "",
       address_1: order.shipping_address?.address_1 || "",
       address_2: order.shipping_address?.address_2 || "",
       city: order.shipping_address?.city || "",
@@ -158,6 +162,34 @@ export function EditOrderShippingAddressForm({
                 )
               }}
             />
+            <Form.Field
+              control={form.control}
+              name="first_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.firstName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                  </Form.Item>
+                )
+              }}
+            />
+            <Form.Field
+              control={form.control}
+              name="last_name"
+              render={({ field }) => {
+                return (
+                  <Form.Item>
+                    <Form.Label>{t("fields.lastName")}</Form.Label>
+                    <Form.Control>
+                      <Input size="small" {...field} />
+                    </Form.Control>
+                  </Form.Item>
+                )
+              }}
+            />
             <Form.Field
               control={form.control}
               name="company"

package/src/routes/product-options/common/hooks/use-delete-product-option-action.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom"
+import { toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useDeleteProductOption } from "../../../../hooks/api"
+import { HttpTypes } from "@medusajs/types"
+
+export const useDeleteProductOptionAction = ({
+  id,
+  title,
+}: HttpTypes.AdminProductOption) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+
+  const { mutateAsync } = useDeleteProductOption(id)
+
+  return async () => {
+    const result = await prompt({
+      title: t("general.areYouSure"),
+      description: t("productOptions.delete.confirmation", { title }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!result) {
+      return
+    }
+
+    await mutateAsync(undefined, {
+      onSuccess: () => {
+        navigate("/product-options", {
+          replace: true,
+        })
+        toast.success(t("productOptions.delete.successToast", { title }))
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-details.tsx

@@ -0,0 +1,71 @@
+import { Heading, Input, Text } from "@medusajs/ui"
+import { UseFormReturn } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { Form } from "../../../../../components/common/form"
+import { ChipInput } from "../../../../../components/inputs/chip-input"
+import { CreateProductOptionSchema } from "./schema"
+
+type CreateProductOptionDetailsProps = {
+  form: UseFormReturn<CreateProductOptionSchema>
+}
+
+export const CreateProductOptionDetails = ({
+  form,
+}: CreateProductOptionDetailsProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col items-center p-16">
+      <div className="flex w-full max-w-[720px] flex-col gap-y-8">
+        <div>
+          <Heading>{t("productOptions.create.header")}</Heading>
+          <Text size="small" className="text-ui-fg-subtle">
+            {t("productOptions.create.hint")}
+          </Text>
+        </div>
+        <Form.Field
+          control={form.control}
+          name="title"
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Label>
+                  {t("productOptions.fields.title.label")}
+                </Form.Label>
+                <Form.Control>
+                  <Input
+                    autoComplete="off"
+                    {...field}
+                    placeholder={t("productOptions.fields.title.placeholder")}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+        <Form.Field
+          control={form.control}
+          name="values"
+          render={({ field }) => {
+            return (
+              <Form.Item>
+                <Form.Label>
+                  {t("productOptions.fields.values.label")}
+                </Form.Label>
+                <Form.Control>
+                  <ChipInput
+                    {...field}
+                    placeholder={t("productOptions.fields.values.placeholder")}
+                  />
+                </Form.Control>
+                <Form.ErrorMessage />
+              </Form.Item>
+            )
+          }}
+        />
+      </div>
+    </div>
+  )
+}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-form.tsx

@@ -0,0 +1,192 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Button, ProgressStatus, ProgressTabs, toast } from "@medusajs/ui"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+
+import { useState } from "react"
+import {
+  RouteFocusModal,
+  useRouteModal,
+} from "../../../../../components/modals"
+import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
+import { useCreateProductOption } from "../../../../../hooks/api"
+import { CreateProductOptionDetails } from "./create-product-option-details"
+import { CreateProductOptionOrganize } from "./create-product-option-organize"
+import {
+  CreateProductOptionDetailsSchema,
+  CreateProductOptionSchema,
+} from "./schema"
+import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
+
+enum Tab {
+  DETAILS = "details",
+  ORGANIZE = "organize",
+}
+
+export const CreateProductOptionForm = () => {
+  const { t } = useTranslation()
+  const { handleSuccess } = useRouteModal()
+  const direction = useDocumentDirection()
+  const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
+  const [validDetails, setValidDetails] = useState(false)
+
+  const form = useForm<CreateProductOptionSchema>({
+    defaultValues: {
+      title: "",
+      values: [],
+      value_ranks: {},
+    },
+    resolver: zodResolver(CreateProductOptionSchema),
+  })
+
+  const handleTabChange = (tab: Tab) => {
+    if (tab === Tab.ORGANIZE) {
+      const { title, values } = form.getValues()
+
+      const result = CreateProductOptionDetailsSchema.safeParse({
+        title,
+        values,
+      })
+
+      if (!result.success) {
+        result.error.errors.forEach((error) => {
+          form.setError(
+            error.path.join(".") as keyof CreateProductOptionSchema,
+            {
+              type: "manual",
+              message: error.message,
+            }
+          )
+        })
+
+        return
+      }
+
+      form.clearErrors()
+      setValidDetails(true)
+    }
+
+    setActiveTab(tab)
+  }
+
+  const { mutateAsync, isPending } = useCreateProductOption()
+
+  const handleSubmit = form.handleSubmit((data) => {
+    const { title, values, value_ranks } = data
+
+    mutateAsync(
+      {
+        title,
+        values,
+        ranks: value_ranks,
+      },
+      {
+        onSuccess: ({ product_option }) => {
+          toast.success(
+            t("productOptions.create.successToast", {
+              title: product_option.title,
+            })
+          )
+
+          handleSuccess(`/product-options/${product_option.id}`)
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      }
+    )
+  })
+
+  const organizeStatus: ProgressStatus =
+    form.getFieldState("value_ranks")?.isDirty || activeTab === Tab.ORGANIZE
+      ? "in-progress"
+      : "not-started"
+
+  const detailsStatus: ProgressStatus = validDetails
+    ? "completed"
+    : "in-progress"
+
+  return (
+    <RouteFocusModal.Form form={form}>
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex size-full flex-col overflow-hidden"
+      >
+        <ProgressTabs
+          dir={direction}
+          value={activeTab}
+          onValueChange={(tab) => handleTabChange(tab as Tab)}
+          className="flex size-full flex-col"
+        >
+          <RouteFocusModal.Header>
+            <div className="flex w-full items-center justify-between">
+              <div className="-my-2 w-full max-w-[400px] border-l">
+                <ProgressTabs.List className="grid w-full grid-cols-2">
+                  <ProgressTabs.Trigger
+                    value={Tab.DETAILS}
+                    status={detailsStatus}
+                    className="w-full min-w-0 overflow-hidden"
+                  >
+                    <span className="truncate">
+                      {t("productOptions.create.tabs.details")}
+                    </span>
+                  </ProgressTabs.Trigger>
+                  <ProgressTabs.Trigger
+                    value={Tab.ORGANIZE}
+                    status={organizeStatus}
+                    className="w-full min-w-0 overflow-hidden"
+                  >
+                    <span className="truncate">
+                      {t("productOptions.create.tabs.organize")}
+                    </span>
+                  </ProgressTabs.Trigger>
+                </ProgressTabs.List>
+              </div>
+            </div>
+          </RouteFocusModal.Header>
+          <RouteFocusModal.Body className="flex size-full flex-col overflow-auto">
+            <ProgressTabs.Content value={Tab.DETAILS}>
+              <CreateProductOptionDetails form={form} />
+            </ProgressTabs.Content>
+            <ProgressTabs.Content
+              value={Tab.ORGANIZE}
+              className="bg-ui-bg-subtle flex-1"
+            >
+              <CreateProductOptionOrganize form={form} />
+            </ProgressTabs.Content>
+          </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>
+              {activeTab === Tab.ORGANIZE ? (
+                <Button
+                  key="submit-btn"
+                  size="small"
+                  variant="primary"
+                  type="submit"
+                  isLoading={isPending}
+                >
+                  {t("actions.save")}
+                </Button>
+              ) : (
+                <Button
+                  key="continue-btn"
+                  size="small"
+                  variant="primary"
+                  type="button"
+                  onClick={() => handleTabChange(Tab.ORGANIZE)}
+                >
+                  {t("actions.continue")}
+                </Button>
+              )}
+            </div>
+          </RouteFocusModal.Footer>
+        </ProgressTabs>
+      </KeyboundForm>
+    </RouteFocusModal.Form>
+  )
+}

package/src/routes/product-options/product-option-create/components/create-product-option-form/create-product-option-organize.tsx

@@ -0,0 +1,77 @@
+import { Text } from "@medusajs/ui"
+import { useMemo } from "react"
+import { UseFormReturn, useWatch } from "react-hook-form"
+import { SortableList } from "../../../../../components/common/sortable-list"
+import { CreateProductOptionSchema } from "./schema"
+
+type CreateProductOptionOrganizeProps = {
+  form: UseFormReturn<CreateProductOptionSchema>
+}
+
+type ValueItem = {
+  id: string
+  value: string
+  rank: number
+}
+
+export const CreateProductOptionOrganize = ({
+  form,
+}: CreateProductOptionOrganizeProps) => {
+  const values = useWatch({
+    control: form.control,
+    name: "values",
+  })
+
+  const valueRanks = useWatch({
+    control: form.control,
+    name: "value_ranks",
+  })
+
+  const items = useMemo<ValueItem[]>(() => {
+    if (!values || values.length === 0) {
+      return []
+    }
+
+    return values
+      .map((value, index) => ({
+        id: value,
+        value,
+        rank: valueRanks?.[value] ?? index,
+      }))
+      .sort((a, b) => a.rank - b.rank)
+  }, [values, valueRanks])
+
+  const handleChange = (newItems: ValueItem[]) => {
+    const newRanks: Record<string, number> = {}
+    newItems.forEach((item, index) => {
+      newRanks[item.value] = index
+    })
+
+    form.setValue("value_ranks", newRanks, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+  }
+
+  if (!values || values.length === 0) {
+    return null
+  }
+
+  return (
+    <SortableList
+      items={items}
+      onChange={handleChange}
+      renderItem={(item) => (
+        <SortableList.Item
+          id={item.id}
+          className="border-ui-border-base border-b last:border-b-0"
+        >
+          <div className="flex flex-1 items-center gap-x-3 px-4 py-3">
+            <SortableList.DragHandle />
+            <Text size="small">{item.value}</Text>
+          </div>
+        </SortableList.Item>
+      )}
+    />
+  )
+}

package/src/routes/product-options/product-option-create/components/create-product-option-form/index.ts

@@ -0,0 +1 @@
+export { CreateProductOptionForm } from "./create-product-option-form"

package/src/routes/product-options/product-option-create/components/create-product-option-form/schema.ts

@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+export const CreateProductOptionDetailsSchema = z.object({
+  title: z.string().min(1),
+  values: z.array(z.string()).min(1, "At least one value is required"),
+})
+
+export type CreateProductOptionSchema = z.infer<
+  typeof CreateProductOptionSchema
+>
+export const CreateProductOptionSchema = z
+  .object({
+    value_ranks: z.record(z.string(), z.number()).optional(),
+  })
+  .merge(CreateProductOptionDetailsSchema)

package/src/routes/product-options/product-option-create/index.ts

@@ -0,0 +1 @@
+export { ProductOptionCreate as Component } from "./product-option-create"

package/src/routes/product-options/product-option-create/product-option-create.tsx

@@ -0,0 +1,10 @@
+import { RouteFocusModal } from "../../../components/modals"
+import { CreateProductOptionForm } from "./components/create-product-option-form/create-product-option-form"
+
+export const ProductOptionCreate = () => {
+  return (
+    <RouteFocusModal>
+      <CreateProductOptionForm />
+    </RouteFocusModal>
+  )
+}