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

fix(admin-ui): Discount in DraftOrder create flow (#3378)

Browse Source 
Solves #3332
This commit is contained in:
Oliver Windall Juhl
2023-03-06 16:06:28 +00:00
committed by GitHub
parent 0a6aa0e624
commit ed0f777431
1 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/admin-ui/ui/src/domain/orders/new/components/summary.tsx
+38 -36
View File
@@ -3,7 +3,7 @@ import {
useAdminGetDiscountByCode, useAdminGetDiscountByCode,
useAdminShippingOptions, useAdminShippingOptions,
} from "medusa-react" } from "medusa-react"
import React, { useContext, useEffect, useMemo, useState } from "react" import { useContext, useEffect, useMemo, useState } from "react"
import { useWatch } from "react-hook-form" import { useWatch } from "react-hook-form"
import Avatar from "../../../../components/atoms/avatar" import Avatar from "../../../../components/atoms/avatar"
import Button from "../../../../components/fundamentals/button" import Button from "../../../../components/fundamentals/button"
@@ -64,9 +64,12 @@ const Summary = () => {
name: "custom_shipping_price", name: "custom_shipping_price",
}) })
const { discount, status } = useAdminGetDiscountByCode(discountCode!, { const { discount, status, isFetching } = useAdminGetDiscountByCode(
enabled: !!discountCode, discountCode!,
}) {
enabled: !!discountCode,
}
)
const { shipping_options } = useAdminShippingOptions( const { shipping_options } = useAdminShippingOptions(
{ region_id: region?.value }, { region_id: region?.value },
@@ -126,7 +129,7 @@ const Summary = () => {
<SummarySection title={"Items"} editIndex={1}> <SummarySection title={"Items"} editIndex={1}>
<Table> <Table>
<Table.Head> <Table.Head>
<Table.HeadRow className="text-grey-50 border-t inter-small-semibold"> <Table.HeadRow className="inter-small-semibold text-grey-50 border-t">
<Table.HeadCell>Details</Table.HeadCell> <Table.HeadCell>Details</Table.HeadCell>
<Table.HeadCell className="text-right">Quantity</Table.HeadCell> <Table.HeadCell className="text-right">Quantity</Table.HeadCell>
<Table.HeadCell className="text-right"> <Table.HeadCell className="text-right">
@@ -145,18 +148,18 @@ const Summary = () => {
className={clsx("border-b-grey-0 hover:bg-grey-0")} className={clsx("border-b-grey-0 hover:bg-grey-0")}
> >
<Table.Cell> <Table.Cell>
<div className="min-w-[240px] flex py-2"> <div className="flex min-w-[240px] py-2">
<div className="w-[30px] h-[40px] "> <div className="h-[40px] w-[30px] ">
{item.thumbnail ? ( {item.thumbnail ? (
<img <img
className="h-full w-full object-cover rounded" className="h-full w-full rounded object-cover"
src={item.thumbnail} src={item.thumbnail}
/> />
) : ( ) : (
<ImagePlaceholder /> <ImagePlaceholder />
)} )}
</div> </div>
<div className="inter-small-regular text-grey-50 flex flex-col ml-4"> <div className="inter-small-regular text-grey-50 ml-4 flex flex-col">
<span> <span>
<span className="text-grey-90"> <span className="text-grey-90">
{item.product_title} {item.product_title}
@@ -178,11 +181,11 @@ const Summary = () => {
</Table.Body> </Table.Body>
</Table> </Table>
{!showAddDiscount && !discount?.rule && ( {!showAddDiscount && !discount?.rule && (
<div className="w-full flex justify-end"> <div className="flex w-full justify-end">
<Button <Button
variant="ghost" variant="ghost"
size="small" size="small"
className="border border-grey-20 inter-small-semibold" className="inter-small-semibold border-grey-20 border"
onClick={() => setShowAddDiscount(true)} onClick={() => setShowAddDiscount(true)}
> >
<PlusIcon size={20} /> <PlusIcon size={20} />
@@ -193,7 +196,7 @@ const Summary = () => {
{showAddDiscount && !discount?.rule && ( {showAddDiscount && !discount?.rule && (
<> <>
<div> <div>
<div className="flex w-full items-center gap-x-base"> <div className="gap-x-base flex w-full items-center">
<Input <Input
type="text" type="text"
placeholder="SUMMER10" placeholder="SUMMER10"
@@ -203,7 +206,7 @@ const Summary = () => {
/> />
<Button <Button
variant="ghost" variant="ghost"
className="text-grey-40 w-8 h-8" className="text-grey-40 h-8 w-8"
size="small" size="small"
type="button" type="button"
onClick={() => setShowAddDiscount(false)} onClick={() => setShowAddDiscount(false)}
@@ -211,18 +214,17 @@ const Summary = () => {
<CrossIcon size={20} /> <CrossIcon size={20} />
</Button> </Button>
</div> </div>
{discError && (
<div className="pt-2">
<span className="text-rose-50">{discError}</span>
</div>
)}
</div> </div>
<div className="w-full flex justify-end mt-4 ">
<div className="space-between mt-4 flex w-full justify-between ">
<div className="pt-2">
{discError && <span className="text-rose-50">{discError}</span>}
</div>
<Button <Button
className="border h-full border-grey-20" className="border-grey-20 h-full border"
variant="ghost" variant="ghost"
size="small" size="small"
loading={status === "loading"} loading={isFetching}
onClick={() => handleAddDiscount()} onClick={() => handleAddDiscount()}
> >
<PlusIcon size={20} /> <PlusIcon size={20} />
@@ -232,8 +234,8 @@ const Summary = () => {
</> </>
)} )}
{discount && regionObj && ( {discount && regionObj && (
<div className="flex flex-col w-full border-b border-t border-grey-20 pt-4 mt-4 last:border-b-0 inter-small-regular "> <div className="inter-small-regular border-grey-20 mt-4 flex w-full flex-col border-b border-t pt-4 last:border-b-0 ">
<div className="flex w-full justify-between inter-base-semibold mb-4"> <div className="inter-base-semibold mb-4 flex w-full justify-between">
<span> <span>
Discount Discount
<span className="inter-base-regular text-grey-50 ml-0.5"> <span className="inter-base-regular text-grey-50 ml-0.5">
@@ -249,7 +251,7 @@ const Summary = () => {
</div> </div>
<div className="flex w-full"> <div className="flex w-full">
<div <div
className={clsx("flex flex-col border-grey-20 pr-6", { className={clsx("border-grey-20 flex flex-col pr-6", {
"border-r": discount.rule.type !== "free_shipping", "border-r": discount.rule.type !== "free_shipping",
})} })}
> >
@@ -257,20 +259,20 @@ const Summary = () => {
<span> <span>
{discount.rule.type !== "free_shipping" {discount.rule.type !== "free_shipping"
? `${discount.rule.type ? `${discount.rule.type
.charAt(0) .charAt(0)
.toUpperCase()}${discount.rule.type.slice(1)}` .toUpperCase()}${discount.rule.type.slice(1)}`
: "Free Shipping"} : "Free Shipping"}
</span> </span>
</div> </div>
{discount.rule.type !== "free_shipping" && ( {discount.rule.type !== "free_shipping" && (
<div className="pl-6 flex flex-col"> <div className="flex flex-col pl-6">
<span className="text-grey-50">Value</span> <span className="text-grey-50">Value</span>
<span> <span>
{discount.rule.type === "fixed" {discount.rule.type === "fixed"
? `${displayAmount( ? `${displayAmount(
regionObj.currency_code, regionObj.currency_code,
discount.rule.value discount.rule.value
)} ${regionObj.currency_code.toUpperCase()}` )} ${regionObj.currency_code.toUpperCase()}`
: `${discount.rule.value} %`} : `${discount.rule.value} %`}
</span> </span>
</div> </div>
@@ -281,7 +283,7 @@ const Summary = () => {
</SummarySection> </SummarySection>
<SummarySection title={"Customer"} editIndex={3}> <SummarySection title={"Customer"} editIndex={3}>
<div className="flex items-center"> <div className="flex items-center">
<div className="w-5 h-5 mr-3"> <div className="mr-3 h-5 w-5">
<Avatar <Avatar
color="bg-fuschia-40" color="bg-fuschia-40"
user={{ user={{
@@ -298,9 +300,9 @@ const Summary = () => {
{selectedShippingOption && ( {selectedShippingOption && (
<SummarySection title={"Shipping details"} editIndex={2}> <SummarySection title={"Shipping details"} editIndex={2}>
<div className="grid grid-cols-2 gap-x-6 w-full"> <div className="grid w-full grid-cols-2 gap-x-6">
{!isNullishObject(shipping) && shipping && ( {!isNullishObject(shipping) && shipping && (
<div className="border-r flex flex-col border-grey-20 pr-6"> <div className="border-grey-20 flex flex-col border-r pr-6">
<span className="text-grey-50">Address</span> <span className="text-grey-50">Address</span>
<span> <span>
{shipping.address_1}, {shipping.address_2} {shipping.address_1}, {shipping.address_2}
@@ -318,7 +320,7 @@ const Summary = () => {
{selectedShippingOption.name} -{" "} {selectedShippingOption.name} -{" "}
{customShippingPrice && regionObj ? ( {customShippingPrice && regionObj ? (
<p> <p>
<span className="line-through mr-2 text-grey-40"> <span className="text-grey-40 mr-2 line-through">
{extractOptionPrice(shippingOptionPrice, regionObj)} {extractOptionPrice(shippingOptionPrice, regionObj)}
</span> </span>
{displayAmount( {displayAmount(
@@ -356,8 +358,8 @@ const Summary = () => {
const SummarySection = ({ title, editIndex, children }) => { const SummarySection = ({ title, editIndex, children }) => {
const { setPage } = useContext(SteppedContext) const { setPage } = useContext(SteppedContext)
return ( return (
<div className="flex flex-col w-full border-b border-grey-20 mt-4 pb-8 last:border-b-0 inter-small-regular "> <div className="inter-small-regular border-grey-20 mt-4 flex w-full flex-col border-b pb-8 last:border-b-0 ">
<div className="flex w-full justify-between inter-base-semibold mb-4"> <div className="inter-base-semibold mb-4 flex w-full justify-between">
{title} {title}
<span <span
onClick={() => setPage(editIndex)} onClick={() => setPage(editIndex)}