From 869628bf4c50f93375bd32946cd0605de3d981cd Mon Sep 17 00:00:00 2001 From: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com> Date: Mon, 5 Jun 2023 16:28:29 +0200 Subject: [PATCH] feat(admin-ui): Rename allocation to reservation (#4133) * rename allocation -> reservation * add changeset * edit-reservation modal * rename --- .changeset/violet-actors-lie.md | 5 +++ .../templates/reservations-table/index.tsx | 4 +- .../reservation-indicator.tsx | 41 ++++++++--------- .../details/detail-cards/draft-summary.tsx | 45 ++++++++++--------- .../orders/details/detail-cards/summary.tsx | 22 ++++----- .../edit-reservation-modal.tsx} | 34 +++++++------- .../reserve-items-modal.tsx} | 24 +++++----- 7 files changed, 92 insertions(+), 83 deletions(-) create mode 100644 .changeset/violet-actors-lie.md rename packages/admin-ui/ui/src/domain/orders/details/{allocations/edit-allocation-modal.tsx => reservation/edit-reservation-modal.tsx} (92%) rename packages/admin-ui/ui/src/domain/orders/details/{allocations/allocate-items-modal.tsx => reservation/reserve-items-modal.tsx} (94%) diff --git a/.changeset/violet-actors-lie.md b/.changeset/violet-actors-lie.md new file mode 100644 index 0000000000..fb97e3e6b9 --- /dev/null +++ b/.changeset/violet-actors-lie.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +feat(admin-ui): rename allocation to reservation diff --git a/packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx b/packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx index bea3fe2682..954131bed0 100644 --- a/packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx +++ b/packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx @@ -8,8 +8,8 @@ import { import Button from "../../fundamentals/button" import DeletePrompt from "../../organisms/delete-prompt" -import EditAllocationDrawer from "../../../domain/orders/details/allocations/edit-allocation-modal" import EditIcon from "../../fundamentals/icons/edit-icon" +import EditReservationDrawer from "../../../domain/orders/details/reservation/edit-reservation-modal" import Fade from "../../atoms/fade-wrapper" import NewReservation from "./new" import { NextSelect } from "../../molecules/select/next-select" @@ -340,7 +340,7 @@ const ReservationRow = ({ })} {showEditReservation && ( - setShowEditReservation(null)} reservation={row.original} /> diff --git a/packages/admin-ui/ui/src/domain/orders/components/reservation-indicator/reservation-indicator.tsx b/packages/admin-ui/ui/src/domain/orders/components/reservation-indicator/reservation-indicator.tsx index 41611ba39a..b21b8eca6a 100644 --- a/packages/admin-ui/ui/src/domain/orders/components/reservation-indicator/reservation-indicator.tsx +++ b/packages/admin-ui/ui/src/domain/orders/components/reservation-indicator/reservation-indicator.tsx @@ -1,14 +1,15 @@ -import React from "react" -import { LineItem } from "@medusajs/medusa" -import { sum } from "lodash" -import { ReservationItemDTO } from "@medusajs/types" import { useAdminStockLocations, useAdminVariantsInventory } from "medusa-react" -import Tooltip from "../../../../components/atoms/tooltip" -import CircleQuarterSolid from "../../../../components/fundamentals/icons/circle-quarter-solid" -import WarningCircleIcon from "../../../../components/fundamentals/icons/warning-circle" -import CheckCircleFillIcon from "../../../../components/fundamentals/icons/check-circle-fill-icon" -import EditAllocationDrawer from "../../details/allocations/edit-allocation-modal" + import Button from "../../../../components/fundamentals/button" +import CheckCircleFillIcon from "../../../../components/fundamentals/icons/check-circle-fill-icon" +import CircleQuarterSolid from "../../../../components/fundamentals/icons/circle-quarter-solid" +import EditReservationDrawer from "../../details/reservation/edit-reservation-modal" +import { LineItem } from "@medusajs/medusa" +import React from "react" +import { ReservationItemDTO } from "@medusajs/types" +import Tooltip from "../../../../components/atoms/tooltip" +import WarningCircleIcon from "../../../../components/fundamentals/icons/warning-circle" +import { sum } from "lodash" const ReservationIndicator = ({ reservations, @@ -35,9 +36,9 @@ const ReservationIndicator = ({ const reservationsSum = sum(reservations?.map((r) => r.quantity) || []) - const allocatableSum = lineItem.quantity - (lineItem?.fulfilled_quantity || 0) + const reservableSum = lineItem.quantity - (lineItem?.fulfilled_quantity || 0) - const awaitingAllocation = allocatableSum - reservationsSum + const awaitingReservation = reservableSum - reservationsSum if ( isLoading || @@ -49,19 +50,19 @@ const ReservationIndicator = ({ } return ( -
+
- {reservationsSum || awaitingAllocation ? ( + {reservationsSum || awaitingReservation ? (
- {!!awaitingAllocation && ( + {!!awaitingReservation && ( - {awaitingAllocation} items await allocation + {awaitingReservation} items not reserved )} {reservations?.map((reservation) => ( - - {awaitingAllocation ? ( + {awaitingReservation ? ( reservationsSum ? ( ) : ( @@ -92,7 +93,7 @@ const ReservationIndicator = ({ {reservation && ( - setReservation(null)} reservation={reservation} @@ -103,7 +104,7 @@ const ReservationIndicator = ({ ) } -const EditAllocationButton = ({ +const EditReservationButton = ({ reservation, locationName, onClick, @@ -123,7 +124,7 @@ const EditAllocationButton = ({ size="small" className="mt-2 w-full border" > - Edit Allocation + Edit reservation
) diff --git a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/draft-summary.tsx b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/draft-summary.tsx index 82c4d69400..f06439f6db 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/draft-summary.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/draft-summary.tsx @@ -1,24 +1,25 @@ -import React, { useMemo } from "react" -import { sum } from "lodash" import { AdminGetVariantsVariantInventoryRes, DraftOrder, VariantInventory, } from "@medusajs/medusa" -import Badge from "../../../../components/fundamentals/badge" -import ImagePlaceholder from "../../../../components/fundamentals/image-placeholder" -import BodyCard from "../../../../components/organisms/body-card" -import { formatAmountWithSymbol } from "../../../../utils/prices" -import { DisplayTotal } from "../templates" -import { ActionType } from "../../../../components/molecules/actionables" -import { useFeatureFlag } from "../../../../providers/feature-flag-provider" -import useToggleState from "../../../../hooks/use-toggle-state" +import React, { useMemo } from "react" import { useAdminReservations, useMedusa } from "medusa-react" -import { ReservationItemDTO } from "@medusajs/types" + +import { ActionType } from "../../../../components/molecules/actionables" +import Badge from "../../../../components/fundamentals/badge" +import BodyCard from "../../../../components/organisms/body-card" +import { DisplayTotal } from "../templates" +import ImagePlaceholder from "../../../../components/fundamentals/image-placeholder" import ReservationIndicator from "../../components/reservation-indicator/reservation-indicator" -import AllocateItemsModal from "../allocations/allocate-items-modal" +import { ReservationItemDTO } from "@medusajs/types" +import ReserveItemsModal from "../reservation/reserve-items-modal" import { Response } from "@medusajs/medusa-js" import StatusIndicator from "../../../../components/fundamentals/status-indicator" +import { formatAmountWithSymbol } from "../../../../utils/prices" +import { sum } from "lodash" +import { useFeatureFlag } from "../../../../providers/feature-flag-provider" +import useToggleState from "../../../../hooks/use-toggle-state" type DraftSummaryCardProps = { order: DraftOrder @@ -102,9 +103,9 @@ const DraftSummaryCard: React.FC = ({ order }) => { }, [reservations, inventoryEnabled]) const { - state: allocationModalIsOpen, - open: showAllocationModal, - close: closeAllocationModal, + state: reservationModalIsOpen, + open: showReservationModal, + close: closeReservationModal, } = useToggleState() const allItemsReserved = useMemo(() => { @@ -132,11 +133,11 @@ const DraftSummaryCard: React.FC = ({ order }) => { if (inventoryEnabled && !allItemsReserved) { actionables.push({ label: "Allocate", - onClick: showAllocationModal, + onClick: showReservationModal, }) } return actionables - }, [inventoryEnabled, showAllocationModal, allItemsReserved]) + }, [inventoryEnabled, showReservationModal, allItemsReserved]) return ( = ({ order }) => { isFeatureEnabled("inventoryService") && Array.isArray(reservations) && ( ) @@ -258,11 +259,11 @@ const DraftSummaryCard: React.FC = ({ order }) => { totalTitle={`Total`} />
- {allocationModalIsOpen && ( - )} diff --git a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx index 64cb77dea5..a022a9366a 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/detail-cards/summary.tsx @@ -7,13 +7,13 @@ import { DisplayTotal, PaymentDetails } from "../templates" import React, { useContext, useMemo } from "react" import { ActionType } from "../../../../components/molecules/actionables" -import AllocateItemsModal from "../allocations/allocate-items-modal" import Badge from "../../../../components/fundamentals/badge" import BodyCard from "../../../../components/organisms/body-card" import CopyToClipboard from "../../../../components/atoms/copy-to-clipboard" import { OrderEditContext } from "../../edit/context" import OrderLine from "../order-line" import { ReservationItemDTO } from "@medusajs/types" +import ReserveItemsModal from "../reservation/reserve-items-modal" import { Response } from "@medusajs/medusa-js" import StatusIndicator from "../../../../components/fundamentals/status-indicator" import { sum } from "lodash" @@ -28,9 +28,9 @@ type SummaryCardProps = { const SummaryCard: React.FC = ({ order, reservations }) => { const { - state: allocationModalIsOpen, - open: showAllocationModal, - close: closeAllocationModal, + state: reservationModalIsOpen, + open: showReservationModal, + close: closeReservationModal, } = useToggleState() const { showModal } = useContext(OrderEditContext) @@ -158,11 +158,11 @@ const SummaryCard: React.FC = ({ order, reservations }) => { if (isFeatureEnabled("inventoryService") && !allItemsReserved) { actionables.push({ label: "Allocate", - onClick: showAllocationModal, + onClick: showReservationModal, }) } return actionables - }, [showModal, isFeatureEnabled, showAllocationModal, allItemsReserved]) + }, [showModal, isFeatureEnabled, showReservationModal, allItemsReserved]) const isAllocatable = !["canceled", "archived"].includes(order.status) @@ -177,13 +177,13 @@ const SummaryCard: React.FC = ({ order, reservations }) => { onClick={ allItemsReserved || !isAllocatable ? undefined - : showAllocationModal + : showReservationModal } variant={allItemsReserved || !isAllocatable ? "success" : "danger"} title={ allItemsReserved || !isAllocatable ? "Allocated" - : "Awaits allocation" + : "Not fully allocated" } className="rounded-rounded border px-3 py-1.5" /> @@ -269,11 +269,11 @@ const SummaryCard: React.FC = ({ order, reservations }) => { currency={order.currency_code} />
- {allocationModalIsOpen && ( - )} diff --git a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/reservation/edit-reservation-modal.tsx similarity index 92% rename from packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx rename to packages/admin-ui/ui/src/domain/orders/details/reservation/edit-reservation-modal.tsx index 78e6457d99..a469373766 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/allocations/edit-allocation-modal.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/reservation/edit-reservation-modal.tsx @@ -17,11 +17,11 @@ import { } from "medusa-react" import { useEffect, useMemo } from "react" -import { AllocationLineItemForm } from "./allocate-items-modal" import Button from "../../../../components/fundamentals/button" import CrossIcon from "../../../../components/fundamentals/icons/cross-icon" import InputField from "../../../../components/molecules/input" import { LineItem } from "@medusajs/medusa" +import { ReserveLineItemForm } from "./reserve-items-modal" import Select from "../../../../components/molecules/select/next-select/select" import SideModal from "../../../../components/molecules/modal/side-modal" import Thumbnail from "../../../../components/atoms/thumbnail" @@ -30,13 +30,13 @@ import { nestedForm } from "../../../../utils/nested-form" import useNotification from "../../../../hooks/use-notification" import useToggleState from "../../../../hooks/use-toggle-state" -type EditAllocationLineItemForm = { +type EditReservationLineItemForm = { location: { label: string; value: string } - item: AllocationLineItemForm + item: ReserveLineItemForm metadata: MetadataFormType } -const EditAllocationDrawer = ({ +const EditReservationDrawer = ({ close, reservation, item, @@ -47,7 +47,7 @@ const EditAllocationDrawer = ({ item?: LineItem totalReservedQuantity?: number }) => { - const form = useForm({ + const form = useForm({ defaultValues: { item: { description: reservation.description, @@ -92,14 +92,14 @@ const EditAllocationDrawer = ({ deleteReservation(undefined, { onSuccess: () => { notification( - "Allocation was deleted", + "Reservation was deleted", "The allocated items have been released.", "success" ) close() }, onError: () => { - notification("Error", "Failed to delete the allocation ", "error") + notification("Error", "Failed to delete the reservation ", "error") }, }) } @@ -130,7 +130,7 @@ const EditAllocationDrawer = ({ } }, [reservation, setValue]) - const submit = (data: EditAllocationLineItemForm) => { + const submit = (data: EditReservationLineItemForm) => { if (!data.item.quantity) { return handleDelete() } @@ -139,20 +139,22 @@ const EditAllocationDrawer = ({ { quantity: data.item.quantity, location_id: data.location.value, - description: data.item.description, - metadata: hasMetadata ? getSubmittableMetadata(data.metadata) : null, + description: data.item.description || undefined, + metadata: hasMetadata + ? getSubmittableMetadata(data.metadata) + : undefined, }, { onSuccess: () => { notification( - "Allocation was updated", - "The allocation change was saved.", + "Reservation was updated", + "The reservation change was saved.", "success" ) close() }, onError: () => { - notification("Errors", "Failed to update allocation", "error") + notification("Errors", "Failed to update reservation", "error") }, } ) @@ -206,7 +208,7 @@ const EditAllocationDrawer = ({ >
-

Edit allocation

+

Edit Reservation

@@ -349,4 +351,4 @@ const EditAllocationDrawer = ({ ) } -export default EditAllocationDrawer +export default EditReservationDrawer diff --git a/packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx b/packages/admin-ui/ui/src/domain/orders/details/reservation/reserve-items-modal.tsx similarity index 94% rename from packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx rename to packages/admin-ui/ui/src/domain/orders/details/reservation/reserve-items-modal.tsx index 6d99efff43..1c6db7009b 100644 --- a/packages/admin-ui/ui/src/domain/orders/details/allocations/allocate-items-modal.tsx +++ b/packages/admin-ui/ui/src/domain/orders/details/reservation/reserve-items-modal.tsx @@ -22,18 +22,18 @@ import { getFulfillableQuantity } from "../create-fulfillment/item-table" import { sum } from "lodash" import useNotification from "../../../../hooks/use-notification" -type AllocationModalFormData = { +type ReserveModalFormData = { location?: { label: string; value: string } - items: AllocationLineItemForm[] + items: ReserveLineItemForm[] } -type AllocateItemsModalProps = { +type ReserveItemsModalProps = { items: LineItem[] reservationItemsMap: Record close: () => void } -const AllocateItemsModal: React.FC = ({ +const ReserveItemsModal: React.FC = ({ items, close, reservationItemsMap, @@ -42,7 +42,7 @@ const AllocateItemsModal: React.FC = ({ const { client: medusaClient } = useMedusa() const notification = useNotification() - const form = useForm({ + const form = useForm({ defaultValues: { items: [], }, @@ -64,7 +64,7 @@ const AllocateItemsModal: React.FC = ({ })) }, [stock_locations]) - const onSubmit = async (data: AllocationModalFormData) => { + const onSubmit = async (data: ReserveModalFormData) => { if (!data.location?.value) { return } @@ -130,7 +130,7 @@ const AllocateItemsModal: React.FC = ({ Cancel @@ -178,7 +178,7 @@ const AllocateItemsModal: React.FC = ({

{items?.map((item, i) => { return ( - = ({ ) } -export type AllocationLineItemForm = { +export type ReserveLineItemForm = { inventory_item_id: string line_item_id: string quantity: number description?: string | null } -export const AllocationLineItem: React.FC<{ - form: NestedForm +export const ReservationLineItem: React.FC<{ + form: NestedForm item: LineItem locationId?: string reservedQuantity?: number @@ -321,4 +321,4 @@ export const AllocationLineItem: React.FC<{ ) } -export default AllocateItemsModal +export default ReserveItemsModal