@@ -11,13 +11,17 @@ import {
1111 Container ,
1212 Copy ,
1313 Heading ,
14+ Label ,
15+ Prompt ,
1416 StatusBadge ,
17+ Switch ,
1518 Text ,
1619 Tooltip ,
1720 toast ,
1821 usePrompt ,
1922} from "@medusajs/ui"
2023import { format } from "date-fns"
24+ import { useState } from "react"
2125import { useTranslation } from "react-i18next"
2226import { Link , useNavigate } from "react-router-dom"
2327import { ActionMenu } from "../../../../../components/common/action-menu"
@@ -264,17 +268,24 @@ const Fulfillment = ({
264268 const showDeliveryButton =
265269 ! fulfillment . canceled_at && ! fulfillment . delivered_at
266270
267- const handleMarkAsDelivered = async ( ) => {
268- const res = await prompt ( {
269- title : t ( "general.areYouSure" ) ,
270- description : t ( "orders.fulfillment.markAsDeliveredWarning" ) ,
271- confirmText : t ( "actions.continue" ) ,
272- cancelText : t ( "actions.cancel" ) ,
273- variant : "confirmation" ,
274- } )
271+ const [ sendNotification , setSendNotification ] = useState (
272+ ! order . no_notification
273+ )
274+ const [ showDeliveredPrompt , setShowDeliveredPrompt ] = useState ( false )
275275
276- if ( res ) {
277- await markAsDelivered ( undefined , {
276+ const handleMarkAsDelivered = ( ) => {
277+ setShowDeliveredPrompt ( true )
278+ }
279+
280+ const handleCancelDeliveredPrompt = ( ) => {
281+ setShowDeliveredPrompt ( false )
282+ }
283+
284+ const handleConfirmDelivered = async ( ) => {
285+ setShowDeliveredPrompt ( false )
286+ await markAsDelivered (
287+ { no_notification : ! sendNotification } ,
288+ {
278289 onSuccess : ( ) => {
279290 toast . success (
280291 t (
@@ -287,8 +298,8 @@ const Fulfillment = ({
287298 onError : ( e ) => {
288299 toast . error ( e . message )
289300 } ,
290- } )
291- }
301+ }
302+ )
292303 }
293304
294305 const handleCancel = async ( ) => {
@@ -484,6 +495,40 @@ const Fulfillment = ({
484495 ) }
485496 </ div >
486497 ) }
498+
499+ < Prompt open = { showDeliveredPrompt } variant = "confirmation" >
500+ < Prompt . Content >
501+ < Prompt . Header >
502+ < Prompt . Title > { t ( "general.areYouSure" ) } </ Prompt . Title >
503+ < Prompt . Description >
504+ { t ( "orders.fulfillment.markAsDeliveredWarning" ) }
505+ </ Prompt . Description >
506+ </ Prompt . Header >
507+ < div className = "border-ui-border-base mt-6 flex items-center justify-between border-y border-dotted p-6" >
508+ < Label
509+ htmlFor = { `send-notification-${ fulfillment . id } ` }
510+ className = "txt-compact-small text-ui-fg-subtle"
511+ >
512+ { t ( "orders.returns.sendNotification" ) }
513+ </ Label >
514+ < Switch
515+ id = { `send-notification-${ fulfillment . id } ` }
516+ dir = "ltr"
517+ className = "rtl:rotate-180"
518+ checked = { sendNotification }
519+ onCheckedChange = { setSendNotification }
520+ />
521+ </ div >
522+ < Prompt . Footer >
523+ < Prompt . Cancel onClick = { handleCancelDeliveredPrompt } >
524+ { t ( "actions.cancel" ) }
525+ </ Prompt . Cancel >
526+ < Prompt . Action onClick = { handleConfirmDelivered } >
527+ { t ( "actions.continue" ) }
528+ </ Prompt . Action >
529+ </ Prompt . Footer >
530+ </ Prompt . Content >
531+ </ Prompt >
487532 </ Container >
488533 )
489534}
0 commit comments