asyavee/medusa-store
1
0 Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(dashboard): Pickup option changes (#11306)

Browse Source 
**What**
- update the create and edit shipping option flows to support pickup (shipping) option
- modify "mark as delivered" for pickup case

---

CLOSES CMRC-906 CMRC-907
This commit is contained in:
Frane Polić authored and GitHub committed 2025-02-14 14:14:58 +00:00
1 parent 271337eb23
commit 5dc8a403ef
13 files changed
+310 -126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/admin/dashboard/src/i18n/translations/$schema.json
+55 -2
View File
@@ -4806,6 +4806,9 @@
"markAsShipped": { "markAsShipped": {
"type": "string" "type": "string"
}, },
"markAsPickedUp": {
"type": "string"
},
"markAsDelivered": { "markAsDelivered": {
"type": "string" "type": "string"
}, },
@@ -4915,13 +4918,17 @@
}, },
"fulfillmentDelivered": { "fulfillmentDelivered": {
"type": "string" "type": "string"
},
"fulfillmentPickedUp": {
"type": "string"
} }
}, },
"required": [ "required": [
"created", "created",
"canceled", "canceled",
"fulfillmentShipped", "fulfillmentShipped",
"fulfillmentDelivered" "fulfillmentDelivered",
"fulfillmentPickedUp"
], ],
"additionalProperties": false "additionalProperties": false
}, },
@@ -4952,6 +4959,7 @@
"available", "available",
"inStock", "inStock",
"markAsShipped", "markAsShipped",
"markAsPickedUp",
"markAsDelivered", "markAsDelivered",
"itemsToFulfillDesc", "itemsToFulfillDesc",
"locationDescription", "locationDescription",
@@ -5754,6 +5762,23 @@
], ],
"additionalProperties": false "additionalProperties": false
}, },
"pickupOptions": {
"type": "object",
"properties": {
"edit": {
"type": "object",
"properties": {
"header": {
"type": "string"
}
},
"required": ["header"],
"additionalProperties": false
}
},
"required": ["edit"],
"additionalProperties": false
},
"shippingOptions": { "shippingOptions": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -5779,6 +5804,25 @@
"required": ["header", "hint", "label", "successToast"], "required": ["header", "hint", "label", "successToast"],
"additionalProperties": false "additionalProperties": false
}, },
"pickup": {
"type": "object",
"properties": {
"header": {
"type": "string"
},
"hint": {
"type": "string"
},
"label": {
"type": "string"
},
"successToast": {
"type": "string"
}
},
"required": ["header", "hint", "label", "successToast"],
"additionalProperties": false
},
"returns": { "returns": {
"type": "object", "type": "object",
"properties": { "properties": {
@@ -5815,7 +5859,7 @@
"type": "string" "type": "string"
} }
}, },
"required": ["shipping", "returns", "tabs", "action"], "required": ["shipping", "pickup", "returns", "tabs", "action"],
"additionalProperties": false "additionalProperties": false
}, },
"delete": { "delete": {
@@ -5996,6 +6040,12 @@
"shipping_other": { "shipping_other": {
"type": "string" "type": "string"
}, },
"pickup_one": {
"type": "string"
},
"pickup_other": {
"type": "string"
},
"returns_one": { "returns_one": {
"type": "string" "type": "string"
}, },
@@ -6006,6 +6056,8 @@
"required": [ "required": [
"shipping_one", "shipping_one",
"shipping_other", "shipping_other",
"pickup_one",
"pickup_other",
"returns_one", "returns_one",
"returns_other" "returns_other"
], ],
@@ -6201,6 +6253,7 @@
"fulfillmentSets", "fulfillmentSets",
"sidebar", "sidebar",
"salesChannels", "salesChannels",
"pickupOptions",
"shippingOptions", "shippingOptions",
"serviceZones" "serviceZones"
], ],
packages/admin/dashboard/src/i18n/translations/en.json
+16 -1
View File
@@ -1281,6 +1281,7 @@
"available": "Available", "available": "Available",
"inStock": "In stock", "inStock": "In stock",
"markAsShipped": "Mark as shipped", "markAsShipped": "Mark as shipped",
"markAsPickedUp": "Mark as picked up",
"markAsDelivered": "Mark as delivered", "markAsDelivered": "Mark as delivered",
"itemsToFulfillDesc": "Choose items and quantities to fulfill", "itemsToFulfillDesc": "Choose items and quantities to fulfill",
"locationDescription": "Choose which location you want to fulfill items from.", "locationDescription": "Choose which location you want to fulfill items from.",
@@ -1310,7 +1311,8 @@
"created": "Fulfillment created successfully", "created": "Fulfillment created successfully",
"canceled": "Fulfillment successfully canceled", "canceled": "Fulfillment successfully canceled",
"fulfillmentShipped": "Cannot cancel an already shipped fulfillment", "fulfillmentShipped": "Cannot cancel an already shipped fulfillment",
"fulfillmentDelivered": "Fulfillment marked as delivered successfully" "fulfillmentDelivered": "Fulfillment marked as delivered successfully",
"fulfillmentPickedUp": "Fulfillment marked as picked up successfully"
}, },
"trackingLabel": "Tracking", "trackingLabel": "Tracking",
"shippingFromLabel": "Shipping from", "shippingFromLabel": "Shipping from",
@@ -1520,6 +1522,11 @@
"action": "Connect sales channels", "action": "Connect sales channels",
"successToast": "Sales channels were successfully updated." "successToast": "Sales channels were successfully updated."
}, },
"pickupOptions": {
"edit": {
"header": "Edit Pickup Option"
}
},
"shippingOptions": { "shippingOptions": {
"create": { "create": {
"shipping": { "shipping": {
@@ -1528,6 +1535,12 @@
"label": "Shipping options", "label": "Shipping options",
"successToast": "Shipping option {{name}} was successfully created." "successToast": "Shipping option {{name}} was successfully created."
}, },
"pickup": {
"header": "Create Pickup Option for {{zone}}",
"hint": "Create a new pickup option to define how products are picked up from this location.",
"label": "Pickup options",
"successToast": "Pickup option {{name}} was successfully created."
},
"returns": { "returns": {
"header": "Create a Return Option for {{zone}}", "header": "Create a Return Option for {{zone}}",
"hint": "Create a new return option to define how products are returned to this location.", "hint": "Create a new return option to define how products are returned to this location.",
@@ -1591,6 +1604,8 @@
"count": { "count": {
"shipping_one": "{{count}} shipping option", "shipping_one": "{{count}} shipping option",
"shipping_other": "{{count}} shipping options", "shipping_other": "{{count}} shipping options",
"pickup_one": "{{count}} pickup option",
"pickup_other": "{{count}} pickup options",
"returns_one": "{{count}} return option", "returns_one": "{{count}} return option",
"returns_other": "{{count}} return options" "returns_other": "{{count}} return options"
}, },
packages/admin/dashboard/src/routes/locations/location-detail/components/location-general-section/location-general-section.tsx
+13 -3
View File
@@ -195,12 +195,14 @@ type ServiceZoneOptionsProps = {
zone: HttpTypes.AdminServiceZone zone: HttpTypes.AdminServiceZone
locationId: string locationId: string
fulfillmentSetId: string fulfillmentSetId: string
type: FulfillmentSetType
} }
function ServiceZoneOptions({ function ServiceZoneOptions({
zone, zone,
locationId, locationId,
fulfillmentSetId, fulfillmentSetId,
type,
}: ServiceZoneOptionsProps) { }: ServiceZoneOptionsProps) {
const { t } = useTranslation() const { t } = useTranslation()
@@ -216,7 +218,7 @@ function ServiceZoneOptions({
<div className="flex flex-col gap-y-4 px-6 py-4"> <div className="flex flex-col gap-y-4 px-6 py-4">
<div className="item-center flex justify-between"> <div className="item-center flex justify-between">
<span className="text-ui-fg-subtle txt-small self-center font-medium"> <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> </span>
<LinkButton <LinkButton
to={`/settings/locations/${locationId}/fulfillment-set/${fulfillmentSetId}/service-zone/${zone.id}/shipping-option/create`} to={`/settings/locations/${locationId}/fulfillment-set/${fulfillmentSetId}/service-zone/${zone.id}/shipping-option/create`}
@@ -274,9 +276,15 @@ type ServiceZoneProps = {
zone: HttpTypes.AdminServiceZone zone: HttpTypes.AdminServiceZone
locationId: string locationId: string
fulfillmentSetId: string fulfillmentSetId: string
type: FulfillmentSetType
} }
function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) { function ServiceZone({
zone,
locationId,
fulfillmentSetId,
type,
}: ServiceZoneProps) {
const { t } = useTranslation() const { t } = useTranslation()
const prompt = usePrompt() const prompt = usePrompt()
const [open, setOpen] = useState(true) const [open, setOpen] = useState(true)
@@ -368,7 +376,7 @@ function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
/> />
<span>·</span> <span>·</span>
<Text className="text-ui-fg-subtle txt-small"> <Text className="text-ui-fg-subtle txt-small">
{t("stockLocations.shippingOptions.fields.count.shipping", { {t(`stockLocations.shippingOptions.fields.count.${type}`, {
count: shippingOptionsCount, count: shippingOptionsCount,
})} })}
</Text> </Text>
@@ -427,6 +435,7 @@ function ServiceZone({ zone, locationId, fulfillmentSetId }: ServiceZoneProps) {
<ServiceZoneOptions <ServiceZoneOptions
fulfillmentSetId={fulfillmentSetId} fulfillmentSetId={fulfillmentSetId}
locationId={locationId} locationId={locationId}
type={type}
zone={zone} zone={zone}
/> />
)} )}
@@ -570,6 +579,7 @@ function FulfillmentSet(props: FulfillmentSetProps) {
{fulfillmentSet?.service_zones.map((zone) => ( {fulfillmentSet?.service_zones.map((zone) => (
<ServiceZone <ServiceZone
zone={zone} zone={zone}
type={type}
key={zone.id} key={zone.id}
locationId={locationId} locationId={locationId}
fulfillmentSetId={fulfillmentSet.id} fulfillmentSetId={fulfillmentSet.id}
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-option-details-form.tsx
+69 -55
View File
@@ -10,7 +10,10 @@ import { Combobox } from "../../../../../components/inputs/combobox"
import { useComboboxData } from "../../../../../hooks/use-combobox-data" import { useComboboxData } from "../../../../../hooks/use-combobox-data"
import { sdk } from "../../../../../lib/client" import { sdk } from "../../../../../lib/client"
import { formatProvider } from "../../../../../lib/format-provider" import { formatProvider } from "../../../../../lib/format-provider"
import { ShippingOptionPriceType } from "../../../common/constants" import {
FulfillmentSetType,
ShippingOptionPriceType,
} from "../../../common/constants"
import { CreateShippingOptionSchema } from "./schema" import { CreateShippingOptionSchema } from "./schema"
type CreateShippingOptionDetailsFormProps = { type CreateShippingOptionDetailsFormProps = {
@@ -20,6 +23,7 @@ type CreateShippingOptionDetailsFormProps = {
locationId: string locationId: string
fulfillmentProviderOptions: HttpTypes.AdminFulfillmentProviderOption[] fulfillmentProviderOptions: HttpTypes.AdminFulfillmentProviderOption[]
selectedProviderId?: string selectedProviderId?: string
type: FulfillmentSetType
} }
export const CreateShippingOptionDetailsForm = ({ export const CreateShippingOptionDetailsForm = ({
@@ -29,9 +33,12 @@ export const CreateShippingOptionDetailsForm = ({
locationId, locationId,
fulfillmentProviderOptions, fulfillmentProviderOptions,
selectedProviderId, selectedProviderId,
type,
}: CreateShippingOptionDetailsFormProps) => { }: CreateShippingOptionDetailsFormProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const isPickup = type === FulfillmentSetType.Pickup
const shippingProfiles = useComboboxData({ const shippingProfiles = useComboboxData({
queryFn: (params) => sdk.admin.shippingProfile.list(params), queryFn: (params) => sdk.admin.shippingProfile.list(params),
queryKey: ["shipping_profiles"], queryKey: ["shipping_profiles"],
@@ -63,7 +70,7 @@ export const CreateShippingOptionDetailsForm = ({
<Heading> <Heading>
{t( {t(
`stockLocations.shippingOptions.create.${ `stockLocations.shippingOptions.create.${
isReturn ? "returns" : "shipping" isPickup ? "pickup" : isReturn ? "returns" : "shipping"
}.header`, }.header`,
{ {
zone: zone.name, zone: zone.name,
@@ -73,54 +80,56 @@ export const CreateShippingOptionDetailsForm = ({
<Text size="small" className="text-ui-fg-subtle"> <Text size="small" className="text-ui-fg-subtle">
{t( {t(
`stockLocations.shippingOptions.create.${ `stockLocations.shippingOptions.create.${
isReturn ? "returns" : "shipping" isReturn ? "returns" : isPickup ? "pickup" : "shipping"
}.hint` }.hint`
)} )}
</Text> </Text>
</div> </div>
<Form.Field {!isPickup && (
control={form.control} <Form.Field
name="price_type" control={form.control}
render={({ field }) => { name="price_type"
return ( render={({ field }) => {
<Form.Item> return (
<Form.Label> <Form.Item>
{t("stockLocations.shippingOptions.fields.priceType.label")} <Form.Label>
</Form.Label> {t("stockLocations.shippingOptions.fields.priceType.label")}
<Form.Control> </Form.Label>
<RadioGroup <Form.Control>
className="grid grid-cols-1 gap-4 md:grid-cols-2" <RadioGroup
{...field} className="grid grid-cols-1 gap-4 md:grid-cols-2"
onValueChange={field.onChange} {...field}
> onValueChange={field.onChange}
<RadioGroup.ChoiceBox >
className="flex-1" <RadioGroup.ChoiceBox
value={ShippingOptionPriceType.FlatRate} className="flex-1"
label={t( value={ShippingOptionPriceType.FlatRate}
"stockLocations.shippingOptions.fields.priceType.options.fixed.label" label={t(
)} "stockLocations.shippingOptions.fields.priceType.options.fixed.label"
description={t( )}
"stockLocations.shippingOptions.fields.priceType.options.fixed.hint" description={t(
)} "stockLocations.shippingOptions.fields.priceType.options.fixed.hint"
/> )}
<RadioGroup.ChoiceBox />
className="flex-1" <RadioGroup.ChoiceBox
value={ShippingOptionPriceType.Calculated} className="flex-1"
label={t( value={ShippingOptionPriceType.Calculated}
"stockLocations.shippingOptions.fields.priceType.options.calculated.label" label={t(
)} "stockLocations.shippingOptions.fields.priceType.options.calculated.label"
description={t( )}
"stockLocations.shippingOptions.fields.priceType.options.calculated.hint" description={t(
)} "stockLocations.shippingOptions.fields.priceType.options.calculated.hint"
/> )}
</RadioGroup> />
</Form.Control> </RadioGroup>
<Form.ErrorMessage /> </Form.Control>
</Form.Item> <Form.ErrorMessage />
) </Form.Item>
}} )
/> }}
/>
)}
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<Form.Field <Form.Field
@@ -238,16 +247,21 @@ export const CreateShippingOptionDetailsForm = ({
/> />
</div> </div>
<Divider /> {!isPickup && (
<>
<SwitchBox <Divider />
control={form.control} <SwitchBox
name="enabled_in_store" control={form.control}
label={t("stockLocations.shippingOptions.fields.enableInStore.label")} name="enabled_in_store"
description={t( label={t(
"stockLocations.shippingOptions.fields.enableInStore.hint" "stockLocations.shippingOptions.fields.enableInStore.label"
)} )}
/> description={t(
"stockLocations.shippingOptions.fields.enableInStore.hint"
)}
/>
</>
)}
</div> </div>
</div> </div>
) )
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-form.tsx
+8 -2
View File
@@ -12,7 +12,10 @@ import {
import { KeyboundForm } from "../../../../../components/utilities/keybound-form" import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
import { useCreateShippingOptions } from "../../../../../hooks/api/shipping-options" import { useCreateShippingOptions } from "../../../../../hooks/api/shipping-options"
import { castNumber } from "../../../../../lib/cast-number" 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 { buildShippingOptionPriceRules } from "../../../common/utils/price-rule-helpers"
import { CreateShippingOptionDetailsForm } from "./create-shipping-option-details-form" import { CreateShippingOptionDetailsForm } from "./create-shipping-option-details-form"
import { CreateShippingOptionsPricesForm } from "./create-shipping-options-prices-form" import { CreateShippingOptionsPricesForm } from "./create-shipping-options-prices-form"
@@ -31,12 +34,14 @@ type CreateShippingOptionFormProps = {
zone: HttpTypes.AdminServiceZone zone: HttpTypes.AdminServiceZone
locationId: string locationId: string
isReturn?: boolean isReturn?: boolean
type: FulfillmentSetType
} }
export function CreateShippingOptionsForm({ export function CreateShippingOptionsForm({
zone, zone,
isReturn, isReturn,
locationId, locationId,
type,
}: CreateShippingOptionFormProps) { }: CreateShippingOptionFormProps) {
const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS) const [activeTab, setActiveTab] = useState<Tab>(Tab.DETAILS)
const [validDetails, setValidDetails] = useState(false) const [validDetails, setValidDetails] = useState(false)
@@ -309,13 +314,14 @@ export function CreateShippingOptionsForm({
form={form} form={form}
zone={zone} zone={zone}
isReturn={isReturn} isReturn={isReturn}
type={type}
locationId={locationId} locationId={locationId}
fulfillmentProviderOptions={fulfillmentProviderOptions || []} fulfillmentProviderOptions={fulfillmentProviderOptions || []}
selectedProviderId={selectedProviderId} selectedProviderId={selectedProviderId}
/> />
</ProgressTabs.Content> </ProgressTabs.Content>
<ProgressTabs.Content value={Tab.PRICING} className="size-full"> <ProgressTabs.Content value={Tab.PRICING} className="size-full">
<CreateShippingOptionsPricesForm form={form} /> <CreateShippingOptionsPricesForm form={form} type={type} />
</ProgressTabs.Content> </ProgressTabs.Content>
</RouteFocusModal.Body> </RouteFocusModal.Body>
<RouteFocusModal.Footer> <RouteFocusModal.Footer>
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/components/create-shipping-options-form/create-shipping-options-prices-form.tsx
+27 -2
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { UseFormReturn, useWatch } from "react-hook-form" import { UseFormReturn, useWatch } from "react-hook-form"
import { DataGrid } from "../../../../../components/data-grid" import { DataGrid } from "../../../../../components/data-grid"
@@ -12,18 +12,24 @@ import { useRegions } from "../../../../../hooks/api/regions"
import { useStore } from "../../../../../hooks/api/store" import { useStore } from "../../../../../hooks/api/store"
import { ConditionalPriceForm } from "../../../common/components/conditional-price-form" import { ConditionalPriceForm } from "../../../common/components/conditional-price-form"
import { ShippingOptionPriceProvider } from "../../../common/components/shipping-option-price-provider" 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 { useShippingOptionPriceColumns } from "../../../common/hooks/use-shipping-option-price-columns"
import { ConditionalPriceInfo } from "../../../common/types" import { ConditionalPriceInfo } from "../../../common/types"
import { CreateShippingOptionSchema } from "./schema" import { CreateShippingOptionSchema } from "./schema"
type PricingPricesFormProps = { type PricingPricesFormProps = {
form: UseFormReturn<CreateShippingOptionSchema> form: UseFormReturn<CreateShippingOptionSchema>
type: FulfillmentSetType
} }
export const CreateShippingOptionsPricesForm = ({ export const CreateShippingOptionsPricesForm = ({
form, form,
type,
}: PricingPricesFormProps) => { }: PricingPricesFormProps) => {
const isPickup = type === FulfillmentSetType.Pickup
const { getIsOpen, setIsOpen } = useStackedModal() const { getIsOpen, setIsOpen } = useStackedModal()
const [selectedPrice, setSelectedPrice] = const [selectedPrice, setSelectedPrice] =
useState<ConditionalPriceInfo | null>(null) useState<ConditionalPriceInfo | null>(null)
@@ -80,6 +86,25 @@ export const CreateShippingOptionsPricesForm = ({
[currencies, regions] [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) { if (isStoreError) {
throw storeError throw storeError
} }
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/location-service-zone-shipping-option-create.tsx
+14 -3
View File
@@ -4,6 +4,7 @@ import { RouteFocusModal } from "../../../components/modals"
import { useStockLocation } from "../../../hooks/api/stock-locations" import { useStockLocation } from "../../../hooks/api/stock-locations"
import { CreateShippingOptionsForm } from "./components/create-shipping-options-form" import { CreateShippingOptionsForm } from "./components/create-shipping-options-form"
import { LOC_CREATE_SHIPPING_OPTION_FIELDS } from "./constants" import { LOC_CREATE_SHIPPING_OPTION_FIELDS } from "./constants"
import { FulfillmentSetType } from "../common/constants"
export function LocationServiceZoneShippingOptionCreate() { export function LocationServiceZoneShippingOptionCreate() {
const { location_id, fset_id, zone_id } = useParams() const { location_id, fset_id, zone_id } = useParams()
@@ -15,9 +16,18 @@ export function LocationServiceZoneShippingOptionCreate() {
fields: LOC_CREATE_SHIPPING_OPTION_FIELDS, fields: LOC_CREATE_SHIPPING_OPTION_FIELDS,
}) })
const zone = stock_location?.fulfillment_sets const fulfillmentSet = stock_location?.fulfillment_sets?.find(
?.find((f) => f.id === fset_id) (f) => f.id === fset_id
?.service_zones?.find((z) => z.id === zone_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) { if (!isPending && !isFetching && !zone) {
throw json( throw json(
@@ -37,6 +47,7 @@ export function LocationServiceZoneShippingOptionCreate() {
zone={zone} zone={zone}
isReturn={isReturn} isReturn={isReturn}
locationId={location_id!} locationId={location_id!}
type={fulfillmentSet!.type as FulfillmentSetType}
/> />
)} )}
</RouteFocusModal> </RouteFocusModal>
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/components/edit-region-form/edit-shipping-option-form.tsx
+65 -53
View File
@@ -15,11 +15,15 @@ import { useComboboxData } from "../../../../../hooks/use-combobox-data"
import { sdk } from "../../../../../lib/client" import { sdk } from "../../../../../lib/client"
import { pick } from "../../../../../lib/common" import { pick } from "../../../../../lib/common"
import { isOptionEnabledInStore } from "../../../../../lib/shipping-options" import { isOptionEnabledInStore } from "../../../../../lib/shipping-options"
import { ShippingOptionPriceType } from "../../../common/constants" import {
FulfillmentSetType,
ShippingOptionPriceType,
} from "../../../common/constants"
type EditShippingOptionFormProps = { type EditShippingOptionFormProps = {
locationId: string locationId: string
shippingOption: HttpTypes.AdminShippingOption shippingOption: HttpTypes.AdminShippingOption
type: FulfillmentSetType
} }
const EditShippingOptionSchema = zod.object({ const EditShippingOptionSchema = zod.object({
@@ -32,10 +36,13 @@ const EditShippingOptionSchema = zod.object({
export const EditShippingOptionForm = ({ export const EditShippingOptionForm = ({
locationId, locationId,
shippingOption, shippingOption,
type,
}: EditShippingOptionFormProps) => { }: EditShippingOptionFormProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const { handleSuccess } = useRouteModal() const { handleSuccess } = useRouteModal()
const isPickup = type === FulfillmentSetType.Pickup
const shippingProfiles = useComboboxData({ const shippingProfiles = useComboboxData({
queryFn: (params) => sdk.admin.shippingProfile.list(params), queryFn: (params) => sdk.admin.shippingProfile.list(params),
queryKey: ["shipping_profiles"], queryKey: ["shipping_profiles"],
@@ -108,46 +115,48 @@ export const EditShippingOptionForm = ({
<RouteDrawer.Body> <RouteDrawer.Body>
<div className="flex flex-col gap-y-8"> <div className="flex flex-col gap-y-8">
<div className="flex flex-col gap-y-8"> <div className="flex flex-col gap-y-8">
<Form.Field {!isPickup && (
control={form.control} <Form.Field
name="price_type" control={form.control}
render={({ field }) => { name="price_type"
return ( render={({ field }) => {
<Form.Item> return (
<Form.Label> <Form.Item>
{t( <Form.Label>
"stockLocations.shippingOptions.fields.priceType.label" {t(
)} "stockLocations.shippingOptions.fields.priceType.label"
</Form.Label> )}
<Form.Control> </Form.Label>
<RadioGroup {...field} onValueChange={field.onChange}> <Form.Control>
<RadioGroup.ChoiceBox <RadioGroup {...field} onValueChange={field.onChange}>
className="flex-1" <RadioGroup.ChoiceBox
value={ShippingOptionPriceType.FlatRate} className="flex-1"
label={t( value={ShippingOptionPriceType.FlatRate}
"stockLocations.shippingOptions.fields.priceType.options.fixed.label" label={t(
)} "stockLocations.shippingOptions.fields.priceType.options.fixed.label"
description={t( )}
"stockLocations.shippingOptions.fields.priceType.options.fixed.hint" description={t(
)} "stockLocations.shippingOptions.fields.priceType.options.fixed.hint"
/> )}
<RadioGroup.ChoiceBox />
className="flex-1" <RadioGroup.ChoiceBox
value={ShippingOptionPriceType.Calculated} className="flex-1"
label={t( value={ShippingOptionPriceType.Calculated}
"stockLocations.shippingOptions.fields.priceType.options.calculated.label" label={t(
)} "stockLocations.shippingOptions.fields.priceType.options.calculated.label"
description={t( )}
"stockLocations.shippingOptions.fields.priceType.options.calculated.hint" description={t(
)} "stockLocations.shippingOptions.fields.priceType.options.calculated.hint"
/> )}
</RadioGroup> />
</Form.Control> </RadioGroup>
<Form.ErrorMessage /> </Form.Control>
</Form.Item> <Form.ErrorMessage />
) </Form.Item>
}} )
/> }}
/>
)}
<div className="grid gap-y-4"> <div className="grid gap-y-4">
<Form.Field <Form.Field
@@ -193,18 +202,21 @@ export const EditShippingOptionForm = ({
/> />
</div> </div>
<Divider /> {!isPickup && (
<>
<SwitchBox <Divider />
control={form.control} <SwitchBox
name="enabled_in_store" control={form.control}
label={t( name="enabled_in_store"
"stockLocations.shippingOptions.fields.enableInStore.label" label={t(
)} "stockLocations.shippingOptions.fields.enableInStore.label"
description={t( )}
"stockLocations.shippingOptions.fields.enableInStore.hint" description={t(
)} "stockLocations.shippingOptions.fields.enableInStore.hint"
/> )}
/>
</>
)}
</div> </div>
</div> </div>
</RouteDrawer.Body> </RouteDrawer.Body>
packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/location-service-zone-shipping-option-edit.tsx
+15 -1
View File
@@ -5,6 +5,7 @@ import { json, useParams } from "react-router-dom"
import { RouteDrawer } from "../../../components/modals" import { RouteDrawer } from "../../../components/modals"
import { useShippingOptions } from "../../../hooks/api/shipping-options" import { useShippingOptions } from "../../../hooks/api/shipping-options"
import { EditShippingOptionForm } from "./components/edit-region-form" import { EditShippingOptionForm } from "./components/edit-region-form"
import { FulfillmentSetType } from "../common/constants"
export const LocationServiceZoneShippingOptionEdit = () => { export const LocationServiceZoneShippingOptionEdit = () => {
const { t } = useTranslation() const { t } = useTranslation()
@@ -14,6 +15,7 @@ export const LocationServiceZoneShippingOptionEdit = () => {
const { shipping_options, isPending, isFetching, isError, error } = const { shipping_options, isPending, isFetching, isError, error } =
useShippingOptions({ useShippingOptions({
id: so_id, id: so_id,
fields: "+service_zone.fulfillment_set.type",
}) })
const shippingOption = shipping_options?.find((so) => so.id === so_id) const shippingOption = shipping_options?.find((so) => so.id === so_id)
@@ -29,15 +31,27 @@ export const LocationServiceZoneShippingOptionEdit = () => {
throw error throw error
} }
const isPickup =
shippingOption?.service_zone.fulfillment_set.type ===
FulfillmentSetType.Pickup
return ( return (
<RouteDrawer> <RouteDrawer>
<RouteDrawer.Header> <RouteDrawer.Header>
<Heading>{t("stockLocations.shippingOptions.edit.header")}</Heading> <Heading>
{t(
`stockLocations.${isPickup ? "pickupOptions" : "shippingOptions"}.edit.header`
)}
</Heading>
</RouteDrawer.Header> </RouteDrawer.Header>
{shippingOption && ( {shippingOption && (
<EditShippingOptionForm <EditShippingOptionForm
shippingOption={shippingOption} shippingOption={shippingOption}
locationId={location_id!} locationId={location_id!}
type={
shippingOption.service_zone.fulfillment_set
.type as FulfillmentSetType
}
/> />
)} )}
</RouteDrawer> </RouteDrawer>
packages/admin/dashboard/src/routes/orders/order-detail/components/order-fulfillment-section/order-fulfillment-section.tsx
+23 -4
View File
@@ -30,6 +30,7 @@ import {
import { useStockLocation } from "../../../../../hooks/api/stock-locations" import { useStockLocation } from "../../../../../hooks/api/stock-locations"
import { formatProvider } from "../../../../../lib/format-provider" import { formatProvider } from "../../../../../lib/format-provider"
import { getLocaleAmount } from "../../../../../lib/money-amount-helpers" import { getLocaleAmount } from "../../../../../lib/money-amount-helpers"
import { FulfillmentSetType } from "../../../../locations/common/constants"
type OrderFulfillmentSectionProps = { type OrderFulfillmentSectionProps = {
order: AdminOrder order: AdminOrder
@@ -213,6 +214,10 @@ const Fulfillment = ({
const showLocation = !!fulfillment.location_id const showLocation = !!fulfillment.location_id
const isPickUpFulfillment =
fulfillment.shipping_option?.service_zone.fulfillment_set.type ===
FulfillmentSetType.Pickup
const { stock_location, isError, error } = useStockLocation( const { stock_location, isError, error } = useStockLocation(
fulfillment.location_id!, fulfillment.location_id!,
undefined, undefined,
@@ -222,7 +227,9 @@ const Fulfillment = ({
) )
let statusText = fulfillment.requires_shipping let statusText = fulfillment.requires_shipping
? "Awaiting shipping" ? isPickUpFulfillment
? "Awaiting pickup"
: "Awaiting shipping"
: "Awaiting delivery" : "Awaiting delivery"
let statusColor: "blue" | "green" | "red" = "blue" let statusColor: "blue" | "green" | "red" = "blue"
let statusTimestamp = fulfillment.created_at let statusTimestamp = fulfillment.created_at
@@ -251,7 +258,9 @@ const Fulfillment = ({
!fulfillment.canceled_at && !fulfillment.canceled_at &&
!fulfillment.shipped_at && !fulfillment.shipped_at &&
!fulfillment.delivered_at && !fulfillment.delivered_at &&
fulfillment.requires_shipping fulfillment.requires_shipping &&
!isPickUpFulfillment
const showDeliveryButton = const showDeliveryButton =
!fulfillment.canceled_at && !fulfillment.delivered_at !fulfillment.canceled_at && !fulfillment.delivered_at
@@ -267,7 +276,13 @@ const Fulfillment = ({
if (res) { if (res) {
await markAsDelivered(undefined, { await markAsDelivered(undefined, {
onSuccess: () => { onSuccess: () => {
toast.success(t("orders.fulfillment.toast.fulfillmentDelivered")) toast.success(
t(
isPickUpFulfillment
? "orders.fulfillment.toast.fulfillmentPickedUp"
: "orders.fulfillment.toast.fulfillmentDelivered"
)
)
}, },
onError: (e) => { onError: (e) => {
toast.error(e.message) toast.error(e.message)
@@ -431,7 +446,11 @@ const Fulfillment = ({
<div className="bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4"> <div className="bg-ui-bg-subtle flex items-center justify-end gap-x-2 rounded-b-xl px-4 py-4">
{showDeliveryButton && ( {showDeliveryButton && (
<Button onClick={handleMarkAsDelivered} variant="secondary"> <Button onClick={handleMarkAsDelivered} variant="secondary">
{t("orders.fulfillment.markAsDelivered")} {t(
isPickUpFulfillment
? "orders.fulfillment.markAsPickedUp"
: "orders.fulfillment.markAsDelivered"
)}
</Button> </Button>
)} )}
packages/admin/dashboard/src/routes/orders/order-detail/constants.ts
+1
View File
@@ -37,6 +37,7 @@ const DEFAULT_RELATIONS = [
"*promotion", "*promotion",
"*shipping_methods", "*shipping_methods",
"*fulfillments", "*fulfillments",
"+fulfillments.shipping_option.service_zone.fulfillment_set.type",
"*fulfillments.items", "*fulfillments.items",
"*fulfillments.labels", "*fulfillments.labels",
"*fulfillments.labels", "*fulfillments.labels",
packages/core/core-flows/src/cart/workflows/list-shipping-options-for-cart-with-pricing.ts
+2
View File
@@ -22,6 +22,8 @@ const COMMON_OPTIONS_FIELDS = [
"price_type", "price_type",
"service_zone_id", "service_zone_id",
"service_zone.fulfillment_set_id", "service_zone.fulfillment_set_id",
"service_zone.fulfillment_set.type",
"service_zone.fulfillment_set.location.address.*",
"shipping_profile_id", "shipping_profile_id",
"provider_id", "provider_id",
"data", "data",
packages/core/core-flows/src/cart/workflows/list-shipping-options-for-cart.ts
+2
View File
@@ -131,6 +131,8 @@ export const listShippingOptionsForCartWorkflow = createWorkflow(
"provider_id", "provider_id",
"data", "data",
"service_zone.fulfillment_set_id", "service_zone.fulfillment_set_id",
"service_zone.fulfillment_set.type",
"service_zone.fulfillment_set.location.address.*",
"type.id", "type.id",
"type.label", "type.label",