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

package/src/routes/customers/customer-detail/components/customer-address-section/customer-address-section.tsx

@@ -0,0 +1,104 @@
+import { HttpTypes } from "@medusajs/types"
+import { clx, Container, Heading, toast, usePrompt } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+
+import { Trash } from "@medusajs/icons"
+import { Link, useNavigate } from "react-router-dom"
+import { ActionMenu } from "../../../../../components/common/action-menu"
+import { NoRecords } from "../../../../../components/common/empty-table-content"
+import { Listicle } from "../../../../../components/common/listicle"
+import { useDeleteCustomerAddress } from "../../../../../hooks/api/customers"
+
+type CustomerAddressSectionProps = {
+  customer: HttpTypes.AdminCustomer
+}
+
+export const CustomerAddressSection = ({
+  customer,
+}: CustomerAddressSectionProps) => {
+  const { t } = useTranslation()
+  const prompt = usePrompt()
+  const navigate = useNavigate()
+  const { mutateAsync: deleteAddress } = useDeleteCustomerAddress(customer.id)
+
+  const addresses = customer.addresses ?? []
+
+  const handleDelete = async (address: HttpTypes.AdminCustomerAddress) => {
+    const confirm = await prompt({
+      title: t("general.areYouSure"),
+      description: t("general.areYouSureDescription", {
+        entity: t("fields.address"),
+        title: address.address_name ?? "n/a",
+      }),
+      verificationInstruction: t("general.typeToConfirm"),
+      verificationText: address.address_name ?? "address",
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel"),
+    })
+
+    if (!confirm) {
+      return
+    }
+
+    await deleteAddress(address.id, {
+      onSuccess: () => {
+        toast.success(
+          t("general.success", { name: address.address_name ?? "address" })
+        )
+
+        navigate(`/customers/${customer.id}`, { replace: true })
+      },
+      onError: (e) => {
+        toast.error(e.message)
+      },
+    })
+  }
+
+  return (
+    <Container className="p-0">
+      <div className="flex items-center justify-between px-6 py-4">
+        <Heading level="h2">{t("addresses.title")}</Heading>
+        <Link to={`create-address`} className="text-ui-fg-muted text-xs">
+          Add
+        </Link>
+      </div>
+
+      {addresses.length === 0 && (
+        <NoRecords
+          className={clx({
+            "flex h-full flex-col overflow-hidden border-t p-6": true,
+          })}
+          icon={null}
+          title={t("general.noRecordsTitle")}
+          message={t("general.noRecordsMessage")}
+        />
+      )}
+
+      {addresses.map((address) => {
+        return (
+          <Listicle
+            key={address.id}
+            labelKey={address.address_name ?? "n/a"}
+            descriptionKey={[address.address_1, address.address_2].join(" ")}
+          >
+            <ActionMenu
+              groups={[
+                {
+                  actions: [
+                    {
+                      icon: <Trash />,
+                      label: t("actions.delete"),
+                      onClick: async () => {
+                        await handleDelete(address)
+                      },
+                    },
+                  ],
+                },
+              ]}
+            />
+          </Listicle>
+        )
+      })}
+    </Container>
+  )
+}

package/src/routes/customers/customer-detail/components/customer-address-section/index.ts

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

package/src/routes/customers/customer-detail/customer-detail.tsx

@@ -1,9 +1,10 @@
 import { useLoaderData, useParams } from "react-router-dom"
 
 import { SingleColumnPageSkeleton } from "../../../components/common/skeleton"
