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

package/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { UseFormReturn, useWatch } from "react-hook-form"
 
 import { DataGrid } from "../../../../../components/data-grid"
@@ -12,18 +12,24 @@ import { useRegions } from "../../../../../hooks/api/regions"
 import { useStore } from "../../../../../hooks/api/store"
 import { ConditionalPriceForm } from "../../../common/components/conditional-price-form"
 import { ShippingOptionPriceProvider } from "../../../common/components/shipping-option-price-provider"
-import { CONDITIONAL_PRICES_STACKED_MODAL_ID } from "../../../common/constants"
+import {
+  FulfillmentSetType,
+  CONDITIONAL_PRICES_STACKED_MODAL_ID,
+} from "../../../common/constants"
 import { useShippingOptionPriceColumns } from "../../../common/hooks/use-shipping-option-price-columns"
 import { ConditionalPriceInfo } from "../../../common/types"
 import { CreateShippingOptionSchema } from "./schema"
 
 type PricingPricesFormProps = {
   form: UseFormReturn<CreateShippingOptionSchema>
+  type: FulfillmentSetType
 }
 
 export const CreateShippingOptionsPricesForm = ({
   form,
+  type,
 }: PricingPricesFormProps) => {
+  const isPickup = type === FulfillmentSetType.Pickup
   const { getIsOpen, setIsOpen } = useStackedModal()
   const [selectedPrice, setSelectedPrice] =
     useState<ConditionalPriceInfo | null>(null)
@@ -80,6 +86,25 @@ export const CreateShippingOptionsPricesForm = ({
     [currencies, regions]
   )
 
+  /**
+   * Prefill prices with 0 if createing a pickup (shipping) option
+   */
+  useEffect(() => {
+    if (!isLoading && isPickup) {
+      if (currencies.length > 0) {
+        currencies.forEach((currency) => {
+          form.setValue(`currency_prices.${currency}`, "0")
+        })
+      }
+
+      if (regions.length > 0) {
+        regions.forEach((region) => {
+          form.setValue(`region_prices.${region.id}`, "0")
+        })
+      }
+    }
+  }, [isLoading, isPickup])
+
   if (isStoreError) {
     throw storeError
   }

package/src/routes/locations/location-service-zone-shipping-option-create/location-service-zone-shipping-option-create.tsx

@@ -4,6 +4,7 @@ import { RouteFocusModal } from "../../../components/modals"
 import { useStockLocation } from "../../../hooks/api/stock-locations"
 import { CreateShippingOptionsForm } from "./components/create-shipping-options-form"
 import { LOC_CREATE_SHIPPING_OPTION_FIELDS } from "./constants"
+import { FulfillmentSetType } from "../common/constants"
 
 export function LocationServiceZoneShippingOptionCreate() {
   const { location_id, fset_id, zone_id } = useParams()
@@ -15,9 +16,18 @@ export function LocationServiceZoneShippingOptionCreate() {
       fields: LOC_CREATE_SHIPPING_OPTION_FIELDS,
     })
 
-  const zone = stock_location?.fulfillment_sets
-    ?.find((f) => f.id === fset_id)
-    ?.service_zones?.find((z) => z.id === zone_id)
+  const fulfillmentSet = stock_location?.fulfillment_sets?.find(
+    (f) => f.id === fset_id
+  )
+
+  if (!isPending && !isFetching && !fulfillmentSet) {
+    throw json(
+      { message: `Fulfillment set with ID ${fset_id} was not found` },
+      404
+    )
+  }
+
+  const zone = fulfillmentSet?.service_zones?.find((z) => z.id === zone_id)
 
   if (!isPending && !isFetching && !zone) {
     throw json(
@@ -37,6 +47,7 @@ export function LocationServiceZoneShippingOptionCreate() {
           zone={zone}
           isReturn={isReturn}
           locationId={location_id!}
+          type={fulfillmentSet!.type as FulfillmentSetType}
         />
       )}
     </RouteFocusModal>

package/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx

@@ -15,11 +15,15 @@ import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
 import { pick } from "../../../../../lib/common"
 import { isOptionEnabledInStore } from "../../../../../lib/shipping-options"
-import { ShippingOptionPriceType } from "../../../common/constants"
+import {
+  FulfillmentSetType,
+  ShippingOptionPriceType,
+} from "../../../common/constants"
 
 type EditShippingOptionFormProps = {
   locationId: string
   shippingOption: HttpTypes.AdminShippingOption
+  type: FulfillmentSetType
 }
 
 const EditShippingOptionSchema = zod.object({
@@ -32,10 +36,13 @@ const EditShippingOptionSchema = zod.object({
 export const EditShippingOptionForm = ({
   locationId,
   shippingOption,
+  type,
 }: EditShippingOptionFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess } = useRouteModal()
 
+  const isPickup = type === FulfillmentSetType.Pickup
+
   const shippingProfiles = useComboboxData({
     queryFn: (params) => sdk.admin.shippingProfile.list(params),
     queryKey: ["shipping_profiles"],
@@ -108,46 +115,48 @@ export const EditShippingOptionForm = ({
         <RouteDrawer.Body>
           <div className="flex flex-col gap-y-8">
             <div className="flex flex-col gap-y-8">
-              <Form.Field
-                control={form.control}
-                name="price_type"
-                render={({ field }) => {
-                  return (
-                    <Form.Item>
-                      <Form.Label>
-                        {t(
-                          "stockLocations.shippingOptions.fields.priceType.label"
-                        )}
-                      </Form.Label>
-                      <Form.Control>
-                        <RadioGroup {...field} onValueChange={field.onChange}>
-                          <RadioGroup.ChoiceBox
-                            className="flex-1"
-                            value={ShippingOptionPriceType.FlatRate}
-                            label={t(
-                              "stockLocations.shippingOptions.fields.priceType.options.fixed.label"
-                            )}
-                            description={t(
-                              "stockLocations.shippingOptions.fields.priceType.options.fixed.hint"
-                            )}
-                          />
-                          <RadioGroup.ChoiceBox
-                            className="flex-1"
-                            value={ShippingOptionPriceType.Calculated}
-                            label={t(
-                              "stockLocations.shippingOptions.fields.priceType.options.calculated.label"
-                            )}
-                            description={t(
-                              "stockLocations.shippingOptions.fields.priceType.options.calculated.hint"
-                            )}
-                          />
-                        </RadioGroup>
-                      </Form.Control>
-                      <Form.ErrorMessage />
-                    </Form.Item>
-                  )
-                }}
-              />
+              {!isPickup && (
+                <Form.Field
+                  control={form.control}
+                  name="price_type"
+                  render={({ field }) => {
+                    return (
+                      <Form.Item>
+                        <Form.Label>
+                          {t(
+                            "stockLocations.shippingOptions.fields.priceType.label"
+                          )}
+                        </Form.Label>
+                        <Form.Control>
+                          <RadioGroup {...field} onValueChange={field.onChange}>
+                            <RadioGroup.ChoiceBox
+                              className="flex-1"
+                              value={ShippingOptionPriceType.FlatRate}
+                              label={t(
+                                "stockLocations.shippingOptions.fields.priceType.options.fixed.label"
+                              )}
+                              description={t(
+                                "stockLocations.shippingOptions.fields.priceType.options.fixed.hint"
+                              )}
+                            />
+                            <RadioGroup.ChoiceBox
+                              className="flex-1"
+                              value={ShippingOptionPriceType.Calculated}
+                              label={t(
+                                "stockLocations.shippingOptions.fields.priceType.options.calculated.label"
+                              )}
+                              description={t(
+                                "stockLocations.shippingOptions.fields.priceType.options.calculated.hint"
+                              )}
+                            />
+                          </RadioGroup>
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+              )}
 
               <div className="grid gap-y-4">
                 <Form.Field
@@ -194,7 +203,6 @@ export const EditShippingOptionForm = ({
               </div>
 
               <Divider />
-
               <SwitchBox
                 control={form.control}
                 name="enabled_in_store"

package/src/routes/locations/location-service-zone-shipping-option-edit/location-service-zone-shipping-option-edit.tsx

@@ -5,6 +5,7 @@ import { json, useParams } from "react-router-dom"
 import { RouteDrawer } from "../../../components/modals"
 import { useShippingOptions } from "../../../hooks/api/shipping-options"
 import { EditShippingOptionForm } from "./components/edit-region-form"
+import { FulfillmentSetType } from "../common/constants"
 
 export const LocationServiceZoneShippingOptionEdit = () => {
   const { t } = useTranslation()
@@ -14,6 +15,7 @@ export const LocationServiceZoneShippingOptionEdit = () => {
   const { shipping_options, isPending, isFetching, isError, error } =
     useShippingOptions({
       id: so_id,
+      fields: "+service_zone.fulfillment_set.type",
     })
 
   const shippingOption = shipping_options?.find((so) => so.id === so_id)
@@ -29,15 +31,27 @@ export const LocationServiceZoneShippingOptionEdit = () => {
     throw error
   }
 
+  const isPickup =
+    shippingOption?.service_zone.fulfillment_set.type ===
+    FulfillmentSetType.Pickup
+
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
-        <Heading>{t("stockLocations.shippingOptions.edit.header")}</Heading>
+        <Heading>
+          {t(
+            `stockLocations.${isPickup ? "pickupOptions" : "shippingOptions"}.edit.header`
+          )}
+        </Heading>
       </RouteDrawer.Header>
       {shippingOption && (
         <EditShippingOptionForm
           shippingOption={shippingOption}
           locationId={location_id!}
+          type={
+            shippingOption.service_zone.fulfillment_set
+              .type as FulfillmentSetType
+          }
         />
       )}
     </RouteDrawer>

package/src/routes/login/login.tsx

@@ -7,9 +7,9 @@ import * as z from "zod"
 
 import { Form } from "../../components/common/form"
 import AvatarBox from "../../components/common/logo-box/avatar-box"
-import { useDashboardExtension } from "../../extensions"
 import { useSignInWithEmailPass } from "../../hooks/api"
 import { isFetchError } from "../../lib/is-fetch-error"
+import { useExtension } from "../../providers/extension-provider"
 
 const LoginSchema = z.object({
   email: z.string().email(),
@@ -20,7 +20,7 @@ export const Login = () => {
   const { t } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   const from = location.state?.from?.pathname || "/orders"
 

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

@@ -50,10 +50,10 @@ import {
   useUpdateClaimInboundShipping,
   useUpdateClaimOutboundShipping,
 } from "../../../../../hooks/api/claims"
-import { useUpdateReturn } from "../../../../../hooks/api/returns.tsx"
+import { useUpdateReturn } from "../../../../../hooks/api/returns"
 import { sdk } from "../../../../../lib/client"
 import { currencies } from "../../../../../lib/data/currencies"
-import { ReturnShippingPlaceholder } from "../../../common/placeholders.tsx"
+import { ReturnShippingPlaceholder } from "../../../common/placeholders"
 import { ClaimOutboundSection } from "./claim-outbound-section"
 import { ItemPlaceholder } from "./item-placeholder"
 
@@ -425,13 +425,15 @@ export const ClaimCreateForm = ({
     await updateReturn({ location_id: selectedLocationId })
   }
 
-  const onShippingOptionChange = async (selectedOptionId: string) => {
+  const onShippingOptionChange = async (
+    selectedOptionId: string | undefined
+  ) => {
     const inboundShippingMethods = preview.shipping_methods.filter((s) => {
       const action = s.actions?.find(
         (a) => a.action === "SHIPPING_ADD" && !!a.return_id
       )
 
-      return action && !action?.return_id
+      return action && !!action?.return_id
     })
 
     const promises = inboundShippingMethods
@@ -448,14 +450,16 @@ export const ClaimCreateForm = ({
 
     await Promise.all(promises)
 
-    await addInboundShipping(
-      { shipping_option_id: selectedOptionId },
-      {
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
+    if (selectedOptionId) {
+      await addInboundShipping(
+        { shipping_option_id: selectedOptionId },
+        {
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
   }
 
   useEffect(() => {
@@ -508,10 +512,10 @@ export const ClaimCreateForm = ({
         .filter(Boolean)
 
       const variants = (
-        await sdk.admin.productVariant.list(
-          { id: variantIds },
-          { fields: "*inventory,*inventory.location_levels" }
-        )
+        await sdk.admin.productVariant.list({
+          id: variantIds,
+          fields: "*inventory.location_levels",
+        })
       ).variants
 
       variants.forEach((variant) => {
@@ -732,7 +736,6 @@ export const ClaimCreateForm = ({
                     </Form.Hint>
                   </div>
 
-                  {/* TODO: WHAT IF THE RETURN OPTION HAS COMPUTED PRICE*/}
                   <Form.Field
                     control={form.control}
                     name="inbound_option_id"
@@ -741,10 +744,11 @@ export const ClaimCreateForm = ({
                         <Form.Item>
                           <Form.Control>
                             <Combobox
+                              allowClear
                               value={value ?? undefined}
                               onChange={(val) => {
                                 onChange(val)
-                                val && onShippingOptionChange(val)
+                                onShippingOptionChange(val)
                               }}
                               {...field}
                               options={inboundShippingOptions.map((so) => ({

package/src/routes/orders/order-create-claim/components/claim-create-form/claim-outbound-section.tsx

@@ -63,6 +63,13 @@ export const ClaimOutboundSection = ({
     fields: "*prices,+service_zone.fulfillment_set.location.id",
   })
 
+  const outboundShippingOptions = shipping_options.filter(
+    (shippingOption) =>
+      !!shippingOption.rules.find(
+        (r) => r.attribute === "is_return" && r.value === "false"
+      )
+  )
+
   const { mutateAsync: addOutboundShipping } = useAddClaimOutboundShipping(
     claim.id,
     order.id
@@ -190,7 +197,9 @@ export const ClaimOutboundSection = ({
     setIsOpen("outbound-items", false)
   }
 
-  const onShippingOptionChange = async (selectedOptionId: string) => {
+  const onShippingOptionChange = async (
+    selectedOptionId: string | undefined
+  ) => {
     const outboundShippingMethods = preview.shipping_methods.filter((s) => {
       const action = s.actions?.find(
         (a) => a.action === "SHIPPING_ADD" && !a.return_id
@@ -213,14 +222,16 @@ export const ClaimOutboundSection = ({
 
     await Promise.all(promises)
 
-    await addOutboundShipping(
-      { shipping_option_id: selectedOptionId },
-      {
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
+    if (selectedOptionId) {
+      await addOutboundShipping(
+        { shipping_option_id: selectedOptionId },
+        {
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
   }
 
   const showLevelsWarning = useMemo(() => {
@@ -260,11 +271,12 @@ export const ClaimOutboundSection = ({
       const variantIds = outboundItems
         .map((item) => item?.variant_id)
         .filter(Boolean)
+
       const variants = (
-        await sdk.admin.productVariant.list(
-          { id: variantIds },
-          { fields: "*inventory,*inventory.location_levels" }
-        )
+        await sdk.admin.productVariant.list({
+          id: variantIds,
+          fields: "*inventory.location_levels",
+        })
       ).variants
 
       variants.forEach((variant) => {
@@ -395,17 +407,18 @@ export const ClaimOutboundSection = ({
                   <Form.Item>
                     <Form.Control>
                       <Combobox
+                        allowClear
                         value={value ?? undefined}
                         onChange={(val) => {
                           onChange(val)
-                          val && onShippingOptionChange(val)
+                          onShippingOptionChange(val)
                         }}
                         {...field}
-                        options={shipping_options.map((so) => ({
+                        options={outboundShippingOptions.map((so) => ({
                           label: so.name,
                           value: so.id,
                         }))}
-                        disabled={!shipping_options.length}
+                        disabled={!outboundShippingOptions.length}
                         noResultsPlaceholder={<OutboundShippingPlaceholder />}
                       />
                     </Form.Control>

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-inbound-section.tsx

@@ -199,7 +199,7 @@ export const ExchangeInboundSection = ({
         inboundShippingMethod.shipping_option_id
       )
     } else {
-      form.setValue("inbound_option_id", null)
+      form.setValue("inbound_option_id", "")
     }
   }, [preview.shipping_methods])
 
@@ -246,7 +246,9 @@ export const ExchangeInboundSection = ({
     await updateReturn({ location_id: selectedLocationId })
   }
 
-  const onShippingOptionChange = async (selectedOptionId: string) => {
+  const onShippingOptionChange = async (
+    selectedOptionId: string | undefined
+  ) => {
     const inboundShippingMethods = preview.shipping_methods.filter((s) =>
       s.actions?.find((a) => a.action === "SHIPPING_ADD" && !!a.return_id)
     )
@@ -265,14 +267,16 @@ export const ExchangeInboundSection = ({
 
     await Promise.all(promises)
 
-    await addInboundShipping(
-      { shipping_option_id: selectedOptionId },
-      {
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
+    if (selectedOptionId) {
+      await addInboundShipping(
+        { shipping_option_id: selectedOptionId },
+        {
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
   }
 
   const showLevelsWarning = useMemo(() => {
@@ -313,10 +317,10 @@ export const ExchangeInboundSection = ({
         .filter(Boolean)
 
       const variants = (
-        await sdk.admin.productVariant.list(
-          { id: variantIds },
-          { fields: "*inventory,*inventory.location_levels" }
-        )
+        await sdk.admin.productVariant.list({
+          id: variantIds,
+          fields: "*inventory.location_levels",
+        })
       ).variants
 
       variants.forEach((variant) => {
@@ -505,10 +509,11 @@ export const ExchangeInboundSection = ({
                   <Form.Item>
                     <Form.Control>
                       <Combobox
+                        allowClear
                         value={value ?? undefined}
                         onChange={(val) => {
                           onChange(val)
-                          val && onShippingOptionChange(val)
+                          onShippingOptionChange(val)
                         }}
                         {...field}
                         options={inboundShippingOptions.map((so) => ({

package/src/routes/orders/order-create-exchange/components/exchange-create-form/exchange-outbound-section.tsx

@@ -62,6 +62,13 @@ export const ExchangeOutboundSection = ({
     fields: "*prices,+service_zone.fulfillment_set.location.id",
   })
 
+  const outboundShippingOptions = shipping_options.filter(
+    (shippingOption) =>
+      !!shippingOption.rules.find(
+        (r) => r.attribute === "is_return" && r.value === "false"
+      )
+  )
+
   const { mutateAsync: addOutboundShipping } = useAddExchangeOutboundShipping(
     exchange.id,
     order.id
@@ -198,11 +205,13 @@ export const ExchangeOutboundSection = ({
     if (outboundShipping) {
       form.setValue("outbound_option_id", outboundShipping.shipping_option_id)
     } else {
-      form.setValue("outbound_option_id", null)
+      form.setValue("outbound_option_id", "")
     }
   }, [preview.shipping_methods])
 
-  const onShippingOptionChange = async (selectedOptionId: string) => {
+  const onShippingOptionChange = async (
+    selectedOptionId: string | undefined
+  ) => {
     const outboundShippingMethods = preview.shipping_methods.filter(
       (s) =>
         !!s.actions?.find((a) => a.action === "SHIPPING_ADD" && !a.return_id)
@@ -222,14 +231,16 @@ export const ExchangeOutboundSection = ({
 
     await Promise.all(promises)
 
-    await addOutboundShipping(
-      { shipping_option_id: selectedOptionId },
-      {
-        onError: (error) => {
-          toast.error(error.message)
-        },
-      }
-    )
+    if (selectedOptionId) {
+      await addOutboundShipping(
+        { shipping_option_id: selectedOptionId },
+        {
+          onError: (error) => {
+            toast.error(error.message)
+          },
+        }
+      )
+    }
   }
 
   const showLevelsWarning = useMemo(() => {
@@ -268,11 +279,12 @@ export const ExchangeOutboundSection = ({
       const variantIds = outboundItems
         .map((item) => item?.variant_id)
         .filter(Boolean)
+
       const variants = (
-        await sdk.admin.productVariant.list(
-          { id: variantIds },
-          { fields: "*inventory,*inventory.location_levels" }
-        )
+        await sdk.admin.productVariant.list({
+          id: variantIds,
+          fields: "*inventory.location_levels",
+        })
       ).variants
 
       variants.forEach((variant) => {
@@ -403,18 +415,19 @@ export const ExchangeOutboundSection = ({
                   <Form.Item>
                     <Form.Control>
                       <Combobox
+                        allowClear
                         noResultsPlaceholder={<OutboundShippingPlaceholder />}
                         value={value ?? undefined}
                         onChange={(val) => {
                           onChange(val)
-                          val && onShippingOptionChange(val)
+                          onShippingOptionChange(val)
                         }}
                         {...field}
-                        options={shipping_options.map((so) => ({
+                        options={outboundShippingOptions.map((so) => ({
                           label: so.name,
                           value: so.id,
                         }))}
-                        disabled={!shipping_options.length}
+                        disabled={!outboundShippingOptions.length}
                       />
                     </Form.Control>
                   </Form.Item>