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,
useAdminShippingOptions,
} 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 Avatar from "../../../../components/atoms/avatar"
import Button from "../../../../components/fundamentals/button"
@@ -64,9 +64,12 @@ const Summary = () => {
name: "custom_shipping_price",
})
const { discount, status } = useAdminGetDiscountByCode(discountCode!, {
enabled: !!discountCode,
})
const { discount, status, isFetching } = useAdminGetDiscountByCode(
discountCode!,
{
enabled: !!discountCode,
}
)
const { shipping_options } = useAdminShippingOptions(
{ region_id: region?.value },
@@ -126,7 +129,7 @@ const Summary = () => {
<SummarySection title={"Items"} editIndex={1}>
<Table>
<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 className="text-right">Quantity</Table.HeadCell>
<Table.HeadCell className="text-right">
@@ -145,18 +148,18 @@ const Summary = () => {
className={clsx("border-b-grey-0 hover:bg-grey-0")}
>
<Table.Cell>
<div className="min-w-[240px] flex py-2">
<div className="w-[30px] h-[40px] ">
<div className="flex min-w-[240px] py-2">
<div className="h-[40px] w-[30px] ">
{item.thumbnail ? (
<img
className="h-full w-full object-cover rounded"
className="h-full w-full rounded object-cover"
src={item.thumbnail}
/>
) : (
<ImagePlaceholder />
)}
</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 className="text-grey-90">
{item.product_title}
@@ -178,11 +181,11 @@ const Summary = () => {
</Table.Body>
</Table>
{!showAddDiscount && !discount?.rule && (
<div className="w-full flex justify-end">
<div className="flex w-full justify-end">
<Button
variant="ghost"
size="small"
className="border border-grey-20 inter-small-semibold"
className="inter-small-semibold border-grey-20 border"
onClick={() => setShowAddDiscount(true)}
>
<PlusIcon size={20} />
@@ -193,7 +196,7 @@ const Summary = () => {
{showAddDiscount && !discount?.rule && (
<>
<div>
<div className="flex w-full items-center gap-x-base">
<div className="gap-x-base flex w-full items-center">
<Input
type="text"
placeholder="SUMMER10"
@@ -203,7 +206,7 @@ const Summary = () => {
/>
<Button
variant="ghost"
className="text-grey-40 w-8 h-8"
className="text-grey-40 h-8 w-8"
size="small"
type="button"
onClick={() => setShowAddDiscount(false)}
@@ -211,18 +214,17 @@ const Summary = () => {
<CrossIcon size={20} />
</Button>
</div>
{discError && (
<div className="pt-2">
<span className="text-rose-50">{discError}</span>
</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
className="border h-full border-grey-20"
className="border-grey-20 h-full border"
variant="ghost"
size="small"
loading={status === "loading"}
loading={isFetching}
onClick={() => handleAddDiscount()}
>
<PlusIcon size={20} />
@@ -232,8 +234,8 @@ const Summary = () => {
</>
)}
{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="flex w-full justify-between inter-base-semibold mb-4">
<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="inter-base-semibold mb-4 flex w-full justify-between">
<span>
Discount
<span className="inter-base-regular text-grey-50 ml-0.5">
@@ -249,7 +251,7 @@ const Summary = () => {
</div>
<div className="flex w-full">
<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",
})}
>
@@ -257,20 +259,20 @@ const Summary = () => {
<span>
{discount.rule.type !== "free_shipping"
? `${discount.rule.type
.charAt(0)
.toUpperCase()}${discount.rule.type.slice(1)}`
.charAt(0)
.toUpperCase()}${discount.rule.type.slice(1)}`
: "Free Shipping"}
</span>
</div>
{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>
{discount.rule.type === "fixed"
? `${displayAmount(
regionObj.currency_code,
discount.rule.value
)} ${regionObj.currency_code.toUpperCase()}`
regionObj.currency_code,
discount.rule.value
)} ${regionObj.currency_code.toUpperCase()}`
: `${discount.rule.value} %`}
</span>
</div>
@@ -281,7 +283,7 @@ const Summary = () => {
</SummarySection>
<SummarySection title={"Customer"} editIndex={3}>
<div className="flex items-center">
<div className="w-5 h-5 mr-3">
<div className="mr-3 h-5 w-5">
<Avatar
color="bg-fuschia-40"
user={{
@@ -298,9 +300,9 @@ const Summary = () => {
{selectedShippingOption && (
<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 && (
<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>
{shipping.address_1}, {shipping.address_2}
@@ -318,7 +320,7 @@ const Summary = () => {
{selectedShippingOption.name} -{" "}
{customShippingPrice && regionObj ? (
<p>
<span className="line-through mr-2 text-grey-40">
<span className="text-grey-40 mr-2 line-through">
{extractOptionPrice(shippingOptionPrice, regionObj)}
</span>
{displayAmount(
@@ -356,8 +358,8 @@ const Summary = () => {
const SummarySection = ({ title, editIndex, children }) => {
const { setPage } = useContext(SteppedContext)
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="flex w-full justify-between inter-base-semibold mb-4">
<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="inter-base-semibold mb-4 flex w-full justify-between">
{title}
<span
onClick={() => setPage(editIndex)}