-import { SingleColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { TwoColumnPage } from "../../../components/layout/pages"
 import { useCustomer } from "../../../hooks/api/customers"
+import { useExtension } from "../../../providers/extension-provider"
+import { CustomerAddressSection } from "./components/customer-address-section/customer-address-section"
 import { CustomerGeneralSection } from "./components/customer-general-section"
 import { CustomerGroupSection } from "./components/customer-group-section"
 import { CustomerOrderSection } from "./components/customer-order-section"
@@ -15,11 +16,13 @@ export const CustomerDetail = () => {
   const initialData = useLoaderData() as Awaited<
     ReturnType<typeof customerLoader>
   >
-  const { customer, isLoading, isError, error } = useCustomer(id!, undefined, {
-    initialData,
-  })
+  const { customer, isLoading, isError, error } = useCustomer(
+    id!,
+    { fields: "+*addresses" },
+    { initialData }
+  )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !customer) {
     return <SingleColumnPageSkeleton sections={2} showJSON showMetadata />
@@ -30,19 +33,26 @@ export const CustomerDetail = () => {
   }
 
   return (
-    <SingleColumnPage
+    <TwoColumnPage
       widgets={{
         before: getWidgets("customer.details.before"),
         after: getWidgets("customer.details.after"),
+        sideAfter: getWidgets("customer.details.side.after"),
+        sideBefore: getWidgets("customer.details.side.before"),
       }}
       data={customer}
       hasOutlet
       showJSON
       showMetadata
     >
-      <CustomerGeneralSection customer={customer} />
-      <CustomerOrderSection customer={customer} />
-      <CustomerGroupSection customer={customer} />
-    </SingleColumnPage>
+      <TwoColumnPage.Main>
+        <CustomerGeneralSection customer={customer} />
+        <CustomerOrderSection customer={customer} />
+        <CustomerGroupSection customer={customer} />
+      </TwoColumnPage.Main>
+      <TwoColumnPage.Sidebar>
+        <CustomerAddressSection customer={customer} />
+      </TwoColumnPage.Sidebar>
+    </TwoColumnPage>
   )
 }

package/src/routes/customers/customer-detail/loader.ts

@@ -5,7 +5,10 @@ import { queryClient } from "../../../lib/query-client"
 
 const customerDetailQuery = (id: string) => ({
   queryKey: productsQueryKeys.detail(id),
-  queryFn: async () => sdk.admin.customer.retrieve(id),
+  queryFn: async () =>
+    sdk.admin.customer.retrieve(id, {
+      fields: "+*addresses",
+    }),
 })
 
 export const customerLoader = async ({ params }: LoaderFunctionArgs) => {

package/src/routes/customers/customer-list/customer-list.tsx

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

package/src/routes/inventory/inventory-detail/components/adjust-inventory/adjust-inventory-drawer.tsx

@@ -41,7 +41,7 @@ export const AdjustInventoryDrawer = () => {
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
-        <Heading>{t("inventory.manageLocations")}</Heading>
+        <Heading>{t("inventory.manageLocationQuantity")}</Heading>
       </RouteDrawer.Header>
       {ready && (
         <AdjustInventoryForm

package/src/routes/inventory/inventory-detail/components/edit-inventory-item-attributes/components/edit-item-attributes-form.tsx

@@ -24,6 +24,7 @@ const EditInventoryItemAttributesSchema = z.object({
   length: z.number().positive().optional(),
   weight: z.number().positive().optional(),
   mid_code: z.string().optional(),
+  material: z.string().optional(),
   hs_code: z.string().optional(),
   origin_country: z.string().optional(),
 })
@@ -35,6 +36,7 @@ const getDefaultValues = (item: InventoryTypes.InventoryItemDTO) => {
     length: item.length ?? undefined,
     weight: item.weight ?? undefined,
     mid_code: item.mid_code ?? undefined,
+    material: item.material ?? undefined,
     hs_code: item.hs_code ?? undefined,
     origin_country: item.origin_country ?? undefined,
   }
@@ -216,6 +218,21 @@ export const EditInventoryItemAttributesForm = ({
               )
             }}
           />
+          <Form.Field
+            control={form.control}
+            name="material"
+            render={({ field }) => {
+              return (
+                <Form.Item>
+                  <Form.Label optional>{t("fields.material")}</Form.Label>
+                  <Form.Control>
+                    <Input {...field} />
+                  </Form.Control>
+                  <Form.ErrorMessage />
+                </Form.Item>
+              )
+            }}
+          />
 
           <Form.Field
             control={form.control}

package/src/routes/inventory/inventory-detail/components/inventory-item-attributes/attributes-section.tsx

@@ -39,6 +39,7 @@ export const InventoryItemAttributeSection = ({
       <SectionRow title={t("fields.length")} value={inventoryItem.length} />
       <SectionRow title={t("fields.weight")} value={inventoryItem.weight} />
       <SectionRow title={t("fields.midCode")} value={inventoryItem.mid_code} />
+      <SectionRow title={t("fields.material")} value={inventoryItem.material} />
       <SectionRow title={t("fields.hsCode")} value={inventoryItem.hs_code} />
       <SectionRow
         title={t("fields.countryOfOrigin")}

package/src/routes/inventory/inventory-detail/inventory-detail.tsx

@@ -10,7 +10,7 @@ import { InventoryItemReservationsSection } from "./components/inventory-item-re
 import { InventoryItemVariantsSection } from "./components/inventory-item-variants/variants-section"
 import { inventoryItemLoader } from "./loader"
 
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { INVENTORY_DETAIL_FIELDS } from "./constants"
 
 export const InventoryDetail = () => {
@@ -35,7 +35,7 @@ export const InventoryDetail = () => {
     }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !inventory_item) {
     return (

package/src/routes/inventory/inventory-list/inventory-list.tsx

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

package/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx

@@ -195,12 +195,14 @@ type ServiceZoneOptionsProps = {
   zone: HttpTypes.AdminServiceZone
   locationId: string
   fulfillmentSetId: string
+  type: FulfillmentSetType
 }
 
 function ServiceZoneOptions({
   zone,
   locationId,
   fulfillmentSetId,
+  type,
 }: ServiceZoneOptionsProps) {
   const { t } = useTranslation()
 
@@ -216,7 +218,7 @@ function ServiceZoneOptions({
       <div className="flex flex-col gap-y-4 px-6 py-4">
         <div className="item-center flex justify-between">
           <span className="text-ui-fg-subtle txt-small self-center font-medium">
-            {t("stockLocations.shippingOptions.create.shipping.label")}
+            {t(`stockLocations.shippingOptions.create.${type}.label`)}
           </span>
           <LinkButton
             to={`/settings/locations/${locationId}/fulfillment-set/${fulfillmentSetId}/service-zone/${zone.id}/shipping-option/create`}
@@ -274,9 +276,15 @@ type ServiceZoneProps = {
   zone: HttpTypes.AdminServiceZone
   locationId: string
   fulfillmentSetId: string
+  type: FulfillmentSetType
 }
 
-function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
+function ServiceZone({
+  zone,
+  locationId,
+  fulfillmentSetId,
+  type,
+}: ServiceZoneProps) {
   const { t } = useTranslation()
   const prompt = usePrompt()
   const [open, setOpen] = useState(true)
@@ -368,7 +376,7 @@ function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
             />
             <span>·</span>
             <Text className="text-ui-fg-subtle txt-small">
-              {t("stockLocations.shippingOptions.fields.count.shipping", {
+              {t(`stockLocations.shippingOptions.fields.count.${type}`, {
                 count: shippingOptionsCount,
               })}
             </Text>
@@ -427,6 +435,7 @@ function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
         <ServiceZoneOptions
           fulfillmentSetId={fulfillmentSetId}
           locationId={locationId}
+          type={type}
           zone={zone}
         />
       )}
@@ -570,6 +579,7 @@ function FulfillmentSet(props: FulfillmentSetProps) {
             {fulfillmentSet?.service_zones.map((zone) => (
               <ServiceZone
                 zone={zone}
+                type={type}
                 key={zone.id}
                 locationId={locationId}
                 fulfillmentSetId={fulfillmentSet.id}

package/src/routes/locations/location-detail/location-detail.tsx

@@ -7,7 +7,7 @@ import { locationLoader } 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 LocationsFulfillmentProvidersSection from "./components/location-fulfillment-providers-section/location-fulfillment-providers-section"
 import { LOCATION_DETAILS_FIELD } from "./constants"
 
@@ -28,7 +28,7 @@ export const LocationDetail = () => {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isLoading || !location) {
     return (

package/src/routes/locations/location-list/location-list.tsx

@@ -1,19 +1,17 @@
-import { ShoppingBag, TriangleRightMini } from "@medusajs/icons"
-import { Container, Heading, Text } from "@medusajs/ui"
+import { ShoppingBag } from "@medusajs/icons"
+import { Container, Heading } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
-import { Link, useLoaderData } from "react-router-dom"
+import { useLoaderData } from "react-router-dom"
 
 import { useStockLocations } from "../../../hooks/api/stock-locations"
 import LocationListItem from "./components/location-list-item/location-list-item"
 import { LOCATION_LIST_FIELDS } from "./constants"
 import { shippingListLoader } from "./loader"
 
-import { ReactNode } from "react"
-import { IconAvatar } from "../../../components/common/icon-avatar"
+import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
 import { TwoColumnPage } from "../../../components/layout/pages"
-import { useDashboardExtension } from "../../../extensions"
+import { useExtension } from "../../../providers/extension-provider"
 import { LocationListHeader } from "./components/location-list-header"
-import { SidebarLink } from "../../../components/common/sidebar-link/sidebar-link"
 
 export function LocationList() {
   const initialData = useLoaderData() as Awaited<
@@ -31,7 +29,7 @@ export function LocationList() {
     { initialData }
   )
 
-  const { getWidgets } = useDashboardExtension()
+  const { getWidgets } = useExtension()
 
   if (isError) {
     throw error
@@ -40,10 +38,10 @@ export function LocationList() {
   return (
     <TwoColumnPage
       widgets={{
-        after: getWidgets("location.details.after"),
-        before: getWidgets("location.details.before"),
-        sideAfter: getWidgets("location.details.side.after"),
-        sideBefore: getWidgets("location.details.side.before"),
+        after: getWidgets("location.list.after"),
+        before: getWidgets("location.list.before"),
+        sideAfter: getWidgets("location.list.side.after"),
+        sideBefore: getWidgets("location.list.side.before"),
       }}
       showJSON
     >

package/src/routes/locations/location-service-zone-create/components/create-service-zone-form/create-service-zone-form.tsx

@@ -1,12 +1,11 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { HttpTypes } from "@medusajs/types"
-import { Button, Heading, Input, toast } from "@medusajs/ui"
+import { Button, Heading, InlineTip, Input, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { Form } from "../../../../../components/common/form"
-import { InlineTip } from "../../../../../components/common/inline-tip"
 import {
   RouteFocusModal,
   StackedFocusModal,
@@ -118,7 +117,7 @@ export function CreateServiceZoneForm({
                   />
                 </div>
 
-                <InlineTip>
+                <InlineTip label={t("general.tip")}>
                   {t("stockLocations.serviceZones.fields.tip")}
                 </InlineTip>
 

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

@@ -1,11 +1,10 @@
 import { HttpTypes } from "@medusajs/types"
-import { Button, Input, toast } from "@medusajs/ui"
+import { Button, InlineTip, Input, toast } from "@medusajs/ui"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import * as zod from "zod"
 
 import { Form } from "../../../../../components/common/form"
-import { InlineTip } from "../../../../../components/common/inline-tip"
 import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useUpdateFulfillmentSetServiceZone } from "../../../../../hooks/api/fulfillment-sets"
@@ -83,7 +82,9 @@ export const EditServiceZoneForm = ({
                 }}
               />
             </div>
-            <InlineTip>{t("stockLocations.serviceZones.fields.tip")}</InlineTip>
+            <InlineTip label={t("general.tip")}>
+              {t("stockLocations.serviceZones.fields.tip")}
+            </InlineTip>
           </div>
         </RouteDrawer.Body>
         <RouteDrawer.Footer>

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

@@ -10,7 +10,10 @@ import { Combobox } from "../../../../../components/inputs/combobox"
 import { useComboboxData } from "../../../../../hooks/use-combobox-data"
 import { sdk } from "../../../../../lib/client"
 import { formatProvider } from "../../../../../lib/format-provider"
-import { ShippingOptionPriceType } from "../../../common/constants"
+import {
+  FulfillmentSetType,
+  ShippingOptionPriceType,
+} from "../../../common/constants"
 import { CreateShippingOptionSchema } from "./schema"
 
 type CreateShippingOptionDetailsFormProps = {
@@ -20,6 +23,7 @@ type CreateShippingOptionDetailsFormProps = {
   locationId: string
   fulfillmentProviderOptions: HttpTypes.AdminFulfillmentProviderOption[]
   selectedProviderId?: string
+  type: FulfillmentSetType
 }
 
 export const CreateShippingOptionDetailsForm = ({
@@ -29,9 +33,12 @@ export const CreateShippingOptionDetailsForm = ({
   locationId,
   fulfillmentProviderOptions,
   selectedProviderId,
+  type,
 }: CreateShippingOptionDetailsFormProps) => {
   const { t } = useTranslation()
 
+  const isPickup = type === FulfillmentSetType.Pickup
+
   const shippingProfiles = useComboboxData({
     queryFn: (params) => sdk.admin.shippingProfile.list(params),
     queryKey: ["shipping_profiles"],
@@ -63,7 +70,7 @@ export const CreateShippingOptionDetailsForm = ({
           <Heading>
             {t(
               `stockLocations.shippingOptions.create.${
-                isReturn ? "returns" : "shipping"
+                isPickup ? "pickup" : isReturn ? "returns" : "shipping"
               }.header`,
               {
                 zone: zone.name,
@@ -73,54 +80,56 @@ export const CreateShippingOptionDetailsForm = ({
           <Text size="small" className="text-ui-fg-subtle">
             {t(
               `stockLocations.shippingOptions.create.${
-                isReturn ? "returns" : "shipping"
+                isReturn ? "returns" : isPickup ? "pickup" : "shipping"
               }.hint`
             )}
           </Text>
         </div>
 
-        <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
-                    className="grid grid-cols-1 gap-4 md:grid-cols-2"
-                    {...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
+                      className="grid grid-cols-1 gap-4 md:grid-cols-2"
+                      {...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 grid-cols-1 gap-4 md:grid-cols-2">
           <Form.Field
@@ -239,7 +248,6 @@ export const CreateShippingOptionDetailsForm = ({
         </div>
 
         <Divider />
-
         <SwitchBox
           control={form.control}
           name="enabled_in_store"

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

@@ -12,7 +12,10 @@ import {
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useCreateShippingOptions } from "../../../../../hooks/api/shipping-options"
 import { castNumber } from "../../../../../lib/cast-number"
-import { ShippingOptionPriceType } from "../../../common/constants"
+import {
+  FulfillmentSetType,
+  ShippingOptionPriceType,
+} from "../../../common/constants"
 import { buildShippingOptionPriceRules } from "../../../common/utils/price-rule-helpers"
 import { CreateShippingOptionDetailsForm } from "./create-shipping-option-details-form"
 import { CreateShippingOptionsPricesForm } from "./create-shipping-options-prices-form"
@@ -31,12 +34,14 @@ type CreateShippingOptionFormProps = {
   zone: HttpTypes.AdminServiceZone
   locationId: string
   isReturn?: boolean
+  type: FulfillmentSetType
 }
 
 export function CreateShippingOptionsForm({
   zone,
   isReturn,
   locationId,
+  type,
 }: CreateShippingOptionFormProps) {
   const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
   const [validDetails, setValidDetails] = useState(false)
@@ -309,13 +314,14 @@ export function CreateShippingOptionsForm({
                 form={form}
                 zone={zone}
                 isReturn={isReturn}
+                type={type}
                 locationId={locationId}
                 fulfillmentProviderOptions={fulfillmentProviderOptions || []}
                 selectedProviderId={selectedProviderId}
               />
             </ProgressTabs.Content>
             <ProgressTabs.Content value={Tab.PRICING} className="size-full">
-              <CreateShippingOptionsPricesForm form={form} />
+              <CreateShippingOptionsPricesForm form={form} type={type} />
             </ProgressTabs.Content>
           </RouteFocusModal.Body>
           <RouteFocusModal.Footer>