scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/SW-1371-delete-ancillary (pull request #1455)

Browse Source 
feat(SW-1371): delete ancillary

* feat(SW-1371): delete ancillary

* Remove outline from dialog

* Consistent return type from mutation

* Error flow


Approved-by: Michael Zetterberg
Approved-by: Pontus Dreij
This commit is contained in:
Niclas Edenvin
2025-03-04 14:22:15 +00:00
parent f80c2e9583
commit c88aa92aba
12 changed files with 211 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/RemoveButton.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { useIntl } from "react-intl"
import { trpc } from "@/lib/trpc/client"
import Dialog from "@/components/Dialog"
import { DeleteIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
export default function RemoveButton({
confirmationNumber,
code,
title,
onSuccess,
}: {
confirmationNumber: string
code: string
title?: string
onSuccess: () => void
}) {
const lang = useLang()
const intl = useIntl()
const removePackage = trpc.booking.removePackage.useMutation()
return (
<Dialog
bodyText={intl.formatMessage({
id: "Are you sure you want to remove this product?",
})}
proceedText={intl.formatMessage({ id: "Remove" })}
proceedIsPending={removePackage.isPending}
cancelButtonText={intl.formatMessage({ id: "Cancel" })}
titleText={`${intl.formatMessage({ id: "Remove" })} ${title}`}
trigger={
<Button intent="text" size="small" variant="icon" theme="base">
<DeleteIcon />
{intl.formatMessage({ id: "Remove" })}
</Button>
}
proceedOnClick={(close) => {
removePackage.mutate(
{
language: lang,
confirmationNumber,
codes: [code],
},
{
onSuccess: (data) => {
if (!data) {
throw new Error()
}
close()
onSuccess()
},
onError: () => {
toast.error(intl.formatMessage({ id: "Something went wrong!" }))
},
}
)
}}
/>
)
}

97
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -1,6 +1,7 @@
import { useRouter } from "next/navigation"
import { useIntl } from "react-intl"
import { CheckCircleIcon, DeleteIcon, EditIcon } from "@/components/Icons"
import { CheckCircleIcon, EditIcon } from "@/components/Icons"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Button from "@/components/TempDesignSystem/Button"
@@ -8,6 +9,8 @@ import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import RemoveButton from "./RemoveButton"
import styles from "./addedAncillaries.module.css"
import type { AddedAncillariesProps } from "@/types/components/myPages/myStay/ancillaries"
@@ -17,6 +20,7 @@ export function AddedAncillaries({
booking,
}: AddedAncillariesProps) {
const intl = useIntl()
const router = useRouter()
return (
<div className={styles.container}>
@@ -76,30 +80,29 @@ export function AddedAncillaries({
</div>
<div className={styles.footerMobile}>
<div className={styles.actions}>
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<EditIcon />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider
variant="vertical"
color="baseSurfaceSubtleNormal"
/>
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<DeleteIcon />
{intl.formatMessage({ id: "Remove" })}
</Button>
</div>
{booking.confirmationNumber && ancillary.code ? (
<div className={styles.actions}>
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<EditIcon />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider
variant="vertical"
color="baseSurfaceSubtleNormal"
/>
<RemoveButton
confirmationNumber={booking.confirmationNumber}
code={ancillary.code}
title={ancillaryItem?.title}
onSuccess={() => router.refresh()}
/>
</div>
) : null}
</div>
</AccordionItem>
</Accordion>
@@ -135,27 +138,29 @@ export function AddedAncillaries({
</>
)}
</div>
<div className={styles.actions}>
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<EditIcon />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<DeleteIcon />
{intl.formatMessage({ id: "Remove" })}
</Button>
</div>
{booking.confirmationNumber && ancillary.code ? (
<div className={styles.actions}>
<Button
intent="text"
size="small"
variant="icon"
theme="base"
>
<EditIcon />
{intl.formatMessage({ id: "Modify" })}
</Button>
<Divider
variant="vertical"
color="baseSurfaceSubtleNormal"
/>
<RemoveButton
confirmationNumber={booking.confirmationNumber}
code={ancillary.code}
title={ancillaryItem?.title}
onSuccess={() => router.refresh()}
/>
</div>
) : null}
</div>
</div>
</>